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 20	bd58970ffd16
parent 18	4423bfcd8f9f
child 21	b43dd87f7ffa

equal deleted inserted replaced

-:d49b927bfe62
+:bd58970ffd16
 Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 Rkns.Renderer.Node.prototype._init = function() {
 this._renderer.node_layer.activate();
-this.type = "node";
+this.type = "Node";
 this.circle = new paper.Path.Circle([0, 0], Rkns._NODE_RADIUS);
 this.circle.fillColor = '#ffffff';
 this.circle.__controller = this;
 this.title = new paper.PointText([0,0]);
 this.title.characterStyle = {
 position: {
 x: _coords.x,
 y: _coords.y
 }
 };
-this._project.updateElement(this._element, _data, Rkns._SAVE);
+this._project.updateElement(this.type, this._element, _data, Rkns._SAVE);
 this._renderer.redraw();
 }
 Rkns.Renderer.Node.prototype.openEditor = function() {
 this._renderer.removeControllersOfType("editor");
 Rkns.Renderer.Edge = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 Rkns.Renderer.Edge.prototype._init = function() {
 this._renderer.edge_layer.activate();
-this.type = "edge";
+this.type = "Edge";
 this.from_controller = this._element.from.__controller;
 this.to_node_controller = this._element.to.__controller;
 this.line = new paper.Path();
 this.line.add([0,0],[0,0]);
 this.line.__controller = this;
 Rkns.Renderer.TempEdge.prototype.mouseup = function(_event) {
 var _hitResult = paper.project.hitTest(_event.point);
 if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
 var _target = _hitResult.item.__controller;
-if (_target.type === "node" && this.from_controller._element.id !== _target._element.id) {
+if (_target.type === "Node" && this.from_controller._element.id !== _target._element.id) {
 this._project.addEdge({
 from: this.from_controller._element.id,
 to: _target._element.id
 }, Rkns._RENDER_AND_SAVE)
 }
 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.updateElement(
+_this._project.updateNode(
 _element,
 _data,
 Rkns._SAVE
 );
 _this.node_controller.redraw();
 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.updateElement(
+_this._project.updateEdge(
 _element,
 _data,
 Rkns._SAVE
 );
 _this.edge_controller.redraw();
 Rkns.Renderer.NodeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 Rkns.Renderer.NodeEditButton.prototype._init = function() {
 this._renderer.node_layer.activate();
-this.type = "node-edit-button";
+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) {
 this.sector.moveTo(_pos);
 Rkns.Renderer.NodeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
 this._renderer.node_layer.activate();
-this.type = "node-remove-button";
+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) {
 this.sector.moveTo(_pos);
 Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
 this._renderer.node_layer.activate();
-this.type = "node-link-button";
+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) {
 this.sector.moveTo(_pos);
 Rkns.Renderer.EdgeEditButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
 this._renderer.edge_layer.activate();
-this.type = "edge-edit-button";
+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) {
 this.sector.moveTo(_pos);
 Rkns.Renderer.EdgeRemoveButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
 this._renderer.edge_layer.activate();
-this.type = "edge-remove-button";
+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.Scene = function(_project) {
 this._project = _project;
 this._MARGIN_X = 80;
 this._MARGIN_Y = 50;
-var _canvas_id = this._project._opts.canvas_id;
+this.$ = Rkns.$(".Rk-Render");
-this.$ = Rkns.$("#"+_canvas_id);
+this.$.html(this.template({
-this.editor_$ = Rkns.$(".Rk-Editor");
-this.editor_$.html(this.editorTemplate({
 l10n: this._project.l10n
-}));
+}))
-paper.setup(document.getElementById(_canvas_id));
+this.canvas_$ = this.$.find(".Rk-Canvas");
+this.editor_$ = this.$.find(".Rk-Editor");
+paper.setup(this.canvas_$[0]);
 this.scale = 1;
 this.offset = paper.view.center;
 this.totalScroll = 0;
 this.click_target = null;
 this.selected_target = null;
 _this.onMouseDrag(_event);
 }
 _tool.onMouseUp = function(_event) {
 _this.onMouseUp(_event);
 }
-this.$.mousewheel(function(_event, _delta) {
+this.canvas_$.mousewheel(function(_event, _delta) {
 _this.onScroll(_event, _delta);
 })
-this.$.dblclick(function(_event) {
+this.canvas_$.dblclick(function(_event) {
 _this.onDoubleClick(_event);
 });
 this.editor_$.find(".Rk-ZoomOut").click(function() {
 _this.offset = new paper.Point([
-_this.$.width(),
+_this.canvas_$.width(),
-_this.$.height()
+_this.canvas_$.height()
 ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
 _this.scale *= Math.SQRT1_2;
 _this.redraw();
 });
 this.editor_$.find(".Rk-ZoomIn").click(function() {
 _this.offset = new paper.Point([
-_this.$.width(),
+_this.canvas_$.width(),
-_this.$.height()
+_this.canvas_$.height()
 ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
 _this.scale *= Math.SQRT2;
 _this.redraw();
 });
 paper.view.onResize = function(_event) {
 _this.offset = _this.offset.add(_event.delta.divide(2));
 _this.redraw();
 }
 }
-Rkns.Renderer.Scene.prototype.editorTemplate = Rkns._.template(
+Rkns.Renderer.Scene.prototype.template = Rkns._.template(
-'<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
+'<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>'
++ '</div>'
 );
 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
 return _point.multiply(this.scale).add(this.offset);
 }
 _miny = Math.min.apply(Math, _yy),
 _maxx = Math.max.apply(Math, _xx),
 _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));
 this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
-this.controllers = new Rkns.Model.List();
+this.controllers = new Rkns.ViewModel.List();
 this._project.nodes.forEach(function(_node) {
 _this.addController("Node", _node);
 });
 this._project.edges.forEach(function(_edge) {
 _this.addController("Edge", _edge);
 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") {
 this.click_target = _hitResult.item.__controller;
-if (this.click_target.type === "node" && _hitResult.type === "stroke") {
+if (this.click_target.type === "Node" && _hitResult.type === "stroke") {
 this.addTempEdge(this.click_target, _event.point);
 }
-if (this.click_target.type === "node-link-button") {
+if (this.click_target.type === "Node-link-button") {
 this.addTempEdge(this.click_target.node_controller, _event.point);
 }
 } else {
 this.click_target = null;
 }
 }
 Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) {
 this.totalScroll += _scrolldelta;
 if (Math.abs(this.totalScroll) >= 1) {
-var _off = this.$.offset(),
+var _off = this.canvas_$.offset(),
 _delta = new paper.Point([
 _event.pageX - _off.left,
 _event.pageY - _off.top
 ]).subtract(this.offset).multiply( Math.SQRT2 - 1 );
 if (this.totalScroll > 0) {
 this.redraw();
 }
 }
 Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) {
-var _off = this.$.offset(),
+var _off = this.canvas_$.offset(),
 _point = new paper.Point([
 _event.pageX - _off.left,
 _event.pageY - _off.top
 ]);
 var _hitResult = paper.project.hitTest(_point);

renkan