Skip to content

Edition with new draw tool #6498

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

Draft
nboisteault wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Edition with new draw tool #6498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f4cb187
refactor: remove old OL2 edition bar and replace with new digitizing …
nboisteault Jan 30, 2026
1c26c9c
feat: add `active` attribute to Digitizing component for initial tool…
nboisteault Jan 30, 2026
d487141
Activate digitizing when edition is launched
nboisteault Feb 13, 2026
796a350
e2e: refactor tests to use OL10 map instead of OL2 map
nboisteault Feb 13, 2026
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
45 changes: 45 additions & 0 deletions assets/src/components/Digitizing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import '../images/svg/file-upload.svg';
* It is mandatory and provide a way to use this element for different contexts.
*
* The other attributes are:
* active - Activate the element on load or when the attribute is added
* selected-tool - Start selected drawing tools one of DigitizingAvailableTools or available-tools
* available-tools - List of available drawing tools based on DigitizingAvailableTools
* save - Enable save capability
Expand All @@ -50,6 +51,7 @@ import '../images/svg/file-upload.svg';
* @example <caption>Example of use</caption>
* <lizmap-digitizing
* context="draw"
* active
* selected-tool="box"
* available-tools="point,line,polygon,box,freehand"
* save
Expand Down Expand Up @@ -84,6 +86,10 @@ export default class Digitizing extends HTMLElement {
this._availableTools = DigitizingAvailableTools.slice(1);
}

static get observedAttributes() {
return ['active'];
}

connectedCallback() {

// Update available tools from attribute
Expand Down Expand Up @@ -530,11 +536,30 @@ export default class Digitizing extends HTMLElement {
'digitizing.visibility',
]
);

// Activate the selected tool if the active attribute is present
this._activateIfNeeded();
}

/**
* Activate the selected tool if the active attribute is present
* @private
*/
_activateIfNeeded() {
if (this.active && this._toolSelected) {
this.selectTool(this._toolSelected);
}
}

disconnectedCallback() {
}

attributeChangedCallback(name) {
if (name === 'active') {
this._activateIfNeeded();
}
}

/**
* Digitizing context
* The element attribute: context
Expand Down Expand Up @@ -642,6 +667,26 @@ export default class Digitizing extends HTMLElement {
}
}

/**
* The element is active if the active attribute is present
* @type {boolean}
*/
get active() {
return this.hasAttribute('active');
}

/**
* Set the active state of the element
* @param {boolean} value - True to activate the element, false to deactivate
*/
set active(value) {
if (value) {
this.setAttribute('active', '');
} else {
this.removeAttribute('active');
}
}

/**
* Select tool
* @param {string} tool - The tool to select
Expand Down
6 changes: 0 additions & 6 deletions assets/src/legacy/edition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -654,9 +654,6 @@ var lizEdition = function() {
*/
function finishEdition() {

// Put old OL2 map at bottom
lizMap.mainLizmap.newOlMap = true;

// Lift the constraint on edition
lizMap.editionPending = false;
$('#mapmenu .edition').removeClass('edition-pending');
Expand Down Expand Up @@ -1486,9 +1483,6 @@ var lizEdition = function() {
// See "Check li (tabs) visibility" in displayEditionForm method
displayEditionForm( data );

// Put old OL2 map on top and synchronize position with new OL map
lizMap.mainLizmap.newOlMap = false;

if( aCallback )
aCallback( editionLayer['id'], featureId );
})
Expand Down
36 changes: 36 additions & 0 deletions assets/src/modules/Edition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default class Edition {
this.drawFeatureActivated = true;
this.layerGeometry = properties.editionConfig.geometryType;
this.drawControl = properties.drawControl;
this.activateDigitizing();
mainEventDispatcher.dispatch('edition.drawFeatureActivated');
},
lizmapeditiondrawfeaturedeactivated: () => {
Expand All @@ -46,11 +47,46 @@ export default class Edition {
mainEventDispatcher.dispatch('edition.formDisplayed');
},
lizmapeditionformclosed: () => {
this.deactivateDigitizing();
mainEventDispatcher.dispatch('edition.formClosed');
}
});
}

/**
* Get the lizmap-digitizing element
* @returns {HTMLElement|null} The digitizing element or null if not found
*/
get digitizingElement() {
return document.querySelector('lizmap-digitizing[context="draw"]');
}

/**
* Activate the lizmap-digitizing web component when feature editing starts
* @private
*/
activateDigitizing() {
if (this.layerGeometry) {
const digitizingElement = this.digitizingElement;
if (digitizingElement) {
// Activate the component using the active attribute
digitizingElement.setAttribute('active', '');
}
}
}

/**
* Deactivate the lizmap-digitizing web component when feature editing ends
* @private
*/
deactivateDigitizing() {
const digitizingElement = this.digitizingElement;
if (digitizingElement) {
// Remove the active attribute to deactivate the component
digitizingElement.removeAttribute('active');
}
}

