Create and edit vector layers

.gitignore

@@ -125,6 +125,9 @@ dmypy.json
 **/ui-tests/test-results/
 **/ui-tests/playwright-report/
 
+# tests_results
+**/test-results/
+
 examples/Untitled*.ipynb
 # Hatchling
 jupytergis/_version.py

examples/editable.jGIS

@@ -0,0 +1,102 @@
+{
+  "layerTree": [
+    "8de7c2c0-6024-4716-b542-031a89fb87f9",
+    "3e21d680-406f-4099-bd9e-3a4edb9a2c8b"
+  ],
+  "layers": {
+    "3e21d680-406f-4099-bd9e-3a4edb9a2c8b": {
+      "filters": {
+        "appliedFilters": [],
+        "logicalOp": "all"
+      },
+      "name": "Editable GeoJSON Layer",
+      "parameters": {
+        "color": {
+          "circle-fill-color": "#f66151",
+          "circle-radius": 5.0,
+          "circle-stroke-color": "#62a0ea",
+          "circle-stroke-line-cap": "round",
+          "circle-stroke-line-join": "round",
+          "circle-stroke-width": 1.25
+        },
+        "opacity": 1.0,
+        "source": "348d85fa-3a71-447f-8a64-e283ec47cc7c",
+        "symbologyState": {
+          "renderType": "Single Symbol"
+        },
+        "type": "circle"
+      },
+      "type": "VectorLayer",
+      "visible": true
+    },
+    "8de7c2c0-6024-4716-b542-031a89fb87f9": {
+      "name": "OpenStreetMap.Mapnik Layer",
+      "parameters": {
+        "source": "b2ea427a-a51b-43ad-ae72-02cd900736d5"
+      },
+      "type": "RasterLayer",
+      "visible": true
+    }
+  },
+  "metadata": {},
+  "options": {
+    "bearing": 0.0,
+    "extent": [
+      -14181614.437015302,
+      -5303433.533961326,
+      -2473763.273952904,
+      13774201.834902454
+    ],
+    "latitude": 35.52446437432016,
+    "longitude": -74.80890180273175,
+    "pitch": 0.0,
+    "projection": "EPSG:3857",
+    "zoom": 2.6670105136699993
+  },
+  "schemaVersion": "0.5.0",
+  "sources": {
+    "348d85fa-3a71-447f-8a64-e283ec47cc7c": {
+      "name": "Editable GeoJSON Layer Source",
+      "parameters": {
+        "data": {
+          "features": [
+            {
+              "geometry": {
+                "coordinates": [
+                  102.0,
+                  0.5
+                ],
+                "type": "Point"
+              },
+              "type": "Feature"
+            },
+            {
+              "geometry": {
+                "coordinates": [
+                  102.0,
+                  0.5
+                ],
+                "type": "Point"
+              },
+              "type": "Feature"
+            }
+          ],
+          "type": "FeatureCollection"
+        }
+      },
+      "type": "GeoJSONSource"
+    },
+    "b2ea427a-a51b-43ad-ae72-02cd900736d5": {
+      "name": "OpenStreetMap.Mapnik",
+      "parameters": {
+        "attribution": "(C) OpenStreetMap contributors",
+        "maxZoom": 19.0,
+        "minZoom": 0.0,
+        "provider": "OpenStreetMap",
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "urlParameters": {}
+      },
+      "type": "RasterSource"
+    }
+  }
+}

packages/base/src/commands.ts

@@ -25,7 +25,7 @@ import { ProcessingFormDialog } from './dialogs/ProcessingFormDialog';
 import { LayerBrowserWidget } from './dialogs/layerBrowserDialog';
 import { LayerCreationFormDialog } from './dialogs/layerCreationFormDialog';
 import { SymbologyWidget } from './dialogs/symbology/symbologyDialog';
-import { targetWithCenterIcon } from './icons';
+import { pencilSolidIcon, targetWithCenterIcon } from './icons';
 import keybindings from './keybindings.json';
 import {
   getSingleSelectedLayer,
@@ -938,6 +938,66 @@ export function addCommands(
     icon: targetWithCenterIcon,
   });
 
