Merge branch 'master' into text_html_getfeatureinfo_feat

.eslintrc.json

@@ -6,6 +6,7 @@
   "parserOptions": {
     "ecmaVersion": "latest"
 },
+
   "rules": {
     "comma-dangle": [
       "error",

scss/_infowindow.scss

@@ -174,6 +174,7 @@
 .o-identify-content {
   display: inline-block;
   width: 100%;
+  overflow-wrap: anywhere;
 }
 
 .folded {

src/controls/legend/overlay.js

@@ -6,7 +6,7 @@ const OverlayLayer = function OverlayLayer(options) {
   const {
     headerIconCls = '',
     cls: clsSettings = '',
-    icon = '#o_list_24px',
+    icon = '#o_legend_24px',
     iconCls = 'grey-lightest',
     layer,
     position = 'top',

src/controls/print/print-component.js

@@ -271,7 +271,8 @@ const PrintComponent = function PrintComponent(options = {}) {
     titleComponent,
     descriptionComponent,
     createdComponent,
-    closeButton
+    closeButton,
+    constrainResolution: view.getConstrainResolution()
   });
 
   const setScale = function setScale(scale) {

src/controls/print/print-resize.js

@@ -19,7 +19,8 @@ export default function PrintResize(options = {}) {
     titleComponent,
     descriptionComponent,
     createdComponent,
-    closeButton
+    closeButton,
+    constrainResolution
   } = options;
 
   let {
@@ -404,6 +405,8 @@ export default function PrintResize(options = {}) {
   // Alters layer in map, if vector then set scale for feature, if image set DPI parameter for source
   const setLayerScale = function setLayerScale(layer) {
     const source = layer.getSource();
+    const view = map.getView();
+    view.setConstrainResolution(false);
 
     if (isVector(layer)) {
       const styleName = layer.get('styleName');
@@ -467,6 +470,8 @@ export default function PrintResize(options = {}) {
   // "Resets" layer by resetting the style and removing DPI parameter
   const resetLayerScale = function resetLayerScale(layer) {
     const source = layer.getSource();
+    const view = map.getView();
+    view.setConstrainResolution(constrainResolution);
     if (isVector(layer)) {
       const features = source.getFeatures();
       const styleName = layer.get('styleName');

src/style/drawstyles.js

@@ -10,7 +10,7 @@ import {
 import { getArea, getLength } from 'ol/sphere';
 import { LineString, MultiPoint, Point } from 'ol/geom';
 
-function createRegularShape(type, pointSize, pointFill, pointStroke) {
+function createRegularShape(type, pointSize, pointFill, pointStroke, pointRotation) {
   let style;
   const size = pointSize || 10;
   const stroke = pointStroke || new Stroke({
@@ -19,6 +19,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) {
   const fill = pointFill || new Fill({
     color: 'rgba(0, 153, 255, 0.8)'
   });
+  const rotation = pointRotation || 0;
   switch (type) {
     case 'square':
       style = new Style({
@@ -27,6 +28,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) {
           stroke,
           points: 4,
           radius: size,
+          rotation: (rotation / 360) * Math.PI,
           angle: Math.PI / 4
         })
       });
@@ -39,7 +41,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) {
           stroke,
           points: 3,
           radius: size,
-          rotation: 0,
+          rotation: (rotation / 360) * Math.PI,
           angle: 0
         })
       });
@@ -53,6 +55,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) {
           points: 5,
           radius: size,
           radius2: size / 2.5,
+          rotation: (rotation / 360) * Math.PI,
           angle: 0
         })
       });
@@ -66,6 +69,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) {
           points: 4,
           radius: size,
           radius2: 0,
+          rotation: (rotation / 360) * Math.PI,
           angle: 0
         })
       });
@@ -79,6 +83,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) {
           points: 4,
           radius: size,
           radius2: 0,
+          rotation: (rotation / 360) * Math.PI,
           angle: Math.PI / 4
         })
       });
@@ -112,6 +117,7 @@ function createRegularShape(type, pointSize, pointFill, pointStroke) {
         image: new Icon({
           src: `data:image/svg+xml;utf8,${svg}`,
           scale: size / 10 || 1,
+          rotation: (rotation / 360) * Math.PI,
           anchor: [0.5, 0.85]
         })
       });

src/style/styletemplate.js

