Skip to content

Commit

Permalink
Merge pull request #1953 from origo-map/draw-more-text-options
Browse files Browse the repository at this point in the history 
feature: more option for draw-controls text
  • Loading branch information
@johnnyblasta
johnnyblasta authored Jan 31, 2024
2 parents 4cb5866 + 41dded5 commit bbde5dd
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 4 deletions.
59 changes: 58 additions & 1 deletion src/style/styletemplate.js
View file
Original file line number Diff line number Diff line change
@@ -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);
}
Expand All @@ -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">
Expand All @@ -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' : '';
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -110,5 +158,14 @@ export default function styleTemplate(palette, swStyle) {
</div>
</div>`;

return textHtml + pointHtml + fillHtml + strokeHtml + measureHtml + rotateHtml;
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;
}
160 changes: 157 additions & 3 deletions src/style/stylewindow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,14 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
showMeasureSegments: false,
showMeasure: false,
selected: false,
objRotation: 0
objRotation: 0,
backgroundFillColor: 'rgb(255,255,255)',
backgroundFillOpacity: 0,
backgroundStrokeColor: 'rgb(0,0,0)',
backgroundStrokeOpacity: 0,
backgroundStrokeWidth: 2,
backgroundStrokeType: 'line',
paddingText: 3
};

function escapeQuotes(s) {
Expand Down Expand Up @@ -78,6 +85,10 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
return rgbToRgba(swDefaults.fillColor, swDefaults.fillOpacity);
}

function paddingToArray(padding) {
return [padding, padding, padding, padding];
}

function setFillColor(color) {
swStyle.fillColor = rgbToRgba(color, swStyle.fillOpacity);
}
Expand All @@ -86,6 +97,30 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
swStyle.strokeColor = rgbToRgba(color, swStyle.strokeOpacity);
}

function setBackgroundFillColor(color, opacity) {
if (typeof opacity === 'undefined') {
if (swStyle.backgroundFillOpacity === '0') {
swStyle.backgroundFillColor = rgbToRgba(color, 0.7);
swStyle.backgroundFillOpacity = 0.7;
document.getElementById('o-draw-style-backgroundFillOpacitySlider').value = 0.7;
} else {
swStyle.backgroundFillColor = rgbToRgba(color, swStyle.backgroundFillOpacity);
}
} else {
swStyle.backgroundFillColor = rgbToRgba(color, opacity);
}
}

function setBackgroundStrokeColor(color) {
if (swStyle.backgroundStrokeOpacity === 0) {
swStyle.backgroundStrokeColor = rgbToRgba(color, 0.7);
swStyle.backgroundStrokeOpacity = 0.7;
document.getElementById('o-draw-style-backgroundStrokeOpacitySlider').value = 0.7;
} else {
swStyle.backgroundStrokeColor = rgbToRgba(color, swStyle.backgroundStrokeOpacity);
}
}

function getStyleObject(feature, selected = false) {
let geometryType = feature.getGeometry().getType();
let styleObject = {};
Expand Down Expand Up @@ -136,6 +171,12 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
textString: swStyle.textString,
textFont: swStyle.textFont,
objRotation: swStyle.objRotation,
backgroundFill: rgbToRgba(swStyle.backgroundFillColor, swStyle.backgroundFillOpacity),
backgroundStrokeColor: swStyle.backgroundStrokeColor,
backgroundStrokeOpacity: swStyle.backgroundStrokeOpacity,
backgroundStrokeWidth: swStyle.backgroundStrokeWidth,
backgroundStrokeType: swStyle.backgroundStrokeType,
paddingText: swStyle.paddingText,
selected
};
break;
Expand All @@ -154,6 +195,9 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
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');
document.getElementById('o-draw-style-backgroundFill').classList.remove('hidden');
document.getElementById('o-draw-style-backgroundStroke').classList.remove('hidden');
document.getElementById('o-draw-style-padding').classList.remove('hidden');
}

function updateStylewindow(feature) {
Expand All @@ -172,17 +216,26 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
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');
document.getElementById('o-draw-style-backgroundFill').classList.add('hidden');
document.getElementById('o-draw-style-backgroundStroke').classList.add('hidden');
document.getElementById('o-draw-style-padding').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');
document.getElementById('o-draw-style-backgroundFill').classList.add('hidden');
document.getElementById('o-draw-style-backgroundStroke').classList.add('hidden');
document.getElementById('o-draw-style-padding').classList.add('hidden');
break;
case 'Point':
case 'MultiPoint':
document.getElementById('o-draw-style-text').classList.add('hidden');
document.getElementById('o-draw-style-measure').classList.add('hidden');
document.getElementById('o-draw-style-backgroundFill').classList.add('hidden');
document.getElementById('o-draw-style-backgroundStroke').classList.add('hidden');
document.getElementById('o-draw-style-padding').classList.add('hidden');
break;
case 'TextPoint':
document.getElementById('o-draw-style-stroke').classList.add('hidden');
Expand All @@ -197,6 +250,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
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;
document.getElementById('o-draw-style-padding').value = swStyle.paddingText;
swStyle.strokeOpacity = rgbaToOpacity(swStyle.strokeColor);
swStyle.strokeColor = rgbaToRgb(swStyle.strokeColor);
const strokeEl = document.getElementById('o-draw-style-strokeColor');
Expand All @@ -213,6 +267,21 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
document.getElementById('o-draw-style-strokeOpacitySlider').value = swStyle.strokeOpacity;
document.getElementById('o-draw-style-strokeType').value = swStyle.strokeType;

swStyle.backgroundStrokeColor = rgbaToRgb(swStyle.backgroundStrokeColor);
const bgStrokeEl = document.getElementById('o-draw-style-strokeColor');
const bgStrokeInputEl = bgStrokeEl.querySelector(`input[value = "${swStyle.backgroundStrokeColor}"]`);
if (bgStrokeInputEl) {
bgStrokeInputEl.checked = true;
} else {
const checkedEl = document.querySelector('input[name = "backgroundStrokeColorRadio"]:checked');
if (checkedEl) {
checkedEl.checked = false;
}
}
document.getElementById('o-draw-style-backgroundStrokeWidthSlider').value = swStyle.backgroundStrokeWidth;
document.getElementById('o-draw-style-backgroundStrokeOpacitySlider').value = swStyle.backgroundStrokeOpacity;
document.getElementById('o-draw-style-backgroundStrokeType').value = swStyle.backgroundStrokeType;

const fillEl = document.getElementById('o-draw-style-fillColor');
swStyle.fillOpacity = rgbaToOpacity(swStyle.fillColor);
swStyle.fillColor = rgbaToRgb(swStyle.fillColor);
Expand All @@ -228,6 +297,22 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
document.getElementById('o-draw-style-fillOpacitySlider').value = swStyle.fillOpacity;
document.getElementById('o-draw-style-showMeasure').checked = swStyle.showMeasure;
document.getElementById('o-draw-style-showMeasureSegments').checked = swStyle.showMeasureSegments;

const bgFillEl = document.getElementById('o-draw-style-backgroundFillColor');
if (typeof swStyle.backgroundFill !== 'undefined') {
swStyle.backgroundFillOpacity = rgbaToOpacity(swStyle.backgroundFill);
swStyle.backgroundFillColor = rgbaToRgb(swStyle.backgroundFill);
}
const bgFillInputEl = bgFillEl.querySelector(`input[value = "${swStyle.backgroundFillColor}"]`);
if (bgFillInputEl) {
bgFillInputEl.checked = true;
} else {
const checkedEl = document.querySelector('input[name = "backgroundFillColorRadio"]:checked');
if (checkedEl) {
checkedEl.checked = false;
}
}
document.getElementById('o-draw-style-backgroundFillOpacitySlider').value = swStyle.backgroundFillOpacity;
}

function getStyleFunction(feature, inputStyle = {}, projection = mapProjection) {
Expand All @@ -242,6 +327,10 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
newStyleObj.strokeWidth *= styleScale;
newStyleObj.textSize *= styleScale;
newStyleObj.pointSize *= styleScale;
newStyleObj.backgroundStrokeOpacity = featureStyle.backgroundStrokeOpacity;
newStyleObj.backgroundStrokeColor = stringToRgba(newStyleObj.backgroundStrokeColor, newStyleObj.backgroundStrokeOpacity);
newStyleObj.backgroundStrokeWidth *= styleScale;
newStyleObj.paddingText = paddingToArray(featureStyle.paddingText);
const geom = feature.getGeometry();
let geometryType = feature.getGeometry().getType();
if (feature.get(annotationField)) {
Expand All @@ -258,6 +347,16 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
} else {
lineDash = false;
}
let bgLineDash;
if (newStyleObj.backgroundStrokeType === 'dash') {
bgLineDash = [3 * newStyleObj.backgroundStrokeWidth, 3 * newStyleObj.backgroundStrokeWidth];
} else if (newStyleObj.backgroundStrokeType === 'dash-point') {
bgLineDash = [3 * newStyleObj.backgroundStrokeWidth, 3 * newStyleObj.backgroundStrokeWidth, 0.1, 3 * newStyleObj.backgroundStrokeWidth];
} else if (newStyleObj.backgroundStrokeType === 'point') {
bgLineDash = [0.1, 3 * newStyleObj.backgroundStrokeWidth];
} else {
bgLineDash = false;
}

const stroke = new Stroke({
color: newStyleObj.strokeColor,
Expand All @@ -267,6 +366,14 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
const fill = new Fill({
color: newStyleObj.fillColor
});
const bgStroke = new Stroke({
color: rgbToArray(newStyleObj.backgroundStrokeColor, newStyleObj.backgroundStrokeOpacity),
width: newStyleObj.backgroundStrokeWidth,
lineDash: bgLineDash
});
const bgFill = new Fill({
color: newStyleObj.backgroundFill
});
const font = `${newStyleObj.textSize}px ${newStyleObj.textFont}`;
switch (geometryType) {
case 'LineString':
Expand Down Expand Up @@ -368,7 +475,10 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
text: newStyleObj.textString || 'Text',
font,
fill,
rotation: (newStyleObj.objRotation / 360) * Math.PI || 0
rotation: (newStyleObj.objRotation / 360) * Math.PI || 0,
backgroundFill: bgFill,
backgroundStroke: bgStroke,
padding: newStyleObj.paddingText
})
});
feature.set(annotationField, newStyleObj.textString || 'Text');
Expand All @@ -379,7 +489,6 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
}
if (newStyleObj.selected) {
style.push(drawStyles.selectionStyle);
swStyle.objRotation = 0;
}
return style;
}
Expand Down Expand Up @@ -411,6 +520,8 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
let matches;
const fillColorEl = document.getElementById('o-draw-style-fillColor');
const strokeColorEl = document.getElementById('o-draw-style-strokeColor');
const bgFillColorEl = document.getElementById('o-draw-style-backgroundFillColor');
const bgStrokeColorEl = document.getElementById('o-draw-style-backgroundStrokeColor');

matches = fillColorEl.querySelectorAll('span');
for (let i = 0; i < matches.length; i += 1) {
Expand All @@ -428,6 +539,22 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
});
}

matches = bgFillColorEl.querySelectorAll('span');
for (let i = 0; i < matches.length; i += 1) {
matches[i].addEventListener('click', function e() {
setBackgroundFillColor(this.style.backgroundColor);
styleSelectedFeatures();
});
}

matches = bgStrokeColorEl.querySelectorAll('span');
for (let i = 0; i < matches.length; i += 1) {
matches[i].addEventListener('click', function e() {
setBackgroundStrokeColor(this.style.backgroundColor);
styleSelectedFeatures();
});
}

document.getElementById('o-draw-style-fillOpacitySlider').addEventListener('input', function e() {
swStyle.fillOpacity = escapeQuotes(this.value);
setFillColor(swStyle.fillColor);
Expand All @@ -440,6 +567,12 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
styleSelectedFeatures();
});

document.getElementById('o-draw-style-backgroundFillOpacitySlider').addEventListener('input', function e() {
swStyle.backgroundFillOpacity = escapeQuotes(this.value);
setBackgroundFillColor(swStyle.backgroundFillColor, escapeQuotes(this.value));
styleSelectedFeatures();
});

document.getElementById('o-draw-style-strokeWidthSlider').addEventListener('input', function e() {
swStyle.strokeWidth = escapeQuotes(this.value);
styleSelectedFeatures();
Expand All @@ -450,6 +583,22 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
styleSelectedFeatures();
});

document.getElementById('o-draw-style-backgroundStrokeWidthSlider').addEventListener('input', function e() {
swStyle.backgroundStrokeWidth = escapeQuotes(this.value);
styleSelectedFeatures();
});

document.getElementById('o-draw-style-backgroundStrokeType').addEventListener('change', function e() {
swStyle.backgroundStrokeType = escapeQuotes(this.value);
styleSelectedFeatures();
});

document.getElementById('o-draw-style-backgroundStrokeOpacitySlider').addEventListener('input', function e() {
swStyle.backgroundStrokeOpacity = escapeQuotes(this.value);
setBackgroundStrokeColor(swStyle.backgroundStrokeColor);
styleSelectedFeatures();
});

document.getElementById('o-draw-style-pointType').addEventListener('change', function e() {
swStyle.pointType = escapeQuotes(this.value);
styleSelectedFeatures();
Expand Down Expand Up @@ -484,6 +633,11 @@ const Stylewindow = function Stylewindow(optOptions = {}) {
swStyle.objRotation = escapeQuotes(this.value);
styleSelectedFeatures();
});

document.getElementById('o-draw-style-paddingSlider').addEventListener('input', function e() {
swStyle.paddingText = escapeQuotes(this.value);
styleSelectedFeatures();
});
}

annotationField = optOptions.annotation || 'annotation';
Expand Down

0 comments on commit bbde5dd

Please sign in to comment.