renkan: comparison client/js/paper-renderer.js

Mercurial Mercurial > renkan / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

client/js/paper-renderer.js

changeset 23	70c8af9b44ec
parent 21	b43dd87f7ffa
child 25	b5ada3bb8e53

equal deleted inserted replaced

-:948283342245
+:70c8af9b44ec
 return {
 left: (this._EDITOR_PADDING + Math.min(_left, _right)),
 top: (this._EDITOR_PADDING + _top)
 }
 },
-sector : function(_ctrl, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc) {
+sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc) {
 var _startRads = _startAngle * Math.PI / 180,
 _endRads = _endAngle * Math.PI / 180,
 _img = new Image(),
 _span = _endRads - _startRads,
 _k = .0879 * _span,
 var _path = new paper.Path();
 _path.add.apply(_path, _segments);
 _path.fillColor = "#333333";
 _path.opacity = .5;
 _path.closed = true;
-_path.__controller = _ctrl;
+_path.__representation = _repr;
 var _visible = false,
 _restPos = new paper.Point(-200, -200),
 _grp = new paper.Group([_path]),
 _delta = _grp.position,
 _imgdelta = new paper.Point([_centerX, _centerY]),
 _img.src = _imgsrc;
 return _res
 }
 }
-Rkns.Renderer._BaseController = function(_renderer, _element) {
+Rkns.Renderer._BaseRepresentation = function(_renderer, _model) {
 if (typeof _renderer !== "undefined") {
-this.id = Rkns.Utils.getUID('controller');
+this.renderer = _renderer;
-this._renderer = _renderer;
+this.project = _renderer.renkan.project;
-this._project = _renderer._project;
+this.model = _model;
-this._element = _element;
+}
-this._element.__controller = this;
+}
-}
-}
+Rkns.Renderer._BaseRepresentation.prototype.select = function() {}
-Rkns.Renderer._BaseController.prototype.select = function() {}
+Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {}
-Rkns.Renderer._BaseController.prototype.unselect = function() {}
+Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {}
-Rkns.Renderer._BaseController.prototype.mouseup = function() {}
+Rkns.Renderer._BaseRepresentation.prototype.destroy = function() {}
-Rkns.Renderer._BaseController.prototype.destroy = function() {}
+Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
-Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 Rkns.Renderer.Node.prototype._init = function() {
-this._renderer.node_layer.activate();
+this.renderer.node_layer.activate();
 this.type = "Node";
 this.circle = new paper.Path.Circle([0, 0], Rkns._NODE_RADIUS);
 this.circle.fillColor = '#ffffff';
-this.circle.__controller = this;
+this.circle.__representation = this;
 this.title = new paper.PointText([0,0]);
 this.title.characterStyle = {
 fontSize: Rkns._NODE_FONT_SIZE,
 fillColor: 'black'
 };
-this.edit_button = new Rkns.Renderer.NodeEditButton(this._renderer, {});
+this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, {});
-this.edit_button.node_controller = this;
+this.edit_button.node_representation = this;
-this.remove_button = new Rkns.Renderer.NodeRemoveButton(this._renderer, {});
+this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, {});
-this.remove_button.node_controller = this;
+this.remove_button.node_representation = this;
-this.link_button = new Rkns.Renderer.NodeLinkButton(this._renderer, {});
+this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, {});
-this.link_button.node_controller = this;
+this.link_button.node_representation = this;
 this.title.paragraphStyle.justification = 'center';
-this.title.__controller = this;
+this.title.__representation = this;
 }
 Rkns.Renderer.Node.prototype.redraw = function() {
-var _model_coords = new paper.Point(this._element.position);
+var _model_coords = new paper.Point(this.model.get("position"));
-this.paper_coords = this._renderer.toPaperCoords(_model_coords);
+this.paper_coords = this.renderer.toPaperCoords(_model_coords);
 this.circle.position = this.paper_coords;
-this.title.content = this._element.title;
+this.title.content = this.model.get("title");
 this.title.position = this.paper_coords.add([0, 2 * Rkns._NODE_RADIUS]);
-this.circle.strokeColor = this._element.created_by.color;
+this.circle.strokeColor = this.model.get("created_by").get("color");
 this.edit_button.moveTo(this.paper_coords);
 this.remove_button.moveTo(this.paper_coords);
 this.link_button.moveTo(this.paper_coords);
 }
 Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
