Loading...
Helix SwarmHelix Swarm
Loading...

label_containers.html

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • WireIt/
  • examples/
  • label_containers.html #1
  • View
  • Commits
  • Open Download .zip Download (3 KB) 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <html>
  3.  <head>
  4.   <title>WireIt: Label containers</title>
  5.   
  6. <!-- YUI CSS -->
  7. <link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" /> 
  8.  
  9. <!-- WireIt CSS -->
  10. <link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
  11.  
  12. <!-- YUI -->
  13. <script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
  14.  
  15. <script type="text/javascript" src="../lib/excanvas.js"></script>
  16.  
  17. <!-- WireIt -->
  18. <script type="text/javascript" src="../build/wireit-inputex-min.js"></script>
  19.  
  20. <script type="text/javascript" src="../js/RectLabelContainer.js"></script>
  21. <script type="text/javascript" src="../js/CanvasContainer.js"></script>
  22. <script type="text/javascript" src="../js/EllipseLabelContainer.js"></script>
  23.  
  24.  
  25.  
  26. <style>
  27. body {
  28. 	font-size: 10px;
  29. }
  30.  
  31.  
  32. div.WireIt-CanvasContainer div.body {
  33. 	background-color: transparent;
  34. 	border: 0;
  35. 	position: relative;
  36. }
  37.  
  38. div.WireIt-CanvasContainer div.WireIt-Container-closebutton {
  39. 	display: none;
  40. }
  41.  
  42.  
  43. div.WireIt-CanvasContainer:hover div.WireIt-Container-closebutton {
  44. 	display: block;
  45. }
  46.  
  47.  
  48. div.WireIt-CanvasContainer:hover div.WireIt-Container-resizehandle {
  49. 	border: 1px solid black;
  50. }
  51.  
  52.  
  53.  
  54.  
  55.  
  56.  
  57. div.WireIt-RectLabelContainer div.body {
  58. 	background-color: transparent;
  59. 	border: 0;
  60. 	position: relative;
  61. 	background-color: #FDEADA;
  62. 	padding: 20px;
  63. }
  64.  
  65. div.WireIt-RectLabelContainer div.WireIt-Container-closebutton {
  66. 	display: none;
  67. }
  68.  
  69.  
  70. div.WireIt-RectLabelContainer:hover div.WireIt-Container-closebutton {
  71. 	display: block;
  72. }
  73.  
  74.  
  75. div.WireIt-RectLabelContainer:hover div.WireIt-Container-resizehandle {
  76. 	border: 1px solid black;
  77. }
  78.  
  79. </style>
  80.  
  81. </head>
  82. <body>
  83. 	
  84. <script>
  85.  
  86. 	var demoLayer;
  87.  
  88. 	YAHOO.util.Event.addListener(window, 'load', function() {
  89. 		
  90. 		// Layer Demo
  91. 	  demoLayer = new WireIt.Layer({layerMap: false});
  92. 		
  93. 		// You can use a global setWiring method	
  94. 		demoLayer.setWiring({
  95. 			containers: [
  96. 		
  97. 			  // ImageContainer
  98. 				{
  99. 					position:[150,100],
  100. 					"xtype":"WireIt.EllipseLabelContainer", 
  101. 					label: "http://neyric.github.com/wireit",
  102. 					width: 250,
  103. 	 				"terminals": [
  104. 	 					{"name": "in", direction: [0,-1], offsetPosition: {top: -5, left: 115} },
  105. 						{"name": "out", direction: [0,1], offsetPosition: {bottom: -15, left: 115} }
  106. 	 				]
  107. 				},
  108. 				
  109. 				// ImageContainer
  110. 				{
  111. 					position:[300,300],
  112. 					"xtype":"WireIt.RectLabelContainer", 
  113. 					label: "Eric Abouaf",
  114.  					"terminals": [
  115. 							{"name": "in", direction: [0,-1], offsetPosition: {top: -15, left: 90} }
  116. 					]
  117. 				}
  118. 			],
  119. 			
  120. 			
  121. 			wires: [
  122. 				{
  123. 					src: {
  124. 						moduleId: 0,
  125. 						terminal: "out"
  126. 					},
  127. 					tgt: {
  128. 						moduleId: 1,
  129. 						terminal: "in"
  130. 					},
  131. 					width: 1,
  132. 					label: "dc:author",
  133. 					labelStyle: { fontSize: "150%"},
  134. 					labelEditor: {type: 'select', choices: ['dc:title', 'dc:author'] },
  135. 					
  136. 					xtype: "WireIt.BezierArrowWire"
  137. 				}
  138. 			]
  139. 			
  140. 		});
  141.  
  142. 	});
  143. </script>
  144. </body>
  145. </html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s) 9 years ago
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/examples/label_containers.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop. 9 years ago