diff options
Diffstat (limited to 'src/client/views/GestureOverlay.tsx')
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 53 |
1 files changed, 39 insertions, 14 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 9a601e07b..78a5389d2 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -27,6 +27,9 @@ import { listSpec } from "../../new_fields/Schema"; import { List } from "../../new_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 { RadialMenu } from "./nodes/RadialMenu"; import { SelectionManager } from "../util/SelectionManager"; @@ -56,6 +59,8 @@ export default class GestureOverlay extends Touchable { @computed private get height(): number { return 2 * Math.max(this._pointerY && this._thumbY ? this._thumbY - this._pointerY : 300, 300); } @computed private get showBounds() { return this.Tool !== ToolglassTools.None; } + @observable private showMobileInkOverlay: boolean = false; + private _d1: Doc | undefined; private _inkToTextDoc: Doc | undefined; private _thumbDoc: Doc | undefined; @@ -74,7 +79,7 @@ export default class GestureOverlay extends Touchable { componentDidMount = () => { this._thumbDoc = FieldValue(Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc)); - this._inkToTextDoc = FieldValue(Cast(this._thumbDoc?.inkToTextDoc, Doc)); + this._inkToTextDoc = FieldValue(Cast(this._thumbDoc ?.inkToTextDoc, Doc)); } getNewTouches(e: React.TouchEvent | TouchEvent) { @@ -141,9 +146,13 @@ export default class GestureOverlay extends Touchable { const nts = this.getNewTouches(te); if (nts.nt.length < 5) { const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); +<<<<<<< HEAD + target ?.dispatchEvent( +======= te.changedTouches.item(0).identifier; console.log(te.touches); target?.dispatchEvent( +>>>>>>> 33d5a12af14e1ed50e5c3164b363fbbc253506a0 new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>("dashOnTouchStart", { bubbles: true, @@ -327,7 +336,7 @@ export default class GestureOverlay extends Touchable { if (pt.radiusX > 1 && pt.radiusY > 1) { for (let j = 0; j < e.targetTouches.length; j++) { const tPt = e.targetTouches.item(j); - if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) { + if (tPt ?.screenX === pt ?.screenX && tPt ?.screenY === pt ?.screenY) { if (pt && this.prevPoints.has(pt.identifier)) { fingers.push(pt); } @@ -350,9 +359,9 @@ export default class GestureOverlay extends Touchable { else { console.log("not hand"); } - this.pointerIdentifier = pointer?.identifier; + this.pointerIdentifier = pointer ?.identifier; runInAction(() => { - this._pointerY = pointer?.clientY; + this._pointerY = pointer ?.clientY; if (thumb.identifier === this.thumbIdentifier) { this._thumbX = thumb.clientX; this._thumbY = thumb.clientY; @@ -361,7 +370,7 @@ export default class GestureOverlay extends Touchable { } }); - this.thumbIdentifier = thumb?.identifier; + this.thumbIdentifier = thumb ?.identifier; this._hands.set(thumb.identifier, fingers); const others = fingers.filter(f => f !== thumb); const minX = Math.min(...others.map(f => f.clientX)); @@ -396,7 +405,7 @@ export default class GestureOverlay extends Touchable { if (pt.radiusX > 1 && pt.radiusY > 1) { for (let j = 0; j < e.targetTouches.length; j++) { const tPt = e.targetTouches.item(j); - if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) { + if (tPt ?.screenX === pt ?.screenX && tPt ?.screenY === pt ?.screenY) { if (pt && this.prevPoints.has(pt.identifier)) { this._hands.forEach(hand => hand.some(f => { if (f.identifier === pt.identifier) { @@ -409,7 +418,7 @@ export default class GestureOverlay extends Touchable { } } const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]); - if (thumb?.identifier && thumb?.identifier === this.thumbIdentifier) { + if (thumb ?.identifier && thumb ?.identifier === this.thumbIdentifier) { this._hands.set(thumb.identifier, fingers); } @@ -459,7 +468,7 @@ export default class GestureOverlay extends Touchable { this._thumbDoc = undefined; let scriptWorked = false; - if (NumCast(this._inkToTextDoc?.selectedIndex) > -1) { + if (NumCast(this._inkToTextDoc ?.selectedIndex) > -1) { const selectedButton = this._possibilities[this._selectedIndex]; if (selectedButton) { selectedButton.props.onClick(); @@ -547,8 +556,8 @@ export default class GestureOverlay extends Touchable { callbackFn: callback } }); - target1?.dispatchEvent(ge); - target2?.dispatchEvent(ge); + target1 ?.dispatchEvent(ge); + target2 ?.dispatchEvent(ge); return actionPerformed; } @@ -558,6 +567,16 @@ export default class GestureOverlay extends Touchable { const B = this.svgBounds; const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top })); + if (MobileInterface.Instance && MobileInterface.Instance.drawingInk) { + const { selectedColor, selectedWidth } = InkingControl.Instance; + DocServer.Mobile.dispatchGesturePoints({ + points: this._points, + bounds: B, + color: selectedColor, + width: selectedWidth + }); + } + 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); @@ -575,10 +594,10 @@ export default class GestureOverlay extends Touchable { const possibilities: string[] = []; for (const wR of wordResults) { console.log(wR); - if (wR?.recognizedText) { - possibilities.push(wR?.recognizedText) + if (wR ?.recognizedText) { + possibilities.push(wR ?.recognizedText) } - possibilities.push(...wR?.alternates?.map((a: any) => a.recognizedString)); + possibilities.push(...wR ?.alternates ?.map((a: any) => a.recognizedString)); } console.log(possibilities); const r = Math.max(this.svgBounds.right, ...this._strokes.map(s => this.getBounds(s).right)); @@ -637,7 +656,7 @@ export default class GestureOverlay extends Touchable { dispatchGesture = (gesture: GestureUtils.Gestures, stroke?: InkData, data?: any) => { const target = document.elementFromPoint((stroke ?? this._points)[0].X, (stroke ?? this._points)[0].Y); - target?.dispatchEvent( + target ?.dispatchEvent( new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture", { bubbles: true, @@ -717,10 +736,16 @@ export default class GestureOverlay extends Touchable { this._clipboardDoc = undefined; } + @action + enableMobileInkOverlay = (content: MobileInkOverlayContent) => { + this.showMobileInkOverlay = content.enableOverlay; + } + render() { trace(); return ( <div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}> + {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>} {this.elements} <div className="clipboardDoc-cont" style={{ |