cleaned up/fixed line arrowheads & dots. added linecap options for lines, added outline of lines using fillColor. turned off border in comic mode for ink.

1 files changed, 17 insertions, 16 deletions

diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index d43ebd692..48fb968cf 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -90,7 +90,7 @@ export namespace InteractionUtils {
     }
 
     export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number,
-        color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string,
+        color: string, width: number, strokeWidth: number, lineJoin: string, lineCap: string, bezier: string, fill: string, arrowStart: string, arrowEnd: string,
         dash: string | undefined, scalex: number, scaley: number, shape: string, pevents: string, opacity: number, nodefs: boolean) {
         const pts = shape ? makePolygon(shape, points) : points;
 
@@ -104,20 +104,23 @@ export namespace InteractionUtils {
 
         const dashArray = dash && Number(dash) ? String(Number(width) * Number(dash)) : undefined;
         const defGuid = Utils.GenerateGuid();
-        const arrowDim = Math.max(0.5, 8 / Math.log(Math.max(2, strokeWidth)));
 
         const Tag = (bezier ? "path" : "polyline") as keyof JSX.IntrinsicElements;
+        const makerStrokeWidth = strokeWidth / 2;
         return (<svg fill={color}> {/* setting the svg fill sets the arrowStart fill */}
             {nodefs ? (null) : <defs>
-                {arrowStart !== "dot" && arrowEnd !== "dot" ? (null) : <marker id={`dot${defGuid}`} orient="auto" overflow="visible">
-                    <circle r={1} fill="context-stroke" />
-                </marker>}
-                {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) : <marker id={`arrowStart${defGuid}`} orient="auto" overflow="visible" refX="1.6" refY="0" markerWidth="10" markerHeight="7">
-                    <polygon points={`${arrowDim} ${-Math.max(1, arrowDim / 2)}, ${arrowDim} ${Math.max(1, arrowDim / 2)}, -1 0`} />
-                </marker>}
-                {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) : <marker id={`arrowEnd${defGuid}`} orient="auto" overflow="visible" refX="1.6" refY="0" markerWidth="10" markerHeight="7">
-                    <polygon points={`${2 - arrowDim} ${-Math.max(1, arrowDim / 2)}, ${2 - arrowDim} ${Math.max(1, arrowDim / 2)}, 3 0`} />
-                </marker>}
+                {arrowStart !== "dot" && arrowEnd !== "dot" ? (null) :
+                    <marker id={`dot${defGuid}`} orient="auto" markerUnits="userSpaceOnUse" refX={0} refY="0" overflow="visible">
+                        <circle r={strokeWidth * 1.5} fill="context-stroke" />
+                    </marker>}
+                {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) :
+                    <marker id={`arrowStart${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={makerStrokeWidth * 1.5} refY={0} markerWidth="10" markerHeight="7">
+                        <polygon style={{ stroke: color }} strokeLinejoin={lineJoin as any} strokeWidth={makerStrokeWidth * 2 / 3} points={`${3 * makerStrokeWidth} ${-makerStrokeWidth * 1.5}, ${makerStrokeWidth * 2} 0, ${3 * makerStrokeWidth} ${makerStrokeWidth * 1.5}, 0 0`} />
+                    </marker>}
+                {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) :
+                    <marker id={`arrowEnd${defGuid}`} markerUnits="userSpaceOnUse" orient="auto" overflow="visible" refX={makerStrokeWidth * 1.5} refY={0} markerWidth="10" markerHeight="7">
+                        <polygon style={{ stroke: color }} strokeLinejoin={lineJoin as any} strokeWidth={makerStrokeWidth * 2 / 3} points={`0 ${-makerStrokeWidth * 1.5}, ${makerStrokeWidth} 0, 0 ${makerStrokeWidth * 1.5}, ${3 * makerStrokeWidth} 0`} />
+                    </marker>}
             </defs>}
 
             <Tag
@@ -131,14 +134,12 @@ export namespace InteractionUtils {
                     pointerEvents: pevents as any,
                     stroke: color ?? "rgb(0, 0, 0)",
                     strokeWidth: strokeWidth,
-                    strokeLinejoin: color === "rgba(245, 230, 95, 0.75)" ? "miter" : "round",
-                    strokeLinecap: color === "rgba(245, 230, 95, 0.75)" ? "square" : "round",
+                    strokeLinecap: lineCap as any,
                     strokeDasharray: dashArray
                 }}
-                markerStart={`url(#${arrowStart + "Start" + defGuid})`}
-                markerEnd={`url(#${arrowEnd + "End" + defGuid})`}
+                markerStart={`url(#${arrowStart === "dot" ? arrowStart + defGuid : arrowStart + "Start" + defGuid})`}
+                markerEnd={`url(#${arrowEnd === "dot" ? arrowEnd + defGuid : arrowEnd + "End" + defGuid})`}
             />
-            {/* {addables} */}
 
         </svg>);
     }