The visual language is defined in a JSON format :
+WireIt uses a convention to simplify extending widgets:
+ wires, terminals and containers are instantiated from the class specified by the xtype property.
It lets you create specialized widgets by creating a subclass and using it simply from your language definition.
+ +This choice was made to transport the definition using JSON.
+ +Many options are available to customize Wires and Terminals, but the general pattern is simple: you create a subclass of the Wire named WeirdWire, you use it using the xtype property :
- var myLanguage = {
+ Terminal.prototype.wireConfig = {"xtype":"WeirdWire", "weirdness": 7};
+
+
+The code above overrides the default Wire configuration for all terminals on the page.
+ +If you want to use this configuration only on specified wires, you can make it default for "some" terminals. You need to subclass the terminal to set your new config as default. An exemple is actually included in the library.
+ +For a concrete example, let's see how the TerminalOutput works :
+ +
+ // use YUI2 class inheritance
+ WireIt.util.TerminalOutput = function(parentEl, options, container) {
+ WireIt.util.TerminalOutput.superclass.constructor.call(this,parentEl, options, container);
+ };
+ YAHOO.lang.extend(WireIt.util.TerminalOutput, WireIt.Terminal, {
+ xtype: "WireIt.TerminalOutput",
- // Set a unique name for the language
+ // override some options
+ direction: [0,1],
+ fakeDirection: [0,-1],
+ ddConfig: { type: "output", allowedTypes: ["input"] },
+ alwaysSrc: true
+ });
+
+Simple enough. What this says is: Create a TerminalOutput class which extends the Terminal widget, set the direction from top to bottom, and connect only to "input" terminals. The alwaysSrc option force this terminal as being the "source" terminal in the wire definition.
+ + +How do we handle the wire creation ? What are the options ?
+ +The idea is to create a Drag'n Drop proxy element (we do not move the original Terminal, but a copy of it).
+ +When we start dragging the proxy element, a fake terminal is created within, which we can move around. A wire is added between those two terminals.
+ +You can change the default wiring config using the editingWireConfig property :
+ +
+ WeirdTerminal = function(parentEl, options, container) {
+ WeirdTerminal.superclass.constructor.call(this,parentEl, options, container);
+ };
+ YAHOO.lang.extend(WeirdTerminal, WireIt.Terminal, {
+ xtype: "WeirdTerminal",
+
+ wireConfig: {"xtype":"WeirdWire", "weirdness": 7},
+ editingWireConfig: {"xtype":"WeirdWire", "weirdness": 13},
+ direction: [1,1],
+ fakeDirection: [-1,-1]
+
+ });
+
+
+For a complete list of the properties, please refer to the API documentation for Terminal, Wire or Container.
+ + +Your visual language is defined by a JSON object :
+ +
+ var myLanguageDef = {
+
+ // Set a unique name for your language
languageName: "myLanguage",
+
+ // modules: list of module type definitions
modules: [
- // List of module type definitions ...
+ {
+ name: "module1",
+ container: {"xtype":"WireIt.InOutContainer", ...}
+ },
+ ...
]
};
@@ -453,7 +529,7 @@
YAHOO.util.Event.onDOMReady( function() {
try {
- logicGates = new WireIt.WiringEditor(myLanguage);
+ logicGates = new WireIt.WiringEditor(myLanguageDef);
}catch(ex) {
alert(ex);
}
@@ -461,7 +537,7 @@ 1.4.3 Other plugins
-Here is the skeleton of a module definition :
@@ -490,7 +566,7 @@Of course, you can use containers provided in WireIt (ImageContainer, FormContainer, InOutContainer), or a custom container.
-Set "xtype": "WireIt.Container" (optional). The parameters are :
@@ -519,7 +595,7 @@All other Container classes inherits from this base class, and therefore share the above options.
-Set "xtype": "WireIt.InOutContainer". Additional parameters are :
@@ -542,7 +618,7 @@Set "xtype": "WireIt.FormContainer". Additional parameters are all those used in inputEx.Group. (see inputEx)
@@ -571,7 +647,7 @@Set "xtype": "WireIt.ImageContainer". Additional parameters are :
@@ -598,7 +674,7 @@To add properties to the Wirings, we configure the propertiesFields property of the language definition.
This property defines the fields as they will appear in the "Properties" form on the right in the WiringEditor.
The WiringEditor adds a CSS class for each module instance in your layer: WiringEditor-module-moduleName.
diff --git a/index.html b/index.html index ead3939f..6120b31c 100644 --- a/index.html +++ b/index.html @@ -59,9 +59,9 @@Documentation
-You can also get some help on the forum.
@@ -74,16 +74,42 @@WireIt-based projects
+Examples
+ + +Core components examples :
+ +Plugin 'editor' examples
+Plugin 'composable' examples
+Plugin 'inputex' examples
Core components examples :
- -Plugin 'editor' examples
-Plugin 'composable' examples
-Plugin 'grouping' examples
-Plugin 'inputex' examples
-Plugin 'layout' examples
-Beta/New components
+ +Under-development components and plugins. You can help !
+ +Core components
+Plugin 'layout' examples
+Plugin 'grouping' examples
+WireIt-based projects
+ diff --git a/js/Terminal.js b/js/Terminal.js index 2ba2bb68..90d69dc3 100644 --- a/js/Terminal.js +++ b/js/Terminal.js @@ -238,7 +238,8 @@ WireIt.Terminal.prototype = { }, /** - * TODO + * Set the position of the terminal with the given pos + * @param {Object | Array} pos The position. It can be used in two ways: setPosition({left: 10, top: 10}) or setPosition([10, 10]) or setPosition({bottom: 10, right: 10}) */ setPosition: function(pos) { if(pos) { @@ -271,13 +272,10 @@ WireIt.Terminal.prototype = { */ addWire: function(wire) { - // Adds this wire to the list of connected wires : this.wires.push(wire); - // Set class indicating that the wire is connected Dom.addClass(this.el, this.connectedClassName); - // Fire the event this.eventAddWire.fire(wire); }, diff --git a/js/TerminalProxy.js b/js/TerminalProxy.js index 89ed6309..8861695d 100644 --- a/js/TerminalProxy.js +++ b/js/TerminalProxy.js @@ -66,28 +66,29 @@ lang.extend(WireIt.TerminalProxy, YAHOO.util.DDProxy, { } var div=this.getDragEl(), Dom=YAHOO.util.Dom; if (!div) { - div = document.createElement("div"); - div.id = this.dragElId; - var s = div.style; - s.position = "absolute"; - s.visibility = "hidden"; - s.cursor = "move"; - s.border = "2px solid #aaa"; - s.zIndex = 999; - var size = this.terminalProxySize+"px"; - s.height = size; - s.width = size; - var _data = document.createElement('div'); - Dom.setStyle(_data, 'height', '100%'); - Dom.setStyle(_data, 'width', '100%'); - Dom.setStyle(_data, 'background-color', '#ccc'); - Dom.setStyle(_data, 'opacity', '0'); + div = WireIt.cn('div', {id: this.dragElId}, { + position: "absolute", + visibility: "hidden", + cursor: "move", + border: "2px solid #aaa", + zIndex: 999, + height: this.terminalProxySize+"px", + width: this.terminalProxySize+"px" + }); + var _data = WireIt.cn('div',{},{ + height: '100%', + width: '100%', + backgroundColor: '#ccc', + opacity: '0' + }); div.appendChild(_data); body.insertBefore(div, body.firstChild); } }, /** + * When we start dragging the proxy of a terminal, a "fake terminal" is created (params fakeDirection) + * Then a Wire is added between those two terminals with the config from Terminal.editingWireConfig * @method startDrag */ startDrag: function() { @@ -102,6 +103,8 @@ lang.extend(WireIt.TerminalProxy, YAHOO.util.DDProxy, { } var halfProxySize = this.terminalProxySize/2; + + // Create a mock-object "fakeTerminal" which mimicks the Terminal API this.fakeTerminal = { direction: this.terminal.fakeDirection, pos: [200,200], @@ -122,8 +125,8 @@ lang.extend(WireIt.TerminalProxy, YAHOO.util.DDProxy, { parentEl = this.terminal.container.layer.el; } + // Add the Wire between the orignial Trminal, and its fake terminal proxy var klass = WireIt.wireClassFromXtype(this.terminal.editingWireConfig.xtype); - this.editingWire = new klass(this.terminal, this.fakeTerminal, parentEl, this.terminal.editingWireConfig); YAHOO.util.Dom.addClass(this.editingWire.element, CSS_PREFIX+'Wire-editing'); }, diff --git a/res/style.css b/res/style.css index 08bf20f8..87e3d079 100644 --- a/res/style.css +++ b/res/style.css @@ -18,7 +18,7 @@ ul li { font-size: 13px;} #layout td.left, #layout td.right { padding: 15px 30px; vertical-align: top; } p.title { font-weight: bold; font-size: 22px;} -td.left ul { list-style-image: url(star.png); } +ul.star { list-style-image: url(star.png); } div.appBox { width: 100%; position: relative; margin-top: 10px; } div.appBox p { position: absolute; left: 130px; top: 0px; font-size: 18px; text-decoration: none;}