Cleanup, work on style

This commit is contained in:
Tom MacWright
2012-10-18 14:03:15 -04:00
parent 931b862995
commit 33fdccf3a6
3 changed files with 79 additions and 48 deletions

View File

@@ -10,46 +10,49 @@ declare("iD.controller.edit.SelectedWayNode", [iD.controller.edit.EditBaseState]
node: null,
way: null,
constructor:function(_node,_way) {
constructor:function(node, way) {
// summary: In 'Edit object' mode and a node in a way is selected.
this.node=_node;
this.way=_way;
this.node = node;
this.way = way;
},
enterState:function() {
var map=this.controller.map;
map.getUI(this.way ).setStateClass('shownodes').redraw();
map.getUI(this.way).setStateClass('shownodes').redraw();
map.getUI(this.node).setStateClass('selected' ).redraw();
this.openEditorTooltip(map.lon2screen(this.node.lon),
map.lat2screen(this.node.lat), this.node);
},
exitState:function() {
var map=this.controller.map;
map.getUI(this.way ).resetStateClass('shownodes').redraw();
map.getUI(this.way).resetStateClass('shownodes').redraw();
map.getUI(this.node).resetStateClass('selected' ).redraw();
this.closeEditorTooltip();
},
processMouseEvent:function(event,entityUI) {
var entity=entityUI ? entityUI.entity : null;
var entityType=entity ? entity.entityType : null;
this.closeEditorTooltip();
},
processMouseEvent:function(event,entityUI) {
if (event.type !== 'click') return;
var entity = entityUI ? entityUI.entity : null;
var entityType = entity ? entity.entityType : null;
switch (entityType) {
case null:
return new iD.controller.edit.NoSelection();
case 'node':
var ways = entity.entity.parentWays();
if (entity.entity.hasParent(this.way)) {
return new iD.controller.edit.SelectedWayNode(entity,this.way);
} else if (!ways.length) {
return new iD.controller.edit.SelectedPOINode(entity);
} else {
return new iD.controller.edit.SelectedWayNode(entity,ways[0]);
}
break;
case 'way':
return new iD.controller.edit.SelectedWay(entityUI.entity, event);
}
return this;
}
if (event.type=='click') {
switch (entityType) {
case null:
return new iD.controller.edit.NoSelection();
case 'node':
var ways=entity.parentWays();
if (entity.hasParent(this.way)) { return new iD.controller.edit.SelectedWayNode(entity,this.way); }
else if (!ways.length) { return new iD.controller.edit.SelectedPOINode(entity); }
else { return new iD.controller.edit.SelectedWayNode(entity,ways[0]); }
break;
case 'way':
return new iD.controller.edit.SelectedWay(entityUI.entity, event);
}
}
return this;
}
});
// ----------------------------------------------------------------------

View File

@@ -41,29 +41,57 @@ declare("iD.renderer.NodeUI", [iD.renderer.EntityUI], {
w = p.icon_width ? p.icon_width : 16;
h = p.icon_height ? p.icon_height: w;
// Draw icon
var shape;
switch (p.icon_image) {
case 'square':shape=this.targetGroup('stroke',p.sublayer).createRect({ x:x-w/2, y:y-h/2, width:w, height:h }); break;
case 'circle':shape=this.targetGroup('stroke',p.sublayer).createCircle({ cx:x, cy:y, r:w }); break;
default:shape=this.targetGroup('stroke',p.sublayer).createImage({ width:w, height:h, x: x-w/2, y: y-h/2, src:p.icon_image }); break;
}
switch (p.icon_image) {
case 'square':
case 'circle': shape.setStroke(s.shapeStrokeStyler()).setFill(s.shapeFillStyler()); break;
// Draw icon
var shape;
if (p.icon_image === 'square') shape = this.targetGroup('stroke', p.sublayer)
.createRect({
x: x-w/2,
y: y-h/2,
width: w,
height: h
});
else if (p.icon_image === 'circle') shape = this.targetGroup('stroke', p.sublayer)
.createCircle({
cx: x,
cy: y,
r: w
});
else shape = this.targetGroup('stroke',p.sublayer)
.createImage({
width: w,
height: h,
x: x-w/2,
y: y-h/2,
src: p.icon_image
});
if (p.icon_image === 'square' || p.icon_image === 'circle') {
shape.setStroke(s.shapeStrokeStyler()).setFill(s.shapeFillStyler());
}
this.recordSprite(shape);
// Add text label
// Add hit-zone
var hit;
switch (p.icon_image) {
case 'circle': hit=this.targetGroup('hit').createCircle({ cx:x, cy:y, r:w }); break;
default: hit=this.targetGroup('hit').createRect({ x:x-w/2, y:y-h/2, width:w, height: h}); break;
}
hit.setFill([0,1,0,0]).setStroke( { width:2, color:[0,0,0,0] } );
if (p.icon_image === 'circle') {
hit = this.targetGroup('hit').createCircle({
cx: x,
cy: y,
r: w
});
} else {
hit = this.targetGroup('hit').createRect({
x: x-w/2,
y: y-h/2,
width: w,
height: h
});
}
hit.setFill([0,1,0,0]).setStroke({
width:2,
color:[0,0,0,0]
});
this.recordSprite(hit);
hit.source= this;
hit.source = this;
hit.connect("onclick", _.bind(this.entityMouseEvent, this));
hit.connect("onmousedown", _.bind(this.entityMouseEvent, this));
hit.connect("onmouseup", _.bind(this.entityMouseEvent, this));

View File

@@ -137,15 +137,15 @@ way .highlighted { color: pink; }
way !:drawn { z-index:10; width: 1; color: black; }
way::highlight :hover { z-index: 2; width: eval('_width+10'); color: #ffff99; }
way::highlight :selected { z-index: 2; width: eval('_width+10'); color: yellow; opacity: 0.7;}
way::highlight :selected { z-index: 2; width: eval('_width+5'); color: #FFF68D; }
node :selectedway { z-index: 9; icon-image: square; icon-width: 8; color: red; layer: 5; }
node :selectedway { z-index: 9; icon-image: circle; icon-width: 7; color: #DD4848; layer: 5; }
node::junction :junction :selectedway, node::junction :junction :hoverway { z-index: 8; icon-image: square; icon-width: 11; casing-color: black; casing-width: 1; layer: 5; }
node !:drawn :poi { z-index: 2; icon-image: circle; icon-width: 4; color: green; casing-color: black; casing-width: 1; }
node !:drawn :poi { z-index: 2; icon-image: circle; icon-width: 6; color: #98D1FD; casing-color: #135485; casing-width: 2; }
node :hoverway { z-index: 9; icon-image: square; icon-width: 7; color: blue; layer: 5; }
node::highlight :selected { z-index: 1; icon-image: square; icon-width: eval('_width+10'); color: yellow; }
node::highlight :selected { z-index: 1; icon-image: circle; icon-width: eval('_width+5'); color: #FFF68D; }
/* Descendant selectors provide an easy way to style relations: this example means "any way
which is part of a relation whose type=route". */