Accordion for module list in WiringEditor

ryedin · Dec 31, 2009 · 070f147 · 070f147
1 parent 75dd72f
commit 070f147
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 56 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,22 +571,68 @@ YAHOO.lang.extend(WireIt.Wire, WireIt.CanvasElement, {
     * @method redraw
     */
    redraw: function() {
+		//var positions;
       if(this.options.drawingMethod == 'straight') {
          this.drawStraight();
       }
       else if(this.options.drawingMethod == 'arrows') {
          this.drawArrows();
       }
       else if(this.options.drawingMethod == 'bezier') {
-         this.drawBezierCurve();
+         //positions = this.drawBezierArrows();
+			this.drawBezierCurve();
       }
 	   else if(this.options.drawingMethod == 'bezierArrows') {
          this.drawBezierArrows();
 	   }
       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.