From 3dea269077151542bc2450bccd749ede87681556 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 8 Jun 2020 14:18:11 -0400 Subject: a bunch of cleanup to fix import order and to organize/restructure ink things in the right places. --- src/client/views/AntimodeMenu.tsx | 1 - src/client/views/DocComponent.tsx | 8 +- src/client/views/GestureOverlay.tsx | 83 +++--- src/client/views/InkingControl.tsx | 109 +------- src/client/views/InkingStroke.tsx | 45 ++-- src/client/views/PreviewCursor.tsx | 4 +- src/client/views/Touchable.tsx | 2 - src/client/views/collections/CollectionMapView.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 25 +- .../views/collections/CollectionTreeView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 42 +-- .../collectionFreeForm/CollectionFreeFormView.tsx | 17 +- .../collectionFreeForm/InkOptionsMenu.tsx | 283 ++++++--------------- src/client/views/nodes/ColorBox.tsx | 50 +++- src/client/views/nodes/DocumentView.tsx | 13 +- src/client/views/nodes/ImageBox.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 4 +- src/client/views/nodes/ScreenshotBox.tsx | 12 +- src/client/views/nodes/VideoBox.tsx | 7 +- src/client/views/nodes/WebBox.tsx | 3 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 12 +- src/client/views/pdf/PDFViewer.tsx | 6 +- src/client/views/webcam/DashWebRTCVideo.tsx | 4 +- 23 files changed, 258 insertions(+), 478 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index f810361c6..9a6121d20 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -1,5 +1,4 @@ import React = require("react"); -import { observer } from "mobx-react"; import { observable, action } from "mobx"; import "./AntimodeMenu.scss"; diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 1ba9fcc32..c398b2633 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -2,8 +2,6 @@ import { Doc, Opt, DataSym, DocListCast } from '../../fields/Doc'; import { Touchable } from './Touchable'; import { computed, action, observable } from 'mobx'; import { Cast, BoolCast, ScriptCast } from '../../fields/Types'; -import { listSpec } from '../../fields/Schema'; -import { InkingControl } from './InkingControl'; import { InkTool } from '../../fields/InkField'; import { InteractionUtils } from '../util/InteractionUtils'; import { List } from '../../fields/List'; @@ -59,7 +57,7 @@ export function ViewBoxBaseComponent

