diff options
4 files changed, 24 insertions, 30 deletions
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts index 69c663a3e..a628c7120 100644 --- a/src/client/views/InkStrokeProperties.ts +++ b/src/client/views/InkStrokeProperties.ts @@ -1,5 +1,5 @@ import { Bezier } from 'bezier-js'; -import { action, makeObservable, observable, reaction } from 'mobx'; +import { action, makeObservable, observable, reaction, runInAction } from 'mobx'; import { Doc, NumListCast, Opt } from '../../fields/Doc'; import { InkData, InkField, InkTool, PointData } from '../../fields/InkField'; import { List } from '../../fields/List'; @@ -84,7 +84,6 @@ export class InkStrokeProperties { * @param control The list of all control points of the ink. */ @undoBatch - @action addPoints = (inkView: DocumentView, t: number, i: number, controls: { X: number; Y: number }[]) => { this.applyFunction(inkView, (view: DocumentView, ink: InkData) => { const doc = view.Document; @@ -95,7 +94,7 @@ export class InkStrokeProperties { // Updating the indices of the control points whose handle tangency has been broken. doc.brokenInkIndices = new List(Cast(doc.brokenInkIndices, listSpec('number'), []).map(control => (control > i ? control + 4 : control))); - this._currentPoint = -1; + runInAction(() => (this._currentPoint = -1)); return controls; }); @@ -155,7 +154,6 @@ export class InkStrokeProperties { * Deletes the current control point of the selected ink instance. */ @undoBatch - @action deletePoints = (inkView: DocumentView, preserve: boolean) => this.applyFunction( inkView, @@ -188,7 +186,7 @@ export class InkStrokeProperties { } } doc.brokenInkIndices = new List(brokenIndices.map(control => (control >= this._currentPoint ? control - 4 : control))); - this._currentPoint = -1; + runInAction(() => (this._currentPoint = -1)); return newPoints.length < 4 ? undefined : newPoints; }, true @@ -201,7 +199,6 @@ export class InkStrokeProperties { * @param scrpt The center point of the rotation in screen coordinates */ @undoBatch - @action rotateInk = (inkStrokes: DocumentView[], angle: number, scrpt: PointData) => { this.applyFunction(inkStrokes, (view: DocumentView, ink: InkData, xScale: number, yScale: number, inkStrokeWidth: number) => { const inkCenterPt = view.ComponentView?.ptFromScreen?.(scrpt); @@ -223,7 +220,6 @@ export class InkStrokeProperties { * @param scrpt The center point of the rotation in screen coordinates */ @undoBatch - @action stretchInk = (inkStrokes: DocumentView[], scaling: number, scrpt: PointData, scrVec: PointData, scaleUniformly: boolean) => { this.applyFunction(inkStrokes, (view: DocumentView, ink: InkData) => { const ptFromScreen = view.ComponentView?.ptFromScreen; @@ -244,7 +240,6 @@ export class InkStrokeProperties { * Handles the movement/scaling of a control point. */ @undoBatch - @action moveControlPtHandle = (inkView: DocumentView, deltaX: number, deltaY: number, controlIndex: number, origInk?: InkData) => this.applyFunction(inkView, (view: DocumentView, ink: InkData) => { const order = controlIndex % 4; @@ -457,7 +452,6 @@ export class InkStrokeProperties { * Handles the movement/scaling of a handle point. */ @undoBatch - @action moveTangentHandle = (inkView: DocumentView, deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) => this.applyFunction(inkView, (view: DocumentView, ink: InkData) => { const doc = view.Document; diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index 98d1e58e5..7577f2935 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -21,6 +21,7 @@ import { GestureOverlay } from './GestureOverlay'; import './LightboxView.scss'; import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView'; import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider'; +import { ObservableReactComponent } from './ObservableReactComponent'; interface LightboxViewProps { PanelWidth: number; @@ -31,7 +32,7 @@ interface LightboxViewProps { const savedKeys = ['freeform_panX', 'freeform_panY', 'freeform_scale', 'layout_scrollTop', 'layout_fieldKey']; type LightboxSavedState = { [key: string]: FieldResult; }; // prettier-ignore @observer -export class LightboxView extends React.Component<LightboxViewProps> { +export class LightboxView extends ObservableReactComponent<LightboxViewProps> { public static IsLightboxDocView(path: DocumentView[]) { return (path ?? []).includes(LightboxView.Instance?._docView!); } // prettier-ignore public static get LightboxDoc() { return LightboxView.Instance?._doc; } // prettier-ignore static Instance: LightboxView; @@ -45,19 +46,18 @@ export class LightboxView extends React.Component<LightboxViewProps> { private _savedState: LightboxSavedState = {}; private _history: { doc: Doc; target?: Doc }[] = []; @observable private _future: Doc[] = []; - @observable private _layoutTemplate: Opt<Doc>; - @observable private _layoutTemplateString: Opt<string>; - @observable private _doc: Opt<Doc>; - @observable private _docTarget: Opt<Doc>; - @observable private _docView: Opt<DocumentView>; + @observable private _layoutTemplate: Opt<Doc> = undefined; + @observable private _layoutTemplateString: Opt<string> = undefined; + @observable private _doc: Opt<Doc> = undefined; + @observable private _docTarget: Opt<Doc> = undefined; + @observable private _docView: Opt<DocumentView> = undefined; - @computed get leftBorder() { return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); } // prettier-ignore - @computed get topBorder() { return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); } // prettier-ignore + @computed get leftBorder() { return Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]); } // prettier-ignore + @computed get topBorder() { return Math.min(this._props.PanelHeight / 4, this._props.maxBorder[1]); } // prettier-ignore constructor(props: any) { super(props); makeObservable(this); - if (LightboxView.Instance) console.log('SDFSFASFASFSALFKJD:SLFJS:LDFJKS:LFJS:LDJFL:SDFJL:SDJF:LSJ'); LightboxView.Instance = this; } @@ -175,8 +175,8 @@ export class LightboxView extends React.Component<LightboxViewProps> { toggleExplore = () => (DocumentView.ExploreMode = !DocumentView.ExploreMode); lightboxDoc = () => this._doc; - lightboxWidth = () => this.props.PanelWidth - this.leftBorder * 2; - lightboxHeight = () => this.props.PanelHeight - this.topBorder * 2; + lightboxWidth = () => this._props.PanelWidth - this.leftBorder * 2; + lightboxHeight = () => this._props.PanelHeight - this.topBorder * 2; lightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1); lightboxDocTemplate = () => this._layoutTemplate; future = () => this._future; @@ -188,7 +188,7 @@ export class LightboxView extends React.Component<LightboxViewProps> { style={{ display: display ? '' : 'none', left, - width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), + width: bottom !== undefined ? undefined : Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]), bottom, }}> <div @@ -272,11 +272,11 @@ export class LightboxView extends React.Component<LightboxViewProps> { </GestureOverlay> </div> - {this.renderNavBtn(0, undefined, this.props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length, this.previous)} + {this.renderNavBtn(0, undefined, this._props.PanelHeight / 2 - 12.5, 'chevron-left', this._doc && this._history.length, this.previous)} {this.renderNavBtn( - this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), + this._props.PanelWidth - Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]), undefined, - this.props.PanelHeight / 2 - 12.5, + this._props.PanelHeight / 2 - 12.5, 'chevron-right', this._doc && this._future.length, this.next, diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 9132c0436..e12bcd8b0 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -303,8 +303,8 @@ export class CollectionMulticolumnView extends CollectionSubView() { for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; collector.push( - <Tooltip title={'Tab: ' + StrCast(layout.title)}> - <div className="document-wrapper" key={'wrapper' + i} style={{ flexDirection: 'column', width: this.lookupPixels(layout) }}> + <Tooltip title={'Tab: ' + StrCast(layout.title)} key={'wrapper' + i}> + <div className="document-wrapper" style={{ flexDirection: 'column', width: this.lookupPixels(layout) }}> {this.getDisplayDoc(layout)} <Button tooltip="Remove document from header bar" icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={undoable(e => this._props.removeDocument?.(layout), 'close doc')} color={SettingsManager.userColor} /> <WidthLabel layout={layout} collectionDoc={this.Document} /> @@ -326,10 +326,10 @@ export class CollectionMulticolumnView extends CollectionSubView() { return collector; } - render(): JSX.Element { + render() { return ( <div - className={'collectionMulticolumnView_contents'} + className="collectionMulticolumnView_contents" ref={this.createDashEventsTarget} style={{ width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`, diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index cf65bf12a..7dbc18e60 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -318,10 +318,10 @@ export class CollectionMultirowView extends CollectionSubView() { return collector; } - render(): JSX.Element { + render() { return ( <div - className={'collectionMultirowView_contents'} + className="collectionMultirowView_contents" style={{ width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`, height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`, |