Skip to content

Commit

Permalink
Adding Composable WiringEditor extension
Browse files Browse the repository at this point in the history
  • Loading branch information
ericabouaf committed Mar 2, 2010
1 parent 99a97c2 commit e0cfbc3
Show file tree
Hide file tree
Showing 6 changed files with 163 additions and 136 deletions.
3 changes: 3 additions & 0 deletions VERSION.txt
Expand Up @@ -13,6 +13,9 @@ Changeset:
* ModuleProxy.js into its own file
* WiringEditor now inherits from BaseEditor, which wraps general full-page editor functionnality
* Example for a non-fullscreen editor

* Added Composable WiringEditor extension
* Usage is demonstrated in the "jsBox" example

* Wires:
* Label for wires (beta)
Expand Down
8 changes: 6 additions & 2 deletions examples/jsBox/jsBox.html
Expand Up @@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WireIt - jsBox example</title>
<link rel="icon" href="../../res/favicon.ico" type="image/png" />
<link rel="SHORTCUT ICON" href="../../res/favicon.ico" type="image/png" />
<link rel="shortcut icon" href="../../res/favicon.ico" type="image/png" />

<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
Expand Down Expand Up @@ -107,6 +107,10 @@
<script type="text/javascript" src="../../js/adapters/json-rpc.js"></script>
<script type="text/javascript" src="../../js/ImageContainer.js"></script>


<script type="text/javascript" src="../../js/extensions/composable/ComposableWiringEditor.js"></script>
<script type="text/javascript" src="../../js/extensions/composable/ComposedContainer.js"></script>

<script type="text/javascript" src="jsBox.js"></script>
<script type="text/javascript" src="ExecutionFrame.js"></script>
<script>
Expand Down Expand Up @@ -178,7 +182,7 @@ <h2>Infos</h2>
</div>



