Merge pull request #145 from Azure/imdf-editor

IMDF Editor: clickable units, layers, geojson info, and editable features

package.json

@@ -9,6 +9,7 @@
     "@turf/turf": "^6.5.0",
     "@zip.js/zip.js": "^2.7.31",
     "azure-maps-control": "^3.1.2",
+    "azure-maps-drawing-tools": "^1.0.3",
     "azure-maps-indoor": "^0.2.3",
     "cross-env": "^7.0.3",
     "file-saver": "^2.0.5",
@@ -23,6 +24,7 @@
     "react-id-generator": "^3.0.2",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^6.20.0",
+    "styled-components": "^6.1.12",
     "zustand": "^4.4.7"
   },
   "devDependencies": {
@@ -31,6 +33,7 @@
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
+    "css-loader": "^7.1.2",
     "cypress": "^13.6.0",
     "eslint-plugin-cypress": "^2.15.1",
     "flush-promises": "^1.0.2",
@@ -40,6 +43,7 @@
     "proj4": "^2.8.0",
     "prop-types": "^15.8.1",
     "react-scripts": "^5.0.1",
+    "style-loader": "^4.0.0",
     "webpack-bundle-analyzer": "^4.10.1"
   },
   "overrides": {
@@ -58,7 +62,8 @@
     "moduleNameMapper": {
       "react-azure-maps": "<rootDir>/src/common/mocks/react-azure-maps.js",
       "azure-maps-control": "<rootDir>/src/common/mocks/azure-maps-control.js",
-      "azure-maps-indoor": "<rootDir>/src/common/mocks/azure-maps-indoor.js"
+      "azure-maps-indoor": "<rootDir>/src/common/mocks/azure-maps-indoor.js",
+      "azure-maps-drawing-tools": "<rootDir>/src/common/mocks/azure-maps-drawing-tools.js"
     }
   },
   "scripts": {

src/common/mocks/azure-maps-drawing-tools.js

@@ -0,0 +1,11 @@
+export const control = {
+    DrawingToolbar: function (options) {
+        return options;
+    }
+};
+
+export const drawing = {
+    DrawingManager: function (map, options) {
+        return [map, options];
+    }
+};

src/pages/conversion/places-preview-map/imdf-model-helpers/index.js

@@ -0,0 +1,60 @@
+import { getFeatureLabel } from '../utils';
+
+// Sets polygon, line, and symbol layers to invisible
+function drawingModeChanged(allLayers) {
+    allLayers.forEach(layer => {
+        layer.setOptions({ visible:  false });
+    });
+}
+
+// Displays information of a feature that is being drawn/edited, at time of click
+function currentEditData(map, drawingManager) {
+    map.events.add('drawingstarted', drawingManager, (f) => {
+        if(f?.data) {
+        var shapeId = f.data.id;
+        var geojsonData = drawingManager.getSource().getShapeById(shapeId).data;
+        document.getElementById('infoPanel-json').value = JSON.stringify(geojsonData, null, 2);
+        }
+    });
+}
+
+// Groups features together by category and filters them by levels
+function groupAndSort(units, language, selectedLevel) {
+    const groupedFeatures = {};
+    units.features
+        .filter(item => item.properties.level_id === selectedLevel.id)
+        .forEach(feature => {
+        const { category } = feature.properties;
+        if (!groupedFeatures[category]) groupedFeatures[category] = { features: [] };
+        groupedFeatures[category].features.push({
+            ...feature,
+            properties: { ...feature.properties, label: getFeatureLabel(feature, language) },
+        });
+    });
+
+    return groupedFeatures;
+}
+
+function writeToInfoPanel(geojsonData) {
+    const { map, ...obj } = geojsonData;
+    document.getElementById('infoPanel-json').value = JSON.stringify(obj, null, 2);
+}
+
+// Changes the cursor to be a pointer when a clickable feature is hovered over
+function grabToPointer(layerName, map) {
+    map.events.add('mouseover', layerName, function () {
+        map.getCanvasContainer().style.cursor = 'pointer';
+    });
+
+    map.events.add('mouseout', layerName, function () {
+        map.getCanvasContainer().style.cursor = 'grab';
+    });
+}
+
+export {
+    currentEditData,
+    groupAndSort,
+    drawingModeChanged,
+    writeToInfoPanel,
+    grabToPointer
+};

src/pages/conversion/places-preview-map/indes.style.js

@@ -1,10 +1,44 @@
 import { css } from '@emotion/css';
 
+export const mapTextWrapper = css `
+  display: flex;
+  gap: 2rem;
+`
+
 export const imdfPreviewMapWrapper = css`
   position: relative;
+  width: 100%;
+  flex: 5 1 4rem;                              
 `;
 
 export const imdfPreviewMap = css`
   width: 100%;
-  height: 500px;
+  height: 30rem;
+`;
+
+export const layerSelect = css `
+  position: relative;
+  top: 65%;
+`;
+
+export const textWrapper = css `
+  flex: 1 1 4rem; 
+  position: relative;
+  display: inline;
+  margin-top: 1%;
+`;
+
+export const textArea = css `
+  width: 95%;
+  height: 95%;
+  white-space: nowrap;
+  resize: none;
 `;
+
+export const saveButtonWrapper = css `
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+`;
+
+