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: { paint: {
'circle-radius': [ 'circle-radius': [
'case', 'interpolate', ['linear'], ['zoom'],
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 8, ['case', isNatureExpr, 8, 10],
[ 11, ['case', isNatureExpr, 13, 15],
'case', 13, ['case', isNatureExpr, 17, 20],
isNatureExpr, 15, ['case', isNatureExpr, 23, 26],
[ 17, ['case', isNatureExpr, 30, 34],
'interpolate', ['linear'], ['zoom'], 19, ['case', isNatureExpr, 38, 44],
8, 8, 22, ['case', isNatureExpr, 48, 56]
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
], ],
'circle-color': [ 'circle-color': [
'case', 'case',
['boolean', ['feature-state', 'selected'], false], ['boolean', ['feature-state', 'selected'], false], '#ffd600',
'#ffd600', '#fde047'
['boolean', ['feature-state', 'highlighted'], false],
'#fde047',
'transparent'
], ],
'circle-opacity': [ 'circle-opacity': [
'case', 'case',
['boolean', ['feature-state', 'selected'], false], ['boolean', ['feature-state', 'selected'], false], 0.95,
0.95, ['boolean', ['feature-state', 'highlighted'], false], 0.85,
['boolean', ['feature-state', 'highlighted'], false],
0.85,
0 0
], ],
'circle-stroke-color': [ 'circle-stroke-color': [
'case', 'case',
['boolean', ['feature-state', 'selected'], false], ['boolean', ['feature-state', 'selected'], false], '#78350f',
'#78350f', '#b45309'
['boolean', ['feature-state', 'highlighted'], false],
'#b45309',
'transparent'
], ],
'circle-stroke-width': [ 'circle-stroke-width': [
'case', 'case',
['boolean', ['feature-state', 'selected'], false], ['boolean', ['feature-state', 'selected'], false], 4.5,
4.5, ['boolean', ['feature-state', 'highlighted'], false], 3,
['boolean', ['feature-state', 'highlighted'], false],
3,
0 0
], ],
'circle-stroke-opacity': [ 'circle-stroke-opacity': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 1.0,
1.0,
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}"]`); const $row = $table.find(`tbody tr[data-index="${rowIndex}"]`);
if ($row.length) { if ($row.length) {
$row.find('td').addClass('rowhighlight'); $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); }, 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 ], // ne pas rendre de cercles aux vertex des polygones ni aux radars
paint: { paint: {
'circle-radius': [ 'circle-radius': [
'case', 'interpolate', ['linear'], ['zoom'],
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 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],
'interpolate', ['linear'], ['zoom'], 19, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 18, 10]
7, 5,
14, 10,
19, 18
],
[
'interpolate', ['linear'], ['zoom'],
7, 2,
14, 5,
19, 10
]
], ],
// Colour by building usage_type or intersection status // Colour by building usage_type or intersection status
'circle-color': [ 'circle-color': [
@ -1013,22 +1003,11 @@ const _unified_sign_poles_circle = {
filter: ['==', ['get', 'asset_type'], 'signpole'], filter: ['==', ['get', 'asset_type'], 'signpole'],
paint: { paint: {
'circle-radius': [ 'circle-radius': [
'case', 'interpolate', ['linear'], ['zoom'],
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 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],
'interpolate', ['linear'], ['zoom'], 17, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 14 * UNIFIED_SIGN_SYMBOL_SCALE, 5 * UNIFIED_SIGN_SYMBOL_SCALE],
8, 4 * 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]
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
]
], ],
'circle-color': [ 'circle-color': [
'case', 'case',
@ -1042,14 +1021,9 @@ const _unified_sign_poles_circle = {
'#333333' '#333333'
], ],
'circle-stroke-width': [ 'circle-stroke-width': [
'case', 'interpolate', ['linear'], ['zoom'],
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 8, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 4 * UNIFIED_SIGN_SYMBOL_SCALE, 0],
4 * UNIFIED_SIGN_SYMBOL_SCALE, 13, ['case', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 4 * UNIFIED_SIGN_SYMBOL_SCALE, 1 * UNIFIED_SIGN_SYMBOL_SCALE]
[
'interpolate', ['linear'], ['zoom'],
8, 0,
13, 1 * UNIFIED_SIGN_SYMBOL_SCALE
]
] ]
}, },
minzoom: 8, minzoom: 8,
@ -1224,70 +1198,40 @@ const _unified_assets_point_selection = (typeof AssetSymbology !== 'undefined' &
], ],
paint: { paint: {
'circle-radius': [ 'circle-radius': [
'case', 'interpolate', ['linear'], ['zoom'],
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 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],
'case', 13, ['case', ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 17, 20],
['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 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],
'interpolate', ['linear'], ['zoom'], 19, ['case', ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 38, 44],
8, 8, 22, ['case', ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 48, 56]
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
], ],
'circle-color': [ 'circle-color': [
'case', 'case',
['boolean', ['feature-state', 'selected'], false], ['boolean', ['feature-state', 'selected'], false], '#ffd600',
'#ffd600', '#fde047'
['boolean', ['feature-state', 'highlighted'], false],
'#fde047',
'transparent'
], ],
'circle-opacity': [ 'circle-opacity': [
'case', 'case',
['boolean', ['feature-state', 'selected'], false], ['boolean', ['feature-state', 'selected'], false], 0.95,
0.95, ['boolean', ['feature-state', 'highlighted'], false], 0.85,
['boolean', ['feature-state', 'highlighted'], false],
0.85,
0 0
], ],
'circle-stroke-color': [ 'circle-stroke-color': [
'case', 'case',
['boolean', ['feature-state', 'selected'], false], ['boolean', ['feature-state', 'selected'], false], '#78350f',
'#78350f', '#b45309'
['boolean', ['feature-state', 'highlighted'], false],
'#b45309',
'transparent'
], ],
'circle-stroke-width': [ 'circle-stroke-width': [
'case', 'case',
['boolean', ['feature-state', 'selected'], false], ['boolean', ['feature-state', 'selected'], false], 4.5,
4.5, ['boolean', ['feature-state', 'highlighted'], false], 3,
['boolean', ['feature-state', 'highlighted'], false],
3,
0 0
], ],
'circle-stroke-opacity': [ 'circle-stroke-opacity': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 1.0,
1.0,
0 0
], ],
}, },
@ -1306,18 +1250,9 @@ const _unified_assets_point = {
], ],
paint: { paint: {
'circle-radius': [ 'circle-radius': [
'case', 'interpolate', ['linear'], ['zoom'],
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 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]
'interpolate', ['linear'], ['zoom'],
10, 8,
18, 16
],
[
'interpolate', ['linear'], ['zoom'],
10, 4,
18, 8
]
], ],
'circle-color': [ 'circle-color': [
'case', '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_script.js' %}"></script>
<script src="{% static 'common/base_map.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/sign_panels_shared.js' %}?v=20260703c"></script>
<script src="{% static 'assets/asset_symbology.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_v2"></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_v2"></script> <script src="{% static 'assets/unified_index.js' %}?v=20261012_circle_select_v3"></script>
{% endblock script %} {% endblock script %}