Draw rectangles (cherry pick)

This commit is contained in:
Bryan Housel
2016-07-31 23:50:57 -04:00
parent e1bdae7800
commit fbce168809
2 changed files with 107 additions and 11 deletions

View File

@@ -125,9 +125,9 @@ _.extend(Way.prototype, {
tagged.oneway = this.isOneWay();
tagged.lanes = {};
if (this.tags.lanes) tagged.lanes.count = this.tags.lanes;
if (this.tags['lanes:forward']) tagged.lanes.forward = this.tags['lanes:forward'];
if (this.tags['lanes:backward']) tagged.lanes.backward = this.tags['lanes:backward'];
if (this.tags.lanes) tagged.lanes.count = parseInt(this.tags.lanes);
if (this.tags['lanes:forward']) tagged.lanes.forward = parseInt(this.tags['lanes:forward']);
if (this.tags['lanes:backward']) tagged.lanes.backward = parseInt(this.tags['lanes:backward']);
return {
defaults: {

View File

@@ -1,32 +1,128 @@
export function lanes(field, context) {
var dispatch = d3.dispatch('change'),
LANE_WIDTH = 40,
LANE_HEIGHT = 200,
wayID,
laneData;
function processData(raw) {
var laneCount = raw.tagged.lanes.count || raw.defaults.lanes.count;
var lanesArray = [];
for (var i = 0; i < laneCount; i++) {
lanesArray.push({ key: i });
}
if (raw.tagged.oneway) {
lanesArray.forEach(function(l) {
l.forward = true;
l.backward = false;
});
} else {
var countForward = raw.tagged.lanes.forward || 0;
var countBackward = raw.tagged.lanes.backward || 0;
if (countForward + countBackward === 0) {
countForward = laneCount/2;
countBackward = laneCount/2;
}
for (i = 0; i < countForward; i++) {
lanesArray[i].forward = true;
lanesArray[i].backward = false;
}
for (i = 0; i < countBackward; i++) {
lanesArray[countForward + i].forward = false;
lanesArray[countForward + i].backward = true;
}
}
return lanesArray;
}
function lanes(selection) {
laneData = processData(context.entity(wayID).lanes());
var laneCount = laneData.length;
// if form field is hidden or has detached from dom, clean up.
if (!d3.select('.inspector-wrap.inspector-hidden').empty() || !selection.node().parentNode) {
selection.call(lanes.off);
return;
}
laneData = context.entity(wayID).lanes();
var wrap = selection.selectAll('.preset-input-wrap')
.data([0]);
var enter = wrap.enter()
wrap.enter()
.append('div')
.attr('class', 'preset-input-wrap');
var surface = wrap.selectAll('.surface')
.data([0]);
var d = wrap.dimensions();
var freeSpace = d[0] - laneCount*LANE_WIDTH*1.5 + LANE_WIDTH*0.5;
surface.enter()
.append('svg')
.attr('width', d[0])
.attr('height', 300)
.attr('class', 'surface');
var lanesSelection = surface.selectAll('.lanes')
.data([0]);
lanesSelection.enter()
.append('g')
.attr('class', 'lanes');
lanesSelection
.attr('transform', function () {
return 'translate(' + (freeSpace/2)+ ', 0)';
});
var lane = lanesSelection.selectAll('.lane')
.data(laneData);
var enter = lane.enter()
.append('g')
.attr('class', 'lane');
enter
.append('div')
.attr('class', 'lane-count')
.append('span');
.append('g')
.append('rect')
.attr('y', 50)
.attr('width', LANE_WIDTH)
.attr('height', LANE_HEIGHT);
selection.selectAll('.lane-count')
.text(laneData.tagged.lanes.count || laneData.defaults.lanes.count);
enter
.append('g')
.attr('class', 'forward')
.append('text')
.attr('y', 40)
.attr('x', 14)
.text('▲');
enter
.append('g')
.attr('class', 'backward')
.append('text')
.attr('y', 40)
.attr('x', 14)
.text('▼');
lane.exit().remove();
lane
.attr('transform', function(d) {
return 'translate(' + (LANE_WIDTH*d.key*1.5)+ ', 0)';
});
lane.select('.forward')
.style('visibility', function(d) { return d.forward ? 'visible' : 'hidden'; });
lane.select('.backward')
.style('visibility', function(d) { return d.backward ? 'visible' : 'hidden'; });
}