final cleanup of names and structure of FormatShapePane

4 files changed, 182 insertions, 238 deletions

diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index d7f956e4f..abc698e62 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -63,7 +63,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         const strokeColor = StrCast(this.layoutDoc.color, "");
         const points = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth,
             StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"),
-            StrCast(this.layoutDoc.strokeArrowStart), StrCast(this.layoutDoc.strokeArrowEnd),
+            StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker),
             StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5, false);
         const hpoints = InteractionUtils.CreatePolyline(data, left, top,
             this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15),
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
index 7720140b9..88876471c 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
@@ -22,6 +22,11 @@
     padding: 0;
 }
 
+.formatShapePane-inputBtn {
+    width: inherit;
+     position: absolute;
+}
+
 .sketch-picker {
     background: #323232;
 
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index 77d1b646d..56ba9e96a 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -1,18 +1,16 @@
 import React = require("react");
-import AntimodeMenu from "../../AntimodeMenu";
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { observable, action, computed } from "mobx";
-import "./FormatShapePane.scss";
-import { Scripting } from "../../../util/Scripting";
-import { InkField } from "../../../../fields/InkField";
-import { Doc, Opt, Field } from "../../../../fields/Doc";
-import { SelectionManager } from "../../../util/SelectionManager";
-import { DocumentView } from "../../../views/nodes/DocumentView";
+import { Doc, Field, Opt } from "../../../../fields/Doc";
 import { Document } from "../../../../fields/documentSchemas";
+import { InkField } from "../../../../fields/InkField";
+import { BoolCast, Cast, NumCast } from "../../../../fields/Types";
 import { DocumentType } from "../../../documents/DocumentTypes";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types";
+import { SelectionManager } from "../../../util/SelectionManager";
+import AntimodeMenu from "../../AntimodeMenu";
+import "./FormatShapePane.scss";
 
 @observer
 export default class FormatShapePane extends AntimodeMenu {
@@ -23,63 +21,62 @@ export default class FormatShapePane extends AntimodeMenu {
     private _lastDash = "2";
     private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"];
     private _mode = ["fill-drip", "ruler-combined"];
-    private _subMenu = ["fill", "line", "size", "position"];
 
     @observable private _subOpen = [false, false, false, false];
-    @observable private _currMode: string = "fill-drip";
+    @observable private _currMode = "fill-drip";
     @observable private _lock = false;
     @observable private _fillBtn = false;
     @observable private _lineBtn = false;
 
     getField(key: string) {
-        return this.inks?.reduce((p, i) =>
+        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>)
     }
 
-    @computed get inks() {
+    @computed get selectedInk() {
         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.strokeDash || i.rootDoc.strokeDash === "0") ? true : false, true) || false; }
-    @computed get _arrowStart() { return this.getField("strokeArrowStart") || ""; }
-    @computed get _arrowEnd() { return this.getField("strokeArrowEnd") || ""; }
-    @computed get _dashLine() { return !this._noLine && this.getField("strokeDash") || ""; }
-    @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; }
-    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.strokeArrowStart = value); }
-    set _arrowEnd(value) { this.inks?.forEach(i => i.rootDoc.strokeArrowEnd = 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.strokeDash = value ? this._lastDash : undefined);
+    @computed get unFilled() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.fillColor ? true : false, true) || false; }
+    @computed get unStrokd() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.color ? true : false, true) || false; }
+    @computed get solidFil() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.fillColor ? true : false, true) || false; }
+    @computed get solidStk() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.color && (!i.rootDoc.strokeDash || i.rootDoc.strokeDash === "0") ? true : false, true) || false; }
+    @computed get dashdStk() { return !this.unStrokd && this.getField("strokeDash") || ""; }
+    @computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; }
+    @computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; }
+    @computed get widthStk() { return this.getField("strokeWidth") || "1"; }
+    @computed get markHead() { return this.getField("strokeStartMarker") || ""; }
+    @computed get markTail() { return this.getField("strokeEndMarker") || ""; }
+    @computed get shapeHgt() { return this.getField("_height"); }
+    @computed get shapeWid() { return this.getField("_width"); }
+    @computed get shapeXps() { return this.getField("x"); }
+    @computed get shapeYps() { return this.getField("y"); }
+    @computed get shapeRot() { return this.getField("rotation"); }
+    set unFilled(value) { this.colorFil = value ? "" : this._lastFill; }
+    set solidFil(value) { this.unFilled = !value; }
+    set colorFil(value) { value && (this._lastFill = value); this.selectedInk?.forEach(i => i.rootDoc.fillColor = value ? value : undefined); }
+    set colorStk(value) { value && (this._lastLine = value); this.selectedInk?.forEach(i => i.rootDoc.color = value ? value : undefined); }
+    set markHead(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeStartMarker = value); }
+    set markTail(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeEndMarker = value); }
+    set unStrokd(value) { this.colorStk = value ? "" : this._lastLine; }
+    set solidStk(value) { this.dashdStk = ""; this.unStrokd = !value; }
+    set dashdStk(value) {
+        value && (this._lastDash = value) && (this.unStrokd = false);
+        this.selectedInk?.forEach(i => i.rootDoc.strokeDash = value ? this._lastDash : undefined);
     }
