Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draw: add button to rotate geometries #5131

Merged
merged 2 commits into from
Jan 3, 2025
Merged

Draw: add button to rotate geometries #5131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
58124f3
Draw: add button to rotate geometries
nboisteault Dec 16, 2024
e6a285f
Add rotate button svg
nboisteault Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions assets/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions assets/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"license": "ISC",
"dependencies": {
"flatgeobuf": "^3.36.0",
"ol-ext": "^4.0.24",
"ol-wfs-capabilities": "^2.0.0"
}
}
8 changes: 7 additions & 1 deletion assets/src/components/Digitizing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import '../images/svg/text.svg';

import '../images/svg/pencil.svg';
import '../images/svg/edit.svg';
import '../images/svg/rotate.svg';
import '../images/svg/eraser.svg';
import '../images/svg/eraser-all.svg';
import '../images/svg/save.svg';
Expand Down Expand Up @@ -152,6 +153,11 @@ export default class Digitizing extends HTMLElement {
<use xlink:href="#edit"/>
</svg>
</button>
<button type="button" class="digitizing-rotate btn ${mainLizmap.digitizing.isRotate ? 'active btn-primary' : ''}" ?disabled=${!mainLizmap.digitizing.featureDrawn} @click=${() => mainLizmap.digitizing.toggleRotate()} data-bs-toggle="tooltip" data-bs-title="${lizDict['digitizing.toolbar.rotate']}">
<svg>
<use xlink:href="#rotate"/>
</svg>
</button>
<button type="button" class="digitizing-erase btn ${mainLizmap.digitizing.isErasing ? 'active btn-primary' : ''}" ?disabled=${!mainLizmap.digitizing.featureDrawn} @click=${() => mainLizmap.digitizing.toggleErasing()} data-bs-toggle="tooltip" data-bs-title="${lizDict['digitizing.toolbar.erase']}">
<svg>
<use xlink:href="#eraser"/>
Expand Down Expand Up @@ -271,7 +277,7 @@ export default class Digitizing extends HTMLElement {
render(mainTemplate(), this);
}
},
['digitizing.featureDrawn', 'digitizing.visibility', 'digitizing.toolSelected', 'digitizing.editionBegins', 'digitizing.editionEnds', 'digitizing.erasingBegins', 'digitizing.erasingEnds', 'digitizing.erase', 'digitizing.erase.all', 'digitizing.drawColor', 'digitizing.save', 'digitizing.measure', 'digitizing.editedFeatureText', 'digitizing.editedFeatureRotation', 'digitizing.editedFeatureScale']
['digitizing.featureDrawn', 'digitizing.visibility', 'digitizing.toolSelected', 'digitizing.editionBegins', 'digitizing.editionEnds', 'digitizing.erasingBegins', 'digitizing.erasingEnds', 'digitizing.erase','digitizing.rotate', 'digitizing.erase.all', 'digitizing.drawColor', 'digitizing.save', 'digitizing.measure', 'digitizing.editedFeatureText', 'digitizing.editedFeatureRotation', 'digitizing.editedFeatureScale']
);
}

Expand Down
1 change: 1 addition & 0 deletions assets/src/images/svg/rotate.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 41 additions & 1 deletion assets/src/modules/Digitizing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ import * as flatgeobuf from 'flatgeobuf';
import { register } from "ol/proj/proj4.js";
import proj4 from "proj4";

import Transform from "ol-ext/interaction/Transform.js";

/**
* List of digitizing available tools
* @name DigitizingAvailableTools
Expand Down Expand Up @@ -76,6 +78,7 @@ export class Digitizing {
this._drawColor = localStorage.getItem(this._repoAndProjectString + '_drawColor') || '#ff0000';

this._isEdited = false;
this._isRotate = false;
this._hasMeasureVisible = false;
this._isSaved = false;
this._isErasing = false;
Expand Down Expand Up @@ -187,6 +190,11 @@ export class Digitizing {
features: this._selectInteraction.getFeatures(),
});

this._transformInteraction = new Transform({
rotate: true,
scale: false,
});

this._drawStyleFunction = (feature) => {
let color = feature.get('color') || this._drawColor;

Expand Down Expand Up @@ -504,9 +512,10 @@ export class Digitizing {

this._toolSelected = tool;

// Disable edition and erasing when tool changes
// Disable other tools when digitizing tool changes
this.isEdited = false;
this.isErasing = false;
this.isRotate = false;
}

mainEventDispatcher.dispatch('digitizing.toolSelected');
Expand Down Expand Up @@ -567,6 +576,7 @@ export class Digitizing {

this.toolSelected = 'deactivate';
this.isErasing = false;
this.isRotate = false;

mainEventDispatcher.dispatch('digitizing.editionBegins');
} else {
Expand All @@ -583,6 +593,27 @@ export class Digitizing {
}
}

get isRotate() {
return this._isRotate;
}

set isRotate(isRotate) {
if (this._isRotate !== isRotate) {
this._isRotate = isRotate;

if (this._isRotate) {
this.toolSelected = 'deactivate';
this.isErasing = false;
this.isEdited = false;
mainLizmap.map.addInteraction(this._transformInteraction);
} else {
mainLizmap.map.removeInteraction(this._transformInteraction);
}

mainEventDispatcher.dispatch('digitizing.rotate');
}
}

get isErasing() {
return this._isErasing;
}
Expand All @@ -595,6 +626,7 @@ export class Digitizing {
// deactivate draw and edition
this.toolSelected = 'deactivate';
this.isEdited = false;
this.isRotate = false;

this._erasingCallBack = event => {
const features = mainLizmap.map.getFeaturesAtPixel(event.pixel, {
Expand Down Expand Up @@ -1051,6 +1083,10 @@ export class Digitizing {
this.isEdited = !this.isEdited;
}

toggleRotate() {
this.isRotate = !this.isRotate;
}

toggleMeasure() {
this.hasMeasureVisible = !this.hasMeasureVisible;
}
Expand All @@ -1068,6 +1104,10 @@ export class Digitizing {
}

eraseAll() {
this.isEdited = false;
this.isRotate = false
this.isErasing = false;

this._measureTooltips.forEach((measureTooltip) => {
mainLizmap.map.removeOverlay(measureTooltip[0]);
mainLizmap.map.removeOverlay(measureTooltip[1]);
Expand Down
1 change: 1 addition & 0 deletions lizmap/modules/view/locales/en_US/dictionnary.UTF-8.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ digitizing.toolbar.textRotation=Rotation
digitizing.toolbar.textScale=Size
digitizing.toolbar.import=Import in GeoJSON, GPX, KML, zipped Shapefile or FlatGeobuf
digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
digitizing.toolbar.rotate=Rotate
digitizing.toolbar.erase=Delete some features
digitizing.toolbar.erase.all=Delete all features
digitizing.confirm.erase=Are you sure you want to delete this feature?
Expand Down
Loading