Merge pull request #1947 from origo-map/draw-rotate

feature: rotate text and point in draw control
origo-map · Jan 29, 2024 · 42f2bd8 · 42f2bd8
2 parents e026d3b + 6dac34b
commit 42f2bd8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/style/drawstyles.js b/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]
         })
       });

diff --git a/src/style/styletemplate.js b/src/style/styletemplate.js
@@ -101,5 +101,14 @@ 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>`;
+
+  return textHtml + pointHtml + fillHtml + strokeHtml + measureHtml + rotateHtml;
 }
diff --git a/src/style/stylewindow.js b/src/style/stylewindow.js
@@ -37,7 +37,8 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
     textFont: '"Helvetica Neue", Helvetica, Arial, sans-serif',
     showMeasureSegments: false,
     showMeasure: false,
-    selected: false
+    selected: false,
+    objRotation: 0
   };
 
   function escapeQuotes(s) {
@@ -124,6 +125,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
           strokeType: swStyle.strokeType,
           pointSize: swStyle.pointSize,
           pointType: swStyle.pointType,
+          objRotation: swStyle.objRotation,
           selected
         };
         break;
@@ -133,6 +135,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
           textSize: swStyle.textSize,
           textString: swStyle.textString,
           textFont: swStyle.textFont,
+          objRotation: swStyle.objRotation,
           selected
         };
         break;
@@ -150,6 +153,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
     document.getElementById('o-draw-style-point').classList.remove('hidden');
     document.getElementById('o-draw-style-text').classList.remove('hidden');
     document.getElementById('o-draw-style-measure').classList.remove('hidden');
+    document.getElementById('o-draw-style-rotation').classList.remove('hidden');
   }
 
   function updateStylewindow(feature) {
@@ -167,11 +171,13 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
         document.getElementById('o-draw-style-fill').classList.add('hidden');
         document.getElementById('o-draw-style-point').classList.add('hidden');
         document.getElementById('o-draw-style-text').classList.add('hidden');
+        document.getElementById('o-draw-style-rotation').classList.add('hidden');
         break;
       case 'Polygon':
       case 'MultiPolygon':
         document.getElementById('o-draw-style-point').classList.add('hidden');
         document.getElementById('o-draw-style-text').classList.add('hidden');
+        document.getElementById('o-draw-style-rotation').classList.add('hidden');
         break;
       case 'Point':
       case 'MultiPoint':
@@ -190,6 +196,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
     document.getElementById('o-draw-style-pointType').value = swStyle.pointType;
     document.getElementById('o-draw-style-textSizeSlider').value = swStyle.textSize;
     document.getElementById('o-draw-style-textString').value = swStyle.textString;
+    document.getElementById('o-draw-style-rotationSlider').value = swStyle.objRotation;
     swStyle.strokeOpacity = rgbaToOpacity(swStyle.strokeColor);
     swStyle.strokeColor = rgbaToRgb(swStyle.strokeColor);
     const strokeEl = document.getElementById('o-draw-style-strokeColor');
@@ -353,14 +360,15 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
         break;
       case 'Point':
       case 'MultiPoint':
-        style[0] = drawStyles.createRegularShape(newStyleObj.pointType, newStyleObj.pointSize, fill, stroke);
+        style[0] = drawStyles.createRegularShape(newStyleObj.pointType, newStyleObj.pointSize, fill, stroke, newStyleObj.objRotation);
         break;
       case 'TextPoint':
         style[0] = new Style({
           text: new Text({
             text: newStyleObj.textString || 'Text',
             font,
-            fill
+            fill,
+            rotation: (newStyleObj.objRotation / 360) * Math.PI || 0
           })
         });
         feature.set(annotationField, newStyleObj.textString || 'Text');
@@ -371,6 +379,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
     }
     if (newStyleObj.selected) {
       style.push(drawStyles.selectionStyle);
+      swStyle.objRotation = 0;
     }
     return style;
   }
@@ -470,6 +479,11 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
       swStyle.textSize = escapeQuotes(this.value);
       styleSelectedFeatures();
     });
+
+    document.getElementById('o-draw-style-rotationSlider').addEventListener('input', function e() {
+      swStyle.objRotation = escapeQuotes(this.value);
+      styleSelectedFeatures();
+    });
   }
 
   annotationField = optOptions.annotation || 'annotation';