Merging in jamesk's master branch

ericabouaf · Oct 5, 2009 · 9499772 · 9499772
2 parents 2640da7 + 03af8f7
commit 9499772
Show file tree

Hide file tree

Showing 35 changed files with 3,586 additions and 86 deletions.
diff --git a/GroupDoc/Collapsed 1.png b/GroupDoc/Collapsed 1.png
diff --git a/GroupDoc/CollapsedAndUncollapsed.png b/GroupDoc/CollapsedAndUncollapsed.png
diff --git a/GroupDoc/CollapsedAndUncollapsedGroupSelector.png b/GroupDoc/CollapsedAndUncollapsedGroupSelector.png
diff --git a/GroupDoc/CollapsedAndUncollapsedSuperHighlighted.png b/GroupDoc/CollapsedAndUncollapsedSuperHighlighted.png
diff --git a/GroupDoc/Made Group.png b/GroupDoc/Made Group.png
diff --git a/GroupDoc/Remapping.png b/GroupDoc/Remapping.png
diff --git a/GroupDoc/SelectedContainers.png b/GroupDoc/SelectedContainers.png
diff --git a/GroupDoc/images/GroupCollapsed.png b/GroupDoc/images/GroupCollapsed.png
diff --git a/GroupDoc/images/GroupMade.png b/GroupDoc/images/GroupMade.png
diff --git a/GroupDoc/images/GroupsWithinAGroupSuperHighlight.png b/GroupDoc/images/GroupsWithinAGroupSuperHighlight.png
diff --git a/GroupDoc/images/NestedGroupSelection.png b/GroupDoc/images/NestedGroupSelection.png
diff --git a/GroupDoc/images/SelectGroup.png b/GroupDoc/images/SelectGroup.png
diff --git a/GroupDoc/images/raw/GroupCollapsed.xcf b/GroupDoc/images/raw/GroupCollapsed.xcf
diff --git a/GroupDoc/images/raw/GroupMade.xcf b/GroupDoc/images/raw/GroupMade.xcf
diff --git a/GroupDoc/images/raw/GroupsWithinAGroupSuperHighlight.xcf b/GroupDoc/images/raw/GroupsWithinAGroupSuperHighlight.xcf
diff --git a/GroupDoc/images/raw/NestedGroupSelection.xcf b/GroupDoc/images/raw/NestedGroupSelection.xcf
diff --git a/GroupDoc/images/raw/SelectGroup.xcf b/GroupDoc/images/raw/SelectGroup.xcf
diff --git a/GroupDoc/readme.txt b/GroupDoc/readme.txt
@@ -0,0 +1,29 @@
+Hopefully a quick readme!
+
+
+1. Making a group
+
+First drag n drop some containers into the editor. Then select the ones you want in your group by clicking the G in the top right corner. The ones you have selected should be highlighted in green.
+
+Then use the Make button in the group section (bottom right). Once you have made the group  you can click collapse to shrink the containers down to 1 with only the needed fields/terminals displayed
+
+2. Remapping
+
+You might have noticed when you make a group various options appear in the bottom of the group pane.
+
+With these you can select which fields/terminal are visible from outside the group, their names and which side of the terminals will appear on.
+
+To help knowing which fields/terminals are which you can hover over the remapping row and it will highlight the container/group of containers that it is related to
+
+(Note: If you leave the name blank an autogenerated one will be used)
+(Note: Terminals are evenly distributed from the center of the side they are on, at the moment no other position options are available)
+
+3. Advanced groups
+
+If you create 2 or more groups of containers you can click to focus on a particular container, if it has a group the other containers in that group will be highlighted and the group options will appear in the group pane.
+
+You can additionally nest groups within groups and mix groups and containers in a single group.
+
+When you have more than one level of grouping you cannot immediately edit the inner group when you select a container from it. To do so you must use the group select drop down after selecting the container.
+
+You can also collapse an inner group and leave the outer group uncollapsed.
diff --git a/css/WireIt.css b/css/WireIt.css
@@ -78,6 +78,9 @@ div.WireIt-Container-ddhandle {
 	font-weight:bold;
 	text-align:center;
 	font-size: 10pt;
+   float : none;
+   padding-left : 2px;
+   padding-right : 2px;
 } 
 div.WireIt-Container-ddhandle span {
    /*margin-right: 32px;*/
@@ -105,13 +108,32 @@ div.WireIt-Container-resizehandle {
 div.WireIt-Container-closebutton {
    background-image: url(../images/close.png);
    width: 25px;
-   height: 15px;
+   height: 15px;/*
    position: absolute;
    top: 4px;
-   right: 4px;
+   right: 4px;*/
+   float : right;
    cursor: pointer;
 }
 
+div.WireIt-Container-groupbutton {
+   background-image: url(../images/group.png);
+   width: 25px;
+   height: 15px;/*
+   position: absolute;
+   top: 4px;
+   right: 4px;*/
+   float : right;
+   cursor: pointer;
+}
+
+div.WireIt-Container-toolbar {
+
+}
+
+.floatleft {
+    float : left;
+}
 
 div.WireIt-Container-focused {
    z-index: 6;

diff --git a/examples/WiringEditor/embedded.html b/examples/WiringEditor/embedded.html
@@ -0,0 +1,232 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+	<title>WireIt - WiringEditor</title>
+	<link rel="icon" href="../favicon.ico" type="image/png" />
+  <link rel="SHORTCUT ICON" href="../favicon.ico" type="image/png" />
+
+<!-- YUI -->
+<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
+<link rel="stylesheet" type="text/css" href="../../lib/yui/assets/skins/sam/skin.css" />
+
+<!-- InputEx CSS -->
+<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />
+
+<!-- YUI-accordion CSS -->
+<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />
+
+<!-- WireIt CSS -->
+<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />
+<link rel="stylesheet" type="text/css" href="../../css/WireItEditor.css" />
+
+<style>
+div.WireIt-Container {
+	width: 350px; /* Prevent the modules from scratching on the right */
+}
+
+div.WireIt-InOutContainer {	
+	width: 150px;
+}
+
+div.WireIt-InputExTerminal {
+	float: left;
+	width: 21px;
+	height: 21px;
+	position: relative;
+}
+div.WireIt-InputExTerminal div.WireIt-Terminal {
+	top: -3px;
+	left: -7px;
+}
+div.inputEx-Group div.inputEx-label {
+	width:100px;
+}
+
+div.WireIt-ImageContainer {
+	width: auto;
+}
+
+div.Bubble div.body {
+	width: 70px;
+	height: 45px;
+	opacity: 0.8;
+	cursor: move;
+}
+
+.WiringEditor-module span {
+	position: relative;
+	top: -3px;
+}
+
+</style>
+
+
+<!-- YUI -->
+<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>
+<script type="text/javascript" src="../../lib/yui/resize/resize-min.js"></script>
+<script type="text/javascript" src="../../lib/yui/layout/layout-min.js"></script>
+<script type="text/javascript" src="../../lib/yui/container/container-min.js"></script>
+<script type="text/javascript" src="../../lib/yui/json/json-min.js"></script>
+<script type="text/javascript" src="../../lib/yui/button/button-min.js"></script>
+<script type="text/javascript" src="../../lib/yui/tabview/tabview-min.js"></script>
+
+<!-- InputEx with wirable options (WirableField-beta) -->
+<script src="../../lib/inputex/js/inputex.js"  type='text/javascript'></script>
+<script src="../../lib/inputex/js/Field.js"  type='text/javascript'></script>
+<script type="text/javascript" src="../../js/util/inputex/WirableField-beta.js"></script>
+<script src="../../lib/inputex/js/Group.js"  type='text/javascript'></script>
+<script src="../../lib/inputex/js/Visus.js"  type='text/javascript'></script>
+<script src="../../lib/inputex/js/fields/StringField.js"  type='text/javascript'></script>
+<script src="../../lib/inputex/js/fields/Textarea.js"  type='text/javascript'></script>
+<script src="../../lib/inputex/js/fields/SelectField.js"  type='text/javascript'></script>
+<script src="../../lib/inputex/js/fields/EmailField.js"  type='text/javascript'></script>
+<script src="../../lib/inputex/js/fields/UrlField.js"  type='text/javascript'></script>
+<script src="../../lib/inputex/js/fields/ListField.js"  type='text/javascript'></script>
+<script src="../../lib/inputex/js/fields/CheckBox.js"  type='text/javascript'></script>
+<script src="../../lib/inputex/js/fields/InPlaceEdit.js"  type='text/javascript'></script>
+
+<!-- YUI-Accordion -->
+<script src="../../lib/accordionview/accordionview.js"  type='text/javascript'></script>
+
+<!-- WireIt -->
+<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
+<script type="text/javascript" src="../../js/WireIt.js"></script>
+<script type="text/javascript" src="../../js/CanvasElement.js"></script>
+<script type="text/javascript" src="../../js/Wire.js"></script>
+<script type="text/javascript" src="../../js/Terminal.js"></script>
+<script type="text/javascript" src="../../js/util/DD.js"></script>
+<script type="text/javascript" src="../../js/util/DDResize.js"></script>
+<script type="text/javascript" src="../../js/Container.js"></script>
+<script type="text/javascript" src="../../js/Layer.js"></script>
+<script type="text/javascript" src="../../js/util/inputex/FormContainer-beta.js"></script>
+<script type="text/javascript" src="../../js/LayerMap.js"></script>
+<script type="text/javascript" src="../../js/Grouper.js"></script>
+<script type="text/javascript" src="../../js/WiringEditor.js"></script>
+<script type="text/javascript" src="../../js/ImageContainer.js"></script>
+<script type="text/javascript" src="../../js/InOutContainer.js"></script>
+<script type="text/javascript" src="../../js/adapters/json-rpc.js"></script>
+
+<script type="text/javascript" src="../../js/RubberBand.js"></script>
+<script type="text/javascript" src="../../js/GroupUtils.js"></script>
+<script type="text/javascript" src="../../js/GroupFormContainer.js"></script>
+<script type="text/javascript" src="../../js/Group.js"></script>
+
+<script type="text/javascript" src="embedded.js"></script>
+
+
+<style>
+/* Comment Module */
+div.WireIt-Container.WiringEditor-module-comment { width: 200px; }
+div.WireIt-Container.WiringEditor-module-comment div.body { background-color: #EEEE66; }
+div.WireIt-Container.WiringEditor-module-comment div.body textarea { background-color: transparent; font-weight: bold; border: 0; }
+</style>
+
+
+<script>
+
+// InputEx needs a correct path to this image
+inputEx.spacerUrl = "/inputex/trunk/images/space.gif";
+
+var editor, layer;
+
+YAHOO.util.Event.onDOMReady( function() {
+
+	editor = new WireIt.WiringEditor(embeddedLanguage); 
+
+	// Open the infos panel
+	editor.accordionView.openPanel(2);
+
+	editor.toolbar.add({label : "A Custom button", id: "WireIt-Bob", events : [ {name : "click", callback: function() { alert("This button does what I want"); } } ] })
+	/*
+    var util = YAHOO.util,lang = YAHOO.lang;
+    var Event = util.Event, Dom = util.Dom, Connect = util.Connect,JSON = lang.JSON,widget = YAHOO.widget;
+
+    var layerOptions = {};
+    layerOptions.parentEl = Dom.get('center');
+    layerOptions.layerMap = false; //YAHOO.lang.isUndefined(layerOptions.layerMap) ? true : layerOptions.layerMap;
+    //layerOptions.layerMapOptions = layerOptions.layerMapOptions || { parentEl: 'layerMap' };
+    
+    layer = new WireIt.Layer(layerOptions);
+    */
+});
+
+</script>
+
+</head>
+
+<body class="yui-skin-sam">
+
+	<div id="top">
+		<div class="logo">WiringEditor</a></div>
+		<div id="toolbar"></div>
+		<div class="topright">
+			<span>Hello there !</span> | 
+			<a href="../..">back to WireIt</a>
+		</div>
+	</div>
+
+
+	<div id="left">
+	</div>
+
+	<div id="right">
+	  <ul id="accordionView">
+		<li>
+			<h2>Properties</h2>
+			<div>
+				<div id="propertiesForm"></div>
+			</div>
+		</li>
+		<li>
+			<h2>Minimap</h2>
+			<div style='position: relative;'>
+				<div id="layerMap"></div>
+			</div>
+		</li>
+		<li>
+			<h2>Infos</h2>
+			<div>
+				<div style="padding: 10px;">
+					<p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
+					<br />
+					<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
+					<br />
+					<p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
+				</div>
+			</div>
+		</li>
+		<li>
+			<h2>Grouping</h2>
+			<div>
+				<div id="groupBody">
+				    Select some containers using the G in the top right corner then click to make the group
+				    <button id="makeGroupButton" onclick="editor.layer.grouper.makeGroup()">Make</button>
+				</div>
+				<br />
+				<div id="groupConfig"></div>
+			</div>
+		</li>		
+	  </ul>
+	</div>
+
+	<div id="center">
+	</div>
+
+
+	<div id="helpPanel">
+	    <div class="hd">Welcome to the WiringEditor demonstration</div>
+	    <div class="bd" style="text-align: left;">
+
+					<p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
+					<br />
+					<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
+					<br />
+					<p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
+					<br />
+					<p>Close this dialog to test the WiringEditor</p>
+	    </div>
+	</div>
+
+</body>
+</html>