@inditextech/weave-sdk 0.44.0 → 0.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/sdk.cjs CHANGED
@@ -15665,25 +15665,28 @@ function clearContainerTargets(instance) {
15665
15665
  const containers = instance.getContainerNodes();
15666
15666
  for (const container of containers) container.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
15667
15667
  }
15668
- function checkIfOverContainer(instance, node) {
15669
- if (node instanceof konva.default.Transformer) {
15670
- const transformerNodes = node.nodes();
15671
- const containersInSelection = [];
15672
- for (const actualNode of transformerNodes) if (typeof actualNode.getAttrs().isContainerPrincipal !== "undefined" && actualNode.getAttrs().isContainerPrincipal) containersInSelection.push(actualNode);
15673
- const containersInSelectionSet = new Set(containersInSelection);
15674
- const uniqueContainersInSelection = Array.from(containersInSelectionSet);
15675
- if (uniqueContainersInSelection.length > 0) return void 0;
15676
- }
15677
- const intersectedNode = instance.nodeIntersectsContainerElement(node);
15678
- let nodeActualContainer = node.getParent();
15679
- if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
15668
+ function containerOverCursor(instance) {
15669
+ konva.default.hitOnDragEnabled = true;
15670
+ const stage = instance.getStage();
15671
+ const cursorPosition = stage.getRelativePointerPosition();
15672
+ if (!cursorPosition) return void 0;
15673
+ const nodesUnderPointer = new Set();
15674
+ stage.find("Shape").reverse().forEach((node) => {
15675
+ if (!node.isVisible() || !(node instanceof konva.default.Shape)) return;
15676
+ const shapeRect = node.getClientRect({ relativeTo: stage });
15677
+ if (cursorPosition.x >= shapeRect.x && cursorPosition.x <= shapeRect.x + shapeRect.width && cursorPosition.y >= shapeRect.y && cursorPosition.y <= shapeRect.y + shapeRect.height && node.getAttrs().nodeId) {
15678
+ const realNode = stage.findOne(`#${node.getAttrs().nodeId}`);
15679
+ if (realNode?.getAttrs().isContainerPrincipal) nodesUnderPointer.add(realNode);
15680
+ }
15681
+ });
15682
+ const nodes = Array.from(nodesUnderPointer);
15683
+ if (nodes.length === 0) return void 0;
15680
15684
  let layerToMove = void 0;
15681
- if (!node.getAttrs().containerId && intersectedNode && nodeActualContainer?.getAttrs().id !== intersectedNode.getAttrs().id) layerToMove = intersectedNode;
15685
+ if (nodes[0]?.getAttrs().containerId && nodes[0]?.getAttrs().isContainerPrincipal) layerToMove = nodes[0];
15682
15686
  return layerToMove;
15683
15687
  }
15684
- function moveNodeToContainer(instance, node) {
15688
+ function moveNodeToContainer(instance, node, containerToMove, invalidOriginsTypes = ["frame"]) {
15685
15689
  const stage = instance.getStage();
15686
- const nodeIntersected = instance.nodeIntersectsContainerElement(node);
15687
15690
  const isLocked = instance.allNodesLocked([node]);
15688
15691
  if (isLocked) return;
15689
15692
  let nodeActualContainer = node.getParent();
@@ -15694,8 +15697,7 @@ function moveNodeToContainer(instance, node) {
15694
15697
  if (!nodeActualContainer) return void 0;
15695
15698
  const actualContainerAttrs = nodeActualContainer.getAttrs();
15696
15699
  let layerToMove = void 0;
15697
- if (nodeIntersected && actualContainerAttrs.id !== nodeIntersected.getAttrs().id && !node.getAttrs().isContainerPrincipal) layerToMove = nodeIntersected;
15698
- if (!nodeIntersected && actualContainerAttrs.id !== __inditextech_weave_types.WEAVE_NODE_LAYER_ID) layerToMove = instance.getMainLayer();
15700
+ if (actualContainerAttrs.id !== containerToMove.getAttrs().id && !invalidOriginsTypes.includes(node.getAttrs().nodeType)) layerToMove = containerToMove;
15699
15701
  if (layerToMove && actualContainerAttrs.id !== layerToMove.getAttrs().id && actualContainerAttrs.id !== layerToMove.getAttrs().containerId) {
15700
15702
  const layerToMoveAttrs = layerToMove.getAttrs();
15701
15703
  const nodePos = node.getAbsolutePosition();
@@ -15766,7 +15768,7 @@ function getTargetedNode(instance) {
15766
15768
  let selectedGroup = void 0;
15767
15769
  const mousePos = stage.getPointerPosition();
15768
15770
  if (mousePos) {
15769
- const allInter = stage.getAllIntersections(mousePos);
15771
+ const allInter = stage.getAllIntersections(mousePos).reverse();
15770
15772
  if (allInter.length === 1) selectedGroup = instance.getInstanceRecursive(allInter[0]);
15771
15773
  else {
15772
15774
  const allInterContainersFiltered = allInter.filter((ele) => typeof ele.getAttrs().containerElement === "undefined");
@@ -15775,6 +15777,27 @@ function getTargetedNode(instance) {
15775
15777
  }
15776
15778
  return selectedGroup;
15777
15779
  }
15780
+ function hasImages(node) {
15781
+ if (node.getAttrs().nodeType === "image") return true;
15782
+ if (node.getAttrs().nodeType !== "group") return false;
15783
+ const nodes = node.find((node$1) => {
15784
+ return node$1.getAttrs().nodeType === "image";
15785
+ });
15786
+ if (nodes.length === 0) return false;
15787
+ else return true;
15788
+ }
15789
+ function hasFrames(node) {
15790
+ if (node.getAttrs().nodeType === "frame") return true;
15791
+ if (node.getAttrs().nodeType !== "group") return false;
15792
+ const nodes = node.find((node$1) => {
15793
+ return node$1.getAttrs().nodeType === "frame";
15794
+ });
15795
+ if (nodes.length === 0) return false;
15796
+ else return true;
15797
+ }
15798
+ function intersectArrays(arrays) {
15799
+ return arrays.reduce((acc, arr) => acc.filter((val) => arr.includes(val)), arrays[0]);
15800
+ }
15778
15801
 
15779
15802
  //#endregion
15780
15803
  //#region src/plugins/context-menu/context-menu.ts
@@ -15973,9 +15996,19 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
15973
15996
  rotationSnapTolerance: 3,
15974
15997
  ignoreStroke: true,
15975
15998
  flipEnabled: false,
15976
- keepRatio: false,
15999
+ keepRatio: true,
15977
16000
  useSingleNodeRotation: true,
15978
16001
  shouldOverdrawWholeArea: true,
16002
+ enabledAnchors: [
16003
+ "top-left",
16004
+ "top-center",
16005
+ "top-right",
16006
+ "middle-right",
16007
+ "middle-left",
16008
+ "bottom-left",
16009
+ "bottom-center",
16010
+ "bottom-right"
16011
+ ],
15979
16012
  anchorStyleFunc: (anchor) => {
15980
16013
  anchor.stroke("#27272aff");
15981
16014
  anchor.cornerRadius(12);
@@ -15992,17 +16025,17 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
15992
16025
  anchor.offsetX(4);
15993
16026
  }
15994
16027
  },
15995
- borderStroke: "#0074ffcc",
15996
- borderStrokeWidth: 1,
16028
+ borderStroke: "#1a1aff",
16029
+ borderStrokeWidth: 2,
15997
16030
  ...config?.selection
15998
16031
  },
15999
16032
  hover: {
16000
- borderStrokeWidth: 1,
16033
+ borderStrokeWidth: 2,
16001
16034
  ...config?.hover
16002
16035
  },
16003
16036
  selectionArea: {
16004
- fill: "#93c5fd40",
16005
- stroke: "#1e40afff",
16037
+ fill: "#1a1aff11",
16038
+ stroke: "#1a1aff",
16006
16039
  strokeWidth: 1,
16007
16040
  dash: [12, 4],
16008
16041
  ...config?.selectionArea
@@ -16037,6 +16070,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16037
16070
  this.initialized = false;
16038
16071
  this.enabled = false;
16039
16072
  this.pointers = {};
16073
+ this.selectionOriginalConfig = { ...this.config.selection };
16040
16074
  }
16041
16075
  getName() {
16042
16076
  return WEAVE_NODES_SELECTION_KEY;
@@ -16080,7 +16114,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16080
16114
  selectionLayer?.add(selectionRectangle);
16081
16115
  const tr = new konva.default.Transformer({
16082
16116
  id: "selectionTransformer",
16083
- ...this.config.selection
16117
+ ...this.selectionOriginalConfig
16084
16118
  });
16085
16119
  selectionLayer?.add(tr);
16086
16120
  const trHover = new konva.default.Transformer({
@@ -16143,16 +16177,16 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16143
16177
  this.didMove = true;
16144
16178
  e.cancelBubble = true;
16145
16179
  const selectedNodes = tr.nodes();
16146
- let hasFrames = false;
16180
+ let selectionContainsFrames = false;
16147
16181
  for (let i = 0; i < selectedNodes.length; i++) {
16148
16182
  const node = selectedNodes[i];
16149
- if (node.getAttrs().nodeType === "frame") hasFrames = hasFrames || true;
16183
+ selectionContainsFrames = selectionContainsFrames || hasFrames(node);
16150
16184
  node.updatePosition(node.getAbsolutePosition());
16151
16185
  }
16152
16186
  if (this.isSelecting() && selectedNodes.length > 1) {
16153
16187
  clearContainerTargets(this.instance);
16154
- const layerToMove = checkIfOverContainer(this.instance, e.target);
16155
- if (layerToMove && !hasFrames) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
16188
+ const layerToMove = containerOverCursor(this.instance);
16189
+ if (layerToMove && !selectionContainsFrames) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
16156
16190
  }
16157
16191
  tr.forceUpdate();
16158
16192
  };
@@ -16161,10 +16195,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16161
16195
  if (!this.didMove) return;
16162
16196
  e.cancelBubble = true;
16163
16197
  const selectedNodes = tr.nodes();
16164
- let hasFrames = false;
16198
+ let selectionContainsFrames = false;
16165
16199
  for (let i = 0; i < selectedNodes.length; i++) {
16166
16200
  const node = selectedNodes[i];
16167
- if (node.getAttrs().nodeType === "frame") hasFrames = hasFrames || true;
16201
+ selectionContainsFrames = selectionContainsFrames || hasFrames(node);
16168
16202
  node.updatePosition(node.getAbsolutePosition());
16169
16203
  }
16170
16204
  if (this.isSelecting() && tr.nodes().length > 1) {
@@ -16173,12 +16207,19 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16173
16207
  clearContainerTargets(this.instance);
16174
16208
  const toSelect = [];
16175
16209
  const toUpdate = [];
16210
+ const layerToMove = containerOverCursor(this.instance);
16176
16211
  const nodeUpdatePromise = (node) => {
16177
16212
  return new Promise((resolve) => {
16178
16213
  setTimeout(() => {
16179
16214
  clearContainerTargets(this.instance);
16180
- if (!hasFrames) moveNodeToContainer(this.instance, node);
16181
16215
  const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
16216
+ if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
16217
+ let containerToMove = this.instance.getMainLayer();
16218
+ if (layerToMove) {
16219
+ containerToMove = layerToMove;
16220
+ containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
16221
+ }
16222
+ if (containerToMove && !selectionContainsFrames) moveNodeToContainer(this.instance, node, containerToMove);
16182
16223
  if (!nodeHandler) return resolve();
16183
16224
  toSelect.push(node.getAttrs().id ?? "");
16184
16225
  toUpdate.push(nodeHandler.serialize(node));
@@ -16187,7 +16228,11 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16187
16228
  });
16188
16229
  };
16189
16230
  const promises = [];
16190
- for (let i = 0; i < selectedNodes.length; i++) promises.push(nodeUpdatePromise(selectedNodes[i]));
16231
+ for (let i = 0; i < selectedNodes.length; i++) {
16232
+ const nodeHandler = this.instance.getNodeHandler(selectedNodes[i].getAttrs().nodeType);
16233
+ if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(selectedNodes[i]));
16234
+ promises.push(nodeUpdatePromise(selectedNodes[i]));
16235
+ }
16191
16236
  Promise.allSettled(promises).then((results) => {
16192
16237
  if (results.length > 0) this.instance.updateNodes(toUpdate);
16193
16238
  stage.container().style.cursor = actualCursor;
@@ -16476,25 +16521,30 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16476
16521
  const frameNode = node;
16477
16522
  if (!frameNode.getAttrs().locked) selectedNodes.add(node);
16478
16523
  });
16479
- const nodesArray = [...selectedNodes];
16480
- if (nodesArray.length > 1 && !this.config.behaviors.multipleSelection.enabled || nodesArray.length === 1 && !this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors([]);
16481
- if (nodesArray.length > 1 && this.config.behaviors.multipleSelection.enabled || nodesArray.length === 1 && this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
16482
- if (nodesArray.length === 1) {
16483
- this.tr.setAttrs({
16484
- ...this.config.selection,
16485
- ...nodesArray[0].getTransformerProperties()
16486
- });
16487
- this.tr.forceUpdate();
16488
- } else {
16489
- this.tr.setAttrs({ ...this.config.selection });
16490
- this.tr.forceUpdate();
16491
- }
16492
16524
  this.selecting = false;
16493
- this.tr.nodes(nodesArray);
16525
+ this.tr.nodes([...selectedNodes]);
16526
+ this.handleBehaviors();
16494
16527
  this.triggerSelectedNodesEvent();
16495
16528
  stage.container().tabIndex = 1;
16496
16529
  stage.container().focus();
16497
16530
  });
16531
+ this.instance.addEventListener("onStateChange", () => {
16532
+ this.syncSelection();
16533
+ });
16534
+ this.instance.addEventListener("onUndoManagerStatusChange", () => {
16535
+ this.syncSelection();
16536
+ });
16537
+ }
16538
+ syncSelection() {
16539
+ const newSelectedNodes = [];
16540
+ const actualSelectedNodes = this.tr.nodes();
16541
+ for (const node of actualSelectedNodes) {
16542
+ const existNode = this.instance.getStage().findOne(`#${node.getAttrs().id}`);
16543
+ if (existNode) newSelectedNodes.push(existNode);
16544
+ }
16545
+ this.tr.nodes([...newSelectedNodes]);
16546
+ this.tr.forceUpdate();
16547
+ this.triggerSelectedNodesEvent();
16498
16548
  }
16499
16549
  getSelectionPlugin() {
16500
16550
  const selectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -16577,19 +16627,22 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16577
16627
  }
16578
16628
  handleBehaviors() {
16579
16629
  const nodes = this.getSelectedNodes();
16580
- const nodesSelected = this.getSelectedNodes().length;
16630
+ const nodesSelected = nodes.length;
16581
16631
  if (nodesSelected > 1 && !this.config.behaviors.multipleSelection.enabled || nodesSelected === 1 && !this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors([]);
16582
16632
  if (nodesSelected > 1 && this.config.behaviors.multipleSelection.enabled || nodesSelected === 1 && this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
16583
- if (nodesSelected === 1) {
16584
- this.tr.setAttrs({
16585
- ...this.config.selection,
16586
- ...nodes[0].getTransformerProperties()
16587
- });
16588
- this.tr.forceUpdate();
16589
- } else if (nodesSelected > 1) {
16590
- this.tr.setAttrs({ ...this.config.selection });
16591
- this.tr.forceUpdate();
16592
- }
16633
+ const anchorsArrays = [];
16634
+ for (const node of nodes) anchorsArrays.push(node.allowedAnchors());
16635
+ let transformerAttrs = {};
16636
+ if (nodesSelected === 1) transformerAttrs = {
16637
+ ...this.selectionOriginalConfig,
16638
+ enabledAnchors: nodes[0].allowedAnchors()
16639
+ };
16640
+ else if (nodesSelected > 1) transformerAttrs = {
16641
+ ...this.selectionOriginalConfig,
16642
+ enabledAnchors: intersectArrays(anchorsArrays)
16643
+ };
16644
+ this.tr.setAttrs(transformerAttrs);
16645
+ this.tr.forceUpdate();
16593
16646
  }
16594
16647
  setSelectedNodes(nodes) {
16595
16648
  this.tr.setNodes(nodes);
@@ -16636,6 +16689,9 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
16636
16689
  const snappingPlugin = this.instance.getPlugin("nodesSnapping");
16637
16690
  return snappingPlugin;
16638
16691
  }
16692
+ getSelectorConfig() {
16693
+ return this.selectionOriginalConfig;
16694
+ }
16639
16695
  };
16640
16696
 
16641
16697
  //#endregion
@@ -16859,10 +16915,7 @@ const augmentKonvaStageClass = () => {
16859
16915
  const augmentKonvaNodeClass = (config) => {
16860
16916
  const { transform } = config ?? {};
16861
16917
  konva.default.Node.prototype.getTransformerProperties = function() {
16862
- return {
16863
- WEAVE_DEFAULT_TRANSFORM_PROPERTIES: __inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
16864
- ...transform
16865
- };
16918
+ return { ...transform };
16866
16919
  };
16867
16920
  konva.default.Node.prototype.getRealClientRect = function(config$1) {
16868
16921
  return this.getClientRect(config$1);
@@ -16901,7 +16954,19 @@ var WeaveNode = class {
16901
16954
  }
16902
16955
  setupDefaultNodeAugmentation(node) {
16903
16956
  node.getTransformerProperties = () => {
16904
- return __inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES;
16957
+ return this.defaultGetTransformerProperties({});
16958
+ };
16959
+ node.allowedAnchors = () => {
16960
+ return [
16961
+ "top-left",
16962
+ "top-center",
16963
+ "top-right",
16964
+ "middle-right",
16965
+ "middle-left",
16966
+ "bottom-left",
16967
+ "bottom-center",
16968
+ "bottom-right"
16969
+ ];
16905
16970
  };
16906
16971
  node.movedToContainer = () => {};
16907
16972
  node.updatePosition = () => {};
@@ -16913,10 +16978,13 @@ var WeaveNode = class {
16913
16978
  return false;
16914
16979
  }
16915
16980
  scaleReset(node) {
16916
- node.width(Math.max(5, node.width() * node.scaleX()));
16917
- node.height(Math.max(5, node.height() * node.scaleY()));
16918
- node.scaleX(1);
16919
- node.scaleY(1);
16981
+ const scale = node.scale();
16982
+ node.width(Math.max(5, node.width() * scale.x));
16983
+ node.height(Math.max(5, node.height() * scale.y));
16984
+ node.scale({
16985
+ x: 1,
16986
+ y: 1
16987
+ });
16920
16988
  }
16921
16989
  setHoverState(node) {
16922
16990
  const selectionPlugin = this.getSelectionPlugin();
@@ -16962,7 +17030,6 @@ var WeaveNode = class {
16962
17030
  const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
16963
17031
  if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
16964
17032
  if (nodesSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesSnappingPlugin.evaluateGuidelines(e);
16965
- if (this.isSelecting() && this.isNodeSelected(node$1)) this.scaleReset(node$1);
16966
17033
  };
16967
17034
  node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
16968
17035
  node.on("transformend", (e) => {
@@ -16973,6 +17040,7 @@ var WeaveNode = class {
16973
17040
  const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
16974
17041
  if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
16975
17042
  if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
17043
+ this.scaleReset(node$1);
16976
17044
  const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
16977
17045
  if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
16978
17046
  });
@@ -17013,8 +17081,8 @@ var WeaveNode = class {
17013
17081
  }
17014
17082
  if (this.isSelecting() && this.isNodeSelected(node) && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
17015
17083
  clearContainerTargets(this.instance);
17016
- const layerToMove = checkIfOverContainer(this.instance, e.target);
17017
- if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
17084
+ const layerToMove = containerOverCursor(this.instance);
17085
+ if (layerToMove && !hasFrames(node)) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
17018
17086
  }
17019
17087
  };
17020
17088
  node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
@@ -17030,8 +17098,13 @@ var WeaveNode = class {
17030
17098
  clearContainerTargets(this.instance);
17031
17099
  const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
17032
17100
  if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
17033
- const containerToMove = moveNodeToContainer(this.instance, e.target);
17034
- if (containerToMove) return;
17101
+ const layerToMove = containerOverCursor(this.instance);
17102
+ let containerToMove = this.instance.getMainLayer();
17103
+ if (layerToMove) {
17104
+ containerToMove = layerToMove;
17105
+ containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
17106
+ }
17107
+ if (containerToMove) moveNodeToContainer(this.instance, e.target, containerToMove);
17035
17108
  this.instance.updateNode(this.serialize(node));
17036
17109
  }
17037
17110
  });
@@ -17149,6 +17222,18 @@ var WeaveNode = class {
17149
17222
  if (instance.getAttrs().nodeId === false) realInstance = this.instance.getInstanceRecursive(instance);
17150
17223
  return realInstance.getAttrs().locked ?? false;
17151
17224
  }
17225
+ defaultGetTransformerProperties(nodeTransformConfig) {
17226
+ const selectionPlugin = this.instance.getPlugin("nodesSelection");
17227
+ let transformProperties = {};
17228
+ if (selectionPlugin) transformProperties = {
17229
+ ...transformProperties,
17230
+ ...selectionPlugin.getSelectorConfig()
17231
+ };
17232
+ return {
17233
+ ...transformProperties,
17234
+ ...nodeTransformConfig
17235
+ };
17236
+ }
17152
17237
  };
17153
17238
 
17154
17239
  //#endregion
@@ -17531,25 +17616,36 @@ var WeaveGroupsManager = class {
17531
17616
  allNodesInSameParent(nodes) {
17532
17617
  const stage = this.instance.getStage();
17533
17618
  if (nodes.length === 0) return {
17534
- allInSame: false,
17535
- nodeId: void 0,
17619
+ realNodes: [],
17536
17620
  parentId: void 0
17537
17621
  };
17538
- let allInSame = true;
17539
- const nodeInstance = stage.findOne(`#${nodes[0].props.id}`);
17540
- const parentId = nodeInstance?.getParent()?.getAttrs().id;
17622
+ const framesIds = [];
17623
+ nodes.forEach((node) => {
17624
+ const nodeInstance$1 = stage.findOne(`#${node.key}`);
17625
+ if (nodeInstance$1 && nodeInstance$1.getAttrs().nodeType === "frame") framesIds.push(node.key);
17626
+ });
17627
+ let realNodes = [];
17628
+ if (framesIds.length > 0) for (const node of nodes) {
17629
+ const nodeInstance$1 = stage.findOne(`#${node.key}`);
17630
+ if (framesIds.includes(node.key)) realNodes.push(node);
17631
+ if (!framesIds.includes(node.key) && nodeInstance$1 && !framesIds.includes(nodeInstance$1.getParent()?.getAttrs().nodeId)) realNodes.push(node);
17632
+ }
17633
+ if (realNodes.length === 0) realNodes = nodes;
17634
+ const parentIds = [];
17635
+ for (const node of realNodes) {
17636
+ const nodeInstance$1 = stage.findOne(`#${node.key}`);
17637
+ if (nodeInstance$1) {
17638
+ const parentId$1 = nodeInstance$1.getParent()?.getAttrs().id;
17639
+ if (parentId$1 && !parentIds.includes(parentId$1)) parentIds.push(parentId$1);
17640
+ }
17641
+ }
17642
+ const nodeInstance = stage.findOne(`#${realNodes[0].props.id}`);
17541
17643
  const nodeId = nodeInstance?.getParent()?.getAttrs().nodeId;
17542
- for (const node of nodes) {
17543
- const nodeInstance$1 = stage.findOne(`#${node.props.id}`);
17544
- const nodeParentId = nodeInstance$1?.getParent()?.getAttrs().id;
17545
- if (nodeParentId !== parentId) {
17546
- allInSame = false;
17547
- break;
17548
- }
17549
- }
17644
+ let parentId = nodeInstance?.getParent()?.getAttrs().id;
17645
+ if (parentIds.length === 1 && nodeId) parentId = nodeId;
17646
+ if (parentIds.length > 1) parentId = void 0;
17550
17647
  return {
17551
- allInSame,
17552
- nodeId,
17648
+ realNodes,
17553
17649
  parentId
17554
17650
  };
17555
17651
  }
@@ -17562,11 +17658,7 @@ var WeaveGroupsManager = class {
17562
17658
  this.logger.warn({ nodes }, "State is empty, cannot group nodes");
17563
17659
  return;
17564
17660
  }
17565
- const { allInSame, nodeId, parentId } = this.allNodesInSameParent(nodes);
17566
- if (!allInSame) {
17567
- this.logger.warn({ nodes }, "Not all nodes are in the same container, cannot group them");
17568
- return;
17569
- }
17661
+ const { realNodes, parentId } = this.allNodesInSameParent(nodes);
17570
17662
  const selectionPlugin = this.instance.getPlugin("nodesSelection");
17571
17663
  if (selectionPlugin) {
17572
17664
  const tr = selectionPlugin.getTransformer();
@@ -17585,10 +17677,10 @@ var WeaveGroupsManager = class {
17585
17677
  parentLayer?.add(groupInstance);
17586
17678
  const groupHandler = this.instance.getNodeHandler("group");
17587
17679
  if (groupHandler) {
17588
- const groupNode = groupHandler.create(groupId, { draggable: true });
17589
- this.instance.addNode(groupNode, nodeId ?? parentNodeId);
17680
+ const groupNode$1 = groupHandler.create(groupId, { draggable: true });
17681
+ this.instance.addNode(groupNode$1, parentNodeId);
17590
17682
  }
17591
- const nodesWithZIndex = nodes.map((node) => {
17683
+ const nodesWithZIndex = realNodes.map((node) => {
17592
17684
  const instance = mainLayer?.findOne(`#${node.key}`);
17593
17685
  return {
17594
17686
  node,
@@ -17636,12 +17728,14 @@ var WeaveGroupsManager = class {
17636
17728
  }
17637
17729
  this.instance.removeNodes(sortedNodesByZIndex);
17638
17730
  groupInstance.destroy();
17731
+ const groupNode = stage.findOne(`#${groupId}`);
17732
+ if (groupHandler && groupNode) this.instance.updateNode(groupHandler.serialize(groupNode));
17639
17733
  setTimeout(() => {
17640
- const groupNode = stage.findOne(`#${groupId}`);
17734
+ const groupNode$1 = stage.findOne(`#${groupId}`);
17641
17735
  const selectionPlugin$1 = this.instance.getPlugin("nodesSelection");
17642
- if (groupNode && selectionPlugin$1) {
17736
+ if (groupNode$1 && selectionPlugin$1) {
17643
17737
  const tr = selectionPlugin$1.getTransformer();
17644
- selectionPlugin$1.setSelectedNodes([groupNode]);
17738
+ selectionPlugin$1.setSelectedNodes([groupNode$1]);
17645
17739
  tr.show();
17646
17740
  tr.forceUpdate();
17647
17741
  }
@@ -17671,18 +17765,40 @@ var WeaveGroupsManager = class {
17671
17765
  let newChildId = void 0;
17672
17766
  const children = [...konvaGroup.getChildren()];
17673
17767
  for (const child of children) {
17674
- const nodePos = child.getAbsolutePosition();
17675
- const nodeRotation = child.getAbsoluteRotation();
17768
+ const absPos = child.getAbsolutePosition();
17769
+ const absScale = child.getAbsoluteScale();
17770
+ const absRotation = child.getAbsoluteRotation();
17676
17771
  child.moveTo(newLayer);
17677
- child.setAbsolutePosition(nodePos);
17678
- child.rotation(nodeRotation);
17772
+ child.position({
17773
+ x: 0,
17774
+ y: 0
17775
+ });
17776
+ child.scale({
17777
+ x: 1,
17778
+ y: 1
17779
+ });
17780
+ child.rotation(0);
17781
+ child.offset({
17782
+ x: 0,
17783
+ y: 0
17784
+ });
17785
+ child.setAbsolutePosition(absPos);
17786
+ child.scale({
17787
+ x: absScale.x / stage.scaleX(),
17788
+ y: absScale.y / stage.scaleY()
17789
+ });
17790
+ child.rotation(absRotation);
17679
17791
  child.zIndex(newLayerChildrenAmount - 1 + child.zIndex());
17680
- child.setAttr("id", v4_default());
17681
17792
  child.setAttr("draggable", true);
17682
17793
  newChildId = child.getAttrs().id;
17683
17794
  const handler = this.instance.getNodeHandler(child.getAttrs().nodeType);
17684
17795
  if (handler) {
17685
17796
  const node = handler.serialize(child);
17797
+ const newNodeId = v4_default();
17798
+ const oldId = node.key;
17799
+ node.key = newNodeId;
17800
+ node.props.id = newNodeId;
17801
+ for (const prop of Object.keys(node.props)) if (typeof node.props[prop] === "string") node.props[prop] = node.props[prop].replace(oldId, newNodeId);
17686
17802
  this.instance.addNode(node, nodeId ?? newLayer.getAttrs().id);
17687
17803
  }
17688
17804
  child.destroy();
@@ -17698,6 +17814,19 @@ var WeaveGroupsManager = class {
17698
17814
  if (firstElement && selectionPlugin) selectionPlugin.setSelectedNodes([firstElement]);
17699
17815
  }, 0);
17700
17816
  }
17817
+ extractTransformFromMatrix(m) {
17818
+ const a = m[0], b = m[1], c = m[2], d = m[3], e = m[4], f = m[5];
17819
+ const scaleX = Math.sqrt(a * a + b * b);
17820
+ const scaleY = Math.sqrt(c * c + d * d);
17821
+ const rotation = Math.atan2(b, a) * (180 / Math.PI);
17822
+ return {
17823
+ x: e,
17824
+ y: f,
17825
+ scaleX,
17826
+ scaleY,
17827
+ rotation
17828
+ };
17829
+ }
17701
17830
  };
17702
17831
 
17703
17832
  //#endregion
@@ -18489,13 +18618,7 @@ var WeaveStateManager = class {
18489
18618
  target[key] = [...sourceArr];
18490
18619
  return;
18491
18620
  }
18492
- while (tgtArr.length > sourceArr.length) tgtArr.pop();
18493
- for (let i = 0; i < sourceArr.length; i++) {
18494
- const srcItem = sourceArr[i];
18495
- const tgtItem = tgtArr[i];
18496
- if (this.isObject(srcItem) && this.isObject(tgtItem)) this.deepSyncSyncedStore(tgtItem, srcItem);
18497
- else if (tgtItem !== srcItem) tgtArr[i] = srcItem;
18498
- }
18621
+ target[key] = [...sourceArr];
18499
18622
  }
18500
18623
  isObject(val) {
18501
18624
  return typeof val === "object" && val !== null;
@@ -18678,7 +18801,7 @@ var WeaveRegisterManager = class {
18678
18801
 
18679
18802
  //#endregion
18680
18803
  //#region package.json
18681
- var version = "0.44.0";
18804
+ var version = "0.45.0";
18682
18805
 
18683
18806
  //#endregion
18684
18807
  //#region src/managers/setup.ts
@@ -19517,10 +19640,21 @@ var WeaveGroupNode = class extends WeaveNode {
19517
19640
  constructor(params) {
19518
19641
  super();
19519
19642
  const { config } = params ?? {};
19520
- this.config = { transform: {
19521
- ...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
19522
- ...config?.transform
19523
- } };
19643
+ this.config = { transform: { ...config?.transform } };
19644
+ }
19645
+ groupHasFrames(group) {
19646
+ const frameNodes = group.find((node) => {
19647
+ return node.getAttrs().nodeType === "frame";
19648
+ });
19649
+ if (frameNodes.length === 0) return false;
19650
+ else return true;
19651
+ }
19652
+ groupHasImages(group) {
19653
+ const imageNodes = group.find((node) => {
19654
+ return node.getAttrs().nodeType === "image";
19655
+ });
19656
+ if (imageNodes.length === 0) return false;
19657
+ else return true;
19524
19658
  }
19525
19659
  onRender(props) {
19526
19660
  const group = new konva.default.Group({
@@ -19530,7 +19664,19 @@ var WeaveGroupNode = class extends WeaveNode {
19530
19664
  });
19531
19665
  this.setupDefaultNodeAugmentation(group);
19532
19666
  group.getTransformerProperties = () => {
19533
- return this.config.transform;
19667
+ const baseConfig = this.defaultGetTransformerProperties(this.config.transform);
19668
+ return {
19669
+ ...baseConfig,
19670
+ enabledAnchors: group.allowedAnchors()
19671
+ };
19672
+ };
19673
+ group.allowedAnchors = () => {
19674
+ const stage = this.instance.getStage();
19675
+ const actualGroup = stage.findOne(`#${group.id()}`);
19676
+ const children = actualGroup.getChildren();
19677
+ const anchorsArrays = [];
19678
+ for (const child of children) anchorsArrays.push(child.allowedAnchors());
19679
+ return intersectArrays(anchorsArrays);
19534
19680
  };
19535
19681
  this.setupDefaultNodeEvents(group);
19536
19682
  return group;
@@ -19556,10 +19702,15 @@ var WeaveGroupNode = class extends WeaveNode {
19556
19702
  ...attrs,
19557
19703
  id: attrs.id ?? "",
19558
19704
  nodeType: attrs.nodeType,
19559
- children: childrenMapped
19705
+ children: childrenMapped,
19706
+ x: instance.x() ?? 0,
19707
+ y: instance.y() ?? 0,
19708
+ scaleX: instance.scaleX() ?? 1,
19709
+ scaleY: instance.scaleY() ?? 1
19560
19710
  }
19561
19711
  };
19562
19712
  }
19713
+ scaleReset() {}
19563
19714
  };
19564
19715
 
19565
19716
  //#endregion
@@ -19573,19 +19724,17 @@ var WeaveRectangleNode = class extends WeaveNode {
19573
19724
  constructor(params) {
19574
19725
  super();
19575
19726
  const { config } = params ?? {};
19576
- this.config = { transform: {
19577
- ...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
19578
- ...config?.transform
19579
- } };
19727
+ this.config = { transform: { ...config?.transform } };
19580
19728
  }
19581
19729
  onRender(props) {
19582
19730
  const rectangle = new konva.default.Rect({
19583
19731
  ...props,
19584
- name: "node"
19732
+ name: "node",
19733
+ strokeScaleEnabled: false
19585
19734
  });
19586
19735
  this.setupDefaultNodeAugmentation(rectangle);
19587
19736
  rectangle.getTransformerProperties = () => {
19588
- return this.config.transform;
19737
+ return this.defaultGetTransformerProperties(this.config.transform);
19589
19738
  };
19590
19739
  this.setupDefaultNodeEvents(rectangle);
19591
19740
  return rectangle;
@@ -19595,6 +19744,15 @@ var WeaveRectangleNode = class extends WeaveNode {
19595
19744
  const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
19596
19745
  if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
19597
19746
  }
19747
+ scaleReset(node) {
19748
+ const scale = node.scale();
19749
+ node.width(Math.max(5, node.width() * scale.x));
19750
+ node.height(Math.max(5, node.height() * scale.y));
19751
+ node.scale({
19752
+ x: 1,
19753
+ y: 1
19754
+ });
19755
+ }
19598
19756
  };
19599
19757
 
19600
19758
  //#endregion
@@ -19608,10 +19766,7 @@ var WeaveEllipseNode = class extends WeaveNode {
19608
19766
  constructor(params) {
19609
19767
  super();
19610
19768
  const { config } = params ?? {};
19611
- this.config = { transform: {
19612
- ...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
19613
- ...config?.transform
19614
- } };
19769
+ this.config = { transform: { ...config?.transform } };
19615
19770
  }
19616
19771
  onRender(props) {
19617
19772
  const ellipse = new konva.default.Ellipse({
@@ -19624,8 +19779,9 @@ var WeaveEllipseNode = class extends WeaveNode {
19624
19779
  ellipse.getTransformerProperties = () => {
19625
19780
  const stage = this.instance.getStage();
19626
19781
  const node = stage.findOne(`#${props.id}`);
19782
+ const baseConfig = this.defaultGetTransformerProperties(this.config.transform);
19627
19783
  if (node && node.getAttrs().keepAspectRatio) return {
19628
- ...this.config.transform,
19784
+ ...baseConfig,
19629
19785
  enabledAnchors: [
19630
19786
  "top-left",
19631
19787
  "top-right",
@@ -19634,7 +19790,27 @@ var WeaveEllipseNode = class extends WeaveNode {
19634
19790
  ],
19635
19791
  keepRatio: true
19636
19792
  };
19637
- return this.config.transform;
19793
+ return baseConfig;
19794
+ };
19795
+ ellipse.allowedAnchors = () => {
19796
+ const stage = this.instance.getStage();
19797
+ const actualEllipse = stage.findOne(`#${ellipse.id()}`);
19798
+ if (actualEllipse.getAttrs().keepAspectRatio) return [
19799
+ "top-left",
19800
+ "top-right",
19801
+ "bottom-left",
19802
+ "bottom-right"
19803
+ ];
19804
+ return [
19805
+ "top-left",
19806
+ "top-center",
19807
+ "top-right",
19808
+ "middle-right",
19809
+ "middle-left",
19810
+ "bottom-left",
19811
+ "bottom-center",
19812
+ "bottom-right"
19813
+ ];
19638
19814
  };
19639
19815
  this.setupDefaultNodeEvents(ellipse);
19640
19816
  return ellipse;
@@ -19649,11 +19825,12 @@ var WeaveEllipseNode = class extends WeaveNode {
19649
19825
  }
19650
19826
  }
19651
19827
  scaleReset(node) {
19652
- const ellipseNode = node;
19653
- ellipseNode.radiusX(Math.max(5, ellipseNode.radiusX() * ellipseNode.scaleX()));
19654
- ellipseNode.radiusY(Math.max(5, ellipseNode.radiusY() * ellipseNode.scaleY()));
19655
- node.scaleX(1);
19656
- node.scaleY(1);
19828
+ node.radiusX(Math.max(5, node.radiusX() * node.scaleX()));
19829
+ node.radiusY(Math.max(5, node.radiusY() * node.scaleY()));
19830
+ node.scale({
19831
+ x: 1,
19832
+ y: 1
19833
+ });
19657
19834
  }
19658
19835
  };
19659
19836
 
@@ -19668,10 +19845,7 @@ var WeaveLineNode = class extends WeaveNode {
19668
19845
  constructor(params) {
19669
19846
  super();
19670
19847
  const { config } = params ?? {};
19671
- this.config = { transform: {
19672
- ...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
19673
- ...config?.transform
19674
- } };
19848
+ this.config = { transform: { ...config?.transform } };
19675
19849
  }
19676
19850
  onRender(props) {
19677
19851
  const line = new konva.default.Line({
@@ -19680,7 +19854,7 @@ var WeaveLineNode = class extends WeaveNode {
19680
19854
  });
19681
19855
  this.setupDefaultNodeAugmentation(line);
19682
19856
  line.getTransformerProperties = () => {
19683
- return this.config.transform;
19857
+ return this.defaultGetTransformerProperties(this.config.transform);
19684
19858
  };
19685
19859
  this.setupDefaultNodeEvents(line);
19686
19860
  return line;
@@ -19691,23 +19865,19 @@ var WeaveLineNode = class extends WeaveNode {
19691
19865
  if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
19692
19866
  }
19693
19867
  scaleReset(node) {
19694
- if (node.getAttrs().nodeType === "line") {
19695
- const lineNode = node;
19696
- const oldPoints = lineNode.points();
19697
- const newPoints = [];
19698
- for (let i = 0; i < oldPoints.length / 2; i++) {
19699
- const point = {
19700
- x: oldPoints[i * 2] * lineNode.scaleX(),
19701
- y: oldPoints[i * 2 + 1] * lineNode.scaleY()
19702
- };
19703
- newPoints.push(point.x, point.y);
19704
- }
19705
- lineNode.points(newPoints);
19868
+ const scale = node.scale();
19869
+ const oldPoints = node.points();
19870
+ const newPoints = [];
19871
+ for (let i = 0; i < oldPoints.length; i += 2) {
19872
+ const x = oldPoints[i] * scale.x;
19873
+ const y = oldPoints[i + 1] * scale.y;
19874
+ newPoints.push(x, y);
19706
19875
  }
19707
- node.width(Math.max(5, node.width() * node.scaleX()));
19708
- node.height(Math.max(5, node.height() * node.scaleY()));
19709
- node.scaleX(1);
19710
- node.scaleY(1);
19876
+ node.points(newPoints);
19877
+ node.scale({
19878
+ x: 1,
19879
+ y: 1
19880
+ });
19711
19881
  }
19712
19882
  };
19713
19883
 
@@ -19748,10 +19918,7 @@ var WeaveTextNode = class extends WeaveNode {
19748
19918
  constructor(params) {
19749
19919
  super();
19750
19920
  const { config } = params ?? {};
19751
- this.config = { transform: {
19752
- ...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
19753
- ...config?.transform
19754
- } };
19921
+ this.config = { transform: { ...config?.transform } };
19755
19922
  this.editing = false;
19756
19923
  this.textArea = null;
19757
19924
  }
@@ -19770,18 +19937,40 @@ var WeaveTextNode = class extends WeaveNode {
19770
19937
  text.getTransformerProperties = () => {
19771
19938
  const stage = this.instance.getStage();
19772
19939
  const actualText = stage.findOne(`#${text.id()}`);
19940
+ const baseConfig = this.defaultGetTransformerProperties(this.config.transform);
19773
19941
  if (actualText) {
19774
19942
  const attrs = actualText.getAttrs();
19775
19943
  if (attrs.layout === TEXT_LAYOUT.AUTO_ALL) return {
19944
+ ...baseConfig,
19776
19945
  resizeEnabled: false,
19777
19946
  enabledAnchors: []
19778
19947
  };
19779
19948
  if (attrs.layout === TEXT_LAYOUT.AUTO_HEIGHT) return {
19949
+ ...baseConfig,
19780
19950
  resizeEnabled: true,
19781
19951
  enabledAnchors: ["middle-right", "middle-left"]
19782
19952
  };
19783
19953
  }
19784
- return this.config.transform;
19954
+ return baseConfig;
19955
+ };
19956
+ text.allowedAnchors = () => {
19957
+ const stage = this.instance.getStage();
19958
+ const actualText = stage.findOne(`#${text.id()}`);
19959
+ if (actualText) {
19960
+ const attrs = actualText.getAttrs();
19961
+ if (attrs.layout === TEXT_LAYOUT.AUTO_ALL) return [];
19962
+ if (attrs.layout === TEXT_LAYOUT.AUTO_HEIGHT) return ["middle-right", "middle-left"];
19963
+ }
19964
+ return [
19965
+ "top-left",
19966
+ "top-center",
19967
+ "top-right",
19968
+ "middle-right",
19969
+ "middle-left",
19970
+ "bottom-left",
19971
+ "bottom-center",
19972
+ "bottom-right"
19973
+ ];
19785
19974
  };
19786
19975
  text.setAttrs({ measureMultilineText: this.measureMultilineText(text) });
19787
19976
  this.setupDefaultNodeEvents(text);
@@ -20336,7 +20525,7 @@ var WeaveImageToolAction = class extends WeaveAction {
20336
20525
  image: this.preloadImgs[this.imageId],
20337
20526
  stroke: "#000000ff",
20338
20527
  strokeWidth: 0,
20339
- strokeScaleEnabled: true,
20528
+ strokeScaleEnabled: false,
20340
20529
  listening: false
20341
20530
  });
20342
20531
  this.instance.getMainLayer()?.add(this.tempImageNode);
@@ -20366,7 +20555,7 @@ var WeaveImageToolAction = class extends WeaveAction {
20366
20555
  imageURL: this.imageURL,
20367
20556
  stroke: "#000000ff",
20368
20557
  strokeWidth: 0,
20369
- strokeScaleEnabled: true,
20558
+ strokeScaleEnabled: false,
20370
20559
  imageWidth: this.preloadImgs[this.imageId].width,
20371
20560
  imageHeight: this.preloadImgs[this.imageId].height,
20372
20561
  imageInfo: {
@@ -20780,10 +20969,7 @@ var WeaveImageNode = class extends WeaveNode {
20780
20969
  this.lastTapTime = 0;
20781
20970
  this.config = {
20782
20971
  crossOrigin: config?.crossOrigin ?? "anonymous",
20783
- transform: {
20784
- ...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
20785
- ...config?.transform
20786
- }
20972
+ transform: { ...config?.transform }
20787
20973
  };
20788
20974
  this.imageCrop = null;
20789
20975
  this.cachedCropInfo = {};
@@ -20865,7 +21051,15 @@ var WeaveImageNode = class extends WeaveNode {
20865
21051
  this.cachedCropInfo[image$1.getAttrs().id ?? ""] = void 0;
20866
21052
  };
20867
21053
  image.getTransformerProperties = () => {
20868
- return this.config.transform;
21054
+ return this.defaultGetTransformerProperties(this.config.transform);
21055
+ };
21056
+ image.allowedAnchors = () => {
21057
+ return [
21058
+ "top-left",
21059
+ "top-right",
21060
+ "bottom-left",
21061
+ "bottom-right"
21062
+ ];
20869
21063
  };
20870
21064
  const imagePlaceholder = new konva.default.Rect({
20871
21065
  ...groupImageProps,
@@ -20896,7 +21090,7 @@ var WeaveImageNode = class extends WeaveNode {
20896
21090
  rotation: 0,
20897
21091
  width: 0,
20898
21092
  height: 0,
20899
- strokeScaleEnabled: true,
21093
+ strokeScaleEnabled: false,
20900
21094
  draggable: false,
20901
21095
  visible: false,
20902
21096
  name: void 0
@@ -21115,18 +21309,49 @@ var WeaveImageNode = class extends WeaveNode {
21115
21309
  return imageToolAction;
21116
21310
  }
21117
21311
  scaleReset(node) {
21312
+ const scale = node.scale();
21118
21313
  const widthNotNormalized = node.width();
21119
21314
  const heightNotNormalized = node.height();
21120
- node.width(Math.max(5, node.width() * node.scaleX()));
21121
- node.height(Math.max(5, node.height() * node.scaleY()));
21122
21315
  const uncroppedWidth = node.getAttrs().uncroppedImage ? node.getAttrs().uncroppedImage.width : widthNotNormalized;
21123
21316
  const uncroppedHeight = node.getAttrs().uncroppedImage ? node.getAttrs().uncroppedImage.height : heightNotNormalized;
21124
21317
  node.setAttrs({ uncroppedImage: {
21125
21318
  width: uncroppedWidth * node.scaleX(),
21126
21319
  height: uncroppedHeight * node.scaleY()
21127
21320
  } });
21128
- node.scaleX(1);
21129
- node.scaleY(1);
21321
+ const placeholder = node.findOne(`#${node.getAttrs().id}-placeholder`);
21322
+ const internalImage = node.findOne(`#${node.getAttrs().id}-image`);
21323
+ const cropGroup = node.findOne(`#${node.getAttrs().id}-cropGroup`);
21324
+ if (placeholder) {
21325
+ placeholder.width(Math.max(5, placeholder.width() * placeholder.scaleX()));
21326
+ placeholder.height(Math.max(5, placeholder.height() * placeholder.scaleY()));
21327
+ placeholder.scale({
21328
+ x: 1,
21329
+ y: 1
21330
+ });
21331
+ }
21332
+ if (internalImage) {
21333
+ internalImage.width(Math.max(5, internalImage.width() * internalImage.scaleX()));
21334
+ internalImage.height(Math.max(5, internalImage.height() * internalImage.scaleY()));
21335
+ internalImage.scale({
21336
+ x: 1,
21337
+ y: 1
21338
+ });
21339
+ }
21340
+ if (cropGroup) {
21341
+ cropGroup.width(Math.max(5, cropGroup.width() * cropGroup.scaleX()));
21342
+ cropGroup.height(Math.max(5, cropGroup.height() * cropGroup.scaleY()));
21343
+ cropGroup.scale({
21344
+ x: 1,
21345
+ y: 1
21346
+ });
21347
+ }
21348
+ node.width(Math.max(5, node.width() * scale.x));
21349
+ node.height(Math.max(5, node.height() * scale.y));
21350
+ node.scale({
21351
+ x: 1,
21352
+ y: 1
21353
+ });
21354
+ this.instance.getMainLayer()?.batchDraw();
21130
21355
  }
21131
21356
  };
21132
21357
 
@@ -21141,10 +21366,7 @@ var WeaveStarNode = class extends WeaveNode {
21141
21366
  constructor(params) {
21142
21367
  super();
21143
21368
  const { config } = params ?? {};
21144
- this.config = { transform: {
21145
- ...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
21146
- ...config?.transform
21147
- } };
21369
+ this.config = { transform: { ...config?.transform } };
21148
21370
  }
21149
21371
  onRender(props) {
21150
21372
  const star = new konva.default.Star({
@@ -21157,9 +21379,10 @@ var WeaveStarNode = class extends WeaveNode {
21157
21379
  this.setupDefaultNodeAugmentation(star);
21158
21380
  star.getTransformerProperties = () => {
21159
21381
  const stage = this.instance.getStage();
21382
+ const baseConfig = this.defaultGetTransformerProperties(this.config.transform);
21160
21383
  const node = stage.findOne(`#${props.id}`);
21161
21384
  if (node && node.getAttrs().keepAspectRatio) return {
21162
- ...this.config.transform,
21385
+ ...baseConfig,
21163
21386
  enabledAnchors: [
21164
21387
  "top-left",
21165
21388
  "top-right",
@@ -21168,7 +21391,27 @@ var WeaveStarNode = class extends WeaveNode {
21168
21391
  ],
21169
21392
  keepRatio: true
21170
21393
  };
21171
- return this.config.transform;
21394
+ return baseConfig;
21395
+ };
21396
+ star.allowedAnchors = () => {
21397
+ const stage = this.instance.getStage();
21398
+ const actualStar = stage.findOne(`#${star.id()}`);
21399
+ if (actualStar.getAttrs().keepAspectRatio) return [
21400
+ "top-left",
21401
+ "top-right",
21402
+ "bottom-left",
21403
+ "bottom-right"
21404
+ ];
21405
+ return [
21406
+ "top-left",
21407
+ "top-center",
21408
+ "top-right",
21409
+ "middle-right",
21410
+ "middle-left",
21411
+ "bottom-left",
21412
+ "bottom-center",
21413
+ "bottom-right"
21414
+ ];
21172
21415
  };
21173
21416
  this.setupDefaultNodeEvents(star);
21174
21417
  return star;
@@ -21183,11 +21426,12 @@ var WeaveStarNode = class extends WeaveNode {
21183
21426
  }
21184
21427
  }
21185
21428
  scaleReset(node) {
21186
- const starNode = node;
21187
- starNode.innerRadius(Math.max(5, starNode.innerRadius() * starNode.scaleX()));
21188
- starNode.outerRadius(Math.max(5, starNode.outerRadius() * starNode.scaleY()));
21189
- node.scaleX(1);
21190
- node.scaleY(1);
21429
+ node.innerRadius(Math.max(5, node.innerRadius() * node.scaleX()));
21430
+ node.outerRadius(Math.max(5, node.outerRadius() * node.scaleY()));
21431
+ node.scale({
21432
+ x: 1,
21433
+ y: 1
21434
+ });
21191
21435
  }
21192
21436
  };
21193
21437
 
@@ -21202,10 +21446,7 @@ var WeaveArrowNode = class extends WeaveNode {
21202
21446
  constructor(params) {
21203
21447
  super();
21204
21448
  const { config } = params ?? {};
21205
- this.config = { transform: {
21206
- ...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
21207
- ...config?.transform
21208
- } };
21449
+ this.config = { transform: { ...config?.transform } };
21209
21450
  }
21210
21451
  onRender(props) {
21211
21452
  const line = new konva.default.Arrow({
@@ -21215,7 +21456,7 @@ var WeaveArrowNode = class extends WeaveNode {
21215
21456
  });
21216
21457
  this.setupDefaultNodeAugmentation(line);
21217
21458
  line.getTransformerProperties = () => {
21218
- return this.config.transform;
21459
+ return this.defaultGetTransformerProperties(this.config.transform);
21219
21460
  };
21220
21461
  this.setupDefaultNodeEvents(line);
21221
21462
  return line;
@@ -21226,23 +21467,22 @@ var WeaveArrowNode = class extends WeaveNode {
21226
21467
  if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
21227
21468
  }
21228
21469
  scaleReset(node) {
21229
- if (node.getAttrs().nodeType === "arrow") {
21230
- const arrowNode = node;
21231
- const oldPoints = arrowNode.points();
21232
- const newPoints = [];
21233
- for (let i = 0; i < oldPoints.length / 2; i++) {
21234
- const point = {
21235
- x: oldPoints[i * 2] * arrowNode.scaleX(),
21236
- y: oldPoints[i * 2 + 1] * arrowNode.scaleY()
21237
- };
21238
- newPoints.push(point.x, point.y);
21239
- }
21240
- arrowNode.points(newPoints);
21470
+ const oldPoints = node.points();
21471
+ const newPoints = [];
21472
+ for (let i = 0; i < oldPoints.length / 2; i++) {
21473
+ const point = {
21474
+ x: oldPoints[i * 2] * node.scaleX(),
21475
+ y: oldPoints[i * 2 + 1] * node.scaleY()
21476
+ };
21477
+ newPoints.push(point.x, point.y);
21241
21478
  }
21479
+ node.points(newPoints);
21242
21480
  node.width(Math.max(5, node.width() * node.scaleX()));
21243
21481
  node.height(Math.max(5, node.height() * node.scaleY()));
21244
- node.scaleX(1);
21245
- node.scaleY(1);
21482
+ node.scale({
21483
+ x: 1,
21484
+ y: 1
21485
+ });
21246
21486
  }
21247
21487
  };
21248
21488
 
@@ -21257,10 +21497,7 @@ var WeaveRegularPolygonNode = class extends WeaveNode {
21257
21497
  constructor(params) {
21258
21498
  super();
21259
21499
  const { config } = params ?? {};
21260
- this.config = { transform: {
21261
- ...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
21262
- ...config?.transform
21263
- } };
21500
+ this.config = { transform: { ...config?.transform } };
21264
21501
  }
21265
21502
  onRender(props) {
21266
21503
  const regularPolygon = new konva.default.RegularPolygon({
@@ -21271,8 +21508,9 @@ var WeaveRegularPolygonNode = class extends WeaveNode {
21271
21508
  });
21272
21509
  this.setupDefaultNodeAugmentation(regularPolygon);
21273
21510
  regularPolygon.getTransformerProperties = () => {
21511
+ const baseConfig = this.defaultGetTransformerProperties(this.config.transform);
21274
21512
  return {
21275
- ...this.config.transform,
21513
+ ...baseConfig,
21276
21514
  enabledAnchors: [
21277
21515
  "top-left",
21278
21516
  "top-right",
@@ -21282,6 +21520,14 @@ var WeaveRegularPolygonNode = class extends WeaveNode {
21282
21520
  keepRatio: true
21283
21521
  };
21284
21522
  };
21523
+ regularPolygon.allowedAnchors = () => {
21524
+ return [
21525
+ "top-left",
21526
+ "top-right",
21527
+ "bottom-left",
21528
+ "bottom-right"
21529
+ ];
21530
+ };
21285
21531
  this.setupDefaultNodeEvents(regularPolygon);
21286
21532
  return regularPolygon;
21287
21533
  }
@@ -21298,10 +21544,11 @@ var WeaveRegularPolygonNode = class extends WeaveNode {
21298
21544
  }
21299
21545
  }
21300
21546
  scaleReset(node) {
21301
- const regularPolygonNode = node;
21302
- regularPolygonNode.radius(Math.max(5, regularPolygonNode.radius() * regularPolygonNode.scaleX()));
21303
- node.scaleX(1);
21304
- node.scaleY(1);
21547
+ node.radius(Math.max(5, node.radius() * node.scaleX()));
21548
+ node.scale({
21549
+ x: 1,
21550
+ y: 1
21551
+ });
21305
21552
  }
21306
21553
  };
21307
21554
 
@@ -21328,7 +21575,7 @@ const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
21328
21575
  rotateEnabled: false,
21329
21576
  resizeEnabled: false,
21330
21577
  enabledAnchors: [],
21331
- borderStrokeWidth: 1,
21578
+ borderStrokeWidth: 2,
21332
21579
  padding: 0
21333
21580
  }
21334
21581
  };
@@ -21384,6 +21631,7 @@ var WeaveFrameNode = class extends WeaveNode {
21384
21631
  fill: "transparent",
21385
21632
  draggable: true,
21386
21633
  clip: void 0,
21634
+ allowScaling: false,
21387
21635
  name: "node containerCapable"
21388
21636
  });
21389
21637
  this.setupDefaultNodeAugmentation(frame);
@@ -21393,7 +21641,7 @@ var WeaveFrameNode = class extends WeaveNode {
21393
21641
  y: 0,
21394
21642
  width: props.frameWidth,
21395
21643
  height: props.frameHeight,
21396
- strokeScaleEnabled: true,
21644
+ strokeScaleEnabled: false,
21397
21645
  draggable: false
21398
21646
  });
21399
21647
  frame.add(frameInternalGroup);
@@ -21405,7 +21653,7 @@ var WeaveFrameNode = class extends WeaveNode {
21405
21653
  width: props.frameWidth,
21406
21654
  stroke: borderColor,
21407
21655
  strokeWidth: borderWidth,
21408
- strokeScaleEnabled: true,
21656
+ strokeScaleEnabled: false,
21409
21657
  shadowForStrokeEnabled: false,
21410
21658
  height: props.frameHeight,
21411
21659
  fill: "#ffffffff",
@@ -21426,7 +21674,7 @@ var WeaveFrameNode = class extends WeaveNode {
21426
21674
  text: props.title,
21427
21675
  fill: fontColor,
21428
21676
  strokeWidth: 0,
21429
- strokeScaleEnabled: true,
21677
+ strokeScaleEnabled: false,
21430
21678
  listening: false,
21431
21679
  draggable: false
21432
21680
  });
@@ -21436,7 +21684,10 @@ var WeaveFrameNode = class extends WeaveNode {
21436
21684
  text.height(textHeight);
21437
21685
  frameInternalGroup.add(text);
21438
21686
  frame.getTransformerProperties = () => {
21439
- return this.config.transform;
21687
+ return this.defaultGetTransformerProperties(this.config.transform);
21688
+ };
21689
+ frame.allowedAnchors = () => {
21690
+ return [];
21440
21691
  };
21441
21692
  const frameInternal = new konva.default.Group({
21442
21693
  id: `${id}-group-internal`,
@@ -21445,7 +21696,7 @@ var WeaveFrameNode = class extends WeaveNode {
21445
21696
  y: borderWidth,
21446
21697
  width: props.frameWidth - borderWidth * 2,
21447
21698
  height: props.frameHeight - borderWidth * 2,
21448
- strokeScaleEnabled: true,
21699
+ strokeScaleEnabled: false,
21449
21700
  clipFunc: (ctx) => {
21450
21701
  const width = (frameInternal.width() + borderWidth) * frameInternal.scaleX();
21451
21702
  const height = (frameInternal.height() + borderWidth) * frameInternal.scaleY();
@@ -21485,6 +21736,7 @@ var WeaveFrameNode = class extends WeaveNode {
21485
21736
  ctx.fillStrokeShape(shape);
21486
21737
  },
21487
21738
  fill: "transparent",
21739
+ nodeId: id,
21488
21740
  id: `${id}-container-area`,
21489
21741
  listening: false,
21490
21742
  draggable: false
@@ -21591,6 +21843,7 @@ var WeaveFrameNode = class extends WeaveNode {
21591
21843
  }
21592
21844
  };
21593
21845
  }
21846
+ scaleReset() {}
21594
21847
  };
21595
21848
 
21596
21849
  //#endregion
@@ -21604,10 +21857,7 @@ var WeaveStrokeNode = class extends WeaveNode {
21604
21857
  constructor(params) {
21605
21858
  super();
21606
21859
  const { config } = params ?? {};
21607
- this.config = { transform: {
21608
- ...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
21609
- ...config?.transform
21610
- } };
21860
+ this.config = { transform: { ...config?.transform } };
21611
21861
  }
21612
21862
  drawStroke(strokeElements, context, shape) {
21613
21863
  context.strokeStyle = shape.getAttrs().stroke ?? "black";
@@ -21652,7 +21902,7 @@ var WeaveStrokeNode = class extends WeaveNode {
21652
21902
  });
21653
21903
  this.setupDefaultNodeAugmentation(stroke);
21654
21904
  stroke.getTransformerProperties = () => {
21655
- return this.config.transform;
21905
+ return this.defaultGetTransformerProperties(this.config.transform);
21656
21906
  };
21657
21907
  this.setupDefaultNodeEvents(stroke);
21658
21908
  return stroke;
@@ -21677,8 +21927,10 @@ var WeaveStrokeNode = class extends WeaveNode {
21677
21927
  strokeNode.setAttrs({ strokeElements: newPoints });
21678
21928
  node.width(Math.max(5, node.width() * node.scaleX()));
21679
21929
  node.height(Math.max(5, node.height() * node.scaleY()));
21680
- node.scaleX(1);
21681
- node.scaleY(1);
21930
+ node.scale({
21931
+ x: 1,
21932
+ y: 1
21933
+ });
21682
21934
  }
21683
21935
  serialize(instance) {
21684
21936
  const attrs = instance.getAttrs();
@@ -24236,7 +24488,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
24236
24488
  this.tempRectNode = new konva.default.Rect({
24237
24489
  ...this.props,
24238
24490
  id: this.rectId,
24239
- strokeScaleEnabled: true,
24491
+ strokeScaleEnabled: false,
24240
24492
  x: this.clickPoint?.x ?? 0,
24241
24493
  y: this.clickPoint?.y ?? 0,
24242
24494
  width: 0,
@@ -24438,7 +24690,7 @@ var WeaveEllipseToolAction = class extends WeaveAction {
24438
24690
  if (nodeHandler) {
24439
24691
  const node = nodeHandler.create(this.ellipseId, {
24440
24692
  ...this.props,
24441
- strokeScaleEnabled: true,
24693
+ strokeScaleEnabled: false,
24442
24694
  x: this.clickPoint?.x ?? 0 + this.props.radiusX,
24443
24695
  y: this.clickPoint?.y ?? 0 + this.props.radiusY,
24444
24696
  radiusX: 0,
@@ -24638,7 +24890,7 @@ var WeavePenToolAction = class extends WeaveAction {
24638
24890
  this.tempMainLineNode = new konva.default.Line({
24639
24891
  ...this.props,
24640
24892
  id: this.lineId,
24641
- strokeScaleEnabled: true,
24893
+ strokeScaleEnabled: false,
24642
24894
  x: this.clickPoint?.x ?? 0,
24643
24895
  y: this.clickPoint?.y ?? 0,
24644
24896
  points: [0, 0]
@@ -24648,7 +24900,7 @@ var WeavePenToolAction = class extends WeaveAction {
24648
24900
  x: this.clickPoint?.x ?? 0,
24649
24901
  y: this.clickPoint?.y ?? 0,
24650
24902
  radius: 5 / stage.scaleX(),
24651
- strokeScaleEnabled: true,
24903
+ strokeScaleEnabled: false,
24652
24904
  stroke: "#cccccc",
24653
24905
  strokeWidth: 0,
24654
24906
  fill: "#cccccc"
@@ -24659,7 +24911,7 @@ var WeavePenToolAction = class extends WeaveAction {
24659
24911
  id: this.tempLineId,
24660
24912
  x: this.clickPoint?.x ?? 0,
24661
24913
  y: this.clickPoint?.y ?? 0,
24662
- strokeScaleEnabled: true,
24914
+ strokeScaleEnabled: false,
24663
24915
  points: [0, 0]
24664
24916
  });
24665
24917
  this.measureContainer?.add(this.tempLineNode);
@@ -24667,7 +24919,7 @@ var WeavePenToolAction = class extends WeaveAction {
24667
24919
  x: this.clickPoint?.x ?? 0,
24668
24920
  y: this.clickPoint?.y ?? 0,
24669
24921
  radius: 5 / stage.scaleX(),
24670
- strokeScaleEnabled: true,
24922
+ strokeScaleEnabled: false,
24671
24923
  stroke: "#cccccc",
24672
24924
  strokeWidth: 0,
24673
24925
  fill: "#cccccc"
@@ -24891,7 +25143,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
24891
25143
  if (nodeHandler) {
24892
25144
  const node = nodeHandler.create(this.strokeId, {
24893
25145
  ...this.props,
24894
- strokeScaleEnabled: true,
25146
+ strokeScaleEnabled: false,
24895
25147
  x: 0,
24896
25148
  y: 0,
24897
25149
  width: 0,
@@ -25213,7 +25465,7 @@ var WeaveStarToolAction = class extends WeaveAction {
25213
25465
  if (nodeHandler) {
25214
25466
  const node = nodeHandler.create(this.starId, {
25215
25467
  ...this.props,
25216
- strokeScaleEnabled: true,
25468
+ strokeScaleEnabled: false,
25217
25469
  x: this.clickPoint?.x ?? 0 + this.props.outerRadius,
25218
25470
  y: this.clickPoint?.y ?? 0 + this.props.outerRadius,
25219
25471
  numPoints: 5,
@@ -25419,7 +25671,7 @@ var WeaveArrowToolAction = class extends WeaveAction {
25419
25671
  this.tempMainArrowNode = new konva.default.Line({
25420
25672
  ...this.props,
25421
25673
  id: this.arrowId,
25422
- strokeScaleEnabled: true,
25674
+ strokeScaleEnabled: false,
25423
25675
  x: this.clickPoint?.x ?? 0,
25424
25676
  y: this.clickPoint?.y ?? 0,
25425
25677
  points: [0, 0]
@@ -25429,7 +25681,7 @@ var WeaveArrowToolAction = class extends WeaveAction {
25429
25681
  x: this.clickPoint?.x ?? 0,
25430
25682
  y: this.clickPoint?.y ?? 0,
25431
25683
  radius: 5 / stage.scaleX(),
25432
- strokeScaleEnabled: true,
25684
+ strokeScaleEnabled: false,
25433
25685
  stroke: "#cccccc",
25434
25686
  strokeWidth: 0,
25435
25687
  fill: "#cccccc"
@@ -25438,7 +25690,7 @@ var WeaveArrowToolAction = class extends WeaveAction {
25438
25690
  this.tempArrowNode = new konva.default.Arrow({
25439
25691
  ...this.props,
25440
25692
  id: this.tempArrowId,
25441
- strokeScaleEnabled: true,
25693
+ strokeScaleEnabled: false,
25442
25694
  x: this.clickPoint?.x ?? 0,
25443
25695
  y: this.clickPoint?.y ?? 0,
25444
25696
  points: [0, 0]
@@ -25448,7 +25700,7 @@ var WeaveArrowToolAction = class extends WeaveAction {
25448
25700
  x: this.clickPoint?.x ?? 0,
25449
25701
  y: this.clickPoint?.y ?? 0,
25450
25702
  radius: 5 / stage.scaleX(),
25451
- strokeScaleEnabled: true,
25703
+ strokeScaleEnabled: false,
25452
25704
  stroke: "#cccccc",
25453
25705
  strokeWidth: 0,
25454
25706
  fill: "#cccccc"
@@ -25666,7 +25918,7 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
25666
25918
  if (nodeHandler) {
25667
25919
  const node = nodeHandler.create(this.regularPolygonId, {
25668
25920
  ...this.props,
25669
- strokeScaleEnabled: true,
25921
+ strokeScaleEnabled: false,
25670
25922
  x: (this.clickPoint?.x ?? 0) + this.props.radius,
25671
25923
  y: (this.clickPoint?.y ?? 0) + this.props.radius,
25672
25924
  radius: 0
@@ -27754,11 +28006,14 @@ exports.WeaveUsersPointersPlugin = WeaveUsersPointersPlugin
27754
28006
  exports.WeaveUsersSelectionPlugin = WeaveUsersSelectionPlugin
27755
28007
  exports.WeaveZoomInToolAction = WeaveZoomInToolAction
27756
28008
  exports.WeaveZoomOutToolAction = WeaveZoomOutToolAction
27757
- exports.checkIfOverContainer = checkIfOverContainer
27758
28009
  exports.clearContainerTargets = clearContainerTargets
28010
+ exports.containerOverCursor = containerOverCursor
27759
28011
  exports.getBoundingBox = getBoundingBox
27760
28012
  exports.getContrastTextColor = getContrastTextColor
27761
28013
  exports.getTargetedNode = getTargetedNode
28014
+ exports.hasFrames = hasFrames
28015
+ exports.hasImages = hasImages
28016
+ exports.intersectArrays = intersectArrays
27762
28017
  exports.moveNodeToContainer = moveNodeToContainer
27763
28018
  exports.resetScale = resetScale
27764
28019
  exports.stringToColor = stringToColor