@inditextech/weave-sdk 0.11.0 → 0.12.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.
Files changed (5) hide show
  1. package/dist/sdk.cjs +165 -86
  2. package/dist/sdk.d.cts +6 -2
  3. package/dist/sdk.d.ts +6 -2
  4. package/dist/sdk.js +165 -86
  5. package/package.json +2 -2
package/dist/sdk.cjs CHANGED
@@ -15571,6 +15571,15 @@ var WeaveStore = class {
15571
15571
  const newState = JSON.parse(JSON.stringify(this.getState()));
15572
15572
  config.callbacks?.onStateChange?.(newState);
15573
15573
  this.instance.emitEvent("onStateChange", newState);
15574
+ const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
15575
+ if (this.isRoomLoaded && nodesSelectionPlugin && nodesSelectionPlugin.getSelectedNodes().length === 1) {
15576
+ const selectedNode = nodesSelectionPlugin.getSelectedNodes()[0];
15577
+ const nodeInfo = this.instance.getNode(selectedNode.getAttrs().id ?? "");
15578
+ if (nodeInfo && nodeInfo.node) this.instance.emitEvent("onNodeChange", {
15579
+ instance: selectedNode,
15580
+ node: JSON.parse(JSON.stringify(nodeInfo.node))
15581
+ });
15582
+ }
15574
15583
  if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
15575
15584
  this.instance.setupRenderer();
15576
15585
  this.isRoomLoaded = true;
@@ -15920,7 +15929,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
15920
15929
  this.selecting = false;
15921
15930
  const stage = this.instance.getStage();
15922
15931
  stage.container().addEventListener("keydown", (e) => {
15923
- if (e.key === "Backspace" || e.key === "Delete") {
15932
+ if ((e.key === "Backspace" || e.key === "Delete") && Object.keys(window.weaveTextEditing).length === 0) {
15924
15933
  this.removeSelectedNodes();
15925
15934
  return;
15926
15935
  }
@@ -15942,6 +15951,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
15942
15951
  this.selectionRectangle.width(0);
15943
15952
  this.selectionRectangle.height(0);
15944
15953
  this.selecting = true;
15954
+ this.instance.emitEvent("onSelectionState", true);
15945
15955
  if (!(e.target instanceof konva.default.Stage)) this.cameFromSelectingMultiple = true;
15946
15956
  });
15947
15957
  stage.on("mousemove touchmove", (e) => {
@@ -15967,6 +15977,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
15967
15977
  if (!this.initialized) return;
15968
15978
  if (!this.active) return;
15969
15979
  this.selecting = false;
15980
+ this.instance.emitEvent("onSelectionState", false);
15970
15981
  if (!this.selectionRectangle.visible()) {
15971
15982
  this.cameFromSelectingMultiple = false;
15972
15983
  return;
@@ -17750,7 +17761,7 @@ var WeaveStateManager = class {
17750
17761
  getElementsTree() {
17751
17762
  const state = this.instance.getStore().getState().weave;
17752
17763
  const jsonState = JSON.parse(JSON.stringify(state, null, 2));
17753
- const mainLayer = jsonState.props.children.find((node) => node.key === "mainLayer");
17764
+ const mainLayer = jsonState.props?.children.find((node) => node.key === "mainLayer");
17754
17765
  if (!mainLayer) return [];
17755
17766
  return mainLayer.props.children;
17756
17767
  }
@@ -17844,7 +17855,7 @@ var WeaveRegisterManager = class {
17844
17855
 
17845
17856
  //#endregion
17846
17857
  //#region package.json
17847
- var version = "0.11.0";
17858
+ var version = "0.12.0";
17848
17859
 
17849
17860
  //#endregion
17850
17861
  //#region src/managers/setup.ts
@@ -18230,6 +18241,8 @@ var Weave = class extends Emittery {
18230
18241
  this.actionsManager = new WeaveActionsManager(this);
18231
18242
  this.pluginsManager = new WeavePluginsManager(this);
18232
18243
  if (!window.weave) window.weave = this;
18244
+ window.weaveTextEditing = {};
18245
+ window.weaveDragImageURL = void 0;
18233
18246
  this.setupManager.welcomeLog();
18234
18247
  }
18235
18248
  setupRenderer() {
@@ -18653,8 +18666,19 @@ var WeaveTextNode = class extends WeaveNode {
18653
18666
  name: "node"
18654
18667
  });
18655
18668
  this.setupDefaultNodeEvents(text);
18656
- text.on("dblclick dbltap", (evt) => {
18657
- evt.cancelBubble = true;
18669
+ window.addEventListener("keypress", (e) => {
18670
+ if (this.editing) return;
18671
+ if (e.key !== "Enter" && !e.shiftKey) return;
18672
+ if (this.isSelecting() && this.isNodeSelected(text)) {
18673
+ const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
18674
+ if (nodesSelectionPlugin && nodesSelectionPlugin.getSelectedNodes().length === 1 && nodesSelectionPlugin.getSelectedNodes()[0].getAttrs().nodeType === WEAVE_TEXT_NODE_TYPE && !window.weaveTextEditing[nodesSelectionPlugin.getSelectedNodes()[0].id()]) {
18675
+ e.preventDefault();
18676
+ this.triggerEditMode(nodesSelectionPlugin.getSelectedNodes()[0]);
18677
+ }
18678
+ }
18679
+ });
18680
+ text.on("dblclick dbltap", (e) => {
18681
+ e.cancelBubble = true;
18658
18682
  if (this.editing) return;
18659
18683
  if (!(this.isSelecting() && this.isNodeSelected(text))) return;
18660
18684
  const stage = this.instance.getStage();
@@ -18699,24 +18723,50 @@ var WeaveTextNode = class extends WeaveNode {
18699
18723
  }
18700
18724
  };
18701
18725
  }
18726
+ resizeTextAreaDOM(textNode) {
18727
+ const textArea = document.getElementById(textNode.id());
18728
+ if (!textArea) return;
18729
+ const stage = this.instance.getStage();
18730
+ const textPosition = textNode.absolutePosition();
18731
+ const position = {
18732
+ x: stage.container().offsetLeft + textPosition.x,
18733
+ y: stage.container().offsetTop + textPosition.y
18734
+ };
18735
+ textArea.style.top = position.y + "px";
18736
+ textArea.style.left = position.x + "px";
18737
+ textArea.style.width = textNode.getWidth() * textNode.getAbsoluteScale().x + "px";
18738
+ textArea.style.height = textNode.getHeight() * textNode.getAbsoluteScale().x + "px";
18739
+ textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
18740
+ }
18741
+ onZoomChangeHandler = (textNode) => () => {
18742
+ if (!this.editing) return;
18743
+ this.resizeTextAreaDOM(textNode);
18744
+ };
18745
+ onStageMoveHandler = (textNode) => () => {
18746
+ if (!this.editing) return;
18747
+ this.resizeTextAreaDOM(textNode);
18748
+ };
18702
18749
  createTextAreaDOM(textNode, position) {
18703
18750
  const stage = this.instance.getStage();
18704
18751
  const textArea = document.createElement("textarea");
18752
+ textArea.id = textNode.id();
18705
18753
  stage.container().appendChild(textArea);
18706
- window.weaveTextEditing = true;
18754
+ this.instance.addEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
18755
+ this.instance.addEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
18756
+ window.weaveTextEditing[textNode.id()] = "editing";
18707
18757
  textArea.value = textNode.text();
18708
18758
  textArea.id = textNode.id();
18709
18759
  textArea.style.position = "fixed";
18710
18760
  textArea.style.top = position.y + "px";
18711
18761
  textArea.style.left = position.x + "px";
18712
18762
  textArea.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
18713
- textArea.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
18763
+ textArea.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
18714
18764
  textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
18715
- textArea.style.border = "solid 1px rgba(0,0,255,0.5)";
18716
- textArea.style.padding = "0px";
18765
+ textArea.style.border = "solid 1px #1e40af";
18766
+ textArea.style.minHeight = "auto";
18717
18767
  textArea.style.margin = "0px";
18718
18768
  textArea.style.overflow = "hidden";
18719
- textArea.style.background = "rgba(255,255,255,0.5)";
18769
+ textArea.style.background = "transparent";
18720
18770
  textArea.style.outline = "none";
18721
18771
  textArea.style.resize = "none";
18722
18772
  textArea.style.lineHeight = `${textNode.lineHeight()}`;
@@ -18724,29 +18774,42 @@ var WeaveTextNode = class extends WeaveNode {
18724
18774
  textArea.style.transformOrigin = "left top";
18725
18775
  textArea.style.textAlign = textNode.align();
18726
18776
  textArea.style.color = `${textNode.fill()}`;
18777
+ textArea.onfocus = () => {
18778
+ textArea.style.height = "auto";
18779
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18780
+ textArea.setSelectionRange(textArea.value.length, textArea.value.length);
18781
+ };
18782
+ textArea.onkeydown = () => {
18783
+ textArea.style.height = "auto";
18784
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18785
+ };
18786
+ textArea.onkeyup = () => {
18787
+ textArea.style.height = "auto";
18788
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18789
+ };
18790
+ textArea.onwheel = (e) => {
18791
+ e.preventDefault();
18792
+ };
18793
+ textArea.oninput = () => {
18794
+ textArea.style.height = "auto";
18795
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18796
+ };
18727
18797
  const rotation = textNode.rotation();
18728
18798
  let transform = "";
18729
18799
  if (rotation) transform += "rotateZ(" + rotation + "deg)";
18730
- const px = 1;
18731
- const py = 2;
18732
- transform += "translateX(-" + px + "px)";
18733
- transform += "translateY(-" + py + "px)";
18800
+ const px = 0;
18801
+ const py = -3 * textNode.getAbsoluteScale().x;
18802
+ transform += "translateX(" + px + "px)";
18803
+ transform += "translateY(" + py + "px)";
18734
18804
  textArea.style.transform = transform;
18735
18805
  const handleKeyDown = (e) => {
18736
18806
  if (textArea && textNode) {
18737
- if (e.key === "Enter" && !e.shiftKey) {
18738
- textNode.text(textArea.value);
18739
- this.updateNode(textNode);
18740
- this.removeTextAreaDOM(textNode);
18741
- window.removeEventListener("click", handleOutsideClick);
18742
- return;
18743
- }
18744
- if (e.key === "Enter" && e.shiftKey) {
18807
+ if (e.key === "Enter") {
18745
18808
  if (textArea && textNode) try {
18746
18809
  textNode.text(textArea.value);
18747
18810
  textArea.style.width = textNode.width() * textNode.getAbsoluteScale().x + "px";
18748
18811
  textArea.style.height = "auto";
18749
- textArea.style.height = textArea.scrollHeight + textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
18812
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18750
18813
  textArea.tabIndex = 1;
18751
18814
  textArea.focus();
18752
18815
  } catch (ex) {
@@ -18755,20 +18818,24 @@ var WeaveTextNode = class extends WeaveNode {
18755
18818
  return;
18756
18819
  }
18757
18820
  if (e.key === "Escape") {
18821
+ textNode.width(parseFloat(textArea.style.width) * (1 / textNode.getAbsoluteScale().x));
18822
+ textNode.height((textArea.scrollHeight + 1.6) * (1 / textNode.getAbsoluteScale().x));
18823
+ textNode.text(textArea.value);
18824
+ this.updateNode(textNode);
18758
18825
  this.removeTextAreaDOM(textNode);
18826
+ this.instance.removeEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
18827
+ this.instance.removeEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
18759
18828
  window.removeEventListener("click", handleOutsideClick);
18760
18829
  return;
18761
18830
  }
18762
18831
  }
18763
18832
  };
18764
- const handleKeyUp = (e) => {
18833
+ const handleKeyUp = () => {
18765
18834
  textNode.text(textArea.value);
18766
18835
  if (textArea && textNode) {
18767
18836
  textArea.style.width = textNode.width() * textNode.getAbsoluteScale().x + "px";
18768
- if (!(e.key === "Enter" && e.shiftKey)) {
18769
- textArea.style.height = "auto";
18770
- textArea.style.height = textArea.scrollHeight + "px";
18771
- }
18837
+ textArea.style.height = "auto";
18838
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18772
18839
  }
18773
18840
  };
18774
18841
  textArea.addEventListener("keydown", handleKeyDown);
@@ -18801,7 +18868,7 @@ var WeaveTextNode = class extends WeaveNode {
18801
18868
  }
18802
18869
  removeTextAreaDOM(textNode) {
18803
18870
  const stage = this.instance.getStage();
18804
- window.weaveTextEditing = false;
18871
+ delete window.weaveTextEditing[textNode.id()];
18805
18872
  const textArea = document.getElementById(textNode.id());
18806
18873
  if (textArea) textArea.remove();
18807
18874
  textNode.visible(true);
@@ -18854,6 +18921,7 @@ const IMAGE_TOOL_STATE = {
18854
18921
  var WeaveImageToolAction = class extends WeaveAction {
18855
18922
  initialized = false;
18856
18923
  initialCursor = null;
18924
+ onPropsChange = void 0;
18857
18925
  update = void 0;
18858
18926
  constructor() {
18859
18927
  super();
@@ -18909,13 +18977,8 @@ var WeaveImageToolAction = class extends WeaveAction {
18909
18977
  if (this.state === IMAGE_TOOL_STATE.ADDING && tempImage) {
18910
18978
  const mousePos = stage.getRelativePointerPosition();
18911
18979
  tempImage.setAttrs({
18912
- ...this.props,
18913
- name: void 0,
18914
18980
  x: (mousePos?.x ?? 0) + 2,
18915
- y: (mousePos?.y ?? 0) + 2,
18916
- fill: "#ccccccff",
18917
- stroke: "#000000ff",
18918
- strokeWidth: 1
18981
+ y: (mousePos?.y ?? 0) + 2
18919
18982
  });
18920
18983
  const nodeHandler = this.instance.getNodeHandler("rectangle");
18921
18984
  this.instance.updateNode(nodeHandler.serialize(tempImage));
@@ -18940,6 +19003,7 @@ var WeaveImageToolAction = class extends WeaveAction {
18940
19003
  this.instance.emitEvent("onImageLoadEnd", void 0);
18941
19004
  if (this.imageId) this.props = {
18942
19005
  ...this.props,
19006
+ imageURL: this.imageURL,
18943
19007
  width: this.preloadImgs[this.imageId].width,
18944
19008
  height: this.preloadImgs[this.imageId].height
18945
19009
  };
@@ -18958,17 +19022,20 @@ var WeaveImageToolAction = class extends WeaveAction {
18958
19022
  stage.container().focus();
18959
19023
  if (this.imageId) {
18960
19024
  const mousePos = stage.getRelativePointerPosition();
18961
- const nodeHandler = this.instance.getNodeHandler("rectangle");
19025
+ const nodeHandler = this.instance.getNodeHandler("image");
18962
19026
  this.tempImageId = v4_default();
19027
+ const aspectRatio = this.preloadImgs[this.imageId].width / this.preloadImgs[this.imageId].height;
18963
19028
  const node = nodeHandler.create(this.tempImageId, {
18964
- ...this.props,
18965
19029
  x: (mousePos?.x ?? 0) + 5,
18966
19030
  y: (mousePos?.y ?? 0) + 5,
18967
- width: this.preloadImgs[this.imageId].width,
18968
- height: this.preloadImgs[this.imageId].height,
18969
- fill: "#ccccccff",
19031
+ width: 100 * aspectRatio,
19032
+ height: 100,
19033
+ opacity: 1,
19034
+ imageURL: this.imageURL,
18970
19035
  stroke: "#000000ff",
18971
- strokeWidth: 1
19036
+ strokeWidth: 0,
19037
+ strokeScaleEnabled: false,
19038
+ listening: false
18972
19039
  });
18973
19040
  this.instance.addNode(node, this.container?.getAttrs().id);
18974
19041
  }
@@ -19010,6 +19077,8 @@ var WeaveImageToolAction = class extends WeaveAction {
19010
19077
  if (!this.instance) throw new Error("Instance not defined");
19011
19078
  if (!this.initialized) this.setupEvents();
19012
19079
  this.cancelAction = cancelAction;
19080
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
19081
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
19013
19082
  if (params?.imageURL) {
19014
19083
  this.loadImage(params.imageURL);
19015
19084
  return;
@@ -19018,23 +19087,6 @@ var WeaveImageToolAction = class extends WeaveAction {
19018
19087
  this.addImage();
19019
19088
  return { finishUploadCallback: this.loadImage.bind(this) };
19020
19089
  }
19021
- onPropsChange() {
19022
- const stage = this.instance?.getStage();
19023
- if (stage) {
19024
- const tempImage = this.instance.getStage().findOne(`#${this.tempImageId}`);
19025
- if (tempImage) {
19026
- tempImage.setAttrs({
19027
- ...this.props,
19028
- name: void 0,
19029
- fill: "#ccccccff",
19030
- stroke: "#000000ff",
19031
- strokeWidth: 1
19032
- });
19033
- const nodeHandler = this.instance.getNodeHandler("rectangle");
19034
- this.instance.updateNode(nodeHandler.serialize(tempImage));
19035
- }
19036
- }
19037
- }
19038
19090
  cleanup() {
19039
19091
  const stage = this.instance.getStage();
19040
19092
  if (this.imageId) delete this.preloadImgs[this.imageId];
@@ -19725,7 +19777,7 @@ const WEAVE_STAGE_ZOOM_KEY = "stageZoom";
19725
19777
  var WeaveStageZoomPlugin = class extends WeavePlugin {
19726
19778
  getLayerName = void 0;
19727
19779
  initLayer = void 0;
19728
- padding = 100;
19780
+ padding = 175;
19729
19781
  defaultStep = 3;
19730
19782
  constructor(params) {
19731
19783
  super();
@@ -19903,18 +19955,16 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
19903
19955
  this.enabled = false;
19904
19956
  }
19905
19957
  initEvents() {
19906
- const stage = this.instance.getStage();
19907
- stage.container().addEventListener("keydown", (e) => {
19958
+ window.addEventListener("keydown", (e) => {
19908
19959
  if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
19909
19960
  });
19910
- stage.container().addEventListener("keyup", (e) => {
19961
+ window.addEventListener("keyup", (e) => {
19911
19962
  if (!(e.ctrlKey || e.metaKey)) this.isCtrlOrMetaPressed = false;
19912
19963
  });
19913
- stage.on("wheel", (e) => {
19914
- e.evt.preventDefault();
19964
+ window.addEventListener("wheel", (e) => {
19915
19965
  if (!this.enabled || !this.isCtrlOrMetaPressed) return;
19916
- if (e.evt.deltaY > 0) this.zoomOut();
19917
- if (e.evt.deltaY < 0) this.zoomIn();
19966
+ if (e.deltaY > 0) this.zoomOut();
19967
+ if (e.deltaY < 0) this.zoomIn();
19918
19968
  });
19919
19969
  }
19920
19970
  };
@@ -20298,6 +20348,8 @@ var WeaveRectangleToolAction = class extends WeaveAction {
20298
20348
  stage.container().tabIndex = 1;
20299
20349
  stage.container().focus();
20300
20350
  this.cancelAction = cancelAction;
20351
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
20352
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
20301
20353
  this.props = this.initProps();
20302
20354
  this.addRectangle();
20303
20355
  }
@@ -20510,6 +20562,8 @@ var WeavePenToolAction = class extends WeaveAction {
20510
20562
  stage.container().tabIndex = 1;
20511
20563
  stage.container().focus();
20512
20564
  this.cancelAction = cancelAction;
20565
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
20566
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
20513
20567
  this.props = this.initProps();
20514
20568
  this.addLine();
20515
20569
  }
@@ -20684,6 +20738,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
20684
20738
  stage.container().tabIndex = 1;
20685
20739
  stage.container().focus();
20686
20740
  this.cancelAction = cancel;
20741
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
20687
20742
  this.props = this.initProps();
20688
20743
  this.setState(BRUSH_TOOL_STATE.IDLE);
20689
20744
  stage.container().style.cursor = "crosshair";
@@ -20775,7 +20830,7 @@ var WeaveTextToolAction = class extends WeaveAction {
20775
20830
  text: "Your text here...",
20776
20831
  width: 300,
20777
20832
  fontSize: 20,
20778
- fontFamily: "NotoSansMono, monospace",
20833
+ fontFamily: "Arial, sans-serif",
20779
20834
  fill: "#000000ff",
20780
20835
  strokeEnabled: false,
20781
20836
  stroke: "#000000ff",
@@ -20794,11 +20849,19 @@ var WeaveTextToolAction = class extends WeaveAction {
20794
20849
  if (!this.instance) throw new Error("Instance not defined");
20795
20850
  if (!this.initialized) this.setupEvents();
20796
20851
  this.cancelAction = cancelAction;
20852
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
20853
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
20797
20854
  this.addText();
20798
20855
  }
20799
20856
  cleanup() {
20800
20857
  const stage = this.instance.getStage();
20801
20858
  stage.container().style.cursor = "default";
20859
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
20860
+ if (selectionPlugin) {
20861
+ const node$1 = stage.findOne(`#${this.textId}`);
20862
+ if (node$1) selectionPlugin.setSelectedNodes([node$1]);
20863
+ this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
20864
+ }
20802
20865
  const node = stage.findOne(`#${this.textId}`);
20803
20866
  if (node) node.getAttr("triggerEditMode")(node);
20804
20867
  this.initialCursor = null;
@@ -20896,6 +20959,8 @@ var WeaveFrameToolAction = class extends WeaveAction {
20896
20959
  stage.container().tabIndex = 1;
20897
20960
  stage.container().focus();
20898
20961
  this.cancelAction = cancelAction;
20962
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
20963
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
20899
20964
  this.props = this.initProps(params);
20900
20965
  this.addFrame();
20901
20966
  }
@@ -21130,15 +21195,21 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
21130
21195
  if (!layer) return;
21131
21196
  const stage = this.instance.getStage();
21132
21197
  const stageXRound = this.round(stage.x(), this.config.gridSize) * -1;
21133
- const overflowX = 10 * this.config.gridSize;
21134
- const overflowY = 10 * this.config.gridSize;
21198
+ const overflowX = this.round(10 * this.config.gridSize, this.config.gridSize);
21199
+ const overflowY = this.round(10 * this.config.gridSize, this.config.gridSize);
21135
21200
  const pointsX = [];
21136
- for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push(i / stage.scaleX());
21201
+ for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push({
21202
+ real: i / stage.scaleX(),
21203
+ ref: i
21204
+ });
21137
21205
  const stageYRound = this.round(stage.y(), this.config.gridSize) * -1;
21138
21206
  const pointsY = [];
21139
- for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push(i / stage.scaleY());
21207
+ for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push({
21208
+ real: i / stage.scaleY(),
21209
+ ref: i
21210
+ });
21140
21211
  for (let index = 0; index < pointsX.length; index++) {
21141
- const point = pointsX[index];
21212
+ const { real: point, ref } = pointsX[index];
21142
21213
  let color = this.config.gridColor;
21143
21214
  if (point === 0) color = this.config.gridOriginColor;
21144
21215
  layer.add(new konva_lib_shapes_Line.Line({
@@ -21149,12 +21220,12 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
21149
21220
  (-stage.y() + stage.height() + overflowY) / stage.scaleY()
21150
21221
  ],
21151
21222
  stroke: color,
21152
- strokeWidth: (isZeroOrClose(point % (10 * (this.config.gridSize / stage.scaleX()))) ? 2.5 : .5) / stage.scaleX(),
21223
+ strokeWidth: (isZeroOrClose(ref % (10 * this.config.gridSize)) ? 2.5 : .5) / stage.scaleX(),
21153
21224
  listening: false
21154
21225
  }));
21155
21226
  }
21156
21227
  for (let index = 0; index < pointsY.length; index++) {
21157
- const point = pointsY[index];
21228
+ const { real: point, ref } = pointsY[index];
21158
21229
  let color = this.config.gridColor;
21159
21230
  if (point === 0) color = this.config.gridOriginColor;
21160
21231
  layer.add(new konva_lib_shapes_Line.Line({
@@ -21165,7 +21236,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
21165
21236
  point
21166
21237
  ],
21167
21238
  stroke: color,
21168
- strokeWidth: (isZeroOrClose(point % (10 * (this.config.gridSize / stage.scaleY()))) ? 2.5 : .5) / stage.scaleX(),
21239
+ strokeWidth: (isZeroOrClose(ref % (10 * this.config.gridSize)) ? 2.5 : .5) / stage.scaleX(),
21169
21240
  listening: false
21170
21241
  }));
21171
21242
  }
@@ -21174,20 +21245,26 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
21174
21245
  const layer = this.getLayer();
21175
21246
  if (!layer) return;
21176
21247
  const stage = this.instance.getStage();
21177
- const overflowX = Math.max(stage.width() * .2, 10 * this.config.gridSize);
21178
- const overflowY = Math.max(stage.height() * .2, 10 * this.config.gridSize);
21248
+ const overflowX = 10 * this.config.gridSize;
21249
+ const overflowY = 10 * this.config.gridSize;
21179
21250
  const stageXRound = this.round(stage.x(), this.config.gridSize) * -1;
21180
21251
  const pointsX = [];
21181
- for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push(i / stage.scaleX());
21252
+ for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push({
21253
+ real: i / stage.scaleX(),
21254
+ ref: i
21255
+ });
21182
21256
  const stageYRound = this.round(stage.y(), this.config.gridSize) * -1;
21183
21257
  const pointsY = [];
21184
- for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push(i / stage.scaleY());
21258
+ for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push({
21259
+ real: i / stage.scaleY(),
21260
+ ref: i
21261
+ });
21185
21262
  for (let indexX = 0; indexX < pointsX.length; indexX++) {
21186
- const pointX = pointsX[indexX];
21263
+ const { real: pointX, ref: refX } = pointsX[indexX];
21187
21264
  for (let indexY = 0; indexY < pointsY.length; indexY++) {
21188
- const pointY = pointsY[indexY];
21265
+ const { real: pointY, ref: refY } = pointsY[indexY];
21189
21266
  let color = this.config.gridColor;
21190
- if (pointX === 0 || pointY === 0) color = this.config.gridOriginColor;
21267
+ if (refX === 0 || refY === 0) color = this.config.gridOriginColor;
21191
21268
  layer.add(new konva_lib_shapes_Circle.Circle({
21192
21269
  x: pointX,
21193
21270
  y: pointY,
@@ -21322,6 +21399,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
21322
21399
  if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
21323
21400
  stage.x(stage.x() - deltaX);
21324
21401
  stage.y(stage.y() - deltaY);
21402
+ this.instance.emit("onStageMove", void 0);
21325
21403
  });
21326
21404
  stage.on("touchstart", (e) => {
21327
21405
  e.evt.preventDefault();
@@ -21343,12 +21421,13 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
21343
21421
  if (!this.enabled) return;
21344
21422
  stage.x(stage.x() - deltaX);
21345
21423
  stage.y(stage.y() - deltaY);
21424
+ this.instance.emit("onStageMove", void 0);
21346
21425
  });
21347
- stage.on("wheel", (e) => {
21348
- e.evt.preventDefault();
21426
+ window.addEventListener("wheel", (e) => {
21349
21427
  if (!this.enabled || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
21350
- stage.x(stage.x() - e.evt.deltaX);
21351
- stage.y(stage.y() - e.evt.deltaY);
21428
+ stage.x(stage.x() - e.deltaX);
21429
+ stage.y(stage.y() - e.deltaY);
21430
+ this.instance.emit("stageMove", void 0);
21352
21431
  });
21353
21432
  }
21354
21433
  enable() {
package/dist/sdk.d.cts CHANGED
@@ -223,6 +223,7 @@ declare abstract class WeavePlugin implements WeavePluginBase {
223
223
 
224
224
  //#endregion
225
225
  //#region src/plugins/nodes-selection/types.d.ts
226
+ type WeaveNodesSelectionPluginOnSelectionStateEvent = boolean;
226
227
  type WeaveNodesSelectionPluginOnNodesChangeEvent = WeaveSelection[];
227
228
  type WeaveNodesSelectionPluginOnStageSelectionEvent = undefined;
228
229
  type WeaveNodesSelectionPluginConfig = {
@@ -525,6 +526,9 @@ declare class WeaveTextNode extends WeaveNode {
525
526
  onRender(props: WeaveElementAttributes): WeaveElementInstance;
526
527
  onUpdate(nodeInstance: WeaveElementInstance, nextProps: WeaveElementAttributes): void;
527
528
  serialize(instance: WeaveElementInstance): WeaveStateElement;
529
+ private resizeTextAreaDOM;
530
+ private onZoomChangeHandler;
531
+ private onStageMoveHandler;
528
532
  private createTextAreaDOM;
529
533
  private removeTextAreaDOM;
530
534
  private triggerEditMode;
@@ -993,6 +997,7 @@ declare class WeaveImageToolAction extends WeaveAction {
993
997
  protected preloadImgs: Record<string, HTMLImageElement>;
994
998
  protected clickPoint: Vector2d | null;
995
999
  protected cancelAction: () => void;
1000
+ onPropsChange: undefined;
996
1001
  update: undefined;
997
1002
  constructor();
998
1003
  getName(): string;
@@ -1011,7 +1016,6 @@ declare class WeaveImageToolAction extends WeaveAction {
1011
1016
  private addImage;
1012
1017
  private handleAdding;
1013
1018
  trigger(cancelAction: () => void, params?: WeaveImageToolActionTriggerParams): WeaveImageToolActionTriggerReturn;
1014
- onPropsChange(): void;
1015
1019
  cleanup(): void;
1016
1020
  }
1017
1021
 
@@ -1512,4 +1516,4 @@ declare class WeaveNodesSnappingPlugin extends WeavePlugin {
1512
1516
  }
1513
1517
 
1514
1518
  //#endregion
1515
- export { BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_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, Guide, GuideOrientation, GuideOrientationKeys, IMAGE_TOOL_STATE, ImageProps, LineGuide, LineGuideStop, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NodeSnap, NodeSnapKeys, NodeSnappingEdge, NodeSnappingEdges, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_STATE, TextSerializable, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, Weave, WeaveAction, WeaveActionPropsChangeEvent, WeaveBrushToolAction, WeaveBrushToolActionState, WeaveBrushToolActionStateKeys, WeaveConnectedUserInfoKey, WeaveConnectedUsers, WeaveConnectedUsersChangeEvent, WeaveConnectedUsersPlugin, WeaveConnectedUsersPluginConfig, WeaveConnectedUsersPluginParams, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveCopyPasteNodesPluginOnCopyEvent, WeaveCopyPasteNodesPluginOnPasteEvent, WeaveCopyPasteNodesPluginOnPasteExternalEvent, WeaveCopyPasteNodesPluginState, WeaveCopyPasteNodesPluginStateKeys, WeaveExportNodeActionParams, WeaveExportNodeToolAction, WeaveExportStageActionParams, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToScreenToolActionParams, WeaveFitToSelectionToolAction, WeaveFitToSelectionToolActionParams, WeaveFrameAttributes, WeaveFrameNode, WeaveFrameNodeParams, WeaveFrameNodeSizes, WeaveFrameNodeSizesInfo, WeaveFrameNodeSizesKeys, WeaveFrameNodeSizesOrientation, WeaveFrameNodeSizesOrientationKeys, WeaveFrameProperties, WeaveFrameToolAction, WeaveFrameToolActionState, WeaveFrameToolActionStateKeys, WeaveFrameToolActionTriggerParams, WeaveFrameToolProps, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveImageToolActionOnEndLoadImageEvent, WeaveImageToolActionOnStartLoadImageEvent, WeaveImageToolActionState, WeaveImageToolActionStateKeys, WeaveImageToolActionTriggerParams, WeaveImageToolActionTriggerReturn, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveMoveToolActionState, WeaveMoveToolActionStateKeys, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSelectionPluginConfig, WeaveNodesSelectionPluginOnNodesChangeEvent, WeaveNodesSelectionPluginOnStageSelectionEvent, WeaveNodesSelectionPluginParams, WeaveNodesSnappingPlugin, WeaveNodesSnappingPluginConfig, WeaveNodesSnappingPluginParams, WeavePasteModel, WeavePenToolAction, WeavePenToolActionState, WeavePenToolActionStateKeys, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRectangleToolActionState, WeaveRectangleToolActionStateKeys, WeaveSelectionToolAction, WeaveSelectionToolActionState, WeaveSelectionToolActionStateKeys, WeaveStageContextMenuPluginConfig, WeaveStageContextMenuPluginOnNodeContextMenuEvent, WeaveStageContextMenuPluginParams, WeaveStageDropAreaPlugin, WeaveStageDropPluginOnStageDropEvent, WeaveStageGridPlugin, WeaveStageGridPluginConfig, WeaveStageGridPluginParams, WeaveStageGridType, WeaveStageGridTypeKeys, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomChanged, WeaveStageZoomPlugin, WeaveStageZoomPluginConfig, WeaveStageZoomPluginOnZoomChangeEvent, WeaveStageZoomPluginParams, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveTextToolActionState, WeaveTextToolActionStateKeys, WeaveToPasteNode, WeaveUserPointer, WeaveUserPointerKey, WeaveUsersPointersPlugin, WeaveUsersPointersPluginConfig, WeaveUsersPointersPluginParams, WeaveZoomInToolAction, WeaveZoomInToolActionParams, WeaveZoomOutToolAction, WeaveZoomOutToolActionParams, resetScale };
1519
+ export { BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_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, Guide, GuideOrientation, GuideOrientationKeys, IMAGE_TOOL_STATE, ImageProps, LineGuide, LineGuideStop, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NodeSnap, NodeSnapKeys, NodeSnappingEdge, NodeSnappingEdges, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_STATE, TextSerializable, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, Weave, WeaveAction, WeaveActionPropsChangeEvent, WeaveBrushToolAction, WeaveBrushToolActionState, WeaveBrushToolActionStateKeys, WeaveConnectedUserInfoKey, WeaveConnectedUsers, WeaveConnectedUsersChangeEvent, WeaveConnectedUsersPlugin, WeaveConnectedUsersPluginConfig, WeaveConnectedUsersPluginParams, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveCopyPasteNodesPluginOnCopyEvent, WeaveCopyPasteNodesPluginOnPasteEvent, WeaveCopyPasteNodesPluginOnPasteExternalEvent, WeaveCopyPasteNodesPluginState, WeaveCopyPasteNodesPluginStateKeys, WeaveExportNodeActionParams, WeaveExportNodeToolAction, WeaveExportStageActionParams, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToScreenToolActionParams, WeaveFitToSelectionToolAction, WeaveFitToSelectionToolActionParams, WeaveFrameAttributes, WeaveFrameNode, WeaveFrameNodeParams, WeaveFrameNodeSizes, WeaveFrameNodeSizesInfo, WeaveFrameNodeSizesKeys, WeaveFrameNodeSizesOrientation, WeaveFrameNodeSizesOrientationKeys, WeaveFrameProperties, WeaveFrameToolAction, WeaveFrameToolActionState, WeaveFrameToolActionStateKeys, WeaveFrameToolActionTriggerParams, WeaveFrameToolProps, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveImageToolActionOnEndLoadImageEvent, WeaveImageToolActionOnStartLoadImageEvent, WeaveImageToolActionState, WeaveImageToolActionStateKeys, WeaveImageToolActionTriggerParams, WeaveImageToolActionTriggerReturn, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveMoveToolActionState, WeaveMoveToolActionStateKeys, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSelectionPluginConfig, WeaveNodesSelectionPluginOnNodesChangeEvent, WeaveNodesSelectionPluginOnSelectionStateEvent, WeaveNodesSelectionPluginOnStageSelectionEvent, WeaveNodesSelectionPluginParams, WeaveNodesSnappingPlugin, WeaveNodesSnappingPluginConfig, WeaveNodesSnappingPluginParams, WeavePasteModel, WeavePenToolAction, WeavePenToolActionState, WeavePenToolActionStateKeys, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRectangleToolActionState, WeaveRectangleToolActionStateKeys, WeaveSelectionToolAction, WeaveSelectionToolActionState, WeaveSelectionToolActionStateKeys, WeaveStageContextMenuPluginConfig, WeaveStageContextMenuPluginOnNodeContextMenuEvent, WeaveStageContextMenuPluginParams, WeaveStageDropAreaPlugin, WeaveStageDropPluginOnStageDropEvent, WeaveStageGridPlugin, WeaveStageGridPluginConfig, WeaveStageGridPluginParams, WeaveStageGridType, WeaveStageGridTypeKeys, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomChanged, WeaveStageZoomPlugin, WeaveStageZoomPluginConfig, WeaveStageZoomPluginOnZoomChangeEvent, WeaveStageZoomPluginParams, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveTextToolActionState, WeaveTextToolActionStateKeys, WeaveToPasteNode, WeaveUserPointer, WeaveUserPointerKey, WeaveUsersPointersPlugin, WeaveUsersPointersPluginConfig, WeaveUsersPointersPluginParams, WeaveZoomInToolAction, WeaveZoomInToolActionParams, WeaveZoomOutToolAction, WeaveZoomOutToolActionParams, resetScale };
package/dist/sdk.d.ts CHANGED
@@ -223,6 +223,7 @@ declare abstract class WeavePlugin implements WeavePluginBase {
223
223
 
224
224
  //#endregion
225
225
  //#region src/plugins/nodes-selection/types.d.ts
226
+ type WeaveNodesSelectionPluginOnSelectionStateEvent = boolean;
226
227
  type WeaveNodesSelectionPluginOnNodesChangeEvent = WeaveSelection[];
227
228
  type WeaveNodesSelectionPluginOnStageSelectionEvent = undefined;
228
229
  type WeaveNodesSelectionPluginConfig = {
@@ -525,6 +526,9 @@ declare class WeaveTextNode extends WeaveNode {
525
526
  onRender(props: WeaveElementAttributes): WeaveElementInstance;
526
527
  onUpdate(nodeInstance: WeaveElementInstance, nextProps: WeaveElementAttributes): void;
527
528
  serialize(instance: WeaveElementInstance): WeaveStateElement;
529
+ private resizeTextAreaDOM;
530
+ private onZoomChangeHandler;
531
+ private onStageMoveHandler;
528
532
  private createTextAreaDOM;
529
533
  private removeTextAreaDOM;
530
534
  private triggerEditMode;
@@ -993,6 +997,7 @@ declare class WeaveImageToolAction extends WeaveAction {
993
997
  protected preloadImgs: Record<string, HTMLImageElement>;
994
998
  protected clickPoint: Vector2d | null;
995
999
  protected cancelAction: () => void;
1000
+ onPropsChange: undefined;
996
1001
  update: undefined;
997
1002
  constructor();
998
1003
  getName(): string;
@@ -1011,7 +1016,6 @@ declare class WeaveImageToolAction extends WeaveAction {
1011
1016
  private addImage;
1012
1017
  private handleAdding;
1013
1018
  trigger(cancelAction: () => void, params?: WeaveImageToolActionTriggerParams): WeaveImageToolActionTriggerReturn;
1014
- onPropsChange(): void;
1015
1019
  cleanup(): void;
1016
1020
  }
1017
1021
 
@@ -1512,4 +1516,4 @@ declare class WeaveNodesSnappingPlugin extends WeavePlugin {
1512
1516
  }
1513
1517
 
1514
1518
  //#endregion
1515
- export { BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_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, Guide, GuideOrientation, GuideOrientationKeys, IMAGE_TOOL_STATE, ImageProps, LineGuide, LineGuideStop, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NodeSnap, NodeSnapKeys, NodeSnappingEdge, NodeSnappingEdges, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_STATE, TextSerializable, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, Weave, WeaveAction, WeaveActionPropsChangeEvent, WeaveBrushToolAction, WeaveBrushToolActionState, WeaveBrushToolActionStateKeys, WeaveConnectedUserInfoKey, WeaveConnectedUsers, WeaveConnectedUsersChangeEvent, WeaveConnectedUsersPlugin, WeaveConnectedUsersPluginConfig, WeaveConnectedUsersPluginParams, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveCopyPasteNodesPluginOnCopyEvent, WeaveCopyPasteNodesPluginOnPasteEvent, WeaveCopyPasteNodesPluginOnPasteExternalEvent, WeaveCopyPasteNodesPluginState, WeaveCopyPasteNodesPluginStateKeys, WeaveExportNodeActionParams, WeaveExportNodeToolAction, WeaveExportStageActionParams, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToScreenToolActionParams, WeaveFitToSelectionToolAction, WeaveFitToSelectionToolActionParams, WeaveFrameAttributes, WeaveFrameNode, WeaveFrameNodeParams, WeaveFrameNodeSizes, WeaveFrameNodeSizesInfo, WeaveFrameNodeSizesKeys, WeaveFrameNodeSizesOrientation, WeaveFrameNodeSizesOrientationKeys, WeaveFrameProperties, WeaveFrameToolAction, WeaveFrameToolActionState, WeaveFrameToolActionStateKeys, WeaveFrameToolActionTriggerParams, WeaveFrameToolProps, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveImageToolActionOnEndLoadImageEvent, WeaveImageToolActionOnStartLoadImageEvent, WeaveImageToolActionState, WeaveImageToolActionStateKeys, WeaveImageToolActionTriggerParams, WeaveImageToolActionTriggerReturn, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveMoveToolActionState, WeaveMoveToolActionStateKeys, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSelectionPluginConfig, WeaveNodesSelectionPluginOnNodesChangeEvent, WeaveNodesSelectionPluginOnStageSelectionEvent, WeaveNodesSelectionPluginParams, WeaveNodesSnappingPlugin, WeaveNodesSnappingPluginConfig, WeaveNodesSnappingPluginParams, WeavePasteModel, WeavePenToolAction, WeavePenToolActionState, WeavePenToolActionStateKeys, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRectangleToolActionState, WeaveRectangleToolActionStateKeys, WeaveSelectionToolAction, WeaveSelectionToolActionState, WeaveSelectionToolActionStateKeys, WeaveStageContextMenuPluginConfig, WeaveStageContextMenuPluginOnNodeContextMenuEvent, WeaveStageContextMenuPluginParams, WeaveStageDropAreaPlugin, WeaveStageDropPluginOnStageDropEvent, WeaveStageGridPlugin, WeaveStageGridPluginConfig, WeaveStageGridPluginParams, WeaveStageGridType, WeaveStageGridTypeKeys, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomChanged, WeaveStageZoomPlugin, WeaveStageZoomPluginConfig, WeaveStageZoomPluginOnZoomChangeEvent, WeaveStageZoomPluginParams, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveTextToolActionState, WeaveTextToolActionStateKeys, WeaveToPasteNode, WeaveUserPointer, WeaveUserPointerKey, WeaveUsersPointersPlugin, WeaveUsersPointersPluginConfig, WeaveUsersPointersPluginParams, WeaveZoomInToolAction, WeaveZoomInToolActionParams, WeaveZoomOutToolAction, WeaveZoomOutToolActionParams, resetScale };
1519
+ export { BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_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, Guide, GuideOrientation, GuideOrientationKeys, IMAGE_TOOL_STATE, ImageProps, LineGuide, LineGuideStop, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NodeSnap, NodeSnapKeys, NodeSnappingEdge, NodeSnappingEdges, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_STATE, TextSerializable, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, Weave, WeaveAction, WeaveActionPropsChangeEvent, WeaveBrushToolAction, WeaveBrushToolActionState, WeaveBrushToolActionStateKeys, WeaveConnectedUserInfoKey, WeaveConnectedUsers, WeaveConnectedUsersChangeEvent, WeaveConnectedUsersPlugin, WeaveConnectedUsersPluginConfig, WeaveConnectedUsersPluginParams, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveCopyPasteNodesPluginOnCopyEvent, WeaveCopyPasteNodesPluginOnPasteEvent, WeaveCopyPasteNodesPluginOnPasteExternalEvent, WeaveCopyPasteNodesPluginState, WeaveCopyPasteNodesPluginStateKeys, WeaveExportNodeActionParams, WeaveExportNodeToolAction, WeaveExportStageActionParams, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToScreenToolActionParams, WeaveFitToSelectionToolAction, WeaveFitToSelectionToolActionParams, WeaveFrameAttributes, WeaveFrameNode, WeaveFrameNodeParams, WeaveFrameNodeSizes, WeaveFrameNodeSizesInfo, WeaveFrameNodeSizesKeys, WeaveFrameNodeSizesOrientation, WeaveFrameNodeSizesOrientationKeys, WeaveFrameProperties, WeaveFrameToolAction, WeaveFrameToolActionState, WeaveFrameToolActionStateKeys, WeaveFrameToolActionTriggerParams, WeaveFrameToolProps, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveImageToolActionOnEndLoadImageEvent, WeaveImageToolActionOnStartLoadImageEvent, WeaveImageToolActionState, WeaveImageToolActionStateKeys, WeaveImageToolActionTriggerParams, WeaveImageToolActionTriggerReturn, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveMoveToolActionState, WeaveMoveToolActionStateKeys, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSelectionPluginConfig, WeaveNodesSelectionPluginOnNodesChangeEvent, WeaveNodesSelectionPluginOnSelectionStateEvent, WeaveNodesSelectionPluginOnStageSelectionEvent, WeaveNodesSelectionPluginParams, WeaveNodesSnappingPlugin, WeaveNodesSnappingPluginConfig, WeaveNodesSnappingPluginParams, WeavePasteModel, WeavePenToolAction, WeavePenToolActionState, WeavePenToolActionStateKeys, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRectangleToolActionState, WeaveRectangleToolActionStateKeys, WeaveSelectionToolAction, WeaveSelectionToolActionState, WeaveSelectionToolActionStateKeys, WeaveStageContextMenuPluginConfig, WeaveStageContextMenuPluginOnNodeContextMenuEvent, WeaveStageContextMenuPluginParams, WeaveStageDropAreaPlugin, WeaveStageDropPluginOnStageDropEvent, WeaveStageGridPlugin, WeaveStageGridPluginConfig, WeaveStageGridPluginParams, WeaveStageGridType, WeaveStageGridTypeKeys, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomChanged, WeaveStageZoomPlugin, WeaveStageZoomPluginConfig, WeaveStageZoomPluginOnZoomChangeEvent, WeaveStageZoomPluginParams, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveTextToolActionState, WeaveTextToolActionStateKeys, WeaveToPasteNode, WeaveUserPointer, WeaveUserPointerKey, WeaveUsersPointersPlugin, WeaveUsersPointersPluginConfig, WeaveUsersPointersPluginParams, WeaveZoomInToolAction, WeaveZoomInToolActionParams, WeaveZoomOutToolAction, WeaveZoomOutToolActionParams, resetScale };
package/dist/sdk.js CHANGED
@@ -15571,6 +15571,15 @@ var WeaveStore = class {
15571
15571
  const newState = JSON.parse(JSON.stringify(this.getState()));
15572
15572
  config.callbacks?.onStateChange?.(newState);
15573
15573
  this.instance.emitEvent("onStateChange", newState);
15574
+ const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
15575
+ if (this.isRoomLoaded && nodesSelectionPlugin && nodesSelectionPlugin.getSelectedNodes().length === 1) {
15576
+ const selectedNode = nodesSelectionPlugin.getSelectedNodes()[0];
15577
+ const nodeInfo = this.instance.getNode(selectedNode.getAttrs().id ?? "");
15578
+ if (nodeInfo && nodeInfo.node) this.instance.emitEvent("onNodeChange", {
15579
+ instance: selectedNode,
15580
+ node: JSON.parse(JSON.stringify(nodeInfo.node))
15581
+ });
15582
+ }
15574
15583
  if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
15575
15584
  this.instance.setupRenderer();
15576
15585
  this.isRoomLoaded = true;
@@ -15920,7 +15929,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
15920
15929
  this.selecting = false;
15921
15930
  const stage = this.instance.getStage();
15922
15931
  stage.container().addEventListener("keydown", (e) => {
15923
- if (e.key === "Backspace" || e.key === "Delete") {
15932
+ if ((e.key === "Backspace" || e.key === "Delete") && Object.keys(window.weaveTextEditing).length === 0) {
15924
15933
  this.removeSelectedNodes();
15925
15934
  return;
15926
15935
  }
@@ -15942,6 +15951,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
15942
15951
  this.selectionRectangle.width(0);
15943
15952
  this.selectionRectangle.height(0);
15944
15953
  this.selecting = true;
15954
+ this.instance.emitEvent("onSelectionState", true);
15945
15955
  if (!(e.target instanceof Konva.Stage)) this.cameFromSelectingMultiple = true;
15946
15956
  });
15947
15957
  stage.on("mousemove touchmove", (e) => {
@@ -15967,6 +15977,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
15967
15977
  if (!this.initialized) return;
15968
15978
  if (!this.active) return;
15969
15979
  this.selecting = false;
15980
+ this.instance.emitEvent("onSelectionState", false);
15970
15981
  if (!this.selectionRectangle.visible()) {
15971
15982
  this.cameFromSelectingMultiple = false;
15972
15983
  return;
@@ -17750,7 +17761,7 @@ var WeaveStateManager = class {
17750
17761
  getElementsTree() {
17751
17762
  const state = this.instance.getStore().getState().weave;
17752
17763
  const jsonState = JSON.parse(JSON.stringify(state, null, 2));
17753
- const mainLayer = jsonState.props.children.find((node) => node.key === "mainLayer");
17764
+ const mainLayer = jsonState.props?.children.find((node) => node.key === "mainLayer");
17754
17765
  if (!mainLayer) return [];
17755
17766
  return mainLayer.props.children;
17756
17767
  }
@@ -17844,7 +17855,7 @@ var WeaveRegisterManager = class {
17844
17855
 
17845
17856
  //#endregion
17846
17857
  //#region package.json
17847
- var version = "0.11.0";
17858
+ var version = "0.12.0";
17848
17859
 
17849
17860
  //#endregion
17850
17861
  //#region src/managers/setup.ts
@@ -18230,6 +18241,8 @@ var Weave = class extends Emittery {
18230
18241
  this.actionsManager = new WeaveActionsManager(this);
18231
18242
  this.pluginsManager = new WeavePluginsManager(this);
18232
18243
  if (!window.weave) window.weave = this;
18244
+ window.weaveTextEditing = {};
18245
+ window.weaveDragImageURL = void 0;
18233
18246
  this.setupManager.welcomeLog();
18234
18247
  }
18235
18248
  setupRenderer() {
@@ -18653,8 +18666,19 @@ var WeaveTextNode = class extends WeaveNode {
18653
18666
  name: "node"
18654
18667
  });
18655
18668
  this.setupDefaultNodeEvents(text);
18656
- text.on("dblclick dbltap", (evt) => {
18657
- evt.cancelBubble = true;
18669
+ window.addEventListener("keypress", (e) => {
18670
+ if (this.editing) return;
18671
+ if (e.key !== "Enter" && !e.shiftKey) return;
18672
+ if (this.isSelecting() && this.isNodeSelected(text)) {
18673
+ const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
18674
+ if (nodesSelectionPlugin && nodesSelectionPlugin.getSelectedNodes().length === 1 && nodesSelectionPlugin.getSelectedNodes()[0].getAttrs().nodeType === WEAVE_TEXT_NODE_TYPE && !window.weaveTextEditing[nodesSelectionPlugin.getSelectedNodes()[0].id()]) {
18675
+ e.preventDefault();
18676
+ this.triggerEditMode(nodesSelectionPlugin.getSelectedNodes()[0]);
18677
+ }
18678
+ }
18679
+ });
18680
+ text.on("dblclick dbltap", (e) => {
18681
+ e.cancelBubble = true;
18658
18682
  if (this.editing) return;
18659
18683
  if (!(this.isSelecting() && this.isNodeSelected(text))) return;
18660
18684
  const stage = this.instance.getStage();
@@ -18699,24 +18723,50 @@ var WeaveTextNode = class extends WeaveNode {
18699
18723
  }
18700
18724
  };
18701
18725
  }
18726
+ resizeTextAreaDOM(textNode) {
18727
+ const textArea = document.getElementById(textNode.id());
18728
+ if (!textArea) return;
18729
+ const stage = this.instance.getStage();
18730
+ const textPosition = textNode.absolutePosition();
18731
+ const position = {
18732
+ x: stage.container().offsetLeft + textPosition.x,
18733
+ y: stage.container().offsetTop + textPosition.y
18734
+ };
18735
+ textArea.style.top = position.y + "px";
18736
+ textArea.style.left = position.x + "px";
18737
+ textArea.style.width = textNode.getWidth() * textNode.getAbsoluteScale().x + "px";
18738
+ textArea.style.height = textNode.getHeight() * textNode.getAbsoluteScale().x + "px";
18739
+ textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
18740
+ }
18741
+ onZoomChangeHandler = (textNode) => () => {
18742
+ if (!this.editing) return;
18743
+ this.resizeTextAreaDOM(textNode);
18744
+ };
18745
+ onStageMoveHandler = (textNode) => () => {
18746
+ if (!this.editing) return;
18747
+ this.resizeTextAreaDOM(textNode);
18748
+ };
18702
18749
  createTextAreaDOM(textNode, position) {
18703
18750
  const stage = this.instance.getStage();
18704
18751
  const textArea = document.createElement("textarea");
18752
+ textArea.id = textNode.id();
18705
18753
  stage.container().appendChild(textArea);
18706
- window.weaveTextEditing = true;
18754
+ this.instance.addEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
18755
+ this.instance.addEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
18756
+ window.weaveTextEditing[textNode.id()] = "editing";
18707
18757
  textArea.value = textNode.text();
18708
18758
  textArea.id = textNode.id();
18709
18759
  textArea.style.position = "fixed";
18710
18760
  textArea.style.top = position.y + "px";
18711
18761
  textArea.style.left = position.x + "px";
18712
18762
  textArea.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
18713
- textArea.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
18763
+ textArea.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
18714
18764
  textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
18715
- textArea.style.border = "solid 1px rgba(0,0,255,0.5)";
18716
- textArea.style.padding = "0px";
18765
+ textArea.style.border = "solid 1px #1e40af";
18766
+ textArea.style.minHeight = "auto";
18717
18767
  textArea.style.margin = "0px";
18718
18768
  textArea.style.overflow = "hidden";
18719
- textArea.style.background = "rgba(255,255,255,0.5)";
18769
+ textArea.style.background = "transparent";
18720
18770
  textArea.style.outline = "none";
18721
18771
  textArea.style.resize = "none";
18722
18772
  textArea.style.lineHeight = `${textNode.lineHeight()}`;
@@ -18724,29 +18774,42 @@ var WeaveTextNode = class extends WeaveNode {
18724
18774
  textArea.style.transformOrigin = "left top";
18725
18775
  textArea.style.textAlign = textNode.align();
18726
18776
  textArea.style.color = `${textNode.fill()}`;
18777
+ textArea.onfocus = () => {
18778
+ textArea.style.height = "auto";
18779
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18780
+ textArea.setSelectionRange(textArea.value.length, textArea.value.length);
18781
+ };
18782
+ textArea.onkeydown = () => {
18783
+ textArea.style.height = "auto";
18784
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18785
+ };
18786
+ textArea.onkeyup = () => {
18787
+ textArea.style.height = "auto";
18788
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18789
+ };
18790
+ textArea.onwheel = (e) => {
18791
+ e.preventDefault();
18792
+ };
18793
+ textArea.oninput = () => {
18794
+ textArea.style.height = "auto";
18795
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18796
+ };
18727
18797
  const rotation = textNode.rotation();
18728
18798
  let transform = "";
18729
18799
  if (rotation) transform += "rotateZ(" + rotation + "deg)";
18730
- const px = 1;
18731
- const py = 2;
18732
- transform += "translateX(-" + px + "px)";
18733
- transform += "translateY(-" + py + "px)";
18800
+ const px = 0;
18801
+ const py = -3 * textNode.getAbsoluteScale().x;
18802
+ transform += "translateX(" + px + "px)";
18803
+ transform += "translateY(" + py + "px)";
18734
18804
  textArea.style.transform = transform;
18735
18805
  const handleKeyDown = (e) => {
18736
18806
  if (textArea && textNode) {
18737
- if (e.key === "Enter" && !e.shiftKey) {
18738
- textNode.text(textArea.value);
18739
- this.updateNode(textNode);
18740
- this.removeTextAreaDOM(textNode);
18741
- window.removeEventListener("click", handleOutsideClick);
18742
- return;
18743
- }
18744
- if (e.key === "Enter" && e.shiftKey) {
18807
+ if (e.key === "Enter") {
18745
18808
  if (textArea && textNode) try {
18746
18809
  textNode.text(textArea.value);
18747
18810
  textArea.style.width = textNode.width() * textNode.getAbsoluteScale().x + "px";
18748
18811
  textArea.style.height = "auto";
18749
- textArea.style.height = textArea.scrollHeight + textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
18812
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18750
18813
  textArea.tabIndex = 1;
18751
18814
  textArea.focus();
18752
18815
  } catch (ex) {
@@ -18755,20 +18818,24 @@ var WeaveTextNode = class extends WeaveNode {
18755
18818
  return;
18756
18819
  }
18757
18820
  if (e.key === "Escape") {
18821
+ textNode.width(parseFloat(textArea.style.width) * (1 / textNode.getAbsoluteScale().x));
18822
+ textNode.height((textArea.scrollHeight + 1.6) * (1 / textNode.getAbsoluteScale().x));
18823
+ textNode.text(textArea.value);
18824
+ this.updateNode(textNode);
18758
18825
  this.removeTextAreaDOM(textNode);
18826
+ this.instance.removeEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
18827
+ this.instance.removeEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
18759
18828
  window.removeEventListener("click", handleOutsideClick);
18760
18829
  return;
18761
18830
  }
18762
18831
  }
18763
18832
  };
18764
- const handleKeyUp = (e) => {
18833
+ const handleKeyUp = () => {
18765
18834
  textNode.text(textArea.value);
18766
18835
  if (textArea && textNode) {
18767
18836
  textArea.style.width = textNode.width() * textNode.getAbsoluteScale().x + "px";
18768
- if (!(e.key === "Enter" && e.shiftKey)) {
18769
- textArea.style.height = "auto";
18770
- textArea.style.height = textArea.scrollHeight + "px";
18771
- }
18837
+ textArea.style.height = "auto";
18838
+ textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
18772
18839
  }
18773
18840
  };
18774
18841
  textArea.addEventListener("keydown", handleKeyDown);
@@ -18801,7 +18868,7 @@ var WeaveTextNode = class extends WeaveNode {
18801
18868
  }
18802
18869
  removeTextAreaDOM(textNode) {
18803
18870
  const stage = this.instance.getStage();
18804
- window.weaveTextEditing = false;
18871
+ delete window.weaveTextEditing[textNode.id()];
18805
18872
  const textArea = document.getElementById(textNode.id());
18806
18873
  if (textArea) textArea.remove();
18807
18874
  textNode.visible(true);
@@ -18854,6 +18921,7 @@ const IMAGE_TOOL_STATE = {
18854
18921
  var WeaveImageToolAction = class extends WeaveAction {
18855
18922
  initialized = false;
18856
18923
  initialCursor = null;
18924
+ onPropsChange = void 0;
18857
18925
  update = void 0;
18858
18926
  constructor() {
18859
18927
  super();
@@ -18909,13 +18977,8 @@ var WeaveImageToolAction = class extends WeaveAction {
18909
18977
  if (this.state === IMAGE_TOOL_STATE.ADDING && tempImage) {
18910
18978
  const mousePos = stage.getRelativePointerPosition();
18911
18979
  tempImage.setAttrs({
18912
- ...this.props,
18913
- name: void 0,
18914
18980
  x: (mousePos?.x ?? 0) + 2,
18915
- y: (mousePos?.y ?? 0) + 2,
18916
- fill: "#ccccccff",
18917
- stroke: "#000000ff",
18918
- strokeWidth: 1
18981
+ y: (mousePos?.y ?? 0) + 2
18919
18982
  });
18920
18983
  const nodeHandler = this.instance.getNodeHandler("rectangle");
18921
18984
  this.instance.updateNode(nodeHandler.serialize(tempImage));
@@ -18940,6 +19003,7 @@ var WeaveImageToolAction = class extends WeaveAction {
18940
19003
  this.instance.emitEvent("onImageLoadEnd", void 0);
18941
19004
  if (this.imageId) this.props = {
18942
19005
  ...this.props,
19006
+ imageURL: this.imageURL,
18943
19007
  width: this.preloadImgs[this.imageId].width,
18944
19008
  height: this.preloadImgs[this.imageId].height
18945
19009
  };
@@ -18958,17 +19022,20 @@ var WeaveImageToolAction = class extends WeaveAction {
18958
19022
  stage.container().focus();
18959
19023
  if (this.imageId) {
18960
19024
  const mousePos = stage.getRelativePointerPosition();
18961
- const nodeHandler = this.instance.getNodeHandler("rectangle");
19025
+ const nodeHandler = this.instance.getNodeHandler("image");
18962
19026
  this.tempImageId = v4_default();
19027
+ const aspectRatio = this.preloadImgs[this.imageId].width / this.preloadImgs[this.imageId].height;
18963
19028
  const node = nodeHandler.create(this.tempImageId, {
18964
- ...this.props,
18965
19029
  x: (mousePos?.x ?? 0) + 5,
18966
19030
  y: (mousePos?.y ?? 0) + 5,
18967
- width: this.preloadImgs[this.imageId].width,
18968
- height: this.preloadImgs[this.imageId].height,
18969
- fill: "#ccccccff",
19031
+ width: 100 * aspectRatio,
19032
+ height: 100,
19033
+ opacity: 1,
19034
+ imageURL: this.imageURL,
18970
19035
  stroke: "#000000ff",
18971
- strokeWidth: 1
19036
+ strokeWidth: 0,
19037
+ strokeScaleEnabled: false,
19038
+ listening: false
18972
19039
  });
18973
19040
  this.instance.addNode(node, this.container?.getAttrs().id);
18974
19041
  }
@@ -19010,6 +19077,8 @@ var WeaveImageToolAction = class extends WeaveAction {
19010
19077
  if (!this.instance) throw new Error("Instance not defined");
19011
19078
  if (!this.initialized) this.setupEvents();
19012
19079
  this.cancelAction = cancelAction;
19080
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
19081
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
19013
19082
  if (params?.imageURL) {
19014
19083
  this.loadImage(params.imageURL);
19015
19084
  return;
@@ -19018,23 +19087,6 @@ var WeaveImageToolAction = class extends WeaveAction {
19018
19087
  this.addImage();
19019
19088
  return { finishUploadCallback: this.loadImage.bind(this) };
19020
19089
  }
19021
- onPropsChange() {
19022
- const stage = this.instance?.getStage();
19023
- if (stage) {
19024
- const tempImage = this.instance.getStage().findOne(`#${this.tempImageId}`);
19025
- if (tempImage) {
19026
- tempImage.setAttrs({
19027
- ...this.props,
19028
- name: void 0,
19029
- fill: "#ccccccff",
19030
- stroke: "#000000ff",
19031
- strokeWidth: 1
19032
- });
19033
- const nodeHandler = this.instance.getNodeHandler("rectangle");
19034
- this.instance.updateNode(nodeHandler.serialize(tempImage));
19035
- }
19036
- }
19037
- }
19038
19090
  cleanup() {
19039
19091
  const stage = this.instance.getStage();
19040
19092
  if (this.imageId) delete this.preloadImgs[this.imageId];
@@ -19725,7 +19777,7 @@ const WEAVE_STAGE_ZOOM_KEY = "stageZoom";
19725
19777
  var WeaveStageZoomPlugin = class extends WeavePlugin {
19726
19778
  getLayerName = void 0;
19727
19779
  initLayer = void 0;
19728
- padding = 100;
19780
+ padding = 175;
19729
19781
  defaultStep = 3;
19730
19782
  constructor(params) {
19731
19783
  super();
@@ -19903,18 +19955,16 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
19903
19955
  this.enabled = false;
19904
19956
  }
19905
19957
  initEvents() {
19906
- const stage = this.instance.getStage();
19907
- stage.container().addEventListener("keydown", (e) => {
19958
+ window.addEventListener("keydown", (e) => {
19908
19959
  if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
19909
19960
  });
19910
- stage.container().addEventListener("keyup", (e) => {
19961
+ window.addEventListener("keyup", (e) => {
19911
19962
  if (!(e.ctrlKey || e.metaKey)) this.isCtrlOrMetaPressed = false;
19912
19963
  });
19913
- stage.on("wheel", (e) => {
19914
- e.evt.preventDefault();
19964
+ window.addEventListener("wheel", (e) => {
19915
19965
  if (!this.enabled || !this.isCtrlOrMetaPressed) return;
19916
- if (e.evt.deltaY > 0) this.zoomOut();
19917
- if (e.evt.deltaY < 0) this.zoomIn();
19966
+ if (e.deltaY > 0) this.zoomOut();
19967
+ if (e.deltaY < 0) this.zoomIn();
19918
19968
  });
19919
19969
  }
19920
19970
  };
@@ -20298,6 +20348,8 @@ var WeaveRectangleToolAction = class extends WeaveAction {
20298
20348
  stage.container().tabIndex = 1;
20299
20349
  stage.container().focus();
20300
20350
  this.cancelAction = cancelAction;
20351
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
20352
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
20301
20353
  this.props = this.initProps();
20302
20354
  this.addRectangle();
20303
20355
  }
@@ -20510,6 +20562,8 @@ var WeavePenToolAction = class extends WeaveAction {
20510
20562
  stage.container().tabIndex = 1;
20511
20563
  stage.container().focus();
20512
20564
  this.cancelAction = cancelAction;
20565
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
20566
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
20513
20567
  this.props = this.initProps();
20514
20568
  this.addLine();
20515
20569
  }
@@ -20684,6 +20738,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
20684
20738
  stage.container().tabIndex = 1;
20685
20739
  stage.container().focus();
20686
20740
  this.cancelAction = cancel;
20741
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
20687
20742
  this.props = this.initProps();
20688
20743
  this.setState(BRUSH_TOOL_STATE.IDLE);
20689
20744
  stage.container().style.cursor = "crosshair";
@@ -20775,7 +20830,7 @@ var WeaveTextToolAction = class extends WeaveAction {
20775
20830
  text: "Your text here...",
20776
20831
  width: 300,
20777
20832
  fontSize: 20,
20778
- fontFamily: "NotoSansMono, monospace",
20833
+ fontFamily: "Arial, sans-serif",
20779
20834
  fill: "#000000ff",
20780
20835
  strokeEnabled: false,
20781
20836
  stroke: "#000000ff",
@@ -20794,11 +20849,19 @@ var WeaveTextToolAction = class extends WeaveAction {
20794
20849
  if (!this.instance) throw new Error("Instance not defined");
20795
20850
  if (!this.initialized) this.setupEvents();
20796
20851
  this.cancelAction = cancelAction;
20852
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
20853
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
20797
20854
  this.addText();
20798
20855
  }
20799
20856
  cleanup() {
20800
20857
  const stage = this.instance.getStage();
20801
20858
  stage.container().style.cursor = "default";
20859
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
20860
+ if (selectionPlugin) {
20861
+ const node$1 = stage.findOne(`#${this.textId}`);
20862
+ if (node$1) selectionPlugin.setSelectedNodes([node$1]);
20863
+ this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
20864
+ }
20802
20865
  const node = stage.findOne(`#${this.textId}`);
20803
20866
  if (node) node.getAttr("triggerEditMode")(node);
20804
20867
  this.initialCursor = null;
@@ -20896,6 +20959,8 @@ var WeaveFrameToolAction = class extends WeaveAction {
20896
20959
  stage.container().tabIndex = 1;
20897
20960
  stage.container().focus();
20898
20961
  this.cancelAction = cancelAction;
20962
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
20963
+ if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
20899
20964
  this.props = this.initProps(params);
20900
20965
  this.addFrame();
20901
20966
  }
@@ -21130,15 +21195,21 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
21130
21195
  if (!layer) return;
21131
21196
  const stage = this.instance.getStage();
21132
21197
  const stageXRound = this.round(stage.x(), this.config.gridSize) * -1;
21133
- const overflowX = 10 * this.config.gridSize;
21134
- const overflowY = 10 * this.config.gridSize;
21198
+ const overflowX = this.round(10 * this.config.gridSize, this.config.gridSize);
21199
+ const overflowY = this.round(10 * this.config.gridSize, this.config.gridSize);
21135
21200
  const pointsX = [];
21136
- for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push(i / stage.scaleX());
21201
+ for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push({
21202
+ real: i / stage.scaleX(),
21203
+ ref: i
21204
+ });
21137
21205
  const stageYRound = this.round(stage.y(), this.config.gridSize) * -1;
21138
21206
  const pointsY = [];
21139
- for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push(i / stage.scaleY());
21207
+ for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push({
21208
+ real: i / stage.scaleY(),
21209
+ ref: i
21210
+ });
21140
21211
  for (let index = 0; index < pointsX.length; index++) {
21141
- const point = pointsX[index];
21212
+ const { real: point, ref } = pointsX[index];
21142
21213
  let color = this.config.gridColor;
21143
21214
  if (point === 0) color = this.config.gridOriginColor;
21144
21215
  layer.add(new Line({
@@ -21149,12 +21220,12 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
21149
21220
  (-stage.y() + stage.height() + overflowY) / stage.scaleY()
21150
21221
  ],
21151
21222
  stroke: color,
21152
- strokeWidth: (isZeroOrClose(point % (10 * (this.config.gridSize / stage.scaleX()))) ? 2.5 : .5) / stage.scaleX(),
21223
+ strokeWidth: (isZeroOrClose(ref % (10 * this.config.gridSize)) ? 2.5 : .5) / stage.scaleX(),
21153
21224
  listening: false
21154
21225
  }));
21155
21226
  }
21156
21227
  for (let index = 0; index < pointsY.length; index++) {
21157
- const point = pointsY[index];
21228
+ const { real: point, ref } = pointsY[index];
21158
21229
  let color = this.config.gridColor;
21159
21230
  if (point === 0) color = this.config.gridOriginColor;
21160
21231
  layer.add(new Line({
@@ -21165,7 +21236,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
21165
21236
  point
21166
21237
  ],
21167
21238
  stroke: color,
21168
- strokeWidth: (isZeroOrClose(point % (10 * (this.config.gridSize / stage.scaleY()))) ? 2.5 : .5) / stage.scaleX(),
21239
+ strokeWidth: (isZeroOrClose(ref % (10 * this.config.gridSize)) ? 2.5 : .5) / stage.scaleX(),
21169
21240
  listening: false
21170
21241
  }));
21171
21242
  }
@@ -21174,20 +21245,26 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
21174
21245
  const layer = this.getLayer();
21175
21246
  if (!layer) return;
21176
21247
  const stage = this.instance.getStage();
21177
- const overflowX = Math.max(stage.width() * .2, 10 * this.config.gridSize);
21178
- const overflowY = Math.max(stage.height() * .2, 10 * this.config.gridSize);
21248
+ const overflowX = 10 * this.config.gridSize;
21249
+ const overflowY = 10 * this.config.gridSize;
21179
21250
  const stageXRound = this.round(stage.x(), this.config.gridSize) * -1;
21180
21251
  const pointsX = [];
21181
- for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push(i / stage.scaleX());
21252
+ for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push({
21253
+ real: i / stage.scaleX(),
21254
+ ref: i
21255
+ });
21182
21256
  const stageYRound = this.round(stage.y(), this.config.gridSize) * -1;
21183
21257
  const pointsY = [];
21184
- for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push(i / stage.scaleY());
21258
+ for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push({
21259
+ real: i / stage.scaleY(),
21260
+ ref: i
21261
+ });
21185
21262
  for (let indexX = 0; indexX < pointsX.length; indexX++) {
21186
- const pointX = pointsX[indexX];
21263
+ const { real: pointX, ref: refX } = pointsX[indexX];
21187
21264
  for (let indexY = 0; indexY < pointsY.length; indexY++) {
21188
- const pointY = pointsY[indexY];
21265
+ const { real: pointY, ref: refY } = pointsY[indexY];
21189
21266
  let color = this.config.gridColor;
21190
- if (pointX === 0 || pointY === 0) color = this.config.gridOriginColor;
21267
+ if (refX === 0 || refY === 0) color = this.config.gridOriginColor;
21191
21268
  layer.add(new Circle({
21192
21269
  x: pointX,
21193
21270
  y: pointY,
@@ -21322,6 +21399,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
21322
21399
  if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
21323
21400
  stage.x(stage.x() - deltaX);
21324
21401
  stage.y(stage.y() - deltaY);
21402
+ this.instance.emit("onStageMove", void 0);
21325
21403
  });
21326
21404
  stage.on("touchstart", (e) => {
21327
21405
  e.evt.preventDefault();
@@ -21343,12 +21421,13 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
21343
21421
  if (!this.enabled) return;
21344
21422
  stage.x(stage.x() - deltaX);
21345
21423
  stage.y(stage.y() - deltaY);
21424
+ this.instance.emit("onStageMove", void 0);
21346
21425
  });
21347
- stage.on("wheel", (e) => {
21348
- e.evt.preventDefault();
21426
+ window.addEventListener("wheel", (e) => {
21349
21427
  if (!this.enabled || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
21350
- stage.x(stage.x() - e.evt.deltaX);
21351
- stage.y(stage.y() - e.evt.deltaY);
21428
+ stage.x(stage.x() - e.deltaX);
21429
+ stage.y(stage.y() - e.deltaY);
21430
+ this.instance.emit("stageMove", void 0);
21352
21431
  });
21353
21432
  }
21354
21433
  enable() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inditextech/weave-sdk",
3
- "version": "0.11.0",
3
+ "version": "0.12.0",
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.11.0",
46
+ "@inditextech/weave-types": "0.12.0",
47
47
  "@syncedstore/core": "0.6.0",
48
48
  "canvas": "3.1.0",
49
49
  "konva": "9.3.20",