Fixes bug with arrowhead, fits ellipse and rectangle sizes within bounding box

state/shape-utils/arrow.tsx

@@ -102,6 +102,8 @@ const arrow = registerShapeUtils<ArrowShape>({
 
     const strokeWidth = +styles.strokeWidth
 
+    const sw = strokeWidth * (style.dash === DashStyle.Solid ? 1 : 1.618)
+
     const arrowDist = vec.dist(start.point, end.point)
 
     let shaftPath: JSX.Element
@@ -126,7 +128,7 @@ const arrow = registerShapeUtils<ArrowShape>({
             }
           : getPerfectDashProps(
               arrowDist,
-              strokeWidth * 1.618,
+              sw,
               shape.style.dash === DashStyle.Dotted ? 'dotted' : 'dashed',
               2
             )
@@ -149,9 +151,7 @@ const arrow = registerShapeUtils<ArrowShape>({
           <path
             d={path}
             fill="none"
-            strokeWidth={
-              strokeWidth * (style.dash === DashStyle.Solid ? 1 : 1.618)
-            }
+            strokeWidth={sw}
             strokeDasharray={strokeDasharray}
             strokeDashoffset={strokeDashoffset}
             strokeLinecap="round"
@@ -176,7 +176,7 @@ const arrow = registerShapeUtils<ArrowShape>({
                 start.point,
                 end.point
               ) - 1,
-              strokeWidth * 1.618,
+              sw,
               shape.style.dash === DashStyle.Dotted ? 'dotted' : 'dashed',
               2
             )
@@ -205,7 +205,7 @@ const arrow = registerShapeUtils<ArrowShape>({
           <path
             d={path}
             fill="none"
-            strokeWidth={strokeWidth * 2}
+            strokeWidth={sw}
             strokeDasharray={strokeDasharray}
             strokeDashoffset={strokeDashoffset}
             strokeLinecap="round"
@@ -395,35 +395,31 @@ const arrow = registerShapeUtils<ArrowShape>({
       const handle = handles[id]
 
       shape.handles[handle.id] = handle
+    }
 
+    if ('bend' in handles) {
       const { start, end, bend } = shape.handles
 
       const dist = vec.dist(start.point, end.point)
 
-      if (handle.id === 'bend') {
-        const midPoint = vec.med(start.point, end.point)
-        const u = vec.uni(vec.vec(start.point, end.point))
-        const ap = vec.add(midPoint, vec.mul(vec.per(u), dist / 2))
-        const bp = vec.sub(midPoint, vec.mul(vec.per(u), dist / 2))
+      const midPoint = vec.med(start.point, end.point)
+      const u = vec.uni(vec.vec(start.point, end.point))
+      const ap = vec.add(midPoint, vec.mul(vec.per(u), dist / 2))
+      const bp = vec.sub(midPoint, vec.mul(vec.per(u), dist / 2))
 
-        bend.point = vec.nearestPointOnLineSegment(ap, bp, bend.point, true)
-        shape.bend = vec.dist(bend.point, midPoint) / (dist / 2)
+      bend.point = vec.nearestPointOnLineSegment(ap, bp, bend.point, true)
+      shape.bend = vec.dist(bend.point, midPoint) / (dist / 2)
 
-        const sa = vec.angle(end.point, start.point)
-        const la = sa - Math.PI / 2
-        if (isAngleBetween(sa, la, vec.angle(end.point, bend.point))) {
-          shape.bend *= -1
-        }
+      const sa = vec.angle(end.point, start.point)
+      const la = sa - Math.PI / 2
+
+      if (isAngleBetween(sa, la, vec.angle(end.point, bend.point))) {
+        shape.bend *= -1
       }
     }
 
     shape.handles.bend.point = getBendPoint(shape)
 
-    // const newBounds = this.getRotatedBounds(shape)
-    // const newCenter = getBoundsCenter(newBounds)
-
-    // shape.point = vec.add(shape.point, vec.neg(vec.sub(newCenter, prevCenter)))
-
     return this
   },
 

state/shape-utils/ellipse.tsx

@@ -73,6 +73,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
     }
 
     const h = Math.pow(rx - ry, 2) / Math.pow(rx + ry, 2)
+
     const perimeter =
       Math.PI * (rx + ry) * (1 + (3 * h) / (10 + Math.sqrt(4 - 3 * h)))
 
@@ -190,8 +191,8 @@ function renderPath(shape: EllipseShape) {
 
   const strokeWidth = +getShapeStyle(style).strokeWidth
 
-  const rx = radiusX + getRandom() * strokeWidth
-  const ry = radiusY + getRandom() * strokeWidth
+  const rx = radiusX + getRandom() * strokeWidth - strokeWidth / 2
+  const ry = radiusY + getRandom() * strokeWidth - strokeWidth / 2
 
   const points: number[][] = []
   const start = Math.PI + Math.PI * getRandom()

state/shape-utils/rectangle.tsx

@@ -182,18 +182,24 @@ function renderPath(shape: RectangleShape) {
 
   const getRandom = rng(shape.id)
 
-  const baseOffset = +styles.strokeWidth / 2
+  const strokeWidth = +styles.strokeWidth
+
+  const baseOffset = strokeWidth / 2
 
   const offsets = Array.from(Array(4)).map(() => [
     getRandom() * baseOffset,
     getRandom() * baseOffset,
   ])
 
-  const [w, h] = shape.size
-  const tl = vec.add([0, 0], offsets[0])
-  const tr = vec.add([w, 0], offsets[1])
+  const sw = strokeWidth
+
+  const w = Math.max(0, shape.size[0] - sw / 2)
+  const h = Math.max(0, shape.size[1] - sw / 2)
+
+  const tl = vec.add([sw / 2, sw / 2], offsets[0])
+  const tr = vec.add([w, sw / 2], offsets[1])
   const br = vec.add([w, h], offsets[2])
-  const bl = vec.add([0, h], offsets[3])
+  const bl = vec.add([sw / 2, h], offsets[3])
 
   const lines = shuffleArr(
     [

utils/dashes.ts

@@ -23,8 +23,8 @@ export function getPerfectDashProps(
     ratio = 1
     strokeDashoffset = (dashLength / 2).toString()
   } else {
-    dashLength = strokeWidth / 4
-    ratio = 4
+    dashLength = strokeWidth / 100
+    ratio = 100
     strokeDashoffset = '0'
   }