Fix dashes on arrows

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

@@ -111,7 +111,8 @@ export function getPerfectDashProps(
   length: number,
   strokeWidth: number,
   style: DashStyle,
-  snap = 1
+  snap = 1,
+  outset = true
 ): {
   strokeDasharray: string
   strokeDashoffset: string
@@ -128,7 +129,7 @@ export function getPerfectDashProps(
   } else if (style === DashStyle.Dashed) {
     dashLength = strokeWidth * 2
     ratio = 1
-    strokeDashoffset = (dashLength / 2).toString()
+    strokeDashoffset = outset ? (dashLength / 2).toString() : '0'
   } else {
     dashLength = strokeWidth / 100
     ratio = 100
@@ -141,7 +142,10 @@ export function getPerfectDashProps(
 
   dashes = Math.max(dashes, 4)
 
-  const gapLength = Math.max(strokeWidth * 2, (length - dashes * dashLength) / dashes)
+  const gapLength = Math.max(
+    dashLength,
+    (length - dashes * dashLength) / (outset ? dashes : dashes - 1)
+  )
 
   return {
     strokeDasharray: [dashLength, gapLength].join(' '),

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

@@ -107,7 +107,8 @@ export const Arrow = new ShapeUtil<ArrowShape, SVGSVGElement, TLDrawMeta>(() =>
         arrowDist,
         strokeWidth * 1.618,
         shape.style.dash,
-        2
+        2,
+        false
       )
 
       if (decorations.start) {
@@ -158,7 +159,8 @@ export const Arrow = new ShapeUtil<ArrowShape, SVGSVGElement, TLDrawMeta>(() =>
         Math.abs(length),
         sw,
         shape.style.dash,
-        2
+        2,
+        false
       )
 
       if (decorations.start) {