diff options
| -rw-r--r-- | src/client/documents/Documents.ts | 14 | ||||
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 103 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 8 | ||||
| -rw-r--r-- | src/fields/documentSchemas.ts | 3 |
4 files changed, 40 insertions, 88 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 26abd4c3c..72b716492 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -671,12 +671,12 @@ export namespace Docs { I.type = DocumentType.INK; I.layout = InkingStroke.LayoutString("data"); I.color = color; + I.fillColor = fillColor; I.strokeWidth = Number(strokeWidth); I.strokeBezier = strokeBezier; - I.fillColor = fillColor; - I.arrowStart = arrowStart; - I.arrowEnd = arrowEnd; - I.dash = dash; + I.strokeStartMarker = arrowStart; + I.strokeEndMarker = arrowEnd; + I.strokeDash = dash; I.tool = tool; I.title = "ink"; I.x = options.x; @@ -688,12 +688,6 @@ export namespace Docs { I.rotation = 0; I.data = new InkField(points); return I; - // return I; - // const doc = InstanceFromProto(Prototypes.get(DocumentType.INK), new InkField(points), options); - // doc.color = color; - // doc.strokeWidth = strokeWidth; - // doc.tool = tool; - // return doc; } export function PdfDocument(url: string, options: DocumentOptions = {}) { diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index fc8530811..768057c22 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -7,9 +7,8 @@ import { Cast, FieldValue, NumCast } from "../../fields/Types"; import MobileInkOverlay from "../../mobile/MobileInkOverlay"; import { GestureUtils } from "../../pen-gestures/GestureUtils"; import { MobileInkOverlayContent } from "../../server/Message"; -import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from "../../Utils"; +import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter, setupMoveUpEvents } 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"; @@ -23,7 +22,6 @@ import { RadialMenu } from "./nodes/RadialMenu"; import HorizontalPalette from "./Palette"; import { Touchable } from "./Touchable"; import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; -import HeightLabel from "./collections/collectionMulticolumn/MultirowHeightLabel"; import InkOptionsMenu from "./collections/collectionFreeForm/InkOptionsMenu"; @observer @@ -56,6 +54,7 @@ export default class GestureOverlay extends Touchable { @observable private showMobileInkOverlay: boolean = false; + private _overlayRef = React.createRef<HTMLDivElement>(); private _d1: Doc | undefined; private _inkToTextDoc: Doc | undefined; private _thumbDoc: Doc | undefined; @@ -498,39 +497,26 @@ export default class GestureOverlay extends Touchable { onPointerDown = (e: React.PointerEvent) => { if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (Doc.GetSelectedTool() === InkTool.Highlighter || Doc.GetSelectedTool() === InkTool.Pen)) { this._points.push({ X: e.clientX, Y: e.clientY }); - e.stopPropagation(); - e.preventDefault(); - - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointerup", this.onPointerUp); + setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction); } } @action onPointerMove = (e: PointerEvent) => { - if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (Doc.GetSelectedTool() === InkTool.Highlighter || Doc.GetSelectedTool() === InkTool.Pen)) { - this._points.push({ X: e.clientX, Y: e.clientY }); - e.stopPropagation(); - e.preventDefault(); - - - if (this._points.length > 1) { - const B = this.svgBounds; - const initialPoint = this._points[0.]; - const xInGlass = initialPoint.X > (this._thumbX ?? Number.MAX_SAFE_INTEGER) && initialPoint.X < (this._thumbX ?? Number.MAX_SAFE_INTEGER) + this.height; - const yInGlass = initialPoint.Y > (this._thumbY ?? Number.MAX_SAFE_INTEGER) - this.height && initialPoint.Y < (this._thumbY ?? Number.MAX_SAFE_INTEGER); - if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) { - switch (this.Tool) { - case ToolglassTools.RadialMenu: - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - //this.handle1PointerHoldStart(e); - } + this._points.push({ X: e.clientX, Y: e.clientY }); + + if (this._points.length > 1) { + const B = this.svgBounds; + const initialPoint = this._points[0.]; + const xInGlass = initialPoint.X > (this._thumbX ?? Number.MAX_SAFE_INTEGER) && initialPoint.X < (this._thumbX ?? Number.MAX_SAFE_INTEGER) + this.height; + const yInGlass = initialPoint.Y > (this._thumbY ?? Number.MAX_SAFE_INTEGER) - this.height && initialPoint.Y < (this._thumbY ?? Number.MAX_SAFE_INTEGER); + if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) { + switch (this.Tool) { + case ToolglassTools.RadialMenu: return true; } } } + return false; } handleLineGesture = (): boolean => { @@ -589,8 +575,6 @@ export default class GestureOverlay extends Touchable { if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) { switch (this.Tool) { case ToolglassTools.InkToText: - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); this._strokes.push(new Array(...this._points)); this._points = []; CognitiveServices.Inking.Appliers.InterpretStrokes(this._strokes).then((results) => { @@ -635,50 +619,27 @@ export default class GestureOverlay extends Touchable { let actionPerformed = false; if (result && result.Score > 0.7) { switch (result.Name) { - case GestureUtils.Gestures.Box: - this.dispatchGesture(GestureUtils.Gestures.Box); - actionPerformed = true; - break; - case GestureUtils.Gestures.StartBracket: - this.dispatchGesture(GestureUtils.Gestures.StartBracket); - actionPerformed = true; - break; - case GestureUtils.Gestures.EndBracket: - this.dispatchGesture("endbracket"); - actionPerformed = true; - break; - case GestureUtils.Gestures.Line: - actionPerformed = this.handleLineGesture(); - break; - case GestureUtils.Gestures.Triangle: - this.makePolygon("triangle", true); - break; - case GestureUtils.Gestures.Circle: - this.makePolygon("circle", true); - break; - case GestureUtils.Gestures.Rectangle: - this.makePolygon("rectangle", true); - break; - case GestureUtils.Gestures.Scribble: - console.log("scribble"); - break; - } - if (actionPerformed) { - this._points = []; + case GestureUtils.Gestures.Box: actionPerformed = this.dispatchGesture(GestureUtils.Gestures.Box); break; + case GestureUtils.Gestures.StartBracket: actionPerformed = this.dispatchGesture(GestureUtils.Gestures.StartBracket); break; + case GestureUtils.Gestures.EndBracket: actionPerformed = this.dispatchGesture("endbracket"); break; + case GestureUtils.Gestures.Line: actionPerformed = this.handleLineGesture(); break; + case GestureUtils.Gestures.Triangle: actionPerformed = this.makePolygon("triangle", true); break; + case GestureUtils.Gestures.Circle: actionPerformed = this.makePolygon("circle", true); break; + case GestureUtils.Gestures.Rectangle: actionPerformed = this.makePolygon("rectangle", true); break; + case GestureUtils.Gestures.Scribble: console.log("scribble"); break; } } // if no gesture (or if the gesture was unsuccessful), "dry" the stroke into an ink document if (!actionPerformed) { this.dispatchGesture(GestureUtils.Gestures.Stroke); - this._points = []; } + this._points = []; } } else { this._points = []; } //get out of ink mode after each stroke= - console.log("now"); if (InkOptionsMenu.Instance._double === "") { Doc.SetSelectedTool(InkTool.None); InkOptionsMenu.Instance._selected = InkOptionsMenu.Instance._shapesNum; @@ -687,9 +648,6 @@ export default class GestureOverlay extends Touchable { SetActiveArrowEnd("none"); GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd(); } - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - } makePolygon = (shape: string, gesture: boolean) => { @@ -700,7 +658,7 @@ export default class GestureOverlay extends Touchable { var bottom = Math.max(...ys); var top = Math.min(...ys); if (shape === "noRec") { - return; + return false; } if (!gesture) { //if shape options is activated in inkOptionMenu @@ -781,11 +739,12 @@ export default class GestureOverlay extends Touchable { this._points.push({ X: x2, Y: y2 }); // this._points.push({ X: x1, Y: y1 - 1 }); } + return true; } dispatchGesture = (gesture: "box" | "line" | "startbracket" | "endbracket" | "stroke" | "scribble" | "text", stroke?: InkData, data?: any) => { const target = document.elementFromPoint((stroke ?? this._points)[0].X, (stroke ?? this._points)[0].Y); - target?.dispatchEvent( + return target?.dispatchEvent( new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture", { bubbles: true, @@ -797,7 +756,7 @@ export default class GestureOverlay extends Touchable { } } ) - ); + ) || false; } getBounds = (stroke: InkData) => { @@ -816,10 +775,11 @@ export default class GestureOverlay extends Touchable { @computed get elements() { const width = Number(ActiveInkWidth()); + const rect = this._overlayRef.current?.getBoundingClientRect(); const B = this.svgBounds; B.left = B.left - width / 2; B.right = B.right + width / 2; - B.top = B.top - width / 2; + B.top = B.top - width / 2 - (rect?.y || 0); B.bottom = B.bottom + width / 2; B.width += width; B.height += width; @@ -836,7 +796,7 @@ export default class GestureOverlay extends Touchable { }), this._points.length <= 1 ? (null) : <svg key="svg" width={B.width} height={B.height} style={{ transform: `translate(${B.left}px, ${B.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000, overflow: "visible" }}> - {InteractionUtils.CreatePolyline(this._points, B.left, B.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false, false)} + {InteractionUtils.CreatePolyline(this._points.map(p => ({ X: p.X, Y: p.Y - (rect?.y || 0) })), B.left, B.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false, false)} </svg>] ]; } @@ -885,8 +845,7 @@ export default class GestureOverlay extends Touchable { render() { return ( - - <div className="gestureOverlay-cont" style={{ position: "relative" }} + <div className="gestureOverlay-cont" style={{ position: "relative" }} ref={this._overlayRef} onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}> {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>} {this.elements} diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ab23a6ee9..b9ee58d5d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -610,13 +610,9 @@ export class MainView extends React.Component { <HypothesisAuthenticationManager /> <DocumentDecorations /> <InkOptionsMenu /> - - + <FormatShapePane /> + <RichTextMenu key="rich" /> <GestureOverlay > - <FormatShapePane /> - - - <RichTextMenu key="rich" /> {this.mainContent} </GestureOverlay> <PreviewCursor /> diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts index 97f62c9d4..c1659d4d5 100644 --- a/src/fields/documentSchemas.ts +++ b/src/fields/documentSchemas.ts @@ -73,6 +73,9 @@ export const documentSchema = createSchema({ opacity: "number", // opacity of document strokeWidth: "number", strokeBezier: "number", + strokeStartMarker: "string", + strokeEndMarker: "string", + strokeDash: "string", textTransform: "string", treeViewOpen: "boolean", // flag denoting whether the documents sub-tree (contents) is visible or hidden treeViewExpandedView: "string", // name of field whose contents are being displayed as the document's subtree |