From 065a29e87c771b5cd9301b0468fb036e070cad17 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Fri, 10 Jul 2020 05:08:53 +0900 Subject: added format shape --- .../collectionFreeForm/FormatShapePane.tsx | 996 +++++++++++++++++++++ 1 file changed, 996 insertions(+) create mode 100644 src/client/views/collections/collectionFreeForm/FormatShapePane.tsx (limited to 'src/client/views/collections/collectionFreeForm/FormatShapePane.tsx') diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx new file mode 100644 index 000000000..7b47b7ca4 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -0,0 +1,996 @@ +import React = require("react"); +import AntimodeMenu from "../../AntimodeMenu"; +import { observer } from "mobx-react"; +import { observable, action, computed } from "mobx"; +import "./FormatShapePane.scss"; +import { ActiveInkColor, ActiveInkBezierApprox, ActiveFillColor, ActiveArrowStart, ActiveArrowEnd, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "../../InkingStroke"; +import { Scripting } from "../../../util/Scripting"; +import { InkTool, InkField } 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 { faRulerCombined, faFillDrip, faPenNib } from "@fortawesome/free-solid-svg-icons"; +import { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types"; +import e = require("express"); +import { ChangeEvent } from "mongodb"; +import { black } from "colors"; + + +library.add(faRulerCombined, faFillDrip, faPenNib); + +@observer +export default class FormatShapePane extends AntimodeMenu { + static Instance: FormatShapePane; + + private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]; + private _width = ["1", "5", "10", "100"]; + private _mode = ["fill-drip", "ruler-combined"]; + private _subMenu = ["fill", "line", "size", "position"]; + private _headIcon = ["⎯", "←"]; + private _endIcon = ["⎯", "→"]; + private _head = ["none", "arrowHead"]; + private _end = ["none", "arrowEnd"]; + + @observable private _subOpen = [false, false, false, false]; + + @observable private collapsed: boolean = false; + @observable private currMode: string = "fill-drip"; + @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 _currWidth = "10"; + + @observable _single = false; + @observable _currFill = "#D0021B"; + @observable _currColor = "#D0021B"; + + @observable _arrowHead = false; + @observable _arrowEnd = false; + + + @observable _currSizeHeight = "10"; + @observable _currSizeWidth = "10"; + @observable _currRotation = "10"; + + @observable _currPositionHorizontal = "10"; + @observable _currPositionVertical = "10"; + + + constructor(props: Readonly<{}>) { + super(props); + FormatShapePane.Instance = this; + this._canFade = false; // don't let the inking menu fade away + this.Pinned = BoolCast(Doc.UserDoc()["formatShapePane-pinned"]); + + } + + @action + toggleMenuPin = (e: React.MouseEvent) => { + Doc.UserDoc()["formatShapePane-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 - FormatShapePane.Instance.width); + FormatShapePane.Instance.jumpTo(x, this._top, true); + }, 0); + } + + @action + closePane = () => { + this.jumpTo(-300, -300); + this.Pinned = false; + + } + + @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]); + } + } + const firstWidth = Document(inks[0].rootDoc).strokeWidth; + const firstColor = Document(inks[0].rootDoc).color; + const firstFill = Document(inks[0].rootDoc).fillColor; + // const firstBezier + const firstRotation = Document(inks[0].rootDoc).rotation; + const firstArrowStart = Document(inks[0].rootDoc).arrowStart; + const firstArrowEnd = Document(inks[0].rootDoc).arrowEnd; + const firstDash = Document(inks[0].rootDoc).dash; + const firstWidthSize = Document(inks[0].rootDoc)._width; + const firstHeightSize = Document(inks[0].rootDoc)._height; + const firstHorizontal = Document(inks[0].rootDoc).x; + const firstVertical = Document(inks[0].rootDoc).y; + 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._solidLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash === 0 ? true : false; + // this._dashLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash !== 0 ? true : false; + // // this._widthBtn = false; + this._currWidth = String(Document(inks[0].rootDoc).strokeWidth); + // this._single = false; + 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 !== firstWidth) { + this._currWidth = ""; + } + if (Document(inks[i].rootDoc).color !== firstColor) { + this._noLine = false; + this._solidLine = false; + this._dashLine = false; + } + if (Document(inks[i].rootDoc).fillColor !== firstFill) { + this._solidFill = false; + this._noFill = false; + } + if (Document(inks[i].rootDoc).arrowStart !== firstArrowStart) { + this._arrowHead = false; + } + if (Document(inks[i].rootDoc).arrowEnd !== firstArrowEnd) { + this._arrowEnd = false; + } + if (Document(inks[i].rootDoc).x !== firstHorizontal) { + this._currPositionHorizontal = ""; + } + if (Document(inks[i].rootDoc).y !== firstVertical) { + this._currPositionVertical = ""; + } + if (Document(inks[i].rootDoc)._width !== firstWidthSize) { + this._currSizeWidth = ""; + } + if (Document(inks[i].rootDoc)._height !== firstHeightSize) { + this._currSizeHeight = ""; + } + if (Document(inks[i].rootDoc).rotation !== firstRotation) { + 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)); + + } + 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": + // 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 = 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 "horizontal": + doc.x = Number(value); + break; + case "vertical": + doc.y = Number(value); + + break; + default: + break; + } + } + this.selected(); + })); + this.checkSame(); + + } + + @computed get close() { + const close = ; + return close; + } + + @computed get modes() { + const modes =
+ {this._mode.map(mode => { + return ; + }) + }
; + return modes; + } + + @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) { + console.log(doc.fillColor); + 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 { + console.log(doc.strokeWidth); + 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); + console.log(doc.rotation); + 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) => { + 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) * 180 / Math.PI)); + // console.log(doc.rotation); + const angle = Number(degrees) - Number(doc.rotation); + doc.rotation = Number(degrees); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + const xs = ink.map(p => p.X); + const ys = ink.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + const right = Math.max(...xs); + const bottom = Math.max(...ys); + const _centerPoints: { X: number, Y: number }[] = []; + _centerPoints.push({ X: left, Y: top }); + + const newPoints: { X: number, Y: number }[] = []; + for (var i = 0; i < ink.length; i++) { + const newX = Math.cos(angle) * (ink[i].X - _centerPoints[0].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].X; + const newY = Math.sin(angle) * (ink[i].X - _centerPoints[0].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].Y; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + const xs2 = newPoints.map(p => p.X); + const ys2 = newPoints.map(p => p.Y); + const left2 = Math.min(...xs2); + const top2 = Math.min(...ys2); + const right2 = Math.max(...xs2); + const bottom2 = Math.max(...ys2); + + doc._height = (bottom2 - top2) * element.props.ScreenToLocalTransform().Scale; + doc._width = (right2 - left2) * element.props.ScreenToLocalTransform().Scale; + + } + } + })); + } + + @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"); })} /> + No Fill +

+ { this.toggle("solidFill"); this.editProperties(this._currFill, "fill"); })} /> + 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"); })} /> + Arrow Head +

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

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

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

+ { this.toggle("dashLine"); this.editProperties(this._currColor, "color"); this.editProperties("2", "dash"); })} /> + 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"); })} /> + Lock Ratio +

+

+ + + Rotation {this.rotationInput} +

+

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

+

+ + Vertical {this.positionVerticalInput} +

+

+ + +
; + + const subMenu =
+ {this._subMenu.map((subMenu, i) => { + if (subMenu === "fill" || subMenu === "line") { + return
+ {this.currMode === "fill-drip" && subMenu === "fill" && this._subOpen[0] ? fillCheck : ""} + {this.currMode === "fill-drip" && subMenu === "line" && this._subOpen[1] ? lineCheck : ""} + +
; + } + else if (subMenu === "size" || subMenu === "position") { + return
+ {this.currMode === "ruler-combined" && subMenu === "size" && this._subOpen[2] ? sizeCheck : ""} + {this.currMode === "ruler-combined" && subMenu === "position" && this._subOpen[3] ? positionCheck : ""} + +
+ ; + + } + }) + }
; + return subMenu; + } + + @computed get fillButton() { + const fillButton = <> +

+

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

+

; + return lineButton; + } + @computed get linePicker() { + const linePicker =
+ {this._palette.map(color => { + return ; + })} + +
; + return linePicker; + } + @computed get widthInput() { + const widthInput = <> + this.onChange(e.target.value, "width")} + autoFocus> +
+ ; + return widthInput; + } + @computed get sizeHeightInput() { + const sizeHeightInput = <> + this.onChange(e.target.value, "sizeHeight")} + autoFocus> + +
+ + ; + return sizeHeightInput; + } + + @computed get sizeWidthInput() { + const sizeWidthInput = <> + this.onChange(e.target.value, "sizeWidth")} + autoFocus> + +

