CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-12 16:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix size of touch targets for address shields

Browse Source
This commit is contained in:
Martin Raifer
2025-04-23 12:29:35 +02:00
parent 1a5bc72327
commit 2fccd798dc
1 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
modules/svg/points.js
View File

@@ -11,20 +11,16 @@ import { textWidth, isAddressPoint } from './labels';
export function svgPoints(projection, context) {
function markerPath(selection, klass) {
const addressShieldWidth = d => {
const width = textWidth(d.tags['addr:housenumber'] || d.tags['addr:housename'] || '', 10, selection.node().parentElement);
return clamp(width, 10, 34) + 8;
};
selection
.attr('class', klass)
.attr('transform', d => isAddressPoint(d.tags)
? `translate(-${addressShieldWidth(d)/2}, -8)`
? `translate(-${addressShieldWidth(d, selection)/2}, -8)`
: 'translate(-8, -23)')
.attr('d', d => {
if (!isAddressPoint(d.tags)) {
return 'M 17,8 C 17,13 11,21 8.5,23.5 C 6,21 0,13 0,8 C 0,4 4,-0.5 8.5,-0.5 C 13,-0.5 17,4 17,8 z';
}
const shieldWidth = addressShieldWidth(d);
const shieldWidth = addressShieldWidth(d, selection);
return `M ${shieldWidth},8 C ${shieldWidth},15 ${shieldWidth-2},16 ${shieldWidth-8},16 L 8,16 C 2,16 0,15 0,8 C 0,2 2,0 8,0 L ${shieldWidth-8},0 C ${shieldWidth-2},0 ${shieldWidth},2 ${shieldWidth},8 z`;
});
}
@@ -33,6 +29,10 @@ export function svgPoints(projection, context) {
return b.loc[1] - a.loc[1];
}
function addressShieldWidth(d, selection) {
const width = textWidth(d.tags['addr:housenumber'] || d.tags['addr:housename'] || '', 10, selection.node().parentElement);
return clamp(width, 10, 34) + 8;
};
// Avoid exit/enter if we're just moving stuff around.
// The node will get a new version but we only need to run the update selection.
@@ -57,15 +57,16 @@ export function svgPoints(projection, context) {
id: node.id,
properties: {
target: true,
entity: node
entity: node,
isAddr: isAddressPoint(node.tags)
},
geometry: node.asGeoJSON()
});
});
var targets = selection.selectAll('.point.target')
.filter(function(d) { return filter(d.properties.entity); })
.data(data, function key(d) { return d.id; });
.filter(d => filter(d.properties.entity))
.data(data, d => fastEntityKey(d.properties.entity));
// exit
targets.exit()
@@ -74,12 +75,12 @@ export function svgPoints(projection, context) {
// enter/update
targets.enter()
.append('rect')
.attr('x', -10)
.attr('y', -26)
.attr('width', 20)
.attr('height', 30)
.merge(targets)
.attr('x', d => d.properties.isAddr ? -addressShieldWidth(d.properties.entity, selection) / 2 : -10)
.attr('y', d => d.properties.isAddr ? -8 : -26)
.attr('width', d => d.properties.isAddr ? addressShieldWidth(d.properties.entity, selection) : 20)
.attr('height', d => d.properties.isAddr ? 16 : 30)
.attr('class', function(d) { return 'node point target ' + fillClass + d.id; })
.merge(targets)
.attr('transform', getTransform);
}