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 --- src/client/util/SelectionManager.ts | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/client/util/SelectionManager.ts') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 024532f90..aea2c542b 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -5,6 +5,7 @@ import { computedFn } from "mobx-utils"; import { List } from "../../fields/List"; import { Scripting } from "./Scripting"; import { DocumentManager } from "./DocumentManager"; +import FormatShapePane from "../views/collections/collectionFreeForm/FormatShapePane"; export namespace SelectionManager { @@ -14,6 +15,8 @@ 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) { @@ -29,6 +32,8 @@ export namespace SelectionManager { manager.SelectedDocuments.set(docView, true); } Doc.UserDoc().activeSelection = new List(SelectionManager.SelectedDocuments().map(dv => dv.props.Document)); + FormatShapePane.Instance.selected(); + } @action DeselectDoc(docView: DocumentView): void { -- 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/util/SelectionManager.ts') 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