+ ; + return sizeWidthInput; + } + + @computed get rotationInput() { + const rotationInput = + <> + this.onChange(e.target.value, "rotation")} + autoFocus> + +

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

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

+ ; + return positionVerticalInput; + } + + + @action + onChange = (val: string, property: string): void => { + if (!Number.isNaN(Number(val)) && Number(val) !== null && val !== " ") { + + // if (val === "") { + // val = "0"; + // } + 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; + } + } + } + + + + + // @action + // changeWidth = (event: React.ChangeEvent) => { + // console.log(event.target.value); + // this._currWidth = NumCast(event.target.value); + + // } + + @computed get upDown() { + const upDown =
+ +

+ +
; + return upDown; + } + + + @computed get widthPicker() { + var widthPicker = ; + if (this._widthBtn) { + widthPicker =
+ {widthPicker} + {this._width.map(wid => { + return ; + })} +
; + } + return widthPicker; + } + + + + render() { + const buttons = [ + + this.close, + this.modes, + this.subMenu + + ]; + + return this.getElementVert(buttons); + } +} +Scripting.addGlobal(function activatePen2(penBtn: any) { + if (penBtn) { + //no longer changes to inkmode + // Doc.SetSelectedTool(InkTool.Pen); + FormatShapePane.Instance.jumpTo(300, 300); + FormatShapePane.Instance.Pinned = true; + + } else { + // Doc.SetSelectedTool(InkTool.None); + FormatShapePane.Instance.Pinned = false; + FormatShapePane.Instance.fadeOut(true); + + } +}); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From c8454d675a3081a83c56cf598b1b3637479b0459 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Fri, 10 Jul 2020 05:22:06 +0900 Subject: added format shape --- src/client/util/SelectionManager.ts | 3 +- .../collectionFreeForm/FormatShapePane.tsx | 137 ++++----------------- 2 files changed, 24 insertions(+), 116 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/FormatShapePane.tsx') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index aea2c542b..af2f320d3 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -15,8 +15,7 @@ export namespace SelectionManager { SelectedDocuments: ObservableMap = new ObservableMap(); @action SelectDoc(docView: DocumentView, ctrlPressed: boolean): void { - console.log("select" - ); + // if doc is not in SelectedDocuments, add it if (!manager.SelectedDocuments.get(docView)) { if (!ctrlPressed) { diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 7b47b7ca4..37ba805b6 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -3,12 +3,9 @@ import AntimodeMenu from "../../AntimodeMenu"; import { observer } from "mobx-react"; import { observable, action, computed } from "mobx"; import "./FormatShapePane.scss"; -import { ActiveInkColor, ActiveInkBezierApprox, ActiveFillColor, ActiveArrowStart, ActiveArrowEnd, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "../../InkingStroke"; +import { SetActiveInkWidth } from "../../InkingStroke"; import { Scripting } from "../../../util/Scripting"; -import { InkTool, InkField } from "../../../../fields/InkField"; -import { ColorState } from "react-color"; -import { Utils } from "../../../../Utils"; -import GestureOverlay from "../../GestureOverlay"; +import { InkField } from "../../../../fields/InkField"; import { Doc } from "../../../../fields/Doc"; import { SelectionManager } from "../../../util/SelectionManager"; import { DocumentView } from "../../../views/nodes/DocumentView"; @@ -19,9 +16,6 @@ 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"); -import { ChangeEvent } from "mongodb"; -import { black } from "colors"; - library.add(faRulerCombined, faFillDrip, faPenNib); @@ -33,63 +27,42 @@ export default class FormatShapePane extends AntimodeMenu { private _width = ["1", "5", "10", "100"]; private _mode = ["fill-drip", "ruler-combined"]; private _subMenu = ["fill", "line", "size", "position"]; - private _headIcon = ["⎯", "←"]; - private _endIcon = ["⎯", "→"]; - private _head = ["none", "arrowHead"]; - private _end = ["none", "arrowEnd"]; - @observable private _subOpen = [false, false, false, false]; - @observable private collapsed: boolean = false; @observable private currMode: string = "fill-drip"; @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 _currWidth = "10"; - @observable _single = false; - @observable _currFill = "#D0021B"; - @observable _currColor = "#D0021B"; - @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"; constructor(props: Readonly<{}>) { super(props); FormatShapePane.Instance = this; - this._canFade = false; // don't let the inking menu fade away + this._canFade = false; this.Pinned = BoolCast(Doc.UserDoc()["formatShapePane-pinned"]); - } @action toggleMenuPin = (e: React.MouseEvent) => { Doc.UserDoc()["formatShapePane-pinned"] = this.Pinned = !this.Pinned; - if (!this.Pinned) { - // this.fadeOut(true); - } } @action @@ -105,9 +78,9 @@ export default class FormatShapePane extends AntimodeMenu { closePane = () => { this.jumpTo(-300, -300); this.Pinned = false; - } + //if multiple inks are selected and do not share the same prop, leave blank @action checkSame = () => { const docs = SelectionManager.SelectedDocuments(); @@ -117,18 +90,6 @@ export default class FormatShapePane extends AntimodeMenu { inks.push(docs[i]); } } - const firstWidth = Document(inks[0].rootDoc).strokeWidth; - const firstColor = Document(inks[0].rootDoc).color; - const firstFill = Document(inks[0].rootDoc).fillColor; - // const firstBezier - const firstRotation = Document(inks[0].rootDoc).rotation; - const firstArrowStart = Document(inks[0].rootDoc).arrowStart; - const firstArrowEnd = Document(inks[0].rootDoc).arrowEnd; - const firstDash = Document(inks[0].rootDoc).dash; - const firstWidthSize = Document(inks[0].rootDoc)._width; - const firstHeightSize = Document(inks[0].rootDoc)._height; - const firstHorizontal = Document(inks[0].rootDoc).x; - const firstVertical = Document(inks[0].rootDoc).y; 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; @@ -142,11 +103,7 @@ export default class FormatShapePane extends AntimodeMenu { } } - // this._solidLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash === 0 ? true : false; - // this._dashLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash !== 0 ? true : false; - // // this._widthBtn = false; this._currWidth = String(Document(inks[0].rootDoc).strokeWidth); - // this._single = false; 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; @@ -157,45 +114,43 @@ export default class FormatShapePane extends AntimodeMenu { 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 !== firstWidth) { + if (Document(inks[i].rootDoc).strokeWidth !== Document(inks[0].rootDoc).strokeWidth) { this._currWidth = ""; } - if (Document(inks[i].rootDoc).color !== firstColor) { + 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 !== firstFill) { + if (Document(inks[i].rootDoc).fillColor !== Document(inks[0].rootDoc).fillColor) { this._solidFill = false; this._noFill = false; } - if (Document(inks[i].rootDoc).arrowStart !== firstArrowStart) { + if (Document(inks[i].rootDoc).arrowStart !== Document(inks[0].rootDoc).arrowStart) { this._arrowHead = false; } - if (Document(inks[i].rootDoc).arrowEnd !== firstArrowEnd) { + if (Document(inks[i].rootDoc).arrowEnd !== Document(inks[0].rootDoc).arrowEnd) { this._arrowEnd = false; } - if (Document(inks[i].rootDoc).x !== firstHorizontal) { + if (Document(inks[i].rootDoc).x !== Document(inks[0].rootDoc).x) { this._currPositionHorizontal = ""; } - if (Document(inks[i].rootDoc).y !== firstVertical) { + if (Document(inks[i].rootDoc).y !== Document(inks[0].rootDoc).y) { this._currPositionVertical = ""; } - if (Document(inks[i].rootDoc)._width !== firstWidthSize) { + if (Document(inks[i].rootDoc)._width !== Document(inks[0].rootDoc)._width) { this._currSizeWidth = ""; } - if (Document(inks[i].rootDoc)._height !== firstHeightSize) { + if (Document(inks[i].rootDoc)._height !== Document(inks[0].rootDoc)._height) { this._currSizeHeight = ""; } - if (Document(inks[i].rootDoc).rotation !== firstRotation) { + 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) => { @@ -206,14 +161,12 @@ export default class FormatShapePane extends AntimodeMenu { if (doc.strokeWidth) { doc.strokeWidth = dirs === "up" ? doc.strokeWidth + 1 : doc.strokeWidth - 1; SetActiveInkWidth(String(doc.strokeWidth)); - } 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; @@ -240,19 +193,17 @@ export default class FormatShapePane extends AntimodeMenu { 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) => { @@ -270,7 +221,6 @@ export default class FormatShapePane extends AntimodeMenu { doc.fillColor = String(value); break; case "bezier": - // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300; break; case "arrowStart": doc.arrowStart = String(value); @@ -285,7 +235,6 @@ export default class FormatShapePane extends AntimodeMenu { 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; @@ -296,7 +245,6 @@ export default class FormatShapePane extends AntimodeMenu { 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; @@ -308,7 +256,6 @@ export default class FormatShapePane extends AntimodeMenu { break; case "vertical": doc.y = Number(value); - break; default: break; @@ -331,13 +278,14 @@ export default class FormatShapePane extends AntimodeMenu { return close; } + //select either coor&fill or size&position @computed get modes() { const modes =
{this._mode.map(mode => { return ; @@ -346,6 +294,7 @@ export default class FormatShapePane extends AntimodeMenu { return modes; } + //detects currently selected document and change value in pane @action selected = () => { this._selectDoc = SelectionManager.SelectedDocuments(); @@ -353,7 +302,6 @@ export default class FormatShapePane extends AntimodeMenu { this._single = true; const doc = Document(this._selectDoc[0].rootDoc); if (doc.type === DocumentType.INK) { - console.log(doc.fillColor); if (doc.fillColor === "none") { this._noFill = true; this._solidFill = false; @@ -382,11 +330,8 @@ export default class FormatShapePane extends AntimodeMenu { this._arrowHead = doc.arrowStart === "none" ? false : true; this._arrowEnd = doc.arrowEnd === "none" ? false : true; - - this._currPositionHorizontal = String(doc.x); this._currPositionVertical = String(doc.y); - console.log(doc.rotation); this._currRotation = String(doc.rotation); this._currSizeHeight = String(doc._height); this._currSizeWidth = String(doc._width); @@ -418,8 +363,6 @@ export default class FormatShapePane extends AntimodeMenu { SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { 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) * 180 / Math.PI)); - // console.log(doc.rotation); const angle = Number(degrees) - Number(doc.rotation); doc.rotation = Number(degrees); const ink = Cast(doc.data, InkField)?.inkData; @@ -446,10 +389,8 @@ export default class FormatShapePane extends AntimodeMenu { const top2 = Math.min(...ys2); const right2 = Math.max(...xs2); const bottom2 = Math.max(...ys2); - doc._height = (bottom2 - top2) * element.props.ScreenToLocalTransform().Scale; doc._width = (right2 - left2) * element.props.ScreenToLocalTransform().Scale; - } } })); @@ -854,14 +795,11 @@ export default class FormatShapePane extends AntimodeMenu { return positionVerticalInput; } - + //change inputs @action onChange = (val: string, property: string): void => { if (!Number.isNaN(Number(val)) && Number(val) !== null && val !== " ") { - // if (val === "") { - // val = "0"; - // } switch (property) { case "width": this._currWidth = val; @@ -912,35 +850,6 @@ export default class FormatShapePane extends AntimodeMenu { } - - - // @action - // changeWidth = (event: React.ChangeEvent) => { - // console.log(event.target.value); - // this._currWidth = NumCast(event.target.value); - - // } - - @computed get upDown() { - const upDown =
- -

- -
; - return upDown; - } - - @computed get widthPicker() { var widthPicker = + 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 From cef8f8d5fb9f5b9dc1f56768c4fa5ec406fbc6ba Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 11 Jul 2020 20:02:55 -0400 Subject: fixed layout of inkOptionsMenu --- src/client/views/collections/collectionFreeForm/FormatShapePane.scss | 2 +- src/client/views/collections/collectionFreeForm/FormatShapePane.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/FormatShapePane.tsx') diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss index 80a74fe4c..7720140b9 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss @@ -1,6 +1,6 @@ .antimodeMenu-button { width: 200px; - position: absolute; + position: relative; text-align: left; .color-previewI { diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 3a1c8b18d..095473330 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -136,7 +136,7 @@ export default class FormatShapePane extends AntimodeMenu { } @computed get close() { - return ; } @@ -320,7 +320,7 @@ export default class FormatShapePane extends AntimodeMenu { colorButton(value: string, setter: () => {}) { return <> - -- cgit v1.2.3-70-g09d2 From 49b6ab8536f570ef244199ac39194d3b176c9e77 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 11 Jul 2020 20:47:55 -0400 Subject: added open formatting pane to inkOptions. switched to radio buttons for some options. changed names of stroke parameters to start with 'stroke" --- src/client/views/InkingStroke.tsx | 4 ++-- .../collectionFreeForm/FormatShapePane.tsx | 25 +++++++++++----------- .../collectionFreeForm/InkOptionsMenu.tsx | 17 +++++++++++---- src/client/views/nodes/ColorBox.tsx | 11 ++++++++-- 4 files changed, 37 insertions(+), 20 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/FormatShapePane.tsx') diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 46f714875..d7f956e4f 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -63,8 +63,8 @@ export class InkingStroke extends ViewBoxBaseComponent 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"), diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 095473330..77d1b646d 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -43,10 +43,10 @@ export default class FormatShapePane extends AntimodeMenu { @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; } @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 || i.rootDoc.dash === "0") ? true : false, true) || false; } - @computed get _arrowStart() { return this.getField("arrowStart") || ""; } - @computed get _arrowEnd() { return this.getField("arrowEnd") || ""; } - @computed get _dashLine() { return !this._noLine && this.getField("dash") || ""; } + @computed get _solidLine() { return this.inks?.reduce((p, i) => p && i.rootDoc.color && (!i.rootDoc.strokeDash || i.rootDoc.strokeDash === "0") ? true : false, true) || false; } + @computed get _arrowStart() { return this.getField("strokeArrowStart") || ""; } + @computed get _arrowEnd() { return this.getField("strokeArrowEnd") || ""; } + @computed get _dashLine() { return !this._noLine && this.getField("strokeDash") || ""; } @computed get _currSizeHeight() { return this.getField("_height"); } @computed get _currSizeWidth() { return this.getField("_width"); } @computed get _currRotation() { return this.getField("rotation"); } @@ -59,13 +59,13 @@ export default class FormatShapePane extends AntimodeMenu { set _solidFill(value) { this._noFill = !value; } set _currFill(value) { value && (this._lastFill = value); this.inks?.forEach(i => i.rootDoc.fillColor = value ? value : undefined); } set _currColor(value) { value && (this._lastLine = value); this.inks?.forEach(i => i.rootDoc.color = value ? value : undefined); } - set _arrowStart(value) { this.inks?.forEach(i => i.rootDoc.arrowStart = value); } - set _arrowEnd(value) { this.inks?.forEach(i => i.rootDoc.arrowEnd = value); } + set _arrowStart(value) { this.inks?.forEach(i => i.rootDoc.strokeArrowStart = value); } + set _arrowEnd(value) { this.inks?.forEach(i => i.rootDoc.strokeArrowEnd = value); } 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); + this.inks?.forEach(i => i.rootDoc.strokeDash = value ? this._lastDash : undefined); } set _currXpos(value) { this.inks?.forEach(i => i.rootDoc.x = Number(value)); } set _currYpos(value) { this.inks?.forEach(i => i.rootDoc.y = Number(value)); } @@ -192,10 +192,10 @@ export default class FormatShapePane extends AntimodeMenu { @computed get subMenu() { const fillCheck =
- this._noFill = true)} /> + this._noFill = true)} /> No Fill
- this._solidFill = true)} /> + this._solidFill = true)} /> Solid Fill

