aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/ContextMenu.tsx2
-rw-r--r--src/client/views/OverlayView.tsx36
-rw-r--r--src/client/views/ScriptingRepl.tsx71
-rw-r--r--src/client/views/animationtimeline/Region.tsx4
-rw-r--r--src/client/views/nodes/DocumentIcon.tsx1
5 files changed, 79 insertions, 35 deletions
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 831925054..118a2c5f5 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -17,7 +17,7 @@ export class ContextMenu extends React.Component {
private _defaultItem: ((name: string) => void) | undefined;
private _onDisplay?: () => void = undefined;
- @observable _items: ContextMenuProps[] = observable([]);
+ @observable.shallow _items: ContextMenuProps[] = [];
@observable _pageX: number = 0;
@observable _pageY: number = 0;
@observable _display: boolean = false;
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index dd547c549..e41113ca4 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -1,21 +1,20 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable, toJS } from 'mobx';
import { observer } from 'mobx-react';
import { computedFn } from 'mobx-utils';
import * as React from 'react';
import ReactLoading from 'react-loading';
+import { Utils, copyProps, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue, setupMoveUpEvents } from '../../Utils';
import { Doc } from '../../fields/Doc';
import { Height, Width } from '../../fields/DocSymbols';
import { Id } from '../../fields/FieldSymbols';
import { NumCast } from '../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../Utils';
import { DocumentType } from '../documents/DocumentTypes';
import { DragManager } from '../util/DragManager';
import { Transform } from '../util/Transform';
-import { CollectionFreeFormLinksView } from './collections/collectionFreeForm/CollectionFreeFormLinksView';
import { LightboxView } from './LightboxView';
-import { DocumentView, DocumentViewInternal } from './nodes/DocumentView';
import './OverlayView.scss';
import { DefaultStyleProvider } from './StyleProvider';
+import { DocumentView, DocumentViewInternal } from './nodes/DocumentView';
const _global = (window /* browser */ || global) /* node */ as any;
export type OverlayDisposer = () => void;
@@ -36,12 +35,17 @@ export interface OverlayWindowProps {
@observer
export class OverlayWindow extends React.Component<OverlayWindowProps> {
- @observable x: number;
- @observable y: number;
- @observable width: number;
- @observable height: number;
+ @observable x: number = 0;
+ @observable y: number = 0;
+ @observable width: number = 0;
+ @observable height: number = 0;
+
+ _prevProps: OverlayWindowProps;
+ @observable _props: OverlayWindowProps;
constructor(props: OverlayWindowProps) {
super(props);
+ this._props = this._prevProps = props;
+ makeObservable(this);
const opts = props.overlayOptions;
this.x = opts.x;
@@ -50,6 +54,10 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> {
this.height = opts.height || 200;
}
+ componentDidUpdate() {
+ copyProps(this);
+ }
+
onPointerDown = (_: React.PointerEvent) => {
document.removeEventListener('pointermove', this.onPointerMove);
document.removeEventListener('pointerup', this.onPointerUp);
@@ -94,8 +102,8 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> {
return LightboxView.LightboxDoc ? null : (
<div className="overlayWindow-outerDiv" style={{ transform: `translate(${this.x}px, ${this.y}px)`, width: this.width, height: this.height }}>
<div className="overlayWindow-titleBar" onPointerDown={this.onPointerDown}>
- {this.props.overlayOptions.title || 'Untitled'}
- <button onClick={this.props.onClick} className="overlayWindow-closeButton">
+ {this._props.overlayOptions.title || 'Untitled'}
+ <button onClick={this._props.onClick} className="overlayWindow-closeButton">
X
</button>
</div>
@@ -109,11 +117,11 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> {
@observer
export class OverlayView extends React.Component {
public static Instance: OverlayView;
- @observable.shallow
- private _elements: JSX.Element[] = [];
+ @observable.shallow _elements: JSX.Element[] = [];
constructor(props: any) {
super(props);
+ makeObservable(this);
if (!OverlayView.Instance) {
OverlayView.Instance = this;
new _global.ResizeObserver(
@@ -139,7 +147,7 @@ export class OverlayView extends React.Component {
const index = this._elements.indexOf(ele);
if (index !== -1) this._elements.splice(index, 1);
});
- ele = (
+ this._elements.push(
<div
key={Utils.GenerateGuid()}
className="overlayView-wrapperDiv"
@@ -153,7 +161,6 @@ export class OverlayView extends React.Component {
{ele}
</div>
);
- this._elements.push(ele);
return remove;
}
@@ -255,7 +262,6 @@ export class OverlayView extends React.Component {
return (
<div className="overlayView" id="overlayView">
<div>{this._elements}</div>
- <CollectionFreeFormLinksView key="freeformLinks" />
{this.overlayDocs}
</div>
);
diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx
index 9966dbced..8251d20dc 100644
--- a/src/client/views/ScriptingRepl.tsx
+++ b/src/client/views/ScriptingRepl.tsx
@@ -1,5 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { DocumentManager } from '../util/DocumentManager';
@@ -10,24 +10,40 @@ import { undoable } from '../util/UndoManager';
import { DocumentIconContainer } from './nodes/DocumentIcon';
import { OverlayView } from './OverlayView';
import './ScriptingRepl.scss';
+import { copyProps } from '../../Utils';
-@observer
-export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: () => void; value: { [key: string]: any }; name?: string }> {
+interface ReplProps {
+ scrollToBottom: () => void;
+ value: { [key: string]: any };
+ name?: string;
+}
+export class ScriptingObjectDisplay extends React.Component<ReplProps> {
@observable collapsed = true;
+ _prevProps: ReplProps;
+ @observable _props: ReplProps;
+ constructor(props: ReplProps) {
+ super(props);
+ this._props = this._prevProps = props;
+ makeObservable(this);
+ }
+ componentDidUpdate(): void {
+ copyProps(this);
+ }
+
@action
toggle = () => {
this.collapsed = !this.collapsed;
- this.props.scrollToBottom();
+ this._props.scrollToBottom();
};
render() {
- const val = this.props.value;
+ const val = this._props.value;
const proto = Object.getPrototypeOf(val);
const name = (proto && proto.constructor && proto.constructor.name) || String(val);
- const title = this.props.name ? (
+ const title = this._props.name ? (
<>
- <b>{this.props.name} : </b>
+ <b>{this._props.name} : </b>
{name}
</>
) : (
@@ -53,7 +69,7 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: ()
</div>
<div className="scriptingObject-fields">
{Object.keys(val).map(key => (
- <ScriptingValueDisplay {...this.props} name={key} />
+ <ScriptingValueDisplay {...this._props} name={key} />
))}
</div>
</div>
@@ -62,17 +78,32 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: ()
}
}
+interface replValueProps {
+ scrollToBottom: () => void;
+ value: any;
+ name?: string;
+}
@observer
-export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: () => void; value: any; name?: string }> {
+export class ScriptingValueDisplay extends React.Component<replValueProps> {
+ _prevProps: replValueProps;
+ @observable _props: replValueProps;
+ constructor(props: replValueProps) {
+ super(props);
+ this._props = this._prevProps = props;
+ makeObservable(this);
+ }
+ componentDidUpdate() {
+ copyProps(this);
+ }
render() {
- const val = this.props.name ? this.props.value[this.props.name] : this.props.value;
+ const val = this._props.name ? this._props.value[this._props.name] : this._props.value;
if (typeof val === 'object') {
- return <ScriptingObjectDisplay scrollToBottom={this.props.scrollToBottom} value={val} name={this.props.name} />;
+ return <ScriptingObjectDisplay scrollToBottom={this._props.scrollToBottom} value={val} name={this._props.name} />;
} else if (typeof val === 'function') {
const name = '[Function]';
- const title = this.props.name ? (
+ const title = this._props.name ? (
<>
- <b>{this.props.name} : </b>
+ <b>{this._props.name} : </b>
{name}
</>
) : (
@@ -81,9 +112,9 @@ export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: ()
return <div className="scriptingObject-leaf">{title}</div>;
} else {
const name = String(val);
- const title = this.props.name ? (
+ const title = this._props.name ? (
<>
- <b>{this.props.name} : </b>
+ <b>{this._props.name} : </b>
{name}
</>
) : (
@@ -96,6 +127,11 @@ export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: ()
@observer
export class ScriptingRepl extends React.Component {
+ constructor(props: any) {
+ super(props);
+ makeObservable(this);
+ }
+
@observable private commands: { command: string; result: any }[] = [];
private commandsHistory: string[] = [];
@@ -136,7 +172,8 @@ export class ScriptingRepl extends React.Component {
const m = parseInt(match[1]);
usedDocuments.push(m);
} else {
- return ts.createPropertyAccess(ts.createIdentifier('args'), node);
+ return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('args'), node);
+ // ts.createPropertyAccess(ts.createIdentifier('args'), node);
}
}
}
@@ -156,7 +193,7 @@ export class ScriptingRepl extends React.Component {
case 'Enter': {
e.stopPropagation();
const docGlobals: { [name: string]: any } = {};
- DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.props.Document));
+ DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.Document));
const globals = ScriptingGlobals.makeMutableGlobalsCopy(docGlobals);
const script = CompileScript(this.commandString, { typecheck: false, addReturn: true, editable: true, params: { args: 'any' }, transformer: this.getTransformer(), globals });
if (!script.compiled) {
diff --git a/src/client/views/animationtimeline/Region.tsx b/src/client/views/animationtimeline/Region.tsx
index bc87dc94d..abbc8203d 100644
--- a/src/client/views/animationtimeline/Region.tsx
+++ b/src/client/views/animationtimeline/Region.tsx
@@ -31,11 +31,11 @@ export namespace RegionHelpers {
let rightMost: RegionData | undefined = undefined;
regions.forEach(region => {
const neighbor = RegionData(region);
- if (currentRegion.position! > neighbor.position) {
+ if (NumCast(currentRegion.position) > neighbor.position) {
if (!leftMost || neighbor.position > leftMost.position) {
leftMost = neighbor;
}
- } else if (currentRegion.position! < neighbor.position) {
+ } else if (NumCast(currentRegion.position) < neighbor.position) {
if (!rightMost || neighbor.position < rightMost.position) {
rightMost = neighbor;
}
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index 0c780af2a..9ec4d8c13 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -16,6 +16,7 @@ interface DocumentIconProps {
view: DocumentView;
index: number;
}
+@observer
export class DocumentIcon extends React.Component<DocumentIconProps> {
@observable _hovered = false;
_prevProps: DocumentIconProps;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-26 07:33:17 +0000