a bunch of cleanup to fix import order and to organize/restructure ink things in the right places.

2 files changed, 79 insertions, 221 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index fb7784b58..576c0c560 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -29,7 +29,6 @@ import { undoBatch, UndoManager } from "../../../util/UndoManager";
 import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss";
 import { ContextMenu } from "../../ContextMenu";
 import { ContextMenuProps } from "../../ContextMenuItem";
-import { InkingControl } from "../../InkingControl";
 import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView";
 import { DocumentViewProps, DocumentView } from "../../nodes/DocumentView";
 import { FormattedTextBox } from "../../nodes/formattedText/FormattedTextBox";
@@ -46,7 +45,7 @@ import React = require("react");
 import { CollectionViewType } from "../CollectionView";
 import { Timeline } from "../../animationtimeline/Timeline";
 import { SnappingManager } from "../../../util/SnappingManager";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { InkingStroke } from "../../InkingStroke";
 
 library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload);
 
@@ -391,7 +390,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if (e.nativeEvent.cancelBubble || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) || InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) {
+        if (e.nativeEvent.cancelBubble || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) || InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (Doc.selectedTool === InkTool.Highlighter || Doc.selectedTool === InkTool.Pen)) {
             return;
         }
         this._hitCluster = this.props.Document.useClusters ? this.pickCluster(this.getTransform().transformPoint(e.clientX, e.clientY)) !== -1 : false;
@@ -408,7 +407,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             document.addEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointerup", this.onPointerUp);
             // if not using a pen and in no ink mode
