tweaks to dashes

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.0.111
+
+### TLDraw
+
+- Adjust stroke widths and sizes.
+- Fixes a bug on very small dashed shapes.
+
 ## 0.0.110
 
 ### Core

packages/tldraw/src/shape/shape-styles.ts

@@ -139,9 +139,9 @@ export function getPerfectDashProps(
 
   dashes -= dashes % snap
 
-  if (dashes < 4) dashes = 4
+  dashes = Math.max(dashes, 4)
 
-  const gapLength = (length - dashes * dashLength) / dashes
+  const gapLength = Math.max(strokeWidth * 2, (length - dashes * dashLength) / dashes)
 
   return {
     strokeDasharray: [dashLength, gapLength].join(' '),

packages/tldraw/src/shape/shapes/arrow/arrow.tsx

@@ -105,7 +105,7 @@ export const Arrow = new ShapeUtil<ArrowShape, SVGSVGElement, TLDrawMeta>(() =>
 
       const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
         arrowDist,
-        sw,
+        strokeWidth * 1.618,
         shape.style.dash,
         2
       )
@@ -155,7 +155,7 @@ export const Arrow = new ShapeUtil<ArrowShape, SVGSVGElement, TLDrawMeta>(() =>
         : getArrowArcPath(start, end, circle, shape.bend)
 
       const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
-        length - 1,
+        Math.abs(length),
         sw,
         shape.style.dash,
         2

packages/tldraw/src/shape/shapes/ellipse/ellipse.tsx

@@ -89,7 +89,7 @@ export const Ellipse = new ShapeUtil<EllipseShape, SVGSVGElement, TLDrawMeta>(()
 
     const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
       perimeter < 64 ? perimeter * 2 : perimeter,
-      sw,
+      strokeWidth * 1.618,
       shape.style.dash,
       4
     )

packages/tldraw/src/shape/shapes/rectangle/rectangle.tsx

@@ -87,7 +87,7 @@ export const Rectangle = new ShapeUtil<RectangleShape, SVGSVGElement, TLDrawMeta
     const paths = strokes.map(([start, end, length], i) => {
       const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
         length,
-        sw,
+        strokeWidth * 1.618,
         shape.style.dash
       )