From 2f1714f0175f8fc766ba030848f5469e429307f4 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 12 Jun 2020 11:17:40 +0800 Subject: menu bug fix --- src/client/views/nodes/ColorBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/nodes/ColorBox.tsx') diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 0d6258cf3..f49b1f763 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -60,9 +60,9 @@ export class ColorBox extends ViewBoxBaseComponent
{ActiveInkWidth() ?? 2}
- ) => SetActiveInkWidth(e.target.value)} /> + ) => SetActiveInkWidth(e.target.value)} />
{ActiveInkBezierApprox() ?? 2}
- ) => SetActiveBezierApprox(e.target.value)} /> + ) => SetActiveBezierApprox(e.target.value)} />

-- cgit v1.2.3-70-g09d2 From 6b5c11a26e114f26f3907342f9afbd47b27cecf4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 11 Jul 2020 17:54:20 -0400 Subject: restructured ink to make more react-friendly --- src/client/util/CurrentUserUtils.ts | 6 +- src/client/util/InteractionUtils.tsx | 21 +- src/client/util/SelectionManager.ts | 3 - src/client/views/AntimodeMenu.tsx | 1 - src/client/views/DocumentDecorations.tsx | 5 +- src/client/views/InkingStroke.tsx | 18 +- .../collectionFreeForm/FormatShapePane.tsx | 801 +++++++-------------- .../collectionFreeForm/InkOptionsMenu.tsx | 24 +- src/client/views/nodes/ColorBox.tsx | 1 - 9 files changed, 299 insertions(+), 581 deletions(-) (limited to 'src/client/views/nodes/ColorBox.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index d0ca0e57e..0b644fa79 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -760,9 +760,9 @@ export class CurrentUserUtils { doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)"); doc.activeInkWidth = StrCast(doc.activeInkWidth, "1"); doc.activeInkBezier = StrCast(doc.activeInkBezier, "0"); - doc.activeFillColor = StrCast(doc.activeFillColor, "none"); - doc.activeArrowStart = StrCast(doc.activeArrowStart, "none"); - doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none"); + doc.activeFillColor = StrCast(doc.activeFillColor, ""); + doc.activeArrowStart = StrCast(doc.activeArrowStart, ""); + doc.activeArrowEnd = StrCast(doc.activeArrowEnd, ""); doc.activeDash = StrCast(doc.activeDash, "0"); doc.fontSize = NumCast(doc.fontSize, 12); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 2883e2056..6ab7bcc87 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -3,7 +3,6 @@ import * as beziercurve from 'bezier-curve'; import * as fitCurve from 'fit-curve'; import "./InteractionUtils.scss"; import { Utils } from "../../Utils"; -import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu"; export namespace InteractionUtils { export const MOUSETYPE = "mouse"; @@ -96,12 +95,6 @@ export namespace InteractionUtils { color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string, dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) { - // if (InkOptionsMenu.Instance.Pinned) { - // for (var i = 0; i < points.length; i++) { - // points[i].Y -= 35; - // } - // } - let pts: { X: number; Y: number; }[] = []; if (shape) { //if any of the shape are true pts = makePolygon(shape, points); @@ -127,15 +120,15 @@ export namespace InteractionUtils { const dashArray = String(Number(width) * Number(dash)); const defGuid = Utils.GenerateGuid(); const arrowDim = Math.max(0.5, 8 / Math.log(Math.max(2, strokeWidth))); - return ( {/* setting the svg fill sets the arrowhead fill */} + return ( {/* setting the svg fill sets the arrowStart fill */} {nodefs ? (null) : {arrowStart !== "dot" && arrowEnd !== "dot" ? (null) : } - {arrowStart !== "arrowHead" && arrowEnd !== "arrowHead" ? (null) : + {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) : } - {arrowStart !== "arrowEnd" && arrowEnd !== "arrowEnd" ? (null) : + {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) : } } @@ -144,7 +137,7 @@ export namespace InteractionUtils { points={strpts} style={{ filter: drawHalo ? "url(#inkSelectionHalo)" : undefined, - fill, + fill: fill ? fill : "transparent", opacity: strokeWidth !== width ? 0.5 : undefined, pointerEvents: pevents as any, stroke: color ?? "rgb(0, 0, 0)", @@ -153,8 +146,8 @@ export namespace InteractionUtils { strokeLinecap: "round", strokeDasharray: dashArray }} - markerStart={`url(#${arrowStart + defGuid})`} - markerEnd={`url(#${arrowEnd + defGuid})`} + markerStart={`url(#${arrowStart + "Start" + defGuid})`} + markerEnd={`url(#${arrowEnd + "End" + defGuid})`} /> ); @@ -163,7 +156,7 @@ export namespace InteractionUtils { // export function makeArrow() { // return ( // InkOptionsMenu.Instance.getColors().map(color => { - // const id1 = "arrowHeadTest" + color; + // const id1 = "arrowStartTest" + color; // console.log(color); // // diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index af2f320d3..9a968aeda 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -5,7 +5,6 @@ import { computedFn } from "mobx-utils"; import { List } from "../../fields/List"; import { Scripting } from "./Scripting"; import { DocumentManager } from "./DocumentManager"; -import FormatShapePane from "../views/collections/collectionFreeForm/FormatShapePane"; export namespace SelectionManager { @@ -31,8 +30,6 @@ export namespace SelectionManager { manager.SelectedDocuments.set(docView, true); } Doc.UserDoc().activeSelection = new List(SelectionManager.SelectedDocuments().map(dv => dv.props.Document)); - FormatShapePane.Instance.selected(); - } @action DeselectDoc(docView: DocumentView): void { diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index cb6de1785..3303a5e68 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -1,7 +1,6 @@ import React = require("react"); import { observable, action } from "mobx"; import "./AntimodeMenu.scss"; -import { inherits } from "util"; /** * This is an abstract class that serves as the base for a PDF-style or Marquee-style diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 8edd4c4a9..81b4f9162 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -152,8 +152,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (e.button === 0 && !e.altKey && !e.ctrlKey) { let child = SelectionManager.SelectedDocuments()[0].ContentDiv!.children[0]; while (child.children.length) { - const next = Array.from(child.children).find(c => !c.className.includes("collectionViewChrome")); - if (next?.className.includes("documentView-node")) break; + const next = Array.from(child.children).find(c => typeof (c.className) !== "string" || !c.className.includes("collectionViewChrome")); + if (typeof (next?.className) === "string" && next?.className.includes("documentView-node")) break; if (next) child = next; else break; } @@ -294,7 +294,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> const doc = Document(element.rootDoc); if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { doc.rotation = Number(doc.rotation) + Number(angle); - console.log(doc.rotation); const ink = Cast(doc.data, InkField)?.inkData; if (ink) { diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 7d9a3c8b3..224abfd77 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -43,8 +43,6 @@ export class InkingStroke extends ViewBoxBaseComponent { FormatShapePane.Instance.Pinned = true; - FormatShapePane.Instance.selected(); - } render() { @@ -62,14 +60,14 @@ export class InkingStroke extends ViewBoxBaseComponent 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), - StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), StrCast(this.layoutDoc.fillColor, ActiveFillColor()), + StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"), "none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblepainted" : "none", false, true); return ( p && !i.rootDoc.fillColor ? true : false, true) || false; + } + @computed get _solidFill() { + return this.inks?.reduce((p, i) => p && i.rootDoc.fillColor ? true : false, true) || false; + } + set _noFill(value) { this._currFill = value ? "" : this._lastFill; } + set _solidFill(value) { this._noFill = !value; } + + @computed get _noLine() { + return this.inks?.reduce((p, i) => p && !i.rootDoc.color ? true : false, true) || false; + } + @computed get _solidLine() { + return this.inks?.reduce((p, i) => p && + i.rootDoc.color && (i.rootDoc.dash === undefined || i.rootDoc.dash === "0") ? true : false, true) || false; + } + @computed get _dashLine() { + return !this._noLine && this.inks?.reduce((p, i) => + (p === undefined || (p && p === i.rootDoc.dash)) && i.rootDoc.dash !== "0" ? StrCast(i.rootDoc.dash) : "", undefined as Opt) || ""; + } + set _noLine(value) { this._currColor = value ? "" : this._lastLine; } + set _solidLine(value) { this._dashLine = ""; this._noLine = !value; } + set _dashLine(value) { + value && (this._lastDash = value); this._noLine = false; + this.inks?.forEach(i => i.rootDoc.dash = value ? this._lastDash : undefined) + } + + @computed get _currFill() { + const cfill = this._noFill || !this.inks ? "" : StrCast(this.inks[0].rootDoc.fillColor); + cfill && (this._lastFill = cfill); + return cfill; + } + @computed get _currColor() { + const ccol = this._noLine || !this.inks ? "" : StrCast(this.inks[0].rootDoc.color, ""); + this._lastLine = ccol ? ccol : this._lastLine; + return ccol; + } + set _currFill(value) { value && (this._lastFill = value); this.inks?.forEach(i => i.rootDoc.fillColor = value); } + set _currColor(value) { value && (this._lastLine = value); this.inks?.forEach(i => i.rootDoc.color = value ? value : undefined) } + + @computed get _arrowStart() { + return this.inks?.reduce((p, i) => + (p === undefined || (p && p === i.rootDoc.arrowStart)) ? StrCast(i.rootDoc.arrowStart) : "", undefined as Opt) || ""; + } + @computed get _arrowEnd() { + return this.inks?.reduce((p, i) => + (p === undefined || (p && p === i.rootDoc.arrowEnd)) ? StrCast(i.rootDoc.arrowEnd) : "", undefined as Opt) || "" + } + set _arrowStart(value) { this.inks?.forEach(i => i.rootDoc.arrowStart = value); } + set _arrowEnd(value) { this.inks?.forEach(i => i.rootDoc.arrowEnd = value); } + + @computed get _currSizeHeight() { + return this.inks?.reduce((p, i) => + (p === undefined || (p === NumCast(i.rootDoc._height).toString())) ? NumCast(i.rootDoc._height).toString() : "", undefined as Opt) || "" + } + @computed get _currSizeWidth() { + return this.inks?.reduce((p, i) => + (p === undefined || (p === NumCast(i.rootDoc._width).toString())) ? NumCast(i.rootDoc._width).toString() : "", undefined as Opt) || "" + } + @computed get _currRotation() { + return this.inks?.reduce((p, i) => + (p === undefined || (p === NumCast(i.rootDoc.rotation).toString())) ? NumCast(i.rootDoc.rotation).toString() : "", undefined as Opt) || "" + } + @computed get _currPositionHorizontal() { + return this.inks?.reduce((p, i) => + (p === undefined || (p === NumCast(i.rootDoc.x).toString())) ? NumCast(i.rootDoc.x).toString() : "", undefined as Opt) || "" + } + @computed get _currPositionVertical() { + return this.inks?.reduce((p, i) => + (p === undefined || (p === NumCast(i.rootDoc.y).toString())) ? NumCast(i.rootDoc.y).toString() : "", undefined as Opt) || "" + } + @computed get _currStrokeWidth() { + return this.inks?.reduce((p, i) => + (p === undefined || (p === NumCast(i.rootDoc.strokeWidth).toString())) ? NumCast(i.rootDoc.strokeWidth).toString() : "", undefined as Opt) || "" + } + set _currPositionHorizontal(value) { this.inks?.forEach(i => i.rootDoc.x = Number(value)); } + set _currPositionVertical(value) { this.inks?.forEach(i => i.rootDoc.y = Number(value)); } + set _currRotation(value) { this.inks?.forEach(i => i.rootDoc.rotation = Number(value)); } + set _currStrokeWidth(value) { this.inks?.forEach(i => i.rootDoc.strokeWidth = Number(value)); } + set _currSizeWidth(value) { + this.inks?.forEach(i => { + const doc = i.rootDoc; + if (doc._width && doc._height) { + const oldWidth = NumCast(doc._width); + const oldHeight = NumCast(doc._height); + doc._width = Number(value); + if (this._lock) { + doc._height = (doc._width * oldHeight) / oldWidth; + } + } + }); + } + set _currSizeHeight(value) { + this.inks?.forEach(i => { + const doc = i.rootDoc; + if (doc._width && doc._height) { + const oldWidth = NumCast(doc._width); + const oldHeight = NumCast(doc._height); + doc._height = Number(value); + if (this._lock) { + doc._width = (doc._height * oldWidth) / oldHeight; + } + } + }); + } constructor(props: Readonly<{}>) { super(props); @@ -80,191 +178,40 @@ export default class FormatShapePane extends AntimodeMenu { this.Pinned = false; } - //if multiple inks are selected and do not share the same prop, leave blank - @action - checkSame = () => { - const docs = SelectionManager.SelectedDocuments(); - const inks: DocumentView[] = []; - for (var i = 0; i < docs.length; i++) { - if (Document(docs[i].rootDoc).type === DocumentType.INK) { - inks.push(docs[i]); - } - } - this._noFill = Document(inks[0].rootDoc).fillColor === "none" ? true : false; - this._solidFill = Document(inks[0].rootDoc).fillColor === "none" ? false : true; - this._noLine = Document(inks[0].rootDoc).color === "none" ? true : false; - if (Document(inks[0].rootDoc).color !== "none") { - this._solidLine = true; - this._dashLine = true; - if (Document(inks[0].rootDoc).dash === "0") { - this._dashLine = false; - } else { - this._solidLine = false; - - } - } - this._currWidth = String(Document(inks[0].rootDoc).strokeWidth); - this._currFill = String(Document(inks[0].rootDoc).fillColor); - this._currColor = String(Document(inks[0].rootDoc).color); - this._arrowHead = Document(inks[0].rootDoc).arrowStart === "none" ? false : true; - this._arrowEnd = Document(inks[0].rootDoc).arrowEnd === "none" ? false : true; - this._currSizeHeight = String(Document(inks[0].rootDoc)._height); - this._currSizeWidth = String(Document(inks[0].rootDoc)._width); - this._currRotation = String(Document(inks[0].rootDoc).rotation); - this._currPositionHorizontal = String(Document(inks[0].rootDoc).x); - this._currPositionVertical = String(Document(inks[0].rootDoc).y); - for (var i = 0; i < inks.length; i++) { - if (Document(inks[i].rootDoc).strokeWidth !== Document(inks[0].rootDoc).strokeWidth) { - this._currWidth = ""; - } - if (Document(inks[i].rootDoc).color !== Document(inks[0].rootDoc).color) { - this._noLine = false; - this._solidLine = false; - this._dashLine = false; - } - if (Document(inks[i].rootDoc).fillColor !== Document(inks[0].rootDoc).fillColor) { - this._solidFill = false; - this._noFill = false; - } - if (Document(inks[i].rootDoc).arrowStart !== Document(inks[0].rootDoc).arrowStart) { - this._arrowHead = false; - } - if (Document(inks[i].rootDoc).arrowEnd !== Document(inks[0].rootDoc).arrowEnd) { - this._arrowEnd = false; - } - if (Document(inks[i].rootDoc).x !== Document(inks[0].rootDoc).x) { - this._currPositionHorizontal = ""; - } - if (Document(inks[i].rootDoc).y !== Document(inks[0].rootDoc).y) { - this._currPositionVertical = ""; - } - if (Document(inks[i].rootDoc)._width !== Document(inks[0].rootDoc)._width) { - this._currSizeWidth = ""; - } - if (Document(inks[i].rootDoc)._height !== Document(inks[0].rootDoc)._height) { - this._currSizeHeight = ""; - } - if (Document(inks[i].rootDoc).rotation !== Document(inks[0].rootDoc).rotation) { - this._currRotation = ""; - } - } - } - - @action upDownButtons = (dirs: string, field: string) => { - SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { - const doc = Document(element.rootDoc); - if (doc.type === DocumentType.INK) { - switch (field) { - case "width": - if (doc.strokeWidth) { - doc.strokeWidth = dirs === "up" ? doc.strokeWidth + 1 : doc.strokeWidth - 1; - SetActiveInkWidth(String(doc.strokeWidth)); + switch (field) { + case "horizontal": this.inks?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break; + case "vertical": this.inks?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break; + case "rotation": this.rotate((dirs === "up" ? .1 : -.1)); break; + case "width": this.inks?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break; + case "sizeWidth": + this.inks?.forEach(i => { + const doc = i.rootDoc; + if (doc._width && doc._height) { + const oldWidth = NumCast(doc._width); + const oldHeight = NumCast(doc._height); + doc._width = NumCast(doc._width) + (dirs === "up" ? 10 : - 10); + if (this._lock) { + doc._height = (NumCast(doc._width) * oldHeight) / oldWidth; } - break; - case "sizeWidth": - if (doc._width && doc._height) { - const oldWidth = doc._width; - const oldHeight = doc._height; - doc._width = dirs === "up" ? doc._width + 10 : doc._width - 10; - if (this._lock) { - doc._height = (doc._width * oldHeight) / oldWidth; - } - } - break; - case "sizeHeight": - if (doc._width && doc._height) { - const oldWidth = doc._width; - const oldHeight = doc._height; - doc._height = dirs === "up" ? doc._height + 10 : doc._height - 10; - if (this._lock) { - doc._width = (doc._height * oldWidth) / oldHeight; - } - } - break; - case "horizontal": - if (doc.x) { - doc.x = dirs === "up" ? doc.x + 10 : doc.x - 10; - } - break; - case "vertical": - if (doc.y) { - doc.y = dirs === "up" ? doc.y + 10 : doc.y - 10; - } - case "rotation": - this.rotate(dirs === "up" ? Number(doc.rotation) + Number(0.1) : Number(doc.rotation) - Number(0.1)); - break; - default: - break; - } - this.selected(); - } - })); - } - - - @action - editProperties = (value: any, field: string) => { - SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { - const doc = Document(element.rootDoc); - if (doc.type === DocumentType.INK) { - switch (field) { - case "width": - SetActiveInkWidth(value); - doc.strokeWidth = Number(value); - break; - case "color": - doc.color = String(value); - break; - case "fill": - doc.fillColor = String(value); - break; - case "bezier": - break; - case "arrowStart": - doc.arrowStart = String(value); - break; - case "arrowEnd": - doc.arrowEnd = String(value); - break; - case "dash": - doc.dash = String(value); - break; - case "widthSize": - if (doc._width && doc._height) { - const oldWidth = doc._width; - const oldHeight = doc._height; - doc._width = Number(value); - if (this._lock) { - doc._height = (doc._width * oldHeight) / oldWidth; - } - } - break; - case "heightSize": - if (doc._width && doc._height) { - const oldWidth = doc._width; - const oldHeight = doc._height; - doc._height = Number(value); - if (this._lock) { - doc._width = (doc._height * oldWidth) / oldHeight; - } + } + }); + break; + case "sizeHeight": + this.inks?.forEach(i => { + const doc = i.rootDoc; + if (doc._width && doc._height) { + const oldWidth = NumCast(doc._width); + const oldHeight = NumCast(doc._height) + doc._height = NumCast(doc._height) + (dirs === "up" ? 10 : - 10); + if (this._lock) { + doc._width = (NumCast(doc._height) * oldWidth) / oldHeight; } - break; - case "horizontal": - doc.x = Number(value); - break; - case "vertical": - doc.y = Number(value); - break; - default: - break; - } - } - this.selected(); - })); - this.checkSame(); - + } + }); + break; + } } @computed get close() { @@ -294,69 +241,6 @@ export default class FormatShapePane extends AntimodeMenu { return modes; } - //detects currently selected document and change value in pane - @action - selected = () => { - this._selectDoc = SelectionManager.SelectedDocuments(); - if (this._selectDoc.length === 1 && Document(this._selectDoc[0].rootDoc).type === DocumentType.INK) { - this._single = true; - const doc = Document(this._selectDoc[0].rootDoc); - if (doc.type === DocumentType.INK) { - if (doc.fillColor === "none") { - this._noFill = true; - this._solidFill = false; - } else { - this._solidFill = true; - this._noFill = false; - this._currFill = String(doc.fillColor); - } - if (doc.color === "none") { - this._noLine = true; - this._solidLine = false; - this._dashLine = false; - } else { - this._currWidth = String(doc.strokeWidth); - this._currColor = String(doc.color); - if (doc.dash === "0") { - this._solidLine = true; - this._noLine = false; - this._dashLine = false; - } else { - this._dashLine = true; - this._noLine = false; - this._solidLine = false; - } - - this._arrowHead = doc.arrowStart === "none" ? false : true; - this._arrowEnd = doc.arrowEnd === "none" ? false : true; - this._currPositionHorizontal = String(doc.x); - this._currPositionVertical = String(doc.y); - this._currRotation = String(doc.rotation); - this._currSizeHeight = String(doc._height); - this._currSizeWidth = String(doc._width); - } - - } - } else { - this._noFill = false; - this._solidFill = false; - this._single = false; - this._currFill = "#D0021B"; - this._noLine = false; - this._solidLine = false; - this._dashLine = false; - this._currColor = "#D0021B"; - this._arrowHead = false; - this._arrowEnd = false; - this._currPositionHorizontal = ""; - this._currPositionVertical = ""; - this._currRotation = ""; - this._currSizeHeight = ""; - this._currSizeWidth = ""; - } - this.checkSame(); - } - @action rotate = (degrees: number) => { SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { @@ -395,143 +279,80 @@ export default class FormatShapePane extends AntimodeMenu { })); } - @action - toggle = (check: string) => { - switch (check) { - case "noFill": - if (!this._noFill) { - this._noFill = true; - this._solidFill = false; - } - break; - case "solidFill": - if (!this._solidFill) { - this._solidFill = true; - this._noFill = false; - if (this._currFill === "none") { - this._currFill = "#D0021B"; - } - } - break; - case "noLine": - if (!this._noLine) { - this._noLine = true; - this._solidLine = false; - this._dashLine = false; - } - break; - case "solidLine": - if (!this._solidLine) { - this._solidLine = true; - this._noLine = false; - this._dashLine = false; - if (this._currColor === "none") { - this._currColor = "#D0021B"; - } - } - break; - case "dashLine": - if (!this._dashLine) { - this._dashLine = true; - this._solidLine = false; - this._noLine = false; - if (this._currColor === "none") { - this._currColor = "#D0021B"; - } - } - break; - case "lock": - if (this._lock) { - this._lock = false; - } else { - this._lock = true; - } - break; - case "arrowHead": - this._arrowHead = this._arrowHead ? false : true; - break; - case "arrowEnd": - this._arrowEnd = this._arrowEnd ? false : true; - break; - default: - break; - } - } - @computed get subMenu() { const fillCheck =
- { this.toggle("noFill"); this.editProperties("none", "fill"); })} /> + this._noFill = true)} /> No Fill -

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