(schemaCtor: lookupField = (field: string) => ScriptCast(this.layoutDoc.lookupField)?.script.run({ self: this.layoutDoc, data: this.rootDoc, field: field, container: this.props.ContainingCollectionDoc }).result; - active = (outsideReaction?: boolean) => !this.props.Document.isBackground && (this.props.rootSelected(outsideReaction) || this.props.isSelected(outsideReaction) || this.props.renderDepth === 0 || this.layoutDoc.forceActive);// && !InkingControl.Instance.selectedTool; // bcz: inking state shouldn't affect static tools + active = (outsideReaction?: boolean) => !this.props.Document.isBackground && (this.props.rootSelected(outsideReaction) || this.props.isSelected(outsideReaction) || this.props.renderDepth === 0 || this.layoutDoc.forceActive);// && !Doc.selectedTool; // bcz: inking state shouldn't affect static tools protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; } return Component; @@ -148,9 +146,9 @@ export function ViewBoxAnnotatableComponent

this.props.whenActiveChanged(this._isChildActive = isActive)); - active = (outsideReaction?: boolean) => ((InkingControl.Instance.selectedTool === InkTool.None && !this.props.Document.isBackground) && + active = (outsideReaction?: boolean) => ((Doc.selectedTool === InkTool.None && !this.props.Document.isBackground) && (this.props.rootSelected(outsideReaction) || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0 || BoolCast((this.layoutDoc as any).forceActive)) ? true : false) - annotationsActive = (outsideReaction?: boolean) => (InkingControl.Instance.selectedTool !== InkTool.None || (this.props.Document.isBackground && this.props.active()) || + annotationsActive = (outsideReaction?: boolean) => (Doc.selectedTool !== InkTool.None || (this.props.Document.isBackground && this.props.active()) || (this.props.Document.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) } return Component; diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 5714970c1..4ea75d7d7 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -1,38 +1,30 @@ import React = require("react"); -import { Touchable } from "./Touchable"; +import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import "./GestureOverlay.scss"; -import { computed, observable, action, runInAction, IReactionDisposer, reaction, flow, trace } from "mobx"; +import { Doc } from "../../fields/Doc"; +import { InkData, InkTool } from "../../fields/InkField"; +import { Cast, FieldValue, NumCast } from "../../fields/Types"; +import MobileInkOverlay from "../../mobile/MobileInkOverlay"; +import MobileInterface from "../../mobile/MobileInterface"; import { GestureUtils } from "../../pen-gestures/GestureUtils"; +import { MobileInkOverlayContent } from "../../server/Message"; +import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero } from "../../Utils"; +import { CognitiveServices } from "../cognitive_services/CognitiveServices"; +import { DocServer } from "../DocServer"; +import { DocUtils } from "../documents/Documents"; +import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { InteractionUtils } from "../util/InteractionUtils"; -import { InkingControl } from "./InkingControl"; -import { InkTool, InkData } from "../../fields/InkField"; -import { Doc } from "../../fields/Doc"; import { LinkManager } from "../util/LinkManager"; -import { DocUtils, Docs } from "../documents/Documents"; -import { undoBatch } from "../util/UndoManager"; import { Scripting } from "../util/Scripting"; -import { FieldValue, Cast, NumCast, BoolCast } from "../../fields/Types"; -import { CurrentUserUtils } from "../util/CurrentUserUtils"; -import HorizontalPalette from "./Palette"; -import { Utils, emptyPath, emptyFunction, returnFalse, returnOne, returnEmptyString, returnTrue, numberRange, returnZero } from "../../Utils"; -import { DocumentView } from "./nodes/DocumentView"; import { Transform } from "../util/Transform"; -import { DocumentContentsView } from "./nodes/DocumentContentsView"; -import { CognitiveServices } from "../cognitive_services/CognitiveServices"; -import { DocServer } from "../DocServer"; -import htmlToImage from "html-to-image"; -import { ScriptField } from "../../fields/ScriptField"; -import { listSpec } from "../../fields/Schema"; -import { List } from "../../fields/List"; -import { CollectionViewType } from "./collections/CollectionView"; -import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; -import MobileInterface from "../../mobile/MobileInterface"; -import { MobileInkOverlayContent } from "../../server/Message"; -import MobileInkOverlay from "../../mobile/MobileInkOverlay"; +import "./GestureOverlay.scss"; +import { InkingControl } from "./InkingControl"; +import { DocumentView } from "./nodes/DocumentView"; import { RadialMenu } from "./nodes/RadialMenu"; -import { SelectionManager } from "../util/SelectionManager"; -import InkOptionsMenu from "./collections/collectionFreeForm/InkOptionsMenu"; +import HorizontalPalette from "./Palette"; +import { Touchable } from "./Touchable"; +import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; +import { InkingStroke } from "./InkingStroke"; @observer @@ -500,7 +492,7 @@ export default class GestureOverlay extends Touchable { @action onPointerDown = (e: React.PointerEvent) => { - if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) { + if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (Doc.selectedTool === InkTool.Highlighter || Doc.selectedTool === InkTool.Pen)) { this._points.push({ X: e.clientX, Y: e.clientY }); e.stopPropagation(); e.preventDefault(); @@ -514,7 +506,7 @@ export default class GestureOverlay extends Touchable { @action onPointerMove = (e: PointerEvent) => { - if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) { + if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (Doc.selectedTool === InkTool.Highlighter || Doc.selectedTool === InkTool.Pen)) { this._points.push({ X: e.clientX, Y: e.clientY }); e.stopPropagation(); e.preventDefault(); @@ -585,12 +577,11 @@ export default class GestureOverlay extends Touchable { //push first points to so interactionUtil knows pointer is up this._points.push({ X: this._points[0].X, Y: this._points[0].Y }); if (MobileInterface.Instance && MobileInterface.Instance.drawingInk) { - const { selectedColor, selectedWidth } = InkingControl.Instance; DocServer.Mobile.dispatchGesturePoints({ points: this._points, bounds: B, - color: selectedColor, - width: selectedWidth + color: InkingStroke.InkColor, + width: InkingStroke.InkWidth }); } @@ -633,21 +624,11 @@ export default class GestureOverlay extends Touchable { } } //if any of the shape is activated in the InkOptionsMenu - else if (InkOptionsMenu.Instance._circle || InkOptionsMenu.Instance._triangle || InkOptionsMenu.Instance._rectangle || InkOptionsMenu.Instance._line || InkOptionsMenu.Instance._arrow) { - if (InkOptionsMenu.Instance._circle) { - this.makePolygon("circle", false); - } else if (InkOptionsMenu.Instance._triangle) { - this.makePolygon("triangle", false); - } else if (InkOptionsMenu.Instance._rectangle) { - this.makePolygon("rectangle", false); - } else if (InkOptionsMenu.Instance._line) { - this.makePolygon("line", false); - } else if (InkOptionsMenu.Instance._arrow) { - this.makePolygon("arrow", false); - } + else if (InkingStroke.InkShape) { + this.makePolygon(InkingStroke.InkShape, false); this.dispatchGesture(GestureUtils.Gestures.Stroke); this._points = []; - InkOptionsMenu.Instance.allFalse(); + InkingStroke.InkShape = ""; } // if we're not drawing in a toolglass try to recognize as gesture else { @@ -827,11 +808,11 @@ export default class GestureOverlay extends Touchable { [this._strokes.map(l => { const b = this.getBounds(l); return - {InteractionUtils.CreatePolyline(l, b.left, b.top, InkingControl.Instance.selectedColor, InkingControl.Instance.selectedWidth, InkingControl.Instance.selectedBezier)} + {InteractionUtils.CreatePolyline(l, b.left, b.top, InkingStroke.InkColor, InkingStroke.InkWidth, InkingStroke.InkBezierApprox, 1, 1, InkingStroke.InkShape)} ; }), this._points.length <= 1 ? (null) : - {InteractionUtils.CreatePolyline(this._points, B.left, B.top, InkingControl.Instance.selectedColor, InkingControl.Instance.selectedWidth, InkingControl.Instance.selectedBezier)} + {InteractionUtils.CreatePolyline(this._points, B.left, B.top, InkingStroke.InkColor, InkingStroke.InkWidth, InkingStroke.InkBezierApprox, 1, 1, InkingStroke.InkShape)} ] ]; } @@ -921,15 +902,15 @@ Scripting.addGlobal(function setToolglass(tool: any) { }); Scripting.addGlobal(function setPen(width: any, color: any) { runInAction(() => { - GestureOverlay.Instance.SavedColor = InkingControl.Instance.selectedColor; - InkingControl.Instance.updateSelectedColor(color); - GestureOverlay.Instance.SavedWidth = InkingControl.Instance.selectedWidth; + GestureOverlay.Instance.SavedColor = InkingStroke.InkColor; + InkingControl.Instance.switchColor(color); + GestureOverlay.Instance.SavedWidth = InkingStroke.InkWidth; InkingControl.Instance.switchWidth(width); }); }); Scripting.addGlobal(function resetPen() { runInAction(() => { - InkingControl.Instance.updateSelectedColor(GestureOverlay.Instance.SavedColor ?? "rgb(0, 0, 0)"); + InkingControl.Instance.switchColor(GestureOverlay.Instance.SavedColor ?? "rgb(0, 0, 0)"); InkingControl.Instance.switchWidth(GestureOverlay.Instance.SavedWidth ?? "2"); }); }); diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index 83109db1c..349bc6ffc 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -1,22 +1,12 @@ -import { action, computed, observable } from "mobx"; -import { ColorState } from 'react-color'; +import { action, observable } from "mobx"; import { Doc } from "../../fields/Doc"; import { InkTool } from "../../fields/InkField"; -import { FieldValue, NumCast, StrCast } from "../../fields/Types"; import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { Scripting } from "../util/Scripting"; -import { SelectionManager } from "../util/SelectionManager"; -import { undoBatch } from "../util/UndoManager"; -import GestureOverlay from "./GestureOverlay"; -import { FormattedTextBox } from "./nodes/formattedText/FormattedTextBox"; -import InkOptionsMenu from "./collections/collectionFreeForm/InkOptionsMenu"; +import { InkingStroke } from "./InkingStroke"; export class InkingControl { @observable static Instance: InkingControl; - @computed private get _selectedTool(): InkTool { return FieldValue(NumCast(Doc.UserDoc().inkTool)) ?? InkTool.None; } - @computed private get _selectedColor(): string { return CurrentUserUtils.ActivePen ? FieldValue(StrCast(CurrentUserUtils.ActivePen.backgroundColor)) ?? "rgb(0, 0, 0)" : "rgb(0, 0, 0)"; } - @computed private get _selectedWidth(): string { return FieldValue(StrCast(Doc.UserDoc().inkWidth)) ?? "2"; } - @computed private get _selectedBezier(): string { return FieldValue(StrCast(Doc.UserDoc().inkBezier)) ?? "2"; } @observable public _open: boolean = false; constructor() { InkingControl.Instance = this; @@ -26,110 +16,27 @@ export class InkingControl { // this._selectedTool = tool; Doc.UserDoc().inkTool = tool; }); - decimalToHexString(number: number) { - if (number < 0) { - number = 0xFFFFFFFF + number + 1; - } - return (number < 16 ? "0" : "") + number.toString(16).toUpperCase(); - } - @action - inkOptionsMenuChangeColor = (color: string) => { - const col: ColorState = { - hex: color, hsl: { a: 0, h: 0, s: 0, l: 0, source: "" }, hsv: { a: 0, h: 0, s: 0, v: 0, source: "" }, - rgb: { a: 0, r: 0, b: 0, g: 0, source: "" }, oldHue: 0, source: "", - }; - this.switchColor(col); - InkOptionsMenu.Instance._colorBt = false; - } - - @undoBatch - switchColor = action((color: ColorState): void => { - Doc.UserDoc().backgroundColor = color.hex.startsWith("#") ? - color.hex + (color.rgb.a ? this.decimalToHexString(Math.round(color.rgb.a * 255)) : "ff") : color.hex; - InkOptionsMenu.Instance._color = StrCast(Doc.UserDoc().backgroundColor); - CurrentUserUtils.ActivePen && (CurrentUserUtils.ActivePen.backgroundColor = color.hex); - - if (InkingControl.Instance.selectedTool === InkTool.None) { - const selected = SelectionManager.SelectedDocuments(); - selected.map(view => { - const targetDoc = view.props.Document.dragFactory instanceof Doc ? view.props.Document.dragFactory : - view.props.Document.layout instanceof Doc ? view.props.Document.layout : - view.props.Document.isTemplateForField ? view.props.Document : Doc.GetProto(view.props.Document); - if (targetDoc) { - if (StrCast(Doc.Layout(view.props.Document).layout).indexOf("FormattedTextBox") !== -1 && FormattedTextBox.HadSelection) { - Doc.Layout(view.props.Document).color = Doc.UserDoc().bacgroundColor; - } else { - Doc.Layout(view.props.Document)._backgroundColor = Doc.UserDoc().backgroundColor; // '_backgroundColor' is template specific. 'backgroundColor' would apply to all templates, but has no UI at the moment - } - } - }); - } - }); @action switchWidth = (width: string): void => { - // this._selectedWidth = width; if (!isNaN(parseInt(width))) { - Doc.UserDoc().inkWidth = width; + CurrentUserUtils.ActivePen && (CurrentUserUtils.ActivePen.inkWidth = InkingStroke.InkWidth = width); } - InkOptionsMenu.Instance._widthBt = false; } @action switchBezier = (bezier: string): void => { - if (!isNaN(parseInt(bezier))) { - Doc.UserDoc().inkBezier = bezier; - } + CurrentUserUtils.ActivePen && (CurrentUserUtils.ActivePen.inkBezier = InkingStroke.InkBezierApprox = isNaN(parseInt(bezier)) ? "" : bezier); } @action - inkOptionsMenuChangeBezier = (e: React.PointerEvent): void => { - if (InkOptionsMenu.Instance._bezierBt === true) { - Doc.UserDoc().inkBezier = "300"; - } else { - Doc.UserDoc().inkBezier = "0"; - } - } - - @computed - get selectedTool() { - return this._selectedTool; - } - - @computed - get selectedColor() { - return this._selectedColor; - } - - @action - updateSelectedColor(value: string) { - // this._selectedColor = value; - Doc.UserDoc().inkColor = value; - } - - @computed - get selectedWidth() { - return this._selectedWidth; - } - - @computed - get selectedBezier() { - return this._selectedBezier; + switchColor(value: string) { + CurrentUserUtils.ActivePen && (CurrentUserUtils.ActivePen.inkColor = InkingStroke.InkColor = value); } } -Scripting.addGlobal(function activatePen(pen: any, width: any, color: any) { - InkingControl.Instance.switchTool(pen ? InkTool.Pen : InkTool.None); InkingControl.Instance.switchWidth(width); InkingControl.Instance.updateSelectedColor(color); - //setup InkOptionsMenu(change jumpto value if necessary.Currenlty hardcoded to 300,300) - pen ? InkOptionsMenu.Instance.jumpTo(300, 300) : InkOptionsMenu.Instance.fadeOut(true); - InkOptionsMenu.Instance.changeColor = InkingControl.Instance.inkOptionsMenuChangeColor; - InkOptionsMenu.Instance.changeBezier = InkingControl.Instance.inkOptionsMenuChangeBezier; - InkOptionsMenu.Instance.changeWidth = InkingControl.Instance.switchWidth; - InkOptionsMenu.Instance._widthSelected = width; - InkOptionsMenu.Instance._color = color; -}); -Scripting.addGlobal(function activateBrush(pen: any, width: any, color: any) { InkingControl.Instance.switchTool(pen ? InkTool.Highlighter : InkTool.None); InkingControl.Instance.switchWidth(width); InkingControl.Instance.updateSelectedColor(color); }); +Scripting.addGlobal(function activateBrush(pen: any, width: any, color: any) { InkingControl.Instance.switchTool(pen ? InkTool.Highlighter : InkTool.None); InkingControl.Instance.switchWidth(width); InkingControl.Instance.switchColor(color); }); Scripting.addGlobal(function activateEraser(pen: any) { return InkingControl.Instance.switchTool(pen ? InkTool.Eraser : InkTool.None); }); Scripting.addGlobal(function activateStamp(pen: any) { return InkingControl.Instance.switchTool(pen ? InkTool.Stamp : InkTool.None); }); Scripting.addGlobal(function deactivateInk() { return InkingControl.Instance.switchTool(InkTool.None); }); Scripting.addGlobal(function setInkWidth(width: any) { return InkingControl.Instance.switchWidth(width); }); -Scripting.addGlobal(function setInkColor(color: any) { return InkingControl.Instance.updateSelectedColor(color); }); \ No newline at end of file +Scripting.addGlobal(function setInkColor(color: any) { return InkingControl.Instance.switchColor(color); }); \ No newline at end of file diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 3dc0a5b20..78d729eee 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -1,19 +1,19 @@ +import { library } from "@fortawesome/fontawesome-svg-core"; +import { faPaintBrush } from "@fortawesome/free-solid-svg-icons"; +import { observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import { documentSchema } from "../../fields/documentSchemas"; import { InkData, InkField, InkTool } from "../../fields/InkField"; import { makeInterface } from "../../fields/Schema"; -import { Cast, StrCast, NumCast } from "../../fields/Types"; +import { Cast, StrCast } from "../../fields/Types"; +import { TraceMobx } from "../../fields/util"; +import { CognitiveServices } from "../cognitive_services/CognitiveServices"; +import { InteractionUtils } from "../util/InteractionUtils"; +import { ContextMenu } from "./ContextMenu"; import { ViewBoxBaseComponent } from "./DocComponent"; -import { InkingControl } from "./InkingControl"; import "./InkingStroke.scss"; import { FieldView, FieldViewProps } from "./nodes/FieldView"; import React = require("react"); -import { TraceMobx } from "../../fields/util"; -import { InteractionUtils } from "../util/InteractionUtils"; -import { ContextMenu } from "./ContextMenu"; -import { CognitiveServices } from "../cognitive_services/CognitiveServices"; -import { faPaintBrush } from "@fortawesome/free-solid-svg-icons"; -import { library } from "@fortawesome/fontawesome-svg-core"; library.add(faPaintBrush); @@ -23,6 +23,22 @@ const InkDocument = makeInterface(documentSchema); @observer export class InkingStroke extends ViewBoxBaseComponent(InkDocument) { public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); } + @observable public static InkColor: string; + @observable public static InkWidth: string; + @observable public static InkBezierApprox: string; + @observable public static InkShape: string; + + constructor(props: any) { + super(props); + if (InkingStroke.InkBezierApprox === undefined) { + runInAction(() => { + InkingStroke.InkBezierApprox = ""; + InkingStroke.InkWidth = "1"; + InkingStroke.InkColor = "black"; + InkingStroke.InkShape = ""; + }); + } + } private analyzeStrokes = () => { const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? []; @@ -38,22 +54,19 @@ export class InkingStroke extends ViewBoxBaseComponent { ContextMenu.Instance.addItem({ description: "Analyze Stroke", diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index dd65681d4..33150ab7c 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -3,7 +3,7 @@ import { observer } from 'mobx-react'; import "normalize.css"; import * as React from 'react'; import "./PreviewCursor.scss"; -import { Docs } from '../documents/Documents'; +import { Docs, DocUtils } from '../documents/Documents'; import { Doc } from '../../fields/Doc'; import { Transform } from "../util/Transform"; import { DocServer } from '../DocServer'; @@ -65,7 +65,7 @@ export class PreviewCursor extends React.Component<{}> { count++; if (doc instanceof Doc) { i === 1 && (first = doc); - const alias = Doc.MakeClone(doc); + const alias = DocUtils.MakeClone(doc); const deltaX = NumCast(doc.x) - NumCast(first!.x) - ptx; const deltaY = NumCast(doc.y) - NumCast(first!.y) - pty; alias.x = newPoint[0] + deltaX; diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx index 10d023d83..5e48d5ffb 100644 --- a/src/client/views/Touchable.tsx +++ b/src/client/views/Touchable.tsx @@ -1,8 +1,6 @@ import * as React from 'react'; import { action } from 'mobx'; import { InteractionUtils } from '../util/InteractionUtils'; -import { SelectionManager } from '../util/SelectionManager'; -import { RadialMenu } from './nodes/RadialMenu'; const HOLD_DURATION = 1000; diff --git a/src/client/views/collections/CollectionMapView.tsx b/src/client/views/collections/CollectionMapView.tsx index a0b7cd8a8..cfec3a6bc 100644 --- a/src/client/views/collections/CollectionMapView.tsx +++ b/src/client/views/collections/CollectionMapView.tsx @@ -42,7 +42,7 @@ const query = async (data: string | google.maps.LatLngLiteral) => { }; @observer -class CollectionMapView extends CollectionSubView & { google: any }>(MapSchema) { +export class CollectionMapView extends CollectionSubView & { google: any }>(MapSchema) { private _cancelAddrReq = new Map(); private _cancelLocReq = new Map(); diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 423eb1d90..b60419258 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -6,27 +6,19 @@ import { Id } from "../../../fields/FieldSymbols"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; import { ScriptField } from "../../../fields/ScriptField"; +import { WebField } from "../../../fields/URLField"; import { Cast, ScriptCast, NumCast } from "../../../fields/Types"; import { GestureUtils } from "../../../pen-gestures/GestureUtils"; -import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { Upload } from "../../../server/SharedMediaTypes"; import { Utils } from "../../../Utils"; -import { GooglePhotos } from "../../apis/google_docs/GooglePhotosClientUtils"; import { DocServer } from "../../DocServer"; -import { Docs, DocumentOptions, DocUtils } from "../../documents/Documents"; -import { DocumentType } from "../../documents/DocumentTypes"; import { Networking } from "../../Network"; -import { DragManager, dropActionType } from "../../util/DragManager"; import { ImageUtils } from "../../util/Import & Export/ImageUtils"; import { InteractionUtils } from "../../util/InteractionUtils"; import { undoBatch, UndoManager } from "../../util/UndoManager"; import { DocComponent } from "../DocComponent"; import { FieldViewProps } from "../nodes/FieldView"; -import { FormattedTextBox, GoogleRef } from "../nodes/formattedText/FormattedTextBox"; -import { CollectionView } from "./CollectionView"; import React = require("react"); -import { SelectionManager } from "../../util/SelectionManager"; -import { WebField } from "../../../fields/URLField"; export interface CollectionViewProps extends FieldViewProps { addDocument: (document: Doc | Doc[]) => boolean; @@ -405,7 +397,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: const stringContents = await new Promise(resolve => item.getAsString(resolve)); const type = "html";// (await rp.head(Utils.CorsProxy(stringContents)))["content-type"]; if (type) { - const doc = await Docs.Get.DocumentFromType(type, stringContents, options); + const doc = await DocUtils.DocumentFromType(type, stringContents, options); doc && generatedDocuments.push(doc); } } @@ -435,7 +427,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: } const full = { ...options, _width: 400, title: name }; const pathname = Utils.prepend(result.accessPaths.agnostic.client); - const doc = await Docs.Get.DocumentFromType(type, pathname, full); + const doc = await DocUtils.DocumentFromType(type, pathname, full); if (!doc) { continue; } @@ -450,9 +442,9 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: generatedDocuments.push(doc); } if (generatedDocuments.length) { - const set = generatedDocuments.length > 1 && generatedDocuments.map(d => Doc.iconify(d)); + const set = generatedDocuments.length > 1 && generatedDocuments.map(d => DocUtils.iconify(d)); if (set) { - addDocument(Doc.pileup(generatedDocuments, options.x!, options.y!)!); + addDocument(DocUtils.pileup(generatedDocuments, options.x!, options.y!)!); } else { generatedDocuments.forEach(addDocument); } @@ -469,3 +461,10 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: return CollectionSubView; } +import { DragManager, dropActionType } from "../../util/DragManager"; +import { Docs, DocumentOptions, DocUtils } from "../../documents/Documents"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; +import { DocumentType } from "../../documents/DocumentTypes"; +import { FormattedTextBox, GoogleRef } from "../nodes/formattedText/FormattedTextBox"; +import { CollectionView } from "./CollectionView"; +import { SelectionManager } from "../../util/SelectionManager"; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index b2e1c0f73..e891c4274 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -757,7 +757,7 @@ export class CollectionTreeView extends CollectionSubView UndoManager.RunInBatch(() => Doc.makeCustomViewClicked(this.props.Document, undefined, "onCheckedClick"), "edit onCheckedClick"), icon: "edit" + description: "Edit onChecked Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onCheckedClick"), "edit onCheckedClick"), icon: "edit" }); !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index fecba32c5..873f61331 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -14,36 +14,16 @@ import { BoolCast, Cast, NumCast, StrCast, ScriptCast } from '../../../fields/Ty import { ImageField } from '../../../fields/URLField'; import { TraceMobx } from '../../../fields/util'; import { Utils, setupMoveUpEvents, returnFalse, returnZero, emptyPath, emptyFunction, returnOne } from '../../../Utils'; -import { DocumentType } from '../../documents/DocumentTypes'; import { ImageUtils } from '../../util/Import & Export/ImageUtils'; import { ContextMenu } from "../ContextMenu"; import { FieldView, FieldViewProps } from '../nodes/FieldView'; import { ScriptBox } from '../ScriptBox'; import { Touchable } from '../Touchable'; -import { CollectionCarouselView } from './CollectionCarouselView'; -import { CollectionDockingView } from "./CollectionDockingView"; -import { AddCustomFreeFormLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; -import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; -import { CollectionLinearView } from './CollectionLinearView'; -import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView'; -import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView'; -import { CollectionSchemaView } from "./CollectionSchemaView"; -import { CollectionStackingView } from './CollectionStackingView'; -import { CollectionStaffView } from './CollectionStaffView'; -import { SubCollectionViewProps } from './CollectionSubView'; -import { CollectionTimeView } from './CollectionTimeView'; -import { CollectionTreeView } from "./CollectionTreeView"; -import './CollectionView.scss'; -import { CollectionViewBaseChrome } from './CollectionViewChromes'; -import { CurrentUserUtils } from '../../util/CurrentUserUtils'; import { Id } from '../../../fields/FieldSymbols'; import { listSpec } from '../../../fields/Schema'; -import { Docs } from '../../documents/Documents'; import { ScriptField, ComputedField } from '../../../fields/ScriptField'; import { InteractionUtils } from '../../util/InteractionUtils'; import { ObjectField } from '../../../fields/ObjectField'; -import CollectionMapView from './CollectionMapView'; -import { CollectionPileView } from './CollectionPileView'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -519,4 +499,24 @@ export class CollectionView extends Touchable); } -} \ No newline at end of file +} +import { SubCollectionViewProps } from './CollectionSubView'; +import { CollectionCarouselView } from './CollectionCarouselView'; +import { CollectionDockingView } from "./CollectionDockingView"; +import { AddCustomFreeFormLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; +import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; +import { CollectionLinearView } from './CollectionLinearView'; +import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView'; +import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView'; +import { CollectionSchemaView } from "./CollectionSchemaView"; +import { CollectionStackingView } from './CollectionStackingView'; +import { CollectionStaffView } from './CollectionStaffView'; +import { CollectionTimeView } from './CollectionTimeView'; +import { CollectionTreeView } from "./CollectionTreeView"; +import { CollectionMapView } from './CollectionMapView'; +import { CollectionPileView } from './CollectionPileView'; +import './CollectionView.scss'; +import { CollectionViewBaseChrome } from './CollectionViewChromes'; +import { CurrentUserUtils } from '../../util/CurrentUserUtils'; +import { DocumentType } from '../../documents/DocumentTypes'; +import { Docs } from '../../documents/Documents'; \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index fb7784b58..576c0c560 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -29,7 +29,6 @@ import { undoBatch, UndoManager } from "../../../util/UndoManager"; import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss"; import { ContextMenu } from "../../ContextMenu"; import { ContextMenuProps } from "../../ContextMenuItem"; -import { InkingControl } from "../../InkingControl"; import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView"; import { DocumentViewProps, DocumentView } from "../../nodes/DocumentView"; import { FormattedTextBox } from "../../nodes/formattedText/FormattedTextBox"; @@ -46,7 +45,7 @@ import React = require("react"); import { CollectionViewType } from "../CollectionView"; import { Timeline } from "../../animationtimeline/Timeline"; import { SnappingManager } from "../../../util/SnappingManager"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { InkingStroke } from "../../InkingStroke"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); @@ -391,7 +390,7 @@ export class CollectionFreeFormView extends CollectionSubView { - if (e.nativeEvent.cancelBubble || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) || InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) { + if (e.nativeEvent.cancelBubble || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) || InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (Doc.selectedTool === InkTool.Highlighter || Doc.selectedTool === InkTool.Pen)) { return; } this._hitCluster = this.props.Document.useClusters ? this.pickCluster(this.getTransform().transformPoint(e.clientX, e.clientY)) !== -1 : false; @@ -408,7 +407,7 @@ export class CollectionFreeFormView extends CollectionSubView void = unimplementedFunction; - public changeBezier: (e: React.PointerEvent) => void = unimplementedFunction; - public changeWidth: (color: string) => void = unimplementedFunction; - - private _palette: (string)[]; - private _width: (string)[]; - - - public _circle: boolean; - public _triangle: boolean; - public _rectangle: boolean; - public _arrow: boolean; - public _line: boolean; - public _widthSelected: string; - - @observable public _circleBt: boolean; - @observable public _triangleBt: boolean; - @observable public _rectangleBt: boolean; - @observable public _arrowBt: boolean; - @observable public _lineBt: boolean; - @observable public _colorBt: boolean; - @observable public _color: string; - @observable public _bezierBt: boolean; - @observable public _widthBt: boolean; + private _palette = ["D0021B", "F5A623", "F8E71C", "8B572A", "7ED321", "417505", "9013FE", "4A90E2", "50E3C2", "B8E986", "000000", "4A4A4A", "9B9B9B", "FFFFFF"]; + private _width = ["1", "5", "10", "100", "200", "300"]; + private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"]; + private _icons = ["O", "∆", "ロ", "➜", "-"]; + @observable _colorBtn = false; + @observable _widthBtn = false; constructor(props: Readonly<{}>) { super(props); InkOptionsMenu.Instance = this; - this._canFade = false; - - this._circle = false; - this._triangle = false; - this._rectangle = false; - this._arrow = false; - this._line = false; - this._circleBt = false; - this._triangleBt = false; - this._rectangleBt = false; - this._arrowBt = false; - this._lineBt = false; - this._colorBt = false; - this._bezierBt = false; - this._widthBt = false; - - this._color = ""; - this._widthSelected = ""; - - - this._palette = [ - "D0021B", "F5A623", "F8E71C", "8B572A", "7ED321", "417505", "9013FE", "4A90E2", "50E3C2", "B8E986", "000000", "4A4A4A", "9B9B9B", "FFFFFF", - ]; - - this._width = [ - "1", "5", "10", "100", "200", "300" - ]; - - } - - - - drag = (e: React.PointerEvent) => { - this.dragStart(e); + this._canFade = false; // don't let the inking menu fade away } - - - - - @action - toggleCircle = (e: React.PointerEvent) => { - const curr = this._circle; - this.allFalse(); - curr ? this._circle = false : this._circle = true; - this._circleBt = this._circle; - } - @action - toggleTriangle = (e: React.PointerEvent) => { - const curr = this._triangle; - this.allFalse(); - curr ? this._triangle = false : this._triangle = true; - this._triangleBt = this._triangle; - } - @action - toggleRectangle = (e: React.PointerEvent) => { - const curr = this._rectangle; - this.allFalse(); - curr ? this._rectangle = false : this._rectangle = true; - this._rectangleBt = this._rectangle; - } - @action - toggleArrow = (e: React.PointerEvent) => { - const curr = this._arrow; - this.allFalse(); - curr ? this._arrow = false : this._arrow = true; - this._arrowBt = this._arrow; - } @action - toggleLine = (e: React.PointerEvent) => { - const curr = this._line; - this.allFalse(); - curr ? this._line = false : this._line = true; - this._lineBt = this._line; + changeColor = (color: string) => { + const col: ColorState = { + hex: color, hsl: { a: 0, h: 0, s: 0, l: 0, source: "" }, hsv: { a: 0, h: 0, s: 0, v: 0, source: "" }, + rgb: { a: 0, r: 0, b: 0, g: 0, source: "" }, oldHue: 0, source: "", + }; + ColorBox.switchColor(col); } @action - changeBezierClick = (e: React.PointerEvent) => { - const curr = this._bezierBt; - this.allFalse(); - curr ? this._bezierBt = false : this._bezierBt = true; - this.changeBezier(e); - } - - @action - changeWidthClick = (e: React.PointerEvent) => { - this._widthBt ? this._widthBt = false : this._widthBt = true; - } - @action - changeColorClick = (e: React.PointerEvent) => { - this._colorBt ? this._colorBt = false : this._colorBt = true; - } - - allFalse = () => { - this._circle = false; - this._triangle = false; - this._rectangle = false; - this._arrow = false; - this._line = false; - this._circleBt = false; - this._triangleBt = false; - this._rectangleBt = false; - this._arrowBt = false; - this._lineBt = false; - this._bezierBt = false; + changeBezier = (e: React.PointerEvent): void => { + InkingControl.Instance.switchBezier(!InkingStroke.InkBezierApprox ? "300" : ""); } render() { - var widthPicker; - if (this._widthBt) { + var widthPicker = ; + if (this._widthBtn) { widthPicker =

- + {widthPicker} {this._width.map(wid => { return ; - })}
; - } else { - widthPicker = ; } - var colorPicker; - if (this._colorBt) { + var colorPicker = ; + if (this._colorBtn) { colorPicker =
- + {colorPicker} {this._palette.map(color => { return ; })}
; - } else { - colorPicker = ; } - const buttons = [ - , - , - , - , - , - , + <> + {this._buttons.map((btn, i) => )}, + , , widthPicker, @@ -271,4 +119,15 @@ export default class InkOptionsMenu extends AntimodeMenu { ]; return this.getElement(buttons); } -} \ No newline at end of file +} +Scripting.addGlobal(function activatePen(pen: any) { + InkingControl.Instance.switchTool(pen ? InkTool.Pen : InkTool.None); + if (pen) { + InkingControl.Instance.switchWidth(StrCast(pen.inkWidth, "1")); + InkingControl.Instance.switchColor(StrCast(pen.inkColor, "black")); + InkingControl.Instance.switchBezier(StrCast(pen.inkBezier, "")); + InkOptionsMenu.Instance.jumpTo(300, 300); + } else { + InkOptionsMenu.Instance.fadeOut(true); + } +}); \ No newline at end of file diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 2ddf2c74a..762c57ae9 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -1,6 +1,6 @@ import React = require("react"); import { observer } from "mobx-react"; -import { SketchPicker } from 'react-color'; +import { SketchPicker, ColorState } from 'react-color'; import { documentSchema } from "../../../fields/documentSchemas"; import { makeInterface } from "../../../fields/Schema"; import { StrCast } from "../../../fields/Types"; @@ -10,6 +10,12 @@ import { ViewBoxBaseComponent } from "../DocComponent"; import { InkingControl } from "../InkingControl"; import "./ColorBox.scss"; import { FieldView, FieldViewProps } from './FieldView'; +import { InkingStroke } from "../InkingStroke"; +import { Doc } from "../../../fields/Doc"; +import { InkTool } from "../../../fields/InkField"; +import { undoBatch } from "../../util/UndoManager"; +import { action } from "mobx"; +import { FormattedTextBox } from "./formattedText/FormattedTextBox"; type ColorDocument = makeInterface<[typeof documentSchema]>; const ColorDocument = makeInterface(documentSchema); @@ -18,20 +24,52 @@ const ColorDocument = makeInterface(documentSchema); export class ColorBox extends ViewBoxBaseComponent(ColorDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ColorBox, fieldKey); } + static decimalToHexString(number: number) { + if (number < 0) { + number = 0xFFFFFFFF + number + 1; + } + return (number < 16 ? "0" : "") + number.toString(16).toUpperCase(); + } + + @undoBatch + @action + static switchColor(color: ColorState) { + Doc.UserDoc().backgroundColor = color.hex.startsWith("#") ? + color.hex + (color.rgb.a ? ColorBox.decimalToHexString(Math.round(color.rgb.a * 255)) : "ff") : color.hex; + InkingStroke.InkColor = StrCast(Doc.UserDoc().backgroundColor); + CurrentUserUtils.ActivePen && (CurrentUserUtils.ActivePen.inkColor = color.hex); + + if (Doc.selectedTool === InkTool.None) { + const selected = SelectionManager.SelectedDocuments(); + selected.map(view => { + const targetDoc = view.props.Document.dragFactory instanceof Doc ? view.props.Document.dragFactory : + view.props.Document.layout instanceof Doc ? view.props.Document.layout : + view.props.Document.isTemplateForField ? view.props.Document : Doc.GetProto(view.props.Document); + if (targetDoc) { + if (StrCast(Doc.Layout(view.props.Document).layout).indexOf("FormattedTextBox") !== -1 && FormattedTextBox.HadSelection) { + Doc.Layout(view.props.Document).color = Doc.UserDoc().bacgroundColor; + } else { + Doc.Layout(view.props.Document)._backgroundColor = Doc.UserDoc().backgroundColor; // '_backgroundColor' is template specific. 'backgroundColor' would apply to all templates, but has no UI at the moment + } + } + }); + } + } + render() { const selDoc = SelectionManager.SelectedDocuments()?.[0]?.rootDoc; return
e.button === 0 && !e.ctrlKey && e.stopPropagation()} style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} > -
-
{InkingControl.Instance.selectedWidth ?? 2}
- ) => InkingControl.Instance.switchWidth(e.target.value)} /> -
{InkingControl.Instance.selectedBezier ?? 2}
- ) => InkingControl.Instance.switchBezier(e.target.value)} /> +
{InkingStroke.InkWidth ?? 2}
+ ) => InkingControl.Instance.switchWidth(e.target.value)} /> +
{InkingStroke.InkBezierApprox ?? 2}
+ ) => InkingControl.Instance.switchBezier(e.target.value)} />

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e245e045c..196e61a31 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -37,7 +37,6 @@ import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from '../ContextMenuItem'; import { DocComponent } from "../DocComponent"; import { EditableView } from '../EditableView'; -import { InkingControl } from '../InkingControl'; import { KeyphraseQueryView } from '../KeyphraseQueryView'; import { DocumentContentsView } from "./DocumentContentsView"; import "./DocumentView.scss"; @@ -330,7 +329,7 @@ export class DocumentView extends DocComponent(Docu } else func(); } else if (this.Document["onClick-rawScript"] && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes("ScriptingBox")) {// bcz: hack? don't edit a script if you're clicking on a scripting box itself const alias = Doc.MakeAlias(this.props.Document); - Doc.makeCustomViewClicked(alias, undefined, "onClick"); + DocUtils.makeCustomViewClicked(alias, undefined, "onClick"); this.props.addDocTab(alias, "onRight"); // UndoManager.RunInBatch(() => Doc.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"); //ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", e.clientX, e.clientY), "on button click"); @@ -513,7 +512,7 @@ export class DocumentView extends DocComponent(Docu // console.log(e.button) // console.log(e.nativeEvent) // continue if the event hasn't been canceled AND we are using a moues or this is has an onClick or onDragStart function (meaning it is a button document) - if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) { + if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || Doc.selectedTool === InkTool.Highlighter || Doc.selectedTool === InkTool.Pen)) { if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) { e.stopPropagation(); // TODO: check here for panning/inking @@ -544,7 +543,7 @@ export class DocumentView extends DocComponent(Docu onPointerMove = (e: PointerEvent): void => { if ((e as any).formattedHandled) { e.stopPropagation(); return; } - if ((InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) return; + if ((InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || Doc.selectedTool === InkTool.Highlighter || Doc.selectedTool === InkTool.Pen)) return; if (e.cancelBubble && this.active) { document.removeEventListener("pointermove", this.onPointerMove); // stop listening to pointerMove if something else has stopPropagated it (e.g., the MarqueeView) } @@ -728,7 +727,7 @@ export class DocumentView extends DocComponent(Docu onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" }); 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.Document.onClick ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); - onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => Doc.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); + 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" }); @@ -1091,14 +1090,14 @@ export class DocumentView extends DocComponent(Docu @computed get ignorePointerEvents() { return this.props.pointerEvents === false || (this.Document.isBackground && !this.isSelected() && !SnappingManager.GetIsDragging()) || - (this.Document.type === DocumentType.INK && InkingControl.Instance.selectedTool !== InkTool.None); + (this.Document.type === DocumentType.INK && Doc.selectedTool !== InkTool.None); } @undoBatch @action setCustomView = (custom: boolean, layout: string): void => { Doc.setNativeView(this.props.Document); if (custom) { - Doc.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined); + DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined); } } @observable _animateScalingTo = 0; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 6913dfbc7..cabf30c13 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -192,7 +192,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { const converter = (results: any) => { - return results.map((face: CognitiveServices.Image.Face) => Docs.Get.FromJson({ data: face, title: `Face: ${face.faceId}` })!); + return results.map((face: CognitiveServices.Image.Face) => Doc.Get.FromJson({ data: face, title: `Face: ${face.faceId}` })!); }; this.url && CognitiveServices.Image.Appliers.ProcessImage(this.dataDoc, [this.fieldKey + "-faces"], this.url, Service.Face, converter); } diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 9f1e99c77..81669dc2a 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -11,7 +11,6 @@ import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from "../collections/CollectionView"; -import { InkingControl } from "../InkingControl"; import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; import { ViewBoxBaseComponent } from "../DocComponent"; @@ -20,6 +19,7 @@ import { Docs } from "../../documents/Documents"; import { PrefetchProxy } from "../../../fields/Proxy"; import { ScriptField } from "../../../fields/ScriptField"; import { Scripting } from "../../util/Scripting"; +import { InkingStroke } from "../InkingStroke"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -293,7 +293,7 @@ export class PresBox extends ViewBoxBaseComponent selectElement = (doc: Doc) => this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight panelHeight = () => this.props.PanelHeight() - 20; - active = (outsideReaction?: boolean) => ((InkingControl.Instance.selectedTool === InkTool.None && !this.layoutDoc.isBackground) && + active = (outsideReaction?: boolean) => ((Doc.selectedTool === InkTool.None && !this.layoutDoc.isBackground) && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) render() { diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 29e3c008a..1184f32f1 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -5,21 +5,19 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, IReactionDisposer, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import * as rp from 'request-promise'; +import { Doc } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; -import { makeInterface, listSpec } from "../../../fields/Schema"; +import { listSpec, makeInterface } from "../../../fields/Schema"; import { Cast, NumCast } from "../../../fields/Types"; import { VideoField } from "../../../fields/URLField"; -import { emptyFunction, returnFalse, returnOne, Utils, returnZero } from "../../../Utils"; -import { Docs, DocUtils } from "../../documents/Documents"; +import { emptyFunction, returnFalse, returnOne, returnZero, Utils } from "../../../Utils"; +import { Docs } from "../../documents/Documents"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { ViewBoxBaseComponent } from "../DocComponent"; -import { InkingControl } from "../InkingControl"; import { FieldView, FieldViewProps } from './FieldView'; import "./ScreenshotBox.scss"; -import { Doc, WidthSym, HeightSym } from "../../../fields/Doc"; -import { OverlayView } from "../OverlayView"; const path = require('path'); type ScreenshotDocument = makeInterface<[typeof documentSchema]>; @@ -134,7 +132,7 @@ export class ScreenshotBox extends ViewBoxBaseComponentLoading
: