Rework custom raster layer creation (#32)

* Rework raster layer creation

* Add TODO comment

* Fix build

* Add icon for custom layer

* Fix missing parameters when creating source

* Bring back removed id

* Fix test

* Use PromiseDelegate

* Fix readonly property editing while creating layer

* Rework dialog buttons

Author: martinRenou

.gitignore

@@ -130,5 +130,6 @@ jupytergis/_version.py
 python/jupytergis_lab/jupytergis_lab/labextension/
 python/jupytergis_lab/jupytergis_lab/notebook/objects/_schema
 packages/base/rasterlayer_gallery/*
+!packages/base/rasterlayer_gallery/custom_raster.png
 
 untitled*

packages/base/rasterlayer_gallery/custom_raster.png

@@ -1,18 +1,12 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import { Dialog, WidgetTracker } from '@jupyterlab/apputils';
+import { WidgetTracker } from '@jupyterlab/apputils';
 import { ITranslator } from '@jupyterlab/translation';
 import { redoIcon, undoIcon } from '@jupyterlab/ui-components';
 
 import {
-  IDict,
   IJGISFormSchemaRegistry,
-  IJGISLayer,
-  IJGISLayerBrowserRegistry,
-  IJGISSource,
-  IJupyterGISModel
+  IJGISLayerBrowserRegistry
 } from '@jupytergis/schema';
-import { UUID } from '@lumino/coreutils';
-import { FormDialog } from './formdialog';
 
 import { LayerBrowserWidget } from './layerBrowser/layerBrowserDialog';
 import { JupyterGISWidget } from './widget';
@@ -65,17 +59,6 @@ export function addCommands(
     icon: undoIcon
   });
 
-  commands.addCommand(CommandIDs.newRasterLayer, {
-    label: trans.__('New Tile Layer'),
-    isEnabled: () => {
-      return tracker.currentWidget
-        ? tracker.currentWidget.context.model.sharedModel.editable
-        : false;
-    },
-    iconClass: 'fa fa-map',
-    execute: Private.createRasterSourceAndLayer(tracker)
-  });
-
   commands.addCommand(CommandIDs.openLayerBrowser, {
     label: trans.__('Open Layer Browser'),
     isEnabled: () => {
@@ -84,7 +67,11 @@ export function addCommands(
         : false;
     },
     iconClass: 'fa fa-book-open',
-    execute: Private.createLayerBrowser(tracker, layerBrowserRegistry)
+    execute: Private.createLayerBrowser(
+      tracker,
+      layerBrowserRegistry,
+      formSchemaRegistry
+    )
   });
 }
 
@@ -95,7 +82,6 @@ export namespace CommandIDs {
   export const redo = 'jupytergis:redo';
   export const undo = 'jupytergis:undo';
 
-  export const newRasterLayer = 'jupytergis:newRasterLayer';
   export const openLayerBrowser = 'jupytergis:openLayerBrowser';
 }
 
@@ -121,7 +107,8 @@ namespace Private {
 
   export function createLayerBrowser(
     tracker: WidgetTracker<JupyterGISWidget>,
-    layerBrowserRegistry: IJGISLayerBrowserRegistry
+    layerBrowserRegistry: IJGISLayerBrowserRegistry,
+    formSchemaRegistry: IJGISFormSchemaRegistry
   ) {
     return async () => {
       const current = tracker.currentWidget;
@@ -130,83 +117,10 @@ namespace Private {
         return;
       }
 
-      const dialog = new Dialog({
-        body: new LayerBrowserWidget(
-          current.context.model,
-          layerBrowserRegistry.getRegistryLayers()
-        ),
-        buttons: [Dialog.cancelButton(), Dialog.okButton()]
-      });
-      await dialog.launch();
-    };
-  }
-
-  // TODO Allow for creating only a source (e.g. loading a CSV file)
-  // TODO Allow for creating only a layer (e.g. creating a vector layer given a source selected from a dropdown)
-  export function createRasterSourceAndLayer(
-    tracker: WidgetTracker<JupyterGISWidget>
-  ) {
-    return async (args: any) => {
-      const current = tracker.currentWidget;
-
-      if (!current) {
-        return;
-      }
-
-      const form = {
-        title: 'Raster Layer parameters',
-        default: (model: IJupyterGISModel) => {
-          return {
-            name: 'RasterSource',
-            url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-            maxZoom: 24,
-            minZoom: 0
-          };
-        }
-      };
-
-      current.context.model.syncFormData(form);
-
-      const dialog = new FormDialog({
-        context: current.context,
-        title: form.title,
-        sourceData: form.default(current.context.model),
-        schema: FORM_SCHEMA['RasterSource'],
-        syncData: (props: IDict) => {
-          const sharedModel = current.context.model.sharedModel;
-          if (!sharedModel) {
-            return;
-          }
-
-          const { name, ...parameters } = props;
-
-          const sourceId = UUID.uuid4();
-
-          const sourceModel: IJGISSource = {
-            type: 'RasterSource',
-            name,
-            parameters: {
-              url: parameters.url,
-              minZoom: parameters.minZoom,
-              maxZoom: parameters.maxZoom
-            }
-          };
-
-          const layerModel: IJGISLayer = {
-            type: 'RasterLayer',
-            parameters: {
-              source: sourceId
-            },
-            visible: true,
-            name: name + ' Layer'
-          };
-
-          sharedModel.addSource(sourceId, sourceModel);
-          current.context.model.addLayer(UUID.uuid4(), layerModel);
-        },
-        cancelButton: () => {
-          current.context.model.syncFormData(undefined);
-        }
+      const dialog = new LayerBrowserWidget({
+        model: current.context.model,
+        registry: layerBrowserRegistry.getRegistryLayers(),
+        formSchemaRegistry
       });
       await dialog.launch();
     };

packages/base/src/commands.ts

@@ -2,3 +2,8 @@ declare module "*.svg" {
   const value: string; // @ts-ignore
   export default value;
 }
+
+declare module '*.png'{
+  const value: string; // @ts-ignore
+  export default value;
+}

packages/base/src/svg.d.ts renamed to packages/base/src/declaration.d.ts

@@ -9,33 +9,24 @@ export interface IFormDialogOptions {
   schema: IDict;
   sourceData: IDict;
   title: string;
-  cancelButton: (() => void) | boolean;
   syncData: (props: IDict) => void;
   context: DocumentRegistry.IContext<IJupyterGISModel>;
 }
 
+// TODO This is currently not used, shall we remove it or will we need it later?
 export class FormDialog extends Dialog<IDict> {
   constructor(options: IFormDialogOptions) {
-    let cancelCallback: (() => void) | undefined = undefined;
-    if (options.cancelButton) {
-      cancelCallback = () => {
-        if (options.cancelButton !== true && options.cancelButton !== false) {
-          options.cancelButton();
-        }
-        this.resolve(0);
-      };
-    }
     const filePath = options.context.path;
     const jGISModel = options.context.model;
     const body = (
       <div style={{ overflow: 'hidden' }}>
         <ObjectPropertiesForm
+          formContext="create"
           model={jGISModel}
           filePath={`${filePath}::dialog`}
           sourceData={options.sourceData}
           schema={options.schema}
           syncData={options.syncData}
-          cancel={cancelCallback}
         />
       </div>
     );