--- a/client/js/paper-renderer.js Thu Aug 16 17:24:13 2012 +0200
+++ b/client/js/paper-renderer.js Fri Aug 17 12:50:00 2012 +0200
@@ -164,7 +164,7 @@
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;
@@ -203,7 +203,7 @@
y: _coords.y
}
};
- this._project.updateElement(this._element, _data, Rkns._SAVE);
+ this._project.updateElement(this.type, this._element, _data, Rkns._SAVE);
this._renderer.redraw();
}
@@ -249,7 +249,7 @@
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();
@@ -388,7 +388,7 @@
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
@@ -456,7 +456,7 @@
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
@@ -525,7 +525,7 @@
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
@@ -546,7 +546,7 @@
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');
}
@@ -589,7 +589,7 @@
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');
}
@@ -632,7 +632,7 @@
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');
}
@@ -669,7 +669,7 @@
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');
}
@@ -711,7 +711,7 @@
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) {
@@ -752,13 +752,13 @@
this._project = _project;
this._MARGIN_X = 80;
this._MARGIN_Y = 50;
- var _canvas_id = this._project._opts.canvas_id;
- this.$ = Rkns.$("#"+_canvas_id);
- this.editor_$ = Rkns.$(".Rk-Editor");
- this.editor_$.html(this.editorTemplate({
+ this.$ = Rkns.$(".Rk-Render");
+ this.$.html(this.template({
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;
@@ -782,24 +782,24 @@
_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.$.height()
+ _this.canvas_$.width(),
+ _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.$.height()
+ _this.canvas_$.width(),
+ _this.canvas_$.height()
]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
_this.scale *= Math.SQRT2;
_this.redraw();
@@ -810,8 +810,10 @@
}
}
-Rkns.Renderer.Scene.prototype.editorTemplate = 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>'
+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>'
+ + '</div>'
);
Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
@@ -833,7 +835,7 @@
_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);
});
@@ -904,10 +906,10 @@
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 {
@@ -936,7 +938,7 @@
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
@@ -954,7 +956,7 @@
}
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