merged with master & cleaned up formatShapePane

6 files changed, 195 insertions, 437 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ba20e9830..d9aabd7c2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,53 +1,51 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
+import { faEye } from "@fortawesome/free-regular-svg-icons";
 import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faFileUpload, faPaintBrush, faTable, faUpload } from "@fortawesome/free-solid-svg-icons";
-import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, _allowStateChangesInsideComputed, trace } from "mobx";
+import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { computedFn } from "mobx-utils";
-import { Doc, HeightSym, Opt, WidthSym, DocListCast } from "../../../../fields/Doc";
-import { documentSchema, collectionSchema } from "../../../../fields/documentSchemas";
+import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../../fields/Doc";
+import { collectionSchema, documentSchema } from "../../../../fields/documentSchemas";
 import { Id } from "../../../../fields/FieldSymbols";
-import { InkData, InkField, InkTool, PointData } from "../../../../fields/InkField";
+import { InkData, InkField, InkTool } from "../../../../fields/InkField";
 import { List } from "../../../../fields/List";
 import { RichTextField } from "../../../../fields/RichTextField";
-import { createSchema, listSpec, makeInterface } from "../../../../fields/Schema";
-import { ScriptField, ComputedField } from "../../../../fields/ScriptField";
+import { createSchema, makeInterface } from "../../../../fields/Schema";
+import { ScriptField } from "../../../../fields/ScriptField";
 import { BoolCast, Cast, FieldValue, NumCast, ScriptCast, StrCast } from "../../../../fields/Types";
 import { TraceMobx } from "../../../../fields/util";
 import { GestureUtils } from "../../../../pen-gestures/GestureUtils";
-import { aggregateBounds, intersectRect, returnOne, Utils, returnZero, returnFalse, numberRange } from "../../../../Utils";
+import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, Utils } from "../../../../Utils";
 import { CognitiveServices } from "../../../cognitive_services/CognitiveServices";
 import { DocServer } from "../../../DocServer";
 import { Docs, DocUtils } from "../../../documents/Documents";
+import { DocumentType } from "../../../documents/DocumentTypes";
 import { DocumentManager } from "../../../util/DocumentManager";
 import { DragManager, dropActionType } from "../../../util/DragManager";
 import { HistoryUtil } from "../../../util/History";
 import { InteractionUtils } from "../../../util/InteractionUtils";
 import { SelectionManager } from "../../../util/SelectionManager";
+import { SnappingManager } from "../../../util/SnappingManager";
 import { Transform } from "../../../util/Transform";
 import { undoBatch, UndoManager } from "../../../util/UndoManager";
 import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss";
+import { Timeline } from "../../animationtimeline/Timeline";
 import { ContextMenu } from "../../ContextMenu";
-import { ContextMenuProps } from "../../ContextMenuItem";
+import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth } from "../../InkingStroke";
 import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView";
-import { DocumentViewProps, DocumentView } from "../../nodes/DocumentView";
+import { DocumentLinksButton } from "../../nodes/DocumentLinksButton";
+import { DocumentViewProps } from "../../nodes/DocumentView";
 import { FormattedTextBox } from "../../nodes/formattedText/FormattedTextBox";
 import { pageSchema } from "../../nodes/ImageBox";
-import PDFMenu from "../../pdf/PDFMenu";
 import { CollectionDockingView } from "../CollectionDockingView";
 import { CollectionSubView } from "../CollectionSubView";
-import { computePivotLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult, computerStarburstLayout, computerPassLayout } from "./CollectionFreeFormLayoutEngines";
+import { CollectionViewType } from "../CollectionView";
+import { computePivotLayout, computerPassLayout, computerStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult } from "./CollectionFreeFormLayoutEngines";
 import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCursors";
 import "./CollectionFreeFormView.scss";
 import MarqueeOptionsMenu from "./MarqueeOptionsMenu";
 import { MarqueeView } from "./MarqueeView";
 import React = require("react");
-import { CollectionViewType } from "../CollectionView";
-import { Timeline } from "../../animationtimeline/Timeline";
-import { SnappingManager } from "../../../util/SnappingManager";
-import { InkingStroke, ActiveArrowStart, ActiveArrowEnd, ActiveInkColor, ActiveFillColor, ActiveInkWidth, ActiveInkBezierApprox, ActiveDash } from "../../InkingStroke";
-import { DocumentType } from "../../../documents/DocumentTypes";
-import { DocumentLinksButton } from "../../nodes/DocumentLinksButton";
 
 library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload);
 
@@ -194,7 +192,6 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         return (pt => super.onExternalDrop(e, { x: pt[0], y: pt[1] }))(this.getTransform().transformPoint(e.pageX, e.pageY));
     }
 
