Added optional fill circle mode
authorveltr
Wed, 15 May 2013 15:40:09 +0200
changeset 185 ad8c900d87e5
parent 182 b35d49cdf30f
child 186 a260675bdef7
Added optional fill circle mode
client/js/defaults.js
client/js/main.js
client/js/paper-renderer.js
client/render-test.html
--- a/client/js/defaults.js	Tue May 14 14:40:31 2013 +0200
+++ b/client/js/defaults.js	Wed May 15 15:40:09 2013 +0200
@@ -57,6 +57,9 @@
         /* Show circles for nodes */
     clip_node_images: true,
         /* Constraint node images to circles */
+    node_images_fill_mode: false,
+        /* Set to false for "letterboxing" (height/width of node adapted to show full image)
+           Set to true for "crop" (adapted to fill circle) */
     node_size_base: 25,
     node_stroke_width: 2,
     selected_node_stroke_width: 4,
--- a/client/js/main.js	Tue May 14 14:40:31 2013 +0200
+++ b/client/js/main.js	Wed May 15 15:40:09 2013 +0200
@@ -1,4 +1,11 @@
 /* 
+    _____            _               
+   |  __ \          | |              
+   | |__) |___ _ __ | | ____ _ _ __  
+   |  _  // _ \ '_ \| |/ / _` | '_ \ 
+   | | \ \  __/ | | |   < (_| | | | |
+   |_|  \_\___|_| |_|_|\_\__,_|_| |_|
+
  *  Copyright 2012-2013 Institut de recherche et d'innovation 
  *  contributor(s) : Yves-Marie Haussonne, Raphael Velt, Samuel Huron
  *   
--- a/client/js/paper-renderer.js	Tue May 14 14:40:31 2013 +0200
+++ b/client/js/paper-renderer.js	Wed May 15 15:40:09 2013 +0200
@@ -408,35 +408,39 @@
                 }
             });
             
-            var baseScale = Math.max(maxX - minX, maxY - minY) / 2;
-            this.image_delta = new paper.Point((maxX + minX) / (2 * baseScale), (maxY + minY) / (2 * baseScale));
+            var baseRadius = Math[this.options.node_images_fill_mode ? "min" : "max"](maxX - minX, maxY - minY) / 2,
+                centerPoint = new paper.Point((maxX + minX) / 2, (maxY + minY) / 2);
             if (!this.options.show_node_circles) {
-                this.h_ratio = (maxY - minY) / (2 * baseScale);
+                this.h_ratio = (maxY - minY) / (2 * baseRadius);
             }
         } else {
-            var baseScale = Math.max(width, height) / 2;
-            this.image_delta = new paper.Point(0,0);
+            var baseRadius = Math[this.options.node_images_fill_mode ? "min" : "max"](width, height) / 2,
+                centerPoint = new paper.Point(0,0);
             if (!this.options.show_node_circles) {
-                this.h_ratio = height / (2 * baseScale);
+                this.h_ratio = height / (2 * baseRadius);
             }
         }
         var _raster = new paper.Raster(_image);
-        if (this.options.clip_node_images || hasClipPath) {
-            if (!hasClipPath) {
-                var _clip = new paper.Path.Circle([0, 0], baseScale);
-            }
-            this.node_image = new paper.Group(_clip, _raster);
-            this.node_image.opacity = .99;
+        if (hasClipPath) {
+            _raster = new paper.Group(_clip, _raster);
+            _raster.opacity = .99;
             /* This is a workaround to allow clipping at group level
              * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
             */
-            this.node_image.clipped = true;
+            _raster.clipped = true;
             _clip.__representation = this;
-        } else {
-            this.node_image = _raster;
         }
+        if (this.options.clip_node_images) {
+            var _circleClip = new paper.Path.Circle(centerPoint, baseRadius);
+            _raster = new paper.Group(_circleClip, _raster);
+            _raster.opacity = .99;
+            _raster.clipped = true;
+            _circleClip.__representation = this;
+        }
+        this.image_delta = centerPoint.divide(baseRadius);
+        this.node_image = _raster;
         this.node_image.__representation = _this;
-        this.node_image.scale(this.circle_radius / baseScale);
+        this.node_image.scale(this.circle_radius / baseRadius);
         this.node_image.position = this.paper_coords.subtract(this.image_delta.multiply(this.circle_radius));
         this.redraw();
         this.renderer.throttledPaperDraw();
--- a/client/render-test.html	Tue May 14 14:40:31 2013 +0200
+++ b/client/render-test.html	Wed May 15 15:40:09 2013 +0200
@@ -26,8 +26,9 @@
             var _renkan;
             $(function() {
                 _renkan = new Rkns.Renkan({
-                    //show_node_circles: false,
-                    //clip_node_images: false,
+                    show_node_circles: false,
+                    clip_node_images: false,
+                    //node_images_fill_mode: true,
                     bins: [
                     	{
                             title: "Projet Lignes de Temps",