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