get layerId() {
return this._layerId;
}
Expand Down
112 changes: 6 additions & 106 deletions lizmap/modules/view/templates/map_edition.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,112 +35,12 @@
</div>
</div>
<div class="tab-pane" id="tabdigitization">
<div id="edition-geomtool-container" class="btn-group" data-toggle="buttons-radio"
style="display:none;">
<button id="edition-geomtool-nodetool" class="btn btn-sm"
data-bs-toggle="tooltip" data-bs-title="{@view~edition.geomtool.nodetool.title@}">
<i class="icon-none qgis_sprite mActionNodeTool"></i>
</button>
<button id="edition-geomtool-drag" class="btn btn-sm"
data-bs-toggle="tooltip" data-bs-title="{@view~edition.geomtool.drag.title@}">
<i class="icon-none qgis_sprite mActionMoveFeature"></i>
</button>
<button id="edition-geomtool-rotate" class="btn btn-sm"
data-bs-toggle="tooltip" data-bs-title="{@view~edition.geomtool.rotate.title@}">
<i class="icon-none qgis_sprite mActionRotateFeature"></i>
</button>
<button id="edition-geomtool-reshape" class="btn btn-sm"
data-bs-toggle="tooltip" data-bs-title="{@view~edition.geomtool.reshape.title@}">
<i class="icon-none qgis_sprite mActionReshape"></i>
</button>
<button id="edition-geomtool-split" class="btn btn-sm"
data-bs-toggle="tooltip" data-bs-title="{@view~edition.geomtool.splitfeatures.title@}">
<i class="icon-none qgis_sprite mActionSplitFeatures"></i>
</button>
<lizmap-reverse-geom class="btn btn-sm"
data-bs-toggle="tooltip" data-bs-title="{@view~edition.geomtool.reversegeom.title@}">
</lizmap-reverse-geom>
</div>
<button id="edition-geomtool-restart-drawing" class="btn btn-sm"
data-bs-toggle="tooltip" data-bs-title="{@view~edition.geomtool.restartdrawing.title@}">
<i class="icon-refresh"></i>
</button>
<lizmap-copy-geometry-button></lizmap-copy-geometry-button>
<lizmap-paste-geom data-bs-toggle="tooltip" data-bs-title="{@view~edition.geomtool.pastegeom.title@}"></lizmap-paste-geom>
<form id="edition-point-coord-form" class="form-horizontal">
<fieldset>
<div id="edition-point-coord-form-group" class="jforms-table-group">
<div id="handle-point-coord">
<h3>{@view~edition.point.coord.title@}</h3>
<div class="form-group row mb-3">
<label class="jforms-label form-label" for="edition-point-coord-crs"
id="edition-point-coord-crs-label">{@view~edition.point.coord.crs.label@}</label>
<div class="controls">
<select name="coord-crs" id="edition-point-coord-crs"
class="jforms-ctrl-menulist form-select">
<option value="4326" selected="selected"><span>EPSG:4326</span></option>
<option id="edition-point-coord-crs-layer" value="" style="display:none;">
</option>
<option id="edition-point-coord-crs-map" value="" style="display:none;">
</option>
</select>
</div>
</div>
<div class="form-group row mb-3">
<label class="jforms-label form-label" for="edition-point-coord-x"
id="edition-point-coord-x-label">{@view~edition.point.coord.x.label@}</label>
<div class="controls">
<input name="coord-x" id="edition-point-coord-x"
class="jforms-ctrl-input form-control form-control-sm" value="" type="text">
</div>
</div>
<div class="form-group row mb-3">
<label class="jforms-label form-label" for="edition-point-coord-y"
id="edition-point-coord-y-label">{@view~edition.point.coord.y.label@}</label>
<div class="controls">
<input name="coord-y" id="edition-point-coord-y"
class="jforms-ctrl-input form-control form-control-sm" value="" type="text">
</div>
</div>
<div class="form-group row mb-3 hidden">
<label
class="jforms-label form-label">{@view~edition.segment.length.label@}</label>
<div class="controls">
<label id="edition-segment-length"></label>
</div>
</div>
<div class="form-group row mb-3 hidden">
<label
class="jforms-label form-label">{@view~edition.segment.angle.label@}</label>
<div class="controls">
<label id="edition-segment-angle"></label>
</div>
</div>
<div class="form-group row mb-3">
<div class="controls">
<button name="submit" id="edition-point-coord-add"
class="btn btn-sm">{@view~edition.point.coord.add.label@}</button>
<button name="submit" id="edition-point-coord-submit"
class="btn btn-sm">{@view~edition.point.coord.finalize.label@}</button>
</div>
</div>
<div class="form-group row mb-3" id="edition-point-coord-geolocation-group"
style="display:none;">
<div class="controls form-check">
<label class="jforms-label checkbox form-check-label" for="edition-point-coord-geolocation"
id="edition-point-coord-geolocation-label">
<input name="checked" id="edition-point-coord-geolocation"
class="jforms-ctrl-checkbox form-check-input" value="1" type="checkbox">
{@view~edition.point.coord.geolocation.label@}
</label>
</div>
</div>
<lizmap-geolocation-survey></lizmap-geolocation-survey>
</div>
<lizmap-snapping></lizmap-snapping>
</div>
</fieldset>
</form>
<lizmap-digitizing
context="draw"
selected-tool="point"
available-tools="point"
measure
></lizmap-digitizing>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion tests/end2end/playwright/dnd-form.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// @ts-check
import { test, expect } from '@playwright/test';
import { expect as responseExpect } from './fixtures/expect-response.js'
Expand All @@ -20,7 +20,7 @@

