--- a/client/js/main.js	Thu Jul 26 18:06:05 2012 +0200
+++ b/client/js/main.js	Fri Jul 27 12:22:10 2012 +0200
@@ -18,7 +18,10 @@
 
 /* Declaring the Renkan Namespace Rkns */
 
-Rkns = {}
+Rkns = {
+    _FROM_GRAPHICS: 0,
+    _FROM_DATA: 1
+}
 
 Rkns.$ = jQuery;
 

--- a/client/js/model.js	Thu Jul 26 18:06:05 2012 +0200
+++ b/client/js/model.js	Fri Jul 27 12:22:10 2012 +0200
@@ -7,7 +7,6 @@
         this.title = _props.title || "(untitled " + this.type + ")";
         this.description = _props.description || "";
         this.uri = _props.uri || "";
-//        this._backRefs = [];
     }
 }
 
@@ -17,6 +16,24 @@
     this[ _propName ] = _element;
 }
 
+Rkns.Model._BaseElement.prototype.updateGraphics = function() {
+    this._project._renderer.redraw();
+}
+
+Rkns.Model._BaseElement.prototype.updateData = function() {
+}
+
+Rkns.Model._BaseElement.prototype.propagateChanges = function(_from) {
+    switch(_from) {
+        case Rkns._FROM_GRAPHICS:
+            this.updateData();
+        break;
+        case Rkns._FROM_DATA:
+            this.updateGraphics();
+        break;
+    }
+}
+
 /* Element Class Generator */
 
 Rkns.Model._elementClass = function(_type) {
@@ -42,6 +59,26 @@
     this.position = _props.position;
 }
 
+Rkns.Model.Node.prototype.setPosition = function(_from, _x, _y) {
+    if (typeof _x === "object") {
+        if (typeof _x.x !== "undefined" && typeof _x.y !== "undefined") {
+            this.position.x = _x.x;
+            this.position.y = _x.y;
+        } else {
+            if (typeof _x.length !== "undefined") {
+                this.position.x = _x[0];
+                this.position.y = _x[1];
+            }
+        }
+    } else {
+        if (typeof _y !== "undefined") {
+            this.position.x = +_x;
+            this.position.y = +_y;
+        }
+    }
+    this.propagateChanges(_from);
+}
+
 /* Edge Model */
 
 Rkns.Model.Edge = Rkns.Model._elementClass("edge");

--- a/client/js/paper-renderer.js	Thu Jul 26 18:06:05 2012 +0200
+++ b/client/js/paper-renderer.js	Fri Jul 27 12:22:10 2012 +0200
@@ -29,7 +29,7 @@
 }
 
 Rkns.Renderers.Paper__Controllers.Node.prototype.redraw = function() {
-    this.node_model_coords = new paper.Point(this._element.position.x, this._element.position.y);
+    this.node_model_coords = new paper.Point(this._element.position);
     this.node_paper_coords = this._renderer.toPaperCoords(this.node_model_coords);
     this.node_circle.position = this.node_paper_coords;
     this.node_text.content = this._element.title;
@@ -38,10 +38,7 @@
 }
 
 Rkns.Renderers.Paper__Controllers.Node.prototype.paperShift = function(_delta) {
-    this.node_paper_coords = this.node_paper_coords.add(_delta);
-    this.node_model_coords = this._renderer.toModelCoords(this.node_paper_coords);
-    this._element.position.x = this.node_model_coords.x;
-    this._element.position.y = this.node_model_coords.y;
+    this._element.setPosition(Rkns._FROM_GRAPHICS, this._renderer.toModelCoords(this.node_paper_coords.add(_delta)));
     this._renderer.redraw();
 }
 
@@ -137,7 +134,7 @@
         _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 - 100) / (_maxx - _minx), (paper.view.size.height - 100) / (_maxy - _miny));
+    this.scale = Math.min((paper.view.size.width - 160) / (_maxx - _minx), (paper.view.size.height - 100) / (_maxy - _miny));
     this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
     this.nodes = this._project.nodes.map(function(_node) {
         return new Rkns.Renderers.Paper__Controllers.Node(_this, _node);
@@ -177,15 +174,21 @@
     }
 }
 
-Rkns.Renderers.Paper.prototype.onScroll = function(_event, _delta) {
-    this.totalScroll += _delta;
+Rkns.Renderers.Paper.prototype.onScroll = function(_event, _scrolldelta) {
+    this.totalScroll += _scrolldelta;
     if (Math.abs(this.totalScroll) >= 1) {
+        var _off = Rkns.$("#"+this._project._opts.canvas_id).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.offset = this.offset.subtract(_delta);
             this.scale *= Math.SQRT2;
         } else {
+            this.offset = this.offset.add(_delta.divide( Math.SQRT2 ));
             this.scale *= Math.SQRT1_2;
         }
-        console.log(this.scale);
         this.totalScroll = 0;
         this.redraw();
     }