Remove view-related properties from the DocumentModel

src/factory.ts

@@ -36,15 +36,12 @@ export class JupyterCadWidgetFactory extends ABCWidgetFactory<
   protected createNewWidget(
     context: DocumentRegistry.IContext<JupyterCadModel>
   ): JupyterCadWidget {
-    const toolbarModel = new ToolbarModel({ context });
+    const content = new JupyterCadPanel(context);
+    const toolbarModel = new ToolbarModel({ panel: content, context });
     const toolbar = new ToolbarWidget({
       model: toolbarModel,
       commands: this._commands
     });
-    return new JupyterCadWidget({
-      context,
-      content: new JupyterCadPanel(context),
-      toolbar
-    });
+    return new JupyterCadWidget({ context, content, toolbar });
   }
 }

src/mainview.tsx

@@ -1,9 +1,11 @@
 import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
 import { User } from '@jupyterlab/services';
 
 import { MapChange } from '@jupyter/ydoc';
 
 import { CommandRegistry } from '@lumino/commands';
+import { JSONValue } from '@lumino/coreutils';
 import { ContextMenu } from '@lumino/widgets';
 
 import * as React from 'react';
@@ -34,8 +36,6 @@ import {
 } from './types';
 
 import { FloatingAnnotation } from './annotation/view';
-import { IChangedArgs } from '@jupyterlab/coreutils';
-import { JSONValue } from '@lumino/coreutils';
 
 // Apply the BVH extension
 THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
@@ -51,6 +51,7 @@ const DEFAULT_MESH_COLOR = new THREE.Color('#434442');
 const SELECTED_MESH_COLOR = new THREE.Color('#AB5118');
 
 interface IProps {
+  view: ObservableMap<JSONValue>;
   context: DocumentRegistry.IContext<JupyterCadModel>;
 }
 
