@plait/draw 0.61.2 → 0.62.0-next.1

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 (46) hide show
  1. package/constants/geometry.d.ts +1 -1
  2. package/constants/index.d.ts +1 -1
  3. package/constants/line.d.ts +1 -0
  4. package/constants/text.d.ts +1 -0
  5. package/esm2022/constants/geometry.mjs +2 -2
  6. package/esm2022/constants/index.mjs +2 -2
  7. package/esm2022/constants/line.mjs +2 -1
  8. package/esm2022/constants/text.mjs +2 -0
  9. package/esm2022/generators/single-text.generator.mjs +3 -3
  10. package/esm2022/generators/text.generator.mjs +10 -13
  11. package/esm2022/geometry.component.mjs +12 -14
  12. package/esm2022/image.component.mjs +6 -8
  13. package/esm2022/interfaces/geometry.mjs +1 -1
  14. package/esm2022/interfaces/table.mjs +1 -1
  15. package/esm2022/line.component.mjs +12 -13
  16. package/esm2022/plugins/with-geometry-create.mjs +4 -10
  17. package/esm2022/plugins/with-line-text.mjs +7 -8
  18. package/esm2022/plugins/with-swimlane-create.mjs +1 -1
  19. package/esm2022/table.component.mjs +8 -8
  20. package/esm2022/transforms/geometry-text.mjs +8 -6
  21. package/esm2022/transforms/image.mjs +3 -3
  22. package/esm2022/transforms/line.mjs +1 -1
  23. package/esm2022/transforms/multi-text-geometry-text.mjs +1 -1
  24. package/esm2022/transforms/swimlane.mjs +2 -2
  25. package/esm2022/utils/common.mjs +2 -3
  26. package/esm2022/utils/geometry.mjs +4 -4
  27. package/esm2022/utils/multi-text-geometry.mjs +2 -2
  28. package/esm2022/utils/swimlane.mjs +1 -1
  29. package/esm2022/utils/table.mjs +4 -4
  30. package/fesm2022/plait-draw.mjs +62 -72
  31. package/fesm2022/plait-draw.mjs.map +1 -1
  32. package/generators/single-text.generator.d.ts +3 -4
  33. package/generators/text.generator.d.ts +3 -6
  34. package/image.component.d.ts +0 -1
  35. package/interfaces/geometry.d.ts +1 -1
  36. package/interfaces/table.d.ts +1 -1
  37. package/line.component.d.ts +1 -2
  38. package/package.json +1 -3
  39. package/plugins/with-geometry-create.d.ts +1 -1
  40. package/plugins/with-swimlane-create.d.ts +1 -1
  41. package/utils/clipboard.d.ts +1 -1
  42. package/utils/common.d.ts +1 -1
  43. package/utils/geometry.d.ts +1 -1
  44. package/utils/table.d.ts +1 -1
  45. package/constants/draw.d.ts +0 -1
  46. package/esm2022/constants/draw.mjs +0 -2
