From 070f1473b141c22b4570e18c0f871c557c9b1cbc Mon Sep 17 00:00:00 2001
From: neyric <eric.abouaf@gmail.com>
Date: Thu, 31 Dec 2009 13:30:17 +0100
Subject: [PATCH] Accordion for module list in WiringEditor

---
 css/WireItEditor.css              |   2 +-
 examples/WiringEditor/demo.js     |   5 +
 examples/WiringEditor/index.html  |  24 +++++
 examples/logicGates/index.html    |  21 ++++-
 examples/logicGates/logicGates.js |  14 ++-
 js/Wire.js                        |  51 ++++++++++-
 js/WiringEditor.js                | 147 ++++++++++++++++++++----------
 7 files changed, 208 insertions(+), 56 deletions(-)

diff --git a/css/WireItEditor.css b/css/WireItEditor.css
index 4419e333..ce7627b7 100644
--- a/css/WireItEditor.css
+++ b/css/WireItEditor.css
@@ -87,7 +87,7 @@ div.savedStatus {
  */
  
 .WiringEditor-module {
-   cursor: pointer;
+   cursor: move;
    background-color: #AADDDD;
    margin: 5px;
    padding: 2px;
diff --git a/examples/WiringEditor/demo.js b/examples/WiringEditor/demo.js
index 078d19ed..ca420104 100644
--- a/examples/WiringEditor/demo.js
+++ b/examples/WiringEditor/demo.js
@@ -19,6 +19,7 @@ var demoLanguage = {
 	
 	   {
 	      "name": "FormContainer",
+			"category": "form",
 	      "container": {
 	   		"xtype": "WireIt.FormContainer",
 	   		"title": "WireIt.FormContainer demo",    
@@ -57,6 +58,7 @@ var demoLanguage = {
 
 	      {
 	         "name": "AND gate",
+				"category": "images",
 	         "container": {
 	      		"xtype":"WireIt.ImageContainer", 
 	      		"image": "../logicGates/images/gate_and.png",
@@ -72,6 +74,7 @@ var demoLanguage = {
 
 				{
 					"name": "Bubble",
+					"category": "images",
 					"container": {
 	         		"xtype":"WireIt.ImageContainer", 
 	         		"className": "WireIt-Container WireIt-ImageContainer Bubble",
@@ -88,6 +91,7 @@ var demoLanguage = {
 
 				{
 					"name": "Other form module",
+					"category": "form",
 					"container": {
 	   				"icon": "../../res/icons/application_edit.png",
 	   				"xtype": "WireIt.FormContainer",
@@ -106,6 +110,7 @@ var demoLanguage = {
 
 				{
 	            "name": "PostContainer",
+					"category": "form",
 	            "container": {
 	         		"xtype": "WireIt.FormContainer",
 	         		"title": "Post",    
diff --git a/examples/WiringEditor/index.html b/examples/WiringEditor/index.html
index 75b1d544..53a746d8 100644
--- a/examples/WiringEditor/index.html
+++ b/examples/WiringEditor/index.html
@@ -148,6 +148,30 @@
 
 
 	<div id="left">
+		
+		 <ul id="modulesAccordionView">
+			<li>
+				<h2>Main</h2>
+				<div>
+					<div id='module-category-main'></div>
+				</div>
+			</li>
+			
+			<li>
+				<h2>Form Modules</h2>
+				<div>
+					<div id='module-category-form'></div>
+				</div>
+			</li>
+			
+			<li>
+				<h2>Image Modules</h2>
+				<div>
+					<div id='module-category-images'></div>
+				</div>
+			</li>
+		</ul>
+		
 	</div>
 	
 	<div id="right">
diff --git a/examples/logicGates/index.html b/examples/logicGates/index.html
index b4a0c141..f7d166e9 100644
--- a/examples/logicGates/index.html
+++ b/examples/logicGates/index.html
@@ -85,7 +85,26 @@
 		</div>
 	</div>
 
-	<div id="left"></div>	
+	<!-- Left panel-->
+	<div id="left">
+		
+		<!-- Accordion for module categories-->
+		 <ul id="modulesAccordionView">
+			<li>
+				<h2>Gates</h2>
+				<div>
+					<div id='module-category-gate'></div>
+				</div>
+			</li>
+			<li>
+				<h2>Variables</h2>
+				<div>
+					<div id='module-category-variable'></div>
+				</div>
+			</li>
+		</ul>
+		
+	</div>	
 	
 	<div id="right">
 		<ul id="accordionView">
diff --git a/examples/logicGates/logicGates.js b/examples/logicGates/logicGates.js
index b3b112cb..dbf15383 100644
--- a/examples/logicGates/logicGates.js
+++ b/examples/logicGates/logicGates.js
@@ -8,7 +8,7 @@ var logicGatesLang = {
 	modules: [
 		{
 			"name": "AND",
-
+			"category": "gate",
 			"container" : {
 				"xtype":"WireIt.ImageContainer", 
 				"image": "../logicGates/images/gate_and.png",
@@ -22,8 +22,8 @@ var logicGatesLang = {
 		},
 
 		{
-		  "name": "OR",
-
+		  "name": "OR",	
+			"category": "gate",
 			"container": {
 		   		"xtype":"WireIt.ImageContainer", 
 		   		"image": "../logicGates/images/gate_or.png",
@@ -36,7 +36,8 @@ var logicGatesLang = {
 		},
 
 		{
-		  "name": "NOT",
+		  "name": "NOT",	
+			"category": "gate",
 		  "container": {
 				"xtype":"WireIt.ImageContainer", 
 			   "image": "../logicGates/images/gate_not.png",
@@ -49,6 +50,7 @@ var logicGatesLang = {
 
 		{
 		   "name": "NAND",
+			"category": "gate",
 		   "container": {
 			   "xtype":"WireIt.ImageContainer", 
 			   "image": "../logicGates/images/gate_nand.png",
@@ -62,6 +64,7 @@ var logicGatesLang = {
 
 		{
 		   "name": "XOR",
+			"category": "gate",
 		   "container": {
 		   	"xtype":"WireIt.ImageContainer", 
 		   	"image": "../logicGates/images/gate_xor.png",
@@ -75,6 +78,7 @@ var logicGatesLang = {
 
 		{
 			"name": "A",
+			"category": "variable",
 			"container" : {
 				"xtype":"WireIt.ImageContainer", 
 				"image": "../logicGates/images/A.png",
@@ -86,6 +90,7 @@ var logicGatesLang = {
 
 		{
 			"name": "B",
+			"category": "variable",
 			"container" : {
 				"xtype":"WireIt.ImageContainer", 
 				"image": "../logicGates/images/B.png",
@@ -97,6 +102,7 @@ var logicGatesLang = {
 
 		{
 			"name": "C",
+			"category": "variable",
 			"container" : {
 				"xtype":"WireIt.ImageContainer", 
 				"image": "../logicGates/images/C.png",
diff --git a/js/Wire.js b/js/Wire.js
index 26199628..b8a2da9b 100644
--- a/js/Wire.js
+++ b/js/Wire.js
@@ -217,7 +217,6 @@ YAHOO.lang.extend(WireIt.Wire, WireIt.CanvasElement, {
       ctxt.moveTo(bezierPoints[0][0],bezierPoints[0][1]);
       ctxt.bezierCurveTo(bezierPoints[1][0],bezierPoints[1][1],bezierPoints[2][0],bezierPoints[2][1],bezierPoints[3][0],bezierPoints[3][1]);
       ctxt.stroke();
-   
    },
 
 	/**
@@ -380,6 +379,8 @@ YAHOO.lang.extend(WireIt.Wire, WireIt.CanvasElement, {
    	ctxt.lineTo(t2[0],t2[1]);
    	ctxt.stroke();
 
+		
+		return [p1,p2,t1,t2];
    },
 
 
@@ -570,6 +571,7 @@ YAHOO.lang.extend(WireIt.Wire, WireIt.CanvasElement, {
     * @method redraw
     */
    redraw: function() {
+		//var positions;
       if(this.options.drawingMethod == 'straight') {
          this.drawStraight();
       }
@@ -577,7 +579,8 @@ YAHOO.lang.extend(WireIt.Wire, WireIt.CanvasElement, {
          this.drawArrows();
       }
       else if(this.options.drawingMethod == 'bezier') {
-         this.drawBezierCurve();
+         //positions = this.drawBezierArrows();
+			this.drawBezierCurve();
       }
 	   else if(this.options.drawingMethod == 'bezierArrows') {
          this.drawBezierArrows();
@@ -585,7 +588,51 @@ YAHOO.lang.extend(WireIt.Wire, WireIt.CanvasElement, {
       else {
          throw new Error("WireIt.Wire unable to find '"+this.drawingMethod+"' drawing method.");
       }
+
+		//this.drawLabel(positions);
    },
+
+	drawLabel: function(positions) {
+		
+		var p1 = positions[0];
+		var p2 = positions[1];
+		var t1 = positions[2];
+		var t2 = positions[3];
+		
+		var winkel = 0;
+		var distance = 20;
+		
+   	var ctxt=this.getContext();
+		ctxt.save();
+		
+		//1.Quadrant
+      if ((p1[0]<p2[0])&&(p1[1]>p2[1])){
+         winkel=Math.PI*1.5+winkel;
+         ctxt.translate(t1[0],t1[1]);
+      }
+      //2. Quadrant
+      else if ((p1[0]<p2[0])&&(p1[1]<p2[1])){
+         winkel = Math.PI/2-winkel;
+         ctxt.translate(t1[0],t1[1]);
+      }
+      //3. Quadrant
+      else if ((p1[0]>p2[0])&&(p1[1]<p2[1])){
+         //winkel = Math.PI/2+winkel;
+        winkel = Math.PI*1.5+winkel;
+        ctxt.translate(t2[0],t2[1]);
+      }
+      //4. Quadrant
+      else if ((p1[0]>p2[0])&&(p1[1]>p2[1])){
+         winkel=Math.PI*0.5-winkel;
+         ctxt.translate(t2[0],t2[1]);
+      }
+       ctxt.rotate(winkel);
+      ctxt.font = "14px Arial";
+      ctxt.fillStyle = "Black";
+      ctxt.translate((distance-(ctxt.measureText("Sample String")).width)/2,0);
+      ctxt.fillText("Sample String", 0, 0);
+      ctxt.restore();
+	},
    
    /**
     * Determine if the wire is drawn at position (x,y) relative to the canvas element. This is used for mouse events.
diff --git a/js/WiringEditor.js b/js/WiringEditor.js
index 335fea4a..e80c0f07 100644
--- a/js/WiringEditor.js
+++ b/js/WiringEditor.js
@@ -82,53 +82,10 @@ WireIt.WiringEditor = function(options) {
      */
     this.el = Dom.get(options.parentEl);
     
-    /**
-     * @property helpPanel
-     * @type {YAHOO.widget.Panel}
-     */
-    this.helpPanel = new widget.Panel('helpPanel', {
-        fixedcenter: true,
-        draggable: true,
-        visible: false,
-        modal: true
-     });
-     this.helpPanel.render();
-	
-    
-    /**
-     * @property layout
-     * @type {YAHOO.widget.Layout}
-     */
-    this.layout = new widget.Layout(this.el, this.options.layoutOptions);
-    this.layout.render();
-
-	 // Right accordion
-    this.renderAccordion();
-
-    /**
-     * @property layer
-     * @type {WireIt.Layer}
-     */
-    this.layer = new WireIt.Layer(this.options.layerOptions);
-	 this.layer.eventChanged.subscribe(this.onLayerChanged, this, true);
-
-	 /**
-	  * @property leftEl
-	  * @type {DOMElement}
-	  */
-    this.leftEl = Dom.get('left');
-
-    // Render module list
-    this.buildModulesList();
-
-    // Render buttons
-    this.renderButtons();
 
- 	 // Saved status
-	 this.renderSavedStatus();
+	 // Rendering
+	 this.render();
 
-    // Properties Form
-    this.renderPropertiesForm();
 
 	 // LoadWirings
 	 if( this.adapter.init && YAHOO.lang.isFunction(this.adapter.init) ) {
@@ -187,19 +144,101 @@ WireIt.WiringEditor.prototype = {
 	 this.options.accordionViewParams = options.accordionViewParams || {
 												collapsible: true, 
 												expandable: true, // remove this parameter to open only one panel at a time
-												width: '308px', 
+												//width: '308px', 
+												width: 'auto', 
 												expandItem: 0, 
 												animationSpeed: '0.3', 
 												animate: true, 
 												effect: YAHOO.util.Easing.easeBothStrong
 											};
+											
+		this.options.modulesAccordionViewParams = options.modulesAccordionViewParams || {
+													collapsible: true, 
+													expandable: true, // remove this parameter to open only one panel at a time
+													width: 'auto', 
+													expandItem: 0, 
+													animationSpeed: '0.3', 
+													animate: true, 
+													effect: YAHOO.util.Easing.easeBothStrong
+												};
  },
 
+
+  render: function() {
+	
+	    /**
+	     * @property helpPanel
+	     * @type {YAHOO.widget.Panel}
+	     */
+	    this.helpPanel = new widget.Panel('helpPanel', {
+	        fixedcenter: true,
+	        draggable: true,
+	        visible: false,
+	        modal: true
+	     });
+	     this.helpPanel.render();
+
+
+	    /**
+	     * @property layout
+	     * @type {YAHOO.widget.Layout}
+	     */
+	    this.layout = new widget.Layout(this.el, this.options.layoutOptions);
+	    this.layout.render();
+
+		 // Right accordion
+	    this.renderPropertiesAccordion();
+
+	    /**
+	     * @property layer
+	     * @type {WireIt.Layer}
+	     */
+	    this.layer = new WireIt.Layer(this.options.layerOptions);
+		 this.layer.eventChanged.subscribe(this.onLayerChanged, this, true);
+
+		 // Left Accordion
+		 this.renderModulesAccordion();
+
+	    // Render module list
+	    this.buildModulesList();
+	
+		 
+	    // Render buttons
+	    this.renderButtons();
+
+	 	 // Saved status
+		 this.renderSavedStatus();
+
+	    // Properties Form
+	    this.renderPropertiesForm();
+	
+  },
+
+	renderModulesAccordion: function() {
+		
+		// Create the modules accordion DOM if not found
+		if(!Dom.get('modulesAccordionView')) {
+			Dom.get('left').appendChild( WireIt.cn('ul', {id: 'modulesAccordionView'}) );
+			var li = WireIt.cn('li');
+			li.appendChild(WireIt.cn('h2',null,null,"Main"));
+			var d = WireIt.cn('div');
+			d.appendChild( WireIt.cn('div', {id: "module-category-main"}) );
+			li.appendChild(d);
+			Dom.get('modulesAccordionView').appendChild(li);
+		}
+		
+		this.modulesAccordionView = new YAHOO.widget.AccordionView('modulesAccordionView', this.options.modulesAccordionViewParams);
+		
+		// Open all panels
+		for(var l = 1, n = this.modulesAccordionView.getPanels().length; l < n ; l++) {
+			this.modulesAccordionView.openPanel(l);
+		}
+	},
 	
 	/**
 	 * Render the accordion using yui-accordion
   	 */
-	renderAccordion: function() {
+	renderPropertiesAccordion: function() {
 		this.accordionView = new YAHOO.widget.AccordionView('accordionView', this.options.accordionViewParams);
 	},
  
@@ -251,7 +290,19 @@ WireIt.WiringEditor.prototype = {
       var ddProxy = new WireIt.ModuleProxy(div, this);
       ddProxy._module = module;
 
-      this.leftEl.appendChild(div);
+		// Get the category element in the accordion or create a new one
+		var category = module.category || "main";
+		var el = Dom.get("module-category-"+category);
+		if( !el ) {
+			this.modulesAccordionView.addPanel({
+				label: category,
+				content: "<div id='module-category-"+category+"'></div>"
+			});
+			this.modulesAccordionView.openPanel(this.modulesAccordionView._panels.length-1);
+			el = Dom.get("module-category-"+category);
+		}
+		
+		el.appendChild(div);
  },
  
  /**