From 77d9429a6a563552fb169fb2a5eeeef5729333ca Mon Sep 17 00:00:00 2001 From: huanhuanwa <44698191+huanhuanwa@users.noreply.github.com> Date: Sun, 28 Apr 2024 16:19:31 +0800 Subject: [PATCH] fix(draw): set property for some basic shapes #WIK-15298 (#854) --- .changeset/big-worms-joke.md | 5 +++ packages/draw/src/constants/geometry.ts | 32 ++++++++++++++++--- .../engines/basic-shapes/pentagon-arrow.ts | 9 ++++-- .../src/engines/basic-shapes/process-arrow.ts | 8 ++--- packages/draw/src/transforms/geometry.ts | 7 ++-- packages/draw/src/utils/geometry.ts | 11 ++++--- 6 files changed, 53 insertions(+), 19 deletions(-) create mode 100644 .changeset/big-worms-joke.md diff --git a/.changeset/big-worms-joke.md b/.changeset/big-worms-joke.md new file mode 100644 index 000000000..6d43d401f --- /dev/null +++ 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 index b36ece2c9..229f37119 100644 --- 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 = { + [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 index 73e3cf0ef..764e02c81 100644 --- 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 index dbcb09652..40dbca3ab 100644 --- 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 index ce2a889e4..5b70861d7 100644 --- 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 index 517b2a63a..15db1c8e7 100644 --- 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); } };