-

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

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

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

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

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

-

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

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

-

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

-

+
+
Width {this.sizeWidthInput} -

-

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

-

+
+
Rotation {this.rotationInput} -

-

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

-

+
+
Vertical {this.positionVerticalInput} -

-

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

-

; - return fillButton; +

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

-

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

+
-

+
+

+ -

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

- ; - return positionVerticalInput; - } - - //change inputs - @action - onChange = (val: string, property: string): void => { - if (!Number.isNaN(Number(val)) && Number(val) !== null && val !== " ") { - - switch (property) { - case "width": - this._currWidth = val; - if (val !== "") { - this.editProperties(this._currWidth, "width"); - } - break; - case "sizeHeight": - this._currSizeHeight = val; - if (val !== "") { - this.editProperties(this._currSizeHeight, "heightSize"); - } - break; - case "sizeWidth": - this._currSizeWidth = val; - if (val !== "") { - - this.editProperties(this._currSizeWidth, "widthSize"); - } - break; - case "rotation": - - this._currRotation = val; - if (val !== "") { - - this.rotate(Number(val)); - } - break; - case "positionHorizontal": - this._currPositionHorizontal = val; if (val !== "") { - - this.editProperties(this._currPositionHorizontal, "horizontal"); - } - - break; - case "positionVertical": - this._currPositionVertical = val; - if (val !== "") { - - this.editProperties(this._currPositionVertical, "vertical"); - } - - break; - default: - break; - } - } - } - - - @computed get widthPicker() { - var widthPicker = ; - if (this._widthBtn) { - widthPicker =
- {widthPicker} - {this._width.map(wid => { - return ; - })} -
; - } - return widthPicker; +

