@excalidraw/element 0.18.0-6d75c4b34 → 0.18.0-6d870b1c8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dev/index.js +192 -109
- package/dist/dev/index.js.map +2 -2
- package/dist/prod/index.js +11 -11
- package/dist/types/common/src/constants.d.ts +1 -0
- package/dist/types/element/src/align.d.ts +2 -1
- package/dist/types/element/src/delta.d.ts +12 -2
- package/dist/types/element/src/distribute.d.ts +2 -1
- package/dist/types/element/src/groups.d.ts +1 -0
- package/dist/types/element/src/linearElementEditor.d.ts +2 -1
- package/dist/types/excalidraw/actions/actionAddToLibrary.d.ts +0 -3
- package/dist/types/excalidraw/actions/actionBoundText.d.ts +0 -2
- package/dist/types/excalidraw/actions/actionCanvas.d.ts +0 -13
- package/dist/types/excalidraw/actions/actionClipboard.d.ts +3 -8
- package/dist/types/excalidraw/actions/actionCropEditor.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +3 -6
- package/dist/types/excalidraw/actions/actionElementLink.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionElementLock.d.ts +0 -2
- package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionExport.d.ts +0 -9
- package/dist/types/excalidraw/actions/actionFinalize.d.ts +2 -3
- package/dist/types/excalidraw/actions/actionFrame.d.ts +0 -4
- package/dist/types/excalidraw/actions/actionGroup.d.ts +0 -2
- package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +33 -3
- package/dist/types/excalidraw/actions/actionLink.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionMenu.d.ts +0 -3
- package/dist/types/excalidraw/actions/actionNavigate.d.ts +0 -2
- package/dist/types/excalidraw/actions/actionProperties.d.ts +0 -15
- package/dist/types/excalidraw/actions/actionSelectAll.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionStyles.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionToggleStats.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +0 -1
- package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +0 -1
- package/dist/types/excalidraw/components/Actions.d.ts +0 -4
- package/dist/types/excalidraw/components/Ellipsify.d.ts +4 -0
- package/dist/types/excalidraw/data/reconcile.d.ts +1 -0
- package/dist/types/excalidraw/data/restore.d.ts +6 -1
- package/dist/types/excalidraw/index.d.ts +2 -1
- package/dist/types/excalidraw/renderer/staticScene.d.ts +4 -1
- package/dist/types/excalidraw/types.d.ts +4 -4
- package/package.json +3 -3
package/dist/dev/index.js
CHANGED
|
@@ -3825,9 +3825,6 @@ var getTextWidth = (text, font) => {
|
|
|
3825
3825
|
return width;
|
|
3826
3826
|
};
|
|
3827
3827
|
var getTextHeight = (text, fontSize, lineHeight) => {
|
|
3828
|
-
if (text.trim() === "") {
|
|
3829
|
-
return 0;
|
|
3830
|
-
}
|
|
3831
3828
|
const lineCount = splitIntoLines(text).length;
|
|
3832
3829
|
return getLineHeightInPx(fontSize, lineHeight) * lineCount;
|
|
3833
3830
|
};
|
|
@@ -8130,7 +8127,8 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8130
8127
|
segmentMidPointHoveredCoords;
|
|
8131
8128
|
elbowed;
|
|
8132
8129
|
customLineAngle;
|
|
8133
|
-
|
|
8130
|
+
isEditing;
|
|
8131
|
+
constructor(element, elementsMap, isEditing = false) {
|
|
8134
8132
|
this.elementId = element.id;
|
|
8135
8133
|
if (!pointsEqual6(element.points[0], pointFrom8(0, 0))) {
|
|
8136
8134
|
console.error("Linear element is not normalized", Error().stack);
|
|
@@ -8161,6 +8159,7 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8161
8159
|
this.segmentMidPointHoveredCoords = null;
|
|
8162
8160
|
this.elbowed = isElbowArrow(element) && element.elbowed;
|
|
8163
8161
|
this.customLineAngle = null;
|
|
8162
|
+
this.isEditing = isEditing;
|
|
8164
8163
|
}
|
|
8165
8164
|
// ---------------------------------------------------------------------------
|
|
8166
8165
|
// static methods
|
|
@@ -8178,11 +8177,11 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8178
8177
|
return null;
|
|
8179
8178
|
}
|
|
8180
8179
|
static handleBoxSelection(event, appState, setState, elementsMap) {
|
|
8181
|
-
if (!appState.
|
|
8180
|
+
if (!appState.selectedLinearElement?.isEditing || !appState.selectionElement) {
|
|
8182
8181
|
return false;
|
|
8183
8182
|
}
|
|
8184
|
-
const {
|
|
8185
|
-
const { selectedPointsIndices, elementId } =
|
|
8183
|
+
const { selectedLinearElement } = appState;
|
|
8184
|
+
const { selectedPointsIndices, elementId } = selectedLinearElement;
|
|
8186
8185
|
const element = _LinearElementEditor.getElement(elementId, elementsMap);
|
|
8187
8186
|
if (!element) {
|
|
8188
8187
|
return false;
|
|
@@ -8204,8 +8203,8 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8204
8203
|
return true;
|
|
8205
8204
|
});
|
|
8206
8205
|
setState({
|
|
8207
|
-
|
|
8208
|
-
...
|
|
8206
|
+
selectedLinearElement: {
|
|
8207
|
+
...selectedLinearElement,
|
|
8209
8208
|
selectedPointsIndices: nextSelectedPoints.length ? nextSelectedPoints : null
|
|
8210
8209
|
}
|
|
8211
8210
|
});
|
|
@@ -8359,7 +8358,6 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8359
8358
|
};
|
|
8360
8359
|
return {
|
|
8361
8360
|
...app.state,
|
|
8362
|
-
editingLinearElement: app.state.editingLinearElement ? newLinearElementEditor : null,
|
|
8363
8361
|
selectedLinearElement: newLinearElementEditor,
|
|
8364
8362
|
suggestedBindings
|
|
8365
8363
|
};
|
|
@@ -8443,7 +8441,7 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8443
8441
|
}
|
|
8444
8442
|
static getEditorMidPoints = (element, elementsMap, appState) => {
|
|
8445
8443
|
const boundText = getBoundTextElement(element, elementsMap);
|
|
8446
|
-
if (!isElbowArrow(element) && !appState.
|
|
8444
|
+
if (!isElbowArrow(element) && !appState.selectedLinearElement?.isEditing && element.points.length > 2 && !boundText) {
|
|
8447
8445
|
return [];
|
|
8448
8446
|
}
|
|
8449
8447
|
const points = _LinearElementEditor.getPointsGlobalCoordinates(
|
|
@@ -8493,7 +8491,7 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8493
8491
|
element,
|
|
8494
8492
|
elementsMap
|
|
8495
8493
|
);
|
|
8496
|
-
if (points.length >= 3 && !appState.
|
|
8494
|
+
if (points.length >= 3 && !appState.selectedLinearElement?.isEditing && !isElbowArrow(element)) {
|
|
8497
8495
|
return null;
|
|
8498
8496
|
}
|
|
8499
8497
|
const threshold = (_LinearElementEditor.POINT_HANDLE_SIZE + 1) / appState.zoom.value;
|
|
@@ -8633,7 +8631,7 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8633
8631
|
segmentMidpoint,
|
|
8634
8632
|
elementsMap
|
|
8635
8633
|
);
|
|
8636
|
-
} else if (event.altKey && appState.
|
|
8634
|
+
} else if (event.altKey && appState.selectedLinearElement?.isEditing) {
|
|
8637
8635
|
if (linearElementEditor.lastUncommittedPoint == null) {
|
|
8638
8636
|
scene.mutateElement(element, {
|
|
8639
8637
|
points: [
|
|
@@ -8743,14 +8741,14 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8743
8741
|
}
|
|
8744
8742
|
static handlePointerMove(event, scenePointerX, scenePointerY, app) {
|
|
8745
8743
|
const appState = app.state;
|
|
8746
|
-
if (!appState.
|
|
8744
|
+
if (!appState.selectedLinearElement?.isEditing) {
|
|
8747
8745
|
return null;
|
|
8748
8746
|
}
|
|
8749
|
-
const { elementId, lastUncommittedPoint } = appState.
|
|
8747
|
+
const { elementId, lastUncommittedPoint } = appState.selectedLinearElement;
|
|
8750
8748
|
const elementsMap = app.scene.getNonDeletedElementsMap();
|
|
8751
8749
|
const element = _LinearElementEditor.getElement(elementId, elementsMap);
|
|
8752
8750
|
if (!element) {
|
|
8753
|
-
return appState.
|
|
8751
|
+
return appState.selectedLinearElement;
|
|
8754
8752
|
}
|
|
8755
8753
|
const { points } = element;
|
|
8756
8754
|
const lastPoint = points[points.length - 1];
|
|
@@ -8758,10 +8756,10 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8758
8756
|
if (lastPoint === lastUncommittedPoint) {
|
|
8759
8757
|
_LinearElementEditor.deletePoints(element, app, [points.length - 1]);
|
|
8760
8758
|
}
|
|
8761
|
-
return {
|
|
8762
|
-
...appState.
|
|
8759
|
+
return appState.selectedLinearElement?.lastUncommittedPoint ? {
|
|
8760
|
+
...appState.selectedLinearElement,
|
|
8763
8761
|
lastUncommittedPoint: null
|
|
8764
|
-
};
|
|
8762
|
+
} : appState.selectedLinearElement;
|
|
8765
8763
|
}
|
|
8766
8764
|
let newPoint;
|
|
8767
8765
|
if (shouldRotateWithDiscreteAngle(event) && points.length >= 2) {
|
|
@@ -8781,8 +8779,8 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8781
8779
|
newPoint = _LinearElementEditor.createPointAt(
|
|
8782
8780
|
element,
|
|
8783
8781
|
elementsMap,
|
|
8784
|
-
scenePointerX - appState.
|
|
8785
|
-
scenePointerY - appState.
|
|
8782
|
+
scenePointerX - appState.selectedLinearElement.pointerOffset.x,
|
|
8783
|
+
scenePointerY - appState.selectedLinearElement.pointerOffset.y,
|
|
8786
8784
|
event[KEYS2.CTRL_OR_CMD] || isElbowArrow(element) ? null : app.getEffectiveGridSize()
|
|
8787
8785
|
);
|
|
8788
8786
|
}
|
|
@@ -8803,7 +8801,7 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8803
8801
|
_LinearElementEditor.addPoints(element, app.scene, [newPoint]);
|
|
8804
8802
|
}
|
|
8805
8803
|
return {
|
|
8806
|
-
...appState.
|
|
8804
|
+
...appState.selectedLinearElement,
|
|
8807
8805
|
lastUncommittedPoint: element.points[element.points.length - 1]
|
|
8808
8806
|
};
|
|
8809
8807
|
}
|
|
@@ -8909,11 +8907,11 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8909
8907
|
// ---------------------------------------------------------------------------
|
|
8910
8908
|
static duplicateSelectedPoints(appState, scene) {
|
|
8911
8909
|
invariant6(
|
|
8912
|
-
appState.
|
|
8910
|
+
appState.selectedLinearElement?.isEditing,
|
|
8913
8911
|
"Not currently editing a linear element"
|
|
8914
8912
|
);
|
|
8915
8913
|
const elementsMap = scene.getNonDeletedElementsMap();
|
|
8916
|
-
const { selectedPointsIndices, elementId } = appState.
|
|
8914
|
+
const { selectedPointsIndices, elementId } = appState.selectedLinearElement;
|
|
8917
8915
|
const element = _LinearElementEditor.getElement(elementId, elementsMap);
|
|
8918
8916
|
invariant6(
|
|
8919
8917
|
element,
|
|
@@ -8960,14 +8958,14 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
8960
8958
|
}
|
|
8961
8959
|
return {
|
|
8962
8960
|
...appState,
|
|
8963
|
-
|
|
8964
|
-
...appState.
|
|
8961
|
+
selectedLinearElement: {
|
|
8962
|
+
...appState.selectedLinearElement,
|
|
8965
8963
|
selectedPointsIndices: nextSelectedIndices
|
|
8966
8964
|
}
|
|
8967
8965
|
};
|
|
8968
8966
|
}
|
|
8969
8967
|
static deletePoints(element, app, pointIndices) {
|
|
8970
|
-
const isUncommittedPoint = app.state.
|
|
8968
|
+
const isUncommittedPoint = app.state.selectedLinearElement?.isEditing && app.state.selectedLinearElement?.lastUncommittedPoint === element.points[element.points.length - 1];
|
|
8971
8969
|
const nextPoints = element.points.filter((_, idx) => {
|
|
8972
8970
|
return !pointIndices.includes(idx);
|
|
8973
8971
|
});
|
|
@@ -9076,7 +9074,7 @@ var LinearElementEditor = class _LinearElementEditor {
|
|
|
9076
9074
|
pointFrom8(origin.x, origin.y),
|
|
9077
9075
|
pointFrom8(pointerCoords.x, pointerCoords.y)
|
|
9078
9076
|
);
|
|
9079
|
-
if (!appState.
|
|
9077
|
+
if (!appState.selectedLinearElement?.isEditing && dist < DRAGGING_THRESHOLD / appState.zoom.value) {
|
|
9080
9078
|
return false;
|
|
9081
9079
|
}
|
|
9082
9080
|
return true;
|
|
@@ -9829,6 +9827,55 @@ var getNewGroupIdsForDuplication = (groupIds, editingGroupId, mapper) => {
|
|
|
9829
9827
|
}
|
|
9830
9828
|
return copy;
|
|
9831
9829
|
};
|
|
9830
|
+
var getSelectedElementsByGroup = (selectedElements, elementsMap, appState) => {
|
|
9831
|
+
const selectedGroupIds = getSelectedGroupIds(appState);
|
|
9832
|
+
const unboundElements = selectedElements.filter(
|
|
9833
|
+
(element) => !isBoundToContainer(element)
|
|
9834
|
+
);
|
|
9835
|
+
const groups = /* @__PURE__ */ new Map();
|
|
9836
|
+
const elements = /* @__PURE__ */ new Map();
|
|
9837
|
+
const addToElementsMap = (element) => {
|
|
9838
|
+
const currentElementMembers = elements.get(element.id) || [];
|
|
9839
|
+
const boundTextElement = getBoundTextElement(element, elementsMap);
|
|
9840
|
+
if (boundTextElement) {
|
|
9841
|
+
currentElementMembers.push(boundTextElement);
|
|
9842
|
+
}
|
|
9843
|
+
elements.set(element.id, [...currentElementMembers, element]);
|
|
9844
|
+
};
|
|
9845
|
+
const addToGroupsMap = (element, groupId) => {
|
|
9846
|
+
const currentGroupMembers = groups.get(groupId) || [];
|
|
9847
|
+
const boundTextElement = getBoundTextElement(element, elementsMap);
|
|
9848
|
+
if (boundTextElement) {
|
|
9849
|
+
currentGroupMembers.push(boundTextElement);
|
|
9850
|
+
}
|
|
9851
|
+
groups.set(groupId, [...currentGroupMembers, element]);
|
|
9852
|
+
};
|
|
9853
|
+
const handleSingleSelectedGroupCase = (element, selectedGroupId) => {
|
|
9854
|
+
const indexOfSelectedGroupId = element.groupIds.indexOf(selectedGroupId, 0);
|
|
9855
|
+
const nestedGroupCount = element.groupIds.slice(
|
|
9856
|
+
0,
|
|
9857
|
+
indexOfSelectedGroupId
|
|
9858
|
+
).length;
|
|
9859
|
+
return nestedGroupCount > 0 ? addToGroupsMap(element, element.groupIds[indexOfSelectedGroupId - 1]) : addToElementsMap(element);
|
|
9860
|
+
};
|
|
9861
|
+
const isAllInSameGroup = selectedElements.every(
|
|
9862
|
+
(element) => isSelectedViaGroup(appState, element)
|
|
9863
|
+
);
|
|
9864
|
+
unboundElements.forEach((element) => {
|
|
9865
|
+
const selectedGroupId = getSelectedGroupIdForElement(
|
|
9866
|
+
element,
|
|
9867
|
+
appState.selectedGroupIds
|
|
9868
|
+
);
|
|
9869
|
+
if (!selectedGroupId) {
|
|
9870
|
+
addToElementsMap(element);
|
|
9871
|
+
} else if (selectedGroupIds.length === 1 && isAllInSameGroup) {
|
|
9872
|
+
handleSingleSelectedGroupCase(element, selectedGroupId);
|
|
9873
|
+
} else {
|
|
9874
|
+
addToGroupsMap(element, selectedGroupId);
|
|
9875
|
+
}
|
|
9876
|
+
});
|
|
9877
|
+
return Array.from(groups.values()).concat(Array.from(elements.values()));
|
|
9878
|
+
};
|
|
9832
9879
|
|
|
9833
9880
|
// src/selection.ts
|
|
9834
9881
|
var excludeElementsInFramesFromSelection = (selectedElements) => {
|
|
@@ -10516,6 +10563,11 @@ var getCanvasPadding = (element) => {
|
|
|
10516
10563
|
return element.strokeWidth * 12;
|
|
10517
10564
|
case "text":
|
|
10518
10565
|
return element.fontSize / 2;
|
|
10566
|
+
case "arrow":
|
|
10567
|
+
if (element.endArrowhead || element.endArrowhead) {
|
|
10568
|
+
return 40;
|
|
10569
|
+
}
|
|
10570
|
+
return 20;
|
|
10519
10571
|
default:
|
|
10520
10572
|
return 20;
|
|
10521
10573
|
}
|
|
@@ -12745,11 +12797,11 @@ var getNormalizedDimensions = (element) => {
|
|
|
12745
12797
|
|
|
12746
12798
|
// src/align.ts
|
|
12747
12799
|
init_define_import_meta_env();
|
|
12748
|
-
var alignElements = (selectedElements, alignment, scene) => {
|
|
12749
|
-
const
|
|
12750
|
-
const groups = getMaximumGroups(
|
|
12800
|
+
var alignElements = (selectedElements, alignment, scene, appState) => {
|
|
12801
|
+
const groups = getSelectedElementsByGroup(
|
|
12751
12802
|
selectedElements,
|
|
12752
|
-
|
|
12803
|
+
scene.getNonDeletedElementsMap(),
|
|
12804
|
+
appState
|
|
12753
12805
|
);
|
|
12754
12806
|
const selectionBoundingBox = getCommonBoundingBox(selectedElements);
|
|
12755
12807
|
return groups.flatMap((group) => {
|
|
@@ -13185,8 +13237,9 @@ var Store = class {
|
|
|
13185
13237
|
constructor(app) {
|
|
13186
13238
|
this.app = app;
|
|
13187
13239
|
}
|
|
13188
|
-
//
|
|
13240
|
+
// for internal use by history
|
|
13189
13241
|
onDurableIncrementEmitter = new Emitter();
|
|
13242
|
+
// for public use as part of onIncrement API
|
|
13190
13243
|
onStoreIncrementEmitter = new Emitter();
|
|
13191
13244
|
scheduledMacroActions = /* @__PURE__ */ new Set();
|
|
13192
13245
|
scheduledMicroActions = [];
|
|
@@ -13762,8 +13815,7 @@ var getDefaultObservedAppState = () => {
|
|
|
13762
13815
|
viewBackgroundColor: COLOR_PALETTE2.white,
|
|
13763
13816
|
selectedElementIds: {},
|
|
13764
13817
|
selectedGroupIds: {},
|
|
13765
|
-
|
|
13766
|
-
selectedLinearElementId: null,
|
|
13818
|
+
selectedLinearElement: null,
|
|
13767
13819
|
croppingElementId: null,
|
|
13768
13820
|
activeLockedId: null,
|
|
13769
13821
|
lockedMultiSelections: {}
|
|
@@ -13779,10 +13831,10 @@ var getObservedAppState = (appState) => {
|
|
|
13779
13831
|
croppingElementId: appState.croppingElementId,
|
|
13780
13832
|
activeLockedId: appState.activeLockedId,
|
|
13781
13833
|
lockedMultiSelections: appState.lockedMultiSelections,
|
|
13782
|
-
|
|
13783
|
-
|
|
13784
|
-
|
|
13785
|
-
|
|
13834
|
+
selectedLinearElement: appState.selectedLinearElement ? {
|
|
13835
|
+
elementId: appState.selectedLinearElement.elementId,
|
|
13836
|
+
isEditing: !!appState.selectedLinearElement.isEditing
|
|
13837
|
+
} : null
|
|
13786
13838
|
};
|
|
13787
13839
|
Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
|
|
13788
13840
|
value: true,
|
|
@@ -14586,6 +14638,15 @@ var Delta = class _Delta {
|
|
|
14586
14638
|
static isEmpty(delta) {
|
|
14587
14639
|
return !Object.keys(delta.deleted).length && !Object.keys(delta.inserted).length;
|
|
14588
14640
|
}
|
|
14641
|
+
/**
|
|
14642
|
+
* Merges two deltas into a new one.
|
|
14643
|
+
*/
|
|
14644
|
+
static merge(delta1, delta2) {
|
|
14645
|
+
return _Delta.create(
|
|
14646
|
+
{ ...delta1.deleted, ...delta2.deleted },
|
|
14647
|
+
{ ...delta1.inserted, ...delta2.inserted }
|
|
14648
|
+
);
|
|
14649
|
+
}
|
|
14589
14650
|
/**
|
|
14590
14651
|
* Merges deleted and inserted object partials.
|
|
14591
14652
|
*/
|
|
@@ -14831,50 +14892,45 @@ var AppStateDelta = class _AppStateDelta {
|
|
|
14831
14892
|
const inversedDelta = Delta.create(this.delta.inserted, this.delta.deleted);
|
|
14832
14893
|
return new _AppStateDelta(inversedDelta);
|
|
14833
14894
|
}
|
|
14895
|
+
squash(delta) {
|
|
14896
|
+
this.delta = Delta.merge(this.delta, delta.delta);
|
|
14897
|
+
return this;
|
|
14898
|
+
}
|
|
14834
14899
|
applyTo(appState, nextElements) {
|
|
14835
14900
|
try {
|
|
14836
14901
|
const {
|
|
14837
|
-
selectedElementIds:
|
|
14838
|
-
selectedGroupIds:
|
|
14902
|
+
selectedElementIds: deletedSelectedElementIds = {},
|
|
14903
|
+
selectedGroupIds: deletedSelectedGroupIds = {}
|
|
14839
14904
|
} = this.delta.deleted;
|
|
14840
14905
|
const {
|
|
14841
|
-
selectedElementIds:
|
|
14842
|
-
selectedGroupIds:
|
|
14843
|
-
|
|
14844
|
-
editingLinearElementId,
|
|
14906
|
+
selectedElementIds: insertedSelectedElementIds = {},
|
|
14907
|
+
selectedGroupIds: insertedSelectedGroupIds = {},
|
|
14908
|
+
selectedLinearElement: insertedSelectedLinearElement,
|
|
14845
14909
|
...directlyApplicablePartial
|
|
14846
14910
|
} = this.delta.inserted;
|
|
14847
14911
|
const mergedSelectedElementIds = Delta.mergeObjects(
|
|
14848
14912
|
appState.selectedElementIds,
|
|
14849
|
-
|
|
14850
|
-
|
|
14913
|
+
insertedSelectedElementIds,
|
|
14914
|
+
deletedSelectedElementIds
|
|
14851
14915
|
);
|
|
14852
14916
|
const mergedSelectedGroupIds = Delta.mergeObjects(
|
|
14853
14917
|
appState.selectedGroupIds,
|
|
14854
|
-
|
|
14855
|
-
|
|
14918
|
+
insertedSelectedGroupIds,
|
|
14919
|
+
deletedSelectedGroupIds
|
|
14856
14920
|
);
|
|
14857
|
-
const selectedLinearElement =
|
|
14921
|
+
const selectedLinearElement = insertedSelectedLinearElement && nextElements.has(insertedSelectedLinearElement.elementId) ? new LinearElementEditor(
|
|
14858
14922
|
nextElements.get(
|
|
14859
|
-
|
|
14923
|
+
insertedSelectedLinearElement.elementId
|
|
14860
14924
|
),
|
|
14861
|
-
nextElements
|
|
14862
|
-
|
|
14863
|
-
const editingLinearElement = editingLinearElementId && nextElements.has(editingLinearElementId) ? new LinearElementEditor(
|
|
14864
|
-
nextElements.get(
|
|
14865
|
-
editingLinearElementId
|
|
14866
|
-
),
|
|
14867
|
-
nextElements
|
|
14925
|
+
nextElements,
|
|
14926
|
+
insertedSelectedLinearElement.isEditing
|
|
14868
14927
|
) : null;
|
|
14869
14928
|
const nextAppState = {
|
|
14870
14929
|
...appState,
|
|
14871
14930
|
...directlyApplicablePartial,
|
|
14872
14931
|
selectedElementIds: mergedSelectedElementIds,
|
|
14873
14932
|
selectedGroupIds: mergedSelectedGroupIds,
|
|
14874
|
-
selectedLinearElement: typeof
|
|
14875
|
-
// otherwise assign what we had before
|
|
14876
|
-
editingLinearElement: typeof editingLinearElementId !== "undefined" ? editingLinearElement : appState.editingLinearElement
|
|
14877
|
-
// otherwise assign what we had before
|
|
14933
|
+
selectedLinearElement: typeof insertedSelectedLinearElement !== "undefined" ? selectedLinearElement : appState.selectedLinearElement
|
|
14878
14934
|
};
|
|
14879
14935
|
const constainsVisibleChanges = this.filterInvisibleChanges(
|
|
14880
14936
|
appState,
|
|
@@ -14964,57 +15020,44 @@ var AppStateDelta = class _AppStateDelta {
|
|
|
14964
15020
|
nextAppState[key] = null;
|
|
14965
15021
|
}
|
|
14966
15022
|
break;
|
|
14967
|
-
case "
|
|
14968
|
-
|
|
14969
|
-
|
|
14970
|
-
const linearElement = nextAppState[appStateKey];
|
|
14971
|
-
if (!linearElement) {
|
|
15023
|
+
case "selectedLinearElement":
|
|
15024
|
+
const nextLinearElement = nextAppState[key];
|
|
15025
|
+
if (!nextLinearElement) {
|
|
14972
15026
|
visibleDifferenceFlag.value = true;
|
|
14973
15027
|
} else {
|
|
14974
|
-
const element = nextElements.get(
|
|
15028
|
+
const element = nextElements.get(nextLinearElement.elementId);
|
|
14975
15029
|
if (element && !element.isDeleted) {
|
|
14976
15030
|
visibleDifferenceFlag.value = true;
|
|
14977
15031
|
} else {
|
|
14978
|
-
nextAppState[
|
|
15032
|
+
nextAppState[key] = null;
|
|
14979
15033
|
}
|
|
14980
15034
|
}
|
|
14981
15035
|
break;
|
|
14982
|
-
case "lockedMultiSelections":
|
|
15036
|
+
case "lockedMultiSelections":
|
|
14983
15037
|
const prevLockedUnits = prevAppState[key] || {};
|
|
14984
15038
|
const nextLockedUnits = nextAppState[key] || {};
|
|
14985
15039
|
if (!isShallowEqual2(prevLockedUnits, nextLockedUnits)) {
|
|
14986
15040
|
visibleDifferenceFlag.value = true;
|
|
14987
15041
|
}
|
|
14988
15042
|
break;
|
|
14989
|
-
|
|
14990
|
-
case "activeLockedId": {
|
|
15043
|
+
case "activeLockedId":
|
|
14991
15044
|
const prevHitLockedId = prevAppState[key] || null;
|
|
14992
15045
|
const nextHitLockedId = nextAppState[key] || null;
|
|
14993
15046
|
if (prevHitLockedId !== nextHitLockedId) {
|
|
14994
15047
|
visibleDifferenceFlag.value = true;
|
|
14995
15048
|
}
|
|
14996
15049
|
break;
|
|
14997
|
-
|
|
14998
|
-
default: {
|
|
15050
|
+
default:
|
|
14999
15051
|
assertNever4(
|
|
15000
15052
|
key,
|
|
15001
15053
|
`Unknown ObservedElementsAppState's key "${key}"`,
|
|
15002
15054
|
true
|
|
15003
15055
|
);
|
|
15004
|
-
}
|
|
15005
15056
|
}
|
|
15006
15057
|
}
|
|
15007
15058
|
}
|
|
15008
15059
|
return visibleDifferenceFlag.value;
|
|
15009
15060
|
}
|
|
15010
|
-
static convertToAppStateKey(key) {
|
|
15011
|
-
switch (key) {
|
|
15012
|
-
case "selectedLinearElementId":
|
|
15013
|
-
return "selectedLinearElement";
|
|
15014
|
-
case "editingLinearElementId":
|
|
15015
|
-
return "editingLinearElement";
|
|
15016
|
-
}
|
|
15017
|
-
}
|
|
15018
15061
|
static filterSelectedElements(selectedElementIds, elements, visibleDifferenceFlag) {
|
|
15019
15062
|
const ids = Object.keys(selectedElementIds);
|
|
15020
15063
|
if (!ids.length) {
|
|
@@ -15053,8 +15096,7 @@ var AppStateDelta = class _AppStateDelta {
|
|
|
15053
15096
|
editingGroupId,
|
|
15054
15097
|
selectedGroupIds,
|
|
15055
15098
|
selectedElementIds,
|
|
15056
|
-
|
|
15057
|
-
selectedLinearElementId,
|
|
15099
|
+
selectedLinearElement,
|
|
15058
15100
|
croppingElementId,
|
|
15059
15101
|
lockedMultiSelections,
|
|
15060
15102
|
activeLockedId,
|
|
@@ -15208,7 +15250,7 @@ var ElementsDelta = class _ElementsDelta {
|
|
|
15208
15250
|
for (const prevElement of prevElements.values()) {
|
|
15209
15251
|
const nextElement = nextElements.get(prevElement.id);
|
|
15210
15252
|
if (!nextElement) {
|
|
15211
|
-
const deleted = { ...prevElement
|
|
15253
|
+
const deleted = { ...prevElement };
|
|
15212
15254
|
const inserted = {
|
|
15213
15255
|
isDeleted: true,
|
|
15214
15256
|
version: prevElement.version + 1,
|
|
@@ -15219,7 +15261,9 @@ var ElementsDelta = class _ElementsDelta {
|
|
|
15219
15261
|
inserted,
|
|
15220
15262
|
_ElementsDelta.stripIrrelevantProps
|
|
15221
15263
|
);
|
|
15222
|
-
|
|
15264
|
+
if (!prevElement.isDeleted) {
|
|
15265
|
+
removed[prevElement.id] = delta;
|
|
15266
|
+
}
|
|
15223
15267
|
}
|
|
15224
15268
|
}
|
|
15225
15269
|
for (const nextElement of nextElements.values()) {
|
|
@@ -15231,15 +15275,16 @@ var ElementsDelta = class _ElementsDelta {
|
|
|
15231
15275
|
versionNonce: randomInteger4()
|
|
15232
15276
|
};
|
|
15233
15277
|
const inserted = {
|
|
15234
|
-
...nextElement
|
|
15235
|
-
isDeleted: false
|
|
15278
|
+
...nextElement
|
|
15236
15279
|
};
|
|
15237
15280
|
const delta = Delta.create(
|
|
15238
15281
|
deleted,
|
|
15239
15282
|
inserted,
|
|
15240
15283
|
_ElementsDelta.stripIrrelevantProps
|
|
15241
15284
|
);
|
|
15242
|
-
|
|
15285
|
+
if (!nextElement.isDeleted) {
|
|
15286
|
+
added[nextElement.id] = delta;
|
|
15287
|
+
}
|
|
15243
15288
|
continue;
|
|
15244
15289
|
}
|
|
15245
15290
|
if (prevElement.versionNonce !== nextElement.versionNonce) {
|
|
@@ -15260,7 +15305,11 @@ var ElementsDelta = class _ElementsDelta {
|
|
|
15260
15305
|
}
|
|
15261
15306
|
continue;
|
|
15262
15307
|
}
|
|
15263
|
-
|
|
15308
|
+
const strippedDeleted = _ElementsDelta.stripVersionProps(delta.deleted);
|
|
15309
|
+
const strippedInserted = _ElementsDelta.stripVersionProps(
|
|
15310
|
+
delta.inserted
|
|
15311
|
+
);
|
|
15312
|
+
if (Delta.isInnerDifferent(strippedDeleted, strippedInserted, true)) {
|
|
15264
15313
|
updated[nextElement.id] = delta;
|
|
15265
15314
|
}
|
|
15266
15315
|
}
|
|
@@ -15273,8 +15322,8 @@ var ElementsDelta = class _ElementsDelta {
|
|
|
15273
15322
|
inverse() {
|
|
15274
15323
|
const inverseInternal = (deltas) => {
|
|
15275
15324
|
const inversedDeltas = {};
|
|
15276
|
-
for (const [id,
|
|
15277
|
-
inversedDeltas[id] = Delta.create(
|
|
15325
|
+
for (const [id, { inserted, deleted }] of Object.entries(deltas)) {
|
|
15326
|
+
inversedDeltas[id] = Delta.create({ ...inserted }, { ...deleted });
|
|
15278
15327
|
}
|
|
15279
15328
|
return inversedDeltas;
|
|
15280
15329
|
};
|
|
@@ -15338,7 +15387,13 @@ var ElementsDelta = class _ElementsDelta {
|
|
|
15338
15387
|
} else {
|
|
15339
15388
|
latestDelta = delta;
|
|
15340
15389
|
}
|
|
15341
|
-
|
|
15390
|
+
const strippedDeleted = _ElementsDelta.stripVersionProps(
|
|
15391
|
+
latestDelta.deleted
|
|
15392
|
+
);
|
|
15393
|
+
const strippedInserted = _ElementsDelta.stripVersionProps(
|
|
15394
|
+
latestDelta.inserted
|
|
15395
|
+
);
|
|
15396
|
+
if (Delta.isInnerDifferent(strippedDeleted, strippedInserted)) {
|
|
15342
15397
|
modifiedDeltas[id] = latestDelta;
|
|
15343
15398
|
}
|
|
15344
15399
|
}
|
|
@@ -15406,6 +15461,34 @@ var ElementsDelta = class _ElementsDelta {
|
|
|
15406
15461
|
return [nextElements, flags.containsVisibleDifference];
|
|
15407
15462
|
}
|
|
15408
15463
|
}
|
|
15464
|
+
squash(delta) {
|
|
15465
|
+
const { added, removed, updated } = delta;
|
|
15466
|
+
for (const [id, nextDelta] of Object.entries(added)) {
|
|
15467
|
+
const prevDelta = this.added[id];
|
|
15468
|
+
if (!prevDelta) {
|
|
15469
|
+
this.added[id] = nextDelta;
|
|
15470
|
+
} else {
|
|
15471
|
+
this.added[id] = Delta.merge(prevDelta, nextDelta);
|
|
15472
|
+
}
|
|
15473
|
+
}
|
|
15474
|
+
for (const [id, nextDelta] of Object.entries(removed)) {
|
|
15475
|
+
const prevDelta = this.removed[id];
|
|
15476
|
+
if (!prevDelta) {
|
|
15477
|
+
this.removed[id] = nextDelta;
|
|
15478
|
+
} else {
|
|
15479
|
+
this.removed[id] = Delta.merge(prevDelta, nextDelta);
|
|
15480
|
+
}
|
|
15481
|
+
}
|
|
15482
|
+
for (const [id, nextDelta] of Object.entries(updated)) {
|
|
15483
|
+
const prevDelta = this.updated[id];
|
|
15484
|
+
if (!prevDelta) {
|
|
15485
|
+
this.updated[id] = nextDelta;
|
|
15486
|
+
} else {
|
|
15487
|
+
this.updated[id] = Delta.merge(prevDelta, nextDelta);
|
|
15488
|
+
}
|
|
15489
|
+
}
|
|
15490
|
+
return this;
|
|
15491
|
+
}
|
|
15409
15492
|
static createApplier = (nextElements, snapshot, options, flags) => (deltas) => {
|
|
15410
15493
|
const getElement = _ElementsDelta.createGetter(
|
|
15411
15494
|
nextElements,
|
|
@@ -15549,19 +15632,10 @@ var ElementsDelta = class _ElementsDelta {
|
|
|
15549
15632
|
const prevAffectedElements = new Map(
|
|
15550
15633
|
Array.from(prevElements).filter(([id]) => nextAffectedElements.has(id))
|
|
15551
15634
|
);
|
|
15552
|
-
|
|
15553
|
-
|
|
15554
|
-
nextAffectedElements
|
|
15635
|
+
this.squash(
|
|
15636
|
+
// technically we could do better here if perf. would become an issue
|
|
15637
|
+
_ElementsDelta.calculate(prevAffectedElements, nextAffectedElements)
|
|
15555
15638
|
);
|
|
15556
|
-
for (const [id, delta] of Object.entries(added)) {
|
|
15557
|
-
this.added[id] = delta;
|
|
15558
|
-
}
|
|
15559
|
-
for (const [id, delta] of Object.entries(removed)) {
|
|
15560
|
-
this.removed[id] = delta;
|
|
15561
|
-
}
|
|
15562
|
-
for (const [id, delta] of Object.entries(updated)) {
|
|
15563
|
-
this.updated[id] = delta;
|
|
15564
|
-
}
|
|
15565
15639
|
return nextAffectedElements;
|
|
15566
15640
|
}
|
|
15567
15641
|
/**
|
|
@@ -15684,14 +15758,22 @@ var ElementsDelta = class _ElementsDelta {
|
|
|
15684
15758
|
const { id, updated, ...strippedPartial } = partial;
|
|
15685
15759
|
return strippedPartial;
|
|
15686
15760
|
}
|
|
15761
|
+
static stripVersionProps(partial) {
|
|
15762
|
+
const { version, versionNonce, ...strippedPartial } = partial;
|
|
15763
|
+
return strippedPartial;
|
|
15764
|
+
}
|
|
15687
15765
|
};
|
|
15688
15766
|
|
|
15689
15767
|
// src/distribute.ts
|
|
15690
15768
|
init_define_import_meta_env();
|
|
15691
|
-
var distributeElements = (selectedElements, elementsMap, distribution) => {
|
|
15769
|
+
var distributeElements = (selectedElements, elementsMap, distribution, appState) => {
|
|
15692
15770
|
const [start, mid, end, extent] = distribution.axis === "x" ? ["minX", "midX", "maxX", "width"] : ["minY", "midY", "maxY", "height"];
|
|
15693
15771
|
const bounds = getCommonBoundingBox(selectedElements);
|
|
15694
|
-
const groups =
|
|
15772
|
+
const groups = getSelectedElementsByGroup(
|
|
15773
|
+
selectedElements,
|
|
15774
|
+
elementsMap,
|
|
15775
|
+
appState
|
|
15776
|
+
).map((group) => [group, getCommonBoundingBox(group)]).sort((a2, b2) => a2[1][mid] - b2[1][mid]);
|
|
15695
15777
|
let span = 0;
|
|
15696
15778
|
for (const group of groups) {
|
|
15697
15779
|
span += group[1][extent];
|
|
@@ -18403,7 +18485,7 @@ var getTransformHandles = (element, zoom, elementsMap, pointerType = "mouse", om
|
|
|
18403
18485
|
);
|
|
18404
18486
|
};
|
|
18405
18487
|
var shouldShowBoundingBox = (elements, appState) => {
|
|
18406
|
-
if (appState.
|
|
18488
|
+
if (appState.selectedLinearElement?.isEditing) {
|
|
18407
18489
|
return false;
|
|
18408
18490
|
}
|
|
18409
18491
|
if (elements.length > 1) {
|
|
@@ -19151,6 +19233,7 @@ export {
|
|
|
19151
19233
|
getRootElements,
|
|
19152
19234
|
getSceneVersion,
|
|
19153
19235
|
getSelectedElements,
|
|
19236
|
+
getSelectedElementsByGroup,
|
|
19154
19237
|
getSelectedGroupForElement,
|
|
19155
19238
|
getSelectedGroupIdForElement,
|
|
19156
19239
|
getSelectedGroupIds,
|