From 7c93a65535a278dd1381b27fbd4c3869eed19527 Mon Sep 17 00:00:00 2001
From: yunahi <60233430+yunahi@users.noreply.github.com>
Date: Fri, 3 Jul 2020 20:22:52 +0900
Subject: pin and icon

---
 src/client/views/AntimodeMenu.tsx                  |   7 +-
 src/client/views/GestureOverlay.tsx                |  10 +-
 src/client/views/MainView.tsx                      |  11 +-
 .../collectionFreeForm/InkOptionsMenu.scss         |   5 +
 .../collectionFreeForm/InkOptionsMenu.tsx          | 267 ++++++++++++++-------
 5 files changed, 202 insertions(+), 98 deletions(-)

(limited to 'src')

diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index 3e4d20fea..d83ac434c 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -137,13 +137,18 @@ export default abstract class AntimodeMenu extends React.Component {
     protected getElement(buttons: JSX.Element[]) {
         return (
             <div className="antimodeMenu-cont" onPointerLeave={this.pointerLeave} onPointerEnter={this.pointerEntered} ref={this._mainCont} onContextMenu={this.handleContextMenu}
-                style={{ left: this._left, top: this._top, opacity: this._opacity, transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay }}>
+                style={{
+                    left: this._left, top: this._top, opacity: this._opacity, transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay,
+                    position: this.Pinned ? "unset" : undefined
+                }}>
                 <div className="antimodeMenu-dragger" onPointerDown={this.dragStart} style={{ width: "20px" }} />
                 {buttons}
             </div>
         );
     }
 
+
+
     protected getElementWithRows(rows: JSX.Element[], numRows: number, hasDragger: boolean = true) {
         return (
             <div className="antimodeMenu-cont with-rows" onPointerLeave={this.pointerLeave} onPointerEnter={this.pointerEntered} ref={this._mainCont} onContextMenu={this.handleContextMenu}
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 85695bbac..bfd659207 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -25,6 +25,7 @@ import HorizontalPalette from "./Palette";
 import { Touchable } from "./Touchable";
 import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
 import HeightLabel from "./collections/collectionMulticolumn/MultirowHeightLabel";
+import InkOptionsMenu from "./collections/collectionFreeForm/InkOptionsMenu";
 
 @observer
 export default class GestureOverlay extends Touchable {
@@ -684,12 +685,17 @@ export default class GestureOverlay extends Touchable {
         } else {
             this._points = [];
         }
+        //get out of ink mode after each stroke=
+        console.log("now");
+        Doc.SetSelectedTool(InkTool.None);
+        InkOptionsMenu.Instance._selected = InkOptionsMenu.Instance._shapesNum;
         SetActiveArrowStart("none");
         GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart();
         SetActiveArrowEnd("none");
         GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd();
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
+
     }
 
     makePolygon = (shape: string, gesture: boolean) => {
@@ -885,7 +891,9 @@ export default class GestureOverlay extends Touchable {
 
     render() {
         return (
-            <div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
+
+            <div className="gestureOverlay-cont" style={{ position: "relative" }}
+                onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
                 {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>}
                 {this.elements}
 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 8f5a31b6c..afdff4ed8 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -453,10 +453,12 @@ export class MainView extends React.Component {
 
     @computed get mainContent() {
         const sidebar = this.userDoc?.["tabs-panelContainer"];
+        console.log(InkOptionsMenu.Instance?.Pinned);
         return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
             <div className="mainView-mainContent" style={{
                 color: this.darkScheme ? "rgb(205,205,205)" : "black",
-                height: RichTextMenu.Instance?.Pinned ? `calc(100% - ${ANTIMODEMENU_HEIGHT})` : "100%"
+                height: (RichTextMenu.Instance?.Pinned || InkOptionsMenu.Instance?.Pinned) ? `calc(100% - ${ANTIMODEMENU_HEIGHT})` : "100%"
+
             }} >
                 <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
                     <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
@@ -593,7 +595,10 @@ export class MainView extends React.Component {
             <SettingsManager />
             <GoogleAuthenticationManager />
             <DocumentDecorations />
-            <GestureOverlay>
+            <InkOptionsMenu />
+
+            <GestureOverlay >
+
                 <RichTextMenu key="rich" />
                 {this.mainContent}
             </GestureOverlay>
@@ -606,7 +611,7 @@ export class MainView extends React.Component {
             <RadialMenu />
             <PDFMenu />
             <MarqueeOptionsMenu />
-            <InkOptionsMenu />
+
             <OverlayView />
             <TimelineMenu />
             {this.snapLines}
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
index a9fab4c1e..7329f4fc1 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -26,6 +26,11 @@
     /* Make the buttons appear below each other */
 }
 
+.btn-draw {
+    display: inline;
+    /* Make the buttons appear below each other */
+}
+
 .btn2-group {
     display: block;
     background: #323232;
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index f1032adaa..7de70b8cd 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -17,6 +17,7 @@ import { DocumentType } from "../../../documents/DocumentTypes";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
 import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, } from "@fortawesome/free-solid-svg-icons";
+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);
 
@@ -28,36 +29,67 @@ export default class InkOptionsMenu extends AntimodeMenu {
     private _width = ["1", "5", "10", "100"];
     // private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"];
     // private _icons = ["O", "∆", "ロ", "➜", "-"];
-    private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",];
-    private _icons = ["O", "∆", "ロ", "⎯", "✖︎", " "];
+    // private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",];
+    // private _icons = ["O", "∆", "ロ", "⎯⎯⎯", "✖︎", " "];
     //arrowStart and arrowEnd must match and defs must exist in Inking Stroke
-    private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"];
-    private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"];
-    private _arrowIcons = ["→", "↔︎", "•", "••", " "];
+    // private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"];
+    // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"];
+    // private _arrowIcons = ["→", "↔︎", "•", "••", " "];
+    private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"];
+    private _head = ["none", "arrowHead", "arrowHead", "none", "arrowHead", "arrowHead", "none", "none", "none"];
+    private _end = ["none", "none", "arrowEnd", "none", "none", "arrowEnd", "none", "none", "none"];
+    private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"];
+
+    @observable _shapesNum = this._shape.length;
+    @observable _selected = this._shapesNum;
+
+    @observable private collapsed: boolean = false;
 
     @observable _colorBtn = false;
     @observable _widthBtn = false;
     @observable _fillBtn = false;
-    @observable _arrowBtn = false;
-    @observable _dashBtn = false;
-    @observable _shapeBtn = false;
+    // @observable _arrowBtn = false;
+    // @observable _dashBtn = false;
+    // @observable _shapeBtn = false;
 
     constructor(props: Readonly<{}>) {
         super(props);
         InkOptionsMenu.Instance = this;
         this._canFade = false; // don't let the inking menu fade away
+        this.Pinned = BoolCast(Doc.UserDoc()["inkOptionsMenu-pinned"]);
+
     }
 
-    getColors = () => {
-        return this._palette;
+    @action
+    toggleMenuPin = (e: React.MouseEvent) => {
+        Doc.UserDoc()["inkOptionsMenu-pinned"] = this.Pinned = !this.Pinned;
+        if (!this.Pinned) {
+            // this.fadeOut(true);
+        }
     }
 
     @action
-    changeArrow = (arrowStart: string, arrowEnd: string) => {
-        SetActiveArrowStart(arrowStart);
-        SetActiveArrowEnd(arrowEnd);
+    protected toggleCollapse = (e: React.MouseEvent) => {
+        this.collapsed = !this.collapsed;
+        setTimeout(() => {
+            const x = Math.min(this._left, window.innerWidth - InkOptionsMenu.Instance.width);
+            InkOptionsMenu.Instance.jumpTo(x, this._top, true);
+        }, 0);
+    }
+
+
+
+
+    getColors = () => {
+        return this._palette;
     }
 
+    // @action
+    // changeArrow = (arrowStart: string, arrowEnd: string) => {
+    //     SetActiveArrowStart(arrowStart);
+    //     SetActiveArrowEnd(arrowEnd);
+    // }
+
     @action
     changeColor = (color: string, type: string) => {
         const col: ColorState = {
@@ -116,40 +148,77 @@ export default class InkOptionsMenu extends AntimodeMenu {
         this.editProperties(ActiveDash(), "dash");
     }
 
-    @computed get arrowPicker() {
-        var currIcon;
-        for (var i = 0; i < this._arrowStart.length; i++) {
-            if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) {
-                currIcon = this._arrowIcons[i];
-                if (this._arrowIcons[i] === " ") {
-                    currIcon = "➤";
-                }
-            }
-        }
-        var arrowPicker = <button
-            className="antimodeMenu-button"
-            key="arrow"
-            onPointerDown={action(e => this._arrowBtn = !this._arrowBtn)}
-            style={{ backgroundColor: this._arrowBtn ? "121212" : "" }}>
-            {currIcon}
-        </button>;
-        if (this._arrowBtn) {
-            arrowPicker = <div className="btn2-group" key="arrows">
-                {arrowPicker}
-                {this._arrowStart.map((arrowStart, i) => {
-                    return <button
-                        className="antimodeMenu-button"
-                        key={arrowStart}
-                        onPointerDown={action(() => { SetActiveArrowStart(arrowStart); SetActiveArrowEnd(this._arrowEnd[i]); this.editProperties(arrowStart, "arrowStart"), this.editProperties(this._arrowEnd[i], "arrowEnd"); this._arrowBtn = false; })}
-                        style={{ backgroundColor: this._arrowBtn ? "121212" : "" }}>
-                        {this._arrowIcons[i]}
-                    </button>;
-                })}
-            </div>;
-        }
-        return arrowPicker;
+    @computed get drawButtons() {
+        const drawButtons = <div className="btn-draw" key="draw">
+            {this._draw.map((icon, i) => {
+                return <button
+                    className="antimodeMenu-button"
+                    key={icon}
+                    onPointerDown={action(() => {
+                        console.log(this._selected);
+
+                        if (this._selected !== i) {
+                            this._selected = i;
+                            Doc.SetSelectedTool(InkTool.Pen);
+                            SetActiveArrowStart(this._head[i]);
+                            SetActiveArrowEnd(this._end[i]);
+                            SetActiveBezierApprox("300");
+
+                            //  this.editProperties(this._head[i], "arrowStart"), this.editProperties(this._end[i], "arrowEnd"); 
+                            GestureOverlay.Instance.InkShape = this._shape[i];
+                        } else {
+                            this._selected = this._shapesNum;
+                            Doc.SetSelectedTool(InkTool.None);
+                            SetActiveArrowStart("none");
+                            SetActiveArrowEnd("none");
+                            GestureOverlay.Instance.InkShape = "";
+                            SetActiveBezierApprox("0");
+
+                        }
+                        console.log(this._selected);
+
+                    })}
+                    style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
+                    {this._draw[i]}
+                </button>;
+            })}</div>;
+        return drawButtons;
     }
 
+    // @computed get arrowPicker() {
+    //     var currIcon;
+    //     for (var i = 0; i < this._arrowStart.length; i++) {
+    //         if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) {
+    //             currIcon = this._arrowIcons[i];
+    //             if (this._arrowIcons[i] === " ") {
+    //                 currIcon = "➤";
+    //             }
+    //         }
+    //     }
+    //     var arrowPicker = <button
+    //         className="antimodeMenu-button"
+    //         key="arrow"
+    //         onPointerDown={action(e => this._arrowBtn = !this._arrowBtn)}
+    //         style={{ backgroundColor: this._arrowBtn ? "121212" : "" }}>
+    //         {currIcon}
+    //     </button>;
+    //     if (this._arrowBtn) {
+    //         arrowPicker = <div className="btn2-group" key="arrows">
+    //             {arrowPicker}
+    //             {this._arrowStart.map((arrowStart, i) => {
+    //                 return <button
+    //                     className="antimodeMenu-button"
+    //                     key={arrowStart}
+    //                     onPointerDown={action(() => { SetActiveArrowStart(arrowStart); SetActiveArrowEnd(this._arrowEnd[i]); this.editProperties(arrowStart, "arrowStart"), this.editProperties(this._arrowEnd[i], "arrowEnd"); this._arrowBtn = false; })}
+    //                     style={{ backgroundColor: this._arrowBtn ? "121212" : "" }}>
+    //                     {this._arrowIcons[i]}
+    //                 </button>;
+    //             })}
+    //         </div>;
+    //     }
+    //     return arrowPicker;
+    // }
+
     @computed get widthPicker() {
         var widthPicker = <button
             className="antimodeMenu-button"
@@ -234,48 +303,48 @@ export default class InkOptionsMenu extends AntimodeMenu {
         return fillPicker;
     }
 
-    @computed get shapePicker() {
-        var currIcon;
-        if (GestureOverlay.Instance.InkShape === "") {
-            currIcon = <FontAwesomeIcon icon="shapes" size="lg" />;
-        } else {
-            for (var i = 0; i < this._icons.length; i++) {
-                if (GestureOverlay.Instance.InkShape === this._buttons[i]) {
-                    currIcon = this._icons[i];
-                }
-            }
-        }
-        var shapePicker = <button
-            className="antimodeMenu-button"
-            key="shape"
-            onPointerDown={action(e => this._shapeBtn = !this._shapeBtn)}
-            style={{ backgroundColor: this._shapeBtn ? "121212" : "" }}>
-            {currIcon}
-        </button>;
-        if (this._shapeBtn) {
-            shapePicker = <div className="btn2-group" key="shape">
-                {shapePicker}
-                {this._buttons.map((btn, i) => {
-                    var ttl = btn;
-                    if (btn === "") {
-                        ttl = "no shape";
-                    }
-                    if (btn === "noRec") {
-                        ttl = "disable shape recognition";
-                    }
-                    return <button
-                        className="antimodeMenu-button"
-                        title={`Draw ${btn}`}
-                        key={ttl}
-                        onPointerDown={action((e) => { GestureOverlay.Instance.InkShape = btn; this._shapeBtn = false; })}
-                        style={{ backgroundColor: this._shapeBtn ? "121212" : "" }}>
-                        {this._icons[i]}
-                    </button>;
-                })}
-            </div>;
-        }
-        return shapePicker;
-    }
+    // @computed get shapePicker() {
+    //     var currIcon;
+    //     if (GestureOverlay.Instance.InkShape === "") {
+    //         currIcon = <FontAwesomeIcon icon="shapes" size="lg" />;
+    //     } else {
+    //         for (var i = 0; i < this._icons.length; i++) {
+    //             if (GestureOverlay.Instance.InkShape === this._buttons[i]) {
+    //                 currIcon = this._icons[i];
+    //             }
+    //         }
+    //     }
+    //     var shapePicker = <button
+    //         className="antimodeMenu-button"
+    //         key="shape"
+    //         onPointerDown={action(e => this._shapeBtn = !this._shapeBtn)}
+    //         style={{ backgroundColor: this._shapeBtn ? "121212" : "" }}>
+    //         {currIcon}
+    //     </button>;
+    //     if (this._shapeBtn) {
+    //         shapePicker = <div className="btn2-group" key="shape">
+    //             {shapePicker}
+    //             {this._buttons.map((btn, i) => {
+    //                 var ttl = btn;
+    //                 if (btn === "") {
+    //                     ttl = "no shape";
+    //                 }
+    //                 if (btn === "noRec") {
+    //                     ttl = "disable shape recognition";
+    //                 }
+    //                 return <button
+    //                     className="antimodeMenu-button"
+    //                     title={`Draw ${btn}`}
+    //                     key={ttl}
+    //                     onPointerDown={action((e) => { GestureOverlay.Instance.InkShape = btn; this._shapeBtn = false; })}
+    //                     style={{ backgroundColor: this._shapeBtn ? "121212" : "", fontSize: "20" }}>
+    //                     {this._icons[i]}
+    //                 </button>;
+    //             })}
+    //         </div>;
+    //     }
+    //     return shapePicker;
+    // }
 
     @computed get bezierButton() {
         return <button
@@ -306,23 +375,35 @@ export default class InkOptionsMenu extends AntimodeMenu {
             // <button className="antimodeMenu-button" title="Drag" key="drag" onPointerDown={e => this.dragStart(e)}>
             //     <FontAwesomeIcon icon="arrows-alt" size="lg" />
             // </button>,
-            this.shapePicker,
-            this.bezierButton,
+            // this.shapePicker,
+            // this.bezierButton,
             this.widthPicker,
             this.colorPicker,
             this.fillPicker,
-            this.arrowPicker,
-            this.dashButton,
+            this.drawButtons,
+            // this.arrowPicker,
+            // this.dashButton,
+            <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: this.Pinned ? "#121212" : "", display: this.collapsed ? "none" : undefined }}>
+                <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
+            </button>
+
         ];
+
+        // return this.getElement(buttons);
         return this.getElement(buttons);
     }
 }
 Scripting.addGlobal(function activatePen(penBtn: any) {
     if (penBtn) {
-        Doc.SetSelectedTool(InkTool.Pen);
+        //no longer changes to inkmode
+        // Doc.SetSelectedTool(InkTool.Pen);
         InkOptionsMenu.Instance.jumpTo(300, 300);
+        InkOptionsMenu.Instance.Pinned = true;
+
     } else {
-        Doc.SetSelectedTool(InkTool.None);
+        // Doc.SetSelectedTool(InkTool.None);
+        InkOptionsMenu.Instance.Pinned = false;
         InkOptionsMenu.Instance.fadeOut(true);
+
     }
 });
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 065a29e87c771b5cd9301b0468fb036e070cad17 Mon Sep 17 00:00:00 2001
From: yunahi <60233430+yunahi@users.noreply.github.com>
Date: Fri, 10 Jul 2020 05:08:53 +0900
Subject: added format shape

---
 src/client/documents/Documents.ts                  |   3 +-
 src/client/util/InteractionUtils.tsx               |   8 +
 src/client/util/SelectionManager.ts                |   5 +
 src/client/views/AntimodeMenu.tsx                  |  18 +
 src/client/views/ContextMenu.tsx                   |   1 +
 src/client/views/DocumentDecorations.tsx           |   2 +
 src/client/views/GestureOverlay.tsx                |  17 +-
 src/client/views/InkingStroke.tsx                  |  15 +-
 src/client/views/MainView.tsx                      |  13 +-
 .../collectionFreeForm/FormatShapePane.scss        |  53 ++
 .../collectionFreeForm/FormatShapePane.tsx         | 996 +++++++++++++++++++++
 .../collectionFreeForm/InkOptionsMenu.scss         |   2 +-
 .../collectionFreeForm/InkOptionsMenu.tsx          |  40 +-
 13 files changed, 1152 insertions(+), 21 deletions(-)
 create mode 100644 src/client/views/collections/collectionFreeForm/FormatShapePane.scss
 create mode 100644 src/client/views/collections/collectionFreeForm/FormatShapePane.tsx

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b70971c2d..eb8e04317 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -653,7 +653,7 @@ export namespace Docs {
             I.type = DocumentType.INK;
             I.layout = InkingStroke.LayoutString("data");
             I.color = color;
-            I.strokeWidth = strokeWidth;
+            I.strokeWidth = Number(strokeWidth);
             I.strokeBezier = strokeBezier;
             I.fillColor = fillColor;
             I.arrowStart = arrowStart;
@@ -667,6 +667,7 @@ export namespace Docs {
             I._width = options._width;
             I._height = options._height;
             I.author = Doc.CurrentUserEmail;
+            I.rotation = 0;
             I.data = new InkField(points);
             return I;
             // return I;
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index edeb461e0..2883e2056 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -3,6 +3,7 @@ import * as beziercurve from 'bezier-curve';
 import * as fitCurve from 'fit-curve';
 import "./InteractionUtils.scss";
 import { Utils } from "../../Utils";
+import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu";
 
 export namespace InteractionUtils {
     export const MOUSETYPE = "mouse";
@@ -94,6 +95,13 @@ export namespace InteractionUtils {
     export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number,
         color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string,
         dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) {
+
+        // if (InkOptionsMenu.Instance.Pinned) {
+        //     for (var i = 0; i < points.length; i++) {
+        //         points[i].Y -= 35;
+        //     }
+        // }
+
         let pts: { X: number; Y: number; }[] = [];
         if (shape) { //if any of the shape are true
             pts = makePolygon(shape, points);
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 024532f90..aea2c542b 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -5,6 +5,7 @@ import { computedFn } from "mobx-utils";
 import { List } from "../../fields/List";
 import { Scripting } from "./Scripting";
 import { DocumentManager } from "./DocumentManager";
+import FormatShapePane from "../views/collections/collectionFreeForm/FormatShapePane";
 
 export namespace SelectionManager {
 
@@ -14,6 +15,8 @@ export namespace SelectionManager {
         SelectedDocuments: ObservableMap<DocumentView, boolean> = new ObservableMap();
         @action
         SelectDoc(docView: DocumentView, ctrlPressed: boolean): void {
+            console.log("select"
+            );
             // if doc is not in SelectedDocuments, add it
             if (!manager.SelectedDocuments.get(docView)) {
                 if (!ctrlPressed) {
@@ -29,6 +32,8 @@ export namespace SelectionManager {
                 manager.SelectedDocuments.set(docView, true);
             }
             Doc.UserDoc().activeSelection = new List(SelectionManager.SelectedDocuments().map(dv => dv.props.Document));
+            FormatShapePane.Instance.selected();
+
         }
         @action
         DeselectDoc(docView: DocumentView): void {
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index d83ac434c..cb6de1785 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -1,6 +1,7 @@
 import React = require("react");
 import { observable, action } from "mobx";
 import "./AntimodeMenu.scss";
+import { inherits } from "util";
 
 /**
  * This is an abstract class that serves as the base for a PDF-style or Marquee-style
@@ -147,6 +148,23 @@ export default abstract class AntimodeMenu extends React.Component {
         );
     }
 
+    protected getElementVert(buttons: JSX.Element[]) {
+        return (
+            <div className="antimodeMenu-cont" onPointerLeave={this.pointerLeave} onPointerEnter={this.pointerEntered} ref={this._mainCont} onContextMenu={this.handleContextMenu}
+                style={{
+                    left: this.Pinned ? undefined : this._left,
+                    top: this.Pinned ? 0 : this._top,
+                    right: this.Pinned ? 0 : undefined,
+                    height: "inherit",
+                    width: 200,
+                    opacity: this._opacity, transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay,
+                    position: this.Pinned ? "absolute" : undefined
+                }}>
+                {buttons}
+            </div>
+        );
+    }
+
 
 
     protected getElementWithRows(rows: JSX.Element[], numRows: number, hasDragger: boolean = true) {
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 941d7b44a..1a6b7ab90 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -224,6 +224,7 @@ export class ContextMenu extends React.Component {
     }
 
     render() {
+        console.log("context");
         if (!this._display) {
             return null;
         }
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 4fda10926..8edd4c4a9 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -293,6 +293,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
             const doc = Document(element.rootDoc);
             if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
+                doc.rotation = Number(doc.rotation) + Number(angle);
+                console.log(doc.rotation);
                 const ink = Cast(doc.data, InkField)?.inkData;
                 if (ink) {
 
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index bfd659207..26a06090b 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -633,7 +633,8 @@ export default class GestureOverlay extends Touchable {
                 this.makePolygon(this.InkShape, false);
                 this.dispatchGesture(GestureUtils.Gestures.Stroke);
                 this._points = [];
-                if (this.InkShape !== "noRec") {
+                if (InkOptionsMenu.Instance._double === "") {
+
                     this.InkShape = "";
                 }
             }
@@ -687,12 +688,14 @@ export default class GestureOverlay extends Touchable {
         }
         //get out of ink mode after each stroke=
         console.log("now");
-        Doc.SetSelectedTool(InkTool.None);
-        InkOptionsMenu.Instance._selected = InkOptionsMenu.Instance._shapesNum;
-        SetActiveArrowStart("none");
-        GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart();
-        SetActiveArrowEnd("none");
-        GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd();
+        if (InkOptionsMenu.Instance._double === "") {
+            Doc.SetSelectedTool(InkTool.None);
+            InkOptionsMenu.Instance._selected = InkOptionsMenu.Instance._shapesNum;
+            SetActiveArrowStart("none");
+            GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart();
+            SetActiveArrowEnd("none");
+            GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd();
+        }
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
 
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index c32e76cec..4a7ec40be 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -15,6 +15,8 @@ import { FieldView, FieldViewProps } from "./nodes/FieldView";
 import React = require("react");
 import { Scripting } from "../util/Scripting";
 import { Doc } from "../../fields/Doc";
+import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane";
+import { action } from "mobx";
 
 library.add(faPaintBrush);
 
@@ -38,10 +40,19 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         this.props.Document.isInkMask = true;
     }
 
+    @action
+    private formatShape = () => {
+        console.log("Clicked");
+        FormatShapePane.Instance.Pinned = true;
+        FormatShapePane.Instance.selected();
+
+    }
+
     render() {
         TraceMobx();
         const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
-        const strokeWidth = Number(StrCast(this.layoutDoc.strokeWidth, ActiveInkWidth()));
+        // const strokeWidth = Number(StrCast(this.layoutDoc.strokeWidth, ActiveInkWidth()));
+        const strokeWidth = Number(this.layoutDoc.strokeWidth);
         const xs = data.map(p => p.X);
         const ys = data.map(p => p.Y);
         const left = Math.min(...xs) - strokeWidth / 2;
@@ -74,6 +85,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                 onContextMenu={() => {
                     ContextMenu.Instance.addItem({ description: "Analyze Stroke", event: this.analyzeStrokes, icon: "paint-brush" });
                     ContextMenu.Instance.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" });
+                    ContextMenu.Instance.addItem({ description: "Format Shape", event: this.formatShape, icon: "paint-brush" });
+
                 }}
             ><defs>
                 </defs>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index afdff4ed8..3eed44654 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -58,7 +58,7 @@ import { DocumentManager } from '../util/DocumentManager';
 import { DocumentLinksButton } from './nodes/DocumentLinksButton';
 import { LinkMenu } from './linking/LinkMenu';
 import { LinkDocPreview } from './nodes/LinkDocPreview';
-
+import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane";
 @observer
 export class MainView extends React.Component {
     public static Instance: MainView;
@@ -453,12 +453,13 @@ export class MainView extends React.Component {
 
     @computed get mainContent() {
         const sidebar = this.userDoc?.["tabs-panelContainer"];
-        console.log(InkOptionsMenu.Instance?.Pinned);
+        console.log('${ ANTIMODEMENU_HEIGHT }');
         return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
             <div className="mainView-mainContent" style={{
                 color: this.darkScheme ? "rgb(205,205,205)" : "black",
-                height: (RichTextMenu.Instance?.Pinned || InkOptionsMenu.Instance?.Pinned) ? `calc(100% - ${ANTIMODEMENU_HEIGHT})` : "100%"
-
+                //change to times 2 for both pinned
+                height: (RichTextMenu.Instance?.Pinned || InkOptionsMenu.Instance?.Pinned) ? (RichTextMenu.Instance?.Pinned && InkOptionsMenu.Instance?.Pinned) ? `calc(100% - 2*${ANTIMODEMENU_HEIGHT})` : `calc(100% - ${ANTIMODEMENU_HEIGHT})` : "100%",
+                width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%"
             }} >
                 <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
                     <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
@@ -597,7 +598,10 @@ export class MainView extends React.Component {
             <DocumentDecorations />
             <InkOptionsMenu />
 
+
             <GestureOverlay >
+                <FormatShapePane />
+
 
                 <RichTextMenu key="rich" />
                 {this.mainContent}
@@ -608,6 +612,7 @@ export class MainView extends React.Component {
                 linkDoc={LinkDocPreview.LinkInfo.linkDoc} linkSrc={LinkDocPreview.LinkInfo.linkSrc} href={LinkDocPreview.LinkInfo.href}
                 addDocTab={LinkDocPreview.LinkInfo.addDocTab} /> : (null)}
             <ContextMenu />
+            <FormatShapePane />
             <RadialMenu />
             <PDFMenu />
             <MarqueeOptionsMenu />
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
new file mode 100644
index 000000000..5789c6c75
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
@@ -0,0 +1,53 @@
+.antimodeMenu-button {
+    width: 200px;
+
+    .color-previewI {
+        width: 100%;
+        height: 40%;
+    }
+
+    .color-previewII {
+        width: 100%;
+        height: 100%;
+    }
+
+
+}
+
+.sketch-picker {
+    background: #323232;
+
+    .flexbox-fit {
+        background: #323232;
+    }
+}
+
+.btn-group {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    /* Make the buttons appear below each other */
+}
+
+.btn-group-palette {
+    display: block;
+    /* Make the buttons appear below each other */
+}
+
+.btn-draw {
+    display: inline;
+    /* 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;
+
+
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
new file mode 100644
index 000000000..7b47b7ca4
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -0,0 +1,996 @@
+import React = require("react");
+import AntimodeMenu from "../../AntimodeMenu";
+import { observer } from "mobx-react";
+import { observable, action, computed } from "mobx";
+import "./FormatShapePane.scss";
+import { ActiveInkColor, ActiveInkBezierApprox, ActiveFillColor, ActiveArrowStart, ActiveArrowEnd, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "../../InkingStroke";
+import { Scripting } from "../../../util/Scripting";
+import { InkTool, InkField } from "../../../../fields/InkField";
+import { ColorState } from "react-color";
+import { Utils } from "../../../../Utils";
+import GestureOverlay from "../../GestureOverlay";
+import { Doc } 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 { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types";
+import e = require("express");
+import { ChangeEvent } from "mongodb";
+import { black } from "colors";
+
+
+library.add(faRulerCombined, faFillDrip, faPenNib);
+
+@observer
+export default class FormatShapePane extends AntimodeMenu {
+    static Instance: FormatShapePane;
+
+    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"];
+    private _headIcon = ["⎯", "←"];
+    private _endIcon = ["⎯", "→"];
+    private _head = ["none", "arrowHead"];
+    private _end = ["none", "arrowEnd"];
+
+    @observable private _subOpen = [false, false, false, false];
+
+    @observable private collapsed: boolean = false;
+    @observable private currMode: string = "fill-drip";
+    @observable _fillBtn = false;
+    @observable _lineBtn = false;
+
+    @observable _selectDoc: DocumentView[] = [];
+
+    @observable _noFill = false;
+    @observable _solidFill = false;
+    @observable _noLine = false;
+    @observable _solidLine = false;
+    @observable _dashLine = false;
+    @observable _lock = false;
+
+    @observable _multiple = false;
+
+    @observable _widthBtn = false;
+
+    @observable _currWidth = "10";
+
+    @observable _single = false;
+    @observable _currFill = "#D0021B";
+    @observable _currColor = "#D0021B";
+
+    @observable _arrowHead = false;
+    @observable _arrowEnd = false;
+
+
+    @observable _currSizeHeight = "10";
+    @observable _currSizeWidth = "10";
+    @observable _currRotation = "10";
+
+    @observable _currPositionHorizontal = "10";
+    @observable _currPositionVertical = "10";
+
+
+    constructor(props: Readonly<{}>) {
+        super(props);
+        FormatShapePane.Instance = this;
+        this._canFade = false; // don't let the inking menu fade away
+        this.Pinned = BoolCast(Doc.UserDoc()["formatShapePane-pinned"]);
+
+    }
+
+    @action
+    toggleMenuPin = (e: React.MouseEvent) => {
+        Doc.UserDoc()["formatShapePane-pinned"] = this.Pinned = !this.Pinned;
+        if (!this.Pinned) {
+            // this.fadeOut(true);
+        }
+    }
+
+    @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;
+
+    }
+
+    @action
+    checkSame = () => {
+        const docs = SelectionManager.SelectedDocuments();
+        const inks: DocumentView[] = [];
+        for (var i = 0; i < docs.length; i++) {
+            if (Document(docs[i].rootDoc).type === DocumentType.INK) {
+                inks.push(docs[i]);
+            }
+        }
+        const firstWidth = Document(inks[0].rootDoc).strokeWidth;
+        const firstColor = Document(inks[0].rootDoc).color;
+        const firstFill = Document(inks[0].rootDoc).fillColor;
+        // const firstBezier
+        const firstRotation = Document(inks[0].rootDoc).rotation;
+        const firstArrowStart = Document(inks[0].rootDoc).arrowStart;
+        const firstArrowEnd = Document(inks[0].rootDoc).arrowEnd;
+        const firstDash = Document(inks[0].rootDoc).dash;
+        const firstWidthSize = Document(inks[0].rootDoc)._width;
+        const firstHeightSize = Document(inks[0].rootDoc)._height;
+        const firstHorizontal = Document(inks[0].rootDoc).x;
+        const firstVertical = Document(inks[0].rootDoc).y;
+        this._noFill = Document(inks[0].rootDoc).fillColor === "none" ? true : false;
+        this._solidFill = Document(inks[0].rootDoc).fillColor === "none" ? false : true;
+        this._noLine = Document(inks[0].rootDoc).color === "none" ? true : false;
+        if (Document(inks[0].rootDoc).color !== "none") {
+            this._solidLine = true;
+            this._dashLine = true;
+            if (Document(inks[0].rootDoc).dash === "0") {
+                this._dashLine = false;
+            } else {
+                this._solidLine = false;
+
+            }
+        }
+        // this._solidLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash === 0 ? true : false;
+        // this._dashLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash !== 0 ? true : false;
+        // // this._widthBtn = false;    
+        this._currWidth = String(Document(inks[0].rootDoc).strokeWidth);
+        // this._single = false;
+        this._currFill = String(Document(inks[0].rootDoc).fillColor);
+        this._currColor = String(Document(inks[0].rootDoc).color);
+        this._arrowHead = Document(inks[0].rootDoc).arrowStart === "none" ? false : true;
+        this._arrowEnd = Document(inks[0].rootDoc).arrowEnd === "none" ? false : true;
+        this._currSizeHeight = String(Document(inks[0].rootDoc)._height);
+        this._currSizeWidth = String(Document(inks[0].rootDoc)._width);
+        this._currRotation = String(Document(inks[0].rootDoc).rotation);
+        this._currPositionHorizontal = String(Document(inks[0].rootDoc).x);
+        this._currPositionVertical = String(Document(inks[0].rootDoc).y);
+        for (var i = 0; i < inks.length; i++) {
+            if (Document(inks[i].rootDoc).strokeWidth !== firstWidth) {
+                this._currWidth = "";
+            }
+            if (Document(inks[i].rootDoc).color !== firstColor) {
+                this._noLine = false;
+                this._solidLine = false;
+                this._dashLine = false;
+            }
+            if (Document(inks[i].rootDoc).fillColor !== firstFill) {
+                this._solidFill = false;
+                this._noFill = false;
+            }
+            if (Document(inks[i].rootDoc).arrowStart !== firstArrowStart) {
+                this._arrowHead = false;
+            }
+            if (Document(inks[i].rootDoc).arrowEnd !== firstArrowEnd) {
+                this._arrowEnd = false;
+            }
+            if (Document(inks[i].rootDoc).x !== firstHorizontal) {
+                this._currPositionHorizontal = "";
+            }
+            if (Document(inks[i].rootDoc).y !== firstVertical) {
+                this._currPositionVertical = "";
+            }
+            if (Document(inks[i].rootDoc)._width !== firstWidthSize) {
+                this._currSizeWidth = "";
+            }
+            if (Document(inks[i].rootDoc)._height !== firstHeightSize) {
+                this._currSizeHeight = "";
+            }
+            if (Document(inks[i].rootDoc).rotation !== firstRotation) {
+                this._currRotation = "";
+            }
+        }
+
+
+
+    }
+
+    @action
+    upDownButtons = (dirs: string, field: string) => {
+        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+            const doc = Document(element.rootDoc);
+            if (doc.type === DocumentType.INK) {
+                switch (field) {
+                    case "width":
+                        if (doc.strokeWidth) {
+                            doc.strokeWidth = dirs === "up" ? doc.strokeWidth + 1 : doc.strokeWidth - 1;
+                            SetActiveInkWidth(String(doc.strokeWidth));
+
+                        }
+                        break;
+                    case "sizeWidth":
+                        if (doc._width && doc._height) {
+                            const oldWidth = doc._width;
+                            const oldHeight = doc._height;
+
+                            doc._width = dirs === "up" ? doc._width + 10 : doc._width - 10;
+                            if (this._lock) {
+                                doc._height = (doc._width * oldHeight) / oldWidth;
+                            }
+                        }
+                        break;
+                    case "sizeHeight":
+                        if (doc._width && doc._height) {
+                            const oldWidth = doc._width;
+                            const oldHeight = doc._height;
+                            doc._height = dirs === "up" ? doc._height + 10 : doc._height - 10;
+                            if (this._lock) {
+                                doc._width = (doc._height * oldWidth) / oldHeight;
+                            }
+                        }
+                        break;
+                    case "horizontal":
+                        if (doc.x) {
+                            doc.x = dirs === "up" ? doc.x + 10 : doc.x - 10;
+                        }
+                        break;
+                    case "vertical":
+                        if (doc.y) {
+                            doc.y = dirs === "up" ? doc.y + 10 : doc.y - 10;
+                        }
+                    case "rotation":
+
+                        this.rotate(dirs === "up" ? Number(doc.rotation) + Number(0.1) : Number(doc.rotation) - Number(0.1));
+
+                        break;
+                    default:
+                        break;
+                }
+                this.selected();
+
+            }
+        }));
+    }
+
+    @action
+    editProperties = (value: any, field: string) => {
+        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+            const doc = Document(element.rootDoc);
+            if (doc.type === DocumentType.INK) {
+                switch (field) {
+                    case "width":
+                        SetActiveInkWidth(value);
+                        doc.strokeWidth = Number(value);
+                        break;
+                    case "color":
+                        doc.color = String(value);
+                        break;
+                    case "fill":
+                        doc.fillColor = String(value);
+                        break;
+                    case "bezier":
+                        // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300;
+                        break;
+                    case "arrowStart":
+                        doc.arrowStart = String(value);
+                        break;
+                    case "arrowEnd":
+                        doc.arrowEnd = String(value);
+                        break;
+                    case "dash":
+                        doc.dash = String(value);
+                        break;
+                    case "widthSize":
+                        if (doc._width && doc._height) {
+                            const oldWidth = doc._width;
+                            const oldHeight = doc._height;
+
+                            doc._width = Number(value);
+                            if (this._lock) {
+                                doc._height = (doc._width * oldHeight) / oldWidth;
+                            }
+                        }
+                        break;
+                    case "heightSize":
+                        if (doc._width && doc._height) {
+                            const oldWidth = doc._width;
+                            const oldHeight = doc._height;
+
+                            doc._height = Number(value);
+                            if (this._lock) {
+                                doc._width = (doc._height * oldWidth) / oldHeight;
+                            }
+                        }
+                        break;
+                    case "horizontal":
+                        doc.x = Number(value);
+                        break;
+                    case "vertical":
+                        doc.y = Number(value);
+
+                        break;
+                    default:
+                        break;
+                }
+            }
+            this.selected();
+        }));
+        this.checkSame();
+
+    }
+
+    @computed get close() {
+        const close = <button
+            className="antimodeMenu-button"
+            key="close"
+            onPointerDown={action(() => { this.closePane(); })}
+            style={{ right: 0, position: "absolute" }}>
+            X
+                </button>;
+        return close;
+    }
+
+    @computed get modes() {
+        const modes = <div className="antimodeMenu-button-tab">
+            {this._mode.map(mode => {
+                return <button
+                    className="antimodeMenu-button"
+                    key={mode}
+                    onPointerDown={action(() => { console.log("mode"); this.currMode = mode; })}
+                    style={{ backgroundColor: this.currMode === mode ? "121212" : "", position: "relative", top: 30 }}>
+                    <FontAwesomeIcon icon={mode as IconProp} size="lg" />
+                </button>;
+            })
+            }</div>;
+        return modes;
+    }
+
+    @action
+    selected = () => {
+        this._selectDoc = SelectionManager.SelectedDocuments();
+        if (this._selectDoc.length === 1 && Document(this._selectDoc[0].rootDoc).type === DocumentType.INK) {
+            this._single = true;
+            const doc = Document(this._selectDoc[0].rootDoc);
+            if (doc.type === DocumentType.INK) {
+                console.log(doc.fillColor);
+                if (doc.fillColor === "none") {
+                    this._noFill = true;
+                    this._solidFill = false;
+                } else {
+                    this._solidFill = true;
+                    this._noFill = false;
+                    this._currFill = String(doc.fillColor);
+                }
+                if (doc.color === "none") {
+                    this._noLine = true;
+                    this._solidLine = false;
+                    this._dashLine = false;
+                } else {
+                    console.log(doc.strokeWidth);
+                    this._currWidth = String(doc.strokeWidth);
+                    this._currColor = String(doc.color);
+                    if (doc.dash === "0") {
+                        this._solidLine = true;
+                        this._noLine = false;
+                        this._dashLine = false;
+                    } else {
+                        this._dashLine = true;
+                        this._noLine = false;
+                        this._solidLine = false;
+                    }
+
+                    this._arrowHead = doc.arrowStart === "none" ? false : true;
+                    this._arrowEnd = doc.arrowEnd === "none" ? false : true;
+
+
+                    this._currPositionHorizontal = String(doc.x);
+                    this._currPositionVertical = String(doc.y);
+                    console.log(doc.rotation);
+                    this._currRotation = String(doc.rotation);
+                    this._currSizeHeight = String(doc._height);
+                    this._currSizeWidth = String(doc._width);
+                }
+
+            }
+        } else {
+            this._noFill = false;
+            this._solidFill = false;
+            this._single = false;
+            this._currFill = "#D0021B";
+            this._noLine = false;
+            this._solidLine = false;
+            this._dashLine = false;
+            this._currColor = "#D0021B";
+            this._arrowHead = false;
+            this._arrowEnd = false;
+            this._currPositionHorizontal = "";
+            this._currPositionVertical = "";
+            this._currRotation = "";
+            this._currSizeHeight = "";
+            this._currSizeWidth = "";
+        }
+        this.checkSame();
+    }
+
+    @action
+    rotate = (degrees: number) => {
+        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+            const doc = Document(element.rootDoc);
+            if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
+                // doc.rotation = (Number(doc.rotation) + (Number(angle) * 180 / Math.PI));
+                // console.log(doc.rotation);
+                const angle = Number(degrees) - Number(doc.rotation);
+                doc.rotation = Number(degrees);
+                const ink = Cast(doc.data, InkField)?.inkData;
+                if (ink) {
+                    const xs = ink.map(p => p.X);
+                    const ys = ink.map(p => p.Y);
+                    const left = Math.min(...xs);
+                    const top = Math.min(...ys);
+                    const right = Math.max(...xs);
+                    const bottom = Math.max(...ys);
+                    const _centerPoints: { X: number, Y: number }[] = [];
+                    _centerPoints.push({ X: left, Y: top });
+
+                    const newPoints: { X: number, Y: number }[] = [];
+                    for (var i = 0; i < ink.length; i++) {
+                        const newX = Math.cos(angle) * (ink[i].X - _centerPoints[0].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].X;
+                        const newY = Math.sin(angle) * (ink[i].X - _centerPoints[0].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].Y;
+                        newPoints.push({ X: newX, Y: newY });
+                    }
+                    doc.data = new InkField(newPoints);
+                    const xs2 = newPoints.map(p => p.X);
+                    const ys2 = newPoints.map(p => p.Y);
+                    const left2 = Math.min(...xs2);
+                    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;
+
+                }
+            }
+        }));
+    }
+
+    @action
+    toggle = (check: string) => {
+        switch (check) {
+            case "noFill":
+                if (!this._noFill) {
+                    this._noFill = true;
+                    this._solidFill = false;
+                }
+                break;
+            case "solidFill":
+                if (!this._solidFill) {
+                    this._solidFill = true;
+                    this._noFill = false;
+                    if (this._currFill === "none") {
+                        this._currFill = "#D0021B";
+                    }
+                }
+                break;
+            case "noLine":
+                if (!this._noLine) {
+                    this._noLine = true;
+                    this._solidLine = false;
+                    this._dashLine = false;
+                }
+                break;
+            case "solidLine":
+                if (!this._solidLine) {
+                    this._solidLine = true;
+                    this._noLine = false;
+                    this._dashLine = false;
+                    if (this._currColor === "none") {
+                        this._currColor = "#D0021B";
+                    }
+                }
+                break;
+            case "dashLine":
+                if (!this._dashLine) {
+                    this._dashLine = true;
+                    this._solidLine = false;
+                    this._noLine = false;
+                    if (this._currColor === "none") {
+                        this._currColor = "#D0021B";
+                    }
+                }
+                break;
+            case "lock":
+                if (this._lock) {
+                    this._lock = false;
+                } else {
+                    this._lock = true;
+                }
+                break;
+            case "arrowHead":
+                this._arrowHead = this._arrowHead ? false : true;
+                break;
+            case "arrowEnd":
+                this._arrowEnd = this._arrowEnd ? false : true;
+                break;
+            default:
+                break;
+        }
+    }
+
+    @computed get subMenu() {
+        const fillCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
+            <input id="nofill" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._noFill} onChange={action(() => { this.toggle("noFill"); this.editProperties("none", "fill"); })} />
+            No Fill
+            <br></br>
+            <input id="solidfill" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._solidFill} onChange={action(() => { this.toggle("solidFill"); this.editProperties(this._currFill, "fill"); })} />
+            Solid Fill
+            <br></br>
+            <br></br>
+            {this._solidFill ? "Color" : ""}
+            {this._solidFill ? this.fillButton : ""}
+            {this._fillBtn && this._solidFill ? this.fillPicker : ""}
+
+        </div>;
+        const arrows = <> <input id="arrowHead" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowHead} onChange={action(() => { this.toggle("arrowHead"); this.editProperties(this._arrowHead ? "arrowHead" : "none", "arrowStart"); })} />
+         Arrow Head
+            <br></br>
+
+            <input id="arrowEnd" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowEnd} onChange={action(() => { this.toggle("arrowEnd"); this.editProperties(this._arrowEnd ? "arrowEnd" : "none", "arrowEnd"); })} />
+         Arrow End
+            <br></br></>;
+        const lineCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
+            <input id="noLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._noLine} onChange={action(() => { this.toggle("noLine"); this.editProperties("none", "color"); })} />
+                No Line
+                <br></br>
+            <input id="solidLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._solidLine} onChange={action(() => { this.toggle("solidLine"); this.editProperties(this._currColor, "color"); this.editProperties("0", "dash"); })} />
+                Solid Line
+                <br></br>
+            <input id="dashLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._dashLine} onChange={action(() => { this.toggle("dashLine"); this.editProperties(this._currColor, "color"); this.editProperties("2", "dash"); })} />
+                Dash Line
+                <br></br>
+            <br></br>
+            {(this._solidLine || this._dashLine) ? "Color" : ""}
+            {(this._solidLine || this._dashLine) ? this.lineButton : ""}
+            {this._lineBtn && (this._solidLine || this._dashLine) ? this.linePicker : ""}
+            <br></br>
+            {(this._solidLine || this._dashLine) ? "Width" : ""}
+            {(this._solidLine || this._dashLine) ? this.widthInput : ""}
+            <br></br>
+            <br></br>
+            {(this._solidLine || this._dashLine) ? arrows : ""}
+
+        </div>;
+
+        const sizeCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
+            Height {this.sizeHeightInput}
+            <br></br>
+            <br></br>
+
+
+            Width {this.sizeWidthInput}
+            <br></br>
+            <br></br>
+
+            <input id="lock" style={{ width: "inherit", position: "absolute", right: 0 }} type="checkbox" checked={this._lock} onChange={action(() => { this.toggle("lock"); })} />
+                Lock Ratio
+            <br></br>
+            <br></br>
+
+
+            Rotation {this.rotationInput}
+            <br></br>
+            <br></br>
+
+
+        </div>;
+        const positionCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
+            Horizontal {this.positionHorizontalInput}
+            <br></br>
+            <br></br>
+
+            Vertical {this.positionVerticalInput}
+            <br></br>
+            <br></br>
+
+
+        </div>;
+
+        const subMenu = <div className="antimodeMenu-sub" 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 : ""}
+
+                    </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>
+                        ;
+
+                }
+            })
+            }</div>;
+        return subMenu;
+    }
+
+    @computed get fillButton() {
+        const fillButton = <><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></>;
+        return fillButton;
+    }
+    @computed get fillPicker() {
+        const fillPicker = <div className="btn-group-palette" key="fill" >
+            {this._palette.map(color => {
+                return <button
+                    className="antimodeMenu-button"
+                    key={color}
+                    onPointerDown={action(() => { this._currFill = color; this.editProperties(color, "fill"); })}
+                    style={{
+                        // backgroundColor: this._fillBtn ? "121212" : "",
+                        zIndex: 1001
+                    }}>
+                    <div className="color-previewII" style={{ backgroundColor: color }}></div>
+                </button>;
+            })}
+
+        </div>;
+        return fillPicker;
+    }
+
+    @computed get lineButton() {
+        const lineButton = <><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>
+            <br></br></>;
+        return lineButton;
+    }
+    @computed get linePicker() {
+        const linePicker = <div className="btn-group-palette" key="line" >
+            {this._palette.map(color => {
+                return <button
+                    className="antimodeMenu-button"
+                    key={color}
+                    onPointerDown={action(() => { this._currColor = color; this.editProperties(color, "color"); })}
+                    style={{
+                        // backgroundColor: this._lineBtn ? "121212" : "",
+                        zIndex: 1001
+                    }}>
+                    <div className="color-previewII" style={{ backgroundColor: color }}></div>
+                </button>;
+            })}
+
+        </div>;
+        return linePicker;
+    }
+    @computed get widthInput() {
+        const widthInput = <>
+            <input
+                style={{ color: "black", width: 80, position: "absolute", right: 20 }}
+                type="text" value={this._currWidth}
+                onChange={e => this.onChange(e.target.value, "width")}
+                autoFocus></input>  <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.onChange(e.target.value, "sizeHeight")}
+                autoFocus></input>
+            <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.onChange(e.target.value, "sizeWidth")}
+                autoFocus></input>
+            <button
+                className="antiMenu-Buttonup"
+                key="up"
+                onPointerDown={action(() => { this.upDownButtons("up", "sizeWidth"); })}
+                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", "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.onChange(e.target.value, "rotation")}
+                    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></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() {
+        const positionHorizontalInput =
+            <><input
+                style={{ color: "black", width: 80, position: "absolute", right: 20 }}
+                type="text" value={this._currPositionHorizontal}
+                onChange={e => this.onChange(e.target.value, "positionHorizontal")}
+                autoFocus></input>
+                <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></>;
+        return positionHorizontalInput;
+    }
+
+    @computed get positionVerticalInput() {
+        const positionVerticalInput =
+            <><input
+                style={{ color: "black", width: 80, position: "absolute", right: 20 }}
+                type="text" value={this._currPositionVertical}
+                onChange={e => this.onChange(e.target.value, "positionVertical")}
+                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>
+                <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></>;
+        return positionVerticalInput;
+    }
+
+
+    @action
+    onChange = (val: string, property: string): void => {
+        if (!Number.isNaN(Number(val)) && Number(val) !== null && val !== " ") {
+
+            // if (val === "") {
+            //     val = "0";
+            // }
+            switch (property) {
+                case "width":
+                    this._currWidth = val;
+                    if (val !== "") {
+                        this.editProperties(this._currWidth, "width");
+                    }
+                    break;
+                case "sizeHeight":
+                    this._currSizeHeight = val;
+                    if (val !== "") {
+                        this.editProperties(this._currSizeHeight, "heightSize");
+                    }
+                    break;
+                case "sizeWidth":
+                    this._currSizeWidth = val;
+                    if (val !== "") {
+
+                        this.editProperties(this._currSizeWidth, "widthSize");
+                    }
+                    break;
+                case "rotation":
+
+                    this._currRotation = val;
+                    if (val !== "") {
+
+                        this.rotate(Number(val));
+                    }
+                    break;
+                case "positionHorizontal":
+                    this._currPositionHorizontal = val; if (val !== "") {
+
+                        this.editProperties(this._currPositionHorizontal, "horizontal");
+                    }
+
+                    break;
+                case "positionVertical":
+                    this._currPositionVertical = val;
+                    if (val !== "") {
+
+                        this.editProperties(this._currPositionVertical, "vertical");
+                    }
+
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+
+
+
+
+    // @action
+    // changeWidth = (event: React.ChangeEvent<HTMLInputElement>) => {
+    //     console.log(event.target.value);
+    //     this._currWidth = NumCast(event.target.value);
+
+    // }
+
+    @computed get upDown() {
+        const upDown = <div>
+            <button
+                className="antiMenu-Button"
+                key="up"
+                onPointerDown={action(() => { console.log("up"); })}>
+                up
+            </button>
+            <br></br>
+            <button
+                className="antiMenu-Button"
+                key="up"
+                onPointerDown={action(() => { console.log("dpwm"); })}>
+                down
+            </button>
+        </div>;
+        return upDown;
+    }
+
+
+    @computed get widthPicker() {
+        var widthPicker = <button
+            className="antimodeMenu-button"
+            key="width"
+            onPointerDown={action(e => this._widthBtn = !this._widthBtn)}
+            style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
+            <FontAwesomeIcon icon="bars" size="lg" />
+        </button>;
+        if (this._widthBtn) {
+            widthPicker = <div className="btn2-group" key="width">
+                {widthPicker}
+                {this._width.map(wid => {
+                    return <button
+                        className="antimodeMenu-button"
+                        key={wid}
+                        onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
+                        style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
+                        {wid}
+                    </button>;
+                })}
+            </div>;
+        }
+        return widthPicker;
+    }
+
+
+
+    render() {
+        const buttons = [
+
+            this.close,
+            this.modes,
+            this.subMenu
+
+        ];
+
+        return this.getElementVert(buttons);
+    }
+}
+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);
+
+    }
+});
\ 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 7329f4fc1..f739fcc8c 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -32,7 +32,7 @@
 }
 
 .btn2-group {
-    display: block;
+    display: grid;
     background: #323232;
     grid-template-columns: auto;
 
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 7de70b8cd..e4f3248d0 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -36,14 +36,15 @@ export default class InkOptionsMenu extends AntimodeMenu {
     // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"];
     // private _arrowIcons = ["→", "↔︎", "•", "••", " "];
     private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"];
-    private _head = ["none", "arrowHead", "arrowHead", "none", "arrowHead", "arrowHead", "none", "none", "none"];
-    private _end = ["none", "none", "arrowEnd", "none", "none", "arrowEnd", "none", "none", "none"];
+    private _head = ["none", "none", "arrowHead", "none", "none", "arrowHead", "none", "none", "none"];
+    private _end = ["none", "arrowEnd", "arrowEnd", "none", "arrowEnd", "arrowEnd", "none", "none", "none"];
     private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"];
 
     @observable _shapesNum = this._shape.length;
     @observable _selected = this._shapesNum;
 
     @observable private collapsed: boolean = false;
+    @observable _double = "";
 
     @observable _colorBtn = false;
     @observable _widthBtn = false;
@@ -155,7 +156,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
                     className="antimodeMenu-button"
                     key={icon}
                     onPointerDown={action(() => {
-                        console.log(this._selected);
+                        this._double = "";
 
                         if (this._selected !== i) {
                             this._selected = i;
@@ -177,6 +178,31 @@ export default class InkOptionsMenu extends AntimodeMenu {
                         }
                         console.log(this._selected);
 
+                    })}
+                    onDoubleClick={action(() => {
+                        console.log("double");
+                        this._double = this._draw[i];
+                        if (this._selected !== i) {
+                            this._selected = i;
+                            Doc.SetSelectedTool(InkTool.Pen);
+                            SetActiveArrowStart(this._head[i]);
+                            SetActiveArrowEnd(this._end[i]);
+                            SetActiveBezierApprox("300");
+
+                            //  this.editProperties(this._head[i], "arrowStart"), this.editProperties(this._end[i], "arrowEnd"); 
+                            GestureOverlay.Instance.InkShape = this._shape[i];
+                        } else {
+                            this._selected = this._shapesNum;
+                            Doc.SetSelectedTool(InkTool.None);
+                            SetActiveArrowStart("none");
+                            SetActiveArrowEnd("none");
+                            GestureOverlay.Instance.InkShape = "";
+                            SetActiveBezierApprox("0");
+
+                        }
+
+
+
                     })}
                     style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
                     {this._draw[i]}
@@ -235,7 +261,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
                         className="antimodeMenu-button"
                         key={wid}
                         onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
-                        style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
+                        style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001 }}>
                         {wid}
                     </button>;
                 })}
@@ -265,7 +291,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
                         className="antimodeMenu-button"
                         key={color}
                         onPointerDown={action(() => { this.changeColor(color, "color"); this._colorBtn = false; this.editProperties(color, "color"); })}
-                        style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
+                        style={{ backgroundColor: this._colorBtn ? "121212" : "", zIndex: 1001 }}>
                         {/* <FontAwesomeIcon icon="pen-nib" size="lg" /> */}
                         <div className="color-previewII" style={{ backgroundColor: color }}></div>
                     </button>;
@@ -286,14 +312,14 @@ export default class InkOptionsMenu extends AntimodeMenu {
             <div className="color-previewI" style={{ backgroundColor: ActiveFillColor() ?? "121212" }}></div>
         </button>;
         if (this._fillBtn) {
-            fillPicker = <div className="btn-group" key="fill">
+            fillPicker = <div className="btn-group" key="fill" >
                 {fillPicker}
                 {this._palette.map(color => {
                     return <button
                         className="antimodeMenu-button"
                         key={color}
                         onPointerDown={action(() => { this.changeColor(color, "fill"); this._fillBtn = false; this.editProperties(color, "fill"); })}
-                        style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
+                        style={{ backgroundColor: this._fillBtn ? "121212" : "", zIndex: 1001 }}>
                         <div className="color-previewII" style={{ backgroundColor: color }}></div>
                     </button>;
                 })}
-- 
cgit v1.2.3-70-g09d2


From c8454d675a3081a83c56cf598b1b3637479b0459 Mon Sep 17 00:00:00 2001
From: yunahi <60233430+yunahi@users.noreply.github.com>
Date: Fri, 10 Jul 2020 05:22:06 +0900
Subject: added format shape

---
 src/client/util/SelectionManager.ts                |   3 +-
 .../collectionFreeForm/FormatShapePane.tsx         | 137 ++++-----------------
 2 files changed, 24 insertions(+), 116 deletions(-)

(limited to 'src')

diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index aea2c542b..af2f320d3 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -15,8 +15,7 @@ export namespace SelectionManager {
         SelectedDocuments: ObservableMap<DocumentView, boolean> = new ObservableMap();
         @action
         SelectDoc(docView: DocumentView, ctrlPressed: boolean): void {
-            console.log("select"
-            );
+
             // if doc is not in SelectedDocuments, add it
             if (!manager.SelectedDocuments.get(docView)) {
                 if (!ctrlPressed) {
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index 7b47b7ca4..37ba805b6 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -3,12 +3,9 @@ import AntimodeMenu from "../../AntimodeMenu";
 import { observer } from "mobx-react";
 import { observable, action, computed } from "mobx";
 import "./FormatShapePane.scss";
-import { ActiveInkColor, ActiveInkBezierApprox, ActiveFillColor, ActiveArrowStart, ActiveArrowEnd, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "../../InkingStroke";
+import { SetActiveInkWidth } from "../../InkingStroke";
 import { Scripting } from "../../../util/Scripting";
-import { InkTool, InkField } from "../../../../fields/InkField";
-import { ColorState } from "react-color";
-import { Utils } from "../../../../Utils";
-import GestureOverlay from "../../GestureOverlay";
+import { InkField } from "../../../../fields/InkField";
 import { Doc } from "../../../../fields/Doc";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { DocumentView } from "../../../views/nodes/DocumentView";
@@ -19,9 +16,6 @@ import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
 import { faRulerCombined, faFillDrip, faPenNib } from "@fortawesome/free-solid-svg-icons";
 import { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types";
 import e = require("express");
-import { ChangeEvent } from "mongodb";
-import { black } from "colors";
-
 
 library.add(faRulerCombined, faFillDrip, faPenNib);
 
@@ -33,63 +27,42 @@ export default class FormatShapePane extends AntimodeMenu {
     private _width = ["1", "5", "10", "100"];
     private _mode = ["fill-drip", "ruler-combined"];
     private _subMenu = ["fill", "line", "size", "position"];
-    private _headIcon = ["⎯", "←"];
-    private _endIcon = ["⎯", "→"];
-    private _head = ["none", "arrowHead"];
-    private _end = ["none", "arrowEnd"];
-
     @observable private _subOpen = [false, false, false, false];
-
     @observable private collapsed: boolean = false;
     @observable private currMode: string = "fill-drip";
     @observable _fillBtn = false;
     @observable _lineBtn = false;
-
     @observable _selectDoc: DocumentView[] = [];
-
     @observable _noFill = false;
     @observable _solidFill = false;
     @observable _noLine = false;
     @observable _solidLine = false;
     @observable _dashLine = false;
     @observable _lock = false;
-
     @observable _multiple = false;
-
     @observable _widthBtn = false;
-
-    @observable _currWidth = "10";
-
     @observable _single = false;
-    @observable _currFill = "#D0021B";
-    @observable _currColor = "#D0021B";
-
     @observable _arrowHead = false;
     @observable _arrowEnd = false;
-
-
     @observable _currSizeHeight = "10";
     @observable _currSizeWidth = "10";
     @observable _currRotation = "10";
-
     @observable _currPositionHorizontal = "10";
     @observable _currPositionVertical = "10";
-
+    @observable _currWidth = "10";
+    @observable _currFill = "#D0021B";
+    @observable _currColor = "#D0021B";
 
     constructor(props: Readonly<{}>) {
         super(props);
         FormatShapePane.Instance = this;
-        this._canFade = false; // don't let the inking menu fade away
+        this._canFade = false;
         this.Pinned = BoolCast(Doc.UserDoc()["formatShapePane-pinned"]);
-
     }
 
     @action
     toggleMenuPin = (e: React.MouseEvent) => {
         Doc.UserDoc()["formatShapePane-pinned"] = this.Pinned = !this.Pinned;
-        if (!this.Pinned) {
-            // this.fadeOut(true);
-        }
     }
 
     @action
@@ -105,9 +78,9 @@ export default class FormatShapePane extends AntimodeMenu {
     closePane = () => {
         this.jumpTo(-300, -300);
         this.Pinned = false;
-
     }
 
+    //if multiple inks are selected and do not share the same prop, leave blank
     @action
     checkSame = () => {
         const docs = SelectionManager.SelectedDocuments();
@@ -117,18 +90,6 @@ export default class FormatShapePane extends AntimodeMenu {
                 inks.push(docs[i]);
             }
         }
-        const firstWidth = Document(inks[0].rootDoc).strokeWidth;
-        const firstColor = Document(inks[0].rootDoc).color;
-        const firstFill = Document(inks[0].rootDoc).fillColor;
-        // const firstBezier
-        const firstRotation = Document(inks[0].rootDoc).rotation;
-        const firstArrowStart = Document(inks[0].rootDoc).arrowStart;
-        const firstArrowEnd = Document(inks[0].rootDoc).arrowEnd;
-        const firstDash = Document(inks[0].rootDoc).dash;
-        const firstWidthSize = Document(inks[0].rootDoc)._width;
-        const firstHeightSize = Document(inks[0].rootDoc)._height;
-        const firstHorizontal = Document(inks[0].rootDoc).x;
-        const firstVertical = Document(inks[0].rootDoc).y;
         this._noFill = Document(inks[0].rootDoc).fillColor === "none" ? true : false;
         this._solidFill = Document(inks[0].rootDoc).fillColor === "none" ? false : true;
         this._noLine = Document(inks[0].rootDoc).color === "none" ? true : false;
@@ -142,11 +103,7 @@ export default class FormatShapePane extends AntimodeMenu {
 
             }
         }
-        // this._solidLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash === 0 ? true : false;
-        // this._dashLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash !== 0 ? true : false;
-        // // this._widthBtn = false;    
         this._currWidth = String(Document(inks[0].rootDoc).strokeWidth);
-        // this._single = false;
         this._currFill = String(Document(inks[0].rootDoc).fillColor);
         this._currColor = String(Document(inks[0].rootDoc).color);
         this._arrowHead = Document(inks[0].rootDoc).arrowStart === "none" ? false : true;
@@ -157,45 +114,43 @@ export default class FormatShapePane extends AntimodeMenu {
         this._currPositionHorizontal = String(Document(inks[0].rootDoc).x);
         this._currPositionVertical = String(Document(inks[0].rootDoc).y);
         for (var i = 0; i < inks.length; i++) {
-            if (Document(inks[i].rootDoc).strokeWidth !== firstWidth) {
+            if (Document(inks[i].rootDoc).strokeWidth !== Document(inks[0].rootDoc).strokeWidth) {
                 this._currWidth = "";
             }
-            if (Document(inks[i].rootDoc).color !== firstColor) {
+            if (Document(inks[i].rootDoc).color !== Document(inks[0].rootDoc).color) {
                 this._noLine = false;
                 this._solidLine = false;
                 this._dashLine = false;
             }
-            if (Document(inks[i].rootDoc).fillColor !== firstFill) {
+            if (Document(inks[i].rootDoc).fillColor !== Document(inks[0].rootDoc).fillColor) {
                 this._solidFill = false;
                 this._noFill = false;
             }
-            if (Document(inks[i].rootDoc).arrowStart !== firstArrowStart) {
+            if (Document(inks[i].rootDoc).arrowStart !== Document(inks[0].rootDoc).arrowStart) {
                 this._arrowHead = false;
             }
-            if (Document(inks[i].rootDoc).arrowEnd !== firstArrowEnd) {
+            if (Document(inks[i].rootDoc).arrowEnd !== Document(inks[0].rootDoc).arrowEnd) {
                 this._arrowEnd = false;
             }
-            if (Document(inks[i].rootDoc).x !== firstHorizontal) {
+            if (Document(inks[i].rootDoc).x !== Document(inks[0].rootDoc).x) {
                 this._currPositionHorizontal = "";
             }
-            if (Document(inks[i].rootDoc).y !== firstVertical) {
+            if (Document(inks[i].rootDoc).y !== Document(inks[0].rootDoc).y) {
                 this._currPositionVertical = "";
             }
-            if (Document(inks[i].rootDoc)._width !== firstWidthSize) {
+            if (Document(inks[i].rootDoc)._width !== Document(inks[0].rootDoc)._width) {
                 this._currSizeWidth = "";
             }
-            if (Document(inks[i].rootDoc)._height !== firstHeightSize) {
+            if (Document(inks[i].rootDoc)._height !== Document(inks[0].rootDoc)._height) {
                 this._currSizeHeight = "";
             }
-            if (Document(inks[i].rootDoc).rotation !== firstRotation) {
+            if (Document(inks[i].rootDoc).rotation !== Document(inks[0].rootDoc).rotation) {
                 this._currRotation = "";
             }
         }
-
-
-
     }
 
+
     @action
     upDownButtons = (dirs: string, field: string) => {
         SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
@@ -206,14 +161,12 @@ export default class FormatShapePane extends AntimodeMenu {
                         if (doc.strokeWidth) {
                             doc.strokeWidth = dirs === "up" ? doc.strokeWidth + 1 : doc.strokeWidth - 1;
                             SetActiveInkWidth(String(doc.strokeWidth));
-
                         }
                         break;
                     case "sizeWidth":
                         if (doc._width && doc._height) {
                             const oldWidth = doc._width;
                             const oldHeight = doc._height;
-
                             doc._width = dirs === "up" ? doc._width + 10 : doc._width - 10;
                             if (this._lock) {
                                 doc._height = (doc._width * oldHeight) / oldWidth;
@@ -240,19 +193,17 @@ export default class FormatShapePane extends AntimodeMenu {
                             doc.y = dirs === "up" ? doc.y + 10 : doc.y - 10;
                         }
                     case "rotation":
-
                         this.rotate(dirs === "up" ? Number(doc.rotation) + Number(0.1) : Number(doc.rotation) - Number(0.1));
-
                         break;
                     default:
                         break;
                 }
                 this.selected();
-
             }
         }));
     }
 
+
     @action
     editProperties = (value: any, field: string) => {
         SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
@@ -270,7 +221,6 @@ export default class FormatShapePane extends AntimodeMenu {
                         doc.fillColor = String(value);
                         break;
                     case "bezier":
-                        // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300;
                         break;
                     case "arrowStart":
                         doc.arrowStart = String(value);
@@ -285,7 +235,6 @@ export default class FormatShapePane extends AntimodeMenu {
                         if (doc._width && doc._height) {
                             const oldWidth = doc._width;
                             const oldHeight = doc._height;
-
                             doc._width = Number(value);
                             if (this._lock) {
                                 doc._height = (doc._width * oldHeight) / oldWidth;
@@ -296,7 +245,6 @@ export default class FormatShapePane extends AntimodeMenu {
                         if (doc._width && doc._height) {
                             const oldWidth = doc._width;
                             const oldHeight = doc._height;
-
                             doc._height = Number(value);
                             if (this._lock) {
                                 doc._width = (doc._height * oldWidth) / oldHeight;
@@ -308,7 +256,6 @@ export default class FormatShapePane extends AntimodeMenu {
                         break;
                     case "vertical":
                         doc.y = Number(value);
-
                         break;
                     default:
                         break;
@@ -331,13 +278,14 @@ export default class FormatShapePane extends AntimodeMenu {
         return close;
     }
 
+    //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(() => { console.log("mode"); this.currMode = mode; })}
+                    onPointerDown={action(() => { this.currMode = mode; })}
                     style={{ backgroundColor: this.currMode === mode ? "121212" : "", position: "relative", top: 30 }}>
                     <FontAwesomeIcon icon={mode as IconProp} size="lg" />
                 </button>;
@@ -346,6 +294,7 @@ export default class FormatShapePane extends AntimodeMenu {
         return modes;
     }
 
+    //detects currently selected document and change value in pane
     @action
     selected = () => {
         this._selectDoc = SelectionManager.SelectedDocuments();
@@ -353,7 +302,6 @@ export default class FormatShapePane extends AntimodeMenu {
             this._single = true;
             const doc = Document(this._selectDoc[0].rootDoc);
             if (doc.type === DocumentType.INK) {
-                console.log(doc.fillColor);
                 if (doc.fillColor === "none") {
                     this._noFill = true;
                     this._solidFill = false;
@@ -382,11 +330,8 @@ export default class FormatShapePane extends AntimodeMenu {
 
                     this._arrowHead = doc.arrowStart === "none" ? false : true;
                     this._arrowEnd = doc.arrowEnd === "none" ? false : true;
-
-
                     this._currPositionHorizontal = String(doc.x);
                     this._currPositionVertical = String(doc.y);
-                    console.log(doc.rotation);
                     this._currRotation = String(doc.rotation);
                     this._currSizeHeight = String(doc._height);
                     this._currSizeWidth = String(doc._width);
@@ -418,8 +363,6 @@ export default class FormatShapePane extends AntimodeMenu {
         SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
             const doc = Document(element.rootDoc);
             if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
-                // doc.rotation = (Number(doc.rotation) + (Number(angle) * 180 / Math.PI));
-                // console.log(doc.rotation);
                 const angle = Number(degrees) - Number(doc.rotation);
                 doc.rotation = Number(degrees);
                 const ink = Cast(doc.data, InkField)?.inkData;
@@ -446,10 +389,8 @@ 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;
-
                 }
             }
         }));
@@ -854,14 +795,11 @@ export default class FormatShapePane extends AntimodeMenu {
         return positionVerticalInput;
     }
 
-
+    //change inputs
     @action
     onChange = (val: string, property: string): void => {
         if (!Number.isNaN(Number(val)) && Number(val) !== null && val !== " ") {
 
-            // if (val === "") {
-            //     val = "0";
-            // }
             switch (property) {
                 case "width":
                     this._currWidth = val;
@@ -912,35 +850,6 @@ export default class FormatShapePane extends AntimodeMenu {
     }
 
 
-
-
-    // @action
-    // changeWidth = (event: React.ChangeEvent<HTMLInputElement>) => {
-    //     console.log(event.target.value);
-    //     this._currWidth = NumCast(event.target.value);
-
-    // }
-
-    @computed get upDown() {
-        const upDown = <div>
-            <button
-                className="antiMenu-Button"
-                key="up"
-                onPointerDown={action(() => { console.log("up"); })}>
-                up
-            </button>
-            <br></br>
-            <button
-                className="antiMenu-Button"
-                key="up"
-                onPointerDown={action(() => { console.log("dpwm"); })}>
-                down
-            </button>
-        </div>;
-        return upDown;
-    }
-
-
     @computed get widthPicker() {
         var widthPicker = <button
             className="antimodeMenu-button"
-- 
cgit v1.2.3-70-g09d2


From 39836c84bb518b8497925434190309a1e9eafe55 Mon Sep 17 00:00:00 2001
From: yunahi <60233430+yunahi@users.noreply.github.com>
Date: Fri, 10 Jul 2020 05:25:46 +0900
Subject: added format shape

---
 src/client/views/ContextMenu.tsx                                    | 1 -
 src/client/views/InkingStroke.tsx                                   | 1 -
 src/client/views/MainView.tsx                                       | 1 -
 src/client/views/collections/collectionFreeForm/FormatShapePane.tsx | 1 -
 4 files changed, 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 1a6b7ab90..941d7b44a 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -224,7 +224,6 @@ export class ContextMenu extends React.Component {
     }
 
     render() {
-        console.log("context");
         if (!this._display) {
             return null;
         }
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 4a7ec40be..7d9a3c8b3 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -42,7 +42,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
 
     @action
     private formatShape = () => {
-        console.log("Clicked");
         FormatShapePane.Instance.Pinned = true;
         FormatShapePane.Instance.selected();
 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 3eed44654..30ad621fd 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -453,7 +453,6 @@ export class MainView extends React.Component {
 
     @computed get mainContent() {
         const sidebar = this.userDoc?.["tabs-panelContainer"];
-        console.log('${ ANTIMODEMENU_HEIGHT }');
         return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
             <div className="mainView-mainContent" style={{
                 color: this.darkScheme ? "rgb(205,205,205)" : "black",
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index 37ba805b6..bf2218fdc 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -315,7 +315,6 @@ export default class FormatShapePane extends AntimodeMenu {
                     this._solidLine = false;
                     this._dashLine = false;
                 } else {
-                    console.log(doc.strokeWidth);
                     this._currWidth = String(doc.strokeWidth);
                     this._currColor = String(doc.color);
                     if (doc.dash === "0") {
-- 
cgit v1.2.3-70-g09d2


From 6b5c11a26e114f26f3907342f9afbd47b27cecf4 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 11 Jul 2020 17:54:20 -0400
Subject: restructured ink to make more react-friendly

---
 src/client/util/CurrentUserUtils.ts                |   6 +-
 src/client/util/InteractionUtils.tsx               |  21 +-
 src/client/util/SelectionManager.ts                |   3 -
 src/client/views/AntimodeMenu.tsx                  |   1 -
 src/client/views/DocumentDecorations.tsx           |   5 +-
 src/client/views/InkingStroke.tsx                  |  18 +-
 .../collectionFreeForm/FormatShapePane.tsx         | 801 +++++++--------------
 .../collectionFreeForm/InkOptionsMenu.tsx          |  24 +-
 src/client/views/nodes/ColorBox.tsx                |   1 -
 9 files changed, 299 insertions(+), 581 deletions(-)

(limited to 'src')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d0ca0e57e..0b644fa79 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -760,9 +760,9 @@ export class CurrentUserUtils {
         doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)");
         doc.activeInkWidth = StrCast(doc.activeInkWidth, "1");
         doc.activeInkBezier = StrCast(doc.activeInkBezier, "0");
-        doc.activeFillColor = StrCast(doc.activeFillColor, "none");
-        doc.activeArrowStart = StrCast(doc.activeArrowStart, "none");
-        doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none");
+        doc.activeFillColor = StrCast(doc.activeFillColor, "");
+        doc.activeArrowStart = StrCast(doc.activeArrowStart, "");
+        doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "");
         doc.activeDash = StrCast(doc.activeDash, "0");
         doc.fontSize = NumCast(doc.fontSize, 12);
         doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // 
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 2883e2056..6ab7bcc87 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -3,7 +3,6 @@ import * as beziercurve from 'bezier-curve';
 import * as fitCurve from 'fit-curve';
 import "./InteractionUtils.scss";
 import { Utils } from "../../Utils";
-import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu";
 
 export namespace InteractionUtils {
     export const MOUSETYPE = "mouse";
@@ -96,12 +95,6 @@ export namespace InteractionUtils {
         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) {
 
-        // if (InkOptionsMenu.Instance.Pinned) {
-        //     for (var i = 0; i < points.length; i++) {
-        //         points[i].Y -= 35;
-        //     }
-        // }
-
         let pts: { X: number; Y: number; }[] = [];
         if (shape) { //if any of the shape are true
             pts = makePolygon(shape, points);
@@ -127,15 +120,15 @@ export namespace InteractionUtils {
         const dashArray = String(Number(width) * Number(dash));
         const defGuid = Utils.GenerateGuid();
         const arrowDim = Math.max(0.5, 8 / Math.log(Math.max(2, strokeWidth)));
-        return (<svg fill={fill === "none" ? color : fill}> {/* setting the svg fill sets the arrowhead fill */}
+        return (<svg fill={!fill || fill === "none" ? color : fill}> {/* 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 !== "arrowHead" && arrowEnd !== "arrowHead" ? (null) : <marker id={`arrowHead${defGuid}`} orient="auto" overflow="visible" refX="1.6" refY="0" markerWidth="10" markerHeight="7">
+                {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 !== "arrowEnd" && arrowEnd !== "arrowEnd" ? (null) : <marker id={`arrowEnd${defGuid}`} orient="auto" overflow="visible" refX="1.6" refY="0" markerWidth="10" markerHeight="7">
+                {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>}
             </defs>}
@@ -144,7 +137,7 @@ export namespace InteractionUtils {
                 points={strpts}
                 style={{
                     filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
-                    fill,
+                    fill: fill ? fill : "transparent",
                     opacity: strokeWidth !== width ? 0.5 : undefined,
                     pointerEvents: pevents as any,
                     stroke: color ?? "rgb(0, 0, 0)",
@@ -153,8 +146,8 @@ export namespace InteractionUtils {
                     strokeLinecap: "round",
                     strokeDasharray: dashArray
                 }}
-                markerStart={`url(#${arrowStart + defGuid})`}
-                markerEnd={`url(#${arrowEnd + defGuid})`}
+                markerStart={`url(#${arrowStart + "Start" + defGuid})`}
+                markerEnd={`url(#${arrowEnd + "End" + defGuid})`}
             />
 
         </svg>);
@@ -163,7 +156,7 @@ export namespace InteractionUtils {
     // export function makeArrow() {
     //     return (
     //         InkOptionsMenu.Instance.getColors().map(color => {
-    //             const id1 = "arrowHeadTest" + color;
+    //             const id1 = "arrowStartTest" + color;
     //             console.log(color);
     //             <marker id={id1} orient="auto" overflow="visible" refX="0" refY="1" markerWidth="10" markerHeight="7">
     //                 <polygon points="0 0, 3 1, 0 2" fill={"#" + color} />
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index af2f320d3..9a968aeda 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -5,7 +5,6 @@ import { computedFn } from "mobx-utils";
 import { List } from "../../fields/List";
 import { Scripting } from "./Scripting";
 import { DocumentManager } from "./DocumentManager";
-import FormatShapePane from "../views/collections/collectionFreeForm/FormatShapePane";
 
 export namespace SelectionManager {
 
@@ -31,8 +30,6 @@ export namespace SelectionManager {
                 manager.SelectedDocuments.set(docView, true);
             }
             Doc.UserDoc().activeSelection = new List(SelectionManager.SelectedDocuments().map(dv => dv.props.Document));
-            FormatShapePane.Instance.selected();
-
         }
         @action
         DeselectDoc(docView: DocumentView): void {
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index cb6de1785..3303a5e68 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -1,7 +1,6 @@
 import React = require("react");
 import { observable, action } from "mobx";
 import "./AntimodeMenu.scss";
-import { inherits } from "util";
 
 /**
  * This is an abstract class that serves as the base for a PDF-style or Marquee-style
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8edd4c4a9..81b4f9162 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -152,8 +152,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         if (e.button === 0 && !e.altKey && !e.ctrlKey) {
             let child = SelectionManager.SelectedDocuments()[0].ContentDiv!.children[0];
             while (child.children.length) {
-                const next = Array.from(child.children).find(c => !c.className.includes("collectionViewChrome"));
-                if (next?.className.includes("documentView-node")) break;
+                const next = Array.from(child.children).find(c => typeof (c.className) !== "string" || !c.className.includes("collectionViewChrome"));
+                if (typeof (next?.className) === "string" && next?.className.includes("documentView-node")) break;
                 if (next) child = next;
                 else break;
             }
@@ -294,7 +294,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             const doc = Document(element.rootDoc);
             if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
                 doc.rotation = Number(doc.rotation) + Number(angle);
-                console.log(doc.rotation);
                 const ink = Cast(doc.data, InkField)?.inkData;
                 if (ink) {
 
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 7d9a3c8b3..224abfd77 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -43,8 +43,6 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
     @action
     private formatShape = () => {
         FormatShapePane.Instance.Pinned = true;
-        FormatShapePane.Instance.selected();
-
     }
 
     render() {
@@ -62,14 +60,14 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
         const height = bottom - top;
         const scaleX = (this.props.PanelWidth() - strokeWidth) / (width - strokeWidth);
         const scaleY = (this.props.PanelHeight() - strokeWidth) / (height - strokeWidth);
-        const strokeColor = StrCast(this.layoutDoc.color, ActiveInkColor());
+        const strokeColor = StrCast(this.layoutDoc.color, "");
         const points = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth,
-            StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), StrCast(this.layoutDoc.fillColor, ActiveFillColor()),
-            StrCast(this.layoutDoc.arrowStart, ActiveArrowStart()), StrCast(this.layoutDoc.arrowEnd, ActiveArrowEnd()),
-            StrCast(this.layoutDoc.dash, ActiveDash()), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5, false);
+            StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"),
+            StrCast(this.layoutDoc.arrowStart), StrCast(this.layoutDoc.arrowEnd),
+            StrCast(this.layoutDoc.dash), 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),
-            StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), StrCast(this.layoutDoc.fillColor, ActiveFillColor()),
+            StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"),
             "none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblepainted" : "none", false, true);
         return (
             <svg className="inkingStroke"
@@ -106,9 +104,9 @@ export function SetActiveArrowEnd(value: string) { ActiveInkPen() && (ActiveInkP
 export function SetActiveDash(dash: string): void { !isNaN(parseInt(dash)) && ActiveInkPen() && (ActiveInkPen().activeDash = dash); }
 export function ActiveInkPen(): Doc { return Cast(Doc.UserDoc().activeInkPen, Doc, null); }
 export function ActiveInkColor(): string { return StrCast(ActiveInkPen()?.activeInkColor, "black"); }
-export function ActiveFillColor(): string { return StrCast(ActiveInkPen()?.activeFillColor, "none"); }
-export function ActiveArrowStart(): string { return StrCast(ActiveInkPen()?.activeArrowStart, "none"); }
-export function ActiveArrowEnd(): string { return StrCast(ActiveInkPen()?.activeArrowEnd, "none"); }
+export function ActiveFillColor(): string { return StrCast(ActiveInkPen()?.activeFillColor, ""); }
+export function ActiveArrowStart(): string { return StrCast(ActiveInkPen()?.activeArrowStart, ""); }
+export function ActiveArrowEnd(): string { return StrCast(ActiveInkPen()?.activeArrowEnd, ""); }
 export function ActiveDash(): string { return StrCast(ActiveInkPen()?.activeDash, "0"); }
 export function ActiveInkWidth(): string { return StrCast(ActiveInkPen()?.activeInkWidth, "1"); }
 export function ActiveInkBezierApprox(): string { return StrCast(ActiveInkPen()?.activeInkBezier); }
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index bf2218fdc..321b5648e 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -3,10 +3,9 @@ import AntimodeMenu from "../../AntimodeMenu";
 import { observer } from "mobx-react";
 import { observable, action, computed } from "mobx";
 import "./FormatShapePane.scss";
-import { SetActiveInkWidth } from "../../InkingStroke";
 import { Scripting } from "../../../util/Scripting";
 import { InkField } from "../../../../fields/InkField";
-import { Doc } from "../../../../fields/Doc";
+import { Doc, Opt } from "../../../../fields/Doc";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { DocumentView } from "../../../views/nodes/DocumentView";
 import { Document } from "../../../../fields/documentSchemas";
@@ -15,7 +14,6 @@ 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 { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types";
-import e = require("express");
 
 library.add(faRulerCombined, faFillDrip, faPenNib);
 
@@ -27,31 +25,131 @@ export default class FormatShapePane extends AntimodeMenu {
     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;
-    @observable _selectDoc: DocumentView[] = [];
-    @observable _noFill = false;
-    @observable _solidFill = false;
-    @observable _noLine = false;
-    @observable _solidLine = false;
-    @observable _dashLine = false;
-    @observable _lock = false;
-    @observable _multiple = false;
-    @observable _widthBtn = false;
-    @observable _single = false;
-    @observable _arrowHead = false;
-    @observable _arrowEnd = false;
-    @observable _currSizeHeight = "10";
-    @observable _currSizeWidth = "10";
-    @observable _currRotation = "10";
-    @observable _currPositionHorizontal = "10";
-    @observable _currPositionVertical = "10";
-    @observable _currWidth = "10";
-    @observable _currFill = "#D0021B";
-    @observable _currColor = "#D0021B";
+    _lastFill = "#D0021B";
+    _lastLine = "#D0021B";
+    _lastDash = "2";
+
+    @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;
+    }
+    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 _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>) || ""
+    }
+    @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 _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;
+                }
+            }
+        });
+    }
+    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;
+                }
+            }
+        });
+    }
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -80,191 +178,40 @@ export default class FormatShapePane extends AntimodeMenu {
         this.Pinned = false;
     }
 
-    //if multiple inks are selected and do not share the same prop, leave blank
-    @action
-    checkSame = () => {
-        const docs = SelectionManager.SelectedDocuments();
-        const inks: DocumentView[] = [];
-        for (var i = 0; i < docs.length; i++) {
-            if (Document(docs[i].rootDoc).type === DocumentType.INK) {
-                inks.push(docs[i]);
-            }
-        }
-        this._noFill = Document(inks[0].rootDoc).fillColor === "none" ? true : false;
-        this._solidFill = Document(inks[0].rootDoc).fillColor === "none" ? false : true;
-        this._noLine = Document(inks[0].rootDoc).color === "none" ? true : false;
-        if (Document(inks[0].rootDoc).color !== "none") {
-            this._solidLine = true;
-            this._dashLine = true;
-            if (Document(inks[0].rootDoc).dash === "0") {
-                this._dashLine = false;
-            } else {
-                this._solidLine = false;
-
-            }
-        }
-        this._currWidth = String(Document(inks[0].rootDoc).strokeWidth);
-        this._currFill = String(Document(inks[0].rootDoc).fillColor);
-        this._currColor = String(Document(inks[0].rootDoc).color);
-        this._arrowHead = Document(inks[0].rootDoc).arrowStart === "none" ? false : true;
-        this._arrowEnd = Document(inks[0].rootDoc).arrowEnd === "none" ? false : true;
-        this._currSizeHeight = String(Document(inks[0].rootDoc)._height);
-        this._currSizeWidth = String(Document(inks[0].rootDoc)._width);
-        this._currRotation = String(Document(inks[0].rootDoc).rotation);
-        this._currPositionHorizontal = String(Document(inks[0].rootDoc).x);
-        this._currPositionVertical = String(Document(inks[0].rootDoc).y);
-        for (var i = 0; i < inks.length; i++) {
-            if (Document(inks[i].rootDoc).strokeWidth !== Document(inks[0].rootDoc).strokeWidth) {
-                this._currWidth = "";
-            }
-            if (Document(inks[i].rootDoc).color !== Document(inks[0].rootDoc).color) {
-                this._noLine = false;
-                this._solidLine = false;
-                this._dashLine = false;
-            }
-            if (Document(inks[i].rootDoc).fillColor !== Document(inks[0].rootDoc).fillColor) {
-                this._solidFill = false;
-                this._noFill = false;
-            }
-            if (Document(inks[i].rootDoc).arrowStart !== Document(inks[0].rootDoc).arrowStart) {
-                this._arrowHead = false;
-            }
-            if (Document(inks[i].rootDoc).arrowEnd !== Document(inks[0].rootDoc).arrowEnd) {
-                this._arrowEnd = false;
-            }
-            if (Document(inks[i].rootDoc).x !== Document(inks[0].rootDoc).x) {
-                this._currPositionHorizontal = "";
-            }
-            if (Document(inks[i].rootDoc).y !== Document(inks[0].rootDoc).y) {
-                this._currPositionVertical = "";
-            }
-            if (Document(inks[i].rootDoc)._width !== Document(inks[0].rootDoc)._width) {
-                this._currSizeWidth = "";
-            }
-            if (Document(inks[i].rootDoc)._height !== Document(inks[0].rootDoc)._height) {
-                this._currSizeHeight = "";
-            }
-            if (Document(inks[i].rootDoc).rotation !== Document(inks[0].rootDoc).rotation) {
-                this._currRotation = "";
-            }
-        }
-    }
-
-
     @action
     upDownButtons = (dirs: string, field: string) => {
-        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
-            const doc = Document(element.rootDoc);
-            if (doc.type === DocumentType.INK) {
-                switch (field) {
-                    case "width":
-                        if (doc.strokeWidth) {
-                            doc.strokeWidth = dirs === "up" ? doc.strokeWidth + 1 : doc.strokeWidth - 1;
-                            SetActiveInkWidth(String(doc.strokeWidth));
+        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;
                         }
-                        break;
-                    case "sizeWidth":
-                        if (doc._width && doc._height) {
-                            const oldWidth = doc._width;
-                            const oldHeight = doc._height;
-                            doc._width = dirs === "up" ? doc._width + 10 : doc._width - 10;
-                            if (this._lock) {
-                                doc._height = (doc._width * oldHeight) / oldWidth;
-                            }
-                        }
-                        break;
-                    case "sizeHeight":
-                        if (doc._width && doc._height) {
-                            const oldWidth = doc._width;
-                            const oldHeight = doc._height;
-                            doc._height = dirs === "up" ? doc._height + 10 : doc._height - 10;
-                            if (this._lock) {
-                                doc._width = (doc._height * oldWidth) / oldHeight;
-                            }
-                        }
-                        break;
-                    case "horizontal":
-                        if (doc.x) {
-                            doc.x = dirs === "up" ? doc.x + 10 : doc.x - 10;
-                        }
-                        break;
-                    case "vertical":
-                        if (doc.y) {
-                            doc.y = dirs === "up" ? doc.y + 10 : doc.y - 10;
-                        }
-                    case "rotation":
-                        this.rotate(dirs === "up" ? Number(doc.rotation) + Number(0.1) : Number(doc.rotation) - Number(0.1));
-                        break;
-                    default:
-                        break;
-                }
-                this.selected();
-            }
-        }));
-    }
-
-
-    @action
-    editProperties = (value: any, field: string) => {
-        SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
-            const doc = Document(element.rootDoc);
-            if (doc.type === DocumentType.INK) {
-                switch (field) {
-                    case "width":
-                        SetActiveInkWidth(value);
-                        doc.strokeWidth = Number(value);
-                        break;
-                    case "color":
-                        doc.color = String(value);
-                        break;
-                    case "fill":
-                        doc.fillColor = String(value);
-                        break;
-                    case "bezier":
-                        break;
-                    case "arrowStart":
-                        doc.arrowStart = String(value);
-                        break;
-                    case "arrowEnd":
-                        doc.arrowEnd = String(value);
-                        break;
-                    case "dash":
-                        doc.dash = String(value);
-                        break;
-                    case "widthSize":
-                        if (doc._width && doc._height) {
-                            const oldWidth = doc._width;
-                            const oldHeight = doc._height;
-                            doc._width = Number(value);
-                            if (this._lock) {
-                                doc._height = (doc._width * oldHeight) / oldWidth;
-                            }
-                        }
-                        break;
-                    case "heightSize":
-                        if (doc._width && doc._height) {
-                            const oldWidth = doc._width;
-                            const oldHeight = doc._height;
-                            doc._height = Number(value);
-                            if (this._lock) {
-                                doc._width = (doc._height * oldWidth) / oldHeight;
-                            }
+                    }
+                });
+                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;
                         }
-                        break;
-                    case "horizontal":
-                        doc.x = Number(value);
-                        break;
-                    case "vertical":
-                        doc.y = Number(value);
-                        break;
-                    default:
-                        break;
-                }
-            }
-            this.selected();
-        }));
-        this.checkSame();
-
+                    }
+                });
+                break;
+        }
     }
 
     @computed get close() {
@@ -294,69 +241,6 @@ export default class FormatShapePane extends AntimodeMenu {
         return modes;
     }
 
-    //detects currently selected document and change value in pane
-    @action
-    selected = () => {
-        this._selectDoc = SelectionManager.SelectedDocuments();
-        if (this._selectDoc.length === 1 && Document(this._selectDoc[0].rootDoc).type === DocumentType.INK) {
-            this._single = true;
-            const doc = Document(this._selectDoc[0].rootDoc);
-            if (doc.type === DocumentType.INK) {
-                if (doc.fillColor === "none") {
-                    this._noFill = true;
-                    this._solidFill = false;
-                } else {
-                    this._solidFill = true;
-                    this._noFill = false;
-                    this._currFill = String(doc.fillColor);
-                }
-                if (doc.color === "none") {
-                    this._noLine = true;
-                    this._solidLine = false;
-                    this._dashLine = false;
-                } else {
-                    this._currWidth = String(doc.strokeWidth);
-                    this._currColor = String(doc.color);
-                    if (doc.dash === "0") {
-                        this._solidLine = true;
-                        this._noLine = false;
-                        this._dashLine = false;
-                    } else {
-                        this._dashLine = true;
-                        this._noLine = false;
-                        this._solidLine = false;
-                    }
-
-                    this._arrowHead = doc.arrowStart === "none" ? false : true;
-                    this._arrowEnd = doc.arrowEnd === "none" ? false : true;
-                    this._currPositionHorizontal = String(doc.x);
-                    this._currPositionVertical = String(doc.y);
-                    this._currRotation = String(doc.rotation);
-                    this._currSizeHeight = String(doc._height);
-                    this._currSizeWidth = String(doc._width);
-                }
-
-            }
-        } else {
-            this._noFill = false;
-            this._solidFill = false;
-            this._single = false;
-            this._currFill = "#D0021B";
-            this._noLine = false;
-            this._solidLine = false;
-            this._dashLine = false;
-            this._currColor = "#D0021B";
-            this._arrowHead = false;
-            this._arrowEnd = false;
-            this._currPositionHorizontal = "";
-            this._currPositionVertical = "";
-            this._currRotation = "";
-            this._currSizeHeight = "";
-            this._currSizeWidth = "";
-        }
-        this.checkSame();
-    }
-
     @action
     rotate = (degrees: number) => {
         SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
@@ -395,143 +279,80 @@ export default class FormatShapePane extends AntimodeMenu {
         }));
     }
 
-    @action
-    toggle = (check: string) => {
-        switch (check) {
-            case "noFill":
-                if (!this._noFill) {
-                    this._noFill = true;
-                    this._solidFill = false;
-                }
-                break;
-            case "solidFill":
-                if (!this._solidFill) {
-                    this._solidFill = true;
-                    this._noFill = false;
-                    if (this._currFill === "none") {
-                        this._currFill = "#D0021B";
-                    }
-                }
-                break;
-            case "noLine":
-                if (!this._noLine) {
-                    this._noLine = true;
-                    this._solidLine = false;
-                    this._dashLine = false;
-                }
-                break;
-            case "solidLine":
-                if (!this._solidLine) {
-                    this._solidLine = true;
-                    this._noLine = false;
-                    this._dashLine = false;
-                    if (this._currColor === "none") {
-                        this._currColor = "#D0021B";
-                    }
-                }
-                break;
-            case "dashLine":
-                if (!this._dashLine) {
-                    this._dashLine = true;
-                    this._solidLine = false;
-                    this._noLine = false;
-                    if (this._currColor === "none") {
-                        this._currColor = "#D0021B";
-                    }
-                }
-                break;
-            case "lock":
-                if (this._lock) {
-                    this._lock = false;
-                } else {
-                    this._lock = true;
-                }
-                break;
-            case "arrowHead":
-                this._arrowHead = this._arrowHead ? false : true;
-                break;
-            case "arrowEnd":
-                this._arrowEnd = this._arrowEnd ? false : true;
-                break;
-            default:
-                break;
-        }
-    }
-
     @computed get subMenu() {
         const fillCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
-            <input id="nofill" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._noFill} onChange={action(() => { this.toggle("noFill"); this.editProperties("none", "fill"); })} />
+            <input id="nofill" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._noFill} onChange={action(() => this._noFill = true)} />
             No Fill
-            <br></br>
-            <input id="solidfill" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._solidFill} onChange={action(() => { this.toggle("solidFill"); this.editProperties(this._currFill, "fill"); })} />
+            <br />
+            <input id="solidfill" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._solidFill} onChange={action(() => this._solidFill = true)} />
             Solid Fill
-            <br></br>
-            <br></br>
+            <br />
+            <br />
             {this._solidFill ? "Color" : ""}
             {this._solidFill ? this.fillButton : ""}
             {this._fillBtn && this._solidFill ? this.fillPicker : ""}
 
         </div>;
-        const arrows = <> <input id="arrowHead" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowHead} onChange={action(() => { this.toggle("arrowHead"); this.editProperties(this._arrowHead ? "arrowHead" : "none", "arrowStart"); })} />
+        const arrows = <> <input id="arrowStart" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowStart !== ""} onChange={action(() => this._arrowStart = this._arrowStart ? "" : "arrow")} />
          Arrow Head
-            <br></br>
+            <br />
 
-            <input id="arrowEnd" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowEnd} onChange={action(() => { this.toggle("arrowEnd"); this.editProperties(this._arrowEnd ? "arrowEnd" : "none", "arrowEnd"); })} />
+            <input id="arrowEnd" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowEnd !== ""} onChange={action(() => this._arrowEnd = this._arrowEnd ? "" : "arrow")} />
          Arrow End
-            <br></br></>;
+            <br /></>;
         const lineCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
-            <input id="noLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._noLine} onChange={action(() => { this.toggle("noLine"); this.editProperties("none", "color"); })} />
+            <input id="noLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._noLine} onChange={action(() => this._noLine = true)} />
                 No Line
-                <br></br>
-            <input id="solidLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._solidLine} onChange={action(() => { this.toggle("solidLine"); this.editProperties(this._currColor, "color"); this.editProperties("0", "dash"); })} />
+            <br />
+            <input id="solidLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._solidLine} onChange={action(() => this._solidLine = true)} />
                 Solid Line
-                <br></br>
-            <input id="dashLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._dashLine} onChange={action(() => { this.toggle("dashLine"); this.editProperties(this._currColor, "color"); this.editProperties("2", "dash"); })} />
+            <br />
+            <input id="dashLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._dashLine ? true : false} onChange={action(() => this._dashLine = "2")} />
                 Dash Line
-                <br></br>
-            <br></br>
+            <br />
+            <br />
             {(this._solidLine || this._dashLine) ? "Color" : ""}
             {(this._solidLine || this._dashLine) ? this.lineButton : ""}
             {this._lineBtn && (this._solidLine || this._dashLine) ? this.linePicker : ""}
-            <br></br>
+            <br />
             {(this._solidLine || this._dashLine) ? "Width" : ""}
             {(this._solidLine || this._dashLine) ? this.widthInput : ""}
-            <br></br>
-            <br></br>
+            <br />
+            <br />
             {(this._solidLine || this._dashLine) ? arrows : ""}
 
         </div>;
 
         const sizeCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
             Height {this.sizeHeightInput}
-            <br></br>
-            <br></br>
+            <br />
+            <br />
 
 
             Width {this.sizeWidthInput}
-            <br></br>
-            <br></br>
+            <br />
+            <br />
 
-            <input id="lock" style={{ width: "inherit", position: "absolute", right: 0 }} type="checkbox" checked={this._lock} onChange={action(() => { this.toggle("lock"); })} />
+            <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>
-            <br></br>
+            <br />
+            <br />
 
 
             Rotation {this.rotationInput}
-            <br></br>
-            <br></br>
+            <br />
+            <br />
 
 
         </div>;
         const positionCheck = <div style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}>
             Horizontal {this.positionHorizontalInput}
-            <br></br>
-            <br></br>
+            <br />
+            <br />
 
             Vertical {this.positionVerticalInput}
-            <br></br>
-            <br></br>
+            <br />
+            <br />
 
 
         </div>;
@@ -574,29 +395,30 @@ export default class FormatShapePane extends AntimodeMenu {
     }
 
     @computed get fillButton() {
-        const fillButton = <><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>
+        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></>;
-        return fillButton;
+            <br></br>
+        </>;
     }
     @computed get fillPicker() {
-        const fillPicker = <div className="btn-group-palette" key="fill" >
+        return <div className="btn-group-palette" key="fill" >
             {this._palette.map(color => {
                 return <button
                     className="antimodeMenu-button"
                     key={color}
-                    onPointerDown={action(() => { this._currFill = color; this.editProperties(color, "fill"); })}
+                    onPointerDown={action(() => this._currFill = color)}
                     style={{
                         // backgroundColor: this._fillBtn ? "121212" : "",
                         zIndex: 1001
@@ -606,33 +428,33 @@ export default class FormatShapePane extends AntimodeMenu {
             })}
 
         </div>;
-        return fillPicker;
     }
 
     @computed get lineButton() {
-        const lineButton = <><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>
-            <br></br></>;
-        return 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() {
-        const linePicker = <div className="btn-group-palette" key="line" >
+        return <div className="btn-group-palette" key="line" >
             {this._palette.map(color => {
                 return <button
                     className="antimodeMenu-button"
                     key={color}
-                    onPointerDown={action(() => { this._currColor = color; this.editProperties(color, "color"); })}
+                    onPointerDown={action(() => this._currColor = color)}
                     style={{
                         // backgroundColor: this._lineBtn ? "121212" : "",
                         zIndex: 1001
@@ -642,19 +464,19 @@ export default class FormatShapePane extends AntimodeMenu {
             })}
 
         </div>;
-        return linePicker;
     }
     @computed get widthInput() {
         const widthInput = <>
             <input
                 style={{ color: "black", width: 80, position: "absolute", right: 20 }}
-                type="text" value={this._currWidth}
-                onChange={e => this.onChange(e.target.value, "width")}
-                autoFocus></input>  <button
-                    className="antiMenu-Buttonup"
-                    key="up"
-                    onPointerDown={action(() => { this.upDownButtons("up", "width"); })}
-                    style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
+                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 />
@@ -672,8 +494,8 @@ export default class FormatShapePane extends AntimodeMenu {
             <input
                 style={{ color: "black", width: 80, position: "absolute", right: 20 }}
                 type="text" value={this._currSizeHeight}
-                onChange={e => this.onChange(e.target.value, "sizeHeight")}
-                autoFocus></input>
+                onChange={e => this._currSizeHeight = e.target.value}
+                autoFocus />
             <button
                 className="antiMenu-Buttonup"
                 key="up"
@@ -698,8 +520,8 @@ export default class FormatShapePane extends AntimodeMenu {
             <input
                 style={{ color: "black", width: 80, position: "absolute", right: 20 }}
                 type="text" value={this._currSizeWidth}
-                onChange={e => this.onChange(e.target.value, "sizeWidth")}
-                autoFocus></input>
+                onChange={e => this._currSizeWidth = e.target.value}
+                autoFocus />
             <button
                 className="antiMenu-Buttonup"
                 key="up"
@@ -707,7 +529,7 @@ export default class FormatShapePane extends AntimodeMenu {
                 style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
                 ˄
             </button>
-            <br></br>
+            <br />
             <button
                 className="antiMenu-Buttonup"
                 key="up"
@@ -724,7 +546,7 @@ export default class FormatShapePane extends AntimodeMenu {
                 <input
                     style={{ color: "black", width: 80, position: "absolute", right: 20 }}
                     type="text" value={this._currRotation}
-                    onChange={e => this.onChange(e.target.value, "rotation")}
+                    onChange={e => this._currRotation = e.target.value}
                     autoFocus></input>
                 <button
                     className="antiMenu-Buttonup"
@@ -733,7 +555,7 @@ export default class FormatShapePane extends AntimodeMenu {
                     style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
                     ˄
             </button>
-                <br></br>
+                <br />
                 <button
                     className="antiMenu-Buttonup"
                     key="up"
@@ -745,137 +567,56 @@ export default class FormatShapePane extends AntimodeMenu {
     }
 
     @computed get positionHorizontalInput() {
-        const positionHorizontalInput =
-            <><input
+        return <>
+            <input
                 style={{ color: "black", width: 80, position: "absolute", right: 20 }}
                 type="text" value={this._currPositionHorizontal}
-                onChange={e => this.onChange(e.target.value, "positionHorizontal")}
-                autoFocus></input>
-                <button
-                    className="antiMenu-Buttonup"
-                    key="up"
-                    onPointerDown={action(() => { this.upDownButtons("up", "horizontal"); })}
-                    style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
-                    ˄
+                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>
-                <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></>;
-        return positionHorizontalInput;
+        </>;
     }
 
     @computed get positionVerticalInput() {
-        const positionVerticalInput =
-            <><input
+        return <>
+            <input
                 style={{ color: "black", width: 80, position: "absolute", right: 20 }}
                 type="text" value={this._currPositionVertical}
-                onChange={e => this.onChange(e.target.value, "positionVertical")}
+                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="antiMenu-Buttonup"
+                key="up"
+                onPointerDown={action(() => { this.upDownButtons("down", "vertical"); })}
+                style={{ position: "absolute", width: 20, height: 10, right: 0, padding: 0 }}>
+                ˄
             </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></>;
-        return positionVerticalInput;
-    }
-
-    //change inputs
-    @action
-    onChange = (val: string, property: string): void => {
-        if (!Number.isNaN(Number(val)) && Number(val) !== null && val !== " ") {
-
-            switch (property) {
-                case "width":
-                    this._currWidth = val;
-                    if (val !== "") {
-                        this.editProperties(this._currWidth, "width");
-                    }
-                    break;
-                case "sizeHeight":
-                    this._currSizeHeight = val;
-                    if (val !== "") {
-                        this.editProperties(this._currSizeHeight, "heightSize");
-                    }
-                    break;
-                case "sizeWidth":
-                    this._currSizeWidth = val;
-                    if (val !== "") {
-
-                        this.editProperties(this._currSizeWidth, "widthSize");
-                    }
-                    break;
-                case "rotation":
-
-                    this._currRotation = val;
-                    if (val !== "") {
-
-                        this.rotate(Number(val));
-                    }
-                    break;
-                case "positionHorizontal":
-                    this._currPositionHorizontal = val; if (val !== "") {
-
-                        this.editProperties(this._currPositionHorizontal, "horizontal");
-                    }
-
-                    break;
-                case "positionVertical":
-                    this._currPositionVertical = val;
-                    if (val !== "") {
-
-                        this.editProperties(this._currPositionVertical, "vertical");
-                    }
-
-                    break;
-                default:
-                    break;
-            }
-        }
-    }
-
-
-    @computed get widthPicker() {
-        var widthPicker = <button
-            className="antimodeMenu-button"
-            key="width"
-            onPointerDown={action(e => this._widthBtn = !this._widthBtn)}
-            style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
-            <FontAwesomeIcon icon="bars" size="lg" />
-        </button>;
-        if (this._widthBtn) {
-            widthPicker = <div className="btn2-group" key="width">
-                {widthPicker}
-                {this._width.map(wid => {
-                    return <button
-                        className="antimodeMenu-button"
-                        key={wid}
-                        onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
-                        style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
-                        {wid}
-                    </button>;
-                })}
-            </div>;
-        }
-        return widthPicker;
+            <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>
+        </>;
     }
 
-
-
     render() {
         const buttons = [
 
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index e4f3248d0..0866db2be 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -25,19 +25,19 @@ library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSup
 export default class InkOptionsMenu extends AntimodeMenu {
     static Instance: InkOptionsMenu;
 
-    private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", "none"];
+    private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""];
     private _width = ["1", "5", "10", "100"];
     // private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"];
     // private _icons = ["O", "∆", "ロ", "➜", "-"];
     // private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",];
     // private _icons = ["O", "∆", "ロ", "⎯⎯⎯", "✖︎", " "];
     //arrowStart and arrowEnd must match and defs must exist in Inking Stroke
-    // private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"];
+    // private _arrowStart = ["arrowStart", "arrowStart", "dot", "dot", "none"];
     // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"];
     // private _arrowIcons = ["→", "↔︎", "•", "••", " "];
     private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"];
-    private _head = ["none", "none", "arrowHead", "none", "none", "arrowHead", "none", "none", "none"];
-    private _end = ["none", "arrowEnd", "arrowEnd", "none", "arrowEnd", "arrowEnd", "none", "none", "none"];
+    private _head = ["", "", "arrow", "", "", "arrow", "", "", ""];
+    private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""];
     private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"];
 
     @observable _shapesNum = this._shape.length;
@@ -122,12 +122,6 @@ export default class InkOptionsMenu extends AntimodeMenu {
                     case "bezier":
                         // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300;
                         break;
-                    case "arrowStart":
-                        doc.arrowStart = String(value);
-                        break;
-                    case "arrowEnd":
-                        doc.arrowEnd = String(value);
-                        break;
                     case "dash":
                         doc.dash = Number(value);
                     default:
@@ -165,13 +159,12 @@ export default class InkOptionsMenu extends AntimodeMenu {
                             SetActiveArrowEnd(this._end[i]);
                             SetActiveBezierApprox("300");
 
-                            //  this.editProperties(this._head[i], "arrowStart"), this.editProperties(this._end[i], "arrowEnd"); 
                             GestureOverlay.Instance.InkShape = this._shape[i];
                         } else {
                             this._selected = this._shapesNum;
                             Doc.SetSelectedTool(InkTool.None);
-                            SetActiveArrowStart("none");
-                            SetActiveArrowEnd("none");
+                            SetActiveArrowStart("");
+                            SetActiveArrowEnd("");
                             GestureOverlay.Instance.InkShape = "";
                             SetActiveBezierApprox("0");
 
@@ -189,13 +182,12 @@ export default class InkOptionsMenu extends AntimodeMenu {
                             SetActiveArrowEnd(this._end[i]);
                             SetActiveBezierApprox("300");
 
-                            //  this.editProperties(this._head[i], "arrowStart"), this.editProperties(this._end[i], "arrowEnd"); 
                             GestureOverlay.Instance.InkShape = this._shape[i];
                         } else {
                             this._selected = this._shapesNum;
                             Doc.SetSelectedTool(InkTool.None);
-                            SetActiveArrowStart("none");
-                            SetActiveArrowEnd("none");
+                            SetActiveArrowStart("");
+                            SetActiveArrowEnd("");
                             GestureOverlay.Instance.InkShape = "";
                             SetActiveBezierApprox("0");
 
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 137b387c0..31c5a8b13 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -14,7 +14,6 @@ import { ViewBoxBaseComponent } from "../DocComponent";
 import { ActiveInkPen, ActiveInkWidth, ActiveInkBezierApprox, SetActiveInkColor, SetActiveInkWidth, SetActiveBezierApprox } from "../InkingStroke";
 import "./ColorBox.scss";
 import { FieldView, FieldViewProps } from './FieldView';
-import { FormattedTextBox } from "./formattedText/FormattedTextBox";
 
 type ColorDocument = makeInterface<[typeof documentSchema]>;
 const ColorDocument = makeInterface(documentSchema);
-- 
cgit v1.2.3-70-g09d2


From cef8f8d5fb9f5b9dc1f56768c4fa5ec406fbc6ba Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 11 Jul 2020 20:02:55 -0400
Subject: fixed layout of inkOptionsMenu

---
 src/client/views/collections/collectionFreeForm/FormatShapePane.scss | 2 +-
 src/client/views/collections/collectionFreeForm/FormatShapePane.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
index 80a74fe4c..7720140b9 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
@@ -1,6 +1,6 @@
 .antimodeMenu-button {
     width: 200px;
-    position: absolute;
+    position: relative;
     text-align: left;
 
     .color-previewI {
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index 3a1c8b18d..095473330 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -136,7 +136,7 @@ export default class FormatShapePane extends AntimodeMenu {
     }
 
     @computed get close() {
-        return <button className="antimodeMenu-button" key="close" onPointerDown={action(() => this.closePane())} style={{ right: 0 }}>
+        return <button className="antimodeMenu-button" key="close" onPointerDown={action(() => this.closePane())} style={{ position: "absolute", right: 0 }}>
             X
         </button>;
     }
@@ -320,7 +320,7 @@ export default class FormatShapePane extends AntimodeMenu {
 
     colorButton(value: string, setter: () => {}) {
         return <>
-            <button className="antimodeMenu-button" key="fill" onPointerDown={action(e => setter())} style={{ right: 80 }}>
+            <button className="antimodeMenu-button" key="fill" onPointerDown={action(e => setter())} style={{ position: "absolute", right: 80 }}>
                 <FontAwesomeIcon icon="fill-drip" size="lg" />
                 <div className="color-previewI" style={{ backgroundColor: value ?? "121212" }} />
             </button>
-- 
cgit v1.2.3-70-g09d2


From 49b6ab8536f570ef244199ac39194d3b176c9e77 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 11 Jul 2020 20:47:55 -0400
Subject: added open formatting pane to inkOptions.  switched to radio buttons
 for some options.  changed names of stroke parameters to start with 'stroke"

---
 src/client/views/InkingStroke.tsx                  |  4 ++--
 .../collectionFreeForm/FormatShapePane.tsx         | 25 +++++++++++-----------
 .../collectionFreeForm/InkOptionsMenu.tsx          | 17 +++++++++++----
 src/client/views/nodes/ColorBox.tsx                | 11 ++++++++--
 4 files changed, 37 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 46f714875..d7f956e4f 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -63,8 +63,8 @@ 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.arrowStart), StrCast(this.layoutDoc.arrowEnd),
-            StrCast(this.layoutDoc.dash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5, false);
+            StrCast(this.layoutDoc.strokeArrowStart), StrCast(this.layoutDoc.strokeArrowEnd),
+            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),
             StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"),
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index 095473330..77d1b646d 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -43,10 +43,10 @@ export default class FormatShapePane extends AntimodeMenu {
     @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 _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"); }
@@ -59,13 +59,13 @@ export default class FormatShapePane extends AntimodeMenu {
     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.arrowStart = value); }
-    set _arrowEnd(value) { this.inks?.forEach(i => i.rootDoc.arrowEnd = value); }
+    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.dash = value ? this._lastDash : undefined);
+        this.inks?.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)); }
@@ -192,10 +192,10 @@ export default class FormatShapePane extends AntimodeMenu {
 
     @computed get subMenu() {
         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)} />
+            <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="checkbox" checked={this._solidFill} onChange={action(() => this._solidFill = true)} />
+            <input id="solidfill" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._solidFill} onChange={action(() => this._solidFill = true)} />
             Solid Fill
             <br />
             <br />
@@ -214,13 +214,13 @@ export default class FormatShapePane extends AntimodeMenu {
         </>;
 
         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)} />
+            <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="checkbox" checked={this._solidLine} onChange={action(() => this._solidLine = true)} />
+            <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="checkbox" checked={this._dashLine ? true : false} onChange={action(() => this._dashLine = "2")} />
+            <input id="dashLine" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._dashLine ? true : false} onChange={action(() => this._dashLine = "2")} />
                 Dash Line
             <br />
             <br />
@@ -230,6 +230,7 @@ export default class FormatShapePane extends AntimodeMenu {
             <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 : ""}
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index ddba8a66d..7f0bb5364 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -18,6 +18,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
 import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, } from "@fortawesome/free-solid-svg-icons";
 import { Cast, StrCast, BoolCast } from "../../../../fields/Types";
+import FormatShapePane from "./FormatShapePane";
 
 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);
 
@@ -40,7 +41,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
     private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"];
     private _head = ["", "", "arrow", "", "", "arrow", "", "", ""];
     private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""];
-    private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"];
+    private _shape = ["line", "line", "line", "", "", "", "rectangle", "circle", "triangle"];
 
     @observable _shapesNum = this._shape.length;
     @observable _selected = this._shapesNum;
@@ -127,7 +128,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
                         // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300;
                         break;
                     case "dash":
-                        doc.dash = Number(value);
+                        doc.strokeDash = Number(value);
                     default:
                         break;
                 }
@@ -144,7 +145,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
     @action
     changeDash = (e: React.PointerEvent): void => {
         SetActiveDash(ActiveDash() === "0" ? "2" : "0");
-        this.editProperties(ActiveDash(), "dash");
+        this.editProperties(ActiveDash(), "strokeDash");
     }
 
     @computed get drawButtons() {
@@ -296,6 +297,14 @@ export default class InkOptionsMenu extends AntimodeMenu {
         }
         return colorPicker;
     }
+    @computed get formatPane() {
+        return <button className="antimodeMenu-button" key="format"
+            title="toggle foramatting pane"
+            onPointerDown={action(e => FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)}
+            style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
+            <FontAwesomeIcon icon="chevron-right" size="lg" />
+        </button>;
+    }
 
     @computed get fillPicker() {
         var fillPicker = <button
@@ -403,12 +412,12 @@ export default class InkOptionsMenu extends AntimodeMenu {
             this.colorPicker,
             this.fillPicker,
             this.drawButtons,
+            this.formatPane,
             // this.arrowPicker,
             // this.dashButton,
             <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: this.Pinned ? "#121212" : "", display: this.collapsed ? "none" : undefined }}>
                 <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
             </button>
-
         ];
 
         // return this.getElement(buttons);
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index c35c52644..57028b0ca 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -14,6 +14,7 @@ import { ViewBoxBaseComponent } from "../DocComponent";
 import { ActiveInkPen, ActiveInkWidth, ActiveInkBezierApprox, SetActiveInkColor, SetActiveInkWidth, SetActiveBezierApprox } from "../InkingStroke";
 import "./ColorBox.scss";
 import { FieldView, FieldViewProps } from './FieldView';
+import { DocumentType } from "../../documents/DocumentTypes";
 
 type ColorDocument = makeInterface<[typeof documentSchema]>;
 const ColorDocument = makeInterface(documentSchema);
@@ -62,9 +63,15 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps, ColorDocument
                     StrCast(selDoc?._backgroundColor, StrCast(selDoc?.backgroundColor, "black")))} />
             <div style={{ display: "grid", gridTemplateColumns: "20% 80%", paddingTop: "10px" }}>
                 <div> {ActiveInkWidth() ?? 2}</div>
-                <input type="range" defaultValue={ActiveInkWidth() ?? 2} min={1} max={100} onChange={(e: React.ChangeEvent<HTMLInputElement>) => SetActiveInkWidth(e.target.value)} />
+                <input type="range" defaultValue={ActiveInkWidth() ?? 2} min={1} max={100} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    SetActiveInkWidth(e.target.value);
+                    SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value));
+                }} />
                 <div> {ActiveInkBezierApprox() ?? 2}</div>
-                <input type="range" defaultValue={ActiveInkBezierApprox() ?? 2} min={0} max={300} onChange={(e: React.ChangeEvent<HTMLInputElement>) => SetActiveBezierApprox(e.target.value)} />
+                <input type="range" defaultValue={ActiveInkBezierApprox() ?? 2} min={0} max={300} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    SetActiveBezierApprox(e.target.value);
+                    SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value);
+                }} />
                 <br />
                 <br />
             </div>
-- 
cgit v1.2.3-70-g09d2


From add9dfeec764b5a60a57344c79fd23a91c031a2d Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 12 Jul 2020 10:31:06 -0400
Subject: final cleanup of names and structure of FormatShapePane

---
 src/client/views/InkingStroke.tsx                  |   2 +-
 .../collectionFreeForm/FormatShapePane.scss        |   5 +
 .../collectionFreeForm/FormatShapePane.tsx         | 404 +++++++++------------
 .../collectionFreeForm/InkOptionsMenu.tsx          |   9 +-
 4 files changed, 182 insertions(+), 238 deletions(-)

(limited to 'src')

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);
-
     }
 });
-- 
cgit v1.2.3-70-g09d2