@inditextech/weave-sdk 0.14.1 → 0.14.3

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.cjs CHANGED
@@ -15790,7 +15790,7 @@ function moveNodeToContainer(instance, node) {
15790
15790
  const nodeHandler = instance.getNodeHandler(node.getAttrs().nodeType);
15791
15791
  const actualNode = nodeHandler.serialize(node);
15792
15792
  instance.removeNode(actualNode);
15793
- instance.addNode(actualNode, layerToMove?.getAttrs().id);
15793
+ instance.addNode(actualNode, layerToMove.getAttrs().id);
15794
15794
  }
15795
15795
  return layerToMove;
15796
15796
  }
@@ -16459,14 +16459,14 @@ var WeaveNode = class {
16459
16459
  clearContainerTargets(this.instance);
16460
16460
  const layerToMove = checkIfOverContainer(this.instance, e.target);
16461
16461
  if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
16462
- this.instance.updateNode(this.serialize(node));
16462
+ this.instance.updateNode(this.serialize(e.target));
16463
16463
  }
16464
16464
  });
16465
16465
  node.on("dragend", (e) => {
16466
16466
  if (this.isSelecting() && this.isNodeSelected(node)) {
16467
16467
  clearContainerTargets(this.instance);
16468
- const layerToMove = moveNodeToContainer(this.instance, e.target);
16469
- if (layerToMove) return;
16468
+ const containerToMove = moveNodeToContainer(this.instance, e.target);
16469
+ if (containerToMove) return;
16470
16470
  this.instance.updateNode(this.serialize(node));
16471
16471
  }
16472
16472
  });
@@ -17166,6 +17166,8 @@ var WeaveTargetingManager = class {
17166
17166
  };
17167
17167
  let measureContainer = mainLayer;
17168
17168
  let container = mainLayer;
17169
+ const nodesSelection = this.instance.getPlugin("nodesSelection");
17170
+ if (nodesSelection) nodesSelection.disable();
17169
17171
  const intersectedNode = stage.getIntersection(relativeMousePointer);
17170
17172
  if (intersectedNode) {
17171
17173
  const node = this.instance.getInstanceRecursive(intersectedNode, ["group"]);
@@ -17185,6 +17187,7 @@ var WeaveTargetingManager = class {
17185
17187
  x: 0,
17186
17188
  y: 0
17187
17189
  };
17190
+ if (nodesSelection) nodesSelection.enable();
17188
17191
  return {
17189
17192
  mousePoint: relativeMousePointer,
17190
17193
  container,
@@ -17913,7 +17916,7 @@ var WeaveRegisterManager = class {
17913
17916
 
17914
17917
  //#endregion
17915
17918
  //#region package.json
17916
- var version = "0.14.1";
17919
+ var version = "0.14.3";
17917
17920
 
17918
17921
  //#endregion
17919
17922
  //#region src/managers/setup.ts
@@ -19648,7 +19651,7 @@ const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
19648
19651
  },
19649
19652
  onTargetEnter: {
19650
19653
  borderColor: "#ff6863ff",
19651
- fill: "#ecececff"
19654
+ fill: "#ffffffff"
19652
19655
  }
19653
19656
  };
19654
19657
  const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
@@ -19699,21 +19702,21 @@ var WeaveFrameNode = class extends WeaveNode {
19699
19702
  id,
19700
19703
  containerId: `${id}-group-internal`,
19701
19704
  containerOffsetX: 0,
19702
- containerOffsetY: titleHeight + borderWidth,
19703
- width: props.frameWidth + borderWidth * 2,
19704
- height: props.frameHeight + titleHeight + borderWidth * 2,
19705
+ containerOffsetY: titleHeight,
19706
+ width: props.frameWidth,
19707
+ height: props.frameHeight + titleHeight,
19705
19708
  fill: "#ffffffff",
19706
19709
  clipX: 0,
19707
19710
  clipY: 0,
19708
- clipWidth: props.frameWidth + borderWidth * 2,
19709
- clipHeight: props.frameHeight + titleHeight + borderWidth * 2,
19711
+ clipWidth: props.frameWidth,
19712
+ clipHeight: props.frameHeight + titleHeight,
19710
19713
  name: "node"
19711
19714
  });
