Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into grid_view_secondary

1 files changed, 64 insertions, 30 deletions

diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index df792c9c0..02b444cd3 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -1,6 +1,8 @@
 import React = require("react");
 import * as beziercurve from 'bezier-curve';
 import * as fitCurve from 'fit-curve';
+import "./InteractionUtils.scss";
+import { Utils } from "../../Utils";
 
 export namespace InteractionUtils {
     export const MOUSETYPE = "mouse";
@@ -25,7 +27,7 @@ export namespace InteractionUtils {
     export interface MultiTouchEventDisposer { (): void; }
 
     /**
-     * 
+     *
      * @param element - element to turn into a touch target
      * @param startFunc - event handler, typically Touchable.onTouchStart (classes that inherit touchable can pass in this.onTouchStart)
      */
@@ -89,15 +91,17 @@ export namespace InteractionUtils {
         return myTouches;
     }
 
-    export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: number, strokeWidth: number, bezier: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean) {
+    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,
+        dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) {
         let pts: { X: number; Y: number; }[] = [];
         if (shape) { //if any of the shape are true
             pts = makePolygon(shape, points);
         }
         else if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y === points[0].Y) {
             //pointer is up (first and last points are the same)
-            points.pop();
             const newPoints = points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]);
+            newPoints.pop();
 
             const bezierCurves = fitCurve(newPoints, parseInt(bezier));
             for (const curve of bezierCurves) {
@@ -111,25 +115,55 @@ export namespace InteractionUtils {
         }
         const strpts = pts.reduce((acc: string, pt: { X: number, Y: number }) => acc +
             `${(pt.X - left - width / 2) * scalex + width / 2},
-             ${(pt.Y - top - width / 2) * scaley + width / 2} `, "");
+         ${(pt.Y - top - width / 2) * scaley + width / 2} `, "");
+        const dashArray = String(Number(width) * Number(dash));
+        const defGuid = Utils.GenerateGuid();
+        const arrowDim = Math.max(0.5, 8 / Math.log(Math.max(2, strokeWidth)));
+        return (<svg fill={fill === "none" ? color : fill}> {/* setting the svg fill sets the arrowhead 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 !== "arrowHead" && arrowEnd !== "arrowHead" ? (null) : <marker id={`arrowHead${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 !== "arrowEnd" && arrowEnd !== "arrowEnd" ? (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>}
+            </defs>}
 
-        return (
             <polyline
                 points={strpts}
                 style={{
-                    filter: drawHalo ? "url(#dangerShine)" : undefined,
-                    fill: "none",
+                    filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
+                    fill,
                     opacity: strokeWidth !== width ? 0.5 : undefined,
                     pointerEvents: pevents as any,
                     stroke: color ?? "rgb(0, 0, 0)",
                     strokeWidth: strokeWidth,
                     strokeLinejoin: "round",
-                    strokeLinecap: "round"
+                    strokeLinecap: "round",
+                    strokeDasharray: dashArray
                 }}
+                markerStart={`url(#${arrowStart + defGuid})`}
+                markerEnd={`url(#${arrowEnd + defGuid})`}
             />
-        );
+
+        </svg>);
     }
 
+    // export function makeArrow() {
+    //     return (
+    //         InkOptionsMenu.Instance.getColors().map(color => {
+    //             const id1 = "arrowHeadTest" + color;
+    //             console.log(color);
+    //             <marker id={id1} orient="auto" overflow="visible" refX="0" refY="1" markerWidth="10" markerHeight="7">
+    //                 <polygon points="0 0, 3 1, 0 2" fill={"#" + color} />
+    //             </marker>;
+    //         })
+    //     );
+    // }
+
     export function makePolygon(shape: string, points: { X: number, Y: number }[]) {
         if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) {
             //pointer is up (first and last points are the same)
@@ -199,24 +233,24 @@ export namespace InteractionUtils {
                 }
                 points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top });
                 return points;
-            case "arrow":
-                const x1 = left;
-                const y1 = top;
-                const x2 = right;
-                const y2 = bottom;
-                const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2)));
-                const L2 = L1 / 5;
-                const angle = 0.785398;
-                const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle));
-                const y3 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) - (x1 - x2) * Math.sin(angle));
-                const x4 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle));
-                const y4 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) + (x1 - x2) * Math.sin(angle));
-                points.push({ X: x1, Y: y1 });
-                points.push({ X: x2, Y: y2 });
-                points.push({ X: x3, Y: y3 });
-                points.push({ X: x4, Y: y4 });
-                points.push({ X: x2, Y: y2 });
-                return points;
+            // case "arrow":
+            //     const x1 = left;
+            //     const y1 = top;
+            //     const x2 = right;
+            //     const y2 = bottom;
+            //     const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2)));
+            //     const L2 = L1 / 5;
+            //     const angle = 0.785398;
+            //     const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle));
+            //     const y3 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) - (x1 - x2) * Math.sin(angle));
+            //     const x4 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle));
+            //     const y4 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) + (x1 - x2) * Math.sin(angle));
+            //     points.push({ X: x1, Y: y1 });
+            //     points.push({ X: x2, Y: y2 });
+            //     points.push({ X: x3, Y: y3 });
+            //     points.push({ X: x4, Y: y4 });
+            //     points.push({ X: x2, Y: y2 });
+            //     return points;
             case "line":
                 points.push({ X: left, Y: top });
                 points.push({ X: right, Y: bottom });
@@ -244,8 +278,8 @@ export namespace InteractionUtils {
 
     /**
      * Returns euclidean distance between two points
-     * @param pt1 
-     * @param pt2 
+     * @param pt1
+     * @param pt2
      */
     export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number {
         return Math.sqrt(Math.pow(pt1.clientX - pt2.clientX, 2) + Math.pow(pt1.clientY - pt2.clientY, 2));
@@ -376,4 +410,4 @@ export namespace InteractionUtils {
         //     }
         // }
     }
-}
\ No newline at end of file
+}