-    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?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
+    set shapeXps(value) { this.selectedInk?.forEach(i => i.rootDoc.x = Number(value)); }
+    set shapeYps(value) { this.selectedInk?.forEach(i => i.rootDoc.y = Number(value)); }
+    set shapeRot(value) { this.selectedInk?.forEach(i => i.rootDoc.rotation = Number(value)); }
+    set widthStk(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = Number(value)); }
+    set shapeWid(value) {
+        this.selectedInk?.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?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
+    set shapeHgt(value) {
+        this.selectedInk?.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);
@@ -90,72 +87,41 @@ export default class FormatShapePane extends AntimodeMenu {
         super(props);
         FormatShapePane.Instance = this;
         this._canFade = false;
-        this.Pinned = BoolCast(Doc.UserDoc()["formatShapePane-pinned"]);
+        this.Pinned = BoolCast(Doc.UserDoc()["menuFormatShape-pinned"]);
     }
 
     @action
     closePane = () => {
-        this.jumpTo(-300, -300);
+        this.fadeOut(false);
         this.Pinned = false;
     }
 
     @action
     upDownButtons = (dirs: string, field: string) => {
         switch (field) {
-            case "horizontal": this.inks?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break;
-            case "vertical": this.inks?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break;
-            case "rotation": this.rotate((dirs === "up" ? .1 : -.1)); break;
-            case "width": this.inks?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break;
-            case "sizeWidth":
-                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 = NumCast(doc._width) + (dirs === "up" ? 10 : - 10);
-                        if (this._lock) {
-                            doc._height = (NumCast(doc._width) * oldHeight) / oldWidth;
-                        }
-                    }
-                });
+            case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break;
+            case "Xps": this.selectedInk?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break;
+            case "Yps": this.selectedInk?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break;
+            case "stk": this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break;
+            case "wid": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
+                const oldWidth = NumCast(i.rootDoc._width);
+                i.rootDoc._width = oldWidth + (dirs === "up" ? 10 : - 10);
+                this._lock && (i.rootDoc._height = (i.rootDoc._width / oldWidth * NumCast(i.rootDoc._height)));
+            });
                 break;
-            case "sizeHeight":
-                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 = NumCast(doc._height) + (dirs === "up" ? 10 : - 10);
-                        if (this._lock) {
-                            doc._width = (NumCast(doc._height) * oldWidth) / oldHeight;
-                        }
-                    }
-                });
+            case "hgt": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
+                const oldHeight = NumCast(i.rootDoc._height);
+                i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10);
+                this._lock && (i.rootDoc._width = (i.rootDoc._height / oldHeight * NumCast(i.rootDoc._width)));
+            });
                 break;
         }
     }
 
