From 6b5c11a26e114f26f3907342f9afbd47b27cecf4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 11 Jul 2020 17:54:20 -0400 Subject: restructured ink to make more react-friendly --- src/client/util/CurrentUserUtils.ts | 6 +- src/client/util/InteractionUtils.tsx | 21 +- src/client/util/SelectionManager.ts | 3 - src/client/views/AntimodeMenu.tsx | 1 - src/client/views/DocumentDecorations.tsx | 5 +- src/client/views/InkingStroke.tsx | 18 +- .../collectionFreeForm/FormatShapePane.tsx | 801 +++++++-------------- .../collectionFreeForm/InkOptionsMenu.tsx | 24 +- src/client/views/nodes/ColorBox.tsx | 1 - 9 files changed, 299 insertions(+), 581 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index d0ca0e57e..0b644fa79 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -760,9 +760,9 @@ export class CurrentUserUtils { doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)"); doc.activeInkWidth = StrCast(doc.activeInkWidth, "1"); doc.activeInkBezier = StrCast(doc.activeInkBezier, "0"); - doc.activeFillColor = StrCast(doc.activeFillColor, "none"); - doc.activeArrowStart = StrCast(doc.activeArrowStart, "none"); - doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none"); + doc.activeFillColor = StrCast(doc.activeFillColor, ""); + doc.activeArrowStart = StrCast(doc.activeArrowStart, ""); + doc.activeArrowEnd = StrCast(doc.activeArrowEnd, ""); doc.activeDash = StrCast(doc.activeDash, "0"); doc.fontSize = NumCast(doc.fontSize, 12); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 2883e2056..6ab7bcc87 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -3,7 +3,6 @@ import * as beziercurve from 'bezier-curve'; import * as fitCurve from 'fit-curve'; import "./InteractionUtils.scss"; import { Utils } from "../../Utils"; -import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu"; export namespace InteractionUtils { export const MOUSETYPE = "mouse"; @@ -96,12 +95,6 @@ export namespace InteractionUtils { color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string, dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) { - // if (InkOptionsMenu.Instance.Pinned) { - // for (var i = 0; i < points.length; i++) { - // points[i].Y -= 35; - // } - // } - let pts: { X: number; Y: number; }[] = []; if (shape) { //if any of the shape are true pts = makePolygon(shape, points); @@ -127,15 +120,15 @@ export namespace InteractionUtils { const dashArray = String(Number(width) * Number(dash)); const defGuid = Utils.GenerateGuid(); const arrowDim = Math.max(0.5, 8 / Math.log(Math.max(2, strokeWidth))); - return ( {/* setting the svg fill sets the arrowhead fill */} + return ( {/* setting the svg fill sets the arrowStart fill */} {nodefs ? (null) : {arrowStart !== "dot" && arrowEnd !== "dot" ? (null) : } - {arrowStart !== "arrowHead" && arrowEnd !== "arrowHead" ? (null) : + {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) : } - {arrowStart !== "arrowEnd" && arrowEnd !== "arrowEnd" ? (null) : + {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) : } } @@ -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})`} /> ); @@ -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); // // 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 { FormatShapePane.Instance.Pinned = true; - FormatShapePane.Instance.selected(); - } render() { @@ -62,14 +60,14 @@ export class InkingStroke extends ViewBoxBaseComponent 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 ( 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) || ""; + } + 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) || ""; + } + @computed get _arrowEnd() { + return this.inks?.reduce((p, i) => + (p === undefined || (p && p === i.rootDoc.arrowEnd)) ? StrCast(i.rootDoc.arrowEnd) : "", undefined as Opt) || "" + } + 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) || "" + } + @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) || "" + } + @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) || "" + } + @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) || "" + } + @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) || "" + } + @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) || "" + } + 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 =
- { this.toggle("noFill"); this.editProperties("none", "fill"); })} /> + this._noFill = true)} /> No Fill -

- { this.toggle("solidFill"); this.editProperties(this._currFill, "fill"); })} /> +
+ this._solidFill = true)} /> Solid Fill -

-

+
+
{this._solidFill ? "Color" : ""} {this._solidFill ? this.fillButton : ""} {this._fillBtn && this._solidFill ? this.fillPicker : ""}
; - const arrows = <> { this.toggle("arrowHead"); this.editProperties(this._arrowHead ? "arrowHead" : "none", "arrowStart"); })} /> + const arrows = <> this._arrowStart = this._arrowStart ? "" : "arrow")} /> Arrow Head -

+
- { this.toggle("arrowEnd"); this.editProperties(this._arrowEnd ? "arrowEnd" : "none", "arrowEnd"); })} /> + this._arrowEnd = this._arrowEnd ? "" : "arrow")} /> Arrow End -

; +
; const lineCheck =
- { this.toggle("noLine"); this.editProperties("none", "color"); })} /> + this._noLine = true)} /> No Line -

- { this.toggle("solidLine"); this.editProperties(this._currColor, "color"); this.editProperties("0", "dash"); })} /> +
+ this._solidLine = true)} /> Solid Line -

- { this.toggle("dashLine"); this.editProperties(this._currColor, "color"); this.editProperties("2", "dash"); })} /> +
+ this._dashLine = "2")} /> Dash Line -

-

+
+
{(this._solidLine || this._dashLine) ? "Color" : ""} {(this._solidLine || this._dashLine) ? this.lineButton : ""} {this._lineBtn && (this._solidLine || this._dashLine) ? this.linePicker : ""} -