+ + ; } - - render() { const buttons = [ diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index e4f3248d0..0866db2be 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -25,19 +25,19 @@ library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSup export default class InkOptionsMenu extends AntimodeMenu { static Instance: InkOptionsMenu; - private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", "none"]; + private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""]; private _width = ["1", "5", "10", "100"]; // private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"]; // private _icons = ["O", "∆", "ロ", "➜", "-"]; // private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",]; // private _icons = ["O", "∆", "ロ", "⎯⎯⎯", "✖︎", " "]; //arrowStart and arrowEnd must match and defs must exist in Inking Stroke - // private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"]; + // private _arrowStart = ["arrowStart", "arrowStart", "dot", "dot", "none"]; // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"]; // private _arrowIcons = ["→", "↔︎", "•", "••", " "]; private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; - private _head = ["none", "none", "arrowHead", "none", "none", "arrowHead", "none", "none", "none"]; - private _end = ["none", "arrowEnd", "arrowEnd", "none", "arrowEnd", "arrowEnd", "none", "none", "none"]; + private _head = ["", "", "arrow", "", "", "arrow", "", "", ""]; + private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""]; private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"]; @observable _shapesNum = this._shape.length; @@ -122,12 +122,6 @@ export default class InkOptionsMenu extends AntimodeMenu { case "bezier": // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300; break; - case "arrowStart": - doc.arrowStart = String(value); - break; - case "arrowEnd": - doc.arrowEnd = String(value); - break; case "dash": doc.dash = Number(value); default: @@ -165,13 +159,12 @@ export default class InkOptionsMenu extends AntimodeMenu { SetActiveArrowEnd(this._end[i]); SetActiveBezierApprox("300"); - // this.editProperties(this._head[i], "arrowStart"), this.editProperties(this._end[i], "arrowEnd"); GestureOverlay.Instance.InkShape = this._shape[i]; } else { this._selected = this._shapesNum; Doc.SetSelectedTool(InkTool.None); - SetActiveArrowStart("none"); - SetActiveArrowEnd("none"); + SetActiveArrowStart(""); + SetActiveArrowEnd(""); GestureOverlay.Instance.InkShape = ""; SetActiveBezierApprox("0"); @@ -189,13 +182,12 @@ export default class InkOptionsMenu extends AntimodeMenu { SetActiveArrowEnd(this._end[i]); SetActiveBezierApprox("300"); - // this.editProperties(this._head[i], "arrowStart"), this.editProperties(this._end[i], "arrowEnd"); GestureOverlay.Instance.InkShape = this._shape[i]; } else { this._selected = this._shapesNum; Doc.SetSelectedTool(InkTool.None); - SetActiveArrowStart("none"); - SetActiveArrowEnd("none"); + SetActiveArrowStart(""); + SetActiveArrowEnd(""); GestureOverlay.Instance.InkShape = ""; SetActiveBezierApprox("0"); diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 137b387c0..31c5a8b13 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -14,7 +14,6 @@ import { ViewBoxBaseComponent } from "../DocComponent"; import { ActiveInkPen, ActiveInkWidth, ActiveInkBezierApprox, SetActiveInkColor, SetActiveInkWidth, SetActiveBezierApprox } from "../InkingStroke"; import "./ColorBox.scss"; import { FieldView, FieldViewProps } from './FieldView'; -import { FormattedTextBox } from "./formattedText/FormattedTextBox"; type ColorDocument = makeInterface<[typeof documentSchema]>; const ColorDocument = makeInterface(documentSchema); -- cgit v1.2.3-70-g09d2 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/nodes/ColorBox.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 258ad0d8628737e01613341437eb0421359ad168 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Tue, 28 Jul 2020 00:02:40 +0900 Subject: rotation/resize fix, changed ui, added sketchpicker etc. --- src/client/util/InteractionUtils.tsx | 7 +- src/client/views/DocumentDecorations.tsx | 54 +++- src/client/views/GestureOverlay.tsx | 16 +- src/client/views/InkingStroke.tsx | 15 +- .../collectionFreeForm/FormatShapePane.scss | 4 +- .../collectionFreeForm/FormatShapePane.tsx | 333 ++++++++++++++------- .../collectionFreeForm/InkOptionsMenu.tsx | 128 ++------ src/client/views/nodes/ColorBox.tsx | 45 +-- 8 files changed, 347 insertions(+), 255 deletions(-) (limited to 'src/client/views/nodes/ColorBox.tsx') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 31b2a56e6..69256ce67 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -123,6 +123,12 @@ export namespace InteractionUtils { } else { pts = points; } + if (isNaN(scalex)) { + scalex = 1; + } + if (isNaN(scaley)) { + scaley = 1; + } const strpts = pts.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${(pt.X - left - width / 2) * scalex + width / 2}, ${(pt.Y - top - width / 2) * scaley + width / 2} `, ""); @@ -141,7 +147,6 @@ export namespace InteractionUtils { } } - private _prevX = 0; private _prevY = 0; private _centerPoints: { X: number, Y: number }[] = []; + private _inkDocs: { x: number, y: number, width: number, height: number }[] = []; @observable private _accumulatedTitle = ""; @observable private _titleControlString: string = "#title"; @@ -309,8 +312,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> const right = Math.max(...xs); const bottom = Math.max(...ys); - doc._height = (bottom - top) * element.props.ScreenToLocalTransform().Scale; - doc._width = (right - left) * element.props.ScreenToLocalTransform().Scale; + // doc._height = (bottom - top) * element.props.ScreenToLocalTransform().Scale; + // doc._width = (right - left) * element.props.ScreenToLocalTransform().Scale; + doc._height = (bottom - top); + doc._width = (right - left); } index++; @@ -329,6 +334,16 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> _dragHeights = new Map(); @action onPointerDown = (e: React.PointerEvent): void => { + + this._inkDocs = []; + SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { + const doc = Document(element.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height) { + this._inkDocs.push({ x: doc.x, y: doc.y, width: doc._width, height: doc._height }); + } + + })); + setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, (e) => { }); if (e.button === 0) { this._resizeHdlId = e.currentTarget.id; @@ -501,6 +516,28 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> (e.button === 0) && this._resizeUndo?.end(); this._resizeUndo = undefined; SnappingManager.clearSnapLines(); + + + //need to change points for resize, or else rotation/control points will fail. + SelectionManager.SelectedDocuments().forEach(action((element: DocumentView, index) => { + const doc = Document(element.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var i = 0; i < ink.length; i++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - this._inkDocs[index].x) + (ink[i].X * doc._width) / this._inkDocs[index].width; + const newY = (doc.y - this._inkDocs[index].y) + (ink[i].Y * doc._height) / this._inkDocs[index].height; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + + } + + } + })); } @computed @@ -591,6 +628,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (bounds.y > bounds.b) { bounds.y = bounds.b - (this._resizeBorderWidth + this._linkBoxHeight + this._titleHeight); } + var offset = 0; + //make offset larger for ink to edit points + if (seldoc.rootDoc.type === DocumentType.INK) { + offset = 20; + } return (
{bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <>
{maximizeIcon} {titleArea} diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 2eec8ed6a..9faf5e6a5 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -668,6 +668,10 @@ export default class GestureOverlay extends Touchable { } makePolygon = (shape: string, gesture: boolean) => { + //take off gesture recognition for now + if (gesture) { + return false; + } const xs = this._points.map(p => p.X); const ys = this._points.map(p => p.Y); var right = Math.max(...xs); @@ -796,19 +800,7 @@ export default class GestureOverlay extends Touchable { break; case "line": this._points.push({ X: left, Y: top }); - - this._points.push({ X: left, Y: top }); - - // this._points.push({ X: right, Y: bottom }); - // this._points.push({ X: right, Y: bottom }); - // this._points.push({ X: right, Y: bottom }); - // this._points.push({ X: right, Y: bottom }); - - - this._points.push({ X: right, Y: bottom }); this._points.push({ X: right, Y: bottom }); - - // this._points.push({ X: right, Y: bottom - 1 }); break; case "arrow": const x1 = left; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 22c89b6da..b03d8e79b 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -105,9 +105,9 @@ export class InkingStroke extends ViewBoxBaseComponent= 4) { for (var i = 0; i <= data.length - 4; i += 4) { controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); @@ -125,6 +125,15 @@ export class InkingStroke extends ViewBoxBaseComponent { switch (field) { case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break; + // case "rot": this.selectedInk?.forEach(i => i.rootDoc.rotation = NumCast(i.rootDoc.rotation) + (dirs === "up" ? 0.1 : -0.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 => { + //redraw points const oldWidth = NumCast(i.rootDoc._width); + const oldHeight = NumCast(i.rootDoc._height); + const oldX = NumCast(i.rootDoc.x); + const oldY = NumCast(i.rootDoc.y); i.rootDoc._width = oldWidth + (dirs === "up" ? 10 : - 10); this._lock && (i.rootDoc._height = (i.rootDoc._width / oldWidth * NumCast(i.rootDoc._height))); + const doc = Document(i.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; + const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } }); break; case "hgt": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + const oldWidth = NumCast(i.rootDoc._width); const oldHeight = NumCast(i.rootDoc._height); - i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10); + const oldX = NumCast(i.rootDoc.x); + const oldY = NumCast(i.rootDoc.y); i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10); this._lock && (i.rootDoc._width = (i.rootDoc._height / oldHeight * NumCast(i.rootDoc._width))); + const doc = Document(i.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { + console.log(doc.x, doc.y, doc._height, doc._width); + const ink = Cast(doc.data, InkField)?.inkData; + console.log(ink); + if (ink) { + const newPoints: { X: number, Y: number }[] = []; + for (var j = 0; j < ink.length; j++) { + // (new x — oldx) + (oldxpoint * newWidt)/oldWidth + const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth; + const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + } + } }); break; } @@ -124,12 +164,11 @@ export default class FormatShapePane extends AntimodeMenu { @undoBatch @action - rotate = (degrees: number) => { - this.selectedInk?.forEach(action(inkView => { + rotate = (angle: number) => { + const _centerPoints: { X: number, Y: number }[] = []; + SelectionManager.SelectedDocuments().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); const ink = Cast(doc.data, InkField)?.inkData; if (ink) { const xs = ink.map(p => p.X); @@ -138,25 +177,37 @@ export default class FormatShapePane extends AntimodeMenu { 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 }); + } + } + })); + + var index = 0; + SelectionManager.SelectedDocuments().forEach(action(inkView => { + const doc = Document(inkView.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + doc.rotation = Number(doc.rotation) + Number(angle); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { 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; + const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X; + const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].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) * inkView.props.ScreenToLocalTransform().Scale; - doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; + const xs = newPoints.map(p => p.X); + const ys = newPoints.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + const right = Math.max(...xs); + const bottom = Math.max(...ys); + + doc._height = (bottom - top); + doc._width = (right - left); } + index++; } })); } @@ -180,8 +231,10 @@ export default class FormatShapePane extends AntimodeMenu { (order === 0 && controlNum !== 0 && i === controlNum - 1) || (order === 3 && i === controlNum - 1) || (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 1) || - (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2)) { - newPoints.push({ X: ink[i].X - (xDiff), Y: ink[i].Y - (yDiff) }); + (order === 3 && controlNum !== ink.length - 1 && i === controlNum + 2) + || ((ink[0].X === ink[ink.length - 1].X) && (ink[0].Y === ink[ink.length - 1].Y) && (i === 0 || i === ink.length - 1) && (controlNum === 0 || controlNum === ink.length - 1)) + ) { + newPoints.push({ X: ink[i].X - (xDiff * inkView.props.ScreenToLocalTransform().Scale), Y: ink[i].Y - (yDiff * inkView.props.ScreenToLocalTransform().Scale) }); } else { newPoints.push({ X: ink[i].X, Y: ink[i].Y }); @@ -189,6 +242,10 @@ export default class FormatShapePane extends AntimodeMenu { } const oldx = doc.x; const oldy = doc.y; + const xs = newPoints.map(p => p.X); + const ys = newPoints.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); doc.data = new InkField(newPoints); const xs2 = newPoints.map(p => p.X); const ys2 = newPoints.map(p => p.Y); @@ -196,141 +253,202 @@ 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) * inkView.props.ScreenToLocalTransform().Scale; - doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; - doc.x = oldx; - doc.y = oldy; + doc._height = (bottom2 - top2); + doc._width = (right2 - left2); + + doc.x = oldx - (left - left2); + doc.y = oldy - (top - top2); } } } })); } + @undoBatch + @action + switchStk = (color: ColorState) => { + const val = String(color.hex); + this.colorStk = val; + return true; + } - colorPicker(setter: (color: string) => {}) { - return
- {this._palette.map(color => - )} + @undoBatch + @action + switchFil = (color: ColorState) => { + const val = String(color.hex); + this.colorFil = val; + return true; + } + + + colorPicker(setter: (color: string) => {}, type: string) { + return
+
; } inputBox = (key: string, value: any, setter: (val: string) => {}) => { return <> - setter(e.target.value)} + onChange={undoBatch(action((e) => setter(e.target.value)))} autoFocus /> -
- ; } + inputBoxDuo = (key: string, value: any, setter: (val: string) => {}, title1: string, key2: string, value2: any, setter2: (val: string) => {}, title2: string) => { + return <> + {title1} +

{title2}

+ + setter(e.target.value)} + autoFocus /> + + + {title2 === "" ? "" : <> + setter2(e.target.value)} + autoFocus /> + +
+ } + ; + } + + colorButton(value: string, setter: () => {}) { return <> - -

; } controlPointsButton() { return <> - + + +

+ ; + } + + lockRatioButton() { + return <> + +

+ ; + } + + rotate90Button() { + return <> +

; } - @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 fillButton() { return this.colorButton(this.colorFil, () => { this._fillBtn = !this._fillBtn; this._lineBtn = false; return true; }); } + @computed get lineButton() { return this.colorButton(this.colorStk, () => { this._lineBtn = !this._lineBtn; this._fillBtn = false; return true; }); } - @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color); } - @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color); } + @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color, "fil"); } + @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color, "stk"); } @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 dashInput() { return this.inputBox("dsh", this.widthStk, (val: string) => this.widthStk = val); } + + @computed get hgtInput() { return this.inputBoxDuo("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val, "H:", "wid", this.shapeWid, (val: string) => this.shapeWid = val, "W:"); } @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 rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); } + + @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); } @computed get controlPoints() { return this.controlPointsButton(); } + @computed get lockRatio() { return this.lockRatioButton(); } + @computed get rotate90() { return this.rotate90Button(); } - @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 -
- ; + @computed get propertyGroupItems() { + const fillCheck =
= 1) ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + Fill: + {this.fillButton} +
+ Stroke: + {this.lineButton} +
- 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._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""} + {this._fillBtn || this._lineBtn ? "" :
} {(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} -

- Edit Points {this.controlPoints} -
; - const positionCheck =
- Horizontal {this.XpsInput} -

- Vertical {this.YpsInput} -

+ {(this.solidStk || this.dashdStk) ? this.widthStk = e.target.value))} /> : (null)} +
+ {(this.solidStk || this.dashdStk) ? <> +

Arrow Head

+ this.markHead = this.markHead ? "" : "arrow"))} style={{ position: "absolute", right: 110, width: 20 }} /> +

