client/js/paper-renderer.js
changeset 163 fca0475da9a7
parent 161 c7a503c80ef4
child 169 a60a450b8f3b
--- a/client/js/paper-renderer.js	Tue Apr 23 10:38:48 2013 +0200
+++ b/client/js/paper-renderer.js	Tue Apr 23 17:08:42 2013 +0200
@@ -41,14 +41,13 @@
             _left = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length ),
             _right = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length + _options.tooltip_width ),
             _top = _coords.y - _height / 2;
+        if (_top + _height > (paper.view.size.height - _options.tooltip_margin)) {
+            _top = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_arrow_width / 2 ) - _height;
+        }
         if (_top < _options.tooltip_margin) {
             _top = Math.min( _options.tooltip_margin, _coords.y - _options.tooltip_arrow_width / 2 );
         }
         var _bottom = _top + _height;
-        if (_bottom > (paper.view.size.height - _options.tooltip_margin)) {
-            _bottom = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_arrow_width / 2 );
-            _top = _bottom - _height;
-        }
         _path.segments[0].point
             = _path.segments[7].point
             = _coords.add([_isLeft * _xmargin, 0]);
@@ -96,8 +95,16 @@
                     _renderer.redraw()
                 }).defer();
             }
+            this._selectBinding = function() {
+                _this.select();
+            }
+            this._unselectBinding = function() {
+                _this.unselect();
+            }
             this.model.on("change", this._changeBinding );
             this.model.on("remove", this._removeBinding );
+            this.model.on("select", this._selectBinding );
+            this.model.on("unselect", this._unselectBinding );
         }
     }
 }
@@ -114,9 +121,17 @@
 
 Rkns.Renderer._BaseRepresentation.prototype.hide = function() {}
 
-Rkns.Renderer._BaseRepresentation.prototype.select = function() {}
+Rkns.Renderer._BaseRepresentation.prototype.select = function() {
+    if (this.model) {
+        this.model.trigger("selected");
+    }
+}
 
-Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {}
+Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {
+    if (this.model) {
+        this.model.trigger("unselected");
+    }
+}
 
 Rkns.Renderer._BaseRepresentation.prototype.highlight = function() {}
 
@@ -124,12 +139,18 @@
 
 Rkns.Renderer._BaseRepresentation.prototype.mousedown = function() {}
 
-Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {}
+Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {
+    if (this.model) {
+        this.model.trigger("clicked");
+    }
+}
 
 Rkns.Renderer._BaseRepresentation.prototype.destroy = function() {
     if (this.model) {
         this.model.off("change", this._changeBinding );
         this.model.off("remove", this._removeBinding );
+        this.model.off("select", this._selectBinding );
+        this.model.off("unselect", this._unselectBinding );
     }
 }
 
@@ -238,17 +259,21 @@
     var old_act_btn = this.active_buttons;
     
     if (this.model.get("delete_scheduled")) {
-        var opacity = .33;
+        var opacity = .5;
         this.active_buttons = this.pending_delete_buttons;
+        this.circle.dashArray = [2,2];
     } else {
         var opacity = 1;
         this.active_buttons = this.normal_buttons;
+        this.circle.dashArray = null;
     }
     
-    if (this.selected && this.renderer.isEditable() && old_act_btn !== this.active_buttons) {
-        old_act_btn.forEach(function(b) {
-            b.hide();
-        });
+    if (this.selected && this.renderer.isEditable()) {
+        if (old_act_btn !== this.active_buttons) {
+            old_act_btn.forEach(function(b) {
+                b.hide();
+            });
+        }
         this.active_buttons.forEach(function(b) {
             b.show();
         });
@@ -382,6 +407,7 @@
         this.minimap_circle.strokeWidth = this.options.minimap_highlight_weight;
         this.minimap_circle.strokeColor = this.options.minimap_highlight_color;
     }
+    this.super("select");
 }
 
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
@@ -395,6 +421,7 @@
         if (this.renderer.minimap) {
             this.minimap_circle.strokeColor = undefined;
         }
+        this.super("unselect");
     }
 }
     
@@ -443,6 +470,7 @@
         if (!_isTouch && !this.model.get("delete_scheduled")) {
             this.openEditor();
         }
+        this.model.trigger("clicked");
     }
     this.renderer.click_target = null;
     this.renderer.is_dragging = false;
@@ -534,7 +562,13 @@
         _handle = _v.divide(3),
         _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER(this.renkan)).get("color");
     
-    var opacity = (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) ? .33 : 1;
+    if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) {
+        var opacity = .5;
+        this.line.dashArray = [2, 2];
+    } else {
+        var opacity = 1;
+        this.line.dashArray = null;
+    }
     
     var old_act_btn = this.active_buttons;
     
@@ -614,6 +648,7 @@
     if (!this.options.editor_mode) {
         this.openEditor();
     }
+    this.super("select");
 }
 
 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
@@ -625,6 +660,7 @@
             });
         }
         this.line.strokeWidth = this.options.edge_stroke_width;
+        this.super("unselect");
     }
 }
 
@@ -645,6 +681,7 @@
         if (!_isTouch) {
             this.openEditor();
         }
+        this.model.trigger("clicked");
     }
     this.renderer.click_target = null;
     this.renderer.is_dragging = false;
@@ -771,9 +808,27 @@
 
 Rkns.Renderer._BaseEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 
+Rkns.Renderer._BaseEditor.prototype._init = function() {
+    this.renderer.buttons_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 = this.options.tooltip_border_width;
+    this.editor_block.strokeColor = this.options.tooltip_border_color;
+    this.editor_block.opacity = .8;
+    this.editor_$ = Rkns.$('<div>')
+        .appendTo(this.renderer.editor_$)
+        .css({
+            position: "absolute",
+            opacity: .8
+        })
+        .hide();
+}
+
 Rkns.Renderer._BaseEditor.prototype.destroy = function() {
     this.editor_block.remove();
-    this.editor_$.detach();
+    this.editor_$.remove();
 }
 
 /* */
@@ -957,24 +1012,6 @@
 
 Rkns.Renderer.EdgeEditor = Rkns.Utils.inherit(Rkns.Renderer._BaseEditor);
 
-Rkns.Renderer.EdgeEditor.prototype._init = function() {
-    this.renderer.buttons_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 = this.options.tooltip_border_width;
-    this.editor_block.strokeColor = this.options.tooltip_border_color;
-    this.editor_block.opacity = .8;
-    this.editor_$ = Rkns.$('<div>')
-        .appendTo(this.renderer.editor_$)
-        .css({
-            position: "absolute",
-            opacity: .8
-        })
-        .hide();
-}
-
 Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template(
     '<h2><span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Edge")%></span></h2>'
     + '<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-edge.title%>"/></p>'
@@ -1126,26 +1163,6 @@
 
 /* */
 
-Rkns.Renderer._BaseEditor.prototype._init = function() {
-    this.renderer.buttons_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 = this.options.tooltip_border_width;
-    this.editor_block.strokeColor = this.options.tooltip_border_color;
-    this.editor_block.opacity = .8;
-    this.editor_$ = Rkns.$('<div>')
-        .appendTo(this.renderer.editor_$)
-        .css({
-            position: "absolute",
-            opacity: .8
-        })
-        .hide();
-}
-
-/* */
-
 Rkns.Renderer._NodeButton = Rkns.Utils.inherit(Rkns.Renderer._BaseButton);
 
 Rkns.Renderer._NodeButton.prototype.setSectorSize = function() {
@@ -1730,25 +1747,25 @@
     });
     
     if (_renkan.options.size_bug_fix) {
+        var _delay = (
+            typeof _renkan.options.size_bug_fix === "number"
+            ? _renkan.options.size_bug_fix
+            : 500
+        );
         window.setTimeout(
             function() {
-                var w = _this.$.width(),
-                    h = _this.$.height();
-                if (_renkan.options.show_top_bar) {
-                    h -= _this.$.find(".Rk-TopBar").height();
-                }
-                _this.canvas_$.attr({
-                    width: w,
-                    height: h
-                });
-                
-                paper.view.viewSize = new paper.Size([w, h]);
-                _this.autoScale();
+                _this.fixSize(true);
             },
-            500
+            _delay
         );
     }
     
+    if (_renkan.options.force_resize) {
+        $(window).resize(function() {
+            _this.fixSize(false);
+        });
+    }
+    
     this.redraw();
     
     window.setInterval(function() {
@@ -1798,6 +1815,24 @@
     + '</div></div>'
 );
 
+Rkns.Renderer.Scene.prototype.fixSize = function(_autoscale) {
+    var w = this.$.width(),
+        h = this.$.height();
+    if (this.renkan.options.show_top_bar) {
+        h -= this.$.find(".Rk-TopBar").height();
+    }
+    this.canvas_$.attr({
+        width: w,
+        height: h
+    });
+    
+    paper.view.viewSize = new paper.Size([w, h]);
+    
+    if (_autoscale) {
+        this.autoScale();
+    }
+}
+
 Rkns.Renderer.Scene.prototype.drawSector = function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgname, _caption) {
     var _options = this.renkan.options,
         _startRads = _startAngle * Math.PI / 180,