aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/GestureOverlay.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2023-05-22 11:25:32 -0400
committerbobzel <zzzman@gmail.com>2023-05-22 11:25:32 -0400
commitbed3309e1fda6597b2a8fea10ad82cd3a0402051 (patch)
treefe599bbdc5fca2c221e1e0f7a60995b7cd39f870 /src/client/views/GestureOverlay.tsx
parent887a4f7e0fc25fde87b20a5de2e7b0aee561cc78 (diff)
parent3d26d5b2654841a9b92f3d66b28d1dc8e36cca6a (diff)
merged physics with master
Diffstat (limited to 'src/client/views/GestureOverlay.tsx')
-rw-r--r--src/client/views/GestureOverlay.tsx57
1 files changed, 32 insertions, 25 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index e3328fb4c..141e99c66 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -1,9 +1,9 @@
import React = require('react');
import * as fitCurve from 'fit-curve';
-import { action, computed, observable, runInAction, trace } from 'mobx';
+import { action, computed, observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
import { Doc, Opt } from '../../fields/Doc';
import { InkData, InkTool } from '../../fields/InkField';
-import { List } from '../../fields/List';
import { ScriptField } from '../../fields/ScriptField';
import { Cast, FieldValue, NumCast } from '../../fields/Types';
import MobileInkOverlay from '../../mobile/MobileInkOverlay';
@@ -14,7 +14,6 @@ import { CognitiveServices } from '../cognitive_services/CognitiveServices';
import { Docs, DocUtils } from '../documents/Documents';
import { InteractionUtils } from '../util/InteractionUtils';
import { ScriptingGlobals } from '../util/ScriptingGlobals';
-import { SelectionManager } from '../util/SelectionManager';
import { Transform } from '../util/Transform';
import './GestureOverlay.scss';
import {
@@ -39,7 +38,6 @@ import { RadialMenu } from './nodes/RadialMenu';
import HorizontalPalette from './Palette';
import { Touchable } from './Touchable';
import TouchScrollableMenu, { TouchScrollableMenuItem } from './TouchScrollableMenu';
-import { observer } from 'mobx-react';
interface GestureOverlayProps {
isActive: boolean;
@@ -47,6 +45,7 @@ interface GestureOverlayProps {
@observer
export class GestureOverlay extends Touchable<GestureOverlayProps> {
static Instance: GestureOverlay;
+ static Instances: GestureOverlay[] = [];
@observable public InkShape: Opt<GestureUtils.Gestures>;
@observable public SavedColor?: string;
@@ -66,6 +65,8 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
@observable private _clipboardDoc?: JSX.Element;
@observable private _possibilities: JSX.Element[] = [];
+ public static DownDocView: DocumentView | undefined;
+
@computed private get height(): number {
return 2 * Math.max(this._pointerY && this._thumbY ? this._thumbY - this._pointerY : 100, 100);
}
@@ -89,11 +90,11 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
constructor(props: any) {
super(props);
- GestureOverlay.Instance = this;
+ GestureOverlay.Instances.push(this);
}
static setupThumbButtons(doc: Doc) {
- const docProtoData: { title: string; icon: string; drag?: string; ignoreClick?: boolean; pointerDown?: string; pointerUp?: string; clipboard?: Doc; backgroundColor?: string; dragFactory?: Doc }[] = [
+ const docProtoData: { title: string; icon: string; drag?: string; toolType?: string; ignoreClick?: boolean; pointerDown?: string; pointerUp?: string; clipboard?: Doc; backgroundColor?: string; dragFactory?: Doc }[] = [
{ title: 'use pen', icon: 'pen-nib', pointerUp: 'resetPen()', pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: 'blue' },
{ title: 'use highlighter', icon: 'highlighter', pointerUp: 'resetPen()', pointerDown: 'setPen(20, this.backgroundColor)', backgroundColor: 'yellow' },
{
@@ -101,11 +102,11 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
icon: 'clipboard',
pointerUp: 'GestureOverlay.Instance.closeFloatingDoc()',
pointerDown: 'GestureOverlay.Instance.openFloatingDoc(this.clipboard)',
- clipboard: Docs.Create.FreeformDocument([], { _width: 300, _height: 300, system: true }),
+ clipboard: Docs.Create.FreeformDocument([], { _width: 300, _height: 300, isSystem: true }),
backgroundColor: 'orange',
},
- { title: 'interpret text', icon: 'font', pointerUp: "setToolglass('none')", pointerDown: "setToolglass('inktotext')", backgroundColor: 'orange' },
- { title: 'ignore gestures', icon: 'signature', pointerUp: "setToolglass('none')", pointerDown: "setToolglass('ignoregesture')", backgroundColor: 'green' },
+ { title: 'interpret text', icon: 'font', toolType: 'inktotext', pointerUp: "setToolglass('none')", pointerDown: 'setToolglass(self.toolType)', backgroundColor: 'orange' },
+ { title: 'ignore gestures', icon: 'signature', toolType: 'ignoregesture', pointerUp: "setToolglass('none')", pointerDown: 'setToolglass(self.toolType)', backgroundColor: 'green' },
];
return docProtoData.map(data =>
Docs.Create.FontIconDocument({
@@ -115,6 +116,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
_height: 10,
title: data.title,
icon: data.icon,
+ toolType: data.toolType,
_dropAction: data.pointerDown ? 'copy' : undefined,
ignoreClick: data.ignoreClick,
onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined,
@@ -123,7 +125,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
onPointerDown: data.pointerDown ? ScriptField.MakeScript(data.pointerDown) : undefined,
backgroundColor: data.backgroundColor,
dragFactory: data.dragFactory,
- system: true,
+ isSystem: true,
})
);
}
@@ -136,25 +138,31 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
ignoreClick: true,
_lockedPosition: true,
title: 'buttons',
- _autoHeight: true,
+ _layout_autoHeight: true,
_yMargin: 5,
linearViewIsExpanded: true,
backgroundColor: 'white',
- system: true,
+ isSystem: true,
});
thumbDoc.inkToTextDoc = Docs.Create.LinearDocument([], {
_width: 300,
_height: 25,
- _autoHeight: true,
+ _layout_autoHeight: true,
linearViewIsExpanded: true,
flexDirection: 'column',
- system: true,
+ isSystem: true,
});
userDoc.thumbDoc = thumbDoc;
}
return Cast(userDoc.thumbDoc, Doc);
}
+
+ componentWillUnmount() {
+ GestureOverlay.Instances.splice(GestureOverlay.Instances.indexOf(this), 1);
+ GestureOverlay.Instance = GestureOverlay.Instances.lastElement();
+ }
componentDidMount = () => {
+ GestureOverlay.Instance = this;
this._thumbDoc = FieldValue(Cast(GestureOverlay.setupThumbDoc(Doc.UserDoc()), Doc));
this._inkToTextDoc = FieldValue(Cast(this._thumbDoc?.inkToTextDoc, Doc));
};
@@ -627,6 +635,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
}
@action
onPointerUp = (e: PointerEvent) => {
+ GestureOverlay.DownDocView = undefined;
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 }));
@@ -649,9 +658,9 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
}
possibilities.push(...wR?.alternates?.map((a: any) => a.recognizedString));
}
- const r = Math.max(this.svgBounds.right, ...this._strokes.map(s => this.getBounds(s).right));
- const l = Math.min(this.svgBounds.left, ...this._strokes.map(s => this.getBounds(s).left));
- const t = Math.min(this.svgBounds.top, ...this._strokes.map(s => this.getBounds(s).top));
+ const r = Math.max(this.svgBounds.right, ...this._strokes.map(s => GestureOverlay.getBounds(s).right));
+ const l = Math.min(this.svgBounds.left, ...this._strokes.map(s => GestureOverlay.getBounds(s).left));
+ const t = Math.min(this.svgBounds.top, ...this._strokes.map(s => GestureOverlay.getBounds(s).top));
// if we receive any word results from cognitive services, display them
runInAction(() => {
@@ -882,7 +891,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
detail: {
points,
gesture,
- bounds: this.getBounds(points),
+ bounds: GestureOverlay.getBounds(points),
text,
},
})
@@ -890,7 +899,7 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
);
};
- getBounds = (stroke: InkData, pad?: boolean) => {
+ public static getBounds = (stroke: InkData, pad?: boolean) => {
const padding = pad ? [-20000, 20000] : [];
const xs = [...padding, ...stroke.map(p => p.X)];
const ys = [...padding, ...stroke.map(p => p.Y)];
@@ -902,12 +911,12 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
};
@computed get svgBounds() {
- return this.getBounds(this._points);
+ return GestureOverlay.getBounds(this._points);
}
@computed get elements() {
- const selView = SelectionManager.Views().lastElement();
- const width = (Number(ActiveInkWidth()) * NumCast(selView?.rootDoc._viewScale, 1)) / (selView?.props.ScreenToLocalTransform().Scale || 1);
+ const selView = GestureOverlay.DownDocView;
+ const width = Number(ActiveInkWidth()) * NumCast(selView?.rootDoc._freeform_scale, 1); // * (selView?.props.ScreenToLocalTransform().Scale || 1);
const rect = this._overlayRef.current?.getBoundingClientRect();
const B = { left: -20000, right: 20000, top: -20000, bottom: 20000, width: 40000, height: 40000 }; //this.getBounds(this._points, true);
B.left = B.left - width / 2;
@@ -1001,14 +1010,12 @@ export class GestureOverlay extends Touchable<GestureOverlayProps> {
renderDepth={0}
styleProvider={returnEmptyString}
docViewPath={returnEmptyDoclist}
- focus={DocUtils.DefaultFocus}
+ focus={emptyFunction}
whenChildContentsActiveChanged={emptyFunction}
bringToFront={emptyFunction}
docRangeFilters={returnEmptyFilter}
docFilters={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
/>
);
};