@inditextech/weave-sdk 2.20.2 → 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 +230 -10
- package/dist/sdk.d.ts.map +1 -1
- package/dist/sdk.js +1689 -116
- package/dist/sdk.js.map +1 -1
- package/dist/sdk.node.d.ts +230 -10
- package/dist/sdk.node.d.ts.map +1 -1
- package/dist/sdk.node.js +1689 -116
- 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,6 +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
|
});
|
|
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
|
+
});
|
|
25495
25863
|
return image;
|
|
25496
25864
|
}
|
|
25497
25865
|
clearCache(nodeInstance) {
|
|
@@ -25503,6 +25871,164 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25503
25871
|
nodeInstance.cache({ pixelRatio: this.config.performance.cache.pixelRatio });
|
|
25504
25872
|
}
|
|
25505
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
|
+
}
|
|
25506
26032
|
onUpdate(nodeInstance, nextProps) {
|
|
25507
26033
|
const id = nodeInstance.getAttrs().id;
|
|
25508
26034
|
const node = nodeInstance;
|
|
@@ -25604,8 +26130,8 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25604
26130
|
}
|
|
25605
26131
|
this.cacheNode(nodeInstance);
|
|
25606
26132
|
}
|
|
25607
|
-
preloadImage(imageId, imageURL, { onLoad, onError }) {
|
|
25608
|
-
const realImageURL = this.config.urlTransformer?.(imageURL ?? "") ?? imageURL;
|
|
26133
|
+
preloadImage(imageId, imageURL, { node, onLoad, onError }) {
|
|
26134
|
+
const realImageURL = this.config.urlTransformer?.(imageURL ?? "", node) ?? imageURL;
|
|
25609
26135
|
this.imageSource[imageId] = Konva.Util.createImageElement();
|
|
25610
26136
|
this.imageSource[imageId].crossOrigin = this.config.crossOrigin;
|
|
25611
26137
|
this.imageSource[imageId].onerror = (error) => {
|
|
@@ -25639,9 +26165,10 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
25639
26165
|
const { id } = imageProps;
|
|
25640
26166
|
const imagePlaceholder = image.findOne(`#${id}-placeholder`);
|
|
25641
26167
|
const internalImage = image.findOne(`#${id}-image`);
|
|
25642
|
-
const realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "") ?? imageProps.imageURL;
|
|
26168
|
+
const realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "", image) ?? imageProps.imageURL;
|
|
25643
26169
|
this.loadAsyncElement(id);
|
|
25644
26170
|
this.preloadImage(id, realImageURL ?? "", {
|
|
26171
|
+
node: image,
|
|
25645
26172
|
onLoad: () => {
|
|
25646
26173
|
if (image && imagePlaceholder && internalImage) {
|
|
25647
26174
|
image.setAttrs({
|
|
@@ -26324,6 +26851,8 @@ var WeaveFrameNode = class extends WeaveNode {
|
|
|
26324
26851
|
delete cleanedAttrs.mutexUserId;
|
|
26325
26852
|
delete cleanedAttrs.draggable;
|
|
26326
26853
|
delete cleanedAttrs.onTargetEnter;
|
|
26854
|
+
delete cleanedAttrs.overridesMouseControl;
|
|
26855
|
+
delete cleanedAttrs.dragBoundFunc;
|
|
26327
26856
|
return {
|
|
26328
26857
|
key: realAttrs?.id ?? "",
|
|
26329
26858
|
type: realAttrs?.nodeType,
|
|
@@ -26559,6 +27088,8 @@ var WeaveStrokeNode = class extends WeaveNode {
|
|
|
26559
27088
|
delete cleanedAttrs.draggable;
|
|
26560
27089
|
delete cleanedAttrs.sceneFunc;
|
|
26561
27090
|
delete cleanedAttrs.hitFunc;
|
|
27091
|
+
delete cleanedAttrs.overridesMouseControl;
|
|
27092
|
+
delete cleanedAttrs.dragBoundFunc;
|
|
26562
27093
|
return {
|
|
26563
27094
|
key: attrs.id ?? "",
|
|
26564
27095
|
type: attrs.nodeType,
|
|
@@ -26575,24 +27106,794 @@ var WeaveStrokeNode = class extends WeaveNode {
|
|
|
26575
27106
|
};
|
|
26576
27107
|
|
|
26577
27108
|
//#endregion
|
|
26578
|
-
//#region src/nodes/
|
|
26579
|
-
const
|
|
26580
|
-
|
|
26581
|
-
|
|
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"
|
|
26582
27130
|
};
|
|
26583
|
-
const
|
|
26584
|
-
|
|
26585
|
-
|
|
27131
|
+
const WEAVE_STROKE_SINGLE_NODE_TIP_SIDE = {
|
|
27132
|
+
START: "start",
|
|
27133
|
+
END: "end"
|
|
26586
27134
|
};
|
|
26587
|
-
|
|
26588
|
-
|
|
26589
|
-
|
|
26590
|
-
|
|
26591
|
-
|
|
26592
|
-
|
|
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
|
+
}
|
|
26593
27172
|
};
|
|
26594
|
-
|
|
26595
|
-
|
|
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",
|
|
26596
27897
|
CREATING: "creating",
|
|
26597
27898
|
VIEWING: "viewing"
|
|
26598
27899
|
};
|
|
@@ -27364,7 +28665,7 @@ var WeaveVideoNode = class extends WeaveNode {
|
|
|
27364
28665
|
const videoPlaceholder = video.findOne(`#${id}-video-placeholder`);
|
|
27365
28666
|
const videoIconGroup = video.findOne(`#${id}-video-icon-group`);
|
|
27366
28667
|
if (!videoPlaceholder || !videoIconGroup) return;
|
|
27367
|
-
const realVideoPlaceholderURL = this.config.urlTransformer?.(videoProps.videoPlaceholderURL ?? "") ?? videoProps.videoPlaceholderURL;
|
|
28668
|
+
const realVideoPlaceholderURL = this.config.urlTransformer?.(videoProps.videoPlaceholderURL ?? "", video) ?? videoProps.videoPlaceholderURL;
|
|
27368
28669
|
this.videoPlaceholder[id] = Konva.Util.createImageElement();
|
|
27369
28670
|
this.videoPlaceholder[id].crossOrigin = this.config.crossOrigin;
|
|
27370
28671
|
this.videoPlaceholder[id].src = realVideoPlaceholderURL;
|
|
@@ -27397,7 +28698,7 @@ var WeaveVideoNode = class extends WeaveNode {
|
|
|
27397
28698
|
const videoPlaceholder = video.findOne(`#${id}-video-placeholder`);
|
|
27398
28699
|
const videoPlayer = video.findOne(`#${id}-video`);
|
|
27399
28700
|
if (!bg || !videoIconGroup || !videoProgress || !videoPlayer || !videoPlaceholder) return;
|
|
27400
|
-
const realVideoURL = this.config.urlTransformer?.(videoProps.videoURL ?? "") ?? videoProps.videoURL;
|
|
28701
|
+
const realVideoURL = this.config.urlTransformer?.(videoProps.videoURL ?? "", video) ?? videoProps.videoURL;
|
|
27401
28702
|
if (realVideoURL) videoSource.src = realVideoURL;
|
|
27402
28703
|
videoSource.addEventListener("loadeddata", () => {
|
|
27403
28704
|
videoSource.currentTime = 0;
|
|
@@ -27680,7 +28981,7 @@ var WeaveVideoNode = class extends WeaveNode {
|
|
|
27680
28981
|
playing: true,
|
|
27681
28982
|
paused: false
|
|
27682
28983
|
};
|
|
27683
|
-
this.videoSource[videoId]
|
|
28984
|
+
this.videoSource[videoId]?.play?.();
|
|
27684
28985
|
this.anim.start();
|
|
27685
28986
|
this.instance.emitEvent("onVideoPlay", { nodeId: videoId });
|
|
27686
28987
|
}
|
|
@@ -29257,7 +30558,8 @@ var WeaveConnectorNode = class extends WeaveNode {
|
|
|
29257
30558
|
name: "node",
|
|
29258
30559
|
startInfoLoaded: false,
|
|
29259
30560
|
endInfoLoaded: false,
|
|
29260
|
-
draggable: false
|
|
30561
|
+
draggable: false,
|
|
30562
|
+
overridesMouseControl: true
|
|
29261
30563
|
});
|
|
29262
30564
|
if (!connector.getAttrs().lineType) connector.setAttrs({
|
|
29263
30565
|
lineType: WEAVE_CONNECTOR_NODE_LINE_TYPE.STRAIGHT,
|
|
@@ -29748,6 +31050,8 @@ var WeaveConnectorNode = class extends WeaveNode {
|
|
|
29748
31050
|
delete cleanedAttrs.initialized;
|
|
29749
31051
|
delete cleanedAttrs.startInfoLoaded;
|
|
29750
31052
|
delete cleanedAttrs.endInfoLoaded;
|
|
31053
|
+
delete cleanedAttrs.overridesMouseControl;
|
|
31054
|
+
delete cleanedAttrs.dragBoundFunc;
|
|
29751
31055
|
return {
|
|
29752
31056
|
key: attrs.id ?? "",
|
|
29753
31057
|
type: attrs.nodeType,
|
|
@@ -29979,6 +31283,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
29979
31283
|
canZoomIn: this.canZoomIn(),
|
|
29980
31284
|
canZoomOut: this.canZoomOut()
|
|
29981
31285
|
};
|
|
31286
|
+
stage.fire("onZoomChange", {}, true);
|
|
29982
31287
|
this.instance.emitEvent("onZoomChange", callbackParams);
|
|
29983
31288
|
}
|
|
29984
31289
|
}
|
|
@@ -32815,6 +34120,274 @@ var WeaveArrowToolAction = class extends WeaveAction {
|
|
|
32815
34120
|
}
|
|
32816
34121
|
};
|
|
32817
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
|
+
|
|
32818
34391
|
//#endregion
|
|
32819
34392
|
//#region src/actions/regular-polygon-tool/constants.ts
|
|
32820
34393
|
const REGULAR_POLYGON_TOOL_ACTION_NAME = "regularPolygonTool";
|
|
@@ -37205,5 +38778,5 @@ const setupCanvasBackend = async () => {
|
|
|
37205
38778
|
};
|
|
37206
38779
|
|
|
37207
38780
|
//#endregion
|
|
37208
|
-
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 };
|
|
37209
38782
|
//# sourceMappingURL=sdk.node.js.map
|