@plait/draw 0.58.0 → 0.59.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/constants/geometry.d.ts +2 -1
- package/esm2022/constants/geometry.mjs +3 -2
- package/esm2022/generators/text.generator.mjs +5 -13
- package/esm2022/plugins/with-draw-hotkey.mjs +3 -3
- package/esm2022/plugins/with-geometry-resize.mjs +3 -2
- package/esm2022/table.component.mjs +5 -3
- package/esm2022/utils/common.mjs +50 -21
- package/esm2022/utils/geometry.mjs +9 -3
- package/esm2022/utils/multi-text-geometry.mjs +6 -6
- package/esm2022/utils/table.mjs +1 -1
- package/fesm2022/plait-draw.mjs +360 -334
- package/fesm2022/plait-draw.mjs.map +1 -1
- package/generators/text.generator.d.ts +0 -1
- package/package.json +1 -1
- package/utils/common.d.ts +5 -0
- package/utils/geometry.d.ts +3 -1
- package/utils/multi-text-geometry.d.ts +1 -1
package/fesm2022/plait-draw.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ACTIVE_STROKE_WIDTH, ThemeColorMode, RectangleClient, idCreator, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType,
|
|
2
|
-
import { WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, getMemorizedLatest, memorizeLatest,
|
|
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 } 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
3
|
import { Alignment, TextManage, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor } from '@plait/text';
|
|
4
4
|
import { pointsOnBezierCurves } from 'points-on-curve';
|
|
5
5
|
import { isKeyHotkey } from 'is-hotkey';
|
|
@@ -272,12 +272,13 @@ const MultipleTextGeometryTextKeys = {
|
|
|
272
272
|
};
|
|
273
273
|
const DefaultSwimlanePropertyMap = {
|
|
274
274
|
[SwimlaneSymbols.swimlaneHorizontal]: DefaultSwimlaneHorizontalProperty,
|
|
275
|
-
[SwimlaneSymbols.swimlaneVertical]: DefaultSwimlaneVerticalProperty
|
|
275
|
+
[SwimlaneSymbols.swimlaneVertical]: DefaultSwimlaneVerticalProperty
|
|
276
276
|
};
|
|
277
277
|
const LINE_HIT_GEOMETRY_BUFFER = 10;
|
|
278
278
|
const LINE_SNAPPING_BUFFER = 6;
|
|
279
279
|
const LINE_SNAPPING_CONNECTOR_BUFFER = 8;
|
|
280
280
|
const GEOMETRY_WITHOUT_TEXT = [FlowchartSymbols.or, FlowchartSymbols.summingJunction];
|
|
281
|
+
const GEOMETRY_WITH_MULTIPLE_TEXT = [UMLSymbols.package, UMLSymbols.combinedFragment];
|
|
281
282
|
|
|
282
283
|
const getGeometryPointers = () => {
|
|
283
284
|
return [...Object.keys(BasicShapes), ...Object.keys(FlowchartSymbols), ...Object.keys(UMLSymbols)];
|
|
@@ -364,23 +365,15 @@ class TextGenerator {
|
|
|
364
365
|
const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {}).textPlugins;
|
|
365
366
|
this.textManages = this.texts.map(text => {
|
|
366
367
|
const textManage = this.createTextManage(text, textPlugins);
|
|
367
|
-
setTextManage(this.
|
|
368
|
+
setTextManage(getTextKey(this.element, text), textManage);
|
|
368
369
|
return textManage;
|
|
369
370
|
});
|
|
370
371
|
ELEMENT_TO_TEXT_MANAGES.set(this.element, this.textManages);
|
|
371
372
|
}
|
|
372
|
-
getTextKey(text) {
|
|
373
|
-
if (isMultipleTextGeometry(this.element)) {
|
|
374
|
-
return `${this.element.id}-${text.key}`;
|
|
375
|
-
}
|
|
376
|
-
else {
|
|
377
|
-
return text.key;
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
373
|
draw(elementG) {
|
|
381
374
|
const centerPoint = RectangleClient.getCenterPoint(this.board.getRectangle(this.element));
|
|
382
375
|
this.texts.forEach(drawShapeText => {
|
|
383
|
-
const textManage = getTextManage(this.
|
|
376
|
+
const textManage = getTextManage(getTextKey(this.element, drawShapeText));
|
|
384
377
|
if (drawShapeText.text && textManage) {
|
|
385
378
|
textManage.draw(drawShapeText.text);
|
|
386
379
|
elementG.append(textManage.g);
|
|
@@ -409,7 +402,7 @@ class TextGenerator {
|
|
|
409
402
|
}
|
|
410
403
|
currentDrawShapeTexts.forEach(drawShapeText => {
|
|
411
404
|
if (drawShapeText.text) {
|
|
412
|
-
let textManage = getTextManage(this.
|
|
405
|
+
let textManage = getTextManage(getTextKey(this.element, drawShapeText));
|
|
413
406
|
if (!textManage) {
|
|
414
407
|
textManage = this.createTextManage(drawShapeText, textPlugins);
|
|
415
408
|
setTextManage(drawShapeText.key, textManage);
|
|
@@ -682,6 +675,268 @@ const getMemorizedLatestShape = (board) => {
|
|
|
682
675
|
return memorizedShape.get(board);
|
|
683
676
|
};
|
|
684
677
|
|
|
678
|
+
var LineResizeHandle;
|
|
679
|
+
(function (LineResizeHandle) {
|
|
680
|
+
LineResizeHandle["source"] = "source";
|
|
681
|
+
LineResizeHandle["target"] = "target";
|
|
682
|
+
LineResizeHandle["addHandle"] = "addHandle";
|
|
683
|
+
})(LineResizeHandle || (LineResizeHandle = {}));
|
|
684
|
+
const getHitLineResizeHandleRef = (board, element, point) => {
|
|
685
|
+
let dataPoints = PlaitLine.getPoints(board, element);
|
|
686
|
+
const index = getHitPointIndex(dataPoints, point);
|
|
687
|
+
if (index !== -1) {
|
|
688
|
+
const handleIndex = index;
|
|
689
|
+
if (index === 0) {
|
|
690
|
+
return { handle: LineResizeHandle.source, handleIndex };
|
|
691
|
+
}
|
|
692
|
+
if (index === dataPoints.length - 1) {
|
|
693
|
+
return { handle: LineResizeHandle.target, handleIndex };
|
|
694
|
+
}
|
|
695
|
+
// elbow line, data points only verify source connection point and target connection point
|
|
696
|
+
if (element.shape !== LineShape.elbow) {
|
|
697
|
+
return { handleIndex };
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
const middlePoints = getMiddlePoints(board, element);
|
|
701
|
+
const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
|
|
702
|
+
if (indexOfMiddlePoints !== -1) {
|
|
703
|
+
return {
|
|
704
|
+
handle: LineResizeHandle.addHandle,
|
|
705
|
+
handleIndex: indexOfMiddlePoints
|
|
706
|
+
};
|
|
707
|
+
}
|
|
708
|
+
return undefined;
|
|
709
|
+
};
|
|
710
|
+
function getHitPointIndex(points, movingPoint) {
|
|
711
|
+
const rectangles = points.map(point => {
|
|
712
|
+
return {
|
|
713
|
+
x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
|
|
714
|
+
y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
|
|
715
|
+
width: RESIZE_HANDLE_DIAMETER,
|
|
716
|
+
height: RESIZE_HANDLE_DIAMETER
|
|
717
|
+
};
|
|
718
|
+
});
|
|
719
|
+
const rectangle = rectangles.find(rectangle => {
|
|
720
|
+
return RectangleClient.isHit(RectangleClient.getRectangleByPoints([movingPoint, movingPoint]), rectangle);
|
|
721
|
+
});
|
|
722
|
+
return rectangle ? rectangles.indexOf(rectangle) : -1;
|
|
723
|
+
}
|
|
724
|
+
const getHitLineTextIndex = (board, element, point) => {
|
|
725
|
+
const texts = element.texts;
|
|
726
|
+
if (!texts.length)
|
|
727
|
+
return -1;
|
|
728
|
+
const points = getLinePoints(board, element);
|
|
729
|
+
return texts.findIndex(text => {
|
|
730
|
+
const center = getPointOnPolyline(points, text.position);
|
|
731
|
+
const rectangle = {
|
|
732
|
+
x: center[0] - text.width / 2,
|
|
733
|
+
y: center[1] - text.height / 2,
|
|
734
|
+
width: text.width,
|
|
735
|
+
height: text.height
|
|
736
|
+
};
|
|
737
|
+
return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
|
|
738
|
+
});
|
|
739
|
+
};
|
|
740
|
+
|
|
741
|
+
const isMultipleTextShape = (shape) => {
|
|
742
|
+
return GEOMETRY_WITH_MULTIPLE_TEXT.includes(shape);
|
|
743
|
+
};
|
|
744
|
+
const isMultipleTextGeometry = (geometry) => {
|
|
745
|
+
return PlaitDrawElement.isGeometry(geometry) && isMultipleTextShape(geometry.shape);
|
|
746
|
+
};
|
|
747
|
+
const getMultipleTextGeometryTextKeys = (shape) => {
|
|
748
|
+
return MultipleTextGeometryTextKeys[shape];
|
|
749
|
+
};
|
|
750
|
+
const createMultipleTextGeometryElement = (shape, points, options = {}) => {
|
|
751
|
+
const id = idCreator();
|
|
752
|
+
const drawShapeTexts = buildDefaultTextsByShape(shape, id);
|
|
753
|
+
return {
|
|
754
|
+
id,
|
|
755
|
+
type: 'geometry',
|
|
756
|
+
shape,
|
|
757
|
+
angle: 0,
|
|
758
|
+
opacity: 1,
|
|
759
|
+
texts: drawShapeTexts,
|
|
760
|
+
points,
|
|
761
|
+
...options
|
|
762
|
+
};
|
|
763
|
+
};
|
|
764
|
+
const buildDefaultTextsByShape = (shape, elementId) => {
|
|
765
|
+
const memorizedLatest = getMemorizedLatestByPointer(shape);
|
|
766
|
+
const textProperties = { ...memorizedLatest.textProperties };
|
|
767
|
+
const alignment = textProperties?.align;
|
|
768
|
+
const textHeight = textProperties?.textHeight || DefaultTextProperty.height;
|
|
769
|
+
delete textProperties?.align;
|
|
770
|
+
delete textProperties?.textHeight;
|
|
771
|
+
const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
|
|
772
|
+
const textKeys = getMultipleTextGeometryTextKeys(shape);
|
|
773
|
+
return (textKeys || []).map((textKey) => {
|
|
774
|
+
const text = defaultTexts?.find((item) => item?.key === textKey);
|
|
775
|
+
return {
|
|
776
|
+
key: textKey,
|
|
777
|
+
text: buildText(text?.text || '', alignment || text?.align || Alignment.center, textProperties),
|
|
778
|
+
textHeight: textHeight
|
|
779
|
+
};
|
|
780
|
+
});
|
|
781
|
+
};
|
|
782
|
+
const getHitMultipleGeometryText = (element, point) => {
|
|
783
|
+
const engine = getEngine(element.shape);
|
|
784
|
+
const rectangle = RectangleClient.getRectangleByPoints([point, point]);
|
|
785
|
+
let hitText;
|
|
786
|
+
if (engine.getTextRectangle) {
|
|
787
|
+
hitText = element.texts.find(text => {
|
|
788
|
+
const textRectangle = engine.getTextRectangle(element, { key: text.key });
|
|
789
|
+
return RectangleClient.isHit(rectangle, textRectangle);
|
|
790
|
+
});
|
|
791
|
+
}
|
|
792
|
+
return hitText;
|
|
793
|
+
};
|
|
794
|
+
|
|
795
|
+
const isTextExceedingBounds = (geometry) => {
|
|
796
|
+
const client = RectangleClient.getRectangleByPoints(geometry.points);
|
|
797
|
+
if (geometry.textHeight && geometry.textHeight > client.height) {
|
|
798
|
+
return true;
|
|
799
|
+
}
|
|
800
|
+
return false;
|
|
801
|
+
};
|
|
802
|
+
const isHitLineText = (board, element, point) => {
|
|
803
|
+
return getHitLineTextIndex(board, element, point) !== -1;
|
|
804
|
+
};
|
|
805
|
+
const isHitPolyLine = (pathPoints, point) => {
|
|
806
|
+
const distance = distanceBetweenPointAndSegments(pathPoints, point);
|
|
807
|
+
return distance <= HIT_DISTANCE_BUFFER;
|
|
808
|
+
};
|
|
809
|
+
const isHitLine = (board, element, point) => {
|
|
810
|
+
const points = getLinePoints(board, element);
|
|
811
|
+
const isHitText = isHitLineText(board, element, point);
|
|
812
|
+
return isHitText || isHitPolyLine(points, point);
|
|
813
|
+
};
|
|
814
|
+
const isHitElementText = (element, point) => {
|
|
815
|
+
const engine = getEngine(element.shape);
|
|
816
|
+
if (isMultipleTextGeometry(element)) {
|
|
817
|
+
const texts = element.texts;
|
|
818
|
+
return texts.some(item => {
|
|
819
|
+
const textClient = engine.getTextRectangle(element, { key: item.key });
|
|
820
|
+
return RectangleClient.isPointInRectangle(textClient, point);
|
|
821
|
+
});
|
|
822
|
+
}
|
|
823
|
+
else {
|
|
824
|
+
const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
|
|
825
|
+
return RectangleClient.isPointInRectangle(textClient, point);
|
|
826
|
+
}
|
|
827
|
+
};
|
|
828
|
+
const isRectangleHitElementText = (element, rectangle) => {
|
|
829
|
+
const engine = getEngine(element.shape);
|
|
830
|
+
if (isMultipleTextGeometry(element)) {
|
|
831
|
+
const texts = element.texts;
|
|
832
|
+
return texts.some(item => {
|
|
833
|
+
const textClient = engine.getTextRectangle(element, { key: item.key });
|
|
834
|
+
const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
|
|
835
|
+
return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
|
|
836
|
+
});
|
|
837
|
+
}
|
|
838
|
+
else {
|
|
839
|
+
const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
|
|
840
|
+
const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
|
|
841
|
+
return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
|
|
842
|
+
}
|
|
843
|
+
};
|
|
844
|
+
const isRectangleHitDrawElement = (board, element, selection) => {
|
|
845
|
+
const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
|
|
846
|
+
if (PlaitDrawElement.isGeometry(element)) {
|
|
847
|
+
const client = RectangleClient.getRectangleByPoints(element.points);
|
|
848
|
+
let rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
|
|
849
|
+
const isHitElement = isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
|
|
850
|
+
if (isHitElement) {
|
|
851
|
+
return isHitElement;
|
|
852
|
+
}
|
|
853
|
+
return isRectangleHitElementText(element, rangeRectangle);
|
|
854
|
+
}
|
|
855
|
+
if (PlaitDrawElement.isImage(element)) {
|
|
856
|
+
const client = RectangleClient.getRectangleByPoints(element.points);
|
|
857
|
+
const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
|
|
858
|
+
return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
|
|
859
|
+
}
|
|
860
|
+
if (PlaitDrawElement.isLine(element)) {
|
|
861
|
+
const points = getLinePoints(board, element);
|
|
862
|
+
return isPolylineHitRectangle(points, rangeRectangle);
|
|
863
|
+
}
|
|
864
|
+
return null;
|
|
865
|
+
};
|
|
866
|
+
const isHitDrawElement = (board, element, point) => {
|
|
867
|
+
const rectangle = board.getRectangle(element);
|
|
868
|
+
point = rotateAntiPointsByElement(point, element) || point;
|
|
869
|
+
if (PlaitDrawElement.isGeometry(element)) {
|
|
870
|
+
const fill = getFillByElement(board, element);
|
|
871
|
+
if (isHitEdgeOfShape(board, element, point, HIT_DISTANCE_BUFFER)) {
|
|
872
|
+
return true;
|
|
873
|
+
}
|
|
874
|
+
const engine = getEngine(getElementShape(element));
|
|
875
|
+
// when shape equals text, fill is not allowed
|
|
876
|
+
if (fill !== DefaultDrawStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
|
|
877
|
+
const isHitInside = engine.isInsidePoint(rectangle, point);
|
|
878
|
+
if (isHitInside) {
|
|
879
|
+
return isHitInside;
|
|
880
|
+
}
|
|
881
|
+
}
|
|
882
|
+
else {
|
|
883
|
+
// if shape equals text, only check text rectangle
|
|
884
|
+
if (PlaitDrawElement.isText(element)) {
|
|
885
|
+
const textClient = getTextRectangle(element);
|
|
886
|
+
let isHitText = RectangleClient.isPointInRectangle(textClient, point);
|
|
887
|
+
return isHitText;
|
|
888
|
+
}
|
|
889
|
+
// check textRectangle of element
|
|
890
|
+
const isHitText = isHitElementText(element, point);
|
|
891
|
+
if (isHitText) {
|
|
892
|
+
return isHitText;
|
|
893
|
+
}
|
|
894
|
+
}
|
|
895
|
+
}
|
|
896
|
+
if (PlaitDrawElement.isImage(element)) {
|
|
897
|
+
const client = RectangleClient.getRectangleByPoints(element.points);
|
|
898
|
+
return RectangleClient.isPointInRectangle(client, point);
|
|
899
|
+
}
|
|
900
|
+
if (PlaitDrawElement.isLine(element)) {
|
|
901
|
+
return isHitLine(board, element, point);
|
|
902
|
+
}
|
|
903
|
+
return null;
|
|
904
|
+
};
|
|
905
|
+
const isHitEdgeOfShape = (board, element, point, hitDistanceBuffer) => {
|
|
906
|
+
const nearestPoint = getNearestPoint(element, point);
|
|
907
|
+
const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
|
|
908
|
+
return distance <= hitDistanceBuffer;
|
|
909
|
+
};
|
|
910
|
+
const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
|
|
911
|
+
const client = RectangleClient.inflate(RectangleClient.getRectangleByPoints(element.points), hitDistanceBuffer);
|
|
912
|
+
return getEngine(getElementShape(element)).isInsidePoint(client, point);
|
|
913
|
+
};
|
|
914
|
+
const isHitElementInside = (board, element, point) => {
|
|
915
|
+
const rectangle = board.getRectangle(element);
|
|
916
|
+
point = rotateAntiPointsByElement(point, element) || point;
|
|
917
|
+
if (PlaitDrawElement.isGeometry(element)) {
|
|
918
|
+
const engine = getEngine(getElementShape(element));
|
|
919
|
+
const isHitInside = engine.isInsidePoint(rectangle, point);
|
|
920
|
+
if (isHitInside) {
|
|
921
|
+
return isHitInside;
|
|
922
|
+
}
|
|
923
|
+
if (engine.getTextRectangle) {
|
|
924
|
+
const isHitText = isHitElementText(element, point);
|
|
925
|
+
if (isHitText) {
|
|
926
|
+
return isHitText;
|
|
927
|
+
}
|
|
928
|
+
}
|
|
929
|
+
}
|
|
930
|
+
if (PlaitDrawElement.isImage(element)) {
|
|
931
|
+
const client = RectangleClient.getRectangleByPoints(element.points);
|
|
932
|
+
return RectangleClient.isPointInRectangle(client, point);
|
|
933
|
+
}
|
|
934
|
+
if (PlaitDrawElement.isLine(element)) {
|
|
935
|
+
return isHitLine(board, element, point);
|
|
936
|
+
}
|
|
937
|
+
return null;
|
|
938
|
+
};
|
|
939
|
+
|
|
685
940
|
const getTextRectangle = (element) => {
|
|
686
941
|
const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
|
|
687
942
|
const strokeWidth = getStrokeWidthByElement(element);
|
|
@@ -708,25 +963,28 @@ const insertElement = (board, element) => {
|
|
|
708
963
|
addSelectedElement(board, element);
|
|
709
964
|
BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
|
|
710
965
|
};
|
|
966
|
+
const isDrawElementIncludeText = (element) => {
|
|
967
|
+
if (PlaitDrawElement.isText(element)) {
|
|
968
|
+
return true;
|
|
969
|
+
}
|
|
970
|
+
if (PlaitDrawElement.isImage(element)) {
|
|
971
|
+
return false;
|
|
972
|
+
}
|
|
973
|
+
if (PlaitDrawElement.isGeometry(element)) {
|
|
974
|
+
return isGeometryIncludeText(element);
|
|
975
|
+
}
|
|
976
|
+
if (PlaitDrawElement.isLine(element)) {
|
|
977
|
+
const editors = getTextEditorsByElement(element);
|
|
978
|
+
return editors.length > 0;
|
|
979
|
+
}
|
|
980
|
+
if (PlaitDrawElement.isTable(element)) {
|
|
981
|
+
return element.cells.some(cell => isCellIncludeText(cell));
|
|
982
|
+
}
|
|
983
|
+
return true;
|
|
984
|
+
};
|
|
711
985
|
const isDrawElementsIncludeText = (elements) => {
|
|
712
986
|
return elements.some(item => {
|
|
713
|
-
|
|
714
|
-
return true;
|
|
715
|
-
}
|
|
716
|
-
if (PlaitDrawElement.isImage(item)) {
|
|
717
|
-
return false;
|
|
718
|
-
}
|
|
719
|
-
if (PlaitDrawElement.isGeometry(item)) {
|
|
720
|
-
return isGeometryIncludeText(item);
|
|
721
|
-
}
|
|
722
|
-
if (PlaitDrawElement.isLine(item)) {
|
|
723
|
-
const editors = getTextEditors(item);
|
|
724
|
-
return editors.length > 0;
|
|
725
|
-
}
|
|
726
|
-
if (PlaitDrawElement.isTable(item)) {
|
|
727
|
-
return item.cells.some(cell => isCellIncludeText(cell));
|
|
728
|
-
}
|
|
729
|
-
return true;
|
|
987
|
+
return isDrawElementIncludeText(item);
|
|
730
988
|
});
|
|
731
989
|
};
|
|
732
990
|
const getSnappingShape = (board, point) => {
|
|
@@ -802,6 +1060,28 @@ const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasCo
|
|
|
802
1060
|
}
|
|
803
1061
|
return g;
|
|
804
1062
|
};
|
|
1063
|
+
const getTextKey = (element, text) => {
|
|
1064
|
+
if (isMultipleTextGeometry(element)) {
|
|
1065
|
+
return `${element.id}-${text.key}`;
|
|
1066
|
+
}
|
|
1067
|
+
else {
|
|
1068
|
+
return text.key;
|
|
1069
|
+
}
|
|
1070
|
+
};
|
|
1071
|
+
const getGeometryAlign = (element) => {
|
|
1072
|
+
if (isMultipleTextGeometry(element)) {
|
|
1073
|
+
const drawShapeText = element.texts.find(item => item.key.includes(MultipleTextGeometryCommonTextKeys.content));
|
|
1074
|
+
return drawShapeText?.text.align || Alignment.center;
|
|
1075
|
+
}
|
|
1076
|
+
if (isSingleTextGeometry(element)) {
|
|
1077
|
+
return element.text?.align || Alignment.center;
|
|
1078
|
+
}
|
|
1079
|
+
if (PlaitDrawElement.isTable(element)) {
|
|
1080
|
+
const firstTextCell = element.cells.find(item => item.text);
|
|
1081
|
+
return firstTextCell?.text?.align || Alignment.center;
|
|
1082
|
+
}
|
|
1083
|
+
return Alignment.center;
|
|
1084
|
+
};
|
|
805
1085
|
|
|
806
1086
|
const getStrokeColorByElement = (board, element) => {
|
|
807
1087
|
const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
|
|
@@ -1476,99 +1756,45 @@ const handleLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceEl
|
|
|
1476
1756
|
const memorizedLatest = getLineMemorizedLatest();
|
|
1477
1757
|
let sourceMarker, targetMarker;
|
|
1478
1758
|
sourceMarker = memorizedLatest.source;
|
|
1479
|
-
targetMarker = memorizedLatest.target;
|
|
1480
|
-
sourceMarker && delete memorizedLatest.source;
|
|
1481
|
-
targetMarker && delete memorizedLatest.target;
|
|
1482
|
-
const temporaryLineElement = createLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || LineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
|
|
1483
|
-
strokeWidth: DefaultLineStyle.strokeWidth,
|
|
1484
|
-
...memorizedLatest
|
|
1485
|
-
});
|
|
1486
|
-
const linePoints = getLinePoints(board, temporaryLineElement);
|
|
1487
|
-
const otherPoint = linePoints[0];
|
|
1488
|
-
temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
|
|
1489
|
-
lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
|
|
1490
|
-
PlaitBoard.getElementActiveHost(board).append(lineShapeG);
|
|
1491
|
-
return temporaryLineElement;
|
|
1492
|
-
};
|
|
1493
|
-
function drawMask(board, element, id) {
|
|
1494
|
-
const mask = createMask();
|
|
1495
|
-
mask.setAttribute('id', id);
|
|
1496
|
-
const points = getLinePoints(board, element);
|
|
1497
|
-
let rectangle = RectangleClient.getRectangleByPoints(points);
|
|
1498
|
-
rectangle = RectangleClient.getOutlineRectangle(rectangle, -30);
|
|
1499
|
-
const maskFillRect = createRect(rectangle, {
|
|
1500
|
-
fill: 'white'
|
|
1501
|
-
});
|
|
1502
|
-
mask.appendChild(maskFillRect);
|
|
1503
|
-
const texts = element.texts;
|
|
1504
|
-
texts.forEach((text, index) => {
|
|
1505
|
-
let textRectangle = getLineTextRectangle(board, element, index);
|
|
1506
|
-
textRectangle = RectangleClient.inflate(textRectangle, LINE_TEXT_SPACE * 2);
|
|
1507
|
-
const rect = createRect(textRectangle, {
|
|
1508
|
-
fill: 'black'
|
|
1509
|
-
});
|
|
1510
|
-
mask.appendChild(rect);
|
|
1511
|
-
});
|
|
1512
|
-
// open line
|
|
1513
|
-
const maskTargetFillRect = createRect(rectangle);
|
|
1514
|
-
maskTargetFillRect.setAttribute('opacity', '0');
|
|
1515
|
-
maskTargetFillRect.setAttribute('fill', 'none');
|
|
1516
|
-
return { mask, maskTargetFillRect };
|
|
1517
|
-
}
|
|
1518
|
-
|
|
1519
|
-
const isMultipleTextShape = (shape) => {
|
|
1520
|
-
return [UMLSymbols.package, UMLSymbols.combinedFragment].includes(shape);
|
|
1521
|
-
};
|
|
1522
|
-
const isMultipleTextGeometry = (geometry) => {
|
|
1523
|
-
return !!geometry.texts;
|
|
1524
|
-
};
|
|
1525
|
-
const getMultipleTextGeometryTextKeys = (shape) => {
|
|
1526
|
-
return MultipleTextGeometryTextKeys[shape];
|
|
1527
|
-
};
|
|
1528
|
-
const createMultipleTextGeometryElement = (shape, points, options = {}) => {
|
|
1529
|
-
const id = idCreator();
|
|
1530
|
-
const drawShapeTexts = buildDefaultTextsByShape(shape, id);
|
|
1531
|
-
return {
|
|
1532
|
-
id,
|
|
1533
|
-
type: 'geometry',
|
|
1534
|
-
shape,
|
|
1535
|
-
angle: 0,
|
|
1536
|
-
opacity: 1,
|
|
1537
|
-
texts: drawShapeTexts,
|
|
1538
|
-
points,
|
|
1539
|
-
...options
|
|
1540
|
-
};
|
|
1541
|
-
};
|
|
1542
|
-
const buildDefaultTextsByShape = (shape, elementId) => {
|
|
1543
|
-
const memorizedLatest = getMemorizedLatestByPointer(shape);
|
|
1544
|
-
const textProperties = { ...memorizedLatest.textProperties };
|
|
1545
|
-
const alignment = textProperties?.align;
|
|
1546
|
-
const textHeight = textProperties?.textHeight || DefaultTextProperty.height;
|
|
1547
|
-
delete textProperties?.align;
|
|
1548
|
-
delete textProperties?.textHeight;
|
|
1549
|
-
const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
|
|
1550
|
-
const textKeys = getMultipleTextGeometryTextKeys(shape);
|
|
1551
|
-
return (textKeys || []).map((textKey) => {
|
|
1552
|
-
const text = defaultTexts?.find((item) => item?.key === textKey);
|
|
1553
|
-
return {
|
|
1554
|
-
key: textKey,
|
|
1555
|
-
text: buildText(text?.text || '', alignment || text?.align || Alignment.center, textProperties),
|
|
1556
|
-
textHeight: textHeight
|
|
1557
|
-
};
|
|
1759
|
+
targetMarker = memorizedLatest.target;
|
|
1760
|
+
sourceMarker && delete memorizedLatest.source;
|
|
1761
|
+
targetMarker && delete memorizedLatest.target;
|
|
1762
|
+
const temporaryLineElement = createLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || LineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
|
|
1763
|
+
strokeWidth: DefaultLineStyle.strokeWidth,
|
|
1764
|
+
...memorizedLatest
|
|
1558
1765
|
});
|
|
1766
|
+
const linePoints = getLinePoints(board, temporaryLineElement);
|
|
1767
|
+
const otherPoint = linePoints[0];
|
|
1768
|
+
temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
|
|
1769
|
+
lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
|
|
1770
|
+
PlaitBoard.getElementActiveHost(board).append(lineShapeG);
|
|
1771
|
+
return temporaryLineElement;
|
|
1559
1772
|
};
|
|
1560
|
-
|
|
1561
|
-
const
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1773
|
+
function drawMask(board, element, id) {
|
|
1774
|
+
const mask = createMask();
|
|
1775
|
+
mask.setAttribute('id', id);
|
|
1776
|
+
const points = getLinePoints(board, element);
|
|
1777
|
+
let rectangle = RectangleClient.getRectangleByPoints(points);
|
|
1778
|
+
rectangle = RectangleClient.getOutlineRectangle(rectangle, -30);
|
|
1779
|
+
const maskFillRect = createRect(rectangle, {
|
|
1780
|
+
fill: 'white'
|
|
1781
|
+
});
|
|
1782
|
+
mask.appendChild(maskFillRect);
|
|
1783
|
+
const texts = element.texts;
|
|
1784
|
+
texts.forEach((text, index) => {
|
|
1785
|
+
let textRectangle = getLineTextRectangle(board, element, index);
|
|
1786
|
+
textRectangle = RectangleClient.inflate(textRectangle, LINE_TEXT_SPACE * 2);
|
|
1787
|
+
const rect = createRect(textRectangle, {
|
|
1788
|
+
fill: 'black'
|
|
1568
1789
|
});
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1790
|
+
mask.appendChild(rect);
|
|
1791
|
+
});
|
|
1792
|
+
// open line
|
|
1793
|
+
const maskTargetFillRect = createRect(rectangle);
|
|
1794
|
+
maskTargetFillRect.setAttribute('opacity', '0');
|
|
1795
|
+
maskTargetFillRect.setAttribute('fill', 'none');
|
|
1796
|
+
return { mask, maskTargetFillRect };
|
|
1797
|
+
}
|
|
1572
1798
|
|
|
1573
1799
|
const createGeometryElement = (shape, points, text, options = {}, textProperties = {}) => {
|
|
1574
1800
|
if (GEOMETRY_WITHOUT_TEXT.includes(shape)) {
|
|
@@ -1785,7 +2011,13 @@ const rerenderGeometryActive = (board, element) => {
|
|
|
1785
2011
|
activeGenerator.processDrawing(element, PlaitBoard.getElementActiveHost(board), { selected });
|
|
1786
2012
|
};
|
|
1787
2013
|
const isGeometryIncludeText = (element) => {
|
|
1788
|
-
return
|
|
2014
|
+
return isSingleTextGeometry(element) || isMultipleTextGeometry(element);
|
|
2015
|
+
};
|
|
2016
|
+
const isSingleTextShape = (shape) => {
|
|
2017
|
+
return !GEOMETRY_WITHOUT_TEXT.includes(shape) && !isMultipleTextShape(shape);
|
|
2018
|
+
};
|
|
2019
|
+
const isSingleTextGeometry = (element) => {
|
|
2020
|
+
return PlaitDrawElement.isGeometry(element) && isSingleTextShape(element.shape);
|
|
1789
2021
|
};
|
|
1790
2022
|
|
|
1791
2023
|
const isSelfLoop = (element) => {
|
|
@@ -1924,214 +2156,6 @@ const getSelectedTableElements = (board, elements) => {
|
|
|
1924
2156
|
return selectedElements.filter(value => PlaitTableElement.isTable(value));
|
|
1925
2157
|
};
|
|
1926
2158
|
|
|
1927
|
-
var LineResizeHandle;
|
|
1928
|
-
(function (LineResizeHandle) {
|
|
1929
|
-
LineResizeHandle["source"] = "source";
|
|
1930
|
-
LineResizeHandle["target"] = "target";
|
|
1931
|
-
LineResizeHandle["addHandle"] = "addHandle";
|
|
1932
|
-
})(LineResizeHandle || (LineResizeHandle = {}));
|
|
1933
|
-
const getHitLineResizeHandleRef = (board, element, point) => {
|
|
1934
|
-
let dataPoints = PlaitLine.getPoints(board, element);
|
|
1935
|
-
const index = getHitPointIndex(dataPoints, point);
|
|
1936
|
-
if (index !== -1) {
|
|
1937
|
-
const handleIndex = index;
|
|
1938
|
-
if (index === 0) {
|
|
1939
|
-
return { handle: LineResizeHandle.source, handleIndex };
|
|
1940
|
-
}
|
|
1941
|
-
if (index === dataPoints.length - 1) {
|
|
1942
|
-
return { handle: LineResizeHandle.target, handleIndex };
|
|
1943
|
-
}
|
|
1944
|
-
// elbow line, data points only verify source connection point and target connection point
|
|
1945
|
-
if (element.shape !== LineShape.elbow) {
|
|
1946
|
-
return { handleIndex };
|
|
1947
|
-
}
|
|
1948
|
-
}
|
|
1949
|
-
const middlePoints = getMiddlePoints(board, element);
|
|
1950
|
-
const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
|
|
1951
|
-
if (indexOfMiddlePoints !== -1) {
|
|
1952
|
-
return {
|
|
1953
|
-
handle: LineResizeHandle.addHandle,
|
|
1954
|
-
handleIndex: indexOfMiddlePoints
|
|
1955
|
-
};
|
|
1956
|
-
}
|
|
1957
|
-
return undefined;
|
|
1958
|
-
};
|
|
1959
|
-
function getHitPointIndex(points, movingPoint) {
|
|
1960
|
-
const rectangles = points.map(point => {
|
|
1961
|
-
return {
|
|
1962
|
-
x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
|
|
1963
|
-
y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
|
|
1964
|
-
width: RESIZE_HANDLE_DIAMETER,
|
|
1965
|
-
height: RESIZE_HANDLE_DIAMETER
|
|
1966
|
-
};
|
|
1967
|
-
});
|
|
1968
|
-
const rectangle = rectangles.find(rectangle => {
|
|
1969
|
-
return RectangleClient.isHit(RectangleClient.getRectangleByPoints([movingPoint, movingPoint]), rectangle);
|
|
1970
|
-
});
|
|
1971
|
-
return rectangle ? rectangles.indexOf(rectangle) : -1;
|
|
1972
|
-
}
|
|
1973
|
-
const getHitLineTextIndex = (board, element, point) => {
|
|
1974
|
-
const texts = element.texts;
|
|
1975
|
-
if (!texts.length)
|
|
1976
|
-
return -1;
|
|
1977
|
-
const points = getLinePoints(board, element);
|
|
1978
|
-
return texts.findIndex(text => {
|
|
1979
|
-
const center = getPointOnPolyline(points, text.position);
|
|
1980
|
-
const rectangle = {
|
|
1981
|
-
x: center[0] - text.width / 2,
|
|
1982
|
-
y: center[1] - text.height / 2,
|
|
1983
|
-
width: text.width,
|
|
1984
|
-
height: text.height
|
|
1985
|
-
};
|
|
1986
|
-
return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
|
|
1987
|
-
});
|
|
1988
|
-
};
|
|
1989
|
-
|
|
1990
|
-
const isTextExceedingBounds = (geometry) => {
|
|
1991
|
-
const client = RectangleClient.getRectangleByPoints(geometry.points);
|
|
1992
|
-
if (geometry.textHeight && geometry.textHeight > client.height) {
|
|
1993
|
-
return true;
|
|
1994
|
-
}
|
|
1995
|
-
return false;
|
|
1996
|
-
};
|
|
1997
|
-
const isHitLineText = (board, element, point) => {
|
|
1998
|
-
return getHitLineTextIndex(board, element, point) !== -1;
|
|
1999
|
-
};
|
|
2000
|
-
const isHitPolyLine = (pathPoints, point) => {
|
|
2001
|
-
const distance = distanceBetweenPointAndSegments(pathPoints, point);
|
|
2002
|
-
return distance <= HIT_DISTANCE_BUFFER;
|
|
2003
|
-
};
|
|
2004
|
-
const isHitLine = (board, element, point) => {
|
|
2005
|
-
const points = getLinePoints(board, element);
|
|
2006
|
-
const isHitText = isHitLineText(board, element, point);
|
|
2007
|
-
return isHitText || isHitPolyLine(points, point);
|
|
2008
|
-
};
|
|
2009
|
-
const isHitElementText = (element, point) => {
|
|
2010
|
-
const engine = getEngine(element.shape);
|
|
2011
|
-
if (isMultipleTextGeometry(element)) {
|
|
2012
|
-
const texts = element.texts;
|
|
2013
|
-
return texts.some(item => {
|
|
2014
|
-
const textClient = engine.getTextRectangle(element, { key: item.key });
|
|
2015
|
-
return RectangleClient.isPointInRectangle(textClient, point);
|
|
2016
|
-
});
|
|
2017
|
-
}
|
|
2018
|
-
else {
|
|
2019
|
-
const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
|
|
2020
|
-
return RectangleClient.isPointInRectangle(textClient, point);
|
|
2021
|
-
}
|
|
2022
|
-
};
|
|
2023
|
-
const isRectangleHitElementText = (element, rectangle) => {
|
|
2024
|
-
const engine = getEngine(element.shape);
|
|
2025
|
-
if (isMultipleTextGeometry(element)) {
|
|
2026
|
-
const texts = element.texts;
|
|
2027
|
-
return texts.some(item => {
|
|
2028
|
-
const textClient = engine.getTextRectangle(element, { key: item.key });
|
|
2029
|
-
const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
|
|
2030
|
-
return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
|
|
2031
|
-
});
|
|
2032
|
-
}
|
|
2033
|
-
else {
|
|
2034
|
-
const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
|
|
2035
|
-
const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
|
|
2036
|
-
return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
|
|
2037
|
-
}
|
|
2038
|
-
};
|
|
2039
|
-
const isRectangleHitDrawElement = (board, element, selection) => {
|
|
2040
|
-
const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
|
|
2041
|
-
if (PlaitDrawElement.isGeometry(element)) {
|
|
2042
|
-
const client = RectangleClient.getRectangleByPoints(element.points);
|
|
2043
|
-
let rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
|
|
2044
|
-
const isHitElement = isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
|
|
2045
|
-
if (isHitElement) {
|
|
2046
|
-
return isHitElement;
|
|
2047
|
-
}
|
|
2048
|
-
return isRectangleHitElementText(element, rangeRectangle);
|
|
2049
|
-
}
|
|
2050
|
-
if (PlaitDrawElement.isImage(element)) {
|
|
2051
|
-
const client = RectangleClient.getRectangleByPoints(element.points);
|
|
2052
|
-
const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
|
|
2053
|
-
return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
|
|
2054
|
-
}
|
|
2055
|
-
if (PlaitDrawElement.isLine(element)) {
|
|
2056
|
-
const points = getLinePoints(board, element);
|
|
2057
|
-
return isPolylineHitRectangle(points, rangeRectangle);
|
|
2058
|
-
}
|
|
2059
|
-
return null;
|
|
2060
|
-
};
|
|
2061
|
-
const isHitDrawElement = (board, element, point) => {
|
|
2062
|
-
const rectangle = board.getRectangle(element);
|
|
2063
|
-
point = rotateAntiPointsByElement(point, element) || point;
|
|
2064
|
-
if (PlaitDrawElement.isGeometry(element)) {
|
|
2065
|
-
const fill = getFillByElement(board, element);
|
|
2066
|
-
if (isHitEdgeOfShape(board, element, point, HIT_DISTANCE_BUFFER)) {
|
|
2067
|
-
return true;
|
|
2068
|
-
}
|
|
2069
|
-
const engine = getEngine(getElementShape(element));
|
|
2070
|
-
// when shape equals text, fill is not allowed
|
|
2071
|
-
if (fill !== DefaultDrawStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
|
|
2072
|
-
const isHitInside = engine.isInsidePoint(rectangle, point);
|
|
2073
|
-
if (isHitInside) {
|
|
2074
|
-
return isHitInside;
|
|
2075
|
-
}
|
|
2076
|
-
}
|
|
2077
|
-
else {
|
|
2078
|
-
// if shape equals text, only check text rectangle
|
|
2079
|
-
if (PlaitDrawElement.isText(element)) {
|
|
2080
|
-
const textClient = getTextRectangle(element);
|
|
2081
|
-
let isHitText = RectangleClient.isPointInRectangle(textClient, point);
|
|
2082
|
-
return isHitText;
|
|
2083
|
-
}
|
|
2084
|
-
// check textRectangle of element
|
|
2085
|
-
const isHitText = isHitElementText(element, point);
|
|
2086
|
-
if (isHitText) {
|
|
2087
|
-
return isHitText;
|
|
2088
|
-
}
|
|
2089
|
-
}
|
|
2090
|
-
}
|
|
2091
|
-
if (PlaitDrawElement.isImage(element)) {
|
|
2092
|
-
const client = RectangleClient.getRectangleByPoints(element.points);
|
|
2093
|
-
return RectangleClient.isPointInRectangle(client, point);
|
|
2094
|
-
}
|
|
2095
|
-
if (PlaitDrawElement.isLine(element)) {
|
|
2096
|
-
return isHitLine(board, element, point);
|
|
2097
|
-
}
|
|
2098
|
-
return null;
|
|
2099
|
-
};
|
|
2100
|
-
const isHitEdgeOfShape = (board, element, point, hitDistanceBuffer) => {
|
|
2101
|
-
const nearestPoint = getNearestPoint(element, point);
|
|
2102
|
-
const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
|
|
2103
|
-
return distance <= hitDistanceBuffer;
|
|
2104
|
-
};
|
|
2105
|
-
const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
|
|
2106
|
-
const client = RectangleClient.inflate(RectangleClient.getRectangleByPoints(element.points), hitDistanceBuffer);
|
|
2107
|
-
return getEngine(getElementShape(element)).isInsidePoint(client, point);
|
|
2108
|
-
};
|
|
2109
|
-
const isHitElementInside = (board, element, point) => {
|
|
2110
|
-
const rectangle = board.getRectangle(element);
|
|
2111
|
-
point = rotateAntiPointsByElement(point, element) || point;
|
|
2112
|
-
if (PlaitDrawElement.isGeometry(element)) {
|
|
2113
|
-
const engine = getEngine(getElementShape(element));
|
|
2114
|
-
const isHitInside = engine.isInsidePoint(rectangle, point);
|
|
2115
|
-
if (isHitInside) {
|
|
2116
|
-
return isHitInside;
|
|
2117
|
-
}
|
|
2118
|
-
if (engine.getTextRectangle) {
|
|
2119
|
-
const isHitText = isHitElementText(element, point);
|
|
2120
|
-
if (isHitText) {
|
|
2121
|
-
return isHitText;
|
|
2122
|
-
}
|
|
2123
|
-
}
|
|
2124
|
-
}
|
|
2125
|
-
if (PlaitDrawElement.isImage(element)) {
|
|
2126
|
-
const client = RectangleClient.getRectangleByPoints(element.points);
|
|
2127
|
-
return RectangleClient.isPointInRectangle(client, point);
|
|
2128
|
-
}
|
|
2129
|
-
if (PlaitDrawElement.isLine(element)) {
|
|
2130
|
-
return isHitLine(board, element, point);
|
|
2131
|
-
}
|
|
2132
|
-
return null;
|
|
2133
|
-
};
|
|
2134
|
-
|
|
2135
2159
|
const resizeLine = (board, options, path) => {
|
|
2136
2160
|
Transforms.setNode(board, options, path);
|
|
2137
2161
|
};
|
|
@@ -5838,7 +5862,7 @@ const withDrawHotkey = (board) => {
|
|
|
5838
5862
|
const hitElement = getHitElementByPoint(board, point);
|
|
5839
5863
|
if (hitElement && PlaitDrawElement.isGeometry(hitElement)) {
|
|
5840
5864
|
if (isMultipleTextGeometry(hitElement)) {
|
|
5841
|
-
const hitText =
|
|
5865
|
+
const hitText = getHitMultipleGeometryText(hitElement, point) ||
|
|
5842
5866
|
hitElement.texts.find(item => item.key.includes(MultipleTextGeometryCommonTextKeys.content)) ||
|
|
5843
5867
|
hitElement.texts[0];
|
|
5844
5868
|
editText(board, hitElement, hitText);
|
|
@@ -6275,7 +6299,7 @@ const withGeometryResize = (board) => {
|
|
|
6275
6299
|
snapG = resizeSnapRef.snapG;
|
|
6276
6300
|
PlaitBoard.getElementActiveHost(board).append(snapG);
|
|
6277
6301
|
let points = resizeSnapRef.activePoints;
|
|
6278
|
-
if (PlaitDrawElement.isGeometry(resizeRef.element)) {
|
|
6302
|
+
if (PlaitDrawElement.isGeometry(resizeRef.element) && isGeometryIncludeText(resizeRef.element)) {
|
|
6279
6303
|
const { height: textHeight } = getFirstTextManage(resizeRef.element).getSize();
|
|
6280
6304
|
DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
|
|
6281
6305
|
}
|
|
@@ -6942,7 +6966,9 @@ class TableComponent extends CommonElementFlavour {
|
|
|
6942
6966
|
});
|
|
6943
6967
|
}
|
|
6944
6968
|
getDrawShapeTexts(cells) {
|
|
6945
|
-
return cells
|
|
6969
|
+
return cells
|
|
6970
|
+
.filter(item => isCellIncludeText(item))
|
|
6971
|
+
.map(item => {
|
|
6946
6972
|
return {
|
|
6947
6973
|
key: item.id,
|
|
6948
6974
|
text: item.text,
|
|
@@ -7554,5 +7580,5 @@ const withDraw = (board) => {
|
|
|
7554
7580
|
* Generated bundle index. Do not edit.
|
|
7555
7581
|
*/
|
|
7556
7582
|
|
|
7557
|
-
export { BasicShapes, DEFAULT_IMAGE_WIDTH, DEFAULT_TEXT_HEIGHT, DefaultActorProperty, DefaultArrowProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_WITHOUT_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, Q2C, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, buildDefaultTextsByShape, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editText, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint,
|
|
7583
|
+
export { BasicShapes, DEFAULT_IMAGE_WIDTH, DEFAULT_TEXT_HEIGHT, DefaultActorProperty, DefaultArrowProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, 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, Q2C, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, buildDefaultTextsByShape, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editText, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlanePointers, getTextKey, getTextManage, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryIncludeText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setTextManage, traverseDrawShapes, withDraw, withLineAutoComplete };
|
|
7558
7584
|
//# sourceMappingURL=plait-draw.mjs.map
|