From 8f397caadcec349bd822f54c51f45b30e960f1b1 Mon Sep 17 00:00:00 2001 From: pubuzhixing8 Date: Fri, 26 Sep 2025 12:17:09 +0800 Subject: [PATCH 1/8] feat: correct getTextRectangle in engine --- .../draw/src/engines/basic-shapes/cloud.ts | 16 +++----------- .../draw/src/engines/basic-shapes/comment.ts | 15 ++++--------- .../draw/src/engines/basic-shapes/cross.ts | 9 +++----- .../draw/src/engines/basic-shapes/diamond.ts | 9 ++++---- .../draw/src/engines/flowchart/stored-data.ts | 22 +++++++++---------- packages/draw/src/utils/common.ts | 14 ++++++++++-- 6 files changed, 37 insertions(+), 48 deletions(-) diff --git a/packages/draw/src/engines/basic-shapes/cloud.ts b/packages/draw/src/engines/basic-shapes/cloud.ts index 65c7f024b..5baabe832 100644 --- a/packages/draw/src/engines/basic-shapes/cloud.ts +++ b/packages/draw/src/engines/basic-shapes/cloud.ts @@ -10,7 +10,7 @@ import { import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle, getStrokeWidthByElement } from '../../utils'; import { ShapeDefaultSpace } from '../../constants'; import { getNearestPointBetweenPointAndArc } from '@plait/core'; import { getTextSize } from '../../utils/text-size'; @@ -156,17 +156,7 @@ export const CloudEngine: ShapeEngine = { return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const width = originWidth / 1.5; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6, - y: elementRectangle.y + elementRectangle.height / 6 + ((elementRectangle.height * 4) / 6 - textSize.height) / 2 - }; + const widthRatio = 1 / 1.5; + return getCustomTextRectangle(board, element, widthRatio); } }; diff --git a/packages/draw/src/engines/basic-shapes/comment.ts b/packages/draw/src/engines/basic-shapes/comment.ts index 7718c7993..808e70e91 100644 --- a/packages/draw/src/engines/basic-shapes/comment.ts +++ b/packages/draw/src/engines/basic-shapes/comment.ts @@ -10,7 +10,7 @@ import { import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { ShapeDefaultSpace } from '../../constants'; -import { getStrokeWidthByElement } from '../../utils'; +import { getStrokeWidthByElement, getTextRectangle } from '../../utils'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; import { getTextSize } from '../../utils/text-size'; @@ -44,16 +44,9 @@ export const CommentEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + (elementRectangle.height * heightRatio - textSize.height) / 2 - }; + const textRectangle = getTextRectangle(board, element); + textRectangle.y = elementRectangle.y + (elementRectangle.height * heightRatio - textRectangle.height) / 2; + return textRectangle; } }; diff --git a/packages/draw/src/engines/basic-shapes/cross.ts b/packages/draw/src/engines/basic-shapes/cross.ts index e09a5e5c6..44d1cbb3c 100644 --- a/packages/draw/src/engines/basic-shapes/cross.ts +++ b/packages/draw/src/engines/basic-shapes/cross.ts @@ -1,7 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getTextRectangle } from '../../utils'; export const getCrossPoints = (rectangle: RectangleClient): Point[] => { return [ [rectangle.x + rectangle.width / 4, rectangle.y], @@ -25,10 +25,7 @@ export const CrossEngine: ShapeEngine = createPolygonEngine({ return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const rectangle = getTextRectangle(board, element); - const width = rectangle.width; - rectangle.width = rectangle.width / 2; - rectangle.x += width / 4; - return rectangle; + const widthRatio = 1 / 2; + return getCustomTextRectangle(board, element, widthRatio); } }); diff --git a/packages/draw/src/engines/basic-shapes/diamond.ts b/packages/draw/src/engines/basic-shapes/diamond.ts index 5093919ef..9488ff6b3 100644 --- a/packages/draw/src/engines/basic-shapes/diamond.ts +++ b/packages/draw/src/engines/basic-shapes/diamond.ts @@ -1,7 +1,9 @@ import { PlaitBoard, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getStrokeWidthByElement, getTextRectangle } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants/geometry'; +import { getTextSize } from '../../utils/text-size'; export const DiamondEngine: ShapeEngine = createPolygonEngine({ getPolygonPoints: RectangleClient.getEdgeCenterPoints, @@ -9,9 +11,6 @@ export const DiamondEngine: ShapeEngine = createPolygonEngine({ return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const rectangle = getTextRectangle(board, element); - rectangle.width = rectangle.width / 2; - rectangle.x += rectangle.width / 2; - return rectangle; + return getCustomTextRectangle(board, element, 1 / 2); } }); diff --git a/packages/draw/src/engines/flowchart/stored-data.ts b/packages/draw/src/engines/flowchart/stored-data.ts index e8896e288..8132b0338 100644 --- a/packages/draw/src/engines/flowchart/stored-data.ts +++ b/packages/draw/src/engines/flowchart/stored-data.ts @@ -14,16 +14,19 @@ import { import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getTextRectangle } from '../../utils'; export const StoredDataEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { const rs = PlaitBoard.getRoughSVG(board); const shape = rs.path( - `M${rectangle.x + rectangle.width / 10} ${rectangle.y} L${rectangle.x + rectangle.width} ${rectangle.y} A ${rectangle.width / - 10} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} L${rectangle.x + - rectangle.width / 10} ${rectangle.y + rectangle.height}A ${rectangle.width / 10} ${rectangle.height / - 2}, 0, 0, 1,${rectangle.x + rectangle.width / 10} ${rectangle.y}`, + `M${rectangle.x + rectangle.width / 10} ${rectangle.y} L${rectangle.x + rectangle.width} ${rectangle.y} A ${ + rectangle.width / 10 + } ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} L${ + rectangle.x + rectangle.width / 10 + } ${rectangle.y + rectangle.height}A ${rectangle.width / 10} ${rectangle.height / 2}, 0, 0, 1,${ + rectangle.x + rectangle.width / 10 + } ${rectangle.y}`, { ...options, fillStyle: 'solid' } ); setStrokeLinecap(shape, 'round'); @@ -91,7 +94,7 @@ export const StoredDataEngine: ShapeEngine = { const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])]; const slope = getEllipseTangentSlope(point[0], point[1], a, b) as any; const vector = getVectorFromPointAndSlope(point[0], point[1], slope); - return isBackEllipse ? (vector.map(num => -num) as Vector) : vector; + return isBackEllipse ? (vector.map((num) => -num) as Vector) : vector; }, getConnectorPoints(rectangle: RectangleClient) { return [ @@ -102,10 +105,7 @@ export const StoredDataEngine: ShapeEngine = { ]; }, getTextRectangle(board: PlaitBoard, element: PlaitGeometry) { - const rectangle = getTextRectangle(board, element); - const width = rectangle.width; - rectangle.width = (rectangle.width * 3) / 4; - rectangle.x += width / 8; - return rectangle; + const widthRatio = 3 / 4; + return getCustomTextRectangle(board, element, widthRatio); } }; diff --git a/packages/draw/src/utils/common.ts b/packages/draw/src/utils/common.ts index 7876b7c87..69c04ca39 100644 --- a/packages/draw/src/utils/common.ts +++ b/packages/draw/src/utils/common.ts @@ -38,8 +38,7 @@ import { PlaitCustomGeometry, PlaitDrawElement, PlaitGeometry, - PlaitShapeElement, - PlaitText + PlaitShapeElement } from '../interfaces'; import { Alignment, getTextEditorsByElement } from '@plait/common'; import { isCellIncludeText } from './table'; @@ -77,6 +76,17 @@ export const getTextRectangle = (board: }; }; +export const getCustomTextRectangle = (board: PlaitBoard, element: T, widthRatio: number) => { + const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); + const textSize = getTextSize(board, element.text!, widthRatio * elementRectangle.width); + return { + height: textSize.height, + width: widthRatio * elementRectangle.width, + x: elementRectangle.x + (elementRectangle.width - widthRatio * elementRectangle.width) / 2, + y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 + }; +}; + export const getStrokeWidthByElement = (element: PlaitElement) => { if (PlaitDrawElement.isText(element)) { return 0; From cadf266ae640b1ed18075ea88a6e2170634c6282 Mon Sep 17 00:00:00 2001 From: pubuzhixing8 Date: Fri, 26 Sep 2025 14:50:48 +0800 Subject: [PATCH 2/8] feat: improve engine --- .../draw/src/engines/basic-shapes/ellipse.ts | 8 ++----- .../draw/src/engines/basic-shapes/hexagon.ts | 8 ++----- .../src/engines/basic-shapes/left-arrow.ts | 12 +++++------ .../draw/src/engines/basic-shapes/octagon.ts | 8 ++----- .../src/engines/basic-shapes/parallelogram.ts | 8 ++----- .../engines/basic-shapes/pentagon-arrow.ts | 10 ++++----- .../draw/src/engines/basic-shapes/pentagon.ts | 20 +++++++----------- .../src/engines/basic-shapes/right-arrow.ts | 10 +++++---- .../draw/src/engines/basic-shapes/star.ts | 21 +++++++------------ .../draw/src/engines/basic-shapes/triangle.ts | 21 +++++++------------ packages/draw/src/utils/common.ts | 7 ++++--- 11 files changed, 50 insertions(+), 83 deletions(-) diff --git a/packages/draw/src/engines/basic-shapes/ellipse.ts b/packages/draw/src/engines/basic-shapes/ellipse.ts index 2963791c1..ad48b532a 100644 --- a/packages/draw/src/engines/basic-shapes/ellipse.ts +++ b/packages/draw/src/engines/basic-shapes/ellipse.ts @@ -11,7 +11,7 @@ import { } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getTextRectangle } from '../../utils'; export interface CreateEllipseOptions { draw?: (board: PlaitBoard, rectangle: RectangleClient, options: Options) => SVGGElement; @@ -52,11 +52,7 @@ export function createEllipseEngine(createOptions?: CreateEllipseOptions): Shape return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const rectangle = getTextRectangle(board, element); - const width = rectangle.width; - rectangle.width = (rectangle.width * 3) / 4; - rectangle.x += width / 8; - return rectangle; + return getCustomTextRectangle(board, element, 3 / 4); } }; diff --git a/packages/draw/src/engines/basic-shapes/hexagon.ts b/packages/draw/src/engines/basic-shapes/hexagon.ts index 088321e69..a1c8a1243 100644 --- a/packages/draw/src/engines/basic-shapes/hexagon.ts +++ b/packages/draw/src/engines/basic-shapes/hexagon.ts @@ -1,7 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getHexagonPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -20,10 +20,6 @@ export const HexagonEngine: ShapeEngine = createPolygonEngine({ return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const rectangle = getTextRectangle(board, element); - const width = rectangle.width; - rectangle.width = (rectangle.width * 3) / 4; - rectangle.x += width / 8; - return rectangle; + return getCustomTextRectangle(board, element, 3 / 4); } }); diff --git a/packages/draw/src/engines/basic-shapes/left-arrow.ts b/packages/draw/src/engines/basic-shapes/left-arrow.ts index 10c34c79a..5041bae53 100644 --- a/packages/draw/src/engines/basic-shapes/left-arrow.ts +++ b/packages/draw/src/engines/basic-shapes/left-arrow.ts @@ -1,7 +1,8 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; export const getLeftArrowPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -24,10 +25,9 @@ export const LeftArrowEngine: ShapeEngine = createPolygonEngine({ ]; }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const rectangle = getTextRectangle(board, element); - const width = rectangle.width; - rectangle.width = rectangle.width * (1 - 0.32); - rectangle.x += width * 0.32; - return rectangle; + const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); + const customTextRectangle = getCustomTextRectangle(board, element, 1 - 0.32); + customTextRectangle.x = elementRectangle.x + elementRectangle.width * 0.32 + ShapeDefaultSpace.rectangleAndText; + return customTextRectangle; } }); diff --git a/packages/draw/src/engines/basic-shapes/octagon.ts b/packages/draw/src/engines/basic-shapes/octagon.ts index bd20e00da..658db820f 100644 --- a/packages/draw/src/engines/basic-shapes/octagon.ts +++ b/packages/draw/src/engines/basic-shapes/octagon.ts @@ -1,7 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getOctagonPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -22,10 +22,6 @@ export const OctagonEngine: ShapeEngine = createPolygonEngine({ return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const rectangle = getTextRectangle(board, element); - const width = rectangle.width; - rectangle.width = (rectangle.width * 3) / 4; - rectangle.x += width / 8; - return rectangle; + return getCustomTextRectangle(board, element, 3 / 4); } }); diff --git a/packages/draw/src/engines/basic-shapes/parallelogram.ts b/packages/draw/src/engines/basic-shapes/parallelogram.ts index bd30bc474..b6672b1c0 100644 --- a/packages/draw/src/engines/basic-shapes/parallelogram.ts +++ b/packages/draw/src/engines/basic-shapes/parallelogram.ts @@ -2,7 +2,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; import { getCenterPointsOnPolygon } from '../../utils/polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getParallelogramPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -19,10 +19,6 @@ export const ParallelogramEngine: ShapeEngine = createPolygonEngine({ return getCenterPointsOnPolygon(cornerPoints); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const rectangle = getTextRectangle(board, element); - const width = rectangle.width; - rectangle.width = rectangle.width / 2; - rectangle.x += width / 4; - return rectangle; + return getCustomTextRectangle(board, element, 1 / 2); } }); diff --git a/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts b/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts index 3df88595d..e24ed1df0 100644 --- a/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts +++ b/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts @@ -1,7 +1,8 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getTextRectangle } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; export const getPentagonArrowPoints = (rectangle: RectangleClient): Point[] => { const wider = rectangle.width > rectangle.height / 2; @@ -21,9 +22,8 @@ export const PentagonArrowEngine: ShapeEngine = createPolygonEngine({ }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const rectangle = getTextRectangle(board, element); - const wider = elementRectangle.width > elementRectangle.height / 2 + 20; - rectangle.width = wider ? elementRectangle.width - elementRectangle.height / 2 : rectangle.width; - return rectangle; + const customTextRectangle = getCustomTextRectangle(board, element, 3 / 4); + customTextRectangle.x = elementRectangle.x + ShapeDefaultSpace.rectangleAndText; + return customTextRectangle; } }); diff --git a/packages/draw/src/engines/basic-shapes/pentagon.ts b/packages/draw/src/engines/basic-shapes/pentagon.ts index acb066d30..ca2e699dd 100644 --- a/packages/draw/src/engines/basic-shapes/pentagon.ts +++ b/packages/draw/src/engines/basic-shapes/pentagon.ts @@ -1,8 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; import { ShapeDefaultSpace } from '../../constants'; export const getPentagonPoints = (rectangle: RectangleClient): Point[] => { @@ -19,16 +18,11 @@ export const PentagonEngine: ShapeEngine = createPolygonEngine({ getPolygonPoints: getPentagonPoints, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const width = (originWidth * 3) / 5; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 5, - y: elementRectangle.y + elementRectangle.height / 5 + ((elementRectangle.height * 4) / 5 - textSize.height) / 2 - }; + const customTextRectangle = getCustomTextRectangle(board, element, 3 / 5); + customTextRectangle.y = + elementRectangle.y + + elementRectangle.height / 5 + + (elementRectangle.height - elementRectangle.height / 5 - customTextRectangle.height) / 2; + return customTextRectangle; } }); diff --git a/packages/draw/src/engines/basic-shapes/right-arrow.ts b/packages/draw/src/engines/basic-shapes/right-arrow.ts index 181501b3a..675bc191a 100644 --- a/packages/draw/src/engines/basic-shapes/right-arrow.ts +++ b/packages/draw/src/engines/basic-shapes/right-arrow.ts @@ -1,7 +1,8 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; export const getRightArrowPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -24,8 +25,9 @@ export const RightArrowEngine: ShapeEngine = createPolygonEngine({ ]; }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const rectangle = getTextRectangle(board, element); - rectangle.width = rectangle.width * 0.68; - return rectangle; + const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); + const customTextRectangle = getCustomTextRectangle(board, element, 1 - 0.32); + customTextRectangle.x = elementRectangle.x + ShapeDefaultSpace.rectangleAndText; + return customTextRectangle; } }); diff --git a/packages/draw/src/engines/basic-shapes/star.ts b/packages/draw/src/engines/basic-shapes/star.ts index 3ff3a423c..9fab09e8f 100644 --- a/packages/draw/src/engines/basic-shapes/star.ts +++ b/packages/draw/src/engines/basic-shapes/star.ts @@ -1,9 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getStrokeWidthByElement } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants'; +import { getCustomTextRectangle } from '../../utils'; export const getStarPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -28,16 +26,11 @@ export const StarEngine: ShapeEngine = createPolygonEngine({ }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const width = originWidth / 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 4, - y: elementRectangle.y + (elementRectangle.height * 1) / 6 + ((elementRectangle.height * 4) / 5 - textSize.height) / 2 - }; + const customTextRectangle = getCustomTextRectangle(board, element, 1 / 2); + customTextRectangle.y = + elementRectangle.y + + elementRectangle.height / 5 + + (elementRectangle.height - elementRectangle.height / 5 - customTextRectangle.height) / 2; + return customTextRectangle; } }); diff --git a/packages/draw/src/engines/basic-shapes/triangle.ts b/packages/draw/src/engines/basic-shapes/triangle.ts index 74c75f9d1..90191e074 100644 --- a/packages/draw/src/engines/basic-shapes/triangle.ts +++ b/packages/draw/src/engines/basic-shapes/triangle.ts @@ -1,10 +1,8 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { ShapeDefaultSpace } from '../../constants'; import { getCenterPointsOnPolygon } from '../../utils/polygon'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getTrianglePoints = (rectangle: RectangleClient): Point[] => { return [ @@ -22,17 +20,12 @@ export const TriangleEngine: ShapeEngine = createPolygonEngine({ return [...lineCenterPoints, ...cornerPoints]; }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { + const customTextRectangle = getCustomTextRectangle(board, element, 1 / 2); const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const width = (originWidth * 2) / 3; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6, - y: elementRectangle.y + (elementRectangle.height * 3) / 5 + ((elementRectangle.height * 2) / 5 - textSize.height) / 2 - }; + customTextRectangle.y = + elementRectangle.y + + (elementRectangle.height * 2.5) / 5 + + (elementRectangle.height - (elementRectangle.height * 2.5) / 5 - customTextRectangle.height) / 2; + return customTextRectangle; } }); diff --git a/packages/draw/src/utils/common.ts b/packages/draw/src/utils/common.ts index 69c04ca39..85c60175a 100644 --- a/packages/draw/src/utils/common.ts +++ b/packages/draw/src/utils/common.ts @@ -78,11 +78,12 @@ export const getTextRectangle = (board: export const getCustomTextRectangle = (board: PlaitBoard, element: T, widthRatio: number) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const textSize = getTextSize(board, element.text!, widthRatio * elementRectangle.width); + const width = widthRatio * elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2; + const textSize = getTextSize(board, element.text!, width); return { height: textSize.height, - width: widthRatio * elementRectangle.width, - x: elementRectangle.x + (elementRectangle.width - widthRatio * elementRectangle.width) / 2, + width: width, + x: elementRectangle.x + (elementRectangle.width - width) / 2, y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 }; }; From ec1167eeda2e9d93e74aed4ca7e5b1af91cc0129 Mon Sep 17 00:00:00 2001 From: pubuzhixing8 Date: Fri, 26 Sep 2025 15:24:40 +0800 Subject: [PATCH 3/8] chore: complete basic shapes --- .../draw/src/engines/basic-shapes/comment.ts | 4 +--- .../src/engines/basic-shapes/process-arrow.ts | 9 ++++----- .../src/engines/basic-shapes/round-comment.ts | 17 ++++------------- .../draw/src/engines/basic-shapes/trapezoid.ts | 8 ++------ 4 files changed, 11 insertions(+), 27 deletions(-) diff --git a/packages/draw/src/engines/basic-shapes/comment.ts b/packages/draw/src/engines/basic-shapes/comment.ts index 808e70e91..d9db63e40 100644 --- a/packages/draw/src/engines/basic-shapes/comment.ts +++ b/packages/draw/src/engines/basic-shapes/comment.ts @@ -9,10 +9,8 @@ import { } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; -import { ShapeDefaultSpace } from '../../constants'; -import { getStrokeWidthByElement, getTextRectangle } from '../../utils'; +import { getTextRectangle } from '../../utils'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getTextSize } from '../../utils/text-size'; const heightRatio = 3 / 4; diff --git a/packages/draw/src/engines/basic-shapes/process-arrow.ts b/packages/draw/src/engines/basic-shapes/process-arrow.ts index f97df0620..b0550ce48 100644 --- a/packages/draw/src/engines/basic-shapes/process-arrow.ts +++ b/packages/draw/src/engines/basic-shapes/process-arrow.ts @@ -1,7 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getProcessArrowPoints = (rectangle: RectangleClient): Point[] => { const wider = rectangle.width > rectangle.height / 2; @@ -19,10 +19,9 @@ export const ProcessArrowEngine: ShapeEngine = createPolygonEngine({ getPolygonPoints: getProcessArrowPoints, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const rectangle = getTextRectangle(board, element); const wider = elementRectangle.width > elementRectangle.height + 20; - rectangle.width = wider ? elementRectangle.width - elementRectangle.height : rectangle.width; - rectangle.x = wider ? elementRectangle.x + elementRectangle.height / 2: rectangle.x; - return rectangle; + const widthRatio = wider ? (elementRectangle.width - elementRectangle.height) / elementRectangle.width : 3 / 4; + const customTextRectangle = getCustomTextRectangle(board, element, widthRatio); + return customTextRectangle; } }); diff --git a/packages/draw/src/engines/basic-shapes/round-comment.ts b/packages/draw/src/engines/basic-shapes/round-comment.ts index 39c0d829c..26be4d691 100644 --- a/packages/draw/src/engines/basic-shapes/round-comment.ts +++ b/packages/draw/src/engines/basic-shapes/round-comment.ts @@ -8,13 +8,11 @@ import { isPointInRoundRectangle, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; -import { ShapeDefaultSpace } from '../../constants'; import { getRoundRectangleRadius } from './round-rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getStrokeWidthByElement } from '../../utils/common'; +import { getTextRectangle } from '../../utils/common'; const heightRatio = 3 / 4; @@ -77,16 +75,9 @@ export const RoundCommentEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + (elementRectangle.height * heightRatio - textSize.height) / 2 - }; + const textRectangle = getTextRectangle(board, element); + textRectangle.y = elementRectangle.y + (elementRectangle.height * heightRatio - textRectangle.height) / 2; + return textRectangle; } }; diff --git a/packages/draw/src/engines/basic-shapes/trapezoid.ts b/packages/draw/src/engines/basic-shapes/trapezoid.ts index 0d599c80a..ebd2ee642 100644 --- a/packages/draw/src/engines/basic-shapes/trapezoid.ts +++ b/packages/draw/src/engines/basic-shapes/trapezoid.ts @@ -2,7 +2,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; import { getCenterPointsOnPolygon } from '../../utils/polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getTrapezoidPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -20,10 +20,6 @@ export const TrapezoidEngine: ShapeEngine = createPolygonEngine({ return getCenterPointsOnPolygon(points); }, getTextRectangle(board: PlaitBoard, element: PlaitGeometry) { - const rectangle = getTextRectangle(board, element); - const width = rectangle.width; - rectangle.width = (rectangle.width * 3) / 4; - rectangle.x += width / 8; - return rectangle; + return getCustomTextRectangle(board, element, 3 / 4); } }); From 9f5dd94e01471651dd66b6596205a2a143ce2543 Mon Sep 17 00:00:00 2001 From: pubuzhixing8 Date: Sun, 28 Sep 2025 15:27:56 +0800 Subject: [PATCH 4/8] chore: improvement --- .../draw/src/engines/basic-shapes/cloud.ts | 4 +-- .../draw/src/engines/basic-shapes/cross.ts | 2 +- .../draw/src/engines/basic-shapes/diamond.ts | 4 +-- .../draw/src/engines/basic-shapes/ellipse.ts | 2 +- .../engines/basic-shapes/pentagon-arrow.ts | 2 +- .../draw/src/engines/flowchart/database.ts | 31 +++++++--------- .../draw/src/engines/flowchart/display.ts | 23 +++++------- .../draw/src/engines/flowchart/document.ts | 36 ++++++++----------- .../draw/src/engines/flowchart/hard-disk.ts | 29 ++++++--------- .../src/engines/flowchart/internal-storage.ts | 18 +++------- .../src/engines/flowchart/manual-input.ts | 22 +++++------- .../draw/src/engines/flowchart/manual-loop.ts | 8 ++--- packages/draw/src/engines/flowchart/merge.ts | 18 +++------- .../src/engines/flowchart/multi-document.ts | 23 +++++------- .../src/engines/flowchart/note-curly-left.ts | 28 ++++----------- .../src/engines/flowchart/note-curly-right.ts | 20 ++++------- .../draw/src/engines/flowchart/note-square.ts | 21 +++-------- .../draw/src/engines/flowchart/off-page.ts | 17 +++------ .../engines/flowchart/predefined-process.ts | 16 ++------- .../draw/src/engines/flowchart/preparation.ts | 8 ++--- .../draw/src/engines/flowchart/stored-data.ts | 2 +- .../draw/src/engines/uml/activity-class.ts | 17 ++------- packages/draw/src/engines/uml/actor.ts | 14 +++----- packages/draw/src/engines/uml/template.ts | 18 +--------- 24 files changed, 114 insertions(+), 269 deletions(-) diff --git a/packages/draw/src/engines/basic-shapes/cloud.ts b/packages/draw/src/engines/basic-shapes/cloud.ts index 5baabe832..754a890e9 100644 --- a/packages/draw/src/engines/basic-shapes/cloud.ts +++ b/packages/draw/src/engines/basic-shapes/cloud.ts @@ -10,10 +10,8 @@ import { import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getCustomTextRectangle, getStrokeWidthByElement } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants'; +import { getCustomTextRectangle } from '../../utils'; import { getNearestPointBetweenPointAndArc } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; export function generateCloudPath(rectangle: RectangleClient): { startPoint: Point; arcCommands: SVGArcCommand[] } { const divisionWidth = rectangle.width / 7; diff --git a/packages/draw/src/engines/basic-shapes/cross.ts b/packages/draw/src/engines/basic-shapes/cross.ts index 44d1cbb3c..32ef93542 100644 --- a/packages/draw/src/engines/basic-shapes/cross.ts +++ b/packages/draw/src/engines/basic-shapes/cross.ts @@ -1,7 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getCustomTextRectangle, getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getCrossPoints = (rectangle: RectangleClient): Point[] => { return [ [rectangle.x + rectangle.width / 4, rectangle.y], diff --git a/packages/draw/src/engines/basic-shapes/diamond.ts b/packages/draw/src/engines/basic-shapes/diamond.ts index 9488ff6b3..6b7d29f2c 100644 --- a/packages/draw/src/engines/basic-shapes/diamond.ts +++ b/packages/draw/src/engines/basic-shapes/diamond.ts @@ -1,9 +1,7 @@ import { PlaitBoard, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getCustomTextRectangle, getStrokeWidthByElement, getTextRectangle } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants/geometry'; -import { getTextSize } from '../../utils/text-size'; +import { getCustomTextRectangle } from '../../utils'; export const DiamondEngine: ShapeEngine = createPolygonEngine({ getPolygonPoints: RectangleClient.getEdgeCenterPoints, diff --git a/packages/draw/src/engines/basic-shapes/ellipse.ts b/packages/draw/src/engines/basic-shapes/ellipse.ts index ad48b532a..3bdef38c9 100644 --- a/packages/draw/src/engines/basic-shapes/ellipse.ts +++ b/packages/draw/src/engines/basic-shapes/ellipse.ts @@ -11,7 +11,7 @@ import { } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; -import { getCustomTextRectangle, getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export interface CreateEllipseOptions { draw?: (board: PlaitBoard, rectangle: RectangleClient, options: Options) => SVGGElement; diff --git a/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts b/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts index e24ed1df0..310e6a6ec 100644 --- a/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts +++ b/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts @@ -1,7 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getCustomTextRectangle, getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; import { ShapeDefaultSpace } from '../../constants'; export const getPentagonArrowPoints = (rectangle: RectangleClient): Point[] => { diff --git a/packages/draw/src/engines/flowchart/database.ts b/packages/draw/src/engines/flowchart/database.ts index 3de89bbf5..da46662c1 100644 --- a/packages/draw/src/engines/flowchart/database.ts +++ b/packages/draw/src/engines/flowchart/database.ts @@ -10,25 +10,24 @@ import { isPointInEllipse, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; -import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle, getTextRectangle } from '../../utils'; export const DatabaseEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { const rs = PlaitBoard.getRoughSVG(board); const shape = rs.path( `M${rectangle.x} ${rectangle.y + rectangle.height * 0.15} - A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + - rectangle.height * 0.15} + A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x + rectangle.width} ${ + rectangle.y + rectangle.height * 0.15 + } A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x} ${rectangle.y + rectangle.height * 0.15} V${rectangle.y + rectangle.height - rectangle.height * 0.15} - A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0, ${rectangle.x + rectangle.width} ${rectangle.y + - rectangle.height - - rectangle.height * 0.15} + A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0, ${rectangle.x + rectangle.width} ${ + rectangle.y + rectangle.height - rectangle.height * 0.15 + } V${rectangle.y + rectangle.height * 0.15}`, { ...options, fillStyle: 'solid' } ); @@ -107,15 +106,11 @@ export const DatabaseEngine: ShapeEngine = { getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + elementRectangle.height * 0.3 + (elementRectangle.height - elementRectangle.height * 0.45 - textSize.height) / 2 - }; + const textRectangle = getTextRectangle(board, element); + textRectangle.y = + elementRectangle.y + + elementRectangle.height * 0.3 + + (elementRectangle.height - elementRectangle.height * 0.3 - textRectangle.height) / 2; + return textRectangle; } }; diff --git a/packages/draw/src/engines/flowchart/display.ts b/packages/draw/src/engines/flowchart/display.ts index 78eb73aa0..11239575f 100644 --- a/packages/draw/src/engines/flowchart/display.ts +++ b/packages/draw/src/engines/flowchart/display.ts @@ -11,10 +11,9 @@ import { isPointInPolygon, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getDisplayPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -32,9 +31,9 @@ export const DisplayEngine: ShapeEngine = { const shape = rs.path( `M${rectangle.x + rectangle.width * 0.15} ${rectangle.y} H${rectangle.x + rectangle.width - rectangle.width * 0.1} - A ${rectangle.width * 0.1} ${rectangle.height / 2}, 0, 0, 1,${rectangle.x + - rectangle.width - - rectangle.width * 0.1} ${rectangle.y + rectangle.height} + A ${rectangle.width * 0.1} ${rectangle.height / 2}, 0, 0, 1,${rectangle.x + rectangle.width - rectangle.width * 0.1} ${ + rectangle.y + rectangle.height + } H${rectangle.x + rectangle.width * 0.15} L${rectangle.x} ${rectangle.y + rectangle.height / 2} Z @@ -92,15 +91,9 @@ export const DisplayEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - strokeWidth * 2 - elementRectangle.width * 0.25; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - width: width > 0 ? width : 0, - height: textSize.height, - x: elementRectangle.x + strokeWidth + elementRectangle.width * 0.15, - y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 - }; + const widthRatio = 0.75; + const textRectangle = getCustomTextRectangle(board, element, widthRatio); + textRectangle.x = elementRectangle.x + elementRectangle.width * 0.2; + return textRectangle; } }; diff --git a/packages/draw/src/engines/flowchart/document.ts b/packages/draw/src/engines/flowchart/document.ts index 1f296fb61..52b236c1b 100644 --- a/packages/draw/src/engines/flowchart/document.ts +++ b/packages/draw/src/engines/flowchart/document.ts @@ -7,26 +7,25 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; -import { getUnitVectorByPointAndPoint } from '@plait/common'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getStrokeWidthByElement } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants'; +import { getTextRectangle } from '../../utils'; import { pointsOnBezierCurves } from 'points-on-curve'; +import { getUnitVectorByPointAndPoint } from '@plait/common'; export const DocumentEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { const rs = PlaitBoard.getRoughSVG(board); const shape = rs.path( - `M${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9} V${rectangle.y} H${rectangle.x + - rectangle.width} V${rectangle.y + rectangle.height - rectangle.height / 9} - Q${rectangle.x + rectangle.width - rectangle.width / 4} ${rectangle.y + - rectangle.height - - (rectangle.height / 9) * 3}, ${rectangle.x + rectangle.width / 2} ${rectangle.y + - rectangle.height - - rectangle.height / 9} T${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9} + `M${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9} V${rectangle.y} H${rectangle.x + rectangle.width} V${ + rectangle.y + rectangle.height - rectangle.height / 9 + } + Q${rectangle.x + rectangle.width - rectangle.width / 4} ${rectangle.y + rectangle.height - (rectangle.height / 9) * 3}, ${ + rectangle.x + rectangle.width / 2 + } ${rectangle.y + rectangle.height - rectangle.height / 9} T${rectangle.x} ${ + rectangle.y + rectangle.height - rectangle.height / 9 + } `, { ...options, fillStyle: 'solid' } ); @@ -93,16 +92,9 @@ export const DocumentEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.06 * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06, - y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 - }; + const elementRectangle = RectangleClient.getRectangleByPoints(element.points); + const textRectangle = getTextRectangle(board, element); + textRectangle.y = elementRectangle.y + (elementRectangle.height - (1 / 5) * elementRectangle.height - textRectangle.height) / 2; + return textRectangle; } }; diff --git a/packages/draw/src/engines/flowchart/hard-disk.ts b/packages/draw/src/engines/flowchart/hard-disk.ts index 2237e983b..23d5f0222 100644 --- a/packages/draw/src/engines/flowchart/hard-disk.ts +++ b/packages/draw/src/engines/flowchart/hard-disk.ts @@ -10,27 +10,26 @@ import { isPointInEllipse, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; -import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle, getXTextRectangleOffset } from '../../utils'; export const HardDiskEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { const rs = PlaitBoard.getRoughSVG(board); const shape = rs.path( `M${rectangle.x + rectangle.width - rectangle.width * 0.15} ${rectangle.y} - A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + - rectangle.width - - rectangle.width * 0.15} ${rectangle.y + rectangle.height} + A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + rectangle.width - rectangle.width * 0.15} ${ + rectangle.y + rectangle.height + } A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + rectangle.width - rectangle.width * 0.15} ${ rectangle.y } H${rectangle.x + rectangle.width * 0.15} - A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0, ${rectangle.x + rectangle.width * 0.15} ${rectangle.y + - rectangle.height} + A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0, ${rectangle.x + rectangle.width * 0.15} ${ + rectangle.y + rectangle.height + } H${rectangle.x + rectangle.width - rectangle.width * 0.15}`, { ...options, fillStyle: 'solid' } ); @@ -108,15 +107,9 @@ export const HardDiskEngine: ShapeEngine = { getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - elementRectangle.width * 0.45 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + elementRectangle.width * 0.15 + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 - }; + const textRectangle = getCustomTextRectangle(board, element, 0.55); + const xStart = elementRectangle.x + elementRectangle.width * 0.15; + textRectangle.x = xStart; + return textRectangle; } }; diff --git a/packages/draw/src/engines/flowchart/internal-storage.ts b/packages/draw/src/engines/flowchart/internal-storage.ts index ec1fbd4a5..8f9bd24c3 100644 --- a/packages/draw/src/engines/flowchart/internal-storage.ts +++ b/packages/draw/src/engines/flowchart/internal-storage.ts @@ -6,13 +6,12 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; -import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants/geometry'; export const InternalStorageEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { @@ -47,15 +46,8 @@ export const InternalStorageEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - elementRectangle.width * 0.1 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + elementRectangle.width * 0.1 + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + elementRectangle.height * 0.1 + (elementRectangle.height - elementRectangle.height * 0.1 - textSize.height) / 2 - }; + const textRectangle = getCustomTextRectangle(board, element, 0.9); + textRectangle.x = elementRectangle.x + elementRectangle.width / 10 + ShapeDefaultSpace.rectangleAndText; + return textRectangle; } }; diff --git a/packages/draw/src/engines/flowchart/manual-input.ts b/packages/draw/src/engines/flowchart/manual-input.ts index 952f33b9e..2fce1f791 100644 --- a/packages/draw/src/engines/flowchart/manual-input.ts +++ b/packages/draw/src/engines/flowchart/manual-input.ts @@ -1,10 +1,8 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from '../basic-shapes/polygon'; -import { ShapeDefaultSpace } from '../../constants'; import { getCenterPointsOnPolygon } from '../../utils/polygon'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getManualInputPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -22,16 +20,12 @@ export const ManualInputEngine: ShapeEngine = createPolygonEngine({ return getCenterPointsOnPolygon(cornerPoints); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + elementRectangle.height / 4 + ((elementRectangle.height * 3) / 4 - textSize.height) / 2 - }; + const elementRectangle = RectangleClient.getRectangleByPoints(element.points); + const textRectangle = getCustomTextRectangle(board, element, 1); + textRectangle.y = + elementRectangle.y + + elementRectangle.height / 5 + + (elementRectangle.height - elementRectangle.height / 5 - textRectangle.height) / 2; + return textRectangle; } }); diff --git a/packages/draw/src/engines/flowchart/manual-loop.ts b/packages/draw/src/engines/flowchart/manual-loop.ts index acb127308..4a32d9516 100644 --- a/packages/draw/src/engines/flowchart/manual-loop.ts +++ b/packages/draw/src/engines/flowchart/manual-loop.ts @@ -2,7 +2,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from '../basic-shapes/polygon'; import { getCenterPointsOnPolygon } from '../../utils/polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getManualLoopPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -19,10 +19,6 @@ export const ManualLoopEngine: ShapeEngine = createPolygonEngine({ return getCenterPointsOnPolygon(cornerPoints); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const rectangle = getTextRectangle(board, element); - const width = rectangle.width; - rectangle.width = (rectangle.width * 3) / 4; - rectangle.x += width / 8; - return rectangle; + return getCustomTextRectangle(board, element, 3/4); } }); diff --git a/packages/draw/src/engines/flowchart/merge.ts b/packages/draw/src/engines/flowchart/merge.ts index fbbaaae49..ff699259d 100644 --- a/packages/draw/src/engines/flowchart/merge.ts +++ b/packages/draw/src/engines/flowchart/merge.ts @@ -1,10 +1,8 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from '../basic-shapes/polygon'; -import { getStrokeWidthByElement } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants'; import { getCenterPointsOnPolygon } from '../../utils/polygon'; +import { getCustomTextRectangle } from '../../utils'; export const getMergePoints = (rectangle: RectangleClient): Point[] => { return [ @@ -23,16 +21,8 @@ export const MergeEngine: ShapeEngine = createPolygonEngine({ }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const width = (originWidth * 2) / 3; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6, - y: elementRectangle.y + ((elementRectangle.height * 2) / 3 - textSize.height) / 2 - }; + const textRectangle = getCustomTextRectangle(board, element, 2 / 3); + textRectangle.y = elementRectangle.y + (elementRectangle.height * (1 / 2) - textRectangle.height) / 2; + return textRectangle; } }); diff --git a/packages/draw/src/engines/flowchart/multi-document.ts b/packages/draw/src/engines/flowchart/multi-document.ts index 575103607..a931c067a 100644 --- a/packages/draw/src/engines/flowchart/multi-document.ts +++ b/packages/draw/src/engines/flowchart/multi-document.ts @@ -9,12 +9,11 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { getDirectionByPointOfRectangle, getDirectionFactor, getUnitVectorByPointAndPoint } from '@plait/common'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; -import { getStrokeWidthByElement } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants'; +import { RectangleEngine } from '../basic-shapes/rectangle'; +import { getCustomTextRectangle } from '../../utils'; import { pointsOnBezierCurves } from 'points-on-curve'; import { getCrossingPointBetweenPointAndPolygon } from '../../utils/polygon'; @@ -161,16 +160,12 @@ export const MultiDocumentEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.06 * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width - 10 : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06, - y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 - }; + const elementRectangle = RectangleClient.getRectangleByPoints(element.points); + const offset = 16; + const textRectangle = getCustomTextRectangle(board, element, (elementRectangle.width - offset) / elementRectangle.width); + textRectangle.x = textRectangle.x - offset / 4; + textRectangle.y = + elementRectangle.y + (elementRectangle.height - elementRectangle.height / 5 - textRectangle.height) / 2 + offset / 4; + return textRectangle; } }; diff --git a/packages/draw/src/engines/flowchart/note-curly-left.ts b/packages/draw/src/engines/flowchart/note-curly-left.ts index 4d0427173..3d782301a 100644 --- a/packages/draw/src/engines/flowchart/note-curly-left.ts +++ b/packages/draw/src/engines/flowchart/note-curly-left.ts @@ -1,18 +1,9 @@ -import { - PlaitBoard, - Point, - PointOfRectangle, - RectangleClient, - distanceBetweenPointAndPoint, - setStrokeLinecap -} from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; +import { PlaitBoard, Point, PointOfRectangle, RectangleClient, distanceBetweenPointAndPoint, setStrokeLinecap } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; -import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; import { pointsOnBezierCurves } from 'points-on-curve'; interface NoteCurlyLeftPathData { @@ -114,15 +105,10 @@ export const NoteCurlyLeftEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - elementRectangle.width * 0.09 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 - }; + const textRectangle = getCustomTextRectangle(board, element, 0.88); + const xStart = elementRectangle.x; + const xEnd = elementRectangle.x + elementRectangle.width - elementRectangle.width * 0.12; + textRectangle.x = xStart + (xEnd - xStart - textRectangle.width) / 2; + return textRectangle; } }; diff --git a/packages/draw/src/engines/flowchart/note-curly-right.ts b/packages/draw/src/engines/flowchart/note-curly-right.ts index f0e585fc5..45bb73863 100644 --- a/packages/draw/src/engines/flowchart/note-curly-right.ts +++ b/packages/draw/src/engines/flowchart/note-curly-right.ts @@ -1,12 +1,11 @@ import { PlaitBoard, Point, PointOfRectangle, RectangleClient, distanceBetweenPointAndPoint, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; -import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; import { pointsOnBezierCurves } from 'points-on-curve'; +import { ShapeDefaultSpace } from '../../constants'; interface NoteCurlyRightPathData { startPoint: Point; @@ -109,15 +108,10 @@ export const NoteCurlyRightEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - elementRectangle.width * 0.09 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + elementRectangle.width * 0.09 + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 - }; + const textRectangle = getCustomTextRectangle(board, element, 0.88); + const xStart = elementRectangle.x + elementRectangle.width * 0.12; + const xEnd = elementRectangle.x + elementRectangle.width; + textRectangle.x = xStart + (xEnd - xStart - textRectangle.width) / 2; + return textRectangle; } }; diff --git a/packages/draw/src/engines/flowchart/note-square.ts b/packages/draw/src/engines/flowchart/note-square.ts index 9e2a3baba..ecf5518b1 100644 --- a/packages/draw/src/engines/flowchart/note-square.ts +++ b/packages/draw/src/engines/flowchart/note-square.ts @@ -6,20 +6,19 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getStrokeWidthByElement } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants'; +import { getTextRectangle } from '../../utils'; export const NoteSquareEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { const rs = PlaitBoard.getRoughSVG(board); const shape = rs.path( - `M${rectangle.x + rectangle.width * 0.075} ${rectangle.y + rectangle.height} H${rectangle.x} V${rectangle.y} H${rectangle.x + - rectangle.width * 0.075} + `M${rectangle.x + rectangle.width * 0.075} ${rectangle.y + rectangle.height} H${rectangle.x} V${rectangle.y} H${ + rectangle.x + rectangle.width * 0.075 + } `, { ...options, fillStyle: 'solid', fill: 'transparent' } ); @@ -45,16 +44,6 @@ export const NoteSquareEngine: ShapeEngine = { return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 - }; + return getTextRectangle(board, element); } }; diff --git a/packages/draw/src/engines/flowchart/off-page.ts b/packages/draw/src/engines/flowchart/off-page.ts index 85886bc76..092f130fe 100644 --- a/packages/draw/src/engines/flowchart/off-page.ts +++ b/packages/draw/src/engines/flowchart/off-page.ts @@ -1,9 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from '../basic-shapes/polygon'; -import { ShapeDefaultSpace } from '../../constants'; -import { getStrokeWidthByElement } from '../../utils'; +import { getCustomTextRectangle, getTextRectangle } from '../../utils'; export const getOffPagePoints = (rectangle: RectangleClient): Point[] => { return [ @@ -22,15 +20,8 @@ export const OffPageEngine: ShapeEngine = createPolygonEngine({ }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - width: width > 0 ? width : 0, - height: textSize.height, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + (elementRectangle.height - elementRectangle.height / 2 - textSize.height) / 2 - }; + const textRectangle = getTextRectangle(board, element); + textRectangle.y = elementRectangle.y + (elementRectangle.height * 0.5 - textRectangle.height) / 2; + return textRectangle; } }); diff --git a/packages/draw/src/engines/flowchart/predefined-process.ts b/packages/draw/src/engines/flowchart/predefined-process.ts index d6bccf025..f013e46e9 100644 --- a/packages/draw/src/engines/flowchart/predefined-process.ts +++ b/packages/draw/src/engines/flowchart/predefined-process.ts @@ -6,13 +6,11 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getStrokeWidthByElement } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants'; +import { getCustomTextRectangle } from '../../utils'; export const PredefinedProcessEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { @@ -50,16 +48,6 @@ export const PredefinedProcessEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.06 * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06, - y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 - }; + return getCustomTextRectangle(board, element, 0.88); } }; diff --git a/packages/draw/src/engines/flowchart/preparation.ts b/packages/draw/src/engines/flowchart/preparation.ts index 83cf9ab72..19dedd429 100644 --- a/packages/draw/src/engines/flowchart/preparation.ts +++ b/packages/draw/src/engines/flowchart/preparation.ts @@ -1,7 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from '../basic-shapes/polygon'; -import { getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const getPreparationPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -20,10 +20,6 @@ export const PreparationEngine: ShapeEngine = createPolygonEngine({ return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle(board: PlaitBoard, element: PlaitGeometry) { - const rectangle = getTextRectangle(board, element); - const width = rectangle.width; - rectangle.width = (rectangle.width * 2) / 3; - rectangle.x += width / 6; - return rectangle; + return getCustomTextRectangle(board, element, 2/3); } }); diff --git a/packages/draw/src/engines/flowchart/stored-data.ts b/packages/draw/src/engines/flowchart/stored-data.ts index 8132b0338..af82cd836 100644 --- a/packages/draw/src/engines/flowchart/stored-data.ts +++ b/packages/draw/src/engines/flowchart/stored-data.ts @@ -14,7 +14,7 @@ import { import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getCustomTextRectangle, getTextRectangle } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const StoredDataEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { diff --git a/packages/draw/src/engines/uml/activity-class.ts b/packages/draw/src/engines/uml/activity-class.ts index d595b5f36..79a76956a 100644 --- a/packages/draw/src/engines/uml/activity-class.ts +++ b/packages/draw/src/engines/uml/activity-class.ts @@ -6,13 +6,11 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getStrokeWidthByElement } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants'; +import { getCustomTextRectangle } from '../../utils'; export const ActiveClassEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { @@ -50,17 +48,6 @@ export const ActiveClassEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = - elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.125 * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.125, - y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 - }; + return getCustomTextRectangle(board, element, 0.75); } }; diff --git a/packages/draw/src/engines/uml/actor.ts b/packages/draw/src/engines/uml/actor.ts index b2b766a8d..c7d65fe9c 100644 --- a/packages/draw/src/engines/uml/actor.ts +++ b/packages/draw/src/engines/uml/actor.ts @@ -11,10 +11,10 @@ import { getVectorFromPointAndSlope, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { getUnitVectorByPointAndPoint, rotateVector } from '@plait/common'; +import { getCustomTextRectangle } from '../../utils'; interface ActorPathData { headArcCommand: SVGArcCommand; @@ -148,14 +148,8 @@ export const ActorEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const width = elementRectangle.width + 40; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x - 20, - y: elementRectangle.y + elementRectangle.height + 4 - }; + const textRectangle = getCustomTextRectangle(board, element, (elementRectangle.width + 40) / elementRectangle.width); + textRectangle.y = elementRectangle.y + elementRectangle.height + 16; + return textRectangle; } }; diff --git a/packages/draw/src/engines/uml/template.ts b/packages/draw/src/engines/uml/template.ts index bdbb5d177..45e0b2c34 100644 --- a/packages/draw/src/engines/uml/template.ts +++ b/packages/draw/src/engines/uml/template.ts @@ -6,13 +6,10 @@ import { drawRoundRectangle, getNearestPointBetweenPointAndSegments } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; -import { PlaitGeometry, ShapeEngine } from '../../interfaces'; +import { ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getStrokeWidthByElement } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants'; export const TemplateEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { @@ -51,18 +48,5 @@ export const TemplateEngine: ShapeEngine = { }, getConnectorPoints(rectangle: RectangleClient) { return RectangleClient.getEdgeCenterPoints(rectangle); - }, - getTextRectangle(board: PlaitBoard, element: PlaitGeometry) { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const strokeWidth = getStrokeWidthByElement(element); - const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; - const text = element.text!; - const textSize = getTextSize(board, text, width); - return { - height: textSize.height, - width: width > 0 ? width : 0, - x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, - y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 - }; } }; From cf46a5639856fe2ff9301af5dcaaca74e68786d8 Mon Sep 17 00:00:00 2001 From: pubuzhixing8 Date: Mon, 29 Sep 2025 23:50:58 +0800 Subject: [PATCH 5/8] chore: fix error --- packages/draw/src/engines/flowchart/hard-disk.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/draw/src/engines/flowchart/hard-disk.ts b/packages/draw/src/engines/flowchart/hard-disk.ts index 23d5f0222..29f7fe00c 100644 --- a/packages/draw/src/engines/flowchart/hard-disk.ts +++ b/packages/draw/src/engines/flowchart/hard-disk.ts @@ -13,7 +13,7 @@ import { import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getCustomTextRectangle, getXTextRectangleOffset } from '../../utils'; +import { getCustomTextRectangle } from '../../utils'; export const HardDiskEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { From b7dd5cbc68235e28aafebf68558b61f1a626f837 Mon Sep 17 00:00:00 2001 From: pubuzhixing8 Date: Tue, 30 Sep 2025 15:15:37 +0800 Subject: [PATCH 6/8] chore: xxx --- .../draw/src/engines/basic-shapes/cloud.ts | 4 ++- .../draw/src/engines/basic-shapes/cross.ts | 2 +- .../draw/src/engines/basic-shapes/diamond.ts | 4 ++- .../draw/src/engines/basic-shapes/ellipse.ts | 2 +- .../engines/basic-shapes/pentagon-arrow.ts | 2 +- .../draw/src/engines/flowchart/database.ts | 23 ++++++--------- .../draw/src/engines/flowchart/display.ts | 15 ++++------ .../draw/src/engines/flowchart/document.ts | 26 ++++++++--------- .../draw/src/engines/flowchart/hard-disk.ts | 29 ++++++++++++------- .../src/engines/flowchart/internal-storage.ts | 18 ++++++++---- .../src/engines/flowchart/manual-input.ts | 22 +++++++++----- .../draw/src/engines/flowchart/manual-loop.ts | 8 +++-- packages/draw/src/engines/flowchart/merge.ts | 18 +++++++++--- .../src/engines/flowchart/multi-document.ts | 13 +++------ .../src/engines/flowchart/note-curly-left.ts | 20 ++++++++----- .../src/engines/flowchart/note-curly-right.ts | 12 +++----- .../draw/src/engines/flowchart/note-square.ts | 11 +++---- .../draw/src/engines/flowchart/off-page.ts | 17 ++++++++--- .../engines/flowchart/predefined-process.ts | 16 ++++++++-- .../draw/src/engines/flowchart/preparation.ts | 8 +++-- .../draw/src/engines/flowchart/stored-data.ts | 2 +- .../draw/src/engines/uml/activity-class.ts | 17 +++++++++-- packages/draw/src/engines/uml/actor.ts | 14 ++++++--- packages/draw/src/engines/uml/template.ts | 18 +++++++++++- 24 files changed, 203 insertions(+), 118 deletions(-) diff --git a/packages/draw/src/engines/basic-shapes/cloud.ts b/packages/draw/src/engines/basic-shapes/cloud.ts index 754a890e9..5baabe832 100644 --- a/packages/draw/src/engines/basic-shapes/cloud.ts +++ b/packages/draw/src/engines/basic-shapes/cloud.ts @@ -10,8 +10,10 @@ import { import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getStrokeWidthByElement } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; import { getNearestPointBetweenPointAndArc } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; export function generateCloudPath(rectangle: RectangleClient): { startPoint: Point; arcCommands: SVGArcCommand[] } { const divisionWidth = rectangle.width / 7; diff --git a/packages/draw/src/engines/basic-shapes/cross.ts b/packages/draw/src/engines/basic-shapes/cross.ts index 32ef93542..44d1cbb3c 100644 --- a/packages/draw/src/engines/basic-shapes/cross.ts +++ b/packages/draw/src/engines/basic-shapes/cross.ts @@ -1,7 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getTextRectangle } from '../../utils'; export const getCrossPoints = (rectangle: RectangleClient): Point[] => { return [ [rectangle.x + rectangle.width / 4, rectangle.y], diff --git a/packages/draw/src/engines/basic-shapes/diamond.ts b/packages/draw/src/engines/basic-shapes/diamond.ts index 6b7d29f2c..9488ff6b3 100644 --- a/packages/draw/src/engines/basic-shapes/diamond.ts +++ b/packages/draw/src/engines/basic-shapes/diamond.ts @@ -1,7 +1,9 @@ import { PlaitBoard, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getStrokeWidthByElement, getTextRectangle } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants/geometry'; +import { getTextSize } from '../../utils/text-size'; export const DiamondEngine: ShapeEngine = createPolygonEngine({ getPolygonPoints: RectangleClient.getEdgeCenterPoints, diff --git a/packages/draw/src/engines/basic-shapes/ellipse.ts b/packages/draw/src/engines/basic-shapes/ellipse.ts index 3bdef38c9..ad48b532a 100644 --- a/packages/draw/src/engines/basic-shapes/ellipse.ts +++ b/packages/draw/src/engines/basic-shapes/ellipse.ts @@ -11,7 +11,7 @@ import { } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; -import { getCustomTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getTextRectangle } from '../../utils'; export interface CreateEllipseOptions { draw?: (board: PlaitBoard, rectangle: RectangleClient, options: Options) => SVGGElement; diff --git a/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts b/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts index 310e6a6ec..e24ed1df0 100644 --- a/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts +++ b/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts @@ -1,7 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from './polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getTextRectangle } from '../../utils'; import { ShapeDefaultSpace } from '../../constants'; export const getPentagonArrowPoints = (rectangle: RectangleClient): Point[] => { diff --git a/packages/draw/src/engines/flowchart/database.ts b/packages/draw/src/engines/flowchart/database.ts index da46662c1..e98117c7b 100644 --- a/packages/draw/src/engines/flowchart/database.ts +++ b/packages/draw/src/engines/flowchart/database.ts @@ -10,24 +10,25 @@ import { isPointInEllipse, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; +import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getCustomTextRectangle, getTextRectangle } from '../../utils'; +import { getStrokeWidthByElement, getCustomTextRectangle } from '../../utils'; export const DatabaseEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { const rs = PlaitBoard.getRoughSVG(board); const shape = rs.path( `M${rectangle.x} ${rectangle.y + rectangle.height * 0.15} - A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x + rectangle.width} ${ - rectangle.y + rectangle.height * 0.15 - } + A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + + rectangle.height * 0.15} A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x} ${rectangle.y + rectangle.height * 0.15} V${rectangle.y + rectangle.height - rectangle.height * 0.15} - A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0, ${rectangle.x + rectangle.width} ${ - rectangle.y + rectangle.height - rectangle.height * 0.15 - } + A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0, ${rectangle.x + rectangle.width} ${rectangle.y + + rectangle.height - + rectangle.height * 0.15} V${rectangle.y + rectangle.height * 0.15}`, { ...options, fillStyle: 'solid' } ); @@ -105,12 +106,6 @@ export const DatabaseEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const textRectangle = getTextRectangle(board, element); - textRectangle.y = - elementRectangle.y + - elementRectangle.height * 0.3 + - (elementRectangle.height - elementRectangle.height * 0.3 - textRectangle.height) / 2; - return textRectangle; + return getCustomTextRectangle(board, element, 0.7); } }; diff --git a/packages/draw/src/engines/flowchart/display.ts b/packages/draw/src/engines/flowchart/display.ts index 11239575f..2a35b0f2b 100644 --- a/packages/draw/src/engines/flowchart/display.ts +++ b/packages/draw/src/engines/flowchart/display.ts @@ -11,9 +11,10 @@ import { isPointInPolygon, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; -import { getCustomTextRectangle } from '../../utils'; +import { getStrokeWidthByElement, getCustomTextRectangle } from '../../utils'; export const getDisplayPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -31,9 +32,9 @@ export const DisplayEngine: ShapeEngine = { const shape = rs.path( `M${rectangle.x + rectangle.width * 0.15} ${rectangle.y} H${rectangle.x + rectangle.width - rectangle.width * 0.1} - A ${rectangle.width * 0.1} ${rectangle.height / 2}, 0, 0, 1,${rectangle.x + rectangle.width - rectangle.width * 0.1} ${ - rectangle.y + rectangle.height - } + A ${rectangle.width * 0.1} ${rectangle.height / 2}, 0, 0, 1,${rectangle.x + + rectangle.width - + rectangle.width * 0.1} ${rectangle.y + rectangle.height} H${rectangle.x + rectangle.width * 0.15} L${rectangle.x} ${rectangle.y + rectangle.height / 2} Z @@ -90,10 +91,6 @@ export const DisplayEngine: ShapeEngine = { return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const widthRatio = 0.75; - const textRectangle = getCustomTextRectangle(board, element, widthRatio); - textRectangle.x = elementRectangle.x + elementRectangle.width * 0.2; - return textRectangle; + return getCustomTextRectangle(board, element, 0.88); } }; diff --git a/packages/draw/src/engines/flowchart/document.ts b/packages/draw/src/engines/flowchart/document.ts index 52b236c1b..bff6e0b1b 100644 --- a/packages/draw/src/engines/flowchart/document.ts +++ b/packages/draw/src/engines/flowchart/document.ts @@ -7,25 +7,26 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; +import { getUnitVectorByPointAndPoint } from '@plait/common'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getTextRectangle } from '../../utils'; +import { getStrokeWidthByElement, getCustomTextRectangle } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; import { pointsOnBezierCurves } from 'points-on-curve'; -import { getUnitVectorByPointAndPoint } from '@plait/common'; export const DocumentEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { const rs = PlaitBoard.getRoughSVG(board); const shape = rs.path( - `M${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9} V${rectangle.y} H${rectangle.x + rectangle.width} V${ - rectangle.y + rectangle.height - rectangle.height / 9 - } - Q${rectangle.x + rectangle.width - rectangle.width / 4} ${rectangle.y + rectangle.height - (rectangle.height / 9) * 3}, ${ - rectangle.x + rectangle.width / 2 - } ${rectangle.y + rectangle.height - rectangle.height / 9} T${rectangle.x} ${ - rectangle.y + rectangle.height - rectangle.height / 9 - } + `M${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9} V${rectangle.y} H${rectangle.x + + rectangle.width} V${rectangle.y + rectangle.height - rectangle.height / 9} + Q${rectangle.x + rectangle.width - rectangle.width / 4} ${rectangle.y + + rectangle.height - + (rectangle.height / 9) * 3}, ${rectangle.x + rectangle.width / 2} ${rectangle.y + + rectangle.height - + rectangle.height / 9} T${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9} `, { ...options, fillStyle: 'solid' } ); @@ -92,9 +93,6 @@ export const DocumentEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points); - const textRectangle = getTextRectangle(board, element); - textRectangle.y = elementRectangle.y + (elementRectangle.height - (1 / 5) * elementRectangle.height - textRectangle.height) / 2; - return textRectangle; + return getCustomTextRectangle(board, element, 0.88); } }; diff --git a/packages/draw/src/engines/flowchart/hard-disk.ts b/packages/draw/src/engines/flowchart/hard-disk.ts index 29f7fe00c..2237e983b 100644 --- a/packages/draw/src/engines/flowchart/hard-disk.ts +++ b/packages/draw/src/engines/flowchart/hard-disk.ts @@ -10,26 +10,27 @@ import { isPointInEllipse, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; +import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getCustomTextRectangle } from '../../utils'; +import { getStrokeWidthByElement } from '../../utils'; export const HardDiskEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { const rs = PlaitBoard.getRoughSVG(board); const shape = rs.path( `M${rectangle.x + rectangle.width - rectangle.width * 0.15} ${rectangle.y} - A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + rectangle.width - rectangle.width * 0.15} ${ - rectangle.y + rectangle.height - } + A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + + rectangle.width - + rectangle.width * 0.15} ${rectangle.y + rectangle.height} A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + rectangle.width - rectangle.width * 0.15} ${ rectangle.y } H${rectangle.x + rectangle.width * 0.15} - A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0, ${rectangle.x + rectangle.width * 0.15} ${ - rectangle.y + rectangle.height - } + A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0, ${rectangle.x + rectangle.width * 0.15} ${rectangle.y + + rectangle.height} H${rectangle.x + rectangle.width - rectangle.width * 0.15}`, { ...options, fillStyle: 'solid' } ); @@ -107,9 +108,15 @@ export const HardDiskEngine: ShapeEngine = { getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const textRectangle = getCustomTextRectangle(board, element, 0.55); - const xStart = elementRectangle.x + elementRectangle.width * 0.15; - textRectangle.x = xStart; - return textRectangle; + const strokeWidth = getStrokeWidthByElement(element); + const width = elementRectangle.width - elementRectangle.width * 0.45 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; + const text = element.text!; + const textSize = getTextSize(board, text, width); + return { + height: textSize.height, + width: width > 0 ? width : 0, + x: elementRectangle.x + elementRectangle.width * 0.15 + ShapeDefaultSpace.rectangleAndText + strokeWidth, + y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 + }; } }; diff --git a/packages/draw/src/engines/flowchart/internal-storage.ts b/packages/draw/src/engines/flowchart/internal-storage.ts index 8f9bd24c3..ec1fbd4a5 100644 --- a/packages/draw/src/engines/flowchart/internal-storage.ts +++ b/packages/draw/src/engines/flowchart/internal-storage.ts @@ -6,12 +6,13 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; +import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getCustomTextRectangle } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants/geometry'; +import { getStrokeWidthByElement } from '../../utils'; export const InternalStorageEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { @@ -46,8 +47,15 @@ export const InternalStorageEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const textRectangle = getCustomTextRectangle(board, element, 0.9); - textRectangle.x = elementRectangle.x + elementRectangle.width / 10 + ShapeDefaultSpace.rectangleAndText; - return textRectangle; + const strokeWidth = getStrokeWidthByElement(element); + const width = elementRectangle.width - elementRectangle.width * 0.1 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; + const text = element.text!; + const textSize = getTextSize(board, text, width); + return { + height: textSize.height, + width: width > 0 ? width : 0, + x: elementRectangle.x + elementRectangle.width * 0.1 + ShapeDefaultSpace.rectangleAndText + strokeWidth, + y: elementRectangle.y + elementRectangle.height * 0.1 + (elementRectangle.height - elementRectangle.height * 0.1 - textSize.height) / 2 + }; } }; diff --git a/packages/draw/src/engines/flowchart/manual-input.ts b/packages/draw/src/engines/flowchart/manual-input.ts index 2fce1f791..952f33b9e 100644 --- a/packages/draw/src/engines/flowchart/manual-input.ts +++ b/packages/draw/src/engines/flowchart/manual-input.ts @@ -1,8 +1,10 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from '../basic-shapes/polygon'; +import { ShapeDefaultSpace } from '../../constants'; import { getCenterPointsOnPolygon } from '../../utils/polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getStrokeWidthByElement } from '../../utils'; export const getManualInputPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -20,12 +22,16 @@ export const ManualInputEngine: ShapeEngine = createPolygonEngine({ return getCenterPointsOnPolygon(cornerPoints); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points); - const textRectangle = getCustomTextRectangle(board, element, 1); - textRectangle.y = - elementRectangle.y + - elementRectangle.height / 5 + - (elementRectangle.height - elementRectangle.height / 5 - textRectangle.height) / 2; - return textRectangle; + const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); + const strokeWidth = getStrokeWidthByElement(element); + const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; + const text = element.text!; + const textSize = getTextSize(board, text, width); + return { + height: textSize.height, + width: width > 0 ? width : 0, + x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, + y: elementRectangle.y + elementRectangle.height / 4 + ((elementRectangle.height * 3) / 4 - textSize.height) / 2 + }; } }); diff --git a/packages/draw/src/engines/flowchart/manual-loop.ts b/packages/draw/src/engines/flowchart/manual-loop.ts index 4a32d9516..acb127308 100644 --- a/packages/draw/src/engines/flowchart/manual-loop.ts +++ b/packages/draw/src/engines/flowchart/manual-loop.ts @@ -2,7 +2,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from '../basic-shapes/polygon'; import { getCenterPointsOnPolygon } from '../../utils/polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getTextRectangle } from '../../utils'; export const getManualLoopPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -19,6 +19,10 @@ export const ManualLoopEngine: ShapeEngine = createPolygonEngine({ return getCenterPointsOnPolygon(cornerPoints); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - return getCustomTextRectangle(board, element, 3/4); + const rectangle = getTextRectangle(board, element); + const width = rectangle.width; + rectangle.width = (rectangle.width * 3) / 4; + rectangle.x += width / 8; + return rectangle; } }); diff --git a/packages/draw/src/engines/flowchart/merge.ts b/packages/draw/src/engines/flowchart/merge.ts index ff699259d..fbbaaae49 100644 --- a/packages/draw/src/engines/flowchart/merge.ts +++ b/packages/draw/src/engines/flowchart/merge.ts @@ -1,8 +1,10 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from '../basic-shapes/polygon'; +import { getStrokeWidthByElement } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; import { getCenterPointsOnPolygon } from '../../utils/polygon'; -import { getCustomTextRectangle } from '../../utils'; export const getMergePoints = (rectangle: RectangleClient): Point[] => { return [ @@ -21,8 +23,16 @@ export const MergeEngine: ShapeEngine = createPolygonEngine({ }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const textRectangle = getCustomTextRectangle(board, element, 2 / 3); - textRectangle.y = elementRectangle.y + (elementRectangle.height * (1 / 2) - textRectangle.height) / 2; - return textRectangle; + const strokeWidth = getStrokeWidthByElement(element); + const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; + const width = (originWidth * 2) / 3; + const text = element.text!; + const textSize = getTextSize(board, text, width); + return { + height: textSize.height, + width: width > 0 ? width : 0, + x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6, + y: elementRectangle.y + ((elementRectangle.height * 2) / 3 - textSize.height) / 2 + }; } }); diff --git a/packages/draw/src/engines/flowchart/multi-document.ts b/packages/draw/src/engines/flowchart/multi-document.ts index a931c067a..a88c74923 100644 --- a/packages/draw/src/engines/flowchart/multi-document.ts +++ b/packages/draw/src/engines/flowchart/multi-document.ts @@ -9,11 +9,12 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { getDirectionByPointOfRectangle, getDirectionFactor, getUnitVectorByPointAndPoint } from '@plait/common'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; -import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getCustomTextRectangle } from '../../utils'; +import { getStrokeWidthByElement, getCustomTextRectangle } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; import { pointsOnBezierCurves } from 'points-on-curve'; import { getCrossingPointBetweenPointAndPolygon } from '../../utils/polygon'; @@ -160,12 +161,6 @@ export const MultiDocumentEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points); - const offset = 16; - const textRectangle = getCustomTextRectangle(board, element, (elementRectangle.width - offset) / elementRectangle.width); - textRectangle.x = textRectangle.x - offset / 4; - textRectangle.y = - elementRectangle.y + (elementRectangle.height - elementRectangle.height / 5 - textRectangle.height) / 2 + offset / 4; - return textRectangle; + return getCustomTextRectangle(board, element, 0.88); } }; diff --git a/packages/draw/src/engines/flowchart/note-curly-left.ts b/packages/draw/src/engines/flowchart/note-curly-left.ts index 3d782301a..f853d029f 100644 --- a/packages/draw/src/engines/flowchart/note-curly-left.ts +++ b/packages/draw/src/engines/flowchart/note-curly-left.ts @@ -1,9 +1,18 @@ -import { PlaitBoard, Point, PointOfRectangle, RectangleClient, distanceBetweenPointAndPoint, setStrokeLinecap } from '@plait/core'; +import { + PlaitBoard, + Point, + PointOfRectangle, + RectangleClient, + distanceBetweenPointAndPoint, + setStrokeLinecap +} from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; +import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getStrokeWidthByElement, getCustomTextRectangle } from '../../utils'; import { pointsOnBezierCurves } from 'points-on-curve'; interface NoteCurlyLeftPathData { @@ -104,11 +113,6 @@ export const NoteCurlyLeftEngine: ShapeEngine = { return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const textRectangle = getCustomTextRectangle(board, element, 0.88); - const xStart = elementRectangle.x; - const xEnd = elementRectangle.x + elementRectangle.width - elementRectangle.width * 0.12; - textRectangle.x = xStart + (xEnd - xStart - textRectangle.width) / 2; - return textRectangle; + return getCustomTextRectangle(board, element, 0.88); } }; diff --git a/packages/draw/src/engines/flowchart/note-curly-right.ts b/packages/draw/src/engines/flowchart/note-curly-right.ts index 45bb73863..ce039f47f 100644 --- a/packages/draw/src/engines/flowchart/note-curly-right.ts +++ b/packages/draw/src/engines/flowchart/note-curly-right.ts @@ -1,11 +1,12 @@ import { PlaitBoard, Point, PointOfRectangle, RectangleClient, distanceBetweenPointAndPoint, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; +import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getStrokeWidthByElement, getCustomTextRectangle } from '../../utils'; import { pointsOnBezierCurves } from 'points-on-curve'; -import { ShapeDefaultSpace } from '../../constants'; interface NoteCurlyRightPathData { startPoint: Point; @@ -107,11 +108,6 @@ export const NoteCurlyRightEngine: ShapeEngine = { return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const textRectangle = getCustomTextRectangle(board, element, 0.88); - const xStart = elementRectangle.x + elementRectangle.width * 0.12; - const xEnd = elementRectangle.x + elementRectangle.width; - textRectangle.x = xStart + (xEnd - xStart - textRectangle.width) / 2; - return textRectangle; + return getCustomTextRectangle(board, element, 0.88); } }; diff --git a/packages/draw/src/engines/flowchart/note-square.ts b/packages/draw/src/engines/flowchart/note-square.ts index ecf5518b1..e289dbca1 100644 --- a/packages/draw/src/engines/flowchart/note-square.ts +++ b/packages/draw/src/engines/flowchart/note-square.ts @@ -6,19 +6,20 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getTextRectangle } from '../../utils'; +import { getStrokeWidthByElement, getCustomTextRectangle } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; export const NoteSquareEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { const rs = PlaitBoard.getRoughSVG(board); const shape = rs.path( - `M${rectangle.x + rectangle.width * 0.075} ${rectangle.y + rectangle.height} H${rectangle.x} V${rectangle.y} H${ - rectangle.x + rectangle.width * 0.075 - } + `M${rectangle.x + rectangle.width * 0.075} ${rectangle.y + rectangle.height} H${rectangle.x} V${rectangle.y} H${rectangle.x + + rectangle.width * 0.075} `, { ...options, fillStyle: 'solid', fill: 'transparent' } ); @@ -44,6 +45,6 @@ export const NoteSquareEngine: ShapeEngine = { return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - return getTextRectangle(board, element); + return getCustomTextRectangle(board, element, 0.88); } }; diff --git a/packages/draw/src/engines/flowchart/off-page.ts b/packages/draw/src/engines/flowchart/off-page.ts index 092f130fe..85886bc76 100644 --- a/packages/draw/src/engines/flowchart/off-page.ts +++ b/packages/draw/src/engines/flowchart/off-page.ts @@ -1,7 +1,9 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from '../basic-shapes/polygon'; -import { getCustomTextRectangle, getTextRectangle } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; +import { getStrokeWidthByElement } from '../../utils'; export const getOffPagePoints = (rectangle: RectangleClient): Point[] => { return [ @@ -20,8 +22,15 @@ export const OffPageEngine: ShapeEngine = createPolygonEngine({ }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const textRectangle = getTextRectangle(board, element); - textRectangle.y = elementRectangle.y + (elementRectangle.height * 0.5 - textRectangle.height) / 2; - return textRectangle; + const strokeWidth = getStrokeWidthByElement(element); + const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; + const text = element.text!; + const textSize = getTextSize(board, text, width); + return { + width: width > 0 ? width : 0, + height: textSize.height, + x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, + y: elementRectangle.y + (elementRectangle.height - elementRectangle.height / 2 - textSize.height) / 2 + }; } }); diff --git a/packages/draw/src/engines/flowchart/predefined-process.ts b/packages/draw/src/engines/flowchart/predefined-process.ts index f013e46e9..d6bccf025 100644 --- a/packages/draw/src/engines/flowchart/predefined-process.ts +++ b/packages/draw/src/engines/flowchart/predefined-process.ts @@ -6,11 +6,13 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getStrokeWidthByElement } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; export const PredefinedProcessEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { @@ -48,6 +50,16 @@ export const PredefinedProcessEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - return getCustomTextRectangle(board, element, 0.88); + const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); + const strokeWidth = getStrokeWidthByElement(element); + const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.06 * 2; + const text = element.text!; + const textSize = getTextSize(board, text, width); + return { + height: textSize.height, + width: width > 0 ? width : 0, + x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06, + y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 + }; } }; diff --git a/packages/draw/src/engines/flowchart/preparation.ts b/packages/draw/src/engines/flowchart/preparation.ts index 19dedd429..83cf9ab72 100644 --- a/packages/draw/src/engines/flowchart/preparation.ts +++ b/packages/draw/src/engines/flowchart/preparation.ts @@ -1,7 +1,7 @@ import { PlaitBoard, Point, RectangleClient } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { createPolygonEngine } from '../basic-shapes/polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getTextRectangle } from '../../utils'; export const getPreparationPoints = (rectangle: RectangleClient): Point[] => { return [ @@ -20,6 +20,10 @@ export const PreparationEngine: ShapeEngine = createPolygonEngine({ return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle(board: PlaitBoard, element: PlaitGeometry) { - return getCustomTextRectangle(board, element, 2/3); + const rectangle = getTextRectangle(board, element); + const width = rectangle.width; + rectangle.width = (rectangle.width * 2) / 3; + rectangle.x += width / 6; + return rectangle; } }); diff --git a/packages/draw/src/engines/flowchart/stored-data.ts b/packages/draw/src/engines/flowchart/stored-data.ts index af82cd836..8132b0338 100644 --- a/packages/draw/src/engines/flowchart/stored-data.ts +++ b/packages/draw/src/engines/flowchart/stored-data.ts @@ -14,7 +14,7 @@ import { import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; -import { getCustomTextRectangle } from '../../utils'; +import { getCustomTextRectangle, getTextRectangle } from '../../utils'; export const StoredDataEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { diff --git a/packages/draw/src/engines/uml/activity-class.ts b/packages/draw/src/engines/uml/activity-class.ts index 79a76956a..d595b5f36 100644 --- a/packages/draw/src/engines/uml/activity-class.ts +++ b/packages/draw/src/engines/uml/activity-class.ts @@ -6,11 +6,13 @@ import { getNearestPointBetweenPointAndSegments, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { RectangleEngine } from '../basic-shapes/rectangle'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getCustomTextRectangle } from '../../utils'; +import { getStrokeWidthByElement } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; export const ActiveClassEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { @@ -48,6 +50,17 @@ export const ActiveClassEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - return getCustomTextRectangle(board, element, 0.75); + const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); + const strokeWidth = getStrokeWidthByElement(element); + const width = + elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.125 * 2; + const text = element.text!; + const textSize = getTextSize(board, text, width); + return { + height: textSize.height, + width: width > 0 ? width : 0, + x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.125, + y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 + }; } }; diff --git a/packages/draw/src/engines/uml/actor.ts b/packages/draw/src/engines/uml/actor.ts index c7d65fe9c..b2b766a8d 100644 --- a/packages/draw/src/engines/uml/actor.ts +++ b/packages/draw/src/engines/uml/actor.ts @@ -11,10 +11,10 @@ import { getVectorFromPointAndSlope, setStrokeLinecap } from '@plait/core'; +import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { getUnitVectorByPointAndPoint, rotateVector } from '@plait/common'; -import { getCustomTextRectangle } from '../../utils'; interface ActorPathData { headArcCommand: SVGArcCommand; @@ -148,8 +148,14 @@ export const ActorEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const textRectangle = getCustomTextRectangle(board, element, (elementRectangle.width + 40) / elementRectangle.width); - textRectangle.y = elementRectangle.y + elementRectangle.height + 16; - return textRectangle; + const width = elementRectangle.width + 40; + const text = element.text!; + const textSize = getTextSize(board, text, width); + return { + height: textSize.height, + width: width > 0 ? width : 0, + x: elementRectangle.x - 20, + y: elementRectangle.y + elementRectangle.height + 4 + }; } }; diff --git a/packages/draw/src/engines/uml/template.ts b/packages/draw/src/engines/uml/template.ts index 45e0b2c34..bdbb5d177 100644 --- a/packages/draw/src/engines/uml/template.ts +++ b/packages/draw/src/engines/uml/template.ts @@ -6,10 +6,13 @@ import { drawRoundRectangle, getNearestPointBetweenPointAndSegments } from '@plait/core'; -import { ShapeEngine } from '../../interfaces'; +import { getTextSize } from '../../utils/text-size'; +import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; import { RectangleEngine } from '../basic-shapes/rectangle'; +import { getStrokeWidthByElement } from '../../utils'; +import { ShapeDefaultSpace } from '../../constants'; export const TemplateEngine: ShapeEngine = { draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) { @@ -48,5 +51,18 @@ export const TemplateEngine: ShapeEngine = { }, getConnectorPoints(rectangle: RectangleClient) { return RectangleClient.getEdgeCenterPoints(rectangle); + }, + getTextRectangle(board: PlaitBoard, element: PlaitGeometry) { + const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); + const strokeWidth = getStrokeWidthByElement(element); + const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2; + const text = element.text!; + const textSize = getTextSize(board, text, width); + return { + height: textSize.height, + width: width > 0 ? width : 0, + x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth, + y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2 + }; } }; From 7c63e4de02cdaed074202ac5cdd45184f3380648 Mon Sep 17 00:00:00 2001 From: pubuzhixing8 Date: Thu, 9 Oct 2025 10:34:31 +0800 Subject: [PATCH 7/8] feat: improve --- .../draw/src/engines/basic-shapes/cloud.ts | 8 ++++---- .../draw/src/engines/basic-shapes/pentagon.ts | 7 +++---- .../draw/src/engines/flowchart/database.ts | 19 +++++++++++++------ .../draw/src/engines/flowchart/display.ts | 2 +- .../src/engines/flowchart/note-curly-left.ts | 15 +++++---------- .../src/engines/flowchart/note-curly-right.ts | 7 +++++-- packages/draw/src/utils/common.ts | 2 +- 7 files changed, 32 insertions(+), 28 deletions(-) diff --git a/packages/draw/src/engines/basic-shapes/cloud.ts b/packages/draw/src/engines/basic-shapes/cloud.ts index 5baabe832..800502847 100644 --- a/packages/draw/src/engines/basic-shapes/cloud.ts +++ b/packages/draw/src/engines/basic-shapes/cloud.ts @@ -10,10 +10,8 @@ import { import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { Options } from 'roughjs/bin/core'; import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon'; -import { getCustomTextRectangle, getStrokeWidthByElement } from '../../utils'; -import { ShapeDefaultSpace } from '../../constants'; +import { getCustomTextRectangle } from '../../utils'; import { getNearestPointBetweenPointAndArc } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; export function generateCloudPath(rectangle: RectangleClient): { startPoint: Point; arcCommands: SVGArcCommand[] } { const divisionWidth = rectangle.width / 7; @@ -157,6 +155,8 @@ export const CloudEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const widthRatio = 1 / 1.5; - return getCustomTextRectangle(board, element, widthRatio); + const rectangle = RectangleClient.getRectangleByPoints(element.points); + const textRectangle = getCustomTextRectangle(board, element, widthRatio); + return textRectangle; } }; diff --git a/packages/draw/src/engines/basic-shapes/pentagon.ts b/packages/draw/src/engines/basic-shapes/pentagon.ts index ca2e699dd..516eb7231 100644 --- a/packages/draw/src/engines/basic-shapes/pentagon.ts +++ b/packages/draw/src/engines/basic-shapes/pentagon.ts @@ -19,10 +19,9 @@ export const PentagonEngine: ShapeEngine = createPolygonEngine({ getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); const customTextRectangle = getCustomTextRectangle(board, element, 3 / 5); - customTextRectangle.y = - elementRectangle.y + - elementRectangle.height / 5 + - (elementRectangle.height - elementRectangle.height / 5 - customTextRectangle.height) / 2; + const startY = elementRectangle.y + elementRectangle.height / 5; + const endY = elementRectangle.y + elementRectangle.height; + customTextRectangle.y = startY + (endY - startY - customTextRectangle.height) / 2; return customTextRectangle; } }); diff --git a/packages/draw/src/engines/flowchart/database.ts b/packages/draw/src/engines/flowchart/database.ts index e98117c7b..373b43581 100644 --- a/packages/draw/src/engines/flowchart/database.ts +++ b/packages/draw/src/engines/flowchart/database.ts @@ -22,13 +22,14 @@ export const DatabaseEngine: ShapeEngine = { const rs = PlaitBoard.getRoughSVG(board); const shape = rs.path( `M${rectangle.x} ${rectangle.y + rectangle.height * 0.15} - A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + - rectangle.height * 0.15} + A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x + rectangle.width} ${ + rectangle.y + rectangle.height * 0.15 + } A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x} ${rectangle.y + rectangle.height * 0.15} V${rectangle.y + rectangle.height - rectangle.height * 0.15} - A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0, ${rectangle.x + rectangle.width} ${rectangle.y + - rectangle.height - - rectangle.height * 0.15} + A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0, ${rectangle.x + rectangle.width} ${ + rectangle.y + rectangle.height - rectangle.height * 0.15 + } V${rectangle.y + rectangle.height * 0.15}`, { ...options, fillStyle: 'solid' } ); @@ -106,6 +107,12 @@ export const DatabaseEngine: ShapeEngine = { }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - return getCustomTextRectangle(board, element, 0.7); + const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); + const textRectangle = getCustomTextRectangle(board, element, 1); + textRectangle.y += getStrokeWidthByElement(element); + const startY = elementRectangle.y + elementRectangle.height * 0.45; + const endY = elementRectangle.y + elementRectangle.height - elementRectangle.height * 0.3; + textRectangle.y = startY + (endY - startY - textRectangle.height) / 2; + return textRectangle; } }; diff --git a/packages/draw/src/engines/flowchart/display.ts b/packages/draw/src/engines/flowchart/display.ts index 2a35b0f2b..7bfc909b7 100644 --- a/packages/draw/src/engines/flowchart/display.ts +++ b/packages/draw/src/engines/flowchart/display.ts @@ -91,6 +91,6 @@ export const DisplayEngine: ShapeEngine = { return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - return getCustomTextRectangle(board, element, 0.88); + return getCustomTextRectangle(board, element, 0.75); } }; diff --git a/packages/draw/src/engines/flowchart/note-curly-left.ts b/packages/draw/src/engines/flowchart/note-curly-left.ts index f853d029f..0fa45f9d4 100644 --- a/packages/draw/src/engines/flowchart/note-curly-left.ts +++ b/packages/draw/src/engines/flowchart/note-curly-left.ts @@ -1,12 +1,4 @@ -import { - PlaitBoard, - Point, - PointOfRectangle, - RectangleClient, - distanceBetweenPointAndPoint, - setStrokeLinecap -} from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; +import { PlaitBoard, Point, PointOfRectangle, RectangleClient, distanceBetweenPointAndPoint, setStrokeLinecap } from '@plait/core'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; @@ -113,6 +105,9 @@ export const NoteCurlyLeftEngine: ShapeEngine = { return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - return getCustomTextRectangle(board, element, 0.88); + const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); + const textRectangle = getCustomTextRectangle(board, element, 0.9); + textRectangle.x = elementRectangle.x + getStrokeWidthByElement(element) + ShapeDefaultSpace.rectangleAndText; + return textRectangle; } }; diff --git a/packages/draw/src/engines/flowchart/note-curly-right.ts b/packages/draw/src/engines/flowchart/note-curly-right.ts index ce039f47f..2687956a0 100644 --- a/packages/draw/src/engines/flowchart/note-curly-right.ts +++ b/packages/draw/src/engines/flowchart/note-curly-right.ts @@ -1,5 +1,4 @@ import { PlaitBoard, Point, PointOfRectangle, RectangleClient, distanceBetweenPointAndPoint, setStrokeLinecap } from '@plait/core'; -import { getTextSize } from '../../utils/text-size'; import { PlaitGeometry, ShapeEngine } from '../../interfaces'; import { ShapeDefaultSpace } from '../../constants'; import { Options } from 'roughjs/bin/core'; @@ -108,6 +107,10 @@ export const NoteCurlyRightEngine: ShapeEngine = { return RectangleClient.getEdgeCenterPoints(rectangle); }, getTextRectangle: (board: PlaitBoard, element: PlaitGeometry) => { - return getCustomTextRectangle(board, element, 0.88); + const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); + const textRectangle = getCustomTextRectangle(board, element, 0.9); + textRectangle.x = + elementRectangle.x + getStrokeWidthByElement(element) + ShapeDefaultSpace.rectangleAndText + elementRectangle.width * 0.1; + return textRectangle; } }; diff --git a/packages/draw/src/utils/common.ts b/packages/draw/src/utils/common.ts index 85c60175a..f944d0c76 100644 --- a/packages/draw/src/utils/common.ts +++ b/packages/draw/src/utils/common.ts @@ -78,7 +78,7 @@ export const getTextRectangle = (board: export const getCustomTextRectangle = (board: PlaitBoard, element: T, widthRatio: number) => { const elementRectangle = RectangleClient.getRectangleByPoints(element.points!); - const width = widthRatio * elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2; + const width = widthRatio * elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - getStrokeWidthByElement(element) * 2; const textSize = getTextSize(board, element.text!, width); return { height: textSize.height, From 40dd4381b31b38e43b6372949d6fc93243c45918 Mon Sep 17 00:00:00 2001 From: pubuzhixing8 Date: Thu, 9 Oct 2025 10:37:07 +0800 Subject: [PATCH 8/8] chore: changeset --- .changeset/sweet-bears-clap.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sweet-bears-clap.md diff --git a/.changeset/sweet-bears-clap.md b/.changeset/sweet-bears-clap.md new file mode 100644 index 000000000..2a5031c9f --- /dev/null +++ b/.changeset/sweet-bears-clap.md @@ -0,0 +1,5 @@ +--- +'@plait/draw': minor +--- + +calculating text width by correct max width