Work around Firefox dash render bug

Fixes #35

Author: joelspadin

src/prefabs/Markers.tsx

@@ -1,4 +1,5 @@
 import { ShapeConfig } from 'konva/lib/Shape';
+import { EllipseConfig } from 'konva/lib/shapes/Ellipse';
 import * as React from 'react';
 import { Ellipse, Group, Image, Rect } from 'react-konva';
 import { getDragOffset, registerDropHandler } from '../DropHandler';
@@ -105,6 +106,18 @@ const EllipseOutline: React.FC<OutlineProps> = ({
     showHighlight,
     strokeProps,
 }) => {
+    // Making the object always slightly elliptical works around a bug on
+    // Firefox where it draws a very thick arc instead of dashes.
+    // https://github.com/konvajs/konva/issues/1864
+    const firefoxHack = 1.0000001;
+
+    if (width === height) {
+        width *= firefoxHack;
+    }
+    if (highlightWidth === highlightHeight) {
+        highlightWidth *= firefoxHack;
+    }
+
     return (
         <>
             {showHighlight && (
@@ -161,19 +174,23 @@ const MarkerRenderer: React.FC<RendererProps<MarkerObject>> = ({ object }) => {
     const iconX = (object.width - iconWidth) / 2;
     const iconY = (object.height - iconHeight) / 2;
 
+    const strokeWidth = 1;
+
     const dashSize = getDashSize(object);
-    const strokeProps = {
+    const strokeProps: Partial<EllipseConfig> = {
         stroke: object.color,
-        strokeWidth: 1,
+        strokeWidth,
         shadowColor: object.color,
-        shadowBlur: 2,
+        shadowBlur: 1,
         dash: [dashSize, dashSize],
     };
 
-    const highlightOffset = strokeProps.strokeWidth * 4;
+    const highlightOffset = strokeWidth * 4;
     const highlightWidth = object.width + highlightOffset;
     const highlightHeight = object.height + highlightOffset;
 
+    console.log(strokeProps);
+
     return (
         <ResizeableObjectContainer object={object} transformerProps={{ centeredScaling: true }}>
             {(groupProps) => (