@inditextech/weave-sdk 3.7.0 → 3.7.2

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 (7) hide show
  1. package/dist/sdk.js +54 -52
  2. package/dist/sdk.node.js +54 -52
  3. package/dist/types.d.ts +2 -0
  4. package/dist/types.d.ts.map +1 -1
  5. package/dist/types.js +54 -52
  6. package/dist/types.js.map +1 -1
  7. package/package.json +2 -2
package/dist/sdk.js CHANGED
@@ -22022,7 +22022,7 @@ var WeaveRegisterManager = class {
22022
22022
 
22023
22023
  //#endregion
22024
22024
  //#region package.json
22025
- var version = "3.7.0";
22025
+ var version = "3.7.2";
22026
22026
 
22027
22027
  //#endregion
22028
22028
  //#region src/managers/setup.ts
@@ -25125,7 +25125,14 @@ var WeaveTextNode = class extends WeaveNode {
25125
25125
  const clonedText = actNode.clone();
25126
25126
  clonedText.setAttr("triggerEditMode", void 0);
25127
25127
  clonedText.setAttr("cancelEditMode", void 0);
25128
- this.instance.updateNode(this.serialize(clonedText));
25128
+ if (this.createNode && actNode.getAttrs().text !== "") {
25129
+ const actualContainer = actNode.getParent();
25130
+ actNode.destroy();
25131
+ const serializedNode = this.serialize(clonedText);
25132
+ this.instance.addNode(serializedNode, actualContainer?.getAttrs().id);
25133
+ } else if (this.createNode && actNode.getAttrs().text === "") actNode.destroy();
25134
+ else this.instance.updateNode(this.serialize(clonedText));
25135
+ this.createNode = false;
25129
25136
  clonedText.destroy();
25130
25137
  }
25131
25138
  }
