Add form button to update extent and zoom of landmark

Author: gjmooney

packages/base/src/formbuilder/objectform/components/LandmarkReset.tsx

@@ -0,0 +1,52 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { LabIcon } from '@jupyterlab/ui-components';
+import React from 'react';
+
+import { targetWithCenterIcon } from '@/src/icons';
+import { Button } from '@/src/shared/components/Button';
+
+interface ILandmarkResetProps {
+  model?: IJupyterGISModel;
+  layerId?: string;
+}
+
+function LandmarkReset({ model, layerId }: ILandmarkResetProps) {
+  const handleSetLandmarkToCurrentView = () => {
+    if (!model || !layerId) {
+      return;
+    }
+    const layer = model.getLayer(layerId);
+    if (!layer) {
+      return;
+    }
+    const { zoom, extent } = model.getOptions();
+    const updatedLayer = {
+      ...layer,
+      parameters: {
+        ...layer.parameters,
+        zoom,
+        extent,
+      },
+    };
+
+    model.sharedModel.updateLayer(layerId, updatedLayer);
+  };
+
+  return (
+    <div>
+      <Button
+        title="Set landmark to current view"
+        onClick={handleSetLandmarkToCurrentView}
+      >
+        <LabIcon.resolveReact
+          icon={targetWithCenterIcon}
+          className="jp-gis-layerIcon"
+          tag="span"
+        />
+        Reset Landmark Extent
+      </Button>
+    </div>
+  );
+}
+
+export default LandmarkReset;

packages/base/src/formbuilder/objectform/layer/landmarkLayerForm.ts

@@ -1,17 +1,45 @@
 import { IDict } from '@jupytergis/schema';
+import { FieldProps } from '@rjsf/core';
+import * as React from 'react';
 
 import { LayerPropertiesForm } from './layerform';
+import LandmarkReset from '../components/LandmarkReset';
 
-/**
- * The form to modify a hillshade layer.
- */
 export class LandmarkLayerPropertiesForm extends LayerPropertiesForm {
   protected processSchema(
     data: IDict<any> | undefined,
     schema: IDict,
     uiSchema: IDict,
   ) {
     super.processSchema(data, schema, uiSchema);
+
+    if (!this.props.model.selected) {
+      return;
+    }
+
+    let layerId: string | undefined = undefined;
+    const selectedKeys = Object.keys(this.props.model.selected);
+
+    // Find the first selected landmark
+    // TODO ! we still need to handle selections better, like there should at least be a getFirstSelected
+    // ! just do that
+    for (const key of selectedKeys) {
+      const layer = this.props.model.getLayer(key);
+      if (layer && layer.type === 'LandmarkLayer') {
+        layerId = key;
+        break;
+      }
+    }
+
+    uiSchema['extent'] = {
+      'ui:field': (props: FieldProps) =>
+        React.createElement(LandmarkReset, {
+          ...props,
+          model: this.props.model,
+          layerId,
+        }),
+    };
+
     uiSchema['content'] = {
       ...uiSchema['content'],
       markdown: {
@@ -21,5 +49,7 @@ export class LandmarkLayerPropertiesForm extends LayerPropertiesForm {
         },
       },
     };
+
+    this.removeFormEntry('zoom', data, schema, uiSchema);
   }
 }

packages/schema/src/schema/project/layers/landmarkLayer.json

@@ -5,6 +5,17 @@
   "additionalProperties": false,
   "required": ["zoom", "extent", "transition"],
   "properties": {
+    "zoom": {
+      "type": "number",
+      "default": 0
+    },
+    "extent": {
+      "type": "array",
+      "default": null,
+      "items": {
+        "type": "number"
+      }
+    },
     "content": {
       "type": "object",
       "additionalProperties": false,
@@ -22,17 +33,6 @@
         }
       }
     },
-    "zoom": {
-      "type": "number",
-      "default": 0
-    },
-    "extent": {
-      "type": "array",
-      "default": null,
-      "items": {
-        "type": "number"
-      }
-    },
     "transition": {
       "type": "object",
       "description": "Transition configuration between to this landmark",