Engine text rectangle improvement

.changeset/sweet-bears-clap.md

@@ -0,0 +1,5 @@
+---
+'@plait/draw': minor
+---
+
+calculating text width by correct max width

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 { 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;
@@ -156,17 +154,9 @@ 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;
+        const rectangle = RectangleClient.getRectangleByPoints(element.points);
+        const textRectangle = getCustomTextRectangle(board, element, widthRatio);
+        return textRectangle;
     }
 };

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 } from '../../utils';
+import { getTextRectangle } from '../../utils';
 import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon';
-import { getTextSize } from '../../utils/text-size';
 
 const heightRatio = 3 / 4;
 
@@ -44,16 +42,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;
     }
 };
 

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);
     }
 });

packages/draw/src/engines/basic-shapes/diamond.ts

@@ -1,17 +1,16 @@
 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,
     getConnectorPoints(rectangle: RectangleClient) {
         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);
     }
 });

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);
         }
     };
 

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);
     }
 });

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;
     }
 });

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);
     }
 });

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);
     }
 });

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;
     }
 });

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,10 @@ 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);
+        const startY = elementRectangle.y + elementRectangle.height / 5;
+        const endY = elementRectangle.y + elementRectangle.height;
+        customTextRectangle.y = startY + (endY - startY - customTextRectangle.height) / 2;
+        return customTextRectangle;
     }
 });

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;
     }
 });

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;
     }
 });

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;
     }
 };
 

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;
     }
 });