client/js/paper-renderer.js
changeset 283 67f3a24a7c01
parent 282 12ee99b182cd
child 284 fa8035885814
--- a/client/js/paper-renderer.js	Mon Apr 28 17:40:41 2014 +0200
+++ b/client/js/paper-renderer.js	Tue Apr 29 23:53:13 2014 +0200
@@ -2,7 +2,7 @@
 "use strict";
 
 (function(root) {
-	
+
     var Rkns = root.Rkns,
     _ = Rkns._,
     $ = Rkns.$;
@@ -384,21 +384,21 @@
                 }
                 this.renderer.node_layer.activate();
                 var width = _image.width,
-                    height = _image.height,
-                    clipPath = this.model.get("clip_path"),
-                    hasClipPath = (typeof clipPath !== "undefined" && clipPath),
-                    _clip = null,
-                    baseRadius = null,
-                    centerPoint = null;
-                
+                height = _image.height,
+                clipPath = this.model.get("clip_path"),
+                hasClipPath = (typeof clipPath !== "undefined" && clipPath),
+                _clip = null,
+                baseRadius = null,
+                centerPoint = null;
+
                 if (hasClipPath) {
                     _clip = new paper.Path();
                     var instructions = clipPath.match(/[a-z][^a-z]+/gi) || [],
-                        lastCoords = [0,0],
-                        minX = Infinity,
-                        minY = Infinity,
-                        maxX = -Infinity,
-                        maxY = -Infinity;
+                    lastCoords = [0,0],
+                    minX = Infinity,
+                    minY = Infinity,
+                    maxX = -Infinity,
+                    maxY = -Infinity;
 
                     var transformCoords = function(tabc, relative) {
                         var newCoords = tabc.slice(1).map(function(v, k) {
@@ -682,20 +682,20 @@
                 return;
             }
             var _p0a = this.from_representation.paper_coords,
-                _p1a = this.to_representation.paper_coords,
-                _v = _p1a.subtract(_p0a),
-                _r = _v.length,
-                _u = _v.divide(_r),
-                _ortho = new paper.Point([- _u.y, _u.x]),
-                _group_pos = this.bundle.getPosition(this),
-                _delta = _ortho.multiply( this.options.edge_gap_in_bundles * _group_pos ),
-                _p0b = _p0a.add(_delta), /* Adding a 4 px difference */
-                _p1b = _p1a.add(_delta), /* to differentiate bundled links */
-                _a = _v.angle,
-                _textdelta = _ortho.multiply(this.options.edge_label_distance),
-                _handle = _v.divide(3),
-                _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color"),
-                opacity = 1;
+            _p1a = this.to_representation.paper_coords,
+            _v = _p1a.subtract(_p0a),
+            _r = _v.length,
+            _u = _v.divide(_r),
+            _ortho = new paper.Point([- _u.y, _u.x]),
+            _group_pos = this.bundle.getPosition(this),
+            _delta = _ortho.multiply( this.options.edge_gap_in_bundles * _group_pos ),
+            _p0b = _p0a.add(_delta), /* Adding a 4 px difference */
+            _p1b = _p1a.add(_delta), /* to differentiate bundled links */
+            _a = _v.angle,
+            _textdelta = _ortho.multiply(this.options.edge_label_distance),
+            _handle = _v.divide(3),
+            _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color"),
+            opacity = 1;
 
             if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) {
                 opacity = .5;
@@ -1632,11 +1632,11 @@
         this.click_mode = false;
 
         var _this = this,
-            _allowScroll = true,
-            _originalScale = 1,
-            _zooming = false,
-            _lastTapX = 0,
-            _lastTapY = 0;
+        _allowScroll = true,
+        _originalScale = 1,
+        _zooming = false,
+        _lastTapX = 0,
+        _lastTapY = 0;
 
         this.image_cache = {};
         this.icon_cache = {};
@@ -1796,14 +1796,13 @@
         bindClick(".Rk-ZoomIn", "zoomIn");
         bindClick(".Rk-ZoomFit", "autoScale");
         this.$.find(".Rk-ZoomSave").click( function() {
-        	// Save scale and offset point
-        	_this.renkan.project.addView( { zoom_level:_this.scale, offset_x:_this.offset.x, offset_y:_this.offset.y } );
-            _this.$.find(".Rk-ZoomSetSaved").show();
+            // Save scale and offset point
+            _this.renkan.project.addView( { zoom_level:_this.scale, offset_x:_this.offset.x, offset_y:_this.offset.y } );
         });
         this.$.find(".Rk-ZoomSetSaved").click( function() {
             var view = _this.renkan.project.get("views").last();
             if(view){
-            	_this.setScale(view.get("zoom_level"), new paper.Point(view.get("offset_x"), view.get("offset_y")));
+                _this.setScale(view.get("zoom_level"), new paper.Point(view.get("offset_x"), view.get("offset_y")));
             }
         });
         if(this.renkan.read_only && !isNaN(parseInt(this.renkan.options.default_view))){
@@ -1870,8 +1869,18 @@
 
         _thRedrawUsers();
 
+        // register model events
         this.renkan.project.on("add:users remove:users", _thRedrawUsers);
 
+        this.renkan.project.on("add:views remove:views", function(_node) {
+            if(_this.renkan.project.get('views').length > 0) {
+                _this.$.find(".Rk-ZoomSetSaved").show();
+            }
+            else {
+                _this.$.find(".Rk-ZoomSetSaved").hide();
+            }
+        });
+
         this.renkan.project.on("add:nodes", function(_node) {
             _this.addRepresentation("Node", _node);
             _thRedraw();
@@ -2048,31 +2057,31 @@
         },
         drawSector: function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgname, _caption) {
             var _options = this.renkan.options,
-                _startRads = _startAngle * Math.PI / 180,
-                _endRads = _endAngle * Math.PI / 180,
-                _img = this.icon_cache[_imgname],
-                _startdx = - Math.sin(_startRads),
-                _startdy = Math.cos(_startRads),
-                _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx,
-                _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy,
-                _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx,
-                _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy,
-                _enddx = - Math.sin(_endRads),
-                _enddy = Math.cos(_endRads),
-                _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx,
-                _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy,
-                _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx,
-                _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy,
-                _centerR = (_inR + _outR)/2,
-                _centerRads = (_startRads + _endRads) / 2,
-                _centerX = Math.cos(_centerRads) * _centerR,
-                _centerY = Math.sin(_centerRads) * _centerR,
-                _centerXIn = Math.cos(_centerRads) * _inR,
-                _centerXOut = Math.cos(_centerRads) * _outR,
-                _centerYIn = Math.sin(_centerRads) * _inR,
-                _centerYOut = Math.sin(_centerRads) * _outR,
-                _textX = Math.cos(_centerRads) * (_outR + 3),
-                _textY = Math.sin(_centerRads) * (_outR + _options.buttons_label_font_size) + _options.buttons_label_font_size / 2;
+            _startRads = _startAngle * Math.PI / 180,
+            _endRads = _endAngle * Math.PI / 180,
+            _img = this.icon_cache[_imgname],
+            _startdx = - Math.sin(_startRads),
+            _startdy = Math.cos(_startRads),
+            _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx,
+            _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy,
+            _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx,
+            _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy,
+            _enddx = - Math.sin(_endRads),
+            _enddy = Math.cos(_endRads),
+            _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx,
+            _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy,
+            _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx,
+            _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy,
+            _centerR = (_inR + _outR)/2,
+            _centerRads = (_startRads + _endRads) / 2,
+            _centerX = Math.cos(_centerRads) * _centerR,
+            _centerY = Math.sin(_centerRads) * _centerR,
+            _centerXIn = Math.cos(_centerRads) * _inR,
+            _centerXOut = Math.cos(_centerRads) * _outR,
+            _centerYIn = Math.sin(_centerRads) * _inR,
+            _centerYOut = Math.sin(_centerRads) * _outR,
+            _textX = Math.cos(_centerRads) * (_outR + 3),
+            _textY = Math.sin(_centerRads) * (_outR + _options.buttons_label_font_size) + _options.buttons_label_font_size / 2;
             this.buttons_layer.activate();
             var _path = new paper.Path();
             _path.add([_startXIn, _startYIn]);
@@ -2097,11 +2106,11 @@
             }
             _text.visible = false;
             var _visible = false,
-                _restPos = new paper.Point(-200, -200),
-                _grp = new paper.Group([_path, _text]),
-                _delta = _grp.position,
-                _imgdelta = new paper.Point([_centerX, _centerY]),
-                _currentPos = new paper.Point(0,0);
+            _restPos = new paper.Point(-200, -200),
+            _grp = new paper.Group([_path, _text]),
+            _delta = _grp.position,
+            _imgdelta = new paper.Point([_centerX, _centerY]),
+            _currentPos = new paper.Point(0,0);
             _text.content = _caption;
             _grp.visible = false;
             _grp.position = _restPos;
@@ -2564,50 +2573,50 @@
                 if (_data["text/x-iri-source-uri"]) {
                     newNode.uri = _data["text/x-iri-source-uri"];
                 }
-                if (_data["text/plain"] || _data["text/x-iri-selected-text"]) {
-                    newNode.description = (_data["text/plain"] || _data["text/x-iri-selected-text"]).replace(/[\s\n]+/gm,' ').trim();
+            if (_data["text/plain"] || _data["text/x-iri-selected-text"]) {
+                newNode.description = (_data["text/plain"] || _data["text/x-iri-selected-text"]).replace(/[\s\n]+/gm,' ').trim();
+            }
+            if (_data["text/html"] || _data["text/x-iri-selected-html"]) {
+                var snippet = $('<div>').html(_data["text/html"] || _data["text/x-iri-selected-html"]);
+                var _svgimgs = snippet.find("image");
+                if (_svgimgs.length) {
+                    newNode.image = _svgimgs.attr("xlink:href");
+                }
+                var _svgpaths = snippet.find("path");
+                if (_svgpaths.length) {
+                    newNode.clipPath = _svgpaths.attr("d");
+                }
+                var _imgs = snippet.find("img");
+                if (_imgs.length) {
+                    newNode.image = _imgs[0].src;
+                }
+                var _as = snippet.find("a");
+                if (_as.length) {
+                    newNode.uri = _as[0].href;
                 }
-                if (_data["text/html"] || _data["text/x-iri-selected-html"]) {
-                    var snippet = $('<div>').html(_data["text/html"] || _data["text/x-iri-selected-html"]);
-                    var _svgimgs = snippet.find("image");
-                    if (_svgimgs.length) {
-                        newNode.image = _svgimgs.attr("xlink:href");
-                    }
-                    var _svgpaths = snippet.find("path");
-                    if (_svgpaths.length) {
-                        newNode.clipPath = _svgpaths.attr("d");
-                    }
-                    var _imgs = snippet.find("img");
-                    if (_imgs.length) {
-                        newNode.image = _imgs[0].src;
-                    }
-                    var _as = snippet.find("a");
-                    if (_as.length) {
-                        newNode.uri = _as[0].href;
-                    }
-                    newNode.title = snippet.find("[title]").attr("title") || newNode.title;
-                    newNode.description = snippet.text().replace(/[\s\n]+/gm,' ').trim();
+                newNode.title = snippet.find("[title]").attr("title") || newNode.title;
+                newNode.description = snippet.text().replace(/[\s\n]+/gm,' ').trim();
+            }
+            if (_data["text/uri-list"]) {
+                newNode.uri = _data["text/uri-list"];
+            }
+            if (_data["text/x-moz-url"] && !newNode.title) {
+                newNode.title = (_data["text/x-moz-url"].split("\n")[1] || "").trim();
+                if (newNode.title === newNode.uri) {
+                    newNode.title = false;
                 }
-                if (_data["text/uri-list"]) {
-                    newNode.uri = _data["text/uri-list"];
-                }
-                if (_data["text/x-moz-url"] && !newNode.title) {
-                    newNode.title = (_data["text/x-moz-url"].split("\n")[1] || "").trim();
-                    if (newNode.title === newNode.uri) {
-                        newNode.title = false;
-                    }
-                }
-                if (_data["text/x-iri-source-title"] && !newNode.title) {
-                    newNode.title = _data["text/x-iri-source-title"];
-                }
-                if (_data["text/html"] || _data["text/x-iri-selected-html"]) {
-                    var snippet = $('<div>').html(_data["text/html"] || _data["text/x-iri-selected-html"]);
-                    newNode.image = snippet.find("[data-image]").attr("data-image") || newNode.image;
-                    newNode.uri = snippet.find("[data-uri]").attr("data-uri") || newNode.uri;
-                    newNode.title = snippet.find("[data-title]").attr("data-title") || newNode.title;
-                    newNode.description = snippet.find("[data-description]").attr("data-description") || newNode.description;
-                    newNode.clipPath = snippet.find("[data-clip-path]").attr("data-clip-path") || newNode.clipPath;
-                }
+            }
+            if (_data["text/x-iri-source-title"] && !newNode.title) {
+                newNode.title = _data["text/x-iri-source-title"];
+            }
+            if (_data["text/html"] || _data["text/x-iri-selected-html"]) {
+                var snippet = $('<div>').html(_data["text/html"] || _data["text/x-iri-selected-html"]);
+                newNode.image = snippet.find("[data-image]").attr("data-image") || newNode.image;
+                newNode.uri = snippet.find("[data-uri]").attr("data-uri") || newNode.uri;
+                newNode.title = snippet.find("[data-title]").attr("data-title") || newNode.title;
+                newNode.description = snippet.find("[data-description]").attr("data-description") || newNode.description;
+                newNode.clipPath = snippet.find("[data-clip-path]").attr("data-clip-path") || newNode.clipPath;
+            }
             }
 
             if(typeof this.renkan.options.drop_enhancer === "function"){