+
{(this._solidLine || this._dashLine) ? "Width" : ""} {(this._solidLine || this._dashLine) ? this.widthInput : ""} -

-

+
+
{(this._solidLine || this._dashLine) ? arrows : ""}
; const sizeCheck =
Height {this.sizeHeightInput} -

-

+
+
Width {this.sizeWidthInput} -

-

+
+
- { this.toggle("lock"); })} /> + this._lock = !this._lock)} /> Lock Ratio -

-

+
+
Rotation {this.rotationInput} -

-

+
+
; const positionCheck =
Horizontal {this.positionHorizontalInput} -

-

+
+
Vertical {this.positionVerticalInput} -

-

+
+
; @@ -574,29 +395,30 @@ export default class FormatShapePane extends AntimodeMenu { } @computed get fillButton() { - const fillButton = <> + return <> +

-

; - return fillButton; +

+ ; } @computed get fillPicker() { - const fillPicker =
+ return
{this._palette.map(color => { return
; - return fillPicker; } @computed get lineButton() { - const lineButton = <> -

-

; - return lineButton; + return <> + +
+
+ ; } @computed get linePicker() { - const linePicker =
+ return
{this._palette.map(color => { return
; - return linePicker; } @computed get widthInput() { const widthInput = <> this.onChange(e.target.value, "width")} - autoFocus>
@@ -672,8 +494,8 @@ export default class FormatShapePane extends AntimodeMenu { this.onChange(e.target.value, "sizeHeight")} - autoFocus> + onChange={e => this._currSizeHeight = e.target.value} + autoFocus /> -

+
-

+
+

+ -

- ; - return positionHorizontalInput; + ; } @computed get positionVerticalInput() { - const positionVerticalInput = - <> + this.onChange(e.target.value, "positionVertical")} + onChange={e => this._currPositionVertical = e.target.value} autoFocus> - -

- ; - 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 = ; - if (this._widthBtn) { - widthPicker =
- {widthPicker} - {this._width.map(wid => { - return ; - })} -
; - } - return widthPicker; +

+ + ; } - - render() { const buttons = [ diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index e4f3248d0..0866db2be 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -25,19 +25,19 @@ library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSup export default class InkOptionsMenu extends AntimodeMenu { static Instance: InkOptionsMenu; - private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", "none"]; + private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""]; private _width = ["1", "5", "10", "100"]; // private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"]; // private _icons = ["O", "∆", "ロ", "➜", "-"]; // private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",]; // private _icons = ["O", "∆", "ロ", "⎯⎯⎯", "✖︎", " "]; //arrowStart and arrowEnd must match and defs must exist in Inking Stroke - // private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"]; + // private _arrowStart = ["arrowStart", "arrowStart", "dot", "dot", "none"]; // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"]; // private _arrowIcons = ["→", "↔︎", "•", "••", " "]; private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; - private _head = ["none", "none", "arrowHead", "none", "none", "arrowHead", "none", "none", "none"]; - private _end = ["none", "arrowEnd", "arrowEnd", "none", "arrowEnd", "arrowEnd", "none", "none", "none"]; + private _head = ["", "", "arrow", "", "", "arrow", "", "", ""]; + private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""]; private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"]; @observable _shapesNum = this._shape.length; @@ -122,12 +122,6 @@ export default class InkOptionsMenu extends AntimodeMenu { case "bezier": // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300; break; - case "arrowStart": - doc.arrowStart = String(value); - break; - case "arrowEnd": - doc.arrowEnd = String(value); - break; case "dash": doc.dash = Number(value); default: @@ -165,13 +159,12 @@ export default class InkOptionsMenu extends AntimodeMenu { SetActiveArrowEnd(this._end[i]); SetActiveBezierApprox("300"); - // this.editProperties(this._head[i], "arrowStart"), this.editProperties(this._end[i], "arrowEnd"); GestureOverlay.Instance.InkShape = this._shape[i]; } else { this._selected = this._shapesNum; Doc.SetSelectedTool(InkTool.None); - SetActiveArrowStart("none"); - SetActiveArrowEnd("none"); + SetActiveArrowStart(""); + SetActiveArrowEnd(""); GestureOverlay.Instance.InkShape = ""; SetActiveBezierApprox("0"); @@ -189,13 +182,12 @@ export default class InkOptionsMenu extends AntimodeMenu { SetActiveArrowEnd(this._end[i]); SetActiveBezierApprox("300"); - // this.editProperties(this._head[i], "arrowStart"), this.editProperties(this._end[i], "arrowEnd"); GestureOverlay.Instance.InkShape = this._shape[i]; } else { this._selected = this._shapesNum; Doc.SetSelectedTool(InkTool.None); - SetActiveArrowStart("none"); - SetActiveArrowEnd("none"); + SetActiveArrowStart(""); + SetActiveArrowEnd(""); GestureOverlay.Instance.InkShape = ""; SetActiveBezierApprox("0"); diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 137b387c0..31c5a8b13 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -14,7 +14,6 @@ import { ViewBoxBaseComponent } from "../DocComponent"; import { ActiveInkPen, ActiveInkWidth, ActiveInkBezierApprox, SetActiveInkColor, SetActiveInkWidth, SetActiveBezierApprox } from "../InkingStroke"; import "./ColorBox.scss"; import { FieldView, FieldViewProps } from './FieldView'; -import { FormattedTextBox } from "./formattedText/FormattedTextBox"; type ColorDocument = makeInterface<[typeof documentSchema]>; const ColorDocument = makeInterface(documentSchema); -- cgit v1.2.3-70-g09d2