@@ -80,6 +81,7 @@ export class MainView extends React.Component<IProps, IStates> {
     this._geometry.setDrawRange(0, 3 * 10000);
 
     this._resizeTimeout = null;
+    this.props.view.changed.connect(this._onViewChanged, this);
 
     const lightTheme =
       document.body.getAttribute('data-jp-theme-light') === 'true';
@@ -113,7 +115,6 @@ export class MainView extends React.Component<IProps, IStates> {
         this._onClientSharedStateChanged,
         this
       );
-      this._model.viewChanged.connect(this._onViewChanged, this);
       this._model.sharedMetadataChanged.connect(
         this._onSharedMetadataChanged,
         this
@@ -137,6 +138,7 @@ export class MainView extends React.Component<IProps, IStates> {
   componentWillUnmount(): void {
     window.cancelAnimationFrame(this._requestID);
     window.removeEventListener('resize', this._handleWindowResize);
+    this.props.view.changed.disconnect(this._onViewChanged, this);
     this._controls.dispose();
     this._postMessage({
       action: WorkerAction.CLOSE_FILE,
@@ -150,7 +152,6 @@ export class MainView extends React.Component<IProps, IStates> {
       this._onClientSharedStateChanged,
       this
     );
-    this._model.viewChanged.disconnect(this._onViewChanged, this);
     this._model.sharedMetadataChanged.disconnect(
       this._onSharedMetadataChanged,
       this
@@ -745,14 +746,14 @@ export class MainView extends React.Component<IProps, IStates> {
   }
 
   private _onViewChanged(
-    sender: JupyterCadModel,
-    change: IChangedArgs<JSONValue>
+    sender: ObservableMap<JSONValue>,
+    change: IObservableMap.IChangedArgs<JSONValue>
   ): void {
-    if (change.name === 'grid') {
+    if (change.key === 'grid') {
       this._gridHelper?.removeFromParent();
       const grid = change.newValue as GridHelper | undefined;
 
-      if (grid && grid.visible) {
+      if (change.type !== 'remove' && grid && grid.visible) {
         this._gridHelper = new THREE.GridHelper(
           grid.size,
           grid.divisions,
@@ -764,11 +765,11 @@ export class MainView extends React.Component<IProps, IStates> {
       }
     }
 
-    if (change.name === 'axe') {
+    if (change.key === 'axe') {
       this._sceneAxe?.removeFromParent();
       const axe = change.newValue as AxeHelper | undefined;
 
-      if (axe && axe.visible) {
+      if (change.type !== 'remove' && axe && axe.visible) {
         this._sceneAxe = new THREE.AxesHelper(axe.size);
         this._scene.add(this._sceneAxe);
       }

src/model.ts

@@ -30,8 +30,6 @@ export class JupyterCadModel implements IJupyterCadModel {
     this.sharedModel.changed.connect(this._onSharedModelChanged);
     this.sharedModel.awareness.on('change', this._onClientStateChanged);
     this.annotationModel = annotationModel;
-
-    this._view = new Map<string, JSONValue>();
   }
 
   readonly collaborative = true;
@@ -52,10 +50,6 @@ export class JupyterCadModel implements IJupyterCadModel {
     return this._sharedModelChanged;
   }
 
-  get viewChanged(): ISignal<this, IChangedArgs<JSONValue>> {
-    return this._viewChanged;
-  }
-
   get themeChanged(): Signal<
     this,
     IChangedArgs<string, string | null, string>
@@ -182,22 +176,6 @@ export class JupyterCadModel implements IJupyterCadModel {
     return this.sharedModel.awareness.clientID;
   }
 
-  getView(key: string): JSONValue | undefined {
-    return this._view.get(key);
-  }
-
-  setView(key: string, value: JSONValue): void {
-    const oldValue = this._view.get(key) ?? null;
-    this._view.set(key, value);
-    this._viewChanged.emit({ name: key, oldValue, newValue: value });
-  }
-
-  deleteView(key: string): void {
-    const oldValue = this._view.get(key) ?? null;
-    this._view.delete(key);
-    this._viewChanged.emit({ name: key, oldValue, newValue: null });
-  }
-
   addMetadata(key: string, value: string): void {
     this.sharedModel.setMetadata(key, value);
   }
@@ -231,12 +209,9 @@ export class JupyterCadModel implements IJupyterCadModel {
   private _readOnly = false;
   private _isDisposed = false;
 
-  private _view: Map<string, JSONValue>;
-
   private _contentChanged = new Signal<this, void>(this);
   private _stateChanged = new Signal<this, IChangedArgs<any>>(this);
   private _themeChanged = new Signal<this, IChangedArgs<any>>(this);
-  private _viewChanged = new Signal<this, IChangedArgs<JSONValue>>(this);
   private _clientStateChanged = new Signal<
     this,
     Map<number, IJupyterCadClientState>

src/toolbar/gridtoolbar.tsx

@@ -2,7 +2,8 @@ import { Button } from '@jupyterlab/ui-components';
 
 import * as React from 'react';
 
-import { AxeHelper, GridHelper, IDict, IJupyterCadModel } from '../types';
+import { AxeHelper, GridHelper, IDict } from '../types';
+import { JupyterCadPanel } from '../widget';
 import { FormDialog } from './formdialog';
 import { ToolbarModel } from './model';
 
@@ -16,20 +17,20 @@ interface IState {
 }
 
 export class HelpersToolbarReact extends React.Component<IProps, IState> {
-  private _model: IJupyterCadModel;
+  private _panel: JupyterCadPanel;
 
   constructor(props: IProps) {
     super(props);
-    this._model = this.props.toolbarModel.jcadModel!;
+    this._panel = this.props.toolbarModel.panel;
     this.state = this._createSchema();
   }
 
   componentDidMount(): void {
-    this._model.viewChanged.connect(this._updateSchema, this);
+    this._panel.viewChanged.connect(this._updateSchema, this);
   }
 
   componentWillUnmount(): void {
-    this._model.viewChanged.disconnect(this._updateSchema, this);
+    this._panel.viewChanged.disconnect(this._updateSchema, this);
   }
 
   private _createSchema(): IState {
@@ -42,8 +43,8 @@ export class HelpersToolbarReact extends React.Component<IProps, IState> {
       size: 5,
       visible: false
     };
-    this._model.setView('grid', grid);
-    this._model.setView('axe', axe);
+    this._panel.setView('grid', grid);
+    this._panel.setView('axe', axe);
 
     return {
       Grid: {
@@ -63,7 +64,7 @@ export class HelpersToolbarReact extends React.Component<IProps, IState> {
             divisions: Divisions,
             visible: Visible
           };
-          this._model.setView('grid', grid);
+          this._panel.setView('grid', grid);
         }
       },
       Axe: {
@@ -81,15 +82,15 @@ export class HelpersToolbarReact extends React.Component<IProps, IState> {
             size: Size,
             visible: Visible
           };
-          this._model.setView('axe', axe);
+          this._panel.setView('axe', axe);
         }
       }
     };
   }
 
   private _updateSchema(): void {
-    const grid = this._model.getView('grid') as GridHelper | undefined;
-    const axe = this._model.getView('axe') as AxeHelper | undefined;
+    const grid = this._panel.getView('grid') as GridHelper | undefined;
+    const axe = this._panel.getView('axe') as AxeHelper | undefined;
 
     const { Grid, Axe } = this.state;
     Grid['default'] = {

src/toolbar/model.ts

@@ -6,6 +6,7 @@ import formSchema from '../_interface/forms.json';
 import { IJupyterCadDoc } from '../types';
 import { JupyterCadModel } from './../model';
 import { User } from '@jupyterlab/services';
+import { JupyterCadPanel } from '../widget';
 
 export interface IUserData {
   userId: number;
@@ -14,13 +15,19 @@ export interface IUserData {
 
 export class ToolbarModel {
   constructor(options: ToolbarModel.IOptions) {
+    this._panel = options.panel;
     this._context = options.context;
     this._context.ready.then(() => {
       this._filePath = this._context.path;
     });
 
     this._prepareSchema();
   }
+
+  get panel(): JupyterCadPanel {
+    return this._panel;
+  }
+
   get sharedModel(): IJupyterCadDoc | undefined {
     return this._sharedModel;
   }
@@ -108,6 +115,7 @@ export class ToolbarModel {
     });
   }
 
+  private _panel: JupyterCadPanel;
   private _context: DocumentRegistry.IContext<JupyterCadModel>;
   private _sharedModel?: IJupyterCadDoc;
   private _formSchema = JSON.parse(JSON.stringify(formSchema));
@@ -118,6 +126,7 @@ export class ToolbarModel {
 
 export namespace ToolbarModel {
   export interface IOptions {
+    panel: JupyterCadPanel;
     context: DocumentRegistry.IContext<JupyterCadModel>;
   }
 }

src/types.ts

@@ -6,7 +6,7 @@ import { User } from '@jupyterlab/services';
 import { MapChange, YDocument, StateChange } from '@jupyter/ydoc';
 
 import { ISignal, Signal } from '@lumino/signaling';
-import { JSONObject, JSONValue } from '@lumino/coreutils';
+import { JSONObject } from '@lumino/coreutils';
 
 import { IJupyterCadTracker } from './token';
 import { IJCadContent, IJCadObject, IJCadModel } from './_interface/jcad';
@@ -190,7 +190,6 @@ export interface IJupyterCadModel extends DocumentRegistry.IModel {
     IJupyterCadModel,
     IChangedArgs<string, string | null, string>
   >;
-  viewChanged: ISignal<IJupyterCadModel, IChangedArgs<JSONValue>>;
   clientStateChanged: ISignal<
     IJupyterCadModel,
     Map<number, IJupyterCadClientState>
@@ -212,10 +211,6 @@ export interface IJupyterCadModel extends DocumentRegistry.IModel {
 
   getClientId(): number;
 
-  getView(key: string): JSONValue | undefined;
-  setView(key: string, value: JSONValue): void;
-  deleteView(key: string): void;
-
   addMetadata(key: string, value: string): void;
   removeMetadata(key: string): void;
 }

src/widget.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 
 import { ReactWidget } from '@jupyterlab/apputils';
+import { ObservableMap, IObservableMap } from '@jupyterlab/observables';
 import { DocumentRegistry, DocumentWidget } from '@jupyterlab/docregistry';
 
-import { Signal } from '@lumino/signaling';
+import { ISignal, Signal } from '@lumino/signaling';
 
 import { MainView } from './mainview';
 import { JupyterCadModel } from './model';
 import { IJupyterCadWidget } from './types';
+import { JSONValue } from '@lumino/coreutils';
 
 export class JupyterCadWidget
   extends DocumentWidget<JupyterCadPanel, JupyterCadModel>
@@ -42,6 +44,12 @@ export class JupyterCadPanel extends ReactWidget {
     super();
     this.addClass('jp-jupytercad-panel');
     this._context = context;
+
+    this._view = new ObservableMap<JSONValue>();
+  }
+
+  get viewChanged(): ISignal<ObservableMap<JSONValue>, IObservableMap.IChangedArgs<JSONValue>> {
+    return this._view.changed
   }
 
   /**
@@ -55,9 +63,22 @@ export class JupyterCadPanel extends ReactWidget {
     super.dispose();
   }
 
+  getView(key: string): JSONValue | undefined {
+    return this._view.get(key);
+  }
+
+  setView(key: string, value: JSONValue): void {
+    this._view.set(key, value);
+  }
+
+  deleteView(key: string): void {
+    this._view.delete(key);
+  }
+
   render(): JSX.Element {
-    return <MainView context={this._context} />;
+    return <MainView view={this._view} context={this._context} />;
   }
 
+  private _view: ObservableMap<JSONValue>;
   private _context: DocumentRegistry.IContext<JupyterCadModel>;
 }