diff options
Diffstat (limited to 'src/client/views/GestureOverlay.tsx')
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 121 |
1 files changed, 38 insertions, 83 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 850688e7e..a29073f14 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -1,7 +1,7 @@ import React = require('react'); import * as fitCurve from 'fit-curve'; import { action, computed, observable, runInAction, trace } from 'mobx'; -import { Doc } from '../../fields/Doc'; +import { Doc, Opt } from '../../fields/Doc'; import { InkData, InkTool } from '../../fields/InkField'; import { List } from '../../fields/List'; import { ScriptField } from '../../fields/ScriptField'; @@ -16,7 +16,6 @@ import { InteractionUtils } from '../util/InteractionUtils'; import { ScriptingGlobals } from '../util/ScriptingGlobals'; import { SelectionManager } from '../util/SelectionManager'; import { Transform } from '../util/Transform'; -import { CollectionFreeFormViewChrome } from './collections/CollectionMenu'; import './GestureOverlay.scss'; import { ActiveArrowEnd, @@ -49,10 +48,11 @@ interface GestureOverlayProps { export class GestureOverlay extends Touchable<GestureOverlayProps> { static Instance: GestureOverlay; - @observable public InkShape: string = ''; + @observable public InkShape: Opt<GestureUtils.Gestures>; @observable public SavedColor?: string; @observable public SavedWidth?: number; @observable public Tool: ToolglassTools = ToolglassTools.None; + @observable public KeepPrimitiveMode = false; // for whether primitive selection enters a one-shot or persistent mode @observable private _thumbX?: number; @observable private _thumbY?: number; @@ -616,36 +616,21 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { return false; }; - handleLineGesture = (): boolean => { - const actionPerformed = false; - const B = this.svgBounds; - - // get the two targets at the ends of the line - const ep1 = this._points[0]; - const ep2 = this._points.lastElement(); - const target1 = document.elementFromPoint(ep1.X, ep1.Y); - const target2 = document.elementFromPoint(ep2.X, ep2.Y); - - const ge = new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', { - bubbles: true, - detail: { - points: this._points.slice(), - gesture: GestureUtils.Gestures.Line, - bounds: B, - }, - }); - target1?.dispatchEvent(ge); - target2?.dispatchEvent(ge); - return actionPerformed; - }; - + @action primCreated() { + if (!this.KeepPrimitiveMode) { + this.InkShape = undefined; + //get out of ink mode after each stroke= + //if (Doc.ActiveTool === InkTool.Highlighter && GestureOverlay.Instance.SavedColor) SetActiveInkColor(GestureOverlay.Instance.SavedColor); + Doc.ActiveTool = InkTool.None; + // SetActiveArrowStart('none'); + // SetActiveArrowEnd('none'); + } + } @action onPointerUp = (e: PointerEvent) => { if (this._points.length > 1) { const B = this.svgBounds; const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top })); - //push first points to so interactionUtil knows pointer is up - this._points.push({ X: this._points[0].X, Y: this._points[0].Y }); 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; @@ -656,7 +641,6 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { switch (this.Tool) { case ToolglassTools.InkToText: this._strokes.push(this._points.slice()); - this._points.length = 0; CognitiveServices.Inking.Appliers.InterpretStrokes(this._strokes).then(results => { const wordResults = results.filter((r: any) => r.category === 'line'); const possibilities: string[] = []; @@ -678,19 +662,14 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { break; case ToolglassTools.IgnoreGesture: this.dispatchGesture(GestureUtils.Gestures.Stroke); - this._points.length = 0; break; } } //if any of the shape is activated in the CollectionFreeFormViewChrome else if (this.InkShape) { - this.makePolygon(this.InkShape, false); - this.dispatchGesture(GestureUtils.Gestures.Stroke); - this._points.length = 0; - if (!CollectionFreeFormViewChrome.Instance?._keepPrimitiveMode) { - this.InkShape = ''; - Doc.ActiveTool = InkTool.None; - } + this.makeBezierPolygon(this.InkShape, false); + this.dispatchGesture(this.InkShape); + this.primCreated(); } // if we're not drawing in a toolglass try to recognize as gesture else { @@ -699,26 +678,12 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { let actionPerformed = false; if (Doc.UserDoc().recognizeGestures && result && result.Score > 0.7) { switch (result.Name) { - 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); + case GestureUtils.Gestures.Circle: + this.makeBezierPolygon(result.Name, true); + actionPerformed = this.dispatchGesture(result.Name); break; case GestureUtils.Gestures.Scribble: console.log('scribble'); @@ -752,19 +717,12 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { // TODO: nda - check inks to group here checkInksToGroup(); } - this._points.length = 0; } - } else { - this._points.length = 0; } - CollectionFreeFormViewChrome.Instance?.primCreated(); + this._points.length = 0; }; - makePolygon = (shape: string, gesture: boolean) => { - //take off gesture recognition for now - if (gesture) { - return false; - } + makeBezierPolygon = (shape: string, gesture: boolean) => { const xs = this._points.map(p => p.X); const ys = this._points.map(p => p.Y); var right = Math.max(...xs); @@ -794,7 +752,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { left = this._points[0].X; bottom = this._points[this._points.length - 2].Y; top = this._points[0].Y; - if (shape !== 'arrow' && shape !== 'line' && shape !== 'circle') { + if (shape !== GestureUtils.Gestures.Arrow && shape !== GestureUtils.Gestures.Line && shape !== GestureUtils.Gestures.Circle) { if (left > right) { const temp = right; right = left; @@ -809,9 +767,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { } this._points.length = 0; switch (shape) { - //must push an extra point in the end so InteractionUtils knows pointer is up. - //must be (points[0].X,points[0]-1) - case 'rectangle': + case GestureUtils.Gestures.Rectangle: this._points.push({ X: left, Y: top }); this._points.push({ X: left, Y: top }); this._points.push({ X: right, Y: top }); @@ -834,7 +790,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { break; - case 'triangle': + case GestureUtils.Gestures.Triangle: this._points.push({ X: left, Y: bottom }); this._points.push({ X: left, Y: bottom }); @@ -852,7 +808,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { this._points.push({ X: left, Y: bottom }); break; - case 'circle': + case GestureUtils.Gestures.Circle: // Approximation of a circle using 4 Bézier curves in which the constant "c" reduces the maximum radial drift to 0.019608%, // making the curves indistinguishable from a circle. // Source: https://spencermortensen.com/articles/bezier-circle/ @@ -884,7 +840,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { break; - case 'line': + case GestureUtils.Gestures.Line: if (Math.abs(firstx - lastx) < 10 && Math.abs(firsty - lasty) > 10) { lastx = firstx; } @@ -897,7 +853,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { this._points.push({ X: lastx, Y: lasty }); this._points.push({ X: lastx, Y: lasty }); break; - case 'arrow': + case GestureUtils.Gestures.Arrow: const x1 = left; const y1 = top; const x2 = right; @@ -914,22 +870,21 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { this._points.push({ X: x3, Y: y3 }); this._points.push({ X: x4, Y: y4 }); this._points.push({ X: x2, Y: y2 }); - // this._points.push({ X: x1, Y: y1 - 1 }); } - return true; + return false; }; - 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); + dispatchGesture = (gesture: GestureUtils.Gestures, stroke?: InkData, text?: any) => { + const points = (stroke ?? this._points).slice(); return ( - target?.dispatchEvent( + document.elementFromPoint(points[0].X, points[0].Y)?.dispatchEvent( new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', { bubbles: true, detail: { - points: stroke ?? this._points.slice(), - gesture: gesture as any, - bounds: this.getBounds(stroke ?? this._points), - text: data, + points, + gesture, + bounds: this.getBounds(points), + text, }, }) ) || false @@ -989,7 +944,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { ActiveDash(), 1, 1, - this.InkShape, + this.InkShape ?? '', 'none', 1.0, false @@ -1016,7 +971,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> { ActiveDash(), 1, 1, - this.InkShape, + this.InkShape ?? '', 'none', 1.0, false @@ -1136,7 +1091,7 @@ ScriptingGlobals.add(function resetPen() { }, 'resets the pen tool'); ScriptingGlobals.add( function createText(text: any, x: any, y: any) { - GestureOverlay.Instance.dispatchGesture('text', [{ X: x, Y: y }], text); + GestureOverlay.Instance.dispatchGesture(GestureUtils.Gestures.Text, [{ X: x, Y: y }], text); }, 'creates a text document with inputted text and coordinates', '(text: any, x: any, y: any)' |