fix(draw): set property for some basic shapes #WIK-15298 (#854)

worktile · Apr 28, 2024 · 77d9429 · 77d9429
1 parent 7e00848
commit 77d9429
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 19 deletions.
diff --git a/.changeset/big-worms-joke.md b/.changeset/big-worms-joke.md
@@ -0,0 +1,5 @@
+---
+'@plait/draw': patch
+---
+
+set property for some basic shapes
diff --git a/packages/draw/src/constants/geometry.ts b/packages/draw/src/constants/geometry.ts
@@ -1,5 +1,5 @@
 import { ACTIVE_STROKE_WIDTH } from '@plait/core';
-import { FlowchartSymbols } from '../interfaces';
+import { BasicShapes, FlowchartSymbols } from '../interfaces';
 
 export const ShapeDefaultSpace = {
     rectangleAndText: 4
@@ -24,11 +24,24 @@ export const DefaultBasicShapeProperty = {
     strokeWidth: 2
 };
 
-export const DefaultCloudShapeProperty = {
+export const DefaultPentagonArrowProperty = {
     width: 120,
-    height: 100,
-    strokeColor: '#333',
-    strokeWidth: 2
+    height: 50
+};
+
+export const DefaultTwoWayArrowProperty = {
+    width: 138,
+    height: 80
+};
+
+export const DefaultArrowProperty = {
+    width: 100,
+    height: 80
+};
+
+export const DefaultCloudProperty = {
+    width: 120,
+    height: 100
 };
 
 export const DefaultTextProperty = {
@@ -96,6 +109,15 @@ export const DefaultMergeProperty = {
     height: 33
 };
 
+export const DefaultBasicShapePropertyMap: Record<string, { width: number; height: number }> = {
+    [BasicShapes.pentagonArrow]: DefaultPentagonArrowProperty,
+    [BasicShapes.processArrow]: DefaultPentagonArrowProperty,
+    [BasicShapes.cloud]: DefaultCloudProperty,
+    [BasicShapes.twoWayArrow]: DefaultTwoWayArrowProperty,
+    [BasicShapes.leftArrow]: DefaultArrowProperty,
+    [BasicShapes.rightArrow]: DefaultArrowProperty
+};
+
 export const DefaultFlowchartPropertyMap = {
     [FlowchartSymbols.connector]: DefaultConnectorProperty,
     [FlowchartSymbols.process]: DefaultFlowchartProperty,

diff --git a/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts b/packages/draw/src/engines/basic-shapes/pentagon-arrow.ts
@@ -4,11 +4,12 @@ import { createPolygonEngine } from './polygon';
 import { getTextRectangle } from '../../utils';
 
 export const getPentagonArrowPoints = (rectangle: RectangleClient): Point[] => {
+    const wider = rectangle.width > rectangle.height / 2;
     return [
         [rectangle.x, rectangle.y],
-        [rectangle.x + (rectangle.width * 3) / 5, rectangle.y],
+        [rectangle.x + (wider ? rectangle.width - rectangle.height / 2 : 0), rectangle.y],
         [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
-        [rectangle.x + (rectangle.width * 3) / 5, rectangle.y + rectangle.height],
+        [rectangle.x + (wider ? rectangle.width - rectangle.height / 2 : 0), rectangle.y + rectangle.height],
         [rectangle.x, rectangle.y + rectangle.height]
     ];
 };
@@ -19,8 +20,10 @@ export const PentagonArrowEngine: ShapeEngine = createPolygonEngine({
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle(element: PlaitGeometry) {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points!);
         const rectangle = getTextRectangle(element);
-        rectangle.width = (rectangle.width * 3) / 5;
+        const wider = elementRectangle.width > elementRectangle.height / 2 + 20;
+        rectangle.width = wider ? elementRectangle.width - elementRectangle.height / 2 : rectangle.width;
         return rectangle;
     }
 });
diff --git a/packages/draw/src/engines/basic-shapes/process-arrow.ts b/packages/draw/src/engines/basic-shapes/process-arrow.ts
@@ -18,11 +18,11 @@ export const getProcessArrowPoints = (rectangle: RectangleClient): Point[] => {
 export const ProcessArrowEngine: ShapeEngine = createPolygonEngine({
     getPolygonPoints: getProcessArrowPoints,
     getTextRectangle(element: PlaitGeometry) {
-        const rectangle = getTextRectangle(element);
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points!);
-        const width = rectangle.width;
-        rectangle.width = elementRectangle.height / 2;
-        rectangle.x += elementRectangle.height / 2;
+        const rectangle = getTextRectangle(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;
     }
 });
diff --git a/packages/draw/src/transforms/geometry.ts b/packages/draw/src/transforms/geometry.ts
@@ -5,7 +5,7 @@ import { Element } from 'slate';
 import { getDirectionByVector, getPointByVectorComponent, normalizeShapePoints } from '@plait/common';
 import { DrawTransforms } from '.';
 import { collectLineUpdatedRefsByGeometry } from './line';
-import { DefaultBasicShapeProperty, DefaultFlowchartPropertyMap } from '../constants';
+import { DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultFlowchartPropertyMap } from '../constants';
 
 export const insertGeometry = (board: PlaitBoard, points: [Point, Point], shape: GeometryShapes) => {
     const newElement = createDefaultGeometry(board, points, shape);
@@ -14,7 +14,10 @@ export const insertGeometry = (board: PlaitBoard, points: [Point, Point], shape:
 };
 
 export const insertGeometryByVector = (board: PlaitBoard, point: Point, shape: GeometryShapes, vector: Vector) => {
-    const shapeProperty = DefaultFlowchartPropertyMap[shape as FlowchartSymbols] || DefaultBasicShapeProperty;
+    const shapeProperty =
+        DefaultFlowchartPropertyMap[shape as FlowchartSymbols] ||
+        DefaultBasicShapePropertyMap[shape as BasicShapes] ||
+        DefaultBasicShapeProperty;
     const direction = getDirectionByVector(vector);
     if (direction) {
         let offset = 0;

diff --git a/packages/draw/src/utils/geometry.ts b/packages/draw/src/utils/geometry.ts
@@ -21,7 +21,7 @@ import { Alignment, CustomText, DEFAULT_FONT_SIZE, buildText, getTextSize } from
 import { Element } from 'slate';
 import {
     DefaultBasicShapeProperty,
-    DefaultCloudShapeProperty,
+    DefaultBasicShapePropertyMap,
     DefaultFlowchartPropertyMap,
     DefaultTextProperty,
     DrawPointerType,
@@ -150,6 +150,10 @@ export const getDefaultFlowchartProperty = (symbol: FlowchartSymbols) => {
     return DefaultFlowchartPropertyMap[symbol];
 };
 
+export const getDefaultBasicShapeProperty = (shape: BasicShapes) => {
+    return DefaultBasicShapePropertyMap[shape] || DefaultBasicShapeProperty
+};
+
 export const createDefaultFlowchart = (point: Point) => {
     const decisionProperty = getDefaultFlowchartProperty(FlowchartSymbols.decision);
     const processProperty = getDefaultFlowchartProperty(FlowchartSymbols.process);
@@ -321,10 +325,7 @@ export const getDefaultGeometryProperty = (pointer: DrawPointerType) => {
     if (isFlowChart) {
         return getDefaultFlowchartProperty(pointer as FlowchartSymbols);
     } else {
-        if (pointer === BasicShapes.cloud) {
-            return DefaultCloudShapeProperty;
-        }
-        return DefaultBasicShapeProperty;
+        return getDefaultBasicShapeProperty(pointer as BasicShapes);
     }
 };