@@ -214,13 +214,13 @@ export default class FormatShapePane extends AntimodeMenu { ; const lineCheck =
- this._noLine = true)} /> + this._noLine = true)} /> No Line
- this._solidLine = true)} /> + this._solidLine = true)} /> Solid Line
- this._dashLine = "2")} /> + this._dashLine = "2")} /> Dash Line

@@ -230,6 +230,7 @@ export default class FormatShapePane extends AntimodeMenu {
{(this._solidLine || this._dashLine) ? "Width" : ""} {(this._solidLine || this._dashLine) ? this.widthInput : ""} + {(this._solidLine || this._dashLine) ? this._currStrokeWidth = e.target.value} /> : (null)}

{(this._solidLine || this._dashLine) ? arrows : ""} diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index ddba8a66d..7f0bb5364 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -18,6 +18,7 @@ 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, } 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); @@ -40,7 +41,7 @@ export default class InkOptionsMenu extends AntimodeMenu { private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; private _head = ["", "", "arrow", "", "", "arrow", "", "", ""]; private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""]; - private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"]; + private _shape = ["line", "line", "line", "", "", "", "rectangle", "circle", "triangle"]; @observable _shapesNum = this._shape.length; @observable _selected = this._shapesNum; @@ -127,7 +128,7 @@ export default class InkOptionsMenu extends AntimodeMenu { // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300; break; case "dash": - doc.dash = Number(value); + doc.strokeDash = Number(value); default: break; } @@ -144,7 +145,7 @@ export default class InkOptionsMenu extends AntimodeMenu { @action changeDash = (e: React.PointerEvent): void => { SetActiveDash(ActiveDash() === "0" ? "2" : "0"); - this.editProperties(ActiveDash(), "dash"); + this.editProperties(ActiveDash(), "strokeDash"); } @computed get drawButtons() { @@ -296,6 +297,14 @@ export default class InkOptionsMenu extends AntimodeMenu { } return colorPicker; } + @computed get formatPane() { + return ; + } @computed get fillPicker() { var fillPicker = - ]; // return this.getElement(buttons); diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index c35c52644..57028b0ca 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -14,6 +14,7 @@ import { ViewBoxBaseComponent } from "../DocComponent"; import { ActiveInkPen, ActiveInkWidth, ActiveInkBezierApprox, SetActiveInkColor, SetActiveInkWidth, SetActiveBezierApprox } from "../InkingStroke"; import "./ColorBox.scss"; import { FieldView, FieldViewProps } from './FieldView'; +import { DocumentType } from "../../documents/DocumentTypes"; type ColorDocument = makeInterface<[typeof documentSchema]>; const ColorDocument = makeInterface(documentSchema); @@ -62,9 +63,15 @@ export class ColorBox extends ViewBoxBaseComponent
{ActiveInkWidth() ?? 2}
- ) => SetActiveInkWidth(e.target.value)} /> + ) => { + SetActiveInkWidth(e.target.value); + SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value)); + }} />
{ActiveInkBezierApprox() ?? 2}
- ) => SetActiveBezierApprox(e.target.value)} /> + ) => { + SetActiveBezierApprox(e.target.value); + SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value); + }} />