19712
19715
  const background = new konva.default.Rect({
19713
19716
  id: `${id}-bg`,
19714
19717
  nodeId: id,
19715
- x: borderWidth,
19716
- y: titleHeight + borderWidth,
19718
+ x: 0,
19719
+ y: titleHeight,
19717
19720
  width: props.frameWidth,
19718
19721
  stroke: borderColor,
19719
19722
  strokeWidth: borderWidth,
@@ -19744,18 +19747,18 @@ var WeaveFrameNode = class extends WeaveNode {
19744
19747
  const frameInternal = new konva.default.Group({
19745
19748
  id: `${id}-group-internal`,
19746
19749
  nodeId: id,
19747
- x: borderWidth * 2,
19748
- y: titleHeight + borderWidth * 2,
19750
+ x: 0,
19751
+ y: titleHeight,
19749
19752
  width: props.frameWidth,
19750
19753
  height: props.frameHeight,
19751
19754
  draggable: false,
19752
19755
  stroke: "transparent",
19753
19756
  strokeScaleEnabled: false,
19754
- borderWidth,
19757
+ borderWidth: 0,
19755
19758
  clipX: 0,
19756
19759
  clipY: 0,
19757
- clipWidth: props.frameWidth - borderWidth * 2,
19758
- clipHeight: props.frameHeight - borderWidth * 2
19760
+ clipWidth: props.frameWidth,
19761
+ clipHeight: props.frameHeight
19759
19762
  });
19760
19763
  frame.add(frameInternal);
19761
19764
  this.setupDefaultNodeEvents(frame);
@@ -21386,6 +21389,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
21386
21389
  this.isMouseMiddleButtonPressed = false;
21387
21390
  this.isCtrlOrMetaPressed = false;
21388
21391
  this.isSpaceKeyPressed = false;
21392
+ this.overStage = false;
21389
21393
  this.previousPointer = null;
21390
21394
  }
21391
21395
  getName() {
@@ -21426,6 +21430,12 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
21426
21430
  this.disableMove();
21427
21431
  }
21428
21432
  });
21433
+ stage.on("mouseenter", () => {
21434
+ this.overStage = true;
21435
+ });
21436
+ stage.on("mouseleave", () => {
21437
+ this.overStage = false;
21438
+ });
21429
21439
  stage.on("mousedown", (e) => {
21430
21440
  const activeAction = this.instance.getActiveAction();
21431
21441
  let enableMove = false;
@@ -21495,7 +21505,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
21495
21505
  this.instance.emit("onStageMove", void 0);
21496
21506
  });
