From 3655952331c729b24d4949d0c3375ad451246afe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Bl=C3=A4sta?= Date: Thu, 18 Jan 2024 11:52:22 +0100 Subject: [PATCH 1/4] feature: rotate text and point in draw control --- src/style/drawstyles.js | 10 ++++++++-- src/style/styletemplate.js | 11 ++++++++++- src/style/stylewindow.js | 19 ++++++++++++++++--- 3 files changed, 34 insertions(+), 6 deletions(-) diff --git a/src/style/drawstyles.js b/src/style/drawstyles.js index 1c7c736b6..a27f26f27 100644 --- 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 index 81846e257..737a96d65 100644 --- a/src/style/styletemplate.js +++ b/src/style/styletemplate.js @@ -101,5 +101,14 @@ export default function styleTemplate(palette, swStyle) { `; - return textHtml + pointHtml + fillHtml + strokeHtml + measureHtml; + const rotateHtml = `
Rotation
+ +
+ -360° + Graders rotation + 360° +
+
`; + + return textHtml + pointHtml + fillHtml + strokeHtml + measureHtml + rotateHtml; } diff --git a/src/style/stylewindow.js b/src/style/stylewindow.js index 8878a6371..67b708957 100644 --- 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'); @@ -470,6 +478,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'; From 40997dcc58381c149f4f536a2184ced3bafe2ef9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Bl=C3=A4sta?= Date: Fri, 19 Jan 2024 08:44:25 +0100 Subject: [PATCH 2/4] let all new objects start with zero rotation --- src/style/stylewindow.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style/stylewindow.js b/src/style/stylewindow.js index 67b708957..891850fbf 100644 --- a/src/style/stylewindow.js +++ b/src/style/stylewindow.js @@ -379,6 +379,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { } if (newStyleObj.selected) { style.push(drawStyles.selectionStyle); + swStyle.objRotation = 0; } return style; } From 2d41e1debd8ca2005fed6414ff3d4306181029be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Bl=C3=A4sta?= Date: Mon, 29 Jan 2024 09:23:25 +0100 Subject: [PATCH 3/4] fixed wrong degrees --- src/style/styletemplate.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/style/styletemplate.js b/src/style/styletemplate.js index 737a96d65..0be30fb3d 100644 --- a/src/style/styletemplate.js +++ b/src/style/styletemplate.js @@ -104,9 +104,12 @@ export default function styleTemplate(palette, swStyle) { const rotateHtml = `
Rotation
- -360° + -180° + 0° + 180° +
+
Graders rotation - 360°
`; From 6dac34bac2e4f499f1a10196c623a6f60728f361 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Bl=C3=A4sta?= Date: Mon, 29 Jan 2024 10:27:45 +0100 Subject: [PATCH 4/4] zero to 360 rotation --- src/style/styletemplate.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/style/styletemplate.js b/src/style/styletemplate.js index 0be30fb3d..4b3f349a1 100644 --- a/src/style/styletemplate.js +++ b/src/style/styletemplate.js @@ -102,14 +102,11 @@ export default function styleTemplate(palette, swStyle) {
`; const rotateHtml = `
Rotation
- -
- -180° - 0° - 180° -
+
+ 0° Graders rotation + 360°
`;