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 =
{this._draw.map((icon, i) => {
return ;
})}
;
return drawButtons;
}
@computed get widthPicker() {
var widthPicker = ;
if (this._widthBtn) {
widthPicker =
{widthPicker}
{this._width.map((wid, i) => {
return ;
})}
;
}
return widthPicker;
}
@computed get colorPicker() {
var colorPicker = ;
if (this._colorBtn) {
colorPicker =
{colorPicker}
{this._palette.map(color => {
return
;
})}
{fillPicker}
{this._palette.map(color => {
return
;
})}