Skip to content

Commit

Permalink
feature: localize draw (#2068)
Browse files Browse the repository at this point in the history 
* feat: localize draw and make measure work correctly again

* fix: spell "circle" properly

* fix: x marks the cross

* fix: x is a cross in english, plus is a cross in swedish
  • Loading branch information
@Grammostola
Grammostola authored Nov 15, 2024
1 parent 4191a8b commit 260dae2
Show file tree
Hide file tree
Showing 10 changed files with 243 additions and 102 deletions.
64 changes: 35 additions & 29 deletions src/controls/draw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,14 @@ import exportToFile from '../utils/exporttofile';
import validate from '../utils/validate';

const Draw = function Draw(options = {}) {
const localization = options.localization;

function localize(key) {
return localization.getStringByKeys({ targetParentKey: 'draw', targetKey: key });
}

const {
buttonText = 'Rita',
buttonText = localize('title'),
placement = ['menu'],
icon = '#fa-pencil',
annotation,
Expand All @@ -21,9 +27,9 @@ const Draw = function Draw(options = {}) {
} = options;

const drawDefaults = {
layerTitle: 'Ritlager',
layerTitle: localize('drawLayerTitleDefault'),
groupName: 'none',
groupTitle: 'Ritlager',
groupTitle: localize('drawGroupTitleDefault'),
visible: true,
styleByAttribute: true,
queryable: false,
Expand Down Expand Up @@ -105,19 +111,19 @@ const Draw = function Draw(options = {}) {
cls: 'margin-small icon-smaller light box-shadow',
style: 'border-radius: 3px',
icon: '#ic_save_24px',
text: 'Spara'
text: localize('popupSaveButton')
});

const cancelButton = Button({
cls: 'margin-small icon-smaller light box-shadow',
style: 'border-radius: 3px',
icon: '#ic_close_24px',
text: 'Avbryt'
text: localize('popupCancelButton')
});

const inputEl = Input({
cls: 'no-margin',
placeholderText: 'Ange popuptext',
placeholderText: localize('popupPlaceholderText'),
value: val
});

Expand All @@ -127,7 +133,7 @@ const Draw = function Draw(options = {}) {
});

const modal = Modal({
title: 'Popuptext',
title: localize('popupTextModalTitle'),
contentCmp: modalContent,
target: viewer.getId()
});
Expand Down Expand Up @@ -175,7 +181,7 @@ const Draw = function Draw(options = {}) {

const inputEl = Input({
cls: 'margin-right',
placeholderText: 'Ange lagernamn',
placeholderText: localize('layerDialogLayerNamePlaceholder'),
value: layerTitle
});

Expand All @@ -191,7 +197,7 @@ const Draw = function Draw(options = {}) {
drawHandler.setActiveLayer(drawLayer);
thisForm.dispatch('activeLayerChange', { layername: layerName });
},
tooltipText: 'Aktivera ritlager',
tooltipText: localize('layerDialogActivateLayerTooltip'),
tooltipPlacement: 'west'
});

Expand All @@ -203,13 +209,13 @@ const Draw = function Draw(options = {}) {
cls: 'padding-small icon-smaller round light box-shadow relative o-tooltip',
icon: '#ic_delete_24px',
async click() {
if (window.confirm('Vill du radera det här ritlagret?') === true) {
if (window.confirm(localize('layerDialogDeleteLayerConfirm')) === true) {
await map.removeLayer(drawLayer);
modal.closeModal();
thisForm.show();
}
},
tooltipText: 'Radera ritlager',
tooltipText: localize('layerDialogDeleteLayerTooltip'),
tooltipPlacement: 'west'
});

Expand All @@ -223,7 +229,7 @@ const Draw = function Draw(options = {}) {
filename: drawLayer.get('title') || 'export'
});
},
tooltipText: 'Ladda ner ritlager',
tooltipText: localize('layerDialogDownloadLayerTooltip'),
tooltipPlacement: 'west'
});