@@ -25225,6 +25232,7 @@ var WeaveTextNode = class extends WeaveNode {
25225
25232
  else this.getNodesSelectionPlugin()?.getTransformer()?.keepRatio(false);
25226
25233
  if ([TEXT_LAYOUT.AUTO_HEIGHT, TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) && ["middle-right", "middle-left"].includes(actualAnchor ?? "")) {
25227
25234
  text.wrap("word");
25235
+ text.scaleY(1);
25228
25236
  text.height(void 0);
25229
25237
  }
25230
25238
  e.cancelBubble = true;
@@ -25250,7 +25258,7 @@ var WeaveTextNode = class extends WeaveNode {
25250
25258
  text.setAttr("shouldUpdateOnTransform", false);
25251
25259
  text.getLayer()?.batchDraw();
25252
25260
  };
25253
- text.on("transform", (0, import_lodash.throttle)(handleTextTransform, DEFAULT_THROTTLE_MS));
25261
+ text.on("transform", handleTextTransform);
25254
25262
  const handleTransformEnd = () => {
25255
25263
  this.instance.emitEvent("onTransform", null);
25256
25264
  let definedSmartWidth = false;
@@ -25279,6 +25287,7 @@ var WeaveTextNode = class extends WeaveNode {
25279
25287
  definedSmartWidth = true;
25280
25288
  text.width(Math.ceil(text.width() * text.scaleX()));
25281
25289
  text.scaleX(1);
25290
+ text.scaleY(1);
25282
25291
  text.height(void 0);
25283
25292
  text.getLayer()?.batchDraw();
25284
25293
  text.height(Math.ceil(text.height()));
@@ -25293,7 +25302,7 @@ var WeaveTextNode = class extends WeaveNode {
25293
25302
  handleTransformEnd();
25294
25303
  });
25295
25304
  this.instance.addEventListener("onNodeRenderedAdded", (node) => {
25296
- if (node.id() === text.id() && node.getParent() !== text.getParent()) text.getAttr("cancelEditMode")?.();
25305
+ if (node.id() === text.id() && node.getParent() !== text.getParent() && this.editing) text.getAttr("cancelEditMode")?.();
25297
25306
  });
25298
25307
  if (!this.instance.isServerSide() && !this.keyPressHandler) {
25299
25308
  this.keyPressHandler = this.handleKeyPress.bind(this);
@@ -25302,14 +25311,6 @@ var WeaveTextNode = class extends WeaveNode {
25302
25311
  return text;
25303
25312
  }
25304
25313
  onUpdate(nodeInstance, nextProps) {
25305
- const actualFontFamily = nodeInstance.getAttrs().fontFamily;
25306
- const actualFontSize = nodeInstance.getAttrs().fontSize;
25307
- const actualFontStyle = nodeInstance.getAttrs().fontStyle;
25308
- const actualFontVariant = nodeInstance.getAttrs().fontVariant;
25309
- const actualTextDecoration = nodeInstance.getAttrs().textDecoration;
25310
- const actualLineHeight = nodeInstance.getAttrs().lineHeight;
25311
- let updateNeeded = false;
25312
- if (actualFontFamily !== nextProps.fontFamily || actualFontSize !== nextProps.fontSize || actualFontStyle !== nextProps.fontStyle || actualFontVariant !== nextProps.fontVariant || actualTextDecoration !== nextProps.textDecoration || actualLineHeight !== nextProps.lineHeight) updateNeeded = true;
25313
25314
  nodeInstance.setAttrs({
25314
25315
  ...nextProps,
25315
25316
  ...!this.config.outline.enabled && { strokeEnabled: false },
@@ -25324,22 +25325,20 @@ var WeaveTextNode = class extends WeaveNode {
25324
25325
  let height = nextProps.height;
25325
25326
  if (nextProps.layout === TEXT_LAYOUT.AUTO_ALL) {
25326
25327
  const { width: textAreaWidth, height: textAreaHeight } = this.textRenderedSize(nextProps.text, nodeInstance);
25327
- width = textAreaWidth;
25328
- height = textAreaHeight;
25328
+ width = (textAreaWidth + 2) * nodeInstance.getAbsoluteScale().x;
25329
+ height = (textAreaHeight + 2) * nodeInstance.getAbsoluteScale().x;
25329
25330
  }
25330
25331
  if (nextProps.layout === TEXT_LAYOUT.SMART && !nextProps.smartFixedWidth) {
25331
25332
  const { width: textAreaWidth } = this.textRenderedSize(nextProps.text, nodeInstance);
25332
- width = textAreaWidth;
25333
+ width = textAreaWidth / this.instance.getStage().scaleX();
25333
25334
  height = void 0;
25334
25335
  }
25335
25336
  if (nextProps.layout === TEXT_LAYOUT.SMART && nextProps.smartFixedWidth) height = void 0;
25336
25337
  if (nextProps.layout === TEXT_LAYOUT.AUTO_HEIGHT) height = void 0;
25337
- if (nextProps.layout === TEXT_LAYOUT.FIXED) updateNeeded = false;
25338
25338
  nodeInstance.setAttrs({
25339
25339
  width,
25340
25340
  height
25341
25341
  });
25342
- if (updateNeeded) this.instance.updateNode(this.serialize(nodeInstance));
25343
25342
  if (this.editing) this.updateTextAreaDOM(nodeInstance);
25344
25343
  if (!this.editing) {
25345
25344
  const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -25387,14 +25386,17 @@ var WeaveTextNode = class extends WeaveNode {
25387
25386
  if (!this.textArea || !this.textAreaContainer) return;
25388
25387
  if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
25389
25388
  const { width: textAreaWidth } = this.textRenderedSize(this.textArea.value, textNode);
25390
- this.textAreaContainer.style.width = textAreaWidth * textNode.getAbsoluteScale().x + 1 + "px";
25389
+ const width = (textAreaWidth + 2) * textNode.getAbsoluteScale().x / this.instance.getStage().scaleX();
25390
+ this.textAreaContainer.style.width = width + "px";
25391
25391
  }
25392
25392
  if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.SMART) {
25393
25393
  this.textAreaContainer.style.height = "auto";
25394
- this.textAreaContainer.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().y + "px";
25394
+ const height$1 = this.textArea.scrollHeight + textNode.getAbsoluteScale().y;
25395
+ this.textAreaContainer.style.height = height$1 + "px";
25395
25396
  }
25396
25397
  this.textArea.style.height = "auto";
25397
- this.textArea.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().x + "px";
25398
+ const height = this.textArea.scrollHeight + textNode.getAbsoluteScale().y;
25399
+ this.textArea.style.height = height + "px";
25398
25400
  this.textArea.rows = this.textArea.value.split("\n").length;
25399
25401
  }
25400
25402
  measureMultilineText(textNode) {
@@ -25416,8 +25418,8 @@ var WeaveTextNode = class extends WeaveNode {
25416
25418
  height = height + textSize.height * (textNode.lineHeight() ?? 1);
25417
25419
  }
25418
25420
  return {
25419
- width: width * 1.01,
25420
- height
25421
+ width: width * this.instance.getStage().scaleX() * 1.01,
25422
+ height: height * this.instance.getStage().scaleX() * 1.01
25421
25423
  };
25422
25424
  }
25423
25425
  mimicTextNode(textNode) {
@@ -25426,7 +25428,7 @@ var WeaveTextNode = class extends WeaveNode {
25426
25428
  this.textArea.rows = textNode.text().split("\n").length;
25427
25429
  this.textArea.style.letterSpacing = `${textNode.letterSpacing()}`;
25428
25430
  this.textArea.style.opacity = `${textNode.getAttrs().opacity}`;
25429
- this.textArea.style.lineHeight = `${textNode.lineHeight()}`;
25431
+ this.textArea.style.lineHeight = `${textNode.lineHeight()}em`;
25430
25432
  this.textArea.style.fontFamily = textNode.fontFamily();
25431
25433
  let fontWeight = "normal";
25432
25434
  let fontStyle = "normal";
@@ -25439,6 +25441,10 @@ var WeaveTextNode = class extends WeaveNode {
25439
25441
  this.textArea.style.textDecoration = textNode.textDecoration();
25440
25442
  this.textArea.style.textAlign = textNode.align();
25441
25443
  this.textArea.style.color = `${textNode.fill()}`;
25444
+ if (this.config.outline.enabled) {
25445
+ this.textArea.style.paintOrder = "stroke fill";
25446
+ this.textArea.style.webkitTextStroke = `${this.config.outline.width * this.instance.getStage().scaleX()}px ${this.config.outline.color}`;
25447
+ }
25442
25448
  }
25443
25449
  createTextAreaDOM(textNode, position) {
25444
25450
  const stage = this.instance.getStage();
@@ -25477,19 +25483,19 @@ var WeaveTextNode = class extends WeaveNode {
25477
25483
  this.textAreaContainer.style.left = position.x * upscaleScale + "px";
25478
25484
  if (textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
25479
25485
  const rect = textNode.getClientRect({ relativeTo: stage });
25480
- this.textAreaContainer.style.width = (rect.width + 2) * stage.scaleX() + "px";
25481
- this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
25486
+ this.textAreaContainer.style.width = (rect.width + 2) * textNode.getAbsoluteScale().x + "px";
25487
+ this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
25482
25488
  }
25483
25489
  if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
25484
25490
  const rect = textNode.getClientRect({ relativeTo: stage });
25485
- this.textAreaContainer.style.width = (rect.width + 2) * stage.scaleX() + "px";
25486
- this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
25491
+ this.textAreaContainer.style.width = (rect.width + 2) * textNode.getAbsoluteScale().x + "px";
25492
+ this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
25487
25493
  }
25488
25494
  if (textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && textNode.getAttrs().smartFixedWidth) {
25489
25495
  const rect = textNode.getClientRect({ relativeTo: stage });
25490
- this.textAreaContainer.style.width = (rect.width + 10) * stage.scaleX() + "px";
25491
- if (textNode.getAttrs().smartFixedWidth) this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
25492
- this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
25496
+ this.textAreaContainer.style.width = (rect.width + 10) * textNode.getAbsoluteScale().x + "px";
25497
+ if (textNode.getAttrs().smartFixedWidth) this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
25498
+ this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
25493
25499
  }
25494
25500
  if (textNode.getAttrs().layout === TEXT_LAYOUT.FIXED) {
25495
25501
  this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
@@ -25499,6 +25505,7 @@ var WeaveTextNode = class extends WeaveNode {
25499
25505
  this.textArea.style.position = "absolute";
25500
25506
  this.textArea.style.top = "0px";
25501
25507
  this.textArea.style.left = "0px";
25508
+ this.textArea.style.lineHeight = "1em";
25502
25509
  this.textArea.style.overscrollBehavior = "contains";
25503
25510
  this.textArea.style.scrollBehavior = "auto";
25504
25511
  this.textArea.style.caretColor = "black";
@@ -25507,31 +25514,22 @@ var WeaveTextNode = class extends WeaveNode {
25507
25514
  this.textArea.style.margin = "0px";
25508
25515
  this.textArea.style.padding = "0px";
25509
25516
  this.textArea.style.paddingTop = "0px";
25510
- this.textArea.style.boxSizing = "content-box";
25517
+ this.textArea.style.boxSizing = "border-box";
25511
25518
  this.textArea.style.overflow = "hidden";
25512
25519
  this.textArea.style.background = "transparent";
25513
25520
  this.textArea.style.border = "none";
25514
25521
  this.textArea.style.outline = "none";
25515
25522
  this.textArea.style.resize = "none";
25516
25523
  this.textArea.style.overflow = "hidden";
25524
+ if (this.config.outline.enabled) {
25525
+ this.textArea.style.paintOrder = "stroke fill";
25526
+ this.textArea.style.webkitTextStroke = `${this.config.outline.width * this.instance.getStage().scaleX()}px ${this.config.outline.color}`;
25527
+ }
25517
25528
  this.textArea.style.backgroundColor = "transparent";
25518
25529
  this.textAreaContainer.style.transformOrigin = "left top";
25519
25530
  this.mimicTextNode(textNode);
25520
- const loadedFonts = this.instance.getFonts();
25521
- const fontFamily = this.textArea.style.fontFamily;
25522
- const actualFont = loadedFonts.find((f) => f.name === fontFamily);
25523
- const correctionX = (actualFont === void 0 ? 0 : actualFont.offsetX ?? 0) * stage.scaleX();
25524
- const correctionY = (actualFont === void 0 ? 0 : actualFont.offsetY ?? 0) * stage.scaleX();
25525
- this.textArea.style.left = `${correctionX - 1}px`;
25526
- this.textArea.style.top = `${correctionY}px`;
25527
- const updateTextNode = () => {
25528
- if (!this.textArea) return;
25529
- updateTextNodeSize();
25530
- textNode.text(this.textArea.value);
25531
- textNode.visible(true);
25532
- this.instance.updateNode(this.serialize(textNode));
25533
- };
25534
- const throttledUpdateTextNode = (0, import_lodash.throttle)(updateTextNode, 300);
25531
+ this.textArea.style.left = `-1px`;
25532
+ this.textArea.style.top = `-1px`;
25535
25533
  this.textArea.onfocus = () => {
25536
25534
  this.textAreaDomResize(textNode);
25537
25535
  };
@@ -25545,11 +25543,9 @@ var WeaveTextNode = class extends WeaveNode {
25545
25543
  };
25546
25544
  this.textArea.onpaste = () => {
25547
25545
  this.textAreaDomResize(textNode);
25548
- throttledUpdateTextNode();
25549
25546
  };
25550
25547
  this.textArea.oninput = () => {
25551
25548
  this.textAreaDomResize(textNode);
25552
- throttledUpdateTextNode();
25553
25549
  };
25554
25550
  this.textAreaSuperContainer.addEventListener("scroll", () => {
25555
25551
  if (this.textAreaSuperContainer) {
@@ -25576,7 +25572,8 @@ var WeaveTextNode = class extends WeaveNode {
25576
25572
  if (!this.textArea) return;
25577
25573
  if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
25578
25574
  const { width: textAreaWidth } = this.textRenderedSize(this.textArea.value, textNode);
25579
- textNode.width(textAreaWidth);
25575
+ const width = textAreaWidth / this.instance.getStage().scaleX();
25576
+ textNode.width(width);
25580
25577
  }
25581
25578
  if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART) textNode.height(this.textArea.scrollHeight * (1 / textNode.getAbsoluteScale().x));
25582
25579
  };
@@ -25697,7 +25694,8 @@ var WeaveTextNode = class extends WeaveNode {
25697
25694
  stage.container().focus();
25698
25695
  this.instance.emitEvent("onExitTextNodeEditMode", { node: textNode });
25699
25696
  }
25700
- triggerEditMode(textNode) {
25697
+ triggerEditMode(textNode, create = false) {
25698
+ if (create) this.createNode = true;
25701
25699
  const lockAcquired = this.instance.setMutexLock({
25702
25700
  nodeIds: [textNode.id()],
25703
25701
  operation: "text-edit"
@@ -27255,6 +27253,8 @@ var WeaveImageNode = class extends WeaveNode {
27255
27253
  const nodeId = nodeInstance.getAttrs().id ?? "";
27256
27254
  const isMoveContainer = nodeInstance.getAttr("onMoveContainer");
27257
27255
  nodeInstance.setAttr("onMoveContainer", void 0);
27256
+ const utilityLayer = this.instance.getUtilityLayer();
27257
+ utilityLayer?.destroyChildren();
27258
27258
  if (this.imageTryoutIds[nodeId]) {
27259
27259
  clearTimeout(this.imageTryoutIds[nodeId]);
27260
27260
  delete this.imageTryoutIds[nodeId];
@@ -34282,6 +34282,7 @@ var WeaveTextToolAction = class extends WeaveAction {
34282
34282
  fontFamily: "Arial, sans-serif",
34283
34283
  fill: "#000000",
34284
34284
  align: "left",
34285
+ lineHeight: 1,
34285
34286
  verticalAlign: "top",
34286
34287
  strokeEnabled: false
34287
34288
  };
@@ -34335,7 +34336,8 @@ var WeaveTextToolAction = class extends WeaveAction {
34335
34336
  y: this.clickPoint?.y ?? 0,
34336
34337
  draggable: true
34337
34338
  });
34338
- this.instance.addNode(node, this.container?.getAttrs().id);
34339
+ const renderedNode = nodeHandler.onRender(node.props);
34340
+ this.container.add(renderedNode);
34339
34341
  this.instance.emitEvent("onAddedArrow");
34340
34342
  }
34341
34343
  this.setState(TEXT_TOOL_STATE.FINISHED);
@@ -34360,7 +34362,7 @@ var WeaveTextToolAction = class extends WeaveAction {
34360
34362
  this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
34361
34363
  }
34362
34364
  const node = stage.findOne(`#${this.textId}`);
34363
- if (node) node.getAttr("triggerEditMode")(node);
34365
+ if (node) node.getAttr("triggerEditMode")(node, true);
34364
34366
  this.initialCursor = null;
34365
34367
  this.textId = null;
34366
34368
  this.container = void 0;
package/dist/sdk.node.js CHANGED
@@ -22021,7 +22021,7 @@ var WeaveRegisterManager = class {
22021
22021
 
22022
22022
  //#endregion
22023
22023
  //#region package.json
22024
- var version = "3.7.0";
22024
+ var version = "3.7.2";
22025
22025
 
22026
22026
  //#endregion
22027
22027
  //#region src/managers/setup.ts
@@ -25124,7 +25124,14 @@ var WeaveTextNode = class extends WeaveNode {
25124
25124
  const clonedText = actNode.clone();
25125
25125
  clonedText.setAttr("triggerEditMode", void 0);
25126
25126
  clonedText.setAttr("cancelEditMode", void 0);
25127
- this.instance.updateNode(this.serialize(clonedText));
25127
+ if (this.createNode && actNode.getAttrs().text !== "") {
25128
+ const actualContainer = actNode.getParent();
25129
+ actNode.destroy();
25130
+ const serializedNode = this.serialize(clonedText);
25131
+ this.instance.addNode(serializedNode, actualContainer?.getAttrs().id);
25132
+ } else if (this.createNode && actNode.getAttrs().text === "") actNode.destroy();
25133
+ else this.instance.updateNode(this.serialize(clonedText));
25134
+ this.createNode = false;
25128
25135
  clonedText.destroy();
25129
25136
  }
25130
25137
  }
@@ -25224,6 +25231,7 @@ var WeaveTextNode = class extends WeaveNode {
25224
25231
  else this.getNodesSelectionPlugin()?.getTransformer()?.keepRatio(false);
25225
25232
  if ([TEXT_LAYOUT.AUTO_HEIGHT, TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) && ["middle-right", "middle-left"].includes(actualAnchor ?? "")) {
25226
25233
  text.wrap("word");
25234
+ text.scaleY(1);
25227
25235
  text.height(void 0);
25228
25236
  }
25229
25237
  e.cancelBubble = true;
@@ -25249,7 +25257,7 @@ var WeaveTextNode = class extends WeaveNode {
25249
25257
  text.setAttr("shouldUpdateOnTransform", false);
25250
25258
  text.getLayer()?.batchDraw();
25251
25259
  };
25252
- text.on("transform", (0, import_lodash.throttle)(handleTextTransform, DEFAULT_THROTTLE_MS));
25260
+ text.on("transform", handleTextTransform);
25253
25261
  const handleTransformEnd = () => {
25254
25262
  this.instance.emitEvent("onTransform", null);
25255
25263
  let definedSmartWidth = false;
@@ -25278,6 +25286,7 @@ var WeaveTextNode = class extends WeaveNode {
25278
25286
  definedSmartWidth = true;
25279
25287
  text.width(Math.ceil(text.width() * text.scaleX()));
25280
25288
  text.scaleX(1);
25289
+ text.scaleY(1);
25281
25290
  text.height(void 0);
25282
25291
  text.getLayer()?.batchDraw();
25283
25292
  text.height(Math.ceil(text.height()));
@@ -25292,7 +25301,7 @@ var WeaveTextNode = class extends WeaveNode {
25292
25301
  handleTransformEnd();
25293
25302
  });
25294
25303
  this.instance.addEventListener("onNodeRenderedAdded", (node) => {
25295
- if (node.id() === text.id() && node.getParent() !== text.getParent()) text.getAttr("cancelEditMode")?.();
25304
+ if (node.id() === text.id() && node.getParent() !== text.getParent() && this.editing) text.getAttr("cancelEditMode")?.();
25296
25305
  });
25297
25306
  if (!this.instance.isServerSide() && !this.keyPressHandler) {
25298
25307
  this.keyPressHandler = this.handleKeyPress.bind(this);
@@ -25301,14 +25310,6 @@ var WeaveTextNode = class extends WeaveNode {
25301
25310
  return text;
25302
25311
  }
25303
25312
  onUpdate(nodeInstance, nextProps) {
25304
- const actualFontFamily = nodeInstance.getAttrs().fontFamily;
25305
- const actualFontSize = nodeInstance.getAttrs().fontSize;
25306
- const actualFontStyle = nodeInstance.getAttrs().fontStyle;
25307
- const actualFontVariant = nodeInstance.getAttrs().fontVariant;
25308
- const actualTextDecoration = nodeInstance.getAttrs().textDecoration;
25309
- const actualLineHeight = nodeInstance.getAttrs().lineHeight;
25310
- let updateNeeded = false;
25311
- if (actualFontFamily !== nextProps.fontFamily || actualFontSize !== nextProps.fontSize || actualFontStyle !== nextProps.fontStyle || actualFontVariant !== nextProps.fontVariant || actualTextDecoration !== nextProps.textDecoration || actualLineHeight !== nextProps.lineHeight) updateNeeded = true;
25312
25313
  nodeInstance.setAttrs({
25313
25314
  ...nextProps,
25314
25315
  ...!this.config.outline.enabled && { strokeEnabled: false },
@@ -25323,22 +25324,20 @@ var WeaveTextNode = class extends WeaveNode {
25323
25324
  let height = nextProps.height;
25324
25325
  if (nextProps.layout === TEXT_LAYOUT.AUTO_ALL) {
25325
25326
  const { width: textAreaWidth, height: textAreaHeight } = this.textRenderedSize(nextProps.text, nodeInstance);
25326
- width = textAreaWidth;
25327
- height = textAreaHeight;
25327
+ width = (textAreaWidth + 2) * nodeInstance.getAbsoluteScale().x;
25328
+ height = (textAreaHeight + 2) * nodeInstance.getAbsoluteScale().x;
25328
25329
  }
25329
25330
  if (nextProps.layout === TEXT_LAYOUT.SMART && !nextProps.smartFixedWidth) {
25330
25331
  const { width: textAreaWidth } = this.textRenderedSize(nextProps.text, nodeInstance);
25331
- width = textAreaWidth;
25332
+ width = textAreaWidth / this.instance.getStage().scaleX();
25332
25333
  height = void 0;
25333
25334
  }
25334
25335
  if (nextProps.layout === TEXT_LAYOUT.SMART && nextProps.smartFixedWidth) height = void 0;
25335
25336
  if (nextProps.layout === TEXT_LAYOUT.AUTO_HEIGHT) height = void 0;
25336
- if (nextProps.layout === TEXT_LAYOUT.FIXED) updateNeeded = false;
25337
25337
  nodeInstance.setAttrs({
25338
25338
  width,
25339
25339
  height
25340
25340
  });
25341
- if (updateNeeded) this.instance.updateNode(this.serialize(nodeInstance));
25342
25341
  if (this.editing) this.updateTextAreaDOM(nodeInstance);
25343
25342
  if (!this.editing) {
25344
25343
  const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -25386,14 +25385,17 @@ var WeaveTextNode = class extends WeaveNode {
25386
25385
  if (!this.textArea || !this.textAreaContainer) return;
25387
25386
  if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
25388
25387
  const { width: textAreaWidth } = this.textRenderedSize(this.textArea.value, textNode);
25389
- this.textAreaContainer.style.width = textAreaWidth * textNode.getAbsoluteScale().x + 1 + "px";
25388
+ const width = (textAreaWidth + 2) * textNode.getAbsoluteScale().x / this.instance.getStage().scaleX();
25389
+ this.textAreaContainer.style.width = width + "px";
25390
25390
  }
25391
25391
  if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.SMART) {
25392
25392
  this.textAreaContainer.style.height = "auto";
25393
- this.textAreaContainer.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().y + "px";
25393
+ const height$1 = this.textArea.scrollHeight + textNode.getAbsoluteScale().y;
25394
+ this.textAreaContainer.style.height = height$1 + "px";
25394
25395
  }
25395
25396
  this.textArea.style.height = "auto";
25396
- this.textArea.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().x + "px";
25397
+ const height = this.textArea.scrollHeight + textNode.getAbsoluteScale().y;
25398
+ this.textArea.style.height = height + "px";
25397
25399
  this.textArea.rows = this.textArea.value.split("\n").length;
25398
25400
  }
25399
25401
  measureMultilineText(textNode) {
@@ -25415,8 +25417,8 @@ var WeaveTextNode = class extends WeaveNode {
25415
25417
  height = height + textSize.height * (textNode.lineHeight() ?? 1);
25416
25418
  }
25417
25419
  return {
25418
- width: width * 1.01,
25419
- height
25420
+ width: width * this.instance.getStage().scaleX() * 1.01,
25421
+ height: height * this.instance.getStage().scaleX() * 1.01
25420
25422
  };
25421
25423
  }
25422
25424
  mimicTextNode(textNode) {
@@ -25425,7 +25427,7 @@ var WeaveTextNode = class extends WeaveNode {
25425
25427
  this.textArea.rows = textNode.text().split("\n").length;
25426
25428
  this.textArea.style.letterSpacing = `${textNode.letterSpacing()}`;
25427
25429
  this.textArea.style.opacity = `${textNode.getAttrs().opacity}`;
25428
- this.textArea.style.lineHeight = `${textNode.lineHeight()}`;
25430
+ this.textArea.style.lineHeight = `${textNode.lineHeight()}em`;
25429
25431
  this.textArea.style.fontFamily = textNode.fontFamily();
25430
25432
  let fontWeight = "normal";
25431
25433
  let fontStyle = "normal";
@@ -25438,6 +25440,10 @@ var WeaveTextNode = class extends WeaveNode {
25438
25440
  this.textArea.style.textDecoration = textNode.textDecoration();
25439
25441
  this.textArea.style.textAlign = textNode.align();
25440
25442
  this.textArea.style.color = `${textNode.fill()}`;
25443
+ if (this.config.outline.enabled) {
25444
+ this.textArea.style.paintOrder = "stroke fill";
25445
+ this.textArea.style.webkitTextStroke = `${this.config.outline.width * this.instance.getStage().scaleX()}px ${this.config.outline.color}`;
25446
+ }
25441
25447
  }
25442
25448
  createTextAreaDOM(textNode, position) {
25443
25449
  const stage = this.instance.getStage();
@@ -25476,19 +25482,19 @@ var WeaveTextNode = class extends WeaveNode {
25476
25482
  this.textAreaContainer.style.left = position.x * upscaleScale + "px";
25477
25483
  if (textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
25478
25484
  const rect = textNode.getClientRect({ relativeTo: stage });
25479
- this.textAreaContainer.style.width = (rect.width + 2) * stage.scaleX() + "px";
25480
- this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
25485
+ this.textAreaContainer.style.width = (rect.width + 2) * textNode.getAbsoluteScale().x + "px";
25486
+ this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
25481
25487
  }
25482
25488
  if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
25483
25489
  const rect = textNode.getClientRect({ relativeTo: stage });
25484
- this.textAreaContainer.style.width = (rect.width + 2) * stage.scaleX() + "px";
25485
- this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
25490
+ this.textAreaContainer.style.width = (rect.width + 2) * textNode.getAbsoluteScale().x + "px";
25491
+ this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
25486
25492
  }
25487
25493
  if (textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && textNode.getAttrs().smartFixedWidth) {
25488
25494
  const rect = textNode.getClientRect({ relativeTo: stage });
25489
- this.textAreaContainer.style.width = (rect.width + 10) * stage.scaleX() + "px";
25490
- if (textNode.getAttrs().smartFixedWidth) this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
25491
- this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
25495
+ this.textAreaContainer.style.width = (rect.width + 10) * textNode.getAbsoluteScale().x + "px";
25496
+ if (textNode.getAttrs().smartFixedWidth) this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
25497
+ this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
25492
25498
  }
25493
25499
  if (textNode.getAttrs().layout === TEXT_LAYOUT.FIXED) {
25494
25500
  this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
@@ -25498,6 +25504,7 @@ var WeaveTextNode = class extends WeaveNode {
25498
25504
  this.textArea.style.position = "absolute";
25499
25505
  this.textArea.style.top = "0px";
25500
25506
  this.textArea.style.left = "0px";
25507
+ this.textArea.style.lineHeight = "1em";
25501
25508
  this.textArea.style.overscrollBehavior = "contains";
25502
25509
  this.textArea.style.scrollBehavior = "auto";
25503
25510
  this.textArea.style.caretColor = "black";
@@ -25506,31 +25513,22 @@ var WeaveTextNode = class extends WeaveNode {
25506
25513
  this.textArea.style.margin = "0px";
25507
25514
  this.textArea.style.padding = "0px";
25508
25515
  this.textArea.style.paddingTop = "0px";
25509
- this.textArea.style.boxSizing = "content-box";
25516
+ this.textArea.style.boxSizing = "border-box";
25510
25517
  this.textArea.style.overflow = "hidden";
25511
25518
  this.textArea.style.background = "transparent";
25512
25519
  this.textArea.style.border = "none";
25513
25520
  this.textArea.style.outline = "none";
25514
25521
  this.textArea.style.resize = "none";
25515
25522
  this.textArea.style.overflow = "hidden";
25523
+ if (this.config.outline.enabled) {
25524
+ this.textArea.style.paintOrder = "stroke fill";
25525
+ this.textArea.style.webkitTextStroke = `${this.config.outline.width * this.instance.getStage().scaleX()}px ${this.config.outline.color}`;
25526
+ }
25516
25527
  this.textArea.style.backgroundColor = "transparent";
25517
25528
  this.textAreaContainer.style.transformOrigin = "left top";
25518
25529
  this.mimicTextNode(textNode);
25519
- const loadedFonts = this.instance.getFonts();
25520
- const fontFamily = this.textArea.style.fontFamily;
25521
- const actualFont = loadedFonts.find((f) => f.name === fontFamily);
25522
- const correctionX = (actualFont === void 0 ? 0 : actualFont.offsetX ?? 0) * stage.scaleX();
25523
- const correctionY = (actualFont === void 0 ? 0 : actualFont.offsetY ?? 0) * stage.scaleX();
25524
- this.textArea.style.left = `${correctionX - 1}px`;
25525
- this.textArea.style.top = `${correctionY}px`;
25526
- const updateTextNode = () => {
25527
- if (!this.textArea) return;
25528
- updateTextNodeSize();
25529
- textNode.text(this.textArea.value);
25530
- textNode.visible(true);
25531
- this.instance.updateNode(this.serialize(textNode));
25532
- };
25533
- const throttledUpdateTextNode = (0, import_lodash.throttle)(updateTextNode, 300);
25530
+ this.textArea.style.left = `-1px`;
25531
+ this.textArea.style.top = `-1px`;
25534
25532
  this.textArea.onfocus = () => {
25535
25533
  this.textAreaDomResize(textNode);
25536
25534
  };
@@ -25544,11 +25542,9 @@ var WeaveTextNode = class extends WeaveNode {
25544
25542
  };
25545
25543
  this.textArea.onpaste = () => {
25546
25544
  this.textAreaDomResize(textNode);
25547
- throttledUpdateTextNode();
25548
25545
  };
25549
25546
  this.textArea.oninput = () => {
25550
25547
  this.textAreaDomResize(textNode);
25551
- throttledUpdateTextNode();
25552
25548
  };
25553
25549
  this.textAreaSuperContainer.addEventListener("scroll", () => {
25554
25550
  if (this.textAreaSuperContainer) {
@@ -25575,7 +25571,8 @@ var WeaveTextNode = class extends WeaveNode {
25575
25571
  if (!this.textArea) return;
25576
25572
  if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
25577
25573
  const { width: textAreaWidth } = this.textRenderedSize(this.textArea.value, textNode);
25578
- textNode.width(textAreaWidth);
25574
+ const width = textAreaWidth / this.instance.getStage().scaleX();
25575
+ textNode.width(width);
25579
25576
  }
25580
25577
  if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART) textNode.height(this.textArea.scrollHeight * (1 / textNode.getAbsoluteScale().x));
25581
25578
  };
@@ -25696,7 +25693,8 @@ var WeaveTextNode = class extends WeaveNode {
25696
25693
  stage.container().focus();
25697
25694
  this.instance.emitEvent("onExitTextNodeEditMode", { node: textNode });
25698
25695
  }
25699
- triggerEditMode(textNode) {
25696
+ triggerEditMode(textNode, create = false) {
25697
+ if (create) this.createNode = true;
25700
25698
  const lockAcquired = this.instance.setMutexLock({
25701
25699
  nodeIds: [textNode.id()],
25702
25700
  operation: "text-edit"
@@ -27254,6 +27252,8 @@ var WeaveImageNode = class extends WeaveNode {
27254
27252
  const nodeId = nodeInstance.getAttrs().id ?? "";
27255
27253
  const isMoveContainer = nodeInstance.getAttr("onMoveContainer");
27256
27254
  nodeInstance.setAttr("onMoveContainer", void 0);
27255
+ const utilityLayer = this.instance.getUtilityLayer();
27256
+ utilityLayer?.destroyChildren();
27257
27257
  if (this.imageTryoutIds[nodeId]) {
27258
27258
  clearTimeout(this.imageTryoutIds[nodeId]);
27259
27259
  delete this.imageTryoutIds[nodeId];
@@ -34281,6 +34281,7 @@ var WeaveTextToolAction = class extends WeaveAction {
34281
34281
  fontFamily: "Arial, sans-serif",
34282
34282
  fill: "#000000",
34283
34283
  align: "left",
34284
+ lineHeight: 1,
34284
34285
  verticalAlign: "top",
34285
34286
  strokeEnabled: false
34286
34287
  };
@@ -34334,7 +34335,8 @@ var WeaveTextToolAction = class extends WeaveAction {
34334
34335
  y: this.clickPoint?.y ?? 0,
34335
34336
  draggable: true
34336
34337
  });
34337
- this.instance.addNode(node, this.container?.getAttrs().id);
34338
+ const renderedNode = nodeHandler.onRender(node.props);
34339
+ this.container.add(renderedNode);
34338
34340
  this.instance.emitEvent("onAddedArrow");
34339
34341
  }
34340
34342
  this.setState(TEXT_TOOL_STATE.FINISHED);
@@ -34359,7 +34361,7 @@ var WeaveTextToolAction = class extends WeaveAction {
34359
34361
  this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
34360
34362
  }
34361
34363
  const node = stage.findOne(`#${this.textId}`);
34362
- if (node) node.getAttr("triggerEditMode")(node);
34364
+ if (node) node.getAttr("triggerEditMode")(node, true);
34363
34365
  this.initialCursor = null;
34364
34366
  this.textId = null;
34365
34367
  this.container = void 0;
package/dist/types.d.ts CHANGED
@@ -1698,6 +1698,7 @@ type WeaveTextLayout = (typeof TEXT_LAYOUT)[WeaveTextLayoutKeys];
1698
1698
  declare class WeaveTextNode extends WeaveNode {
1699
1699
  private config;
1700
1700
  protected nodeType: string;
1701
+ private createNode;
1701
1702
  private editing;
1702
1703
  private textAreaSuperContainer;
1703
1704
  private textAreaContainer;
@@ -3361,6 +3362,7 @@ declare class WeaveTextToolAction extends WeaveAction {
3361
3362
  fontFamily: string;
3362
3363
  fill: string;
3363
3364
  align: string;
3365
+ lineHeight: number;
3364
3366
  verticalAlign: string;
3365
3367
  strokeEnabled: boolean;
3366
3368
  };