Adding Wire labels

ericabouaf · Aug 4, 2010 · 5f4a5aa · 5f4a5aa
1 parent b5c146e
commit 5f4a5aa
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 46 deletions.
diff --git a/assets/WireIt.css b/assets/WireIt.css
@@ -23,6 +23,12 @@ div.WireIt-Wire-scissors {
    cursor: pointer;
 }
 
+div.WireIt-Wire-Label {
+	position: absolute;
+	height: auto;
+	width: auto;
+}
+
 /**
  * Terminals :
  */

diff --git a/examples/labels.html b/examples/labels.html
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html>
+ <head>
+  <title>WireIt Example, Move and Animate elements containing terminals</title>
+
+<!-- Libs -->
+<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" /> 
+<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
+<script type="text/javascript" src="../lib/excanvas.js"></script>
+
+<!-- WireIt -->
+<script type="text/javascript" src="../build/wireit-min.js"></script>
+
+<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/inputex.js"></script>
+<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/Field.js"></script>
+<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/widgets/button.js"></script>
+<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/fields/StringField.js"></script>
+<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/fields/InPlaceEdit.js"></script>
+<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/Visus.js"></script>
+<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/mixins/choice.js"></script>
+<script type="text/javascript" src="../plugins/inputex/lib/inputex/js/fields/SelectField.js"></script>
+
+<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
+
+<link rel="stylesheet" type="text/css" href="../plugins/inputex/lib/inputex/css/inputEx.css" />
+
+<style>
+
+div.blockBox {
+	/* WireIt */
+	position: absolute;
+	z-index: 5;
+	opacity: 0.8;
+
+	/* Others */
+	width: 100px;
+	height: 100px;
+	background-color: rgb(255,200,200);
+	cursor: move;
+}
+
+</style>
+
+<script>
+window.onload = function() {
+
+	// Create 2 terminals into Block1
+	var block1 = YAHOO.util.Dom.get('block1');
+	var terminals1 = [new WireIt.Terminal(block1, {direction: [-1,0], offsetPosition: [-14,35]}), 
+							new WireIt.Terminal(block1, {direction: [1,0], offsetPosition: [85,35]})];
+
+	// Make the block1 draggable
+	new WireIt.util.DD(terminals1,block1); 
+
+	// Create 2 terminals into Block2
+	var block2 = YAHOO.util.Dom.get('block2');
+	var terminals2 = [new WireIt.Terminal(block2, {direction: [-1,0], offsetPosition: [-14,35]}), 
+							new WireIt.Terminal(block2, {direction: [1,0], offsetPosition: [85,35]})];
+
+	// Make the block2 draggable
+	new WireIt.util.DD(terminals2,block2);
+
+	// Create a wire between some terminals
+	var w1 = new WireIt.BezierWire(terminals1[0], terminals2[0], document.body, {label: "Hello world !", labelStyle: {fontSize: "16pt", fontWeight: "bold", color: "yellow", backgroundColor: "black", border: "2px solid red"} });
+	w1.redraw();
+
+	var w2 = new WireIt.BezierWire(terminals1[1], terminals2[1], document.body, {
+
+		label: 'test',
+		labelEditor: /*{type: 'string', value: "Testst"}*/
+		{ 
+			        type:'select',  
+			        name: 'pagerank', 
+			        choices: ['0','1','2','3','4','5','6','7','8','9','10'] 
+		    }
+
+	});
+	w2.redraw();
+
+};
+
+
+</script>
+
+ </head>
+ <body>
+
+	<p style="margin: 15px;"><a href="../index.html">&lt; Back</a></p>
+	<p style="margin: 15px;">Show usage of WireIt.util.DD to make terminal containers draggable</p>
+
+	<div id='block1' class="blockBox" style="left: 300px; top: 100px;">Move Me !</div>
+
+	<div id='block2' class="blockBox" style="left: 500px; top: 200px;">Move Me !</div>
+
+ </body>
+</html>
diff --git a/examples/planarGame/planarGame.js b/examples/planarGame/planarGame.js
@@ -153,7 +153,7 @@ var planarGame = {
 
 	      this.wires[nWires] = new WireIt.Wire( this.bubbles[src].terminals[ bubblesTerminals[src]++] ,
 			 											   this.bubbles[tgt].terminals[ bubblesTerminals[tgt]++], 
-														   document.body, {drawingMethod: 'straight', width: 1, bordercolor: "#b0b0b0"});
+														   document.body, {width: 1, bordercolor: "#b0b0b0"});
 		   this.wires[nWires].redraw();
 		   nWires++;
 	   }