-var _coords = this._renderer.toModelCoords(this.paper_coords.add(_delta)),
+var _coords = this.renderer.toModelCoords(this.paper_coords.add(_delta)),
 _data = {
 position: {
 x: _coords.x,
 y: _coords.y
 }
 };
-this._project.updateElement(this.type, this._element, _data, Rkns._SAVE);
+this.model.set(_data);
-this._renderer.redraw();
+this.renderer.redraw();
 }
 Rkns.Renderer.Node.prototype.openEditor = function() {
-this._renderer.removeControllersOfType("editor");
+this.renderer.removeRepresentationsOfType("editor");
-var _editor = this._renderer.addController("NodeEditor",{});
+var _editor = this.renderer.addRepresentation("NodeEditor",null);
-_editor.node_controller = this;
+_editor.node_representation = this;
 _editor.redraw();
 }
 Rkns.Renderer.Node.prototype.select = function() {
 this.circle.strokeWidth = 3;
 }
 this.circle.strokeWidth = 1;
 }
 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
-if (!this._renderer.is_dragging) {
+if (!this.renderer.is_dragging) {
 this.openEditor();
 }
 }
 Rkns.Renderer.Node.prototype.destroy = function(_event) {
 this.title.remove();
 }
 /* */
-Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.Edge.prototype._init = function() {
-this._renderer.edge_layer.activate();
+this.renderer.edge_layer.activate();
 this.type = "Edge";
-this.from_controller = this._element.from.__controller;
+this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from"));
-this.to_node_controller = this._element.to.__controller;
+this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));
 this.line = new paper.Path();
 this.line.add([0,0],[0,0]);
-this.line.__controller = this;
+this.line.__representation = this;
 this.arrow = new paper.Path();
 this.arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);
-this.arrow.__controller = this;
+this.arrow.__representation = this;
 this.text = new paper.PointText();
 this.text.characterStyle = {
 fontSize: Rkns._EDGE_FONT_SIZE,
 fillColor: 'black'
 };
 this.text.paragraphStyle.justification = 'center';
-this.text.__controller = this;
+this.text.__representation = this;
 this.text_angle = 0;
 this.arrow_angle = 0;
-this.edit_button = new Rkns.Renderer.EdgeEditButton(this._renderer, {});
+this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, {});
-this.edit_button.edge_controller = this;
+this.edit_button.edge_representation = this;
-this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this._renderer, {});
+this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, {});
-this.remove_button.edge_controller = this;
+this.remove_button.edge_representation = this;
 }
 Rkns.Renderer.Edge.prototype.redraw = function() {
-var _p0o = this.from_controller.paper_coords,
+var _p0o = this.from_representation.paper_coords,
-_p1o = this.to_node_controller.paper_coords,
+_p1o = this.to_representation.paper_coords,
 _v = _p1o.subtract(_p0o),
 _r = _v.length,
 _u = _v.divide(_r),
 _delta = new paper.Point([- _u.y, _u.x]).multiply( 4 ),
 _p0 = _p0o.add(_delta), /* Adding a 4 px difference */
 _p1 = _p1o.add(_delta), /* to differentiate inbound and outbound links */
 _a = _v.angle,
-_color = this._element.created_by.color;
+_color = this.model.get("created_by").get("color");
 this.paper_coords = _p0.add(_p1).divide(2);
 this.line.strokeColor = _color;
 this.line.segments[0].point = _p0;
 this.line.segments[1].point = _p1;
 this.arrow.rotate(_a - this.arrow_angle);
 }
 if (_a < -90) {
 _a += 180;
 }
 this.text.rotate(_a - this.text_angle);