-- cgit v1.2.3-70-g09d2 From add9dfeec764b5a60a57344c79fd23a91c031a2d Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 12 Jul 2020 10:31:06 -0400 Subject: final cleanup of names and structure of FormatShapePane --- src/client/views/InkingStroke.tsx | 2 +- .../collectionFreeForm/FormatShapePane.scss | 5 + .../collectionFreeForm/FormatShapePane.tsx | 404 +++++++++------------ .../collectionFreeForm/InkOptionsMenu.tsx | 9 +- 4 files changed, 182 insertions(+), 238 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/FormatShapePane.tsx') diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index d7f956e4f..abc698e62 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -63,7 +63,7 @@ export class InkingStroke extends ViewBoxBaseComponent 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss index 7720140b9..88876471c 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss @@ -22,6 +22,11 @@ padding: 0; } +.formatShapePane-inputBtn { + width: inherit; + position: absolute; +} + .sketch-picker { background: #323232; diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 77d1b646d..56ba9e96a 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -1,18 +1,16 @@ import React = require("react"); -import AntimodeMenu from "../../AntimodeMenu"; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { observable, action, computed } from "mobx"; -import "./FormatShapePane.scss"; -import { Scripting } from "../../../util/Scripting"; -import { InkField } from "../../../../fields/InkField"; -import { Doc, Opt, Field } from "../../../../fields/Doc"; -import { SelectionManager } from "../../../util/SelectionManager"; -import { DocumentView } from "../../../views/nodes/DocumentView"; +import { Doc, Field, Opt } from "../../../../fields/Doc"; import { Document } from "../../../../fields/documentSchemas"; +import { InkField } from "../../../../fields/InkField"; +import { BoolCast, Cast, NumCast } from "../../../../fields/Types"; import { DocumentType } from "../../../documents/DocumentTypes"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types"; +import { SelectionManager } from "../../../util/SelectionManager"; +import AntimodeMenu from "../../AntimodeMenu"; +import "./FormatShapePane.scss"; @observer export default class FormatShapePane extends AntimodeMenu { @@ -23,63 +21,62 @@ export default class FormatShapePane extends AntimodeMenu { private _lastDash = "2"; private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]; private _mode = ["fill-drip", "ruler-combined"]; - private _subMenu = ["fill", "line", "size", "position"]; @observable private _subOpen = [false, false, false, false]; - @observable private _currMode: string = "fill-drip"; + @observable private _currMode = "fill-drip"; @observable private _lock = false; @observable private _fillBtn = false; @observable private _lineBtn = false; getField(key: string) { - return this.inks?.reduce((p, i) => + return this.selectedInk?.reduce((p, i) => (p === undefined || (p && p === i.rootDoc[key])) && i.rootDoc[key] !== "0" ? Field.toString(i.rootDoc[key] as Field) : "", undefined as Opt) } - @computed get inks() { + @computed get selectedInk() { const inks = SelectionManager.SelectedDocuments().filter(i => Document(i.rootDoc).type === DocumentType.INK); return inks.length ? inks : undefined; } - @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; } - @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.strokeDash || i.rootDoc.strokeDash === "0") ? true : false, true) || false; } - @computed get _arrowStart() { return this.getField("strokeArrowStart") || ""; } - @computed get _arrowEnd() { return this.getField("strokeArrowEnd") || ""; } - @computed get _dashLine() { return !this._noLine && this.getField("strokeDash") || ""; } - @computed get _currSizeHeight() { return this.getField("_height"); } - @computed get _currSizeWidth() { return this.getField("_width"); } - @computed get _currRotation() { return this.getField("rotation"); } - @computed get _currXpos() { return this.getField("x"); } - @computed get _currYpos() { return this.getField("y"); } - @computed get _currStrokeWidth() { return this.getField("strokeWidth"); } - @computed get _currFill() { const cfill = this.getField("fillColor") || ""; cfill && (this._lastFill = cfill); return cfill; } - @computed get _currColor() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; } - set _noFill(value) { this._currFill = value ? "" : this._lastFill; } - set _solidFill(value) { this._noFill = !value; } - set _currFill(value) { value && (this._lastFill = value); this.inks?.forEach(i => i.rootDoc.fillColor = value ? value : undefined); } - set _currColor(value) { value && (this._lastLine = value); this.inks?.forEach(i => i.rootDoc.color = value ? value : undefined); } - set _arrowStart(value) { this.inks?.forEach(i => i.rootDoc.strokeArrowStart = value); } - set _arrowEnd(value) { this.inks?.forEach(i => i.rootDoc.strokeArrowEnd = value); } - 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.strokeDash = value ? this._lastDash : undefined); + @computed get unFilled() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.fillColor ? true : false, true) || false; } + @computed get unStrokd() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.color ? true : false, true) || false; } + @computed get solidFil() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.fillColor ? true : false, true) || false; } + @computed get solidStk() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.color && (!i.rootDoc.strokeDash || i.rootDoc.strokeDash === "0") ? true : false, true) || false; } + @computed get dashdStk() { return !this.unStrokd && this.getField("strokeDash") || ""; } + @computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; } + @computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; } + @computed get widthStk() { return this.getField("strokeWidth") || "1"; } + @computed get markHead() { return this.getField("strokeStartMarker") || ""; } + @computed get markTail() { return this.getField("strokeEndMarker") || ""; } + @computed get shapeHgt() { return this.getField("_height"); } + @computed get shapeWid() { return this.getField("_width"); } + @computed get shapeXps() { return this.getField("x"); } + @computed get shapeYps() { return this.getField("y"); } + @computed get shapeRot() { return this.getField("rotation"); } + set unFilled(value) { this.colorFil = value ? "" : this._lastFill; } + set solidFil(value) { this.unFilled = !value; } + set colorFil(value) { value && (this._lastFill = value); this.selectedInk?.forEach(i => i.rootDoc.fillColor = value ? value : undefined); } + set colorStk(value) { value && (this._lastLine = value); this.selectedInk?.forEach(i => i.rootDoc.color = value ? value : undefined); } + set markHead(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeStartMarker = value); } + set markTail(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeEndMarker = value); } + set unStrokd(value) { this.colorStk = value ? "" : this._lastLine; } + set solidStk(value) { this.dashdStk = ""; this.unStrokd = !value; } + set dashdStk(value) { + value && (this._lastDash = value) && (this.unStrokd = false); + this.selectedInk?.forEach(i => i.rootDoc.strokeDash = value ? this._lastDash : undefined); } - set _currXpos(value) { this.inks?.forEach(i => i.rootDoc.x = Number(value)); } - set _currYpos(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?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + set shapeXps(value) { this.selectedInk?.forEach(i => i.rootDoc.x = Number(value)); } + set shapeYps(value) { this.selectedInk?.forEach(i => i.rootDoc.y = Number(value)); } + set shapeRot(value) { this.selectedInk?.forEach(i => i.rootDoc.rotation = Number(value)); } + set widthStk(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = Number(value)); } + set shapeWid(value) { + this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { const oldWidth = NumCast(i.rootDoc._width); i.rootDoc._width = Number(value); this._lock && (i.rootDoc._height = (i.rootDoc._width * NumCast(i.rootDoc._height)) / oldWidth); }); } - set _currSizeHeight(value) { - this.inks?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + set shapeHgt(value) { + this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { const oldHeight = NumCast(i.rootDoc._height); i.rootDoc._height = Number(value); this._lock && (i.rootDoc._width = (i.rootDoc._height * NumCast(i.rootDoc._width)) / oldHeight); @@ -90,72 +87,41 @@ export default class FormatShapePane extends AntimodeMenu { super(props); FormatShapePane.Instance = this; this._canFade = false; - this.Pinned = BoolCast(Doc.UserDoc()["formatShapePane-pinned"]); + this.Pinned = BoolCast(Doc.UserDoc()["menuFormatShape-pinned"]); } @action closePane = () => { - this.jumpTo(-300, -300); + this.fadeOut(false); this.Pinned = false; } @action upDownButtons = (dirs: string, field: string) => { 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; - } - } - }); + case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break; + case "Xps": this.selectedInk?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break; + case "Yps": this.selectedInk?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break; + case "stk": this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break; + case "wid": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + const oldWidth = NumCast(i.rootDoc._width); + i.rootDoc._width = oldWidth + (dirs === "up" ? 10 : - 10); + this._lock && (i.rootDoc._height = (i.rootDoc._width / oldWidth * NumCast(i.rootDoc._height))); + }); 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; - } - } - }); + case "hgt": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + const oldHeight = NumCast(i.rootDoc._height); + i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10); + this._lock && (i.rootDoc._width = (i.rootDoc._height / oldHeight * NumCast(i.rootDoc._width))); + }); break; } } - @computed get close() { - return ; - } - - //select either coor&fill or size&position - @computed get modes() { - return
- {this._mode.map(mode => - )} -
; - } - @action rotate = (degrees: number) => { - SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { - const doc = Document(element.rootDoc); + this.selectedInk?.forEach(action(inkView => { + const doc = Document(inkView.rootDoc); if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { const angle = Number(degrees) - Number(doc.rotation); doc.rotation = Number(degrees); @@ -183,117 +149,13 @@ export default class FormatShapePane extends AntimodeMenu { const top2 = Math.min(...ys2); const right2 = Math.max(...xs2); const bottom2 = Math.max(...ys2); - doc._height = (bottom2 - top2) * element.props.ScreenToLocalTransform().Scale; - doc._width = (right2 - left2) * element.props.ScreenToLocalTransform().Scale; + doc._height = (bottom2 - top2) * inkView.props.ScreenToLocalTransform().Scale; + doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; } } })); } - @computed get subMenu() { - const fillCheck =
- this._noFill = true)} /> - No Fill -
- this._solidFill = true)} /> - Solid Fill -
-
- {this._solidFill ? "Color" : ""} - {this._solidFill ? this.fillButton : ""} - {this._fillBtn && this._solidFill ? this.fillPicker : ""} -
; - - const arrows = <> - this._arrowStart = this._arrowStart ? "" : "arrow")} /> - Arrow Head -
- this._arrowEnd = this._arrowEnd ? "" : "arrow")} /> - Arrow End -
- ; - - const lineCheck =
- this._noLine = true)} /> - No Line -
- this._solidLine = true)} /> - Solid Line -
- 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) ? this._currStrokeWidth = e.target.value} /> : (null)} -
-
- {(this._solidLine || this._dashLine) ? arrows : ""} -
; - - const sizeCheck =
- Height {this.sizeHeightInput} -
-
- - Width {this.sizeWidthInput} -
-
- - this._lock = !this._lock)} /> - Lock Ratio -
-
- - Rotation {this.rotationInput} -
-
-
; - - const positionCheck =
- Horizontal {this.positionHorizontalInput} -
-
- - Vertical {this.positionVerticalInput} -
-
-
; - - return
- {this._subMenu.map((subMenu, i) => { - if (subMenu === "fill" || subMenu === "line") { - return
- - {this._currMode === "fill-drip" && subMenu === "fill" && this._subOpen[0] ? fillCheck : ""} - {this._currMode === "fill-drip" && subMenu === "line" && this._subOpen[1] ? lineCheck : ""} -
; - } - else if (subMenu === "size" || subMenu === "position") { - return
- - {this._currMode === "ruler-combined" && subMenu === "size" && this._subOpen[2] ? sizeCheck : ""} - {this._currMode === "ruler-combined" && subMenu === "position" && this._subOpen[3] ? positionCheck : ""} -
; - } - })} -
; - } colorPicker(setter: (color: string) => {}) { return
@@ -325,37 +187,119 @@ export default class FormatShapePane extends AntimodeMenu {
-

-

+

; } - @computed get fillButton() { return this.colorButton(this._currFill, () => this._fillBtn = !this._fillBtn); } - @computed get lineButton() { return this.colorButton(this._currColor, () => this._lineBtn = !this._lineBtn); } + @computed get fillButton() { return this.colorButton(this.colorFil, () => this._fillBtn = !this._fillBtn); } + @computed get lineButton() { return this.colorButton(this.colorStk, () => this._lineBtn = !this._lineBtn); } - @computed get fillPicker() { return this.colorPicker((color: string) => this._currFill = color); } - @computed get linePicker() { return this.colorPicker((color: string) => this._currColor = color); } + @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color); } + @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color); } - @computed get widthInput() { return this.inputBox("width", this._currStrokeWidth, (val: string) => this._currStrokeWidth = val); } - @computed get sizeHeightInput() { return this.inputBox("height", this._currSizeHeight, (val: string) => this._currSizeHeight = val); } - @computed get sizeWidthInput() { return this.inputBox("height", this._currSizeWidth, (val: string) => this._currSizeWidth = val); } - @computed get rotationInput() { return this.inputBox("rotation", this._currRotation, (val: string) => this._currRotation = val); } - @computed get positionHorizontalInput() { return this.inputBox("horizontal", this._currXpos, (val: string) => this._currXpos = val); } - @computed get positionVerticalInput() { return this.inputBox("vertical", this._currYpos, (val: string) => this._currYpos = val); } + @computed get stkInput() { return this.inputBox("stk", this.widthStk, (val: string) => this.widthStk = val); } + @computed get hgtInput() { return this.inputBox("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val); } + @computed get widInput() { return this.inputBox("wid", this.shapeWid, (val: string) => this.shapeWid = val); } + @computed get rotInput() { return this.inputBox("rot", this.shapeRot, (val: string) => this.shapeRot = val); } + @computed get XpsInput() { return this.inputBox("Xps", this.shapeXps, (val: string) => this.shapeXps = val); } + @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); } - render() { - return this.getElementVert([this.close, this.modes, this.subMenu]); + @computed get propertyGroupItems() { + const fillCheck =
+ this.unFilled = true)} /> + No Fill +
+ this.solidFil = true)} /> + Solid Fill +