@@ -1,6 +1,7 @@
 export default function styleTemplate(palette, swStyle) {
   const colorArray = palette;
   let fillHtml = '<div id="o-draw-style-fill" class="padding border-bottom"><div class="text-large text-align-center">Fyllning</div><div id="o-draw-style-fillColor"><ul>';
+  let backgroundFillHtml = '<div id="o-draw-style-backgroundFill" class="padding border-bottom"><div class="text-large text-align-center">Bakgrundsfyllning</div><div id="o-draw-style-backgroundFillColor"><ul>';
   if (!colorArray.includes(swStyle.fillColor)) {
     colorArray.push(swStyle.fillColor);
   }
@@ -13,6 +14,10 @@ export default function styleTemplate(palette, swStyle) {
     <input type="radio" id="fillColorRadio${i}" name="fillColorRadio" value="${colorArray[i]}"${checked} />
     <label for="fillColorRadio${i}"><span style="background:${colorArray[i]}"></span></label>
     </li>`;
+    backgroundFillHtml += `<li>
+    <input type="radio" id="backgroundFillColorRadio${i}" name="backgroundFillColorRadio" value="${colorArray[i]}"${checked} />
+    <label for="backgroundFillColorRadio${i}"><span style="background:${colorArray[i]}"></span></label>
+    </li>`;
   }
 
   fillHtml += `</ul></div><div class="padding-smaller o-tooltip active">
@@ -24,6 +29,15 @@ export default function styleTemplate(palette, swStyle) {
   </div>
   </div></div>`;
 
+  backgroundFillHtml += `</ul></div><div class="padding-smaller o-tooltip active">
+  <input id="o-draw-style-backgroundFillOpacitySlider" type="range" min="0" max="1" value="${swStyle.backgroundFillOpacity}" step="0.05">
+  <div class="text-align-center">
+    <span class="text-smaller float-left">0%</span>
+    <span class="text-smaller">Opacitet</span>
+    <span class="text-smaller float-right">100%</span>
+  </div>
+  </div></div>`;
+
   let strokeHtml = '<div id="o-draw-style-stroke" class="padding border-bottom"><div class="text-large text-align-center">Kantlinje</div><div id="o-draw-style-strokeColor"><ul>';
   for (let i = 0; i < colorArray.length; i += 1) {
     const checked = colorArray[i] === swStyle.strokeColor ? ' checked=true' : '';
@@ -58,6 +72,40 @@ export default function styleTemplate(palette, swStyle) {
     </select>
   </div></div>`;
 
+  let backgroundStrokeHtml = '<div id="o-draw-style-backgroundStroke" class="padding border-bottom"><div class="text-large text-align-center">Bakgrundsram</div><div id="o-draw-style-backgroundStrokeColor"><ul>';
+  for (let i = 0; i < colorArray.length; i += 1) {
+    const checked = colorArray[i] === swStyle.backgroundStrokeColor ? ' checked=true' : '';
+    backgroundStrokeHtml += `<li>
+    <input type="radio" id="backgroundStrokeColorRadio${i}" name="backgroundStrokeColorRadio" value="${colorArray[i]}"${checked} />
+    <label for="backgroundStrokeColorRadio${i}"><span style="background:${colorArray[i]}"></span></label>
+    </li>`;
+  }
+
+  backgroundStrokeHtml += `</ul></div><div class="padding-smaller o-tooltip active">
+  <input id="o-draw-style-backgroundStrokeOpacitySlider" type="range" min="0" max="1" value="${swStyle.backgroundStrokeOpacity}" step="0.05">
+  <div class="text-align-center">
+    <span class="text-smaller float-left">0%</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-draw-style-backgroundStrokeWidthSlider" type="range" min="1" max="10" value="${swStyle.backgroundStrokeWidth}" 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-draw-style-backgroundStrokeType" class="small no-margin width-full">
+      <option value="line"${swStyle.backgroundStrokeType === 'line' ? ' selected' : ''}>Heldragen linje</option>
+      <option value="dash"${swStyle.backgroundStrokeType === 'dash' ? ' selected' : ''}>Streckad linje</option>
+      <option value="point"${swStyle.backgroundStrokeType === 'point' ? ' selected' : ''}>Punktad linje</option>
+      <option value="dash-point"${swStyle.backgroundStrokeType === 'dash-point' ? ' selected' : ''}>Streck-punkt-linje</option>
+    </select>
+  </div></div>`;
+
   const pointHtml = `<div id="o-draw-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-draw-style-pointSizeSlider" type="range" min="1" max="50" value="${swStyle.pointSize}" step="1">
     <div class="text-align-center">
@@ -101,5 +149,23 @@ export default function styleTemplate(palette, swStyle) {
   </div>
 </div></div>`;
 
-  return textHtml + pointHtml + fillHtml + strokeHtml + measureHtml;
+  const rotateHtml = `<div id="o-draw-style-rotation" class="padding border-bottom"><div class="text-large text-align-center">Rotation</div><div class="padding-smaller o-tooltip active">
+<input id="o-draw-style-rotationSlider" type="range" min="0" max="720" value="${swStyle.objRotation}" step="1">
+<div class="text-align-center">
+  <span class="text-smaller float-left">0&deg;</span>
+  <span class="text-smaller">Graders rotation</span>
+  <span class="text-smaller float-right">360&deg;</span>
+</div>
+</div>`;
+
+  const paddingHtml = `<div id="o-draw-style-padding" class="padding border-bottom"><div class="text-large text-align-center">Marginaler</div><div class="padding-smaller o-tooltip active">
+<input id="o-draw-style-paddingSlider" type="range" min="0" max="30" value="${swStyle.paddingText}" step="1">
+<div class="text-align-center">
+  <span class="text-smaller float-left">0px</span>
+  <span class="text-smaller">Marginal till text</span>
+  <span class="text-smaller float-right">30px</span>
+</div>
+</div>`;
+
+  return textHtml + pointHtml + fillHtml + strokeHtml + measureHtml + rotateHtml + backgroundFillHtml + backgroundStrokeHtml + paddingHtml;
 }