21497
21507
  window.addEventListener("wheel", (e) => {
21498
- if (!this.enabled || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
21508
+ if (!this.enabled || !this.overStage || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
21499
21509
  stage.x(stage.x() - e.deltaX);
21500
21510
  stage.y(stage.y() - e.deltaY);
21501
21511
  this.instance.emit("stageMove", void 0);
@@ -21901,24 +21911,60 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
21901
21911
  setEnabled(enabled) {
21902
21912
  this.enabled = enabled;
21903
21913
  }
21914
+ getSelectedNodesMetadata(transformer) {
21915
+ const firstNode = transformer.getNodes()[0];
21916
+ const firstNodeClientRect = firstNode.getClientRect();
21917
+ const rectCoordsMin = {
21918
+ x: firstNodeClientRect.x,
21919
+ y: firstNodeClientRect.y
21920
+ };
21921
+ const rectCoordsMax = {
21922
+ x: firstNodeClientRect.x + firstNodeClientRect.width,
21923
+ y: firstNodeClientRect.y + firstNodeClientRect.height
21924
+ };
21925
+ const nodes = [];
21926
+ for (const node of transformer.getNodes()) {
21927
+ const clientRect = node.getClientRect();
21928
+ if (clientRect.x < rectCoordsMin.x) rectCoordsMin.x = clientRect.x;
21929
+ if (clientRect.y < rectCoordsMin.y) rectCoordsMin.y = clientRect.y;
21930
+ if (clientRect.x + clientRect.width > rectCoordsMax.x) rectCoordsMax.x = clientRect.x + clientRect.width;
21931
+ if (clientRect.y + clientRect.height > rectCoordsMax.y) rectCoordsMax.y = clientRect.y + clientRect.height;
21932
+ nodes.push(node.getAttrs().id);
21933
+ }
21934
+ return {
21935
+ width: rectCoordsMax.x - rectCoordsMin.x,
21936
+ height: rectCoordsMax.y - rectCoordsMin.y,
21937
+ nodes
21938
+ };
21939
+ }
21904
21940
  evaluateGuidelines(e) {
21905
21941
  const utilityLayer = this.instance.getUtilityLayer();
21906
21942
  if (!this.enabled) return;
21907
21943
  if (!utilityLayer) return;
21944
+ const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
21945
+ let skipNodes = [];
21908
21946
  let node = void 0;
21909
- if (e.type === "dragmove" && e.target instanceof konva.default.Transformer) {
21947
+ if (e.type === "dragmove" && nodesSelectionPlugin && e.target instanceof konva.default.Transformer && e.target.getNodes().length === 1) {
21910
21948
  const actualTarget = e.target;
21911
21949
  node = actualTarget.getNodes()[0];
21950
+ skipNodes.push(node.getAttrs().id ?? "");
21951
+ }
21952
+ if (e.type === "dragmove" && nodesSelectionPlugin && e.target instanceof konva.default.Transformer && e.target.getNodes().length > 1) {
21953
+ const { nodes } = this.getSelectedNodesMetadata(e.target);
21954
+ node = e.target;
21955
+ skipNodes = [...nodes];
21912
21956
  }
21913
21957
  if (e.type === "transform") node = e.target;
21914
21958
  if (typeof node === "undefined") return;
21915
- const lineGuideStops = this.getLineGuideStops(node);
21959
+ const lineGuideStops = this.getLineGuideStops(skipNodes);
21916
21960
  const itemBounds = this.getObjectSnappingEdges(node);
21917
21961
  const guides = this.getGuides(lineGuideStops, itemBounds, e.type);
21962
+ utilityLayer.destroyChildren();
21918
21963
  if (!guides.length) return;
21919
21964
  utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
21920
21965
  this.drawGuides(guides);
21921
21966
  if (e.type === "dragmove") {
21967
+ const orgAbsPos = node.absolutePosition();
21922
21968
  const absPos = node.absolutePosition();
21923
21969
  guides.forEach((lg) => {
21924
21970
  switch (lg.orientation) {
@@ -21932,12 +21978,24 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
21932
21978
  }
21933
21979
  }
21934
21980
  });
21935
- node.absolutePosition(absPos);
21981
+ const vecDiff = {
21982
+ x: orgAbsPos.x - absPos.x,
21983
+ y: orgAbsPos.y - absPos.y
21984
+ };
21985
+ if (node instanceof konva.default.Transformer) node.getNodes().forEach((n) => {
21986
+ const nodeAbsPos = n.getAbsolutePosition();
21987
+ const newPos = {
21988
+ x: nodeAbsPos.x - vecDiff.x,
21989
+ y: nodeAbsPos.y - vecDiff.y
21990
+ };
21991
+ n.setAbsolutePosition(newPos);
21992
+ });
21993
+ else node.absolutePosition(absPos);
21936
21994
  }
21937
21995
  if (e.type === "transform") {
21938
- const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
21939
- if (nodesSelectionPlugin) {
21940
- const transformer = nodesSelectionPlugin.getTransformer();
21996
+ const nodesSelectionPlugin$1 = this.instance.getPlugin("nodesSelection");
21997
+ if (nodesSelectionPlugin$1) {
21998
+ const transformer = nodesSelectionPlugin$1.getTransformer();
21941
21999
  transformer.anchorDragBoundFunc((_, newAbsPos) => {
21942
22000
  const finalPos = { ...newAbsPos };
21943
22001
  for (const lg of guides) switch (lg.orientation) {
@@ -21961,7 +22019,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
21961
22019
  const utilityLayer = this.instance.getUtilityLayer();
21962
22020
  if (!this.enabled) return;
21963
22021
  if (!utilityLayer) return;
21964
- utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
22022
+ utilityLayer.destroyChildren();
21965
22023
  }
21966
22024
  initEvents() {
21967
22025
  const stage = this.instance.getStage();
@@ -21971,7 +22029,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
21971
22029
  stage.on("dragend", this.cleanupEvaluateGuidelines.bind(this));
21972
22030
  }
21973
22031
  }
21974
- getLineGuideStops(skipShape) {
22032
+ getLineGuideStops(skipNodes) {
21975
22033
  const stage = this.instance.getStage();
21976
22034
  const nodesSelection = this.instance.getPlugin("nodesSelection");
21977
22035
  if (nodesSelection) nodesSelection.getTransformer().hide();
@@ -21986,7 +22044,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
21986
22044
  stage.height()
21987
22045
  ];
21988
22046
  stage.find(".node").forEach((guideItem) => {
21989
- if (guideItem === skipShape) return;
22047
+ if (skipNodes.includes(guideItem.getAttrs().id ?? "")) return;
21990
22048
  const box = guideItem.getClientRect({ skipStroke: true });
21991
22049
  vertical.push([
21992
22050
  box.x,
@@ -22006,7 +22064,13 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
22006
22064
  };
22007
22065
  }
22008
22066
  getObjectSnappingEdges(node) {
22009
- const box = node.getClientRect({ skipStroke: true });
22067
+ let box = node.getClientRect({ skipStroke: true });
22068
+ if (node instanceof konva.default.Transformer) {
22069
+ const transformerRect = node.getChildren((node$1) => {
22070
+ return node$1.getAttrs().name === "back";
22071
+ })[0];
22072
+ box = transformerRect.getClientRect({ skipStroke: true });
22073
+ }
22010
22074
  const absPos = node.absolutePosition();
22011
22075
  const snappingEdges = {
22012
22076
  vertical: [
package/dist/sdk.d.cts CHANGED
@@ -1177,6 +1177,7 @@ declare class WeaveStagePanningPlugin extends WeavePlugin {
1177
1177
  private isMouseMiddleButtonPressed;
1178
1178
  private isCtrlOrMetaPressed;
1179
1179
  private isSpaceKeyPressed;
1180
+ private overStage;
1180
1181
  protected previousPointer: string | null;
1181
1182
  getLayerName: undefined;
1182
1183
  initLayer: undefined;
@@ -1510,10 +1511,15 @@ declare class WeaveNodesSnappingPlugin extends WeavePlugin {
1510
1511
  getName(): string;
1511
1512
  onInit(): void;
1512
1513
  setEnabled(enabled: boolean): void;
1514
+ getSelectedNodesMetadata(transformer: Konva.Transformer): {
1515
+ width: number;
1516
+ height: number;
1517
+ nodes: string[];
1518
+ };
1513
1519
  evaluateGuidelines(e: KonvaEventObject<any>): void;
1514
1520
  cleanupEvaluateGuidelines(): void;
1515
1521
  private initEvents;
1516
- getLineGuideStops(skipShape: Konva.Node): LineGuideStop;
1522
+ getLineGuideStops(skipNodes: string[]): LineGuideStop;
1517
1523
  getObjectSnappingEdges(node: Konva.Node): NodeSnappingEdges;
1518
1524
  getGuides(lineGuideStops: LineGuideStop, itemBounds: NodeSnappingEdges, type: string): Guide[];
1519
1525
  drawGuides(guides: Guide[]): void;
package/dist/sdk.d.ts CHANGED
@@ -1177,6 +1177,7 @@ declare class WeaveStagePanningPlugin extends WeavePlugin {
1177
1177
  private isMouseMiddleButtonPressed;
1178
1178
  private isCtrlOrMetaPressed;
1179
1179
  private isSpaceKeyPressed;
1180
+ private overStage;
1180
1181
  protected previousPointer: string | null;
1181
1182
  getLayerName: undefined;
1182
1183
  initLayer: undefined;
@@ -1510,10 +1511,15 @@ declare class WeaveNodesSnappingPlugin extends WeavePlugin {
1510
1511
  getName(): string;
1511
1512
  onInit(): void;
1512
1513
  setEnabled(enabled: boolean): void;
1514
+ getSelectedNodesMetadata(transformer: Konva.Transformer): {
1515
+ width: number;
1516
+ height: number;
1517
+ nodes: string[];
1518
+ };
1513
1519
  evaluateGuidelines(e: KonvaEventObject<any>): void;
1514
1520
  cleanupEvaluateGuidelines(): void;
1515
1521
  private initEvents;
1516
- getLineGuideStops(skipShape: Konva.Node): LineGuideStop;
1522
+ getLineGuideStops(skipNodes: string[]): LineGuideStop;
1517
1523
  getObjectSnappingEdges(node: Konva.Node): NodeSnappingEdges;
1518
1524
  getGuides(lineGuideStops: LineGuideStop, itemBounds: NodeSnappingEdges, type: string): Guide[];
1519
1525
  drawGuides(guides: Guide[]): void;
package/dist/sdk.js CHANGED
@@ -15790,7 +15790,7 @@ function moveNodeToContainer(instance, node) {
15790
15790
  const nodeHandler = instance.getNodeHandler(node.getAttrs().nodeType);
15791
15791
  const actualNode = nodeHandler.serialize(node);
15792
15792
  instance.removeNode(actualNode);
15793
- instance.addNode(actualNode, layerToMove?.getAttrs().id);
15793
+ instance.addNode(actualNode, layerToMove.getAttrs().id);
15794
15794
  }
15795
15795
  return layerToMove;
15796
15796
  }
@@ -16459,14 +16459,14 @@ var WeaveNode = class {
16459
16459
  clearContainerTargets(this.instance);
16460
16460
  const layerToMove = checkIfOverContainer(this.instance, e.target);
16461
16461
  if (layerToMove) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
16462
- this.instance.updateNode(this.serialize(node));
16462
+ this.instance.updateNode(this.serialize(e.target));
16463
16463
  }
16464
16464
  });
16465
16465
  node.on("dragend", (e) => {
16466
16466
  if (this.isSelecting() && this.isNodeSelected(node)) {
16467
16467
  clearContainerTargets(this.instance);
16468
- const layerToMove = moveNodeToContainer(this.instance, e.target);
16469
- if (layerToMove) return;
16468
+ const containerToMove = moveNodeToContainer(this.instance, e.target);
16469
+ if (containerToMove) return;
16470
16470
  this.instance.updateNode(this.serialize(node));
16471
16471
  }
16472
16472
  });
@@ -17166,6 +17166,8 @@ var WeaveTargetingManager = class {
17166
17166
  };
17167
17167
  let measureContainer = mainLayer;
17168
17168
  let container = mainLayer;
17169
+ const nodesSelection = this.instance.getPlugin("nodesSelection");
17170
+ if (nodesSelection) nodesSelection.disable();
17169
17171
  const intersectedNode = stage.getIntersection(relativeMousePointer);
17170
17172
  if (intersectedNode) {
17171
17173
  const node = this.instance.getInstanceRecursive(intersectedNode, ["group"]);
@@ -17185,6 +17187,7 @@ var WeaveTargetingManager = class {
17185
17187
  x: 0,
17186
17188
  y: 0
17187
17189
  };
17190
+ if (nodesSelection) nodesSelection.enable();
17188
17191
  return {
17189
17192
  mousePoint: relativeMousePointer,
17190
17193
  container,
@@ -17913,7 +17916,7 @@ var WeaveRegisterManager = class {
17913
17916
 
17914
17917
  //#endregion
17915
17918
  //#region package.json
17916
- var version = "0.14.1";
17919
+ var version = "0.14.3";
17917
17920
 
17918
17921
  //#endregion
17919
17922
  //#region src/managers/setup.ts
@@ -19648,7 +19651,7 @@ const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
19648
19651
  },
19649
19652
  onTargetEnter: {
19650
19653
  borderColor: "#ff6863ff",
19651
- fill: "#ecececff"
19654
+ fill: "#ffffffff"
19652
19655
  }
19653
19656
  };
19654
19657
  const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
@@ -19699,21 +19702,21 @@ var WeaveFrameNode = class extends WeaveNode {
19699
19702
  id,
19700
19703
  containerId: `${id}-group-internal`,
19701
19704
  containerOffsetX: 0,
19702
- containerOffsetY: titleHeight + borderWidth,
19703
- width: props.frameWidth + borderWidth * 2,
19704
- height: props.frameHeight + titleHeight + borderWidth * 2,
19705
+ containerOffsetY: titleHeight,
19706
+ width: props.frameWidth,
19707
+ height: props.frameHeight + titleHeight,
19705
19708
  fill: "#ffffffff",
19706
19709
  clipX: 0,
19707
19710
  clipY: 0,
19708
- clipWidth: props.frameWidth + borderWidth * 2,
19709
- clipHeight: props.frameHeight + titleHeight + borderWidth * 2,
19711
+ clipWidth: props.frameWidth,
19712
+ clipHeight: props.frameHeight + titleHeight,
19710
19713
  name: "node"
19711
19714
  });
19712
19715
  const background = new Konva.Rect({
19713
19716
  id: `${id}-bg`,
19714
19717
  nodeId: id,
19715
- x: borderWidth,
19716
- y: titleHeight + borderWidth,
19718
+ x: 0,
19719
+ y: titleHeight,
19717
19720
  width: props.frameWidth,
19718
19721
  stroke: borderColor,
19719
19722
  strokeWidth: borderWidth,
@@ -19744,18 +19747,18 @@ var WeaveFrameNode = class extends WeaveNode {
19744
19747
  const frameInternal = new Konva.Group({
19745
19748
  id: `${id}-group-internal`,
19746
19749
  nodeId: id,
19747
- x: borderWidth * 2,
19748
- y: titleHeight + borderWidth * 2,
19750
+ x: 0,
19751
+ y: titleHeight,
19749
19752
  width: props.frameWidth,
19750
19753
  height: props.frameHeight,
19751
19754
  draggable: false,
19752
19755
  stroke: "transparent",
19753
19756
  strokeScaleEnabled: false,
19754
- borderWidth,
19757
+ borderWidth: 0,
19755
19758
  clipX: 0,
19756
19759
  clipY: 0,
19757
- clipWidth: props.frameWidth - borderWidth * 2,
19758
- clipHeight: props.frameHeight - borderWidth * 2
19760
+ clipWidth: props.frameWidth,
19761
+ clipHeight: props.frameHeight
19759
19762
  });
19760
19763
  frame.add(frameInternal);
19761
19764
  this.setupDefaultNodeEvents(frame);
@@ -21386,6 +21389,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
21386
21389
  this.isMouseMiddleButtonPressed = false;
21387
21390
  this.isCtrlOrMetaPressed = false;
21388
21391
  this.isSpaceKeyPressed = false;
21392
+ this.overStage = false;
21389
21393
  this.previousPointer = null;
21390
21394
  }
21391
21395
  getName() {
@@ -21426,6 +21430,12 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
21426
21430
  this.disableMove();
21427
21431
  }
21428
21432
  });
21433
+ stage.on("mouseenter", () => {
21434
+ this.overStage = true;
21435
+ });
21436
+ stage.on("mouseleave", () => {
21437
+ this.overStage = false;
21438
+ });
21429
21439
  stage.on("mousedown", (e) => {
21430
21440
  const activeAction = this.instance.getActiveAction();
21431
21441
  let enableMove = false;
@@ -21495,7 +21505,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
21495
21505
  this.instance.emit("onStageMove", void 0);
21496
21506
  });
21497
21507
  window.addEventListener("wheel", (e) => {
21498
- if (!this.enabled || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
21508
+ if (!this.enabled || !this.overStage || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
21499
21509
  stage.x(stage.x() - e.deltaX);
21500
21510
  stage.y(stage.y() - e.deltaY);
21501
21511
  this.instance.emit("stageMove", void 0);
@@ -21901,24 +21911,60 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
21901
21911
  setEnabled(enabled) {
21902
21912
  this.enabled = enabled;
21903
21913
  }
21914
+ getSelectedNodesMetadata(transformer) {
21915
+ const firstNode = transformer.getNodes()[0];
21916
+ const firstNodeClientRect = firstNode.getClientRect();
21917
+ const rectCoordsMin = {
21918
+ x: firstNodeClientRect.x,
21919
+ y: firstNodeClientRect.y
21920
+ };
21921
+ const rectCoordsMax = {
21922
+ x: firstNodeClientRect.x + firstNodeClientRect.width,
21923
+ y: firstNodeClientRect.y + firstNodeClientRect.height
21924
+ };
21925
+ const nodes = [];
21926
+ for (const node of transformer.getNodes()) {
21927
+ const clientRect = node.getClientRect();
21928
+ if (clientRect.x < rectCoordsMin.x) rectCoordsMin.x = clientRect.x;
21929
+ if (clientRect.y < rectCoordsMin.y) rectCoordsMin.y = clientRect.y;
21930
+ if (clientRect.x + clientRect.width > rectCoordsMax.x) rectCoordsMax.x = clientRect.x + clientRect.width;
21931
+ if (clientRect.y + clientRect.height > rectCoordsMax.y) rectCoordsMax.y = clientRect.y + clientRect.height;
21932
+ nodes.push(node.getAttrs().id);
21933
+ }
21934
+ return {
21935
+ width: rectCoordsMax.x - rectCoordsMin.x,
21936
+ height: rectCoordsMax.y - rectCoordsMin.y,
21937
+ nodes
21938
+ };
21939
+ }
21904
21940
  evaluateGuidelines(e) {
21905
21941
  const utilityLayer = this.instance.getUtilityLayer();
21906
21942
  if (!this.enabled) return;
21907
21943
  if (!utilityLayer) return;
21944
+ const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
21945
+ let skipNodes = [];
21908
21946
  let node = void 0;
21909
- if (e.type === "dragmove" && e.target instanceof Konva.Transformer) {
21947
+ if (e.type === "dragmove" && nodesSelectionPlugin && e.target instanceof Konva.Transformer && e.target.getNodes().length === 1) {
21910
21948
  const actualTarget = e.target;
21911
21949
  node = actualTarget.getNodes()[0];
21950
+ skipNodes.push(node.getAttrs().id ?? "");
21951
+ }
21952
+ if (e.type === "dragmove" && nodesSelectionPlugin && e.target instanceof Konva.Transformer && e.target.getNodes().length > 1) {
21953
+ const { nodes } = this.getSelectedNodesMetadata(e.target);
21954
+ node = e.target;
21955
+ skipNodes = [...nodes];
21912
21956
  }
21913
21957
  if (e.type === "transform") node = e.target;
21914
21958
  if (typeof node === "undefined") return;
21915
- const lineGuideStops = this.getLineGuideStops(node);
21959
+ const lineGuideStops = this.getLineGuideStops(skipNodes);
21916
21960
  const itemBounds = this.getObjectSnappingEdges(node);
21917
21961
  const guides = this.getGuides(lineGuideStops, itemBounds, e.type);
21962
+ utilityLayer.destroyChildren();
21918
21963
  if (!guides.length) return;
21919
21964
  utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
21920
21965
  this.drawGuides(guides);
21921
21966
  if (e.type === "dragmove") {
21967
+ const orgAbsPos = node.absolutePosition();
21922
21968
  const absPos = node.absolutePosition();
21923
21969
  guides.forEach((lg) => {
21924
21970
  switch (lg.orientation) {
@@ -21932,12 +21978,24 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
21932
21978
  }
21933
21979
  }
21934
21980
  });
21935
- node.absolutePosition(absPos);
21981
+ const vecDiff = {
21982
+ x: orgAbsPos.x - absPos.x,
21983
+ y: orgAbsPos.y - absPos.y
21984
+ };
21985
+ if (node instanceof Konva.Transformer) node.getNodes().forEach((n) => {
21986
+ const nodeAbsPos = n.getAbsolutePosition();
21987
+ const newPos = {
21988
+ x: nodeAbsPos.x - vecDiff.x,
21989
+ y: nodeAbsPos.y - vecDiff.y
21990
+ };
21991
+ n.setAbsolutePosition(newPos);
21992
+ });
21993
+ else node.absolutePosition(absPos);
21936
21994
  }
21937
21995
  if (e.type === "transform") {
21938
- const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
21939
- if (nodesSelectionPlugin) {
21940
- const transformer = nodesSelectionPlugin.getTransformer();
21996
+ const nodesSelectionPlugin$1 = this.instance.getPlugin("nodesSelection");
21997
+ if (nodesSelectionPlugin$1) {
21998
+ const transformer = nodesSelectionPlugin$1.getTransformer();
21941
21999
  transformer.anchorDragBoundFunc((_, newAbsPos) => {
21942
22000
  const finalPos = { ...newAbsPos };
21943
22001
  for (const lg of guides) switch (lg.orientation) {
@@ -21961,7 +22019,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
21961
22019
  const utilityLayer = this.instance.getUtilityLayer();
21962
22020
  if (!this.enabled) return;
21963
22021
  if (!utilityLayer) return;
21964
- utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
22022
+ utilityLayer.destroyChildren();
21965
22023
  }
21966
22024
  initEvents() {
21967
22025
  const stage = this.instance.getStage();
@@ -21971,7 +22029,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
21971
22029
  stage.on("dragend", this.cleanupEvaluateGuidelines.bind(this));
21972
22030
  }
21973
22031
  }
21974
- getLineGuideStops(skipShape) {
22032
+ getLineGuideStops(skipNodes) {
21975
22033
  const stage = this.instance.getStage();
21976
22034
  const nodesSelection = this.instance.getPlugin("nodesSelection");
21977
22035
  if (nodesSelection) nodesSelection.getTransformer().hide();
@@ -21986,7 +22044,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
21986
22044
  stage.height()
21987
22045
  ];
21988
22046
  stage.find(".node").forEach((guideItem) => {
21989
- if (guideItem === skipShape) return;
22047
+ if (skipNodes.includes(guideItem.getAttrs().id ?? "")) return;
21990
22048
  const box = guideItem.getClientRect({ skipStroke: true });
21991
22049
  vertical.push([
21992
22050
  box.x,
@@ -22006,7 +22064,13 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
22006
22064
  };
22007
22065
  }
22008
22066
  getObjectSnappingEdges(node) {
22009
- const box = node.getClientRect({ skipStroke: true });
22067
+ let box = node.getClientRect({ skipStroke: true });
22068
+ if (node instanceof Konva.Transformer) {
22069
+ const transformerRect = node.getChildren((node$1) => {
22070
+ return node$1.getAttrs().name === "back";
22071
+ })[0];
22072
+ box = transformerRect.getClientRect({ skipStroke: true });
22073
+ }
22010
22074
  const absPos = node.absolutePosition();
22011
22075
  const snappingEdges = {
22012
22076
  vertical: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inditextech/weave-sdk",
3
- "version": "0.14.1",
3
+ "version": "0.14.3",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Jesus Manuel Piñeiro Cid <jesusmpc@inditex.com>",
@@ -43,7 +43,7 @@
43
43
  "version:release": "npm version $RELEASE_VERSION -m \"[npm-scripts] prepare release $RELEASE_VERSION\" --tag-version-prefix \"\""
44
44
  },
45
45
  "dependencies": {
46
- "@inditextech/weave-types": "0.14.1",
46
+ "@inditextech/weave-types": "0.14.3",
47
47
  "@syncedstore/core": "0.6.0",
48
48
  "canvas": "3.1.0",
49
49
  "konva": "9.3.20",