+ {this.solidFil ? "Color" : ""} + {this.solidFil ? this.fillButton : ""} + {this._fillBtn && this.solidFil ? this.fillPicker : ""} +
; + + const markers = <> + this.markHead = this.markHead ? "" : "arrow")} /> + Arrow Head +
+ this.markTail = this.markTail ? "" : "arrow")} /> + Arrow End +
+ ; + + const lineCheck =
+ this.unStrokd = true)} /> + No Line +
+ this.solidStk = true)} /> + Solid Line +
+ this.dashdStk = "2")} /> + Dash Line +
+
+ {(this.solidStk || this.dashdStk) ? "Color" : ""} + {(this.solidStk || this.dashdStk) ? this.lineButton : ""} + {(this.solidStk || this.dashdStk) && this._lineBtn ? this.linePicker : ""} +
+ {(this.solidStk || this.dashdStk) ? "Width" : ""} + {(this.solidStk || this.dashdStk) ? this.stkInput : ""} + {(this.solidStk || this.dashdStk) ? this.widthStk = e.target.value} /> : (null)} +

+ {(this.solidStk || this.dashdStk) ? markers : ""} +
; + + const sizeCheck =
+ Height {this.hgtInput} +

+ Width {this.widInput} +

+ this._lock = !this._lock)} /> + Lock Ratio +

