mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-16 05:49:16 +02:00
Draw area preset icon frame parametrically in code rather than with external SVG resource
This commit is contained in:
Quincy Morgan
+6
-14
@@ -987,10 +987,15 @@ a.hide-toggle {
|
||||
.preset-icon-line path.line {
|
||||
cursor: inherit;
|
||||
}
|
||||
.preset-icon-line circle.vertex {
|
||||
.preset-icon-line circle.vertex,
|
||||
.preset-icon-fill circle.vertex {
|
||||
fill: #fff;
|
||||
stroke: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.preset-icon-fill circle.midpoint {
|
||||
fill: transparent;
|
||||
stroke: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
/* use a consistent stroke width */
|
||||
.preset-icon-line path.line.stroke {
|
||||
stroke-width: 2 !important;
|
||||
@@ -1018,19 +1023,6 @@ a.hide-toggle {
|
||||
fill: #efefef;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.preset-icon-frame {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
position: absolute;
|
||||
}
|
||||
.preset-icon-frame .icon{
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 12%;
|
||||
width: 76%;
|
||||
height: 76%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.preset-icon {
|
||||
width: 100%;
|
||||
|
||||
+22
-12
@@ -56,6 +56,28 @@ export function uiPresetIcon() {
|
||||
fillEnter.append('path')
|
||||
.attr('d', data)
|
||||
.attr('class', 'line area stroke');
|
||||
|
||||
var r = 2.5;
|
||||
var coordinates = [c1, c2];
|
||||
for (var xIndex in coordinates) {
|
||||
for (var yIndex in coordinates) {
|
||||
fillEnter.append('circle')
|
||||
.attr('class', 'vertex')
|
||||
.attr('cx', coordinates[xIndex])
|
||||
.attr('cy', coordinates[yIndex])
|
||||
.attr('r', r);
|
||||
}
|
||||
}
|
||||
|
||||
var midCoordinates = [[c1, w/2], [c2, w/2], [h/2, c1], [h/2, c2]];
|
||||
for (var index in midCoordinates) {
|
||||
var loc = midCoordinates[index];
|
||||
fillEnter.append('circle')
|
||||
.attr('class', 'midpoint')
|
||||
.attr('cx', loc[0])
|
||||
.attr('cy', loc[1])
|
||||
.attr('r', 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
function renderLine(lineEnter) {
|
||||
@@ -165,18 +187,6 @@ export function uiPresetIcon() {
|
||||
.attr('class', 'line casing ' + tagClasses);
|
||||
|
||||
|
||||
var areaFrame = container.selectAll('.preset-icon-frame')
|
||||
.data((geom === 'area') ? [0] : []);
|
||||
|
||||
areaFrame.exit()
|
||||
.remove();
|
||||
|
||||
areaFrame = areaFrame.enter()
|
||||
.append('div')
|
||||
.attr('class', 'preset-icon-frame')
|
||||
.call(svgIcon('#iD-preset-icon-frame'));
|
||||
|
||||
|
||||
var icon = container.selectAll('.preset-icon')
|
||||
.data([0]);
|
||||
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="45" height="45" viewBox="0 0 45 45">
|
||||
<path d="M7,3.5 C7,5.433 5.433,7 3.5,7 C1.567,7 -0,5.433 -0,3.5 C-0,1.567 1.567,-0 3.5,-0 C5.433,-0 7,1.567 7,3.5 z" fill="#000000" opacity="0.2"/>
|
||||
<path d="M3.5,23.999 C2.963,24 2.467,23.714 2.199,23.25 C1.93,22.786 1.93,22.213 2.199,21.749 C2.467,21.284 2.963,20.999 3.5,20.999 C4.327,21.001 4.998,21.672 4.998,22.499 C4.998,23.327 4.327,23.998 3.5,23.999 z" fill="#000000" opacity="0.2"/>
|
||||
<path d="M7,41.5 C7,43.433 5.433,45 3.5,45 C1.567,45 -0,43.433 -0,41.5 C-0,39.567 1.567,38 3.5,38 C5.433,38 7,39.567 7,41.5 z" fill="#000000" opacity="0.2"/>
|
||||
<path d="M24,41.5 C24,42.328 23.328,43 22.5,43 C21.672,43 21,42.328 21,41.5 C21,40.672 21.672,40 22.5,40 C23.328,40 24,40.672 24,41.5 z" fill="#000000" opacity="0.2"/>
|
||||
<path d="M45,41.5 C45,43.433 43.433,45 41.5,45 C39.567,45 38,43.433 38,41.5 C38,39.567 39.567,38 41.5,38 C43.433,38 45,39.567 45,41.5 z" fill="#000000" opacity="0.2"/>
|
||||
<path d="M41.5,23.999 C40.672,23.999 40.001,23.327 40.001,22.499 C40.001,21.671 40.672,21 41.5,20.999 C42.329,20.999 43.001,21.67 43.001,22.499 C43.001,23.328 42.329,24 41.5,23.999 z" fill="#000000" opacity="0.2"/>
|
||||
<path d="M45,3.5 C45,5.433 43.433,7 41.5,7 C39.567,7 38,5.433 38,3.5 C38,1.567 39.567,0 41.5,0 C43.433,0 45,1.567 45,3.5 z" fill="#000000" opacity="0.2"/>
|
||||
<path d="M24,3.5 C24,4.328 23.328,5 22.5,5 C21.672,5 21,4.328 21,3.5 C21,2.672 21.672,2 22.5,2 C23.328,2 24,2.672 24,3.5 z" fill="#000000" opacity="0.2"/>
|
||||
<path d="M6,3.5 C6,4.881 4.881,6 3.5,6 C2.119,6 1,4.881 1,3.5 C1,2.119 2.119,1 3.5,1 C4.881,1 6,2.119 6,3.5 z" fill="#FFFFFF"/>
|
||||
<path d="M3.5,22 L3.5,22 C3.776,22 4,22.224 4,22.5 L4,22.5 C4,22.776 3.776,23 3.5,23 L3.5,23 C3.224,23 3,22.776 3,22.5 L3,22.5 C3,22.224 3.224,22 3.5,22 z" fill="#FFFFFF" opacity="0.5"/>
|
||||
<path d="M6,41.5 C6,42.881 4.881,44 3.5,44 C2.119,44 1,42.881 1,41.5 C1,40.119 2.119,39 3.5,39 C4.881,39 6,40.119 6,41.5 z" fill="#FFFFFF"/>
|
||||
<path d="M23,41.5 L23,41.5 C23,41.776 22.776,42 22.5,42 L22.5,42 C22.224,42 22,41.776 22,41.5 L22,41.5 C22,41.224 22.224,41 22.5,41 L22.5,41 C22.776,41 23,41.224 23,41.5 z" fill="#FFFFFF" opacity="0.5"/>
|
||||
<path d="M44,41.5 C44,42.881 42.881,44 41.5,44 C40.119,44 39,42.881 39,41.5 C39,40.119 40.119,39 41.5,39 C42.881,39 44,40.119 44,41.5 z" fill="#FFFFFF"/>
|
||||
<path d="M41.5,22 L41.5,22 C41.776,22 42,22.224 42,22.5 L42,22.5 C42,22.776 41.776,23 41.5,23 L41.5,23 C41.224,23 41,22.776 41,22.5 L41,22.5 C41,22.224 41.224,22 41.5,22 z" fill="#FFFFFF" opacity="0.5"/>
|
||||
<path d="M44,3.5 C44,4.881 42.881,6 41.5,6 C40.119,6 39,4.881 39,3.5 C39,2.119 40.119,1 41.5,1 C42.881,1 44,2.119 44,3.5 z" fill="#FFFFFF"/>
|
||||
<path d="M23,3.5 L23,3.5 C23,3.776 22.776,4 22.5,4 L22.5,4 C22.224,4 22,3.776 22,3.5 L22,3.5 C22,3.224 22.224,3 22.5,3 L22.5,3 C22.776,3 23,3.224 23,3.5 z" fill="#FFFFFF" opacity="0.5"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.0 KiB |
Reference in New Issue
Block a user