Valogeo/loko
Valogeo/loko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(assets): resolve point selection halo rendering and table scroll offset

Browse source
This commit is contained in:
kdeterme 2026-10-12 16:17:05 +02:00
parent 8cc5979c2e
commit 6a74c8b358
4 changed files with 64 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
loko/assets/static/assets/asset_symbology.js
View file

@ -1075,70 +1075,40 @@
],
paint: {
'circle-radius': [
'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
[
'case',
isNatureExpr,
[
'interpolate', ['linear'], ['zoom'],
8, 8,
11, 13,
13, 17,
15, 23,
17, 30,
19, 38,
22, 48
],
[
'interpolate', ['linear'], ['zoom'],
8, 10,
11, 15,
13, 20,
15, 26,
17, 34,
19, 44,
22, 56
]
],
0
'interpolate', ['linear'], ['zoom'],
8, ['case', isNatureExpr, 8, 10],
11, ['case', isNatureExpr, 13, 15],
13, ['case', isNatureExpr, 17, 20],
15, ['case', isNatureExpr, 23, 26],
17, ['case', isNatureExpr, 30, 34],
19, ['case', isNatureExpr, 38, 44],
22, ['case', isNatureExpr, 48, 56]
],
'circle-color': [
'case',
['boolean', ['feature-state', 'selected'], false],
'#ffd600',
['boolean', ['feature-state', 'highlighted'], false],
'#fde047',
'transparent'
['boolean', ['feature-state', 'selected'], false], '#ffd600',
'#fde047'
],
'circle-opacity': [
'case',
['boolean', ['feature-state', 'selected'], false],
0.95,
['boolean', ['feature-state', 'highlighted'], false],
0.85,
['boolean', ['feature-state', 'selected'], false], 0.95,
['boolean', ['feature-state', 'highlighted'], false], 0.85,
0
],
'circle-stroke-color': [
'case',
['boolean', ['feature-state', 'selected'], false],
'#78350f',
['boolean', ['feature-state', 'highlighted'], false],
'#b45309',
'transparent'
['boolean', ['feature-state', 'selected'], false], '#78350f',
'#b45309'
],
'circle-stroke-width': [
'case',
['boolean', ['feature-state', 'selected'], false],
4.5,
['boolean', ['feature-state', 'highlighted'], false],
3,
['boolean', ['feature-state', 'selected'], false], 4.5,
['boolean', ['feature-state', 'highlighted'], false], 3,
0
],
'circle-stroke-opacity': [
'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
1.0,
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 1.0,
0
],
},

13
loko/assets/static/assets/unified_index.js
View file

@ -2108,7 +2108,18 @@ function focusRowInUnifiedTable(rowRef) {
const $row = $table.find(`tbody tr[data-index="${rowIndex}"]`);
if ($row.length) {
$row.find('td').addClass('rowhighlight');
$row[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
const container = $table.closest('.fixed-table-body')[0] || $table.parent()[0];
if (container && $row[0]) {
const containerRect = container.getBoundingClientRect();
const rowRect = $row[0].getBoundingClientRect();
const relativeTop = rowRect.top - containerRect.top + container.scrollTop;
const targetScrollTop = Math.max(0, relativeTop - (container.clientHeight / 2) + (rowRect.height / 2));
if (typeof container.scrollTo === 'function') {
container.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
} else {
container.scrollTop = targetScrollTop;
}
}
}
}, 250);
}

129
loko/assets/static/assets/unified_map_layers.js
View file

