shape builder for node
authorcavaliet
Tue, 09 Sep 2014 17:49:31 +0200
changeset 326 e4afd8643576
parent 325 f1f71980ad29
child 327 239d372644a0
shape builder for node
client/js/renderer/noderepr.js
client/js/renderer/shapebuilder.js
client/test/test-writable-bins-save-on-click.html
--- a/client/js/renderer/noderepr.js	Fri Aug 29 16:02:19 2014 +0200
+++ b/client/js/renderer/noderepr.js	Tue Sep 09 17:49:31 2014 +0200
@@ -1,6 +1,6 @@
 
 
-define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) {
+define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation', 'renderer/shapebuilder'], function ($, _, requtils, BaseRepresentation, ShapeBuilder) {
     'use strict';
 
     var Utils = requtils.getUtils();
@@ -16,9 +16,13 @@
 
     _(NodeRepr.prototype).extend({
         _init: function() {
+            //console.log("INIT",this.model.get("shape"), ShapeBuilder);
             this.renderer.node_layer.activate();
             this.type = "Node";
-            this.circle = new paper.Path.Circle([0, 0], 1);
+            this.shapeBuilder = new ShapeBuilder(this.model.get("shape"));
+            // "circle" "rectangle" "ellipse" "regularpolygon" "star"
+            //this.shapeBuilder = new ShapeBuilder("diamond");
+            this.circle = this.shapeBuilder.getShape();
             this.circle.__representation = this;
             if (this.options.show_node_circles) {
                 this.circle.strokeWidth = this.options.node_stroke_width;
@@ -187,7 +191,7 @@
                 _clip = null,
                 baseRadius = null,
                 centerPoint = null;
-
+                
                 if (hasClipPath) {
                     _clip = new paper.Path();
                     var instructions = clipPath.match(/[a-z][^a-z]+/gi) || [],
@@ -276,7 +280,7 @@
                     _clip.__representation = this;
                 }
                 if (this.options.clip_node_images) {
-                    var _circleClip = new paper.Path.Circle(centerPoint, baseRadius);
+                    var _circleClip = this.shapeBuilder.getImageShape(centerPoint, baseRadius);
                     _raster = new paper.Group(_circleClip, _raster);
                     _raster.opacity = 0.99;
                     _raster.clipped = true;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/renderer/shapebuilder.js	Tue Sep 09 17:49:31 2014 +0200
@@ -0,0 +1,71 @@
+
+define([], function () {
+    'use strict';
+
+    /* ShapeBuilder Begin */
+
+    var builders = {
+        "circle":{
+            getShape: function() {
+                return new paper.Path.Circle([0, 0], 1);
+            },
+            getImageShape: function(center, radius) {
+                return new paper.Path.Circle(center, radius);
+            }
+        },
+        "rectangle":{
+            getShape: function() {
+                return new paper.Path.Rectangle([-2, -2], [2, 2]);
+            },
+            getImageShape: function(center, radius) {
+                return new paper.Path.Rectangle([-radius, -radius], [radius*2, radius*2]);
+            }
+        },
+        "ellipse":{
+            getShape: function() {
+                return new paper.Path.Ellipse(new paper.Rectangle([-2, -1], [2, 1]));
+            },
+            getImageShape: function(center, radius) {
+                return new paper.Path.Ellipse(new paper.Rectangle([-radius, -radius/2], [radius*2, radius]));
+            }
+        },
+        "polygon":{
+            getShape: function() {
+                return new paper.Path.RegularPolygon([0, 0], 6, 1);
+            },
+            getImageShape: function(center, radius) {
+                return new paper.Path.RegularPolygon([0, 0], 6, radius);
+            }
+        },
+        "diamond":{
+            getShape: function() {
+                var d = new paper.Path.Rectangle([-2, -2], [2, 2]);
+                d.rotate(45);
+                return d;
+            },
+            getImageShape: function(center, radius) {
+                var d = new paper.Path.Rectangle([-radius, -radius], [radius*2, radius*2]);
+                d.rotate(45);
+                return d;
+            }
+        },
+        "star":{
+            getShape: function() {
+                return new paper.Path.Star([0, 0], 8, 1, 0.7);
+            },
+            getImageShape: function(center, radius) {
+                return new paper.Path.Star([0, 0], 8, radius*1, radius*0.7);
+            }
+        },
+    };
+    
+    var ShapeBuilder = function (shape){
+        if(!(shape in builders)){
+            shape = "circle";
+        }
+        return builders[shape];
+    };
+
+    return ShapeBuilder;
+
+});
--- a/client/test/test-writable-bins-save-on-click.html	Fri Aug 29 16:02:19 2014 +0200
+++ b/client/test/test-writable-bins-save-on-click.html	Tue Sep 09 17:49:31 2014 +0200
@@ -41,13 +41,6 @@
 			    ],
 			    bins: [
 			        {
-			            title: "Projet Lignes de Temps",
-			            type: "Ldt",
-			            ldt_type: "Project",
-			            project_id: "6af4019c-8283-11e2-9678-00145ea4a2be",
-			            ldt_platform: "http://ldt.iri.centrepompidou.fr/"
-			       },
-			        {
 			            type: "ResourceList",
 			            title: "Ressources",
 			            list: [