diff options
| author | bobzel <zzzman@gmail.com> | 2023-12-21 14:55:48 -0500 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2023-12-21 14:55:48 -0500 |
| commit | 1caba64ee0f32ee8af79263cd4ef2a8bc5d5146e (patch) | |
| tree | 0fa0e957d1f342fdc6ed4a4b43f5dddfddb1298a /src/client/views/GestureOverlay.tsx | |
| parent | 02eb7da95df283606d4275a22d9451cef371c3b5 (diff) | |
| parent | 2691b951d96f2ce7652acbea9e340b61737b3b57 (diff) | |
Merge branch 'moreUpgrading' into dataViz-annotations
Diffstat (limited to 'src/client/views/GestureOverlay.tsx')
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 24 |
1 files changed, 11 insertions, 13 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index db6c00426..33cda6a62 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -1,6 +1,6 @@ -import React = require('react'); +import * as React from 'react'; import * as fitCurve from 'fit-curve'; -import { action, computed, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction, toJS } from 'mobx'; import { observer } from 'mobx-react'; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils'; import { Doc, Opt } from '../../fields/Doc'; @@ -14,7 +14,6 @@ import { InteractionUtils } from '../util/InteractionUtils'; import { ScriptingGlobals } from '../util/ScriptingGlobals'; import { Transform } from '../util/Transform'; import './GestureOverlay.scss'; -import { InkTranscription } from './InkTranscription'; import { ActiveArrowEnd, ActiveArrowScale, @@ -32,12 +31,13 @@ import { } from './InkingStroke'; import { checkInksToGroup } from './global/globalScripts'; import { DocumentView } from './nodes/DocumentView'; +import { ObservableReactComponent } from './ObservableReactComponent'; interface GestureOverlayProps { isActive: boolean; } @observer -export class GestureOverlay extends React.Component<React.PropsWithChildren<GestureOverlayProps>> { +export class GestureOverlay extends ObservableReactComponent<React.PropsWithChildren<GestureOverlayProps>> { static Instance: GestureOverlay; static Instances: GestureOverlay[] = []; @@ -85,7 +85,7 @@ export class GestureOverlay extends React.Component<React.PropsWithChildren<Gest constructor(props: any) { super(props); - + makeObservable(this); GestureOverlay.Instances.push(this); } @@ -93,9 +93,9 @@ export class GestureOverlay extends React.Component<React.PropsWithChildren<Gest GestureOverlay.Instances.splice(GestureOverlay.Instances.indexOf(this), 1); GestureOverlay.Instance = GestureOverlay.Instances.lastElement(); } - componentDidMount = () => { + componentDidMount() { GestureOverlay.Instance = this; - }; + } @action onPointerDown = (e: React.PointerEvent) => { @@ -178,7 +178,7 @@ export class GestureOverlay extends React.Component<React.PropsWithChildren<Gest newPoints.pop(); const controlPoints: { X: number; Y: number }[] = []; - const bezierCurves = fitCurve(newPoints, 10); + const bezierCurves = (fitCurve as any)(newPoints, 10); for (const curve of bezierCurves) { controlPoints.push({ X: curve[0][0], Y: curve[0][1] }); controlPoints.push({ X: curve[1][0], Y: curve[1][1] }); @@ -384,9 +384,9 @@ export class GestureOverlay extends React.Component<React.PropsWithChildren<Gest return GestureOverlay.getBounds(this._points); } - @computed get elements() { + get elements() { const selView = GestureOverlay.DownDocView; - const width = Number(ActiveInkWidth()) * NumCast(selView?.rootDoc._freeform_scale, 1); // * (selView?.props.ScreenToLocalTransform().Scale || 1); + const width = Number(ActiveInkWidth()) * NumCast(selView?.Document._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; @@ -466,10 +466,8 @@ export class GestureOverlay extends React.Component<React.PropsWithChildren<Gest this._clipboardDoc = ( <DocumentView Document={doc} - DataDoc={undefined} addDocument={undefined} addDocTab={returnFalse} - rootSelected={returnTrue} pinToPres={emptyFunction} removeDocument={undefined} ScreenToLocalTransform={this.screenToLocalTransform} @@ -502,7 +500,7 @@ export class GestureOverlay extends React.Component<React.PropsWithChildren<Gest render() { return ( - <div className="gestureOverlay-cont" style={{ pointerEvents: this.props.isActive ? 'all' : 'none' }} ref={this._overlayRef} onPointerDown={this.onPointerDown}> + <div className="gestureOverlay-cont" style={{ pointerEvents: this._props.isActive ? 'all' : 'none' }} ref={this._overlayRef} onPointerDown={this.onPointerDown}> {this.showMobileInkOverlay ? <MobileInkOverlay /> : null} {this.elements} |
