Cleanup (#31)

Author: martinRenou

packages/base/src/commands.ts

@@ -167,23 +167,6 @@ namespace Private {
 
       current.context.model.syncFormData(form);
 
-      const syncSelectedField = (
-        id: string | null,
-        value: any,
-        parentType: 'panel' | 'dialog'
-      ): void => {
-        let property: string | null = null;
-        if (id) {
-          const prefix = id.split('_')[0];
-          property = id.substring(prefix.length);
-        }
-        current.context.model.syncSelectedPropField({
-          id: property,
-          value,
-          parentType
-        });
-      };
-
       const dialog = new FormDialog({
         context: current.context,
         title: form.title,
@@ -223,8 +206,7 @@ namespace Private {
         },
         cancelButton: () => {
           current.context.model.syncFormData(undefined);
-        },
-        syncSelectedPropField: syncSelectedField
+        }
       });
       await dialog.launch();
     };

packages/base/src/formdialog.tsx

@@ -1,26 +1,16 @@
-import {
-  IDict,
-  IJupyterGISClientState,
-  IJupyterGISModel
-} from '@jupytergis/schema';
+import { IDict, IJupyterGISModel } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import * as React from 'react';
 
 import { ObjectPropertiesForm } from './panelview/formbuilder';
-import { focusInputField, removeStyleFromProperty } from './tools';
 
 export interface IFormDialogOptions {
   schema: IDict;
   sourceData: IDict;
   title: string;
   cancelButton: (() => void) | boolean;
   syncData: (props: IDict) => void;
-  syncSelectedPropField?: (
-    id: string | null,
-    value: any,
-    parentType: 'dialog' | 'panel'
-  ) => void;
   context: DocumentRegistry.IContext<IJupyterGISModel>;
 }
 
@@ -40,52 +30,16 @@ export class FormDialog extends Dialog<IDict> {
     const body = (
       <div style={{ overflow: 'hidden' }}>
         <ObjectPropertiesForm
-          parentType="dialog"
           model={jGISModel}
           filePath={`${filePath}::dialog`}
           sourceData={options.sourceData}
           schema={options.schema}
           syncData={options.syncData}
           cancel={cancelCallback}
-          syncSelectedField={options.syncSelectedPropField}
         />
       </div>
     );
-    let lastSelectedPropFieldId;
-    const onClientSharedStateChanged = (
-      sender: IJupyterGISModel,
-      clients: Map<number, IJupyterGISClientState>
-    ): void => {
-      const remoteUser = jGISModel?.localState?.remoteUser;
-      if (remoteUser) {
-        const newState = clients.get(remoteUser);
 
-        const id = newState?.selectedPropField?.id;
-        const value = newState?.selectedPropField?.value;
-        const parentType = newState?.selectedPropField?.parentType;
-        if (parentType === 'dialog') {
-          lastSelectedPropFieldId = focusInputField(
-            `${filePath}::dialog`,
-            id,
-            value,
-            newState?.user?.color,
-            lastSelectedPropFieldId
-          );
-        }
-      } else {
-        if (lastSelectedPropFieldId) {
-          removeStyleFromProperty(
-            `${filePath}::dialog`,
-            lastSelectedPropFieldId,
-            ['border-color', 'box-shadow']
-          );
-
-          lastSelectedPropFieldId = undefined;
-        }
-      }
-    };
-
-    jGISModel?.clientStateChanged.connect(onClientSharedStateChanged);
     super({ title: options.title, body, buttons: [Dialog.cancelButton()] });
     this.addClass('jGIS-property-FormDialog');
   }

packages/base/src/panelview/formbuilder.tsx

@@ -14,16 +14,10 @@ interface IStates {
 }
 
 interface IProps {
-  parentType: 'dialog' | 'panel';
   sourceData: IDict | undefined;
   filePath?: string;
   model: IJupyterGISModel;
   syncData: (properties: IDict) => void;
-  syncSelectedField?: (
-    id: string | null,
-    value: any,
-    parentType: 'panel' | 'dialog'
-  ) => void;
   schema?: IDict;
   cancel?: () => void;
 }
@@ -104,7 +98,7 @@ export class ObjectPropertiesForm extends React.Component<IProps, IStates> {
       }
 
       // Don't show readOnly properties when coming from the properties panel
-      if (v['readOnly'] && this.props.parentType === 'panel') {
+      if (v['readOnly']) {
         this.removeFormEntry(k, data, schema, uiSchema);
       }
     });
