diff options
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 6 | ||||
| -rw-r--r-- | src/client/util/InteractionUtils.tsx | 21 | ||||
| -rw-r--r-- | src/client/util/SelectionManager.ts | 3 | ||||
| -rw-r--r-- | src/client/views/AntimodeMenu.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/InkingStroke.tsx | 18 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/FormatShapePane.tsx | 801 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx | 24 | ||||
| -rw-r--r-- | src/client/views/nodes/ColorBox.tsx | 1 |
9 files changed, 299 insertions, 581 deletions
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); |