@inditextech/weave-sdk 0.32.0 → 0.34.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.js CHANGED
@@ -15493,7 +15493,6 @@ var require_lodash = __commonJS({ "../../node_modules/lodash/lodash.js"(exports,
15493
15493
  } else root._ = _;
15494
15494
  }).call(exports);
15495
15495
  } });
15496
- var import_lodash$1 = __toESM(require_lodash());
15497
15496
  var import_lodash = __toESM(require_lodash(), 1);
15498
15497
 
15499
15498
  //#endregion
@@ -15587,12 +15586,12 @@ var WeaveStore = class {
15587
15586
  node: JSON.parse(JSON.stringify(nodeInfo.node))
15588
15587
  });
15589
15588
  }
15590
- if (!this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) {
15589
+ if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
15591
15590
  this.instance.setupRenderer();
15592
15591
  this.isRoomLoaded = true;
15593
15592
  this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
15594
15593
  }
15595
- if (this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) this.instance.render();
15594
+ if (this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) this.instance.render();
15596
15595
  });
15597
15596
  }
15598
15597
  canUndoStateStep() {
@@ -15647,6 +15646,7 @@ const WEAVE_NODES_SELECTION_LAYER_ID = "selectionLayer";
15647
15646
  const WEAVE_CONTEXT_MENU_KEY = "contextMenu";
15648
15647
  const WEAVE_CONTEXT_MENU_X_OFFSET_DEFAULT = 4;
15649
15648
  const WEAVE_CONTEXT_MENU_Y_OFFSET_DEFAULT = 4;
15649
+ const WEAVE_CONTEXT_MENU_TAP_HOLD_TIMEOUT = 500;
15650
15650
 
15651
15651
  //#endregion
15652
15652
  //#region src/plugins/context-menu/context-menu.ts
@@ -15658,13 +15658,14 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
15658
15658
  this.touchTimer = void 0;
15659
15659
  this.tapHold = false;
15660
15660
  this.contextMenuVisible = false;
15661
- this.tapHoldTimeout = 500;
15661
+ this.tapHoldTimeout = WEAVE_CONTEXT_MENU_TAP_HOLD_TIMEOUT;
15662
15662
  const { config } = params ?? {};
15663
15663
  this.config = {
15664
15664
  xOffset: WEAVE_CONTEXT_MENU_X_OFFSET_DEFAULT,
15665
15665
  yOffset: WEAVE_CONTEXT_MENU_Y_OFFSET_DEFAULT,
15666
15666
  ...config
15667
15667
  };
15668
+ this.pointers = {};
15668
15669
  }
15669
15670
  getName() {
15670
15671
  return WEAVE_CONTEXT_MENU_KEY;
@@ -15682,9 +15683,8 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
15682
15683
  const mousePos = stage.getPointerPosition();
15683
15684
  if (mousePos && mousePos.x >= box.x && mousePos.x <= box.x + box.width && mousePos.y >= box.y && mousePos.y <= box.y + box.height) clickOnTransformer = true;
15684
15685
  }
15685
- if (target !== stage && !clickOnTransformer) return;
15686
15686
  let nodes = [];
15687
- if (clickOnTransformer && selectionPlugin) {
15687
+ if (target !== stage && clickOnTransformer && selectionPlugin) {
15688
15688
  const transformer = selectionPlugin.getTransformer();
15689
15689
  nodes = transformer.getNodes().map((node) => {
15690
15690
  const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
@@ -15694,6 +15694,13 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
15694
15694
  };
15695
15695
  }).filter((node) => typeof node !== "undefined");
15696
15696
  }
15697
+ if (target !== stage && !clickOnTransformer) {
15698
+ const nodeHandler = this.instance.getNodeHandler(target.getAttrs().nodeType);
15699
+ nodes = [{
15700
+ instance: target,
15701
+ node: nodeHandler?.serialize(target)
15702
+ }];
15703
+ }
15697
15704
  const containerRect = stage.container().getBoundingClientRect();
15698
15705
  const pointerPos = stage.getPointerPosition();
15699
15706
  if (containerRect && pointerPos) {
@@ -15722,28 +15729,24 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
15722
15729
  }
