Added the 'Simple Edit Workflow' to edit plugin, closes #1377.

hajkmap · Aug 21, 2023 · 7decf9c · 7decf9c
1 parent 5307053
commit 7decf9c
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 23 deletions.
diff --git a/new-client/src/plugins/Edit/EditModel.js b/new-client/src/plugins/Edit/EditModel.js
@@ -181,7 +181,7 @@ class EditModel {
     this.transact(features, done);
   }
 
-  getSelectStyle(feature) {
+  getSelectStyle() {
     return [
       new Style({
         stroke: new Stroke({
@@ -226,7 +226,7 @@ class EditModel {
     ];
   }
 
-  getVectorStyle(feature) {
+  getVectorStyle() {
     return [
       new Style({
         stroke: new Stroke({
@@ -250,7 +250,31 @@ class EditModel {
     ];
   }
 
-  getHiddenStyle(feature) {
+  getTransparentStyle() {
+    return [
+      new Style({
+        stroke: new Stroke({
+          color: "rgba(0, 0, 0, 0)",
+          width: 3,
+        }),
+        fill: new Fill({
+          color: "rgba(0, 0, 0, 0)",
+        }),
+        image: new Circle({
+          fill: new Fill({
+            color: "rgba(0, 0, 0, 0)",
+          }),
+          stroke: new Stroke({
+            color: "rgba(0, 0, 0, 0)",
+            width: 3,
+          }),
+          radius: 4,
+        }),
+      }),
+    ];
+  }
+
+  getHiddenStyle() {
     return [
       new Style({
         stroke: new Stroke({
@@ -450,7 +474,17 @@ class EditModel {
   }
 
   setLayer(serviceId, done) {
+    // Find the source by id
     this.source = this.sources.find((source) => source.id === serviceId);
+
+    // Also, let's check if there are source-specific options for this
+    // map configuration and…
+    const sourceSpecificOptions = this.options.activeServices.find(
+      (l) => l.id === serviceId
+    );
+    // …spread them on the retrieved source object.
+    this.source = { ...this.source, ...sourceSpecificOptions };
+
     this.filty = true;
     this.vectorSource = new VectorSource({
       loader: (extent) => this.loadData(this.source, extent, done),
@@ -464,7 +498,10 @@ class EditModel {
       name: "pluginEdit",
       caption: "Edit layer",
       source: this.vectorSource,
-      style: this.getVectorStyle(),
+      style:
+        this.source?.simpleEditWorkflow === true // If only simple edit is allowed…
+          ? this.getTransparentStyle() // let's get a transparent style (user will see WMS layer anyway).
+          : this.getVectorStyle(), // Else, get normal vector style (all features are grey).
     });
 
     if (this.layer) {
@@ -493,8 +530,40 @@ class EditModel {
     this.modify = new Modify({
       features: this.select.getFeatures(),
     });
+
+    // The "select" interaction should be allowed in both the
+    // regular and simple edit workflows.
     this.map.addInteraction(this.select);
-    this.map.addInteraction(this.modify);
+
+    // The "modify" interaction (which allows moving the feature in
+    // map) should, however, only be allowed in the regular workflow.
+    if (this.source?.simpleEditWorkflow !== true) {
+      this.map.addInteraction(this.modify);
+    }
+
+    // Some special actions must take place if source
+    // uses the simple edit workflow.
+    if (this.source?.simpleEditWorkflow === true) {
+      // We must take care of activating clickLock and snapHelper
+      // manually in this method (because the normal activation
+      // takes place in `activateInteraction`, which never runs in
+      // in this flow).
+
+      // Enable clickLock, which prevents infoclick from triggering
+      this.map.clickLock.add("edit");
+
+      // Add snap after all interactions have been added
+      this.map.snapHelper.add("edit");
+
+      // If a corresponding WMS layer is specified, let's show it to the user
+      if (this.source?.correspondingWMSLayerId) {
+        // Try to show the corresponding WMS layer
+        const layerToShow = this.map
+          .getAllLayers()
+          .find((l) => l.get("name") === this.source.correspondingWMSLayerId);
+        layerToShow.setVisible(true);
+      }
+    }
   }
 
   activateAdd(geometryType) {
@@ -519,7 +588,6 @@ class EditModel {
       }, 1);
     });
     this.map.addInteraction(this.draw);
-    this.map.clickLock.add("edit");
   }
 
   activateRemove() {
@@ -545,12 +613,14 @@ class EditModel {
       this.activateModify();
     }
     if (type === "remove") {
-      this.map.clickLock.add("edit");
       this.activateRemove();
     }
 
+    // Enable clickLock, which prevents infoclick from triggering
+    this.map.clickLock.add("edit");
+
     // Add snap after all interactions have been added
-    this.map.snapHelper.add("measure");
+    this.map.snapHelper.add("edit");
   }
 
   removeSelected = (e) => {
@@ -568,7 +638,10 @@ class EditModel {
 
   deactivateInteraction() {
     // First remove the snap interaction
-    this.map.snapHelper.delete("measure");
+    this.map.snapHelper.delete("edit");
+
+    // Remove clickLock
+    this.map.clickLock.delete("edit");
 
     // Next, remove correct map interaction
     if (this.select) {
@@ -585,7 +658,6 @@ class EditModel {
     }
     if (this.remove) {
       this.remove = false;
-      this.map.clickLock.delete("edit");
       this.map.un("singleclick", this.removeSelected);
     }
   }
@@ -596,7 +668,6 @@ class EditModel {
     this.removeFeature = undefined;
     this.removalToolMode = "off";
     this.filty = false;
-    this.map.clickLock.delete("edit");
 
     if (this.layer) {
       this.map.removeLayer(this.layer);
@@ -611,13 +682,6 @@ class EditModel {
     this.observer.publish("editFeature", this.editFeature);
   };
 
-  deactivate() {
-    this.reset();
-    this.observer.publish("editFeature", this.editFeature);
-    this.observer.publish("editSource", this.editSource);
-    this.observer.publish("deactivate");
-  }
-
   getSources() {
     return this.options.sources;
   }

diff --git a/new-client/src/plugins/Edit/EditView.js b/new-client/src/plugins/Edit/EditView.js
@@ -52,6 +52,15 @@ class EditView extends React.PureComponent {
       loadingError: status === "data-load-error" ? true : false,
       activeStep: status === "data-load-error" ? 0 : 1,
     });
+    // If the selected source only allows simple edit, let's
+    // activate the "modify" tool automatically.
+    if (this.state.editSource?.simpleEditWorkflow === true) {
+      // Toggle state in View
+      this.toggleActiveTool("modify");
+
+      // Activate interaction in model
+      this.props.model.activateModify();
+    }
   };
 
   setLayer(serviceId) {
@@ -253,8 +262,14 @@ class EditView extends React.PureComponent {
             <StepContent>
               <Grid container spacing={2} direction="row">
                 <Grid item xs={12}>
-                  {this.renderAttributeEditor()}
-                  {this.renderToolbar()}
+                  {editSource?.simpleEditWorkflow !== true && (
+                    <>
+                      {this.renderAttributeEditor()}
+                      {this.renderToolbar()}
+                    </>
+                  )}
+                  {editSource?.simpleEditWorkflow === true &&
+                    this.renderAttributeEditor()}
                 </Grid>
                 {!editFeature && (
                   <>

diff --git a/new-client/src/plugins/Edit/components/AttributeEditor.js b/new-client/src/plugins/Edit/components/AttributeEditor.js
@@ -9,7 +9,7 @@ import FormLabel from "@mui/material/FormLabel";
 import FormControl from "@mui/material/FormControl";
 import FormGroup from "@mui/material/FormGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import { Button, FormHelperText } from "@mui/material";
+import { Button, FormHelperText, Typography } from "@mui/material";
 import Chip from "@mui/material/Chip";
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
@@ -548,7 +548,9 @@ class AttributeEditor extends React.Component {
                   field.initialRender = false;
                 }}
               >
-                <option value="">-Välj värde-</option>
+                <option value="" disabled>
+                  -Välj värde-
+                </option>
                 {options}
               </NativeSelect>
               <FormHelperText>{field.description}</FormHelperText>
@@ -601,7 +603,23 @@ class AttributeEditor extends React.Component {
     const { formValues } = this.state;
     const { model } = this.props;
 
-    if (!formValues || this.props.editSource === undefined) return null;
+    // If no source is selected, don't render anything
+    if (
+      (!formValues && this.props.editSource?.simpleEditWorkflow !== true) ||
+      this.props.editSource === undefined
+    )
+      return null;
+
+    // If source is selected and the source does not allow editing the
+    // geometries, it means that we're in a "Simple Edit mode". If so,
+    // let's render a label that tells user to click on a feature to start
+    // editing its attributes.
+    if (!formValues && this.props.editSource?.simpleEditWorkflow === true)
+      return (
+        <Typography>
+          Klicka på ett objekt i kartan för att redigera dess attribut
+        </Typography>
+      );
 
     const markup = this.props.editSource?.editableFields?.map((field, i) => {
       const valueMarkup = this.getValueMarkup(field, true);