@ -557,20 +557,10 @@ const _unified_locations_circle = {
], // ne pas rendre de cercles aux vertex des polygones ni aux radars
paint: {
'circle-radius': [
'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
[
'interpolate', ['linear'], ['zoom'],
7, 5,
14, 10,
19, 18
],
[
'interpolate', ['linear'], ['zoom'],
7, 2,
14, 5,
19, 10
]
'interpolate', ['linear'], ['zoom'],
7, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 5, 2],
14, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 10, 5],
19, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 18, 10]
],
// Colour by building usage_type or intersection status
'circle-color': [
@ -1013,22 +1003,11 @@ const _unified_sign_poles_circle = {
filter: ['==', ['get', 'asset_type'], 'signpole'],
paint: {
'circle-radius': [
'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
[
'interpolate', ['linear'], ['zoom'],
8, 4 * UNIFIED_SIGN_SYMBOL_SCALE,
13, 8 * UNIFIED_SIGN_SYMBOL_SCALE,
17, 14 * UNIFIED_SIGN_SYMBOL_SCALE,
22, 18 * UNIFIED_SIGN_SYMBOL_SCALE
],
[
'interpolate', ['linear'], ['zoom'],
8, 1.5 * UNIFIED_SIGN_SYMBOL_SCALE,
13, 3 * UNIFIED_SIGN_SYMBOL_SCALE,
17, 5 * UNIFIED_SIGN_SYMBOL_SCALE,
22, 6 * UNIFIED_SIGN_SYMBOL_SCALE
]
'interpolate', ['linear'], ['zoom'],
8, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 4 * UNIFIED_SIGN_SYMBOL_SCALE, 1.5 * UNIFIED_SIGN_SYMBOL_SCALE],
13, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 8 * UNIFIED_SIGN_SYMBOL_SCALE, 3 * UNIFIED_SIGN_SYMBOL_SCALE],
17, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 14 * UNIFIED_SIGN_SYMBOL_SCALE, 5 * UNIFIED_SIGN_SYMBOL_SCALE],
22, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 18 * UNIFIED_SIGN_SYMBOL_SCALE, 6 * UNIFIED_SIGN_SYMBOL_SCALE]
],
'circle-color': [
'case',
@ -1042,14 +1021,9 @@ const _unified_sign_poles_circle = {
'#333333'
],
'circle-stroke-width': [
'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
4 * UNIFIED_SIGN_SYMBOL_SCALE,
[
'interpolate', ['linear'], ['zoom'],
8, 0,
13, 1 * UNIFIED_SIGN_SYMBOL_SCALE
]
'interpolate', ['linear'], ['zoom'],
8, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 4 * UNIFIED_SIGN_SYMBOL_SCALE, 0],
13, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 4 * UNIFIED_SIGN_SYMBOL_SCALE, 1 * UNIFIED_SIGN_SYMBOL_SCALE]
]
},
minzoom: 8,
@ -1224,70 +1198,40 @@ const _unified_assets_point_selection = (typeof AssetSymbology !== 'undefined' &
],
paint: {
'circle-radius': [
'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
[
'case',
['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']],
[
'interpolate', ['linear'], ['zoom'],
8, 8,
11, 13,
13, 17,
15, 23,
17, 30,
19, 38,
22, 48
],
[
'interpolate', ['linear'], ['zoom'],
8, 10,
11, 15,
13, 20,
15, 26,
17, 34,
19, 44,
22, 56
]
],
0
'interpolate', ['linear'], ['zoom'],
8, ['case', ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 8, 10],
11, ['case', ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 13, 15],
13, ['case', ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 17, 20],
15, ['case', ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 23, 26],
17, ['case', ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 30, 34],
19, ['case', ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 38, 44],
22, ['case', ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 48, 56]
],
'circle-color': [
'case',
['boolean', ['feature-state', 'selected'], false],
'#ffd600',
['boolean', ['feature-state', 'highlighted'], false],
'#fde047',
'transparent'
['boolean', ['feature-state', 'selected'], false], '#ffd600',
'#fde047'
],
'circle-opacity': [
'case',
['boolean', ['feature-state', 'selected'], false],
0.95,
['boolean', ['feature-state', 'highlighted'], false],
0.85,
['boolean', ['feature-state', 'selected'], false], 0.95,
['boolean', ['feature-state', 'highlighted'], false], 0.85,
0
],
'circle-stroke-color': [
'case',
['boolean', ['feature-state', 'selected'], false],
'#78350f',
['boolean', ['feature-state', 'highlighted'], false],
'#b45309',
'transparent'
['boolean', ['feature-state', 'selected'], false], '#78350f',
'#b45309'
],
'circle-stroke-width': [
'case',
['boolean', ['feature-state', 'selected'], false],
4.5,
['boolean', ['feature-state', 'highlighted'], false],
3,
['boolean', ['feature-state', 'selected'], false], 4.5,
['boolean', ['feature-state', 'highlighted'], false], 3,
0
],
'circle-stroke-opacity': [
'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
1.0,
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 1.0,
0
],
},
@ -1306,18 +1250,9 @@ const _unified_assets_point = {
],
paint: {
'circle-radius': [
'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
[
'interpolate', ['linear'], ['zoom'],
10, 8,
18, 16
],
[
'interpolate', ['linear'], ['zoom'],
10, 4,
18, 8
]
'interpolate', ['linear'], ['zoom'],
10, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 8, 4],
18, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 16, 8]
],
'circle-color': [
'case',

6
loko/assets/templates/assets/unified_index.html
View file

@ -1636,7 +1636,7 @@
<script src="{% static 'common/base_script.js' %}"></script>
<script src="{% static 'common/base_map.js' %}"></script>
<script src="{% static 'assets/sign_panels_shared.js' %}?v=20260703c"></script>
<script src="{% static 'assets/asset_symbology.js' %}?v=20261012_circle_select_v2"></script>
<script src="{% static 'assets/unified_map_layers.js' %}?v=20261012_circle_select_v2"></script>
<script src="{% static 'assets/unified_index.js' %}?v=20261012_circle_select_v2"></script>
<script src="{% static 'assets/asset_symbology.js' %}?v=20261012_circle_select_v3"></script>
<script src="{% static 'assets/unified_map_layers.js' %}?v=20261012_circle_select_v3"></script>
<script src="{% static 'assets/unified_index.js' %}?v=20261012_circle_select_v3"></script>
{% endblock script %}