microboard-temp 0.13.1 → 0.13.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/browser.js +28 -11
  2. package/dist/cjs/index.js +28 -11
  3. package/dist/cjs/node.js +28 -11
  4. package/dist/esm/browser.js +28 -11
  5. package/dist/esm/index.js +28 -11
  6. package/dist/esm/node.js +28 -11
  7. package/package.json +1 -1
package/dist/cjs/browser.js CHANGED
@@ -22515,7 +22515,7 @@ class RichText extends BaseItem {
22515
22515
  matrix = this.transformation.toMatrix();
22516
22516
  }
22517
22517
  const { translateX, translateY, scaleX, scaleY } = matrix;
22518
- const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
22518
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
22519
22519
  return this.container.getTransformed(scaledMatrix);
22520
22520
  }
22521
22521
  emitWithoutApplying = (op) => {
@@ -22878,9 +22878,17 @@ class RichText extends BaseItem {
22878
22878
  ctx.save();
22879
22879
  const cameraScale = context.getCameraScale();
22880
22880
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
22881
- ctx.translate(this.left, this.top);
22882
- const { scaleX, scaleY } = this.transformation.getMatrixData();
22883
- ctx.scale(scaleX * extraScale, scaleY * extraScale);
22881
+ let matrix;
22882
+ if (this.customTransformationMatrix) {
22883
+ matrix = this.customTransformationMatrix();
22884
+ } else {
22885
+ matrix = this.transformation.toMatrix();
22886
+ }
22887
+ const { translateX, translateY, scaleX, scaleY } = matrix;
22888
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
22889
+ context.matrix = scaledMatrix;
22890
+ context.applyChanges();
22891
+ ctx.translate(this.container.left, this.container.top);
22884
22892
  const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
22885
22893
  if (shouldClip) {
22886
22894
  ctx.clip(this.clipPath.nativePath);
@@ -23013,8 +23021,15 @@ class RichText extends BaseItem {
23013
23021
  const elements = this.editor.editor.children.map(renderNode);
23014
23022
  const cameraScale = this.board.camera.getScale();
23015
23023
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
23016
- const { scaleX, scaleY } = this.transformation.getMatrixData();
23017
- const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
23024
+ let matrix;
23025
+ if (this.customTransformationMatrix) {
23026
+ matrix = this.customTransformationMatrix();
23027
+ } else {
23028
+ matrix = this.transformation.toMatrix();
23029
+ }
23030
+ const { translateX, translateY, scaleX, scaleY } = matrix;
23031
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
23032
+ const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
23018
23033
  const transformedWidth = this.getMbr().getWidth();
23019
23034
  const transformedHeight = this.getMbr().getHeight();
23020
23035
  const div = documentFactory.createElement("rich-text");
@@ -41049,15 +41064,17 @@ class Frame2 extends BaseItem {
41049
41064
  this.path = Frames[this.shapeType].path.copy();
41050
41065
  this.transformation = new Transformation(this.id, board.events);
41051
41066
  this.linkTo = new LinkTo(this.id, board.events);
41052
- this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
41067
+ this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
41068
+ this.text.editor.verticalAlignment = "bottom";
41053
41069
  this.text.setSelectionHorisontalAlignment("left");
41070
+ this.textContainer.top = -25;
41071
+ this.textContainer.bottom = -2;
41054
41072
  this.text.customTransformationMatrix = () => {
41055
- const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
41056
- const scaleY = this.text.layoutNodes.height * scaleX / 10;
41057
- return new Matrix(translateX, translateY, scaleX, scaleY);
41073
+ const matrix = this.transformation.toMatrix();
41074
+ return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
41058
41075
  };
41059
41076
  this.text.renderingScale = (cameraScale) => {
41060
- return Math.max(1, Math.min(5, 1 / cameraScale));
41077
+ return Math.max(1, Math.min(6, 1.2 / cameraScale));
41061
41078
  };
41062
41079
  this.transformation.subject.subscribe(() => {
41063
41080
  this.transformPath();
package/dist/cjs/index.js CHANGED
@@ -22515,7 +22515,7 @@ class RichText extends BaseItem {
22515
22515
  matrix = this.transformation.toMatrix();
22516
22516
  }
22517
22517
  const { translateX, translateY, scaleX, scaleY } = matrix;
22518
- const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
22518
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
22519
22519
  return this.container.getTransformed(scaledMatrix);
22520
22520
  }
22521
22521
  emitWithoutApplying = (op) => {
@@ -22878,9 +22878,17 @@ class RichText extends BaseItem {
22878
22878
  ctx.save();
22879
22879
  const cameraScale = context.getCameraScale();
22880
22880
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
22881
- ctx.translate(this.left, this.top);
22882
- const { scaleX, scaleY } = this.transformation.getMatrixData();
22883
- ctx.scale(scaleX * extraScale, scaleY * extraScale);
22881
+ let matrix;
22882
+ if (this.customTransformationMatrix) {
22883
+ matrix = this.customTransformationMatrix();
22884
+ } else {
22885
+ matrix = this.transformation.toMatrix();
22886
+ }
22887
+ const { translateX, translateY, scaleX, scaleY } = matrix;
22888
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
22889
+ context.matrix = scaledMatrix;
22890
+ context.applyChanges();
22891
+ ctx.translate(this.container.left, this.container.top);
22884
22892
  const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
22885
22893
  if (shouldClip) {
22886
22894
  ctx.clip(this.clipPath.nativePath);
@@ -23013,8 +23021,15 @@ class RichText extends BaseItem {
23013
23021
  const elements = this.editor.editor.children.map(renderNode);
23014
23022
  const cameraScale = this.board.camera.getScale();
23015
23023
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
23016
- const { scaleX, scaleY } = this.transformation.getMatrixData();
23017
- const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
23024
+ let matrix;
23025
+ if (this.customTransformationMatrix) {
23026
+ matrix = this.customTransformationMatrix();
23027
+ } else {
23028
+ matrix = this.transformation.toMatrix();
23029
+ }
23030
+ const { translateX, translateY, scaleX, scaleY } = matrix;
23031
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
23032
+ const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
23018
23033
  const transformedWidth = this.getMbr().getWidth();
23019
23034
  const transformedHeight = this.getMbr().getHeight();
23020
23035
  const div = documentFactory.createElement("rich-text");
@@ -41049,15 +41064,17 @@ class Frame2 extends BaseItem {
41049
41064
  this.path = Frames[this.shapeType].path.copy();
41050
41065
  this.transformation = new Transformation(this.id, board.events);
41051
41066
  this.linkTo = new LinkTo(this.id, board.events);
41052
- this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
41067
+ this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
41068
+ this.text.editor.verticalAlignment = "bottom";
41053
41069
  this.text.setSelectionHorisontalAlignment("left");
41070
+ this.textContainer.top = -25;
41071
+ this.textContainer.bottom = -2;
41054
41072
  this.text.customTransformationMatrix = () => {
41055
- const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
41056
- const scaleY = this.text.layoutNodes.height * scaleX / 10;
41057
- return new Matrix(translateX, translateY, scaleX, scaleY);
41073
+ const matrix = this.transformation.toMatrix();
41074
+ return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
41058
41075
  };
41059
41076
  this.text.renderingScale = (cameraScale) => {
41060
- return Math.max(1, Math.min(5, 1 / cameraScale));
41077
+ return Math.max(1, Math.min(6, 1.2 / cameraScale));
41061
41078
  };
41062
41079
  this.transformation.subject.subscribe(() => {
41063
41080
  this.transformPath();
package/dist/cjs/node.js CHANGED
@@ -24987,7 +24987,7 @@ class RichText extends BaseItem {
24987
24987
  matrix = this.transformation.toMatrix();
24988
24988
  }
24989
24989
  const { translateX, translateY, scaleX, scaleY } = matrix;
24990
- const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
24990
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
24991
24991
  return this.container.getTransformed(scaledMatrix);
24992
24992
  }
24993
24993
  emitWithoutApplying = (op) => {
@@ -25350,9 +25350,17 @@ class RichText extends BaseItem {
25350
25350
  ctx.save();
25351
25351
  const cameraScale = context.getCameraScale();
25352
25352
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
25353
- ctx.translate(this.left, this.top);
25354
- const { scaleX, scaleY } = this.transformation.getMatrixData();
25355
- ctx.scale(scaleX * extraScale, scaleY * extraScale);
25353
+ let matrix;
25354
+ if (this.customTransformationMatrix) {
25355
+ matrix = this.customTransformationMatrix();
25356
+ } else {
25357
+ matrix = this.transformation.toMatrix();
25358
+ }
25359
+ const { translateX, translateY, scaleX, scaleY } = matrix;
25360
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
25361
+ context.matrix = scaledMatrix;
25362
+ context.applyChanges();
25363
+ ctx.translate(this.container.left, this.container.top);
25356
25364
  const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
25357
25365
  if (shouldClip) {
25358
25366
  ctx.clip(this.clipPath.nativePath);
@@ -25485,8 +25493,15 @@ class RichText extends BaseItem {
25485
25493
  const elements = this.editor.editor.children.map(renderNode);
25486
25494
  const cameraScale = this.board.camera.getScale();
25487
25495
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
25488
- const { scaleX, scaleY } = this.transformation.getMatrixData();
25489
- const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
25496
+ let matrix;
25497
+ if (this.customTransformationMatrix) {
25498
+ matrix = this.customTransformationMatrix();
25499
+ } else {
25500
+ matrix = this.transformation.toMatrix();
25501
+ }
25502
+ const { translateX, translateY, scaleX, scaleY } = matrix;
25503
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
25504
+ const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
25490
25505
  const transformedWidth = this.getMbr().getWidth();
25491
25506
  const transformedHeight = this.getMbr().getHeight();
25492
25507
  const div = documentFactory.createElement("rich-text");
@@ -43522,15 +43537,17 @@ class Frame2 extends BaseItem {
43522
43537
  this.path = Frames[this.shapeType].path.copy();
43523
43538
  this.transformation = new Transformation(this.id, board.events);
43524
43539
  this.linkTo = new LinkTo(this.id, board.events);
43525
- this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
43540
+ this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
43541
+ this.text.editor.verticalAlignment = "bottom";
43526
43542
  this.text.setSelectionHorisontalAlignment("left");
43543
+ this.textContainer.top = -25;
43544
+ this.textContainer.bottom = -2;
43527
43545
  this.text.customTransformationMatrix = () => {
43528
- const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
43529
- const scaleY = this.text.layoutNodes.height * scaleX / 10;
43530
- return new Matrix(translateX, translateY, scaleX, scaleY);
43546
+ const matrix = this.transformation.toMatrix();
43547
+ return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
43531
43548
  };
43532
43549
  this.text.renderingScale = (cameraScale) => {
43533
- return Math.max(1, Math.min(5, 1 / cameraScale));
43550
+ return Math.max(1, Math.min(6, 1.2 / cameraScale));
43534
43551
  };
43535
43552
  this.transformation.subject.subscribe(() => {
43536
43553
  this.transformPath();
package/dist/esm/browser.js CHANGED
@@ -22344,7 +22344,7 @@ class RichText extends BaseItem {
22344
22344
  matrix = this.transformation.toMatrix();
22345
22345
  }
22346
22346
  const { translateX, translateY, scaleX, scaleY } = matrix;
22347
- const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
22347
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
22348
22348
  return this.container.getTransformed(scaledMatrix);
22349
22349
  }
22350
22350
  emitWithoutApplying = (op) => {
@@ -22707,9 +22707,17 @@ class RichText extends BaseItem {
22707
22707
  ctx.save();
22708
22708
  const cameraScale = context.getCameraScale();
22709
22709
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
22710
- ctx.translate(this.left, this.top);
22711
- const { scaleX, scaleY } = this.transformation.getMatrixData();
22712
- ctx.scale(scaleX * extraScale, scaleY * extraScale);
22710
+ let matrix;
22711
+ if (this.customTransformationMatrix) {
22712
+ matrix = this.customTransformationMatrix();
22713
+ } else {
22714
+ matrix = this.transformation.toMatrix();
22715
+ }
22716
+ const { translateX, translateY, scaleX, scaleY } = matrix;
22717
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
22718
+ context.matrix = scaledMatrix;
22719
+ context.applyChanges();
22720
+ ctx.translate(this.container.left, this.container.top);
22713
22721
  const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
22714
22722
  if (shouldClip) {
22715
22723
  ctx.clip(this.clipPath.nativePath);
@@ -22842,8 +22850,15 @@ class RichText extends BaseItem {
22842
22850
  const elements = this.editor.editor.children.map(renderNode);
22843
22851
  const cameraScale = this.board.camera.getScale();
22844
22852
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
22845
- const { scaleX, scaleY } = this.transformation.getMatrixData();
22846
- const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
22853
+ let matrix;
22854
+ if (this.customTransformationMatrix) {
22855
+ matrix = this.customTransformationMatrix();
22856
+ } else {
22857
+ matrix = this.transformation.toMatrix();
22858
+ }
22859
+ const { translateX, translateY, scaleX, scaleY } = matrix;
22860
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
22861
+ const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
22847
22862
  const transformedWidth = this.getMbr().getWidth();
22848
22863
  const transformedHeight = this.getMbr().getHeight();
22849
22864
  const div = documentFactory.createElement("rich-text");
@@ -40878,15 +40893,17 @@ class Frame2 extends BaseItem {
40878
40893
  this.path = Frames[this.shapeType].path.copy();
40879
40894
  this.transformation = new Transformation(this.id, board.events);
40880
40895
  this.linkTo = new LinkTo(this.id, board.events);
40881
- this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
40896
+ this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
40897
+ this.text.editor.verticalAlignment = "bottom";
40882
40898
  this.text.setSelectionHorisontalAlignment("left");
40899
+ this.textContainer.top = -25;
40900
+ this.textContainer.bottom = -2;
40883
40901
  this.text.customTransformationMatrix = () => {
40884
- const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
40885
- const scaleY = this.text.layoutNodes.height * scaleX / 10;
40886
- return new Matrix(translateX, translateY, scaleX, scaleY);
40902
+ const matrix = this.transformation.toMatrix();
40903
+ return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
40887
40904
  };
40888
40905
  this.text.renderingScale = (cameraScale) => {
40889
- return Math.max(1, Math.min(5, 1 / cameraScale));
40906
+ return Math.max(1, Math.min(6, 1.2 / cameraScale));
40890
40907
  };
40891
40908
  this.transformation.subject.subscribe(() => {
40892
40909
  this.transformPath();
package/dist/esm/index.js CHANGED
@@ -22337,7 +22337,7 @@ class RichText extends BaseItem {
22337
22337
  matrix = this.transformation.toMatrix();
22338
22338
  }
22339
22339
  const { translateX, translateY, scaleX, scaleY } = matrix;
22340
- const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
22340
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
22341
22341
  return this.container.getTransformed(scaledMatrix);
22342
22342
  }
22343
22343
  emitWithoutApplying = (op) => {
@@ -22700,9 +22700,17 @@ class RichText extends BaseItem {
22700
22700
  ctx.save();
22701
22701
  const cameraScale = context.getCameraScale();
22702
22702
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
22703
- ctx.translate(this.left, this.top);
22704
- const { scaleX, scaleY } = this.transformation.getMatrixData();
22705
- ctx.scale(scaleX * extraScale, scaleY * extraScale);
22703
+ let matrix;
22704
+ if (this.customTransformationMatrix) {
22705
+ matrix = this.customTransformationMatrix();
22706
+ } else {
22707
+ matrix = this.transformation.toMatrix();
22708
+ }
22709
+ const { translateX, translateY, scaleX, scaleY } = matrix;
22710
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
22711
+ context.matrix = scaledMatrix;
22712
+ context.applyChanges();
22713
+ ctx.translate(this.container.left, this.container.top);
22706
22714
  const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
22707
22715
  if (shouldClip) {
22708
22716
  ctx.clip(this.clipPath.nativePath);
@@ -22835,8 +22843,15 @@ class RichText extends BaseItem {
22835
22843
  const elements = this.editor.editor.children.map(renderNode);
22836
22844
  const cameraScale = this.board.camera.getScale();
22837
22845
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
22838
- const { scaleX, scaleY } = this.transformation.getMatrixData();
22839
- const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
22846
+ let matrix;
22847
+ if (this.customTransformationMatrix) {
22848
+ matrix = this.customTransformationMatrix();
22849
+ } else {
22850
+ matrix = this.transformation.toMatrix();
22851
+ }
22852
+ const { translateX, translateY, scaleX, scaleY } = matrix;
22853
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
22854
+ const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
22840
22855
  const transformedWidth = this.getMbr().getWidth();
22841
22856
  const transformedHeight = this.getMbr().getHeight();
22842
22857
  const div = documentFactory.createElement("rich-text");
@@ -40871,15 +40886,17 @@ class Frame2 extends BaseItem {
40871
40886
  this.path = Frames[this.shapeType].path.copy();
40872
40887
  this.transformation = new Transformation(this.id, board.events);
40873
40888
  this.linkTo = new LinkTo(this.id, board.events);
40874
- this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
40889
+ this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
40890
+ this.text.editor.verticalAlignment = "bottom";
40875
40891
  this.text.setSelectionHorisontalAlignment("left");
40892
+ this.textContainer.top = -25;
40893
+ this.textContainer.bottom = -2;
40876
40894
  this.text.customTransformationMatrix = () => {
40877
- const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
40878
- const scaleY = this.text.layoutNodes.height * scaleX / 10;
40879
- return new Matrix(translateX, translateY, scaleX, scaleY);
40895
+ const matrix = this.transformation.toMatrix();
40896
+ return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
40880
40897
  };
40881
40898
  this.text.renderingScale = (cameraScale) => {
40882
- return Math.max(1, Math.min(5, 1 / cameraScale));
40899
+ return Math.max(1, Math.min(6, 1.2 / cameraScale));
40883
40900
  };
40884
40901
  this.transformation.subject.subscribe(() => {
40885
40902
  this.transformPath();
package/dist/esm/node.js CHANGED
@@ -24804,7 +24804,7 @@ class RichText extends BaseItem {
24804
24804
  matrix = this.transformation.toMatrix();
24805
24805
  }
24806
24806
  const { translateX, translateY, scaleX, scaleY } = matrix;
24807
- const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
24807
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
24808
24808
  return this.container.getTransformed(scaledMatrix);
24809
24809
  }
24810
24810
  emitWithoutApplying = (op) => {
@@ -25167,9 +25167,17 @@ class RichText extends BaseItem {
25167
25167
  ctx.save();
25168
25168
  const cameraScale = context.getCameraScale();
25169
25169
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
25170
- ctx.translate(this.left, this.top);
25171
- const { scaleX, scaleY } = this.transformation.getMatrixData();
25172
- ctx.scale(scaleX * extraScale, scaleY * extraScale);
25170
+ let matrix;
25171
+ if (this.customTransformationMatrix) {
25172
+ matrix = this.customTransformationMatrix();
25173
+ } else {
25174
+ matrix = this.transformation.toMatrix();
25175
+ }
25176
+ const { translateX, translateY, scaleX, scaleY } = matrix;
25177
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
25178
+ context.matrix = scaledMatrix;
25179
+ context.applyChanges();
25180
+ ctx.translate(this.container.left, this.container.top);
25173
25181
  const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
25174
25182
  if (shouldClip) {
25175
25183
  ctx.clip(this.clipPath.nativePath);
@@ -25302,8 +25310,15 @@ class RichText extends BaseItem {
25302
25310
  const elements = this.editor.editor.children.map(renderNode);
25303
25311
  const cameraScale = this.board.camera.getScale();
25304
25312
  const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
25305
- const { scaleX, scaleY } = this.transformation.getMatrixData();
25306
- const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
25313
+ let matrix;
25314
+ if (this.customTransformationMatrix) {
25315
+ matrix = this.customTransformationMatrix();
25316
+ } else {
25317
+ matrix = this.transformation.toMatrix();
25318
+ }
25319
+ const { translateX, translateY, scaleX, scaleY } = matrix;
25320
+ const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
25321
+ const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
25307
25322
  const transformedWidth = this.getMbr().getWidth();
25308
25323
  const transformedHeight = this.getMbr().getHeight();
25309
25324
  const div = documentFactory.createElement("rich-text");
@@ -43339,15 +43354,17 @@ class Frame2 extends BaseItem {
43339
43354
  this.path = Frames[this.shapeType].path.copy();
43340
43355
  this.transformation = new Transformation(this.id, board.events);
43341
43356
  this.linkTo = new LinkTo(this.id, board.events);
43342
- this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
43357
+ this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
43358
+ this.text.editor.verticalAlignment = "bottom";
43343
43359
  this.text.setSelectionHorisontalAlignment("left");
43360
+ this.textContainer.top = -25;
43361
+ this.textContainer.bottom = -2;
43344
43362
  this.text.customTransformationMatrix = () => {
43345
- const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
43346
- const scaleY = this.text.layoutNodes.height * scaleX / 10;
43347
- return new Matrix(translateX, translateY, scaleX, scaleY);
43363
+ const matrix = this.transformation.toMatrix();
43364
+ return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
43348
43365
  };
43349
43366
  this.text.renderingScale = (cameraScale) => {
43350
- return Math.max(1, Math.min(5, 1 / cameraScale));
43367
+ return Math.max(1, Math.min(6, 1.2 / cameraScale));
43351
43368
  };
43352
43369
  this.transformation.subject.subscribe(() => {
43353
43370
  this.transformPath();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "microboard-temp",
3
- "version": "0.13.1",
3
+ "version": "0.13.3",
4
4
  "description": "A flexible interactive whiteboard library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",