diff --git a/js/ArrowWire.js b/js/ArrowWire.js
@@ -35,7 +35,11 @@ YAHOO.lang.extend(WireIt.ArrowWire, WireIt.Wire, {
 
       var min=[ Math.min(p1[0],p2[0])-margin[0], Math.min(p1[1],p2[1])-margin[1]];
       var max=[ Math.max(p1[0],p2[0])+margin[0], Math.max(p1[1],p2[1])+margin[1]];
-
+
+		// Store the min, max positions to display the label later
+		this.min = min;
+		this.max = max;      
+
       // Redimensionnement du canvas
 
       var lw=Math.abs(max[0]-min[0])+redim;

diff --git a/js/BezierArrowWire.js b/js/BezierArrowWire.js
@@ -53,6 +53,7 @@ YAHOO.lang.extend(WireIt.BezierArrowWire, WireIt.BezierWire, {
       bezierPoints[1] = [p1[0]+d1[0],p1[1]+d1[1]];
       bezierPoints[2] = [p2[0]+d2[0],p2[1]+d2[1]];
       bezierPoints[3] = p2;
+
       var min = [p1[0],p1[1]];
       var max = [p1[0],p1[1]];
       for(var i=1 ; i<bezierPoints.length ; i++){
@@ -79,6 +80,10 @@ YAHOO.lang.extend(WireIt.BezierArrowWire, WireIt.BezierWire, {
       var lw = Math.abs(max[0]-min[0]);
       var lh = Math.abs(max[1]-min[1]);
 
+		// Store the min, max positions to display the label later
+		this.min = min;
+		this.max = max;
+
       this.SetCanvasRegion(min[0],min[1],lw,lh);
 
       var ctxt = this.getContext();

diff --git a/js/BezierWire.js b/js/BezierWire.js
@@ -57,7 +57,7 @@ YAHOO.lang.extend(WireIt.BezierWire, WireIt.Wire, {
                 this.terminal1.options.direction[1]*coeffMulDirection];
       var d2 = [this.terminal2.options.direction[0]*coeffMulDirection,
                 this.terminal2.options.direction[1]*coeffMulDirection];
-   
+
       var bezierPoints=[];
       bezierPoints[0] = p1;
       bezierPoints[1] = [p1[0]+d1[0],p1[1]+d1[1]];
@@ -88,7 +88,11 @@ YAHOO.lang.extend(WireIt.BezierWire, WireIt.Wire, {
       max[1] = max[1]+margin[1];
       var lw = Math.abs(max[0]-min[0]);
       var lh = Math.abs(max[1]-min[1]);
-
+
+   	// Store the min, max positions to display the label later
+		this.min = min;
+		this.max = max;
+
       this.SetCanvasRegion(min[0],min[1],lw,lh);
 
       var ctxt = this.getContext();

diff --git a/js/Wire.js b/js/Wire.js
@@ -72,7 +72,12 @@ WireIt.Wire = function( terminal1, terminal2, parentEl, options) {
 
    // CSS classname
    YAHOO.util.Dom.addClass(this.element, this.options.className);
-
+
+   // Label
+	if(this.options.label) {
+		this.renderLabel();
+	}
+
    // Call addWire on both terminals
    this.terminal1.addWire(this);
    this.terminal2.addWire(this);
@@ -112,6 +117,8 @@ YAHOO.lang.extend(WireIt.Wire, WireIt.CanvasElement, {
 
 		// Label
 		this.options.label = options.label;
+		this.options.labelStyle = options.labelStyle;
+		this.options.labelEditor = options.labelEditor;
    },
 
    /**
@@ -161,7 +168,11 @@ YAHOO.lang.extend(WireIt.Wire, WireIt.CanvasElement, {
 
       var min=[ Math.min(p1[0],p2[0])-margin[0], Math.min(p1[1],p2[1])-margin[1]];
       var max=[ Math.max(p1[0],p2[0])+margin[0], Math.max(p1[1],p2[1])+margin[1]];
-
+
+		// Store the min, max positions to display the label later
+		this.min = min;
+		this.max = max;      
+
       // Redimensionnement du canvas
       var lw=Math.abs(max[0]-min[0]);
       var lh=Math.abs(max[1]-min[1]);
@@ -204,52 +215,47 @@ YAHOO.lang.extend(WireIt.Wire, WireIt.CanvasElement, {
       this.draw();
 
 		if(this.options.label) {
-			this.drawLabel();
+			this.positionLabel();
 		}
    },
 
-	drawLabel: function(positions) {
+	/**
+	 * Render the label container
+	 */
+	renderLabel: function() {
 
-		var p1 = positions[0];
-		var p2 = positions[1];
-		var t1 = positions[2];
-		var t2 = positions[3];
+		this.labelEl = WireIt.cn('div',{className:"WireIt-Wire-Label"}, (this.options.labelStyle || {}) );
 
-		var winkel = 0;
-		var distance = 15;
+		if(this.options.labelEditor) {
+			this.labelField = new inputEx.InPlaceEdit({parentEl: this.labelEl, editorField: this.options.labelEditor, animColors:{from:"#FFFF99" , to:"#DDDDFF"} });
+			this.labelField.setValue(this.options.label);
+		}
+		else {
+			this.labelEl.innerHTML = this.options.label;
+		}
 
-		var ctxt=this.getContext();
-		ctxt.save();
+		this.element.parentNode.appendChild(this.labelEl);
 
-		//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);
+	},
+
+	/**
+	 * Set the label
+	 */
+	setLabel: function(val) {
+		if(this.options.labelEditor) {
+			this.labelField.setValue(val);
+		}
+		else {
+			this.labelEl.innerHTML = val;
+		}
+	},
 
-      ctxt.font = "14px Arial";
-      ctxt.fillStyle = "Black";
-      ctxt.translate((distance-(ctxt.measureText(this.options.label)).width)/2,0);
-      ctxt.fillText(this.options.label, 0, 0);
-      ctxt.restore();
+	/**
+	 * Position the label element to the center
+	 */
+	positionLabel: function() {
+	  YAHOO.util.Dom.setStyle(this.labelEl,"left",(this.min[0]+this.max[0]-this.labelEl.clientWidth)/2);
+	  YAHOO.util.Dom.setStyle(this.labelEl,"top",(this.min[1]+this.max[1]-this.labelEl.clientHeight)/2);
 	},
 
    /**
@@ -364,6 +370,11 @@ YAHOO.lang.extend(WireIt.Wire, WireIt.CanvasElement, {
          obj.xtype = this.options.xtype;
       }
 
+		// Export the label value
+		if(this.options.labelEditor) {
+			obj.value = this.labelField.getValue();
+		}
+
       return obj;
    }
 

diff --git a/plugins/layout/examples/dotparser/index.html b/plugins/layout/examples/dotparser/index.html
@@ -64,7 +64,7 @@
 		layer.addWire({
 			src: {moduleId: graph.nodes.indexOf(edge.node1), terminalId: 0},
 			tgt: {moduleId: graph.nodes.indexOf(edge.node2), terminalId: 0},
-			drawingMethod: "straight"
+			xtype: "WireIt.Wire"
 		});
 	}	
 

diff --git a/plugins/layout/examples/spring_layout.html b/plugins/layout/examples/spring_layout.html
@@ -65,7 +65,7 @@
 		layer.addWire({
 			src: {moduleId: wc[0], terminalId: 0},
 			tgt: {moduleId: wc[1], terminalId: 0},
-			drawingMethod: "straight"
+			xtype: "WireIt.Wire"
 		});
 	}