+ Rotation {this.rotInput} +

+
; + + const positionCheck =
+ Horizontal {this.XpsInput} +

+ Vertical {this.YpsInput} +

+
; + + const subMenus = this._currMode === "fill-drip" ? [`fill`, `line`] : [`size`, `position`]; + const menuItems = this._currMode === "fill-drip" ? [fillCheck, lineCheck] : [sizeCheck, positionCheck]; + const indexOffset = this._currMode === "fill-drip" ? 0 : 2; + return
+ {subMenus.map((subMenu, i) => +
+ + {menuItems[i]} +
)} +
; + } + + @computed get closeBtn() { + return ; + } + + @computed get propertyGroupBtn() { + return
+ {this._mode.map(mode => + )} +
; } -} -Scripting.addGlobal(function activatePen2(penBtn: any) { - if (penBtn) { - //no longer changes to inkmode - // Doc.SetSelectedTool(InkTool.Pen); - FormatShapePane.Instance.jumpTo(300, 300); - FormatShapePane.Instance.Pinned = true; - } else { - // Doc.SetSelectedTool(InkTool.None); - FormatShapePane.Instance.Pinned = false; - FormatShapePane.Instance.fadeOut(true); + + render() { + return this.getElementVert([this.closeBtn, this.propertyGroupBtn, this.propertyGroupItems]); } -}); \ No newline at end of file +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 7f0bb5364..15707ad9e 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -62,13 +62,13 @@ export default class InkOptionsMenu extends AntimodeMenu { super(props); InkOptionsMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away - this.Pinned = BoolCast(Doc.UserDoc()["inkOptionsMenu-pinned"]); + this.Pinned = BoolCast(Doc.UserDoc()["menuInkOptions-pinned"]); } @action toggleMenuPin = (e: React.MouseEvent) => { - Doc.UserDoc()["inkOptionsMenu-pinned"] = this.Pinned = !this.Pinned; + Doc.UserDoc()["menuInkOptions-pinned"] = this.Pinned = !this.Pinned; if (!this.Pinned) { // this.fadeOut(true); } @@ -426,15 +426,10 @@ export default class InkOptionsMenu extends AntimodeMenu { } Scripting.addGlobal(function activatePen(penBtn: any) { if (penBtn) { - //no longer changes to inkmode - // Doc.SetSelectedTool(InkTool.Pen); InkOptionsMenu.Instance.jumpTo(300, 300); InkOptionsMenu.Instance.Pinned = true; - } else { - // Doc.SetSelectedTool(InkTool.None); InkOptionsMenu.Instance.Pinned = false; InkOptionsMenu.Instance.fadeOut(true); - } }); -- cgit v1.2.3-70-g09d2 From 0e2a5196b47c05eab74d0aae06c2db4a9528f0fb Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 13 Jul 2020 20:44:03 -0400 Subject: switched context menus to be less hierarchical. --- src/client/util/CurrentUserUtils.ts | 2 - src/client/util/SettingsManager.scss | 2 +- src/client/util/SettingsManager.tsx | 14 ++++++- src/client/views/ContextMenuItem.tsx | 6 +++ .../views/collections/CollectionCarousel3DView.tsx | 13 +----- .../views/collections/CollectionCarouselView.tsx | 14 +------ .../views/collections/CollectionTreeView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 6 +-- .../collectionFreeForm/FormatShapePane.tsx | 26 ++++++------ .../collectionGrid/CollectionGridView.tsx | 5 +-- src/client/views/nodes/DocumentView.tsx | 38 ++++++++--------- src/client/views/nodes/ImageBox.tsx | 48 +++++++++++----------- src/client/views/nodes/LabelBox.tsx | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 48 +++++++++++----------- 14 files changed, 111 insertions(+), 115 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/FormatShapePane.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 39781a5ce..048ab9edc 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -423,8 +423,6 @@ export class CurrentUserUtils { // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc }, { title: "Drag a document previewer", label: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc }, { title: "Toggle a Calculator REPL", label: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' }, - { title: "Connect a Google Account", label: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, - { title: "Connect a Hypothesis Account", label: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, ]; } diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 13c65042c..6d394a38d 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -56,7 +56,7 @@ .settings-type { display: flex; flex-direction: column; - flex-basis: 30%; + flex-basis: 45%; } diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 9888cce48..f7ca3942b 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -11,6 +11,8 @@ import { Networking } from "../Network"; import { CurrentUserUtils } from "./CurrentUserUtils"; import { Utils } from "../../Utils"; import { Doc } from "../../fields/Doc"; +import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager"; +import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager"; library.add(fa.faWindowClose); @@ -83,6 +85,14 @@ export default class SettingsManager extends React.Component<{}> { noviceToggle = (event: any) => { Doc.UserDoc().noviceMode = !Doc.UserDoc().noviceMode; } + @action + googleAuthorize = (event: any) => { + GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true) + } + @action + hypothesisAuthorize = (event: any) => { + HypothesisAuthenticationManager.Instance.fetchAccessToken(true) + } private get settingsInterface() { return ( @@ -96,7 +106,9 @@ export default class SettingsManager extends React.Component<{}> {
- + + + diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 99840047f..68ebd8e14 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -19,6 +19,7 @@ export interface OriginalMenuProps { export interface SubmenuProps { description: string; subitems: ContextMenuProps[]; + noexpand?: boolean; icon: IconProp; //maybe should be optional (icon?) closeMenu?: () => void; } @@ -96,6 +97,11 @@ export class ContextMenuItem extends React.Component {this._items.map(prop => )}
; + if (!("noexpand" in this.props)) { + return <> + {this._items.map(prop => )} + ; + } return (
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 1344b70f4..8f1cd5311 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -108,17 +108,6 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume }, 1500); } - onContextMenu = (e: React.MouseEvent): void => { - // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout - if (!e.isPropagationStopped()) { - ContextMenu.Instance.addItem({ - description: "Make Hero Image", event: () => { - const index = NumCast(this.layoutDoc._itemIndex); - (this.dataDoc || Doc.GetProto(this.props.Document)).hero = ObjectField.MakeCopy(this.childLayoutPairs[index].layout.data as ObjectField); - }, icon: "plus" - }); - } - } _downX = 0; _downY = 0; onPointerDown = (e: React.PointerEvent) => { @@ -184,7 +173,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume const index = NumCast(this.layoutDoc._itemIndex); const translateX = (1 - index) / this.childLayoutPairs.length * 100; - return
+ return
{this.content}
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index bd0e4fc9a..b3fecfb91 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -83,18 +83,6 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) ; } - - onContextMenu = (e: React.MouseEvent): void => { - // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout - if (!e.isPropagationStopped()) { - ContextMenu.Instance?.addItem({ - description: "Make Hero Image", event: () => { - const index = NumCast(this.layoutDoc._itemIndex); - (this.dataDoc || Doc.GetProto(this.props.Document)).hero = ObjectField.MakeCopy(this.childLayoutPairs[index].layout.data as ObjectField); - }, icon: "plus" - }); - } - } _downX = 0; _downY = 0; onPointerDown = (e: React.PointerEvent) => { @@ -119,7 +107,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) } render() { - return
+ return
{this.content} {this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)}
; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 26c41f524..dbd39d8df 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -780,7 +780,7 @@ export class CollectionTreeView extends CollectionSubView UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.doc, undefined, "onCheckedClick"), "edit onCheckedClick"), icon: "edit" }); - !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); + !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "hand-point-right" }); } outerXf = () => Utils.GetScreenTransform(this._mainEle!); onTreeDrop = (e: React.DragEvent) => this.onExternalDrop(e, {}); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index df21d6a28..cbd1ac9af 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -272,7 +272,7 @@ export class CollectionView extends Touchable this._isLightboxOpen = true), icon: "eye" }); - !existingVm && ContextMenu.Instance.addItem({ description: category, subitems: subItems, icon: "eye" }); + !existingVm && ContextMenu.Instance.addItem({ description: category, noexpand: true, subitems: subItems, icon: "eye" }); } onContextMenu = (e: React.MouseEvent): void => { @@ -294,7 +294,7 @@ export class CollectionView extends Touchable this.props.addDocTab(this.props.Document.childClickedOpenTemplateView as Doc, "onRight"), icon: "project-diagram" }); } - layoutItems.push({ description: `${this.props.Document.isInPlaceContainer ? "Unset" : "Set"} inPlace Container`, event: () => this.props.Document.isInPlaceContainer = !this.props.Document.isInPlaceContainer, icon: "project-diagram" }); + !Doc.UserDoc().noviceMode && layoutItems.push({ description: `${this.props.Document.isInPlaceContainer ? "Unset" : "Set"} inPlace Container`, event: () => this.props.Document.isInPlaceContainer = !this.props.Document.isInPlaceContainer, icon: "project-diagram" }); !existing && cm.addItem({ description: "Options...", subitems: layoutItems, icon: "hand-point-right" }); @@ -314,7 +314,7 @@ export class CollectionView extends Touchable this.props.Document[StrCast(childClick.targetScriptKey)] = ObjectField.MakeCopy(ScriptCast(childClick.data)), })); - !existingOnClick && cm.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); + !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "hand-point-right" }); if (!Doc.UserDoc().noviceMode) { const more = cm.findByDescription("More..."); diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 56ba9e96a..9d9ce7f36 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -11,6 +11,7 @@ import { DocumentType } from "../../../documents/DocumentTypes"; import { SelectionManager } from "../../../util/SelectionManager"; import AntimodeMenu from "../../AntimodeMenu"; import "./FormatShapePane.scss"; +import { undoBatch } from "../../../util/UndoManager"; @observer export default class FormatShapePane extends AntimodeMenu { @@ -118,6 +119,7 @@ export default class FormatShapePane extends AntimodeMenu { } } + @undoBatch @action rotate = (degrees: number) => { this.selectedInk?.forEach(action(inkView => { @@ -160,7 +162,7 @@ export default class FormatShapePane extends AntimodeMenu { colorPicker(setter: (color: string) => {}) { return
{this._palette.map(color => - )}
; @@ -171,11 +173,11 @@ export default class FormatShapePane extends AntimodeMenu { type="text" value={value} onChange={e => setter(e.target.value)} autoFocus /> -
- ; @@ -183,7 +185,7 @@ export default class FormatShapePane extends AntimodeMenu { colorButton(value: string, setter: () => {}) { return <> - @@ -206,10 +208,10 @@ export default class FormatShapePane extends AntimodeMenu { @computed get propertyGroupItems() { const fillCheck =
- this.unFilled = true)} /> + this.unFilled = true))} /> No Fill
- this.solidFil = true)} /> + this.solidFil = true))} /> Solid Fill

{this.solidFil ? "Color" : ""} @@ -218,22 +220,22 @@ export default class FormatShapePane extends AntimodeMenu {
; const markers = <> - this.markHead = this.markHead ? "" : "arrow")} /> + this.markHead = this.markHead ? "" : "arrow"))} /> Arrow Head
- this.markTail = this.markTail ? "" : "arrow")} /> + this.markTail = this.markTail ? "" : "arrow"))} /> Arrow End
; const lineCheck =
- this.unStrokd = true)} /> + this.unStrokd = true))} /> No Line
- this.solidStk = true)} /> + this.solidStk = true))} /> Solid Line
- this.dashdStk = "2")} /> + this.dashdStk = "2"))} /> Dash Line

