initial skeleton for a jsonPlumb library

2b3df904 · Sebastien Robin · 2bcb75b2 · 2b3df904 · 2b3df904 · 2b3df904
Commit 2b3df904 authored Jun 06, 2013 by Sebastien Robin
4 changed files
--- a/DREAM/dream/dream/platform/static/css/demo-new.css
+++ b/DREAM/dream/dream/platform/static/css/demo-new.css
@@ -76,6 +76,16 @@ body {
  border-radius: 10px;
 }

+#tools {
+  position: absolute;
+  width: 200px;
+  height: 500px;
+  border: 2px solid;
+  margin-top: 20px;
+  margin-left: 35px;
+  border-radius: 10px;
+}
+
 #not_available {
  position: absolute;
  width: 200px;

--- a/DREAM/dream/dream/platform/static/index.html
+++ b/DREAM/dream/dream/platform/static/index.html
@@ -9,6 +9,11 @@
 	<body data-demo-id="flowchartConnectorsDemo" data-library="jquery">
 		
 		<div id="headerWrapper"><div id="header"></div></div>		
+      <div id="tools">
+        Tools
+        <ul>
+        </ul>
+      </div>
        <div id="main">
 			<div id="render"></div>
      <div id="available">
@@ -92,6 +97,7 @@
 		
 		<!--  demo code -->
 		<script src="src/dream.js"></script>
+    <script src="src/jsonPlumb.js"></script>
    <script src="src/dream_launcher.js"></script>
 		
 		<!--  demo helper code -->

--- a/DREAM/dream/dream/platform/static/src/dream_launcher.js
+++ b/DREAM/dream/dream/platform/static/src/dream_launcher.js
@@ -18,8 +18,10 @@
        {id: 'window11', title: 'packaging', throughput: 27, coordinate: {top: 20, left: 55}},
    ];

-    dream_instance = DREAM.newDream(graph_data);
-    dream_instance.start();
+    //dream_instance = DREAM.newDream(graph_data);
+    //dream_instance.start();
+    dream_instance = jsonPlumb.newJsonPlumb();
+    dream_instance.newElement({id : 'foo'})

    //Fill list of people
    people_list = ["Worker1", "Worker2", "Worker3", "Worker4", "Worker5", "Worker6", "Worker7", "Worker8"];

--- a/DREAM/dream/dream/platform/static/src/jsonPlumb.js
+++ b/DREAM/dream/dream/platform/static/src/jsonPlumb.js
+(function (scope, $, jsPlumb, console, _) {
+  "use strict";
+  var jsonPlumb = function (model) {
+    var that = {}, priv = {};
+
+    priv.onError = function(error) {
+       console.log("Error", error);
+    };
+
+    priv.initJsPlumb = function () {
+      jsPlumb.setRenderMode(jsPlumb.SVG);
+      jsPlumb.importDefaults({
+        // default drag options
+        DragOptions : { cursor: 'pointer', zIndex:2000 },
+        EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
+        PaintStyle : {strokeStyle:"#736AFF", lineWidth:2 },
+        HoverPaintStyle : {strokeStyle:"#42a62c", lineWidth:2 },
+        Endpoint : [ "Dot", {radius:2} ],
+        ConnectionOverlays : [
+          [ "Arrow", { 
+            location:1,
+            id:"arrow",
+                      length:14,
+                      foldback:0.8
+          } ],
+        ],
+        Anchor: "Continuous",
+        Connector: ["StateMachine", { curviness:20 }],
+      });     
+
+      var init = function(connection) {
+        connection.bind("editCompleted", function(o) {
+        });
+      };      
+            
+      // listen for new connections; initialise them the same way we initialise the connections at startup.
+      jsPlumb.bind("jsPlumbConnection", function(connInfo, originalEvent) { 
+        init(connInfo.connection);
+      });     
+            
+      // make all the window divs draggable           
+      jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
+
+      // listen for clicks on connections, and offer to change values on click.
+      jsPlumb.bind("click", function(conn, originalEvent) {
+        console.log("user click connection", conn);
+        priv.dialog_connection = conn;
+        $( "#dialog-form" ).dialog( "open" );
+      }); 
+      
+      jsPlumb.bind("connectionDrag", function(connection) {
+        console.log("connection " + connection.id + " is being dragged");
+      });   
+      
+      jsPlumb.bind("connectionDragStop", function(connection) {
+        console.log("connection " + connection.id + " was dragged");
+      });
+      
+      jsPlumb.makeTarget(jsPlumb.getSelector(".w"), {
+        dropOptions:{ hoverClass:"dragHover" },
+        anchor:"Continuous"     
+      });
+
+    };
+
+    Object.defineProperty(that, "start", {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: function () {
+        //priv.setModel();
+        priv.element_list = [];
+        priv.initJsPlumb();
+        //priv.initDialog();
+        //priv.displayGraph();
+        //priv.refreshModelRegularly();
+      }
+    });
+
+    Object.defineProperty(that, "newElement", {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: function (element) {
+        var render_element, style_string;
+        render_element = $("[id=render]");
+        render_element.append('<div class="window" id="' +
+                          element.id + '" ' + style_string + '">'
+                          + '</div>');
+        priv.element_list.push(element);
+      }
+    });
+
+    return that;
+  };
+  var JsonPlumbNamespace = (function () {
+    var that = {};
+
+    /**
+    * Creates a new dream instance.
+    * @method newDream
+    * @param  {object} model The model definition
+    * @return {object} The new Dream instance.
+    */
+    Object.defineProperty(that, "newJsonPlumb", {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: function (model) {
+        var instance = jsonPlumb(model);
+        return instance;
+      }
+    });
+
+    return that;
+  })();
+
+  Object.defineProperty(scope, "jsonPlumb", {
+    configurable: false,
+    enumerable: false,
+    writable: false,
+    value: JsonPlumbNamespace
+  });
+
+}(window, jQuery, jsPlumb, console, _));