-    @undoBatch
     @action
     internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData, xp: number, yp: number) {
         if (!super.onInternalDrop(e, de)) return false;
@@ -208,7 +205,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         for (let i = 0; i < docDragData.droppedDocuments.length; i++) {
             const d = docDragData.droppedDocuments[i];
             const layoutDoc = Doc.Layout(d);
-            if (this.Document.currentFrame !== undefined && !this.props.isAnnotationOverlay) {
+            if (this.Document.currentFrame !== undefined) {
                 const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000));
                 CollectionFreeFormDocumentView.setValues(this.Document.currentFrame, d, x + vals.x - dropPos[0], y + vals.y - dropPos[1], vals.opacity);
             } else {
@@ -249,7 +246,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         } else {
             const source = Docs.Create.TextDocument("", { _width: 200, _height: 75, x: xp, y: yp, title: "dropped annotation" });
             this.props.addDocument(source);
-            linkDragData.linkDocument = DocUtils.MakeLink({ doc: source }, { doc: linkDragData.linkSourceDocument }, "doc annotation"); // TODODO this is where in text links get passed
+            linkDragData.linkDocument = DocUtils.MakeLink({ doc: source }, { doc: linkDragData.linkSourceDocument }, "doc annotation", ""); // TODODO this is where in text links get passed
             e.stopPropagation();
             return true;
         }
@@ -603,7 +600,6 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     pan = (e: PointerEvent | React.Touch | { clientX: number, clientY: number }): void => {
         // bcz: theres should be a better way of doing these than referencing these static instances directly
         MarqueeOptionsMenu.Instance?.fadeOut(true);// I think it makes sense for the marquee menu to go away when panned. -syip2
-        PDFMenu.Instance.fadeOut(true);
 
         const [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
         this.setPan((this.Document._panX || 0) - dx, (this.Document._panY || 0) - dy, undefined, true);
@@ -871,7 +867,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     focusDocument = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => boolean) => {
         const state = HistoryUtil.getState();
 
-        // TODO This technically isn't correct if type !== "doc", as 
+        // TODO This technically isn't correct if type !== "doc", as
         // currently nothing is done, but we should probably push a new state
         if (state.type === "doc" && this.Document._panX !== undefined && this.Document._panY !== undefined) {
             const init = state.initializers![this.Document[Id]];
@@ -1069,7 +1065,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     doFreeformLayout(poolData: Map<string, PoolData>) {
         const layoutDocs = this.childLayoutPairs.map(pair => pair.layout);
-        const initResult = this.Document.arrangeInit && this.Document.arrangeInit.script.run({ docs: layoutDocs, collection: this.Document }, console.log);
+        const initResult = this.Document.arrangeInit?.script.run({ docs: layoutDocs, collection: this.Document }, console.log);
         const state = initResult?.success ? initResult.result.scriptState : undefined;
         const elements = initResult?.success ? this.viewDefsToJSX(initResult.result.views) : [];
 
@@ -1205,7 +1201,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     private thumbIdentifier?: number;
 
     onContextMenu = (e: React.MouseEvent) => {
-        if (this.props.annotationsKey) return;
+        if (this.props.annotationsKey || !ContextMenu.Instance) return;
 
         const appearance = ContextMenu.Instance.findByDescription("Appearance...");
         const appearanceItems = appearance && "subitems" in appearance ? appearance.subitems : [];
@@ -1454,4 +1450,4 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
             {this.props.children()}
         </div>;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
index 5789c6c75..80a74fe4c 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
@@ -1,5 +1,7 @@
 .antimodeMenu-button {
     width: 200px;
+    position: absolute;
+    text-align: left;
 
     .color-previewI {
         width: 100%;
@@ -10,8 +12,14 @@
         width: 100%;
         height: 100%;
     }
+}
 
-
+.antimenu-Buttonup {
+    position: absolute;
+    width: 20;
+    height: 10;
+    right: 0;
+    padding: 0;
 }
 
 .sketch-picker {
@@ -47,7 +55,5 @@
     .antimodeMenu-button {
         background: #323232;
         display: block;
-
-
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index 321b5648e..3a1c8b18d 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -5,149 +5,84 @@ import { observable, action, computed } from "mobx";
 import "./FormatShapePane.scss";
 import { Scripting } from "../../../util/Scripting";
 import { InkField } from "../../../../fields/InkField";
-import { Doc, Opt } from "../../../../fields/Doc";
+import { Doc, Opt, Field } from "../../../../fields/Doc";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { DocumentView } from "../../../views/nodes/DocumentView";
 import { Document } from "../../../../fields/documentSchemas";
 import { DocumentType } from "../../../documents/DocumentTypes";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
-import { faRulerCombined, faFillDrip, faPenNib } from "@fortawesome/free-solid-svg-icons";
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types";
 
-library.add(faRulerCombined, faFillDrip, faPenNib);
-
 @observer
 export default class FormatShapePane extends AntimodeMenu {
     static Instance: FormatShapePane;
 
+    private _lastFill = "#D0021B";
+    private _lastLine = "#D0021B";
+    private _lastDash = "2";
     private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"];
-    private _width = ["1", "5", "10", "100"];
     private _mode = ["fill-drip", "ruler-combined"];
     private _subMenu = ["fill", "line", "size", "position"];
-    @computed get inks() {
-        const inks: DocumentView[] = [];
-        const docs = SelectionManager.SelectedDocuments();
-        for (var i = 0; i < docs.length; i++) {
-            if (Document(docs[i].rootDoc).type === DocumentType.INK) {
-                inks.push(docs[i]);
-            }
-        }
-        return inks.length ? inks : undefined;
-    }
+
     @observable private _subOpen = [false, false, false, false];
-    @observable private collapsed: boolean = false;
-    @observable private currMode: string = "fill-drip";
-    @observable _lock = false;
-    @observable _fillBtn = false;
-    @observable _lineBtn = false;
-    _lastFill = "#D0021B";
-    _lastLine = "#D0021B";
-    _lastDash = "2";
+    @observable private _currMode: string = "fill-drip";
+    @observable private _lock = false;
+    @observable private _fillBtn = false;
+    @observable private _lineBtn = false;
 
-    @computed get _noFill() {
-        return this.inks?.reduce((p, i) => p && !i.rootDoc.fillColor ? true : false, true) || false;
+    getField(key: string) {
+        return this.inks?.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>)
     }
-    @computed get _solidFill() {
-        return this.inks?.reduce((p, i) => p && i.rootDoc.fillColor ? true : false, true) || false;
+
+    @computed get inks() {
+        const inks = SelectionManager.SelectedDocuments().filter(i => Document(i.rootDoc).type === DocumentType.INK);
+        return inks.length ? inks : undefined;
     }
+    @computed get _noFill() { return this.inks?.reduce((p, i) => p && !i.rootDoc.fillColor ? true : false, true) || false; }
+    @computed get _solidFill() { return this.inks?.reduce((p, i) => p && i.rootDoc.fillColor ? true : false, true) || false; }
+    @computed get _noLine() { return this.inks?.reduce((p, i) => p && !i.rootDoc.color ? true : false, true) || false; }
+    @computed get _solidLine() { return this.inks?.reduce((p, i) => p && i.rootDoc.color && (!i.rootDoc.dash || i.rootDoc.dash === "0") ? true : false, true) || false; }
+    @computed get _arrowStart() { return this.getField("arrowStart") || ""; }
+    @computed get _arrowEnd() { return this.getField("arrowEnd") || ""; }
+    @computed get _dashLine() { return !this._noLine && this.getField("dash") || ""; }
+    @computed get _currSizeHeight() { return this.getField("_height"); }
+    @computed get _currSizeWidth() { return this.getField("_width"); }
+    @computed get _currRotation() { return this.getField("rotation"); }
+    @computed get _currXpos() { return this.getField("x"); }
+    @computed get _currYpos() { return this.getField("y"); }
+    @computed get _currStrokeWidth() { return this.getField("strokeWidth"); }
+    @computed get _currFill() { const cfill = this.getField("fillColor") || ""; cfill && (this._lastFill = cfill); return cfill; }
+    @computed get _currColor() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; }
     set _noFill(value) { this._currFill = value ? "" : this._lastFill; }
     set _solidFill(value) { this._noFill = !value; }
-
-    @computed get _noLine() {
-        return this.inks?.reduce((p, i) => p && !i.rootDoc.color ? true : false, true) || false;
-    }
-    @computed get _solidLine() {
-        return this.inks?.reduce((p, i) => p &&
-            i.rootDoc.color && (i.rootDoc.dash === undefined || i.rootDoc.dash === "0") ? true : false, true) || false;
-    }
-    @computed get _dashLine() {
-        return !this._noLine && this.inks?.reduce((p, i) =>
-            (p === undefined || (p && p === i.rootDoc.dash)) && i.rootDoc.dash !== "0" ? StrCast(i.rootDoc.dash) : "", undefined as Opt<string>) || "";
-    }
+    set _currFill(value) { value && (this._lastFill = value); this.inks?.forEach(i => i.rootDoc.fillColor = value ? value : undefined); }
+    set _currColor(value) { value && (this._lastLine = value); this.inks?.forEach(i => i.rootDoc.color = value ? value : undefined); }
+    set _arrowStart(value) { this.inks?.forEach(i => i.rootDoc.arrowStart = value); }
+    set _arrowEnd(value) { this.inks?.forEach(i => i.rootDoc.arrowEnd = value); }
     set _noLine(value) { this._currColor = value ? "" : this._lastLine; }
     set _solidLine(value) { this._dashLine = ""; this._noLine = !value; }
     set _dashLine(value) {
-        value && (this._lastDash = value); this._noLine = false;
-        this.inks?.forEach(i => i.rootDoc.dash = value ? this._lastDash : undefined)
-    }
-
-    @computed get _currFill() {
-        const cfill = this._noFill || !this.inks ? "" : StrCast(this.inks[0].rootDoc.fillColor);
-        cfill && (this._lastFill = cfill);
-        return cfill;
-    }
-    @computed get _currColor() {
-        const ccol = this._noLine || !this.inks ? "" : StrCast(this.inks[0].rootDoc.color, "");
-        this._lastLine = ccol ? ccol : this._lastLine;
-        return ccol;
-    }
-    set _currFill(value) { value && (this._lastFill = value); this.inks?.forEach(i => i.rootDoc.fillColor = value); }
-    set _currColor(value) { value && (this._lastLine = value); this.inks?.forEach(i => i.rootDoc.color = value ? value : undefined) }
-
-    @computed get _arrowStart() {
-        return this.inks?.reduce((p, i) =>
-            (p === undefined || (p && p === i.rootDoc.arrowStart)) ? StrCast(i.rootDoc.arrowStart) : "", undefined as Opt<string>) || "";
-    }
-    @computed get _arrowEnd() {
-        return this.inks?.reduce((p, i) =>
-            (p === undefined || (p && p === i.rootDoc.arrowEnd)) ? StrCast(i.rootDoc.arrowEnd) : "", undefined as Opt<string>) || ""
-    }
-    set _arrowStart(value) { this.inks?.forEach(i => i.rootDoc.arrowStart = value); }
-    set _arrowEnd(value) { this.inks?.forEach(i => i.rootDoc.arrowEnd = value); }
-
-    @computed get _currSizeHeight() {
-        return this.inks?.reduce((p, i) =>
-            (p === undefined || (p === NumCast(i.rootDoc._height).toString())) ? NumCast(i.rootDoc._height).toString() : "", undefined as Opt<string>) || ""
+        value && (this._lastDash = value) && (this._noLine = false);
+        this.inks?.forEach(i => i.rootDoc.dash = value ? this._lastDash : undefined);
     }
-    @computed get _currSizeWidth() {
-        return this.inks?.reduce((p, i) =>
-            (p === undefined || (p === NumCast(i.rootDoc._width).toString())) ? NumCast(i.rootDoc._width).toString() : "", undefined as Opt<string>) || ""
-    }
-    @computed get _currRotation() {
-        return this.inks?.reduce((p, i) =>
-            (p === undefined || (p === NumCast(i.rootDoc.rotation).toString())) ? NumCast(i.rootDoc.rotation).toString() : "", undefined as Opt<string>) || ""
-    }
-    @computed get _currPositionHorizontal() {
-        return this.inks?.reduce((p, i) =>
-            (p === undefined || (p === NumCast(i.rootDoc.x).toString())) ? NumCast(i.rootDoc.x).toString() : "", undefined as Opt<string>) || ""
-    }
-    @computed get _currPositionVertical() {
-        return this.inks?.reduce((p, i) =>
-            (p === undefined || (p === NumCast(i.rootDoc.y).toString())) ? NumCast(i.rootDoc.y).toString() : "", undefined as Opt<string>) || ""
-    }
-    @computed get _currStrokeWidth() {
-        return this.inks?.reduce((p, i) =>
-            (p === undefined || (p === NumCast(i.rootDoc.strokeWidth).toString())) ? NumCast(i.rootDoc.strokeWidth).toString() : "", undefined as Opt<string>) || ""
-    }
-    set _currPositionHorizontal(value) { this.inks?.forEach(i => i.rootDoc.x = Number(value)); }
-    set _currPositionVertical(value) { this.inks?.forEach(i => i.rootDoc.y = Number(value)); }
+    set _currXpos(value) { this.inks?.forEach(i => i.rootDoc.x = Number(value)); }
+    set _currYpos(value) { this.inks?.forEach(i => i.rootDoc.y = Number(value)); }
     set _currRotation(value) { this.inks?.forEach(i => i.rootDoc.rotation = Number(value)); }
     set _currStrokeWidth(value) { this.inks?.forEach(i => i.rootDoc.strokeWidth = Number(value)); }
     set _currSizeWidth(value) {
-        this.inks?.forEach(i => {
-            const doc = i.rootDoc;
-            if (doc._width && doc._height) {
-                const oldWidth = NumCast(doc._width);
-                const oldHeight = NumCast(doc._height);
-                doc._width = Number(value);
-                if (this._lock) {
-                    doc._height = (doc._width * oldHeight) / oldWidth;
-                }
-            }
+        this.inks?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
+            const oldWidth = NumCast(i.rootDoc._width);
+            i.rootDoc._width = Number(value);
+            this._lock && (i.rootDoc._height = (i.rootDoc._width * NumCast(i.rootDoc._height)) / oldWidth);
         });
     }
     set _currSizeHeight(value) {
-        this.inks?.forEach(i => {
-            const doc = i.rootDoc;
-            if (doc._width && doc._height) {
-                const oldWidth = NumCast(doc._width);
-                const oldHeight = NumCast(doc._height);
-                doc._height = Number(value);
-                if (this._lock) {
-                    doc._width = (doc._height * oldWidth) / oldHeight;
-                }
-            }
+        this.inks?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
+            const oldHeight = NumCast(i.rootDoc._height);
+            i.rootDoc._height = Number(value);
+            this._lock && (i.rootDoc._width = (i.rootDoc._height * NumCast(i.rootDoc._width)) / oldHeight);
         });
     }
 
@@ -159,20 +94,6 @@ export default class FormatShapePane extends AntimodeMenu {
     }
 
     @action
-    toggleMenuPin = (e: React.MouseEvent) => {
-        Doc.UserDoc()["formatShapePane-pinned"] = this.Pinned = !this.Pinned;
-    }
-
-    @action
-    protected toggleCollapse = (e: React.MouseEvent) => {
-        this.collapsed = !this.collapsed;
-        setTimeout(() => {
-            const x = Math.min(this._left, window.innerWidth - FormatShapePane.Instance.width);
-            FormatShapePane.Instance.jumpTo(x, this._top, true);
-        }, 0);
-    }
-
-    @action
     closePane = () => {
         this.jumpTo(-300, -300);
         this.Pinned = false;
@@ -203,7 +124,7 @@ export default class FormatShapePane extends AntimodeMenu {
                     const doc = i.rootDoc;
                     if (doc._width && doc._height) {
                         const oldWidth = NumCast(doc._width);
-                        const oldHeight = NumCast(doc._height)
+                        const oldHeight = NumCast(doc._height);
                         doc._height = NumCast(doc._height) + (dirs === "up" ? 10 : - 10);
                         if (this._lock) {
                             doc._width = (NumCast(doc._height) * oldWidth) / oldHeight;
@@ -215,30 +136,20 @@ export default class FormatShapePane extends AntimodeMenu {
     }
 
     @computed get close() {
-        const close = <button
-            className="antimodeMenu-button"
-            key="close"
-            onPointerDown={action(() => { this.closePane(); })}
-            style={{ right: 0, position: "absolute" }}>
+        return <button className="antimodeMenu-button" key="close" onPointerDown={action(() => this.closePane())} style={{ right: 0 }}>
             X
-                </button>;
-        return close;
+        </button>;
     }
 
     //select either coor&fill or size&position
     @computed get modes() {
-        const modes = <div className="antimodeMenu-button-tab">
-            {this._mode.map(mode => {
-                return <button
-                    className="antimodeMenu-button"
-                    key={mode}
-                    onPointerDown={action(() => { this.currMode = mode; })}
-                    style={{ backgroundColor: this.currMode === mode ? "121212" : "", position: "relative", top: 30 }}>
+        return <div className="antimodeMenu-button-tab" key="modes">
+            {this._mode.map(mode =>
+                <button className="antimodeMenu-button" key={mode} onPointerDown={action(() => { this._currMode = mode; })}
+                    style={{ backgroundColor: this._currMode === mode ? "121212" : "", position: "relative", top: 30 }}>
                     <FontAwesomeIcon icon={mode as IconProp} size="lg" />
-                </button>;
-            })
-            }</div>;
-        return modes;
+                </button>)}
+        </div>;
     }
 
     @action
@@ -280,7 +191,7 @@ export default class FormatShapePane extends AntimodeMenu {
     }
 
     @computed get subMenu() {
-        const fillCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
+        const fillCheck = <div key="fill" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
             <input id="nofill" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._noFill} onChange={action(() => this._noFill = true)} />
             No Fill
             <br />
@@ -291,16 +202,18 @@ export default class FormatShapePane extends AntimodeMenu {
             {this._solidFill ? "Color" : ""}
             {this._solidFill ? this.fillButton : ""}
             {this._fillBtn && this._solidFill ? this.fillPicker : ""}
-
         </div>;
-        const arrows = <> <input id="arrowStart" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowStart !== ""} onChange={action(() => this._arrowStart = this._arrowStart ? "" : "arrow")} />
-         Arrow Head
+
+        const arrows = <>
+            <input id="arrowStart" key="arrowstart" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowStart !== ""} onChange={action(() => this._arrowStart = this._arrowStart ? "" : "arrow")} />
+            Arrow Head
+            <br />
+            <input id="arrowEnd" key="arrowend" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowEnd !== ""} onChange={action(() => this._arrowEnd = this._arrowEnd ? "" : "arrow")} />
+            Arrow End
             <br />
+        </>;
 
-            <input id="arrowEnd" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowEnd !== ""} onChange={action(() => this._arrowEnd = this._arrowEnd ? "" : "arrow")} />
-         Arrow End
-            <br /></>;
-        const lineCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
+        const lineCheck = <div key="lineCheck" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
             <input id="noLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._noLine} onChange={action(() => this._noLine = true)} />
                 No Line
             <br />
@@ -320,15 +233,13 @@ export default class FormatShapePane extends AntimodeMenu {
             <br />
             <br />
             {(this._solidLine || this._dashLine) ? arrows : ""}
-
         </div>;
 
-        const sizeCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
+        const sizeCheck = <div key="sizeCheck" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
             Height {this.sizeHeightInput}
             <br />
             <br />
 
-
             Width {this.sizeWidthInput}
             <br />
             <br />
@@ -338,14 +249,12 @@ export default class FormatShapePane extends AntimodeMenu {
             <br />
             <br />
 
-
             Rotation {this.rotationInput}
             <br />
             <br />
-
-
         </div>;
-        const positionCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
+
+        const positionCheck = <div key="posCheck" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
             Horizontal {this.positionHorizontalInput}
             <br />
             <br />
@@ -353,280 +262,88 @@ export default class FormatShapePane extends AntimodeMenu {
             Vertical {this.positionVerticalInput}
             <br />
             <br />
-
-
         </div>;
 
-        const subMenu = <div className="antimodeMenu-sub" style={{ position: "absolute", width: "inherit", top: 60 }}>
+        return <div className="antimodeMenu-sub" key="submenu" style={{ position: "absolute", width: "inherit", top: 60 }}>
             {this._subMenu.map((subMenu, i) => {
                 if (subMenu === "fill" || subMenu === "line") {
-                    return <div style={{ width: "inherit" }}><button
-                        className="antimodeMenu-button"
-                        key={subMenu}
-                        onPointerDown={action(() => { this._subOpen[i] = this._subOpen[i] ? false : true; })}
-                        style={{ backgroundColor: "121212", display: this.currMode === "fill-drip" ? "" : "none", width: "inherit", textAlign: "left" }}>
-                        {this._subOpen[i] ? "▼" : "▶︎"}
-                        {subMenu}
-                    </button>
-                        {this.currMode === "fill-drip" && subMenu === "fill" && this._subOpen[0] ? fillCheck : ""}
-                        {this.currMode === "fill-drip" && subMenu === "line" && this._subOpen[1] ? lineCheck : ""}
-
+                    return <div key={subMenu} style={{ width: "inherit" }}>
+                        <button className="antimodeMenu-button"
+                            onPointerDown={action(() => { this._subOpen[i] = this._subOpen[i] ? false : true; })}
+                            style={{ backgroundColor: "121212", position: "relative", display: this._currMode === "fill-drip" ? "" : "none", width: "inherit" }}>
+                            {this._subOpen[i] ? "▼" : "▶︎"}
+                            {subMenu}
+                        </button>
+                        {this._currMode === "fill-drip" && subMenu === "fill" && this._subOpen[0] ? fillCheck : ""}
+                        {this._currMode === "fill-drip" && subMenu === "line" && this._subOpen[1] ? lineCheck : ""}
                     </div>;
                 }
                 else if (subMenu === "size" || subMenu === "position") {
-                    return <div style={{ width: "inherit" }}><button
-                        className="antimodeMenu-button"
-                        key={subMenu}
-                        onPointerDown={action(() => { this._subOpen[i] = this._subOpen[i] ? false : true; })}
-                        style={{ backgroundColor: "121212", display: this.currMode === "ruler-combined" ? "" : "none", width: "inherit", textAlign: "left" }}>
-                        {this._subOpen[i] ? "▼" : "▶︎"}
-                        {subMenu}
-                    </button>
-                        {this.currMode === "ruler-combined" && subMenu === "size" && this._subOpen[2] ? sizeCheck : ""}
-                        {this.currMode === "ruler-combined" && subMenu === "position" && this._subOpen[3] ? positionCheck : ""}
-
-                    </div>
-                        ;
-
+                    return <div key={subMenu} style={{ width: "inherit" }}>
+                        <button className="antimodeMenu-button"
+                            onPointerDown={action(() => { this._subOpen[i] = this._subOpen[i] ? false : true; })}
+                            style={{ backgroundColor: "121212", position: "relative", display: this._currMode === "ruler-combined" ? "" : "none", width: "inherit" }}>
+                            {this._subOpen[i] ? "▼" : "▶︎"}
+                            {subMenu}
+                        </button>
+                        {this._currMode === "ruler-combined" && subMenu === "size" && this._subOpen[2] ? sizeCheck : ""}
+                        {this._currMode === "ruler-combined" && subMenu === "position" && this._subOpen[3] ? positionCheck : ""}
+                    </div>;
                 }
-            })
-            }</div>;
-        return subMenu;
-    }
-
-    @computed get fillButton() {
-        return <>
-            <button
-                className="antimodeMenu-button"
-                key="fill"
-                title="fillChanger"
-                onPointerDown={action(e => this._fillBtn = !this._fillBtn)}
-                style={{
-                    // backgroundColor: "121212",
-                    position: "absolute", right: 80
-                }}>
-                <FontAwesomeIcon icon="fill-drip" size="lg" />
-                <div className="color-previewI" style={{ backgroundColor: this._currFill ?? "121212" }}></div>
-            </button>
-            <br></br>
-            <br></br>
-        </>;
-    }
-    @computed get fillPicker() {
-        return <div className="btn-group-palette" key="fill" >
-            {this._palette.map(color => {
-                return <button
-                    className="antimodeMenu-button"
-                    key={color}
-                    onPointerDown={action(() => this._currFill = color)}
-                    style={{
-                        // backgroundColor: this._fillBtn ? "121212" : "",
-                        zIndex: 1001
-                    }}>
-                    <div className="color-previewII" style={{ backgroundColor: color }}></div>
-                </button>;
             })}
-
         </div>;
     }
 
-    @computed get lineButton() {
-        return <>
-            <button
-                className="antimodeMenu-button"
-                key="line"
-                title="lineChanger"
-                onPointerDown={action(e => this._lineBtn = !this._lineBtn)}
-                style={{
-                    // backgroundColor: "121212",
-                    position: "absolute", right: 80
-                }}>
-                <FontAwesomeIcon icon="pen-nib" size="lg" />
-                <div className="color-previewI" style={{ backgroundColor: this._currColor ?? "121212" }}></div>
-            </button>
-            <br />
-            <br />
-        </>;
-    }
-    @computed get linePicker() {
-        return <div className="btn-group-palette" key="line" >
-            {this._palette.map(color => {
-                return <button
-                    className="antimodeMenu-button"
-                    key={color}
-                    onPointerDown={action(() => this._currColor = color)}
-                    style={{
-                        // backgroundColor: this._lineBtn ? "121212" : "",
-                        zIndex: 1001
-                    }}>
-                    <div className="color-previewII" style={{ backgroundColor: color }}></div>
-                </button>;
-            })}
-
+    colorPicker(setter: (color: string) => {}) {
+        return <div className="btn-group-palette" key="colorpicker" >
+            {this._palette.map(color =>
+                <button className="antimodeMenu-button" key={color} onPointerDown={action(() => setter(color))} style={{ zIndex: 1001, position: "relative" }}>
+                    <div className="color-previewII" style={{ backgroundColor: color }} />
+                </button>)}
         </div>;
     }
-    @computed get widthInput() {
-        const widthInput = <>
-            <input
-                style={{ color: "black", width: 80, position: "absolute", right: 20 }}
-                type="text" value={this._currStrokeWidth}
-                onChange={e => this._currStrokeWidth = e.target.value}
-                autoFocus />
-            <button
-                className="antiMenu-Buttonup"
-                key="up"
-                onPointerDown={action(() => { this.upDownButtons("up", "width"); })}
-                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
-                ˄
-            </button>
-            <br />
-            <button
-                className="antiMenu-Buttonup"
-                key="up"
-                onPointerDown={action(() => { this.upDownButtons("down", "width"); })}
-                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0, marginTop: -8 }}>
-                ˅
-            </button></>;
-        return widthInput;
-    }
-    @computed get sizeHeightInput() {
-        const sizeHeightInput = <>
-            <input
-                style={{ color: "black", width: 80, position: "absolute", right: 20 }}
-                type="text" value={this._currSizeHeight}
-                onChange={e => this._currSizeHeight = e.target.value}
-                autoFocus />
-            <button
-                className="antiMenu-Buttonup"
-                key="up"
-                onPointerDown={action(() => { this.upDownButtons("up", "sizeHeight"); })}
-                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
-                ˄
-            </button>
-            <br />
-            <button
-                className="antiMenu-Buttonup"
-                key="up"
-                onPointerDown={action(() => { this.upDownButtons("down", "sizeHeight"); })}
-                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0, marginTop: -8 }}>
-                ˅
-            </button>
-        </>;
-        return sizeHeightInput;
-    }
-
-    @computed get sizeWidthInput() {
-        const sizeWidthInput = <>
-            <input
-                style={{ color: "black", width: 80, position: "absolute", right: 20 }}
-                type="text" value={this._currSizeWidth}
-                onChange={e => this._currSizeWidth = e.target.value}
+    inputBox = (key: string, value: any, setter: (val: string) => {}) => {
+        return <>
+            <input style={{ color: "black", width: 80, position: "absolute", right: 20 }}
+                type="text" value={value}
+                onChange={e => setter(e.target.value)}
                 autoFocus />
-            <button
-                className="antiMenu-Buttonup"
-                key="up"
-                onPointerDown={action(() => { this.upDownButtons("up", "sizeWidth"); })}
-                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
+            <button className="antiMenu-Buttonup" key="up" onPointerDown={action(() => this.upDownButtons("up", key))}>
                 ˄
             </button>
             <br />
-            <button
-                className="antiMenu-Buttonup"
-                key="up"
-                onPointerDown={action(() => { this.upDownButtons("down", "sizeWidth"); })}
-                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0, marginTop: -8 }}>
-                ˅
-            </button></>;
-        return sizeWidthInput;
-    }
-
-    @computed get rotationInput() {
-        const rotationInput =
-            <>
-                <input
-                    style={{ color: "black", width: 80, position: "absolute", right: 20 }}
-                    type="text" value={this._currRotation}
-                    onChange={e => this._currRotation = e.target.value}
-                    autoFocus></input>
-                <button
-                    className="antiMenu-Buttonup"
-                    key="up"
-                    onPointerDown={action(() => { this.upDownButtons("up", "rotation"); })}
-                    style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
-                    ˄
-            </button>
-                <br />
-                <button
-                    className="antiMenu-Buttonup"
-                    key="up"
-                    onPointerDown={action(() => { this.upDownButtons("down", "rotation"); })}
-                    style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0, marginTop: -8 }}>
-                    ˅
-            </button></>;
-        return rotationInput;
-    }
-
-    @computed get positionHorizontalInput() {
-        return <>
-            <input
-                style={{ color: "black", width: 80, position: "absolute", right: 20 }}
-                type="text" value={this._currPositionHorizontal}
-                onChange={e => this._currPositionHorizontal = e.target.value}
-                autoFocus
-            />
-            <button
-                className="antiMenu-Buttonup"
-                key="up"
-                onPointerDown={action(() => { this.upDownButtons("up", "horizontal"); })}
-                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
-                ˄
-                </button>
-            <br></br>
-            <button
-                className="antiMenu-Buttonup"
-                key="up"
-                onPointerDown={action(() => { this.upDownButtons("down", "horizontal"); })}
-                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0, marginTop: -8 }}>
+            <button className="antiMenu-Buttonup" key="down" onPointerDown={action(() => this.upDownButtons("down", key))} style={{ marginTop: -8 }}>
                 ˅
             </button>
         </>;
     }
 
-    @computed get positionVerticalInput() {
+    colorButton(value: string, setter: () => {}) {
         return <>
-            <input
-                style={{ color: "black", width: 80, position: "absolute", right: 20 }}
-                type="text" value={this._currPositionVertical}
-                onChange={e => this._currPositionVertical = e.target.value}
-                autoFocus></input>
-            <button
-                className="antiMenu-Buttonup"
-                key="up"
-                onPointerDown={action(() => { this.upDownButtons("down", "vertical"); })}
-                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
-                ˄
+            <button className="antimodeMenu-button" key="fill" onPointerDown={action(e => setter())} style={{ right: 80 }}>
+                <FontAwesomeIcon icon="fill-drip" size="lg" />
+                <div className="color-previewI" style={{ backgroundColor: value ?? "121212" }} />
             </button>
             <br></br>
-            <button
-                className="antiMenu-Buttonup"
-                key="up"
-                onPointerDown={action(() => { this.upDownButtons("up", "vertical"); })}
-                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0, marginTop: -8 }}>
-                ˅
-            </button>
+            <br></br>
         </>;
     }
 
-    render() {
-        const buttons = [
+    @computed get fillButton() { return this.colorButton(this._currFill, () => this._fillBtn = !this._fillBtn); }
+    @computed get lineButton() { return this.colorButton(this._currColor, () => this._lineBtn = !this._lineBtn); }
 
-            this.close,
-            this.modes,
-            this.subMenu
+    @computed get fillPicker() { return this.colorPicker((color: string) => this._currFill = color); }
+    @computed get linePicker() { return this.colorPicker((color: string) => this._currColor = color); }
 
-        ];
+    @computed get widthInput() { return this.inputBox("width", this._currStrokeWidth, (val: string) => this._currStrokeWidth = val); }
+    @computed get sizeHeightInput() { return this.inputBox("height", this._currSizeHeight, (val: string) => this._currSizeHeight = val); }
+    @computed get sizeWidthInput() { return this.inputBox("height", this._currSizeWidth, (val: string) => this._currSizeWidth = val); }
+    @computed get rotationInput() { return this.inputBox("rotation", this._currRotation, (val: string) => this._currRotation = val); }
+    @computed get positionHorizontalInput() { return this.inputBox("horizontal", this._currXpos, (val: string) => this._currXpos = val); }
+    @computed get positionVerticalInput() { return this.inputBox("vertical", this._currYpos, (val: string) => this._currYpos = val); }
 
-        return this.getElementVert(buttons);
+    render() {
+        return this.getElementVert([this.close, this.modes, this.subMenu]);
     }
 }
 Scripting.addGlobal(function activatePen2(penBtn: any) {
@@ -635,11 +352,9 @@ Scripting.addGlobal(function activatePen2(penBtn: any) {
         // Doc.SetSelectedTool(InkTool.Pen);
         FormatShapePane.Instance.jumpTo(300, 300);
         FormatShapePane.Instance.Pinned = true;
-
     } else {
         // Doc.SetSelectedTool(InkTool.None);
         FormatShapePane.Instance.Pinned = false;
         FormatShapePane.Instance.fadeOut(true);
-
     }
 });
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
index f739fcc8c..03c6c97ab 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -9,7 +9,6 @@
         height: 100%;
     }
 
-
 }
 
 .sketch-picker {
@@ -41,6 +40,44 @@
         background: #323232;
         display: block;
 
+    }
+}
+
+@media only screen and (max-device-width: 480px) {
+    .antimodeMenu-button {
+        font-size: 50%;
+
+        .color-preview {
+            width: 100%;
+            height: 100%;
+        }
+
+    }
+
+    .sketch-picker {
+        background: #323232;
+
+        .flexbox-fit {
+            background: #323232;
+        }
+    }
+
+    .btn-group {
+        display: grid;
+        grid-template-columns: auto auto;
+        /* Make the buttons appear below each other */
+    }
+
+    .btn2-group {
+        display: block;
+        background: #323232;
+        grid-template-columns: auto;
 
+        /* Make the buttons appear below each other */
+        .antimodeMenu-button {
+            background: #323232;
+            display: block;
+            font-size: 50%;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 0866db2be..ddba8a66d 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -21,6 +21,8 @@ import { Cast, StrCast, BoolCast } from "../../../../fields/Types";
 
 library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve);
 
+
+
 @observer
 export default class InkOptionsMenu extends AntimodeMenu {
     static Instance: InkOptionsMenu;
@@ -53,6 +55,8 @@ export default class InkOptionsMenu extends AntimodeMenu {
     // @observable _dashBtn = false;
     // @observable _shapeBtn = false;
 
+
+
     constructor(props: Readonly<{}>) {
         super(props);
         InkOptionsMenu.Instance = this;
@@ -424,4 +428,4 @@ Scripting.addGlobal(function activatePen(penBtn: any) {
         InkOptionsMenu.Instance.fadeOut(true);
 
     }
-});
\ No newline at end of file
+});
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 97ed74c10..b47236bea 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -493,7 +493,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         summary._backgroundColor = "#e2ad32";
         portal.layoutKey = "layout_portal";
         portal.title = "document collection";
-        DocUtils.MakeLink({ doc: summary }, { doc: portal }, "summarizing");
+        DocUtils.MakeLink({ doc: summary }, { doc: portal }, "summarizing", "");
 
         this.props.addLiveTextDocument(summary);
         MarqueeOptionsMenu.Instance.fadeOut(true);