feature: add feature styling (origo-map#1677)

* feat: add feature styling

Fixes origo-map#1676
Adds the possibility to set the drag and drop control as well as a geojson source to style features based on the "style" attribute of the feature rather than the layer style.
Configured as `"styleByAttribute":true` as options for the drag and drop control or property of a geojson-layer.
False by default

* Update draganddrop.js

src/controls/draganddrop.js

@@ -8,6 +8,7 @@ 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;
@@ -66,10 +67,13 @@ const DragAndDrop = function DragAndDrop(options = {}) {
     onAdd(evt) {
       viewer = evt.target;
       map = viewer.getMap();
-      const legend = viewer.getControlByName('legend');
-      if (options.showLegendButton) { legend.addButtonToTools(legendButton, 'addLayerButton'); }
+      if (options.showLegendButton) {
+        const legend = viewer.getControlByName('legend');
+        legend.addButtonToTools(legendButton, 'addLayerButton');
+      }
       const groupName = options.groupName || 'egna-lager';
       const groupTitle = options.groupTitle || 'Egna lager';
+      const styleByAttribute = options.styleByAttribute || false;
       const featureStyles = options.featureStyles || {
         Point: [{
           circle: {
@@ -145,6 +149,12 @@ const DragAndDrop = function DragAndDrop(options = {}) {
         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 });
         }

src/controls/editor/styletemplate.js

@@ -0,0 +1,93 @@
+export default function styleTemplate(palette, swStyle) {
+  const colorArray = palette;
+  let fillHtml = '<div id="o-editor-style-fill" class="padding border-bottom"><div class="text-large text-align-center">Fyllning</div><div id="o-editor-style-fillColor"><ul>';
+  if (!colorArray.includes(swStyle.fillColor)) {
+    colorArray.push(swStyle.fillColor);
+  }
+  if (!colorArray.includes(swStyle.strokeColor)) {
+    colorArray.push(swStyle.strokeColor);
+  }
+  for (let i = 0; i < colorArray.length; i += 1) {
+    const checked = colorArray[i] === swStyle.fillColor ? ' checked=true' : '';
+    fillHtml += `<li>
+    <input type="radio" id="fillColorRadio${i}" name="fillColorRadio" value="${colorArray[i]}"${checked} />
+    <label for="fillColorRadio${i}"><span style="background:${colorArray[i]}"></span></label>
+    </li>`;
+  }
+
+  fillHtml += `</ul></div><div class="padding-smaller o-tooltip active">
+  <input id="o-editor-style-fillOpacitySlider" type="range" min="0.05" max="1" value="${swStyle.fillOpacity}" step="0.05">
+  <div class="text-align-center">
+    <span class="text-smaller float-left">5%</span>
+    <span class="text-smaller">Opacitet</span>
+    <span class="text-smaller float-right">100%</span>
+  </div>
+  </div></div>`;
+
+  let strokeHtml = '<div id="o-editor-style-stroke" class="padding border-bottom"><div class="text-large text-align-center">Kantlinje</div><div id="o-editor-style-strokeColor"><ul>';
+  for (let i = 0; i < colorArray.length; i += 1) {
+    const checked = colorArray[i] === swStyle.strokeColor ? ' checked=true' : '';
+    strokeHtml += `<li>
+    <input type="radio" id="strokeColorRadio${i}" name="strokeColorRadio" value="${colorArray[i]}"${checked} />
+    <label for="strokeColorRadio${i}"><span style="background:${colorArray[i]}"></span></label>
+    </li>`;
+  }
+
+  strokeHtml += `</ul></div><div class="padding-smaller o-tooltip active">
+  <input id="o-editor-style-strokeOpacitySlider" type="range" min="0.05" max="1" value="${swStyle.strokeOpacity}" step="0.05">
+  <div class="text-align-center">
+    <span class="text-smaller float-left">5%</span>
+    <span class="text-smaller">Opacitet</span>
+    <span class="text-smaller float-right">100%</span>
+  </div>
+  </div>
+  <div class="padding-smaller o-tooltip active">
+  <input id="o-editor-style-strokeWidthSlider" type="range" min="1" max="10" value="${swStyle.strokeWidth}" step="1">
+  <div class="text-align-center">
+    <span class="text-smaller float-left">1px</span>
+    <span class="text-smaller">Linjebredd</span>
+    <span class="text-smaller float-right">10px</span>
+  </div>
+  </div>
+  <div class="padding-smaller o-tooltip active">
+    <select id="o-editor-style-strokeType" class="small no-margin width-full">
+      <option value="line"${swStyle.strokeType === 'line' ? ' selected' : ''}>Heldragen linje</option>
+      <option value="dash"${swStyle.strokeType === 'dash' ? ' selected' : ''}>Streckad linje</option>
+      <option value="point"${swStyle.strokeType === 'point' ? ' selected' : ''}>Punktad linje</option>
+      <option value="dash-point"${swStyle.strokeType === 'dash-point' ? ' selected' : ''}>Streck-punkt-linje</option>
+    </select>
+  </div></div>`;
+
+  const pointHtml = `<div id="o-editor-style-point" class="padding border-bottom"><div class="text-large text-align-center">Punkt</div><div class="padding-smaller o-tooltip active">
+    <input id="o-editor-style-pointSizeSlider" type="range" min="1" max="50" value="${swStyle.pointSize}" step="1">
+    <div class="text-align-center">
+      <span class="text-smaller float-left">1px</span>
+      <span class="text-smaller">Punktstorlek</span>
+      <span class="text-smaller float-right">50px</span>
+    </div>
+  </div>
+  <div class="padding-smaller o-tooltip active">
+    <select id="o-editor-style-pointType" class="small no-margin width-full">
+      <option value="circle"${swStyle.pointType === 'circle' ? ' selected' : ''}>Cirkel</option>
+      <option value="x"${swStyle.pointType === 'x' ? ' selected' : ''}>Kryss</option>
+      <option value="cross"${swStyle.pointType === 'cross' ? ' selected' : ''}>Kors</option>
+      <option value="star"${swStyle.pointType === 'star' ? ' selected' : ''}>Stjärna</option>
+      <option value="triangle"${swStyle.pointType === 'triangle' ? ' selected' : ''}>Triangel</option>
+      <option value="square"${swStyle.pointType === 'square' ? ' selected' : ''}>Kvadrat</option>
+    </select>
+  </div></div>`;
+
+  const textHtml = `<div id="o-editor-style-text" class="padding border-bottom"><div class="text-large text-align-center">Text</div><div class="padding-smaller o-tooltip active">
+    <input id="o-editor-style-textSizeSlider" type="range" min="8" max="128" value="${swStyle.textSize}" step="1">
+    <div class="text-align-center">
+      <span class="text-smaller float-left">8px</span>
+      <span class="text-smaller">Textstorlek</span>
+      <span class="text-smaller float-right">128px</span>
+    </div>
+  </div>
+  <div class="padding-smaller o-tooltip active">
+    <input id="o-editor-style-textString" class="small no-margin width-full" type="text" value="${swStyle.textString}">
+  </div></div>`;
+
+  return textHtml + pointHtml + fillHtml + strokeHtml;
+}