Merge branch 'master' into temporalmedia-mehek

41 files changed, 798 insertions, 1293 deletions

diff --git a/package-lock.json b/package-lock.json
index 7810e3120..c1dd8506f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -616,6 +616,11 @@
             "integrity": "sha1-TN2WtJKTs5MhIuS34pVD415rrlg=",
             "dev": true
         },
+        "@types/bezier-js": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/@types/bezier-js/-/bezier-js-4.1.0.tgz",
+            "integrity": "sha512-ElU16s8E6Pr6magp8ihwH1O8pbUJASbMND/qgUc9RsLmP3lMLHiDMRXdjtaObwW5GPtOVYOsXDUIhTIluT+yaw=="
+        },
         "@types/bluebird": {
             "version": "3.5.32",
             "resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-3.5.32.tgz",
@@ -2628,6 +2633,11 @@
             "resolved": "https://registry.npmjs.org/bezier-curve/-/bezier-curve-1.0.0.tgz",
             "integrity": "sha1-o9+v6rEqlMRicw1QeYxSqEBdc3k="
         },
+        "bezier-js": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/bezier-js/-/bezier-js-4.1.1.tgz",
+            "integrity": "sha512-oVOS6SSFFFlfnZdzC+lsfvhs/RRcbxJ47U04M4s5QIBaJmr3YWmTIL3qmrOK9uW+nUUcl9Jccmo/xpTrG+bBoQ=="
+        },
         "big.js": {
             "version": "5.2.2",
             "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
diff --git a/package.json b/package.json
index 6cbde9e1f..5d10c0d54 100644
--- a/package.json
+++ b/package.json
@@ -126,6 +126,7 @@
         "@hig/theme-data": "^2.16.1",
         "@material-ui/core": "^4.11.0",
         "@react-three/fiber": "^6.0.16",
+        "@types/bezier-js": "^4.1.0",
         "@types/cors": "^2.8.8",
         "@types/d3-axis": "^2.0.0",
         "@types/d3-color": "^2.0.1",
@@ -145,6 +146,7 @@
         "babel-runtime": "^6.26.0",
         "bcrypt-nodejs": "0.0.3",
         "bezier-curve": "^1.0.0",
+        "bezier-js": "^4.1.1",
         "bluebird": "^3.7.2",
         "body-parser": "^1.18.3",
         "bootstrap": "^4.5.0",
diff --git a/src/Utils.ts b/src/Utils.ts
index 7ec4f69f3..53182cc9c 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -575,7 +575,7 @@ export function simulateMouseClick(element: Element | null | undefined, x: numbe
 
 export function DashColor(color: string) {
     try {
-        return Color(color.toLowerCase());
+        return color ? Color(color.toLowerCase()) : Color("transparent");
     } catch (e) {
         console.log("COLOR error:", e);
         return Color("red");
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 403620bdd..da5c8efa9 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -165,6 +165,7 @@ export class DocumentOptions {
     version?: string; // version identifier for a document
     label?: string;
     hidden?: boolean;
+    _hidden?: boolean;
     mediaState?: string; // status of media document: "pendingRecording", "recording", "paused", "playing"
     autoPlayAnchors?: boolean; // whether to play audio/video when an anchor is clicked in a stackedTimeline.
     dontPlayLinkOnSelect?: boolean;  // whether an audio/video should start playing when a link is followed to it.
@@ -190,6 +191,7 @@ export class DocumentOptions {
     opacity?: number;
     defaultBackgroundColor?: string;
     _isLinkButton?: boolean; // marks a document as a button that will follow its primary link when clicked
+    _linkAutoMove?: boolean; // whether link endpoint should move around the edges of a document to make shortest path to other link endpoint
     isFolder?: boolean;
     lastFrame?: number; // the last frame of a frame-based collection (e.g., progressive slide)
     activeFrame?: number; // the active frame of a document in a frame base collection
@@ -301,6 +303,7 @@ export class DocumentOptions {
     border?: string; //for searchbox
     hoverBackgroundColor?: string; // background color of a label when hovered
     linkRelationshipList?: List<string>; // for storing different link relationships (when set by user in the link editor)
+    linkRelationshipSizes?: List<number>; //stores number of links contained in each relationship 
     linkColorList?: List<string>; // colors of links corresponding to specific link relationships
 }
 export namespace Docs {
@@ -401,7 +404,7 @@ export namespace Docs {
             [DocumentType.LINK, {
                 layout: { view: LinkBox, dataField: defaultDataKey },
                 options: {
-                    childDontRegisterViews: true, _isLinkButton: true, _height: 150, description: "",
+                    childDontRegisterViews: true, _isLinkButton: true, _height: 150, description: "", showCaption: "description",
                     backgroundColor: "lightblue", // lightblue is default color for linking dot and link documents text comment area
                     links: ComputedField.MakeFunction("links(self)") as any,
                     _removeDropProperties: new List(["_layerTags", "isLinkButton"]),
@@ -506,12 +509,14 @@ export namespace Docs {
             const prototypeIds = Object.values(DocumentType).filter(type => type !== DocumentType.NONE).map(type => type + suffix);
             // fetch the actual prototype documents from the server
             const actualProtos = Docs.newAccount ? {} : await DocServer.GetRefFields(prototypeIds);
-            Cast(actualProtos[DocumentType.WEB + suffix], Doc, null).nativeHeightUnfrozen = true; // to avoid having to recreate the DB
-            Cast(actualProtos[DocumentType.PDF + suffix], Doc, null).nativeHeightUnfrozen = true;
-            Cast(actualProtos[DocumentType.RTF + suffix], Doc, null).nativeHeightUnfrozen = true;
-            Cast(actualProtos[DocumentType.WEB + suffix], Doc, null).nativeDimModifiable = true; // to avoid having to recreate the DB
-            Cast(actualProtos[DocumentType.PDF + suffix], Doc, null).nativeDimModifiable = true;
-            Cast(actualProtos[DocumentType.RTF + suffix], Doc, null).nativeDimModifiable = true;
+            if (!Docs.newAccount) {
+                Cast(actualProtos[DocumentType.WEB + suffix], Doc, null).nativeHeightUnfrozen = true; // to avoid having to recreate the DB
+                Cast(actualProtos[DocumentType.PDF + suffix], Doc, null).nativeHeightUnfrozen = true;
+                Cast(actualProtos[DocumentType.RTF + suffix], Doc, null).nativeHeightUnfrozen = true;
+                Cast(actualProtos[DocumentType.WEB + suffix], Doc, null).nativeDimModifiable = true; // to avoid having to recreate the DB
+                Cast(actualProtos[DocumentType.PDF + suffix], Doc, null).nativeDimModifiable = true;
+                Cast(actualProtos[DocumentType.RTF + suffix], Doc, null).nativeDimModifiable = true;
+            }
 
             // update this object to include any default values: DocumentOptions for all prototypes
             prototypeIds.map(id => {
@@ -1101,7 +1106,8 @@ export namespace DocUtils {
             "acl-Public": SharingPermissions.Augment,
             "_acl-Public": SharingPermissions.Augment,
             linkDisplay: true,
-            hidden: true,
+            _hidden: true,
+            _linkAutoMove: true,
             linkRelationship,
             _showCaption: "description",
             _showTitle: "linkRelationship",
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index b66befb08..66b6a1e44 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -161,7 +161,8 @@ export class DocumentManager {
         originatingDoc: Opt<Doc> = undefined, // doc that initiated the display of the target odoc
         finished?: () => void,
         originalTarget?: Doc,
-        noSelect?: boolean
+        noSelect?: boolean,
+        presZoom?: number
     ): Promise<void> => {
         originalTarget = originalTarget ?? targetDoc;
         const getFirstDocView = LightboxView.LightboxDoc ? DocumentManager.Instance.getLightboxDocumentView : DocumentManager.Instance.getFirstDocumentView;
@@ -194,7 +195,7 @@ export class DocumentManager {
         if (focusView) {
             !noSelect && Doc.linkFollowHighlight(focusView.rootDoc); //TODO:glr make this a setting in PresBox
             focusView.focus(targetDoc, {
-                originalTarget, willZoom, afterFocus: (didFocus: boolean) =>
+                originalTarget, willZoom, scale: presZoom, afterFocus: (didFocus: boolean) =>
                     new Promise<ViewAdjustment>(res => {
                         focusAndFinish(didFocus);
                         res();
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 421e4c6bb..f5704d2bf 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -365,6 +365,21 @@ export namespace DragManager {
         const dragElements = eles.map(ele => {
             if (!ele.parentNode) dragDiv.appendChild(ele);
             const dragElement = ele.parentNode === dragDiv ? ele : ele.cloneNode(true) as HTMLElement;
+            const children = Array.from(dragElement.children);
+            while (children.length) { // need to replace all the maker node reference ids with new unique ids. otherwise, the clone nodes will reference the original nodes which are all hidden during the drag
+                const next = children.pop();
+                next && children.push(...Array.from(next.children));
+                if (next) {
+                    ["marker-start", "marker-mid", "marker-end"].forEach(field => {
+                        if (next.localName.startsWith("path") && (next.attributes as any)[field]) {
+                            next.setAttribute(field, (next.attributes as any)[field].value.replace("#", "#X"));
+                        }
+                    });
+                    if (next.localName.startsWith("marker")) {
+                        next.id = "X" + next.id;
+                    }
+                }
+            }
             const rect = ele.getBoundingClientRect();
             const scaleX = rect.width / ele.offsetWidth;
             const scaleY = ele.offsetHeight ? rect.height / ele.offsetHeight : scaleX;
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 4a8011e3c..a32a8eecc 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -1,10 +1,6 @@
 import React = require("react");
-import * as beziercurve from 'bezier-curve';
-import * as fitCurve from 'fit-curve';
-import "./InteractionUtils.scss";
 import { Utils } from "../../Utils";
-import { CurrentUserUtils } from "./CurrentUserUtils";
-import { InkTool } from "../../fields/InkField";
+import "./InteractionUtils.scss";
 
 export namespace InteractionUtils {
     export const MOUSETYPE = "mouse";
@@ -93,122 +89,43 @@ export namespace InteractionUtils {
         return myTouches;
     }
 
-    export function CreatePoints(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 >= 5 && points[3].X === points[4].X) || (points.length === 4)) {
-            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) {
-                    const point = beziercurve(t, array);
-                    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;
-        }
-        return pts;
-    }
+    export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number,
+        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;
 
+        if (isNaN(scalex)) scalex = 1;
+        if (isNaN(scaley)) scaley = 1;
 
+        const toScr = (p: { X: number, Y: number }) => ` ${!p ? 0 : (p.X - left - width / 2) * scalex + width / 2}, ${!p ? 0 : (p.Y - top - width / 2) * scaley + width / 2} `;
+        const strpts = bezier ?
+            pts.reduce((acc: string, pt, i) => acc + (i % 4 !== 0 ? "" : (i === 0 ? "M" + toScr(pt) : "") + "C" + toScr(pts[i + 1]) + toScr(pts[i + 2]) + toScr(pts[i + 3])), "") :
+            pts.reduce((acc: string, pt) => acc + `${toScr(pt)} `, "");
 
-    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 | undefined, scalex: number, scaley: number, shape: string, pevents: string, opacity: number, 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 >= 5 && points[3].X === points[4].X) || (points.length === 4)) {
-            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) {
-                    const point = beziercurve(t, array);
-                    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} `, "");
         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;
+        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" ? (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>}
+                {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>}
-            <polyline
-                points={strpts}
+
+            <Tag
+                d={bezier ? strpts : undefined}
+                points={bezier ? undefined : strpts}
                 style={{
                     // filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
                     fill: fill && fill !== "transparent" ? fill : "none",
@@ -217,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>);
     }
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 64da68f59..90a8f2737 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -38,15 +38,19 @@ export class LinkManager {
             const addLinkToDoc = (link: Doc) => {
                 const a1Prom = link?.anchor1;
                 const a2Prom = link?.anchor2;
-                Promise.all([a1Prom, a2Prom]).then(action((all) => {
+                Promise.all([a1Prom, a2Prom]).then((all) => {
                     const a1 = all[0];
                     const a2 = all[1];
-                    if (a1 instanceof Doc && a2 instanceof Doc && ((a1.author !== undefined && a2.author !== undefined) || link.author === Doc.CurrentUserEmail)) {
-                        Doc.GetProto(a1)[DirectLinksSym].add(link);
-                        Doc.GetProto(a2)[DirectLinksSym].add(link);
-                        Doc.GetProto(link)[DirectLinksSym].add(link);
-                    }
-                }));
+                    const a1ProtoProm = (link?.anchor1 as Doc)?.proto;
+                    const a2ProtoProm = (link?.anchor2 as Doc)?.proto;
+                    Promise.all([a1ProtoProm, a2ProtoProm]).then(action((all) => {
+                        if (a1 instanceof Doc && a2 instanceof Doc && ((a1.author !== undefined && a2.author !== undefined) || link.author === Doc.CurrentUserEmail)) {
+                            Doc.GetProto(a1)[DirectLinksSym].add(link);
+                            Doc.GetProto(a2)[DirectLinksSym].add(link);
+                            Doc.GetProto(link)[DirectLinksSym].add(link);
+                        }
+                    }));
+                });
             };
             const remLinkFromDoc = (link: Doc) => {
                 const a1 = link?.anchor1;
@@ -100,12 +104,9 @@ export class LinkManager {
 
     public createLinkrelationshipLists = () => {
         //create new lists for link relations and their associated colors if the lists don't already exist
-        if (!Doc.UserDoc().linkRelationshipList && !Doc.UserDoc().linkColorList) {
-            const linkRelationshipList = new List<string>();
-            const linkColorList = new List<string>();
-            Doc.UserDoc().linkRelationshipList = linkRelationshipList;
-            Doc.UserDoc().linkColorList = linkColorList;
-        }
+        !Doc.UserDoc().linkRelationshipList && (Doc.UserDoc().linkRelationshipList = new List<string>());
+        !Doc.UserDoc().linkColorList && (Doc.UserDoc().linkColorList = new List<string>());
+        !Doc.UserDoc().linkRelationshipSizes && (Doc.UserDoc().linkRelationshipSizes = new List<number>());
     }
 
     public addLink(linkDoc: Doc, checkExists = false) {
diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts
index 05fb9f378..44e44d335 100644
--- a/src/client/util/UndoManager.ts
+++ b/src/client/util/UndoManager.ts
@@ -70,6 +70,7 @@ export namespace UndoManager {
     export interface UndoEvent {
         undo: () => void;
         redo: () => void;
+        prop: string;
     }
     type UndoBatch = UndoEvent[];
 
@@ -104,6 +105,23 @@ export namespace UndoManager {
     export function GetOpenBatches(): Without<Batch, 'end'>[] {
         return openBatches;
     }
+    export function FilterBatches(fieldTypes: string[]) {
+        const fieldCounts: { [key: string]: number } = {};
+        const lastStack = UndoManager.undoStack.lastElement();
+        if (lastStack) {
+            lastStack.forEach(ev => fieldTypes.includes(ev.prop) && (fieldCounts[ev.prop] = (fieldCounts[ev.prop] || 0) + 1));
+            const fieldCount2: { [key: string]: number } = {};
+            runInAction(() =>
+                UndoManager.undoStack[UndoManager.undoStack.length - 1] = lastStack.filter(ev => {
+                    if (fieldTypes.includes(ev.prop)) {
+                        fieldCount2[ev.prop] = (fieldCount2[ev.prop] || 0) + 1;
+                        if (fieldCount2[ev.prop] === 1 || fieldCount2[ev.prop] === fieldCounts[ev.prop]) return true;
+                        return false;
+                    }
+                    return true;
+                }));
+        }
+    }
     export function TraceOpenBatches() {
         console.log(`Open batches:\n\t${openBatches.map(batch => batch.batchName).join("\n\t")}\n`);
     }
@@ -140,6 +158,7 @@ export namespace UndoManager {
         batchCounter--;
         // console.log("End " + batchCounter);
         if (batchCounter === 0 && currentBatch?.length) {
+            // console.log("------ended----")
             if (!cancel) {
                 undoStack.push(currentBatch);
             }
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 7f428a881..aa9318310 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -28,6 +28,7 @@ import { PresBox } from './nodes/trails/PresBox';
 import { undoBatch } from '../util/UndoManager';
 import { CollectionViewType } from './collections/CollectionView';
 import { Colors } from './global/globalEnums';
+import { DashFieldView } from './nodes/formattedText/DashFieldView';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -336,9 +337,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     openContextMenu = (e: React.MouseEvent) => {
         let child = SelectionManager.Views()[0].ContentDiv!.children[0];
         while (child.children.length) {
-            const next = Array.from(child.children).find(c => typeof (c.className) === "string");
-            if (next?.className.includes(DocumentView.ROOT_DIV)) break;
-            if (next?.className.includes("dashFieldView")) break;
+            const next = Array.from(child.children).find(c => c.className?.toString().includes("SVGAnimatedString") || typeof (c.className) === "string");
+            if (next?.className?.toString().includes(DocumentView.ROOT_DIV)) break;
+            if (next?.className?.toString().includes(DashFieldView.name)) break;
             if (next) child = next;
             else break;
         }
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 359971e5a..7f024a1da 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -202,7 +202,10 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
                 InkStrokeProperties.Instance?.rotateInk(2 * movement.X / angle * (Math.PI / 180));
                 return false;
             },
-            () => this._rotateUndo?.end(),
+            () => {
+                this._rotateUndo?.end();
+                UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
+            },
             emptyFunction);
         this._prevY = e.clientY;
         this._inkCenterPts = SelectionManager.Views()
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 6ccbd3fd7..f28485e43 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -627,6 +627,9 @@ export class GestureOverlay extends Touchable {
 
 
                     }
+                    const dist = Math.sqrt((controlPoints[0].X - controlPoints.lastElement().X) * (controlPoints[0].X - controlPoints.lastElement().X) +
+                        (controlPoints[0].Y - controlPoints.lastElement().Y) * (controlPoints[0].Y - controlPoints.lastElement().Y));
+                    if (controlPoints.length > 4 && dist < 10) controlPoints[controlPoints.length - 1] = controlPoints[0];
                     this._points = controlPoints;
 
                     this.dispatchGesture(GestureUtils.Gestures.Stroke);
@@ -708,7 +711,7 @@ export class GestureOverlay extends Touchable {
                 this._points.push({ X: left, Y: top });
 
                 break;
-                
+
             case "triangle":
                 this._points.push({ X: left, Y: bottom });
                 this._points.push({ X: left, Y: bottom });
@@ -761,10 +764,10 @@ export class GestureOverlay extends Touchable {
                 break;
 
             case "line":
-                if (Math.abs(firstx - lastx) < 20) {
+                if (Math.abs(firstx - lastx) < 10 && Math.abs(firsty - lasty) > 10) {
                     lastx = firstx;
                 }
-                if (Math.abs(firsty - lasty) < 20) {
+                if (Math.abs(firsty - lasty) < 10 && Math.abs(firstx - lastx) > 10) {
                     lasty = firsty;
                 }
                 this._points.push({ X: firstx, Y: firsty });
@@ -838,20 +841,23 @@ export class GestureOverlay extends Touchable {
         B.bottom = B.bottom + width / 2;
         B.width += width;
         B.height += width;
+        const fillColor = ActiveFillColor();
+        const strokeColor = fillColor && fillColor !== "transparent" ? fillColor : ActiveInkColor();
         return [
             this.props.children,
             this._palette,
             [this._strokes.map((l, i) => {
                 const b = { left: -20000, right: 20000, top: -20000, bottom: 20000, width: 40000, height: 40000 };//this.getBounds(l, true);
                 return <svg key={i} width={b.width} height={b.height} style={{ transform: `translate(${b.left}px, ${b.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000, overflow: "visible" }}>
-                    {InteractionUtils.CreatePolyline(l, b.left, b.top, ActiveInkColor(), width, width,
-                        ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(),
+                    {InteractionUtils.CreatePolyline(l, b.left, b.top, strokeColor, width, width, "miter", "round",
+                        ActiveInkBezierApprox(), "none" /*ActiveFillColor()*/, ActiveArrowStart(), ActiveArrowEnd(),
                         ActiveDash(), 1, 1, this.InkShape, "none", 1.0, false)}
                 </svg>;
             }),
             this._points.length <= 1 ? (null) : <svg key="svg" width={B.width} height={B.height}
                 style={{ transform: `translate(${B.left}px, ${B.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000, overflow: "visible" }}>
-                {InteractionUtils.CreatePolyline(this._points.map(p => ({ X: p.X, Y: p.Y - (rect?.y || 0) })), B.left, B.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", 1.0, false)}
+                {InteractionUtils.CreatePolyline(this._points.map(p => ({ X: p.X, Y: p.Y - (rect?.y || 0) })), B.left, B.top, ActiveInkColor(), width, width, "miter", "round", "",
+                    "none" /*ActiveFillColor()*/, ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", 1.0, false)}
             </svg>]
         ];
     }
diff --git a/src/client/views/InkControlPtHandles.tsx b/src/client/views/InkControlPtHandles.tsx
new file mode 100644
index 000000000..0644488b3
--- /dev/null
+++ b/src/client/views/InkControlPtHandles.tsx
@@ -0,0 +1,174 @@
+import React = require("react");
+import { action, observable } from "mobx";
+import { observer } from "mobx-react";
+import { Doc } from "../../fields/Doc";
+import { ControlPoint, InkData, PointData } from "../../fields/InkField";
+import { listSpec } from "../../fields/Schema";
+import { Cast } from "../../fields/Types";
+import { setupMoveUpEvents } from "../../Utils";
+import { Transform } from "../util/Transform";
+import { UndoManager } from "../util/UndoManager";
+import { Colors } from "./global/globalEnums";
+import { InkStrokeProperties } from "./InkStrokeProperties";
+import { List } from "../../fields/List";
+import { InkingStroke } from "./InkingStroke";
+
+export interface InkControlProps {
+    inkDoc: Doc;
+    inkCtrlPoints: InkData;
+    screenCtrlPoints: InkData;
+    screenSpaceLineWidth: number;
+    ScreenToLocalTransform: () => Transform;
+    nearestScreenPt: () => PointData | undefined;
+}
+
+@observer
+export class InkControlPtHandles extends React.Component<InkControlProps> {
+
+    @observable private _overControl = -1;
+
+    @observable controlUndo: UndoManager.Batch | undefined;
+
+    componentDidMount() {
+        document.addEventListener("keydown", this.onDelete, true);
+    }
+    componentWillUnmount() {
+        document.removeEventListener("keydown", this.onDelete, true);
+    }
+    /**
+     * Handles the movement of a selected control point when the user clicks and drags.
+     * @param controlIndex The index of the currently selected control point.
+     */
+    @action
+    onControlDown = (e: React.PointerEvent, controlIndex: number): void => {
+        if (InkStrokeProperties.Instance) {
+            const screenScale = this.props.ScreenToLocalTransform().Scale;
+            const order = controlIndex % 4;
+            const handleIndexA = ((order === 3 ? controlIndex - 1 : controlIndex - 2) + this.props.inkCtrlPoints.length) % this.props.inkCtrlPoints.length;
+            const handleIndexB = (order === 3 ? controlIndex + 2 : controlIndex + 1) % this.props.inkCtrlPoints.length;
+            const brokenIndices = Cast(this.props.inkDoc.brokenInkIndices, listSpec("number"));
+            const wasSelected = InkStrokeProperties.Instance?._currentPoint === controlIndex;
+            setupMoveUpEvents(this, e,
+                action((e: PointerEvent, down: number[], delta: number[]) => {
+                    if (!this.controlUndo) this.controlUndo = UndoManager.StartBatch("drag ink ctrl pt");
+                    InkStrokeProperties.Instance?.moveControlPtHandle(delta[0] * screenScale, delta[1] * screenScale, controlIndex);
+                    return false;
+                }),
+                action(() => {
+                    if (this.controlUndo) {
+                        InkStrokeProperties.Instance?.snapControl(this.props.inkDoc, controlIndex);
+                    }
+                    this.controlUndo?.end();
+                    this.controlUndo = undefined;
+                    UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
+                }),
+                action((e: PointerEvent, doubleTap: boolean | undefined) => {
+                    const equivIndex = controlIndex === 0 ? this.props.inkCtrlPoints.length - 1 : controlIndex === this.props.inkCtrlPoints.length - 1 ? 0 : controlIndex;
+                    if (doubleTap || e.button === 2) {
+                        if (!brokenIndices?.includes(equivIndex) && !brokenIndices?.includes(controlIndex)) {
+                            if (brokenIndices) brokenIndices.push(controlIndex);
+                            else this.props.inkDoc.brokenInkIndices = new List<number>([controlIndex]);
+                        } else {
+                            if (brokenIndices?.includes(equivIndex)) {
+                                if (!this.controlUndo) this.controlUndo = UndoManager.StartBatch("make smooth");
+                                InkStrokeProperties.Instance?.snapHandleTangent(equivIndex, handleIndexA, handleIndexB);
+                            }
+                            if (equivIndex !== controlIndex && brokenIndices?.includes(controlIndex)) {
+                                if (!this.controlUndo) this.controlUndo = UndoManager.StartBatch("make smooth");
+                                InkStrokeProperties.Instance?.snapHandleTangent(controlIndex, handleIndexA, handleIndexB);
+                            }
+                        }
+                        this.controlUndo?.end();
+                        this.controlUndo = undefined;
+                    }
+                    this.changeCurrPoint(controlIndex);
+                }), undefined, undefined, () => wasSelected && this.changeCurrPoint(-1));
+        }
+    }
+    /**
+     * Updates whether a user has hovered over a particular control point or point that could be added
+     * on click.
+     */
+    @action onEnterControl = (i: number) => { this._overControl = i; };
+    @action onLeaveControl = () => { this._overControl = -1; };
+
+    /**
+     * Deletes the currently selected point.
+     */
+    @action
+    onDelete = (e: KeyboardEvent) => {
+        if (["-", "Backspace", "Delete"].includes(e.key)) {
+            InkStrokeProperties.Instance?.deletePoints();
+            e.stopPropagation();
+        }
+    }
+
+    /**
+     * Changes the current selected control point.
+     */
+    @action
+    changeCurrPoint = (i: number) => {
+        if (InkStrokeProperties.Instance) {
+            InkStrokeProperties.Instance._currentPoint = i;
+        }
+    }
+
+    render() {
+        // Accessing the current ink's data and extracting all control points.
+        const scrData = this.props.screenCtrlPoints;
+        const sreenCtrlPoints: ControlPoint[] = [];
+        for (let i = 0; i <= scrData.length - 4; i += 4) {
+            sreenCtrlPoints.push({ ...scrData[i], I: i });
+            sreenCtrlPoints.push({ ...scrData[i + 3], I: i + 3 });
+        }
+
+        const inkData = this.props.inkCtrlPoints;
+        const inkCtrlPts: ControlPoint[] = [];
+        for (let i = 0; i <= inkData.length - 4; i += 4) {
+            inkCtrlPts.push({ ...inkData[i], I: i });
+            inkCtrlPts.push({ ...inkData[i + 3], I: i + 3 });
+        }
+
+        const screenSpaceLineWidth = this.props.screenSpaceLineWidth;
+        const closed = InkingStroke.IsClosed(inkData);
+        const nearestScreenPt = this.props.nearestScreenPt();
+        const TagType = (broken?: boolean) => broken ? "rect" : "circle";
+        const hdl = (control: { X: number, Y: number, I: number }, scale: number, color: string) => {
+            const broken = Cast(this.props.inkDoc.brokenInkIndices, listSpec("number"))?.includes(control.I);
+            const Tag = TagType((control.I === 0 || control.I === inkData.length - 1) && !closed) as keyof JSX.IntrinsicElements;
+            return <Tag key={control.I.toString() + scale}
+                x={control.X - screenSpaceLineWidth * 2 * scale}
+                y={control.Y - screenSpaceLineWidth * 2 * scale}
+                cx={control.X}
+                cy={control.Y}
+                r={screenSpaceLineWidth * 2 * scale}
+                opacity={this.controlUndo ? 0.15 : 1}
+                height={screenSpaceLineWidth * 4 * scale}
+                width={screenSpaceLineWidth * 4 * scale}
+                strokeWidth={screenSpaceLineWidth / 2}
+                stroke={Colors.MEDIUM_BLUE}
+                fill={broken ? Colors.MEDIUM_BLUE : color}
+                onPointerDown={(e: any) => this.onControlDown(e, control.I)}
+                onMouseEnter={() => this.onEnterControl(control.I)}
+                onMouseLeave={this.onLeaveControl}
+                pointerEvents="all"
+                cursor="default"
+            />;
+        };
+        return (<svg>
+            {!nearestScreenPt ? (null) :
+                <circle key={"npt"}
+                    cx={nearestScreenPt.X}
+                    cy={nearestScreenPt.Y}
+                    r={screenSpaceLineWidth * 2}
+                    fill={"#00007777"}
+                    stroke={"#00007777"}
+                    strokeWidth={0}
+                    pointerEvents="none"
+                />
+            }
+            {sreenCtrlPoints.map(control => hdl(control, this._overControl !== control.I ? 1 : 3 / 2, Colors.WHITE))}
+        </svg>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
deleted file mode 100644
index 4df7ee813..000000000
--- a/src/client/views/InkControls.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React = require("react");
-import { action, observable } from "mobx";
-import { observer } from "mobx-react";
-import { Doc } from "../../fields/Doc";
-import { ControlPoint, InkData, PointData } from "../../fields/InkField";
-import { listSpec } from "../../fields/Schema";
-import { Cast } from "../../fields/Types";
-import { setupMoveUpEvents } from "../../Utils";
-import { Transform } from "../util/Transform";
-import { UndoManager } from "../util/UndoManager";
-import { Colors } from "./global/globalEnums";
-import { InkStrokeProperties } from "./InkStrokeProperties";
-
-export interface InkControlProps {
-    inkDoc: Doc;
-    inkCtrlPoints: InkData;
-    screenCtrlPoints: InkData;
-    inkStrokeSamplePts: PointData[];
-    screenStrokeSamplePoints: PointData[];
-    format: number[];
-    ScreenToLocalTransform: () => Transform;
-}
-
-@observer
-export class InkControls extends React.Component<InkControlProps> {
-    @observable private _overControl = -1;
-    @observable private _overAddPoint = -1;
-
-    /**
-     * Handles the movement of a selected control point when the user clicks and drags.
-     * @param controlIndex The index of the currently selected control point.
-     */
-    @action
-    onControlDown = (e: React.PointerEvent, controlIndex: number): void => {
-        if (InkStrokeProperties.Instance) {
-            InkStrokeProperties.Instance.moveControl(0, 0, 1);
-            const controlUndo = UndoManager.StartBatch("DocDecs set radius");
-            const screenScale = this.props.ScreenToLocalTransform().Scale;
-            const order = controlIndex % 4;
-            const handleIndexA = order === 2 ? controlIndex - 1 : controlIndex - 2;
-            const handleIndexB = order === 2 ? controlIndex + 2 : controlIndex + 1;
-            const brokenIndices = Cast(this.props.inkDoc.brokenInkIndices, listSpec("number"));
-            setupMoveUpEvents(this, e,
-                (e: PointerEvent, down: number[], delta: number[]) => {
-                    InkStrokeProperties.Instance?.moveControl(-delta[0] * screenScale, -delta[1] * screenScale, controlIndex);
-                    return false;
-                },
-                () => controlUndo?.end(),
-                action((e: PointerEvent, doubleTap: boolean | undefined) => {
-                    if (doubleTap && brokenIndices && brokenIndices.includes(controlIndex)) {
-                        InkStrokeProperties.Instance?.snapHandleTangent(controlIndex, handleIndexA, handleIndexB);
-                    }
-                }));
-        }
-    }
-
-    /**
-     * Deletes the currently selected point.
-     */
-    @action
-    onDelete = (e: KeyboardEvent) => {
-        if (["-", "Backspace", "Delete"].includes(e.key)) {
-            if (InkStrokeProperties.Instance?.deletePoints()) e.stopPropagation();
-        }
-    }
-
-    /**
-     * Changes the current selected control point.
-     */
-    @action
-    changeCurrPoint = (i: number) => {
-        if (InkStrokeProperties.Instance) {
-            InkStrokeProperties.Instance._currentPoint = i;
-            document.addEventListener("keydown", this.onDelete, true);
-        }
-    }
-
-    /**
-     * Updates whether a user has hovered over a particular control point or point that could be added
-     * on click.
-     */
-    @action onEnterControl = (i: number) => { this._overControl = i; };
-    @action onLeaveControl = () => { this._overControl = -1; };
-    @action onEnterAddPoint = (i: number) => { this._overAddPoint = i; };
-    @action onLeaveAddPoint = () => { this._overAddPoint = -1; };
-
-    render() {
-        const formatInstance = InkStrokeProperties.Instance;
-        if (!formatInstance) return (null);
-
-        // Accessing the current ink's data and extracting all control points.
-        const scrData = this.props.screenCtrlPoints;
-        const sreenCtrlPoints: ControlPoint[] = [];
-        for (let i = 0; i <= scrData.length - 4; i += 4) {
-            sreenCtrlPoints.push({ X: scrData[i].X, Y: scrData[i].Y, I: i });
-            sreenCtrlPoints.push({ X: scrData[i + 3].X, Y: scrData[i + 3].Y, I: i + 3 });
-        }
-
-        const inkData = this.props.inkCtrlPoints;
-        const inkCtrlPts: ControlPoint[] = [];
-        for (let i = 0; i <= inkData.length - 4; i += 4) {
-            inkCtrlPts.push({ X: inkData[i].X, Y: inkData[i].Y, I: i });
-            inkCtrlPts.push({ X: inkData[i + 3].X, Y: inkData[i + 3].Y, I: i + 3 });
-        }
-
-        const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
-        const rectHdlSize = (i: number) => this._overControl === i ? screenSpaceLineWidth * 6 : screenSpaceLineWidth * 4;
-        return (<svg>
-            {/*   should really have just one circle here that represents the neqraest point on the stroke to the users hover point.
-                   This points should be passed as a prop from InkingStroke's UI which should set it in its onPointerOver method  */}
-            {this.props.screenStrokeSamplePoints.map((pts, i) =>
-                <circle key={i}
-                    cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                    cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                    r={screenSpaceLineWidth * 4}
-                    fill={this._overAddPoint === i ? "#00007777" : "transparent"}
-                    stroke={this._overAddPoint === i ? "#00007777" : "transparent"}
-                    strokeWidth={0}
-                    onPointerDown={() => formatInstance?.addPoints(this.props.inkStrokeSamplePts[i].X, this.props.inkStrokeSamplePts[i].Y, this.props.inkStrokeSamplePts, i, inkCtrlPts)}
-                    onMouseEnter={() => this.onEnterAddPoint(i)}
-                    onMouseLeave={this.onLeaveAddPoint}
-                    pointerEvents="all"
-                    cursor="all-scroll"
-                />
-            )}
-            {sreenCtrlPoints.map((control, i) =>
-                <rect key={i}
-                    x={(control.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2 - rectHdlSize(i) / 2}
-                    y={(control.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2 - rectHdlSize(i) / 2}
-                    height={rectHdlSize(i)}
-                    width={rectHdlSize(i)}
-                    strokeWidth={screenSpaceLineWidth / 2}
-                    stroke={Colors.MEDIUM_BLUE}
-                    fill={formatInstance?._currentPoint === control.I ? Colors.MEDIUM_BLUE : Colors.WHITE}
-                    onPointerDown={(e) => {
-                        this.changeCurrPoint(control.I);
-                        this.onControlDown(e, control.I);
-                    }}
-                    onMouseEnter={() => this.onEnterControl(i)}
-                    onMouseLeave={this.onLeaveControl}
-                    pointerEvents="all"
-                    cursor="default"
-                />
-            )}
-        </svg>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
deleted file mode 100644
index afe94cdfb..000000000
--- a/src/client/views/InkHandles.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React = require("react");
-import { action } from "mobx";
-import { observer } from "mobx-react";
-import { Doc } from "../../fields/Doc";
-import { HandleLine, HandlePoint, InkData } from "../../fields/InkField";
-import { List } from "../../fields/List";
-import { listSpec } from "../../fields/Schema";
-import { Cast } from "../../fields/Types";
-import { emptyFunction, setupMoveUpEvents } from "../../Utils";
-import { Transform } from "../util/Transform";
-import { UndoManager } from "../util/UndoManager";
-import { Colors } from "./global/globalEnums";
-import { InkStrokeProperties } from "./InkStrokeProperties";
-
-export interface InkHandlesProps {
-    inkDoc: Doc;
-    data: InkData;
-    format: number[];
-    ScreenToLocalTransform: () => Transform;
-}
-
-@observer
-export class InkHandles extends React.Component<InkHandlesProps> {
-    /**
-     * Handles the movement of a selected handle point when the user clicks and drags.
-     * @param handleNum The index of the currently selected handle point.
-     */
-    onHandleDown = (e: React.PointerEvent, handleIndex: number): void => {
-        if (InkStrokeProperties.Instance) {
-            InkStrokeProperties.Instance.moveControl(0, 0, 1);
-            const controlUndo = UndoManager.StartBatch("DocDecs set radius");
-            const screenScale = this.props.ScreenToLocalTransform().Scale;
-            const order = handleIndex % 4;
-            const oppositeHandleIndex = order === 1 ? handleIndex - 3 : handleIndex + 3;
-            const controlIndex = order === 1 ? handleIndex - 1 : handleIndex + 2;
-            document.addEventListener("keydown", (e: KeyboardEvent) => this.onBreakTangent(e, controlIndex), true);
-            setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => {
-                InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleIndex, oppositeHandleIndex, controlIndex);
-                return false;
-            }, () => controlUndo?.end(), emptyFunction
-            );
-        }
-    }
-
-    /**
-     * Breaks tangent handle movement when ‘Alt’ key is held down. Adds the current handle index and 
-     * its matching (opposite) handle to a list of broken handle indices.
-     * @param handleNum The index of the currently selected handle point.
-     */
-    @action
-    onBreakTangent = (e: KeyboardEvent, controlIndex: number) => {
-        const doc: Doc = this.props.inkDoc;
-        if (["Alt"].includes(e.key)) {
-            e.stopPropagation();
-            if (doc) {
-                const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number")) || new List;
-                if (brokenIndices && !brokenIndices.includes(controlIndex)) {
-                    brokenIndices.push(controlIndex);
-                }
-                doc.brokenInkIndices = brokenIndices;
-            }
-        }
-    }
-
-    render() {
-        const formatInstance = InkStrokeProperties.Instance;
-        if (!formatInstance) return (null);
-
-        // Accessing the current ink's data and extracting all handle points and handle lines.
-        const data = this.props.data;
-        const handlePoints: HandlePoint[] = [];
-        const handleLines: HandleLine[] = [];
-        if (data.length >= 4) {
-            for (let i = 0; i <= data.length - 4; i += 4) {
-                handlePoints.push({ X: data[i + 1].X, Y: data[i + 1].Y, I: i + 1, dot1: i, dot2: i === 0 ? i : i - 1 });
-                handlePoints.push({ X: data[i + 2].X, Y: data[i + 2].Y, I: i + 2, dot1: i + 3, dot2: i === data.length ? i + 3 : i + 4 });
-            }
-            // Adding first and last (single) handle lines.
-            handleLines.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 });
-            handleLines.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 });
-            for (let i = 2; i < data.length - 4; i += 4) {
-                handleLines.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 });
-            }
-        }
-        const [left, top, scaleX, scaleY, strokeWidth, screenSpaceLineWidth] = this.props.format;
-
-        return (
-            <>
-                {handlePoints.map((pts, i) =>
-                    <svg height="10" width="10" key={`hdl${i}`}>
-                        <circle
-                            cx={(pts.X - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            cy={(pts.Y - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                            r={screenSpaceLineWidth * 2}
-                            strokeWidth={0}
-                            fill={Colors.MEDIUM_BLUE}
-                            onPointerDown={(e) => this.onHandleDown(e, pts.I)}
-                            pointerEvents="all"
-                            cursor="default"
-                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
-                    </svg>)}
-                {handleLines.map((pts, i) =>
-                    <svg height="100" width="100" key={`line${i}`}>
-                        <line
-                            x1={(pts.X1 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            y1={(pts.Y1 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                            x2={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            y2={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                            stroke={Colors.MEDIUM_BLUE}
-                            strokeWidth={screenSpaceLineWidth}
-                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
-                        <line
-                            x1={(pts.X2 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            y1={(pts.Y2 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                            x2={(pts.X3 - left - strokeWidth / 2) * scaleX + strokeWidth / 2}
-                            y2={(pts.Y3 - top - strokeWidth / 2) * scaleY + strokeWidth / 2}
-                            stroke={Colors.MEDIUM_BLUE}
-                            strokeWidth={screenSpaceLineWidth}
-                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
-                    </svg>)}
-            </>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/InkStroke.scss b/src/client/views/InkStroke.scss
index 53d27cd24..55e06c6ca 100644
--- a/src/client/views/InkStroke.scss
+++ b/src/client/views/InkStroke.scss
@@ -3,6 +3,7 @@
   position: absolute;
   overflow: visible;
   pointer-events: none;
+  z-index: 2001; // 1 higher than documentdecorations
 
   svg:not(:root) {
     overflow: visible !important;
@@ -18,6 +19,8 @@
   stroke-linecap: round;
   overflow: visible !important;
   transform-origin: top left;
+  width: 100%;
+  height: 100%;
 
   svg:not(:root) {
     overflow: visible !important;
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 42190238e..ee30caa3d 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -1,14 +1,16 @@
+import { Bezier } from "bezier-js";
 import { action, computed, observable, reaction } from "mobx";
-import { Doc, DocListCast, Field, Opt } from "../../fields/Doc";
+import { Doc } from "../../fields/Doc";
 import { Document } from "../../fields/documentSchemas";
-import { InkField, InkData, PointData, ControlPoint, InkTool } from "../../fields/InkField";
+import { InkData, InkField, InkTool, PointData } from "../../fields/InkField";
 import { List } from "../../fields/List";
 import { listSpec } from "../../fields/Schema";
 import { Cast, NumCast } from "../../fields/Types";
 import { DocumentType } from "../documents/DocumentTypes";
+import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { SelectionManager } from "../util/SelectionManager";
 import { undoBatch } from "../util/UndoManager";
-import { CurrentUserUtils } from "../util/CurrentUserUtils";
+import { InkingStroke } from "./InkingStroke";
 
 export class InkStrokeProperties {
     static Instance: InkStrokeProperties | undefined;
@@ -28,11 +30,6 @@ export class InkStrokeProperties {
         return inks.length ? inks : undefined;
     }
 
-    getField(key: string) {
-        return this.selectedInk?.reduce((p, i) =>
-            (p === undefined || (p && p === i.rootDoc[key])) && i.rootDoc[key] !== "0" ? Field.toString(i.rootDoc[key] as Field) : "", undefined as Opt<string>);
-    }
-
     /**
      * Helper function that enables other functions to be applied to a particular ink instance.
      * @param func The inputted function.
@@ -48,14 +45,14 @@ export class InkStrokeProperties {
                     if (ink) {
                         const oldXrange = (xs => ({ coord: NumCast(doc.x), min: Math.min(...xs), max: Math.max(...xs) }))(ink.map(p => p.X));
                         const oldYrange = (ys => ({ coord: NumCast(doc.y), min: Math.min(...ys), max: Math.max(...ys) }))(ink.map(p => p.Y));
-                        const ptsXscale = NumCast(doc._width) / (oldXrange.max - oldXrange.min);
-                        const ptsYscale = NumCast(doc._height) / (oldYrange.max - oldYrange.min);
+                        const ptsXscale = ((NumCast(doc._width) - NumCast(doc.strokeWidth)) / ((oldXrange.max - oldXrange.min) || 1)) || 1;
+                        const ptsYscale = ((NumCast(doc._height) - NumCast(doc.strokeWidth)) / ((oldYrange.max - oldYrange.min) || 1)) || 1;
                         const newPoints = func(doc, ink, ptsXscale, ptsYscale);
                         if (newPoints) {
                             const newXrange = (xs => ({ min: Math.min(...xs), max: Math.max(...xs) }))(newPoints.map(p => p.X));
                             const newYrange = (ys => ({ min: Math.min(...ys), max: Math.max(...ys) }))(newPoints.map(p => p.Y));
-                            doc._width = (newXrange.max - newXrange.min) * ptsXscale;
-                            doc._height = (newYrange.max - newYrange.min) * ptsYscale;
+                            doc._width = (newXrange.max - newXrange.min) * ptsXscale + NumCast(doc.strokeWidth);
+                            doc._height = (newYrange.max - newYrange.min) * ptsYscale + NumCast(doc.strokeWidth);
                             doc.x = (oldXrange.coord + (newXrange.min - oldXrange.min) * ptsXscale);
                             doc.y = (oldYrange.coord + (newYrange.min - oldYrange.min) * ptsYscale);
                             Doc.GetProto(doc).data = new InkField(newPoints);
@@ -70,66 +67,24 @@ export class InkStrokeProperties {
 
     /**
      * Adds a new control point to the ink instance when editing its format.
-     * @param index The index of the new point.
+     * @param t T-Value of new control point
+     * @param i index of first control point of segment being split
      * @param control The list of all control points of the ink.
      */
     @undoBatch
     @action
-    addPoints = (x: number, y: number, points: InkData, index: number, controls: { X: number, Y: number }[]) => {
+    addPoints = (t: number, i: number, controls: { X: number, Y: number }[]) => {
         this.applyFunction((doc: Doc, ink: InkData) => {
-            const newControl = { X: x, Y: y };
-            const newPoints: InkData = [];
-            let [counter, start, end] = [0, 0, 0];
-            for (let k = 0; k < points.length; k++) {
-                if (end === 0) {
-                    controls.forEach((control) => {
-                        if (control.X === points[k].X && control.Y === points[k].Y) {
-                            if (k < index) {
-                                counter++;
-                                start = k;
-                            } else if (k > index) {
-                                end = k;
-                            }
-                        }
-                    });
-                }
-            }
-            if (end === 0) end = points.length - 1;
-            // Index of new control point with regards to the ink data.
-            const newIndex = Math.floor(counter / 2) * 4 + 2;
-            // Creating new ink data with the new control point and handle points inputted.
-            for (let i = 0; i < ink.length; i++) {
-                if (i === newIndex) {
-                    const [handleA, handleB] = this.getNewHandlePoints(points.slice(start, index + 1), points.slice(index, end), newControl);
-                    newPoints.push(handleA, newControl, newControl, handleB);
-                    // Adjusting the magnitude of the left handle line of the right neighboring control point.
-                    const [rightControl, rightHandle] = [points[end], ink[i]];
-                    const scaledVector = this.getScaledHandlePoint(false, start, end, index, rightControl, rightHandle);
-                    rightHandle && newPoints.push({ X: rightControl.X - scaledVector.X, Y: rightControl.Y - scaledVector.Y });
-                } else if (i === newIndex - 1) {
-                    // Adjusting the magnitude of the right handle line of the left neighboring control point.
-                    const [leftControl, leftHandle] = [points[start], ink[i]];
-                    const scaledVector = this.getScaledHandlePoint(true, start, end, index, leftControl, leftHandle);
-                    leftHandle && newPoints.push({ X: leftControl.X - scaledVector.X, Y: leftControl.Y - scaledVector.Y });
-                } else {
-                    ink[i] && newPoints.push({ X: ink[i].X, Y: ink[i].Y });
-                }
+            const array = [controls[i], controls[i + 1], controls[i + 2], controls[i + 3]];
+            const newsegs = new Bezier(array.map(p => ({ x: p.X, y: p.Y }))).split(t);
+            const splicepts = [...newsegs.left.points, ...newsegs.right.points];
+            controls.splice(i, 4, ...splicepts.map(p => ({ X: p.x, Y: p.y })));
 
-            }
-            let brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
             // Updating the indices of the control points whose handle tangency has been broken.
-            if (brokenIndices) {
-                brokenIndices = new List(brokenIndices.map((control) => {
-                    if (control >= newIndex) {
-                        return control + 4;
-                    } else {
-                        return control;
-                    }
-                }));
-            }
-            doc.brokenInkIndices = brokenIndices;
+            doc.brokenInkIndices = new List(Cast(doc.brokenInkIndices, listSpec("number"), []).map(control => control > i ? control + 4 : control));
             this._currentPoint = -1;
-            return newPoints;
+
+            return controls;
         });
     }
 
@@ -143,8 +98,7 @@ export class InkStrokeProperties {
         const prevSize = end - start;
         const newSize = isLeft ? index - start : end - index;
         const handleVector = { X: control.X - handle.X, Y: control.Y - handle.Y };
-        const scaledVector = { X: handleVector.X * (newSize / prevSize), Y: handleVector.Y * (newSize / prevSize) };
-        return scaledVector;
+        return { X: handleVector.X * (newSize / prevSize), Y: handleVector.Y * (newSize / prevSize) };
     }
 
     /**
@@ -192,22 +146,16 @@ export class InkStrokeProperties {
     deletePoints = () => this.applyFunction((doc: Doc, ink: InkData) => {
         const newPoints: { X: number, Y: number }[] = [];
         const toRemove = Math.floor(((this._currentPoint + 2) / 4));
+        const last = this._currentPoint === ink.length - 1;
         for (let i = 0; i < ink.length; i++) {
             if (Math.floor((i + 2) / 4) !== toRemove && (toRemove !== 0 || i > 3)) {
                 newPoints.push({ X: ink[i].X, Y: ink[i].Y });
             }
         }
+        doc.brokenInkIndices = new List(Cast(doc.brokenInkIndices, listSpec("number"), []).map(control => control >= toRemove * 4 ? control - 4 : control));
+        if (last) newPoints.splice(newPoints.length - 3, 2);
         this._currentPoint = -1;
-        if (newPoints.length < 4) return undefined;
-        if (newPoints.length === 4) {
-            const newerPoints: { X: number, Y: number }[] = [];
-            newerPoints.push({ X: newPoints[0].X, Y: newPoints[0].Y });
-            newerPoints.push({ X: newPoints[0].X, Y: newPoints[0].Y });
-            newerPoints.push({ X: newPoints[3].X, Y: newPoints[3].Y });
-            newerPoints.push({ X: newPoints[3].X, Y: newPoints[3].Y });
-            return newerPoints;
-        }
-        return newPoints;
+        return newPoints.length < 4 ? undefined : newPoints;
     }, true)
 
     /**
@@ -221,11 +169,11 @@ export class InkStrokeProperties {
             const oldXrange = (xs => ({ coord: NumCast(doc.x), min: Math.min(...xs), max: Math.max(...xs) }))(ink.map(p => p.X));
             const oldYrange = (ys => ({ coord: NumCast(doc.y), min: Math.min(...ys), max: Math.max(...ys) }))(ink.map(p => p.Y));
             const centerPoint = { X: (oldXrange.min + oldXrange.max) / 2, Y: (oldYrange.min + oldYrange.max) / 2 };
-            const newPoints: { X: number, Y: number }[] = [];
-            ink.map(i => ({ X: i.X - centerPoint.X, Y: i.Y - centerPoint.Y })).forEach(i => {
-                const newX = Math.cos(angle) * i.X - Math.sin(angle) * i.Y;
-                const newY = Math.sin(angle) * i.X + Math.cos(angle) * i.Y;
-                newPoints.push({ X: newX + centerPoint.X, Y: newY + centerPoint.Y });
+            const newPoints = ink.map(i => {
+                const pt = { X: i.X - centerPoint.X, Y: i.Y - centerPoint.Y };
+                const newX = Math.cos(angle) * pt.X - Math.sin(angle) * pt.Y * yScale / xScale;
+                const newY = Math.sin(angle) * pt.X * xScale / yScale + Math.cos(angle) * pt.Y;
+                return { X: newX + centerPoint.X, Y: newY + centerPoint.Y };
             });
             doc.rotation = NumCast(doc.rotation) + angle;
             return newPoints;
@@ -237,29 +185,85 @@ export class InkStrokeProperties {
      */
     @undoBatch
     @action
-    moveControl = (deltaX: number, deltaY: number, controlIndex: number) =>
+    moveControlPtHandle = (deltaX: number, deltaY: number, controlIndex: number) =>
         this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => {
-            const newPoints: { X: number, Y: number }[] = [];
             const order = controlIndex % 4;
-            for (var i = 0; i < ink.length; i++) {
+            const closed = InkingStroke.IsClosed(ink);
+
+            const newpts = ink.map((pt, i) => {
                 const leftHandlePoint = order === 0 && i === controlIndex + 1;
                 const rightHandlePoint = order === 0 && controlIndex !== 0 && i === controlIndex - 2;
                 if (controlIndex === i ||
                     leftHandlePoint ||
                     rightHandlePoint ||
                     (order === 0 && controlIndex !== 0 && i === controlIndex - 1) ||
+                    ((order === 0 || order === 3) && (controlIndex === 0 || controlIndex === ink.length - 1) && (i === 1 || i === ink.length - 2) && closed) ||
                     (order === 3 && i === controlIndex - 1) ||
                     (order === 3 && controlIndex !== ink.length - 1 && i === controlIndex + 1) ||
                     (order === 3 && controlIndex !== ink.length - 1 && i === controlIndex + 2) ||
                     ((ink[0].X === ink[ink.length - 1].X) && (ink[0].Y === ink[ink.length - 1].Y) && (i === 0 || i === ink.length - 1) && (controlIndex === 0 || controlIndex === ink.length - 1))) {
-                    newPoints.push({ X: ink[i].X - deltaX / xScale, Y: ink[i].Y - deltaY / yScale });
-                } else {
-                    newPoints.push({ X: ink[i].X, Y: ink[i].Y });
+                    return ({ X: pt.X + deltaX / xScale, Y: pt.Y + deltaY / yScale });
                 }
-            }
-            return newPoints;
+                return pt;
+            });
+            return newpts;
         })
 
+
+    public static nearestPtToStroke(ctrlPoints: { X: number, Y: number }[], refPt: { X: number, Y: number }, excludeSegs?: number[]) {
+        var distance = Number.MAX_SAFE_INTEGER;
+        var nearestT = -1;
+        var nearestSeg = -1;
+        var nearestPt = { X: 0, Y: 0 };
+        for (var i = 0; i < ctrlPoints.length - 3; i += 4) {
+            if (excludeSegs?.includes(i)) continue;
+            const array = [ctrlPoints[i], ctrlPoints[i + 1], ctrlPoints[i + 2], ctrlPoints[i + 3]];
+            const point = new Bezier(array.map(p => ({ x: p.X, y: p.Y }))).project({ x: refPt.X, y: refPt.Y });
+            if (point.t !== undefined) {
+                const dist = Math.sqrt((point.x - refPt.X) * (point.x - refPt.X) + (point.y - refPt.Y) * (point.y - refPt.Y));
+                if (dist < distance) {
+                    distance = dist;
+                    nearestT = point.t;
+                    nearestSeg = i;
+                    nearestPt = { X: point.x, Y: point.y };
+                }
+            }
+        }
+        return { distance, nearestT, nearestSeg, nearestPt };
+    }
+
+    /**
+     * Handles the movement/scaling of a control point.
+     */
+    snapControl = (inkDoc: Doc, controlIndex: number) => {
+        const ink = Cast(inkDoc.data, InkField)?.inkData;
+        if (ink) {
+            const closed = InkingStroke.IsClosed(ink);
+
+            // figure out which segments we don't want to snap to - avoid the dragged control point's segment and the next and prev segments (when they exist -- ie not for endpoints of unclosed curve)
+            const thisseg = Math.floor(controlIndex / 4) * 4;
+            const which = controlIndex % 4;
+            const nextseg = which > 1 && (closed || controlIndex < ink.length - 1) ? (thisseg + 4) % ink.length : -1;
+            const prevseg = which < 2 && (closed || controlIndex > 0) ? (thisseg - 4 + ink.length) % ink.length : -1;
+            const refPt = ink[controlIndex];
+            const { nearestPt } = InkStrokeProperties.nearestPtToStroke(ink, refPt, [thisseg, prevseg, nextseg]);
+
+            // nearestPt is in inkDoc coordinates -- we need to compute the distance in screen coordinates.
+            // so we scale the X & Y distances by the internal ink scale factor and then transform the final distance by the ScreenToLocal.Scale of the inkDoc itself.
+            const oldXrange = (xs => ({ coord: NumCast(inkDoc.x), min: Math.min(...xs), max: Math.max(...xs) }))(ink.map(p => p.X));
+            const oldYrange = (ys => ({ coord: NumCast(inkDoc.y), min: Math.min(...ys), max: Math.max(...ys) }))(ink.map(p => p.Y));
+            const ptsXscale = ((NumCast(inkDoc._width) - NumCast(inkDoc.strokeWidth)) / ((oldXrange.max - oldXrange.min) || 1)) || 1;
+            const ptsYscale = ((NumCast(inkDoc._height) - NumCast(inkDoc.strokeWidth)) / ((oldYrange.max - oldYrange.min) || 1)) || 1;
+            const near = Math.sqrt((nearestPt.X - refPt.X) * (nearestPt.X - refPt.X) * ptsXscale * ptsXscale +
+                (nearestPt.Y - refPt.Y) * (nearestPt.Y - refPt.Y) * ptsYscale * ptsYscale);
+
+            if (near / (this.selectedInk?.lastElement().props.ScreenToLocalTransform().Scale || 1) < 10) {
+                return this.moveControlPtHandle((nearestPt.X - ink[controlIndex].X) * ptsXscale, (nearestPt.Y - ink[controlIndex].Y) * ptsYscale, controlIndex);
+            }
+        }
+        return false;
+    }
+
     /**
      * Snaps a control point with broken tangency back to synced rotation.
      * @param handleIndexA The handle point that retains its current position.
@@ -267,21 +271,16 @@ export class InkStrokeProperties {
      */
     snapHandleTangent = (controlIndex: number, handleIndexA: number, handleIndexB: number) => {
         this.applyFunction((doc: Doc, ink: InkData) => {
-            const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
-            if (brokenIndices) {
-                const newBrokenIndices = new List;
-                brokenIndices.forEach(brokenIndex => {
-                    if (brokenIndex !== controlIndex) {
-                        newBrokenIndices.push(brokenIndex);
-                    }
-                });
-                doc.brokenInkIndices = newBrokenIndices;
+            const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"), []);
+            const ind = brokenIndices.findIndex(value => value === controlIndex);
+            if (ind !== -1) {
+                brokenIndices.splice(ind, 1);
                 const [controlPoint, handleA, handleB] = [ink[controlIndex], ink[handleIndexA], ink[handleIndexB]];
                 const oppositeHandleA = this.rotatePoint(handleA, controlPoint, Math.PI);
                 const angleDifference = this.angleChange(handleB, oppositeHandleA, controlPoint);
-                const newHandleB = this.rotatePoint(handleB, controlPoint, angleDifference);
-                ink[handleIndexB] = newHandleB;
-                return ink;
+                const inkCopy = ink.slice(); // have to make a new copy of the array to keep from corrupting undo/redo. without slicing, the same array will be stored in each undo step meaning earlier undo steps will be inadvertently updated to store the latest value.
+                inkCopy[handleIndexB] = this.rotatePoint(handleB, controlPoint, angleDifference);
+                return inkCopy;
             }
         });
     }
@@ -294,9 +293,7 @@ export class InkStrokeProperties {
         const rotatedTarget = { X: target.X - origin.X, Y: target.Y - origin.Y };
         const newX = Math.cos(angle) * rotatedTarget.X - Math.sin(angle) * rotatedTarget.Y;
         const newY = Math.sin(angle) * rotatedTarget.X + Math.cos(angle) * rotatedTarget.Y;
-        rotatedTarget.X = newX + origin.X;
-        rotatedTarget.Y = newY + origin.Y;
-        return rotatedTarget;
+        return { X: newX + origin.X, Y: newY + origin.Y };
     }
 
     /**
@@ -307,11 +304,11 @@ export class InkStrokeProperties {
     angleBetweenTwoVectors = (vectorA: PointData, vectorB: PointData) => {
         const magnitudeA = Math.sqrt(vectorA.X * vectorA.X + vectorA.Y * vectorA.Y);
         const magnitudeB = Math.sqrt(vectorB.X * vectorB.X + vectorB.Y * vectorB.Y);
+        if (magnitudeA === 0 || magnitudeB === 0) return 0;
         // Normalizing the vectors.
         vectorA = { X: vectorA.X / magnitudeA, Y: vectorA.Y / magnitudeA };
         vectorB = { X: vectorB.X / magnitudeB, Y: vectorB.Y / magnitudeB };
-        const dotProduct = vectorB.X * vectorA.X + vectorB.Y * vectorA.Y;
-        return Math.acos(dotProduct);
+        return Math.acos(vectorB.X * vectorA.X + vectorB.Y * vectorA.Y);
     }
 
     /**
@@ -333,20 +330,23 @@ export class InkStrokeProperties {
      */
     @undoBatch
     @action
-    moveHandle = (deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) =>
+    moveTangentHandle = (deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) =>
         this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => {
+            const closed = InkingStroke.IsClosed(ink);
             const oldHandlePoint = ink[handleIndex];
-            let oppositeHandlePoint = ink[oppositeHandleIndex];
+            const oppositeHandlePoint = ink[oppositeHandleIndex];
             const controlPoint = ink[controlIndex];
             const newHandlePoint = { X: ink[handleIndex].X - deltaX / xScale, Y: ink[handleIndex].Y - deltaY / yScale };
-            ink[handleIndex] = newHandlePoint;
+            const inkCopy = ink.slice();
+            inkCopy[handleIndex] = newHandlePoint;
             const brokenIndices = Cast(doc.brokenInkIndices, listSpec("number"));
+            const equivIndex = closed ? (controlIndex === 0 ? ink.length - 1 : controlIndex === ink.length - 1 ? 0 : -1) : -1;
             // Rotate opposite handle if user hasn't held 'Alt' key or not first/final control (which have only 1 handle).
-            if ((!brokenIndices || !brokenIndices?.includes(controlIndex)) && handleIndex !== 1 && handleIndex !== ink.length - 2) {
+            if ((!brokenIndices || (!brokenIndices?.includes(controlIndex) && !brokenIndices?.includes(equivIndex))) &&
+                (closed || (handleIndex !== 1 && handleIndex !== ink.length - 2))) {
                 const angle = this.angleChange(oldHandlePoint, newHandlePoint, controlPoint);
-                oppositeHandlePoint = this.rotatePoint(oppositeHandlePoint, controlPoint, angle);
-                ink[oppositeHandleIndex] = oppositeHandlePoint;
+                inkCopy[oppositeHandleIndex] = this.rotatePoint(oppositeHandlePoint, controlPoint, angle);
             }
-            return ink;
+            return inkCopy;
         })
 }
\ No newline at end of file
diff --git a/src/client/views/InkTangentHandles.tsx b/src/client/views/InkTangentHandles.tsx
new file mode 100644
index 000000000..df5bebf31
--- /dev/null
+++ b/src/client/views/InkTangentHandles.tsx
@@ -0,0 +1,129 @@
+import React = require("react");
+import { action } from "mobx";
+import { observer } from "mobx-react";
+import { Doc } from "../../fields/Doc";
+import { HandleLine, HandlePoint, InkData } from "../../fields/InkField";
+import { List } from "../../fields/List";
+import { listSpec } from "../../fields/Schema";
+import { Cast } from "../../fields/Types";
+import { emptyFunction, setupMoveUpEvents } from "../../Utils";
+import { Transform } from "../util/Transform";
+import { UndoManager } from "../util/UndoManager";
+import { Colors } from "./global/globalEnums";
+import { InkStrokeProperties } from "./InkStrokeProperties";
+import { InkingStroke } from "./InkingStroke";
+
+export interface InkHandlesProps {
+    inkDoc: Doc;
+    screenCtrlPoints: InkData;
+    screenSpaceLineWidth: number;
+    ScreenToLocalTransform: () => Transform;
+}
+
+@observer
+export class InkTangentHandles extends React.Component<InkHandlesProps> {
+    /**
+     * Handles the movement of a selected handle point when the user clicks and drags.
+     * @param handleNum The index of the currently selected handle point.
+     */
+    onHandleDown = (e: React.PointerEvent, handleIndex: number): void => {
+        if (InkStrokeProperties.Instance) {
+            var controlUndo: UndoManager.Batch | undefined;
+            const screenScale = this.props.ScreenToLocalTransform().Scale;
+            const order = handleIndex % 4;
+            const oppositeHandleRawIndex = order === 1 ? handleIndex - 3 : handleIndex + 3;
+            const oppositeHandleIndex = (oppositeHandleRawIndex < 0 ? this.props.screenCtrlPoints.length + oppositeHandleRawIndex : oppositeHandleRawIndex) % this.props.screenCtrlPoints.length;
+            const controlIndex = (order === 1 ? handleIndex - 1 : handleIndex + 2) % this.props.screenCtrlPoints.length;
+            setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => {
+                if (!controlUndo) controlUndo = UndoManager.StartBatch("DocDecs move tangent");
+                if (e.altKey) this.onBreakTangent(controlIndex);
+                InkStrokeProperties.Instance?.moveTangentHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleIndex, oppositeHandleIndex, controlIndex);
+                return false;
+            }, () => {
+                controlUndo?.end();
+                UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
+            }, emptyFunction
+            );
+        }
+    }
+
+    /**
+     * Breaks tangent handle movement when ‘Alt’ key is held down. Adds the current handle index and 
+     * its matching (opposite) handle to a list of broken handle indices.
+     * @param handleNum The index of the currently selected handle point.
+     */
+    @action
+    onBreakTangent = (controlIndex: number) => {
+        const closed = InkingStroke.IsClosed(this.props.screenCtrlPoints);
+        const brokenIndices = Cast(this.props.inkDoc.brokenInkIndices, listSpec("number"));
+        if (!brokenIndices?.includes(controlIndex) &&
+            ((controlIndex > 0 && controlIndex < this.props.screenCtrlPoints.length - 1) || closed)) {
+            if (brokenIndices) brokenIndices.push(controlIndex);
+            else this.props.inkDoc.brokenInkIndices = new List<number>([controlIndex]);
+        }
+    }
+
+    render() {
+        const formatInstance = InkStrokeProperties.Instance;
+        if (!formatInstance) return (null);
+
+        // Accessing the current ink's data and extracting all handle points and handle lines.
+        const data = this.props.screenCtrlPoints;
+        const tangentHandles: HandlePoint[] = [];
+        const tangentLines: HandleLine[] = [];
+        const closed = InkingStroke.IsClosed(data);
+        if (data.length >= 4) {
+            for (let i = 0; i <= data.length - 4; i += 4) {
+                tangentHandles.push({ ...data[i + 1], I: i + 1, dot1: i, dot2: i === 0 ? (closed ? data.length - 1 : i) : i - 1 });
+                tangentHandles.push({ ...data[i + 2], I: i + 2, dot1: i + 3, dot2: i === data.length ? (closed ? (i + 4) % data.length : i + 3) : i + 4 });
+            }
+            // Adding first and last (single) handle lines.
+            if (closed) {
+                tangentLines.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: data.length - 1 });
+            }
+            else {
+                tangentLines.push({ X1: data[0].X, Y1: data[0].Y, X2: data[0].X, Y2: data[0].Y, X3: data[1].X, Y3: data[1].Y, dot1: 0, dot2: 0 });
+                tangentLines.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 });
+            }
+            for (let i = 2; i < data.length - 4; i += 4) {
+                tangentLines.push({ X1: data[i].X, Y1: data[i].Y, X2: data[i + 1].X, Y2: data[i + 1].Y, X3: data[i + 3].X, Y3: data[i + 3].Y, dot1: i + 1, dot2: i + 2 });
+            }
+        }
+        const screenSpaceLineWidth = this.props.screenSpaceLineWidth;
+
+        return (
+            <>
+                {tangentHandles.map((pts, i) =>
+                    <svg height="10" width="10" key={`hdl${i}`}>
+                        <circle
+                            cx={pts.X}
+                            cy={pts.Y}
+                            r={screenSpaceLineWidth * 2}
+                            fill={Colors.MEDIUM_BLUE}
+                            strokeWidth={1}
+                            stroke={Colors.MEDIUM_BLUE}
+                            onPointerDown={e => this.onHandleDown(e, pts.I)}
+                            pointerEvents="all"
+                            cursor="default"
+                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />
+                    </svg>)}
+                {tangentLines.map((pts, i) => {
+                    const tangentLine = (x1: number, y1: number, x2: number, y2: number) =>
+                        <line
+                            x1={x1}
+                            y1={y1}
+                            x2={x2}
+                            y2={y2}
+                            stroke={Colors.MEDIUM_BLUE}
+                            strokeDasharray={"1 1"}
+                            strokeWidth={1}
+                            display={(pts.dot1 === formatInstance._currentPoint || pts.dot2 === formatInstance._currentPoint) ? "inherit" : "none"} />;
+                    return <svg height="100" width="100" key={`line${i}`}>
+                        {tangentLine(pts.X1, pts.Y1, pts.X2, pts.Y2)}
+                        {tangentLine(pts.X2, pts.Y2, pts.X3, pts.Y3)}
+                    </svg>;
+                })}
+            </>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index ca39bdaa1..752db1413 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -1,43 +1,51 @@
 import React = require("react");
+import { Bezier } from "bezier-js";
 import { action, IReactionDisposer, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../fields/Doc";
 import { documentSchema } from "../../fields/documentSchemas";
 import { InkData, InkField, InkTool } from "../../fields/InkField";
 import { makeInterface } from "../../fields/Schema";
-import { Cast, NumCast, StrCast } from "../../fields/Types";
+import { Cast, NumCast, StrCast, BoolCast } from "../../fields/Types";
 import { TraceMobx } from "../../fields/util";
 import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../Utils";
 import { CognitiveServices } from "../cognitive_services/CognitiveServices";
 import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { InteractionUtils } from "../util/InteractionUtils";
-import { Scripting } from "../util/Scripting";
 import { ContextMenu } from "./ContextMenu";
 import { ViewBoxBaseComponent } from "./DocComponent";
 import { Colors } from "./global/globalEnums";
-import { InkControls } from "./InkControls";
-import { InkHandles } from "./InkHandles";
-import { GestureOverlay } from "./GestureOverlay";
-import { isThisTypeNode } from "typescript";
+import { InkControlPtHandles } from "./InkControlPtHandles";
 import "./InkStroke.scss";
 import { InkStrokeProperties } from "./InkStrokeProperties";
+import { InkTangentHandles } from "./InkTangentHandles";
 import { FieldView, FieldViewProps } from "./nodes/FieldView";
+import { SnappingManager } from "../util/SnappingManager";
+import Color = require("color");
 
 type InkDocument = makeInterface<[typeof documentSchema]>;
 const InkDocument = makeInterface(documentSchema);
 
 @observer
 export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>(InkDocument) {
+    public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); }
     static readonly MaskDim = 50000;
+    public static IsClosed(inkData: InkData) {
+        return inkData && inkData.lastElement().X === inkData[0].X && inkData.lastElement().Y === inkData[0].Y;
+    }
     @observable private _properties?: InkStrokeProperties;
     _handledClick = false; // flag denoting whether ink stroke has handled a psuedo-click onPointerUp so that the real onClick event can be stopPropagated
     _selDisposer: IReactionDisposer | undefined;
 
+    @observable _nearestT: number | undefined;
+    @observable _nearestSeg: number | undefined;
+    @observable _nearestScrPt: { X: number, Y: number } | undefined;
+    @observable _inkSamplePts: { X: number, Y: number }[] | undefined;
+
     constructor(props: FieldViewProps & InkDocument) {
         super(props);
 
         this._properties = InkStrokeProperties.Instance;
-        // this._previousColor = ActiveInkColor();
     }
 
     componentDidMount() {
@@ -49,10 +57,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         this._selDisposer?.();
     }
 
-    public static LayoutString(fieldStr: string) {
-        return FieldView.LayoutString(InkingStroke, fieldStr);
-    }
-
     analyzeStrokes() {
         const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
         CognitiveServices.Inking.Appliers.ConcatenateHandwriting(this.dataDoc, ["inkAnalysis", "handwriting"], [data]);
@@ -65,13 +69,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         inkDoc.color = "#9b9b9bff";
         inkDoc._stayInCollection = inkDoc.isInkMask ? true : undefined;
     });
-
-    onClick = (e: React.MouseEvent) => {
-        if (this._handledClick) {
-            e.stopPropagation(); //stop the event so that docView won't open the lightbox
-        }
-    }
-
     /**
      * Handles the movement of the entire ink object when the user clicks and drags.
      */
@@ -83,7 +80,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                     doubleTap = doubleTap || this.props.docViewPath().lastElement()?.docView?._pendingDoubleClick;
                     if (doubleTap && this._properties) {
                         this._properties._controlButton = true;
+                        InkStrokeProperties.Instance && (InkStrokeProperties.Instance._currentPoint = -1);
                         this._handledClick = true;  // mark the double-click pseudo pointerevent so we can block the real mouse event from propagating to DocumentView
+                    } else if (this._properties?._controlButton) {
+                        this._nearestT && this._nearestSeg !== undefined && InkStrokeProperties.Instance?.addPoints(this._nearestT, this._nearestSeg, this.inkScaledData().inkData.slice());
                     }
                 }), this._properties?._controlButton, this._properties?._controlButton
             );
@@ -106,13 +106,10 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             // this._previousColor = ActiveInkColor();
             SetActiveInkColor("rgba(245, 230, 95, 0.75)");
         }
-        // } else {
-        //     SetActiveInkColor(this._previousColor);
-        // }
     }
 
     inkScaledData = () => {
-        const inkData: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
+        const inkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
         const inkStrokeWidth = NumCast(this.rootDoc.strokeWidth, 1);
         const inkTop = Math.min(...inkData.map(p => p.Y)) - inkStrokeWidth / 2;
         const inkBottom = Math.max(...inkData.map(p => p.Y)) + inkStrokeWidth / 2;
@@ -127,76 +124,92 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             inkLeft,
             inkWidth,
             inkHeight,
-            inkScaleX: inkHeight === inkStrokeWidth ? 1 : (this.props.PanelWidth() - inkStrokeWidth) / (inkWidth - inkStrokeWidth),
-            inkScaleY: inkWidth === inkStrokeWidth ? 1 : (this.props.PanelHeight() - inkStrokeWidth) / (inkHeight - inkStrokeWidth)
+            inkScaleX: ((this.props.PanelWidth() - inkStrokeWidth) / ((inkWidth - inkStrokeWidth) || 1) || 1),
+            inkScaleY: ((this.props.PanelHeight() - inkStrokeWidth) / ((inkHeight - inkStrokeWidth) || 1) || 1)
         };
     }
 
+    @action
+    onPointerMove = (e: React.PointerEvent) => {
+        const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
+        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(
+            (point.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2,
+            (point.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2)).map(p => ({ X: p[0], Y: p[1] }));
+        const { distance, nearestT, nearestSeg, nearestPt } = InkStrokeProperties.nearestPtToStroke(screenPts, { X: e.clientX, Y: e.clientY });
+
+        this._nearestT = nearestT;
+        this._nearestSeg = nearestSeg;
+        this._nearestScrPt = nearestPt;
+    }
+
+
+    nearestScreenPt = () => this._nearestScrPt;
     componentUI = (boundsLeft: number, boundsTop: number) => {
         const inkDoc = this.props.Document;
         const screenSpaceCenterlineStrokeWidth = 3;  // the width of the blue line widget that shows the centerline of the ink stroke
         const { inkData, inkScaleX, inkScaleY, inkStrokeWidth, inkTop, inkLeft } = this.inkScaledData();
 
         const screenInkWidth = this.props.ScreenToLocalTransform().inverse().transformDirection(inkStrokeWidth, inkStrokeWidth);
-        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(point.X, point.Y)).map(p => ({ X: p[0], Y: p[1] }));
-        const screenTop = Math.min(...screenPts.map(p => p.Y)) - screenInkWidth[0] / 2;
-        const screenLeft = Math.min(...screenPts.map(p => p.X)) - screenInkWidth[0] / 2;
-        const screenOrigin = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-
-        const screenSpaceSamplePoints = InteractionUtils.CreatePoints(screenPts, screenLeft, screenTop, StrCast(inkDoc.strokeColor, "none"), screenInkWidth[0], screenSpaceCenterlineStrokeWidth,
-            StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker),
-            StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), inkScaleX, inkScaleY, "", "none", this.props.isSelected() && inkStrokeWidth <= 5, false);
-        const inkSpaceSamplePoints = InteractionUtils.CreatePoints(inkData, inkLeft, inkTop, StrCast(inkDoc.strokeColor, "none"), inkStrokeWidth, screenSpaceCenterlineStrokeWidth,
-            StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker),
-            StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), 1, 1, "", "none", this.props.isSelected() && inkStrokeWidth <= 5, false);
+        const screenPts = inkData.map(point => this.props.ScreenToLocalTransform().inverse().transformPoint(
+            (point.X - inkLeft - inkStrokeWidth / 2) * inkScaleX + inkStrokeWidth / 2,
+            (point.Y - inkTop - inkStrokeWidth / 2) * inkScaleY + inkStrokeWidth / 2)).map(p => ({ X: p[0], Y: p[1] }));
+        const screenHdlPts = screenPts;
 
-        return <div className="inkstroke-UI" style={{
-            left: screenOrigin[0],
-            top: screenOrigin[1],
-            clip: `rect(${boundsTop - screenOrigin[1]}px, 10000px, 10000px, ${boundsLeft - screenOrigin[0]}px)`
+        const startMarker = StrCast(this.layoutDoc.strokeStartMarker);
+        const endMarker = StrCast(this.layoutDoc.strokeEndMarker);
+        return SnappingManager.GetIsDragging() ? (null) : <div className="inkstroke-UI" style={{
+            clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)`
         }} >
-            {InteractionUtils.CreatePolyline(screenPts, screenLeft, screenTop, Colors.MEDIUM_BLUE, screenInkWidth[0], screenSpaceCenterlineStrokeWidth,
-                StrCast(inkDoc.strokeBezier), StrCast(inkDoc.fillColor, "none"),
-                StrCast(inkDoc.strokeStartMarker), StrCast(inkDoc.strokeEndMarker),
-                StrCast(inkDoc.strokeDash), inkScaleX, inkScaleY, "", "none", 1.0, false)}
-            {this._properties?._controlButton ?
+            {!this._properties?._controlButton ? (null) :
                 <>
-                    <InkControls
+                    {InteractionUtils.CreatePolyline(screenPts, 0, 0, Colors.MEDIUM_BLUE, screenInkWidth[0], screenSpaceCenterlineStrokeWidth,
+                        StrCast(inkDoc.strokeLineJoin), StrCast(this.layoutDoc.strokeLineCap), StrCast(inkDoc.strokeBezier),
+                        "none", startMarker, endMarker, StrCast(inkDoc.strokeDash), 1, 1, "", "none", 1.0, false)}
+                    <InkControlPtHandles
                         inkDoc={inkDoc}
                         inkCtrlPoints={inkData}
-                        screenCtrlPoints={screenPts}
-                        inkStrokeSamplePts={inkSpaceSamplePoints}
-                        screenStrokeSamplePoints={screenSpaceSamplePoints}
-                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], screenSpaceCenterlineStrokeWidth]}
+                        screenCtrlPoints={screenHdlPts}
+                        nearestScreenPt={this.nearestScreenPt}
+                        screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
-                    <InkHandles
+                    <InkTangentHandles
                         inkDoc={inkDoc}
-                        data={screenPts}
-                        format={[screenLeft, screenTop, inkScaleX, inkScaleY, screenInkWidth[0], screenSpaceCenterlineStrokeWidth]}
+                        screenCtrlPoints={screenHdlPts}
+                        screenSpaceLineWidth={screenSpaceCenterlineStrokeWidth}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
-                </> : ""}
+                </>}
         </div>;
     }
 
     render() {
         TraceMobx();
-        // Extracting the ink data and formatting information of the current ink stroke.
-        const inkDoc: Doc = this.layoutDoc;
-
         const { inkData, inkStrokeWidth, inkLeft, inkTop, inkScaleX, inkScaleY, inkWidth, inkHeight } = this.inkScaledData();
 
-        const strokeColor = StrCast(this.layoutDoc.color, "");
-        const dotsize = Math.max(inkWidth * inkScaleX, inkHeight * inkScaleY) / 40;
+        const startMarker = StrCast(this.layoutDoc.strokeStartMarker);
+        const endMarker = StrCast(this.layoutDoc.strokeEndMarker);
+        const closed = InkingStroke.IsClosed(inkData);
+        const fillColor = StrCast(this.layoutDoc.fillColor, "transparent");
+        const strokeColor = !closed && fillColor && fillColor !== "transparent" ? fillColor : StrCast(this.layoutDoc.color);
 
         // Visually renders the polygonal line made by the user.
-        const inkLine = InteractionUtils.CreatePolyline(inkData, inkLeft, inkTop, strokeColor, inkStrokeWidth, inkStrokeWidth, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), StrCast(this.layoutDoc.strokeStartMarker),
-            StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), inkScaleX, inkScaleY, "", "none", 1.0, false);
+        const inkLine = InteractionUtils.CreatePolyline(inkData, inkLeft, inkTop, strokeColor, inkStrokeWidth, inkStrokeWidth,
+            StrCast(this.layoutDoc.strokeLineJoin), StrCast(this.layoutDoc.strokeLineCap),
+            StrCast(this.layoutDoc.strokeBezier), !closed ? "none" : fillColor === "transparent" ? "none" : fillColor, startMarker, endMarker,
+            StrCast(this.layoutDoc.strokeDash), inkScaleX, inkScaleY, "", "none", 1.0, false);
         // Thin blue line indicating that the current ink stroke is selected.
         // const selectedLine = InteractionUtils.CreatePolyline(data, left, top, Colors.MEDIUM_BLUE, strokeWidth, strokeWidth / 6, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"),
         //     StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", 1.0, false);
         // Invisible polygonal line that enables the ink to be selected by the user.
-        const clickableLine = InteractionUtils.CreatePolyline(inkData, inkLeft, inkTop, "transparent", inkStrokeWidth, inkStrokeWidth + 15, StrCast(this.layoutDoc.strokeBezier),
-            StrCast(this.layoutDoc.fillColor, "none"), "none", "none", undefined, inkScaleX, inkScaleY, "", this.props.layerProvider?.(this.props.Document) === false ? "none" : "visiblepainted", 0.0, true);
+        const highlightIndex = BoolCast(this.props.Document.isLinkButton) && Doc.isBrushedHighlightedDegree(this.props.Document); // bcz: Argh!! need to identify a tree view doc better than a LayoutTemlatString
+        const highlightColor = !highlightIndex ?
+            StrCast(this.layoutDoc.strokeOutlineColor, !closed && fillColor && fillColor !== "transparent" ? StrCast(this.layoutDoc.color, "transparent") : "transparent") :
+            ["transparent", "rgb(68, 118, 247)", "rgb(68, 118, 247)", "yellow", "magenta", "cyan", "orange"][highlightIndex];
+
+        const clickableLine = InteractionUtils.CreatePolyline(inkData, inkLeft, inkTop, highlightColor,
+            inkStrokeWidth, inkStrokeWidth + (highlightIndex && closed && (new Color(fillColor)).alpha() < 1 ? 6 : 15),
+            StrCast(this.layoutDoc.strokeLineJoin), StrCast(this.layoutDoc.strokeLineCap),
+            StrCast(this.layoutDoc.strokeBezier), !closed ? "none" : fillColor === "transparent" ? "none" : fillColor, startMarker, endMarker,
+            undefined, inkScaleX, inkScaleY, "", this.props.pointerEvents ?? (this.props.layerProvider?.(this.props.Document) === false ? "none" : "visiblepainted"), 0.0, false);
         // Set of points rendered upon the ink that can be added if a user clicks on one.
 
         return (
@@ -206,36 +219,21 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                     transform: this.props.Document.isInkMask ? `translate(${InkingStroke.MaskDim / 2}px, ${InkingStroke.MaskDim / 2}px)` : undefined,
                     mixBlendMode: this.layoutDoc.tool === InkTool.Highlighter ? "multiply" : "unset",
                     overflow: "visible",
+                    cursor: this.props.isSelected() ? "default" : undefined
                 }}
+                onPointerLeave={action(e => this._nearestScrPt = undefined)}
+                onPointerMove={this.props.isSelected() ? this.onPointerMove : undefined}
                 onPointerDown={this.onPointerDown}
-                onClick={this.onClick}
+                onClick={e => this._handledClick && e.stopPropagation()}
                 onContextMenu={() => {
                     const cm = ContextMenu.Instance;
-                    if (cm) {
-                        !Doc.UserDoc().noviceMode && cm.addItem({ description: "Recognize Writing", event: this.analyzeStrokes, icon: "paint-brush" });
-                        cm.addItem({ description: "Toggle Mask", event: () => InkingStroke.toggleMask(this.rootDoc), icon: "paint-brush" });
-                        cm.addItem({ description: "Edit Points", event: action(() => { if (this._properties) { this._properties._controlButton = !this._properties._controlButton; } }), icon: "paint-brush" });
-                    }
+                    !Doc.UserDoc().noviceMode && cm?.addItem({ description: "Recognize Writing", event: this.analyzeStrokes, icon: "paint-brush" });
+                    cm?.addItem({ description: "Toggle Mask", event: () => InkingStroke.toggleMask(this.rootDoc), icon: "paint-brush" });
+                    cm?.addItem({ description: "Edit Points", event: action(() => { if (this._properties) { this._properties._controlButton = !this._properties._controlButton; } }), icon: "paint-brush" });
                 }}
             >
-
                 {clickableLine}
                 {inkLine}
-                {/* {this.props.isSelected() ? selectedLine : ""} */}
-                {/* {this.props.isSelected() && this._properties?._controlButton ?
-                    <>
-                        <InkControls
-                            inkDoc={inkDoc}
-                            data={inkData}
-                            addedPoints={addedPoints}
-                            format={[inkLeft, inkTop, inkScaleX, inkScaleY, inkStrokeWidth]}
-                            ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
-                        <InkHandles
-                            inkDoc={inkDoc}
-                            data={inkData}
-                            format={[inkLeft, inkTop, inkScaleX, inkScaleY, inkStrokeWidth]}
-                            ScreenToLocalTransform={this.props.ScreenToLocalTransform} />
-                    </> : ""} */}
             </svg>
         );
     }
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index ec30a6a5d..ec3bf6c18 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -214,7 +214,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                         LightboxView.SetLightboxDoc(undefined);
                     }
                 }}  >
-                
+
                 <div className="lightboxView-contents" style={{
                     left: this.leftBorder,
                     top: this.topBorder,
@@ -237,7 +237,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                         DataDoc={undefined}
                         LayoutTemplate={LightboxView.LightboxDocTemplate}
                         addDocument={undefined}
-                        fitContentsToDoc={this.fitToBox}
+                        // fitContentsToDoc={this.fitToBox} // bcz: why do we want this?  when we initially open a colletion, we shrinkwrap it which allows for user navigation.  if we later encounter a collection, it's not clear to me that we want to make it either shrinkwrap or fitContents...
                         isDocumentActive={returnFalse}
                         isContentActive={returnTrue}
                         addDocTab={this.addDocTab}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 3f7df705f..6d0d5eb39 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -618,7 +618,7 @@ export class MainView extends React.Component {
             <GroupManager />
             <GoogleAuthenticationManager />
             <DocumentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfMainDoc} PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} />
-            <ComponentDecorations boundsLeft={0} boundsTop={this.topOfMainDocContent} />
+            <ComponentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfMainDocContent} />
             {this.topbar}
             {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
             {DocumentLinksButton.LinkEditorDocView ? <LinkMenu docView={DocumentLinksButton.LinkEditorDocView} changeFlyout={emptyFunction} /> : (null)}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index cb9958872..830251e52 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -108,7 +108,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
         case StyleProp.Hidden: return BoolCast(doc?._hidden);
         case StyleProp.BorderRounding: return StrCast(doc?.[fieldKey + "borderRounding"], StrCast(doc?.borderRounding, doc?._viewType === CollectionViewType.Pile ? "50%" : ""));
         case StyleProp.TitleHeight: return 15;
-        case StyleProp.BorderPath: return comicStyle() && props?.renderDepth ? { path: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0), fill: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0, .08), width: 3 } : { path: undefined, width: 0 };
+        case StyleProp.BorderPath: return comicStyle() && props?.renderDepth && doc?.type !== DocumentType.INK ? { path: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0), fill: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0, .08), width: 3 } : { path: undefined, width: 0 };
         case StyleProp.JitterRotation: return comicStyle() ? random(-1, 1, NumCast(doc?.x), NumCast(doc?.y)) * ((props?.PanelWidth() || 0) > (props?.PanelHeight() || 0) ? 5 : 10) : 0;
         case StyleProp.HeaderMargin: return ([CollectionViewType.Stacking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._viewType as any) ||
             doc?.type === DocumentType.RTF) && showTitle() && !StrCast(doc?.showTitle).includes(":hover") ? 15 : 0;
@@ -153,7 +153,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
         case StyleProp.BoxShadow: {
             if (!doc || opacity() === 0) return undefined;  // if it's not visible, then no shadow)
 
-            if (doc?.isLinkButton && doc.type !== DocumentType.LINK) return StrCast(doc?._linkButtonShadow, "lightblue 0em 0em 1em");
+            if (doc?.isLinkButton && ![DocumentType.LINK, DocumentType.INK].includes(doc.type as any)) return StrCast(doc?._linkButtonShadow, "lightblue 0em 0em 1em");
 
             switch (doc?.type) {
                 case DocumentType.COL:
@@ -181,13 +181,11 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             if (doc?.type !== DocumentType.INK && layer === true) return "all";
             return undefined;
         case StyleProp.Decorations:
-            // if (isFooter)
-
-            if (props?.ContainingCollectionDoc?._viewType === CollectionViewType.Freeform || doc?.x !== undefined || doc?.y !== undefined) {
+            if (props?.ContainingCollectionDoc?._viewType === CollectionViewType.Freeform) {
                 return doc && (isBackground() || selected) && (props?.renderDepth || 0) > 0 &&
                     ((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ?
                     <div className="styleProvider-lock" onClick={() => toggleBackground(doc)}>
-                        <FontAwesomeIcon icon={isBackground() ? "unlock" : "lock"} style={{ color: isBackground() ? "red" : undefined }} size="lg" />
+                        <FontAwesomeIcon icon={isBackground() ? "lock" : "unlock"} style={{ color: isBackground() ? "red" : undefined }} size="lg" />
                     </div>
                     : (null);
             }
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
deleted file mode 100644
index 3ea190a98..000000000
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ /dev/null
@@ -1,575 +0,0 @@
-import React = require("react");
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, untracked } from "mobx";
-import { observer } from "mobx-react";
-import Measure from "react-measure";
-import { Resize } from "react-table";
-import "react-table/react-table.css";
-import { Doc, Opt } from "../../../fields/Doc";
-import { List } from "../../../fields/List";
-import { listSpec } from "../../../fields/Schema";
-import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField";
-import { Cast, NumCast } from "../../../fields/Types";
-import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from "../../../Utils";
-import { DocUtils } from "../../documents/Documents";
-import { SelectionManager } from "../../util/SelectionManager";
-import { SnappingManager } from "../../util/SnappingManager";
-import { Transform } from "../../util/Transform";
-import { undoBatch } from "../../util/UndoManager";
-import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/global/globalCssVariables.scss';
-import { SchemaTable } from "../collections/collectionSchema/SchemaTable";
-import { ContextMenu } from "../ContextMenu";
-import { ContextMenuProps } from "../ContextMenuItem";
-import '../DocumentDecorations.scss';
-import { DocumentView } from "../nodes/DocumentView";
-import { DefaultStyleProvider } from "../StyleProvider";
-import "./CollectionSchemaView.scss";
-import { CollectionSubView } from "./CollectionSubView";
-// bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
-
-export enum ColumnType {
-    Any,
-    Number,
-    String,
-    Boolean,
-    Doc,
-    Image,
-    List,
-    Date
-}
-// this map should be used for keys that should have a const type of value
-const columnTypes: Map<string, ColumnType> = new Map([
-    ["title", ColumnType.String],
-    ["x", ColumnType.Number], ["y", ColumnType.Number], ["_width", ColumnType.Number], ["_height", ColumnType.Number],
-    ["_nativeWidth", ColumnType.Number], ["_nativeHeight", ColumnType.Number], ["isPrototype", ColumnType.Boolean],
-    ["_curPage", ColumnType.Number], ["_currentTimecode", ColumnType.Number], ["zIndex", ColumnType.Number]
-]);
-
-@observer
-export class CollectionSchemaView extends CollectionSubView(doc => doc) {
-    private _previewCont?: HTMLDivElement;
-
-    @observable _previewDoc: Doc | undefined = undefined;
-    @observable _focusedTable: Doc = this.props.Document;
-    @observable _col: any = "";
-    @observable _menuWidth = 0;
-    @observable _headerOpen = false;
-    @observable _headerIsEditing = false;
-    @observable _menuHeight = 0;
-    @observable _pointerX = 0;
-    @observable _pointerY = 0;
-    @observable _openTypes: boolean = false;
-
-    @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
-    @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
-    @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - Number(SCHEMA_DIVIDER_WIDTH) - this.previewWidth(); }
-    @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
-    @computed get scale() { return this.props.ScreenToLocalTransform().Scale; }
-    @computed get columns() { return Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []); }
-    set columns(columns: SchemaHeaderField[]) { this.props.Document._schemaHeaders = new List<SchemaHeaderField>(columns); }
-
-    @computed get menuCoordinates() {
-        let searchx = 0;
-        let searchy = 0;
-        if (this.props.Document._searchDoc) {
-            const el = document.getElementsByClassName("collectionSchemaView-searchContainer")[0];
-            if (el !== undefined) {
-                const rect = el.getBoundingClientRect();
-                searchx = rect.x;
-                searchy = rect.y;
-            }
-        }
-        const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this._pointerX)) - searchx;
-        const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this._pointerY)) - searchy;
-        return this.props.ScreenToLocalTransform().transformPoint(x, y);
-    }
-
-    get documentKeys() {
-        const docs = this.childDocs;
-        const keys: { [key: string]: boolean } = {};
-        // bcz: ugh.  this is untracked since otherwise a large collection of documents will blast the server for all their fields.
-        //  then as each document's fields come back, we update the documents _proxies.  Each time we do this, the whole schema will be
-        //  invalidated and re-rendered.   This workaround will inquire all of the document fields before the options button is clicked.
-        //  then by the time the options button is clicked, all of the fields should be in place.  If a new field is added while this menu
-        //  is displayed (unlikely) it won't show up until something else changes.
-        //TODO Types
-        untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => keys[key] = false))));
-
-        this.columns.forEach(key => keys[key.heading] = true);
-        return Array.from(Object.keys(keys));
-    }
-
-    @action setHeaderIsEditing = (isEditing: boolean) => this._headerIsEditing = isEditing;
-
-    @undoBatch
-    setColumnType = action((columnField: SchemaHeaderField, type: ColumnType): void => {
-        this._openTypes = false;
-        if (columnTypes.get(columnField.heading)) return;
-
-        const columns = this.columns;
-        const index = columns.indexOf(columnField);
-        if (index > -1) {
-            columnField.setType(NumCast(type));
-            columns[index] = columnField;
-            this.columns = columns;
-        }
-    });
-
-    @undoBatch
-    setColumnColor = (columnField: SchemaHeaderField, color: string): void => {
-        const columns = this.columns;
-        const index = columns.indexOf(columnField);
-        if (index > -1) {
-            columnField.setColor(color);
-            columns[index] = columnField;
-            this.columns = columns; // need to set the columns to trigger rerender
-        }
-    }
-
-    @undoBatch
-    @action
-    setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => {
-        const columns = this.columns;
-        columns.forEach(col => col.setDesc(undefined));
-
-        const index = columns.findIndex(c => c.heading === columnField.heading);
-        const column = columns[index];
-        column.setDesc(descending);
-        columns[index] = column;
-        this.columns = columns;
-    }
-
-    renderTypes = (col: any) => {
-        if (columnTypes.get(col.heading)) return (null);
-
-        const type = col.type;
-
-        const anyType = <div className={"columnMenu-option" + (type === ColumnType.Any ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Any)}>
-            <FontAwesomeIcon icon={"align-justify"} size="sm" />
-            Any
-        </div>;
-
-        const numType = <div className={"columnMenu-option" + (type === ColumnType.Number ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Number)}>
-            <FontAwesomeIcon icon={"hashtag"} size="sm" />
-            Number
-        </div>;
-
-        const textType = <div className={"columnMenu-option" + (type === ColumnType.String ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.String)}>
-            <FontAwesomeIcon icon={"font"} size="sm" />
-            Text
-        </div>;
-
-        const boolType = <div className={"columnMenu-option" + (type === ColumnType.Boolean ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Boolean)}>
-            <FontAwesomeIcon icon={"check-square"} size="sm" />
-            Checkbox
-        </div>;
-
-        const listType = <div className={"columnMenu-option" + (type === ColumnType.List ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.List)}>
-            <FontAwesomeIcon icon={"list-ul"} size="sm" />
-            List
-        </div>;
-
-        const docType = <div className={"columnMenu-option" + (type === ColumnType.Doc ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Doc)}>
-            <FontAwesomeIcon icon={"file"} size="sm" />
-            Document
-        </div>;
-
-        const imageType = <div className={"columnMenu-option" + (type === ColumnType.Image ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Image)}>
-            <FontAwesomeIcon icon={"image"} size="sm" />
-            Image
-        </div>;
-
-        const dateType = <div className={"columnMenu-option" + (type === ColumnType.Date ? " active" : "")} onClick={() => this.setColumnType(col, ColumnType.Date)}>
-            <FontAwesomeIcon icon={"calendar"} size="sm" />
-            Date
-        </div>;
-
-
-        const allColumnTypes = <div className="columnMenu-types">
-            {anyType}
-            {numType}
-            {textType}
-            {boolType}
-            {listType}
-            {docType}
-            {imageType}
-            {dateType}
-        </div>;
-
-        const justColType = type === ColumnType.Any ? anyType : type === ColumnType.Number ? numType :
-            type === ColumnType.String ? textType : type === ColumnType.Boolean ? boolType :
-                type === ColumnType.List ? listType : type === ColumnType.Doc ? docType :
-                    type === ColumnType.Date ? dateType : imageType;
-
-        return (
-            <div className="collectionSchema-headerMenu-group" onClick={action(() => this._openTypes = !this._openTypes)}>
-                <div>
-                    <label style={{ cursor: "pointer" }}>Column type:</label>
-                    <FontAwesomeIcon icon={"caret-down"} size="lg" style={{ float: "right", transform: `rotate(${this._openTypes ? "180deg" : 0})`, transition: "0.2s all ease" }} />
-                </div>
-                {this._openTypes ? allColumnTypes : justColType}
-            </div >
-        );
-    }
-
-    renderSorting = (col: any) => {
-        const sort = col.desc;
-        return (
-            <div className="collectionSchema-headerMenu-group">
-                <label>Sort by:</label>
-                <div className="columnMenu-sort">
-                    <div className={"columnMenu-option" + (sort === true ? " active" : "")} onClick={() => this.setColumnSort(col, true)}>
-                        <FontAwesomeIcon icon="sort-amount-down" size="sm" />
-                        Sort descending
-                    </div>
-                    <div className={"columnMenu-option" + (sort === false ? " active" : "")} onClick={() => this.setColumnSort(col, false)}>
-                        <FontAwesomeIcon icon="sort-amount-up" size="sm" />
-                        Sort ascending
-                    </div>
-                    <div className="columnMenu-option" onClick={() => this.setColumnSort(col, undefined)}>
-                        <FontAwesomeIcon icon="times" size="sm" />
-                        Clear sorting
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    renderColors = (col: any) => {
-        const selected = col.color;
-
-        const pink = PastelSchemaPalette.get("pink2");
-        const purple = PastelSchemaPalette.get("purple2");
-        const blue = PastelSchemaPalette.get("bluegreen1");
-        const yellow = PastelSchemaPalette.get("yellow4");
-        const red = PastelSchemaPalette.get("red2");
-        const gray = "#f1efeb";
-
-        return (
-            <div className="collectionSchema-headerMenu-group">
-                <label>Color:</label>
-                <div className="columnMenu-colors">
-                    <div className={"columnMenu-colorPicker" + (selected === pink ? " active" : "")} style={{ backgroundColor: pink }} onClick={() => this.setColumnColor(col, pink!)}></div>
-                    <div className={"columnMenu-colorPicker" + (selected === purple ? " active" : "")} style={{ backgroundColor: purple }} onClick={() => this.setColumnColor(col, purple!)}></div>
-                    <div className={"columnMenu-colorPicker" + (selected === blue ? " active" : "")} style={{ backgroundColor: blue }} onClick={() => this.setColumnColor(col, blue!)}></div>
-                    <div className={"columnMenu-colorPicker" + (selected === yellow ? " active" : "")} style={{ backgroundColor: yellow }} onClick={() => this.setColumnColor(col, yellow!)}></div>
-                    <div className={"columnMenu-colorPicker" + (selected === red ? " active" : "")} style={{ backgroundColor: red }} onClick={() => this.setColumnColor(col, red!)}></div>
-                    <div className={"columnMenu-colorPicker" + (selected === gray ? " active" : "")} style={{ backgroundColor: gray }} onClick={() => this.setColumnColor(col, gray)}></div>
-                </div>
-            </div>
-        );
-    }
-
-    @undoBatch
-    @action
-    changeColumns = (oldKey: string, newKey: string, addNew: boolean, filter?: string) => {
-        const columns = this.columns;
-        if (columns === undefined) {
-            this.columns = new List<SchemaHeaderField>([new SchemaHeaderField(newKey, "f1efeb")]);
-        } else {
-            if (addNew) {
-                columns.push(new SchemaHeaderField(newKey, "f1efeb"));
-                this.columns = columns;
-            } else {
-                const index = columns.map(c => c.heading).indexOf(oldKey);
-                if (index > -1) {
-                    const column = columns[index];
-                    column.setHeading(newKey);
-                    columns[index] = column;
-                    this.columns = columns;
-                    if (filter) {
-                        Doc.setDocFilter(this.props.Document, newKey, filter, "match");
-                    }
-                    else {
-                        this.props.Document._docFilters = undefined;
-                    }
-                }
-            }
-        }
-    }
-
-    @action
-    openHeader = (col: any, screenx: number, screeny: number) => {
-        this._col = col;
-        this._headerOpen = true;
-        this._pointerX = screenx;
-        this._pointerY = screeny;
-    }
-
-    @action
-    closeHeader = () => { this._headerOpen = false; }
-
-    @undoBatch
-    @action
-    deleteColumn = (key: string) => {
-        const columns = this.columns;
-        if (columns === undefined) {
-            this.columns = new List<SchemaHeaderField>([]);
-        } else {
-            const index = columns.map(c => c.heading).indexOf(key);
-            if (index > -1) {
-                columns.splice(index, 1);
-                this.columns = columns;
-            }
-        }
-        this.closeHeader();
-    }
-
-    getPreviewTransform = (): Transform => {
-        return this.props.ScreenToLocalTransform().translate(- this.borderWidth - NumCast(COLLECTION_BORDER_WIDTH) - this.tableWidth, - this.borderWidth);
-    }
-
-    @action
-    onHeaderClick = (e: React.PointerEvent) => {
-        e.stopPropagation();
-    }
-
-    @action
-    onWheel(e: React.WheelEvent) {
-        const scale = this.props.ScreenToLocalTransform().Scale;
-        this.props.isContentActive(true) && e.stopPropagation();
-    }
-
-    @computed get renderMenuContent() {
-        TraceMobx();
-        return <div className="collectionSchema-header-menuOptions">
-            {this.renderTypes(this._col)}
-            {this.renderColors(this._col)}
-            <div className="collectionSchema-headerMenu-group">
-                <button onClick={() => { this.deleteColumn(this._col.heading); }}
-                >Hide Column</button>
-            </div>
-        </div>;
-    }
-
-    private createTarget = (ele: HTMLDivElement) => {
-        this._previewCont = ele;
-        super.CreateDropTarget(ele);
-    }
-
-    isFocused = (doc: Doc, outsideReaction: boolean): boolean => this.props.isSelected(outsideReaction) && doc === this._focusedTable;
-
-    @action setFocused = (doc: Doc) => this._focusedTable = doc;
-
-    @action setPreviewDoc = (doc: Opt<Doc>) => {
-        SelectionManager.SelectSchemaViewDoc(doc);
-        this._previewDoc = doc;
-    }
-
-    //toggles preview side-panel of schema
-    @action
-    toggleExpander = () => {
-        this.props.Document.schemaPreviewWidth = this.previewWidth() === 0 ? Math.min(this.tableWidth / 3, 200) : 0;
-    }
-
-    onDividerDown = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, this.toggleExpander);
-    }
-    @action
-    onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => {
-        const nativeWidth = this._previewCont!.getBoundingClientRect();
-        const minWidth = 40;
-        const maxWidth = 1000;
-        const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0];
-        const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth;
-        this.props.Document.schemaPreviewWidth = width;
-        return false;
-    }
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) {
-            if (this.props.isSelected(true)) e.stopPropagation();
-            else this.props.select(false);
-        }
-    }
-
-    @computed
-    get previewDocument(): Doc | undefined { return this._previewDoc; }
-
-    @computed
-    get dividerDragger() {
-        return this.previewWidth() === 0 ? (null) :
-            <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} >
-                <div className="collectionSchemaView-dividerDragger" />
-            </div>;
-    }
-
-    @computed
-    get previewPanel() {
-        return <div ref={this.createTarget} style={{ width: `${this.previewWidth()}px` }}>
-            {!this.previewDocument ? (null) :
-                <DocumentView
-                    Document={this.previewDocument}
-                    DataDoc={undefined}
-                    fitContentsToDoc={returnTrue}
-                    freezeDimensions={true}
-                    dontCenter={"y"}
-                    focus={DocUtils.DefaultFocus}
-                    renderDepth={this.props.renderDepth}
-                    rootSelected={this.rootSelected}
-                    PanelWidth={this.previewWidth}
-                    PanelHeight={this.previewHeight}
-                    isContentActive={returnTrue}
-                    isDocumentActive={returnFalse}
-                    ScreenToLocalTransform={this.getPreviewTransform}
-                    docFilters={this.childDocFilters}
-                    docRangeFilters={this.childDocRangeFilters}
-                    searchFilterDocs={this.searchFilterDocs}
-                    styleProvider={DefaultStyleProvider}
-                    layerProvider={undefined}
-                    docViewPath={returnEmptyDoclist}
-                    ContainingCollectionDoc={this.props.CollectionView?.props.Document}
-                    ContainingCollectionView={this.props.CollectionView}
-                    moveDocument={this.props.moveDocument}
-                    addDocument={this.props.addDocument}
-                    removeDocument={this.props.removeDocument}
-                    whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
-                    addDocTab={this.props.addDocTab}
-                    pinToPres={this.props.pinToPres}
-                    bringToFront={returnFalse}
-                />}
-        </div>;
-    }
-
-    @computed
-    get schemaTable() {
-        return <SchemaTable
-            Document={this.props.Document}
-            PanelHeight={this.props.PanelHeight}
-            PanelWidth={this.props.PanelWidth}
-            childDocs={this.childDocs}
-            CollectionView={this.props.CollectionView}
-            ContainingCollectionView={this.props.ContainingCollectionView}
-            ContainingCollectionDoc={this.props.ContainingCollectionDoc}
-            fieldKey={this.props.fieldKey}
-            renderDepth={this.props.renderDepth}
-            moveDocument={this.props.moveDocument}
-            ScreenToLocalTransform={this.props.ScreenToLocalTransform}
-            active={this.props.isContentActive}
-            onDrop={this.onExternalDrop}
-            addDocTab={this.props.addDocTab}
-            pinToPres={this.props.pinToPres}
-            isSelected={this.props.isSelected}
-            isFocused={this.isFocused}
-            setFocused={this.setFocused}
-            setPreviewDoc={this.setPreviewDoc}
-            deleteDocument={this.props.removeDocument}
-            addDocument={this.props.addDocument}
-            dataDoc={this.props.DataDoc}
-            columns={this.columns}
-            documentKeys={this.documentKeys}
-            headerIsEditing={this._headerIsEditing}
-            openHeader={this.openHeader}
-            onClick={this.onTableClick}
-            onPointerDown={emptyFunction}
-            onResizedChange={this.onResizedChange}
-            setColumns={this.setColumns}
-            reorderColumns={this.reorderColumns}
-            changeColumns={this.changeColumns}
-            setHeaderIsEditing={this.setHeaderIsEditing}
-            changeColumnSort={this.setColumnSort}
-        />;
-    }
-
-    @computed
-    public get schemaToolbar() {
-        return <div className="collectionSchemaView-toolbar">
-            <div className="collectionSchemaView-toolbar-item">
-                <div id="preview-schema-checkbox-div">
-                    <input type="checkbox" key={"Show Preview"} checked={this.previewWidth() !== 0} onChange={this.toggleExpander} />
-                    Show Preview
-                </div>
-            </div>
-        </div>;
-    }
-
-    onSpecificMenu = (e: React.MouseEvent) => {
-        if ((e.target as any)?.className?.includes?.("collectionSchemaView-cell") || (e.target instanceof HTMLSpanElement)) {
-            const cm = ContextMenu.Instance;
-            const options = cm.findByDescription("Options...");
-            const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : [];
-            optionItems.push({ description: "remove", event: () => this._previewDoc && this.props.removeDocument?.(this._previewDoc), icon: "trash" });
-            !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" });
-            cm.displayMenu(e.clientX, e.clientY);
-            (e.nativeEvent as any).SchemaHandled = true; // not sure why this is needed, but if you right-click quickly on a cell, the Document/Collection contextMenu handlers still fire without this.
-            e.stopPropagation();
-        }
-    }
-
-    @action
-    onTableClick = (e: React.MouseEvent): void => {
-        if (!(e.target as any)?.className?.includes?.("collectionSchemaView-cell") && !(e.target instanceof HTMLSpanElement)) {
-            this.setPreviewDoc(undefined);
-        } else {
-            e.stopPropagation();
-        }
-        this.setFocused(this.props.Document);
-        this.closeHeader();
-    }
-
-    onResizedChange = (newResized: Resize[], event: any) => {
-        const columns = this.columns;
-        newResized.forEach(resized => {
-            const index = columns.findIndex(c => c.heading === resized.id);
-            const column = columns[index];
-            column.setWidth(resized.value);
-            columns[index] = column;
-        });
-        this.columns = columns;
-    }
-
-    @action
-    setColumns = (columns: SchemaHeaderField[]) => this.columns = columns
-
-    @undoBatch
-    reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => {
-        const columns = [...columnsValues];
-        const oldIndex = columns.indexOf(toMove);
-        const relIndex = columns.indexOf(relativeTo);
-        const newIndex = (oldIndex > relIndex && !before) ? relIndex + 1 : (oldIndex < relIndex && before) ? relIndex - 1 : relIndex;
-
-        if (oldIndex === newIndex) return;
-
-        columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
-        this.columns = columns;
-    }
-
-    onZoomMenu = (e: React.WheelEvent) => this.props.isContentActive(true) && e.stopPropagation();
-
-    render() {
-        TraceMobx();
-        if (!this.props.isContentActive()) setTimeout(() => this.closeHeader(), 0);
-        const menuContent = this.renderMenuContent;
-        const menu = <div className="collectionSchema-header-menu"
-            onWheel={e => this.onZoomMenu(e)}
-            onPointerDown={e => this.onHeaderClick(e)}
-            style={{ transform: `translate(${(this.menuCoordinates[0])}px, ${(this.menuCoordinates[1])}px)` }}>
-            <Measure offset onResize={action((r: any) => {
-                const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height);
-                this._menuWidth = dim[0]; this._menuHeight = dim[1];
-            })}>
-                {({ measureRef }) => <div ref={measureRef}> {menuContent} </div>}
-            </Measure>
-        </div>;
-        return <div className={"collectionSchemaView" + (this.props.Document._searchDoc ? "-searchContainer" : "-container")}
-            style={{
-                overflow: this.props.scrollOverflow === true ? "scroll" : undefined, backgroundColor: "white",
-                pointerEvents: this.props.Document._searchDoc !== undefined && !this.props.isContentActive() && !SnappingManager.GetIsDragging() ? "none" : undefined,
-                width: this.props.PanelWidth() || "100%", height: this.props.PanelHeight() || "100%", position: "relative",
-            }}  >
-            <div className="collectionSchemaView-tableContainer"
-                style={{ width: `calc(100% - ${this.previewWidth()}px)` }}
-                onContextMenu={this.onSpecificMenu}
-                onPointerDown={this.onPointerDown}
-                onWheel={e => this.props.isContentActive(true) && e.stopPropagation()}
-                onDrop={e => this.onExternalDrop(e, {})}
-                ref={this.createTarget}>
-                {this.schemaTable}
-            </div>
-            {this.dividerDragger}
-            {!this.previewWidth() ? (null) : this.previewPanel}
-            {this._headerOpen && this.props.isContentActive() ? menu : null}
-        </div>;
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index f6c2707da..bb4cae8c6 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -42,7 +42,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         const { A, B, LinkDocs } = this.props;
         const linkDoc = LinkDocs[0];
         if (SnappingManager.GetIsDragging() || !A.ContentDiv || !B.ContentDiv) return;
