@plait/draw 0.71.0 → 0.72.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/arrow-line.component.d.ts +1 -1
- package/constants/default.d.ts +1 -0
- package/constants/geometry.d.ts +5 -5
- package/constants/index.d.ts +1 -0
- package/constants/pointer.d.ts +3 -3
- package/engines/table/table.d.ts +2 -2
- package/engines/uml/combined-fragment.d.ts +2 -2
- package/engines/uml/package.d.ts +2 -2
- package/esm2022/arrow-line.component.mjs +13 -13
- package/esm2022/constants/default.mjs +2 -0
- package/esm2022/constants/geometry.mjs +8 -8
- package/esm2022/constants/index.mjs +2 -1
- package/esm2022/constants/pointer.mjs +4 -4
- package/esm2022/engines/table/table.mjs +3 -3
- package/esm2022/engines/uml/combined-fragment.mjs +5 -5
- package/esm2022/engines/uml/package.mjs +5 -5
- package/esm2022/generators/single-text.generator.mjs +3 -3
- package/esm2022/generators/text.generator.mjs +25 -21
- package/esm2022/geometry.component.mjs +4 -5
- package/esm2022/interfaces/arrow-line.mjs +1 -1
- package/esm2022/interfaces/element.mjs +1 -7
- package/esm2022/interfaces/geometry.mjs +6 -6
- package/esm2022/interfaces/index.mjs +13 -1
- package/esm2022/interfaces/options.mjs +2 -0
- package/esm2022/interfaces/vector-line.mjs +5 -5
- package/esm2022/plugins/with-arrow-line-text.mjs +2 -2
- package/esm2022/plugins/with-draw-fragment.mjs +8 -12
- package/esm2022/plugins/with-draw-hotkey.mjs +3 -3
- package/esm2022/plugins/with-draw-resize.mjs +11 -6
- package/esm2022/plugins/with-draw-rotate.mjs +3 -2
- package/esm2022/plugins/with-draw.mjs +10 -11
- package/esm2022/plugins/with-vector-line-create.mjs +123 -0
- package/esm2022/plugins/with-vector-line-resize.mjs +3 -3
- package/esm2022/table.component.mjs +8 -9
- package/esm2022/transforms/index.mjs +3 -3
- package/esm2022/transforms/multi-text-geometry-text.mjs +3 -3
- package/esm2022/utils/arrow-line/arrow-line-basic.mjs +3 -3
- package/esm2022/utils/clipboard.mjs +6 -17
- package/esm2022/utils/common.mjs +15 -8
- package/esm2022/utils/geometry.mjs +3 -3
- package/esm2022/utils/hit.mjs +21 -19
- package/esm2022/utils/index.mjs +2 -1
- package/esm2022/utils/multi-text-geometry.mjs +3 -3
- package/esm2022/utils/selected.mjs +9 -1
- package/esm2022/utils/snap-resizing.mjs +1 -1
- package/esm2022/utils/style/stroke.mjs +6 -6
- package/esm2022/utils/table.mjs +2 -2
- package/esm2022/utils/vector-line.mjs +3 -9
- package/esm2022/vector-line.component.mjs +2 -4
- package/fesm2022/plait-draw.mjs +248 -301
- package/fesm2022/plait-draw.mjs.map +1 -1
- package/generators/single-text.generator.d.ts +2 -2
- package/generators/text.generator.d.ts +11 -11
- package/interfaces/arrow-line.d.ts +1 -1
- package/interfaces/element.d.ts +0 -5
- package/interfaces/geometry.d.ts +11 -10
- package/interfaces/index.d.ts +4 -1
- package/interfaces/options.d.ts +4 -0
- package/interfaces/vector-line.d.ts +4 -4
- package/package.json +1 -1
- package/plugins/with-vector-line-create.d.ts +2 -0
- package/styles/styles.scss +1 -1
- package/table.component.d.ts +2 -2
- package/transforms/common.d.ts +1 -1
- package/transforms/geometry.d.ts +1 -1
- package/transforms/index.d.ts +3 -3
- package/transforms/multi-text-geometry-text.d.ts +2 -2
- package/utils/clipboard.d.ts +10 -3
- package/utils/common.d.ts +5 -3
- package/utils/geometry.d.ts +6 -6
- package/utils/hit.d.ts +8 -4
- package/utils/index.d.ts +1 -0
- package/utils/multi-text-geometry.d.ts +6 -10
- package/utils/selected.d.ts +3 -1
- package/utils/snap-resizing.d.ts +2 -2
- package/utils/vector-line.d.ts +0 -1
- package/esm2022/plugins/with-geometry-resize.mjs +0 -70
- package/esm2022/plugins/with-vector-pen-create.mjs +0 -123
- package/plugins/with-geometry-resize.d.ts +0 -2
- package/plugins/with-vector-pen-create.d.ts +0 -2
package/fesm2022/plait-draw.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon,
|
|
2
|
-
import { DEFAULT_FILL, Alignment, WithTextPluginKey,
|
|
1
|
+
import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isPolylineHitRectangle, rotatePointsByAngle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, rotate, findElements, createMask, createRect, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
|
|
2
|
+
import { DEFAULT_FILL, Alignment, WithTextPluginKey, TextManage, getMemorizedLatest, memorizeLatest, getPointOnPolyline, buildText, Generator, getStrokeLineDash, StrokeStyle, sortElementsByArea, isFilled, getTextEditorsByElement, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, 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
3
|
import { pointsOnBezierCurves } from 'points-on-curve';
|
|
4
4
|
import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
|
|
5
5
|
import { isKeyHotkey } from 'is-hotkey';
|
|
@@ -80,11 +80,11 @@ var UMLSymbols;
|
|
|
80
80
|
UMLSymbols["providedInterface"] = "providedInterface";
|
|
81
81
|
UMLSymbols["requiredInterface"] = "requiredInterface";
|
|
82
82
|
})(UMLSymbols || (UMLSymbols = {}));
|
|
83
|
-
var
|
|
84
|
-
(function (
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
})(
|
|
83
|
+
var GeometryCommonTextKeys;
|
|
84
|
+
(function (GeometryCommonTextKeys) {
|
|
85
|
+
GeometryCommonTextKeys["name"] = "name";
|
|
86
|
+
GeometryCommonTextKeys["content"] = "content";
|
|
87
|
+
})(GeometryCommonTextKeys || (GeometryCommonTextKeys = {}));
|
|
88
88
|
const PlaitGeometry = {};
|
|
89
89
|
|
|
90
90
|
var SwimlaneSymbols;
|
|
@@ -113,6 +113,8 @@ const PlaitTableElement = {
|
|
|
113
113
|
}
|
|
114
114
|
};
|
|
115
115
|
|
|
116
|
+
const WithDrawPluginKey = 'plait-draw-plugin-key';
|
|
117
|
+
|
|
116
118
|
const ShapeDefaultSpace = {
|
|
117
119
|
rectangleAndText: 4
|
|
118
120
|
};
|
|
@@ -213,12 +215,12 @@ const DefaultPackageProperty = {
|
|
|
213
215
|
height: 150,
|
|
214
216
|
texts: [
|
|
215
217
|
{
|
|
216
|
-
|
|
218
|
+
id: GeometryCommonTextKeys.name,
|
|
217
219
|
text: '包名',
|
|
218
220
|
align: Alignment.left
|
|
219
221
|
},
|
|
220
222
|
{
|
|
221
|
-
|
|
223
|
+
id: GeometryCommonTextKeys.content,
|
|
222
224
|
text: '',
|
|
223
225
|
align: Alignment.left
|
|
224
226
|
}
|
|
@@ -261,12 +263,12 @@ const DefaultCombinedFragmentProperty = {
|
|
|
261
263
|
height: 280,
|
|
262
264
|
texts: [
|
|
263
265
|
{
|
|
264
|
-
|
|
266
|
+
id: GeometryCommonTextKeys.name,
|
|
265
267
|
text: 'Opt | Alt | Loop',
|
|
266
268
|
align: Alignment.left
|
|
267
269
|
},
|
|
268
270
|
{
|
|
269
|
-
|
|
271
|
+
id: GeometryCommonTextKeys.content,
|
|
270
272
|
text: '[Condition]',
|
|
271
273
|
align: Alignment.left
|
|
272
274
|
}
|
|
@@ -356,8 +358,8 @@ const DefaultUMLPropertyMap = {
|
|
|
356
358
|
[UMLSymbols.requiredInterface]: DefaultRequiredInterfaceProperty
|
|
357
359
|
};
|
|
358
360
|
const MultipleTextGeometryTextKeys = {
|
|
359
|
-
[UMLSymbols.package]: Object.keys(
|
|
360
|
-
[UMLSymbols.combinedFragment]: Object.keys(
|
|
361
|
+
[UMLSymbols.package]: Object.keys(GeometryCommonTextKeys),
|
|
362
|
+
[UMLSymbols.combinedFragment]: Object.keys(GeometryCommonTextKeys)
|
|
361
363
|
};
|
|
362
364
|
const LINE_HIT_GEOMETRY_BUFFER = 10;
|
|
363
365
|
const LINE_SNAPPING_BUFFER = 6;
|
|
@@ -400,8 +402,8 @@ const getUMLPointers = () => {
|
|
|
400
402
|
const getArrowLinePointers = () => {
|
|
401
403
|
return Object.keys(ArrowLineShape);
|
|
402
404
|
};
|
|
403
|
-
const
|
|
404
|
-
return Object.keys(
|
|
405
|
+
const getVectorLinePointers = () => {
|
|
406
|
+
return Object.keys(VectorLinePointerType);
|
|
405
407
|
};
|
|
406
408
|
|
|
407
409
|
const DEFAULT_IMAGE_WIDTH = 1000;
|
|
@@ -469,14 +471,20 @@ const getElementShape = (value) => {
|
|
|
469
471
|
return value.shape;
|
|
470
472
|
};
|
|
471
473
|
|
|
474
|
+
// TODO: 是否可以完全基于位置定位 TextManager,实现 line 和 多文本 geometry 统一
|
|
475
|
+
// 一个元素有多个文本时,单纯通过位置无法获取 TextManage,因此这里单独通过 Map 保存关键字 key 和 TextManage 的对应关系
|
|
476
|
+
// 1. 单文本元素 key 就是元素的 id
|
|
477
|
+
// 2. 表格元素 key 是单元格的 id
|
|
478
|
+
// 3. 符合 isMultipleTextGeometry 的元素,key 是元素 id + text.id (通常不是 id 而是文本位置的常量)
|
|
479
|
+
// 4. arrow-line 和 vector-line 文本不依赖于 text.generator,基于 text 可以直接找到 TextManage
|
|
472
480
|
const KEY_TO_TEXT_MANAGE = new WeakMap();
|
|
473
|
-
const setTextManage = (board,
|
|
481
|
+
const setTextManage = (board, element, text, textManage) => {
|
|
474
482
|
const textManages = KEY_TO_TEXT_MANAGE.get(board);
|
|
475
|
-
return KEY_TO_TEXT_MANAGE.set(board, { ...textManages, [
|
|
483
|
+
return KEY_TO_TEXT_MANAGE.set(board, { ...textManages, [getTextKey(element, text)]: textManage });
|
|
476
484
|
};
|
|
477
|
-
const getTextManage = (board,
|
|
485
|
+
const getTextManage = (board, element, text) => {
|
|
478
486
|
const textManages = KEY_TO_TEXT_MANAGE.get(board);
|
|
479
|
-
return textManages[
|
|
487
|
+
return textManages[getTextKey(element, text)];
|
|
480
488
|
};
|
|
481
489
|
const deleteTextManage = (board, key) => {
|
|
482
490
|
const textManages = KEY_TO_TEXT_MANAGE.get(board);
|
|
@@ -498,15 +506,16 @@ class TextGenerator {
|
|
|
498
506
|
.textPlugins;
|
|
499
507
|
this.textManages = this.texts.map(text => {
|
|
500
508
|
const textManage = this.createTextManage(text, textPlugins);
|
|
501
|
-
setTextManage(this.board,
|
|
509
|
+
setTextManage(this.board, this.element, text, textManage);
|
|
502
510
|
return textManage;
|
|
503
511
|
});
|
|
504
|
-
|
|
512
|
+
const ref = PlaitElement.getElementRef(this.element);
|
|
513
|
+
ref.initializeTextManage(this.textManages);
|
|
505
514
|
}
|
|
506
515
|
draw(elementG) {
|
|
507
516
|
const centerPoint = RectangleClient.getCenterPoint(this.board.getRectangle(this.element));
|
|
508
517
|
this.texts.forEach(drawShapeText => {
|
|
509
|
-
const textManage = getTextManage(this.board,
|
|
518
|
+
const textManage = getTextManage(this.board, this.element, drawShapeText);
|
|
510
519
|
if (drawShapeText.text && textManage) {
|
|
511
520
|
textManage.draw(drawShapeText.text);
|
|
512
521
|
elementG.append(textManage.g);
|
|
@@ -516,30 +525,29 @@ class TextGenerator {
|
|
|
516
525
|
}
|
|
517
526
|
update(element, previousDrawShapeTexts, currentDrawShapeTexts, elementG) {
|
|
518
527
|
this.element = element;
|
|
519
|
-
ELEMENT_TO_TEXT_MANAGES.set(this.element, this.textManages);
|
|
520
528
|
const centerPoint = RectangleClient.getCenterPoint(this.board.getRectangle(this.element));
|
|
521
529
|
const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {})
|
|
522
530
|
.textPlugins;
|
|
523
531
|
const removedTexts = previousDrawShapeTexts.filter(value => {
|
|
524
|
-
return !currentDrawShapeTexts.find(item => item.
|
|
532
|
+
return !currentDrawShapeTexts.find(item => item.id === value.id);
|
|
525
533
|
});
|
|
526
534
|
if (removedTexts.length) {
|
|
527
535
|
removedTexts.forEach(item => {
|
|
528
|
-
const textManage = getTextManage(this.board, item
|
|
536
|
+
const textManage = getTextManage(this.board, element, item);
|
|
529
537
|
const index = this.textManages.findIndex(value => value === textManage);
|
|
530
538
|
if (index > -1 && item.text && item.textHeight) {
|
|
531
539
|
this.textManages.splice(index, 1);
|
|
532
540
|
}
|
|
533
541
|
textManage?.destroy();
|
|
534
|
-
deleteTextManage(this.board, item.
|
|
542
|
+
deleteTextManage(this.board, item.id);
|
|
535
543
|
});
|
|
536
544
|
}
|
|
537
545
|
currentDrawShapeTexts.forEach(drawShapeText => {
|
|
538
546
|
if (drawShapeText.text) {
|
|
539
|
-
let textManage = getTextManage(this.board,
|
|
547
|
+
let textManage = getTextManage(this.board, this.element, drawShapeText);
|
|
540
548
|
if (!textManage) {
|
|
541
549
|
textManage = this.createTextManage(drawShapeText, textPlugins);
|
|
542
|
-
setTextManage(this.board, drawShapeText
|
|
550
|
+
setTextManage(this.board, element, drawShapeText, textManage);
|
|
543
551
|
textManage.draw(drawShapeText.text);
|
|
544
552
|
elementG.append(textManage.g);
|
|
545
553
|
this.textManages.push(textManage);
|
|
@@ -581,13 +589,11 @@ class TextGenerator {
|
|
|
581
589
|
return this.options.getMaxWidth ? this.options.getMaxWidth() : this.getRectangle(text).width;
|
|
582
590
|
}
|
|
583
591
|
destroy() {
|
|
584
|
-
this.
|
|
585
|
-
|
|
586
|
-
});
|
|
592
|
+
const ref = PlaitElement.getElementRef(this.element);
|
|
593
|
+
ref.destroyTextManage();
|
|
587
594
|
this.textManages = [];
|
|
588
|
-
ELEMENT_TO_TEXT_MANAGES.delete(this.element);
|
|
589
595
|
this.texts.forEach(item => {
|
|
590
|
-
deleteTextManage(this.board, item.
|
|
596
|
+
deleteTextManage(this.board, item.id);
|
|
591
597
|
});
|
|
592
598
|
}
|
|
593
599
|
}
|
|
@@ -708,7 +714,7 @@ function editCell(board, cell) {
|
|
|
708
714
|
textManage && textManage.edit();
|
|
709
715
|
}
|
|
710
716
|
function getTextManageByCell(board, cell) {
|
|
711
|
-
return getTextManage(board, cell
|
|
717
|
+
return getTextManage(board, undefined, cell);
|
|
712
718
|
}
|
|
713
719
|
const updateColumns = (table, columnId, width, offset) => {
|
|
714
720
|
const columns = table.columns.map(item => (item.id === columnId ? { ...item, width } : item));
|
|
@@ -925,7 +931,7 @@ const buildDefaultTextsByShape = (shape) => {
|
|
|
925
931
|
return (textKeys || []).map((textKey) => {
|
|
926
932
|
const text = defaultTexts?.find((item) => item?.key === textKey);
|
|
927
933
|
return {
|
|
928
|
-
|
|
934
|
+
id: textKey,
|
|
929
935
|
text: buildText(text?.text || '', alignment || text?.align || Alignment.center, textProperties),
|
|
930
936
|
textHeight: textHeight
|
|
931
937
|
};
|
|
@@ -937,7 +943,7 @@ const getHitMultipleGeometryText = (element, point) => {
|
|
|
937
943
|
let hitText;
|
|
938
944
|
if (engine.getTextRectangle) {
|
|
939
945
|
hitText = element.texts.find(text => {
|
|
940
|
-
const textRectangle = engine.getTextRectangle(element, {
|
|
946
|
+
const textRectangle = engine.getTextRectangle(element, { id: text.id });
|
|
941
947
|
return RectangleClient.isHit(rectangle, textRectangle);
|
|
942
948
|
});
|
|
943
949
|
}
|
|
@@ -967,12 +973,6 @@ class VectorLineShapeGenerator extends Generator {
|
|
|
967
973
|
}
|
|
968
974
|
}
|
|
969
975
|
|
|
970
|
-
const isClosedVectorLine = (vectorLine) => {
|
|
971
|
-
const points = vectorLine.points;
|
|
972
|
-
const startPoint = points[0];
|
|
973
|
-
const endPoint = points[points.length - 1];
|
|
974
|
-
return startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1];
|
|
975
|
-
};
|
|
976
976
|
const getVectorLinePoints = (board, element) => {
|
|
977
977
|
switch (element.shape) {
|
|
978
978
|
case VectorLineShape.straight: {
|
|
@@ -1055,7 +1055,7 @@ const isHitArrowLine = (board, element, point) => {
|
|
|
1055
1055
|
};
|
|
1056
1056
|
const isHitVectorLine = (board, element, point) => {
|
|
1057
1057
|
const points = getVectorLinePoints(board, element);
|
|
1058
|
-
if (
|
|
1058
|
+
if (isClosedPoints(element.points)) {
|
|
1059
1059
|
return isPointInPolygon(point, points) || isHitPolyLine(points, point);
|
|
1060
1060
|
}
|
|
1061
1061
|
else {
|
|
@@ -1067,15 +1067,13 @@ const isRectangleHitElementText = (element, rectangle) => {
|
|
|
1067
1067
|
if (isMultipleTextGeometry(element)) {
|
|
1068
1068
|
const texts = element.texts;
|
|
1069
1069
|
return texts.some(item => {
|
|
1070
|
-
const textClient = engine.getTextRectangle(element, {
|
|
1071
|
-
|
|
1072
|
-
return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
|
|
1070
|
+
const textClient = engine.getTextRectangle(element, { id: item.id });
|
|
1071
|
+
return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
|
|
1073
1072
|
});
|
|
1074
1073
|
}
|
|
1075
1074
|
else {
|
|
1076
1075
|
const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
|
|
1077
|
-
|
|
1078
|
-
return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
|
|
1076
|
+
return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
|
|
1079
1077
|
}
|
|
1080
1078
|
};
|
|
1081
1079
|
const isHitElementText = (element, point) => {
|
|
@@ -1083,7 +1081,7 @@ const isHitElementText = (element, point) => {
|
|
|
1083
1081
|
if (isMultipleTextGeometry(element)) {
|
|
1084
1082
|
const texts = element.texts;
|
|
1085
1083
|
return texts.some(item => {
|
|
1086
|
-
const textClient = engine.getTextRectangle(element, {
|
|
1084
|
+
const textClient = engine.getTextRectangle(element, { id: item.id });
|
|
1087
1085
|
return RectangleClient.isPointInRectangle(textClient, point);
|
|
1088
1086
|
});
|
|
1089
1087
|
}
|
|
@@ -1095,18 +1093,14 @@ const isHitElementText = (element, point) => {
|
|
|
1095
1093
|
const isRectangleHitDrawElement = (board, element, selection) => {
|
|
1096
1094
|
const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
|
|
1097
1095
|
if (PlaitDrawElement.isGeometry(element)) {
|
|
1098
|
-
const
|
|
1099
|
-
let rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
|
|
1100
|
-
const isHitElement = isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
|
|
1096
|
+
const isHitElement = isRectangleHitRotatedElement(board, rangeRectangle, element);
|
|
1101
1097
|
if (isHitElement) {
|
|
1102
1098
|
return isHitElement;
|
|
1103
1099
|
}
|
|
1104
1100
|
return isRectangleHitElementText(element, rangeRectangle);
|
|
1105
1101
|
}
|
|
1106
1102
|
if (PlaitDrawElement.isImage(element)) {
|
|
1107
|
-
|
|
1108
|
-
const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
|
|
1109
|
-
return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
|
|
1103
|
+
return isRectangleHitRotatedElement(board, rangeRectangle, element);
|
|
1110
1104
|
}
|
|
1111
1105
|
if (PlaitDrawElement.isArrowLine(element)) {
|
|
1112
1106
|
const points = getArrowLinePoints(board, element);
|
|
@@ -1118,7 +1112,15 @@ const isRectangleHitDrawElement = (board, element, selection) => {
|
|
|
1118
1112
|
}
|
|
1119
1113
|
return null;
|
|
1120
1114
|
};
|
|
1121
|
-
const
|
|
1115
|
+
const isRectangleHitRotatedElement = (board, rectangle, element) => {
|
|
1116
|
+
const client = RectangleClient.getRectangleByPoints(element.points);
|
|
1117
|
+
return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(client), element.angle);
|
|
1118
|
+
};
|
|
1119
|
+
const isRectangleHitRotatedPoints = (rectangle, points, angle) => {
|
|
1120
|
+
let rotatedPoints = rotatePointsByAngle(points, angle) || points;
|
|
1121
|
+
return isPolylineHitRectangle(rotatedPoints, rectangle);
|
|
1122
|
+
};
|
|
1123
|
+
const getHitDrawElement = (board, elements) => {
|
|
1122
1124
|
let firstFilledElement = getFirstFilledDrawElement(board, elements);
|
|
1123
1125
|
let endIndex = elements.length;
|
|
1124
1126
|
if (firstFilledElement) {
|
|
@@ -1136,7 +1138,7 @@ const getFirstFilledDrawElement = (board, elements) => {
|
|
|
1136
1138
|
let filledElement = null;
|
|
1137
1139
|
for (let i = 0; i < elements.length; i++) {
|
|
1138
1140
|
const element = elements[i];
|
|
1139
|
-
if (isDrawElementClosed(element)) {
|
|
1141
|
+
if (isCustomGeometryClosed(board, element) || isDrawElementClosed(element)) {
|
|
1140
1142
|
const fill = getFillByElement(board, element);
|
|
1141
1143
|
if (isFilled(fill)) {
|
|
1142
1144
|
filledElement = element;
|
|
@@ -1277,13 +1279,16 @@ const isDrawElementClosed = (element) => {
|
|
|
1277
1279
|
return false;
|
|
1278
1280
|
}
|
|
1279
1281
|
if (PlaitDrawElement.isVectorLine(element)) {
|
|
1280
|
-
return
|
|
1282
|
+
return isClosedPoints(element.points);
|
|
1281
1283
|
}
|
|
1282
1284
|
if (PlaitDrawElement.isGeometry(element)) {
|
|
1283
1285
|
return isGeometryClosed(element);
|
|
1284
1286
|
}
|
|
1285
1287
|
return true;
|
|
1286
1288
|
};
|
|
1289
|
+
const isCustomGeometryClosed = (board, value) => {
|
|
1290
|
+
return PlaitDrawElement.isCustomGeometryElement(board, value) && isClosedPoints(value.points);
|
|
1291
|
+
};
|
|
1287
1292
|
const getSnappingShape = (board, point) => {
|
|
1288
1293
|
let hitElement = getHitShape(board, point);
|
|
1289
1294
|
if (hitElement) {
|
|
@@ -1358,16 +1363,16 @@ const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasCo
|
|
|
1358
1363
|
return g;
|
|
1359
1364
|
};
|
|
1360
1365
|
const getTextKey = (element, text) => {
|
|
1361
|
-
if (isMultipleTextGeometry(element)) {
|
|
1362
|
-
return `${element.id}-${text.
|
|
1366
|
+
if (element && isMultipleTextGeometry(element)) {
|
|
1367
|
+
return `${element.id}-${text.id}`;
|
|
1363
1368
|
}
|
|
1364
1369
|
else {
|
|
1365
|
-
return text.
|
|
1370
|
+
return text.id;
|
|
1366
1371
|
}
|
|
1367
1372
|
};
|
|
1368
1373
|
const getGeometryAlign = (board, element) => {
|
|
1369
1374
|
if (isMultipleTextGeometry(element)) {
|
|
1370
|
-
const drawShapeText = element.texts.find(item => item.
|
|
1375
|
+
const drawShapeText = element.texts.find(item => item.id.includes(GeometryCommonTextKeys.content));
|
|
1371
1376
|
return drawShapeText?.text.align || Alignment.center;
|
|
1372
1377
|
}
|
|
1373
1378
|
if (isSingleTextGeometry(element)) {
|
|
@@ -1379,6 +1384,11 @@ const getGeometryAlign = (board, element) => {
|
|
|
1379
1384
|
}
|
|
1380
1385
|
return Alignment.center;
|
|
1381
1386
|
};
|
|
1387
|
+
const isClosedPoints = (points) => {
|
|
1388
|
+
const startPoint = points[0];
|
|
1389
|
+
const endPoint = points[points.length - 1];
|
|
1390
|
+
return startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1];
|
|
1391
|
+
};
|
|
1382
1392
|
|
|
1383
1393
|
const getStrokeColorByElement = (board, element) => {
|
|
1384
1394
|
const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
|
|
@@ -1386,8 +1396,8 @@ const getStrokeColorByElement = (board, element) => {
|
|
|
1386
1396
|
return strokeColor;
|
|
1387
1397
|
};
|
|
1388
1398
|
const getFillByElement = (board, element) => {
|
|
1389
|
-
const defaultFill =
|
|
1390
|
-
?
|
|
1399
|
+
const defaultFill = isDrawElementClosed(element) || isCustomGeometryClosed(board, element)
|
|
1400
|
+
? getDefaultFill(board.theme.themeColorMode)
|
|
1391
1401
|
: DefaultDrawStyle.fill;
|
|
1392
1402
|
const fill = element.fill || defaultFill;
|
|
1393
1403
|
return fill;
|
|
@@ -2245,7 +2255,7 @@ const getHitIndexOfAutoCompletePoint = (movingPoint, points) => {
|
|
|
2245
2255
|
const getDrawDefaultStrokeColor = (theme) => {
|
|
2246
2256
|
return DrawThemeColors[theme].strokeColor;
|
|
2247
2257
|
};
|
|
2248
|
-
const
|
|
2258
|
+
const getDefaultFill = (theme) => {
|
|
2249
2259
|
return DrawThemeColors[theme].fill;
|
|
2250
2260
|
};
|
|
2251
2261
|
const getTextShapeProperty = (board, text = DefaultTextProperty.text, fontSize) => {
|
|
@@ -2305,7 +2315,7 @@ const createDefaultGeometry = (board, points, shape) => {
|
|
|
2305
2315
|
}
|
|
2306
2316
|
};
|
|
2307
2317
|
const editText = (board, element, text) => {
|
|
2308
|
-
const textManage = text ? getTextManage(board,
|
|
2318
|
+
const textManage = text ? getTextManage(board, element, text) : getFirstTextManage(element);
|
|
2309
2319
|
if (textManage) {
|
|
2310
2320
|
textManage.edit(() => {
|
|
2311
2321
|
// delay to avoid blinking
|
|
@@ -2450,6 +2460,10 @@ const getSelectedGeometryElements = (board) => {
|
|
|
2450
2460
|
const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isGeometry(value));
|
|
2451
2461
|
return selectedElements;
|
|
2452
2462
|
};
|
|
2463
|
+
const getSelectedCustomGeometryElements = (board) => {
|
|
2464
|
+
const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isCustomGeometryElement(board, value));
|
|
2465
|
+
return selectedElements;
|
|
2466
|
+
};
|
|
2453
2467
|
const getSelectedArrowLineElements = (board) => {
|
|
2454
2468
|
const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isArrowLine(value));
|
|
2455
2469
|
return selectedElements;
|
|
@@ -2466,6 +2480,10 @@ const isSingleSelectSwimlane = (board) => {
|
|
|
2466
2480
|
const selectedElements = getSelectedElements(board);
|
|
2467
2481
|
return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isSwimlane(selectedElements[0]);
|
|
2468
2482
|
};
|
|
2483
|
+
const isSingleSelectArrowLine = (board) => {
|
|
2484
|
+
const selectedElements = getSelectedElements(board);
|
|
2485
|
+
return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isArrowLine(selectedElements[0]);
|
|
2486
|
+
};
|
|
2469
2487
|
const getSelectedSwimlane = (board) => {
|
|
2470
2488
|
const selectedElements = getSelectedElements(board);
|
|
2471
2489
|
return selectedElements.find(item => PlaitDrawElement.isSwimlane(item));
|
|
@@ -2924,9 +2942,9 @@ const updateSwimlane = (board, swimlane, newColumns, newRows, newCells, newPoint
|
|
|
2924
2942
|
}, path);
|
|
2925
2943
|
};
|
|
2926
2944
|
|
|
2927
|
-
const
|
|
2945
|
+
const setDrawTexts = (board, element, text) => {
|
|
2928
2946
|
const newTexts = element.texts?.map(item => {
|
|
2929
|
-
if (item.
|
|
2947
|
+
if (item.id === text.id) {
|
|
2930
2948
|
return { ...item, ...text };
|
|
2931
2949
|
}
|
|
2932
2950
|
return item;
|
|
@@ -3056,7 +3074,7 @@ const insertDrawByVector = (board, point, shape, vector) => {
|
|
|
3056
3074
|
|
|
3057
3075
|
const DrawTransforms = {
|
|
3058
3076
|
setText,
|
|
3059
|
-
|
|
3077
|
+
setDrawTexts,
|
|
3060
3078
|
insertGeometry,
|
|
3061
3079
|
resizeGeometry,
|
|
3062
3080
|
insertText,
|
|
@@ -3118,7 +3136,10 @@ function withDrawResize(board) {
|
|
|
3118
3136
|
let resizeActivePoints = null;
|
|
3119
3137
|
const canResize = () => {
|
|
3120
3138
|
const elements = getSelectedElements(board);
|
|
3121
|
-
return elements.length
|
|
3139
|
+
return (elements.length >= 1 &&
|
|
3140
|
+
elements.every(el => (PlaitDrawElement.isDrawElement(el) || PlaitDrawElement.isCustomGeometryElement(board, el)) &&
|
|
3141
|
+
!isSingleSelectArrowLine(board) &&
|
|
3142
|
+
!isSingleSelectSwimlane(board)));
|
|
3122
3143
|
};
|
|
3123
3144
|
const options = {
|
|
3124
3145
|
key: 'draw-elements',
|
|
@@ -3142,7 +3163,7 @@ function withDrawResize(board) {
|
|
|
3142
3163
|
snapG?.remove();
|
|
3143
3164
|
debugGenerator$2.isDebug() && debugGenerator$2.clear();
|
|
3144
3165
|
const isFromCorner = isCornerHandle(board, resizeRef.handle);
|
|
3145
|
-
const isAspectRatio = resizeState.isShift
|
|
3166
|
+
const isAspectRatio = resizeState.isShift;
|
|
3146
3167
|
const centerPoint = RectangleClient.getCenterPoint(resizeRef.rectangle);
|
|
3147
3168
|
const handleIndex = getIndexByResizeHandle(resizeRef.handle);
|
|
3148
3169
|
const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, handleIndex, resizeRef.rectangle);
|
|
@@ -3212,7 +3233,7 @@ function withDrawResize(board) {
|
|
|
3212
3233
|
}
|
|
3213
3234
|
}
|
|
3214
3235
|
if (PlaitDrawElement.isGeometry(target)) {
|
|
3215
|
-
if (isGeometryIncludeText(target)) {
|
|
3236
|
+
if (PlaitDrawElement.isGeometry(target) && isGeometryIncludeText(target)) {
|
|
3216
3237
|
const { height: textHeight } = getFirstTextManage(target).getSize();
|
|
3217
3238
|
DrawTransforms.resizeGeometry(board, points, textHeight, path);
|
|
3218
3239
|
}
|
|
@@ -3221,7 +3242,9 @@ function withDrawResize(board) {
|
|
|
3221
3242
|
Transforms.setNode(board, { points }, path);
|
|
3222
3243
|
}
|
|
3223
3244
|
}
|
|
3224
|
-
else if (PlaitDrawElement.
|
|
3245
|
+
else if (PlaitDrawElement.isLine(target) ||
|
|
3246
|
+
PlaitDrawElement.isCustomGeometryElement(board, target) ||
|
|
3247
|
+
PlaitDrawElement.isVectorLine(target)) {
|
|
3225
3248
|
Transforms.setNode(board, { points }, path);
|
|
3226
3249
|
}
|
|
3227
3250
|
else if (PlaitDrawElement.isImage(target)) {
|
|
@@ -3600,6 +3623,56 @@ function getMiddlePoints(board, element) {
|
|
|
3600
3623
|
return result;
|
|
3601
3624
|
}
|
|
3602
3625
|
|
|
3626
|
+
const buildClipboardData = (board, elements, startPoint) => {
|
|
3627
|
+
return buildClipboardData$1(board, elements, startPoint, (element) => {
|
|
3628
|
+
if (PlaitDrawElement.isArrowLine(element)) {
|
|
3629
|
+
let source = { ...element.source };
|
|
3630
|
+
let target = { ...element.target };
|
|
3631
|
+
let points = [...element.points];
|
|
3632
|
+
if (element.source.boundId) {
|
|
3633
|
+
points[0] = getConnectionPoint(getElementById(board, element.source.boundId), element.source.connection);
|
|
3634
|
+
if (!getElementById(board, element.source.boundId, elements)) {
|
|
3635
|
+
delete source.boundId;
|
|
3636
|
+
delete source.connection;
|
|
3637
|
+
}
|
|
3638
|
+
}
|
|
3639
|
+
if (element.target.boundId) {
|
|
3640
|
+
points[points.length - 1] = getConnectionPoint(getElementById(board, element.target.boundId), element.target.connection);
|
|
3641
|
+
if (!getElementById(board, element.target.boundId, elements)) {
|
|
3642
|
+
delete target.boundId;
|
|
3643
|
+
delete target.connection;
|
|
3644
|
+
}
|
|
3645
|
+
}
|
|
3646
|
+
points = points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
|
|
3647
|
+
return { ...element, points, source, target };
|
|
3648
|
+
}
|
|
3649
|
+
return undefined;
|
|
3650
|
+
});
|
|
3651
|
+
};
|
|
3652
|
+
const insertClipboardData = (board, elements, startPoint) => {
|
|
3653
|
+
insertClipboardData$1(board, elements, startPoint, (element, idsMap) => {
|
|
3654
|
+
if (PlaitDrawElement.isArrowLine(element)) {
|
|
3655
|
+
if (element.source.boundId) {
|
|
3656
|
+
const boundElement = elements.find(item => [element.source.boundId, idsMap[element.source.boundId]].includes(item.id));
|
|
3657
|
+
if (boundElement) {
|
|
3658
|
+
element.source.boundId = idsMap[element.source.boundId];
|
|
3659
|
+
}
|
|
3660
|
+
}
|
|
3661
|
+
if (element.target.boundId) {
|
|
3662
|
+
const boundElement = elements.find(item => [element.target.boundId, idsMap[element.target.boundId]].includes(item.id));
|
|
3663
|
+
if (boundElement) {
|
|
3664
|
+
element.target.boundId = idsMap[element.target.boundId];
|
|
3665
|
+
}
|
|
3666
|
+
}
|
|
3667
|
+
}
|
|
3668
|
+
if (PlaitDrawElement.isElementByTable(element)) {
|
|
3669
|
+
updateRowOrColumnIds(element, 'row');
|
|
3670
|
+
updateRowOrColumnIds(element, 'column');
|
|
3671
|
+
updateCellIds(element.cells);
|
|
3672
|
+
}
|
|
3673
|
+
});
|
|
3674
|
+
};
|
|
3675
|
+
|
|
3603
3676
|
const getCenterPointsOnPolygon = (points) => {
|
|
3604
3677
|
const centerPoints = [];
|
|
3605
3678
|
for (let i = 0; i < points.length; i++) {
|
|
@@ -5411,8 +5484,8 @@ const TableEngine = {
|
|
|
5411
5484
|
},
|
|
5412
5485
|
getTextRectangle(element, options) {
|
|
5413
5486
|
try {
|
|
5414
|
-
if (options && options.
|
|
5415
|
-
const cell = getCellWithPoints(options?.board, element, options.
|
|
5487
|
+
if (options && options.id) {
|
|
5488
|
+
const cell = getCellWithPoints(options?.board, element, options.id);
|
|
5416
5489
|
if (cell) {
|
|
5417
5490
|
if (PlaitTableElement.isVerticalText(cell)) {
|
|
5418
5491
|
return getVerticalTextRectangle(cell);
|
|
@@ -5643,8 +5716,8 @@ const PackageEngine = {
|
|
|
5643
5716
|
getTextRectangle(element, options) {
|
|
5644
5717
|
const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
|
|
5645
5718
|
const strokeWidth = getStrokeWidthByElement(element);
|
|
5646
|
-
const textHeight = element.texts?.find(item => item.
|
|
5647
|
-
if (options?.
|
|
5719
|
+
const textHeight = element.texts?.find(item => item.id === options?.id)?.textHeight;
|
|
5720
|
+
if (options?.id === GeometryCommonTextKeys.name) {
|
|
5648
5721
|
const width = elementRectangle.width * 0.7 - ShapeDefaultSpace.rectangleAndText - strokeWidth;
|
|
5649
5722
|
return {
|
|
5650
5723
|
height: textHeight,
|
|
@@ -5653,7 +5726,7 @@ const PackageEngine = {
|
|
|
5653
5726
|
y: elementRectangle.y + (25 - textHeight) / 2
|
|
5654
5727
|
};
|
|
5655
5728
|
}
|
|
5656
|
-
if (options?.
|
|
5729
|
+
if (options?.id === GeometryCommonTextKeys.content) {
|
|
5657
5730
|
const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
|
|
5658
5731
|
return {
|
|
5659
5732
|
height: textHeight,
|
|
@@ -5703,8 +5776,8 @@ const CombinedFragmentEngine = {
|
|
|
5703
5776
|
getTextRectangle(element, options) {
|
|
5704
5777
|
const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
|
|
5705
5778
|
const strokeWidth = getStrokeWidthByElement(element);
|
|
5706
|
-
const textHeight = element.texts?.find(item => item.
|
|
5707
|
-
if (options?.
|
|
5779
|
+
const textHeight = element.texts?.find(item => item.id === options?.id)?.textHeight;
|
|
5780
|
+
if (options?.id === GeometryCommonTextKeys.name) {
|
|
5708
5781
|
const width = elementRectangle.width / 3 - 8 - ShapeDefaultSpace.rectangleAndText - strokeWidth;
|
|
5709
5782
|
return {
|
|
5710
5783
|
height: textHeight,
|
|
@@ -5713,7 +5786,7 @@ const CombinedFragmentEngine = {
|
|
|
5713
5786
|
y: elementRectangle.y + (25 - textHeight) / 2
|
|
5714
5787
|
};
|
|
5715
5788
|
}
|
|
5716
|
-
if (options?.
|
|
5789
|
+
if (options?.id === GeometryCommonTextKeys.content) {
|
|
5717
5790
|
const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
|
|
5718
5791
|
return {
|
|
5719
5792
|
height: textHeight,
|
|
@@ -6443,12 +6516,6 @@ const PlaitArrowLine = {
|
|
|
6443
6516
|
}
|
|
6444
6517
|
};
|
|
6445
6518
|
|
|
6446
|
-
var StrokeStyle;
|
|
6447
|
-
(function (StrokeStyle) {
|
|
6448
|
-
StrokeStyle["solid"] = "solid";
|
|
6449
|
-
StrokeStyle["dashed"] = "dashed";
|
|
6450
|
-
StrokeStyle["dotted"] = "dotted";
|
|
6451
|
-
})(StrokeStyle || (StrokeStyle = {}));
|
|
6452
6519
|
var MemorizeKey;
|
|
6453
6520
|
(function (MemorizeKey) {
|
|
6454
6521
|
MemorizeKey["basicShape"] = "basicShape";
|
|
@@ -6458,10 +6525,10 @@ var MemorizeKey;
|
|
|
6458
6525
|
MemorizeKey["UML"] = "UML";
|
|
6459
6526
|
})(MemorizeKey || (MemorizeKey = {}));
|
|
6460
6527
|
|
|
6461
|
-
var
|
|
6462
|
-
(function (
|
|
6463
|
-
|
|
6464
|
-
})(
|
|
6528
|
+
var VectorLinePointerType;
|
|
6529
|
+
(function (VectorLinePointerType) {
|
|
6530
|
+
VectorLinePointerType["vectorLine"] = "vectorLine";
|
|
6531
|
+
})(VectorLinePointerType || (VectorLinePointerType = {}));
|
|
6465
6532
|
var VectorLineShape;
|
|
6466
6533
|
(function (VectorLineShape) {
|
|
6467
6534
|
VectorLineShape["straight"] = "straight";
|
|
@@ -6502,6 +6569,16 @@ const PlaitDrawElement = {
|
|
|
6502
6569
|
return false;
|
|
6503
6570
|
}
|
|
6504
6571
|
},
|
|
6572
|
+
isCustomGeometryElement: (board, value) => {
|
|
6573
|
+
const options = board.getPluginOptions(WithDrawPluginKey);
|
|
6574
|
+
const customGeometryTypes = options?.customGeometryTypes || [];
|
|
6575
|
+
if (customGeometryTypes.includes(value.type)) {
|
|
6576
|
+
return true;
|
|
6577
|
+
}
|
|
6578
|
+
else {
|
|
6579
|
+
return false;
|
|
6580
|
+
}
|
|
6581
|
+
},
|
|
6505
6582
|
isShapeElement: (value) => {
|
|
6506
6583
|
return (PlaitDrawElement.isImage(value) ||
|
|
6507
6584
|
PlaitDrawElement.isGeometry(value) ||
|
|
@@ -6608,11 +6685,11 @@ class SingleTextGenerator extends TextGenerator {
|
|
|
6608
6685
|
return this.textManages[0];
|
|
6609
6686
|
}
|
|
6610
6687
|
constructor(board, element, text, options) {
|
|
6611
|
-
super(board, element, [{
|
|
6688
|
+
super(board, element, [{ id: element.id, text: text, textHeight: element.textHeight }], options);
|
|
6612
6689
|
}
|
|
6613
6690
|
update(element, previousText, currentText, elementG) {
|
|
6614
6691
|
if (!isMultipleTextGeometry(element)) {
|
|
6615
|
-
super.update(element, [{ text: previousText,
|
|
6692
|
+
super.update(element, [{ text: previousText, id: element.id, textHeight: element.textHeight }], [{ text: currentText, id: element.id, textHeight: element.textHeight }], elementG);
|
|
6616
6693
|
}
|
|
6617
6694
|
}
|
|
6618
6695
|
}
|
|
@@ -6669,8 +6746,7 @@ class GeometryComponent extends CommonElementFlavour {
|
|
|
6669
6746
|
this.textGenerator && this.textGenerator.draw(this.getElementG());
|
|
6670
6747
|
}
|
|
6671
6748
|
onContextChanged(value, previous) {
|
|
6672
|
-
|
|
6673
|
-
if (value.element !== previous.element || isChangeTheme) {
|
|
6749
|
+
if (value.element !== previous.element || value.hasThemeChanged) {
|
|
6674
6750
|
this.shapeGenerator.processDrawing(this.element, this.getElementG());
|
|
6675
6751
|
this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
|
|
6676
6752
|
this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
|
|
@@ -6701,8 +6777,8 @@ class GeometryComponent extends CommonElementFlavour {
|
|
|
6701
6777
|
const onTextChange = (element, textManageChangeData, text) => {
|
|
6702
6778
|
if (textManageChangeData.newText) {
|
|
6703
6779
|
if (isMultipleTextGeometry(element)) {
|
|
6704
|
-
DrawTransforms.
|
|
6705
|
-
|
|
6780
|
+
DrawTransforms.setDrawTexts(this.board, element, {
|
|
6781
|
+
id: text.id,
|
|
6706
6782
|
text: textManageChangeData.newText,
|
|
6707
6783
|
textHeight: textManageChangeData.height
|
|
6708
6784
|
});
|
|
@@ -6873,7 +6949,7 @@ class ArrowLineComponent extends CommonElementFlavour {
|
|
|
6873
6949
|
initializeGenerator() {
|
|
6874
6950
|
this.shapeGenerator = new ArrowLineShapeGenerator(this.board);
|
|
6875
6951
|
this.activeGenerator = new LineActiveGenerator(this.board);
|
|
6876
|
-
this.
|
|
6952
|
+
this.initializeTextManages();
|
|
6877
6953
|
}
|
|
6878
6954
|
initialize() {
|
|
6879
6955
|
this.initializeGenerator();
|
|
@@ -6905,13 +6981,11 @@ class ArrowLineComponent extends CommonElementFlavour {
|
|
|
6905
6981
|
return boundedElements;
|
|
6906
6982
|
}
|
|
6907
6983
|
onContextChanged(value, previous) {
|
|
6908
|
-
this.initializeWeakMap();
|
|
6909
6984
|
const boundedElements = this.getBoundedElements();
|
|
6910
6985
|
const isBoundedElementsChanged = boundedElements.source !== this.boundedElements.source || boundedElements.target !== this.boundedElements.target;
|
|
6911
6986
|
this.boundedElements = boundedElements;
|
|
6912
|
-
const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
|
|
6913
6987
|
const linePoints = getArrowLinePoints(this.board, this.element);
|
|
6914
|
-
if (value.element !== previous.element ||
|
|
6988
|
+
if (value.element !== previous.element || value.hasThemeChanged) {
|
|
6915
6989
|
this.shapeGenerator.processDrawing(this.element, this.getElementG());
|
|
6916
6990
|
this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
|
|
6917
6991
|
selected: this.selected,
|
|
@@ -6939,19 +7013,21 @@ class ArrowLineComponent extends CommonElementFlavour {
|
|
|
6939
7013
|
return;
|
|
6940
7014
|
}
|
|
6941
7015
|
}
|
|
6942
|
-
|
|
7016
|
+
initializeTextManages() {
|
|
6943
7017
|
if (this.element.texts?.length) {
|
|
6944
7018
|
const textManages = [];
|
|
6945
7019
|
this.element.texts.forEach((text, index) => {
|
|
6946
7020
|
const manage = this.createTextManage(text, index);
|
|
6947
7021
|
textManages.push(manage);
|
|
6948
7022
|
});
|
|
6949
|
-
this.
|
|
7023
|
+
this.getRef().initializeTextManage(textManages);
|
|
6950
7024
|
}
|
|
6951
7025
|
}
|
|
6952
7026
|
drawText() {
|
|
6953
7027
|
if (this.element.texts?.length) {
|
|
6954
|
-
this.
|
|
7028
|
+
this.getRef()
|
|
7029
|
+
.getTextManages()
|
|
7030
|
+
.forEach((manage, index) => {
|
|
6955
7031
|
manage.draw(this.element.texts[index].text);
|
|
6956
7032
|
this.getElementG().append(manage.g);
|
|
6957
7033
|
});
|
|
@@ -6985,7 +7061,7 @@ class ArrowLineComponent extends CommonElementFlavour {
|
|
|
6985
7061
|
return;
|
|
6986
7062
|
const previousTextsLength = previousTexts.length;
|
|
6987
7063
|
const currentTextsLength = currentTexts.length;
|
|
6988
|
-
const textManages = this.getTextManages();
|
|
7064
|
+
const textManages = this.getRef().getTextManages();
|
|
6989
7065
|
if (currentTextsLength === previousTextsLength) {
|
|
6990
7066
|
for (let i = 0; i < previousTextsLength; i++) {
|
|
6991
7067
|
if (previousTexts[i].text !== currentTexts[i].text) {
|
|
@@ -6994,13 +7070,13 @@ class ArrowLineComponent extends CommonElementFlavour {
|
|
|
6994
7070
|
}
|
|
6995
7071
|
}
|
|
6996
7072
|
else {
|
|
6997
|
-
this.
|
|
6998
|
-
this.
|
|
7073
|
+
this.getRef().destroyTextManage();
|
|
7074
|
+
this.initializeTextManages();
|
|
6999
7075
|
this.drawText();
|
|
7000
7076
|
}
|
|
7001
7077
|
}
|
|
7002
7078
|
updateTextRectangle() {
|
|
7003
|
-
const textManages = this.getTextManages();
|
|
7079
|
+
const textManages = this.getRef().getTextManages();
|
|
7004
7080
|
textManages.forEach(manage => {
|
|
7005
7081
|
manage.updateRectangle();
|
|
7006
7082
|
});
|
|
@@ -7008,7 +7084,7 @@ class ArrowLineComponent extends CommonElementFlavour {
|
|
|
7008
7084
|
destroy() {
|
|
7009
7085
|
super.destroy();
|
|
7010
7086
|
this.activeGenerator.destroy();
|
|
7011
|
-
this.
|
|
7087
|
+
this.getRef().destroyTextManage();
|
|
7012
7088
|
}
|
|
7013
7089
|
}
|
|
7014
7090
|
|
|
@@ -7031,10 +7107,8 @@ class VectorLineComponent extends CommonElementFlavour {
|
|
|
7031
7107
|
super.initialize();
|
|
7032
7108
|
}
|
|
7033
7109
|
onContextChanged(value, previous) {
|
|
7034
|
-
this.initializeWeakMap();
|
|
7035
|
-
const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
|
|
7036
7110
|
const linePoints = getVectorLinePoints(this.board, this.element);
|
|
7037
|
-
if (value.element !== previous.element ||
|
|
7111
|
+
if (value.element !== previous.element || value.hasThemeChanged) {
|
|
7038
7112
|
this.shapeGenerator.processDrawing(this.element, this.getElementG());
|
|
7039
7113
|
this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
|
|
7040
7114
|
selected: this.selected,
|
|
@@ -7083,7 +7157,7 @@ const withDrawHotkey = (board) => {
|
|
|
7083
7157
|
if (hitElement && PlaitDrawElement.isGeometry(hitElement)) {
|
|
7084
7158
|
if (isMultipleTextGeometry(hitElement)) {
|
|
7085
7159
|
const hitText = getHitMultipleGeometryText(hitElement, point) ||
|
|
7086
|
-
hitElement.texts.find(item => item.
|
|
7160
|
+
hitElement.texts.find(item => item.id.includes(GeometryCommonTextKeys.content)) ||
|
|
7087
7161
|
hitElement.texts[0];
|
|
7088
7162
|
editText(board, hitElement, hitText);
|
|
7089
7163
|
}
|
|
@@ -7290,68 +7364,6 @@ const withGeometryCreateByDrawing = (board) => {
|
|
|
7290
7364
|
return board;
|
|
7291
7365
|
};
|
|
7292
7366
|
|
|
7293
|
-
const buildClipboardData = (board, elements, startPoint) => {
|
|
7294
|
-
return elements.map(element => {
|
|
7295
|
-
if (PlaitDrawElement.isShapeElement(element)) {
|
|
7296
|
-
const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
|
|
7297
|
-
return { ...element, points };
|
|
7298
|
-
}
|
|
7299
|
-
if (PlaitDrawElement.isArrowLine(element)) {
|
|
7300
|
-
let source = { ...element.source };
|
|
7301
|
-
let target = { ...element.target };
|
|
7302
|
-
let points = [...element.points];
|
|
7303
|
-
if (element.source.boundId) {
|
|
7304
|
-
points[0] = getConnectionPoint(getElementById(board, element.source.boundId), element.source.connection);
|
|
7305
|
-
if (!getElementById(board, element.source.boundId, elements)) {
|
|
7306
|
-
delete source.boundId;
|
|
7307
|
-
delete source.connection;
|
|
7308
|
-
}
|
|
7309
|
-
}
|
|
7310
|
-
if (element.target.boundId) {
|
|
7311
|
-
points[points.length - 1] = getConnectionPoint(getElementById(board, element.target.boundId), element.target.connection);
|
|
7312
|
-
if (!getElementById(board, element.target.boundId, elements)) {
|
|
7313
|
-
delete target.boundId;
|
|
7314
|
-
delete target.connection;
|
|
7315
|
-
}
|
|
7316
|
-
}
|
|
7317
|
-
points = points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
|
|
7318
|
-
return { ...element, points, source, target };
|
|
7319
|
-
}
|
|
7320
|
-
return element;
|
|
7321
|
-
});
|
|
7322
|
-
};
|
|
7323
|
-
const insertClipboardData = (board, elements, startPoint) => {
|
|
7324
|
-
const idsMap = {};
|
|
7325
|
-
elements.forEach(element => {
|
|
7326
|
-
idsMap[element.id] = idCreator();
|
|
7327
|
-
});
|
|
7328
|
-
elements.forEach(element => {
|
|
7329
|
-
element.id = idsMap[element.id];
|
|
7330
|
-
if (PlaitDrawElement.isArrowLine(element)) {
|
|
7331
|
-
if (element.source.boundId) {
|
|
7332
|
-
const boundElement = elements.find(item => [element.source.boundId, idsMap[element.source.boundId]].includes(item.id));
|
|
7333
|
-
if (boundElement) {
|
|
7334
|
-
element.source.boundId = idsMap[element.source.boundId];
|
|
7335
|
-
}
|
|
7336
|
-
}
|
|
7337
|
-
if (element.target.boundId) {
|
|
7338
|
-
const boundElement = elements.find(item => [element.target.boundId, idsMap[element.target.boundId]].includes(item.id));
|
|
7339
|
-
if (boundElement) {
|
|
7340
|
-
element.target.boundId = idsMap[element.target.boundId];
|
|
7341
|
-
}
|
|
7342
|
-
}
|
|
7343
|
-
}
|
|
7344
|
-
if (PlaitDrawElement.isElementByTable(element)) {
|
|
7345
|
-
updateRowOrColumnIds(element, 'row');
|
|
7346
|
-
updateRowOrColumnIds(element, 'column');
|
|
7347
|
-
updateCellIds(element.cells);
|
|
7348
|
-
}
|
|
7349
|
-
element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
|
|
7350
|
-
Transforms.insertNode(board, element, [board.children.length]);
|
|
7351
|
-
});
|
|
7352
|
-
Transforms.addSelectionWithTemporaryElements(board, elements);
|
|
7353
|
-
};
|
|
7354
|
-
|
|
7355
7367
|
const withDrawFragment = (baseBoard) => {
|
|
7356
7368
|
const board = baseBoard;
|
|
7357
7369
|
const { getDeletedFragment, buildFragment, insertFragment } = board;
|
|
@@ -7394,16 +7406,12 @@ const withDrawFragment = (baseBoard) => {
|
|
|
7394
7406
|
const selectedElements = [...targetDrawElements, ...boundLineElements];
|
|
7395
7407
|
const elements = buildClipboardData(board, selectedElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
|
|
7396
7408
|
const text = getElementsText(selectedElements);
|
|
7397
|
-
|
|
7398
|
-
|
|
7399
|
-
|
|
7400
|
-
|
|
7401
|
-
|
|
7402
|
-
|
|
7403
|
-
type: WritableClipboardType.elements,
|
|
7404
|
-
elements
|
|
7405
|
-
});
|
|
7406
|
-
}
|
|
7409
|
+
const addition = {
|
|
7410
|
+
text,
|
|
7411
|
+
type: WritableClipboardType.elements,
|
|
7412
|
+
elements: elements
|
|
7413
|
+
};
|
|
7414
|
+
clipboardContext = addOrCreateClipboardContext(clipboardContext, addition);
|
|
7407
7415
|
}
|
|
7408
7416
|
return buildFragment(clipboardContext, rectangle, operationType, originData);
|
|
7409
7417
|
};
|
|
@@ -7492,67 +7500,6 @@ const withArrowLineCreateByDraw = (board) => {
|
|
|
7492
7500
|
return board;
|
|
7493
7501
|
};
|
|
7494
7502
|
|
|
7495
|
-
const withGeometryResize = (board) => {
|
|
7496
|
-
let snapG;
|
|
7497
|
-
const options = {
|
|
7498
|
-
key: 'draw-geometry',
|
|
7499
|
-
canResize: () => {
|
|
7500
|
-
return true;
|
|
7501
|
-
},
|
|
7502
|
-
hitTest: (point) => {
|
|
7503
|
-
const selectedElements = [...getSelectedGeometryElements(board), ...getSelectedImageElements(board)];
|
|
7504
|
-
if (selectedElements.length !== 1 || getSelectedElements(board).length !== 1) {
|
|
7505
|
-
return null;
|
|
7506
|
-
}
|
|
7507
|
-
const target = selectedElements[0];
|
|
7508
|
-
if (canResize(board, target)) {
|
|
7509
|
-
const rectangle = board.getRectangle(target);
|
|
7510
|
-
const handleRef = getHitRectangleResizeHandleRef(board, rectangle, point, target.angle);
|
|
7511
|
-
if (handleRef) {
|
|
7512
|
-
return {
|
|
7513
|
-
element: target,
|
|
7514
|
-
handle: handleRef.handle,
|
|
7515
|
-
cursorClass: handleRef.cursorClass,
|
|
7516
|
-
rectangle
|
|
7517
|
-
};
|
|
7518
|
-
}
|
|
7519
|
-
}
|
|
7520
|
-
return null;
|
|
7521
|
-
},
|
|
7522
|
-
onResize: (resizeRef, resizeState) => {
|
|
7523
|
-
resizeState.startPoint = rotateAntiPointsByElement(resizeState.startPoint, resizeRef.element) || resizeState.startPoint;
|
|
7524
|
-
resizeState.endPoint = rotateAntiPointsByElement(resizeState.endPoint, resizeRef.element) || resizeState.endPoint;
|
|
7525
|
-
snapG?.remove();
|
|
7526
|
-
const isFromCorner = isCornerHandle(board, resizeRef.handle);
|
|
7527
|
-
const isAspectRatio = resizeState.isShift || PlaitDrawElement.isImage(resizeRef.element);
|
|
7528
|
-
const handleIndex = getIndexByResizeHandle(resizeRef.handle);
|
|
7529
|
-
const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, handleIndex, resizeRef.rectangle);
|
|
7530
|
-
const resizeSnapRefOptions = getSnapResizingRefOptions(board, resizeRef, resizeState, {
|
|
7531
|
-
originPoint,
|
|
7532
|
-
handlePoint
|
|
7533
|
-
}, isAspectRatio, isFromCorner);
|
|
7534
|
-
const resizeSnapRef = getSnapResizingRef(board, [resizeRef.element], resizeSnapRefOptions);
|
|
7535
|
-
snapG = resizeSnapRef.snapG;
|
|
7536
|
-
PlaitBoard.getElementActiveHost(board).append(snapG);
|
|
7537
|
-
let points = resizeSnapRef.activePoints;
|
|
7538
|
-
if (PlaitDrawElement.isGeometry(resizeRef.element) && isGeometryIncludeText(resizeRef.element)) {
|
|
7539
|
-
const { height: textHeight } = getFirstTextManage(resizeRef.element).getSize();
|
|
7540
|
-
DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
|
|
7541
|
-
}
|
|
7542
|
-
else {
|
|
7543
|
-
points = normalizeShapePoints(points);
|
|
7544
|
-
Transforms.setNode(board, { points }, resizeRef.path);
|
|
7545
|
-
}
|
|
7546
|
-
},
|
|
7547
|
-
afterResize: (resizeRef) => {
|
|
7548
|
-
snapG?.remove();
|
|
7549
|
-
snapG = null;
|
|
7550
|
-
}
|
|
7551
|
-
};
|
|
7552
|
-
withResize(board, options);
|
|
7553
|
-
return board;
|
|
7554
|
-
};
|
|
7555
|
-
|
|
7556
7503
|
const withArrowLineResize = (board) => {
|
|
7557
7504
|
let elbowLineIndex;
|
|
7558
7505
|
let elbowLineDeleteCount;
|
|
@@ -7766,7 +7713,7 @@ const withArrowLineText = (board) => {
|
|
|
7766
7713
|
}
|
|
7767
7714
|
else {
|
|
7768
7715
|
const ratio = getRatioByPoint(points, point);
|
|
7769
|
-
const textMemory = getMemorizedLatest('line')?.text || {};
|
|
7716
|
+
const textMemory = getMemorizedLatest('arrow-line')?.text || {};
|
|
7770
7717
|
texts.push({
|
|
7771
7718
|
text: buildText(LINE_TEXT, undefined, textMemory),
|
|
7772
7719
|
position: ratio,
|
|
@@ -8016,7 +7963,8 @@ const withDrawRotate = (board) => {
|
|
|
8016
7963
|
let needCustomActiveRectangle = false;
|
|
8017
7964
|
const canRotate = () => {
|
|
8018
7965
|
const elements = getSelectedElements(board);
|
|
8019
|
-
return elements.length > 0 &&
|
|
7966
|
+
return (elements.length > 0 &&
|
|
7967
|
+
elements.every(el => PlaitDrawElement.isDrawElement(el) || PlaitDrawElement.isCustomGeometryElement(board, el)));
|
|
8020
7968
|
};
|
|
8021
7969
|
board.pointerDown = (event) => {
|
|
8022
7970
|
if (!canRotate() || PlaitBoard.isReadonly(board) || PlaitBoard.hasBeenTextEditing(board) || !isMainPointer(event)) {
|
|
@@ -8179,7 +8127,7 @@ class TableComponent extends CommonElementFlavour {
|
|
|
8179
8127
|
const table = this.board.buildTable(this.element);
|
|
8180
8128
|
table.cells.forEach(item => {
|
|
8181
8129
|
if (PlaitTableElement.isVerticalText(item)) {
|
|
8182
|
-
const textManage =
|
|
8130
|
+
const textManage = getTextManageByCell(this.board, item);
|
|
8183
8131
|
if (textManage) {
|
|
8184
8132
|
const engine = getEngine(TableSymbols.table);
|
|
8185
8133
|
const rectangle = engine.getTextRectangle(this.element, { key: item.id, board: this.board });
|
|
@@ -8194,7 +8142,7 @@ class TableComponent extends CommonElementFlavour {
|
|
|
8194
8142
|
.filter(item => isCellIncludeText(item))
|
|
8195
8143
|
.map(item => {
|
|
8196
8144
|
return {
|
|
8197
|
-
|
|
8145
|
+
id: item.id,
|
|
8198
8146
|
text: item.text,
|
|
8199
8147
|
textHeight: item.textHeight,
|
|
8200
8148
|
board: this.board
|
|
@@ -8207,12 +8155,12 @@ class TableComponent extends CommonElementFlavour {
|
|
|
8207
8155
|
onChange: (value, data, text) => {
|
|
8208
8156
|
const path = PlaitBoard.findPath(this.board, value);
|
|
8209
8157
|
if (data.newText) {
|
|
8210
|
-
DrawTransforms.setTableText(this.board, path, text.
|
|
8158
|
+
DrawTransforms.setTableText(this.board, path, text.id, data.newText, data.height);
|
|
8211
8159
|
}
|
|
8212
8160
|
data.operations && memorizeLatestText(value, data.operations);
|
|
8213
8161
|
},
|
|
8214
8162
|
getRenderRectangle: (value, text) => {
|
|
8215
|
-
const cell = getCellWithPoints(this.board, value, text.
|
|
8163
|
+
const cell = getCellWithPoints(this.board, value, text.id);
|
|
8216
8164
|
if (PlaitTableElement.isVerticalText(cell)) {
|
|
8217
8165
|
const cellRectangle = RectangleClient.getRectangleByPoints(cell.points);
|
|
8218
8166
|
const strokeWidth = getStrokeWidthByElement(cell);
|
|
@@ -8233,8 +8181,7 @@ class TableComponent extends CommonElementFlavour {
|
|
|
8233
8181
|
this.textGenerator.initialize();
|
|
8234
8182
|
}
|
|
8235
8183
|
onContextChanged(value, previous) {
|
|
8236
|
-
|
|
8237
|
-
if (value.element !== previous.element || isChangeTheme) {
|
|
8184
|
+
if (value.element !== previous.element || value.hasThemeChanged) {
|
|
8238
8185
|
const previousSelectedCells = getSelectedCells(previous.element);
|
|
8239
8186
|
if (previousSelectedCells?.length) {
|
|
8240
8187
|
clearSelectedCells(previous.element);
|
|
@@ -8631,57 +8578,57 @@ const withSwimlane = (board) => {
|
|
|
8631
8578
|
return withSwimlaneCreateByDrawing(withSwimlaneCreateByDrag(board));
|
|
8632
8579
|
};
|
|
8633
8580
|
|
|
8634
|
-
const
|
|
8581
|
+
const withVectorLineCreateByDraw = (board) => {
|
|
8635
8582
|
const { pointerDown, pointerMove, dblClick, globalKeyDown } = board;
|
|
8636
8583
|
let lineShapeG = null;
|
|
8637
8584
|
let temporaryElement = null;
|
|
8638
|
-
let
|
|
8585
|
+
let vectorLineRef;
|
|
8639
8586
|
const vectorLineComplete = () => {
|
|
8640
|
-
if (
|
|
8587
|
+
if (vectorLineRef) {
|
|
8641
8588
|
clearSelectedElement(board);
|
|
8642
|
-
if (
|
|
8643
|
-
addSelectedElement(board,
|
|
8589
|
+
if (vectorLineRef?.element) {
|
|
8590
|
+
addSelectedElement(board, vectorLineRef?.element);
|
|
8644
8591
|
}
|
|
8645
8592
|
}
|
|
8646
8593
|
PlaitBoard.getBoardContainer(board).classList.remove(`vector-line-closed`);
|
|
8647
8594
|
lineShapeG?.remove();
|
|
8648
8595
|
lineShapeG = null;
|
|
8649
|
-
|
|
8596
|
+
vectorLineRef = null;
|
|
8650
8597
|
temporaryElement = null;
|
|
8651
8598
|
};
|
|
8652
8599
|
board.pointerDown = (event) => {
|
|
8653
|
-
const penPointers =
|
|
8654
|
-
const
|
|
8655
|
-
if (
|
|
8656
|
-
|
|
8600
|
+
const penPointers = getVectorLinePointers();
|
|
8601
|
+
const isVectorLinePointer = PlaitBoard.isInPointer(board, penPointers);
|
|
8602
|
+
if (isVectorLinePointer && !vectorLineRef) {
|
|
8603
|
+
vectorLineRef = { shape: VectorLineShape.straight };
|
|
8657
8604
|
}
|
|
8658
|
-
if (!PlaitBoard.isReadonly(board) &&
|
|
8605
|
+
if (!PlaitBoard.isReadonly(board) && vectorLineRef && isDrawingMode(board)) {
|
|
8659
8606
|
let point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
|
|
8660
8607
|
if (!temporaryElement) {
|
|
8661
|
-
|
|
8662
|
-
...
|
|
8608
|
+
vectorLineRef = {
|
|
8609
|
+
...vectorLineRef,
|
|
8663
8610
|
start: point
|
|
8664
8611
|
};
|
|
8665
8612
|
}
|
|
8666
8613
|
else {
|
|
8667
|
-
if (!
|
|
8668
|
-
|
|
8669
|
-
Transforms.insertNode(board,
|
|
8614
|
+
if (!vectorLineRef.element) {
|
|
8615
|
+
vectorLineRef.element = temporaryElement;
|
|
8616
|
+
Transforms.insertNode(board, vectorLineRef.element, [board.children.length]);
|
|
8670
8617
|
}
|
|
8671
8618
|
else {
|
|
8672
|
-
let points =
|
|
8673
|
-
const isClosed = distanceBetweenPointAndPoint(...point, ...
|
|
8619
|
+
let points = vectorLineRef.element.points;
|
|
8620
|
+
const isClosed = distanceBetweenPointAndPoint(...point, ...vectorLineRef.start) <= LINE_HIT_GEOMETRY_BUFFER;
|
|
8674
8621
|
if (isClosed) {
|
|
8675
|
-
point =
|
|
8622
|
+
point = vectorLineRef.start;
|
|
8676
8623
|
}
|
|
8677
|
-
if (
|
|
8624
|
+
if (vectorLineRef.path) {
|
|
8678
8625
|
const lastPoint = points[points.length - 1];
|
|
8679
8626
|
const distance = distanceBetweenPointAndPoint(...point, ...lastPoint);
|
|
8680
8627
|
if (distance > 2) {
|
|
8681
|
-
Transforms.setNode(board, { points: [...points, point] },
|
|
8628
|
+
Transforms.setNode(board, { points: [...points, point] }, vectorLineRef.path);
|
|
8682
8629
|
}
|
|
8683
8630
|
}
|
|
8684
|
-
|
|
8631
|
+
vectorLineRef.element = getElementById(board, vectorLineRef.element.id);
|
|
8685
8632
|
if (isClosed) {
|
|
8686
8633
|
vectorLineComplete();
|
|
8687
8634
|
}
|
|
@@ -8695,33 +8642,33 @@ const withVectorPenCreateByDraw = (board) => {
|
|
|
8695
8642
|
lineShapeG = createG();
|
|
8696
8643
|
let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
|
|
8697
8644
|
const pointer = PlaitBoard.getPointer(board);
|
|
8698
|
-
if (pointer !==
|
|
8645
|
+
if (pointer !== VectorLinePointerType.vectorLine) {
|
|
8699
8646
|
vectorLineComplete();
|
|
8700
8647
|
}
|
|
8701
|
-
if (
|
|
8702
|
-
let drawPoints = [
|
|
8703
|
-
if (
|
|
8704
|
-
drawPoints = [
|
|
8705
|
-
const path = PlaitBoard.findPath(board,
|
|
8706
|
-
|
|
8648
|
+
if (vectorLineRef && vectorLineRef.start) {
|
|
8649
|
+
let drawPoints = [vectorLineRef.start];
|
|
8650
|
+
if (vectorLineRef.element) {
|
|
8651
|
+
drawPoints = [vectorLineRef.start, ...vectorLineRef.element.points];
|
|
8652
|
+
const path = PlaitBoard.findPath(board, vectorLineRef.element);
|
|
8653
|
+
vectorLineRef.path = path;
|
|
8707
8654
|
}
|
|
8708
|
-
const distance = distanceBetweenPointAndPoint(...movingPoint, ...
|
|
8655
|
+
const distance = distanceBetweenPointAndPoint(...movingPoint, ...vectorLineRef.start);
|
|
8709
8656
|
if (distance <= LINE_HIT_GEOMETRY_BUFFER) {
|
|
8710
|
-
movingPoint =
|
|
8657
|
+
movingPoint = vectorLineRef.start;
|
|
8711
8658
|
PlaitBoard.getBoardContainer(board).classList.add(`vector-line-closed`);
|
|
8712
8659
|
}
|
|
8713
8660
|
else {
|
|
8714
8661
|
PlaitBoard.getBoardContainer(board).classList.remove(`vector-line-closed`);
|
|
8715
8662
|
}
|
|
8716
|
-
temporaryElement = vectorLineCreating(board,
|
|
8663
|
+
temporaryElement = vectorLineCreating(board, vectorLineRef.shape, drawPoints, movingPoint, lineShapeG);
|
|
8717
8664
|
}
|
|
8718
8665
|
pointerMove(event);
|
|
8719
8666
|
};
|
|
8720
8667
|
board.dblClick = (event) => {
|
|
8721
8668
|
if (!PlaitBoard.isReadonly(board)) {
|
|
8722
|
-
if (
|
|
8723
|
-
if (
|
|
8724
|
-
Transforms.setNode(board, { points:
|
|
8669
|
+
if (vectorLineRef) {
|
|
8670
|
+
if (vectorLineRef.path) {
|
|
8671
|
+
Transforms.setNode(board, { points: vectorLineRef?.element?.points }, vectorLineRef.path);
|
|
8725
8672
|
}
|
|
8726
8673
|
vectorLineComplete();
|
|
8727
8674
|
BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
|
|
@@ -8733,9 +8680,9 @@ const withVectorPenCreateByDraw = (board) => {
|
|
|
8733
8680
|
if (!PlaitBoard.isReadonly(board)) {
|
|
8734
8681
|
const isEsc = isKeyHotkey('esc', event);
|
|
8735
8682
|
const isV = isKeyHotkey('v', event);
|
|
8736
|
-
if ((isEsc || isV) &&
|
|
8737
|
-
if (
|
|
8738
|
-
Transforms.setNode(board, { points:
|
|
8683
|
+
if ((isEsc || isV) && vectorLineRef) {
|
|
8684
|
+
if (vectorLineRef.path) {
|
|
8685
|
+
Transforms.setNode(board, { points: vectorLineRef.element?.points }, vectorLineRef.path);
|
|
8739
8686
|
}
|
|
8740
8687
|
vectorLineComplete();
|
|
8741
8688
|
if (isV) {
|
|
@@ -8777,7 +8724,7 @@ const withVectorLineResize = (board) => {
|
|
|
8777
8724
|
let handleIndex = resizeRef.handleIndex;
|
|
8778
8725
|
if (resizeRef.handle === LineResizeHandle.source || resizeRef.handle === LineResizeHandle.target) {
|
|
8779
8726
|
points[handleIndex] = resizeState.endPoint;
|
|
8780
|
-
if (
|
|
8727
|
+
if (isClosedPoints(resizeRef.element.points)) {
|
|
8781
8728
|
points[points.length - 1] = resizeState.endPoint;
|
|
8782
8729
|
}
|
|
8783
8730
|
else {
|
|
@@ -8804,7 +8751,7 @@ const withVectorLineResize = (board) => {
|
|
|
8804
8751
|
};
|
|
8805
8752
|
|
|
8806
8753
|
const withDraw = (board) => {
|
|
8807
|
-
const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment,
|
|
8754
|
+
const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment, getOneHitElement } = board;
|
|
8808
8755
|
board.drawElement = (context) => {
|
|
8809
8756
|
if (PlaitDrawElement.isGeometry(context.element)) {
|
|
8810
8757
|
if (PlaitDrawElement.isUML(context.element)) {
|
|
@@ -8860,12 +8807,12 @@ const withDraw = (board) => {
|
|
|
8860
8807
|
}
|
|
8861
8808
|
return isHit(element, point);
|
|
8862
8809
|
};
|
|
8863
|
-
board.
|
|
8864
|
-
const
|
|
8865
|
-
if (
|
|
8866
|
-
return
|
|
8810
|
+
board.getOneHitElement = elements => {
|
|
8811
|
+
const isAllDrawElements = elements.every(item => PlaitDrawElement.isDrawElement(item));
|
|
8812
|
+
if (isAllDrawElements) {
|
|
8813
|
+
return getHitDrawElement(board, elements);
|
|
8867
8814
|
}
|
|
8868
|
-
return
|
|
8815
|
+
return getOneHitElement(elements);
|
|
8869
8816
|
};
|
|
8870
8817
|
board.isInsidePoint = (element, point) => {
|
|
8871
8818
|
const result = isHitElementInside(board, element, point);
|
|
@@ -8919,12 +8866,12 @@ const withDraw = (board) => {
|
|
|
8919
8866
|
});
|
|
8920
8867
|
return getRelatedFragment([...elements, ...activeLines], originData);
|
|
8921
8868
|
};
|
|
8922
|
-
return withSwimlane(withTable(withDrawResize(
|
|
8869
|
+
return withSwimlane(withTable(withDrawResize(withVectorLineCreateByDraw(withArrowLineAutoCompleteReaction(withArrowLineBoundReaction(withVectorLineResize(withArrowLineResize(withArrowLineTextMove(withArrowLineText(withDrawRotate(withArrowLineCreateByDraw(withArrowLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))))))))))));
|
|
8923
8870
|
};
|
|
8924
8871
|
|
|
8925
8872
|
/**
|
|
8926
8873
|
* Generated bundle index. Do not edit.
|
|
8927
8874
|
*/
|
|
8928
8875
|
|
|
8929
|
-
export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, 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_NOT_CLOSED, 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, MIN_TEXT_WIDTH, MemorizeKey,
|
|
8876
|
+
export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, 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_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFill, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedPoints, isCustomGeometryClosed, isDrawElementClosed, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectArrowLine, isSingleSelectElementByTable, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
|
|
8930
8877
|
//# sourceMappingURL=plait-draw.mjs.map
|