From 1561e37eb966607564938530a71aeb7e3ba27583 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 27 Sep 2021 23:03:47 -0400
Subject: fixed ink stroke editing to work with closed curves (eg break /
 restore tangent & drag start/end point).   changed ink rendering to use svg
 bezier curves.  fixed bugs with keydown handler to break tangent.

---
 src/client/util/InteractionUtils.tsx | 51 ++++++++++--------------------------
 1 file changed, 14 insertions(+), 37 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 4a8011e3c..66afc849e 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -146,7 +146,7 @@ export namespace InteractionUtils {
         if (shape) { //if any of the shape are true
             pts = makePolygon(shape, points);
         }
-        else if ((points.length >= 5 && points[3].X === points[4].X) || (points.length === 4)) {
+        else if (((points.length >= 5 && points[3].X === points[4].X) || (points.length === 4)) && !bezier) {
             for (var i = 0; i < points.length - 3; i += 4) {
                 const array = [[points[i].X, points[i].Y], [points[i + 1].X, points[i + 1].Y], [points[i + 2].X, points[i + 2].Y], [points[i + 3].X, points[i + 3].Y]];
                 for (var t = 0; t < 1; t += 0.01) {
@@ -154,47 +154,22 @@ export namespace InteractionUtils {
                     pts.push({ X: point[0], Y: point[1] });
                 }
             }
-        }
-        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)
-            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) {
-                for (var t = 0; t < 1; t += 0.01) {
-                    const point = beziercurve(t, curve);
-                    pts.push({ X: point[0], Y: point[1] });
-                }
-            }
         } else {
             pts = points.slice();
-            // bcz: Ugh... this is ugly, but shapes apprently have an extra point added that is = (p[0].x,p[0].y+1) as some sort of flag.  need to remove it here.
-            if (pts.length > 2 && pts[pts.length - 2].X === pts[0].X && pts[pts.length - 2].Y === pts[0].Y) {
-                pts.pop();
-            }
-        }
-        if (isNaN(scalex)) {
-            scalex = 1;
-        }
-        if (isNaN(scaley)) {
-            scaley = 1;
         }
-        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} `, "");
+        if (isNaN(scalex)) scalex = 1;
+        if (isNaN(scaley)) scaley = 1;
+
+        const toScr = (p: { X: number, Y: number }) => ` ${(p.X - left - width / 2) * scalex + width / 2}, ${(p.Y - top - width / 2) * scaley + width / 2} `;
+        var strpts = bezier ?
+            pts.reduce((acc: string, pt, i) => acc + (i % 4 !== 0 ? "" : "M" + toScr(pts[i]) + "C" + toScr(pts[i + 1]) + toScr(pts[i + 2]) + toScr(pts[i + 3])), "") :
+            pts.reduce((acc: string, pt) => acc + `${toScr(pt)} `, "");
+
         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 addables = pts.map((pts, i) =>
-            <svg height="10" width="10">
-                <circle cx={(pts.X - left - width / 2) * scalex + width / 2} cy={(pts.Y - top - width / 2) * scaley + width / 2} r={strokeWidth / 2} stroke="black" strokeWidth={1} fill="blue"
-                    onDoubleClick={(e) => { console.log(i); }} pointerEvents="all" cursor="all-scroll"
-                />
-            </svg>);
-
-
+        const Tag = (bezier ? "path" : "polyline") as keyof JSX.IntrinsicElements;
         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">
@@ -207,8 +182,10 @@ export namespace InteractionUtils {
                     <polygon points={`${2 - arrowDim} ${-Math.max(1, arrowDim / 2)}, ${2 - arrowDim} ${Math.max(1, arrowDim / 2)}, 3 0`} />
                 </marker>}
             </defs>}
-            <polyline
-                points={strpts}
+
+            <Tag
+                d={bezier ? strpts : undefined}
+                points={bezier ? undefined : strpts}
                 style={{
                     // filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
                     fill: fill && fill !== "transparent" ? fill : "none",
-- 
cgit v1.2.3-70-g09d2