Expand All @@ -240,7 +246,7 @@ const Draw = function Draw(options = {}) {
cls: 'icon-smaller light box-shadow',
style: 'border-radius: 3px',
icon: '#ic_add_24px',
text: 'Nytt ritlager',
text: localize('layerDialogAddLayerButton'),
async click() {
let title = drawOptions.layerTitle;
if (viewer.getLayersByProperty('title', title).length > 0) {
Expand Down Expand Up @@ -295,15 +301,15 @@ const Draw = function Draw(options = {}) {
inputEl.value = null;
inputEl.click();
},
text: 'Importera ritlager',
ariaLabel: 'Importera ritlager'
text: localize('layerDialogImportLayerButton'),
ariaLabel: localize('layerDialogImportLayerButton')
});

const okButton = Button({
cls: 'icon-smaller light box-shadow',
style: 'border-radius: 3px',
icon: '#ic_check_24px',
text: 'OK',
text: localize('layerDialogOkButton'),
click() {
modal.closeModal();
}
Expand All @@ -324,7 +330,7 @@ const Draw = function Draw(options = {}) {
});

modal = Modal({
title: 'Ritlager',
title: localize('layerDialogTitle'),
contentCmp: modalContent,
target: viewer.getId(),
style: 'max-width:100%;width:400px;'
Expand All @@ -344,7 +350,7 @@ const Draw = function Draw(options = {}) {
}
},
icon: '#ic_place_24px',
tooltipText: 'Punkt',
tooltipText: localize('pointButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;',
state: 'inactive'
Expand All @@ -360,7 +366,7 @@ const Draw = function Draw(options = {}) {
}
},
icon: '#ic_timeline_24px',
tooltipText: 'Linje',
tooltipText: localize('lineButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -375,7 +381,7 @@ const Draw = function Draw(options = {}) {
}
},
icon: '#o_polygon_24px',
tooltipText: 'Polygon',
tooltipText: localize('polygonButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -390,7 +396,7 @@ const Draw = function Draw(options = {}) {
}
},
icon: '#ic_title_24px',
tooltipText: 'Text',
tooltipText: localize('textButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -404,7 +410,7 @@ const Draw = function Draw(options = {}) {
attributeForm.show();
},
icon: '#ic_textsms_24px',
tooltipText: 'Attribut',
tooltipText: localize('attributeButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;',
state: 'disabled'
Expand All @@ -423,7 +429,7 @@ const Draw = function Draw(options = {}) {
} else { this.setState('active'); }
},
icon: '#ic_palette_24px',
tooltipText: 'Stil',
tooltipText: localize('styleButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -437,7 +443,7 @@ const Draw = function Draw(options = {}) {
layerForm.show();
},
icon: '#ic_layers_24px',
tooltipText: 'Lager',
tooltipText: localize('layerButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -452,7 +458,7 @@ const Draw = function Draw(options = {}) {
thisComponent.dispatch('saveFeatures', true);
},
icon: '#ic_save_24px',
tooltipText: 'Spara',
tooltipText: localize('saveButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;',
state: 'disabled'
Expand All @@ -473,7 +479,7 @@ const Draw = function Draw(options = {}) {
});
},
icon: '#ic_download_24px',
tooltipText: 'Ladda ner',
tooltipText: localize('downloadButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -488,7 +494,7 @@ const Draw = function Draw(options = {}) {
}
},
icon: '#ic_delete_24px',
tooltipText: 'Ta bort',
tooltipText: localize('deleteButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;',
state: 'disabled'
Expand All @@ -505,7 +511,7 @@ const Draw = function Draw(options = {}) {
viewer.dispatch('toggleClickInteraction', { name: 'draw', active: false });
},
icon: '#ic_close_24px',
tooltipText: 'Stäng',
tooltipText: localize('closeButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand Down Expand Up @@ -549,7 +555,7 @@ const Draw = function Draw(options = {}) {
Text: textButton
};
const extraTools = drawOptions.drawTools || [];
drawExtraTools(extraTools, viewer, drawTools);
drawExtraTools({ extraTools, viewer, toolCmps: drawTools, localize });
},
onAdd(evt) {
viewer = evt.target;
Expand Down
20 changes: 9 additions & 11 deletions src/controls/draw/drawtools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,17 @@ import utils from '../../utils';

const createElement = utils.createElement;

let viewer;

const drawToolsSelector = function drawToolsSelector(extraTools, v, toolCmps) {
const drawToolsSelector = function drawToolsSelector({ extraTools, viewer, toolCmps, localize }) {
const toolNames = {
Polygon: 'Polygon',
Point: 'Punkt',
LineString: 'Linje',
box: 'Rektangel',
square: 'Kvadrat',
circle: 'Cirkel',
freehand: 'Frihandsläge'
Polygon: localize('drawPolygon'),
Point: localize('drawPoint'),
LineString: localize('drawLine'),
box: localize('drawBox'),
square: localize('drawSquare'),
circle: localize('drawCircle'),
freehand: localize('drawFreehand')
};
viewer = v;

const drawCmp = viewer.getControlByName('draw');
let drawTools;
const map = viewer.getMap();
Expand Down
4 changes: 2 additions & 2 deletions src/controls/measure.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,11 @@ const Measure = function Measure({
if (!drawType || drawType === geomType) {
if (geomType === 'Polygon') {
point = geometry.getInteriorPoint();
label = drawStyles.formatArea(geometry, useHectare, projection, 0, localization);
label = drawStyles.formatArea({ polygon: geometry, useHectare, projection, featureArea: 0, localization });
line = new LineString(geometry.getCoordinates()[0]);
} else if (geomType === 'LineString') {
point = new Point(geometry.getLastCoordinate());
label = drawStyles.formatLength(geometry, projection, localization);
label = drawStyles.formatLength({ line: geometry, projection, localization });
line = geometry;
}
}
Expand Down
66 changes: 65 additions & 1 deletion src/loc/en_US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,42 @@
"portraitAriaLabel": "Portrait",
"landscape": "Landscape",
"landscapeAriaLabel": "Landscape"
},
"draw": {
"title": "Draw",
"popupSaveButton": "Save",
"popupCancelButton": "Cancel",
"popupPlaceholderText": "Enter popup text",
"popupTextModalTitle": "Popup text",
"layerDialogLayerNamePlaceholder": "Enter layer name",
"layerDialogActivateLayerTooltip": "Activate layer",
"layerDialogDeleteLayerConfirm": "Delete draw layer?",
"layerDialogDeleteLayerTooltip": "Delete draw layer",
"layerDialogDownloadLayerTooltip": "Download draw layer",
"layerDialogAddLayerButton": "New",
"layerDialogImportLayerButton": "Import",
"layerDialogOkButton": "OK",
"layerDialogTitle": "Draw layers",
"pointButtonTooltip": "Point",
"lineButtonTooltip": "Line",
"polygonButtonTooltip": "Polygon",
"textButtonTooltip": "Text",
"attributeButtonTooltip": "Attributes",
"styleButtonTooltip": "Style",
"layerButtonTooltip": "Layers",
"saveButtonTooltip": "Save",
"downloadButtonTooltip": "Download",
"deleteButtonTooltip": "Delete",
"closeButtonTooltip": "Close",
"drawLayerTitleDefault": "Draw layer",
"drawGroupTitleDefault": "Draw layers",
"drawPolygon": "Polygon",
"drawPoint": "Point",
"drawLine": "Line",
"drawBox": "Rectangle",
"drawSquare": "Square",
"drawCircle": "Circle",
"drawFreehand": "Freehand"
}
},
"style": {
Expand All @@ -80,7 +116,35 @@

},
"styleTemplate": {

"fillColor": "Fill",
"backgroundFillColor": "Background fill",
"opacity": "Opacity",
"strokeWidth": "Line width",
"textSize": "Text size",
"pointSize": "Point size",
"showLengthArea": "Show length/area",
"showSegments": "Show segments",
"stroke": "Line",
"strokeTypeSolid": "Solid line",
"strokeTypeDotted": "Dotted line",
"strokeTypeDashed" : "Dashed line",
"strokeTypeDashedDotted" : "Dash-dotted line",
"dimensions": "Dimensions",
"margins": "Margins",
"rotation": "Rotation",
"degreesRotation": "Degrees",
"marginForText": "Margin",
"frame": "Frame",
"margin": "Margin",
"point": "Point",
"pointTypePoint": "Point",
"pointTypeCircle": "Circle",
"pointTypeX": "X",
"pointTypePlus": "Plus",
"pointTypeStar": "Star",
"pointTypeTriangle": "Triangle",
"pointTypeSquare": "Square",
"pointTypeMarker": "Marker"
}
}
}
Loading

0 comments on commit 260dae2

Please sign in to comment.