-    @computed get close() {
-        return <button className="antimodeMenu-button" key="close" onPointerDown={action(() => this.closePane())} style={{ position: "absolute", right: 0 }}>
-            X
-        </button>;
-    }
-
-    //select either coor&fill or size&position
-    @computed get modes() {
-        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>;
-    }
-
     @action
     rotate = (degrees: number) => {
-        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
-            const doc = Document(element.rootDoc);
+        this.selectedInk?.forEach(action(inkView => {
+            const doc = Document(inkView.rootDoc);
             if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
                 const angle = Number(degrees) - Number(doc.rotation);
                 doc.rotation = Number(degrees);
@@ -183,117 +149,13 @@ export default class FormatShapePane extends AntimodeMenu {
                     const top2 = Math.min(...ys2);
                     const right2 = Math.max(...xs2);
                     const bottom2 = Math.max(...ys2);
-                    doc._height = (bottom2 - top2) * element.props.ScreenToLocalTransform().Scale;
-                    doc._width = (right2 - left2) * element.props.ScreenToLocalTransform().Scale;
+                    doc._height = (bottom2 - top2) * inkView.props.ScreenToLocalTransform().Scale;
+                    doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale;
                 }
             }
         }));
     }
 
-    @computed get subMenu() {
-        const fillCheck = <div key="fill" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
-            <input id="nofill" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._noFill} onChange={action(() => this._noFill = true)} />
-            No Fill
-            <br />
-            <input id="solidfill" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._solidFill} onChange={action(() => this._solidFill = true)} />
-            Solid Fill
-            <br />
-            <br />
-            {this._solidFill ? "Color" : ""}
-            {this._solidFill ? this.fillButton : ""}
-            {this._fillBtn && this._solidFill ? this.fillPicker : ""}
-        </div>;
-
-        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 />
-        </>;
-
-        const lineCheck = <div key="lineCheck" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
-            <input id="noLine" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._noLine} onChange={action(() => this._noLine = true)} />
-                No Line
-            <br />
-            <input id="solidLine" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._solidLine} onChange={action(() => this._solidLine = true)} />
-                Solid Line
-            <br />
-            <input id="dashLine" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._dashLine ? true : false} onChange={action(() => this._dashLine = "2")} />
-                Dash Line
-            <br />
-            <br />
-            {(this._solidLine || this._dashLine) ? "Color" : ""}
-            {(this._solidLine || this._dashLine) ? this.lineButton : ""}
-            {this._lineBtn && (this._solidLine || this._dashLine) ? this.linePicker : ""}
-            <br />
-            {(this._solidLine || this._dashLine) ? "Width" : ""}
-            {(this._solidLine || this._dashLine) ? this.widthInput : ""}
-            {(this._solidLine || this._dashLine) ? <input type="range" defaultValue={Number(this._currStrokeWidth || "1")} min={1} max={100} onChange={e => this._currStrokeWidth = e.target.value} /> : (null)}
-            <br />
-            <br />
-            {(this._solidLine || this._dashLine) ? arrows : ""}
-        </div>;
-
-        const sizeCheck = <div key="sizeCheck" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
-            Height {this.sizeHeightInput}
-            <br />
-            <br />
-
-            Width {this.sizeWidthInput}
-            <br />
-            <br />
-
-            <input id="lock" style={{ width: "inherit", position: "absolute", right: 0 }} type="checkbox" checked={this._lock} onChange={action(() => this._lock = !this._lock)} />
-                Lock Ratio
-            <br />
-            <br />
-
-            Rotation {this.rotationInput}
-            <br />
-            <br />
-        </div>;
-
-        const positionCheck = <div key="posCheck" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
-            Horizontal {this.positionHorizontalInput}
-            <br />
-            <br />
-
-            Vertical {this.positionVerticalInput}
-            <br />
-            <br />
-        </div>;
-
-        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 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 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>;
-    }
 
     colorPicker(setter: (color: string) => {}) {
         return <div className="btn-group-palette" key="colorpicker" >
@@ -325,37 +187,119 @@ export default class FormatShapePane extends AntimodeMenu {
                 <FontAwesomeIcon icon="fill-drip" size="lg" />
                 <div className="color-previewI" style={{ backgroundColor: value ?? "121212" }} />
             </button>
-            <br></br>
-            <br></br>
+            <br /> <br />
         </>;
     }
 
-    @computed get fillButton() { return this.colorButton(this._currFill, () => this._fillBtn = !this._fillBtn); }
-    @computed get lineButton() { return this.colorButton(this._currColor, () => this._lineBtn = !this._lineBtn); }
+    @computed get fillButton() { return this.colorButton(this.colorFil, () => this._fillBtn = !this._fillBtn); }
+    @computed get lineButton() { return this.colorButton(this.colorStk, () => this._lineBtn = !this._lineBtn); }
 
-    @computed get fillPicker() { return this.colorPicker((color: string) => this._currFill = color); }
-    @computed get linePicker() { return this.colorPicker((color: string) => this._currColor = color); }
+    @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color); }
+    @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = 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); }
+    @computed get stkInput() { return this.inputBox("stk", this.widthStk, (val: string) => this.widthStk = val); }
+    @computed get hgtInput() { return this.inputBox("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val); }
+    @computed get widInput() { return this.inputBox("wid", this.shapeWid, (val: string) => this.shapeWid = val); }
+    @computed get rotInput() { return this.inputBox("rot", this.shapeRot, (val: string) => this.shapeRot = val); }
+    @computed get XpsInput() { return this.inputBox("Xps", this.shapeXps, (val: string) => this.shapeXps = val); }
+    @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); }
 