-this.text.content = this._element.title;
+this.text.content = this.model.get("title");
 this.text.position = this.paper_coords;
 this.text_angle = _a;
 this.edit_button.moveTo(this.paper_coords);
 this.remove_button.moveTo(this.paper_coords);
 }
 Rkns.Renderer.Edge.prototype.openEditor = function() {
-this._renderer.removeControllersOfType("editor");
+this.renderer.removeRepresentationsOfType("editor");
-var _editor = this._renderer.addController("EdgeEditor",{});
+var _editor = this.renderer.addRepresentation("EdgeEditor",null);
-_editor.edge_controller = this;
+_editor.edge_representation = this;
 _editor.redraw();
 }
 Rkns.Renderer.Edge.prototype.select = function() {
 this.line.strokeWidth = 3;
 }
 this.line.strokeWidth = 1;
 }
 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
-if (!this._renderer.is_dragging) {
+if (!this.renderer.is_dragging) {
 this.openEditor();
 }
 }
 Rkns.Renderer.Edge.prototype.paperShift = function(_delta) {
-this.from_controller.paperShift(_delta);
+this.from_representation.paperShift(_delta);
-this.to_node_controller.paperShift(_delta);
+this.to_representation.paperShift(_delta);
-this._renderer.redraw();
+this.renderer.redraw();
 }
 Rkns.Renderer.Edge.prototype.destroy = function() {
 this.line.remove();
 this.arrow.remove();
 this.remove_button.destroy();
 }
 /* */
-Rkns.Renderer.TempEdge = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+Rkns.Renderer.TempEdge = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.TempEdge.prototype._init = function() {
-this._renderer.edge_layer.activate();
+this.renderer.edge_layer.activate();
 this.type = "temp-edge";
-var _color = this._project.current_user.color;
+var _color = this.project.get("users").get(this.renderer.renkan.current_user).get("color");
 this.line = new paper.Path();
 this.line.strokeColor = _color;
 this.line.add([0,0],[0,0]);
-this.line.__controller = this;
+this.line.__representation = this;
 this.arrow = new paper.Path();
 this.arrow.fillColor = _color;
 this.arrow.add([0,0],[Rkns._ARROW_LENGTH,Rkns._ARROW_WIDTH / 2],[0,Rkns._ARROW_WIDTH]);
-this.arrow.__controller = this;
+this.arrow.__representation = this;
 this.arrow_angle = 0;
 }
 Rkns.Renderer.TempEdge.prototype.redraw = function() {
-var _p0 = this.from_controller.paper_coords,
+var _p0 = this.from_representation.paper_coords,
 _p1 = this.end_pos,
 _a = _p1.subtract(_p0).angle,
 _c = _p0.add(_p1).divide(2);
 this.line.segments[0].point = _p0;
 this.line.segments[1].point = _p1;
 }
 Rkns.Renderer.TempEdge.prototype.paperShift = function(_delta) {
 this.end_pos = this.end_pos.add(_delta);
 var _hitResult = paper.project.hitTest(this.end_pos);
-this._renderer.findTarget(_hitResult);
+this.renderer.findTarget(_hitResult);
 this.redraw();
 }
 Rkns.Renderer.TempEdge.prototype.mouseup = function(_event) {
 var _hitResult = paper.project.hitTest(_event.point);
-if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
+if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
-var _target = _hitResult.item.__controller;
+var _target = _hitResult.item.__representation;
-if (_target.type === "Node" && this.from_controller._element.id !== _target._element.id) {
+if (_target.type === "Node" && this.from_representation.model !== _target.model) {
-this._project.addEdge({
+var _data = {
-from: this.from_controller._element.id,
+id: Rkns.Utils.getUID('edge'),
-to: _target._element.id
+created_by: this.renderer.renkan.current_user,
-}, Rkns._RENDER_AND_SAVE)
+from: this.from_representation.model.get("id"),
-}
+to: _target.model.get("id")
-}
+};
-this._renderer.removeController(this);
+this.project.addEdge(_data);
+}
+}
+this.renderer.removeRepresentation(this);
 }
 Rkns.Renderer.TempEdge.prototype.destroy = function() {
 this.arrow.remove();
 this.line.remove();
 }
 /* */
-Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+Rkns.Renderer.NodeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeEditor.prototype._init = function() {
-this._renderer.overlay_layer.activate();
+this.renderer.overlay_layer.activate();
 this.type = "editor";
 this.editor_block = new paper.Path();
 var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
 this.editor_block.add.apply(this.editor_block, _pts);
 this.editor_block.strokeWidth = 2;
 this.editor_block.strokeColor = "#999999";
 this.editor_block.fillColor = "#e0e0e0";
 this.editor_block.opacity = .8;
 this.editor_$ = Rkns.$('<div>')
-.appendTo(this._renderer.editor_$)
+.appendTo(this.renderer.editor_$)
 .css({
 position: "absolute",
 opacity: .8
 })
 .hide();
 + '<p><label><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
 + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by.color%>;"></span> <%=node.created_by.title%></p>'
 );
 Rkns.Renderer.NodeEditor.prototype.redraw = function() {
-var _coords = this.node_controller.paper_coords,
+var _coords = this.node_representation.paper_coords,
-_element = this.node_controller._element,
+_model = this.node_representation.model,
 _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 300);
 this.editor_$
 .html(this.template({
-node: _element,
+node: {
-l10n: this._project.l10n
+title: _model.get("title"),
+uri: _model.get("uri"),
+description: _model.get("description"),
+created_by: {
+color: _model.get("created_by").get("color"),
+title: _model.get("created_by").get("title")
+}
+},
+l10n: this.renderer.renkan.l10n
 }))
 .show()
 .css(_css);
 var _this = this;
 this.editor_$.find(".Rk-CloseX").click(function() {
-_this._renderer.removeController(_this);
+_this.renderer.removeRepresentation(_this);
 paper.view.draw();
 });
 this.editor_$.find("input, textarea").bind("keyup change", function() {
 var _data = {
 title: _this.editor_$.find(".Rk-Edit-Title").val(),
 description: _this.editor_$.find(".Rk-Edit-Description").val(),
 uri: _this.editor_$.find(".Rk-Edit-URI").val()
 }
-_this._project.updateNode(
+_model.set(_data);
-_element,
-_data,
-Rkns._SAVE
-);
-_this.node_controller.redraw();
 paper.view.draw();
 });
 this.editor_$.find(".Rk-Edit-Title")[0].focus();
+paper.view.draw();
 }
 Rkns.Renderer.NodeEditor.prototype.destroy = function() {
 this.editor_block.remove();
 this.editor_$.detach();
 }
 /* */
-Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.EdgeEditor.prototype._init = function() {
-this._renderer.overlay_layer.activate();
+this.renderer.overlay_layer.activate();
 this.type = "editor";
 this.editor_block = new paper.Path();
 var _pts = Rkns._(Rkns._.range(8)).map(function() {return [0,0]});
 this.editor_block.add.apply(this.editor_block, _pts);
 this.editor_block.strokeWidth = 2;
 this.editor_block.strokeColor = "#999999";
 this.editor_block.fillColor = "#e0e0e0";
 this.editor_block.opacity = .8;
 this.editor_$ = Rkns.$('<div>')
-.appendTo(this._renderer.editor_$)
+.appendTo(this.renderer.editor_$)
 .css({
 position: "absolute",
 opacity: .8
 })
 .hide();
 + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to.created_by.color%>;"></span><%=edge.to.title%></p>'
 + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by.color%>;"></span> <%=edge.created_by.title%></p>'
 );
 Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
-var _coords = this.edge_controller.paper_coords,
+var _coords = this.edge_representation.paper_coords,
-_element = this.edge_controller._element,
+_model = this.edge_representation.model,
 _css = Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 200);
 this.editor_$
 .html(this.template({
-edge: _element,
+edge: _model,
-l10n: this._project.l10n
+l10n: this.renderer.renkan.l10n
 }))
 .show()
 .css(_css);
 var _this = this;
 this.editor_$.find(".Rk-CloseX").click(function() {
-_this._renderer.removeController(_this);
+_this.renderer.removeRepresentation(_this);
 paper.view.draw();
 });
 this.editor_$.find("input, textarea").bind("keyup change", function() {
 var _data = {
 title: _this.editor_$.find(".Rk-Edit-Title").val(),
 uri: _this.editor_$.find(".Rk-Edit-URI").val()
 }
-_this._project.updateEdge(
+_model.set(_data);
-_element,
-_data,
-Rkns._SAVE
-);
-_this.edge_controller.redraw();
 paper.view.draw();
 });
+paper.view.draw();
 }
 Rkns.Renderer.EdgeEditor.prototype.destroy = function() {
 this.editor_block.remove();
 this.editor_$.detach();
 }
 /* */
-Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeEditButton.prototype._init = function() {
-this._renderer.node_layer.activate();
+this.renderer.node_layer.activate();
 this.type = "Node-edit-button";
 this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, - 90, 30, 2, 'img/edit.png');
 }
 Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
 }
 Rkns.Renderer.NodeEditButton.prototype.unselect = function() {
 this.sector.unselect();
 this.hide();
-this.node_controller.remove_button.hide();
+this.node_representation.remove_button.hide();
-this.node_controller.link_button.hide();
+this.node_representation.link_button.hide();
 }
 Rkns.Renderer.NodeEditButton.prototype.mouseup = function() {
-if (!this._renderer.is_dragging) {
+if (!this.renderer.is_dragging) {
-this.node_controller.openEditor();
+this.node_representation.openEditor();
 }
 }
 Rkns.Renderer.NodeEditButton.prototype.destroy = function() {
 this.sector.destroy();
 }
 /* */
-Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
-this._renderer.node_layer.activate();
+this.renderer.node_layer.activate();
 this.type = "Node-remove-button";
 this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, -210, -90, 2, 'img/remove.png');
 }
 Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {
 }
 Rkns.Renderer.NodeRemoveButton.prototype.unselect = function() {
 this.sector.unselect();
 this.hide();
-this.node_controller.edit_button.hide();
+this.node_representation.edit_button.hide();
-this.node_controller.link_button.hide();
+this.node_representation.link_button.hide();
 }
 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
-if (confirm('Do you really wish to remove node "' + this.node_controller._element.title + '"?')) {
+if (confirm('Do you really wish to remove node "' + this.node_representation.model.get("title") + '"?')) {
-this._renderer._project.removeNode(this.node_controller._element, Rkns._RENDER_AND_SAVE);
+this.project.removeNode(this.node_representation.model);
 }
 }
 Rkns.Renderer.NodeRemoveButton.prototype.destroy = function() {
 this.sector.destroy();
 }
 /* */
-Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
-this._renderer.node_layer.activate();
+this.renderer.node_layer.activate();
 this.type = "Node-link-button";
 this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS , 3 * Rkns._NODE_RADIUS, 30, 150, 2, 'img/link.png');
 }
 Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {
 }
 Rkns.Renderer.NodeLinkButton.prototype.unselect = function() {
 this.sector.unselect();
 this.hide();
-this.node_controller.edit_button.hide();
+this.node_representation.edit_button.hide();
-this.node_controller.remove_button.hide();
+this.node_representation.remove_button.hide();
 }
 Rkns.Renderer.NodeLinkButton.prototype.destroy = function() {
 this.sector.destroy();
 }
 /* */
-Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
-this._renderer.edge_layer.activate();
+this.renderer.edge_layer.activate();
 this.type = "Edge-edit-button";
 this.sector = Rkns.Renderer.Utils.sector(this, 5 , 2 * Rkns._NODE_RADIUS, - 60, 60, 2, 'img/edit.png');
 }
 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
 }
 Rkns.Renderer.EdgeEditButton.prototype.unselect = function() {
 this.sector.unselect();
 this.hide();
-this.edge_controller.remove_button.hide();
+this.edge_representation.remove_button.hide();
 }
 Rkns.Renderer.EdgeEditButton.prototype.mouseup = function() {
-if (!this._renderer.is_dragging) {
+if (!this.renderer.is_dragging) {
-this.edge_controller.openEditor();
+this.edge_representation.openEditor();
 }
 }
 Rkns.Renderer.EdgeEditButton.prototype.destroy = function() {
 this.sector.destroy();
 }
 /* */
-Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
-this._renderer.edge_layer.activate();
+this.renderer.edge_layer.activate();
 this.type = "Edge-remove-button";
 this.sector = Rkns.Renderer.Utils.sector(this, 5, 2 * Rkns._NODE_RADIUS, - 240, -120, 2, 'img/remove.png');
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
 this.sector.moveTo(_pos);
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.unselect = function() {
 this.sector.unselect();
 this.hide();
-this.edge_controller.edit_button.hide();
+this.edge_representation.edit_button.hide();
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.mouseup = function() {
-if (confirm('Do you really wish to remove edge "' + this.edge_controller._element.title + '"?')) {
+if (confirm('Do you really wish to remove edge "' + this.edge_representation.model.get("title") + '"?')) {
-this._renderer._project.removeEdge(this.edge_controller._element, Rkns._RENDER_AND_SAVE);
+this.project.removeEdge(this.edge_representation.model);
 }
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.destroy = function() {
 this.sector.destroy();
 }
 /* */
-Rkns.Renderer.Scene = function(_project) {
+Rkns.Renderer.Scene = function(_renkan) {
-this._project = _project;
+this.renkan = _renkan;
 this._MARGIN_X = 80;
 this._MARGIN_Y = 50;
 this.$ = Rkns.$(".Rk-Render");
+this.representations = [];
 this.$.html(this.template({
-l10n: this._project.l10n
+l10n: _renkan.l10n
 }))
 this.canvas_$ = this.$.find(".Rk-Canvas");
 this.editor_$ = this.$.find(".Rk-Editor");
 paper.setup(this.canvas_$[0]);
 this.scale = 1;
 });
 paper.view.onResize = function(_event) {
 _this.offset = _this.offset.add(_event.delta.divide(2));
 _this.redraw();
 }
+var _thRedraw = Rkns._.throttle(function() {
+_this.redraw();
+},50);
+this.addRepresentations("Node", this.renkan.project.get("nodes"));
+this.addRepresentations("Edge", this.renkan.project.get("edges"));
+this.renkan.project.on("add:nodes", function(_node) {
+_this.addRepresentation("Node", _node);
+_thRedraw();
+});
+this.renkan.project.on("add:edges", function(_edge) {
+_this.addRepresentation("Edge", _edge);
+_thRedraw();
+});
+this.redraw();
 }
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
 '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor">'
 + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
 Rkns.Renderer.Scene.prototype.toModelCoords = function(_point) {
 return _point.subtract(this.offset).divide(this.scale);
 }
-Rkns.Renderer.Scene.prototype.draw = function() {
+Rkns.Renderer.Scene.prototype.addRepresentation = function(_type, _model) {
-var _this = this,
+var _repr = new Rkns.Renderer[_type](this, _model);
-_xx = this._project.nodes.map(function(_node) { return _node.position.x }),
+this.representations.push(_repr);
-_yy = this._project.nodes.map(function(_node) { return _node.position.y }),
+if (_model) {
-_minx = Math.min.apply(Math, _xx),
+var _this = this;
-_miny = Math.min.apply(Math, _yy),
+_model.on("change", function() {
-_maxx = Math.max.apply(Math, _xx),
+_repr.redraw();
-_maxy = Math.max.apply(Math, _yy);
+});
-this.scale = Math.min((paper.view.size.width - 2 * this._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * this._MARGIN_Y) / (_maxy - _miny));
+_model.on("remove", function() {
-this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
+_this.removeRepresentation(_repr);
-this.controllers = new Rkns.ViewModel.List();
+_this.redraw();
-this._project.nodes.forEach(function(_node) {
+});
-_this.addController("Node", _node);
+}
-});
+return _repr;
-this._project.edges.forEach(function(_edge) {
+}
-_this.addController("Edge", _edge);
-});
+Rkns.Renderer.Scene.prototype.addRepresentations = function(_type, _collection) {
+var _this = this;
-this.redraw();
+_collection.forEach(function(_model) {
-}
+_this.addRepresentation(_type, _model);
+});
-Rkns.Renderer.Scene.prototype.addController = function(_type, _controller) {
+}
-var _el = new Rkns.Renderer[_type](this, _controller);
-this.controllers.push(_el);
+Rkns.Renderer.Scene.prototype.removeRepresentation = function(_representation) {
-return _el;
+_representation.destroy();
-}
+this.representations = Rkns._(this.representations).reject(
+function(_repr) {
-Rkns.Renderer.Scene.prototype.removeController = function(_controller) {
+return _repr == _representation
-_controller.destroy();
+}
-this.controllers.removeId(_controller.id);
+);
 }
-Rkns.Renderer.Scene.prototype.removeControllersOfType = function(_type) {
+Rkns.Renderer.Scene.prototype.getRepresentationByModel = function(_model) {
-var _controllers = this.controllers.filter(function(_ctrl) {
+return Rkns._(this.representations).find(function(_repr) {
-return _ctrl.type == _type;
+return _repr.model === _model;
+});
+}
+Rkns.Renderer.Scene.prototype.removeRepresentationsOfType = function(_type) {
+var _representations = Rkns._(this.representations).filter(function(_repr) {
+return _repr.type == _type;
 }),
 _this = this;
-_controllers.forEach(function(_ctrl) {
+Rkns._(_representations).each(function(_repr) {
-_this.removeController(_ctrl);
+_this.removeRepresentation(_repr);
 });
 }
 Rkns.Renderer.Scene.prototype.redraw = function() {
-this.controllers.forEach(function(_controller) {
+Rkns._(this.representations).each(function(_representation) {
-_controller.redraw();
+_representation.redraw();
 });
 paper.view.draw();
 }
 Rkns.Renderer.Scene.prototype.addTempEdge = function(_from, _point) {
-var _tmpEdge = this.addController("TempEdge",{});
+var _tmpEdge = this.addRepresentation("TempEdge",null);
 _tmpEdge.end_pos = _point;
-_tmpEdge.from_controller = _from;
+_tmpEdge.from_representation = _from;
 _tmpEdge.redraw();
 this.click_target = _tmpEdge;
 }
 Rkns.Renderer.Scene.prototype.findTarget = function(_hitResult) {
-if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
+if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
-var _newTarget = _hitResult.item.__controller;
+var _newTarget = _hitResult.item.__representation;
-if (this.selected_target !== _hitResult.item.__controller) {
+if (this.selected_target !== _hitResult.item.__representation) {
 if (this.selected_target) {
 this.selected_target.unselect(_newTarget);
 }
 _newTarget.select(this.selected_target);
 this.selected_target = _newTarget;
 }
 Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {
 this.is_dragging = false;
 var _hitResult = paper.project.hitTest(_event.point);
-if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
+if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
-this.click_target = _hitResult.item.__controller;
+this.click_target = _hitResult.item.__representation;
 if (this.click_target.type === "Node" && _hitResult.type === "stroke") {
 this.addTempEdge(this.click_target, _event.point);
 }
 if (this.click_target.type === "Node-link-button") {
-this.addTempEdge(this.click_target.node_controller, _event.point);
+this.addTempEdge(this.click_target.node_representation, _event.point);
 }
 } else {
 this.click_target = null;
 }
 }
 _point = new paper.Point([
 _event.pageX - _off.left,
 _event.pageY - _off.top
 ]);
 var _hitResult = paper.project.hitTest(_point);
-if (!_hitResult || typeof _hitResult.item.__controller === "undefined") {
+if (!_hitResult || typeof _hitResult.item.__representation === "undefined") {
 var _coords = this.toModelCoords(_point),
-_node = this._project.addNode({
+_data = {
+id: Rkns.Utils.getUID('node'),
+created_by: this.renkan.current_user,
 position: {
 x: _coords.x,
 y: _coords.y
 }
-}, Rkns._RENDER_AND_SAVE);
+};
-_node.__controller.openEditor();
+_node = this.renkan.project.addNode(_data);
+this.getRepresentationByModel(_node).openEditor();
 }
 paper.view.draw();
 }
 Rkns.Renderer.Scene.prototype.onMouseEnter = function(_event) {
 _point = new paper.Point([
 _event.pageX - _off.left,
 _event.pageY - _off.top
 ]),
 _coords = this.toModelCoords(_point),
-_node = this._project.addNode({
+_data = {
+id: Rkns.Utils.getUID('node'),
+created_by: this.renkan.current_user,
 uri: _newEl.uri,
 title: _newEl.title,
 description: _newEl.description,
 position: {
 x: _coords.x,
 y: _coords.y
 }
-}, Rkns._RENDER_AND_SAVE);
+};
+var _node = this.renkan.project.addNode(_data);
+this.renkan.selected_bin_item = null;
 this.is_dragging = true;
-this.click_target = _node.__controller;
+this.click_target = this.getRepresentationByModel(_node);
 }
 }

renkan