feat(draw): add fillStyle support for shapes

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

@@ -114,7 +114,7 @@ export const CloudEngine: ShapeEngine = {
                 .join('\n') +
             ' Z';
 
-        const svgElement = rs.path(pathData, { ...options, fillStyle: 'solid' });
+        const svgElement = rs.path(pathData, options);
         setPathStrokeLinecap(svgElement, 'round');
         return svgElement;
     },

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

@@ -18,7 +18,7 @@ export const CommentEngine: ShapeEngine = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
         const points = getCommentPoints(rectangle);
         const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        const polygon = rs.polygon(points, options);
         setStrokeLinecap(polygon, 'round');
         return polygon;
     },

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

@@ -23,7 +23,7 @@ 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);
-            const shape = 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);
             setStrokeLinecap(shape, 'round');
             return shape;
         },

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

@@ -24,7 +24,7 @@ export function createPolygonEngine(options: CreateOptions): ShapeEngine {
         draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
             const points = getPoints(rectangle);
             const rs = PlaitBoard.getRoughSVG(board);
-            const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+            const polygon = rs.polygon(points, options);
             setStrokeLinecap(polygon, 'round');
             return polygon;
         },

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

@@ -5,7 +5,7 @@ import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon';
 
 export const RectangleEngine: ShapeEngine = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
-        return drawRectangle(board, rectangle, { ...options, fillStyle: 'solid' });
+        return drawRectangle(board, rectangle, options);
     },
     isInsidePoint(rectangle: RectangleClient, point: Point) {
         const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);

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