15723
15730
  initEvents() {
15724
15731
  const stage = this.instance.getStage();
15725
- stage.on("touchstart", (e) => {
15726
- e.evt.preventDefault();
15727
- if (e.evt instanceof TouchEvent && e.evt.touches && e.evt.touches.length > 1) {
15728
- if (this.touchTimer) clearTimeout(this.touchTimer);
15729
- return;
15730
- }
15732
+ stage.on("pointerdown", (e) => {
15733
+ this.pointers[e.evt.pointerId] = e.evt;
15734
+ if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
15731
15735
  this.touchTimer = setTimeout(() => {
15732
15736
  this.tapHold = true;
15733
15737
  this.triggerContextMenu(e.target);
15734
15738
  }, this.tapHoldTimeout);
15735
15739
  });
15736
- stage.on("touchmove", () => {
15740
+ stage.on("pointermove", () => {
15737
15741
  if (this.touchTimer) clearTimeout(this.touchTimer);
15738
15742
  });
15739
- stage.on("touchend", (e) => {
15740
- e.evt.preventDefault();
15741
- if (e.evt instanceof TouchEvent && e.evt.touches && e.evt.touches.length > 1) {
15742
- if (this.touchTimer) clearTimeout(this.touchTimer);
15743
- return;
15743
+ stage.on("pointerup", (e) => {
15744
+ delete this.pointers[e.evt.pointerId];
15745
+ if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) return;
15746
+ if (this.touchTimer) {
15747
+ clearTimeout(this.touchTimer);
15748
+ this.tapHold = false;
15744
15749
  }
15745
- if (this.touchTimer) clearTimeout(this.touchTimer);
15746
- if (this.tapHold) this.tapHold = false;
15747
15750
  });
15748
15751
  stage.on("contextmenu", (e) => {
15749
15752
  e.evt.preventDefault();
@@ -15806,6 +15809,8 @@ function checkIfOverContainer(instance, node) {
15806
15809
  }
15807
15810
  function moveNodeToContainer(instance, node) {
15808
15811
  const nodeIntersected = instance.pointIntersectsContainerElement();
15812
+ const isLocked = instance.allNodesLocked([node]);
15813
+ if (isLocked) return;
15809
15814
  let nodeActualContainer = node.getParent();
15810
15815
  if (!nodeActualContainer) return void 0;
15811
15816
  const actualContainerAttrs = nodeActualContainer.getAttrs();
@@ -15961,8 +15966,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
15961
15966
  this.active = false;
15962
15967
  this.cameFromSelectingMultiple = false;
15963
15968
  this.selecting = false;
15969
+ this.dragging = false;
15964
15970
  this.initialized = false;
15965
15971
  this.enabled = false;
15972
+ this.pointers = {};
15966
15973
  }
15967
15974
  getName() {
15968
15975
  return WEAVE_NODES_SELECTION_KEY;
@@ -16010,31 +16017,18 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16010
16017
  ...this.config.transformer
16011
16018
  });
16012
16019
  selectionLayer?.add(tr);
16013
- tr.on("mouseenter", (e) => {
16014
- if (!this.isPasting()) {
16015
- const stage$1 = this.instance.getStage();
16016
- stage$1.container().style.cursor = "grab";
16017
- e.cancelBubble = true;
16018
- }
16019
- });
16020
- tr.on("mouseleave", (e) => {
16021
- if (!this.isPasting()) {
16022
- const stage$1 = this.instance.getStage();
16023
- stage$1.container().style.cursor = "default";
16024
- e.cancelBubble = true;
16025
- }
16026
- });
16027
16020
  tr.on("transformstart", () => {
16028
16021
  this.triggerSelectedNodesEvent();
16029
16022
  });
16030
16023
  const handleTransform = () => {
16031
16024
  this.triggerSelectedNodesEvent();
16032
16025
  };
16033
- tr.on("transform", (0, import_lodash$1.throttle)(handleTransform, 50));
16026
+ tr.on("transform", (0, import_lodash.throttle)(handleTransform, 50));
16034
16027
  tr.on("transformend", () => {
16035
16028
  this.triggerSelectedNodesEvent();
16036
16029
  });
16037
16030
  tr.on("dragstart", (e) => {
16031
+ this.dragging = true;
16038
16032
  const stage$1 = this.instance.getStage();
16039
16033
  if (stage$1.isMouseWheelPressed()) {
16040
16034
  e.cancelBubble = true;
@@ -16069,8 +16063,9 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16069
16063
  }
16070
16064
  tr.forceUpdate();
16071
16065
  };
16072
- tr.on("dragmove", (0, import_lodash$1.throttle)(handleDragMove, 50));
16066
+ tr.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 50));
16073
16067
  tr.on("dragend", (e) => {
16068
+ this.dragging = false;
16074
16069
  e.cancelBubble = true;
16075
16070
  const selectedNodes = tr.nodes();
16076
16071
  for (let i = 0; i < selectedNodes.length; i++) {
@@ -16105,11 +16100,11 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16105
16100
  });
16106
16101
  this.tr = tr;
16107
16102
  this.selectionRectangle = selectionRectangle;
16108
- this.tr.on("dblclick dbltap", (evt) => {
16109
- evt.cancelBubble = true;
16103
+ this.tr.on("pointerdblclick", (e) => {
16104
+ e.cancelBubble = true;
16110
16105
  if (this.tr.getNodes().length === 1) {
16111
16106
  const node = this.tr.getNodes()[0];
16112
- node.fire("dblclick");
16107
+ node.fire("pointerdblclick");
16113
16108
  }
16114
16109
  });
16115
16110
  this.initEvents();
@@ -16173,14 +16168,14 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16173
16168
  return;
16174
16169
  }
16175
16170
  });
16176
- stage.on("mousedown touchstart", (e) => {
16171
+ stage.on("pointerdown", (e) => {
16172
+ this.pointers[e.evt.pointerId] = e.evt;
16177
16173
  if (!this.initialized) return;
16178
16174
  if (!this.active) return;
16179
- if (e.evt.button && e.evt.button !== 0) return;
16180
- if (e.evt.touches && e.evt.touches.length > 1) return;
16175
+ if (e.evt.pointerType === "mouse" && e.evt.button !== 0) return;
16176
+ if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
16181
16177
  const selectedGroup = this.instance.getInstanceRecursive(e.target);
16182
16178
  if (!(e.target instanceof Konva.Stage) && !(selectedGroup && selectedGroup.getAttrs().nodeType === "frame")) return;
16183
- e.evt.preventDefault();
16184
16179
  const intStage = this.instance.getStage();
16185
16180
  x1 = intStage.getRelativePointerPosition()?.x ?? 0;
16186
16181
  y1 = intStage.getRelativePointerPosition()?.y ?? 0;
@@ -16197,7 +16192,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16197
16192
  const handleMouseMove = (e) => {
16198
16193
  if (!this.initialized) return;
16199
16194
  if (!this.active) return;
16200
- if (e.evt instanceof TouchEvent && e.evt.touches && e.evt.touches.length > 1) return;
16195
+ if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
16201
16196
  const contextMenuPlugin = this.instance.getPlugin("contextMenu");
16202
16197
  if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
16203
16198
  this.selecting = false;
@@ -16207,7 +16202,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16207
16202
  this.cameFromSelectingMultiple = false;
16208
16203
  return;
16209
16204
  }
16210
- e.evt.preventDefault();
16211
16205
  const intStage = this.instance.getStage();
16212
16206
  x2 = intStage.getRelativePointerPosition()?.x ?? 0;
16213
16207
  y2 = intStage.getRelativePointerPosition()?.y ?? 0;
@@ -16219,11 +16213,13 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16219
16213
  height: Math.abs(y2 - y1)
16220
16214
  });
16221
16215
  };
16222
- stage.on("mousemove touchmove", (0, import_lodash$1.throttle)(handleMouseMove, 50));
16223
- stage.on("mouseup touchend", (e) => {
16216
+ stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
16217
+ stage.on("pointerup", (e) => {
16218
+ delete this.pointers[e.evt.pointerId];
16224
16219
  if (!this.initialized) return;
16225
16220
  if (!this.active) return;
16226
- if (e.evt instanceof TouchEvent && e.evt.touches && e.evt.touches.length > 1) return;
16221
+ if (!this.selecting) return;
16222
+ if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) return;
16227
16223
  const contextMenuPlugin = this.instance.getPlugin("contextMenu");
16228
16224
  if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
16229
16225
  this.selecting = false;
@@ -16235,7 +16231,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16235
16231
  this.cameFromSelectingMultiple = false;
16236
16232
  return;
16237
16233
  }
16238
- e.evt.preventDefault();
16239
16234
  this.tr.nodes([]);
16240
16235
  this.selectionRectangle.visible(false);
16241
16236
  const shapes = stage.find((node) => {
@@ -16255,25 +16250,34 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16255
16250
  return false;
16256
16251
  });
16257
16252
  const selectedNodes = new Set();
16258
- const framesNodes = selected.filter((shape) => shape.getAttrs().nodeType === "frame");
16259
- const framesNodesIds = selected.map((shape) => shape.getAttrs().id);
16253
+ const framesNodes = selected.map((shape) => {
16254
+ if (shape.getAttrs().nodeType === "frame" && shape.getAttrs().nodeId) return stage.findOne(`#${shape.getAttrs().nodeId}`);
16255
+ return shape;
16256
+ }).filter((shape) => {
16257
+ return shape.getAttrs().nodeType === "frame";
16258
+ });
16259
+ const framesNodesIds = framesNodes.map((shape) => {
16260
+ return shape.getAttrs().id;
16261
+ });
16260
16262
  const otherNodes = selected.filter((shape) => shape.getAttrs().nodeType !== "frame");
16261
16263
  otherNodes.forEach((node) => {
16262
- const parent = this.instance.getInstanceRecursive(node.getParent());
16263
- if (!framesNodesIds.includes(parent?.getAttrs().id)) selectedNodes.add(node);
16264
+ let parent = this.instance.getInstanceRecursive(node.getParent());
16265
+ if (parent?.getAttrs().nodeId) parent = this.instance.getStage().findOne(`#${parent.getAttrs().nodeId}`);
16266
+ if (parent && !framesNodesIds.includes(parent?.getAttrs().id) && !node.getAttrs().locked) selectedNodes.add(node);
16264
16267
  });
16265
16268
  framesNodes.forEach((node) => {
16266
16269
  const frameNode = node;
16267
- selectedNodes.add(frameNode);
16270
+ if (!frameNode.getAttrs().locked) selectedNodes.add(frameNode);
16268
16271
  });
16269
16272
  this.tr.nodes([...selectedNodes]);
16270
16273
  this.triggerSelectedNodesEvent();
16271
16274
  stage.container().tabIndex = 1;
16272
16275
  stage.container().focus();
16273
16276
  });
16274
- stage.on("click tap", (e) => {
16277
+ stage.on("pointerclick", (e) => {
16275
16278
  if (!this.enabled) return;
16276
16279
  if (this.instance.getActiveAction() !== "selectionTool") return;
16280
+ if (this.dragging) return;
16277
16281
  const contextMenuPlugin = this.instance.getPlugin("contextMenu");
16278
16282
  if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
16279
16283
  this.selecting = false;
@@ -16314,6 +16318,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16314
16318
  return node.getAttrs().id === nodeTargeted.getAttrs().id;
16315
16319
  });
16316
16320
  const isSelected = nodeSelectedIndex !== -1;
16321
+ if (nodeTargeted.getAttrs().locked) return;
16317
16322
  if (!metaPressed) {
16318
16323
  this.tr.nodes([nodeTargeted]);
16319
16324
  nodesSelected = this.tr.nodes().length;
@@ -16677,110 +16682,100 @@ var WeaveNode = class {
16677
16682
  node.scaleY(1);
16678
16683
  }
16679
16684
  setupDefaultNodeEvents(node) {
16680
- this.previousPointer = null;
16681
16685
  this.instance.addEventListener("onNodesChange", () => {
16682
- if (this.isSelecting() && this.isNodeSelected(node)) {
16686
+ if (!this.isLocked(node) && this.isSelecting() && this.isNodeSelected(node)) {
16683
16687
  node.draggable(true);
16684
16688
  return;
16685
16689
  }
16686
16690
  node.draggable(false);
16687
16691
  });
16688
- let transforming = false;
16689
- node.on("transformstart", () => {
16690
- transforming = true;
16691
- });
16692
- const handleTransform = (e) => {
16693
- const node$1 = e.target;
16694
- const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
16695
- const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
16696
- if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
16697
- if (nodesSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesSnappingPlugin.evaluateGuidelines(e);
16698
- if (this.isSelecting() && this.isNodeSelected(node$1)) {
16699
- this.scaleReset(node$1);
16700
- const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
16701
- if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
16702
- }
16703
- };
16704
- node.on("transform", (0, import_lodash$1.throttle)(handleTransform, 100));
16705
- node.on("transformend", (e) => {
16706
- const node$1 = e.target;
16707
- transforming = false;
16708
- const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
16709
- const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
16710
- if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
16711
- if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
16712
- const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
16713
- if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
16714
- });
16715
- node.on("dragstart", (e) => {
16716
- const stage = this.instance.getStage();
16717
- if (stage.isMouseWheelPressed()) {
16718
- e.cancelBubble = true;
16719
- node.stopDrag();
16720
- return;
16721
- }
16722
- });
16723
- const handleDragMove = (e) => {
16724
- const stage = this.instance.getStage();
16725
- if (stage.isMouseWheelPressed()) {
16726
- e.cancelBubble = true;
16727
- node.stopDrag();
16728
- return;
16729
- }
16730
- if (this.isSelecting() && this.isNodeSelected(node)) {
16731
- clearContainerTargets(this.instance);
16732
- const layerToMove = checkIfOverContainer(this.instance, e.target);
16733
- if (layerToMove) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
16734
- const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
16735
- if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
16736
- }
16737
- };
16738
- node.on("dragmove", (0, import_lodash$1.throttle)(handleDragMove, 100));
16739
- node.on("dragend", (e) => {
16740
- if (this.isSelecting() && this.isNodeSelected(node)) {
16741
- clearContainerTargets(this.instance);
16692
+ const isLocked = node.getAttrs().locked ?? false;
16693
+ if (isLocked) {
16694
+ node.off("transformstart");
16695
+ node.off("transform");
16696
+ node.off("transformend");
16697
+ node.off("dragstart");
16698
+ node.off("dragmove");
16699
+ node.off("dragend");
16700
+ node.off("pointerenter");
16701
+ node.off("pointerleave");
16702
+ } else {
16703
+ let transforming = false;
16704
+ node.on("transformstart", () => {
16705
+ transforming = true;
16706
+ });
16707
+ const handleTransform = (e) => {
16708
+ const node$1 = e.target;
16709
+ const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
16710
+ const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
16711
+ if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
16712
+ if (nodesSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesSnappingPlugin.evaluateGuidelines(e);
16713
+ if (this.isSelecting() && this.isNodeSelected(node$1)) {
16714
+ this.scaleReset(node$1);
16715
+ const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
16716
+ if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
16717
+ }
16718
+ };
16719
+ node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
16720
+ node.on("transformend", (e) => {
16721
+ const node$1 = e.target;
16722
+ transforming = false;
16723
+ const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
16742
16724
  const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
16743
16725
  if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
16744
- const containerToMove = moveNodeToContainer(this.instance, e.target);
16745
- if (containerToMove) return;
16746
- this.instance.updateNode(this.serialize(node));
16747
- }
16748
- });
16749
- this.previousPointer = null;
16750
- node.on("mouseenter", (e) => {
16751
- const realNode = this.instance.getInstanceRecursive(node);
16752
- if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting()) {
16753
- const stage = this.instance.getStage();
16754
- this.previousPointer = stage.container().style.cursor;
16755
- stage.container().style.cursor = "pointer";
16756
- e.cancelBubble = true;
16757
- return;
16758
- }
16759
- if (this.isPasting()) {
16760
- const stage = this.instance.getStage();
16761
- this.previousPointer = stage.container().style.cursor;
16762
- stage.container().style.cursor = "crosshair";
16763
- e.cancelBubble = true;
16764
- return;
16765
- }
16766
- });
16767
- node.on("mouseleave", (e) => {
16768
- const realNode = this.instance.getInstanceRecursive(node);
16769
- if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting()) {
16726
+ if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
16727
+ const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
16728
+ if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
16729
+ });
16730
+ node.on("dragstart", (e) => {
16770
16731
  const stage = this.instance.getStage();
16771
- stage.container().style.cursor = this.previousPointer ?? "default";
16772
- this.previousPointer = null;
16773
- e.cancelBubble = true;
16774
- return;
16775
- }
16776
- if (this.isPasting()) {
16732
+ if (stage.isMouseWheelPressed()) {
16733
+ e.cancelBubble = true;
16734
+ e.target.stopDrag();
16735
+ }
16736
+ });
16737
+ const handleDragMove = (e) => {
16777
16738
  const stage = this.instance.getStage();
16778
- this.previousPointer = stage.container().style.cursor;
16779
- stage.container().style.cursor = "crosshair";
16780
- e.cancelBubble = true;
16781
- return;
16782
- }
16783
- });
16739
+ if (stage.isMouseWheelPressed()) {
16740
+ e.cancelBubble = true;
16741
+ e.target.stopDrag();
16742
+ return;
16743
+ }
16744
+ if (this.isSelecting() && this.isNodeSelected(node)) {
16745
+ clearContainerTargets(this.instance);
16746
+ const layerToMove = checkIfOverContainer(this.instance, e.target);
16747
+ if (layerToMove) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
16748
+ const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
16749
+ if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
16750
+ }
16751
+ };
16752
+ node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
16753
+ node.on("dragend", (e) => {
16754
+ if (this.isSelecting() && this.isNodeSelected(node)) {
16755
+ clearContainerTargets(this.instance);
16756
+ const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
16757
+ if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
16758
+ const containerToMove = moveNodeToContainer(this.instance, e.target);
16759
+ if (containerToMove) return;
16760
+ this.instance.updateNode(this.serialize(node));
16761
+ }
16762
+ });
16763
+ node.on("pointerenter", (e) => {
16764
+ const realNode = this.instance.getInstanceRecursive(node);
16765
+ const isLocked$1 = realNode.getAttrs().locked ?? false;
16766
+ if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting()) {
16767
+ const stage = this.instance.getStage();
16768
+ stage.container().style.cursor = !isLocked$1 ? "pointer" : "default";
16769
+ e.cancelBubble = true;
16770
+ return;
16771
+ }
16772
+ if (this.isPasting()) {
16773
+ const stage = this.instance.getStage();
16774
+ stage.container().style.cursor = "crosshair";
16775
+ e.cancelBubble = true;
16776
+ }
16777
+ });
16778
+ }
16784
16779
  }
16785
16780
  create(key, props) {
16786
16781
  return {
@@ -16812,6 +16807,32 @@ var WeaveNode = class {
16812
16807
  }
16813
16808
  };
16814
16809
  }
16810
+ lock(instance) {
16811
+ if (instance.getAttrs().nodeType !== this.getNodeType()) return;
16812
+ instance.setAttrs({ locked: true });
16813
+ this.instance.updateNode(this.serialize(instance));
16814
+ const selectionPlugin = this.getSelectionPlugin();
16815
+ if (selectionPlugin) {
16816
+ const selectedNodes = selectionPlugin.getSelectedNodes();
16817
+ const newSelectedNodes = selectedNodes.filter((node) => node.getAttrs().id !== instance.getAttrs().id);
16818
+ selectionPlugin.setSelectedNodes(newSelectedNodes);
16819
+ selectionPlugin.getTransformer().forceUpdate();
16820
+ }
16821
+ this.setupDefaultNodeEvents(instance);
16822
+ const stage = this.instance.getStage();
16823
+ stage.container().style.cursor = "default";
16824
+ }
16825
+ unlock(instance) {
16826
+ if (instance.getAttrs().nodeType !== this.getNodeType()) return;
16827
+ instance.setAttrs({ locked: false });
16828
+ this.instance.updateNode(this.serialize(instance));
16829
+ this.setupDefaultNodeEvents(instance);
16830
+ const stage = this.instance.getStage();
16831
+ stage.container().style.cursor = "default";
16832
+ }
16833
+ isLocked(instance) {
16834
+ return instance.getAttrs().locked ?? false;
16835
+ }
16815
16836
  };
16816
16837
 
16817
16838
  //#endregion
@@ -18050,6 +18071,7 @@ var WeaveStateManager = class {
18050
18071
  };
18051
18072
  parent.props.children.push(finalNode);
18052
18073
  }
18074
+ this.instance.emitEvent("onNodeAdded", node);
18053
18075
  if (doRender) this.instance.render();
18054
18076
  }, userName);
18055
18077
  }
@@ -18079,6 +18101,7 @@ var WeaveStateManager = class {
18079
18101
  ...node.props
18080
18102
  }));
18081
18103
  nodeState.props = { ...nodeNew };
18104
+ this.instance.emitEvent("onNodeUpdated", node);
18082
18105
  if (doRender) this.instance.render();
18083
18106
  }, userName);
18084
18107
  }
@@ -18108,6 +18131,7 @@ var WeaveStateManager = class {
18108
18131
  const filteredChildren = newChildren.filter((actNode) => actNode.key !== node.key);
18109
18132
  parentState.props.children = filteredChildren;
18110
18133
  }
18134
+ this.instance.emitEvent("onNodeRemoved", node);
18111
18135
  if (doRender) this.instance.render();
18112
18136
  }, userName);