<!-- This is the content of the HELP panel -->
<div id="helpPanel">
<div class="hd">Welcome to jsBox</div>
<div class="bd" style="text-align: left;">
Expand Down
138 changes: 4 additions & 134 deletions examples/jsBox/jsBox.js
Expand Up @@ -2,7 +2,7 @@
* jsBox
*/
var jsBox = {

language: {

languageName: "jsBox",
Expand All @@ -29,43 +29,6 @@ var jsBox = {
}
},

{
"name": "input",
"container": {
"xtype": "WireIt.FormContainer",
"title": "input",
"fields": [
{"type": "type", "inputParams": {"label": "Value", "name": "input", "wirable": false, "value": { "type":"string","inputParams":{"typeInvite": "input name"}} }}
],
"terminals": [
{"name": "out", "direction": [0,1], "offsetPosition": {"left": 86, "bottom": -15}, "ddConfig": {
"type": "output",
"allowedTypes": ["input"]
}
}
]
}
},

{
"name": "output",
"container": {
"xtype": "WireIt.FormContainer",
"title": "output",
"fields": [
{"type": "string", "inputParams": {"label": "name", "name": "name", "wirable": false}}
],
"terminals": [
{"name": "in", "direction": [0,-1], "offsetPosition": {"left": 82, "top": -15 }, "ddConfig": {
"type": "input",
"allowedTypes": ["output"]
},
"nMaxWires": 1
}
]
}
},

{
"name": "callback",
"container": {
Expand Down Expand Up @@ -124,65 +87,18 @@ jsBox.WiringEditor = function(options) {
jsBox.WiringEditor.superclass.constructor.call(this, options);
};

YAHOO.lang.extend(jsBox.WiringEditor, WireIt.WiringEditor, {


YAHOO.lang.extend(jsBox.WiringEditor, WireIt.ComposableWiringEditor, {
/**
* Add the "run" button
*/
renderButtons: function() {
jsBox.WiringEditor.superclass.renderButtons.call(this);

// Add the run button
// Add the run button to the toolbar
var toolbar = YAHOO.util.Dom.get('toolbar');
var runButton = new YAHOO.widget.Button({ label:"Run", id:"WiringEditor-runButton", container: toolbar });
runButton.on("click", jsBox.run, jsBox, true);
},

/**
* Customize the load success handler for the composed module list
*/
onLoadSuccess: function(wirings) {
jsBox.WiringEditor.superclass.onLoadSuccess.call(this,wirings);

// Customize to display composed module in the left list
this.updateComposedModuleList();
},

/**
* All the saved wirings are reusable modules :
*/
updateComposedModuleList: function() {

// to optimize:

// Remove all previous module with the ComposedModule class
var l = YAHOO.util.Dom.getElementsByClassName("ComposedModule", "div", this.leftEl);
for(var i = 0 ; i < l.length ; i++) {
this.leftEl.removeChild(l[i]);
}

if(YAHOO.lang.isArray(this.pipes)) {
for(i = 0 ; i < this.pipes.length ; i++) {
var module = this.pipes[i];
this.pipesByName[module.name] = module;

// Add the module to the list
var div = WireIt.cn('div', {className: "WiringEditor-module ComposedModule"});
div.appendChild( WireIt.cn('span', null, null, module.name) );
var ddProxy = new WireIt.ModuleProxy(div, this);
ddProxy._module = {
name: module.name,
container: {
"xtype": "jsBox.ComposedContainer",
"title": module.name
}
};
this.leftEl.appendChild(div);

}
}
}
}
});


Expand Down Expand Up @@ -302,49 +218,3 @@ YAHOO.extend(jsBox.Container, WireIt.Container, {
}

});








/**
* ComposedContainer is a class for Container representing Pipes.
* It automatically generates the inputEx Form from the input Params.
* @class ComposedContainer
* @extends WireIt.FormContainer
* @constructor
*/
jsBox.ComposedContainer = function(options, layer) {

if(!options.fields) {

options.fields = [];
options.terminals = [];

var pipe = jsBox.editor.getPipeByName(options.title);
for(var i = 0 ; i < pipe.modules.length ; i++) {
var m = pipe.modules[i];
if( m.name == "input") {
m.value.input.inputParams.wirable = true;
options.fields.push(m.value.input);
}
else if(m.name == "output") {
options.terminals.push({
name: m.value.name,
"direction": [0,1],
"offsetPosition": {"left": options.terminals.length*40, "bottom": -15},
"ddConfig": {
"type": "output",
"allowedTypes": ["input"]
}
});
}
}
}

jsBox.ComposedContainer.superclass.constructor.call(this, options, layer);
};
YAHOO.extend(jsBox.ComposedContainer, WireIt.FormContainer);
4 changes: 4 additions & 0 deletions js/WiringEditor.js
Expand Up @@ -329,6 +329,10 @@ lang.extend(WireIt.WiringEditor, WireIt.BaseEditor, {
}
}
var panelBody = Dom.get('loadPanelBody');

// Purge element (remove listeners on panelBody and childNodes recursively)
YAHOO.util.Event.purgeElement(panelBody, true);

panelBody.innerHTML = "";
panelBody.appendChild(list);

Expand Down
106 changes: 106 additions & 0 deletions js/extensions/composable/ComposableWiringEditor.js
@@ -0,0 +1,106 @@
/**
* The ComposableWiringEditor
*
* @class ComposableWiringEditor
* @extends WireIt.ComposableWiringEditor
* @constructor
*/
WireIt.ComposableWiringEditor = function(options) {

// Add the "input" and "output" modules
options.modules = WireIt.ComposableWiringEditor.modules.concat(options.modules);

WireIt.ComposableWiringEditor.superclass.constructor.call(this, options);
};

/**
* Default "input" and "output" modules
* @static
*/
WireIt.ComposableWiringEditor.modules = [
{
"name": "input",
"container": {
"xtype": "WireIt.FormContainer",
"title": "input",
"fields": [
{"type": "type", "inputParams": {"label": "Value", "name": "input", "wirable": false, "value": { "type":"string","inputParams":{"typeInvite": "input name"}} }}
],
"terminals": [
{"name": "out", "direction": [0,1], "offsetPosition": {"left": 86, "bottom": -15}, "ddConfig": {
"type": "output",
"allowedTypes": ["input"]
}
}
]
}
},

{
"name": "output",
"container": {
"xtype": "WireIt.FormContainer",
"title": "output",
"fields": [
{"type": "string", "inputParams": {"label": "name", "name": "name", "wirable": false}}
],
"terminals": [
{"name": "in", "direction": [0,-1], "offsetPosition": {"left": 82, "top": -15 }, "ddConfig": {
"type": "input",
"allowedTypes": ["output"]
},
"nMaxWires": 1
}
]
}
}
];


YAHOO.lang.extend(WireIt.ComposableWiringEditor, WireIt.WiringEditor, {

/**
* Customize the load success handler for the composed module list
*/
onLoadSuccess: function(wirings) {
WireIt.ComposableWiringEditor.superclass.onLoadSuccess.call(this,wirings);

// Customize to display composed module in the left list
this.updateComposedModuleList();
},

/**
* All the saved wirings are reusable modules :
*/
updateComposedModuleList: function() {

// Remove all previous module with the ComposedModule class
var el = YAHOO.util.Dom.get("module-category-Composed");
if( el ) {
// Purge element (remove listeners on el and childNodes recursively)
YAHOO.util.Event.purgeElement(el, true);
el.innerHTML = "";
}


if(YAHOO.lang.isArray(this.pipes)) {
for(var i = 0 ; i < this.pipes.length ; i++) {
var module = this.pipes[i];

var m = {
category: "Composed",
container: {
"xtype": "WireIt.ComposedContainer",
"title": module.name,
"wiring": this.pipes[i]
}
};
YAHOO.lang.augmentObject(m, this.pipes[i]);

this.addModuleToList(m);
}
}

}

});
40 changes: 40 additions & 0 deletions js/extensions/composable/ComposedContainer.js
@@ -0,0 +1,40 @@
/**
* ComposedContainer is a class for Container representing Pipes.
* It automatically generates the inputEx Form from the input Params.
*
* @class ComposedContainer
* @extends WireIt.FormContainer
* @constructor
*/
WireIt.ComposedContainer = function(options, layer) {

if(!options.fields) {

options.fields = [];
options.terminals = [];

var pipe = eval('('+options.wiring.working+')');

for(var i = 0 ; i < pipe.modules.length ; i++) {
var m = pipe.modules[i];
if( m.name == "input") {
m.value.input.inputParams.wirable = true;
options.fields.push(m.value.input);
}
else if(m.name == "output") {
options.terminals.push({
name: m.value.name,
"direction": [0,1],
"offsetPosition": {"left": options.terminals.length*40, "bottom": -15},
"ddConfig": {
"type": "output",
"allowedTypes": ["input"]
}
});
}
}
}

WireIt.ComposedContainer.superclass.constructor.call(this, options, layer);
};
YAHOO.extend(WireIt.ComposedContainer, WireIt.FormContainer);

0 comments on commit e0cfbc3

Please sign in to comment.