-    render() {
-        return this.getElementVert([this.close, this.modes, this.subMenu]);
+    @computed get propertyGroupItems() {
+        const fillCheck = <div key="fill" style={{ display: this._subOpen[0] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}>
+            <input className="formatShapePane-inputBtn" type="radio" checked={this.unFilled} onChange={action(() => this.unFilled = true)} />
+                No Fill
+            <br />
+            <input className="formatShapePane-inputBtn" type="radio" checked={this.solidFil} onChange={action(() => this.solidFil = true)} />
+                Solid Fill
+            <br /> <br />
+            {this.solidFil ? "Color" : ""}
+            {this.solidFil ? this.fillButton : ""}
+            {this._fillBtn && this.solidFil ? this.fillPicker : ""}
+        </div>;
+
+        const markers = <>
+            <input key="markHead" className="formatShapePane-inputBtn" type="checkbox" checked={this.markHead !== ""} onChange={action(() => this.markHead = this.markHead ? "" : "arrow")} />
+                Arrow Head
+            <br />
+            <input key="markTail" className="formatShapePane-inputBtn" type="checkbox" checked={this.markTail !== ""} onChange={action(() => this.markTail = this.markTail ? "" : "arrow")} />
+                Arrow End
+            <br />
+        </>;
+
+        const lineCheck = <div key="lineCheck" style={{ display: this._subOpen[1] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}>
+            <input className="formatShapePane-inputBtn" type="radio" checked={this.unStrokd} onChange={action(() => this.unStrokd = true)} />
+                No Line
+            <br />
+            <input className="formatShapePane-inputBtn" type="radio" checked={this.solidStk} onChange={action(() => this.solidStk = true)} />
+                Solid Line
+            <br />
+            <input className="formatShapePane-inputBtn" type="radio" checked={this.dashdStk ? true : false} onChange={action(() => this.dashdStk = "2")} />
+                Dash Line
+            <br />
+            <br />
+            {(this.solidStk || this.dashdStk) ? "Color" : ""}
+            {(this.solidStk || this.dashdStk) ? this.lineButton : ""}
+            {(this.solidStk || this.dashdStk) && this._lineBtn ? this.linePicker : ""}
+            <br />
+            {(this.solidStk || this.dashdStk) ? "Width" : ""}
+            {(this.solidStk || this.dashdStk) ? this.stkInput : ""}
+            {(this.solidStk || this.dashdStk) ? <input type="range" defaultValue={Number(this.widthStk)} min={1} max={100} onChange={e => this.widthStk = e.target.value} /> : (null)}
+            <br /> <br />
+            {(this.solidStk || this.dashdStk) ? markers : ""}
+        </div>;
+
+        const sizeCheck = <div key="sizeCheck" style={{ display: this._subOpen[2] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}>
+            Height {this.hgtInput}
+            <br /> <br />
+                Width {this.widInput}
+            <br /> <br />
+            <input className="formatShapePane-inputBtn" style={{ right: 0 }} type="checkbox" checked={this._lock} onChange={action(() => this._lock = !this._lock)} />
+                Lock Ratio
+            <br />  <br />
+                Rotation {this.rotInput}
+            <br /> <br />
+        </div>;
+
+        const positionCheck = <div key="posCheck" style={{ display: this._subOpen[3] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}>
+            Horizontal {this.XpsInput}
+            <br /> <br />
+            Vertical {this.YpsInput}
+            <br /> <br />
+        </div>;
+
+        const subMenus = this._currMode === "fill-drip" ? [`fill`, `line`] : [`size`, `position`];
+        const menuItems = this._currMode === "fill-drip" ? [fillCheck, lineCheck] : [sizeCheck, positionCheck];
+        const indexOffset = this._currMode === "fill-drip" ? 0 : 2;
+        return <div className="antimodeMenu-sub" key="submenu" style={{ position: "absolute", width: "inherit", top: 60 }}>
+            {subMenus.map((subMenu, i) =>
+                <div key={subMenu} style={{ width: "inherit" }}>
+                    <button className="antimodeMenu-button" onPointerDown={action(() => this._subOpen[i + indexOffset] = !this._subOpen[i + indexOffset])}
+                        style={{ backgroundColor: "121212", position: "relative", width: "inherit" }}>
+                        {this._subOpen[i + indexOffset] ? "▼" : "▶︎"}
+                        {subMenu}
+                    </button>
+                    {menuItems[i]}
+                </div>)}
+        </div>;
+    }
+
+    @computed get closeBtn() {
+        return <button className="antimodeMenu-button" key="close" onPointerDown={action(() => this.closePane())} style={{ position: "absolute", right: 0 }}>
+            X
+        </button>;
+    }
+
+    @computed get propertyGroupBtn() {
+        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>;
     }
-}
-Scripting.addGlobal(function activatePen2(penBtn: any) {
-    if (penBtn) {
-        //no longer changes to inkmode
-        // 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);
+
+    render() {
+        return this.getElementVert([this.closeBtn, this.propertyGroupBtn, this.propertyGroupItems]);
     }
-});
\ No newline at end of file
+}
\ 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 7f0bb5364..15707ad9e 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -62,13 +62,13 @@ export default class InkOptionsMenu extends AntimodeMenu {
         super(props);
         InkOptionsMenu.Instance = this;
         this._canFade = false; // don't let the inking menu fade away
-        this.Pinned = BoolCast(Doc.UserDoc()["inkOptionsMenu-pinned"]);
+        this.Pinned = BoolCast(Doc.UserDoc()["menuInkOptions-pinned"]);
 
     }
 
     @action
     toggleMenuPin = (e: React.MouseEvent) => {
-        Doc.UserDoc()["inkOptionsMenu-pinned"] = this.Pinned = !this.Pinned;
+        Doc.UserDoc()["menuInkOptions-pinned"] = this.Pinned = !this.Pinned;
         if (!this.Pinned) {
             // this.fadeOut(true);
         }
@@ -426,15 +426,10 @@ export default class InkOptionsMenu extends AntimodeMenu {
 }
 Scripting.addGlobal(function activatePen(penBtn: any) {
     if (penBtn) {
-        //no longer changes to inkmode
-        // Doc.SetSelectedTool(InkTool.Pen);
         InkOptionsMenu.Instance.jumpTo(300, 300);
         InkOptionsMenu.Instance.Pinned = true;
-
     } else {
-        // Doc.SetSelectedTool(InkTool.None);
         InkOptionsMenu.Instance.Pinned = false;
         InkOptionsMenu.Instance.fadeOut(true);
-
     }
 });