18113
18137
  }
@@ -18243,7 +18267,7 @@ var WeaveRegisterManager = class {
18243
18267
 
18244
18268
  //#endregion
18245
18269
  //#region package.json
18246
- var version = "0.32.0";
18270
+ var version = "0.34.0";
18247
18271
 
18248
18272
  //#endregion
18249
18273
  //#region src/managers/setup.ts
@@ -18478,6 +18502,7 @@ var WeaveExportManager = class {
18478
18502
  y: unscaledBounds.y - padding,
18479
18503
  width: unscaledBounds.width + 2 * padding,
18480
18504
  height: unscaledBounds.height + 2 * padding,
18505
+ strokeWidth: 0,
18481
18506
  fill: backgroundColor
18482
18507
  });
18483
18508
  exportGroup.add(background);
@@ -18493,10 +18518,10 @@ var WeaveExportManager = class {
18493
18518
  mainLayer.add(exportGroup);
18494
18519
  const backgroundRect = background.getClientRect();
18495
18520
  exportGroup.toImage({
18496
- x: backgroundRect.x,
18497
- y: backgroundRect.y,
18498
- width: backgroundRect.width,
18499
- height: backgroundRect.height,
18521
+ x: Math.round(backgroundRect.x),
18522
+ y: Math.round(backgroundRect.y),
18523
+ width: Math.round(backgroundRect.width),
18524
+ height: Math.round(backgroundRect.height),
18500
18525
  mimeType: format$2,
18501
18526
  pixelRatio,
18502
18527
  quality: options.quality ?? 1,
@@ -18813,6 +18838,9 @@ var Weave = class {
18813
18838
  getElementsTree() {
18814
18839
  return this.stateManager.getElementsTree();
18815
18840
  }
18841
+ isEmpty() {
18842
+ return this.getElementsTree().length === 0;
18843
+ }
18816
18844
  moveUp(node) {
18817
18845
  this.zIndexManager.moveUp(node);
18818
18846
  }
@@ -18853,7 +18881,8 @@ var Weave = class {
18853
18881
  if (selectionPlugin) {
18854
18882
  const stage = this.getStage();
18855
18883
  const instanceNodes = nodesIds.map((nodeId) => {
18856
- const nodeInstance = stage.findOne(`#${nodeId}`);
18884
+ let nodeInstance = stage.findOne(`#${nodeId}`);
18885
+ if (nodeInstance && nodeInstance.getAttrs().nodeType === "frame") nodeInstance = stage.findOne(`#${nodeId}-selector-area`);
18857
18886
  return nodeInstance;
18858
18887
  });
18859
18888
  selectionPlugin.setSelectedNodes(instanceNodes);
@@ -18874,6 +18903,48 @@ var Weave = class {
18874
18903
  async exportNodes(nodes, boundingNodes, options) {
18875
18904
  return await this.exportManager.exportNodes(nodes, boundingNodes, options);
18876
18905
  }
18906
+ allNodesLocked(nodes) {
18907
+ let allNodesLocked = true;
18908
+ for (const node of nodes) {
18909
+ const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
18910
+ if (!nodeHandler) continue;
18911
+ allNodesLocked = allNodesLocked && nodeHandler.isLocked(node);
18912
+ }
18913
+ return allNodesLocked;
18914
+ }
18915
+ allNodesUnlocked(nodes) {
18916
+ let allNodesUnlocked = true;
18917
+ for (const node of nodes) {
18918
+ const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
18919
+ if (!nodeHandler) continue;
18920
+ allNodesUnlocked = allNodesUnlocked && !nodeHandler.isLocked(node);
18921
+ }
18922
+ return allNodesUnlocked;
18923
+ }
18924
+ lockNode(node) {
18925
+ const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
18926
+ if (!nodeHandler) return;
18927
+ nodeHandler.lock(node);
18928
+ }
18929
+ lockNodes(nodes) {
18930
+ for (const node of nodes) {
18931
+ const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
18932
+ if (!nodeHandler) continue;
18933
+ nodeHandler.lock(node);
18934
+ }
18935
+ }
18936
+ unlockNode(node) {
18937
+ const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
18938
+ if (!nodeHandler) return;
18939
+ nodeHandler.unlock(node);
18940
+ }
18941
+ unlockNodes(nodes) {
18942
+ for (const node of nodes) {
18943
+ const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
18944
+ if (!nodeHandler) continue;
18945
+ nodeHandler.unlock(node);
18946
+ }
18947
+ }
18877
18948
  };
18878
18949
 
18879
18950
  //#endregion
@@ -18899,10 +18970,16 @@ var WeaveStageNode = class extends WeaveNode {
18899
18970
  stage.container().addEventListener("blur", () => {
18900
18971
  this.stageFocused = false;
18901
18972
  });
18902
- stage.on("mousedown", (e) => {
18973
+ stage.on("pointermove", (e) => {
18974
+ if (e.target === stage) {
18975
+ const stage$1 = this.instance.getStage();
18976
+ stage$1.container().style.cursor = "default";
18977
+ }
18978
+ });
18979
+ stage.on("pointerdown", (e) => {
18903
18980
  if (e.evt.button === 1) this.wheelMousePressed = true;
18904
18981
  });
18905
- stage.on("mouseup", (e) => {
18982
+ stage.on("pointerup", (e) => {
18906
18983
  if (e.evt.button === 1) this.wheelMousePressed = false;
18907
18984
  });
18908
18985
  stage.batchDraw();
@@ -19228,7 +19305,7 @@ var WeaveTextNode = class extends WeaveNode {
19228
19305
  const node = e.target;
19229
19306
  if (this.isSelecting() && this.isNodeSelected(node)) e.cancelBubble = true;
19230
19307
  };
19231
- text.on("transform", (0, import_lodash$1.throttle)(handleTextTransform, 50));
19308
+ text.on("transform", (0, import_lodash.throttle)(handleTextTransform, 50));
19232
19309
  window.addEventListener("keypress", (e) => {
19233
19310
  if (e.key === "Enter" && this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME && !this.editing && e.target !== this.textArea) {
19234
19311
  e.preventDefault();
@@ -19238,7 +19315,7 @@ var WeaveTextNode = class extends WeaveNode {
19238
19315
  }
19239
19316
  }
19240
19317
  });
19241
- text.on("dblclick dbltap", (e) => {
19318
+ text.on("pointerdblclick", (e) => {
19242
19319
  e.cancelBubble = true;
19243
19320
  if (this.editing) return;
19244
19321
  if (!(this.isSelecting() && this.isNodeSelected(text))) return;
@@ -19486,7 +19563,7 @@ var WeaveTextNode = class extends WeaveNode {
19486
19563
  this.removeTextAreaDOM(textNode);
19487
19564
  this.instance.removeEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
19488
19565
  this.instance.removeEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
19489
- window.removeEventListener("click", handleOutsideClick);
19566
+ window.removeEventListener("pointerclick", handleOutsideClick);
19490
19567
  return;
19491
19568
  }
19492
19569
  };
@@ -19515,14 +19592,14 @@ var WeaveTextNode = class extends WeaveNode {
19515
19592
  this.removeTextAreaDOM(textNode);
19516
19593
  this.textArea.removeEventListener("keydown", handleKeyDown);
19517
19594
  this.textArea.removeEventListener("keyup", handleKeyUp);
19518
- window.removeEventListener("click", handleOutsideClick);
19519
- window.removeEventListener("touchstart", handleOutsideClick);
19595
+ window.removeEventListener("pointerclick", handleOutsideClick);
19596
+ window.removeEventListener("pointerdown", handleOutsideClick);
19520
19597
  return;
19521
19598
  }
19522
19599
  };
19523
19600
  setTimeout(() => {
19524
- window.addEventListener("click", handleOutsideClick);
19525
- window.addEventListener("touchstart", handleOutsideClick);
19601
+ window.addEventListener("pointerclick", handleOutsideClick);
19602
+ window.addEventListener("pointerdown", handleOutsideClick);
19526
19603
  }, 0);
19527
19604
  this.editing = true;
19528
19605
  }
@@ -19674,8 +19751,7 @@ var WeaveImageToolAction = class extends WeaveAction {
19674
19751
  return;
19675
19752
  }
19676
19753
  });
19677
- stage.on("click tap", (e) => {
19678
- e.evt.preventDefault();
19754
+ stage.on("pointerclick", () => {
19679
19755
  if (this.state === IMAGE_TOOL_STATE.IDLE) return;
19680
19756
  if (this.state === IMAGE_TOOL_STATE.UPLOADING) return;
19681
19757
  if (this.state === IMAGE_TOOL_STATE.ADDING) {
@@ -19683,8 +19759,7 @@ var WeaveImageToolAction = class extends WeaveAction {
19683
19759
  return;
19684
19760
  }
19685
19761
  });
19686
- stage.on("mousemove touchmove", (e) => {
19687
- e.evt.preventDefault();
19762
+ stage.on("pointermove", () => {
19688
19763
  const tempImage = this.instance.getStage().findOne(`#${this.tempImageId}`);
19689
19764
  if (this.state === IMAGE_TOOL_STATE.ADDING && tempImage) {
19690
19765
  const mousePos = stage.getRelativePointerPosition();
@@ -20295,7 +20370,7 @@ var WeaveImageNode = class extends WeaveNode {
20295
20370
  });
20296
20371
  image.add(cropGroup);
20297
20372
  this.setupDefaultNodeEvents(image);
20298
- image.on("dblclick dbltap", (evt) => {
20373
+ image.on("pointerdblclick", (evt) => {
20299
20374
  evt.cancelBubble = true;
20300
20375
  if (image.getAttrs().cropping ?? false) return;
20301
20376
  if (!internalImage.getAttr("image")) return;
@@ -20463,7 +20538,7 @@ var WeaveImageNode = class extends WeaveNode {
20463
20538
  const stage = this.instance.getStage();
20464
20539
  const image = stage.findOne(`#${imageAttrs.id}`);
20465
20540
  const internalImage = image?.findOne(`#${imageAttrs.id}-image`);
20466
- if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash$1.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
20541
+ if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
20467
20542
  const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
20468
20543
  internalImage.width(imageAttrs.uncroppedImage.width);
20469
20544
  internalImage.height(imageAttrs.uncroppedImage.height);
@@ -20480,7 +20555,7 @@ var WeaveImageNode = class extends WeaveNode {
20480
20555
  internalImage.height(imageAttrs.cropSize.height);
20481
20556
  this.cachedCropInfo[imageAttrs.id ?? ""] = imageAttrs.cropInfo;
20482
20557
  }
20483
- if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash$1.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
20558
+ if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
20484
20559
  internalImage.width(imageAttrs.uncroppedImage.width);
20485
20560
  internalImage.height(imageAttrs.uncroppedImage.height);
20486
20561
  internalImage.rotation(0);
@@ -20895,7 +20970,7 @@ var WeaveFrameNode = class extends WeaveNode {
20895
20970
  clonedSA.scaleY(1);
20896
20971
  e.cancelBubble = true;
20897
20972
  };
20898
- selectorArea.on("transform", (0, import_lodash$1.throttle)(handleSelectorAreaTransform, 50));
20973
+ selectorArea.on("transform", (0, import_lodash.throttle)(handleSelectorAreaTransform, 50));
20899
20974
  selectorArea.on("transformend", (e) => {
20900
20975
  const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
20901
20976
  if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
@@ -22737,7 +22812,7 @@ var require_hammer = __commonJS({ "../../node_modules/hammerjs/hammer.js"(export
22737
22812
  else window$1[exportName] = Hammer;
22738
22813
  })(window, document, "Hammer");
22739
22814
  } });
22740
- var import_hammer = __toESM(require_hammer());
22815
+ var import_hammer = __toESM(require_hammer(), 1);
22741
22816
 
22742
22817
  //#endregion
22743
22818
  //#region src/plugins/stage-zoom/stage-zoom.ts
@@ -22753,7 +22828,6 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
22753
22828
  ...config
22754
22829
  };
22755
22830
  if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
22756
- this.isSpaceKeyPressed = false;
22757
22831
  this.isCtrlOrMetaPressed = false;
22758
22832
  this.updatedMinimumZoom = false;
22759
22833
  this.actualStep = this.config.zoomSteps.findIndex((step) => step === this.config.defaultZoom);
@@ -22778,7 +22852,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
22778
22852
  this.config.zoomSteps = [minimumZoom, ...this.config.zoomSteps];
22779
22853
  }
22780
22854
  };
22781
- mainLayer?.on("draw", (0, import_lodash$1.throttle)(handleDraw, 50));
22855
+ mainLayer?.on("draw", (0, import_lodash.throttle)(handleDraw, 50));
22782
22856
  this.setZoom(this.config.zoomSteps[this.actualStep]);
22783
22857
  }
22784
22858
  setZoom(scale, centered = true, pointer) {
@@ -22993,11 +23067,9 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
22993
23067
  initEvents() {
22994
23068
  window.addEventListener("keydown", (e) => {
22995
23069
  if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
22996
- if (e.code === "Space") this.isSpaceKeyPressed = true;
22997
23070
  });
22998
23071
  window.addEventListener("keyup", (e) => {
22999
23072
  if (!(e.ctrlKey || e.metaKey)) this.isCtrlOrMetaPressed = false;
23000
- if (e.code === "Space") this.isSpaceKeyPressed = false;
23001
23073
  });
23002
23074
  const stage = this.instance.getStage();
23003
23075
  const stageContainer = this.instance.getStage().container();
@@ -23023,17 +23095,20 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
23023
23095
  const newScale = initialScale * ev.scale;
23024
23096
  this.setZoom(newScale, false, center);
23025
23097
  });
23026
- window.addEventListener("wheel", (e) => {
23098
+ const handleWheel = (e) => {
23099
+ e.evt.preventDefault();
23027
23100
  const stage$1 = this.instance.getStage();
23028
- if (!this.enabled || !stage$1.isFocused() || !this.isCtrlOrMetaPressed || this.isSpaceKeyPressed) return;
23101
+ const performZoom = this.isCtrlOrMetaPressed || !this.isCtrlOrMetaPressed && e.evt.ctrlKey && e.evt.deltaMode === 0;
23102
+ if (!this.enabled || !stage$1.isFocused() || !performZoom) return;
23029
23103
  const oldScale = stage$1.scaleX();
23030
23104
  const pointer = stage$1.getPointerPosition();
23031
23105
  if (!pointer) return;
23032
23106
  const scaleBy = 1.025;
23033
- const direction = e.deltaY > 0 ? 1 : -1;
23107
+ const direction = e.evt.deltaY > 0 ? 1 : -1;
23034
23108
  const newScale = direction > 0 ? oldScale / scaleBy : oldScale * scaleBy;
23035
23109
  this.setZoom(newScale, false, pointer);
23036
- });
23110
+ };
23111
+ stage.on("wheel", handleWheel);
23037
23112
  }
23038
23113
  };
23039
23114
 
@@ -23316,8 +23391,7 @@ var WeaveEraserToolAction = class extends WeaveAction {
23316
23391
  }
23317
23392
  setupEvents() {
23318
23393
  const stage = this.instance.getStage();
23319
- stage.on("click tap", (e) => {
23320
- e.evt.preventDefault();
23394
+ stage.on("pointerclick", () => {
23321
23395
  if (!this.erasing) return;
23322
23396
  const nodeIntersected = this.instance.pointIntersectsElement();
23323
23397
  if (nodeIntersected) {
@@ -23325,7 +23399,8 @@ var WeaveEraserToolAction = class extends WeaveAction {
23325
23399
  if (!realNode) return;
23326
23400
  const nodeType = realNode.getAttrs().nodeType;
23327
23401
  const nodeHandler = this.instance.getNodeHandler(nodeType);
23328
- if (nodeHandler) {
23402
+ const isLocked = this.instance.allNodesLocked([realNode]);
23403
+ if (nodeHandler && !isLocked) {
23329
23404
  const nodeSerialized = nodeHandler.serialize(realNode);
23330
23405
  this.instance.removeNode(nodeSerialized);
23331
23406
  }
@@ -23425,22 +23500,19 @@ var WeaveRectangleToolAction = class extends WeaveAction {
23425
23500
  return;
23426
23501
  }
23427
23502
  });
23428
- stage.on("mousedown touchstart", (e) => {
23429
- e.evt.preventDefault();
23503
+ stage.on("pointerdown", () => {
23430
23504
  if (this.state === RECTANGLE_TOOL_STATE.ADDING) {
23431
23505
  this.creating = true;
23432
23506
  this.handleAdding();
23433
23507
  }
23434
23508
  });
23435
- stage.on("mousemove touchmove", (e) => {
23436
- e.evt.preventDefault();
23509
+ stage.on("pointermove", () => {
23437
23510
  if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
23438
23511
  this.moved = true;
23439
23512
  this.handleMovement();
23440
23513
  }
23441
23514
  });
23442
- stage.on("mouseup touchend", (e) => {
23443
- e.evt.preventDefault();
23515
+ stage.on("pointerup", () => {
23444
23516
  if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
23445
23517
  this.creating = false;
23446
23518
  this.handleSettingSize();
@@ -23603,22 +23675,19 @@ var WeaveEllipseToolAction = class extends WeaveAction {
23603
23675
  return;
23604
23676
  }
23605
23677
  });
23606
- stage.on("mousedown touchstart", (e) => {
23607
- e.evt.preventDefault();
23678
+ stage.on("pointerdown", () => {
23608
23679
  if (this.state === ELLIPSE_TOOL_STATE.ADDING) {
23609
23680
  this.creating = true;
23610
23681
  this.handleAdding();
23611
23682
  }
23612
23683
  });
23613
- stage.on("mousemove touchmove", (e) => {
23614
- e.evt.preventDefault();
23684
+ stage.on("pointermove", () => {
23615
23685
  if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
23616
23686
  this.moved = true;
23617
23687
  this.handleMovement();
23618
23688
  }
23619
23689
  });
23620
- stage.on("mouseup touchend", (e) => {
23621
- e.evt.preventDefault();
23690
+ stage.on("pointerup", () => {
23622
23691
  if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
23623
23692
  this.creating = false;
23624
23693
  this.handleSettingSize();
@@ -23790,12 +23859,7 @@ var WeavePenToolAction = class extends WeaveAction {
23790
23859
  return;
23791
23860
  }
23792
23861
  });
23793
- stage.on("dblclick dbltap", (e) => {
23794
- e.evt.preventDefault();
23795
- this.cancelAction();
23796
- });
23797
- stage.on("click tap", (e) => {
23798
- e.evt.preventDefault();
23862
+ stage.on("pointerclick", () => {
23799
23863
  if (this.state === PEN_TOOL_STATE.IDLE) return;
23800
23864
  if (this.state === PEN_TOOL_STATE.ADDING) {
23801
23865
  this.handleAdding();
@@ -23806,8 +23870,7 @@ var WeavePenToolAction = class extends WeaveAction {
23806
23870
  return;
23807
23871
  }
23808
23872
  });
23809
- stage.on("mousemove touchmove", (e) => {
23810
- e.evt.preventDefault();
23873
+ stage.on("pointermove", () => {
23811
23874
  this.handleMovement();
23812
23875
  });
23813
23876
  this.initialized = true;
@@ -24030,22 +24093,19 @@ var WeaveBrushToolAction = class extends WeaveAction {
24030
24093
  return;
24031
24094
  }
24032
24095
  });
24033
- stage.on("mousedown touchstart", (e) => {
24096
+ stage.on("pointerdown", (e) => {
24034
24097
  if (this.state !== BRUSH_TOOL_STATE.IDLE) return;
24035
24098
  this.handleStartStroke();
24036
- e.evt.preventDefault();
24037
24099
  e.evt.stopPropagation();
24038
24100
  });
24039
- stage.on("mousemove touchmove", (e) => {
24101
+ stage.on("pointermove", (e) => {
24040
24102
  if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
24041
24103
  this.handleMovement();
24042
- e.evt.preventDefault();
24043
24104
  e.evt.stopPropagation();
24044
24105
  });
24045
- stage.on("mouseup touchend", (e) => {
24106
+ stage.on("pointerup", (e) => {
24046
24107
  if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
24047
24108
  this.handleEndStroke();
24048
- e.evt.preventDefault();
24049
24109
  e.evt.stopPropagation();
24050
24110
  });
24051
24111
  this.initialized = true;
@@ -24172,17 +24232,13 @@ var WeaveTextToolAction = class extends WeaveAction {
24172
24232
  return;
24173
24233
  }
24174
24234
  });
24175
- stage.on("click tap", (e) => {
24176
- e.evt.preventDefault();
24235
+ stage.on("pointerclick", () => {
24177
24236
  if (this.state === TEXT_TOOL_STATE.IDLE) return;
24178
24237
  if (this.state === TEXT_TOOL_STATE.ADDING) {
24179
24238
  this.handleAdding();
24180
24239
  return;
24181
24240
  }
24182
24241
  });
24183
- stage.on("mousemove touchmove", (e) => {
24184
- e.evt.preventDefault();
24185
- });
24186
24242
  this.initialized = true;
24187
24243
  }
24188
24244
  setState(state) {
@@ -24299,22 +24355,19 @@ var WeaveStarToolAction = class extends WeaveAction {
24299
24355
  return;
24300
24356
  }
24301
24357
  });
24302
- stage.on("mousedown touchstart", (e) => {
24303
- e.evt.preventDefault();
24358
+ stage.on("pointerdown", () => {
24304
24359
  if (this.state === STAR_TOOL_STATE.ADDING) {
24305
24360
  this.creating = true;
24306
24361
  this.handleAdding();
24307
24362
  }
24308
24363
  });
24309
- stage.on("mousemove touchmove", (e) => {
24310
- e.evt.preventDefault();
24364
+ stage.on("pointermove", () => {
24311
24365
  if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
24312
24366
  this.moved = true;
24313
24367
  this.handleMovement();
24314
24368
  }
24315
24369
  });
24316
- stage.on("mouseup touchend", (e) => {
24317
- e.evt.preventDefault();
24370
+ stage.on("pointerup", () => {
24318
24371
  if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
24319
24372
  this.creating = false;
24320
24373
  this.handleSettingSize();
@@ -24492,12 +24545,10 @@ var WeaveArrowToolAction = class extends WeaveAction {
24492
24545
  return;
24493
24546
  }
24494
24547
  });
24495
- stage.on("dblclick dbltap", (e) => {
24496
- e.evt.preventDefault();
24548
+ stage.on("pointerdblclick", () => {
24497
24549
  this.cancelAction();
24498
24550
  });
24499
- stage.on("click tap", (e) => {
24500
- e.evt.preventDefault();
24551
+ stage.on("pointerclick", () => {
24501
24552
  if (this.state === ARROW_TOOL_STATE.IDLE) return;
24502
24553
  if (this.state === ARROW_TOOL_STATE.ADDING) {
24503
24554
  this.handleAdding();
@@ -24508,8 +24559,7 @@ var WeaveArrowToolAction = class extends WeaveAction {
24508
24559
  return;
24509
24560
  }
24510
24561
  });
24511
- stage.on("mousemove touchmove", (e) => {
24512
- e.evt.preventDefault();
24562
+ stage.on("pointermove", () => {
24513
24563
  this.handleMovement();
24514
24564
  });
24515
24565
  this.initialized = true;
@@ -24743,22 +24793,19 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
24743
24793
  return;
24744
24794
  }
24745
24795
  });
24746
- stage.on("mousedown touchstart", (e) => {
24747
- e.evt.preventDefault();
24796
+ stage.on("pointerdown", () => {
24748
24797
  if (this.state === REGULAR_POLYGON_TOOL_STATE.ADDING) {
24749
24798
  this.creating = true;
24750
24799
  this.handleAdding();
24751
24800
  }
24752
24801
  });
24753
- stage.on("mousemove touchmove", (e) => {
24754
- e.evt.preventDefault();
24802
+ stage.on("pointermove", () => {
24755
24803
  if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
24756
24804
  this.moved = true;
24757
24805
  this.handleMovement();
24758
24806
  }
24759
24807
  });
24760
- stage.on("mouseup touchend", (e) => {
24761
- e.evt.preventDefault();
24808
+ stage.on("pointerup", () => {
24762
24809
  if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
24763
24810
  this.creating = false;
24764
24811
  this.handleSettingSize();
@@ -24913,8 +24960,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
24913
24960
  return;
24914
24961
  }
24915
24962
  });
24916
- stage.on("click tap", (e) => {
24917
- e.evt.preventDefault();
24963
+ stage.on("pointerclick", () => {
24918
24964
  if (this.state === FRAME_TOOL_STATE.IDLE) return;
24919
24965
  if (this.state === FRAME_TOOL_STATE.ADDING) {
24920
24966
  this.handleAdding();
@@ -25058,11 +25104,12 @@ var WeaveExportNodesToolAction = class extends WeaveAction {
25058
25104
  link.click();
25059
25105
  this.cancelAction?.();
25060
25106
  }
25061
- async trigger(cancelAction, { nodes, boundingNodes, options, download = true }) {
25107
+ async trigger(cancelAction, { nodes, boundingNodes, options, triggerSelectionTool = true, download = true }) {
25062
25108
  if (!this.instance) throw new Error("Instance not defined");
25063
25109
  const stage = this.instance.getStage();
25064
25110
  stage.container().tabIndex = 1;
25065
25111
  stage.container().focus();
25112
+ this.triggerSelectionTool = triggerSelectionTool;
25066
25113
  this.cancelAction = cancelAction;
25067
25114
  this.options = {
25068
25115
  ...this.defaultFormatOptions,
@@ -25081,7 +25128,253 @@ var WeaveExportNodesToolAction = class extends WeaveAction {
25081
25128
  stage.container().tabIndex = 0;
25082
25129
  stage.container().click();
25083
25130
  stage.container().focus();
25084
- this.instance.triggerAction("selectionTool");
25131
+ if (this.triggerSelectionTool) this.instance.triggerAction("selectionTool");
25132
+ }
25133
+ };
25134
+
25135
+ //#endregion
25136
+ //#region src/actions/align-nodes-tool/constants.ts
25137
+ const ALIGN_NODES_TOOL_ACTION_NAME = "alignNodesTool";
25138
+ const ALIGN_NODES_ALIGN_TO = {
25139
+ ["LEFT_HORIZONTAL"]: "left-horizontal",
25140
+ ["CENTER_HORIZONTAL"]: "center-horizontal",
25141
+ ["RIGHT_HORIZONTAL"]: "right-horizontal",
25142
+ ["TOP_VERTICAL"]: "top-vertical",
25143
+ ["CENTER_VERTICAL"]: "center-vertical",
25144
+ ["BOTTOM_VERTICAL"]: "bottom-vertical"
25145
+ };
25146
+ const ALIGN_NODES_TOOL_STATE = { ["IDLE"]: "idle" };
25147
+
25148
+ //#endregion
25149
+ //#region src/actions/align-nodes-tool/align-nodes-tool.ts
25150
+ var WeaveAlignNodesToolAction = class extends WeaveAction {
25151
+ initialized = false;
25152
+ onPropsChange = void 0;
25153
+ onInit = void 0;
25154
+ constructor() {
25155
+ super();
25156
+ this.initialized = false;
25157
+ this.state = ALIGN_NODES_TOOL_STATE.IDLE;
25158
+ }
25159
+ getName() {
25160
+ return ALIGN_NODES_TOOL_ACTION_NAME;
25161
+ }
25162
+ setupEvents() {
25163
+ this.initialized = true;
25164
+ }
25165
+ setState(state) {
25166
+ this.state = state;
25167
+ }
25168
+ updateNode(node) {
25169
+ const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
25170
+ if (nodeHandler) {
25171
+ const actualNode = nodeHandler.serialize(node);
25172
+ this.instance.updateNode(actualNode);
25173
+ }
25174
+ }
25175
+ getParents(nodes) {
25176
+ if (nodes.length === 0) return [];
25177
+ const counts = {};
25178
+ for (const node of nodes) {
25179
+ let realNode = node;
25180
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25181
+ if (!realNode) continue;
25182
+ const parentId = realNode.getParent()?.getAttrs().id ?? "";
25183
+ const entry = counts[parentId];
25184
+ if (entry) entry.count++;
25185
+ else counts[parentId] = {
25186
+ count: 1,
25187
+ id: realNode.getParent()?.getAttrs().id ?? "",
25188
+ value: realNode.getParent()
25189
+ };
25190
+ }
25191
+ return Object.keys(counts).map((key) => counts[key].id);
25192
+ }
25193
+ alignToLeftHorizontal(nodes) {
25194
+ let targetX = Infinity;
25195
+ for (const node of nodes) {
25196
+ const box = node.getClientRect({ relativeTo: this.instance.getStage() });
25197
+ const realX = box.x;
25198
+ if (realX < targetX) targetX = realX;
25199
+ }
25200
+ for (const node of nodes) {
25201
+ let realNode = node;
25202
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25203
+ if (!realNode) continue;
25204
+ const box = node.getClientRect({ relativeTo: this.instance.getStage() });
25205
+ const deltaX = targetX - box.x;
25206
+ realNode.x(realNode.x() + deltaX);
25207
+ this.updateNode(realNode);
25208
+ }
25209
+ }
25210
+ alignToCenterHorizontal(nodes) {
25211
+ let minX = Infinity;
25212
+ let maxX = -Infinity;
25213
+ for (const node of nodes) {
25214
+ const box = node.getClientRect({ relativeTo: this.instance.getStage() });
25215
+ const realX = box.x;
25216
+ const realXWidth = box.x + box.width;
25217
+ if (realX < minX) minX = realX;
25218
+ if (realXWidth > maxX) maxX = realXWidth;
25219
+ }
25220
+ const targetX = minX + (maxX - minX) / 2;
25221
+ for (const node of nodes) {
25222
+ let realNode = node;
25223
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25224
+ if (!realNode) continue;
25225
+ const box = node.getClientRect({ relativeTo: this.instance.getStage() });
25226
+ const deltaX = targetX - (box.x + box.width / 2);
25227
+ realNode.x(realNode.x() + deltaX);
25228
+ this.updateNode(realNode);
25229
+ }
25230
+ }
25231
+ alignToRightHorizontal(nodes) {
25232
+ let targetX = -Infinity;
25233
+ for (const node of nodes) {
25234
+ const box = node.getClientRect({ relativeTo: this.instance.getStage() });
25235
+ const realX = box.x + box.width;
25236
+ if (realX > targetX) targetX = realX;
25237
+ }
25238
+ for (const node of nodes) {
25239
+ let realNode = node;
25240
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25241
+ if (!realNode) continue;
25242
+ const box = node.getClientRect({ relativeTo: this.instance.getStage() });
25243
+ const deltaX = targetX - (box.x + box.width);
25244
+ realNode.x(realNode.x() + deltaX);
25245
+ this.updateNode(realNode);
25246
+ }
25247
+ }
25248
+ alignToTopVertical(nodes) {
25249
+ let targetY = Infinity;
25250
+ for (const node of nodes) {
25251
+ let realNode = node;
25252
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25253
+ if (!realNode) continue;
25254
+ const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
25255
+ const realY = box.y;
25256
+ if (realY < targetY) targetY = realY;
25257
+ }
25258
+ for (const node of nodes) {
25259
+ let realNode = node;
25260
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25261
+ if (!realNode) continue;
25262
+ const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
25263
+ const deltaY = targetY - box.y;
25264
+ realNode.y(realNode.y() + deltaY);
25265
+ this.updateNode(realNode);
25266
+ }
25267
+ }
25268
+ alignToCenterVertical(nodes) {
25269
+ let minY = Infinity;
25270
+ let maxY = -Infinity;
25271
+ for (const node of nodes) {
25272
+ let realNode = node;
25273
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25274
+ if (!realNode) continue;
25275
+ const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
25276
+ const realY = box.y;
25277
+ const realYWidth = box.y + box.height;
25278
+ if (realY < minY) minY = realY;
25279
+ if (realYWidth > maxY) maxY = realYWidth;
25280
+ }
25281
+ const targetY = minY + (maxY - minY) / 2;
25282
+ for (const node of nodes) {
25283
+ let realNode = node;
25284
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25285
+ if (!realNode) continue;
25286
+ const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
25287
+ const deltaY = targetY - (box.y + box.height / 2);
25288
+ realNode.y(realNode.y() + deltaY);
25289
+ this.updateNode(realNode);
25290
+ }
25291
+ }
25292
+ alignToBottomVertical(nodes) {
25293
+ let targetY = -Infinity;
25294
+ for (const node of nodes) {
25295
+ let realNode = node;
25296
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25297
+ if (!realNode) continue;
25298
+ const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
25299
+ const realY = box.y + box.height;
25300
+ if (realY > targetY) targetY = realY;
25301
+ }
25302
+ for (const node of nodes) {
25303
+ let realNode = node;
25304
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25305
+ if (!realNode) continue;
25306
+ const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
25307
+ const deltaY = targetY - (box.y + box.height);
25308
+ realNode.y(realNode.y() + deltaY);
25309
+ this.updateNode(realNode);
25310
+ }
25311
+ }
25312
+ alignNodes(alignTo) {
25313
+ let selectedNodes = [];
25314
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
25315
+ if (selectionPlugin) selectedNodes = selectionPlugin.getSelectedNodes();
25316
+ const parentsIds = this.getParents(selectedNodes);
25317
+ let parent = this.instance.getMainLayer();
25318
+ if (parentsIds.length === 1) parent = this.instance.getStage().findOne(`#${parentsIds[0]}`);
25319
+ if (parentsIds.length > 1 && !parentsIds.includes("mainLayer")) {
25320
+ this.cancelAction();
25321
+ return;
25322
+ }
25323
+ selectedNodes = [...selectedNodes.filter((node) => {
25324
+ let realNode = node;
25325
+ if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
25326
+ return realNode?.getParent()?.getAttrs().id === parent?.getAttrs().id;
25327
+ })];
25328
+ switch (alignTo) {
25329
+ case ALIGN_NODES_ALIGN_TO.LEFT_HORIZONTAL: {
25330
+ this.alignToLeftHorizontal(selectedNodes);
25331
+ break;
25332
+ }
25333
+ case ALIGN_NODES_ALIGN_TO.CENTER_HORIZONTAL: {
25334
+ this.alignToCenterHorizontal(selectedNodes);
25335
+ break;
25336
+ }
25337
+ case ALIGN_NODES_ALIGN_TO.RIGHT_HORIZONTAL: {
25338
+ this.alignToRightHorizontal(selectedNodes);
25339
+ break;
25340
+ }
25341
+ case ALIGN_NODES_ALIGN_TO.TOP_VERTICAL: {
25342
+ this.alignToTopVertical(selectedNodes);
25343
+ break;
25344
+ }
25345
+ case ALIGN_NODES_ALIGN_TO.CENTER_VERTICAL: {
25346
+ this.alignToCenterVertical(selectedNodes);
25347
+ break;
25348
+ }
25349
+ case ALIGN_NODES_ALIGN_TO.BOTTOM_VERTICAL: {
25350
+ this.alignToBottomVertical(selectedNodes);
25351
+ break;
25352
+ }
25353
+ default: break;
25354
+ }
25355
+ this.cancelAction();
25356
+ }
25357
+ canAlignSelectedNodes() {
25358
+ let selectedNodes = [];
25359
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
25360
+ if (selectionPlugin) selectedNodes = selectionPlugin.getSelectedNodes();
25361
+ const parentsIds = this.getParents(selectedNodes);
25362
+ if (parentsIds.length > 1) return false;
25363
+ return true;
25364
+ }
25365
+ trigger(cancelAction, { alignTo, triggerSelectionTool = true }) {
25366
+ if (!this.instance) throw new Error("Instance not defined");
25367
+ if (!this.initialized) this.setupEvents();
25368
+ const stage = this.instance.getStage();
25369
+ stage.container().tabIndex = 1;
25370
+ stage.container().focus();
25371
+ this.triggerSelectionTool = triggerSelectionTool;
25372
+ this.cancelAction = cancelAction;
25373
+ this.alignNodes(alignTo);
25374
+ }
25375
+ cleanup() {
25376
+ if (this.triggerSelectionTool) this.instance.triggerAction("selectionTool");
25377
+ this.setState(ALIGN_NODES_TOOL_STATE.IDLE);
25085
25378
  }
25086
25379
  };
25087
25380
 
@@ -25094,8 +25387,8 @@ const WEAVE_GRID_TYPES = {
25094
25387
  };
25095
25388
  const WEAVE_GRID_DEFAULT_SIZE = 50;
25096
25389
  const WEAVE_GRID_DEFAULT_TYPE = WEAVE_GRID_TYPES.LINES;
25097
- const WEAVE_GRID_DEFAULT_COLOR = "rgba(0,0,0,0.2)";
25098
- const WEAVE_GRID_DEFAULT_ORIGIN_COLOR = "rgba(255,0,0,0.2)";
25390
+ const WEAVE_GRID_DEFAULT_COLOR = "rgba(0,0,0,0.1)";
25391
+ const WEAVE_GRID_DEFAULT_ORIGIN_COLOR = "rgba(255,0,0,0.1)";
25099
25392
  const WEAVE_GRID_DEFAULT_STROKE = .5;
25100
25393
  const WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO = 4;
25101
25394
  const WEAVE_GRID_DEFAULT_RADIUS = 1;
@@ -25146,36 +25439,22 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
25146
25439
  window.addEventListener("keyup", (e) => {
25147
25440
  if (e.code === "Space") this.isSpaceKeyPressed = false;
25148
25441
  });
25149
- stage.on("mousedown", (e) => {
25442
+ stage.on("pointerdown", (e) => {
25150
25443
  const activeAction = this.instance.getActiveAction();
25151
- if (e && e.evt.button === 0 && activeAction === "moveTool") {
25152
- this.moveToolActive = true;
25153
- e.cancelBubble = true;
25154
- }
25155
- if (e && (e.evt.button === 2 || e.evt.buttons === 4)) {
25156
- this.isMouseMiddleButtonPressed = true;
25157
- e.cancelBubble = true;
25158
- }
25444
+ if (e && e.evt.button === 0 && activeAction === "moveTool") this.moveToolActive = true;
25445
+ if (e && (e.evt.button === 2 || e.evt.buttons === 4)) this.isMouseMiddleButtonPressed = true;
25159
25446
  });
25160
- stage.on("mouseup", (e) => {
25447
+ stage.on("pointerup", (e) => {
25161
25448
  const activeAction = this.instance.getActiveAction();
25162
- if (e && e.evt.button === 0 && activeAction === "moveTool") {
25163
- this.moveToolActive = false;
25164
- e.cancelBubble = true;
25165
- }
25166
- if (e && (e.evt.button === 1 || e.evt.buttons === 0)) {
25167
- this.isMouseMiddleButtonPressed = false;
25168
- e.cancelBubble = true;
25169
- }
25449
+ if (e && e.evt.button === 0 && activeAction === "moveTool") this.moveToolActive = false;
25450
+ if (e && (e.evt.button === 1 || e.evt.buttons === 0)) this.isMouseMiddleButtonPressed = false;
25170
25451
  });
25171
- const handleMouseMove = (e) => {
25172
- e.evt.preventDefault();
25452
+ const handleMouseMove = () => {
25173
25453
  if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
25174
25454
  this.onRender();
25175
25455
  };
25176
- stage.on("mousemove", (0, import_lodash$1.throttle)(handleMouseMove, 50));
25177
- stage.on("touchmove", (e) => {
25178
- e.evt.preventDefault();
25456
+ stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
25457
+ stage.on("pointermove", () => {
25179
25458
  if (!this.enabled) return;
25180
25459
  this.onRender();
25181
25460
  });
@@ -25430,40 +25709,33 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
25430
25709
  this.disableMove();
25431
25710
  }
25432
25711
  });
25433
- stage.on("mousedown", (e) => {
25712
+ stage.on("pointerdown", (e) => {
25434
25713
  const activeAction = this.instance.getActiveAction();
25435
25714
  let enableMove = false;
25436
- if (e && e.evt.button === 0 && activeAction === "moveTool") {
25715
+ if (e && (e.evt.pointerType !== "mouse" || e.evt.pointerType === "mouse" && e.evt.buttons === 1) && activeAction === "moveTool") {
25437
25716
  this.moveToolActive = true;
25438
25717
  enableMove = true;
25439
25718
  }
25440
- if (!enableMove && e && e.evt.button === 1) {
25719
+ if (!enableMove && e.evt.pointerType === "mouse" && e.evt.buttons === 4) {
25441
25720
  this.isMouseMiddleButtonPressed = true;
25442
25721
  enableMove = true;
25443
25722
  }
25444
- if (enableMove) {
25445
- this.enableMove();
25446
- e.cancelBubble = true;
25447
- }
25723
+ if (enableMove) this.enableMove();
25448
25724
  });
25449
- stage.on("mouseup", (e) => {
25725
+ stage.on("pointerup", (e) => {
25450
25726
  const activeAction = this.instance.getActiveAction();
25451
25727
  let disableMove = false;
25452
- if (e && e.evt.button === 0 && activeAction === "moveTool") {
25728
+ if (e && (e.evt.pointerType !== "mouse" || e.evt.pointerType === "mouse" && e.evt.buttons === 0) && activeAction === "moveTool") {
25453
25729
  this.moveToolActive = false;
25454
25730
  disableMove = true;
25455
25731
  }
25456
- if (e && (e.evt.button === 1 || e.evt.buttons === 0)) {
25732
+ if (e && e.evt.pointerType === "mouse" && e.evt.buttons === 0) {
25457
25733
  this.isMouseMiddleButtonPressed = false;
25458
25734
  disableMove = true;
25459
25735
  }
25460
- if (disableMove) {
25461
- this.disableMove();
25462
- e.cancelBubble = true;
25463
- }
25736
+ if (disableMove) this.disableMove();
25464
25737
  });
25465
- const handleMouseMove = (e) => {
25466
- e.evt.preventDefault();
25738
+ const handleMouseMove = () => {
25467
25739
  const mousePos = stage.getPointerPosition();
25468
25740
  if (previousMouseX === Infinity) previousMouseX = mousePos?.x ?? 0;
25469
25741
  if (previousMouseY === Infinity) previousMouseY = mousePos?.y ?? 0;
@@ -25476,38 +25748,22 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
25476
25748
  stage.y(stage.y() - deltaY);
25477
25749
  this.instance.emitEvent("onStageMove");
25478
25750
  };
25479
- stage.on("mousemove", (0, import_lodash$1.throttle)(handleMouseMove, 50));
25480
- stage.on("touchstart", (e) => {
25481
- e.evt.preventDefault();
25751
+ stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
25752
+ stage.on("pointerdown", () => {
25482
25753
  const mousePos = stage.getPointerPosition();
25483
25754
  previousMouseX = mousePos?.x ?? 0;
25484
25755
  previousMouseY = mousePos?.y ?? 0;
25485
25756
  });
25486
- stage.on("touchmove", (e) => {
25487
- e.evt.preventDefault();
25488
- const activeAction = this.instance.getActiveAction();
25489
- if (activeAction !== "moveTool") return;
25490
- const mousePos = stage.getPointerPosition();
25491
- if (previousMouseX === Infinity) previousMouseX = mousePos?.x ?? 0;
25492
- if (previousMouseY === Infinity) previousMouseY = mousePos?.y ?? 0;
25493
- const deltaX = previousMouseX - (mousePos?.x ?? 0);
25494
- const deltaY = previousMouseY - (mousePos?.y ?? 0);
25495
- previousMouseX = mousePos?.x ?? 0;
25496
- previousMouseY = mousePos?.y ?? 0;
25497
- if (!this.enabled) return;
25498
- stage.x(stage.x() - deltaX);
25499
- stage.y(stage.y() - deltaY);
25500
- this.instance.emitEvent("onStageMove");
25501
- });
25502
25757
  const handleWheel = (e) => {
25503
25758
  e.evt.preventDefault();
25504
25759
  const stage$1 = this.instance.getStage();
25505
- if (!this.enabled || !stage$1.isFocused() || this.isCtrlOrMetaPressed) return;
25760
+ const performPanning = !this.isCtrlOrMetaPressed && !e.evt.ctrlKey;
25761
+ if (!this.enabled || !stage$1.isFocused() || this.isCtrlOrMetaPressed || e.evt.buttons === 4 || !performPanning) return;
25506
25762
  stage$1.x(stage$1.x() - e.evt.deltaX);
25507
25763
  stage$1.y(stage$1.y() - e.evt.deltaY);
25508
25764
  this.instance.emitEvent("onStageMove");
25509
25765
  };
25510
- stage.on("wheel", (0, import_lodash$1.throttle)(handleWheel, 10));
25766
+ stage.on("wheel", handleWheel);
25511
25767
  }
25512
25768
  enable() {
25513
25769
  this.enabled = true;
@@ -25608,7 +25864,7 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
25608
25864
  newConnectedUsers[userInformation.name] = userInformation;
25609
25865
  }
25610
25866
  }
25611
- if (!(0, import_lodash$1.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
25867
+ if (!(0, import_lodash.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
25612
25868
  this.connectedUsers = newConnectedUsers;
25613
25869
  });
25614
25870
  }
@@ -25843,8 +26099,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
25843
26099
  for (let i = 0; i < inactiveUsers.length; i++) delete this.usersPointers[inactiveUsers[i]];
25844
26100
  this.renderPointers();
25845
26101
  });
25846
- stage.on("dragmove", (e) => {
25847
- e.evt.preventDefault();
26102
+ stage.on("dragmove", () => {
25848
26103
  const userInfo = this.config.getUser();
25849
26104
  const mousePos = stage.getRelativePointerPosition();
25850
26105
  if (mousePos) store.setAwarenessInfo(WEAVE_USER_POINTER_KEY, {
@@ -25853,8 +26108,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
25853
26108
  y: mousePos.y
25854
26109
  });
25855
26110
  });
25856
- stage.on("pointermove", (e) => {
25857
- e.evt.preventDefault();
26111
+ stage.on("pointermove", () => {
25858
26112
  const userInfo = this.config.getUser();
25859
26113
  const mousePos = stage.getRelativePointerPosition();
25860
26114
  if (mousePos) store.setAwarenessInfo(WEAVE_USER_POINTER_KEY, {
@@ -25968,11 +26222,9 @@ var WeaveStageDropAreaPlugin = class extends WeavePlugin {
25968
26222
  initEvents() {
25969
26223
  const stage = this.instance.getStage();
25970
26224
  stage.container().addEventListener("dragover", (e) => {
25971
- e.preventDefault();
25972
26225
  e.stopPropagation();
25973
26226
  });
25974
26227
  stage.container().addEventListener("drop", (e) => {
25975
- e.preventDefault();
25976
26228
  e.stopPropagation();
25977
26229
  this.instance.emitEvent("onStageDrop", e);
25978
26230
  });
@@ -26350,5 +26602,5 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
26350
26602
  };
26351
26603
 
26352
26604
  //#endregion
26353
- export { ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_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_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, 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, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, 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_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_TYPE, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_GRID_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAR_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTERS_DEFAULT_PROPS, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, Weave, WeaveAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSnappingPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveZoomInToolAction, WeaveZoomOutToolAction, checkIfOverContainer, clearContainerTargets, getBoundingBox, getContrastTextColor, moveNodeToContainer, resetScale, stringToColor };
26605
+ 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_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_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, 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, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, 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_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_TYPE, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_GRID_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAR_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTERS_DEFAULT_PROPS, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSnappingPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveZoomInToolAction, WeaveZoomOutToolAction, checkIfOverContainer, clearContainerTargets, getBoundingBox, getContrastTextColor, moveNodeToContainer, resetScale, stringToColor };
26354
26606
  //# sourceMappingURL=sdk.js.map