Arrow End

+ this.markTail = this.markTail ? "" : "arrow"))} style={{ position: "absolute", right: 0, width: 20 }} /> +
+ : ""} + Dash: this.dashdStk = this.dashdStk === "2" ? "0" : "2"))} style={{ position: "absolute", right: 110, width: 20 }} /> + + +
; - 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; + + + const sizeCheck = + +
= 1) ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + {this.controlPoints} + {this.hgtInput} + {this.XpsInput} + {this.rotInput} + +
; + + + const subMenus = this._currMode === "fill-drip" ? [`Appearance`, 'Transform'] : []; + const menuItems = this._currMode === "fill-drip" ? [fillCheck, sizeCheck] : []; + const indexOffset = 0; + return
{subMenus.map((subMenu, i) =>
@@ -361,6 +479,7 @@ export default class FormatShapePane extends AntimodeMenu { } render() { - return this.getElementVert([this.closeBtn, this.propertyGroupBtn, this.propertyGroupItems]); + return this.getElementVert([this.closeBtn, + this.propertyGroupItems]); } } \ 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 15707ad9e..80d1264ce 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -16,11 +16,11 @@ import { Document } from "../../../../fields/documentSchemas"; import { DocumentType } from "../../../documents/DocumentTypes"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; -import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, } from "@fortawesome/free-solid-svg-icons"; +import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, faArrowRight, faArrowsAltH, faMinus, faCircle, faExclamationTriangle, faSquare, faLongArrowAltRight, faPenFancy, faCaretSquareRight, faAngleDoubleRight, } from "@fortawesome/free-solid-svg-icons"; import { Cast, StrCast, BoolCast } from "../../../../fields/Types"; import FormatShapePane from "./FormatShapePane"; -library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve); +library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, faLongArrowAltRight, faArrowsAltH, faMinus, faCircle, faSquare, faSquare, faPenFancy, faAngleDoubleRight,); @@ -30,18 +30,13 @@ export default class InkOptionsMenu extends AntimodeMenu { 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 = ["arrowStart", "arrowStart", "dot", "dot", "none"]; - // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"]; - // private _arrowIcons = ["→", "↔︎", "•", "••", " "]; - private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; - private _head = ["", "", "arrow", "", "", "arrow", "", "", ""]; - private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""]; - private _shape = ["line", "line", "line", "", "", "", "rectangle", "circle", "triangle"]; + private _dotsize = [10, 20, 30, 40]; + private _draw = ["∿", "⎯", "→", "↔︎", "ロ", "O"]; + private _head = ["", "", "", "arrow", "", ""]; + private _end = ["", "", "arrow", "arrow", "", ""]; + private _shape = ["", "line", "line", "line", "rectangle", "circle"]; + private _title = ["pen", "line", "line with arrow", "line with double arrows", "square", "circle",]; + private _faName = ["pen-fancy", "minus", "long-arrow-alt-right", "arrows-alt-h", "square", "circle"]; @observable _shapesNum = this._shape.length; @observable _selected = this._shapesNum; @@ -154,6 +149,7 @@ export default class InkOptionsMenu extends AntimodeMenu { return ; })}
; return drawButtons; } - // @computed get arrowPicker() { - // var currIcon; - // for (var i = 0; i < this._arrowStart.length; i++) { - // if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) { - // currIcon = this._arrowIcons[i]; - // if (this._arrowIcons[i] === " ") { - // currIcon = "➤"; - // } - // } - // } - // var arrowPicker = ; - // if (this._arrowBtn) { - // arrowPicker =
- // {arrowPicker} - // {this._arrowStart.map((arrowStart, i) => { - // return ; - // })} - //
; - // } - // return arrowPicker; - // } @computed get widthPicker() { var widthPicker = ; })}
; @@ -273,7 +238,7 @@ export default class InkOptionsMenu extends AntimodeMenu { var colorPicker = ; } @@ -310,7 +275,7 @@ export default class InkOptionsMenu extends AntimodeMenu { var fillPicker = ; - // if (this._shapeBtn) { - // shapePicker =
- // {shapePicker} - // {this._buttons.map((btn, i) => { - // var ttl = btn; - // if (btn === "") { - // ttl = "no shape"; - // } - // if (btn === "noRec") { - // ttl = "disable shape recognition"; - // } - // return ; - // })} - //
; - // } - // return shapePicker; - // } @computed get bezierButton() { return , - // this.shapePicker, - // this.bezierButton, + + this.drawButtons, this.widthPicker, this.colorPicker, this.fillPicker, - this.drawButtons, + + this.formatPane, - // this.arrowPicker, - // this.dashButton, + diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 57028b0ca..b186d9ffc 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -54,27 +54,30 @@ export class ColorBox extends ViewBoxBaseComponent e.button === 0 && !e.ctrlKey && e.stopPropagation()} - style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} > + // return
e.button === 0 && !e.ctrlKey && e.stopPropagation()} + // style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} > - -
-
{ActiveInkWidth() ?? 2}
- ) => { - 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); - SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value); - }} /> -
-
-
-
; + // + + //
+ //
{ActiveInkWidth() ?? 2}
+ // ) => { + // 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); + // SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value); + // }} /> + //
+ //
+ //
+ //
+ // ; + return <>; } } -- cgit v1.2.3-70-g09d2 From 0514d32ab83cc95e35e1fb855c3450f0c1984f9e Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 29 Jul 2020 14:18:53 -0400 Subject: fixed color box -- why was it commented out?? fixed workspace so that it can't be converted to another cllecction type --- src/client/views/collections/CollectionMenu.tsx | 13 ++++++-- src/client/views/nodes/ColorBox.tsx | 44 ++++++++++++------------- 2 files changed, 31 insertions(+), 26 deletions(-) (limited to 'src/client/views/nodes/ColorBox.tsx') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index f9b944bb1..7b591e120 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -208,10 +208,10 @@ export class CollectionViewBaseChrome extends React.Component); case CollectionViewType.Freeform: return (); case CollectionViewType.Stacking: return (); case CollectionViewType.Schema: return (); @@ -312,8 +312,8 @@ export class CollectionViewBaseChrome extends React.Component
- {this.props.type === CollectionViewType.Invalid ? (null) : this.viewModes} - {this.templateChrome} + {this.props.type === CollectionViewType.Invalid || this.props.type === CollectionViewType.Docking ? (null) : this.viewModes} + {this.props.type === CollectionViewType.Invalid || this.props.type === CollectionViewType.Docking ? (null) : this.templateChrome}
; } } -- cgit v1.2.3-70-g09d2