feature: draw as core control (origo-map#1714)

* Added draw as control

* Update stylewindow.js

* Refactored code for measure control and added modify function

* Update draw.js

* Fixes for draw

* Lots of stuff

* Clean up permalink

* Some styling fixes

* Lint

* Update viewer.js

* Fix

* stylewindow fix

* Styling tweaks

* Small fixes for print

* Update stylewindow.js

* Fix for labels and buffer measure

* Forgot about measure in mapstate

* Added projection for measures

* drawHandler as component

* Moved styling to layer level

* Added screen/menu button placement

* Initial state for save button

* Added import layer functionality

* Update viewer.js

* Update drawtools.js

* Unique layer names and new icon

* Update draw.js

* Fixed scaling when printing

* Fix default function

* Make group draggable

* Fixed bugs

package.json

@@ -60,7 +60,7 @@
     "run-sequence": "^2.2.1",
     "source-map-loader": "^3.0.0",
     "terser-webpack-plugin": "^5.2.4",
-    "webpack": "^5.76.0",
+    "webpack": "^5.76.2",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.7.3",

scss/_draw.scss

@@ -0,0 +1,56 @@
+.o-draw-toolbar {
+  bottom: 0;
+  left: 50%;
+  margin-bottom: .5rem !important;
+  max-width: 80%;
+  position: relative;
+  -ms-transform: translate(-50%, 0);
+  -webkit-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+  z-index: 10;
+}
+
+.o-draw-stylewindow {
+  font-family: Arial,sans-serif;
+  width: 250px;
+  position:absolute;
+  right: 1rem;
+  -ms-transform: translate(0, -50%);
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  top:50%;
+  height: calc(100% - 9rem);
+}
+
+.o-draw-stylewindow input[type="radio"] {
+  display:none;
+}
+
+.o-draw-stylewindow input[type="radio"] + label span {
+  display:inline-block;
+  width:24px;
+  height:24px;
+  vertical-align:middle;
+  cursor:pointer;
+  -moz-border-radius:  50%;
+  border-radius:  50%;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px white;
+}
+
+.o-draw-stylewindow input[type="radio"]:checked + label span{
+  box-shadow: 0 0 0 2px white, 0 0 0 4px #ababab;
+}
+
+.o-draw-stylewindow input[type="radio"] ~ label span:hover {
+  box-shadow: 0 0 0 2px white, 0 0 0 4px #cdcdcd;
+}
+
+.o-draw-stylewindow input[type="radio"] ~ label {
+  display:inline-block;
+  vertical-align:middle;
+  padding:5px;
+}
+
+.o-draw-stylewindow ul li {
+  float:left;
+}

scss/origo.scss

@@ -32,6 +32,7 @@
   @import 'viewer';
   @import 'rotate';
   @import 'mapmenu';
+  @import 'draw';
   @import 'editor';
   @import 'editor-toolbar';
   @import 'position';

scss/ui/_flex.scss

@@ -114,4 +114,8 @@ $flex-grow-all: 2;
   .basis-100 {
     flex-basis: 100%;
   }
+
+  .small-gap {
+    gap: 0.2rem;
+  }
 }

src/controls.js

@@ -2,6 +2,7 @@ export { default as About } from './controls/about';
 export { default as Attribution } from './controls/attribution';
 export { default as Bookmarks } from './controls/bookmarks';
 export { default as Draganddrop } from './controls/draganddrop';
+export { default as Draw } from './controls/draw';
 export { default as Editor } from './controls/editor';
 export { default as Fullscreen } from './controls/fullscreen';
 export { default as Geoposition } from './controls/geoposition';

src/controls/draganddrop.js

@@ -4,11 +4,8 @@ import GeoJSONFormat from 'ol/format/GeoJSON';
 import IGCFormat from 'ol/format/IGC';
 import KMLFormat from 'ol/format/KML';
 import TopoJSONFormat from 'ol/format/TopoJSON';
-import VectorSource from 'ol/source/Vector';
-import VectorLayer from 'ol/layer/Vector';
 import Style from '../style';
 import { Component, InputFile, Button, Element as El } from '../ui';
-import { getStylewindowStyle } from './editor/stylewindow';
 
 const DragAndDrop = function DragAndDrop(options = {}) {
   let dragAndDrop;
@@ -118,8 +115,6 @@ const DragAndDrop = function DragAndDrop(options = {}) {
           }
         }]
       };
-      let vectorSource;
-      let vectorLayer;
       const vectorStyles = Style.createGeometryStyle(featureStyles);
       dragAndDrop = new olDragAndDrop({
         formatConstructors: [
@@ -147,30 +142,26 @@ const DragAndDrop = function DragAndDrop(options = {}) {
             i += 1;
           }
         }
-        vectorSource = new VectorSource({
-          features: event.features
-        });
-        vectorSource.forEachFeature((feature) => {
-          if (feature.get('style') && styleByAttribute) {
-            const featureStyle = getStylewindowStyle(feature, feature.get('style'));
-            feature.setStyle(featureStyle);
-          }
-        });
         if (!viewer.getGroup(groupName)) {
           viewer.addGroup({ title: groupTitle, name: groupName, expanded: true, draggable });
         }
-        vectorLayer = new VectorLayer({
-          source: vectorSource,
-          name: layerName,
+        const layerOptions = {
           group: groupName,
+          name: layerName,
           title: layerTitle,
+          zIndex: 6,
+          styleByAttribute,
           queryable: true,
           removable: true,
-          style: vectorStyles[event.features[0].getGeometry().getType()]
-        });
-
-        map.addLayer(vectorLayer);
-        map.getView().fit(vectorSource.getExtent());
+          visible: true,
+          source: 'none',
+          type: 'GEOJSON',
+          features: event.features
+        };
+        if (!styleByAttribute) {
+          layerOptions.style = vectorStyles[event.features[0].getGeometry().getType()];
+        }
+        viewer.addLayer(layerOptions);
       });
       this.render();
     },