fix(draw): adjust line dash value for dotted #WIK-15965 (#941)

.changeset/yellow-chairs-scream.md

@@ -0,0 +1,5 @@
+---
+'@plait/draw': patch
+---
+
+adjust line dash value for dotted

packages/core/src/utils/drawing/rectangle.ts

@@ -39,10 +39,12 @@ export function drawRoundRectangle(
     const point7 = [x1, y2 - radius];
     const point8 = [x1, y1 + radius];
 
-    return rs.path(
+    const rectangleG = rs.path(
         `M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`,
         options
     );
+    setStrokeLinecap(rectangleG, 'round');
+    return rectangleG;
 }
 
 export const drawRectangle = (board: PlaitBoard, rectangle: RectangleClient, options: Options) => {

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

@@ -6,7 +6,8 @@ import {
     getEllipseTangentSlope,
     getVectorFromPointAndSlope,
     isPointInEllipse,
-    getNearestPointBetweenPointAndEllipse
+    getNearestPointBetweenPointAndEllipse,
+    setStrokeLinecap
 } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { Options } from 'roughjs/bin/core';
@@ -22,7 +23,9 @@ export function createEllipseEngine(createOptions?: CreateEllipseOptions): Shape
         draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
             const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
             const rs = PlaitBoard.getRoughSVG(board);
-            return rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, { ...options, fillStyle: 'solid' });
+            const shape = rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, { ...options, fillStyle: 'solid' });
+            setStrokeLinecap(shape, 'round');
+            return shape;
         },
         isInsidePoint(rectangle: RectangleClient, point: Point) {
             const centerPoint: Point = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];

packages/draw/src/engines/basic-shapes/round-comment.ts

@@ -5,7 +5,8 @@ import {
     RectangleClient,
     getNearestPointBetweenPointAndSegments,
     isPointInPolygon,
-    isPointInRoundRectangle
+    isPointInRoundRectangle,
+    setStrokeLinecap
 } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { Options } from 'roughjs/bin/core';
@@ -38,10 +39,12 @@ export const RoundCommentEngine: ShapeEngine = {
         const point10 = [x1 + rectangle.width / 4, rectangle.y + rectangle.height];
         const point11 = [x1 + rectangle.width / 2, y2];
 
-        return rs.path(
+        const shape = rs.path(
             `M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L    ${point11[0]} ${point11[1]}  ${point10[0]} ${point10[1]}   ${point9[0]} ${point9[1]}   ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`,
             { ...options, fillStyle: 'solid' }
         );
+        setStrokeLinecap(shape, 'round');
+        return shape;
     },
     isInsidePoint(rectangle: RectangleClient, point: Point) {
         const points: Point[] = [

packages/draw/src/engines/flowchart/or.ts

@@ -1,7 +1,6 @@
-import { PlaitBoard, RectangleClient } from '@plait/core';
-import { PlaitGeometry, ShapeEngine } from '../../interfaces';
+import { PlaitBoard, RectangleClient, setStrokeLinecap } from '@plait/core';
+import { ShapeEngine } from '../../interfaces';
 import { Options } from 'roughjs/bin/core';
-import { getTextRectangle } from '../../utils';
 import { createEllipseEngine } from '../basic-shapes/ellipse';
 
 export const OrEngine: ShapeEngine = createEllipseEngine({
@@ -10,7 +9,7 @@ export const OrEngine: ShapeEngine = createEllipseEngine({
         const rx = rectangle.width / 2;
         const ry = rectangle.height / 2;
         const startPoint = [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2];
-        return rs.path(
+        const shape = rs.path(
             `M${startPoint[0]} ${startPoint[1]}
         A${rx},${ry} 0 1,1 ${startPoint[0]} ${startPoint[1] - 0.01}
         M${rectangle.x} ${rectangle.y + rectangle.height / 2}
@@ -20,5 +19,7 @@ export const OrEngine: ShapeEngine = createEllipseEngine({
         `,
             { ...options, fillStyle: 'solid' }
         );
+        setStrokeLinecap(shape, 'round');
+        return shape;
     }
 });

packages/draw/src/engines/flowchart/summing-junction.ts

@@ -1,7 +1,6 @@
-import { PlaitBoard, RectangleClient, getCrossingPointsBetweenEllipseAndSegment } from '@plait/core';
-import { PlaitGeometry, ShapeEngine } from '../../interfaces';
+import { PlaitBoard, RectangleClient, getCrossingPointsBetweenEllipseAndSegment, setStrokeLinecap } from '@plait/core';
+import { ShapeEngine } from '../../interfaces';
 import { Options } from 'roughjs/bin/core';
-import { getTextRectangle } from '../../utils';
 import { createEllipseEngine } from '../basic-shapes/ellipse';
 
 export const SummingJunctionEngine: ShapeEngine = createEllipseEngine({
@@ -28,7 +27,7 @@ export const SummingJunctionEngine: ShapeEngine = createEllipseEngine({
             ry
         );
 
-        return rs.path(
+        const shape = rs.path(
             `M${startPoint[0]} ${startPoint[1]}
         A${rx},${ry} 0 1,1 ${startPoint[0]} ${startPoint[1] - 0.01}
         M${line1Points[0][0]} ${line1Points[0][1]}
@@ -38,5 +37,8 @@ export const SummingJunctionEngine: ShapeEngine = createEllipseEngine({
         `,
             { ...options, fillStyle: 'solid' }
         );
+
+        setStrokeLinecap(shape, 'round');
+        return shape;
     }
 });

packages/draw/src/engines/uml/deletion.ts

@@ -1,4 +1,11 @@
-import { PlaitBoard, Point, PointOfRectangle, RectangleClient, getNearestPointBetweenPointAndSegments } from '@plait/core';
+import {
+    PlaitBoard,
+    Point,
+    PointOfRectangle,
+    RectangleClient,
+    getNearestPointBetweenPointAndSegments,
+    setStrokeLinecap
+} from '@plait/core';
 import { ShapeEngine } from '../../interfaces';
 import { Options } from 'roughjs/bin/core';
 import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon';
@@ -13,6 +20,7 @@ export const DeletionEngine: ShapeEngine = {
             `,
             { ...options, fillStyle: 'solid', strokeWidth: 4 }
         );
+        setStrokeLinecap(shape, 'round');
         return shape;
     },
     isInsidePoint(rectangle: RectangleClient, point: Point) {

packages/draw/src/utils/style/stroke.ts

@@ -1,4 +1,4 @@
-import { PlaitBaseTable, PlaitDrawElement, StrokeStyle } from '../../interfaces';
+import { PlaitDrawElement, StrokeStyle } from '../../interfaces';
 import { DefaultDrawStyle } from '../../constants';
 import { PlaitBoard, PlaitElement } from '@plait/core';
 import { getDrawDefaultStrokeColor, getFlowchartDefaultFill } from '../geometry';
@@ -21,7 +21,7 @@ export const getLineDashByElement = (element: PlaitElement) => {
         case StrokeStyle.dashed:
             return [8, 8 + getStrokeWidthByElement(element)];
         case StrokeStyle.dotted:
-            return [0, 4 + getStrokeWidthByElement(element)];
+            return [2, 4 + getStrokeWidthByElement(element)];
         default:
             return undefined;
     }