From 0e3892e63758accd7dae274072ad7893934c3624 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 18 Oct 2022 15:07:31 -0400 Subject: cleaned up gestureutils a bit. added recognize gestures option, but it probably shouldn't be used until the geometry gesture recognition descriptions are improved. --- src/client/util/InteractionUtils.tsx | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) (limited to 'src/client/util/InteractionUtils.tsx') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 85700da37..6622b498d 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -1,4 +1,5 @@ import React = require('react'); +import { GestureUtils } from '../../pen-gestures/GestureUtils'; import { Utils } from '../../Utils'; import './InteractionUtils.scss'; @@ -186,7 +187,7 @@ export namespace InteractionUtils { export function makePolygon(shape: string, points: { X: number; Y: number }[]) { if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) { //pointer is up (first and last points are the same) - if (shape === 'arrow' || shape === 'line' || shape === 'circle') { + if (shape === GestureUtils.Gestures.Arrow || shape === GestureUtils.Gestures.Line || shape === GestureUtils.Gestures.Circle) { //if arrow or line, the two end points should be the starting and the ending point var left = points[0].X; var top = points[0].Y; @@ -208,7 +209,7 @@ export namespace InteractionUtils { left = points[0].X; bottom = points[points.length - 1].Y; top = points[0].Y; - if (shape !== 'arrow' && shape !== 'line' && shape !== 'circle') { + if (shape !== GestureUtils.Gestures.Arrow && shape !== GestureUtils.Gestures.Line && shape !== GestureUtils.Gestures.Circle) { //switch left/right and top/bottom if needed if (left > right) { const temp = right; @@ -224,20 +225,20 @@ export namespace InteractionUtils { } points = []; switch (shape) { - case 'rectangle': + case GestureUtils.Gestures.Rectangle: points.push({ X: left, Y: top }); points.push({ X: right, Y: top }); points.push({ X: right, Y: bottom }); points.push({ X: left, Y: bottom }); points.push({ X: left, Y: top }); break; - case 'triangle': + case GestureUtils.Gestures.Triangle: points.push({ X: left, Y: bottom }); points.push({ X: right, Y: bottom }); points.push({ X: (right + left) / 2, Y: top }); points.push({ X: left, Y: bottom }); break; - case 'circle': + case GestureUtils.Gestures.Circle: const centerX = (Math.max(left, right) + Math.min(left, right)) / 2; const centerY = (Math.max(top, bottom) + Math.min(top, bottom)) / 2; const radius = Math.max(centerX - Math.min(left, right), centerY - Math.min(top, bottom)); @@ -253,7 +254,7 @@ export namespace InteractionUtils { points.push({ X: Math.min(left, right), Y: Math.sqrt(Math.pow(radius, 2) - Math.pow(Math.min(left, right) - centerX, 2)) + centerY }); break; - case 'line': + case GestureUtils.Gestures.Line: points.push({ X: left, Y: top }); points.push({ X: right, Y: bottom }); break; @@ -266,17 +267,14 @@ export namespace InteractionUtils { * @param type - InteractionUtils.(PENTYPE | ERASERTYPE | MOUSETYPE | TOUCHTYPE) */ export function IsType(e: PointerEvent | React.PointerEvent, type: string): boolean { + // prettier-ignore switch (type) { // pen and eraser are both pointer type 'pen', but pen is button 0 and eraser is button 5. -syip2 - case PENTYPE: - return e.pointerType === PENTYPE && (e.button === -1 || e.button === 0); - case ERASERTYPE: - return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON); - case TOUCHTYPE: - return e.pointerType === TOUCHTYPE; - default: - return e.pointerType === type; + case PENTYPE: return e.pointerType === PENTYPE && (e.button === -1 || e.button === 0); + case ERASERTYPE: return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON); + case TOUCHTYPE: return e.pointerType === TOUCHTYPE; } + return e.pointerType === type; } /** -- cgit v1.2.3-70-g09d2 From 5df8e9041e7a0e8ac98f0c911a2b603c0d8e89d3 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 20 Oct 2022 11:07:04 -0400 Subject: added double-tap to keep ink primitive mode. cleaned up circle drawing and some other gesture code. --- src/client/util/CurrentUserUtils.ts | 14 ++--- src/client/util/InteractionUtils.tsx | 6 +- src/client/views/GestureOverlay.tsx | 69 +++++++--------------- src/client/views/collections/CollectionMenu.tsx | 7 ++- .../collectionFreeForm/CollectionFreeFormView.tsx | 3 +- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/button/FontIconBox.tsx | 51 +++++++++------- 7 files changed, 68 insertions(+), 84 deletions(-) (limited to 'src/client/util/InteractionUtils.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index bfa868dbc..2bc464127 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -46,7 +46,7 @@ interface Button { buttonText?: string; // fields that do not correspond to DocumentOption fields - scripts?: { script?: string; onClick?: string; } + scripts?: { script?: string; onClick?: string; onDoubleClick?: string } funcs?: { [key:string]: string }; subMenu?: Button[]; } @@ -628,13 +628,13 @@ export class CurrentUserUtils { static inkTools():Button[] { return [ - { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen-nib", scripts: {onClick:'{ return setActiveTool("pen", _readOnly_);}' }}, - { title: "Write", toolTip: "Write (Ctrl+Shift+P)", btnType: ButtonType.ToggleButton, icon: "pen", scripts: {onClick:'{ return setActiveTool("write", _readOnly_);}'} }, - { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.ToggleButton, icon: "eraser", scripts: {onClick:'{ return setActiveTool("eraser", _readOnly_);}' }}, + { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen-nib", scripts: {onClick:'{ return setActiveTool("pen", false, _readOnly_);}' }}, + { title: "Write", toolTip: "Write (Ctrl+Shift+P)", btnType: ButtonType.ToggleButton, icon: "pen", scripts: {onClick:'{ return setActiveTool("write", false, _readOnly_);}'} }, + { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.ToggleButton, icon: "eraser", scripts: {onClick:'{ return setActiveTool("eraser", false, _readOnly_);}' }}, // { title: "Highlighter", toolTip: "Highlighter (Ctrl+H)", btnType: ButtonType.ToggleButton, icon: "highlighter", scripts:{onClick: 'setActiveTool("highlighter")'} }, - { title: "Circle", toolTip: "Circle (Ctrl+Shift+C)", btnType: ButtonType.ToggleButton, icon: "circle", scripts: {onClick:`{ return setActiveTool("${GestureUtils.Gestures.Circle}", _readOnly_);}`} }, - { title: "Square", toolTip: "Square (Ctrl+Shift+S)", btnType: ButtonType.ToggleButton, icon: "square", scripts: {onClick:`{ return setActiveTool("${GestureUtils.Gestures.Rectangle}", _readOnly_);}`} }, - { title: "Line", toolTip: "Line (Ctrl+Shift+L)", btnType: ButtonType.ToggleButton, icon: "minus", scripts: {onClick:`{ return setActiveTool("${GestureUtils.Gestures.Line}", _readOnly_);}`} }, + { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle", scripts: {onClick:`{ return setActiveTool("${GestureUtils.Gestures.Circle}", false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool("${GestureUtils.Gestures.Circle}", true, _readOnly_);}`} }, + { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square", scripts: {onClick:`{ return setActiveTool("${GestureUtils.Gestures.Rectangle}", false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool("${GestureUtils.Gestures.Rectangle}", true, _readOnly_);}`} }, + { title: "Line", toolTip: "Line (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "minus", scripts: {onClick:`{ return setActiveTool("${GestureUtils.Gestures.Line}", false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool("${GestureUtils.Gestures.Line}", true, _readOnly_);}`} }, { title: "Mask", toolTip: "Mask", btnType: ButtonType.ToggleButton, icon: "user-circle", scripts: {onClick:'{ return setIsInkMask(_readOnly_);}'} }, { title: "Fill", toolTip: "Fill color", btnType: ButtonType.ColorButton, icon: "fill-drip",ignoreClick: true, scripts: {script: '{ return setFillColor(value, _readOnly_);}'} }, { title: "Width", toolTip: "Stroke width", btnType: ButtonType.NumberButton, ignoreClick: true, scripts: {script: '{ return setStrokeWidth(value, _readOnly_);}'}, numBtnType: NumButtonType.Slider, numBtnMin: 1}, diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 6622b498d..3cdf4dbd2 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -242,16 +242,16 @@ export namespace InteractionUtils { const centerX = (Math.max(left, right) + Math.min(left, right)) / 2; const centerY = (Math.max(top, bottom) + Math.min(top, bottom)) / 2; const radius = Math.max(centerX - Math.min(left, right), centerY - Math.min(top, bottom)); - for (var x = Math.min(left, right); x < Math.max(left, right); x++) { + for (var x = centerX - radius; x < centerX + radius; x++) { const y = Math.sqrt(Math.pow(radius, 2) - Math.pow(x - centerX, 2)) + centerY; points.push({ X: x, Y: y }); } - for (var x = Math.max(left, right); x > Math.min(left, right); x--) { + for (var x = centerX + radius; x > centerX - radius; x--) { const y = Math.sqrt(Math.pow(radius, 2) - Math.pow(x - centerX, 2)) + centerY; const newY = centerY - (y - centerY); points.push({ X: x, Y: newY }); } - points.push({ X: Math.min(left, right), Y: Math.sqrt(Math.pow(radius, 2) - Math.pow(Math.min(left, right) - centerX, 2)) + centerY }); + points.push({ X: centerX - radius, Y: Math.sqrt(Math.pow(radius, 2) - Math.pow(-radius, 2)) + centerY }); break; case GestureUtils.Gestures.Line: diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 362aa3c86..a29073f14 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -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, @@ -53,6 +52,7 @@ export class GestureOverlay extends Touchable { @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,29 +616,16 @@ export class GestureOverlay extends Touchable { 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('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) { @@ -654,7 +641,6 @@ export class GestureOverlay extends Touchable { 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[] = []; @@ -676,7 +662,6 @@ export class GestureOverlay extends Touchable { break; case ToolglassTools.IgnoreGesture: this.dispatchGesture(GestureUtils.Gestures.Stroke); - this._points.length = 0; break; } } @@ -684,11 +669,7 @@ export class GestureOverlay extends Touchable { else if (this.InkShape) { this.makeBezierPolygon(this.InkShape, false); this.dispatchGesture(this.InkShape); - this._points.length = 0; - if (!CollectionFreeFormViewChrome.Instance?._keepPrimitiveMode) { - this.InkShape = undefined; - Doc.ActiveTool = InkTool.None; - } + this.primCreated(); } // if we're not drawing in a toolglass try to recognize as gesture else { @@ -697,18 +678,13 @@ export class GestureOverlay extends Touchable { let actionPerformed = false; if (Doc.UserDoc().recognizeGestures && result && result.Score > 0.7) { switch (result.Name) { + case GestureUtils.Gestures.Line: case GestureUtils.Gestures.Triangle: case GestureUtils.Gestures.Rectangle: case GestureUtils.Gestures.Circle: this.makeBezierPolygon(result.Name, true); actionPerformed = this.dispatchGesture(result.Name); break; - case GestureUtils.Gestures.Line: - if (!(actionPerformed = this.handleLineGesture())) { - this.makeBezierPolygon(result.Name, true); - actionPerformed = this.dispatchGesture(GestureUtils.Gestures.Stroke); - } - break; case GestureUtils.Gestures.Scribble: console.log('scribble'); break; @@ -741,12 +717,9 @@ export class GestureOverlay extends Touchable { // TODO: nda - check inks to group here checkInksToGroup(); } - this._points.length = 0; } - } else { - this._points.length = 0; } - CollectionFreeFormViewChrome.Instance?.primCreated(); + this._points.length = 0; }; makeBezierPolygon = (shape: string, gesture: boolean) => { @@ -901,17 +874,17 @@ export class GestureOverlay extends Touchable { return false; }; - dispatchGesture = (gesture: GestureUtils.Gestures, 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('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 diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 46e8494ab..db81f28f6 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -40,6 +40,7 @@ import { CollectionLinearView } from './collectionLinear'; import './CollectionMenu.scss'; import { COLLECTION_BORDER_WIDTH } from './CollectionView'; import { TabDocView } from './TabDocView'; +import { GestureUtils } from '../../../pen-gestures/GestureUtils'; interface CollectionMenuProps { panelHeight: () => number; @@ -767,7 +768,7 @@ export class CollectionFreeFormViewChrome extends React.Component { switch (ge.gesture) { - case GestureUtils.Gestures.Line: - break; default: + case GestureUtils.Gestures.Line: case GestureUtils.Gestures.Circle: case GestureUtils.Gestures.Rectangle: case GestureUtils.Gestures.Triangle: diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 040e03150..16b5809fa 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -655,7 +655,7 @@ export class DocumentViewInternal extends DocComponent 0))) { + if ((Doc.ActiveTool === InkTool.None || this.props.addDocTab === returnFalse) && !(this.props.Document.rootDocument && !(e.ctrlKey || e.button > 0))) { // if this is part of a template, let the event go up to the tempalte root unless right/ctrl clicking if ( (this.props.isDocumentActive?.() || this.layoutDoc.onDragStart) && diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index fd0c0d141..883c4460b 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -771,31 +771,42 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) { CollectionFreeFormView.collectionsWithUnprocessedInk.clear(); } -ScriptingGlobals.add(function setActiveTool(tool: InkTool | GestureUtils.Gestures, checkResult?: boolean) { +function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean, checkResult?: boolean) { InkTranscription.Instance?.createInkGroup(); if (checkResult) { - return (Doc.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool ? Colors.MEDIUM_BLUE : 'transparent'; - } - if (Object.values(GestureUtils.Gestures).includes(tool as any)) { - if (GestureOverlay.Instance.InkShape === tool) { - Doc.ActiveTool = InkTool.None; - GestureOverlay.Instance.InkShape = undefined; - } else { - Doc.ActiveTool = InkTool.Pen; - GestureOverlay.Instance.InkShape = tool as GestureUtils.Gestures; + return (Doc.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool + ? GestureOverlay.Instance?.KeepPrimitiveMode || ![GestureUtils.Gestures.Circle, GestureUtils.Gestures.Line, GestureUtils.Gestures.Rectangle].includes(tool as GestureUtils.Gestures) + ? Colors.MEDIUM_BLUE + : Colors.MEDIUM_BLUE_ALT + : 'transparent'; + } + runInAction(() => { + if (GestureOverlay.Instance) { + GestureOverlay.Instance.KeepPrimitiveMode = keepPrim; } - } else if (tool) { - // pen or eraser - if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape) { - Doc.ActiveTool = InkTool.None; + if (Object.values(GestureUtils.Gestures).includes(tool as any)) { + if (GestureOverlay.Instance.InkShape === tool) { + Doc.ActiveTool = InkTool.None; + GestureOverlay.Instance.InkShape = undefined; + } else { + Doc.ActiveTool = InkTool.Pen; + GestureOverlay.Instance.InkShape = tool as GestureUtils.Gestures; + } + } else if (tool) { + // pen or eraser + if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape) { + Doc.ActiveTool = InkTool.None; + } else { + Doc.ActiveTool = tool as any; + GestureOverlay.Instance.InkShape = undefined; + } } else { - Doc.ActiveTool = tool as any; - GestureOverlay.Instance.InkShape = undefined; + Doc.ActiveTool = InkTool.None; } - } else { - Doc.ActiveTool = InkTool.None; - } -}); + }); +} + +ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode'); // toggle: Set overlay status of selected document ScriptingGlobals.add(function setIsInkMask(checkResult?: boolean) { -- cgit v1.2.3-70-g09d2