-        setTimeout(action(() => this._opacity = 1), 0); // since the render code depends on querying the Dom through getBoudndingClientRect, we need to delay triggering render()
+        setTimeout(action(() => this._opacity = 0.75), 0); // since the render code depends on querying the Dom through getBoudndingClientRect, we need to delay triggering render()
         setTimeout(action(() => (!LinkDocs.length || !linkDoc.linkDisplay) && (this._opacity = 0.05)), 750); // this will unhighlight the link line.
         const acont = A.ContentDiv.getElementsByClassName("linkAnchorBox-cont");
         const bcont = B.ContentDiv.getElementsByClassName("linkAnchorBox-cont");
@@ -180,15 +180,26 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
 
     render() {
         if (!this.renderData) return (null);
+
         const { a, b, pt1norm, pt2norm, aActive, bActive, textX, textY, pt1, pt2 } = this.renderData;
         LinkManager.currentLink = this.props.LinkDocs[0];
         const linkRelationship = Field.toString(LinkManager.currentLink?.linkRelationship as any as Field); //get string representing relationship
         const linkRelationshipList = Doc.UserDoc().linkRelationshipList as List<string>;
         const linkColorList = Doc.UserDoc().linkColorList as List<string>;
+        const linkRelationshipSizes = Doc.UserDoc().linkRelationshipSizes as List<number>;
+        const currRelationshipIndex = linkRelationshipList.indexOf(linkRelationship);
+
+        const linkSize = currRelationshipIndex === -1 || currRelationshipIndex >= linkRelationshipSizes.length ? -1 : linkRelationshipSizes[currRelationshipIndex];
+
         //access stroke color using index of the relationship in the color list (default black)
-        const strokeColor = linkRelationshipList.indexOf(linkRelationship) === -1 ? (CurrentUserUtils.ActiveDashboard?.colorScheme === ColorScheme.Dark ? "white" : "black") : linkColorList[linkRelationshipList.indexOf(linkRelationship)];
+        const stroke = currRelationshipIndex === -1 || currRelationshipIndex >= linkColorList.length ? "black" : linkColorList[currRelationshipIndex];
+
+        //calculate stroke width/thickness based on the relative importance of the relationshipship (i.e. how many links the relationship has)
+        //thickness varies linearly from 3px to 12px for increasing link count
+        const strokeWidth = linkSize === -1 ? "3px" : Math.floor(2 + 10 * (linkSize / Math.max(...linkRelationshipSizes))) + "px";
+
         return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
-            <path className="collectionfreeformlinkview-linkLine" style={{ opacity: this._opacity, strokeDasharray: "2 2", stroke: strokeColor }}
+            <path className="collectionfreeformlinkview-linkLine" style={{ opacity: this._opacity, /*strokeDasharray: "2 2",*/ stroke, strokeWidth }}
                 d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`} />
             {textX === undefined ? (null) : <text className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown} >
                 {Field.toString(this.props.LinkDocs[0].description as any as Field)}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index b2db1168d..7dcd63b80 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1036,7 +1036,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             showTitle={this.props.childShowTitle}
             dontRegisterView={this.props.dontRenderDocuments || this.props.dontRegisterView}
             pointerEvents={this.backgroundActive || this.props.childPointerEvents ? "all" :
-                (this.props.viewDefDivClick || (engine === "pass" && !this.props.isSelected(true))) ? "none" : undefined}
+                (this.props.viewDefDivClick || (engine === "pass" && !this.props.isSelected(true))) ? "none" : this.props.pointerEvents}
             jitterRotation={this.props.styleProvider?.(childLayout, this.props, StyleProp.JitterRotation) || 0}
         //fitToBox={this.props.fitToBox || BoolCast(this.props.freezeChildDimensions)} // bcz: check this
         />;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx
index ed196349e..0274cc49c 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx
@@ -103,7 +103,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
         this.props.setPreviewDoc(this.props.rowProps.original);
 
-        console.log("click cell");
         let url: string;
         if (url = StrCast(this.props.rowProps.row.href)) {
             try {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaHeaders.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaHeaders.tsx
index a25f962df..c659f749e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaHeaders.tsx
@@ -1,18 +1,17 @@
 import React = require("react");
-import { IconProp, library } from "@fortawesome/fontawesome-svg-core";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, observable, runInAction } from "mobx";
+import { action, computed, observable, runInAction, trace } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, Opt } from "../../../../fields/Doc";
+import { Doc, DocListCast, Opt, StrListCast } from "../../../../fields/Doc";
 import { listSpec } from "../../../../fields/Schema";
 import { PastelSchemaPalette, SchemaHeaderField } from "../../../../fields/SchemaHeaderField";
 import { ScriptField } from "../../../../fields/ScriptField";
 import { Cast, StrCast } from "../../../../fields/Types";
 import { undoBatch } from "../../../util/UndoManager";
-import { SearchBox } from "../../search/SearchBox";
+import { CollectionView } from "../CollectionView";
 import { ColumnType } from "./CollectionSchemaView";
 import "./CollectionSchemaView.scss";
-import { CollectionView } from "../CollectionView";
 
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
@@ -26,9 +25,9 @@ export interface AddColumnHeaderProps {
 @observer
 export class CollectionSchemaAddColumnHeader extends React.Component<AddColumnHeaderProps> {
     render() {
-        return (
-            <button className="add-column" onClick={() => this.props.createColumn()}><FontAwesomeIcon icon="plus" size="sm" /></button>
-        );
+        return <button className="add-column" onClick={() => this.props.createColumn()}>
+            <FontAwesomeIcon icon="plus" size="sm" />
+        </button>;
     }
 }
 
@@ -234,7 +233,7 @@ export interface KeysDropdownProps {
 @observer
 export class KeysDropdown extends React.Component<KeysDropdownProps> {
     @observable private _key: string = this.props.keyValue;
-    @observable private _searchTerm: string = this.props.keyValue;
+    @observable private _searchTerm: string = this.props.keyValue + ":";
     @observable private _isOpen: boolean = false;
     @observable private _node: HTMLDivElement | null = null;
     @observable private _inputRef: React.RefObject<HTMLInputElement> = React.createRef();
@@ -326,11 +325,11 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
             || ((!key.startsWith("_") && key[0] === key[0].toUpperCase()) || key[0] === "#")) ? showKeys.add(key) : null);
         return Array.from(showKeys.keys()).filter(key => !this._searchTerm || key.includes(this._searchTerm));
     }
-    @action
-    renderOptions = (): JSX.Element[] | JSX.Element => {
+
+    @computed get renderOptions() {
         if (!this._isOpen) {
             this.defaultMenuHeight = 0;
-            return <></>;
+            return (null);
         }
         const options = this.showKeys.map(key => {
             return <div key={key} className="key-option" style={{
@@ -373,30 +372,25 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         return options;
     }
 
-    docSafe: Doc[] = [];
+    @computed get docSafe() { return DocListCast(this.props.dataDoc?.[this.props.fieldKey]); }
 
-    @action
-    renderFilterOptions = (): JSX.Element[] | JSX.Element => {
+    @computed get renderFilterOptions() {
         if (!this._isOpen || !this.props.dataDoc) {
             this.defaultMenuHeight = 0;
-            return <></>;
+            return (null);
         }
         const keyOptions: string[] = [];
         const colpos = this._searchTerm.indexOf(":");
         const temp = this._searchTerm.slice(colpos + 1, this._searchTerm.length);
-        if (this.docSafe.length === 0) {
-            this.docSafe = DocListCast(this.props.dataDoc[this.props.fieldKey]);
-        }
-        const docs = this.docSafe;
-        docs.forEach((doc) => {
+        this.docSafe.forEach(doc => {
             const key = StrCast(doc[this._key]);
             if (keyOptions.includes(key) === false && key.includes(temp) && key !== "") {
                 keyOptions.push(key);
             }
         });
 
-        const filters = Cast(this.props.Document._docFilters, listSpec("string"));
-        if (filters === undefined || filters.length === 0 || filters.some(filter => filter.split(":")[0] === this._key) === false) {
+        const filters = StrListCast(this.props.Document._docFilters);
+        if (filters.some(filter => filter.split(":")[0] === this._key) === false) {
             this.props.col.setColor("rgb(241, 239, 235)");
             this.closeResultsVisibility = "none";
         }
@@ -408,9 +402,9 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         const options = keyOptions.map(key => {
             let bool = false;
             if (filters !== undefined) {
-                const ind = filters.findIndex(filter => filter.split(":")[0] === key);
+                const ind = filters.findIndex(filter => filter.split(":")[1] === key);
                 const fields = ind === -1 ? undefined : filters[ind].split(":");
-                bool = fields ? fields[1] === "check" : false;
+                bool = fields ? fields[2] === "check" : false;
             }
             return <div key={key} className="key-option" style={{
                 paddingLeft: 5, textAlign: "left",
@@ -420,12 +414,16 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                 <input type="checkbox"
                     onPointerDown={e => e.stopPropagation()}
                     onClick={e => e.stopPropagation()}
-                    onChange={(e) => {
-                        e.target.checked === true ? Doc.setDocFilter(this.props.Document, this._key, key, "check") : Doc.setDocFilter(this.props.Document, this._key, key, "remove");
-                        e.target.checked === true ? this.closeResultsVisibility = "contents" : console.log("");
-                        e.target.checked === true ? this.props.col.setColor("green") : this.updateFilter();
-                        e.target.checked === true ? Doc.setDocFilter(docs[0], this._key, key, "check") : Doc.setDocFilter(docs[0], this._key, key, "remove");
-                    }}
+                    onChange={action(e => {
+                        if (e.target.checked) {
+                            Doc.setDocFilter(this.props.Document, this._key, key, "check");
+                            this.closeResultsVisibility = "contents";
+                            this.props.col.setColor("green");
+                        } else {
+                            Doc.setDocFilter(this.props.Document, this._key, key, "remove");
+                            this.updateFilter();
+                        }
+                    })}
                     checked={bool}
                 />
                 <span style={{ paddingLeft: 4 }}>
@@ -472,11 +470,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
 
     removeFilters = (e: React.PointerEvent): void => {
         const keyOptions: string[] = [];
-        if (this.docSafe.length === 0 && this.props.dataDoc) {
-            this.docSafe = DocListCast(this.props.dataDoc[this.props.fieldKey]);
-        }
-        const docs = this.docSafe;
-        docs.forEach((doc) => {
+        this.docSafe.forEach(doc => {
             const key = StrCast(doc[this._key]);
             if (keyOptions.includes(key) === false) {
                 keyOptions.push(key);
@@ -494,10 +488,6 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                     <FontAwesomeIcon icon={this.props.icon} size="lg" style={{ display: "inline" }} />
                 </div>
 
-                {/* <FontAwesomeIcon icon={fa.faSearchMinus} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} onClick={e => {
-                    runInAction(() => { this._isOpen === undefined ? this._isOpen = true : this._isOpen = !this._isOpen })
-                }} /> */}
-
                 <div className="keys-dropdown" style={{ zIndex: 1, width: this.props.width, maxWidth: this.props.width }}>
                     <input className="keys-search" style={{ width: "100%" }}
                         ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
@@ -511,7 +501,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                     {!this._isOpen ? (null) : <div className="keys-options-wrapper" style={{
                         width: this.props.width, maxWidth: this.props.width, height: "auto",
                     }}>
-                        {this._searchTerm.includes(":") ? this.renderFilterOptions() : this.renderOptions()}
+                        {this._searchTerm.includes(":") ? this.renderFilterOptions : this.renderOptions}
                     </div>}
                 </div >
             </div>
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 12493ecc1..b89246489 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, untracked } from "mobx";
+import { action, computed, observable, untracked, trace } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import { Resize } from "react-table";
diff --git a/src/client/views/collections/collectionSchema/SchemaTable.tsx b/src/client/views/collections/collectionSchema/SchemaTable.tsx
index d157832d9..bc5a9559f 100644
--- a/src/client/views/collections/collectionSchema/SchemaTable.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTable.tsx
@@ -1,7 +1,7 @@
 import React = require("react");
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, trace } from "mobx";
 import { observer } from "mobx-react";
 import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from "react-table";
 import "react-table/react-table.css";
@@ -386,13 +386,13 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     @undoBatch
     @action
     createColumn = () => {
-        let index = 0;
-        let found = this.props.columns.findIndex(col => col.heading.toUpperCase() === "New field".toUpperCase()) > -1;
-        while (found) {
-            index++;
-            found = this.props.columns.findIndex(col => col.heading.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1;
+        const newFieldName = (index: number) => `New field${index ? ` (${index})` : ""}`;
+        for (let index = 0; index < 100; index++) {
+            if (this.props.columns.findIndex(col => col.heading === newFieldName(index)) === -1) {
+                this.props.columns.push(new SchemaHeaderField(newFieldName(index), "#f1efeb"));
+                break;
+            }
         }
-        this.props.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb"));
     }
 
     @action
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index 95bd44c1f..520ac9357 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -8,6 +8,7 @@ $dark-gray: #323232;
 $black: #000000;
 
 $light-blue: #bdddf5;
+$light-blue-transparent: #bdddf590;
 $medium-blue: #4476f7;
 $medium-blue-alt: #4476f73d;
 $pink: #e0217d;
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 219f7d3a2..5b5c3cd01 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from "@material-ui/core";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, StrListCast, Field } from "../../../fields/Doc";
+import { Doc, NumListCast, StrListCast, Field } from "../../../fields/Doc";
 import { DateCast, StrCast, Cast } from "../../../fields/Types";
 import { LinkManager } from "../../util/LinkManager";
 import { undoBatch } from "../../util/UndoManager";
@@ -42,14 +42,36 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     @undoBatch
     setRelationshipValue = action((value: string) => {
         if (LinkManager.currentLink) {
+            const prevRelationship = LinkManager.currentLink.linkRelationship as string;
+            LinkManager.currentLink.linkRelationship = value;
             Doc.GetProto(LinkManager.currentLink).linkRelationship = value;
             const linkRelationshipList = StrListCast(Doc.UserDoc().linkRelationshipList);
+            const linkRelationshipSizes = NumListCast(Doc.UserDoc().linkRelationshipSizes);
             const linkColorList = StrListCast(Doc.UserDoc().linkColorList);
+
             // if the relationship does not exist in the list, add it and a corresponding unique randomly generated color 
-            if (linkRelationshipList && !linkRelationshipList.includes(value)) {
+            if (!linkRelationshipList?.includes(value)) {
                 linkRelationshipList.push(value);
+                linkRelationshipSizes.push(1);
                 const randColor = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
-                linkColorList.push(randColor);
+                linkColorList.push(randColor)
+                // if the relationship is already in the list AND the new rel is different from the prev rel, update the rel sizes
+            } else if (linkRelationshipList && value != prevRelationship) {
+                const index = linkRelationshipList.indexOf(value);
+                //increment size of new relationship size
+                if (index !== -1 && index < linkRelationshipSizes.length) {
+                    const pvalue = linkRelationshipSizes[index];
+                    linkRelationshipSizes[index] = (pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue + 1);
+                }
+                //decrement the size of the previous relationship if it already exists (i.e. not default 'link' relationship upon link creation)
+                if (linkRelationshipList.includes(prevRelationship)) {
+                    const pindex = linkRelationshipList.indexOf(prevRelationship);
+                    if (pindex !== -1 && pindex < linkRelationshipSizes.length) {
+                        const pvalue = linkRelationshipSizes[pindex];
+                        linkRelationshipSizes[pindex] = Math.max(0, (pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue - 1));
+                    }
+                }
+
             }
             this.relationshipButtonColor = "rgb(62, 133, 55)";
             setTimeout(action(() => this.relationshipButtonColor = ""), 750);
@@ -141,6 +163,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         style={{ width: "100%" }}
                         id="input"
                         value={this.relationship}
+                        autoComplete={"off"}
                         placeholder={"Enter link relationship"}
                         onKeyDown={this.onRelationshipKey}
                         onChange={this.handleRelationshipChange}
@@ -169,6 +192,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 <div className="linkEditor-description-editing">
                     <input
                         style={{ width: "100%" }}
+                        autoComplete={"off"}
                         id="input"
                         value={this.description}
                         placeholder={"Enter link description"}
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index cb6571f92..03377ad4e 100644
--- a/src/client/views/linking/LinkMenuGroup.tsx
+++ b/src/client/views/linking/LinkMenuGroup.tsx
@@ -31,7 +31,6 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
             if (RGBcolor) {
                 //set opacity to 0.25 by modifiying the rgb string
                 color = RGBcolor.slice(0, RGBcolor.length - 1) + ", 0.25)";
-                console.log(color);
             }
         }
         return color;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 53a7ae9ab..96cc6d600 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -79,7 +79,9 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     onEdit = (e: React.PointerEvent): void => {
         LinkManager.currentLink = this.props.linkDoc;
         setupMoveUpEvents(this, e, e => {
-            DragManager.StartDocumentDrag([this._editRef.current!], new DragManager.DocumentDragData([this.props.linkDoc]), e.x, e.y);
+            const dragData = new DragManager.DocumentDragData([this.props.linkDoc], "alias");
+            dragData.removeDropProperties = ["hidden"];
+            DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y);
             return true;
         }, emptyFunction, () => this.props.showEditor(this.props.linkDoc));
     }
@@ -163,19 +165,19 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
 
                         <div className="linkMenu-item-buttons" ref={this._buttonRef} >
 
-                            <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.hidden ? "Show Anchor" : "Hide Anchor"}</div></>}>
-                                <div className="button" ref={this._editRef} onPointerDown={this.showAnchor} onClick={e => e.stopPropagation()}>
-                                    <FontAwesomeIcon className="fa-icon" icon={this.props.linkDoc.hidden ? "eye-slash" : "eye"} size="sm" /></div>
+                            <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.hidden ? "Show Link Anchor" : "Hide Link Anchor"}</div></>}>
+                                <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? "" : "#4476f7" /* $medium-blue */ }} onPointerDown={this.showAnchor} onClick={e => e.stopPropagation()}>
+                                    <FontAwesomeIcon className="fa-icon" icon={"eye"} size="sm" /></div>
                             </Tooltip>
 
-                            <Tooltip title={<><div className="dash-tooltip">{!this.props.linkDoc.linkDisplay ? "Show link" : "Hide link"}</div></>}>
-                                <div className="button" ref={this._editRef} onPointerDown={this.showLink} onClick={e => e.stopPropagation()}>
-                                    <FontAwesomeIcon className="fa-icon" icon={!this.props.linkDoc.linkDisplay ? "eye-slash" : "eye"} size="sm" /></div>
+                            <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.linkDisplay ? "Hide Link Line" : "Show Link Line"}</div></>}>
+                                <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? "gray" : this.props.linkDoc.linkDisplay ? "#4476f7"/* $medium-blue */ : "" }} onPointerDown={this.showLink} onClick={e => e.stopPropagation()}>
+                                    <FontAwesomeIcon className="fa-icon" icon={"project-diagram"} size="sm" /></div>
                             </Tooltip>
 
-                            <Tooltip title={<><div className="dash-tooltip">{!this.props.linkDoc.linkAutoMove ? "Auto move dot" : "Freeze dot position"}</div></>}>
-                                <div className="button" ref={this._editRef} onPointerDown={this.autoMove} onClick={e => e.stopPropagation()}>
-                                    <FontAwesomeIcon className="fa-icon" icon={this.props.linkDoc.linkAutoMove ? "play" : "pause"} size="sm" /></div>
+                            <Tooltip title={<><div className="dash-tooltip">{this.props.linkDoc.linkAutoMove ? "Click to freeze link anchor position" : "Click to auto move link anchor"}</div></>}>
+                                <div className="button" ref={this._editRef} style={{ background: this.props.linkDoc.hidden ? "gray" : !this.props.linkDoc.linkAutoMove ? "" : "#4476f7" /* $medium-blue */ }} onPointerDown={this.autoMove} onClick={e => e.stopPropagation()}>
+                                    <FontAwesomeIcon className="fa-icon" icon={"play"} size="sm" /></div>
                             </Tooltip>
 
                             <Tooltip title={<><div className="dash-tooltip">Edit Link</div></>}>
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 44cf5d046..660045a6f 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -6,6 +6,7 @@
     position: relative;
     z-index: 0;
     pointer-events: none;
+    display: flex;
 
     .clip-div {
         position: absolute;
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 15c33c8bf..b1aada158 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -50,7 +50,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
     }
 
     private registerSliding = (e: React.PointerEvent<HTMLDivElement>, targetWidth: number) => {
-        setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, action(() => {
+        e.button !== 2 && setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, action(() => {
             // on click, animate slider movement to the targetWidth
             this._animating = "all 200ms";
             this.layoutDoc._clipWidth = targetWidth * 100 / this.props.PanelWidth();
@@ -89,14 +89,20 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
         };
         const displayDoc = (which: string) => {
             var whichDoc = Cast(this.dataDoc[which], Doc, null);
-            if (whichDoc?.type === DocumentType.MARKER) whichDoc = Cast(whichDoc.annotationOn, Doc, null);
+            //if (whichDoc?.type === DocumentType.MARKER) 
+            const targetDoc = Cast(whichDoc.annotationOn, Doc, null) ?? whichDoc;
             return whichDoc ? <>
-                <DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+                <DocumentView
+                    ref={(r) => {
+                        whichDoc !== targetDoc && r?.focus(targetDoc);
+                    }}
+                    {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
                     isContentActive={returnFalse}
                     isDocumentActive={returnFalse}
                     styleProvider={this.docStyleProvider}
-                    Document={whichDoc}
+                    Document={targetDoc}
                     DataDoc={undefined}
+                    hideLinkButton={true}
                     pointerEvents={"none"} />
                 {clearButton(which)}
             </> :  // placeholder image if doc is missing
@@ -107,7 +113,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
         const displayBox = (which: string, index: number, cover: number) => {
             return <div className={`${which}Box-cont`} key={which} style={{ width: this.props.PanelWidth() }}
                 onPointerDown={e => this.registerSliding(e, cover)}
-                ref={ele => this.createDropTarget(ele, `compareBox-${which}`, index)} >
+                ref={ele => this.createDropTarget(ele, which, index)} >
                 {displayDoc(which)}
             </div>;
         };
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 04c559bdd..be6a86445 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -92,7 +92,7 @@ export interface DocComponentView {
     playFrom?: (time: number, endTime?: number) => void;
     Pause?: () => void;
     setFocus?: () => void;
-    componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element;
+    componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element | null;
     fieldKey?: string;
     annotationKey?: string;
     getTitle?: () => string;
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index f975b063a..33fa23805 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -755,7 +755,7 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
 
 Scripting.addGlobal(function setActiveInkTool(tool: string, checkResult?: boolean) {
     if (checkResult) {
-        return (Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance?.InkShape === "" || GestureOverlay.Instance?.InkShape === tool) ?
+        return ((Doc.UserDoc().activeInkTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool) ?
             Colors.MEDIUM_BLUE : "transparent";
     }
     if (["circle", "square", "line"].includes(tool)) {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 7afa54d5f..aa53f751d 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -960,7 +960,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                     GoogleApiClientUtils.Docs.write({ reference, content, mode });
                 }
             };
-            UndoManager.AddEvent({ undo, redo });
+            UndoManager.AddEvent({ undo, redo, prop: "" });
             redo();
         });
     }
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index ba21a7bfb..ea3bcf719 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -391,7 +391,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         } else if ((curDoc.presMovement === PresMovement.Zoom || curDoc.presMovement === PresMovement.Jump) && targetDoc) {
             LightboxView.SetLightboxDoc(undefined);
             //awaiting jump so that new scale can be found, since jumping is async     
-            await DocumentManager.Instance.jumpToDocument(targetDoc, true, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection, undefined, true); // documents open in new tab instead of on right    
+            await DocumentManager.Instance.jumpToDocument(targetDoc, true, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection, undefined, true, NumCast(curDoc.presZoom)); // documents open in new tab instead of on right    
         }
         // After navigating to the document, if it is added as a presPinView then it will
         // adjust the pan and scale to that of the pinView when it was added.
@@ -1013,6 +1013,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         Array.from(this._selectedArray.keys()).forEach((doc) => doc.presTransition = timeInMS);
     }
 
+    // Converts seconds to ms and updates presTransition
+    setZoom = (number: String, change?: number) => {
+        let scale = Number(number) / 100;
+        if (change) scale += change;
+        if (scale < 0.01) scale = 0.01;
+        if (scale > 1.5) scale = 1.5;
+        Array.from(this._selectedArray.keys()).forEach((doc) => doc.presZoom = scale);
+    }
+
     // Converts seconds to ms and updates presDuration
     setDurationTime = (number: String, change?: number) => {
         let timeInMS = Number(number) * 1000;
@@ -1130,11 +1139,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @computed get transitionDropdown() {
         const activeItem: Doc = this.activeItem;
         const targetDoc: Doc = this.targetDoc;
-        const type = targetDoc.type;
         const isPresCollection: boolean = (targetDoc === this.layoutDoc.presCollection);
         const isPinWithView: boolean = BoolCast(activeItem.presPinView);
         if (activeItem && targetDoc) {
+            const type = targetDoc.type;
             const transitionSpeed = activeItem.presTransition ? NumCast(activeItem.presTransition) / 1000 : 0.5;
+            const zoom = activeItem.presZoom ? NumCast(activeItem.presZoom) * 100 : 75;
             let duration = activeItem.presDuration ? NumCast(activeItem.presDuration) / 1000 : 2;
             if (activeItem.type === DocumentType.AUDIO) duration = NumCast(activeItem.duration);
             const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None';
@@ -1159,6 +1169,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 </div>
                             </div>
                         }
+                        <div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === PresMovement.Zoom ? "inline-flex" : "none" }}>
+                            <div className="presBox-subheading">Zoom (% screen filled)</div>
+                            <div className="ribbon-property">
+                                <input className="presBox-input"
+                                    type="number" value={zoom}
+                                    onChange={action((e) => this.setZoom(e.target.value))} />%
+                            </div>
+                            <div className="ribbon-propertyUpDown">
+                                <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}>
+                                    <FontAwesomeIcon icon={"caret-up"} />
+                                </div>
+                                <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), -0.1))}>
+                                    <FontAwesomeIcon icon={"caret-down"} />
+                                </div>
+                            </div>
+                        </div>
+                        <input type="range" step="1" min="0" max="150" value={zoom}
+                            className={`toolbar-slider ${activeItem.presMovement === PresMovement.Zoom ? "" : "none"}`}
+                            id="toolbar-slider"
+                            onPointerDown={() => this._batch = UndoManager.StartBatch("presZoom")}
+                            onPointerUp={() => this._batch?.end()}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                e.stopPropagation();
+                                this.setZoom(e.target.value);
+                            }} />
                         <div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === PresMovement.Pan || activeItem.presMovement === PresMovement.Zoom ? "inline-flex" : "none" }}>
                             <div className="presBox-subheading">Movement Speed</div>
                             <div className="ribbon-property">
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 61ad76412..13f88e2fc 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -79,6 +79,7 @@ export function DocListCastAsync(field: FieldResult, defaultValue?: Doc[]) {
 
 export async function DocCastAsync(field: FieldResult): Promise<Opt<Doc>> { return Cast(field, Doc); }
 
+export function NumListCast(field: FieldResult) { return Cast(field, listSpec("number"), []); }
 export function StrListCast(field: FieldResult) { return Cast(field, listSpec("string"), []); }
 export function DocListCast(field: FieldResult) { return Cast(field, listSpec(Doc), []).filter(d => d instanceof Doc) as Doc[]; }
 export function DocListCastOrNull(field: FieldResult) { return Cast(field, listSpec(Doc), null)?.filter(d => d instanceof Doc) as Doc[] | undefined; }
@@ -1143,7 +1144,7 @@ export namespace Doc {
         runInAction(() => {
             for (let i = 0; i < docFilters.length; i++) {
                 const fields = docFilters[i].split(":"); // split key:value:modifier
-                if (fields[0] === key && (fields[1] === value || modifiers === "match" || modifiers === "remove")) {
+                if (fields[0] === key && (fields[1] === value || modifiers === "match")) {
                     if (fields[2] === modifiers && modifiers && fields[1] === value) {
                         if (toggle) modifiers = "remove";
                         else return;
diff --git a/src/fields/util.ts b/src/fields/util.ts
index 3590c2dea..c708affe3 100644
--- a/src/fields/util.ts
+++ b/src/fields/util.ts
@@ -98,13 +98,12 @@ const _setterImpl = action(function (target: any, prop: string | symbol | number
         } else {
             DocServer.registerDocWithCachedUpdate(receiver, prop as string, curValue);
         }
-        !receiver[Initializing] && (!receiver[UpdatingFromServer] || receiver[ForceServerWrite]) && UndoManager.AddEvent({
-            redo: () => receiver[prop] = value,
-            undo: () => {
-                // console.log("Undo: " + prop + " = " + curValue); // bcz: uncomment to log undo
-                receiver[prop] = curValue;
-            }
-        });
+        !receiver[Initializing] && (!receiver[UpdatingFromServer] || receiver[ForceServerWrite]) &&
+            UndoManager.AddEvent({
+                redo: () => receiver[prop] = value,
+                undo: () => receiver[prop] = curValue,
+                prop: prop?.toString()
+            });
         return true;
     }
     return false;
@@ -406,7 +405,8 @@ export function updateFunction(target: any, prop: any, value: any, receiver: any
                                 ind !== -1 && receiver[prop].splice(ind, 1);
                             });
                             lastValue = ObjectField.MakeCopy(receiver[prop]);
-                        })
+                        }),
+                        prop: ""
                     } :
                     diff?.op === "$remFromSet" ?
                         {
@@ -424,7 +424,8 @@ export function updateFunction(target: any, prop: any, value: any, receiver: any
                                     ind !== -1 && receiver[prop].indexOf(item.value ? item.value() : item) === -1 && receiver[prop].splice(ind, 0, item);
                                 });
                                 lastValue = ObjectField.MakeCopy(receiver[prop]);
-                            }
+                            },
+                            prop: ""
                         }
                         : {
                             redo: () => {
@@ -435,7 +436,8 @@ export function updateFunction(target: any, prop: any, value: any, receiver: any
                                 // console.log("undo list: " + prop, receiver[prop]) // bcz: uncomment to log undo 
                                 receiver[prop] = ObjectField.MakeCopy(prevValue as List<any>);
                                 lastValue = ObjectField.MakeCopy(receiver[prop]);
-                            }
+                            },
+                            prop: ""
                         });
         }
         target[Update](op);