@@ -40,7 +40,7 @@ export const RoundCommentEngine: ShapeEngine = {
 
         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' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;

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

@@ -21,7 +21,7 @@ export const RoundRectangleEngine: ShapeEngine = {
             rectangle.y,
             rectangle.x + rectangle.width,
             rectangle.y + rectangle.height,
-            { ...options, fillStyle: 'solid' },
+            options,
             false,
             getRoundRectangleRadius(rectangle)
         );

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

@@ -31,7 +31,7 @@ export const DatabaseEngine: ShapeEngine = {
                 rectangle.y + rectangle.height - rectangle.height * 0.15
             }
             V${rectangle.y + rectangle.height * 0.15}`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;

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

@@ -23,7 +23,7 @@ export const DelayEngine: ShapeEngine = {
             }, 0, 0, 1,${rectangle.x + (rectangle.width * 3) / 4} ${rectangle.y + rectangle.height} L${rectangle.x} ${
                 rectangle.y + rectangle.height
             } Z`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 

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

@@ -39,7 +39,7 @@ export const DisplayEngine: ShapeEngine = {
             L${rectangle.x} ${rectangle.y + rectangle.height / 2}
             Z
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 

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

@@ -27,9 +27,9 @@ export const DocumentEngine: ShapeEngine = {
                 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' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;

packages/draw/src/engines/flowchart/hard-disk.ts

@@ -21,19 +21,19 @@ 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}  
+            `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
-            } 
+            }
             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
             }
             H${rectangle.x + rectangle.width - rectangle.width * 0.15}`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;

packages/draw/src/engines/flowchart/internal-storage.ts

@@ -22,7 +22,7 @@ export const InternalStorageEngine: ShapeEngine = {
             M${rectangle.x} ${rectangle.y + rectangle.height / 10} h${rectangle.width}
             M${rectangle.x + rectangle.width / 10} ${rectangle.y} v${rectangle.height}
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;

packages/draw/src/engines/flowchart/multi-document.ts

@@ -74,7 +74,7 @@ export const MultiDocumentEngine: ShapeEngine = {
                 rectangle.y + rectangle.height - rectangle.height / 9 - 10 - 3
             }
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;

packages/draw/src/engines/flowchart/note-curly-left.ts

@@ -56,7 +56,7 @@ export const NoteCurlyLeftEngine: ShapeEngine = {
             ${lowerCurve.endPoint[0]} ${lowerCurve.endPoint[1]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, { ...options, fillStyle: 'solid', fill: 'transparent' });
+        const shape = rs.path(pathData, { ...options, fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },

packages/draw/src/engines/flowchart/note-curly-right.ts

@@ -55,7 +55,7 @@ export const NoteCurlyRightEngine: ShapeEngine = {
             ${lowerCurve.endPoint[0]} ${lowerCurve.endPoint[1]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, { ...options, fillStyle: 'solid', fill: 'transparent' });
+        const shape = rs.path(pathData, { ...options, fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },

packages/draw/src/engines/flowchart/note-square.ts

@@ -22,7 +22,7 @@ export const NoteSquareEngine: ShapeEngine = {
                 rectangle.x + rectangle.width * 0.075
             }
            `,
-            { ...options, fillStyle: 'solid', fill: 'transparent' }
+            { ...options, fill: 'transparent' }
         );
         setStrokeLinecap(shape, 'round');
         return shape;

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

@@ -17,7 +17,7 @@ export const OrEngine: ShapeEngine = createEllipseEngine({
         M${rectangle.x + rectangle.width / 2} ${rectangle.y}
         L${rectangle.x + rectangle.width / 2} ${rectangle.y + rectangle.height}
         `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;

packages/draw/src/engines/flowchart/predefined-process.ts

@@ -23,7 +23,7 @@ export const PredefinedProcessEngine: ShapeEngine = {
             } ${rectangle.y} L${rectangle.x + rectangle.width * 0.06} ${rectangle.y + rectangle.height} M${
                 rectangle.x + rectangle.width - rectangle.width * 0.06
             } ${rectangle.y} L${rectangle.x + rectangle.width - rectangle.width * 0.06} ${rectangle.y + rectangle.height}`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 

packages/draw/src/engines/flowchart/stored-data.ts

@@ -27,7 +27,7 @@ export const StoredDataEngine: ShapeEngine = {
             } ${rectangle.y + rectangle.height}A  ${rectangle.width / 10} ${rectangle.height / 2}, 0, 0, 1,${
                 rectangle.x + rectangle.width / 10
             } ${rectangle.y}`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
         return shape;

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

@@ -35,7 +35,7 @@ export const SummingJunctionEngine: ShapeEngine = createEllipseEngine({
         M${line2Points[0][0]} ${line2Points[0][1]}
         L${line2Points[1][0]} ${line2Points[1][1]}
         `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
 
         setStrokeLinecap(shape, 'round');

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

@@ -21,7 +21,7 @@ export const TerminalEngine: ShapeEngine = {
             rectangle.y,
             rectangle.x + rectangle.width,
             rectangle.y + rectangle.height,
-            { ...options, fillStyle: 'solid' },
+            options,
             false,
             getStartEndRadius(rectangle)
         );

packages/draw/src/engines/uml/activity-class.ts

@@ -23,7 +23,7 @@ export const ActiveClassEngine: ShapeEngine = {
             } ${rectangle.y} L${rectangle.x + rectangle.width * 0.125} ${rectangle.y + rectangle.height} M${
                 rectangle.x + rectangle.width - rectangle.width * 0.125
             } ${rectangle.y} L${rectangle.x + rectangle.width - rectangle.width * 0.125} ${rectangle.y + rectangle.height}`,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 

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

@@ -77,7 +77,7 @@ export const ActorEngine: ShapeEngine = {
             `M${rightLegLine[0][0]} ${rightLegLine[0][1]} L${rightLegLine[1][0]} ${rightLegLine[1][1]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, { ...options, fillStyle: 'solid' });
+        const shape = rs.path(pathData, options);
         setStrokeLinecap(shape, 'round');
         return shape;
     },

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

@@ -82,10 +82,7 @@ export const AssemblyEngine: ShapeEngine = {
             `M${line2[0][0]} ${line2[0][1]} H${line2[1][0]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, {
-            ...options,
-            fillStyle: 'solid'
-        });
+        const shape = rs.path(pathData, options);
         setStrokeLinecap(shape, 'round');
         return shape;
     },

packages/draw/src/engines/uml/combined-fragment.ts

@@ -30,7 +30,7 @@ export const CombinedFragmentEngine: ShapeEngine<PlaitMultipleTextGeometry, Draw
             V${rectangle.y}
             `,
 
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 

packages/draw/src/engines/uml/component-box.ts

@@ -34,7 +34,7 @@ export const ComponentBoxEngine: ShapeEngine = {
             H${rectangle.x} Z
 
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
 
         const componentShape = ComponentEngine.draw(board, componentRectangle, options);

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

@@ -84,7 +84,7 @@ export const ComponentEngine: ShapeEngine = {
             `V${points.mainEnd[1]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, { ...options, fillStyle: 'solid' });
+        const shape = rs.path(pathData, options);
         setStrokeLinecap(shape, 'round');
         return shape;
     },

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

@@ -21,7 +21,7 @@ export const ContainerEngine: ShapeEngine = {
             `M${rectangle.x} ${rectangle.y} H${rectangle.x + rectangle.width} V${rectangle.y + rectangle.height} H${rectangle.x} Z M${
                 rectangle.x + 40
             } ${rectangle.y} L${rectangle.x + 40} ${rectangle.y + rectangle.height} `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 

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

@@ -32,7 +32,6 @@ export const DeletionEngine: ShapeEngine = {
         const lines = getDeletionLines(rectangle);
         const shape = rs.path(lines.map(([from, to]) => `M${from[0]} ${from[1]} L${to[0]} ${to[1]}`).join(' '), {
             ...options,
-            fillStyle: 'solid',
             strokeWidth: 4
         });
         setStrokeLinecap(shape, 'round');

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

@@ -30,7 +30,7 @@ export const NoteEngine: ShapeEngine = {
             M${rectangle.x + rectangle.width - 16} ${rectangle.y} 
             A16 16, 0,0,1, ${rectangle.x + rectangle.width} ${rectangle.y + 16}
             `,
-            { ...options, fillStyle: 'solid' }
+            options
         );
         setStrokeLinecap(shape, 'round');
 

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

@@ -67,7 +67,7 @@ export const PackageEngine: ShapeEngine<PlaitMultipleTextGeometry, DrawOptions,
             `H${points.middlePoint[0]}`
         ].join(' ');
 
-        const shape = rs.path(pathData, { ...options, fillStyle: 'solid' });
+        const shape = rs.path(pathData, options);
         setStrokeLinecap(shape, 'round');
         return shape;
     },

packages/draw/src/engines/uml/provided-interface.ts

@@ -81,10 +81,7 @@ export const ProvidedInterfaceEngine: ShapeEngine = {
             )
         ].join(' ');
 
-        const shape = rs.path(pathData, {
-            ...options,
-            fillStyle: 'solid'
-        });
+        const shape = rs.path(pathData, options);
         setStrokeLinecap(shape, 'round');
         return shape;
     },

packages/draw/src/engines/uml/required-interface.ts

@@ -61,11 +61,7 @@ export const RequiredInterfaceEngine: ShapeEngine = {
             `M${line.startX} ${line.startY} H${line.endX}`
         ].join(' ');
 
-        const shape = rs.path(pathData, {
-            ...options,
-            fillStyle: 'solid',
-            fill: 'transparent'
-        });
+        const shape = rs.path(pathData, { ...options, fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },

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

@@ -26,7 +26,6 @@ export const TemplateEngine: ShapeEngine = {
             rectangle.y + rectangle.height,
             {
                 ...options,
-                fillStyle: 'solid',
                 dashGap: 10,
                 strokeLineDash: [10, 10]
             },

packages/draw/src/generators/geometry-shape.generator.ts

@@ -26,7 +26,8 @@ export class GeometryShapeGenerator extends Generator<PlaitGeometry, ShapeData>
             stroke: strokeColor,
             strokeWidth,
             fill,
-            strokeLineDash
+            strokeLineDash,
+            fillStyle: element.fillStyle ?? 'solid'
         });
     }
 }

packages/draw/src/interfaces/geometry.ts

@@ -1,6 +1,13 @@
 import { PlaitElement, Point } from '@plait/core';
 import { DrawTextInfo } from '../generators/text.generator';
 import { ParagraphElement, StrokeStyle } from '@plait/common';
+import { Options } from 'roughjs/bin/core';
+
+export const FILL_STYLES = ['solid', 'hachure', 'zigzag', 'cross-hatch', 'dots', 'dashed', 'zigzag-line'] as const satisfies readonly NonNullable<
+    Options['fillStyle']
+>[];
+
+export type FillStyle = (typeof FILL_STYLES)[number];
 
 export enum BasicShapes {
     rectangle = 'rectangle',
@@ -100,6 +107,7 @@ export interface PlaitCommonGeometry<T extends string = 'geometry', P extends Po
     strokeColor?: string;
     strokeWidth?: number;
     strokeStyle?: StrokeStyle;
+    fillStyle?: FillStyle;
     angle?: number;
     opacity?: number;
 }

packages/draw/src/utils/common.ts

@@ -199,7 +199,15 @@ export const drawShape = (
     roughOptions: Options,
     drawOptions?: DrawOptions
 ) => {
-    return getEngine(shape).draw(board, outerRectangle, roughOptions, drawOptions);
+    return getEngine(shape).draw(
+        board,
+        outerRectangle,
+        {
+            ...roughOptions,
+            fillStyle: roughOptions.fillStyle ?? 'solid'
+        },
+        drawOptions
+    );
 };
 
 export const drawBoundReaction = (