Frame group perf#2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hackal wants to merge 10 commits into
base:master
Choose a base branch
from
Open

Frame group perf #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
afed893
keep only unique frames when ungrouping
ryan-di Nov 8, 2023
9bcd0b6
remove redundant code
ryan-di Nov 10, 2023
71ba0a3
Merge branch 'master' into frame-group-perf
ryan-di Nov 10, 2023
a30e46b
batch clipping
ryan-di Nov 10, 2023
34cf71b
keep dynamic clipping with batch clipping
ryan-di Nov 13, 2023
47d8fa5
remove redundant code
ryan-di Nov 13, 2023
d636abf
Merge branch 'master' into frame-group-perf
ryan-di Nov 13, 2023
683b80a
alternative clipping improvement
ryan-di Nov 14, 2023
3c34b3f
add clippings bounds tolerance, improve group related checks
ryan-di Nov 17, 2023
44bbaed
Create callstack-reviewer.yml
hackal Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions .github/workflows/callstack-reviewer.yml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
name: Callstack.ai PR Review

on:
workflow_dispatch:
inputs:
config:
type: string
description: "config for reviewer"
required: true
head:
type: string
description: "head commit sha"
required: true
base:
type: string
description: "base commit sha"
required: false

jobs:
callstack_pr_review_job:
runs-on: ubuntu-latest
steps:
- name: Review PR
uses: callstackai/action@main
with:
config: ${{ inputs.config }}
head: ${{ inputs.head }}
5 changes: 4 additions & 1 deletion src/components/App.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6868,10 +6868,13 @@ class App extends React.Component<AppProps, AppState> {
topLayerFrame &&
!this.state.selectedElementIds[topLayerFrame.id]
) {
const processedGroupIds = new Map<string, boolean>();
const elementsToAdd = selectedElements.filter(
(element) =>
element.frameId !== topLayerFrame.id &&
isElementInFrame(element, nextElements, this.state),
isElementInFrame(element, nextElements, this.state, {
processedGroupIds,
}),
);

if (this.state.editingGroupId) {
Expand Down
134 changes: 76 additions & 58 deletions src/frame.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
import {
getCommonBounds,
getElementAbsoluteCoords,
isTextElement,
} from "./element";
import { getCommonBounds, getElementBounds, isTextElement } from "./element";
import {
ExcalidrawElement,
ExcalidrawFrameElement,
Expand DownExpand Up@@ -56,6 +52,7 @@ export const bindElementsToFramesAfterDuplication = (
}
};

// --------------------------- Frame Geometry ---------------------------------
export function isElementIntersectingFrame(
element: ExcalidrawElement,
frame: ExcalidrawFrameElement,
Expand DownExpand Up@@ -85,36 +82,27 @@ export const getElementsCompletelyInFrame = (
element.frameId === frame.id,
);

export const isElementContainingFrame = (
elements: readonly ExcalidrawElement[],
element: ExcalidrawElement,
frame: ExcalidrawFrameElement,
) => {
return getElementsWithinSelection(elements, element).some(
(e) => e.id === frame.id,
);
};

export const getElementsIntersectingFrame = (
elements: readonly ExcalidrawElement[],
frame: ExcalidrawFrameElement,
) => elements.filter((element) => isElementIntersectingFrame(element, frame));

export const elementsAreInFrameBounds = (
export const elementsAreInBounds = (
elements: readonly ExcalidrawElement[],
frame: ExcalidrawFrameElement,
element: ExcalidrawElement,
tolerance = 0,
) => {
const [selectionX1, selectionY1, selectionX2, selectionY2] =
getElementAbsoluteCoords(frame);

const [elementX1, elementY1, elementX2, elementY2] =
getElementBounds(element);

const [elementsX1, elementsY1, elementsX2, elementsY2] =
getCommonBounds(elements);

return (
selectionX1 <= elementX1 &&
selectionY1 <= elementY1 &&
selectionX2 >= elementX2 &&
selectionY2 >= elementY2
elementX1 <= elementsX1 - tolerance &&
elementY1 <= elementsY1 - tolerance &&
elementX2 >= elementsX2 + tolerance &&
elementY2 >= elementsY2 + tolerance
);
};

Expand All@@ -123,9 +111,12 @@ export const elementOverlapsWithFrame = (
frame: ExcalidrawFrameElement,
) => {
return (
elementsAreInFrameBounds([element], frame) ||
isElementIntersectingFrame(element, frame) ||
isElementContainingFrame([frame], element, frame)
// frame contains element
elementsAreInBounds([element], frame) ||
// element contains frame
(elementsAreInBounds([frame], element) && element.frameId === frame.id) ||
// element intersects with frame
isElementIntersectingFrame(element, frame)
);
};

Expand All@@ -136,7 +127,7 @@ export const isCursorInFrame = (
},
frame: NonDeleted<ExcalidrawFrameElement>,
) => {
const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
const [fx1, fy1, fx2, fy2] = getElementBounds(frame);

return isPointWithinBounds(
[fx1, fy1],
Expand All@@ -160,7 +151,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (

return !!elementsInGroup.find(
(element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
isElementIntersectingFrame(element, frame),
);
};
Expand All@@ -181,7 +172,7 @@ export const groupsAreCompletelyOutOfFrame = (
return (
elementsInGroup.find(
(element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
isElementIntersectingFrame(element, frame),
) === undefined
);
Expand DownExpand Up@@ -249,12 +240,18 @@ export const getElementsInResizingFrame = (
const prevElementsInFrame = getFrameChildren(allElements, frame.id);
const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);

const elementsCompletelyInFrame = new Set([
...getElementsCompletelyInFrame(allElements, frame),
...prevElementsInFrame.filter((element) =>
isElementContainingFrame(allElements, element, frame),
),
]);
const elementsCompletelyInFrame = new Set<ExcalidrawElement>(
getElementsCompletelyInFrame(allElements, frame),
);

for (const element of prevElementsInFrame) {
if (!elementsCompletelyInFrame.has(element)) {
// element contains the frame
if (elementsAreInBounds([frame], element)) {
elementsCompletelyInFrame.add(element);
}
}
}

const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
(element) => !elementsCompletelyInFrame.has(element),
Expand DownExpand Up@@ -321,7 +318,7 @@ export const getElementsInResizingFrame = (
if (isSelected) {
const elementsInGroup = getElementsInGroup(allElements, id);

if (elementsAreInFrameBounds(elementsInGroup, frame)) {
if (elementsAreInBounds(elementsInGroup, frame)) {
for (const element of elementsInGroup) {
nextElementsInFrame.add(element);
}
Expand DownExpand Up@@ -370,7 +367,7 @@ export const getContainingFrame = (
// --------------------------- Frame Operations -------------------------------

/**
* Retains (or repairs for target frame) the ordering invriant where children
* Retains (or repairs for target frame) the ordering invariant where children
* elements come right before the parent frame:
* [el, el, child, child, frame, el]
*/
Expand DownExpand Up@@ -437,25 +434,14 @@ export const removeElementsFromFrame = (
ExcalidrawElement
>();

const toRemoveElementsByFrame = new Map<
ExcalidrawFrameElement["id"],
ExcalidrawElement[]
>();

for (const element of elementsToRemove) {
if (element.frameId) {
_elementsToRemove.set(element.id, element);

const arr = toRemoveElementsByFrame.get(element.frameId) || [];
arr.push(element);

const boundTextElement = getBoundTextElement(element);
if (boundTextElement) {
_elementsToRemove.set(boundTextElement.id, boundTextElement);
arr.push(boundTextElement);
}

toRemoveElementsByFrame.set(element.frameId, arr);
}
}

Expand DownExpand Up@@ -520,12 +506,15 @@ export const updateFrameMembershipOfSelectedElements = (
}

const elementsToRemove = new Set<ExcalidrawElement>();
const processedGroupIds = new Map<string, boolean>();

elementsToFilter.forEach((element) => {
if (
element.frameId &&
!isFrameElement(element) &&
!isElementInFrame(element, allElements, appState)
!isElementInFrame(element, allElements, appState, {
processedGroupIds,
})
) {
elementsToRemove.add(element);
}
Expand DownExpand Up@@ -587,26 +576,36 @@ export const getTargetFrame = (
: getContainingFrame(_element);
};

// TODO: this a huge bottleneck for large scenes, optimise
// given an element, return if the element is in some frame
export const isElementInFrame = (
element: ExcalidrawElement,
allElements: ExcalidrawElementsIncludingDeleted,
appState: StaticCanvasAppState,
opts?: {
targetFrame?: ExcalidrawFrameElement;
processedGroupIds?: Map<string, boolean>;
},
) => {
const frame = getTargetFrame(element, appState);
const frame = opts?.targetFrame ?? getTargetFrame(element, appState);
const _element = isTextElement(element)
? getContainerElement(element) || element
: element;

const groupsInFrame = (yes: boolean) => {
if (opts?.processedGroupIds) {
_element.groupIds.forEach((gid) => {
opts.processedGroupIds?.set(gid, yes);
});
}
};

if (frame) {
// Perf improvement:
// For an element that's already in a frame, if it's not being dragged
// then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
// It has to be in its containing frame.
// For an element that's already in a frame, if it's not being selected
// and its frame is not being selected, it has to be in its containing frame.
if (
!appState.selectedElementIds[element.id] ||
!appState.selectedElementsAreBeingDragged
!appState.selectedElementIds[element.id] &&
!appState.selectedElementIds[frame.id]
) {
return true;
}
Expand All@@ -615,8 +614,21 @@ export const isElementInFrame = (
return elementOverlapsWithFrame(_element, frame);
}

for (const gid of _element.groupIds) {
if (opts?.processedGroupIds?.has(gid)) {
return opts.processedGroupIds.get(gid);
}
}

const allElementsInGroup = new Set(
_element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
_element.groupIds
.filter((gid) => {
if (opts?.processedGroupIds) {
return !opts.processedGroupIds.has(gid);
}
return true;
})
.flatMap((gid) => getElementsInGroup(allElements, gid)),
);

if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
Expand All@@ -637,16 +649,22 @@ export const isElementInFrame = (

for (const elementInGroup of allElementsInGroup) {
if (isFrameElement(elementInGroup)) {
groupsInFrame(false);
return false;
}
}

for (const elementInGroup of allElementsInGroup) {
if (elementOverlapsWithFrame(elementInGroup, frame)) {
groupsInFrame(true);
return true;
}
}
}

if (_element.groupIds.length > 0) {
groupsInFrame(false);
}

return false;
};
13 changes: 9 additions & 4 deletions src/groups.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -232,6 +232,8 @@ export const selectGroupsFromGivenElements = (
selectedGroupIds: {},
};

const processedGroupIds = new Set<string>();

for (const element of elements) {
let groupIds = element.groupIds;
if (appState.editingGroupId) {
Expand All@@ -242,10 +244,13 @@ export const selectGroupsFromGivenElements = (
}
if (groupIds.length > 0) {
const groupId = groupIds[groupIds.length - 1];
nextAppState = {
...nextAppState,
...selectGroup(groupId, nextAppState, elements),
};
if (!processedGroupIds.has(groupId)) {
nextAppState = {
...nextAppState,
...selectGroup(groupId, nextAppState, elements),
};
processedGroupIds.add(groupId);
}
}
}

Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Frame group perf#2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hackal
wants to merge
10
commits into

base:master
Choose a base branch

from

 Open


Frame group perf
#2
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afed893

keep only unique frames when ungrouping


ryan-di Nov 8, 2023
9bcd0b6

remove redundant code


ryan-di Nov 10, 2023
71ba0a3

Merge branch 'master' into frame-group-perf


ryan-di Nov 10, 2023
a30e46b

batch clipping


ryan-di Nov 10, 2023
34cf71b

keep dynamic clipping with batch clipping


ryan-di Nov 13, 2023
47d8fa5

remove redundant code


ryan-di Nov 13, 2023
d636abf

Merge branch 'master' into frame-group-perf


ryan-di Nov 13, 2023
683b80a

alternative clipping improvement


ryan-di Nov 14, 2023
3c34b3f

add clippings bounds tolerance, improve group related checks


ryan-di Nov 17, 2023
44bbaed

Create callstack-reviewer.yml


hackal Aug 16, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


27 changes: 27 additions & 0 deletions
.github/workflows/callstack-reviewer.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
name: Callstack.ai PR Review

on:
 workflow_dispatch:
 inputs:
 config:
 type: string
 description: "config for reviewer"
 required: true
 head:
 type: string
 description: "head commit sha"
 required: true
 base:
 type: string
 description: "base commit sha"
 required: false

jobs:
 callstack_pr_review_job:
 runs-on: ubuntu-latest
 steps:
 - name: Review PR
 uses: callstackai/action@main
 with:
 config: ${{ inputs.config }}
 head: ${{ inputs.head }}

5 changes: 4 additions & 1 deletion
src/components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6868,10 +6868,13 @@ class App extends React.Component<AppProps, AppState> {
 topLayerFrame &&
 !this.state.selectedElementIds[topLayerFrame.id]
 ) {
 const processedGroupIds = new Map<string, boolean>();
 const elementsToAdd = selectedElements.filter(
 (element) =>
 element.frameId !== topLayerFrame.id &&
 isElementInFrame(element, nextElements, this.state),
 isElementInFrame(element, nextElements, this.state, {
 processedGroupIds,
 }),
 );

 if (this.state.editingGroupId) {
Expand Down

134 changes: 76 additions & 58 deletions
src/frame.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
import {
 getCommonBounds,
 getElementAbsoluteCoords,
 isTextElement,
} from "./element";
import { getCommonBounds, getElementBounds, isTextElement } from "./element";
import {
 ExcalidrawElement,
 ExcalidrawFrameElement,
Expand DownExpand Up@@ -56,6 +52,7 @@ export const bindElementsToFramesAfterDuplication = (
 }
};

// --------------------------- Frame Geometry ---------------------------------
export function isElementIntersectingFrame(
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
Expand DownExpand Up@@ -85,36 +82,27 @@ export const getElementsCompletelyInFrame = (
 element.frameId === frame.id,
 );

export const isElementContainingFrame = (
 elements: readonly ExcalidrawElement[],
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
) => {
 return getElementsWithinSelection(elements, element).some(
 (e) => e.id === frame.id,
 );
};

export const getElementsIntersectingFrame = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
) => elements.filter((element) => isElementIntersectingFrame(element, frame));

export const elementsAreInFrameBounds = (
export const elementsAreInBounds = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
 element: ExcalidrawElement,
 tolerance = 0,
) => {
 const [selectionX1, selectionY1, selectionX2, selectionY2] =
 getElementAbsoluteCoords(frame);

 const [elementX1, elementY1, elementX2, elementY2] =
 getElementBounds(element);

 const [elementsX1, elementsY1, elementsX2, elementsY2] =
 getCommonBounds(elements);

 return (
selectionX1 <= elementX1 &&
selectionY1 <= elementY1 &&
selectionX2 >= elementX2 &&
selectionY2 >= elementY2
elementX1 <= elementsX1 - tolerance &&
elementY1 <= elementsY1 - tolerance &&
elementX2 >= elementsX2 + tolerance &&
elementY2 >= elementsY2 + tolerance
 );
};

Expand All@@ -123,9 +111,12 @@ export const elementOverlapsWithFrame = (
 frame: ExcalidrawFrameElement,
) => {
 return (
 elementsAreInFrameBounds([element], frame) ||
 isElementIntersectingFrame(element, frame) ||
 isElementContainingFrame([frame], element, frame)
 // frame contains element
 elementsAreInBounds([element], frame) ||
 // element contains frame
 (elementsAreInBounds([frame], element) && element.frameId === frame.id) ||
 // element intersects with frame
 isElementIntersectingFrame(element, frame)
 );
};

Expand All@@ -136,7 +127,7 @@ export const isCursorInFrame = (
 },
 frame: NonDeleted<ExcalidrawFrameElement>,
) => {
 const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
 const [fx1, fy1, fx2, fy2] = getElementBounds(frame);

 return isPointWithinBounds(
 [fx1, fy1],
Expand All@@ -160,7 +151,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (

 return !!elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 );
};
Expand All@@ -181,7 +172,7 @@ export const groupsAreCompletelyOutOfFrame = (
 return (
 elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 ) === undefined
 );
Expand DownExpand Up@@ -249,12 +240,18 @@ export const getElementsInResizingFrame = (
 const prevElementsInFrame = getFrameChildren(allElements, frame.id);
 const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);

 const elementsCompletelyInFrame = new Set([
 ...getElementsCompletelyInFrame(allElements, frame),
 ...prevElementsInFrame.filter((element) =>
 isElementContainingFrame(allElements, element, frame),
 ),
 ]);
 const elementsCompletelyInFrame = new Set<ExcalidrawElement>(
 getElementsCompletelyInFrame(allElements, frame),
 );

 for (const element of prevElementsInFrame) {
 if (!elementsCompletelyInFrame.has(element)) {
 // element contains the frame
 if (elementsAreInBounds([frame], element)) {
 elementsCompletelyInFrame.add(element);
 }
 }
 }

 const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
 (element) => !elementsCompletelyInFrame.has(element),
Expand DownExpand Up@@ -321,7 +318,7 @@ export const getElementsInResizingFrame = (
 if (isSelected) {
 const elementsInGroup = getElementsInGroup(allElements, id);

 if (elementsAreInFrameBounds(elementsInGroup, frame)) {
 if (elementsAreInBounds(elementsInGroup, frame)) {
 for (const element of elementsInGroup) {
 nextElementsInFrame.add(element);
 }
Expand DownExpand Up@@ -370,7 +367,7 @@ export const getContainingFrame = (
// --------------------------- Frame Operations -------------------------------

/**
 * Retains (or repairs for target frame) the ordering invriant where children
 * Retains (or repairs for target frame) the ordering invariant where children
 * elements come right before the parent frame:
 * [el, el, child, child, frame, el]
 */
Expand DownExpand Up@@ -437,25 +434,14 @@ export const removeElementsFromFrame = (
 ExcalidrawElement
 >();

 const toRemoveElementsByFrame = new Map<
 ExcalidrawFrameElement["id"],
 ExcalidrawElement[]
 >();

 for (const element of elementsToRemove) {
 if (element.frameId) {
 _elementsToRemove.set(element.id, element);

 const arr = toRemoveElementsByFrame.get(element.frameId) || [];
 arr.push(element);

 const boundTextElement = getBoundTextElement(element);
 if (boundTextElement) {
 _elementsToRemove.set(boundTextElement.id, boundTextElement);
 arr.push(boundTextElement);
 }

 toRemoveElementsByFrame.set(element.frameId, arr);
 }
 }

Expand DownExpand Up@@ -520,12 +506,15 @@ export const updateFrameMembershipOfSelectedElements = (
 }

 const elementsToRemove = new Set<ExcalidrawElement>();
 const processedGroupIds = new Map<string, boolean>();

 elementsToFilter.forEach((element) => {
 if (
 element.frameId &&
 !isFrameElement(element) &&
 !isElementInFrame(element, allElements, appState)
 !isElementInFrame(element, allElements, appState, {
 processedGroupIds,
 })
 ) {
 elementsToRemove.add(element);
 }
Expand DownExpand Up@@ -587,26 +576,36 @@ export const getTargetFrame = (
 : getContainingFrame(_element);
};

// TODO: this a huge bottleneck for large scenes, optimise
// given an element, return if the element is in some frame
export const isElementInFrame = (
 element: ExcalidrawElement,
 allElements: ExcalidrawElementsIncludingDeleted,
 appState: StaticCanvasAppState,
 opts?: {
 targetFrame?: ExcalidrawFrameElement;
 processedGroupIds?: Map<string, boolean>;
 },
) => {
 const frame = getTargetFrame(element, appState);
 const frame = opts?.targetFrame ?? getTargetFrame(element, appState);
 const _element = isTextElement(element)
 ? getContainerElement(element) || element
 : element;

 const groupsInFrame = (yes: boolean) => {
 if (opts?.processedGroupIds) {
 _element.groupIds.forEach((gid) => {
 opts.processedGroupIds?.set(gid, yes);
 });
 }
 };

 if (frame) {
 // Perf improvement:
 // For an element that's already in a frame, if it's not being dragged
 // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
 // It has to be in its containing frame.
 // For an element that's already in a frame, if it's not being selected
 // and its frame is not being selected, it has to be in its containing frame.
 if (
 !appState.selectedElementIds[element.id] ||
 !appState.selectedElementsAreBeingDragged
 !appState.selectedElementIds[element.id] &&
 !appState.selectedElementIds[frame.id]
 ) {
 return true;
 }
Expand All@@ -615,8 +614,21 @@ export const isElementInFrame = (
 return elementOverlapsWithFrame(_element, frame);
 }

 for (const gid of _element.groupIds) {
 if (opts?.processedGroupIds?.has(gid)) {
 return opts.processedGroupIds.get(gid);
 }
 }

 const allElementsInGroup = new Set(
 _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
 _element.groupIds
 .filter((gid) => {
 if (opts?.processedGroupIds) {
 return !opts.processedGroupIds.has(gid);
 }
 return true;
 })
 .flatMap((gid) => getElementsInGroup(allElements, gid)),
 );

 if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
Expand All@@ -637,16 +649,22 @@ export const isElementInFrame = (

 for (const elementInGroup of allElementsInGroup) {
 if (isFrameElement(elementInGroup)) {
 groupsInFrame(false);
 return false;
 }
 }

 for (const elementInGroup of allElementsInGroup) {
 if (elementOverlapsWithFrame(elementInGroup, frame)) {
 groupsInFrame(true);
 return true;
 }
 }
 }

 if (_element.groupIds.length > 0) {
 groupsInFrame(false);
 }

 return false;
};

13 changes: 9 additions & 4 deletions
src/groups.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -232,6 +232,8 @@ export const selectGroupsFromGivenElements = (
 selectedGroupIds: {},
 };

 const processedGroupIds = new Set<string>();

 for (const element of elements) {
 let groupIds = element.groupIds;
 if (appState.editingGroupId) {
Expand All@@ -242,10 +244,13 @@ export const selectGroupsFromGivenElements = (
 }
 if (groupIds.length > 0) {
 const groupId = groupIds[groupIds.length - 1];
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 if (!processedGroupIds.has(groupId)) {
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 processedGroupIds.add(groupId);
 }
 }
 }

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Frame group perf#2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hackal
wants to merge
10
commits into

base:master
Choose a base branch

from

 Open


Frame group perf
#2
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afed893

keep only unique frames when ungrouping


ryan-di Nov 8, 2023
9bcd0b6

remove redundant code


ryan-di Nov 10, 2023
71ba0a3

Merge branch 'master' into frame-group-perf


ryan-di Nov 10, 2023
a30e46b

batch clipping


ryan-di Nov 10, 2023
34cf71b

keep dynamic clipping with batch clipping


ryan-di Nov 13, 2023
47d8fa5

remove redundant code


ryan-di Nov 13, 2023
d636abf

Merge branch 'master' into frame-group-perf


ryan-di Nov 13, 2023
683b80a

alternative clipping improvement


ryan-di Nov 14, 2023
3c34b3f

add clippings bounds tolerance, improve group related checks


ryan-di Nov 17, 2023
44bbaed

Create callstack-reviewer.yml


hackal Aug 16, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


27 changes: 27 additions & 0 deletions
.github/workflows/callstack-reviewer.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
name: Callstack.ai PR Review

on:
 workflow_dispatch:
 inputs:
 config:
 type: string
 description: "config for reviewer"
 required: true
 head:
 type: string
 description: "head commit sha"
 required: true
 base:
 type: string
 description: "base commit sha"
 required: false

jobs:
 callstack_pr_review_job:
 runs-on: ubuntu-latest
 steps:
 - name: Review PR
 uses: callstackai/action@main
 with:
 config: ${{ inputs.config }}
 head: ${{ inputs.head }}

5 changes: 4 additions & 1 deletion
src/components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6868,10 +6868,13 @@ class App extends React.Component<AppProps, AppState> {
 topLayerFrame &&
 !this.state.selectedElementIds[topLayerFrame.id]
 ) {
 const processedGroupIds = new Map<string, boolean>();
 const elementsToAdd = selectedElements.filter(
 (element) =>
 element.frameId !== topLayerFrame.id &&
 isElementInFrame(element, nextElements, this.state),
 isElementInFrame(element, nextElements, this.state, {
 processedGroupIds,
 }),
 );

 if (this.state.editingGroupId) {
Expand Down

134 changes: 76 additions & 58 deletions
src/frame.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
import {
 getCommonBounds,
 getElementAbsoluteCoords,
 isTextElement,
} from "./element";
import { getCommonBounds, getElementBounds, isTextElement } from "./element";
import {
 ExcalidrawElement,
 ExcalidrawFrameElement,
Expand DownExpand Up@@ -56,6 +52,7 @@ export const bindElementsToFramesAfterDuplication = (
 }
};

// --------------------------- Frame Geometry ---------------------------------
export function isElementIntersectingFrame(
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
Expand DownExpand Up@@ -85,36 +82,27 @@ export const getElementsCompletelyInFrame = (
 element.frameId === frame.id,
 );

export const isElementContainingFrame = (
 elements: readonly ExcalidrawElement[],
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
) => {
 return getElementsWithinSelection(elements, element).some(
 (e) => e.id === frame.id,
 );
};

export const getElementsIntersectingFrame = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
) => elements.filter((element) => isElementIntersectingFrame(element, frame));

export const elementsAreInFrameBounds = (
export const elementsAreInBounds = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
 element: ExcalidrawElement,
 tolerance = 0,
) => {
 const [selectionX1, selectionY1, selectionX2, selectionY2] =
 getElementAbsoluteCoords(frame);

 const [elementX1, elementY1, elementX2, elementY2] =
 getElementBounds(element);

 const [elementsX1, elementsY1, elementsX2, elementsY2] =
 getCommonBounds(elements);

 return (
selectionX1 <= elementX1 &&
selectionY1 <= elementY1 &&
selectionX2 >= elementX2 &&
selectionY2 >= elementY2
elementX1 <= elementsX1 - tolerance &&
elementY1 <= elementsY1 - tolerance &&
elementX2 >= elementsX2 + tolerance &&
elementY2 >= elementsY2 + tolerance
 );
};

Expand All@@ -123,9 +111,12 @@ export const elementOverlapsWithFrame = (
 frame: ExcalidrawFrameElement,
) => {
 return (
 elementsAreInFrameBounds([element], frame) ||
 isElementIntersectingFrame(element, frame) ||
 isElementContainingFrame([frame], element, frame)
 // frame contains element
 elementsAreInBounds([element], frame) ||
 // element contains frame
 (elementsAreInBounds([frame], element) && element.frameId === frame.id) ||
 // element intersects with frame
 isElementIntersectingFrame(element, frame)
 );
};

Expand All@@ -136,7 +127,7 @@ export const isCursorInFrame = (
 },
 frame: NonDeleted<ExcalidrawFrameElement>,
) => {
 const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
 const [fx1, fy1, fx2, fy2] = getElementBounds(frame);

 return isPointWithinBounds(
 [fx1, fy1],
Expand All@@ -160,7 +151,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (

 return !!elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 );
};
Expand All@@ -181,7 +172,7 @@ export const groupsAreCompletelyOutOfFrame = (
 return (
 elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 ) === undefined
 );
Expand DownExpand Up@@ -249,12 +240,18 @@ export const getElementsInResizingFrame = (
 const prevElementsInFrame = getFrameChildren(allElements, frame.id);
 const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);

 const elementsCompletelyInFrame = new Set([
 ...getElementsCompletelyInFrame(allElements, frame),
 ...prevElementsInFrame.filter((element) =>
 isElementContainingFrame(allElements, element, frame),
 ),
 ]);
 const elementsCompletelyInFrame = new Set<ExcalidrawElement>(
 getElementsCompletelyInFrame(allElements, frame),
 );

 for (const element of prevElementsInFrame) {
 if (!elementsCompletelyInFrame.has(element)) {
 // element contains the frame
 if (elementsAreInBounds([frame], element)) {
 elementsCompletelyInFrame.add(element);
 }
 }
 }

 const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
 (element) => !elementsCompletelyInFrame.has(element),
Expand DownExpand Up@@ -321,7 +318,7 @@ export const getElementsInResizingFrame = (
 if (isSelected) {
 const elementsInGroup = getElementsInGroup(allElements, id);

 if (elementsAreInFrameBounds(elementsInGroup, frame)) {
 if (elementsAreInBounds(elementsInGroup, frame)) {
 for (const element of elementsInGroup) {
 nextElementsInFrame.add(element);
 }
Expand DownExpand Up@@ -370,7 +367,7 @@ export const getContainingFrame = (
// --------------------------- Frame Operations -------------------------------

/**
 * Retains (or repairs for target frame) the ordering invriant where children
 * Retains (or repairs for target frame) the ordering invariant where children
 * elements come right before the parent frame:
 * [el, el, child, child, frame, el]
 */
Expand DownExpand Up@@ -437,25 +434,14 @@ export const removeElementsFromFrame = (
 ExcalidrawElement
 >();

 const toRemoveElementsByFrame = new Map<
 ExcalidrawFrameElement["id"],
 ExcalidrawElement[]
 >();

 for (const element of elementsToRemove) {
 if (element.frameId) {
 _elementsToRemove.set(element.id, element);

 const arr = toRemoveElementsByFrame.get(element.frameId) || [];
 arr.push(element);

 const boundTextElement = getBoundTextElement(element);
 if (boundTextElement) {
 _elementsToRemove.set(boundTextElement.id, boundTextElement);
 arr.push(boundTextElement);
 }

 toRemoveElementsByFrame.set(element.frameId, arr);
 }
 }

Expand DownExpand Up@@ -520,12 +506,15 @@ export const updateFrameMembershipOfSelectedElements = (
 }

 const elementsToRemove = new Set<ExcalidrawElement>();
 const processedGroupIds = new Map<string, boolean>();

 elementsToFilter.forEach((element) => {
 if (
 element.frameId &&
 !isFrameElement(element) &&
 !isElementInFrame(element, allElements, appState)
 !isElementInFrame(element, allElements, appState, {
 processedGroupIds,
 })
 ) {
 elementsToRemove.add(element);
 }
Expand DownExpand Up@@ -587,26 +576,36 @@ export const getTargetFrame = (
 : getContainingFrame(_element);
};

// TODO: this a huge bottleneck for large scenes, optimise
// given an element, return if the element is in some frame
export const isElementInFrame = (
 element: ExcalidrawElement,
 allElements: ExcalidrawElementsIncludingDeleted,
 appState: StaticCanvasAppState,
 opts?: {
 targetFrame?: ExcalidrawFrameElement;
 processedGroupIds?: Map<string, boolean>;
 },
) => {
 const frame = getTargetFrame(element, appState);
 const frame = opts?.targetFrame ?? getTargetFrame(element, appState);
 const _element = isTextElement(element)
 ? getContainerElement(element) || element
 : element;

 const groupsInFrame = (yes: boolean) => {
 if (opts?.processedGroupIds) {
 _element.groupIds.forEach((gid) => {
 opts.processedGroupIds?.set(gid, yes);
 });
 }
 };

 if (frame) {
 // Perf improvement:
 // For an element that's already in a frame, if it's not being dragged
 // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
 // It has to be in its containing frame.
 // For an element that's already in a frame, if it's not being selected
 // and its frame is not being selected, it has to be in its containing frame.
 if (
 !appState.selectedElementIds[element.id] ||
 !appState.selectedElementsAreBeingDragged
 !appState.selectedElementIds[element.id] &&
 !appState.selectedElementIds[frame.id]
 ) {
 return true;
 }
Expand All@@ -615,8 +614,21 @@ export const isElementInFrame = (
 return elementOverlapsWithFrame(_element, frame);
 }

 for (const gid of _element.groupIds) {
 if (opts?.processedGroupIds?.has(gid)) {
 return opts.processedGroupIds.get(gid);
 }
 }

 const allElementsInGroup = new Set(
 _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
 _element.groupIds
 .filter((gid) => {
 if (opts?.processedGroupIds) {
 return !opts.processedGroupIds.has(gid);
 }
 return true;
 })
 .flatMap((gid) => getElementsInGroup(allElements, gid)),
 );

 if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
Expand All@@ -637,16 +649,22 @@ export const isElementInFrame = (

 for (const elementInGroup of allElementsInGroup) {
 if (isFrameElement(elementInGroup)) {
 groupsInFrame(false);
 return false;
 }
 }

 for (const elementInGroup of allElementsInGroup) {
 if (elementOverlapsWithFrame(elementInGroup, frame)) {
 groupsInFrame(true);
 return true;
 }
 }
 }

 if (_element.groupIds.length > 0) {
 groupsInFrame(false);
 }

 return false;
};

13 changes: 9 additions & 4 deletions
src/groups.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -232,6 +232,8 @@ export const selectGroupsFromGivenElements = (
 selectedGroupIds: {},
 };

 const processedGroupIds = new Set<string>();

 for (const element of elements) {
 let groupIds = element.groupIds;
 if (appState.editingGroupId) {
Expand All@@ -242,10 +244,13 @@ export const selectGroupsFromGivenElements = (
 }
 if (groupIds.length > 0) {
 const groupId = groupIds[groupIds.length - 1];
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 if (!processedGroupIds.has(groupId)) {
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 processedGroupIds.add(groupId);
 }
 }
 }

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Frame group perf#2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hackal
wants to merge
10
commits into

base:master
Choose a base branch

from

 Open


Frame group perf
#2
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afed893

keep only unique frames when ungrouping


ryan-di Nov 8, 2023
9bcd0b6

remove redundant code


ryan-di Nov 10, 2023
71ba0a3

Merge branch 'master' into frame-group-perf


ryan-di Nov 10, 2023
a30e46b

batch clipping


ryan-di Nov 10, 2023
34cf71b

keep dynamic clipping with batch clipping


ryan-di Nov 13, 2023
47d8fa5

remove redundant code


ryan-di Nov 13, 2023
d636abf

Merge branch 'master' into frame-group-perf


ryan-di Nov 13, 2023
683b80a

alternative clipping improvement


ryan-di Nov 14, 2023
3c34b3f

add clippings bounds tolerance, improve group related checks


ryan-di Nov 17, 2023
44bbaed

Create callstack-reviewer.yml


hackal Aug 16, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


27 changes: 27 additions & 0 deletions
.github/workflows/callstack-reviewer.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
name: Callstack.ai PR Review

on:
 workflow_dispatch:
 inputs:
 config:
 type: string
 description: "config for reviewer"
 required: true
 head:
 type: string
 description: "head commit sha"
 required: true
 base:
 type: string
 description: "base commit sha"
 required: false

jobs:
 callstack_pr_review_job:
 runs-on: ubuntu-latest
 steps:
 - name: Review PR
 uses: callstackai/action@main
 with:
 config: ${{ inputs.config }}
 head: ${{ inputs.head }}

5 changes: 4 additions & 1 deletion
src/components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6868,10 +6868,13 @@ class App extends React.Component<AppProps, AppState> {
 topLayerFrame &&
 !this.state.selectedElementIds[topLayerFrame.id]
 ) {
 const processedGroupIds = new Map<string, boolean>();
 const elementsToAdd = selectedElements.filter(
 (element) =>
 element.frameId !== topLayerFrame.id &&
 isElementInFrame(element, nextElements, this.state),
 isElementInFrame(element, nextElements, this.state, {
 processedGroupIds,
 }),
 );

 if (this.state.editingGroupId) {
Expand Down

134 changes: 76 additions & 58 deletions
src/frame.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
import {
 getCommonBounds,
 getElementAbsoluteCoords,
 isTextElement,
} from "./element";
import { getCommonBounds, getElementBounds, isTextElement } from "./element";
import {
 ExcalidrawElement,
 ExcalidrawFrameElement,
Expand DownExpand Up@@ -56,6 +52,7 @@ export const bindElementsToFramesAfterDuplication = (
 }
};

// --------------------------- Frame Geometry ---------------------------------
export function isElementIntersectingFrame(
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
Expand DownExpand Up@@ -85,36 +82,27 @@ export const getElementsCompletelyInFrame = (
 element.frameId === frame.id,
 );

export const isElementContainingFrame = (
 elements: readonly ExcalidrawElement[],
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
) => {
 return getElementsWithinSelection(elements, element).some(
 (e) => e.id === frame.id,
 );
};

export const getElementsIntersectingFrame = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
) => elements.filter((element) => isElementIntersectingFrame(element, frame));

export const elementsAreInFrameBounds = (
export const elementsAreInBounds = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
 element: ExcalidrawElement,
 tolerance = 0,
) => {
 const [selectionX1, selectionY1, selectionX2, selectionY2] =
 getElementAbsoluteCoords(frame);

 const [elementX1, elementY1, elementX2, elementY2] =
 getElementBounds(element);

 const [elementsX1, elementsY1, elementsX2, elementsY2] =
 getCommonBounds(elements);

 return (
selectionX1 <= elementX1 &&
selectionY1 <= elementY1 &&
selectionX2 >= elementX2 &&
selectionY2 >= elementY2
elementX1 <= elementsX1 - tolerance &&
elementY1 <= elementsY1 - tolerance &&
elementX2 >= elementsX2 + tolerance &&
elementY2 >= elementsY2 + tolerance
 );
};

Expand All@@ -123,9 +111,12 @@ export const elementOverlapsWithFrame = (
 frame: ExcalidrawFrameElement,
) => {
 return (
 elementsAreInFrameBounds([element], frame) ||
 isElementIntersectingFrame(element, frame) ||
 isElementContainingFrame([frame], element, frame)
 // frame contains element
 elementsAreInBounds([element], frame) ||
 // element contains frame
 (elementsAreInBounds([frame], element) && element.frameId === frame.id) ||
 // element intersects with frame
 isElementIntersectingFrame(element, frame)
 );
};

Expand All@@ -136,7 +127,7 @@ export const isCursorInFrame = (
 },
 frame: NonDeleted<ExcalidrawFrameElement>,
) => {
 const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
 const [fx1, fy1, fx2, fy2] = getElementBounds(frame);

 return isPointWithinBounds(
 [fx1, fy1],
Expand All@@ -160,7 +151,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (

 return !!elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 );
};
Expand All@@ -181,7 +172,7 @@ export const groupsAreCompletelyOutOfFrame = (
 return (
 elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 ) === undefined
 );
Expand DownExpand Up@@ -249,12 +240,18 @@ export const getElementsInResizingFrame = (
 const prevElementsInFrame = getFrameChildren(allElements, frame.id);
 const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);

 const elementsCompletelyInFrame = new Set([
 ...getElementsCompletelyInFrame(allElements, frame),
 ...prevElementsInFrame.filter((element) =>
 isElementContainingFrame(allElements, element, frame),
 ),
 ]);
 const elementsCompletelyInFrame = new Set<ExcalidrawElement>(
 getElementsCompletelyInFrame(allElements, frame),
 );

 for (const element of prevElementsInFrame) {
 if (!elementsCompletelyInFrame.has(element)) {
 // element contains the frame
 if (elementsAreInBounds([frame], element)) {
 elementsCompletelyInFrame.add(element);
 }
 }
 }

 const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
 (element) => !elementsCompletelyInFrame.has(element),
Expand DownExpand Up@@ -321,7 +318,7 @@ export const getElementsInResizingFrame = (
 if (isSelected) {
 const elementsInGroup = getElementsInGroup(allElements, id);

 if (elementsAreInFrameBounds(elementsInGroup, frame)) {
 if (elementsAreInBounds(elementsInGroup, frame)) {
 for (const element of elementsInGroup) {
 nextElementsInFrame.add(element);
 }
Expand DownExpand Up@@ -370,7 +367,7 @@ export const getContainingFrame = (
// --------------------------- Frame Operations -------------------------------

/**
 * Retains (or repairs for target frame) the ordering invriant where children
 * Retains (or repairs for target frame) the ordering invariant where children
 * elements come right before the parent frame:
 * [el, el, child, child, frame, el]
 */
Expand DownExpand Up@@ -437,25 +434,14 @@ export const removeElementsFromFrame = (
 ExcalidrawElement
 >();

 const toRemoveElementsByFrame = new Map<
 ExcalidrawFrameElement["id"],
 ExcalidrawElement[]
 >();

 for (const element of elementsToRemove) {
 if (element.frameId) {
 _elementsToRemove.set(element.id, element);

 const arr = toRemoveElementsByFrame.get(element.frameId) || [];
 arr.push(element);

 const boundTextElement = getBoundTextElement(element);
 if (boundTextElement) {
 _elementsToRemove.set(boundTextElement.id, boundTextElement);
 arr.push(boundTextElement);
 }

 toRemoveElementsByFrame.set(element.frameId, arr);
 }
 }

Expand DownExpand Up@@ -520,12 +506,15 @@ export const updateFrameMembershipOfSelectedElements = (
 }

 const elementsToRemove = new Set<ExcalidrawElement>();
 const processedGroupIds = new Map<string, boolean>();

 elementsToFilter.forEach((element) => {
 if (
 element.frameId &&
 !isFrameElement(element) &&
 !isElementInFrame(element, allElements, appState)
 !isElementInFrame(element, allElements, appState, {
 processedGroupIds,
 })
 ) {
 elementsToRemove.add(element);
 }
Expand DownExpand Up@@ -587,26 +576,36 @@ export const getTargetFrame = (
 : getContainingFrame(_element);
};

// TODO: this a huge bottleneck for large scenes, optimise
// given an element, return if the element is in some frame
export const isElementInFrame = (
 element: ExcalidrawElement,
 allElements: ExcalidrawElementsIncludingDeleted,
 appState: StaticCanvasAppState,
 opts?: {
 targetFrame?: ExcalidrawFrameElement;
 processedGroupIds?: Map<string, boolean>;
 },
) => {
 const frame = getTargetFrame(element, appState);
 const frame = opts?.targetFrame ?? getTargetFrame(element, appState);
 const _element = isTextElement(element)
 ? getContainerElement(element) || element
 : element;

 const groupsInFrame = (yes: boolean) => {
 if (opts?.processedGroupIds) {
 _element.groupIds.forEach((gid) => {
 opts.processedGroupIds?.set(gid, yes);
 });
 }
 };

 if (frame) {
 // Perf improvement:
 // For an element that's already in a frame, if it's not being dragged
 // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
 // It has to be in its containing frame.
 // For an element that's already in a frame, if it's not being selected
 // and its frame is not being selected, it has to be in its containing frame.
 if (
 !appState.selectedElementIds[element.id] ||
 !appState.selectedElementsAreBeingDragged
 !appState.selectedElementIds[element.id] &&
 !appState.selectedElementIds[frame.id]
 ) {
 return true;
 }
Expand All@@ -615,8 +614,21 @@ export const isElementInFrame = (
 return elementOverlapsWithFrame(_element, frame);
 }

 for (const gid of _element.groupIds) {
 if (opts?.processedGroupIds?.has(gid)) {
 return opts.processedGroupIds.get(gid);
 }
 }

 const allElementsInGroup = new Set(
 _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
 _element.groupIds
 .filter((gid) => {
 if (opts?.processedGroupIds) {
 return !opts.processedGroupIds.has(gid);
 }
 return true;
 })
 .flatMap((gid) => getElementsInGroup(allElements, gid)),
 );

 if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
Expand All@@ -637,16 +649,22 @@ export const isElementInFrame = (

 for (const elementInGroup of allElementsInGroup) {
 if (isFrameElement(elementInGroup)) {
 groupsInFrame(false);
 return false;
 }
 }

 for (const elementInGroup of allElementsInGroup) {
 if (elementOverlapsWithFrame(elementInGroup, frame)) {
 groupsInFrame(true);
 return true;
 }
 }
 }

 if (_element.groupIds.length > 0) {
 groupsInFrame(false);
 }

 return false;
};

13 changes: 9 additions & 4 deletions
src/groups.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -232,6 +232,8 @@ export const selectGroupsFromGivenElements = (
 selectedGroupIds: {},
 };

 const processedGroupIds = new Set<string>();

 for (const element of elements) {
 let groupIds = element.groupIds;
 if (appState.editingGroupId) {
Expand All@@ -242,10 +244,13 @@ export const selectGroupsFromGivenElements = (
 }
 if (groupIds.length > 0) {
 const groupId = groupIds[groupIds.length - 1];
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 if (!processedGroupIds.has(groupId)) {
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 processedGroupIds.add(groupId);
 }
 }
 }

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Frame group perf#2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hackal
wants to merge
10
commits into

base:master
Choose a base branch

from

 Open


Frame group perf
#2
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afed893

keep only unique frames when ungrouping


ryan-di Nov 8, 2023
9bcd0b6

remove redundant code


ryan-di Nov 10, 2023
71ba0a3

Merge branch 'master' into frame-group-perf


ryan-di Nov 10, 2023
a30e46b

batch clipping


ryan-di Nov 10, 2023
34cf71b

keep dynamic clipping with batch clipping


ryan-di Nov 13, 2023
47d8fa5

remove redundant code


ryan-di Nov 13, 2023
d636abf

Merge branch 'master' into frame-group-perf


ryan-di Nov 13, 2023
683b80a

alternative clipping improvement


ryan-di Nov 14, 2023
3c34b3f

add clippings bounds tolerance, improve group related checks


ryan-di Nov 17, 2023
44bbaed

Create callstack-reviewer.yml


hackal Aug 16, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


27 changes: 27 additions & 0 deletions
.github/workflows/callstack-reviewer.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
name: Callstack.ai PR Review

on:
 workflow_dispatch:
 inputs:
 config:
 type: string
 description: "config for reviewer"
 required: true
 head:
 type: string
 description: "head commit sha"
 required: true
 base:
 type: string
 description: "base commit sha"
 required: false

jobs:
 callstack_pr_review_job:
 runs-on: ubuntu-latest
 steps:
 - name: Review PR
 uses: callstackai/action@main
 with:
 config: ${{ inputs.config }}
 head: ${{ inputs.head }}

5 changes: 4 additions & 1 deletion
src/components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6868,10 +6868,13 @@ class App extends React.Component<AppProps, AppState> {
 topLayerFrame &&
 !this.state.selectedElementIds[topLayerFrame.id]
 ) {
 const processedGroupIds = new Map<string, boolean>();
 const elementsToAdd = selectedElements.filter(
 (element) =>
 element.frameId !== topLayerFrame.id &&
 isElementInFrame(element, nextElements, this.state),
 isElementInFrame(element, nextElements, this.state, {
 processedGroupIds,
 }),
 );

 if (this.state.editingGroupId) {
Expand Down

134 changes: 76 additions & 58 deletions
src/frame.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
import {
 getCommonBounds,
 getElementAbsoluteCoords,
 isTextElement,
} from "./element";
import { getCommonBounds, getElementBounds, isTextElement } from "./element";
import {
 ExcalidrawElement,
 ExcalidrawFrameElement,
Expand DownExpand Up@@ -56,6 +52,7 @@ export const bindElementsToFramesAfterDuplication = (
 }
};

// --------------------------- Frame Geometry ---------------------------------
export function isElementIntersectingFrame(
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
Expand DownExpand Up@@ -85,36 +82,27 @@ export const getElementsCompletelyInFrame = (
 element.frameId === frame.id,
 );

export const isElementContainingFrame = (
 elements: readonly ExcalidrawElement[],
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
) => {
 return getElementsWithinSelection(elements, element).some(
 (e) => e.id === frame.id,
 );
};

export const getElementsIntersectingFrame = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
) => elements.filter((element) => isElementIntersectingFrame(element, frame));

export const elementsAreInFrameBounds = (
export const elementsAreInBounds = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
 element: ExcalidrawElement,
 tolerance = 0,
) => {
 const [selectionX1, selectionY1, selectionX2, selectionY2] =
 getElementAbsoluteCoords(frame);

 const [elementX1, elementY1, elementX2, elementY2] =
 getElementBounds(element);

 const [elementsX1, elementsY1, elementsX2, elementsY2] =
 getCommonBounds(elements);

 return (
selectionX1 <= elementX1 &&
selectionY1 <= elementY1 &&
selectionX2 >= elementX2 &&
selectionY2 >= elementY2
elementX1 <= elementsX1 - tolerance &&
elementY1 <= elementsY1 - tolerance &&
elementX2 >= elementsX2 + tolerance &&
elementY2 >= elementsY2 + tolerance
 );
};

Expand All@@ -123,9 +111,12 @@ export const elementOverlapsWithFrame = (
 frame: ExcalidrawFrameElement,
) => {
 return (
 elementsAreInFrameBounds([element], frame) ||
 isElementIntersectingFrame(element, frame) ||
 isElementContainingFrame([frame], element, frame)
 // frame contains element
 elementsAreInBounds([element], frame) ||
 // element contains frame
 (elementsAreInBounds([frame], element) && element.frameId === frame.id) ||
 // element intersects with frame
 isElementIntersectingFrame(element, frame)
 );
};

Expand All@@ -136,7 +127,7 @@ export const isCursorInFrame = (
 },
 frame: NonDeleted<ExcalidrawFrameElement>,
) => {
 const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
 const [fx1, fy1, fx2, fy2] = getElementBounds(frame);

 return isPointWithinBounds(
 [fx1, fy1],
Expand All@@ -160,7 +151,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (

 return !!elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 );
};
Expand All@@ -181,7 +172,7 @@ export const groupsAreCompletelyOutOfFrame = (
 return (
 elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 ) === undefined
 );
Expand DownExpand Up@@ -249,12 +240,18 @@ export const getElementsInResizingFrame = (
 const prevElementsInFrame = getFrameChildren(allElements, frame.id);
 const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);

 const elementsCompletelyInFrame = new Set([
 ...getElementsCompletelyInFrame(allElements, frame),
 ...prevElementsInFrame.filter((element) =>
 isElementContainingFrame(allElements, element, frame),
 ),
 ]);
 const elementsCompletelyInFrame = new Set<ExcalidrawElement>(
 getElementsCompletelyInFrame(allElements, frame),
 );

 for (const element of prevElementsInFrame) {
 if (!elementsCompletelyInFrame.has(element)) {
 // element contains the frame
 if (elementsAreInBounds([frame], element)) {
 elementsCompletelyInFrame.add(element);
 }
 }
 }

 const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
 (element) => !elementsCompletelyInFrame.has(element),
Expand DownExpand Up@@ -321,7 +318,7 @@ export const getElementsInResizingFrame = (
 if (isSelected) {
 const elementsInGroup = getElementsInGroup(allElements, id);

 if (elementsAreInFrameBounds(elementsInGroup, frame)) {
 if (elementsAreInBounds(elementsInGroup, frame)) {
 for (const element of elementsInGroup) {
 nextElementsInFrame.add(element);
 }
Expand DownExpand Up@@ -370,7 +367,7 @@ export const getContainingFrame = (
// --------------------------- Frame Operations -------------------------------

/**
 * Retains (or repairs for target frame) the ordering invriant where children
 * Retains (or repairs for target frame) the ordering invariant where children
 * elements come right before the parent frame:
 * [el, el, child, child, frame, el]
 */
Expand DownExpand Up@@ -437,25 +434,14 @@ export const removeElementsFromFrame = (
 ExcalidrawElement
 >();

 const toRemoveElementsByFrame = new Map<
 ExcalidrawFrameElement["id"],
 ExcalidrawElement[]
 >();

 for (const element of elementsToRemove) {
 if (element.frameId) {
 _elementsToRemove.set(element.id, element);

 const arr = toRemoveElementsByFrame.get(element.frameId) || [];
 arr.push(element);

 const boundTextElement = getBoundTextElement(element);
 if (boundTextElement) {
 _elementsToRemove.set(boundTextElement.id, boundTextElement);
 arr.push(boundTextElement);
 }

 toRemoveElementsByFrame.set(element.frameId, arr);
 }
 }

Expand DownExpand Up@@ -520,12 +506,15 @@ export const updateFrameMembershipOfSelectedElements = (
 }

 const elementsToRemove = new Set<ExcalidrawElement>();
 const processedGroupIds = new Map<string, boolean>();

 elementsToFilter.forEach((element) => {
 if (
 element.frameId &&
 !isFrameElement(element) &&
 !isElementInFrame(element, allElements, appState)
 !isElementInFrame(element, allElements, appState, {
 processedGroupIds,
 })
 ) {
 elementsToRemove.add(element);
 }
Expand DownExpand Up@@ -587,26 +576,36 @@ export const getTargetFrame = (
 : getContainingFrame(_element);
};

// TODO: this a huge bottleneck for large scenes, optimise
// given an element, return if the element is in some frame
export const isElementInFrame = (
 element: ExcalidrawElement,
 allElements: ExcalidrawElementsIncludingDeleted,
 appState: StaticCanvasAppState,
 opts?: {
 targetFrame?: ExcalidrawFrameElement;
 processedGroupIds?: Map<string, boolean>;
 },
) => {
 const frame = getTargetFrame(element, appState);
 const frame = opts?.targetFrame ?? getTargetFrame(element, appState);
 const _element = isTextElement(element)
 ? getContainerElement(element) || element
 : element;

 const groupsInFrame = (yes: boolean) => {
 if (opts?.processedGroupIds) {
 _element.groupIds.forEach((gid) => {
 opts.processedGroupIds?.set(gid, yes);
 });
 }
 };

 if (frame) {
 // Perf improvement:
 // For an element that's already in a frame, if it's not being dragged
 // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
 // It has to be in its containing frame.
 // For an element that's already in a frame, if it's not being selected
 // and its frame is not being selected, it has to be in its containing frame.
 if (
 !appState.selectedElementIds[element.id] ||
 !appState.selectedElementsAreBeingDragged
 !appState.selectedElementIds[element.id] &&
 !appState.selectedElementIds[frame.id]
 ) {
 return true;
 }
Expand All@@ -615,8 +614,21 @@ export const isElementInFrame = (
 return elementOverlapsWithFrame(_element, frame);
 }

 for (const gid of _element.groupIds) {
 if (opts?.processedGroupIds?.has(gid)) {
 return opts.processedGroupIds.get(gid);
 }
 }

 const allElementsInGroup = new Set(
 _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
 _element.groupIds
 .filter((gid) => {
 if (opts?.processedGroupIds) {
 return !opts.processedGroupIds.has(gid);
 }
 return true;
 })
 .flatMap((gid) => getElementsInGroup(allElements, gid)),
 );

 if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
Expand All@@ -637,16 +649,22 @@ export const isElementInFrame = (

 for (const elementInGroup of allElementsInGroup) {
 if (isFrameElement(elementInGroup)) {
 groupsInFrame(false);
 return false;
 }
 }

 for (const elementInGroup of allElementsInGroup) {
 if (elementOverlapsWithFrame(elementInGroup, frame)) {
 groupsInFrame(true);
 return true;
 }
 }
 }

 if (_element.groupIds.length > 0) {
 groupsInFrame(false);
 }

 return false;
};

13 changes: 9 additions & 4 deletions
src/groups.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -232,6 +232,8 @@ export const selectGroupsFromGivenElements = (
 selectedGroupIds: {},
 };

 const processedGroupIds = new Set<string>();

 for (const element of elements) {
 let groupIds = element.groupIds;
 if (appState.editingGroupId) {
Expand All@@ -242,10 +244,13 @@ export const selectGroupsFromGivenElements = (
 }
 if (groupIds.length > 0) {
 const groupId = groupIds[groupIds.length - 1];
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 if (!processedGroupIds.has(groupId)) {
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 processedGroupIds.add(groupId);
 }
 }
 }

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Frame group perf#2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hackal
wants to merge
10
commits into

base:master
Choose a base branch

from

 Open


Frame group perf
#2
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afed893

keep only unique frames when ungrouping


ryan-di Nov 8, 2023
9bcd0b6

remove redundant code


ryan-di Nov 10, 2023
71ba0a3

Merge branch 'master' into frame-group-perf


ryan-di Nov 10, 2023
a30e46b

batch clipping


ryan-di Nov 10, 2023
34cf71b

keep dynamic clipping with batch clipping


ryan-di Nov 13, 2023
47d8fa5

remove redundant code


ryan-di Nov 13, 2023
d636abf

Merge branch 'master' into frame-group-perf


ryan-di Nov 13, 2023
683b80a

alternative clipping improvement


ryan-di Nov 14, 2023
3c34b3f

add clippings bounds tolerance, improve group related checks


ryan-di Nov 17, 2023
44bbaed

Create callstack-reviewer.yml


hackal Aug 16, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


27 changes: 27 additions & 0 deletions
.github/workflows/callstack-reviewer.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
name: Callstack.ai PR Review

on:
 workflow_dispatch:
 inputs:
 config:
 type: string
 description: "config for reviewer"
 required: true
 head:
 type: string
 description: "head commit sha"
 required: true
 base:
 type: string
 description: "base commit sha"
 required: false

jobs:
 callstack_pr_review_job:
 runs-on: ubuntu-latest
 steps:
 - name: Review PR
 uses: callstackai/action@main
 with:
 config: ${{ inputs.config }}
 head: ${{ inputs.head }}

5 changes: 4 additions & 1 deletion
src/components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6868,10 +6868,13 @@ class App extends React.Component<AppProps, AppState> {
 topLayerFrame &&
 !this.state.selectedElementIds[topLayerFrame.id]
 ) {
 const processedGroupIds = new Map<string, boolean>();
 const elementsToAdd = selectedElements.filter(
 (element) =>
 element.frameId !== topLayerFrame.id &&
 isElementInFrame(element, nextElements, this.state),
 isElementInFrame(element, nextElements, this.state, {
 processedGroupIds,
 }),
 );

 if (this.state.editingGroupId) {
Expand Down

134 changes: 76 additions & 58 deletions
src/frame.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
import {
 getCommonBounds,
 getElementAbsoluteCoords,
 isTextElement,
} from "./element";
import { getCommonBounds, getElementBounds, isTextElement } from "./element";
import {
 ExcalidrawElement,
 ExcalidrawFrameElement,
Expand DownExpand Up@@ -56,6 +52,7 @@ export const bindElementsToFramesAfterDuplication = (
 }
};

// --------------------------- Frame Geometry ---------------------------------
export function isElementIntersectingFrame(
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
Expand DownExpand Up@@ -85,36 +82,27 @@ export const getElementsCompletelyInFrame = (
 element.frameId === frame.id,
 );

export const isElementContainingFrame = (
 elements: readonly ExcalidrawElement[],
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
) => {
 return getElementsWithinSelection(elements, element).some(
 (e) => e.id === frame.id,
 );
};

export const getElementsIntersectingFrame = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
) => elements.filter((element) => isElementIntersectingFrame(element, frame));

export const elementsAreInFrameBounds = (
export const elementsAreInBounds = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
 element: ExcalidrawElement,
 tolerance = 0,
) => {
 const [selectionX1, selectionY1, selectionX2, selectionY2] =
 getElementAbsoluteCoords(frame);

 const [elementX1, elementY1, elementX2, elementY2] =
 getElementBounds(element);

 const [elementsX1, elementsY1, elementsX2, elementsY2] =
 getCommonBounds(elements);

 return (
selectionX1 <= elementX1 &&
selectionY1 <= elementY1 &&
selectionX2 >= elementX2 &&
selectionY2 >= elementY2
elementX1 <= elementsX1 - tolerance &&
elementY1 <= elementsY1 - tolerance &&
elementX2 >= elementsX2 + tolerance &&
elementY2 >= elementsY2 + tolerance
 );
};

Expand All@@ -123,9 +111,12 @@ export const elementOverlapsWithFrame = (
 frame: ExcalidrawFrameElement,
) => {
 return (
 elementsAreInFrameBounds([element], frame) ||
 isElementIntersectingFrame(element, frame) ||
 isElementContainingFrame([frame], element, frame)
 // frame contains element
 elementsAreInBounds([element], frame) ||
 // element contains frame
 (elementsAreInBounds([frame], element) && element.frameId === frame.id) ||
 // element intersects with frame
 isElementIntersectingFrame(element, frame)
 );
};

Expand All@@ -136,7 +127,7 @@ export const isCursorInFrame = (
 },
 frame: NonDeleted<ExcalidrawFrameElement>,
) => {
 const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
 const [fx1, fy1, fx2, fy2] = getElementBounds(frame);

 return isPointWithinBounds(
 [fx1, fy1],
Expand All@@ -160,7 +151,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (

 return !!elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 );
};
Expand All@@ -181,7 +172,7 @@ export const groupsAreCompletelyOutOfFrame = (
 return (
 elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 ) === undefined
 );
Expand DownExpand Up@@ -249,12 +240,18 @@ export const getElementsInResizingFrame = (
 const prevElementsInFrame = getFrameChildren(allElements, frame.id);
 const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);

 const elementsCompletelyInFrame = new Set([
 ...getElementsCompletelyInFrame(allElements, frame),
 ...prevElementsInFrame.filter((element) =>
 isElementContainingFrame(allElements, element, frame),
 ),
 ]);
 const elementsCompletelyInFrame = new Set<ExcalidrawElement>(
 getElementsCompletelyInFrame(allElements, frame),
 );

 for (const element of prevElementsInFrame) {
 if (!elementsCompletelyInFrame.has(element)) {
 // element contains the frame
 if (elementsAreInBounds([frame], element)) {
 elementsCompletelyInFrame.add(element);
 }
 }
 }

 const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
 (element) => !elementsCompletelyInFrame.has(element),
Expand DownExpand Up@@ -321,7 +318,7 @@ export const getElementsInResizingFrame = (
 if (isSelected) {
 const elementsInGroup = getElementsInGroup(allElements, id);

 if (elementsAreInFrameBounds(elementsInGroup, frame)) {
 if (elementsAreInBounds(elementsInGroup, frame)) {
 for (const element of elementsInGroup) {
 nextElementsInFrame.add(element);
 }
Expand DownExpand Up@@ -370,7 +367,7 @@ export const getContainingFrame = (
// --------------------------- Frame Operations -------------------------------

/**
 * Retains (or repairs for target frame) the ordering invriant where children
 * Retains (or repairs for target frame) the ordering invariant where children
 * elements come right before the parent frame:
 * [el, el, child, child, frame, el]
 */
Expand DownExpand Up@@ -437,25 +434,14 @@ export const removeElementsFromFrame = (
 ExcalidrawElement
 >();

 const toRemoveElementsByFrame = new Map<
 ExcalidrawFrameElement["id"],
 ExcalidrawElement[]
 >();

 for (const element of elementsToRemove) {
 if (element.frameId) {
 _elementsToRemove.set(element.id, element);

 const arr = toRemoveElementsByFrame.get(element.frameId) || [];
 arr.push(element);

 const boundTextElement = getBoundTextElement(element);
 if (boundTextElement) {
 _elementsToRemove.set(boundTextElement.id, boundTextElement);
 arr.push(boundTextElement);
 }

 toRemoveElementsByFrame.set(element.frameId, arr);
 }
 }

Expand DownExpand Up@@ -520,12 +506,15 @@ export const updateFrameMembershipOfSelectedElements = (
 }

 const elementsToRemove = new Set<ExcalidrawElement>();
 const processedGroupIds = new Map<string, boolean>();

 elementsToFilter.forEach((element) => {
 if (
 element.frameId &&
 !isFrameElement(element) &&
 !isElementInFrame(element, allElements, appState)
 !isElementInFrame(element, allElements, appState, {
 processedGroupIds,
 })
 ) {
 elementsToRemove.add(element);
 }
Expand DownExpand Up@@ -587,26 +576,36 @@ export const getTargetFrame = (
 : getContainingFrame(_element);
};

// TODO: this a huge bottleneck for large scenes, optimise
// given an element, return if the element is in some frame
export const isElementInFrame = (
 element: ExcalidrawElement,
 allElements: ExcalidrawElementsIncludingDeleted,
 appState: StaticCanvasAppState,
 opts?: {
 targetFrame?: ExcalidrawFrameElement;
 processedGroupIds?: Map<string, boolean>;
 },
) => {
 const frame = getTargetFrame(element, appState);
 const frame = opts?.targetFrame ?? getTargetFrame(element, appState);
 const _element = isTextElement(element)
 ? getContainerElement(element) || element
 : element;

 const groupsInFrame = (yes: boolean) => {
 if (opts?.processedGroupIds) {
 _element.groupIds.forEach((gid) => {
 opts.processedGroupIds?.set(gid, yes);
 });
 }
 };

 if (frame) {
 // Perf improvement:
 // For an element that's already in a frame, if it's not being dragged
 // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
 // It has to be in its containing frame.
 // For an element that's already in a frame, if it's not being selected
 // and its frame is not being selected, it has to be in its containing frame.
 if (
 !appState.selectedElementIds[element.id] ||
 !appState.selectedElementsAreBeingDragged
 !appState.selectedElementIds[element.id] &&
 !appState.selectedElementIds[frame.id]
 ) {
 return true;
 }
Expand All@@ -615,8 +614,21 @@ export const isElementInFrame = (
 return elementOverlapsWithFrame(_element, frame);
 }

 for (const gid of _element.groupIds) {
 if (opts?.processedGroupIds?.has(gid)) {
 return opts.processedGroupIds.get(gid);
 }
 }

 const allElementsInGroup = new Set(
 _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
 _element.groupIds
 .filter((gid) => {
 if (opts?.processedGroupIds) {
 return !opts.processedGroupIds.has(gid);
 }
 return true;
 })
 .flatMap((gid) => getElementsInGroup(allElements, gid)),
 );

 if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
Expand All@@ -637,16 +649,22 @@ export const isElementInFrame = (

 for (const elementInGroup of allElementsInGroup) {
 if (isFrameElement(elementInGroup)) {
 groupsInFrame(false);
 return false;
 }
 }

 for (const elementInGroup of allElementsInGroup) {
 if (elementOverlapsWithFrame(elementInGroup, frame)) {
 groupsInFrame(true);
 return true;
 }
 }
 }

 if (_element.groupIds.length > 0) {
 groupsInFrame(false);
 }

 return false;
};

13 changes: 9 additions & 4 deletions
src/groups.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -232,6 +232,8 @@ export const selectGroupsFromGivenElements = (
 selectedGroupIds: {},
 };

 const processedGroupIds = new Set<string>();

 for (const element of elements) {
 let groupIds = element.groupIds;
 if (appState.editingGroupId) {
Expand All@@ -242,10 +244,13 @@ export const selectGroupsFromGivenElements = (
 }
 if (groupIds.length > 0) {
 const groupId = groupIds[groupIds.length - 1];
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 if (!processedGroupIds.has(groupId)) {
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 processedGroupIds.add(groupId);
 }
 }
 }

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Frame group perf#2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hackal
wants to merge
10
commits into

base:master
Choose a base branch

from

 Open


Frame group perf
#2
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afed893

keep only unique frames when ungrouping


ryan-di Nov 8, 2023
9bcd0b6

remove redundant code


ryan-di Nov 10, 2023
71ba0a3

Merge branch 'master' into frame-group-perf


ryan-di Nov 10, 2023
a30e46b

batch clipping


ryan-di Nov 10, 2023
34cf71b

keep dynamic clipping with batch clipping


ryan-di Nov 13, 2023
47d8fa5

remove redundant code


ryan-di Nov 13, 2023
d636abf

Merge branch 'master' into frame-group-perf


ryan-di Nov 13, 2023
683b80a

alternative clipping improvement


ryan-di Nov 14, 2023
3c34b3f

add clippings bounds tolerance, improve group related checks


ryan-di Nov 17, 2023
44bbaed

Create callstack-reviewer.yml


hackal Aug 16, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


27 changes: 27 additions & 0 deletions
.github/workflows/callstack-reviewer.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
name: Callstack.ai PR Review

on:
 workflow_dispatch:
 inputs:
 config:
 type: string
 description: "config for reviewer"
 required: true
 head:
 type: string
 description: "head commit sha"
 required: true
 base:
 type: string
 description: "base commit sha"
 required: false

jobs:
 callstack_pr_review_job:
 runs-on: ubuntu-latest
 steps:
 - name: Review PR
 uses: callstackai/action@main
 with:
 config: ${{ inputs.config }}
 head: ${{ inputs.head }}

5 changes: 4 additions & 1 deletion
src/components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6868,10 +6868,13 @@ class App extends React.Component<AppProps, AppState> {
 topLayerFrame &&
 !this.state.selectedElementIds[topLayerFrame.id]
 ) {
 const processedGroupIds = new Map<string, boolean>();
 const elementsToAdd = selectedElements.filter(
 (element) =>
 element.frameId !== topLayerFrame.id &&
 isElementInFrame(element, nextElements, this.state),
 isElementInFrame(element, nextElements, this.state, {
 processedGroupIds,
 }),
 );

 if (this.state.editingGroupId) {
Expand Down

134 changes: 76 additions & 58 deletions
src/frame.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
import {
 getCommonBounds,
 getElementAbsoluteCoords,
 isTextElement,
} from "./element";
import { getCommonBounds, getElementBounds, isTextElement } from "./element";
import {
 ExcalidrawElement,
 ExcalidrawFrameElement,
Expand DownExpand Up@@ -56,6 +52,7 @@ export const bindElementsToFramesAfterDuplication = (
 }
};

// --------------------------- Frame Geometry ---------------------------------
export function isElementIntersectingFrame(
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
Expand DownExpand Up@@ -85,36 +82,27 @@ export const getElementsCompletelyInFrame = (
 element.frameId === frame.id,
 );

export const isElementContainingFrame = (
 elements: readonly ExcalidrawElement[],
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
) => {
 return getElementsWithinSelection(elements, element).some(
 (e) => e.id === frame.id,
 );
};

export const getElementsIntersectingFrame = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
) => elements.filter((element) => isElementIntersectingFrame(element, frame));

export const elementsAreInFrameBounds = (
export const elementsAreInBounds = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
 element: ExcalidrawElement,
 tolerance = 0,
) => {
 const [selectionX1, selectionY1, selectionX2, selectionY2] =
 getElementAbsoluteCoords(frame);

 const [elementX1, elementY1, elementX2, elementY2] =
 getElementBounds(element);

 const [elementsX1, elementsY1, elementsX2, elementsY2] =
 getCommonBounds(elements);

 return (
selectionX1 <= elementX1 &&
selectionY1 <= elementY1 &&
selectionX2 >= elementX2 &&
selectionY2 >= elementY2
elementX1 <= elementsX1 - tolerance &&
elementY1 <= elementsY1 - tolerance &&
elementX2 >= elementsX2 + tolerance &&
elementY2 >= elementsY2 + tolerance
 );
};

Expand All@@ -123,9 +111,12 @@ export const elementOverlapsWithFrame = (
 frame: ExcalidrawFrameElement,
) => {
 return (
 elementsAreInFrameBounds([element], frame) ||
 isElementIntersectingFrame(element, frame) ||
 isElementContainingFrame([frame], element, frame)
 // frame contains element
 elementsAreInBounds([element], frame) ||
 // element contains frame
 (elementsAreInBounds([frame], element) && element.frameId === frame.id) ||
 // element intersects with frame
 isElementIntersectingFrame(element, frame)
 );
};

Expand All@@ -136,7 +127,7 @@ export const isCursorInFrame = (
 },
 frame: NonDeleted<ExcalidrawFrameElement>,
) => {
 const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
 const [fx1, fy1, fx2, fy2] = getElementBounds(frame);

 return isPointWithinBounds(
 [fx1, fy1],
Expand All@@ -160,7 +151,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (

 return !!elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 );
};
Expand All@@ -181,7 +172,7 @@ export const groupsAreCompletelyOutOfFrame = (
 return (
 elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 ) === undefined
 );
Expand DownExpand Up@@ -249,12 +240,18 @@ export const getElementsInResizingFrame = (
 const prevElementsInFrame = getFrameChildren(allElements, frame.id);
 const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);

 const elementsCompletelyInFrame = new Set([
 ...getElementsCompletelyInFrame(allElements, frame),
 ...prevElementsInFrame.filter((element) =>
 isElementContainingFrame(allElements, element, frame),
 ),
 ]);
 const elementsCompletelyInFrame = new Set<ExcalidrawElement>(
 getElementsCompletelyInFrame(allElements, frame),
 );

 for (const element of prevElementsInFrame) {
 if (!elementsCompletelyInFrame.has(element)) {
 // element contains the frame
 if (elementsAreInBounds([frame], element)) {
 elementsCompletelyInFrame.add(element);
 }
 }
 }

 const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
 (element) => !elementsCompletelyInFrame.has(element),
Expand DownExpand Up@@ -321,7 +318,7 @@ export const getElementsInResizingFrame = (
 if (isSelected) {
 const elementsInGroup = getElementsInGroup(allElements, id);

 if (elementsAreInFrameBounds(elementsInGroup, frame)) {
 if (elementsAreInBounds(elementsInGroup, frame)) {
 for (const element of elementsInGroup) {
 nextElementsInFrame.add(element);
 }
Expand DownExpand Up@@ -370,7 +367,7 @@ export const getContainingFrame = (
// --------------------------- Frame Operations -------------------------------

/**
 * Retains (or repairs for target frame) the ordering invriant where children
 * Retains (or repairs for target frame) the ordering invariant where children
 * elements come right before the parent frame:
 * [el, el, child, child, frame, el]
 */
Expand DownExpand Up@@ -437,25 +434,14 @@ export const removeElementsFromFrame = (
 ExcalidrawElement
 >();

 const toRemoveElementsByFrame = new Map<
 ExcalidrawFrameElement["id"],
 ExcalidrawElement[]
 >();

 for (const element of elementsToRemove) {
 if (element.frameId) {
 _elementsToRemove.set(element.id, element);

 const arr = toRemoveElementsByFrame.get(element.frameId) || [];
 arr.push(element);

 const boundTextElement = getBoundTextElement(element);
 if (boundTextElement) {
 _elementsToRemove.set(boundTextElement.id, boundTextElement);
 arr.push(boundTextElement);
 }

 toRemoveElementsByFrame.set(element.frameId, arr);
 }
 }

Expand DownExpand Up@@ -520,12 +506,15 @@ export const updateFrameMembershipOfSelectedElements = (
 }

 const elementsToRemove = new Set<ExcalidrawElement>();
 const processedGroupIds = new Map<string, boolean>();

 elementsToFilter.forEach((element) => {
 if (
 element.frameId &&
 !isFrameElement(element) &&
 !isElementInFrame(element, allElements, appState)
 !isElementInFrame(element, allElements, appState, {
 processedGroupIds,
 })
 ) {
 elementsToRemove.add(element);
 }
Expand DownExpand Up@@ -587,26 +576,36 @@ export const getTargetFrame = (
 : getContainingFrame(_element);
};

// TODO: this a huge bottleneck for large scenes, optimise
// given an element, return if the element is in some frame
export const isElementInFrame = (
 element: ExcalidrawElement,
 allElements: ExcalidrawElementsIncludingDeleted,
 appState: StaticCanvasAppState,
 opts?: {
 targetFrame?: ExcalidrawFrameElement;
 processedGroupIds?: Map<string, boolean>;
 },
) => {
 const frame = getTargetFrame(element, appState);
 const frame = opts?.targetFrame ?? getTargetFrame(element, appState);
 const _element = isTextElement(element)
 ? getContainerElement(element) || element
 : element;

 const groupsInFrame = (yes: boolean) => {
 if (opts?.processedGroupIds) {
 _element.groupIds.forEach((gid) => {
 opts.processedGroupIds?.set(gid, yes);
 });
 }
 };

 if (frame) {
 // Perf improvement:
 // For an element that's already in a frame, if it's not being dragged
 // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
 // It has to be in its containing frame.
 // For an element that's already in a frame, if it's not being selected
 // and its frame is not being selected, it has to be in its containing frame.
 if (
 !appState.selectedElementIds[element.id] ||
 !appState.selectedElementsAreBeingDragged
 !appState.selectedElementIds[element.id] &&
 !appState.selectedElementIds[frame.id]
 ) {
 return true;
 }
Expand All@@ -615,8 +614,21 @@ export const isElementInFrame = (
 return elementOverlapsWithFrame(_element, frame);
 }

 for (const gid of _element.groupIds) {
 if (opts?.processedGroupIds?.has(gid)) {
 return opts.processedGroupIds.get(gid);
 }
 }

 const allElementsInGroup = new Set(
 _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
 _element.groupIds
 .filter((gid) => {
 if (opts?.processedGroupIds) {
 return !opts.processedGroupIds.has(gid);
 }
 return true;
 })
 .flatMap((gid) => getElementsInGroup(allElements, gid)),
 );

 if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
Expand All@@ -637,16 +649,22 @@ export const isElementInFrame = (

 for (const elementInGroup of allElementsInGroup) {
 if (isFrameElement(elementInGroup)) {
 groupsInFrame(false);
 return false;
 }
 }

 for (const elementInGroup of allElementsInGroup) {
 if (elementOverlapsWithFrame(elementInGroup, frame)) {
 groupsInFrame(true);
 return true;
 }
 }
 }

 if (_element.groupIds.length > 0) {
 groupsInFrame(false);
 }

 return false;
};

13 changes: 9 additions & 4 deletions
src/groups.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -232,6 +232,8 @@ export const selectGroupsFromGivenElements = (
 selectedGroupIds: {},
 };

 const processedGroupIds = new Set<string>();

 for (const element of elements) {
 let groupIds = element.groupIds;
 if (appState.editingGroupId) {
Expand All@@ -242,10 +244,13 @@ export const selectGroupsFromGivenElements = (
 }
 if (groupIds.length > 0) {
 const groupId = groupIds[groupIds.length - 1];
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 if (!processedGroupIds.has(groupId)) {
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 processedGroupIds.add(groupId);
 }
 }
 }

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Frame group perf#2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

hackal
wants to merge
10
commits into

base:master
Choose a base branch

from

 Open


Frame group perf
#2
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afed893

keep only unique frames when ungrouping


ryan-di Nov 8, 2023
9bcd0b6

remove redundant code


ryan-di Nov 10, 2023
71ba0a3

Merge branch 'master' into frame-group-perf


ryan-di Nov 10, 2023
a30e46b

batch clipping


ryan-di Nov 10, 2023
34cf71b

keep dynamic clipping with batch clipping


ryan-di Nov 13, 2023
47d8fa5

remove redundant code


ryan-di Nov 13, 2023
d636abf

Merge branch 'master' into frame-group-perf


ryan-di Nov 13, 2023
683b80a

alternative clipping improvement


ryan-di Nov 14, 2023
3c34b3f

add clippings bounds tolerance, improve group related checks


ryan-di Nov 17, 2023
44bbaed

Create callstack-reviewer.yml


hackal Aug 16, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


27 changes: 27 additions & 0 deletions
.github/workflows/callstack-reviewer.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
name: Callstack.ai PR Review

on:
 workflow_dispatch:
 inputs:
 config:
 type: string
 description: "config for reviewer"
 required: true
 head:
 type: string
 description: "head commit sha"
 required: true
 base:
 type: string
 description: "base commit sha"
 required: false

jobs:
 callstack_pr_review_job:
 runs-on: ubuntu-latest
 steps:
 - name: Review PR
 uses: callstackai/action@main
 with:
 config: ${{ inputs.config }}
 head: ${{ inputs.head }}

5 changes: 4 additions & 1 deletion
src/components/App.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6868,10 +6868,13 @@ class App extends React.Component<AppProps, AppState> {
 topLayerFrame &&
 !this.state.selectedElementIds[topLayerFrame.id]
 ) {
 const processedGroupIds = new Map<string, boolean>();
 const elementsToAdd = selectedElements.filter(
 (element) =>
 element.frameId !== topLayerFrame.id &&
 isElementInFrame(element, nextElements, this.state),
 isElementInFrame(element, nextElements, this.state, {
 processedGroupIds,
 }),
 );

 if (this.state.editingGroupId) {
Expand Down

134 changes: 76 additions & 58 deletions
src/frame.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
import {
 getCommonBounds,
 getElementAbsoluteCoords,
 isTextElement,
} from "./element";
import { getCommonBounds, getElementBounds, isTextElement } from "./element";
import {
 ExcalidrawElement,
 ExcalidrawFrameElement,
Expand DownExpand Up@@ -56,6 +52,7 @@ export const bindElementsToFramesAfterDuplication = (
 }
};

// --------------------------- Frame Geometry ---------------------------------
export function isElementIntersectingFrame(
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
Expand DownExpand Up@@ -85,36 +82,27 @@ export const getElementsCompletelyInFrame = (
 element.frameId === frame.id,
 );

export const isElementContainingFrame = (
 elements: readonly ExcalidrawElement[],
 element: ExcalidrawElement,
 frame: ExcalidrawFrameElement,
) => {
 return getElementsWithinSelection(elements, element).some(
 (e) => e.id === frame.id,
 );
};

export const getElementsIntersectingFrame = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
) => elements.filter((element) => isElementIntersectingFrame(element, frame));

export const elementsAreInFrameBounds = (
export const elementsAreInBounds = (
 elements: readonly ExcalidrawElement[],
 frame: ExcalidrawFrameElement,
 element: ExcalidrawElement,
 tolerance = 0,
) => {
 const [selectionX1, selectionY1, selectionX2, selectionY2] =
 getElementAbsoluteCoords(frame);

 const [elementX1, elementY1, elementX2, elementY2] =
 getElementBounds(element);

 const [elementsX1, elementsY1, elementsX2, elementsY2] =
 getCommonBounds(elements);

 return (
selectionX1 <= elementX1 &&
selectionY1 <= elementY1 &&
selectionX2 >= elementX2 &&
selectionY2 >= elementY2
elementX1 <= elementsX1 - tolerance &&
elementY1 <= elementsY1 - tolerance &&
elementX2 >= elementsX2 + tolerance &&
elementY2 >= elementsY2 + tolerance
 );
};

Expand All@@ -123,9 +111,12 @@ export const elementOverlapsWithFrame = (
 frame: ExcalidrawFrameElement,
) => {
 return (
 elementsAreInFrameBounds([element], frame) ||
 isElementIntersectingFrame(element, frame) ||
 isElementContainingFrame([frame], element, frame)
 // frame contains element
 elementsAreInBounds([element], frame) ||
 // element contains frame
 (elementsAreInBounds([frame], element) && element.frameId === frame.id) ||
 // element intersects with frame
 isElementIntersectingFrame(element, frame)
 );
};

Expand All@@ -136,7 +127,7 @@ export const isCursorInFrame = (
 },
 frame: NonDeleted<ExcalidrawFrameElement>,
) => {
 const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
 const [fx1, fy1, fx2, fy2] = getElementBounds(frame);

 return isPointWithinBounds(
 [fx1, fy1],
Expand All@@ -160,7 +151,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (

 return !!elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 );
};
Expand All@@ -181,7 +172,7 @@ export const groupsAreCompletelyOutOfFrame = (
 return (
 elementsInGroup.find(
 (element) =>
elementsAreInFrameBounds([element], frame) ||
elementsAreInBounds([element], frame) ||
 isElementIntersectingFrame(element, frame),
 ) === undefined
 );
Expand DownExpand Up@@ -249,12 +240,18 @@ export const getElementsInResizingFrame = (
 const prevElementsInFrame = getFrameChildren(allElements, frame.id);
 const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);

 const elementsCompletelyInFrame = new Set([
 ...getElementsCompletelyInFrame(allElements, frame),
 ...prevElementsInFrame.filter((element) =>
 isElementContainingFrame(allElements, element, frame),
 ),
 ]);
 const elementsCompletelyInFrame = new Set<ExcalidrawElement>(
 getElementsCompletelyInFrame(allElements, frame),
 );

 for (const element of prevElementsInFrame) {
 if (!elementsCompletelyInFrame.has(element)) {
 // element contains the frame
 if (elementsAreInBounds([frame], element)) {
 elementsCompletelyInFrame.add(element);
 }
 }
 }

 const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
 (element) => !elementsCompletelyInFrame.has(element),
Expand DownExpand Up@@ -321,7 +318,7 @@ export const getElementsInResizingFrame = (
 if (isSelected) {
 const elementsInGroup = getElementsInGroup(allElements, id);

 if (elementsAreInFrameBounds(elementsInGroup, frame)) {
 if (elementsAreInBounds(elementsInGroup, frame)) {
 for (const element of elementsInGroup) {
 nextElementsInFrame.add(element);
 }
Expand DownExpand Up@@ -370,7 +367,7 @@ export const getContainingFrame = (
// --------------------------- Frame Operations -------------------------------

/**
 * Retains (or repairs for target frame) the ordering invriant where children
 * Retains (or repairs for target frame) the ordering invariant where children
 * elements come right before the parent frame:
 * [el, el, child, child, frame, el]
 */
Expand DownExpand Up@@ -437,25 +434,14 @@ export const removeElementsFromFrame = (
 ExcalidrawElement
 >();

 const toRemoveElementsByFrame = new Map<
 ExcalidrawFrameElement["id"],
 ExcalidrawElement[]
 >();

 for (const element of elementsToRemove) {
 if (element.frameId) {
 _elementsToRemove.set(element.id, element);

 const arr = toRemoveElementsByFrame.get(element.frameId) || [];
 arr.push(element);

 const boundTextElement = getBoundTextElement(element);
 if (boundTextElement) {
 _elementsToRemove.set(boundTextElement.id, boundTextElement);
 arr.push(boundTextElement);
 }

 toRemoveElementsByFrame.set(element.frameId, arr);
 }
 }

Expand DownExpand Up@@ -520,12 +506,15 @@ export const updateFrameMembershipOfSelectedElements = (
 }

 const elementsToRemove = new Set<ExcalidrawElement>();
 const processedGroupIds = new Map<string, boolean>();

 elementsToFilter.forEach((element) => {
 if (
 element.frameId &&
 !isFrameElement(element) &&
 !isElementInFrame(element, allElements, appState)
 !isElementInFrame(element, allElements, appState, {
 processedGroupIds,
 })
 ) {
 elementsToRemove.add(element);
 }
Expand DownExpand Up@@ -587,26 +576,36 @@ export const getTargetFrame = (
 : getContainingFrame(_element);
};

// TODO: this a huge bottleneck for large scenes, optimise
// given an element, return if the element is in some frame
export const isElementInFrame = (
 element: ExcalidrawElement,
 allElements: ExcalidrawElementsIncludingDeleted,
 appState: StaticCanvasAppState,
 opts?: {
 targetFrame?: ExcalidrawFrameElement;
 processedGroupIds?: Map<string, boolean>;
 },
) => {
 const frame = getTargetFrame(element, appState);
 const frame = opts?.targetFrame ?? getTargetFrame(element, appState);
 const _element = isTextElement(element)
 ? getContainerElement(element) || element
 : element;

 const groupsInFrame = (yes: boolean) => {
 if (opts?.processedGroupIds) {
 _element.groupIds.forEach((gid) => {
 opts.processedGroupIds?.set(gid, yes);
 });
 }
 };

 if (frame) {
 // Perf improvement:
 // For an element that's already in a frame, if it's not being dragged
 // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
 // It has to be in its containing frame.
 // For an element that's already in a frame, if it's not being selected
 // and its frame is not being selected, it has to be in its containing frame.
 if (
 !appState.selectedElementIds[element.id] ||
 !appState.selectedElementsAreBeingDragged
 !appState.selectedElementIds[element.id] &&
 !appState.selectedElementIds[frame.id]
 ) {
 return true;
 }
Expand All@@ -615,8 +614,21 @@ export const isElementInFrame = (
 return elementOverlapsWithFrame(_element, frame);
 }

 for (const gid of _element.groupIds) {
 if (opts?.processedGroupIds?.has(gid)) {
 return opts.processedGroupIds.get(gid);
 }
 }

 const allElementsInGroup = new Set(
 _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
 _element.groupIds
 .filter((gid) => {
 if (opts?.processedGroupIds) {
 return !opts.processedGroupIds.has(gid);
 }
 return true;
 })
 .flatMap((gid) => getElementsInGroup(allElements, gid)),
 );

 if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
Expand All@@ -637,16 +649,22 @@ export const isElementInFrame = (

 for (const elementInGroup of allElementsInGroup) {
 if (isFrameElement(elementInGroup)) {
 groupsInFrame(false);
 return false;
 }
 }

 for (const elementInGroup of allElementsInGroup) {
 if (elementOverlapsWithFrame(elementInGroup, frame)) {
 groupsInFrame(true);
 return true;
 }
 }
 }

 if (_element.groupIds.length > 0) {
 groupsInFrame(false);
 }

 return false;
};

13 changes: 9 additions & 4 deletions
src/groups.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -232,6 +232,8 @@ export const selectGroupsFromGivenElements = (
 selectedGroupIds: {},
 };

 const processedGroupIds = new Set<string>();

 for (const element of elements) {
 let groupIds = element.groupIds;
 if (appState.editingGroupId) {
Expand All@@ -242,10 +244,13 @@ export const selectGroupsFromGivenElements = (
 }
 if (groupIds.length > 0) {
 const groupId = groupIds[groupIds.length - 1];
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 if (!processedGroupIds.has(groupId)) {
 nextAppState = {
 ...nextAppState,
 ...selectGroup(groupId, nextAppState, elements),
 };
 processedGroupIds.add(groupId);
 }
 }
 }

Expand Down
Loading