CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-29 11:21:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Reorganize, update notes

Browse Source
This commit is contained in:
Tom MacWright
2012-11-02 16:00:11 -04:00
parent 48c740eb43
commit f7d881ad60
17 changed files with 130 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
NOTES.md
+12
View File
@@ -46,6 +46,18 @@ version, it is like:
}
```
Issues:
* [Performance seems to suffer with Object.freeze](http://stackoverflow.com/questions/8435080/any-performance-benefit-to-locking-down-javascript-objects).
The alternative to this approach is changing the object graph itself and keeping
the change data in another representation, like an undo stack.
At the very least, changes need to have:
* A name ('Changed 2 Nodes')
* Changes (whether in discrete versions or a 'change object' that can be applied and unapplied)
## Performance
Main performance concerns of iD:
css/app.css
+7 -6
View File
@@ -107,8 +107,8 @@ table td {
width:100px;
cursor:pointer;
display:inline-block;
background:#fff;
color:#555;
background:#ddd;
color:#222;
font:bold 19px/30px 'Helvetica Neue', sans-serif;
border:0;
border-right:1px solid #222;
@@ -118,6 +118,11 @@ table td {
margin:0;
}
#modebuttons button:hover {
background:#eee;
color:#000;
}
#modebuttons button.mini,
#modebuttons button.mini {
width:50px;
@@ -131,10 +136,6 @@ table td {
margin:0;
}
#modebuttons button:hover {
background:#eee;
}
#zoombuttons button {
cursor:pointer;
width:30px;
index.html
+40 -35
View File
@@ -1,27 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset='utf-8'>
<title>iD</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/map.css">
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="initial-scale=1.0 maximum-scale=1.0">
<link rel='stylesheet' href='css/reset.css'>
<link rel='stylesheet' href='css/map.css'>
<link rel='stylesheet' href='css/app.css'>
<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>
</head>
<body>
<div id="map"></div>
<div id='map'></div>
<div id='modebuttons'>
<button id='add-place'>
+ Place</button><!-- <button id="add-road">
+ Road</button><button id="add-area">
+ Area</button><button class='mini' id="undo">
&larr;</button><button class='mini' id="redo">
&rarr;</button>--><form action='GET' id='geocode-form'><input type='text' id='geocode-location' placeholder='find a place' />
<button id='place'>
+ Place</button><button id='road'>
+ Road</button><button id='area'>
+ Area</button><button class='mini' id='undo'>
&larr;</button><button class='mini' id='redo'>
&rarr;</button><form action='GET' id='geocode-form'><input type='text' id='geocode-location' placeholder='find a place' />
</form>
</div>
<div id="zoombuttons">
<button id="zoomIn">+</button><button id="zoomOut">&ndash;</button>
<div id='zoombuttons'>
<button id='zoomIn'>+</button><button id='zoomOut'>&ndash;</button>
</div>
<div class='inspector-wrap'></div>
@@ -29,32 +29,36 @@
<p>Work in progress: <a href='http://www.geowiki.com/'>introduction</a>,
<a href='http://github.com/systemed/iD'>code</a>,
<a href='http://www.geowiki.com/docs'>docs</a>.
Imagery <a href="http://opengeodata.org/microsoft-imagery-details">&copy; 2012</a> Bing, GeoEye, Getmapping, Intermap, Microsoft.</p>
Imagery <a href='http://opengeodata.org/microsoft-imagery-details'>&copy; 2012</a> Bing, GeoEye, Getmapping, Intermap, Microsoft.</p>
</div>
<script type="text/javascript" src="js/lib/underscore-min.js"></script>
<script type="text/javascript" src="js/lib/d3.v2.js"></script>
<script type="text/javascript" src="js/lib/jxon.js"></script>
<script type="text/javascript" src="js/lib/uuid.js"></script>
<script type='text/javascript' src='js/lib/underscore-min.js'></script>
<script type='text/javascript' src='js/lib/d3.v2.js'></script>
<script type='text/javascript' src='js/lib/jxon.js'></script>
<script type='text/javascript' src='js/lib/uuid.js'></script>
<script type="text/javascript" src="js/iD/id.js"></script>
<script type="text/javascript" src="js/iD/Util.js"></script>
<script type="text/javascript" src="js/iD/renderer/style.js"></script>
<script type='text/javascript' src='js/iD/id.js'></script>
<script type='text/javascript' src='js/iD/Util.js'></script>
<script type='text/javascript' src='js/iD/renderer/style.js'></script>
<script type="text/javascript" src="js/iD/renderer/tiles.js"></script>
<script type="text/javascript" src="js/iD/renderer/Map.js"></script>
<script type="text/javascript" src="js/iD/renderer/hash.js"></script>
<script type="text/javascript" src="js/iD/renderer/markers.js"></script>
<script type="text/javascript" src="js/iD/ui/Inspector.js"></script>
<script type='text/javascript' src='js/iD/renderer/tiles.js'></script>
<script type='text/javascript' src='js/iD/renderer/Map.js'></script>
<script type='text/javascript' src='js/iD/renderer/hash.js'></script>
<script type='text/javascript' src='js/iD/renderer/markers.js'></script>
<script type='text/javascript' src='js/iD/ui/Inspector.js'></script>
<script type="text/javascript" src="js/iD/Entity.js"></script>
<script type="text/javascript" src="js/iD/GeoJSON.js"></script>
<script type="text/javascript" src="js/iD/XML.js"></script>
<script type="text/javascript" src="js/iD/Node.js"></script>
<script type="text/javascript" src="js/iD/Relation.js"></script>
<script type="text/javascript" src="js/iD/Way.js"></script>
<script type="text/javascript" src="js/iD/Connection.js"></script>
<script type="text/javascript" src="js/iD/Graph.js"></script>
<script type='text/javascript' src='js/iD/actions/actions.js'></script>
<script type='text/javascript' src='js/iD/actions/CreatePOI.js'></script>
<script type='text/javascript' src='js/iD/format/GeoJSON.js'></script>
<script type='text/javascript' src='js/iD/format/XML.js'></script>
<script type='text/javascript' src='js/iD/graph/Node.js'></script>
<script type='text/javascript' src='js/iD/graph/Relation.js'></script>
<script type='text/javascript' src='js/iD/graph/Way.js'></script>
<script type='text/javascript' src='js/iD/graph/Graph.js'></script>
<script type='text/javascript' src='js/iD/Connection.js'></script>
<script type='text/javascript' src='js/iD/UI.js'></script>
<script>
var map = iD.Map(document.getElementById('map')).setZoom(18).setCenter({
@@ -65,6 +69,7 @@
var m = d3.select('#map');
iD.Hash().map(map);
iD.UI.bind();
window.onresize = function() {
map.setSize(m.node().offsetWidth,
js/iD/Connection.js
-16
View File
@@ -10,20 +10,6 @@ iD.Connection = function(graph) {
return graph.nodes;
}
function intersects(extent) {
// summary: Find all drawable entities that are within a given bounding box.
// Each one is an array of entities.
return graph.nodes.filter(function(e, id) {
if (e.lon !== undefined) {
return (e.lon >= extent[0][0]) &&
(e.lon <= extent[1][0]) &&
(e.lat <= extent[0][1]) &&
(e.lat >= extent[1][1]);
} else {
return e.intersects(extent);
}
});
}
// Request data within the bbox from an external OSM server.
function loadFromAPI(box, callback) {
@@ -93,7 +79,6 @@ iD.Connection = function(graph) {
for (i = 0; i < ways.length; i++) graph.insert(objectData(ways[i]));
for (i = 0; i < relations.length; i++) graph.insert(objectData(relations[i]));
for (i = 0; i < nodes.length; i++) graph.insert(objectData(nodes[i]));
graph.build();
callback(null);
};
}
@@ -103,7 +88,6 @@ iD.Connection = function(graph) {
connection.loadFromAPI = loadFromAPI;
connection.loadFromURL = loadFromURL;
connection.apiURL = apiURL;
connection.intersects = intersects;
return connection;
};
js/iD/Graph.js
-75
View File
@@ -1,75 +0,0 @@
iD.Graph = function() {
};
iD.Graph.prototype = {
// OSM IDS -> UIDs
uid: {},
// UID -> OSM ID
oid: {},
// UID -> index in nodes
index: {},
// List of nodes
nodes: [],
insert: function(o) {
var obj;
// Do not reinsert OSM objects
if (this.uid[o.id]) return;
if (o.type === 'node') {
obj = {
type: 'node',
id: o.id,
uid: uuid.v4(),
lat: o.lat,
lon: o.lon,
tags: o.tags
};
} else if (o.type === 'way') {
obj = new iD.Way(
o.id,
uuid.v4(),
o.nodes,
o.tags);
} else if (o.type === 'relation') {
obj = new iD.Relation(
o.id,
uuid.v4(),
o.members,
o.tags);
}
if (!obj) return;
this.nodes.push(obj);
this.uid[obj.id] = obj.uid;
this.oid[obj.uid] = obj.id;
this.index[obj.uid] = this.nodes.length - 1;
},
build: function() {
for (var i = 0; i < this.nodes.length; i++) {
var n = this.nodes[i];
if (n.type === 'way') {
// Fix references to osm ids with references
// to UIDs
for (var j = 0; j < n.children.length; j++) {
var uid = this.uid[n.children[j]];
if (uid) {
n.children[j] = uid;
}
}
}
}
},
fetch: function(uid) {
var obj = _.clone(this.nodes[this.index[uid]]);
if (obj && obj.children && obj.children.length) {
var children = [];
for (var i = 0; i < obj.children.length; i++) {
children.push(this.nodes[this.index[obj.children[i]]]);
}
obj.children = children;
}
return obj;
}
};
js/iD/UI.js
+13
View File
@@ -0,0 +1,13 @@
iD.UI = {};
iD.UI.bind = function() {
var buttons = {
place: d3.select('button#place'),
area: d3.select('button#area'),
road: d3.select('button#road')
};
for (var mode in buttons) {
}
};
js/iD/actions/CreatePOI.js
+3
View File
@@ -0,0 +1,3 @@
iD.actions.createPoi = function() {
};
js/iD/actions/CreatePOIAction.js
-49
View File
@@ -1,49 +0,0 @@
// iD/actions/CreatePOIAction.js
define(['dojo/_base/declare', 'iD/actions/UndoableAction'],
function(declare) {
// ----------------------------------------------------------------------
// CreatePOIAction class
declare("iD.actions.CreatePOIAction", [iD.actions.CompositeUndoableAction], {
newNode: null,
tags: null,
lat: NaN,
lon: NaN,
connection: null,
constructor: function(connection, tags, lat, lon) {
// summary: Create a new node and set it as a POI. Used by drag-and-drop. Note that the
// node is remembered, so that on redo we can just reinstate it.
this.setName('Create POI: ' + iD.Util.friendlyName(tags));
this.connection = connection;
this.tags = tags;
this.lat = lat;
this.lon = lon;
},
run: function() {
if (this.newNode === null) {
this.newNode = this.connection.doCreateNode(this.tags,
this.lat, this.lon,
this.push.bind(this));
}
this.connection.registerPOI(this.newNode);
return true;
},
undo: function() {
this.connection.unregisterPOI(this.newNode);
return true;
},
getNode: function() {
return this.newNode;
}
});
// ----------------------------------------------------------------------
// End of module
});
js/iD/actions/actions.js
+1
View File
@@ -0,0 +1 @@
iD.actions = {};
js/iD/GeoJSON.js → js/iD/format/GeoJSON.js
View File
js/iD/XML.js → js/iD/format/XML.js
View File
js/iD/Entity.js → js/iD/graph/Entity.js
View File
js/iD/graph/Graph.js
+49
View File
@@ -0,0 +1,49 @@
iD.Graph = function() {
};
iD.Graph.prototype = {
index: {},
insert: function(o) {
var obj;
// Do not reinsert OSM objects
if (this.index[o.id]) return;
if (o.type === 'node') {
obj = {
type: 'node',
id: o.id,
uid: uuid.v4(),
lat: o.lat,
lon: o.lon,
tags: o.tags
};
} else if (o.type === 'way') {
obj = new iD.Way(
o.id,
uuid.v4(),
o.nodes,
o.tags);
} else if (o.type === 'relation') {
obj = new iD.Relation(
o.id,
uuid.v4(),
o.members,
o.tags);
}
if (!obj) return;
this.index[obj.id] = [obj];
},
intersects: function(version, extent) {
// summary: Find all drawable entities that are within a given bounding box.
// Each one is an array of entities.
var items = [];
for (var i in this.index) {
if (this.index[i][version]) {
items.push(this.index[i][version]);
}
}
return items;
}
};
js/iD/Node.js → js/iD/graph/Node.js
View File
js/iD/Relation.js → js/iD/graph/Relation.js
View File
js/iD/Way.js → js/iD/graph/Way.js
View File
js/iD/renderer/Map.js
+5 -3
View File
@@ -8,6 +8,8 @@ iD.Map = function(elem) {
return;
}
var version = 0;
var map = {},
width, height,
dispatch = d3.dispatch('move'),
@@ -42,11 +44,11 @@ iD.Map = function(elem) {
// geo
linegen = d3.svg.line()
.x(function(d) {
var node = connection.graph.fetch(d);
var node = connection.graph.index[d][version];
return projection([node.lon, node.lat])[0];
})
.y(function(d) {
var node = connection.graph.fetch(d);
var node = connection.graph.index[d][version];
return projection([node.lon, node.lat])[1];
}),
// Abstract linegen so that it pulls from `.children`. This
@@ -94,7 +96,7 @@ iD.Map = function(elem) {
var tileclient = iD.Tiles(tilegroup, projection);
function drawVector() {
var all = connection.intersects(getExtent());
var all = graph.intersects(version, getExtent());
var ways = all.filter(function(a) {
return a.type === 'way' && !a.isClosed();