@inditextech/weave-sdk 2.20.1 → 2.21.0
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/sdk.d.ts +264 -32
- package/dist/sdk.d.ts.map +1 -1
- package/dist/sdk.js +1737 -133
- package/dist/sdk.js.map +1 -1
- package/dist/sdk.node.d.ts +245 -13
- package/dist/sdk.node.d.ts.map +1 -1
- package/dist/sdk.node.js +1737 -133
- package/dist/sdk.node.js.map +1 -1
- package/package.json +2 -2
package/dist/sdk.js
CHANGED
|
@@ -17765,7 +17765,10 @@ function hasFrames(node) {
|
|
|
17765
17765
|
else return true;
|
|
17766
17766
|
}
|
|
17767
17767
|
function intersectArrays(arrays) {
|
|
17768
|
-
|
|
17768
|
+
if (arrays.length === 0) return [];
|
|
17769
|
+
if (arrays.some((arr) => arr.length === 0)) return [];
|
|
17770
|
+
const sorted = [...arrays].sort((a, b) => a.length - b.length);
|
|
17771
|
+
return sorted[0].filter((item) => sorted.every((arr) => arr.includes(item)));
|
|
17769
17772
|
}
|
|
17770
17773
|
function isNodeInSelection(node, nodes) {
|
|
17771
17774
|
return nodes.some((selectedNode) => selectedNode.id() === node.id());
|
|
@@ -18606,6 +18609,7 @@ const DEFAULT_ADD_NODE_OPTIONS = { emitUserChangeEvent: true };
|
|
|
18606
18609
|
const DEFAULT_UPDATE_NODE_OPTIONS = { emitUserChangeEvent: true };
|
|
18607
18610
|
const DEFAULT_REMOVE_NODE_OPTIONS = { emitUserChangeEvent: true };
|
|
18608
18611
|
const DEFAULT_MOVE_NODE_OPTIONS = { emitUserChangeEvent: true };
|
|
18612
|
+
const WEAVE_DEFAULT_CONFIG = { behaviors: { axisLockThreshold: 5 } };
|
|
18609
18613
|
|
|
18610
18614
|
//#endregion
|
|
18611
18615
|
//#region src/plugins/users-presence/constants.ts
|
|
@@ -18642,6 +18646,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
18642
18646
|
"bottom-right"
|
|
18643
18647
|
];
|
|
18644
18648
|
this.taps = 0;
|
|
18649
|
+
this.isCtrlMetaPressed = false;
|
|
18645
18650
|
this.isSpaceKeyPressed = false;
|
|
18646
18651
|
this.isDoubleTap = false;
|
|
18647
18652
|
this.tapStart = {
|
|
@@ -18664,6 +18669,9 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
18664
18669
|
getLayerName() {
|
|
18665
18670
|
return WEAVE_NODES_SELECTION_LAYER_ID;
|
|
18666
18671
|
}
|
|
18672
|
+
getConfiguration() {
|
|
18673
|
+
return this.config;
|
|
18674
|
+
}
|
|
18667
18675
|
initLayer() {
|
|
18668
18676
|
const stage = this.instance.getStage();
|
|
18669
18677
|
const layer = new Konva.Layer({ id: this.getLayerName() });
|
|
@@ -18760,18 +18768,18 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
18760
18768
|
const targetNode = this.instance.getInstanceRecursive(shape);
|
|
18761
18769
|
if (targetNode && targetNode !== nodeHovered) {
|
|
18762
18770
|
this.instance.getStage().handleMouseover();
|
|
18763
|
-
nodeHovered?.handleMouseout();
|
|
18764
|
-
targetNode?.handleMouseover();
|
|
18771
|
+
nodeHovered?.handleMouseout?.();
|
|
18772
|
+
targetNode?.handleMouseover?.();
|
|
18765
18773
|
nodeHovered = targetNode;
|
|
18766
18774
|
}
|
|
18767
|
-
targetNode?.handleMouseover();
|
|
18768
|
-
} else nodeHovered?.handleMouseout();
|
|
18775
|
+
targetNode?.handleMouseover?.();
|
|
18776
|
+
} else nodeHovered?.handleMouseout?.();
|
|
18769
18777
|
});
|
|
18770
18778
|
tr.on("mouseover", () => {
|
|
18771
18779
|
stage.container().style.cursor = "grab";
|
|
18772
18780
|
});
|
|
18773
18781
|
tr.on("mouseout", () => {
|
|
18774
|
-
this.instance.getStage().handleMouseover();
|
|
18782
|
+
this.instance.getStage().handleMouseover?.();
|
|
18775
18783
|
nodeHovered = void 0;
|
|
18776
18784
|
});
|
|
18777
18785
|
window.addEventListener("mouseout", () => {
|
|
@@ -18779,7 +18787,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
18779
18787
|
nodeHovered.handleMouseout();
|
|
18780
18788
|
nodeHovered = void 0;
|
|
18781
18789
|
}
|
|
18782
|
-
this.instance.getStage().handleMouseover();
|
|
18790
|
+
this.instance.getStage().handleMouseover?.();
|
|
18783
18791
|
});
|
|
18784
18792
|
const handleTransform = (e) => {
|
|
18785
18793
|
const moved = this.checkMoved(e);
|
|
@@ -19184,6 +19192,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
19184
19192
|
this.selecting = false;
|
|
19185
19193
|
const stage = this.instance.getStage();
|
|
19186
19194
|
stage.container().addEventListener("keydown", (e) => {
|
|
19195
|
+
if (e.ctrlKey || e.metaKey) this.isCtrlMetaPressed = true;
|
|
19187
19196
|
if (e.code === "Space") this.isSpaceKeyPressed = true;
|
|
19188
19197
|
if ((e.code === "Backspace" || e.code === "Delete") && Object.keys(window.weaveTextEditing).length === 0) {
|
|
19189
19198
|
Promise.resolve().then(() => {
|
|
@@ -19193,6 +19202,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
19193
19202
|
}
|
|
19194
19203
|
});
|
|
19195
19204
|
stage.container().addEventListener("keyup", (e) => {
|
|
19205
|
+
if (e.ctrlKey || e.metaKey) this.isCtrlMetaPressed = false;
|
|
19196
19206
|
if (e.code === "Space") this.isSpaceKeyPressed = false;
|
|
19197
19207
|
});
|
|
19198
19208
|
stage.on("pointerdown", (e) => {
|
|
@@ -19244,6 +19254,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
19244
19254
|
this.selectionRectangle.width(0);
|
|
19245
19255
|
this.selectionRectangle.height(0);
|
|
19246
19256
|
this.selecting = true;
|
|
19257
|
+
if (this.isCtrlMetaPressed) {
|
|
19258
|
+
const nodesSelected = this.tr.nodes();
|
|
19259
|
+
for (const node of nodesSelected) node.fire("onSelectionCleared", { bubbles: true });
|
|
19260
|
+
}
|
|
19247
19261
|
this.tr.nodes([]);
|
|
19248
19262
|
this.instance.emitEvent("onSelectionState", true);
|
|
19249
19263
|
this.panLoopId = requestAnimationFrame(() => this.panLoop());
|
|
@@ -19386,6 +19400,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
19386
19400
|
if (this.tr.nodes().length > 1 && this.config.behaviors?.onMultipleSelection) {
|
|
19387
19401
|
const selectionBehavior = this.config.behaviors?.onMultipleSelection?.(this.tr.nodes());
|
|
19388
19402
|
this.tr.setAttrs(selectionBehavior);
|
|
19403
|
+
this.tr.forceUpdate();
|
|
19389
19404
|
}
|
|
19390
19405
|
}
|
|
19391
19406
|
syncSelection() {
|
|
@@ -19458,6 +19473,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
19458
19473
|
nodeTargeted.dblClick();
|
|
19459
19474
|
return;
|
|
19460
19475
|
}
|
|
19476
|
+
if (stage.isCmdCtrlPressed()) return;
|
|
19461
19477
|
if (!metaPressed) {
|
|
19462
19478
|
this.tr.nodes([nodeTargeted]);
|
|
19463
19479
|
this.tr.show();
|
|
@@ -19509,7 +19525,9 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
|
|
|
19509
19525
|
if (nodesSelected > 1) {
|
|
19510
19526
|
const anchorsArrays = [];
|
|
19511
19527
|
for (const node of nodes) anchorsArrays.push(node.allowedAnchors());
|
|
19512
|
-
|
|
19528
|
+
const enabledAnchors = intersectArrays(anchorsArrays);
|
|
19529
|
+
transformerAttrs.enabledAnchors = enabledAnchors;
|
|
19530
|
+
this.tr.enabledAnchors(transformerAttrs.enabledAnchors);
|
|
19513
19531
|
}
|
|
19514
19532
|
if (this.tr && this.tr.nodes().length > 0) {
|
|
19515
19533
|
this.tr.setAttrs(transformerAttrs);
|
|
@@ -20247,7 +20265,7 @@ var WeaveNode = class {
|
|
|
20247
20265
|
this.hideHoverState();
|
|
20248
20266
|
return;
|
|
20249
20267
|
}
|
|
20250
|
-
if (node
|
|
20268
|
+
if (node?.canBeHovered?.()) selectionPlugin.getHoverTransformer().nodes([node]);
|
|
20251
20269
|
else selectionPlugin.getHoverTransformer().nodes([]);
|
|
20252
20270
|
selectionPlugin.getHoverTransformer().moveToTop();
|
|
20253
20271
|
}
|
|
@@ -20257,25 +20275,27 @@ var WeaveNode = class {
|
|
|
20257
20275
|
selectionPlugin.getHoverTransformer().nodes([]);
|
|
20258
20276
|
}
|
|
20259
20277
|
setupDefaultNodeEvents(node) {
|
|
20260
|
-
|
|
20278
|
+
const handleNodesChange = () => {
|
|
20261
20279
|
if (!this.isLocked(node) && this.isSelecting() && this.isNodeSelected(node)) {
|
|
20262
20280
|
node.draggable(true);
|
|
20263
20281
|
return;
|
|
20264
20282
|
}
|
|
20265
20283
|
node.draggable(false);
|
|
20266
|
-
}
|
|
20284
|
+
};
|
|
20267
20285
|
const isLocked = node.getAttrs().locked ?? false;
|
|
20268
20286
|
if (isLocked) {
|
|
20287
|
+
this.instance.removeEventListener("onNodesChange", handleNodesChange);
|
|
20269
20288
|
node.off("transformstart");
|
|
20270
20289
|
node.off("transform");
|
|
20271
20290
|
node.off("transformend");
|
|
20272
20291
|
node.off("dragstart");
|
|
20273
20292
|
node.off("dragmove");
|
|
20274
20293
|
node.off("dragend");
|
|
20275
|
-
node.off("
|
|
20294
|
+
node.off("pointerover");
|
|
20276
20295
|
node.off("pointerleave");
|
|
20277
20296
|
} else {
|
|
20278
20297
|
let transforming = false;
|
|
20298
|
+
this.instance.addEventListener("onNodesChange", handleNodesChange);
|
|
20279
20299
|
node.on("transformstart", (e) => {
|
|
20280
20300
|
transforming = true;
|
|
20281
20301
|
if (e.target.getAttrs().strokeScaleEnabled !== false) {
|
|
@@ -20341,6 +20361,9 @@ var WeaveNode = class {
|
|
|
20341
20361
|
});
|
|
20342
20362
|
let originalNode = void 0;
|
|
20343
20363
|
let originalContainer = void 0;
|
|
20364
|
+
let startPosition = null;
|
|
20365
|
+
let lockedAxis = null;
|
|
20366
|
+
let isShiftPressed = false;
|
|
20344
20367
|
node.on("dragstart", (e) => {
|
|
20345
20368
|
const nodeTarget = e.target;
|
|
20346
20369
|
this.getNodesSelectionFeedbackPlugin()?.hideSelectionHalo(nodeTarget);
|
|
@@ -20366,6 +20389,14 @@ var WeaveNode = class {
|
|
|
20366
20389
|
}
|
|
20367
20390
|
const realNodeTarget = this.getRealSelectedNode(nodeTarget);
|
|
20368
20391
|
if (realNodeTarget.getAttrs().isCloned) return;
|
|
20392
|
+
lockedAxis = null;
|
|
20393
|
+
if (e.evt.shiftKey && !startPosition) startPosition = realNodeTarget.absolutePosition();
|
|
20394
|
+
if (e.evt.shiftKey) isShiftPressed = true;
|
|
20395
|
+
else {
|
|
20396
|
+
lockedAxis = null;
|
|
20397
|
+
startPosition = null;
|
|
20398
|
+
isShiftPressed = false;
|
|
20399
|
+
}
|
|
20369
20400
|
if (this.getNodesSelectionPlugin()?.getSelectedNodes().length === 1 && realNodeTarget.getAttr("dragStartOpacity") === void 0) {
|
|
20370
20401
|
realNodeTarget.setAttr("dragStartOpacity", realNodeTarget.opacity());
|
|
20371
20402
|
realNodeTarget.opacity(this.getNodesSelectionPlugin()?.getDragOpacity());
|
|
@@ -20422,6 +20453,13 @@ var WeaveNode = class {
|
|
|
20422
20453
|
return;
|
|
20423
20454
|
}
|
|
20424
20455
|
const realNodeTarget = this.getRealSelectedNode(nodeTarget);
|
|
20456
|
+
if (e.evt.shiftKey && !startPosition) startPosition = realNodeTarget.absolutePosition();
|
|
20457
|
+
if (e.evt.shiftKey) isShiftPressed = true;
|
|
20458
|
+
else {
|
|
20459
|
+
lockedAxis = null;
|
|
20460
|
+
startPosition = null;
|
|
20461
|
+
isShiftPressed = false;
|
|
20462
|
+
}
|
|
20425
20463
|
if (this.isSelecting() && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
|
|
20426
20464
|
clearContainerTargets(this.instance);
|
|
20427
20465
|
this.getUsersPresencePlugin()?.setPresence(realNodeTarget.id(), {
|
|
@@ -20433,8 +20471,30 @@ var WeaveNode = class {
|
|
|
20433
20471
|
}
|
|
20434
20472
|
};
|
|
20435
20473
|
node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, DEFAULT_THROTTLE_MS));
|
|
20474
|
+
node.dragBoundFunc((pos) => {
|
|
20475
|
+
if (!startPosition) return pos;
|
|
20476
|
+
if (!isShiftPressed) return pos;
|
|
20477
|
+
const dx = pos.x - startPosition.x;
|
|
20478
|
+
const dy = pos.y - startPosition.y;
|
|
20479
|
+
if (!lockedAxis) {
|
|
20480
|
+
const axisLockThreshold = this.instance.getConfiguration().behaviors.axisLockThreshold;
|
|
20481
|
+
if (Math.abs(dx) < axisLockThreshold && Math.abs(dy) < axisLockThreshold) return pos;
|
|
20482
|
+
lockedAxis = Math.abs(dx) > Math.abs(dy) ? "x" : "y";
|
|
20483
|
+
}
|
|
20484
|
+
if (lockedAxis === "x") return {
|
|
20485
|
+
x: pos.x,
|
|
20486
|
+
y: startPosition.y
|
|
20487
|
+
};
|
|
20488
|
+
else return {
|
|
20489
|
+
x: startPosition.x,
|
|
20490
|
+
y: pos.y
|
|
20491
|
+
};
|
|
20492
|
+
});
|
|
20436
20493
|
node.on("dragend", (e) => {
|
|
20437
20494
|
const nodeTarget = e.target;
|
|
20495
|
+
startPosition = null;
|
|
20496
|
+
lockedAxis = null;
|
|
20497
|
+
isShiftPressed = false;
|
|
20438
20498
|
if (this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
|
|
20439
20499
|
this.instance.releaseMutexLock();
|
|
20440
20500
|
this.getNodesSelectionFeedbackPlugin()?.showSelectionHalo(nodeTarget);
|
|
@@ -20498,12 +20558,14 @@ var WeaveNode = class {
|
|
|
20498
20558
|
realNodeTarget.setAttrs({ isCloneOrigin: void 0 });
|
|
20499
20559
|
originalPosition = realNodeTarget.getAbsolutePosition();
|
|
20500
20560
|
});
|
|
20501
|
-
node.
|
|
20502
|
-
|
|
20503
|
-
|
|
20504
|
-
|
|
20505
|
-
|
|
20506
|
-
|
|
20561
|
+
if (!node.getAttrs().overridesMouseControl) {
|
|
20562
|
+
node.handleMouseover = () => {
|
|
20563
|
+
this.handleMouseOver(node);
|
|
20564
|
+
};
|
|
20565
|
+
node.handleMouseout = () => {
|
|
20566
|
+
this.handleMouseout(node);
|
|
20567
|
+
};
|
|
20568
|
+
}
|
|
20507
20569
|
node.handleSelectNode = () => {
|
|
20508
20570
|
this.getNodesSelectionFeedbackPlugin()?.createSelectionHalo(node);
|
|
20509
20571
|
};
|
|
@@ -20525,6 +20587,7 @@ var WeaveNode = class {
|
|
|
20525
20587
|
}
|
|
20526
20588
|
handleMouseOver(node) {
|
|
20527
20589
|
const stage = this.instance.getStage();
|
|
20590
|
+
if (stage?.isCmdCtrlPressed?.()) return false;
|
|
20528
20591
|
const user = this.instance.getStore().getUser();
|
|
20529
20592
|
const activeAction = this.instance.getActiveAction();
|
|
20530
20593
|
const isNodeSelectionEnabled = this.getSelectionPlugin()?.isEnabled();
|
|
@@ -20559,6 +20622,8 @@ var WeaveNode = class {
|
|
|
20559
20622
|
return cancelBubble;
|
|
20560
20623
|
}
|
|
20561
20624
|
handleMouseout(node) {
|
|
20625
|
+
const stage = this.instance.getStage();
|
|
20626
|
+
if (stage?.isCmdCtrlPressed?.()) return;
|
|
20562
20627
|
const realNode = this.instance.getInstanceRecursive(node);
|
|
20563
20628
|
if (realNode) this.hideHoverState();
|
|
20564
20629
|
}
|
|
@@ -20583,9 +20648,12 @@ var WeaveNode = class {
|
|
|
20583
20648
|
serialize(instance) {
|
|
20584
20649
|
const attrs = instance.getAttrs();
|
|
20585
20650
|
const cleanedAttrs = { ...attrs };
|
|
20651
|
+
delete cleanedAttrs.isSelected;
|
|
20586
20652
|
delete cleanedAttrs.mutexLocked;
|
|
20587
20653
|
delete cleanedAttrs.mutexUserId;
|
|
20588
20654
|
delete cleanedAttrs.draggable;
|
|
20655
|
+
delete cleanedAttrs.overridesMouseControl;
|
|
20656
|
+
delete cleanedAttrs.dragBoundFunc;
|
|
20589
20657
|
return {
|
|
20590
20658
|
key: attrs.id ?? "",
|
|
20591
20659
|
type: attrs.nodeType,
|
|
@@ -20736,6 +20804,12 @@ var WeaveAction = class {
|
|
|
20736
20804
|
getName() {
|
|
20737
20805
|
return this.name;
|
|
20738
20806
|
}
|
|
20807
|
+
hasAliases() {
|
|
20808
|
+
return false;
|
|
20809
|
+
}
|
|
20810
|
+
getAliases() {
|
|
20811
|
+
return [];
|
|
20812
|
+
}
|
|
20739
20813
|
getLogger() {
|
|
20740
20814
|
return this.logger;
|
|
20741
20815
|
}
|
|
@@ -22081,12 +22155,23 @@ var WeaveRegisterManager = class {
|
|
|
22081
22155
|
}
|
|
22082
22156
|
action.register(this.instance);
|
|
22083
22157
|
this.actionsHandlers[actionName] = action;
|
|
22158
|
+
if (action.hasAliases()) {
|
|
22159
|
+
const aliases = action.getAliases();
|
|
22160
|
+
for (const alias of aliases) {
|
|
22161
|
+
if (this.actionsHandlers[alias]) {
|
|
22162
|
+
const msg = `Action handler with name [${alias}] already exists`;
|
|
22163
|
+
this.logger.error(msg);
|
|
22164
|
+
throw new Error(msg);
|
|
22165
|
+
}
|
|
22166
|
+
this.actionsHandlers[alias] = action;
|
|
22167
|
+
}
|
|
22168
|
+
}
|
|
22084
22169
|
}
|
|
22085
22170
|
};
|
|
22086
22171
|
|
|
22087
22172
|
//#endregion
|
|
22088
22173
|
//#region package.json
|
|
22089
|
-
var version = "2.
|
|
22174
|
+
var version = "2.21.0";
|
|
22090
22175
|
|
|
22091
22176
|
//#endregion
|
|
22092
22177
|
//#region src/managers/setup.ts
|
|
@@ -22944,7 +23029,7 @@ var Weave = class {
|
|
|
22944
23029
|
Konva.showWarnings = false;
|
|
22945
23030
|
this.id = v4_default();
|
|
22946
23031
|
this.initialized = false;
|
|
22947
|
-
this.config = mergeExceptArrays(
|
|
23032
|
+
this.config = mergeExceptArrays(WEAVE_DEFAULT_CONFIG, weaveConfig);
|
|
22948
23033
|
this.logger = new WeaveLogger(this, this.config?.logger ?? {
|
|
22949
23034
|
disabled: false,
|
|
22950
23035
|
level: "error"
|
|
@@ -23682,6 +23767,8 @@ var WeaveStageNode = class extends WeaveNode {
|
|
|
23682
23767
|
nodeType = WEAVE_STAGE_NODE_TYPE;
|
|
23683
23768
|
stageFocused = false;
|
|
23684
23769
|
wheelMousePressed = false;
|
|
23770
|
+
isCmdCtrlPressed = false;
|
|
23771
|
+
globalEventsInitialized = false;
|
|
23685
23772
|
onRender(props) {
|
|
23686
23773
|
const stage = new Konva.Stage({ ...props });
|
|
23687
23774
|
setupUpscaleStage(this.instance, stage);
|
|
@@ -23752,9 +23839,37 @@ var WeaveStageNode = class extends WeaveNode {
|
|
|
23752
23839
|
this.hideHoverState();
|
|
23753
23840
|
if (!this.instance.isServerSide()) stage.container().style.cursor = "default";
|
|
23754
23841
|
});
|
|
23842
|
+
stage.isCmdCtrlPressed = () => this.isCmdCtrlPressed;
|
|
23843
|
+
this.setupEvents();
|
|
23755
23844
|
return stage;
|
|
23756
23845
|
}
|
|
23757
23846
|
onUpdate() {}
|
|
23847
|
+
setupEvents() {
|
|
23848
|
+
if (this.globalEventsInitialized) return;
|
|
23849
|
+
window.addEventListener("keydown", (e) => {
|
|
23850
|
+
if (e.ctrlKey || e.metaKey) {
|
|
23851
|
+
this.isCmdCtrlPressed = true;
|
|
23852
|
+
this.instance.getStage().container().style.cursor = "default";
|
|
23853
|
+
const transformer = this.getSelectionPlugin()?.getTransformer();
|
|
23854
|
+
if (!transformer) return;
|
|
23855
|
+
if (transformer.nodes().length === 0 || transformer.nodes().length > 1) return;
|
|
23856
|
+
const selectedNode = transformer.nodes()[0];
|
|
23857
|
+
selectedNode.fire("onCmdCtrlPressed");
|
|
23858
|
+
}
|
|
23859
|
+
});
|
|
23860
|
+
window.addEventListener("keyup", (e) => {
|
|
23861
|
+
if (!e.ctrlKey && !e.metaKey) {
|
|
23862
|
+
this.isCmdCtrlPressed = false;
|
|
23863
|
+
this.instance.getStage().container().style.cursor = "default";
|
|
23864
|
+
const transformer = this.getSelectionPlugin()?.getTransformer();
|
|
23865
|
+
if (!transformer) return;
|
|
23866
|
+
if (transformer.nodes().length === 0 || transformer.nodes().length > 1) return;
|
|
23867
|
+
const selectedNode = transformer.nodes()[0];
|
|
23868
|
+
selectedNode.fire("onCmdCtrlReleased");
|
|
23869
|
+
}
|
|
23870
|
+
});
|
|
23871
|
+
this.globalEventsInitialized = true;
|
|
23872
|
+
}
|
|
23758
23873
|
};
|
|
23759
23874
|
|
|
23760
23875
|
//#endregion
|
|
@@ -23788,6 +23903,8 @@ var WeaveLayerNode = class extends WeaveNode {
|
|
|
23788
23903
|
delete cleanedAttrs.mutexLocked;
|
|
23789
23904
|
delete cleanedAttrs.mutexUserId;
|
|
23790
23905
|
delete cleanedAttrs.draggable;
|
|
23906
|
+
delete cleanedAttrs.overridesMouseControl;
|
|
23907
|
+
delete cleanedAttrs.dragBoundFunc;
|
|
23791
23908
|
return {
|
|
23792
23909
|
key: attrs.id ?? "",
|
|
23793
23910
|
type: attrs.nodeType,
|
|
@@ -23869,6 +23986,8 @@ var WeaveGroupNode = class extends WeaveNode {
|
|
|
23869
23986
|
delete cleanedAttrs.mutexLocked;
|
|
23870
23987
|
delete cleanedAttrs.mutexUserId;
|
|
23871
23988
|
delete cleanedAttrs.draggable;
|
|
23989
|
+
delete cleanedAttrs.overridesMouseControl;
|
|
23990
|
+
delete cleanedAttrs.dragBoundFunc;
|
|
23872
23991
|
return {
|
|
23873
23992
|
key: attrs.id ?? "",
|
|
23874
23993
|
type: attrs.nodeType,
|
|
@@ -24124,17 +24243,12 @@ var WeaveLineNode = class extends WeaveNode {
|
|
|
24124
24243
|
originalEndHandleVisibility = null;
|
|
24125
24244
|
});
|
|
24126
24245
|
line.allowedAnchors = function() {
|
|
24127
|
-
|
|
24246
|
+
return [
|
|
24128
24247
|
"top-left",
|
|
24129
|
-
"top-center",
|
|
24130
24248
|
"top-right",
|
|
24131
|
-
"middle-right",
|
|
24132
|
-
"middle-left",
|
|
24133
24249
|
"bottom-left",
|
|
24134
|
-
"bottom-center",
|
|
24135
24250
|
"bottom-right"
|
|
24136
24251
|
];
|
|
24137
|
-
return [];
|
|
24138
24252
|
};
|
|
24139
24253
|
this.setupDefaultNodeEvents(line);
|
|
24140
24254
|
if (!this.handleZoomChanges) {
|
|
@@ -24564,6 +24678,8 @@ var WeaveTextNode = class extends WeaveNode {
|
|
|
24564
24678
|
delete cleanedAttrs.triggerEditMode;
|
|
24565
24679
|
delete cleanedAttrs.cancelEditMode;
|
|
24566
24680
|
delete cleanedAttrs.measureMultilineText;
|
|
24681
|
+
delete cleanedAttrs.overridesMouseControl;
|
|
24682
|
+
delete cleanedAttrs.dragBoundFunc;
|
|
24567
24683
|
return {
|
|
24568
24684
|
key: attrs.id ?? "",
|
|
24569
24685
|
type: attrs.nodeType,
|
|
@@ -24922,8 +25038,59 @@ var WeaveTextNode = class extends WeaveNode {
|
|
|
24922
25038
|
}
|
|
24923
25039
|
};
|
|
24924
25040
|
|
|
25041
|
+
//#endregion
|
|
25042
|
+
//#region src/nodes/image/constants.ts
|
|
25043
|
+
const WEAVE_IMAGE_NODE_TYPE = "image";
|
|
25044
|
+
const WEAVE_IMAGE_CROP_END_TYPE = {
|
|
25045
|
+
["ACCEPT"]: "accept",
|
|
25046
|
+
["CANCEL"]: "cancel"
|
|
25047
|
+
};
|
|
25048
|
+
const WEAVE_IMAGE_CROP_ANCHOR_POSITION = {
|
|
25049
|
+
["TOP_LEFT"]: "top-left",
|
|
25050
|
+
["TOP_RIGHT"]: "top-right",
|
|
25051
|
+
["BOTTOM_LEFT"]: "bottom-left",
|
|
25052
|
+
["BOTTOM_RIGHT"]: "bottom-right",
|
|
25053
|
+
["TOP_CENTER"]: "top-center",
|
|
25054
|
+
["MIDDLE_LEFT"]: "middle-left",
|
|
25055
|
+
["MIDDLE_RIGHT"]: "middle-right",
|
|
25056
|
+
["BOTTOM_CENTER"]: "bottom-center"
|
|
25057
|
+
};
|
|
25058
|
+
const WEAVE_IMAGE_DEFAULT_CONFIG = {
|
|
25059
|
+
performance: { cache: { enabled: false } },
|
|
25060
|
+
crossOrigin: "anonymous",
|
|
25061
|
+
cropMode: {
|
|
25062
|
+
gridLines: { enabled: true },
|
|
25063
|
+
overlay: { fill: "rgba(0,0,0,0.2)" },
|
|
25064
|
+
selection: {
|
|
25065
|
+
enabledAnchors: [
|
|
25066
|
+
"top-left",
|
|
25067
|
+
"top-center",
|
|
25068
|
+
"top-right",
|
|
25069
|
+
"middle-right",
|
|
25070
|
+
"middle-left",
|
|
25071
|
+
"bottom-left",
|
|
25072
|
+
"bottom-center",
|
|
25073
|
+
"bottom-right"
|
|
25074
|
+
],
|
|
25075
|
+
borderStroke: "#1a1aff",
|
|
25076
|
+
borderStrokeWidth: 2,
|
|
25077
|
+
anchorStyleFunc: (anchor) => {
|
|
25078
|
+
anchor.width(12);
|
|
25079
|
+
anchor.height(12);
|
|
25080
|
+
anchor.offsetX(6);
|
|
25081
|
+
anchor.offsetY(6);
|
|
25082
|
+
anchor.fill("white");
|
|
25083
|
+
anchor.stroke("black");
|
|
25084
|
+
anchor.strokeWidth(1);
|
|
25085
|
+
anchor.cornerRadius(0);
|
|
25086
|
+
}
|
|
25087
|
+
}
|
|
25088
|
+
}
|
|
25089
|
+
};
|
|
25090
|
+
|
|
24925
25091
|
//#endregion
|
|
24926
25092
|
//#region src/nodes/image/crop.ts
|
|
25093
|
+
const SNAP = 8;
|
|
24927
25094
|
var WeaveImageCrop = class WeaveImageCrop {
|
|
24928
25095
|
constructor(instance, node, image, internalImage, clipGroup) {
|
|
24929
25096
|
this.instance = instance;
|
|
@@ -24931,13 +25098,11 @@ var WeaveImageCrop = class WeaveImageCrop {
|
|
|
24931
25098
|
this.image = image;
|
|
24932
25099
|
this.internalImage = internalImage;
|
|
24933
25100
|
this.cropGroup = clipGroup;
|
|
24934
|
-
this.cropping = false;
|
|
24935
25101
|
this.onClose = () => {};
|
|
24936
25102
|
this.handleHide = this.hide.bind(this);
|
|
24937
25103
|
}
|
|
24938
|
-
show(onClose) {
|
|
25104
|
+
show(onClose, options) {
|
|
24939
25105
|
this.onClose = onClose;
|
|
24940
|
-
this.cropping = true;
|
|
24941
25106
|
const nodeEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
|
|
24942
25107
|
if (nodeEdgeSnappingPlugin) nodeEdgeSnappingPlugin.disable();
|
|
24943
25108
|
const nodeDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
|
|
@@ -24946,6 +25111,7 @@ var WeaveImageCrop = class WeaveImageCrop {
|
|
|
24946
25111
|
if (nodesSelectionPlugin) nodesSelectionPlugin.disable();
|
|
24947
25112
|
this.node.clearCache(this.image);
|
|
24948
25113
|
this.image.setAttrs({ cropping: true });
|
|
25114
|
+
this.image.listening(false);
|
|
24949
25115
|
const imageAttrs = this.image.getAttrs();
|
|
24950
25116
|
this.internalImage.hide();
|
|
24951
25117
|
this.cropGroup.destroyChildren();
|
|
@@ -24967,16 +25133,17 @@ var WeaveImageCrop = class WeaveImageCrop {
|
|
|
24967
25133
|
});
|
|
24968
25134
|
this.imageOffsetX = imageAttrs.cropInfo ? imageAttrs.cropInfo.x * realScale : 0;
|
|
24969
25135
|
this.imageOffsetY = imageAttrs.cropInfo ? imageAttrs.cropInfo.y * realScale : 0;
|
|
25136
|
+
const cropModeConfiguration = this.node.getConfiguration().cropMode;
|
|
24970
25137
|
this.cropRect = new Konva.Rect({
|
|
24971
25138
|
x: 0,
|
|
24972
25139
|
y: 0,
|
|
24973
25140
|
width: imageAttrs.cropInfo ? imageAttrs.cropInfo.width * realScale : imageAttrs.uncroppedImage.width,
|
|
24974
25141
|
height: imageAttrs.cropInfo ? imageAttrs.cropInfo.height * realScale : imageAttrs.uncroppedImage.height,
|
|
24975
|
-
fill:
|
|
24976
|
-
stroke: "
|
|
25142
|
+
fill: cropModeConfiguration.overlay.fill,
|
|
25143
|
+
stroke: "transparent",
|
|
24977
25144
|
strokeWidth: 0,
|
|
24978
|
-
strokeScaleEnabled:
|
|
24979
|
-
draggable:
|
|
25145
|
+
strokeScaleEnabled: false,
|
|
25146
|
+
draggable: !(options?.cmdCtrl?.triggered ?? false),
|
|
24980
25147
|
rotation: 0
|
|
24981
25148
|
});
|
|
24982
25149
|
this.transformer = new Konva.Transformer({
|
|
@@ -24987,6 +25154,14 @@ var WeaveImageCrop = class WeaveImageCrop {
|
|
|
24987
25154
|
keepRatio: false,
|
|
24988
25155
|
ignoreStroke: false,
|
|
24989
25156
|
rotateEnabled: false,
|
|
25157
|
+
borderStroke: cropModeConfiguration.selection.borderStroke,
|
|
25158
|
+
borderStrokeWidth: cropModeConfiguration.selection.borderStrokeWidth,
|
|
25159
|
+
anchorStyleFunc: (anchor) => {
|
|
25160
|
+
const tokens = anchor.name().split(" ");
|
|
25161
|
+
const position = tokens[0];
|
|
25162
|
+
cropModeConfiguration.selection.anchorStyleFunc(anchor, position);
|
|
25163
|
+
},
|
|
25164
|
+
anchorStroke: "black",
|
|
24990
25165
|
enabledAnchors: [
|
|
24991
25166
|
"top-left",
|
|
24992
25167
|
"top-center",
|
|
@@ -25050,39 +25225,40 @@ var WeaveImageCrop = class WeaveImageCrop {
|
|
|
25050
25225
|
},
|
|
25051
25226
|
rotation: 0
|
|
25052
25227
|
});
|
|
25053
|
-
this.grid = new Konva.Group(
|
|
25228
|
+
this.grid = new Konva.Group({
|
|
25229
|
+
listening: false,
|
|
25230
|
+
draggable: false
|
|
25231
|
+
});
|
|
25054
25232
|
const cropRect = this.cropRect.getClientRect({
|
|
25055
25233
|
relativeTo: this.cropGroup,
|
|
25056
25234
|
skipStroke: true
|
|
25057
25235
|
});
|
|
25058
|
-
this.
|
|
25059
|
-
const
|
|
25236
|
+
this.drawGrid(0, 0, cropRect.width, cropRect.height);
|
|
25237
|
+
const handleGrid = () => {
|
|
25060
25238
|
const cropRect$1 = this.cropRect.getClientRect({
|
|
25061
25239
|
relativeTo: this.cropGroup,
|
|
25062
25240
|
skipStroke: true
|
|
25063
25241
|
});
|
|
25064
|
-
this.
|
|
25242
|
+
this.drawGrid(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
|
|
25065
25243
|
};
|
|
25066
|
-
this.instance.getStage().on("pointerdown", (e) => {
|
|
25067
|
-
if (!this.cropping) return;
|
|
25068
|
-
const isStage = e.target instanceof Konva.Stage;
|
|
25069
|
-
const isContainerEmptyArea = typeof e.target.getAttrs().isContainerPrincipal !== "undefined" && !e.target.getAttrs().isContainerPrincipal;
|
|
25070
|
-
if (isStage || isContainerEmptyArea) this.cancel();
|
|
25071
|
-
});
|
|
25072
25244
|
this.instance.addEventListener("onActiveActionChange", (activeAction) => {
|
|
25073
25245
|
if (typeof activeAction !== "undefined") this.cancel();
|
|
25074
25246
|
});
|
|
25075
25247
|
this.cropRect.on("dragstart", (e) => {
|
|
25076
25248
|
this.instance.emitEvent("onDrag", e.target);
|
|
25077
25249
|
});
|
|
25078
|
-
this.cropRect.on("dragmove",
|
|
25250
|
+
this.cropRect.on("dragmove", () => {
|
|
25251
|
+
handleGrid();
|
|
25252
|
+
});
|
|
25079
25253
|
this.cropRect.on("dragend", () => {
|
|
25080
25254
|
this.instance.emitEvent("onDrag", null);
|
|
25081
25255
|
});
|
|
25082
25256
|
this.cropRect.on("transformstart", (e) => {
|
|
25083
25257
|
this.instance.emitEvent("onTransform", e.target);
|
|
25084
25258
|
});
|
|
25085
|
-
this.cropRect.on("transform",
|
|
25259
|
+
this.cropRect.on("transform", () => {
|
|
25260
|
+
handleGrid();
|
|
25261
|
+
});
|
|
25086
25262
|
this.cropRect.on("transformend", () => {
|
|
25087
25263
|
this.instance.emitEvent("onTransform", null);
|
|
25088
25264
|
});
|
|
@@ -25092,9 +25268,156 @@ var WeaveImageCrop = class WeaveImageCrop {
|
|
|
25092
25268
|
this.cropGroup.add(this.grid);
|
|
25093
25269
|
const utilityLayer = this.instance.getUtilityLayer();
|
|
25094
25270
|
utilityLayer?.add(this.transformer);
|
|
25095
|
-
this.transformer
|
|
25271
|
+
this.transformer?.forceUpdate();
|
|
25096
25272
|
this.cropGroup.show();
|
|
25097
|
-
|
|
25273
|
+
window.addEventListener("keydown", this.handleHide);
|
|
25274
|
+
if (options.cmdCtrl.triggered) {
|
|
25275
|
+
utilityLayer?.hide();
|
|
25276
|
+
const stage = this.instance.getStage();
|
|
25277
|
+
let resizing = false;
|
|
25278
|
+
let fixedCorner = {
|
|
25279
|
+
x: 0,
|
|
25280
|
+
y: 0
|
|
25281
|
+
};
|
|
25282
|
+
const limits = {
|
|
25283
|
+
top: this.cropImage.y(),
|
|
25284
|
+
right: this.cropImage.x() + this.cropImage.width(),
|
|
25285
|
+
bottom: this.cropImage.y() + this.cropImage.height(),
|
|
25286
|
+
left: this.cropImage.x()
|
|
25287
|
+
};
|
|
25288
|
+
if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_LEFT) fixedCorner = {
|
|
25289
|
+
x: this.cropRect.x() + this.cropRect.width(),
|
|
25290
|
+
y: this.cropRect.y() + this.cropRect.height()
|
|
25291
|
+
};
|
|
25292
|
+
if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_RIGHT) fixedCorner = {
|
|
25293
|
+
x: this.cropRect.x(),
|
|
25294
|
+
y: this.cropRect.y() + this.cropRect.height()
|
|
25295
|
+
};
|
|
25296
|
+
if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_LEFT) fixedCorner = {
|
|
25297
|
+
x: this.cropRect.x() + this.cropRect.width(),
|
|
25298
|
+
y: this.cropRect.y()
|
|
25299
|
+
};
|
|
25300
|
+
if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_RIGHT) fixedCorner = {
|
|
25301
|
+
x: this.cropRect.x(),
|
|
25302
|
+
y: this.cropRect.y()
|
|
25303
|
+
};
|
|
25304
|
+
if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_CENTER) fixedCorner = {
|
|
25305
|
+
x: this.cropRect.x() + this.cropRect.width(),
|
|
25306
|
+
y: this.cropRect.y() + this.cropRect.height()
|
|
25307
|
+
};
|
|
25308
|
+
if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_RIGHT) fixedCorner = {
|
|
25309
|
+
x: this.cropRect.x(),
|
|
25310
|
+
y: this.cropRect.y() + this.cropRect.height() / 2
|
|
25311
|
+
};
|
|
25312
|
+
if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_CENTER) fixedCorner = {
|
|
25313
|
+
x: this.cropRect.x(),
|
|
25314
|
+
y: this.cropRect.y()
|
|
25315
|
+
};
|
|
25316
|
+
if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_LEFT) fixedCorner = {
|
|
25317
|
+
x: this.cropRect.x() + this.cropRect.width(),
|
|
25318
|
+
y: this.cropRect.y() + this.cropRect.height() / 2
|
|
25319
|
+
};
|
|
25320
|
+
this.drawSquarePointer(options.cmdCtrl.corner, fixedCorner, limits);
|
|
25321
|
+
resizing = true;
|
|
25322
|
+
stage.on("pointermove", () => {
|
|
25323
|
+
if (!resizing) return;
|
|
25324
|
+
if (options.cmdCtrl.triggered) {
|
|
25325
|
+
this.drawSquarePointer(options.cmdCtrl.corner, fixedCorner, limits);
|
|
25326
|
+
handleGrid();
|
|
25327
|
+
}
|
|
25328
|
+
});
|
|
25329
|
+
stage.on("pointerup", () => {
|
|
25330
|
+
if (!resizing) return;
|
|
25331
|
+
resizing = false;
|
|
25332
|
+
this.hide({ code: "Enter" });
|
|
25333
|
+
});
|
|
25334
|
+
} else utilityLayer?.show();
|
|
25335
|
+
}
|
|
25336
|
+
createSoftSnap(snapTo, snapDistance = 8) {
|
|
25337
|
+
let snapped = false;
|
|
25338
|
+
return function(value) {
|
|
25339
|
+
const dist = Math.abs(value - snapTo);
|
|
25340
|
+
if (!snapped && dist < snapDistance) {
|
|
25341
|
+
snapped = true;
|
|
25342
|
+
return snapTo;
|
|
25343
|
+
}
|
|
25344
|
+
if (snapped && dist > snapDistance * 1.5) snapped = false;
|
|
25345
|
+
return snapped ? snapTo : value;
|
|
25346
|
+
};
|
|
25347
|
+
}
|
|
25348
|
+
drawSquarePointer(corner, fixedCorner, limits) {
|
|
25349
|
+
const stage = this.instance.getStage();
|
|
25350
|
+
const pointer = stage.getPointerPosition();
|
|
25351
|
+
if (!pointer) return;
|
|
25352
|
+
const local = this.cropGroup.getAbsoluteTransform().copy().invert().point(pointer);
|
|
25353
|
+
const newPos = {
|
|
25354
|
+
x: local.x,
|
|
25355
|
+
y: local.y
|
|
25356
|
+
};
|
|
25357
|
+
let newWidth = this.cropRect.width();
|
|
25358
|
+
let newHeight = this.cropRect.height();
|
|
25359
|
+
if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_LEFT) {
|
|
25360
|
+
newWidth = fixedCorner.x - local.x;
|
|
25361
|
+
newHeight = fixedCorner.y - local.y;
|
|
25362
|
+
newPos.x = local.x;
|
|
25363
|
+
newPos.y = local.y;
|
|
25364
|
+
}
|
|
25365
|
+
if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_RIGHT) {
|
|
25366
|
+
newWidth = local.x - fixedCorner.x;
|
|
25367
|
+
newHeight = fixedCorner.y - local.y;
|
|
25368
|
+
newPos.x = fixedCorner.x;
|
|
25369
|
+
newPos.y = local.y;
|
|
25370
|
+
}
|
|
25371
|
+
if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_LEFT) {
|
|
25372
|
+
newWidth = fixedCorner.x - local.x;
|
|
25373
|
+
newHeight = local.y - fixedCorner.y;
|
|
25374
|
+
newPos.x = local.x;
|
|
25375
|
+
newPos.y = fixedCorner.y;
|
|
25376
|
+
}
|
|
25377
|
+
if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_RIGHT) {
|
|
25378
|
+
newWidth = local.x - fixedCorner.x;
|
|
25379
|
+
newHeight = local.y - fixedCorner.y;
|
|
25380
|
+
newPos.x = fixedCorner.x;
|
|
25381
|
+
newPos.y = fixedCorner.y;
|
|
25382
|
+
}
|
|
25383
|
+
if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_CENTER) {
|
|
25384
|
+
newWidth = this.cropRect.width();
|
|
25385
|
+
newHeight = fixedCorner.y - local.y;
|
|
25386
|
+
newPos.x = this.cropRect.x();
|
|
25387
|
+
newPos.y = local.y;
|
|
25388
|
+
}
|
|
25389
|
+
if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_RIGHT) {
|
|
25390
|
+
newWidth = local.x - fixedCorner.x;
|
|
25391
|
+
newHeight = this.cropRect.height();
|
|
25392
|
+
newPos.x = this.cropRect.x();
|
|
25393
|
+
newPos.y = this.cropRect.y();
|
|
25394
|
+
}
|
|
25395
|
+
if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_CENTER) {
|
|
25396
|
+
newWidth = this.cropRect.width();
|
|
25397
|
+
newHeight = local.y - fixedCorner.y;
|
|
25398
|
+
newPos.x = this.cropRect.x();
|
|
25399
|
+
newPos.y = this.cropRect.y();
|
|
25400
|
+
}
|
|
25401
|
+
if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_LEFT) {
|
|
25402
|
+
newWidth = fixedCorner.x - local.x;
|
|
25403
|
+
newHeight = this.cropRect.height();
|
|
25404
|
+
newPos.x = local.x;
|
|
25405
|
+
newPos.y = this.cropRect.y();
|
|
25406
|
+
}
|
|
25407
|
+
newPos.x = this.createSoftSnap(limits.left, SNAP)(newPos.x);
|
|
25408
|
+
newPos.x = this.createSoftSnap(limits.right, SNAP)(newPos.x);
|
|
25409
|
+
newPos.y = this.createSoftSnap(limits.top, SNAP)(newPos.y);
|
|
25410
|
+
newPos.y = this.createSoftSnap(limits.bottom, SNAP)(newPos.y);
|
|
25411
|
+
newWidth = this.createSoftSnap(limits.left, SNAP)(newWidth);
|
|
25412
|
+
newWidth = this.createSoftSnap(limits.right, SNAP)(newWidth);
|
|
25413
|
+
newHeight = this.createSoftSnap(limits.top, SNAP)(newHeight);
|
|
25414
|
+
newHeight = this.createSoftSnap(limits.bottom, SNAP)(newHeight);
|
|
25415
|
+
this.cropRect.setAttrs({
|
|
25416
|
+
x: newPos.x,
|
|
25417
|
+
y: newPos.y,
|
|
25418
|
+
width: newWidth,
|
|
25419
|
+
height: newHeight
|
|
25420
|
+
});
|
|
25098
25421
|
}
|
|
25099
25422
|
accept() {
|
|
25100
25423
|
this.hide({ code: "Enter" });
|
|
@@ -25104,14 +25427,18 @@ var WeaveImageCrop = class WeaveImageCrop {
|
|
|
25104
25427
|
}
|
|
25105
25428
|
hide(e) {
|
|
25106
25429
|
if (!["Enter", "Escape"].includes(e.code)) return;
|
|
25107
|
-
this.cropping = false;
|
|
25108
25430
|
this.image.setAttrs({ cropping: false });
|
|
25431
|
+
this.image.listening(true);
|
|
25109
25432
|
if (e.code === "Enter") this.handleClipEnd();
|
|
25110
25433
|
const stage = this.instance.getStage();
|
|
25111
25434
|
this.onClose();
|
|
25112
25435
|
const utilityLayer = this.instance.getUtilityLayer();
|
|
25113
25436
|
utilityLayer?.destroyChildren();
|
|
25114
|
-
|
|
25437
|
+
if (stage.isCmdCtrlPressed() && utilityLayer) {
|
|
25438
|
+
this.node.renderCropMode(utilityLayer, this.image);
|
|
25439
|
+
utilityLayer.show();
|
|
25440
|
+
}
|
|
25441
|
+
window.removeEventListener("keydown", this.handleHide);
|
|
25115
25442
|
this.cropGroup.destroyChildren();
|
|
25116
25443
|
this.cropGroup.hide();
|
|
25117
25444
|
const nodesEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
|
|
@@ -25126,36 +25453,56 @@ var WeaveImageCrop = class WeaveImageCrop {
|
|
|
25126
25453
|
this.node.cacheNode(this.image);
|
|
25127
25454
|
this.instance.emitEvent("onImageCropEnd", { instance: this.image });
|
|
25128
25455
|
}
|
|
25129
|
-
|
|
25456
|
+
drawGrid(x, y, width, height) {
|
|
25130
25457
|
if (!this.image.getAttrs().cropping) return;
|
|
25131
25458
|
this.grid.destroyChildren();
|
|
25132
|
-
const
|
|
25133
|
-
|
|
25134
|
-
|
|
25135
|
-
const
|
|
25136
|
-
|
|
25137
|
-
|
|
25138
|
-
|
|
25139
|
-
|
|
25140
|
-
|
|
25141
|
-
|
|
25142
|
-
|
|
25143
|
-
|
|
25144
|
-
|
|
25145
|
-
|
|
25146
|
-
|
|
25147
|
-
|
|
25148
|
-
|
|
25149
|
-
|
|
25150
|
-
|
|
25151
|
-
|
|
25152
|
-
|
|
25153
|
-
|
|
25154
|
-
|
|
25155
|
-
|
|
25156
|
-
|
|
25157
|
-
|
|
25459
|
+
const cropModeConfiguration = this.node.getConfiguration().cropMode;
|
|
25460
|
+
if (cropModeConfiguration.gridLines.enabled) {
|
|
25461
|
+
const stepX = width / 3;
|
|
25462
|
+
const stepY = height / 3;
|
|
25463
|
+
for (let i = 1; i <= 2; i++) {
|
|
25464
|
+
const vLine = new Konva.Line({
|
|
25465
|
+
points: [
|
|
25466
|
+
x + stepX * i,
|
|
25467
|
+
y,
|
|
25468
|
+
x + stepX * i,
|
|
25469
|
+
y + height
|
|
25470
|
+
],
|
|
25471
|
+
stroke: "#1a1aff",
|
|
25472
|
+
strokeWidth: 1,
|
|
25473
|
+
strokeScaleEnabled: false,
|
|
25474
|
+
listening: false,
|
|
25475
|
+
draggable: false
|
|
25476
|
+
});
|
|
25477
|
+
const hLine = new Konva.Line({
|
|
25478
|
+
points: [
|
|
25479
|
+
x,
|
|
25480
|
+
y + stepY * i,
|
|
25481
|
+
x + width,
|
|
25482
|
+
y + stepY * i
|
|
25483
|
+
],
|
|
25484
|
+
stroke: "#1a1aff",
|
|
25485
|
+
strokeWidth: 1,
|
|
25486
|
+
strokeScaleEnabled: false,
|
|
25487
|
+
listening: false,
|
|
25488
|
+
draggable: false
|
|
25489
|
+
});
|
|
25490
|
+
this.grid.add(vLine, hLine);
|
|
25491
|
+
}
|
|
25158
25492
|
}
|
|
25493
|
+
const border = new Konva.Rect({
|
|
25494
|
+
x,
|
|
25495
|
+
y,
|
|
25496
|
+
width,
|
|
25497
|
+
height,
|
|
25498
|
+
stroke: cropModeConfiguration.selection.borderStroke,
|
|
25499
|
+
strokeWidth: cropModeConfiguration.selection.borderStrokeWidth,
|
|
25500
|
+
strokeScaleEnabled: false,
|
|
25501
|
+
listening: false,
|
|
25502
|
+
draggable: false
|
|
25503
|
+
});
|
|
25504
|
+
this.grid.add(border);
|
|
25505
|
+
this.transformer?.forceUpdate();
|
|
25159
25506
|
}
|
|
25160
25507
|
unCrop() {
|
|
25161
25508
|
const imageAttrs = this.image.getAttrs();
|
|
@@ -25275,18 +25622,6 @@ var WeaveImageCrop = class WeaveImageCrop {
|
|
|
25275
25622
|
}
|
|
25276
25623
|
};
|
|
25277
25624
|
|
|
25278
|
-
//#endregion
|
|
25279
|
-
//#region src/nodes/image/constants.ts
|
|
25280
|
-
const WEAVE_IMAGE_NODE_TYPE = "image";
|
|
25281
|
-
const WEAVE_IMAGE_CROP_END_TYPE = {
|
|
25282
|
-
["ACCEPT"]: "accept",
|
|
25283
|
-
["CANCEL"]: "cancel"
|
|
25284
|
-
};
|
|
25285
|
-
const WEAVE_IMAGE_DEFAULT_CONFIG = {
|
|
25286
|
-
performance: { cache: { enabled: false } },
|
|
25287
|
-
crossOrigin: "anonymous"
|
|
25288
|
-
};
|
|
25289
|
-
|
|
25290
25625
|
//#endregion
|
|
25291
25626
|
//#region src/nodes/image/image.ts
|
|
25292
25627
|
var WeaveImageNode = class extends WeaveNode {
|
|
@@ -25306,13 +25641,16 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25306
25641
|
this.config = mergeExceptArrays(WEAVE_IMAGE_DEFAULT_CONFIG, config);
|
|
25307
25642
|
this.imageCrop = null;
|
|
25308
25643
|
}
|
|
25644
|
+
getConfiguration() {
|
|
25645
|
+
return this.config;
|
|
25646
|
+
}
|
|
25309
25647
|
onRegister() {
|
|
25310
25648
|
this.logger.info(`image caching enabled: ${this.config.performance.cache.enabled}`);
|
|
25311
25649
|
}
|
|
25312
|
-
triggerCrop(imageNode) {
|
|
25650
|
+
triggerCrop(imageNode, options) {
|
|
25313
25651
|
const stage = this.instance.getStage();
|
|
25314
25652
|
if (imageNode.getAttrs().cropping ?? false) return;
|
|
25315
|
-
if (!(this.isSelecting() && this.isNodeSelected(imageNode))) return;
|
|
25653
|
+
if (!(this.isSelecting() && this.isNodeSelected(imageNode)) && !options.cmdCtrl.triggered) return;
|
|
25316
25654
|
const lockAcquired = this.instance.setMutexLock({
|
|
25317
25655
|
nodeIds: [imageNode.id()],
|
|
25318
25656
|
operation: "image-crop"
|
|
@@ -25328,8 +25666,11 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25328
25666
|
stage.mode(WEAVE_STAGE_DEFAULT_MODE);
|
|
25329
25667
|
this.instance.emitEvent("onImageCropEnd", { instance: image });
|
|
25330
25668
|
this.imageCrop = null;
|
|
25669
|
+
}, options);
|
|
25670
|
+
this.instance.emitEvent("onImageCropStart", {
|
|
25671
|
+
instance: image,
|
|
25672
|
+
cmdCtrlTriggered: options.cmdCtrl.triggered
|
|
25331
25673
|
});
|
|
25332
|
-
this.instance.emitEvent("onImageCropStart", { instance: image });
|
|
25333
25674
|
}
|
|
25334
25675
|
closeCrop = (imageNode, type) => {
|
|
25335
25676
|
if (!this.imageCrop) return;
|
|
@@ -25375,7 +25716,8 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25375
25716
|
id,
|
|
25376
25717
|
name: "node",
|
|
25377
25718
|
loadedImage: false,
|
|
25378
|
-
loadedImageError: false
|
|
25719
|
+
loadedImageError: false,
|
|
25720
|
+
cropping: false
|
|
25379
25721
|
});
|
|
25380
25722
|
this.setupDefaultNodeAugmentation(image);
|
|
25381
25723
|
image.movedToContainer = () => {
|
|
@@ -25384,7 +25726,7 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25384
25726
|
if (!image$1) return;
|
|
25385
25727
|
};
|
|
25386
25728
|
image.triggerCrop = () => {
|
|
25387
|
-
this.triggerCrop(image);
|
|
25729
|
+
this.triggerCrop(image, { cmdCtrl: { triggered: false } });
|
|
25388
25730
|
};
|
|
25389
25731
|
image.closeCrop = (type) => {
|
|
25390
25732
|
this.closeCrop(image, type);
|
|
@@ -25493,7 +25835,32 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25493
25835
|
if (this.imageCrop) this.closeCrop(image, WEAVE_IMAGE_CROP_END_TYPE.CANCEL);
|
|
25494
25836
|
}
|
|
25495
25837
|
});
|
|
25496
|
-
|
|
25838
|
+
image.on("onCmdCtrlPressed", () => {
|
|
25839
|
+
const transformer = this.getSelectionPlugin()?.getTransformer();
|
|
25840
|
+
if (!transformer) return;
|
|
25841
|
+
transformer.hide();
|
|
25842
|
+
const utilityLayer = this.instance.getUtilityLayer();
|
|
25843
|
+
if (!utilityLayer) return;
|
|
25844
|
+
utilityLayer?.destroyChildren();
|
|
25845
|
+
this.renderCropMode(utilityLayer, image);
|
|
25846
|
+
utilityLayer?.show();
|
|
25847
|
+
});
|
|
25848
|
+
image.on("onCmdCtrlReleased", () => {
|
|
25849
|
+
const transformer = this.getSelectionPlugin()?.getTransformer();
|
|
25850
|
+
if (!transformer) return;
|
|
25851
|
+
transformer.show();
|
|
25852
|
+
const utilityLayer = this.instance.getUtilityLayer();
|
|
25853
|
+
if (!utilityLayer) return;
|
|
25854
|
+
utilityLayer?.destroyChildren();
|
|
25855
|
+
});
|
|
25856
|
+
image.on("onSelectionCleared", () => {
|
|
25857
|
+
const transformer = this.getSelectionPlugin()?.getTransformer();
|
|
25858
|
+
if (!transformer) return;
|
|
25859
|
+
transformer.show();
|
|
25860
|
+
const utilityLayer = this.instance.getUtilityLayer();
|
|
25861
|
+
if (!utilityLayer) return;
|
|
25862
|
+
utilityLayer?.destroyChildren();
|
|
25863
|
+
});
|
|
25497
25864
|
return image;
|
|
25498
25865
|
}
|
|
25499
25866
|
clearCache(nodeInstance) {
|
|
@@ -25505,6 +25872,164 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25505
25872
|
nodeInstance.cache({ pixelRatio: this.config.performance.cache.pixelRatio });
|
|
25506
25873
|
}
|
|
25507
25874
|
}
|
|
25875
|
+
renderCropBorder(layer, node) {
|
|
25876
|
+
const stage = this.instance.getStage();
|
|
25877
|
+
const stageScale = stage.scaleX();
|
|
25878
|
+
const transform = node.getAbsoluteTransform().copy();
|
|
25879
|
+
const w = node.width();
|
|
25880
|
+
const h = node.height();
|
|
25881
|
+
const offsetX = node.offsetX();
|
|
25882
|
+
const offsetY = node.offsetY();
|
|
25883
|
+
const localCorners = [
|
|
25884
|
+
{
|
|
25885
|
+
x: 0,
|
|
25886
|
+
y: 0
|
|
25887
|
+
},
|
|
25888
|
+
{
|
|
25889
|
+
x: w,
|
|
25890
|
+
y: 0
|
|
25891
|
+
},
|
|
25892
|
+
{
|
|
25893
|
+
x: w,
|
|
25894
|
+
y: h
|
|
25895
|
+
},
|
|
25896
|
+
{
|
|
25897
|
+
x: 0,
|
|
25898
|
+
y: h
|
|
25899
|
+
}
|
|
25900
|
+
];
|
|
25901
|
+
const absoluteCorners = localCorners.map((p) => transform.point({
|
|
25902
|
+
x: p.x - offsetX,
|
|
25903
|
+
y: p.y - offsetY
|
|
25904
|
+
}));
|
|
25905
|
+
const rect = new Konva.Rect({
|
|
25906
|
+
width: absoluteCorners[1].x - absoluteCorners[0].x,
|
|
25907
|
+
height: absoluteCorners[2].y - absoluteCorners[0].y,
|
|
25908
|
+
fill: "transparent",
|
|
25909
|
+
strokeWidth: 2,
|
|
25910
|
+
stroke: "#1a1aff",
|
|
25911
|
+
draggable: false,
|
|
25912
|
+
listening: false,
|
|
25913
|
+
rotation: node.rotation()
|
|
25914
|
+
});
|
|
25915
|
+
layer.add(rect);
|
|
25916
|
+
rect.setAbsolutePosition(absoluteCorners[0]);
|
|
25917
|
+
rect.scale({
|
|
25918
|
+
x: 1 / stageScale,
|
|
25919
|
+
y: 1 / stageScale
|
|
25920
|
+
});
|
|
25921
|
+
stage.on("scaleXChange scaleYChange", () => {
|
|
25922
|
+
const scale = stage.scaleX();
|
|
25923
|
+
rect.scale({
|
|
25924
|
+
x: 1 / scale,
|
|
25925
|
+
y: 1 / scale
|
|
25926
|
+
});
|
|
25927
|
+
});
|
|
25928
|
+
}
|
|
25929
|
+
renderCropAnchor(position, node, layer, onClick) {
|
|
25930
|
+
const transform = node.getAbsoluteTransform().copy();
|
|
25931
|
+
const stage = this.instance.getStage();
|
|
25932
|
+
const stageScale = stage.scaleX();
|
|
25933
|
+
const w = node.width();
|
|
25934
|
+
const h = node.height();
|
|
25935
|
+
const offsetX = node.offsetX();
|
|
25936
|
+
const offsetY = node.offsetY();
|
|
25937
|
+
const localCorners = [
|
|
25938
|
+
{
|
|
25939
|
+
x: 0,
|
|
25940
|
+
y: 0
|
|
25941
|
+
},
|
|
25942
|
+
{
|
|
25943
|
+
x: w,
|
|
25944
|
+
y: 0
|
|
25945
|
+
},
|
|
25946
|
+
{
|
|
25947
|
+
x: w,
|
|
25948
|
+
y: h
|
|
25949
|
+
},
|
|
25950
|
+
{
|
|
25951
|
+
x: 0,
|
|
25952
|
+
y: h
|
|
25953
|
+
},
|
|
25954
|
+
{
|
|
25955
|
+
x: w / 2,
|
|
25956
|
+
y: 0
|
|
25957
|
+
},
|
|
25958
|
+
{
|
|
25959
|
+
x: w,
|
|
25960
|
+
y: h / 2
|
|
25961
|
+
},
|
|
25962
|
+
{
|
|
25963
|
+
x: 0,
|
|
25964
|
+
y: h / 2
|
|
25965
|
+
},
|
|
25966
|
+
{
|
|
25967
|
+
x: w / 2,
|
|
25968
|
+
y: h
|
|
25969
|
+
}
|
|
25970
|
+
];
|
|
25971
|
+
const absoluteCorners = localCorners.map((p) => transform.point({
|
|
25972
|
+
x: p.x - offsetX,
|
|
25973
|
+
y: p.y - offsetY
|
|
25974
|
+
}));
|
|
25975
|
+
const anchor = new Konva.Rect({
|
|
25976
|
+
draggable: false,
|
|
25977
|
+
rotation: node.rotation()
|
|
25978
|
+
});
|
|
25979
|
+
this.config.cropMode.selection.anchorStyleFunc(anchor, position);
|
|
25980
|
+
layer.add(anchor);
|
|
25981
|
+
anchor.scale({
|
|
25982
|
+
x: 1 / stageScale,
|
|
25983
|
+
y: 1 / stageScale
|
|
25984
|
+
});
|
|
25985
|
+
stage.on("scaleXChange scaleYChange", () => {
|
|
25986
|
+
const scale = stage.scaleX();
|
|
25987
|
+
anchor.scale({
|
|
25988
|
+
x: 1 / scale,
|
|
25989
|
+
y: 1 / scale
|
|
25990
|
+
});
|
|
25991
|
+
});
|
|
25992
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_LEFT) anchor.setAbsolutePosition(absoluteCorners[0]);
|
|
25993
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_RIGHT) anchor.setAbsolutePosition(absoluteCorners[1]);
|
|
25994
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_RIGHT) anchor.setAbsolutePosition(absoluteCorners[2]);
|
|
25995
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_LEFT) anchor.setAbsolutePosition(absoluteCorners[3]);
|
|
25996
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_CENTER) anchor.setAbsolutePosition(absoluteCorners[4]);
|
|
25997
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_RIGHT) anchor.setAbsolutePosition(absoluteCorners[5]);
|
|
25998
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_LEFT) anchor.setAbsolutePosition(absoluteCorners[6]);
|
|
25999
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_CENTER) anchor.setAbsolutePosition(absoluteCorners[7]);
|
|
26000
|
+
anchor.on("pointerover", () => {
|
|
26001
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_LEFT || position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_RIGHT) this.instance.getStage().container().style.cursor = "nesw-resize";
|
|
26002
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_LEFT || position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_RIGHT) this.instance.getStage().container().style.cursor = "nwse-resize";
|
|
26003
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_RIGHT || position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_LEFT) this.instance.getStage().container().style.cursor = "ew-resize";
|
|
26004
|
+
if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_CENTER || position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_CENTER) this.instance.getStage().container().style.cursor = "ns-resize";
|
|
26005
|
+
});
|
|
26006
|
+
anchor.on("pointerdown", () => {
|
|
26007
|
+
onClick();
|
|
26008
|
+
});
|
|
26009
|
+
return anchor;
|
|
26010
|
+
}
|
|
26011
|
+
renderCropAnchors(layer, node) {
|
|
26012
|
+
const anchors = [
|
|
26013
|
+
WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_LEFT,
|
|
26014
|
+
WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_RIGHT,
|
|
26015
|
+
WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_RIGHT,
|
|
26016
|
+
WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_LEFT,
|
|
26017
|
+
WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_CENTER,
|
|
26018
|
+
WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_RIGHT,
|
|
26019
|
+
WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_CENTER,
|
|
26020
|
+
WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_LEFT
|
|
26021
|
+
];
|
|
26022
|
+
for (const anchor of anchors) if (this.config.cropMode.selection.enabledAnchors.includes(anchor)) this.renderCropAnchor(anchor, node, layer, () => {
|
|
26023
|
+
this.triggerCrop(node, { cmdCtrl: {
|
|
26024
|
+
triggered: true,
|
|
26025
|
+
corner: anchor
|
|
26026
|
+
} });
|
|
26027
|
+
});
|
|
26028
|
+
}
|
|
26029
|
+
renderCropMode(layer, node) {
|
|
26030
|
+
this.renderCropBorder(layer, node);
|
|
26031
|
+
this.renderCropAnchors(layer, node);
|
|
26032
|
+
}
|
|
25508
26033
|
onUpdate(nodeInstance, nextProps) {
|
|
25509
26034
|
const id = nodeInstance.getAttrs().id;
|
|
25510
26035
|
const node = nodeInstance;
|
|
@@ -25606,8 +26131,8 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25606
26131
|
}
|
|
25607
26132
|
this.cacheNode(nodeInstance);
|
|
25608
26133
|
}
|
|
25609
|
-
preloadImage(imageId, imageURL, { onLoad, onError }) {
|
|
25610
|
-
const realImageURL = this.config.urlTransformer?.(imageURL ?? "") ?? imageURL;
|
|
26134
|
+
preloadImage(imageId, imageURL, { node, onLoad, onError }) {
|
|
26135
|
+
const realImageURL = this.config.urlTransformer?.(imageURL ?? "", node) ?? imageURL;
|
|
25611
26136
|
this.imageSource[imageId] = Konva.Util.createImageElement();
|
|
25612
26137
|
this.imageSource[imageId].crossOrigin = this.config.crossOrigin;
|
|
25613
26138
|
this.imageSource[imageId].onerror = (error) => {
|
|
@@ -25641,9 +26166,10 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25641
26166
|
const { id } = imageProps;
|
|
25642
26167
|
const imagePlaceholder = image.findOne(`#${id}-placeholder`);
|
|
25643
26168
|
const internalImage = image.findOne(`#${id}-image`);
|
|
25644
|
-
const realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "") ?? imageProps.imageURL;
|
|
26169
|
+
const realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "", image) ?? imageProps.imageURL;
|
|
25645
26170
|
this.loadAsyncElement(id);
|
|
25646
26171
|
this.preloadImage(id, realImageURL ?? "", {
|
|
26172
|
+
node: image,
|
|
25647
26173
|
onLoad: () => {
|
|
25648
26174
|
if (image && imagePlaceholder && internalImage) {
|
|
25649
26175
|
image.setAttrs({
|
|
@@ -26326,6 +26852,8 @@ var WeaveFrameNode = class extends WeaveNode {
|
|
|
26326
26852
|
delete cleanedAttrs.mutexUserId;
|
|
26327
26853
|
delete cleanedAttrs.draggable;
|
|
26328
26854
|
delete cleanedAttrs.onTargetEnter;
|
|
26855
|
+
delete cleanedAttrs.overridesMouseControl;
|
|
26856
|
+
delete cleanedAttrs.dragBoundFunc;
|
|
26329
26857
|
return {
|
|
26330
26858
|
key: realAttrs?.id ?? "",
|
|
26331
26859
|
type: realAttrs?.nodeType,
|
|
@@ -26561,6 +27089,8 @@ var WeaveStrokeNode = class extends WeaveNode {
|
|
|
26561
27089
|
delete cleanedAttrs.draggable;
|
|
26562
27090
|
delete cleanedAttrs.sceneFunc;
|
|
26563
27091
|
delete cleanedAttrs.hitFunc;
|
|
27092
|
+
delete cleanedAttrs.overridesMouseControl;
|
|
27093
|
+
delete cleanedAttrs.dragBoundFunc;
|
|
26564
27094
|
return {
|
|
26565
27095
|
key: attrs.id ?? "",
|
|
26566
27096
|
type: attrs.nodeType,
|
|
@@ -26577,25 +27107,795 @@ var WeaveStrokeNode = class extends WeaveNode {
|
|
|
26577
27107
|
};
|
|
26578
27108
|
|
|
26579
27109
|
//#endregion
|
|
26580
|
-
//#region src/nodes/
|
|
26581
|
-
const
|
|
26582
|
-
|
|
26583
|
-
|
|
27110
|
+
//#region src/nodes/stroke-single/constants.ts
|
|
27111
|
+
const WEAVE_STROKE_SINGLE_NODE_TYPE = "stroke-single";
|
|
27112
|
+
const WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG = { snapAngles: {
|
|
27113
|
+
angles: [
|
|
27114
|
+
0,
|
|
27115
|
+
45,
|
|
27116
|
+
90,
|
|
27117
|
+
135,
|
|
27118
|
+
180,
|
|
27119
|
+
225,
|
|
27120
|
+
270,
|
|
27121
|
+
315
|
|
27122
|
+
],
|
|
27123
|
+
activateThreshold: 5,
|
|
27124
|
+
releaseThreshold: 10
|
|
27125
|
+
} };
|
|
27126
|
+
const WEAVE_STROKE_SINGLE_NODE_TIP_TYPE = {
|
|
27127
|
+
NONE: "none",
|
|
27128
|
+
ARROW: "arrow",
|
|
27129
|
+
CIRCLE: "circle",
|
|
27130
|
+
SQUARE: "square"
|
|
26584
27131
|
};
|
|
26585
|
-
const
|
|
26586
|
-
|
|
26587
|
-
|
|
27132
|
+
const WEAVE_STROKE_SINGLE_NODE_TIP_SIDE = {
|
|
27133
|
+
START: "start",
|
|
27134
|
+
END: "end"
|
|
26588
27135
|
};
|
|
26589
|
-
|
|
26590
|
-
|
|
26591
|
-
|
|
26592
|
-
|
|
26593
|
-
|
|
26594
|
-
|
|
27136
|
+
|
|
27137
|
+
//#endregion
|
|
27138
|
+
//#region src/nodes/stroke-single/base.line-tip-manager.ts
|
|
27139
|
+
var WeaveBaseLineTipManager = class {
|
|
27140
|
+
constructor() {}
|
|
27141
|
+
capitalizeFirst(str) {
|
|
27142
|
+
if (typeof str !== "string" || str.length === 0) return str;
|
|
27143
|
+
return str[0].toUpperCase() + str.slice(1);
|
|
27144
|
+
}
|
|
27145
|
+
destroy(instance, point) {}
|
|
27146
|
+
render(instance, point) {}
|
|
27147
|
+
update(instance, point) {}
|
|
27148
|
+
getTip(instance, point) {
|
|
27149
|
+
const actualTip = instance.findOne(`#${instance.getAttrs().id}-tip-${point}`);
|
|
27150
|
+
if (!actualTip) return;
|
|
27151
|
+
return actualTip;
|
|
27152
|
+
}
|
|
27153
|
+
getInternalLine(instance) {
|
|
27154
|
+
const actualLine = instance.findOne(`#${instance.getAttrs().id}-line`);
|
|
27155
|
+
if (!actualLine) return;
|
|
27156
|
+
return actualLine;
|
|
27157
|
+
}
|
|
27158
|
+
getLinePoints(instance) {
|
|
27159
|
+
const points = instance.getAttrs().linePoints;
|
|
27160
|
+
const lineStartPoint = {
|
|
27161
|
+
x: points[0],
|
|
27162
|
+
y: points[1]
|
|
27163
|
+
};
|
|
27164
|
+
const lineEndPoint = {
|
|
27165
|
+
x: points[2],
|
|
27166
|
+
y: points[3]
|
|
27167
|
+
};
|
|
27168
|
+
return {
|
|
27169
|
+
lineStartPoint,
|
|
27170
|
+
lineEndPoint
|
|
27171
|
+
};
|
|
27172
|
+
}
|
|
26595
27173
|
};
|
|
26596
|
-
|
|
26597
|
-
|
|
26598
|
-
|
|
27174
|
+
|
|
27175
|
+
//#endregion
|
|
27176
|
+
//#region src/nodes/stroke-single/utils.ts
|
|
27177
|
+
const movePointParallelToLine$1 = (fromPoint, toPoint, point, distance) => {
|
|
27178
|
+
const dx = toPoint.x - fromPoint.x;
|
|
27179
|
+
const dy = toPoint.y - fromPoint.y;
|
|
27180
|
+
const len = Math.hypot(dx, dy);
|
|
27181
|
+
if (len === 0) throw new Error("Defined line length is zero");
|
|
27182
|
+
const ux = dx / len;
|
|
27183
|
+
const uy = dy / len;
|
|
27184
|
+
return {
|
|
27185
|
+
x: point.x + ux * distance,
|
|
27186
|
+
y: point.y + uy * distance
|
|
27187
|
+
};
|
|
27188
|
+
};
|
|
27189
|
+
|
|
27190
|
+
//#endregion
|
|
27191
|
+
//#region src/nodes/stroke-single/line-tip-managers/arrow.line-tip-manager.ts
|
|
27192
|
+
var WeaveArrowLineTipManager = class extends WeaveBaseLineTipManager {
|
|
27193
|
+
constructor() {
|
|
27194
|
+
super();
|
|
27195
|
+
}
|
|
27196
|
+
destroy(instance, point) {
|
|
27197
|
+
const actualTip = this.getTip(instance, point);
|
|
27198
|
+
if (!actualTip) return;
|
|
27199
|
+
actualTip.destroy();
|
|
27200
|
+
}
|
|
27201
|
+
updateTip(instance, point, internalLine, tip, base, height) {
|
|
27202
|
+
const { lineStartPoint, lineEndPoint } = this.getLinePoints(instance);
|
|
27203
|
+
const trianglePoint = movePointParallelToLine$1(lineStartPoint, lineEndPoint, point === "start" ? lineStartPoint : lineEndPoint, point === "start" ? height / 2 : -height / 2);
|
|
27204
|
+
tip.setAttrs({
|
|
27205
|
+
points: [
|
|
27206
|
+
-base / 2,
|
|
27207
|
+
height / 2,
|
|
27208
|
+
base / 2,
|
|
27209
|
+
height / 2,
|
|
27210
|
+
0,
|
|
27211
|
+
-height / 2
|
|
27212
|
+
],
|
|
27213
|
+
x: trianglePoint.x,
|
|
27214
|
+
y: trianglePoint.y
|
|
27215
|
+
});
|
|
27216
|
+
const angleRad = Math.atan2(lineEndPoint.y - lineStartPoint.y, lineEndPoint.x - lineStartPoint.x);
|
|
27217
|
+
const angleDeg = angleRad * (180 / Math.PI);
|
|
27218
|
+
tip.rotation(angleDeg + (point === "start" ? -90 : 90));
|
|
27219
|
+
if (point === "start") {
|
|
27220
|
+
const internalPoints = internalLine.points();
|
|
27221
|
+
internalLine.points([
|
|
27222
|
+
trianglePoint.x,
|
|
27223
|
+
trianglePoint.y,
|
|
27224
|
+
internalPoints[2],
|
|
27225
|
+
internalPoints[3]
|
|
27226
|
+
]);
|
|
27227
|
+
} else {
|
|
27228
|
+
const internalPoints = internalLine.points();
|
|
27229
|
+
internalLine.points([
|
|
27230
|
+
internalPoints[0],
|
|
27231
|
+
internalPoints[1],
|
|
27232
|
+
trianglePoint.x,
|
|
27233
|
+
trianglePoint.y
|
|
27234
|
+
]);
|
|
27235
|
+
}
|
|
27236
|
+
}
|
|
27237
|
+
render(instance, point) {
|
|
27238
|
+
this.destroy(instance, point);
|
|
27239
|
+
const internalLine = this.getInternalLine(instance);
|
|
27240
|
+
if (!internalLine) return;
|
|
27241
|
+
const stroke = instance.getAttrs().stroke ?? "black";
|
|
27242
|
+
const base = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Base`] ?? 3;
|
|
27243
|
+
const height = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Height`] ?? Math.sqrt(3) / 2 * 3;
|
|
27244
|
+
const triangle = new Konva.Line({
|
|
27245
|
+
id: `${instance.getAttrs().id}-tip-${point}`,
|
|
27246
|
+
name: "lineTip",
|
|
27247
|
+
nodeId: instance.getAttrs().id,
|
|
27248
|
+
closed: true,
|
|
27249
|
+
stroke,
|
|
27250
|
+
strokeWidth: 0,
|
|
27251
|
+
strokeScaleEnabled: false,
|
|
27252
|
+
fill: stroke
|
|
27253
|
+
});
|
|
27254
|
+
instance.add(triangle);
|
|
27255
|
+
this.updateTip(instance, point, internalLine, triangle, base, height);
|
|
27256
|
+
}
|
|
27257
|
+
update(instance, point) {
|
|
27258
|
+
const actualTip = this.getTip(instance, point);
|
|
27259
|
+
if (!actualTip) return;
|
|
27260
|
+
const internalLine = this.getInternalLine(instance);
|
|
27261
|
+
if (!internalLine) return;
|
|
27262
|
+
const stroke = instance.getAttrs().stroke ?? "black";
|
|
27263
|
+
const base = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Base`] ?? 3;
|
|
27264
|
+
const height = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Height`] ?? Math.sqrt(3) / 2 * 3;
|
|
27265
|
+
actualTip.setAttrs({ fill: stroke });
|
|
27266
|
+
this.updateTip(instance, point, internalLine, actualTip, base, height);
|
|
27267
|
+
}
|
|
27268
|
+
};
|
|
27269
|
+
|
|
27270
|
+
//#endregion
|
|
27271
|
+
//#region src/nodes/stroke-single/line-tip-managers/circle.line-tip-manager.ts
|
|
27272
|
+
var WeaveCircleLineTipManager = class extends WeaveBaseLineTipManager {
|
|
27273
|
+
constructor() {
|
|
27274
|
+
super();
|
|
27275
|
+
}
|
|
27276
|
+
moveTipAlongLine(instance, point, internalLine, tip, distance) {
|
|
27277
|
+
const { lineStartPoint, lineEndPoint } = this.getLinePoints(instance);
|
|
27278
|
+
const circlePoint = movePointParallelToLine$1(lineStartPoint, lineEndPoint, point === "start" ? lineStartPoint : lineEndPoint, point === "start" ? distance : -distance);
|
|
27279
|
+
if (point === "start") {
|
|
27280
|
+
const internalPoints = internalLine.points();
|
|
27281
|
+
internalLine.points([
|
|
27282
|
+
circlePoint.x,
|
|
27283
|
+
circlePoint.y,
|
|
27284
|
+
internalPoints[2],
|
|
27285
|
+
internalPoints[3]
|
|
27286
|
+
]);
|
|
27287
|
+
} else {
|
|
27288
|
+
const internalPoints = internalLine.points();
|
|
27289
|
+
internalLine.points([
|
|
27290
|
+
internalPoints[0],
|
|
27291
|
+
internalPoints[1],
|
|
27292
|
+
circlePoint.x,
|
|
27293
|
+
circlePoint.y
|
|
27294
|
+
]);
|
|
27295
|
+
}
|
|
27296
|
+
tip.x(circlePoint.x);
|
|
27297
|
+
tip.y(circlePoint.y);
|
|
27298
|
+
}
|
|
27299
|
+
destroy(instance, point) {
|
|
27300
|
+
const actualTip = this.getTip(instance, point);
|
|
27301
|
+
if (!actualTip) return;
|
|
27302
|
+
actualTip.destroy();
|
|
27303
|
+
}
|
|
27304
|
+
render(instance, point) {
|
|
27305
|
+
this.destroy(instance, point);
|
|
27306
|
+
const actualLine = this.getInternalLine(instance);
|
|
27307
|
+
if (!actualLine) return;
|
|
27308
|
+
const stroke = instance.getAttrs().stroke ?? "black";
|
|
27309
|
+
const radius = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Radius`] ?? 1.5;
|
|
27310
|
+
const circle = new Konva.Circle({
|
|
27311
|
+
id: `${instance.getAttrs().id}-tip-${point}`,
|
|
27312
|
+
name: "lineTip",
|
|
27313
|
+
nodeId: instance.getAttrs().id,
|
|
27314
|
+
radius,
|
|
27315
|
+
stroke: "black",
|
|
27316
|
+
strokeWidth: 0,
|
|
27317
|
+
strokeScaleEnabled: false,
|
|
27318
|
+
fill: stroke
|
|
27319
|
+
});
|
|
27320
|
+
instance.add(circle);
|
|
27321
|
+
this.moveTipAlongLine(instance, point, actualLine, circle, radius);
|
|
27322
|
+
}
|
|
27323
|
+
update(instance, point) {
|
|
27324
|
+
const actualTip = this.getTip(instance, point);
|
|
27325
|
+
if (!actualTip) return;
|
|
27326
|
+
const actualLine = this.getInternalLine(instance);
|
|
27327
|
+
if (!actualLine) return;
|
|
27328
|
+
const stroke = instance.getAttrs().stroke ?? "black";
|
|
27329
|
+
const radius = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Radius`] ?? 1.5;
|
|
27330
|
+
actualTip.setAttrs({
|
|
27331
|
+
fill: stroke,
|
|
27332
|
+
radius
|
|
27333
|
+
});
|
|
27334
|
+
this.moveTipAlongLine(instance, point, actualLine, actualTip, radius);
|
|
27335
|
+
}
|
|
27336
|
+
};
|
|
27337
|
+
|
|
27338
|
+
//#endregion
|
|
27339
|
+
//#region src/nodes/stroke-single/line-tip-managers/none.line-tip-manager.ts
|
|
27340
|
+
var WeaveNoneLineTipManager = class extends WeaveBaseLineTipManager {
|
|
27341
|
+
constructor() {
|
|
27342
|
+
super();
|
|
27343
|
+
}
|
|
27344
|
+
destroy(instance, point) {
|
|
27345
|
+
const actualTip = this.getTip(instance, point);
|
|
27346
|
+
if (!actualTip) return;
|
|
27347
|
+
actualTip.destroy();
|
|
27348
|
+
}
|
|
27349
|
+
render(instance, point) {
|
|
27350
|
+
this.destroy(instance, point);
|
|
27351
|
+
this.update(instance, point);
|
|
27352
|
+
}
|
|
27353
|
+
update(instance, point) {
|
|
27354
|
+
const internalLine = this.getInternalLine(instance);
|
|
27355
|
+
if (!internalLine) return;
|
|
27356
|
+
const { lineStartPoint, lineEndPoint } = this.getLinePoints(instance);
|
|
27357
|
+
const distance = instance.getAttrs().strokeWidth ?? 1;
|
|
27358
|
+
const linePoint = movePointParallelToLine$1(lineStartPoint, lineEndPoint, point === "start" ? lineStartPoint : lineEndPoint, point === "start" ? distance / 2 : -(distance / 2));
|
|
27359
|
+
if (point === "start") {
|
|
27360
|
+
const internalPoints = internalLine.points();
|
|
27361
|
+
internalLine.points([
|
|
27362
|
+
linePoint.x,
|
|
27363
|
+
linePoint.y,
|
|
27364
|
+
internalPoints[2],
|
|
27365
|
+
internalPoints[3]
|
|
27366
|
+
]);
|
|
27367
|
+
} else {
|
|
27368
|
+
const internalPoints = internalLine.points();
|
|
27369
|
+
internalLine.points([
|
|
27370
|
+
internalPoints[0],
|
|
27371
|
+
internalPoints[1],
|
|
27372
|
+
linePoint.x,
|
|
27373
|
+
linePoint.y
|
|
27374
|
+
]);
|
|
27375
|
+
}
|
|
27376
|
+
}
|
|
27377
|
+
};
|
|
27378
|
+
|
|
27379
|
+
//#endregion
|
|
27380
|
+
//#region src/nodes/stroke-single/line-tip-managers/square.line-tip-manager.ts
|
|
27381
|
+
var WeaveSquareLineTipManager = class extends WeaveBaseLineTipManager {
|
|
27382
|
+
constructor() {
|
|
27383
|
+
super();
|
|
27384
|
+
}
|
|
27385
|
+
moveTipAlongLine(instance, point, internalLine, tip, distance) {
|
|
27386
|
+
const { lineStartPoint, lineEndPoint } = this.getLinePoints(instance);
|
|
27387
|
+
const points = instance.getAttrs().linePoints;
|
|
27388
|
+
const circlePoint = movePointParallelToLine$1(lineStartPoint, lineEndPoint, point === "start" ? lineStartPoint : lineEndPoint, point === "start" ? distance : -distance);
|
|
27389
|
+
if (point === "start") {
|
|
27390
|
+
const internalPoints = internalLine.points();
|
|
27391
|
+
internalLine.points([
|
|
27392
|
+
circlePoint.x,
|
|
27393
|
+
circlePoint.y,
|
|
27394
|
+
internalPoints[2],
|
|
27395
|
+
internalPoints[3]
|
|
27396
|
+
]);
|
|
27397
|
+
} else {
|
|
27398
|
+
const internalPoints = internalLine.points();
|
|
27399
|
+
internalLine.points([
|
|
27400
|
+
internalPoints[0],
|
|
27401
|
+
internalPoints[1],
|
|
27402
|
+
circlePoint.x,
|
|
27403
|
+
circlePoint.y
|
|
27404
|
+
]);
|
|
27405
|
+
}
|
|
27406
|
+
tip.x(circlePoint.x);
|
|
27407
|
+
tip.y(circlePoint.y);
|
|
27408
|
+
const angle = Math.atan2(points[3] - points[1], points[2] - points[0]);
|
|
27409
|
+
const deg = angle * 180 / Math.PI;
|
|
27410
|
+
tip.rotation(deg);
|
|
27411
|
+
}
|
|
27412
|
+
destroy(instance, point) {
|
|
27413
|
+
const actualTip = this.getTip(instance, point);
|
|
27414
|
+
if (!actualTip) return;
|
|
27415
|
+
actualTip.destroy();
|
|
27416
|
+
}
|
|
27417
|
+
render(instance, point) {
|
|
27418
|
+
this.destroy(instance, point);
|
|
27419
|
+
const actualLine = this.getInternalLine(instance);
|
|
27420
|
+
if (!actualLine) return;
|
|
27421
|
+
const points = instance.getAttrs().linePoints;
|
|
27422
|
+
const stroke = instance.getAttrs().stroke ?? "black";
|
|
27423
|
+
const width = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Width`] ?? 3;
|
|
27424
|
+
const square = new Konva.Rect({
|
|
27425
|
+
id: `${instance.getAttrs().id}-tip-${point}`,
|
|
27426
|
+
name: "lineTip",
|
|
27427
|
+
nodeId: instance.getAttrs().id,
|
|
27428
|
+
width,
|
|
27429
|
+
height: width,
|
|
27430
|
+
stroke: "black",
|
|
27431
|
+
strokeWidth: 0,
|
|
27432
|
+
strokeScaleEnabled: false,
|
|
27433
|
+
fill: stroke,
|
|
27434
|
+
offsetX: width / 2,
|
|
27435
|
+
offsetY: width / 2
|
|
27436
|
+
});
|
|
27437
|
+
const angle = Math.atan2(points[3] - points[1], points[2] - points[0]);
|
|
27438
|
+
const deg = angle * 180 / Math.PI;
|
|
27439
|
+
square.rotation(deg);
|
|
27440
|
+
instance.add(square);
|
|
27441
|
+
this.moveTipAlongLine(instance, point, actualLine, square, width / 2);
|
|
27442
|
+
}
|
|
27443
|
+
update(instance, point) {
|
|
27444
|
+
const actualTip = this.getTip(instance, point);
|
|
27445
|
+
if (!actualTip) return;
|
|
27446
|
+
const actualLine = this.getInternalLine(instance);
|
|
27447
|
+
if (!actualLine) return;
|
|
27448
|
+
const stroke = instance.getAttrs().stroke ?? "black";
|
|
27449
|
+
const radius = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Radius`] ?? 1.5;
|
|
27450
|
+
actualTip.setAttrs({
|
|
27451
|
+
fill: stroke,
|
|
27452
|
+
radius
|
|
27453
|
+
});
|
|
27454
|
+
this.moveTipAlongLine(instance, point, actualLine, actualTip, radius);
|
|
27455
|
+
}
|
|
27456
|
+
};
|
|
27457
|
+
|
|
27458
|
+
//#endregion
|
|
27459
|
+
//#region src/nodes/stroke-single/stroke-single.ts
|
|
27460
|
+
var WeaveStrokeSingleNode = class extends WeaveNode {
|
|
27461
|
+
startHandle = null;
|
|
27462
|
+
endHandle = null;
|
|
27463
|
+
nodeType = WEAVE_STROKE_SINGLE_NODE_TYPE;
|
|
27464
|
+
tipManagers = {
|
|
27465
|
+
[WEAVE_STROKE_SINGLE_NODE_TIP_TYPE.ARROW]: new WeaveArrowLineTipManager(),
|
|
27466
|
+
[WEAVE_STROKE_SINGLE_NODE_TIP_TYPE.CIRCLE]: new WeaveCircleLineTipManager(),
|
|
27467
|
+
[WEAVE_STROKE_SINGLE_NODE_TIP_TYPE.SQUARE]: new WeaveSquareLineTipManager(),
|
|
27468
|
+
[WEAVE_STROKE_SINGLE_NODE_TIP_TYPE.NONE]: new WeaveNoneLineTipManager()
|
|
27469
|
+
};
|
|
27470
|
+
constructor(params) {
|
|
27471
|
+
super();
|
|
27472
|
+
this.config = mergeExceptArrays(WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG, params?.config ?? {});
|
|
27473
|
+
this.handleNodeChanges = null;
|
|
27474
|
+
this.handleZoomChanges = null;
|
|
27475
|
+
this.snapper = new GreedySnapper({
|
|
27476
|
+
snapAngles: this.config.snapAngles.angles,
|
|
27477
|
+
activateThreshold: this.config.snapAngles.activateThreshold,
|
|
27478
|
+
releaseThreshold: this.config.snapAngles.releaseThreshold
|
|
27479
|
+
});
|
|
27480
|
+
}
|
|
27481
|
+
onRender(props) {
|
|
27482
|
+
const stroke = new Konva.Group({
|
|
27483
|
+
...props,
|
|
27484
|
+
name: `node ${WEAVE_STROKE_SINGLE_NODE_TYPE}`,
|
|
27485
|
+
linePoints: props.linePoints,
|
|
27486
|
+
strokeScaleEnabled: true,
|
|
27487
|
+
overridesMouseControl: true
|
|
27488
|
+
});
|
|
27489
|
+
const internalLine = new Konva.Line({
|
|
27490
|
+
...props,
|
|
27491
|
+
id: `${stroke.getAttrs().id}-line`,
|
|
27492
|
+
nodeId: stroke.getAttrs().id,
|
|
27493
|
+
name: void 0,
|
|
27494
|
+
x: 0,
|
|
27495
|
+
y: 0,
|
|
27496
|
+
strokeScaleEnabled: true,
|
|
27497
|
+
lineJoin: "miter",
|
|
27498
|
+
lineCap: "round"
|
|
27499
|
+
});
|
|
27500
|
+
stroke.add(internalLine);
|
|
27501
|
+
this.setupDefaultNodeAugmentation(stroke);
|
|
27502
|
+
const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
|
|
27503
|
+
stroke.getTransformerProperties = function() {
|
|
27504
|
+
const points = this.getAttrs().linePoints;
|
|
27505
|
+
return {
|
|
27506
|
+
...defaultTransformerProperties,
|
|
27507
|
+
ignoreStroke: true,
|
|
27508
|
+
rotateEnabled: points.length !== 4,
|
|
27509
|
+
keepRatio: points.length !== 4,
|
|
27510
|
+
flipEnabled: points.length === 4,
|
|
27511
|
+
shiftBehavior: points.length === 4 ? "none" : "default",
|
|
27512
|
+
shouldOverdrawWholeArea: points.length !== 4
|
|
27513
|
+
};
|
|
27514
|
+
};
|
|
27515
|
+
let originalStartHandleVisibility = null;
|
|
27516
|
+
let originalEndHandleVisibility = null;
|
|
27517
|
+
stroke.on("dragstart", () => {
|
|
27518
|
+
originalStartHandleVisibility = this.startHandle?.visible() ?? false;
|
|
27519
|
+
originalEndHandleVisibility = this.endHandle?.visible() ?? false;
|
|
27520
|
+
this.startHandle?.visible(false);
|
|
27521
|
+
this.endHandle?.visible(false);
|
|
27522
|
+
});
|
|
27523
|
+
stroke.on("dragend", () => {
|
|
27524
|
+
this.startHandle?.visible(originalStartHandleVisibility);
|
|
27525
|
+
this.endHandle?.visible(originalEndHandleVisibility);
|
|
27526
|
+
originalStartHandleVisibility = null;
|
|
27527
|
+
originalEndHandleVisibility = null;
|
|
27528
|
+
});
|
|
27529
|
+
this.setupDefaultNodeEvents(stroke);
|
|
27530
|
+
if (!this.handleZoomChanges) {
|
|
27531
|
+
this.handleZoomChanges = () => {
|
|
27532
|
+
if (this.startHandle) this.startHandle.scale({
|
|
27533
|
+
x: 1 / this.instance.getStage().scaleX(),
|
|
27534
|
+
y: 1 / this.instance.getStage().scaleY()
|
|
27535
|
+
});
|
|
27536
|
+
if (this.endHandle) this.endHandle.scale({
|
|
27537
|
+
x: 1 / this.instance.getStage().scaleX(),
|
|
27538
|
+
y: 1 / this.instance.getStage().scaleY()
|
|
27539
|
+
});
|
|
27540
|
+
};
|
|
27541
|
+
this.instance.addEventListener("onZoomChange", this.handleZoomChanges);
|
|
27542
|
+
}
|
|
27543
|
+
if (!this.handleNodeChanges) {
|
|
27544
|
+
this.handleNodeChanges = (nodes) => {
|
|
27545
|
+
this.teardownSelection();
|
|
27546
|
+
if (nodes.length === 1 && nodes[0].instance.getAttrs().nodeType === WEAVE_STROKE_SINGLE_NODE_TYPE) {
|
|
27547
|
+
const strokeSelected = this.instance.getStage().findOne(`#${nodes[0].instance.getAttrs().id}`);
|
|
27548
|
+
if (!strokeSelected) return;
|
|
27549
|
+
this.setupHandles();
|
|
27550
|
+
this.showHandles(strokeSelected);
|
|
27551
|
+
this.setupSelection(strokeSelected, true);
|
|
27552
|
+
} else {
|
|
27553
|
+
this.startHandle?.setAttr("strokeId", void 0);
|
|
27554
|
+
this.startHandle?.visible(false);
|
|
27555
|
+
this.endHandle?.setAttr("strokeId", void 0);
|
|
27556
|
+
this.endHandle?.visible(false);
|
|
27557
|
+
}
|
|
27558
|
+
};
|
|
27559
|
+
this.instance.addEventListener("onNodesChange", this.handleNodeChanges);
|
|
27560
|
+
}
|
|
27561
|
+
const tipStartStyle = stroke.getAttrs().tipStartStyle ?? "none";
|
|
27562
|
+
const tipEndStyle = stroke.getAttrs().tipEndStyle ?? "none";
|
|
27563
|
+
this.tipManagers[tipStartStyle]?.render(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
|
|
27564
|
+
this.tipManagers[tipEndStyle]?.render(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
|
|
27565
|
+
stroke.handleMouseover = () => {
|
|
27566
|
+
this.setupSelection(stroke);
|
|
27567
|
+
};
|
|
27568
|
+
stroke.handleMouseout = () => {
|
|
27569
|
+
const attrs = stroke.getAttrs();
|
|
27570
|
+
if (attrs.isSelected) return;
|
|
27571
|
+
const nodes = stroke.find(".hoverClone");
|
|
27572
|
+
nodes.forEach((node) => node.destroy());
|
|
27573
|
+
};
|
|
27574
|
+
stroke.getTransformerProperties = () => {
|
|
27575
|
+
return this.defaultGetTransformerProperties({
|
|
27576
|
+
...this.config.transform,
|
|
27577
|
+
rotateEnabled: false,
|
|
27578
|
+
shouldOverdrawWholeArea: false,
|
|
27579
|
+
borderStroke: "transparent"
|
|
27580
|
+
});
|
|
27581
|
+
};
|
|
27582
|
+
stroke.allowedAnchors = function() {
|
|
27583
|
+
return [];
|
|
27584
|
+
};
|
|
27585
|
+
stroke.canBeHovered = function() {
|
|
27586
|
+
return false;
|
|
27587
|
+
};
|
|
27588
|
+
stroke.getNodeAnchors = function() {
|
|
27589
|
+
return [];
|
|
27590
|
+
};
|
|
27591
|
+
return stroke;
|
|
27592
|
+
}
|
|
27593
|
+
setupHandles() {
|
|
27594
|
+
if (!this.startHandle) {
|
|
27595
|
+
const startHandle = new Konva.Circle({
|
|
27596
|
+
id: "line-start-handle",
|
|
27597
|
+
radius: 5,
|
|
27598
|
+
fill: "#ffffff",
|
|
27599
|
+
stroke: "#000000",
|
|
27600
|
+
strokeWidth: 1,
|
|
27601
|
+
edgeDistanceDisableOnDrag: true,
|
|
27602
|
+
scaleX: 1 / this.instance.getStage().scaleX(),
|
|
27603
|
+
scaleY: 1 / this.instance.getStage().scaleY(),
|
|
27604
|
+
draggable: true
|
|
27605
|
+
});
|
|
27606
|
+
startHandle.on("pointerover", () => {
|
|
27607
|
+
this.instance.getStage().container().style.cursor = "move";
|
|
27608
|
+
});
|
|
27609
|
+
startHandle.on("pointerout", () => {
|
|
27610
|
+
this.instance.getStage().container().style.cursor = "default";
|
|
27611
|
+
});
|
|
27612
|
+
startHandle.on("dragstart", (e) => {
|
|
27613
|
+
const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
|
|
27614
|
+
if (tr) tr.hide();
|
|
27615
|
+
const strokeId = e.target.getAttr("strokeId");
|
|
27616
|
+
const stroke = this.instance.getStage().findOne(`#${strokeId}`);
|
|
27617
|
+
if (!stroke) return;
|
|
27618
|
+
const points = stroke.getAttrs().linePoints;
|
|
27619
|
+
if (points.length === 4) stroke.setAttr("eventTarget", true);
|
|
27620
|
+
this.instance.emitEvent("onDrag", e.target);
|
|
27621
|
+
});
|
|
27622
|
+
startHandle.on("dragmove", (e) => {
|
|
27623
|
+
const draggedTarget = e.target;
|
|
27624
|
+
const strokeId = draggedTarget.getAttr("strokeId");
|
|
27625
|
+
const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
|
|
27626
|
+
if (!draggedStroke) return;
|
|
27627
|
+
const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
|
|
27628
|
+
if (!internalLine) return;
|
|
27629
|
+
const points = draggedStroke.getAttrs().linePoints;
|
|
27630
|
+
if (points.length !== 4) return;
|
|
27631
|
+
this.teardownSelection();
|
|
27632
|
+
const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
|
|
27633
|
+
draggedStroke.setAttrs({ linePoints: [
|
|
27634
|
+
newLinePoint.x,
|
|
27635
|
+
newLinePoint.y,
|
|
27636
|
+
points[2],
|
|
27637
|
+
points[3]
|
|
27638
|
+
] });
|
|
27639
|
+
this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
|
|
27640
|
+
const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
|
|
27641
|
+
this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
|
|
27642
|
+
const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
|
|
27643
|
+
this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
|
|
27644
|
+
this.setupSelection(draggedStroke);
|
|
27645
|
+
});
|
|
27646
|
+
startHandle.on("dragend", (e) => {
|
|
27647
|
+
const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
|
|
27648
|
+
if (tr) tr.show();
|
|
27649
|
+
const draggedTarget = e.target;
|
|
27650
|
+
const strokeId = draggedTarget.getAttr("strokeId");
|
|
27651
|
+
const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
|
|
27652
|
+
if (!draggedStroke) return;
|
|
27653
|
+
const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
|
|
27654
|
+
if (!internalLine) return;
|
|
27655
|
+
const points = draggedStroke.getAttrs().linePoints;
|
|
27656
|
+
if (points.length !== 4) return;
|
|
27657
|
+
this.teardownSelection();
|
|
27658
|
+
const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
|
|
27659
|
+
draggedStroke.setAttrs({ linePoints: [
|
|
27660
|
+
newLinePoint.x,
|
|
27661
|
+
newLinePoint.y,
|
|
27662
|
+
points[2],
|
|
27663
|
+
points[3]
|
|
27664
|
+
] });
|
|
27665
|
+
this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
|
|
27666
|
+
const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
|
|
27667
|
+
this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
|
|
27668
|
+
const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
|
|
27669
|
+
this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
|
|
27670
|
+
this.setupSelection(draggedStroke);
|
|
27671
|
+
this.instance.updateNode(this.serialize(draggedStroke));
|
|
27672
|
+
this.instance.emitEvent("onDrag", null);
|
|
27673
|
+
});
|
|
27674
|
+
this.startHandle = startHandle;
|
|
27675
|
+
this.startHandle.visible(false);
|
|
27676
|
+
this.instance.getSelectionLayer()?.add(this.startHandle);
|
|
27677
|
+
}
|
|
27678
|
+
if (!this.endHandle) {
|
|
27679
|
+
const endHandle = new Konva.Circle({
|
|
27680
|
+
id: "line-end-handle",
|
|
27681
|
+
radius: 5,
|
|
27682
|
+
fill: "#ffffff",
|
|
27683
|
+
stroke: "#000000",
|
|
27684
|
+
strokeWidth: 1,
|
|
27685
|
+
edgeDistanceDisableOnDrag: true,
|
|
27686
|
+
scaleX: 1 / this.instance.getStage().scaleX(),
|
|
27687
|
+
scaleY: 1 / this.instance.getStage().scaleY(),
|
|
27688
|
+
draggable: true
|
|
27689
|
+
});
|
|
27690
|
+
endHandle.on("pointerover", () => {
|
|
27691
|
+
this.instance.getStage().container().style.cursor = "move";
|
|
27692
|
+
});
|
|
27693
|
+
endHandle.on("pointerout", () => {
|
|
27694
|
+
this.instance.getStage().container().style.cursor = "default";
|
|
27695
|
+
});
|
|
27696
|
+
endHandle.on("dragstart", (e) => {
|
|
27697
|
+
const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
|
|
27698
|
+
if (tr) tr.hide();
|
|
27699
|
+
const strokeId = e.target.getAttr("strokeId");
|
|
27700
|
+
const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
|
|
27701
|
+
if (!draggedStroke) return;
|
|
27702
|
+
const points = draggedStroke.getAttrs().linePoints;
|
|
27703
|
+
if (points.length !== 4) return;
|
|
27704
|
+
if (points.length === 4) draggedStroke.setAttr("eventTarget", true);
|
|
27705
|
+
this.instance.emitEvent("onDrag", e.target);
|
|
27706
|
+
});
|
|
27707
|
+
endHandle.on("dragmove", (e) => {
|
|
27708
|
+
const draggedTarget = e.target;
|
|
27709
|
+
const strokeId = draggedTarget.getAttr("strokeId");
|
|
27710
|
+
const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
|
|
27711
|
+
if (!draggedStroke) return;
|
|
27712
|
+
const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
|
|
27713
|
+
if (!internalLine) return;
|
|
27714
|
+
const points = draggedStroke.getAttrs().linePoints;
|
|
27715
|
+
if (points.length !== 4) return;
|
|
27716
|
+
this.teardownSelection();
|
|
27717
|
+
const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
|
|
27718
|
+
draggedStroke.setAttrs({ linePoints: [
|
|
27719
|
+
points[0],
|
|
27720
|
+
points[1],
|
|
27721
|
+
newLinePoint.x,
|
|
27722
|
+
newLinePoint.y
|
|
27723
|
+
] });
|
|
27724
|
+
this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
|
|
27725
|
+
const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
|
|
27726
|
+
this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
|
|
27727
|
+
const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
|
|
27728
|
+
this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
|
|
27729
|
+
this.setupSelection(draggedStroke);
|
|
27730
|
+
});
|
|
27731
|
+
endHandle.on("dragend", (e) => {
|
|
27732
|
+
const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
|
|
27733
|
+
if (tr) tr.show();
|
|
27734
|
+
const draggedTarget = e.target;
|
|
27735
|
+
const strokeId = draggedTarget.getAttr("strokeId");
|
|
27736
|
+
const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
|
|
27737
|
+
if (!draggedStroke) return;
|
|
27738
|
+
const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
|
|
27739
|
+
if (!internalLine) return;
|
|
27740
|
+
const points = draggedStroke.getAttrs().linePoints;
|
|
27741
|
+
if (points.length !== 4) return;
|
|
27742
|
+
this.teardownSelection();
|
|
27743
|
+
const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
|
|
27744
|
+
draggedStroke.setAttrs({ linePoints: [
|
|
27745
|
+
points[0],
|
|
27746
|
+
points[1],
|
|
27747
|
+
newLinePoint.x,
|
|
27748
|
+
newLinePoint.y
|
|
27749
|
+
] });
|
|
27750
|
+
this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
|
|
27751
|
+
const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
|
|
27752
|
+
this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
|
|
27753
|
+
const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
|
|
27754
|
+
this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
|
|
27755
|
+
this.setupSelection(draggedStroke);
|
|
27756
|
+
this.instance.updateNode(this.serialize(draggedStroke));
|
|
27757
|
+
this.instance.emitEvent("onDrag", null);
|
|
27758
|
+
});
|
|
27759
|
+
this.endHandle = endHandle;
|
|
27760
|
+
this.endHandle.visible(false);
|
|
27761
|
+
this.instance.getSelectionLayer()?.add(this.endHandle);
|
|
27762
|
+
}
|
|
27763
|
+
}
|
|
27764
|
+
showHandles(stroke) {
|
|
27765
|
+
if (this.startHandle === null || this.endHandle === null) return;
|
|
27766
|
+
this.startHandle.setAttr("strokeId", stroke.getAttrs().id);
|
|
27767
|
+
this.startHandle.setAttr("targetNode", stroke.getAttrs().id);
|
|
27768
|
+
this.startHandle.visible(true);
|
|
27769
|
+
this.startHandle.moveToTop();
|
|
27770
|
+
this.positionHandle(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
|
|
27771
|
+
this.endHandle.setAttr("strokeId", stroke.getAttrs().id);
|
|
27772
|
+
this.endHandle.setAttr("targetNode", stroke.getAttrs().id);
|
|
27773
|
+
this.endHandle.visible(true);
|
|
27774
|
+
this.endHandle.moveToTop();
|
|
27775
|
+
this.positionHandle(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
|
|
27776
|
+
}
|
|
27777
|
+
onUpdate(nodeInstance, nextProps) {
|
|
27778
|
+
nodeInstance.setAttrs({ ...nextProps });
|
|
27779
|
+
const stroke = nodeInstance;
|
|
27780
|
+
const tipStartStyle = nextProps.tipStartStyle ?? "none";
|
|
27781
|
+
const tipEndStyle = nextProps.tipEndStyle ?? "none";
|
|
27782
|
+
this.tipManagers[tipStartStyle]?.render(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
|
|
27783
|
+
this.tipManagers[tipEndStyle]?.render(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
|
|
27784
|
+
const internalLine = stroke.findOne(`#${stroke.getAttrs().id}-line`);
|
|
27785
|
+
if (internalLine) internalLine.setAttrs({
|
|
27786
|
+
name: void 0,
|
|
27787
|
+
dash: nextProps.dash,
|
|
27788
|
+
fill: nextProps.fill,
|
|
27789
|
+
stroke: nextProps.stroke,
|
|
27790
|
+
strokeWidth: nextProps.strokeWidth,
|
|
27791
|
+
lineJoin: "miter",
|
|
27792
|
+
lineCap: "round"
|
|
27793
|
+
});
|
|
27794
|
+
const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
27795
|
+
if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
|
|
27796
|
+
}
|
|
27797
|
+
scaleReset(node) {
|
|
27798
|
+
const scale = node.scale();
|
|
27799
|
+
const oldPoints = node.getAttrs().linePoints;
|
|
27800
|
+
const newPoints = [];
|
|
27801
|
+
for (let i = 0; i < oldPoints.length; i += 2) {
|
|
27802
|
+
const x = oldPoints[i] * scale.x;
|
|
27803
|
+
const y = oldPoints[i + 1] * scale.y;
|
|
27804
|
+
newPoints.push(x, y);
|
|
27805
|
+
}
|
|
27806
|
+
node.setAttrs({ linePoints: newPoints });
|
|
27807
|
+
node.scale({
|
|
27808
|
+
x: 1,
|
|
27809
|
+
y: 1
|
|
27810
|
+
});
|
|
27811
|
+
}
|
|
27812
|
+
positionHandle(instance, point) {
|
|
27813
|
+
const stage = this.instance.getStage();
|
|
27814
|
+
const points = instance.getAttrs().linePoints;
|
|
27815
|
+
const internalLine = instance.findOne(`#${instance.getAttrs().id}-line`);
|
|
27816
|
+
if (!internalLine) return;
|
|
27817
|
+
if (point === "start" && this.startHandle) {
|
|
27818
|
+
const stagePoint = internalLine.getAbsoluteTransform().point({
|
|
27819
|
+
x: points[0],
|
|
27820
|
+
y: points[1]
|
|
27821
|
+
});
|
|
27822
|
+
const localPoint = stage.getAbsoluteTransform().copy().invert().point(stagePoint);
|
|
27823
|
+
this.startHandle.x(localPoint.x);
|
|
27824
|
+
this.startHandle.y(localPoint.y);
|
|
27825
|
+
}
|
|
27826
|
+
if (point === "end" && this.endHandle) {
|
|
27827
|
+
const stagePoint = internalLine.getAbsoluteTransform().point({
|
|
27828
|
+
x: points[2],
|
|
27829
|
+
y: points[3]
|
|
27830
|
+
});
|
|
27831
|
+
const localPoint = stage.getAbsoluteTransform().copy().invert().point(stagePoint);
|
|
27832
|
+
this.endHandle.x(localPoint.x);
|
|
27833
|
+
this.endHandle.y(localPoint.y);
|
|
27834
|
+
}
|
|
27835
|
+
}
|
|
27836
|
+
getLinePointFromHandle(instance, e) {
|
|
27837
|
+
const stage = this.instance.getStage();
|
|
27838
|
+
const stagePoint = stage.getAbsoluteTransform().point(e.target.position());
|
|
27839
|
+
const localPoint = instance.getAbsoluteTransform().copy().invert().point(stagePoint);
|
|
27840
|
+
return localPoint;
|
|
27841
|
+
}
|
|
27842
|
+
setupSelection(instance, markSelected = false) {
|
|
27843
|
+
if (markSelected) instance.setAttrs({ isSelected: true });
|
|
27844
|
+
const hoverClone = instance.findOne(".hoverClone");
|
|
27845
|
+
if (hoverClone) return;
|
|
27846
|
+
const internalLine = instance.findOne(`#${instance.getAttrs().id}-line`);
|
|
27847
|
+
if (!internalLine) return;
|
|
27848
|
+
const internalLineHover = internalLine.clone();
|
|
27849
|
+
internalLineHover.setAttrs({
|
|
27850
|
+
name: "hoverClone",
|
|
27851
|
+
stroke: "#1a1aff",
|
|
27852
|
+
listening: false,
|
|
27853
|
+
draggable: false,
|
|
27854
|
+
strokeWidth: 1,
|
|
27855
|
+
points: instance.getAttrs().linePoints,
|
|
27856
|
+
strokeScaleEnabled: false
|
|
27857
|
+
});
|
|
27858
|
+
instance.add(internalLineHover);
|
|
27859
|
+
internalLineHover.moveToTop();
|
|
27860
|
+
}
|
|
27861
|
+
teardownSelection() {
|
|
27862
|
+
const stage = this.instance.getStage();
|
|
27863
|
+
const arrows = stage.find(`.${WEAVE_STROKE_SINGLE_NODE_TYPE}`);
|
|
27864
|
+
for (let i = 0; i < arrows.length; i++) {
|
|
27865
|
+
const arrow = arrows[i];
|
|
27866
|
+
arrow.setAttrs({ isSelected: false });
|
|
27867
|
+
const nodes = arrow.find(".hoverClone");
|
|
27868
|
+
if (nodes.length > 0) nodes.forEach((node) => node.destroy());
|
|
27869
|
+
}
|
|
27870
|
+
}
|
|
27871
|
+
updateLine(instance) {
|
|
27872
|
+
const tipStartStyle = instance.getAttrs().tipStartStyle ?? "none";
|
|
27873
|
+
this.tipManagers[tipStartStyle]?.update(instance, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
|
|
27874
|
+
const tipEndStyle = instance.getAttrs().tipEndStyle ?? "none";
|
|
27875
|
+
this.tipManagers[tipEndStyle]?.update(instance, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
|
|
27876
|
+
}
|
|
27877
|
+
};
|
|
27878
|
+
|
|
27879
|
+
//#endregion
|
|
27880
|
+
//#region src/nodes/comment/constants.ts
|
|
27881
|
+
const WEAVE_COMMENT_STATUS = {
|
|
27882
|
+
PENDING: "pending",
|
|
27883
|
+
RESOLVED: "resolved"
|
|
27884
|
+
};
|
|
27885
|
+
const WEAVE_COMMENT_CREATE_ACTION = {
|
|
27886
|
+
CREATE: "create",
|
|
27887
|
+
CLOSE: "close"
|
|
27888
|
+
};
|
|
27889
|
+
const WEAVE_COMMENT_VIEW_ACTION = {
|
|
27890
|
+
REPLY: "reply",
|
|
27891
|
+
MARK_RESOLVED: "markResolved",
|
|
27892
|
+
EDIT: "edit",
|
|
27893
|
+
DELETE: "delete",
|
|
27894
|
+
CLOSE: "close"
|
|
27895
|
+
};
|
|
27896
|
+
const WEAVE_COMMENT_NODE_ACTION = {
|
|
27897
|
+
IDLE: "idle",
|
|
27898
|
+
CREATING: "creating",
|
|
26599
27899
|
VIEWING: "viewing"
|
|
26600
27900
|
};
|
|
26601
27901
|
const WEAVE_COMMENT_NODE_TYPE = "comment";
|
|
@@ -27366,7 +28666,7 @@ var WeaveVideoNode = class extends WeaveNode {
|
|
|
27366
28666
|
const videoPlaceholder = video.findOne(`#${id}-video-placeholder`);
|
|
27367
28667
|
const videoIconGroup = video.findOne(`#${id}-video-icon-group`);
|
|
27368
28668
|
if (!videoPlaceholder || !videoIconGroup) return;
|
|
27369
|
-
const realVideoPlaceholderURL = this.config.urlTransformer?.(videoProps.videoPlaceholderURL ?? "") ?? videoProps.videoPlaceholderURL;
|
|
28669
|
+
const realVideoPlaceholderURL = this.config.urlTransformer?.(videoProps.videoPlaceholderURL ?? "", video) ?? videoProps.videoPlaceholderURL;
|
|
27370
28670
|
this.videoPlaceholder[id] = Konva.Util.createImageElement();
|
|
27371
28671
|
this.videoPlaceholder[id].crossOrigin = this.config.crossOrigin;
|
|
27372
28672
|
this.videoPlaceholder[id].src = realVideoPlaceholderURL;
|
|
@@ -27399,7 +28699,7 @@ var WeaveVideoNode = class extends WeaveNode {
|
|
|
27399
28699
|
const videoPlaceholder = video.findOne(`#${id}-video-placeholder`);
|
|
27400
28700
|
const videoPlayer = video.findOne(`#${id}-video`);
|
|
27401
28701
|
if (!bg || !videoIconGroup || !videoProgress || !videoPlayer || !videoPlaceholder) return;
|
|
27402
|
-
const realVideoURL = this.config.urlTransformer?.(videoProps.videoURL ?? "") ?? videoProps.videoURL;
|
|
28702
|
+
const realVideoURL = this.config.urlTransformer?.(videoProps.videoURL ?? "", video) ?? videoProps.videoURL;
|
|
27403
28703
|
if (realVideoURL) videoSource.src = realVideoURL;
|
|
27404
28704
|
videoSource.addEventListener("loadeddata", () => {
|
|
27405
28705
|
videoSource.currentTime = 0;
|
|
@@ -27682,7 +28982,7 @@ var WeaveVideoNode = class extends WeaveNode {
|
|
|
27682
28982
|
playing: true,
|
|
27683
28983
|
paused: false
|
|
27684
28984
|
};
|
|
27685
|
-
this.videoSource[videoId]
|
|
28985
|
+
this.videoSource[videoId]?.play?.();
|
|
27686
28986
|
this.anim.start();
|
|
27687
28987
|
this.instance.emitEvent("onVideoPlay", { nodeId: videoId });
|
|
27688
28988
|
}
|
|
@@ -29259,7 +30559,8 @@ var WeaveConnectorNode = class extends WeaveNode {
|
|
|
29259
30559
|
name: "node",
|
|
29260
30560
|
startInfoLoaded: false,
|
|
29261
30561
|
endInfoLoaded: false,
|
|
29262
|
-
draggable: false
|
|
30562
|
+
draggable: false,
|
|
30563
|
+
overridesMouseControl: true
|
|
29263
30564
|
});
|
|
29264
30565
|
if (!connector.getAttrs().lineType) connector.setAttrs({
|
|
29265
30566
|
lineType: WEAVE_CONNECTOR_NODE_LINE_TYPE.STRAIGHT,
|
|
@@ -29750,6 +31051,8 @@ var WeaveConnectorNode = class extends WeaveNode {
|
|
|
29750
31051
|
delete cleanedAttrs.initialized;
|
|
29751
31052
|
delete cleanedAttrs.startInfoLoaded;
|
|
29752
31053
|
delete cleanedAttrs.endInfoLoaded;
|
|
31054
|
+
delete cleanedAttrs.overridesMouseControl;
|
|
31055
|
+
delete cleanedAttrs.dragBoundFunc;
|
|
29753
31056
|
return {
|
|
29754
31057
|
key: attrs.id ?? "",
|
|
29755
31058
|
type: attrs.nodeType,
|
|
@@ -29940,6 +31243,8 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
29940
31243
|
actScale.y = scale;
|
|
29941
31244
|
stage.scale(actScale);
|
|
29942
31245
|
this.actualScale = scale;
|
|
31246
|
+
this.actualStep = this.findClosestStepIndex(oldScale < scale ? "zoomOut" : "zoomIn");
|
|
31247
|
+
this.actualScale = scale;
|
|
29943
31248
|
if (centered) {
|
|
29944
31249
|
const stageCenter = {
|
|
29945
31250
|
x: stage.width() / 2,
|
|
@@ -29979,19 +31284,20 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
29979
31284
|
canZoomIn: this.canZoomIn(),
|
|
29980
31285
|
canZoomOut: this.canZoomOut()
|
|
29981
31286
|
};
|
|
31287
|
+
stage.fire("onZoomChange", {}, true);
|
|
29982
31288
|
this.instance.emitEvent("onZoomChange", callbackParams);
|
|
29983
31289
|
}
|
|
29984
31290
|
}
|
|
29985
31291
|
canZoomOut() {
|
|
29986
31292
|
if (!this.enabled) return false;
|
|
29987
31293
|
const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
|
|
29988
|
-
if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("
|
|
31294
|
+
if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("zoomIn");
|
|
29989
31295
|
return this.actualStep - 1 >= 0;
|
|
29990
31296
|
}
|
|
29991
31297
|
canZoomIn() {
|
|
29992
31298
|
if (!this.enabled) return false;
|
|
29993
31299
|
const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
|
|
29994
|
-
if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("
|
|
31300
|
+
if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("zoomOut");
|
|
29995
31301
|
return this.actualStep + 1 < this.config.zoomSteps.length;
|
|
29996
31302
|
}
|
|
29997
31303
|
zoomToStep(step) {
|
|
@@ -30041,7 +31347,8 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
30041
31347
|
const scale = Math.min(scaleX, scaleY);
|
|
30042
31348
|
return scale;
|
|
30043
31349
|
}
|
|
30044
|
-
fitToScreen() {
|
|
31350
|
+
fitToScreen(options) {
|
|
31351
|
+
const finalOptions = mergeExceptArrays({ overrideZoom: true }, options);
|
|
30045
31352
|
if (!this.enabled) return;
|
|
30046
31353
|
const stage = this.instance.getStage();
|
|
30047
31354
|
const mainLayer = this.instance.getMainLayer();
|
|
@@ -30078,8 +31385,12 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
30078
31385
|
const upscaleScale = stage.getAttr("upscaleScale");
|
|
30079
31386
|
const stageWidth = stage.width();
|
|
30080
31387
|
const stageHeight = stage.height();
|
|
30081
|
-
|
|
30082
|
-
|
|
31388
|
+
let scaleX = (stageWidth - this.config.fitToScreen.padding * 2 / upscaleScale) / bounds.width;
|
|
31389
|
+
let scaleY = (stageHeight - this.config.fitToScreen.padding * 2 / upscaleScale) / bounds.height;
|
|
31390
|
+
if (!finalOptions.overrideZoom) {
|
|
31391
|
+
scaleX = this.clamp(scaleX, this.config.zoomSteps[0], this.config.zoomSteps[this.config.zoomSteps.length - 1]);
|
|
31392
|
+
scaleY = this.clamp(scaleY, this.config.zoomSteps[0], this.config.zoomSteps[this.config.zoomSteps.length - 1]);
|
|
31393
|
+
}
|
|
30083
31394
|
const scale = Math.min(scaleX, scaleY);
|
|
30084
31395
|
const offsetX = bounds.x + bounds.width / 2;
|
|
30085
31396
|
const offsetY = bounds.y + bounds.height / 2;
|
|
@@ -30093,7 +31404,11 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
30093
31404
|
});
|
|
30094
31405
|
this.setZoom(scale, false);
|
|
30095
31406
|
}
|
|
30096
|
-
fitToElements(box,
|
|
31407
|
+
fitToElements(box, options) {
|
|
31408
|
+
const finalOptions = mergeExceptArrays({
|
|
31409
|
+
smartZoom: false,
|
|
31410
|
+
overrideZoom: true
|
|
31411
|
+
}, options);
|
|
30097
31412
|
const stage = this.instance.getStage();
|
|
30098
31413
|
const container = stage.container();
|
|
30099
31414
|
const scale = stage.scale();
|
|
@@ -30106,7 +31421,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
30106
31421
|
x: box.x + box.width / 2,
|
|
30107
31422
|
y: box.y + box.height / 2
|
|
30108
31423
|
};
|
|
30109
|
-
if (smartZoom && fitsInView) {
|
|
31424
|
+
if (finalOptions.smartZoom && fitsInView) {
|
|
30110
31425
|
const newPosition = {
|
|
30111
31426
|
x: containerWidth / 2 - selectionCenter.x * scale.x,
|
|
30112
31427
|
y: containerHeight / 2 - selectionCenter.y * scale.y
|
|
@@ -30126,8 +31441,12 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
30126
31441
|
};
|
|
30127
31442
|
const availableScreenWidth = stageBox.width - 2 * this.config.fitToSelection.padding / upscaleScale;
|
|
30128
31443
|
const availableScreenHeight = stageBox.height - 2 * this.config.fitToSelection.padding / upscaleScale;
|
|
30129
|
-
|
|
30130
|
-
|
|
31444
|
+
let scaleX = availableScreenWidth / box.width;
|
|
31445
|
+
let scaleY = availableScreenHeight / box.height;
|
|
31446
|
+
if (!finalOptions.overrideZoom) {
|
|
31447
|
+
scaleX = this.clamp(scaleX, this.config.zoomSteps[0], this.config.zoomSteps[this.config.zoomSteps.length - 1]);
|
|
31448
|
+
scaleY = this.clamp(scaleY, this.config.zoomSteps[0], this.config.zoomSteps[this.config.zoomSteps.length - 1]);
|
|
31449
|
+
}
|
|
30131
31450
|
const finalScale = Math.min(scaleX, scaleY);
|
|
30132
31451
|
stage.scale({
|
|
30133
31452
|
x: finalScale,
|
|
@@ -30145,16 +31464,24 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
30145
31464
|
});
|
|
30146
31465
|
this.setZoom(finalScale, false);
|
|
30147
31466
|
}
|
|
30148
|
-
fitToNodes(nodes,
|
|
31467
|
+
fitToNodes(nodes, options) {
|
|
31468
|
+
const finalOptions = mergeExceptArrays({
|
|
31469
|
+
smartZoom: false,
|
|
31470
|
+
overrideZoom: true
|
|
31471
|
+
}, options);
|
|
30149
31472
|
if (!this.enabled) return;
|
|
30150
31473
|
const stage = this.instance.getStage();
|
|
30151
31474
|
if (nodes.length === 0) return;
|
|
30152
31475
|
const nodesInstances = nodes.map((nodeId) => this.instance.getStage().findOne(`#${nodeId}`)).filter((node) => node !== null);
|
|
30153
31476
|
const box = getBoundingBox(nodesInstances, { relativeTo: stage });
|
|
30154
31477
|
if (box.width === 0 || box.height === 0) return;
|
|
30155
|
-
this.fitToElements(box,
|
|
31478
|
+
this.fitToElements(box, finalOptions);
|
|
30156
31479
|
}
|
|
30157
|
-
fitToSelection(
|
|
31480
|
+
fitToSelection(options) {
|
|
31481
|
+
const finalOptions = mergeExceptArrays({
|
|
31482
|
+
smartZoom: false,
|
|
31483
|
+
overrideZoom: true
|
|
31484
|
+
}, options);
|
|
30158
31485
|
if (!this.enabled) return;
|
|
30159
31486
|
const stage = this.instance.getStage();
|
|
30160
31487
|
const selectionPlugin = this.getNodesSelectionPlugin();
|
|
@@ -30163,7 +31490,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
30163
31490
|
if (nodes.length === 0) return;
|
|
30164
31491
|
const box = getBoundingBox(selectionPlugin.getTransformer().getNodes(), { relativeTo: stage });
|
|
30165
31492
|
if (box.width === 0 || box.height === 0) return;
|
|
30166
|
-
this.fitToElements(box,
|
|
31493
|
+
this.fitToElements(box, finalOptions);
|
|
30167
31494
|
}
|
|
30168
31495
|
enable() {
|
|
30169
31496
|
this.enabled = true;
|
|
@@ -30329,6 +31656,12 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
30329
31656
|
const contextMenuPlugin = this.instance.getPlugin("contextMenu");
|
|
30330
31657
|
return contextMenuPlugin;
|
|
30331
31658
|
}
|
|
31659
|
+
getZoomSteps() {
|
|
31660
|
+
return this.config.zoomSteps;
|
|
31661
|
+
}
|
|
31662
|
+
clamp(value, min, max) {
|
|
31663
|
+
return Math.min(Math.max(value, min), max);
|
|
31664
|
+
}
|
|
30332
31665
|
};
|
|
30333
31666
|
|
|
30334
31667
|
//#endregion
|
|
@@ -30420,7 +31753,7 @@ var WeaveFitToScreenToolAction = class extends WeaveAction {
|
|
|
30420
31753
|
}
|
|
30421
31754
|
trigger(cancelAction, params) {
|
|
30422
31755
|
const stageZoomPlugin = this.getStageZoomPlugin();
|
|
30423
|
-
if (stageZoomPlugin) stageZoomPlugin.fitToScreen();
|
|
31756
|
+
if (stageZoomPlugin) stageZoomPlugin.fitToScreen({ overrideZoom: params?.overrideZoom ?? true });
|
|
30424
31757
|
this.previousAction = params.previousAction;
|
|
30425
31758
|
this.cancelAction = cancelAction;
|
|
30426
31759
|
this.cancelAction();
|
|
@@ -30459,7 +31792,10 @@ var WeaveFitToSelectionToolAction = class extends WeaveAction {
|
|
|
30459
31792
|
}
|
|
30460
31793
|
trigger(cancelAction, params) {
|
|
30461
31794
|
const stageZoomPlugin = this.getStageZoomPlugin();
|
|
30462
|
-
stageZoomPlugin.fitToSelection(
|
|
31795
|
+
stageZoomPlugin.fitToSelection({
|
|
31796
|
+
smartZoom: params?.smartZoom ?? false,
|
|
31797
|
+
overrideZoom: params?.overrideZoom ?? true
|
|
31798
|
+
});
|
|
30463
31799
|
this.previousAction = params.previousAction;
|
|
30464
31800
|
this.cancelAction = cancelAction;
|
|
30465
31801
|
this.cancelAction();
|
|
@@ -32785,6 +34121,274 @@ var WeaveArrowToolAction = class extends WeaveAction {
|
|
|
32785
34121
|
}
|
|
32786
34122
|
};
|
|
32787
34123
|
|
|
34124
|
+
//#endregion
|
|
34125
|
+
//#region src/actions/stroke-tool/constants.ts
|
|
34126
|
+
const WEAVE_STROKE_TOOL_ACTION_NAME = "strokeTool";
|
|
34127
|
+
const WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES = ["arrowTool"];
|
|
34128
|
+
const WEAVE_STROKE_TOOL_STATE = {
|
|
34129
|
+
["IDLE"]: "idle",
|
|
34130
|
+
["ADDING"]: "adding",
|
|
34131
|
+
["DEFINING_SIZE"]: "definingSize",
|
|
34132
|
+
["ADDED"]: "added"
|
|
34133
|
+
};
|
|
34134
|
+
const WEAVE_STROKE_TOOL_DEFAULT_CONFIG = { snapAngles: {
|
|
34135
|
+
angles: [
|
|
34136
|
+
0,
|
|
34137
|
+
45,
|
|
34138
|
+
90,
|
|
34139
|
+
135,
|
|
34140
|
+
180,
|
|
34141
|
+
225,
|
|
34142
|
+
270,
|
|
34143
|
+
315
|
|
34144
|
+
],
|
|
34145
|
+
activateThreshold: 5,
|
|
34146
|
+
releaseThreshold: 10
|
|
34147
|
+
} };
|
|
34148
|
+
|
|
34149
|
+
//#endregion
|
|
34150
|
+
//#region src/actions/stroke-tool/stroke-tool.ts
|
|
34151
|
+
var WeaveStrokeToolAction = class extends WeaveAction {
|
|
34152
|
+
initialized = false;
|
|
34153
|
+
initialCursor = null;
|
|
34154
|
+
snappedAngle = null;
|
|
34155
|
+
shiftPressed = false;
|
|
34156
|
+
onPropsChange = void 0;
|
|
34157
|
+
onInit = void 0;
|
|
34158
|
+
constructor(params) {
|
|
34159
|
+
super();
|
|
34160
|
+
this.config = mergeExceptArrays(WEAVE_STROKE_TOOL_DEFAULT_CONFIG, params?.config ?? {});
|
|
34161
|
+
this.pointers = new Map();
|
|
34162
|
+
this.initialized = false;
|
|
34163
|
+
this.state = WEAVE_STROKE_TOOL_STATE.IDLE;
|
|
34164
|
+
this.arrowId = null;
|
|
34165
|
+
this.shiftPressed = false;
|
|
34166
|
+
this.tempArrowId = null;
|
|
34167
|
+
this.tempArrowNode = null;
|
|
34168
|
+
this.container = void 0;
|
|
34169
|
+
this.snappedAngle = null;
|
|
34170
|
+
this.measureContainer = void 0;
|
|
34171
|
+
this.clickPoint = null;
|
|
34172
|
+
this.snapper = new GreedySnapper({
|
|
34173
|
+
snapAngles: this.config.snapAngles.angles,
|
|
34174
|
+
activateThreshold: this.config.snapAngles.activateThreshold,
|
|
34175
|
+
releaseThreshold: this.config.snapAngles.releaseThreshold
|
|
34176
|
+
});
|
|
34177
|
+
this.props = this.initProps();
|
|
34178
|
+
}
|
|
34179
|
+
getName() {
|
|
34180
|
+
return WEAVE_STROKE_TOOL_ACTION_NAME;
|
|
34181
|
+
}
|
|
34182
|
+
hasAliases() {
|
|
34183
|
+
return true;
|
|
34184
|
+
}
|
|
34185
|
+
getAliases() {
|
|
34186
|
+
return WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES;
|
|
34187
|
+
}
|
|
34188
|
+
initProps() {
|
|
34189
|
+
return {
|
|
34190
|
+
stroke: "#000000ff",
|
|
34191
|
+
strokeWidth: 1,
|
|
34192
|
+
opacity: 1,
|
|
34193
|
+
tipStartStyle: "none",
|
|
34194
|
+
tipEndStyle: "none"
|
|
34195
|
+
};
|
|
34196
|
+
}
|
|
34197
|
+
setupEvents() {
|
|
34198
|
+
const stage = this.instance.getStage();
|
|
34199
|
+
window.addEventListener("keydown", (e) => {
|
|
34200
|
+
if (e.code === "Enter" && this.instance.getActiveAction() === WEAVE_STROKE_TOOL_ACTION_NAME) {
|
|
34201
|
+
this.cancelAction();
|
|
34202
|
+
return;
|
|
34203
|
+
}
|
|
34204
|
+
if (e.code === "Escape" && this.instance.getActiveAction() === WEAVE_STROKE_TOOL_ACTION_NAME) {
|
|
34205
|
+
this.cancelAction();
|
|
34206
|
+
return;
|
|
34207
|
+
}
|
|
34208
|
+
if (e.key === "Shift" && this.instance.getActiveAction() === WEAVE_STROKE_TOOL_ACTION_NAME) {
|
|
34209
|
+
this.snappedAngle = null;
|
|
34210
|
+
this.shiftPressed = true;
|
|
34211
|
+
}
|
|
34212
|
+
});
|
|
34213
|
+
window.addEventListener("keyup", (e) => {
|
|
34214
|
+
if (e.key === "Shift" && this.instance.getActiveAction() === WEAVE_STROKE_TOOL_ACTION_NAME) {
|
|
34215
|
+
this.snappedAngle = null;
|
|
34216
|
+
this.shiftPressed = false;
|
|
34217
|
+
}
|
|
34218
|
+
});
|
|
34219
|
+
stage.on("pointerdown", (e) => {
|
|
34220
|
+
this.setTapStart(e);
|
|
34221
|
+
this.pointers.set(e.evt.pointerId, {
|
|
34222
|
+
x: e.evt.clientX,
|
|
34223
|
+
y: e.evt.clientY
|
|
34224
|
+
});
|
|
34225
|
+
if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_STROKE_TOOL_ACTION_NAME) {
|
|
34226
|
+
this.state = WEAVE_STROKE_TOOL_STATE.ADDING;
|
|
34227
|
+
return;
|
|
34228
|
+
}
|
|
34229
|
+
if (!this.tempArrowNode && this.state === WEAVE_STROKE_TOOL_STATE.ADDING) this.handleAdding();
|
|
34230
|
+
if (this.tempArrowNode && this.state === WEAVE_STROKE_TOOL_STATE.ADDING) this.state = WEAVE_STROKE_TOOL_STATE.DEFINING_SIZE;
|
|
34231
|
+
});
|
|
34232
|
+
stage.on("pointermove", () => {
|
|
34233
|
+
if (this.state === WEAVE_STROKE_TOOL_STATE.IDLE) return;
|
|
34234
|
+
this.setCursor();
|
|
34235
|
+
if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_STROKE_TOOL_ACTION_NAME) {
|
|
34236
|
+
this.state = WEAVE_STROKE_TOOL_STATE.ADDING;
|
|
34237
|
+
return;
|
|
34238
|
+
}
|
|
34239
|
+
if (this.state === WEAVE_STROKE_TOOL_STATE.DEFINING_SIZE) this.handleMovement();
|
|
34240
|
+
});
|
|
34241
|
+
stage.on("pointerup", (e) => {
|
|
34242
|
+
this.pointers.delete(e.evt.pointerId);
|
|
34243
|
+
if (this.state === WEAVE_STROKE_TOOL_STATE.DEFINING_SIZE) this.handleSettingSize();
|
|
34244
|
+
});
|
|
34245
|
+
this.initialized = true;
|
|
34246
|
+
}
|
|
34247
|
+
setState(state) {
|
|
34248
|
+
this.state = state;
|
|
34249
|
+
}
|
|
34250
|
+
addLine() {
|
|
34251
|
+
this.setCursor();
|
|
34252
|
+
this.setFocusStage();
|
|
34253
|
+
this.instance.emitEvent("onAddingStroke", { actionName: this.instance.getActiveAction() ?? WEAVE_STROKE_TOOL_ACTION_NAME });
|
|
34254
|
+
this.shiftPressed = false;
|
|
34255
|
+
this.clickPoint = null;
|
|
34256
|
+
this.setState(WEAVE_STROKE_TOOL_STATE.ADDING);
|
|
34257
|
+
}
|
|
34258
|
+
handleAdding() {
|
|
34259
|
+
const { mousePoint, container, measureContainer } = this.instance.getMousePointer();
|
|
34260
|
+
this.clickPoint = mousePoint;
|
|
34261
|
+
this.container = container;
|
|
34262
|
+
this.measureContainer = measureContainer;
|
|
34263
|
+
this.arrowId = v4_default();
|
|
34264
|
+
this.tempArrowId = v4_default();
|
|
34265
|
+
const nodeHandler = this.instance.getNodeHandler(WEAVE_STROKE_SINGLE_NODE_TYPE);
|
|
34266
|
+
if (!this.tempArrowNode && nodeHandler) {
|
|
34267
|
+
this.tempArrowNode = nodeHandler.onRender({
|
|
34268
|
+
...this.props,
|
|
34269
|
+
x: this.clickPoint?.x ?? 0,
|
|
34270
|
+
y: this.clickPoint?.y ?? 0,
|
|
34271
|
+
strokeScaleEnabled: true,
|
|
34272
|
+
linePoints: [
|
|
34273
|
+
0,
|
|
34274
|
+
0,
|
|
34275
|
+
1,
|
|
34276
|
+
1
|
|
34277
|
+
]
|
|
34278
|
+
});
|
|
34279
|
+
this.measureContainer?.add(this.tempArrowNode);
|
|
34280
|
+
this.setState(WEAVE_STROKE_TOOL_STATE.DEFINING_SIZE);
|
|
34281
|
+
}
|
|
34282
|
+
}
|
|
34283
|
+
defineFinalPoint() {
|
|
34284
|
+
if (!this.tempArrowNode || !this.measureContainer) return {
|
|
34285
|
+
x: 0,
|
|
34286
|
+
y: 0
|
|
34287
|
+
};
|
|
34288
|
+
const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
|
|
34289
|
+
const pos = {
|
|
34290
|
+
x: 0,
|
|
34291
|
+
y: 0
|
|
34292
|
+
};
|
|
34293
|
+
if (this.shiftPressed) {
|
|
34294
|
+
const linePoints = this.tempArrowNode.getAttrs().linePoints;
|
|
34295
|
+
let dx = mousePoint.x - (this.tempArrowNode.x() + linePoints[0]);
|
|
34296
|
+
let dy = mousePoint.y - (this.tempArrowNode.y() + linePoints[1]);
|
|
34297
|
+
const angle = Math.atan2(dy, dx);
|
|
34298
|
+
const angleDeg = angle * 180 / Math.PI;
|
|
34299
|
+
const snapped = this.snapper.apply(angleDeg);
|
|
34300
|
+
const dist = Math.hypot(dx, dy);
|
|
34301
|
+
const rad = snapped * Math.PI / 180;
|
|
34302
|
+
dx = Math.cos(rad) * dist;
|
|
34303
|
+
dy = Math.sin(rad) * dist;
|
|
34304
|
+
pos.x = linePoints[0] + dx;
|
|
34305
|
+
pos.y = linePoints[1] + dy;
|
|
34306
|
+
} else {
|
|
34307
|
+
pos.x = mousePoint.x - this.tempArrowNode.x();
|
|
34308
|
+
pos.y = mousePoint.y - this.tempArrowNode.y();
|
|
34309
|
+
}
|
|
34310
|
+
return pos;
|
|
34311
|
+
}
|
|
34312
|
+
handleSettingSize() {
|
|
34313
|
+
if (this.arrowId && this.tempArrowNode && this.measureContainer) this.cancelAction();
|
|
34314
|
+
}
|
|
34315
|
+
handleMovement() {
|
|
34316
|
+
if (this.state !== WEAVE_STROKE_TOOL_STATE.DEFINING_SIZE) return;
|
|
34317
|
+
const nodeHandler = this.instance.getNodeHandler(WEAVE_STROKE_SINGLE_NODE_TYPE);
|
|
34318
|
+
if (this.tempArrowNode && this.measureContainer && nodeHandler) {
|
|
34319
|
+
const pos = this.defineFinalPoint();
|
|
34320
|
+
const linePoints = this.tempArrowNode.getAttrs().linePoints;
|
|
34321
|
+
this.tempArrowNode.setAttrs({
|
|
34322
|
+
...this.props,
|
|
34323
|
+
linePoints: [
|
|
34324
|
+
linePoints[0],
|
|
34325
|
+
linePoints[1],
|
|
34326
|
+
pos.x,
|
|
34327
|
+
pos.y
|
|
34328
|
+
]
|
|
34329
|
+
});
|
|
34330
|
+
nodeHandler.updateLine(this.tempArrowNode);
|
|
34331
|
+
}
|
|
34332
|
+
}
|
|
34333
|
+
trigger(cancelAction) {
|
|
34334
|
+
if (!this.instance) throw new Error("Instance not defined");
|
|
34335
|
+
if (!this.initialized) this.setupEvents();
|
|
34336
|
+
const stage = this.instance.getStage();
|
|
34337
|
+
stage.container().tabIndex = 1;
|
|
34338
|
+
stage.container().focus();
|
|
34339
|
+
this.cancelAction = cancelAction;
|
|
34340
|
+
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
34341
|
+
if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
|
|
34342
|
+
this.props = this.initProps();
|
|
34343
|
+
this.addLine();
|
|
34344
|
+
}
|
|
34345
|
+
cleanup() {
|
|
34346
|
+
const stage = this.instance.getStage();
|
|
34347
|
+
this.tempArrowNode?.destroy();
|
|
34348
|
+
let nodeCreated = false;
|
|
34349
|
+
if (this.arrowId && this.tempArrowNode?.getAttrs().linePoints.length === 4 && !this.tempArrowNode?.getAttrs().linePoints.every((coord) => coord === 0)) {
|
|
34350
|
+
const nodeHandler = this.instance.getNodeHandler(WEAVE_STROKE_SINGLE_NODE_TYPE);
|
|
34351
|
+
if (nodeHandler) {
|
|
34352
|
+
const clonedArrow = this.tempArrowNode.clone();
|
|
34353
|
+
this.tempArrowNode.destroy();
|
|
34354
|
+
const node = nodeHandler.create(this.arrowId, {
|
|
34355
|
+
...this.props,
|
|
34356
|
+
...clonedArrow.getAttrs(),
|
|
34357
|
+
hitStrokeWidth: 16
|
|
34358
|
+
});
|
|
34359
|
+
this.instance.addNode(node, this.container?.getAttrs().id);
|
|
34360
|
+
this.instance.emitEvent("onAddedStroke", { actionName: this.instance.getActiveAction() ?? WEAVE_STROKE_TOOL_ACTION_NAME });
|
|
34361
|
+
nodeCreated = true;
|
|
34362
|
+
}
|
|
34363
|
+
}
|
|
34364
|
+
const selectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
34365
|
+
if (nodeCreated && selectionPlugin) {
|
|
34366
|
+
const node = stage.findOne(`#${this.arrowId}`);
|
|
34367
|
+
if (node) selectionPlugin.setSelectedNodes([node]);
|
|
34368
|
+
this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
|
|
34369
|
+
}
|
|
34370
|
+
stage.container().style.cursor = "default";
|
|
34371
|
+
this.initialCursor = null;
|
|
34372
|
+
this.arrowId = null;
|
|
34373
|
+
this.tempArrowId = null;
|
|
34374
|
+
this.tempArrowNode = null;
|
|
34375
|
+
this.container = void 0;
|
|
34376
|
+
this.measureContainer = void 0;
|
|
34377
|
+
this.clickPoint = null;
|
|
34378
|
+
this.setState(WEAVE_STROKE_TOOL_STATE.IDLE);
|
|
34379
|
+
}
|
|
34380
|
+
setCursor() {
|
|
34381
|
+
const stage = this.instance.getStage();
|
|
34382
|
+
stage.container().style.cursor = "crosshair";
|
|
34383
|
+
}
|
|
34384
|
+
setFocusStage() {
|
|
34385
|
+
const stage = this.instance.getStage();
|
|
34386
|
+
stage.container().tabIndex = 1;
|
|
34387
|
+
stage.container().blur();
|
|
34388
|
+
stage.container().focus();
|
|
34389
|
+
}
|
|
34390
|
+
};
|
|
34391
|
+
|
|
32788
34392
|
//#endregion
|
|
32789
34393
|
//#region src/actions/regular-polygon-tool/constants.ts
|
|
32790
34394
|
const REGULAR_POLYGON_TOOL_ACTION_NAME = "regularPolygonTool";
|
|
@@ -37210,5 +38814,5 @@ function getJSONFromYjsBinary(actualState) {
|
|
|
37210
38814
|
}
|
|
37211
38815
|
|
|
37212
38816
|
//#endregion
|
|
37213
|
-
export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, CONNECTOR_TOOL_ACTION_NAME, CONNECTOR_TOOL_DEFAULT_CONFIG, CONNECTOR_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, LINE_TOOL_ACTION_NAME, LINE_TOOL_DEFAULT_CONFIG, LINE_TOOL_STATE, MEASURE_TOOL_ACTION_NAME, MEASURE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_CONNECTOR_NODE_ANCHOR_ORIGIN, WEAVE_CONNECTOR_NODE_DECORATOR_TYPE, WEAVE_CONNECTOR_NODE_DEFAULT_CONFIG, WEAVE_CONNECTOR_NODE_LINE_ORIGIN, WEAVE_CONNECTOR_NODE_LINE_TYPE, WEAVE_CONNECTOR_NODE_TYPE, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_DEFAULT_CONFIG, WEAVE_LINE_NODE_TYPE, WEAVE_MEASURE_NODE_DEFAULT_CONFIG, WEAVE_MEASURE_NODE_TYPE, WEAVE_MEASURE_TOOL_DEFAULT_CONFIG, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAGE_PANNING_THROTTLE_MS, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_PRESENCE_CONFIG_DEFAULT_PROPS, WEAVE_USERS_PRESENCE_PLUGIN_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_PRESENCE_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveConnectorNode, WeaveConnectorToolAction, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveLineToolAction, WeaveMeasureNode, WeaveMeasureToolAction, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersPresencePlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getJSONFromYjsBinary, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isArray, isIOS, isInShadowDOM, isNodeInSelection, isObject, isServer, mapJsonToYjsArray, mapJsonToYjsElements, mapJsonToYjsMap, memoize, mergeExceptArrays, moveNodeToContainer, resetScale, weavejsToYjsBinary };
|
|
38817
|
+
export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, CONNECTOR_TOOL_ACTION_NAME, CONNECTOR_TOOL_DEFAULT_CONFIG, CONNECTOR_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, LINE_TOOL_ACTION_NAME, LINE_TOOL_DEFAULT_CONFIG, LINE_TOOL_STATE, MEASURE_TOOL_ACTION_NAME, MEASURE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_CONNECTOR_NODE_ANCHOR_ORIGIN, WEAVE_CONNECTOR_NODE_DECORATOR_TYPE, WEAVE_CONNECTOR_NODE_DEFAULT_CONFIG, WEAVE_CONNECTOR_NODE_LINE_ORIGIN, WEAVE_CONNECTOR_NODE_LINE_TYPE, WEAVE_CONNECTOR_NODE_TYPE, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_ANCHOR_POSITION, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_DEFAULT_CONFIG, WEAVE_LINE_NODE_TYPE, WEAVE_MEASURE_NODE_DEFAULT_CONFIG, WEAVE_MEASURE_NODE_TYPE, WEAVE_MEASURE_TOOL_DEFAULT_CONFIG, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAGE_PANNING_THROTTLE_MS, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE, WEAVE_STROKE_SINGLE_NODE_TIP_TYPE, WEAVE_STROKE_SINGLE_NODE_TYPE, WEAVE_STROKE_TOOL_ACTION_NAME, WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES, WEAVE_STROKE_TOOL_DEFAULT_CONFIG, WEAVE_STROKE_TOOL_STATE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_PRESENCE_CONFIG_DEFAULT_PROPS, WEAVE_USERS_PRESENCE_PLUGIN_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_PRESENCE_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveConnectorNode, WeaveConnectorToolAction, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveLineToolAction, WeaveMeasureNode, WeaveMeasureToolAction, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveStrokeSingleNode, WeaveStrokeToolAction, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersPresencePlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getJSONFromYjsBinary, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isArray, isIOS, isInShadowDOM, isNodeInSelection, isObject, isServer, mapJsonToYjsArray, mapJsonToYjsElements, mapJsonToYjsMap, memoize, mergeExceptArrays, moveNodeToContainer, resetScale, weavejsToYjsBinary };
|
|
37214
38818
|
//# sourceMappingURL=sdk.js.map
|