Creates standard shape fallback for dashed / dotted rects, ellipses

state/shape-utils/ellipse.tsx

@@ -1,12 +1,16 @@
 import { uniqueId } from 'utils/utils'
 import vec from 'utils/vec'
-import { EllipseShape, ShapeType } from 'types'
+import { DashStyle, EllipseShape, ShapeType } from 'types'
 import { getShapeUtils } from './index'
 import { boundsContained, getRotatedEllipseBounds } from 'utils/bounds'
 import { intersectEllipseBounds } from 'utils/intersections'
 import { pointInEllipse } from 'utils/hitTests'
 import { ease, getSvgPathFromStroke, rng, translateBounds } from 'utils/utils'
-import { defaultStyle, getShapeStyle } from 'state/shape-styles'
+import {
+  defaultStyle,
+  getShapeStyle,
+  getStrokeDashArray,
+} from 'state/shape-styles'
 import getStroke from 'perfect-freehand'
 import { registerShapeUtils } from './register'
 
@@ -40,6 +44,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
     const { id, radiusX, radiusY, style } = shape
     const styles = getShapeStyle(style)
 
+    if (style.dash === DashStyle.Solid) {
       if (!pathCache.has(shape)) {
         renderPath(shape)
       }
@@ -52,23 +57,30 @@ const ellipse = registerShapeUtils<EllipseShape>({
             id={id}
             cx={radiusX}
             cy={radiusY}
-          rx={Math.max(0, radiusX - Number(styles.strokeWidth) / 2)}
+            rx={Math.max(0, radiusX - +styles.strokeWidth / 2)}
-          ry={Math.max(0, radiusY - Number(styles.strokeWidth) / 2)}
+            ry={Math.max(0, radiusY - +styles.strokeWidth / 2)}
             stroke="none"
           />
           <path d={path} fill={styles.stroke} />
         </g>
       )
+    }
 
-    // return (
+    return (
-    //   <ellipse
+      <ellipse
-    //     id={id}
+        id={id}
-    //     cx={radiusX}
+        cx={radiusX}
-    //     cy={radiusY}
+        cy={radiusY}
-    //     rx={Math.max(0, radiusX - Number(styles.strokeWidth) / 2)}
+        rx={Math.max(0, radiusX - +styles.strokeWidth / 2)}
-    //     ry={Math.max(0, radiusY - Number(styles.strokeWidth) / 2)}
+        ry={Math.max(0, radiusY - +styles.strokeWidth / 2)}
-    //   />
+        fill={styles.fill}
-    // )
+        stroke={styles.stroke}
+        strokeDasharray={getStrokeDashArray(
+          style.dash,
+          +styles.strokeWidth
+        ).join(' ')}
+      />
+    )
   },
 
   getBounds(shape) {

state/shape-utils/notes.md

@@ -1,10 +0,0 @@
-# Shape Utils
-
-## Text
-
-- Click to create a shape, type to add its content
-- Click to select
-- Double click (long press?) to begin editing
-- Deselect to confirm changes
-- Escape to revert changes
-- If confirmed changes and text is empty, delete shape

state/shape-utils/rectangle.tsx

@@ -1,6 +1,6 @@
 import { uniqueId } from 'utils/utils'
 import vec from 'utils/vec'
-import { RectangleShape, ShapeType } from 'types'
+import { DashStyle, RectangleShape, ShapeType } from 'types'
 import {
   getSvgPathFromStroke,
   translateBounds,
@@ -8,7 +8,11 @@ import {
   shuffleArr,
   pointsBetween,
 } from 'utils/utils'
-import { defaultStyle, getShapeStyle } from 'state/shape-styles'
+import {
+  defaultStyle,
+  getShapeStyle,
+  getStrokeDashArray,
+} from 'state/shape-styles'
 import getStroke from 'perfect-freehand'
 import { registerShapeUtils } from './register'
 
@@ -40,8 +44,10 @@ const rectangle = registerShapeUtils<RectangleShape>({
 
   render(shape) {
     const { id, size, radius, style } = shape
+
     const styles = getShapeStyle(style)
 
+    if (style.dash === DashStyle.Solid) {
       if (!pathCache.has(shape.size)) {
         renderPath(shape)
       }
@@ -51,7 +57,6 @@ const rectangle = registerShapeUtils<RectangleShape>({
       return (
         <g id={id}>
           <rect
-          className="hi"
             rx={radius}
             ry={radius}
             x={+styles.strokeWidth / 2}
@@ -64,6 +69,21 @@ const rectangle = registerShapeUtils<RectangleShape>({
           <path d={path} fill={styles.stroke} />
         </g>
       )
+    }
+
+    return (
+      <rect
+        id={id}
+        width={size[0]}
+        height={size[1]}
+        fill={styles.fill}
+        stroke={styles.stroke}
+        strokeDasharray={getStrokeDashArray(
+          style.dash,
+          +styles.strokeWidth
+        ).join(' ')}
+      />
+    )
   },
 
   getBounds(shape) {