removed InkOptionsMenu

4 files changed, 1 insertions, 370 deletions

diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 3a7fd7626..04a750f93 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -171,17 +171,6 @@ export namespace InteractionUtils {
         </svg>);
     }
 
-    // export function makeArrow() {
-    //     return (
-    //         InkOptionsMenu.Instance.getColors().map(color => {
-    //             const id1 = "arrowStartTest" + 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} />
-    //             </marker>;
-    //         })
-    //     );
-    // }
-
     export function makePolygon(shape: string, points: { X: number, Y: number }[]) {
         if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) {
             //pointer is up (first and last points are the same)
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index c5e0a3303..c0a35a32a 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -21,10 +21,8 @@ import e = require('express');
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { SnappingManager } from '../util/SnappingManager';
 import { HtmlField } from '../../fields/HtmlField';
-import { InkData, InkField, InkTool } from "../../fields/InkField";
+import { InkField } from "../../fields/InkField";
 import { Tooltip } from '@material-ui/core';
-import InkOptionsMenu from './collections/collectionFreeForm/InkOptionsMenu';
-import FormatShapePane from './collections/collectionFreeForm/FormatShapePane';
 
 library.add(faCaretUp);
 library.add(faObjectGroup);
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 53bc01b3d..5bc1b902e 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -22,7 +22,6 @@ import { RadialMenu } from "./nodes/RadialMenu";
 import HorizontalPalette from "./Palette";
 import { Touchable } from "./Touchable";
 import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
-import InkOptionsMenu from "./collections/collectionFreeForm/InkOptionsMenu";
 import * as fitCurve from 'fit-curve';
 import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu";
 
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
deleted file mode 100644
index 80d1264ce..000000000
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ /dev/null
@@ -1,355 +0,0 @@
-import React = require("react");
-import AntimodeMenu from "../../AntimodeMenu";
-import { observer } from "mobx-react";
-import { observable, action, computed } from "mobx";
-import "./InkOptionsMenu.scss";
-import { ActiveInkColor, ActiveInkBezierApprox, ActiveFillColor, ActiveArrowStart, ActiveArrowEnd, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "../../InkingStroke";
-import { Scripting } from "../../../util/Scripting";
-import { InkTool } 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 { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, faArrowRight, faArrowsAltH, faMinus, faCircle, faExclamationTriangle, faSquare, faLongArrowAltRight, faPenFancy, faCaretSquareRight, faAngleDoubleRight, } 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, faLongArrowAltRight, faArrowsAltH, faMinus, faCircle, faSquare, faSquare, faPenFancy, faAngleDoubleRight,);
-
-
-
-@observer
-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", ""];
-    private _width = ["1", "5", "10", "100"];
-    private _dotsize = [10, 20, 30, 40];
-    private _draw = ["∿", "⎯", "→", "↔︎", "ロ", "O"];
-    private _head = ["", "", "", "arrow", "", ""];
-    private _end = ["", "", "arrow", "arrow", "", ""];
-    private _shape = ["", "line", "line", "line", "rectangle", "circle"];
-    private _title = ["pen", "line", "line with arrow", "line with double arrows", "square", "circle",];
-    private _faName = ["pen-fancy", "minus", "long-arrow-alt-right", "arrows-alt-h", "square", "circle"];
-
-    @observable _shapesNum = this._shape.length;
-    @observable _selected = this._shapesNum;
-
-    @observable private collapsed: boolean = false;
-    @observable _double = "";
-
-    @observable _colorBtn = false;
-    @observable _widthBtn = false;
-    @observable _fillBtn = 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()["menuInkOptions-pinned"]);
-
-    }
-
-    @action
-    toggleMenuPin = (e: React.MouseEvent) => {
-        Doc.UserDoc()["menuInkOptions-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 - 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 = {
-            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: "",
-        };
-        if (type === "color") {
-            SetActiveInkColor(Utils.colorString(col));
-        } else if (type === "fill") {
-            SetActiveFillColor(Utils.colorString(col));
-        }
-    }
-
-    @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":
-                        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 "dash":
-                        doc.strokeDash = Number(value);
-                    default:
-                        break;
-                }
-            }
-        }));
-    }
-
-
-    @action
-    changeBezier = (e: React.PointerEvent): void => {
-        SetActiveBezierApprox(!ActiveInkBezierApprox() ? "300" : "");
-        this.editProperties(0, "bezier");
-    }
-    @action
-    changeDash = (e: React.PointerEvent): void => {
-        SetActiveDash(ActiveDash() === "0" ? "2" : "0");
-        this.editProperties(ActiveDash(), "strokeDash");
-    }
-
-    @computed get drawButtons() {
-        const drawButtons = <div className="btn-draw" key="draw">
-            {this._draw.map((icon, i) => {
-                return <button
-                    className="antimodeMenu-button"
-                    key={icon}
-                    title={this._title[i]}
-                    onPointerDown={action(() => {
-                        this._double = "";
-
-                        if (this._selected !== i) {
-                            this._selected = i;
-                            Doc.SetSelectedTool(InkTool.Pen);
-                            SetActiveArrowStart(this._head[i]);
-                            SetActiveArrowEnd(this._end[i]);
-                            SetActiveBezierApprox("300");
-
-                            GestureOverlay.Instance.InkShape = this._shape[i];
-                        } else {
-                            this._selected = this._shapesNum;
-                            Doc.SetSelectedTool(InkTool.None);
-                            SetActiveArrowStart("");
-                            SetActiveArrowEnd("");
-                            GestureOverlay.Instance.InkShape = "";
-                            SetActiveBezierApprox("0");
-
-                        }
-                        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");
-
-                            GestureOverlay.Instance.InkShape = this._shape[i];
-                        } else {
-                            this._selected = this._shapesNum;
-                            Doc.SetSelectedTool(InkTool.None);
-                            SetActiveArrowStart("");
-                            SetActiveArrowEnd("");
-                            GestureOverlay.Instance.InkShape = "";
-                            SetActiveBezierApprox("0");
-
-                        }
-
-
-
-                    })}
-                    style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
-                    <FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" />
-
-                </button>;
-            })}</div>;
-        return drawButtons;
-    }
-
-
-    @computed get widthPicker() {
-        var widthPicker = <button
-            className="antimodeMenu-button"
-            key="width"
-            title="change 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, i) => {
-                    return <button
-                        className="antimodeMenu-button"
-                        key={wid}
-                        onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
-                        style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: "center" }}>
-                        •
-                    </button>;
-                })}
-            </div>;
-        }
-        return widthPicker;
-    }
-
-
-
-    @computed get colorPicker() {
-        var colorPicker = <button
-            className="antimodeMenu-button"
-            key="color"
-            title="Change Ink Color"
-            onPointerDown={action(e => this._colorBtn = !this._colorBtn)}
-            style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
-            <FontAwesomeIcon icon="pen-nib" size="lg" />
-            <div className="color-previewI" style={{ backgroundColor: ActiveInkColor() ?? "121212" }}></div>
-
-        </button>;
-        if (this._colorBtn) {
-            colorPicker = <div className="btn-group" key="color">
-                {colorPicker}
-                {this._palette.map(color => {
-                    return <button
-                        className="antimodeMenu-button"
-                        key={color}
-                        onPointerDown={action(() => { this.changeColor(color, "color"); this._colorBtn = false; this.editProperties(color, "color"); })}
-                        style={{ backgroundColor: this._colorBtn ? "121212" : "", zIndex: 1001 }}>
-                        {/* <FontAwesomeIcon icon="pen-nib" size="lg" /> */}
-                        <div className="color-previewII" style={{ backgroundColor: color }}></div>
-                    </button>;
-                })}
-            </div>;
-        }
-        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="angle-double-right" size="lg" />
-        </button>;
-    }
-
-    @computed get fillPicker() {
-        var fillPicker = <button
-            className="antimodeMenu-button"
-            key="fill"
-            title="Change Fill Color"
-            onPointerDown={action(e => this._fillBtn = !this._fillBtn)}
-            style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
-            <FontAwesomeIcon icon="fill-drip" size="lg" />
-            <div className="color-previewI" style={{ backgroundColor: ActiveFillColor() ?? "121212" }}></div>
-        </button>;
-        if (this._fillBtn) {
-            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" : "", zIndex: 1001 }}>
-                        <div className="color-previewII" style={{ backgroundColor: color }}></div>
-                    </button>;
-                })}
-
-            </div>;
-        }
-        return fillPicker;
-    }
-
-
-    @computed get bezierButton() {
-        return <button
-            className="antimodeMenu-button"
-            title="Bezier changer"
-            key="bezier"
-            onPointerDown={e => this.changeBezier(e)}
-            style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}>
-            <FontAwesomeIcon icon="bezier-curve" size="lg" />
-
-        </button>;
-    }
-
-    @computed get dashButton() {
-        return <button
-            className="antimodeMenu-button"
-            title="dash changer"
-            key="dash"
-            onPointerDown={e => this.changeDash(e)}
-            style={{ backgroundColor: ActiveDash() !== "0" ? "121212" : "" }}>
-            <FontAwesomeIcon icon="ellipsis-h" size="lg" />
-
-        </button>;
-    }
-
-    render() {
-        const buttons = [
-
-            this.drawButtons,
-            this.widthPicker,
-            this.colorPicker,
-            this.fillPicker,
-
-
-            this.formatPane,
-
-            <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) {
-        InkOptionsMenu.Instance.jumpTo(300, 300);
-        InkOptionsMenu.Instance.Pinned = true;
-    } else {
-        InkOptionsMenu.Instance.Pinned = false;
-        InkOptionsMenu.Instance.fadeOut(true);
-    }
-});