-            if (InkingControl.Instance.selectedTool === InkTool.None) {
+            if (Doc.selectedTool === InkTool.None) {
                 this._downX = this._lastX = e.pageX;
                 this._downY = this._lastY = e.pageY;
             }
@@ -432,13 +431,13 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                     this.addMoveListeners();
                     this.removeEndListeners();
                     this.addEndListeners();
-                    // if (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen) {
+                    // if (Doc.selectedTool === InkTool.Highlighter || Doc.selectedTool === InkTool.Pen) {
                     //     e.stopPropagation();
                     //     e.preventDefault();
                     //     const point = this.getTransform().transformPoint(pt.pageX, pt.pageY);
                     //     this._points.push({ X: point[0], Y: point[1] });
                     // }
-                    if (InkingControl.Instance.selectedTool === InkTool.None) {
+                    if (Doc.selectedTool === InkTool.None) {
                         this._lastX = pt.pageX;
                         this._lastY = pt.pageY;
                         e.preventDefault();
@@ -458,7 +457,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             case GestureUtils.Gestures.Stroke:
                 const points = ge.points;
                 const B = this.getTransform().transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height);
-                const inkDoc = Docs.Create.InkDocument(InkingControl.Instance.selectedColor, InkingControl.Instance.selectedTool, InkingControl.Instance.selectedWidth, InkingControl.Instance.selectedBezier, points, { title: "ink stroke", x: B.x, y: B.y, _width: B.width, _height: B.height });
+                const inkDoc = Docs.Create.InkDocument(InkingStroke.InkColor, Doc.selectedTool, InkingStroke.InkWidth, InkingStroke.InkBezierApprox, points, { title: "ink stroke", x: B.x, y: B.y, _width: B.width, _height: B.height });
                 this.addDocument(inkDoc);
                 e.stopPropagation();
                 break;
@@ -619,7 +618,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             return;
         }
         if (!e.cancelBubble) {
-            const selectedTool = InkingControl.Instance.selectedTool;
+            const selectedTool = Doc.selectedTool;
             if (selectedTool === InkTool.None) {
                 if (this._hitCluster && this.tryDragCluster(e)) {
                     e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document'  however it does mark the event as cancelBubble=true which we test for in the move event handlers
@@ -641,7 +640,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);
             const pt = myTouches[0];
             if (pt) {
-                if (InkingControl.Instance.selectedTool === InkTool.None) {
+                if (Doc.selectedTool === InkTool.None) {
                     if (this._hitCluster && this.tryDragCluster(e)) {
                         e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document'  however it does mark the event as cancelBubble=true which we test for in the move event handlers
                         e.preventDefault();
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 44488cbcf..b35c9682e 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -1,269 +1,117 @@
 import React = require("react");
 import AntimodeMenu from "../../AntimodeMenu";
 import { observer } from "mobx-react";
-import { unimplementedFunction } from "../../../../Utils";
 import { observable, action } from "mobx";
 import "./InkOptionsMenu.scss";
-
+import { InkingStroke } from "../../InkingStroke";
+import { Scripting } from "../../../util/Scripting";
+import { InkTool } from "../../../../fields/InkField";
+import { InkingControl } from "../../InkingControl";
+import { StrCast } from "../../../../fields/Types";
+import { ColorState } from "react-color";
+import { ColorBox } from "../../nodes/ColorBox";
 
 @observer
 export default class InkOptionsMenu extends AntimodeMenu {
     static Instance: InkOptionsMenu;
-    public changeColor: (color: string) => void = unimplementedFunction;
-    public changeBezier: (e: React.PointerEvent) => void = unimplementedFunction;
-    public changeWidth: (color: string) => void = unimplementedFunction;
-
-    private _palette: (string)[];
-    private _width: (string)[];
-
-
-    public _circle: boolean;
-    public _triangle: boolean;
-    public _rectangle: boolean;
-    public _arrow: boolean;
-    public _line: boolean;
-    public _widthSelected: string;
-
-    @observable public _circleBt: boolean;
-    @observable public _triangleBt: boolean;
-    @observable public _rectangleBt: boolean;
-    @observable public _arrowBt: boolean;
-    @observable public _lineBt: boolean;
-    @observable public _colorBt: boolean;
-    @observable public _color: string;
-    @observable public _bezierBt: boolean;
-    @observable public _widthBt: boolean;
 
+    private _palette = ["D0021B", "F5A623", "F8E71C", "8B572A", "7ED321", "417505", "9013FE", "4A90E2", "50E3C2", "B8E986", "000000", "4A4A4A", "9B9B9B", "FFFFFF"];
+    private _width = ["1", "5", "10", "100", "200", "300"];
+    private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"];
+    private _icons = ["O", "∆", "ロ", "➜", "-"];
 
+    @observable _colorBtn = false;
+    @observable _widthBtn = false;
 
     constructor(props: Readonly<{}>) {
         super(props);
         InkOptionsMenu.Instance = this;
-        this._canFade = false;
-
-        this._circle = false;
-        this._triangle = false;
-        this._rectangle = false;
-        this._arrow = false;
-        this._line = false;
-        this._circleBt = false;
-        this._triangleBt = false;
-        this._rectangleBt = false;
-        this._arrowBt = false;
-        this._lineBt = false;
-        this._colorBt = false;
-        this._bezierBt = false;
-        this._widthBt = false;
-
-        this._color = "";
-        this._widthSelected = "";
-
-
-        this._palette = [
-            "D0021B", "F5A623", "F8E71C", "8B572A", "7ED321", "417505", "9013FE", "4A90E2", "50E3C2", "B8E986", "000000", "4A4A4A", "9B9B9B", "FFFFFF",
-        ];
-
-        this._width = [
-            "1", "5", "10", "100", "200", "300"
-        ];
-
-    }
-
-
-
-    drag = (e: React.PointerEvent) => {
-        this.dragStart(e);
+        this._canFade = false; // don't let the inking menu fade away
     }
 
-
-
-
-
-    @action
-    toggleCircle = (e: React.PointerEvent) => {
-        const curr = this._circle;
-        this.allFalse();
-        curr ? this._circle = false : this._circle = true;
-        this._circleBt = this._circle;
-    }
-    @action
-    toggleTriangle = (e: React.PointerEvent) => {
-        const curr = this._triangle;
-        this.allFalse();
-        curr ? this._triangle = false : this._triangle = true;
-        this._triangleBt = this._triangle;
-    }
-    @action
-    toggleRectangle = (e: React.PointerEvent) => {
-        const curr = this._rectangle;
-        this.allFalse();
-        curr ? this._rectangle = false : this._rectangle = true;
-        this._rectangleBt = this._rectangle;
-    }
-    @action
-    toggleArrow = (e: React.PointerEvent) => {
-        const curr = this._arrow;
-        this.allFalse();
-        curr ? this._arrow = false : this._arrow = true;
-        this._arrowBt = this._arrow;
-    }
     @action
-    toggleLine = (e: React.PointerEvent) => {
-        const curr = this._line;
-        this.allFalse();
-        curr ? this._line = false : this._line = true;
-        this._lineBt = this._line;
+    changeColor = (color: string) => {
+        const col: ColorState = {
+            hex: color, hsl: { a: 0, h: 0, s: 0, l: 0, source: "" }, hsv: { a: 0, h: 0, s: 0, v: 0, source: "" },
+            rgb: { a: 0, r: 0, b: 0, g: 0, source: "" }, oldHue: 0, source: "",
+        };
+        ColorBox.switchColor(col);
     }
 
     @action
-    changeBezierClick = (e: React.PointerEvent) => {
-        const curr = this._bezierBt;
-        this.allFalse();
-        curr ? this._bezierBt = false : this._bezierBt = true;
-        this.changeBezier(e);
-    }
-
-    @action
-    changeWidthClick = (e: React.PointerEvent) => {
-        this._widthBt ? this._widthBt = false : this._widthBt = true;
-    }
-    @action
-    changeColorClick = (e: React.PointerEvent) => {
-        this._colorBt ? this._colorBt = false : this._colorBt = true;
-    }
-
-    allFalse = () => {
-        this._circle = false;
-        this._triangle = false;
-        this._rectangle = false;
-        this._arrow = false;
-        this._line = false;
-        this._circleBt = false;
-        this._triangleBt = false;
-        this._rectangleBt = false;
-        this._arrowBt = false;
-        this._lineBt = false;
-        this._bezierBt = false;
+    changeBezier = (e: React.PointerEvent): void => {
+        InkingControl.Instance.switchBezier(!InkingStroke.InkBezierApprox ? "300" : "");
     }
 
     render() {
-        var widthPicker;
-        if (this._widthBt) {
+        var widthPicker = <button
+            className="antimodeMenu-button"
+            key="width"
+            onPointerDown={action(e => this._widthBtn = !this._widthBtn)}
+            style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
+            W
+        </button>;
+        if (this._widthBtn) {
             widthPicker = <div className="btn2-group">
-                <button
-                    className="antimodeMenu-button"
-                    key="width"
-                    onPointerDown={this.changeWidthClick}
-                    style={this._widthBt ? { backgroundColor: "121212" } : {}}>
-                    W
-                </button>
+                {widthPicker}
                 {this._width.map(wid => {
                     return <button
                         className="antimodeMenu-button"
                         key={wid}
-                        onPointerDown={() => this.changeWidth(wid)}
-                        style={this._colorBt ? { backgroundColor: "121212" } : {}}>
+                        onPointerDown={action(() => { InkingControl.Instance.switchWidth(wid); this._widthBtn = false; })}
+                        style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
                         {wid}
                     </button>;
-
                 })}
             </div>;
-        } else {
-            widthPicker = <button
-                className="antimodeMenu-button"
-                key="width"
-                onPointerDown={this.changeWidthClick}
-                style={this._widthBt ? { backgroundColor: "121212" } : {}}>
-                W
-        </button>;
         }
 
-        var colorPicker;
-        if (this._colorBt) {
+        var colorPicker = <button
+            className="antimodeMenu-button"
+            key="color"
+            title="colorChanger"
+            onPointerDown={action(e => this._colorBtn = !this._colorBtn)}
+            style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
+            <div className="color-preview" style={{ backgroundColor: InkingStroke.InkColor ?? "121212" }}></div>
+        </button>;
+        if (this._colorBtn) {
             colorPicker = <div className="btn-group">
-                <button
-                    className="antimodeMenu-button"
-                    key="color"
-                    onPointerDown={this.changeColorClick}
-                    style={this._colorBt ? { backgroundColor: "121212" } : {}}>
-                    <div className="color-preview" style={this._color === "" ? { backgroundColor: "121212" } : { backgroundColor: this._color }}></div>
-                </button>
+                {colorPicker}
                 {this._palette.map(color => {
                     return <button
                         className="antimodeMenu-button"
                         key={color}
-                        onPointerDown={() => this.changeColor(color)}
-                        style={this._colorBt ? { backgroundColor: "121212" } : {}}>
+                        onPointerDown={action(() => { this.changeColor(color); this._colorBtn = false; })}
+                        style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
                         <div className="color-preview" style={{ backgroundColor: color }}></div>
                     </button>;
                 })}
             </div>;
-        } else {
-            colorPicker = <button
-                className="antimodeMenu-button"
-                title="colorChanger"
-                key="color"
-                onPointerDown={this.changeColorClick}
-                style={this._colorBt ? { backgroundColor: "121212" } : {}}>
-                <div className="color-preview" style={this._color === "" ? { backgroundColor: "121212" } : { backgroundColor: this._color }}></div>
-            </button>;
         }
 
-
         const buttons = [
-            <button
-                className="antimodeMenu-button"
+            <button className="antimodeMenu-button"
                 title="Drag"
                 key="drag"
-                onPointerDown={this.drag}>
+                onPointerDown={e => this.dragStart(e)}>
                 ✜
             </button>,
-            <button
-                className="antimodeMenu-button"
-                title="Draw Circle"
-                key="circle"
-                onPointerDown={this.toggleCircle}
-                style={this._circleBt ? { backgroundColor: "121212" } : {}}>
-                O
-            </button>,
-            <button
-                className="antimodeMenu-button"
-                title="Draw Traingle"
-                key="triangle"
-                onPointerDown={this.toggleTriangle}
-                style={this._triangleBt ? { backgroundColor: "121212" } : {}}>
-                ∆
-            </button>,
-            <button
-                className="antimodeMenu-button"
-                title="Draw Rectangle"
-                key="rectangle"
-                onPointerDown={this.toggleRectangle}
-                style={this._rectangleBt ? { backgroundColor: "121212" } : {}}>
-                ロ
-            </button>,
-            <button
-                className="antimodeMenu-button"
-                title="Draw Arrow"
-                key="arrow"
-                onPointerDown={this.toggleArrow}
-                style={this._arrowBt ? { backgroundColor: "121212" } : {}}>
-                ➜
-                </button>,
-            <button
-                className="antimodeMenu-button"
-                title="Draw Line"
-                key="line"
-                onPointerDown={this.toggleLine}
-                style={this._lineBt ? { backgroundColor: "121212" } : {}}>
-                –
-            </button>,
+            <>
+                {this._buttons.map((btn, i) => <button
+                    className="antimodeMenu-button"
+                    title={`Draw ${btn}`}
+                    key={btn}
+                    onPointerDown={action(e => InkingStroke.InkShape = btn)}
+                    style={btn === InkingStroke.InkShape ? { backgroundColor: "121212" } : {}}>
+                    {this._icons[i]}
+                </button>)},
+            </>,
             <button
                 className="antimodeMenu-button"
                 title="Bezier changer"
                 key="bezier"
-                onPointerDown={this.changeBezierClick}
-                style={this._bezierBt ? { backgroundColor: "121212" } : {}}>
+                onPointerDown={e => this.changeBezier(e)}
+                style={InkingStroke.InkBezierApprox ? { backgroundColor: "121212" } : {}}>
                 B
             </button>,
             widthPicker,
@@ -271,4 +119,15 @@ export default class InkOptionsMenu extends AntimodeMenu {
         ];
         return this.getElement(buttons);
     }
-}
\ No newline at end of file
+}
+Scripting.addGlobal(function activatePen(pen: any) {
+    InkingControl.Instance.switchTool(pen ? InkTool.Pen : InkTool.None);
+    if (pen) {
+        InkingControl.Instance.switchWidth(StrCast(pen.inkWidth, "1"));
+        InkingControl.Instance.switchColor(StrCast(pen.inkColor, "black"));
+        InkingControl.Instance.switchBezier(StrCast(pen.inkBezier, ""));
+        InkOptionsMenu.Instance.jumpTo(300, 300);
+    } else {
+        InkOptionsMenu.Instance.fadeOut(true);
+    }
+});
\ No newline at end of file