+  commands.addCommand(CommandIDs.toggleDrawFeatures, {
+    label: trans.__('Edit Features'),
+    isToggled: () => {
+      if (tracker.currentWidget instanceof JupyterGISDocumentWidget) {
+        const model = tracker.currentWidget?.content.currentViewModel
+          .jGISModel as IJupyterGISModel;
+        const selectedLayer = getSingleSelectedLayer(tracker);
+        if (!selectedLayer) {
+          return false;
+        } else if (model.checkIfIsADrawVectorLayer(selectedLayer) === true) {
+          return model.editingVectorLayer;
+        } else {
+          model.editingVectorLayer === false;
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    isEnabled: () => {
+      if (tracker.currentWidget instanceof JupyterGISDocumentWidget) {
+        const model = tracker.currentWidget?.content.currentViewModel
+          .jGISModel as IJupyterGISModel;
+        const selectedLayer = getSingleSelectedLayer(tracker);
+
+        if (!selectedLayer) {
+          return false;
+        }
+        if (model.checkIfIsADrawVectorLayer(selectedLayer) === true) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    execute: async () => {
+      if (tracker.currentWidget instanceof JupyterGISDocumentWidget) {
+        const selectedLayer = getSingleSelectedLayer(tracker);
+        const model = tracker.currentWidget?.content.currentViewModel
+          .jGISModel as IJupyterGISModel;
+        if (!selectedLayer) {
+          return false;
+        } else {
+          if (model.editingVectorLayer === false) {
+            model.editingVectorLayer = true;
+          } else {
+            model.editingVectorLayer = false;
+          }
+        }
+
+        model.updateEditingVectorLayer();
+        commands.notifyCommandChanged(CommandIDs.toggleDrawFeatures);
+      }
+    },
+
+    icon: pencilSolidIcon,
+  });
+
   loadKeybindings(commands, keybindings);
 }
 

packages/base/src/constants.ts

@@ -55,6 +55,9 @@ export namespace CommandIDs {
   export const renameSource = 'jupytergis:renameSource';
   export const removeSource = 'jupytergis:removeSource';
 
+  // Add draw features to a geoGSON source
+  export const toggleDrawFeatures = 'jupytergis:toggleDrawFeatures';
+
   // Console commands
   export const toggleConsole = 'jupytergis:toggleConsole';
   export const invokeCompleter = 'jupytergis:invokeConsoleCompleter';

packages/base/src/formbuilder/objectform/source/geojsonsource.ts

@@ -1,5 +1,7 @@
 import { IDict } from '@jupytergis/schema';
 import * as geojson from '@jupytergis/schema/src/schema/geojson.json';
+import { showErrorMessage } from '@jupyterlab/apputils';
+import { ISubmitEvent } from '@rjsf/core';
 import { Ajv, ValidateFunction } from 'ajv';
 
 import { loadFile } from '@/src/tools';
@@ -27,8 +29,11 @@ export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
     if (data?.path !== '') {
       this.removeFormEntry('data', data, schema, uiSchema);
     }
-
-    super.processSchema(data, schema, uiSchema);
+    if (this.props.formContext === 'create') {
+      (schema.properties.path.description =
+        'The local path to a GeoJSON file. (If no path/url is provided, an empty GeoJSON is created.)'),
+        super.processSchema(data, schema, uiSchema);
+    }
   }
 
   /**
@@ -40,7 +45,7 @@ export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
     const extraErrors: IDict = this.state.extraErrors;
 
     let error = '';
-    let valid = false;
+    let valid = true;
     if (path) {
       try {
         const geoJSONData = await loadFile({
@@ -55,8 +60,6 @@ export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
       } catch (e) {
         error = `"${path}" is not a valid GeoJSON file: ${e}`;
       }
-    } else {
-      error = 'Path is required';
     }
 
     if (!valid) {
@@ -79,4 +82,17 @@ export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
       this.props.formErrorSignal.emit(!valid);
     }
   }
+  protected onFormSubmit(e: ISubmitEvent<any>) {
+    if (this.state.extraErrors?.path?.__errors?.length >= 1) {
+      showErrorMessage('Invalid file', this.state.extraErrors.path.__errors[0]);
+      return;
+    }
+    if (!e.formData.path) {
+      e.formData.data = {
+        type: 'FeatureCollection',
+        features: [],
+      };
+    }
+    super.onFormSubmit(e);
+  }
 }

packages/base/src/icons.ts

@@ -18,6 +18,7 @@ import logoMiniAlternativeSvgStr from '../style/icons/logo_mini_alternative.svg'
 import logoMiniQGZ from '../style/icons/logo_mini_qgz.svg';
 import moundSvgStr from '../style/icons/mound.svg';
 import nonVisibilitySvgStr from '../style/icons/nonvisibility.svg';
+import pencilSolidSvgStr from '../style/icons/pencil_solid.svg';
 import rasterSvgStr from '../style/icons/raster.svg';
 import targetWithCenterSvgStr from '../style/icons/target_with_center.svg';
 import targetWithoutCenterSvgStr from '../style/icons/target_without_center.svg';
@@ -109,3 +110,8 @@ export const targetWithCenterIcon = new LabIcon({
   name: 'jupytergis::targetWithoutCenter',
   svgstr: targetWithoutCenterSvgStr,
 });
+
+export const pencilSolidIcon = new LabIcon({
+  name: 'jupytergis::pencilSolid',
+  svgstr: pencilSolidSvgStr,
+});