await project.dock.getByText('tab2').click();
await project.editingField('field_in_dnd_form').fill('value in DND form');
await project.clickOnMapLegacy(600, 200);
await project.clickOnMap(600, 200);

await project.editingSubmitForm();
const ids = await editedFeatureIds(page);
Expand Down
6 changes: 3 additions & 3 deletions tests/end2end/playwright/editing-geometry.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// @ts-check
import {expect, test} from '@playwright/test';
import {editedFeatureIds } from './globals';
Expand Down Expand Up @@ -33,12 +33,12 @@

const x1 = 600;
const y1 = 200;
await project.clickOnMapLegacy(x1, y1);
await project.clickOnMap(x1, y1);
if (geom === 'polygon'){
await project.clickOnMapLegacy(x1, y1 + 100);
await project.clickOnMap(x1, y1 + 100);
}
if (geom === 'line' || geom === 'polygon') {
await project.dblClickOnMapLegacy(x1 + 100, y1);
await project.dblClickOnMap(x1 + 100, y1);
}
await project.editingSubmitForm();

Expand Down
4 changes: 2 additions & 2 deletions tests/end2end/playwright/editing-value-relation.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ test.describe('Value relation widget',

const select = await page.locator("#jforms_view_edition_code_with_geom_exp");

await project.clickOnMapLegacy(650, 200);
await project.clickOnMap(650, 200);

await select.selectOption({value: ''});

await project.mapOl2.dragTo(project.mapOl2, {
await project.map.dragTo(project.map, {
sourcePosition: { x: 650, y: 200 },
targetPosition: { x: 500, y: 200 },
});
Expand Down
2 changes: 1 addition & 1 deletion tests/end2end/playwright/edition-form.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -705,7 +705,7 @@ test.describe(
await project.checkEditionFormTextField('Name check', '', 'Name check', true);

// insert a point feature
await project.clickOnMapLegacy(488, 331);
await project.clickOnMap(488, 331);
// fill the form
await project.fillEditionFormTextInput('point_name', 'text insert');
let editFeatureRequestPromiseUpdate = page.waitForResponse(response => response.url().includes('editFeature'));
Expand Down
4 changes: 2 additions & 2 deletions tests/end2end/playwright/form_advanced.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ test.describe('Advanced form', function () {
const getDataPromise = page.waitForResponse(/jelix\/forms\/getdata/)

// Click on map as form needs a geometry
project.clickOnMapLegacy(410, 175);
project.clickOnMap(410, 175);

// wait for the response completed
let getDataResponse = await getDataPromise;
Expand Down Expand Up @@ -149,7 +149,7 @@ test.describe('Advanced form', function () {
request.postData()?.includes('_ref=sousquartier')
);
// Assert quartier value is good for another drawn point
project.clickOnMapLegacy(455, 250);
project.clickOnMap(455, 250);
// Wait for GetData quartier completed (based on geometry)
let getDataQuartier = await (await getDataQuartierPromise).response();
expect(getDataQuartier.status()).toBe(200);
Expand Down
2 changes: 1 addition & 1 deletion tests/end2end/playwright/form_edition.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ test.describe('Form edition', function () {
await expect(page.locator('#edition .edition-tabs')).toBeVisible();
await expect(page.locator('#edition-form-container')).toBeVisible();

await project.clickOnMapLegacy(630-30 , 325-75);
await project.clickOnMap(630-30 , 325-75);

// submit the form
saveFeatureRequestPromise = page.waitForRequest(/lizmap\/edition\/saveFeature/);
Expand Down
2 changes: 1 addition & 1 deletion tests/end2end/playwright/form_edition_value_relation_field.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ test.describe('Form edition all field type', function () {
// Intercept getData query to wait for its end
let getDataRequestPromise = page.waitForRequest(/jelix\/forms\/getdata/);
// Click on the map over Zone A1
project.clickOnMapLegacy(530-150, 375-50);
project.clickOnMap(530-150, 375-50);
// Wait for getData query ends, check request parameters and response
let getDataRequest = await getDataRequestPromise;
let getDataExpectedParameters = {
Expand Down
2 changes: 1 addition & 1 deletion tests/end2end/playwright/singleWMS.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,7 @@ test.describe('Single WMS layer', () => {
await formRequest.response();

// edition id done on #map
await project.clickOnMapLegacy(532, 293);
await project.clickOnMap(532, 293);
await project.fillEditionFormTextInput('title', 'Test insert');

// submit the form
Expand Down
Loading