@@ -253,7 +255,7 @@ export default class FormatShapePane extends AntimodeMenu {

Width {this.widInput}

- this._lock = !this._lock)} /> + this._lock = !this._lock))} /> Lock Ratio

Rotation {this.rotInput} diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 2015ca930..188b88c41 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,7 +1,7 @@ import { action, computed, Lambda, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from "react"; -import { Doc, Opt } from '../../../../fields/Doc'; +import { Doc, Opt, WidthSym } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { Id } from '../../../../fields/FieldSymbols'; import { makeInterface } from '../../../../fields/Schema'; @@ -248,8 +248,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ onContextMenu = () => { const displayOptionsMenu: ContextMenuProps[] = []; - displayOptionsMenu.push({ description: "Contents", event: () => this.props.Document.display = "contents", icon: "copy" }); - displayOptionsMenu.push({ description: "Undefined", event: () => this.props.Document.display = undefined, icon: "exclamation" }); + displayOptionsMenu.push({ description: "Toggle Content Display Style", event: () => this.props.Document.display = this.props.Document.display ? undefined : "contents", icon: "copy" }); ContextMenu.Instance.addItem({ description: "Display", subitems: displayOptionsMenu, icon: "tv" }); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 6ef976ceb..a586e81d8 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -770,6 +770,7 @@ export class DocumentView extends DocComponent(Docu const options = cm.findByDescription("Options..."); const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : []; const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layoutKey)], Doc, null); + optionItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" }); templateDoc && optionItems.push({ description: "Open Template ", event: () => this.props.addDocTab(templateDoc, "onRight"), icon: "eye" }); !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" }); @@ -783,14 +784,14 @@ export class DocumentView extends DocComponent(Docu onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" }); onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); - !existingOnClick && cm.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); + !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "hand-point-right" }); const funcs: ContextMenuProps[] = []; if (this.layoutDoc.onDragStart) { funcs.push({ description: "Drag an Alias", icon: "edit", event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getAlias(this.dragFactory)')) }); funcs.push({ description: "Drag a Copy", icon: "edit", event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)')) }); funcs.push({ description: "Drag Document", icon: "edit", event: () => this.layoutDoc.onDragStart = undefined }); - cm.addItem({ description: "OnDrag...", subitems: funcs, icon: "asterisk" }); + cm.addItem({ description: "OnDrag...", noexpand: true, subitems: funcs, icon: "asterisk" }); } const more = cm.findByDescription("More..."); @@ -817,29 +818,28 @@ export class DocumentView extends DocComponent(Docu // a.download = `DocExport-${this.props.Document[Id]}.zip`; // a.click(); }); + moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" }); } - moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" }); - moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" }); moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" }); moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" }); !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!); - const help = cm.findByDescription("Help..."); - const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : []; - helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); - helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); - cm.addItem({ description: "Help...", subitems: helpItems, icon: "question" }); - - const existingAcls = cm.findByDescription("Privacy..."); - const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : []; - aclItems.push({ description: "Make Add Only", event: () => this.setAcl("addOnly"), icon: "concierge-bell" }); - aclItems.push({ description: "Make Read Only", event: () => this.setAcl("readOnly"), icon: "concierge-bell" }); - aclItems.push({ description: "Make Private", event: () => this.setAcl("ownerOnly"), icon: "concierge-bell" }); - aclItems.push({ description: "Make Editable", event: () => this.setAcl("write"), icon: "concierge-bell" }); - aclItems.push({ description: "Test Private", event: () => this.testAcl("ownerOnly"), icon: "concierge-bell" }); - aclItems.push({ description: "Test Readonly", event: () => this.testAcl("readOnly"), icon: "concierge-bell" }); - !existingAcls && cm.addItem({ description: "Privacy...", subitems: aclItems, icon: "question" }); + // const help = cm.findByDescription("Help..."); + // const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : []; + // helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); + // helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); + // cm.addItem({ description: "Help...", subitems: helpItems, icon: "question" }); + + // const existingAcls = cm.findByDescription("Privacy..."); + // const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : []; + // aclItems.push({ description: "Make Add Only", event: () => this.setAcl("addOnly"), icon: "concierge-bell" }); + // aclItems.push({ description: "Make Read Only", event: () => this.setAcl("readOnly"), icon: "concierge-bell" }); + // aclItems.push({ description: "Make Private", event: () => this.setAcl("ownerOnly"), icon: "concierge-bell" }); + // aclItems.push({ description: "Make Editable", event: () => this.setAcl("write"), icon: "concierge-bell" }); + // aclItems.push({ description: "Test Private", event: () => this.testAcl("ownerOnly"), icon: "concierge-bell" }); + // aclItems.push({ description: "Test Readonly", event: () => this.testAcl("readOnly"), icon: "concierge-bell" }); + // !existingAcls && cm.addItem({ description: "Privacy...", subitems: aclItems, icon: "question" }); // const recommender_subitems: ContextMenuProps[] = []; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index d16aa528c..4eba21eab 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -157,29 +157,31 @@ export class ImageBox extends ViewBoxAnnotatableComponent GooglePhotos.Transactions.UploadImages([this.props.Document]), icon: "caret-square-right" }); - funcs.push({ description: "Copy path", event: () => Utils.CopyText(field.url.href), icon: "expand-arrows-alt" }); - // funcs.push({ - // description: "Reset Native Dimensions", event: action(async () => { - // const curNW = NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]); - // const curNH = NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]); - // if (this.props.PanelWidth() / this.props.PanelHeight() > curNW / curNH) { - // this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelHeight() * curNW / curNH; - // this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelHeight(); - // } else { - // this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelWidth(); - // this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelWidth() * curNH / curNW; - // } - // }), icon: "expand-arrows-alt" - // }); - - const existingAnalyze = ContextMenu.Instance?.findByDescription("Analyzers..."); - const modes: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : []; - modes.push({ description: "Generate Tags", event: this.generateMetadata, icon: "tag" }); - modes.push({ description: "Find Faces", event: this.extractFaces, icon: "camera" }); - //modes.push({ description: "Recommend", event: this.extractText, icon: "brain" }); - !existingAnalyze && ContextMenu.Instance?.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" }); + funcs.push({ description: "Rotate Clockwise 90", event: this.rotate, icon: "expand-arrows-alt" }); + if (!Doc.UserDoc().noviceMode) { + funcs.push({ description: "Export to Google Photos", event: () => GooglePhotos.Transactions.UploadImages([this.props.Document]), icon: "caret-square-right" }); + funcs.push({ description: "Copy path", event: () => Utils.CopyText(field.url.href), icon: "expand-arrows-alt" }); + // funcs.push({ + // description: "Reset Native Dimensions", event: action(async () => { + // const curNW = NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]); + // const curNH = NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]); + // if (this.props.PanelWidth() / this.props.PanelHeight() > curNW / curNH) { + // this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelHeight() * curNW / curNH; + // this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelHeight(); + // } else { + // this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelWidth(); + // this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelWidth() * curNH / curNW; + // } + // }), icon: "expand-arrows-alt" + // }); + + const existingAnalyze = ContextMenu.Instance?.findByDescription("Analyzers..."); + const modes: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : []; + modes.push({ description: "Generate Tags", event: this.generateMetadata, icon: "tag" }); + modes.push({ description: "Find Faces", event: this.extractFaces, icon: "camera" }); + //modes.push({ description: "Recommend", event: this.extractText, icon: "brain" }); + !existingAnalyze && ContextMenu.Instance?.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" }); + } ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index 836ef4149..0dfbdc5cf 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -41,7 +41,7 @@ export class LabelBox extends ViewBoxBaseComponent DocUtils.makeCustomViewClicked(this.rootDoc, Docs.Create.FreeformDocument, "freeform"), icon: "eye" }); - appearanceItems.push({ description: "Change Perspective...", subitems: changeItems, icon: "external-link-alt" }); + appearanceItems.push({ description: "Change Perspective...", noexpand: true, subitems: changeItems, icon: "external-link-alt" }); const uicontrols: ContextMenuProps[] = []; uicontrols.push({ description: "Toggle Sidebar", event: () => this.layoutDoc._showSidebar = !this.layoutDoc._showSidebar, icon: "expand-arrows-alt" }); uicontrols.push({ description: "Toggle Dictation Icon", event: () => this.layoutDoc._showAudio = !this.layoutDoc._showAudio, icon: "expand-arrows-alt" }); @@ -489,10 +489,29 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp proto instanceof Doc && (proto.BROADCAST_MESSAGE = Cast(this.rootDoc[this.fieldKey], RichTextField)?.Text)), icon: "expand-arrows-alt" }); - appearanceItems.push({ description: "UI Controls...", subitems: uicontrols, icon: "asterisk" }); + appearanceItems.push({ description: "UI Controls...", noexpand: true, subitems: uicontrols, icon: "asterisk" }); this.rootDoc.isTemplateDoc && appearanceItems.push({ description: "Make Default Layout", event: async () => Doc.UserDoc().defaultTextLayout = new PrefetchProxy(this.rootDoc), icon: "eye" }); Doc.UserDoc().defaultTextLayout && appearanceItems.push({ description: "Reset default note style", event: () => Doc.UserDoc().defaultTextLayout = undefined, icon: "eye" }); - appearanceItems.push({ + + !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); + + const funcs: ContextMenuProps[] = []; + + const highlighting: ContextMenuProps[] = []; + ["My Text", "Text from Others", "Todo Items", "Important Items", "Ignore Items", "Disagree Items", "By Recent Minute", "By Recent Hour"].forEach(option => + highlighting.push({ + description: (FormattedTextBox._highlights.indexOf(option) === -1 ? "Highlight " : "Unhighlight ") + option, event: () => { + e.stopPropagation(); + if (FormattedTextBox._highlights.indexOf(option) === -1) { + FormattedTextBox._highlights.push(option); + } else { + FormattedTextBox._highlights.splice(FormattedTextBox._highlights.indexOf(option), 1); + } + this.updateHighlights(); + }, icon: "expand-arrows-alt" + })); + funcs.push({ description: "highlighting...", noexpand: true, subitems: highlighting, icon: "hand-point-right" }); + funcs.push({ description: "Convert to be a template style", event: () => { if (!this.layoutDoc.isTemplateDoc) { const title = StrCast(this.rootDoc.title); @@ -517,29 +536,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp Doc.AddDocToList(Cast(Doc.UserDoc()["template-notes"], Doc, null), "data", this.rootDoc); }, icon: "eye" }); - !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); + funcs.push({ description: `${this.Document._autoHeight ? "Variable Height" : "Auto Height"}`, event: () => this.layoutDoc._autoHeight = !this.layoutDoc._autoHeight, icon: "plus" }); - const funcs: ContextMenuProps[] = []; - - //funcs.push({ description: `${this.Document._autoHeight ? "Variable Height" : "Auto Height"}`, event: () => this.layoutDoc._autoHeight = !this.layoutDoc._autoHeight, icon: "plus" }); - funcs.push({ description: (!this.layoutDoc._nativeWidth || !this.layoutDoc._nativeHeight ? "Freeze" : "Unfreeze") + " Aspect", event: this.toggleNativeDimensions, icon: "snowflake" }); funcs.push({ description: "Toggle Single Line", event: () => this.layoutDoc._singleLine = !this.layoutDoc._singleLine, icon: "expand-arrows-alt" }); - - const highlighting: ContextMenuProps[] = []; - ["My Text", "Text from Others", "Todo Items", "Important Items", "Ignore Items", "Disagree Items", "By Recent Minute", "By Recent Hour"].forEach(option => - highlighting.push({ - description: (FormattedTextBox._highlights.indexOf(option) === -1 ? "Highlight " : "Unhighlight ") + option, event: () => { - e.stopPropagation(); - if (FormattedTextBox._highlights.indexOf(option) === -1) { - FormattedTextBox._highlights.push(option); - } else { - FormattedTextBox._highlights.splice(FormattedTextBox._highlights.indexOf(option), 1); - } - this.updateHighlights(); - }, icon: "expand-arrows-alt" - })); - funcs.push({ description: "highlighting...", subitems: highlighting, icon: "hand-point-right" }); - + funcs.push({ description: (!this.layoutDoc._nativeWidth || !this.layoutDoc._nativeHeight ? "Freeze" : "Unfreeze") + " Aspect", event: this.toggleNativeDimensions, icon: "snowflake" }); ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); this._downX = this._downY = Number.NaN; } -- cgit v1.2.3-70-g09d2