Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: resizing multiple frames resizes frame children

Browse Source
This commit is contained in:
Ryan Di 2023-11-17 19:50:15 +08:00
parent 23b24ea5c3
commit 25ab75cb9b
1 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/App.tsx
View File

@ -8299,7 +8299,12 @@ class App extends React.Component<AppProps, AppState> {
transformElements( transformElements(
pointerDownState, pointerDownState,
transformHandleType, transformHandleType,
selectedElements, selectedFrames.length > 1
? this.scene.getSelectedElements({
selectedElementIds: this.state.selectedElementIds,
includeElementsInFrames: true,
})
: selectedElements,
pointerDownState.resize.arrowDirection, pointerDownState.resize.arrowDirection,
shouldRotateWithDiscreteAngle(event), shouldRotateWithDiscreteAngle(event),
shouldResizeFromCenter(event), shouldResizeFromCenter(event),
@ -8315,51 +8320,57 @@ class App extends React.Component<AppProps, AppState> {
) { ) {
this.maybeSuggestBindingForAll(selectedElements); this.maybeSuggestBindingForAll(selectedElements);
const elementsToHighlight = new Set<ExcalidrawElement>(); if (selectedFrames.length === 1) {
selectedFrames.forEach((frame) => { const elementsToHighlight = new Set<ExcalidrawElement>();
const elementsInFrame = getFrameChildren( selectedFrames.forEach((frame) => {
this.scene.getNonDeletedElements(), const elementsInFrame = getFrameChildren(
frame.id, this.scene.getNonDeletedElements(),
); frame.id,
);
// keep elements' positions relative to their frames on frames resizing // keep elements' positions relative to their frames on frames resizing
if (transformHandleType) { if (transformHandleType) {
if (transformHandleType.includes("w")) { if (transformHandleType.includes("w")) {
elementsInFrame.forEach((element) => { elementsInFrame.forEach((element) => {
mutateElement(element, { mutateElement(element, {
x: x:
frame.x + frame.x +
(frameElementsOffsetsMap.get(frame.id + element.id)?.x || 0), (frameElementsOffsetsMap.get(frame.id + element.id)?.x ||
y: 0),
frame.y + y:
(frameElementsOffsetsMap.get(frame.id + element.id)?.y || 0), frame.y +
(frameElementsOffsetsMap.get(frame.id + element.id)?.y ||
0),
});
}); });
}); }
} if (transformHandleType.includes("n")) {
if (transformHandleType.includes("n")) { elementsInFrame.forEach((element) => {
elementsInFrame.forEach((element) => { mutateElement(element, {
mutateElement(element, { x:
x: frame.x +
frame.x + (frameElementsOffsetsMap.get(frame.id + element.id)?.x ||
(frameElementsOffsetsMap.get(frame.id + element.id)?.x || 0), 0),
y: y:
frame.y + frame.y +
(frameElementsOffsetsMap.get(frame.id + element.id)?.y || 0), (frameElementsOffsetsMap.get(frame.id + element.id)?.y ||
0),
});
}); });
}); }
} }
}
getElementsInResizingFrame( getElementsInResizingFrame(
this.scene.getNonDeletedElements(), this.scene.getNonDeletedElements(),
frame, frame,
this.state, this.state,
).forEach((element) => elementsToHighlight.add(element)); ).forEach((element) => elementsToHighlight.add(element));
}); });
this.setState({ this.setState({
elementsToHighlight: [...elementsToHighlight], elementsToHighlight: [...elementsToHighlight],
}); });
}
return true; return true;
} }