@@ -180,17 +174,7 @@ export class ObjectPropertiesForm extends React.Component<IProps, IStates> {
         formData,
         onChange: this.onFormChange.bind(this),
         onSubmit: this.onFormSubmit.bind(this),
-        onFocus: (id, value) => {
-          this.props.syncSelectedField
-            ? this.props.syncSelectedField(id, value, this.props.parentType)
-            : null;
-        },
-        onBlur: (id, value) => {
-          this.props.syncSelectedField
-            ? this.props.syncSelectedField(null, value, this.props.parentType)
-            : null;
-          this.onFormBlur(id, value);
-        },
+        onBlur: this.onFormBlur.bind(this),
         uiSchema,
         children: (
           <button ref={submitRef} type="submit" style={{ display: 'none' }} />

packages/base/src/panelview/objectproperties.tsx

@@ -15,7 +15,7 @@ import { Panel } from '@lumino/widgets';
 import * as React from 'react';
 import { v4 as uuid } from 'uuid';
 
-import { focusInputField, removeStyleFromProperty, deepCopy } from '../tools';
+import { deepCopy } from '../tools';
 import { IControlPanelModel } from '../types';
 import { LayerPropertiesForm, RasterSourcePropertiesForm } from './formbuilder';
 import { JupyterGISWidget } from '../widget';
@@ -112,23 +112,6 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
     model.sharedModel.updateObjectParameters(id, properties);
   }
 
-  syncSelectedField = (
-    id: string | null,
-    value: any,
-    parentType: 'panel' | 'dialog'
-  ) => {
-    let property: string | null = null;
-    if (id) {
-      const prefix = id.split('_')[0];
-      property = id.substring(prefix.length);
-    }
-    this.props.cpModel.jGISModel?.syncSelectedPropField({
-      parentType,
-      id: property,
-      value
-    });
-  };
-
   private _sharedJGISModelChanged = (
     _: IJupyterGISDoc,
     changed: IJGISLayerDocChange
@@ -140,43 +123,17 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
     sender: IJupyterGISModel,
     clients: Map<number, IJupyterGISClientState>
   ): void => {
-    const remoteUser = this.props.cpModel.jGISModel?.localState?.remoteUser;
     let newState: IJupyterGISClientState | undefined;
     const clientId = this.state.clientId;
-    if (remoteUser) {
-      newState = clients.get(remoteUser);
-
-      const id = newState?.selectedPropField?.id;
-      const value = newState?.selectedPropField?.value;
-      const parentType = newState?.selectedPropField?.parentType;
-      if (parentType === 'panel') {
-        this._lastSelectedPropFieldId = focusInputField(
-          `${this.state.filePath}::panel`,
-          id,
-          value,
-          newState?.user?.color,
-          this._lastSelectedPropFieldId
-        );
-      }
-    } else {
-      const localState = clientId ? clients.get(clientId) : null;
-      if (this._lastSelectedPropFieldId) {
-        removeStyleFromProperty(
-          `${this.state.filePath}::panel`,
-          this._lastSelectedPropFieldId,
-          ['border-color', 'box-shadow']
-        );
 
-        this._lastSelectedPropFieldId = undefined;
-      }
-      if (
-        localState &&
-        localState.selected?.emitter &&
-        localState.selected.emitter !== this.state.id &&
-        localState.selected?.value
-      ) {
-        newState = localState;
-      }
+    const localState = clientId ? clients.get(clientId) : null;
+    if (
+      localState &&
+      localState.selected?.emitter &&
+      localState.selected.emitter !== this.state.id &&
+      localState.selected?.value
+    ) {
+      newState = localState;
     }
     if (newState) {
       const selection = newState.selected.value;
@@ -250,7 +207,6 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
           <div>
             <h3>Source Properties</h3>
             <RasterSourcePropertiesForm
-              parentType="panel"
               model={model}
               filePath={`${this.state.filePath}::panel`}
               schema={schema}
@@ -261,7 +217,6 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
                   properties
                 );
               }}
-              syncSelectedField={this.syncSelectedField}
             />
           </div>
         )
@@ -276,7 +231,6 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
       <div>
         <h3>Layer Properties</h3>
         <LayerPropertiesForm
-          parentType="panel"
           sourceType={selectedObjSource.type}
           model={model}
           filePath={`${this.state.filePath}::panel`}