@@ -1,9 +1,8 @@
1
1
  import { ACTIVE_STROKE_WIDTH, ThemeColorMode, RectangleClient, idCreator, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, rotatePointsByElement, isPolylineHitRectangle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, createG, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, drawLinearPath, rotate, catmullRomFitting, setStrokeLinecap, findElements, createMask, createRect, PlaitElement, getSelectedElements, getElementById, Path, Direction, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine as drawLine$1, RgbaToHEX, getHitElementByPoint, preventTouchMove, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
2
- import { WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, TRANSPARENT, getTextEditorsByElement, Generator, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getDirectionByVector, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, canResize, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
3
- import { Alignment, TextManage, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor } from '@plait/text';
2
+ import { Alignment, WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, TextManage, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, buildText, TRANSPARENT, getTextEditorsByElement, Generator, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getDirectionByVector, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, canResize, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
4
3
  import { pointsOnBezierCurves } from 'points-on-curve';
4
+ import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
5
5
  import { isKeyHotkey } from 'is-hotkey';
6
- import { NgZone } from '@angular/core';
7
6
  import { Node } from 'slate';
8
7
 
9
8
  var BasicShapes;
@@ -424,8 +423,6 @@ const DrawThemeColors = {
424
423
  }
425
424
  };
426
425
 
427
- const DEFAULT_TEXT_HEIGHT = 20;
428
-
429
426
  const SWIMLANE_HEADER_SIZE = 42;
430
427
  const DefaultSwimlaneVerticalWithHeaderProperty = {
431
428
  width: 580,
@@ -450,6 +447,8 @@ const DefaultSwimlanePropertyMap = {
450
447
  [SwimlaneDrawSymbols.swimlaneVerticalWithHeader]: DefaultSwimlaneVerticalWithHeaderProperty
451
448
  };
452
449
 
450
+ const MIN_TEXT_WIDTH = 5;
451
+
453
452
  const getElementShape = (value) => {
454
453
  if (PlaitDrawElement.isImage(value)) {
455
454
  return BasicShapes.rectangle;
@@ -474,15 +473,15 @@ class TextGenerator {
474
473
  get shape() {
475
474
  return this.element.shape || this.element.type;
476
475
  }
477
- constructor(board, element, texts, viewContainerRef, options) {
476
+ constructor(board, element, texts, options) {
478
477
  this.board = board;
479
478
  this.texts = texts;
480
479
  this.element = element;
481
- this.viewContainerRef = viewContainerRef;
482
480
  this.options = options;
483
481
  }
484
482
  initialize() {
485
- const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {}).textPlugins;
483
+ const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {})
484
+ .textPlugins;
486
485
  this.textManages = this.texts.map(text => {
487
486
  const textManage = this.createTextManage(text, textPlugins);
488
487
  setTextManage(getTextKey(this.element, text), textManage);
@@ -505,7 +504,8 @@ class TextGenerator {
505
504
  this.element = element;
506
505
  ELEMENT_TO_TEXT_MANAGES.set(this.element, this.textManages);
507
506
  const centerPoint = RectangleClient.getCenterPoint(this.board.getRectangle(this.element));
508
- const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {}).textPlugins;
507
+ const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {})
508
+ .textPlugins;
509
509
  const removedTexts = previousDrawShapeTexts.filter(value => {
510
510
  return !currentDrawShapeTexts.find(item => item.key === value.key);
511
511
  });
@@ -539,12 +539,12 @@ class TextGenerator {
539
539
  });
540
540
  }
541
541
  createTextManage(text, textPlugins) {
542
- const textManage = new TextManage(this.board, this.viewContainerRef, {
542
+ const textManage = new TextManage(this.board, {
543
543
  getRectangle: () => {
544
544
  return this.getRectangle(text);
545
545
  },
546
- onValueChangeHandle: (textManageRef) => {
547
- return this.onValueChangeHandle(textManageRef, text);
546
+ onChange: (data) => {
547
+ return this.options.onChange(this.element, data, text);
548
548
  },
549
549
  getMaxWidth: () => {
550
550
  return this.getMaxWidth(text);
@@ -563,9 +563,6 @@ class TextGenerator {
563
563
  }
564
564
  return getTextRectangle(this.element);
565
565
  }
566
- onValueChangeHandle(textManageRef, text) {
567
- return this.options.onValueChangeHandle(this.element, textManageRef, text);
568
- }
569
566
  getMaxWidth(text) {
570
567
  return this.options.getMaxWidth ? this.options.getMaxWidth() : this.getRectangle(text).width;
571
568
  }
@@ -717,7 +714,7 @@ const createCell = (rowId, columnId, text = null) => {
717
714
  columnId
718
715
  };
719
716
  if (text !== null) {
720
- cell['textHeight'] = DEFAULT_TEXT_HEIGHT;
717
+ cell['textHeight'] = TEXT_DEFAULT_HEIGHT;
721
718
  cell['text'] = {
722
719
  children: [{ text }],
723
720
  align: Alignment.center
@@ -1260,6 +1257,7 @@ const LINE_AUTO_COMPLETE_OPACITY = 0.6;
1260
1257
  const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
1261
1258
  const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
1262
1259
  const LINE_ALIGN_TOLERANCE = 3;
1260
+ const LINE_TEXT = '文本';
1263
1261
 
1264
1262
  class LineShapeGenerator extends Generator {
1265
1263
  canDraw(element, data) {
@@ -2167,7 +2165,7 @@ const getFlowchartDefaultFill = (theme) => {
2167
2165
  };
2168
2166
  const getTextShapeProperty = (board, text = DefaultTextProperty.text, fontSize) => {
2169
2167
  fontSize = fontSize ? Number(fontSize) : DEFAULT_FONT_SIZE;
2170
- const textSize = getTextSize(board, text, Infinity, { fontSize });
2168
+ const textSize = measureElement(buildText(text), { fontSize, fontFamily: DEFAULT_FONT_FAMILY });
2171
2169
  return {
2172
2170
  width: textSize.width + ShapeDefaultSpace.rectangleAndText * 2,
2173
2171
  height: textSize.height
@@ -2540,23 +2538,24 @@ const normalizePoints = (board, element, width, textHeight) => {
2540
2538
  let autoSize = element.autoSize;
2541
2539
  const defaultSpace = ShapeDefaultSpace.rectangleAndText;
2542
2540
  if (autoSize) {
2541
+ const newWidth = width < MIN_TEXT_WIDTH ? MIN_TEXT_WIDTH : width;
2543
2542
  const editor = getFirstTextEditor(element);
2544
2543
  if (AlignEditor.isActive(editor, Alignment.right)) {
2545
2544
  points = [
2546
- [points[1][0] - (width + defaultSpace * 2), points[0][1]],
2545
+ [points[1][0] - (newWidth + defaultSpace * 2), points[0][1]],
2547
2546
  [points[1][0], points[0][1] + textHeight]
2548
2547
  ];
2549
2548
  }
2550
2549
  else if (AlignEditor.isActive(editor, Alignment.center)) {
2551
2550
  const oldWidth = Math.abs(points[0][0] - points[1][0]);
2552
- const offset = (width - oldWidth) / 2;
2551
+ const offset = (newWidth - oldWidth) / 2;
2553
2552
  points = [
2554
2553
  [points[0][0] - offset - defaultSpace, points[0][1]],
2555
2554
  [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
2556
2555
  ];
2557
2556
  }
2558
2557
  else {
2559
- points = [points[0], [points[0][0] + width + defaultSpace * 2, points[0][1] + textHeight]];
2558
+ points = [points[0], [points[0][0] + newWidth + defaultSpace * 2, points[0][1] + textHeight]];
2560
2559
  }
2561
2560
  if (hasValidAngle(element)) {
2562
2561
  points = resetPointsAfterResize(RectangleClient.getRectangleByPoints(element.points), RectangleClient.getRectangleByPoints(points), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(element.points)), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(points)), element.angle);
@@ -2590,8 +2589,8 @@ const setTextSize = (board, element, textWidth, textHeight) => {
2590
2589
 
2591
2590
  const insertImage = (board, imageItem, startPoint) => {
2592
2591
  const { width, height, url } = imageItem;
2593
- const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
2594
- const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
2592
+ const viewportWidth = PlaitBoard.getBoardContainer(board).clientWidth;
2593
+ const viewportHeight = PlaitBoard.getBoardContainer(board).clientHeight;
2595
2594
  const point = toViewBoxPoint(board, toHostPoint(board, viewportWidth / 2, viewportHeight / 2));
2596
2595
  const points = startPoint
2597
2596
  ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
@@ -6379,8 +6378,8 @@ class SingleTextGenerator extends TextGenerator {
6379
6378
  get textManage() {
6380
6379
  return this.textManages[0];
6381
6380
  }
6382
- constructor(board, element, text, viewContainerRef, options) {
6383
- super(board, element, [{ key: element.id, text: text, textHeight: element.textHeight }], viewContainerRef, options);
6381
+ constructor(board, element, text, options) {
6382
+ super(board, element, [{ key: element.id, text: text, textHeight: element.textHeight }], options);
6384
6383
  }
6385
6384
  update(element, previousText, currentText, elementG) {
6386
6385
  if (!isMultipleTextGeometry(element)) {
@@ -6470,34 +6469,32 @@ class GeometryComponent extends CommonElementFlavour {
6470
6469
  }
6471
6470
  }
6472
6471
  initializeTextManage() {
6473
- const onTextValueChangeHandle = (element, textManageRef, text) => {
6474
- const height = textManageRef.height / this.board.viewport.zoom;
6475
- const width = textManageRef.width / this.board.viewport.zoom;
6476
- if (textManageRef.newValue) {
6472
+ const onTextChange = (element, textManageChangeData, text) => {
6473
+ if (textManageChangeData.newText) {
6477
6474
  if (isMultipleTextGeometry(element)) {
6478
6475
  DrawTransforms.setDrawShapeText(this.board, element, {
6479
6476
  key: text.key,
6480
- text: textManageRef.newValue,
6481
- textHeight: height
6477
+ text: textManageChangeData.newText,
6478
+ textHeight: textManageChangeData.height
6482
6479
  });
6483
6480
  }
6484
6481
  else {
6485
- DrawTransforms.setText(this.board, element, textManageRef.newValue, width, height);
6482
+ DrawTransforms.setText(this.board, element, textManageChangeData.newText, textManageChangeData.width, textManageChangeData.height);
6486
6483
  }
6487
6484
  }
6488
6485
  else {
6489
- DrawTransforms.setTextSize(this.board, element, width, height);
6486
+ DrawTransforms.setTextSize(this.board, element, textManageChangeData.width, textManageChangeData.height);
6490
6487
  }
6491
- textManageRef.operations && memorizeLatestText(element, textManageRef.operations);
6488
+ textManageChangeData.operations && memorizeLatestText(element, textManageChangeData.operations);
6492
6489
  };
6493
6490
  if (isMultipleTextGeometry(this.element)) {
6494
- this.textGenerator = new TextGenerator(this.board, this.element, this.element.texts, PlaitBoard.getViewContainerRef(this.board), {
6495
- onValueChangeHandle: onTextValueChangeHandle
6491
+ this.textGenerator = new TextGenerator(this.board, this.element, this.element.texts, {
6492
+ onChange: onTextChange
6496
6493
  });
6497
6494
  }
6498
6495
  else {
6499
- this.textGenerator = new SingleTextGenerator(this.board, this.element, this.element.text, PlaitBoard.getViewContainerRef(this.board), {
6500
- onValueChangeHandle: onTextValueChangeHandle,
6496
+ this.textGenerator = new SingleTextGenerator(this.board, this.element, this.element.text, {
6497
+ onChange: onTextChange,
6501
6498
  getMaxWidth: () => {
6502
6499
  let width = getTextRectangle(this.element).width;
6503
6500
  const getRectangle = getEngine(this.element.shape).getTextRectangle;
@@ -6686,24 +6683,24 @@ class LineComponent extends CommonElementFlavour {
6686
6683
  }
6687
6684
  }
6688
6685
  createTextManage(text, index) {
6689
- return new TextManage(this.board, PlaitBoard.getViewContainerRef(this.board), {
6686
+ return new TextManage(this.board, {
6690
6687
  getRectangle: () => {
6691
6688
  return getLineTextRectangle(this.board, this.element, index);
6692
6689
  },
6693
- onValueChangeHandle: (textManageRef) => {
6694
- const height = textManageRef.height / this.board.viewport.zoom;
6695
- const width = textManageRef.width / this.board.viewport.zoom;
6690
+ onChange: (textManageChangeData) => {
6696
6691
  const texts = [...this.element.texts];
6692
+ const newWidth = textManageChangeData.width < MIN_TEXT_WIDTH ? MIN_TEXT_WIDTH : textManageChangeData.width;
6697
6693
  texts.splice(index, 1, {
6698
- text: textManageRef.newValue ? textManageRef.newValue : this.element.texts[index].text,
6694
+ text: textManageChangeData.newText ? textManageChangeData.newText : this.element.texts[index].text,
6699
6695
  position: this.element.texts[index].position,
6700
- width,
6701
- height
6696
+ width: newWidth,
6697
+ height: textManageChangeData.height
6702
6698
  });
6703
6699
  DrawTransforms.setLineTexts(this.board, this.element, texts);
6704
- textManageRef.operations && memorizeLatestText(this.element, textManageRef.operations);
6700
+ textManageChangeData.operations && memorizeLatestText(this.element, textManageChangeData.operations);
6705
6701
  },
6706
- getMaxWidth: () => GeometryThreshold.defaultTextMaxWidth
6702
+ getMaxWidth: () => GeometryThreshold.defaultTextMaxWidth,
6703
+ textPlugins: []
6707
6704
  });
6708
6705
  }
6709
6706
  updateText(previousTexts, currentTexts) {
@@ -6838,16 +6835,12 @@ const withGeometryCreateByDrag = (board) => {
6838
6835
  const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(movingPoint, property.width, property.height));
6839
6836
  temporaryElement = createTextElement(board, points);
6840
6837
  if (!fakeCreateTextRef) {
6841
- const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
6838
+ const textManage = new TextManage(board, {
6842
6839
  getRectangle: () => {
6843
6840
  return getTextRectangle(temporaryElement);
6844
6841
  }
6845
6842
  });
6846
- PlaitBoard.getComponent(board)
6847
- .viewContainerRef.injector.get(NgZone)
6848
- .run(() => {
6849
- textManage.draw(temporaryElement.text);
6850
- });
6843
+ textManage.draw(temporaryElement.text);
6851
6844
  fakeCreateTextRef = {
6852
6845
  g: createG(),
6853
6846
  textManage
@@ -7471,7 +7464,7 @@ const withLineText = (board) => {
7471
7464
  else {
7472
7465
  const ratio = getRatioByPoint(points, point);
7473
7466
  texts.push({
7474
- text: buildText('文本'),
7467
+ text: buildText(LINE_TEXT),
7475
7468
  position: ratio,
7476
7469
  width: 28,
7477
7470
  height: 20
@@ -7494,10 +7487,9 @@ const withLineText = (board) => {
7494
7487
  function editHandle(board, element, manageIndex, isFirstEdit = false) {
7495
7488
  const textManages = getTextManages(element);
7496
7489
  const textManage = textManages[manageIndex];
7497
- const originText = textManage.componentRef.instance.children;
7498
- textManage.edit((origin, descendant) => {
7499
- const text = Node.string(descendant[0]);
7500
- const shouldRemove = (isFirstEdit && originText === descendant) || !text;
7490
+ textManage.edit(() => {
7491
+ const text = Node.string(textManage.getText());
7492
+ const shouldRemove = !text || (isFirstEdit && text === LINE_TEXT);
7501
7493
  if (shouldRemove) {
7502
7494
  DrawTransforms.removeLineText(board, element, manageIndex);
7503
7495
  }
@@ -7505,9 +7497,6 @@ function editHandle(board, element, manageIndex, isFirstEdit = false) {
7505
7497
  }
7506
7498
 
7507
7499
  class ImageComponent extends CommonElementFlavour {
7508
- get activeGenerator() {
7509
- return this.imageGenerator.componentRef.instance.activeGenerator;
7510
- }
7511
7500
  constructor() {
7512
7501
  super();
7513
7502
  }
@@ -7535,7 +7524,7 @@ class ImageComponent extends CommonElementFlavour {
7535
7524
  initialize() {
7536
7525
  super.initialize();
7537
7526
  this.initializeGenerator();
7538
- this.imageGenerator.processDrawing(this.element, this.getElementG(), PlaitBoard.getViewContainerRef(this.board));
7527
+ this.imageGenerator.processDrawing(this.element, this.getElementG());
7539
7528
  this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
7540
7529
  selected: this.selected
7541
7530
  });
@@ -7543,16 +7532,17 @@ class ImageComponent extends CommonElementFlavour {
7543
7532
  onContextChanged(value, previous) {
7544
7533
  if (value.element !== previous.element) {
7545
7534
  this.imageGenerator.updateImage(this.getElementG(), previous.element, value.element);
7546
- this.imageGenerator.componentRef.instance.isFocus = this.selected;
7535
+ this.imageGenerator.setFocus(this.element, this.selected);
7547
7536
  this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
7548
7537
  selected: this.selected
7549
7538
  });
7550
7539
  }
7551
7540
  else {
7552
7541
  const hasSameSelected = value.selected === previous.selected;
7553
- const hasSameHandleState = this.activeGenerator && this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
7542
+ const hasSameHandleState = this.imageGenerator.activeGenerator &&
7543
+ this.imageGenerator.activeGenerator.options.hasResizeHandle() === this.imageGenerator.activeGenerator.hasResizeHandle;
7554
7544
  if (!hasSameSelected || !hasSameHandleState) {
7555
- this.imageGenerator.componentRef.instance.isFocus = this.selected;
7545
+ this.imageGenerator.setFocus(this.element, this.selected);
7556
7546
  this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
7557
7547
  selected: this.selected
7558
7548
  });
@@ -7911,14 +7901,14 @@ class TableComponent extends CommonElementFlavour {
7911
7901
  }
7912
7902
  initializeTextManage() {
7913
7903
  const texts = this.getDrawShapeTexts(this.element.cells);
7914
- this.textGenerator = new TextGenerator(this.board, this.element, texts, PlaitBoard.getViewContainerRef(this.board), {
7915
- onValueChangeHandle: (value, textManageRef, text) => {
7916
- const height = textManageRef.height / this.board.viewport.zoom;
7917
- const width = textManageRef.width / this.board.viewport.zoom;
7918
- if (textManageRef.newValue) {
7919
- DrawTransforms.setTableText(this.board, value, text.key, textManageRef.newValue, width, height);
7904
+ this.textGenerator = new TextGenerator(this.board, this.element, texts, {
7905
+ onChange: (value, data, text) => {
7906
+ const height = data.height / this.board.viewport.zoom;
7907
+ const width = data.width / this.board.viewport.zoom;
7908
+ if (data.newText) {
7909
+ DrawTransforms.setTableText(this.board, value, text.key, data.newText, width, height);
7920
7910
  }
7921
- textManageRef.operations && memorizeLatestText(value, textManageRef.operations);
7911
+ data.operations && memorizeLatestText(value, data.operations);
7922
7912
  },
7923
7913
  getRenderRectangle: (value, text) => {
7924
7914
  const cell = getCellWithPoints(this.board, value, text.key);
@@ -8440,5 +8430,5 @@ const withDraw = (board) => {
8440
8430
  * Generated bundle index. Do not edit.
8441
8431
  */
8442
8432
 
8443
- export { BasicShapes, DEFAULT_IMAGE_WIDTH, DEFAULT_TEXT_HEIGHT, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, LineAutoCompleteGenerator, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitDrawElement, PlaitGeometry, PlaitLine, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editCell, editText, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedCells, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSelectedSwimlane, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isCellIncludeText, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryIncludeText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectElementByTable, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, withDraw, withLineAutoComplete };
8433
+ export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, LineAutoCompleteGenerator, LineComponent, LineHandleKey, LineMarkerType, LineShape, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitDrawElement, PlaitGeometry, PlaitLine, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editCell, editText, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedCells, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSelectedSwimlane, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isCellIncludeText, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryIncludeText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectElementByTable, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, withDraw, withLineAutoComplete };
8444
8434
  //# sourceMappingURL=plait-draw.mjs.map