@@ -285,20 +239,17 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
           syncData={(properties: { [key: string]: any }) => {
             this.syncObjectProperties(this.state.selectedObject, properties);
           }}
-          syncSelectedField={this.syncSelectedField}
         />
         <h3>Source Properties</h3>
         {selectedObjSource.type === 'RasterSource' && (
           <RasterSourcePropertiesForm
-            parentType="panel"
             model={model}
             filePath={`${this.state.filePath}::panel`}
             schema={sourceSchema}
             sourceData={selectedObjectSourceData}
             syncData={(properties: { [key: string]: any }) => {
               this.syncObjectProperties(selectedObjectSourceId, properties);
             }}
-            syncSelectedField={this.syncSelectedField}
           />
         )}
         {/* {selectedObjSource.type === 'GeoJSONSource' && (
@@ -309,7 +260,6 @@ class ObjectPropertiesReact extends React.Component<IProps, IStates> {
     );
   }
 
-  private _lastSelectedPropFieldId?: string;
   private _formSchema: Map<string, IDict>;
 }
 

packages/base/src/tools.ts

@@ -43,41 +43,6 @@ export function throttle<T extends (...args: any[]) => void>(
   } as T;
 }
 
-export function focusInputField(
-  filePath?: string,
-  fieldId?: string | null,
-  value?: any,
-  color?: string,
-  lastSelectedPropFieldId?: string
-): string | undefined {
-  const propsToRemove = ['border-color', 'box-shadow'];
-  let newSelected: string | undefined;
-  if (!fieldId) {
-    if (lastSelectedPropFieldId) {
-      removeStyleFromProperty(filePath, lastSelectedPropFieldId, propsToRemove);
-      if (value) {
-        const el = getElementFromProperty(filePath, lastSelectedPropFieldId);
-        if (el?.tagName?.toLowerCase() === 'input') {
-          (el as HTMLInputElement).value = value;
-        }
-      }
-      newSelected = undefined;
-    }
-  } else {
-    if (fieldId !== lastSelectedPropFieldId) {
-      removeStyleFromProperty(filePath, lastSelectedPropFieldId, propsToRemove);
-
-      const el = getElementFromProperty(filePath, fieldId);
-      if (el) {
-        el.style.borderColor = color ?? 'red';
-        el.style.boxShadow = `inset 0 0 4px ${color ?? 'red'}`;
-      }
-      newSelected = fieldId;
-    }
-  }
-  return newSelected;
-}
-
 export function getElementFromProperty(
   filePath?: string | null,
   prop?: string | null
@@ -93,20 +58,6 @@ export function getElementFromProperty(
   }
 }
 
-export function removeStyleFromProperty(
-  filePath: string | null | undefined,
-  prop: string | null | undefined,
-  properties: string[]
-): void {
-  if (!filePath || !prop || properties.length === 0) {
-    return;
-  }
-  const el = getElementFromProperty(filePath, prop);
-  if (el) {
-    properties.forEach(prop => el.style.removeProperty(prop));
-  }
-}
-
 export function nearest(n: number, tol: number): number {
   const round = Math.round(n);
   if (Math.abs(round - n) < tol) {

packages/schema/src/interfaces.ts

@@ -53,11 +53,6 @@ export interface ISelection {
 
 export interface IJupyterGISClientState {
   selected: { value?: { [key: string]: ISelection }; emitter?: string | null };
-  selectedPropField?: {
-    id: string | null;
-    value: any;
-    parentType: 'panel' | 'dialog';
-  };
   user: User.IIdentity;
   remoteUser?: number;
   toolbarForm?: IDict;
@@ -153,11 +148,6 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel {
   ): void;
 
   syncSelected(value: { [key: string]: ISelection }, emitter?: string): void;
-  syncSelectedPropField(data: {
-    id: string | null;
-    value: any;
-    parentType: 'panel' | 'dialog';
-  }): void;
   setUserToFollow(userId?: number): void;
   syncFormData(form: any): void;
 

packages/schema/src/model.ts

@@ -281,14 +281,6 @@ export class JupyterGISModel implements IJupyterGISModel {
     });
   }
 
-  syncSelectedPropField(data: {
-    id: string | null;
-    value: any;
-    parentType: 'panel' | 'dialog';
-  }): void {
-    this.sharedModel.awareness.setLocalStateField('selectedPropField', data);
-  }
-
   setUserToFollow(userId?: number): void {
     if (this._sharedModel) {
       this._sharedModel.awareness.setLocalStateField('remoteUser', userId);