Skip to content

Commit e0cfbc3

Browse files
ericabouafericabouaf
committed
Adding Composable WiringEditor extension
1 parent 99a97c2 commit e0cfbc3

File tree

6 files changed

+163
-136
lines changed

6 files changed

+163
-136
lines changed

‎VERSION.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ Changeset:
1313
* ModuleProxy.js into its own file
1414
* WiringEditor now inherits from BaseEditor, which wraps general full-page editor functionnality
1515
* Example for a non-fullscreen editor
16+
17+
* Added Composable WiringEditor extension
18+
* Usage is demonstrated in the "jsBox" example
1619

1720
* Wires:
1821
* Label for wires (beta)

‎examples/jsBox/jsBox.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
55
<title>WireIt - jsBox example</title>
66
<link rel="icon" href="../../res/favicon.ico" type="image/png" />
7-
<link rel="SHORTCUT ICON" href="../../res/favicon.ico" type="image/png" />
7+
<link rel="shortcut icon" href="../../res/favicon.ico" type="image/png" />
88

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

110+
111+
<script type="text/javascript" src="../../js/extensions/composable/ComposableWiringEditor.js"></script>
112+
<script type="text/javascript" src="../../js/extensions/composable/ComposedContainer.js"></script>
113+
110114
<script type="text/javascript" src="jsBox.js"></script>
111115
<script type="text/javascript" src="ExecutionFrame.js"></script>
112116
<script>
@@ -178,7 +182,7 @@ <h2>Infos</h2>
178182
</div>
179183

180184

181-
185+
<!-- This is the content of the HELP panel -->
182186
<div id="helpPanel">
183187
<div class="hd">Welcome to jsBox</div>
184188
<div class="bd" style="text-align: left;">

‎examples/jsBox/jsBox.js‎

Lines changed: 4 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* jsBox
33
*/
44
var jsBox = {
5-
5+
66
language: {
77

88
languageName: "jsBox",
@@ -29,43 +29,6 @@ var jsBox = {
2929
}
3030
},
3131

32-
{
33-
"name": "input",
34-
"container": {
35-
"xtype": "WireIt.FormContainer",
36-
"title": "input",
37-
"fields": [
38-
{"type": "type", "inputParams": {"label": "Value", "name": "input", "wirable": false, "value": { "type":"string","inputParams":{"typeInvite": "input name"}} }}
39-
],
40-
"terminals": [
41-
{"name": "out", "direction": [0,1], "offsetPosition": {"left": 86, "bottom": -15}, "ddConfig": {
42-
"type": "output",
43-
"allowedTypes": ["input"]
44-
}
45-
}
46-
]
47-
}
48-
},
49-
50-
{
51-
"name": "output",
52-
"container": {
53-
"xtype": "WireIt.FormContainer",
54-
"title": "output",
55-
"fields": [
56-
{"type": "string", "inputParams": {"label": "name", "name": "name", "wirable": false}}
57-
],
58-
"terminals": [
59-
{"name": "in", "direction": [0,-1], "offsetPosition": {"left": 82, "top": -15 }, "ddConfig": {
60-
"type": "input",
61-
"allowedTypes": ["output"]
62-
},
63-
"nMaxWires": 1
64-
}
65-
]
66-
}
67-
},
68-
6932
{
7033
"name": "callback",
7134
"container": {
@@ -124,65 +87,18 @@ jsBox.WiringEditor = function(options) {
12487
jsBox.WiringEditor.superclass.constructor.call(this, options);
12588
};
12689

127-
YAHOO.lang.extend(jsBox.WiringEditor, WireIt.WiringEditor, {
128-
129-
90+
YAHOO.lang.extend(jsBox.WiringEditor, WireIt.ComposableWiringEditor, {
13091
/**
13192
* Add the "run" button
13293
*/
13394
renderButtons: function() {
13495
jsBox.WiringEditor.superclass.renderButtons.call(this);
13596

136-
// Add the run button
97+
// Add the run button to the toolbar
13798
var toolbar = YAHOO.util.Dom.get('toolbar');
13899
var runButton = new YAHOO.widget.Button({ label:"Run", id:"WiringEditor-runButton", container: toolbar });
139100
runButton.on("click", jsBox.run, jsBox, true);
140-
},
141-
142-
/**
143-
* Customize the load success handler for the composed module list
144-
*/
145-
onLoadSuccess: function(wirings) {
146-
jsBox.WiringEditor.superclass.onLoadSuccess.call(this,wirings);
147-
148-
// Customize to display composed module in the left list
149-
this.updateComposedModuleList();
150-
},
151-
152-
/**
153-
* All the saved wirings are reusable modules :
154-
*/
155-
updateComposedModuleList: function() {
156-
157-
// to optimize:
158-
159-
// Remove all previous module with the ComposedModule class
160-
var l = YAHOO.util.Dom.getElementsByClassName("ComposedModule", "div", this.leftEl);
161-
for(var i = 0 ; i < l.length ; i++) {
162-
this.leftEl.removeChild(l[i]);
163-
}
164-
165-
if(YAHOO.lang.isArray(this.pipes)) {
166-
for(i = 0 ; i < this.pipes.length ; i++) {
167-
var module = this.pipes[i];
168-
this.pipesByName[module.name] = module;
169-
170-
// Add the module to the list
171-
var div = WireIt.cn('div', {className: "WiringEditor-module ComposedModule"});
172-
div.appendChild( WireIt.cn('span', null, null, module.name) );
173-
var ddProxy = new WireIt.ModuleProxy(div, this);
174-
ddProxy._module = {
175-
name: module.name,
176-
container: {
177-
"xtype": "jsBox.ComposedContainer",
178-
"title": module.name
179-
}
180-
};
181-
this.leftEl.appendChild(div);
182-
183-
}
184-
}
185-
}
101+
}
186102
});
187103

188104

@@ -302,49 +218,3 @@ YAHOO.extend(jsBox.Container, WireIt.Container, {
302218
}
303219

304220
});
305-
306-
307-
308-
309-
310-
311-
312-
313-
/**
314-
* ComposedContainer is a class for Container representing Pipes.
315-
* It automatically generates the inputEx Form from the input Params.
316-
* @class ComposedContainer
317-
* @extends WireIt.FormContainer
318-
* @constructor
319-
*/
320-
jsBox.ComposedContainer = function(options, layer) {
321-
322-
if(!options.fields) {
323-
324-
options.fields = [];
325-
options.terminals = [];
326-
327-
var pipe = jsBox.editor.getPipeByName(options.title);
328-
for(var i = 0 ; i < pipe.modules.length ; i++) {
329-
var m = pipe.modules[i];
330-
if( m.name == "input") {
331-
m.value.input.inputParams.wirable = true;
332-
options.fields.push(m.value.input);
333-
}
334-
else if(m.name == "output") {
335-
options.terminals.push({
336-
name: m.value.name,
337-
"direction": [0,1],
338-
"offsetPosition": {"left": options.terminals.length*40, "bottom": -15},
339-
"ddConfig": {
340-
"type": "output",
341-
"allowedTypes": ["input"]
342-
}
343-
});
344-
}
345-
}
346-
}
347-
348-
jsBox.ComposedContainer.superclass.constructor.call(this, options, layer);
349-
};
350-
YAHOO.extend(jsBox.ComposedContainer, WireIt.FormContainer);

‎js/WiringEditor.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -329,6 +329,10 @@ lang.extend(WireIt.WiringEditor, WireIt.BaseEditor, {
329329
}
330330
}
331331
var panelBody = Dom.get('loadPanelBody');
332+
333+
// Purge element (remove listeners on panelBody and childNodes recursively)
334+
YAHOO.util.Event.purgeElement(panelBody, true);
335+
332336
panelBody.innerHTML = "";
333337
panelBody.appendChild(list);
334338

‎js/extensions/composable/ComposableWiringEditor.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/**
2+
* The ComposableWiringEditor
3+
*
4+
* @class ComposableWiringEditor
5+
* @extends WireIt.ComposableWiringEditor
6+
* @constructor
7+
*/
8+
WireIt.ComposableWiringEditor = function(options) {
9+
10+
// Add the "input" and "output" modules
11+
options.modules = WireIt.ComposableWiringEditor.modules.concat(options.modules);
12+
13+
WireIt.ComposableWiringEditor.superclass.constructor.call(this, options);
14+
};
15+
16+
/**
17+
* Default "input" and "output" modules
18+
* @static
19+
*/
20+
WireIt.ComposableWiringEditor.modules = [
21+
{
22+
"name": "input",
23+
"container": {
24+
"xtype": "WireIt.FormContainer",
25+
"title": "input",
26+
"fields": [
27+
{"type": "type", "inputParams": {"label": "Value", "name": "input", "wirable": false, "value": { "type":"string","inputParams":{"typeInvite": "input name"}} }}
28+
],
29+
"terminals": [
30+
{"name": "out", "direction": [0,1], "offsetPosition": {"left": 86, "bottom": -15}, "ddConfig": {
31+
"type": "output",
32+
"allowedTypes": ["input"]
33+
}
34+
}
35+
]
36+
}
37+
},
38+
39+
{
40+
"name": "output",
41+
"container": {
42+
"xtype": "WireIt.FormContainer",
43+
"title": "output",
44+
"fields": [
45+
{"type": "string", "inputParams": {"label": "name", "name": "name", "wirable": false}}
46+
],
47+
"terminals": [
48+
{"name": "in", "direction": [0,-1], "offsetPosition": {"left": 82, "top": -15 }, "ddConfig": {
49+
"type": "input",
50+
"allowedTypes": ["output"]
51+
},
52+
"nMaxWires": 1
53+
}
54+
]
55+
}
56+
}
57+
];
58+
59+
60+
YAHOO.lang.extend(WireIt.ComposableWiringEditor, WireIt.WiringEditor, {
61+
62+
/**
63+
* Customize the load success handler for the composed module list
64+
*/
65+
onLoadSuccess: function(wirings) {
66+
WireIt.ComposableWiringEditor.superclass.onLoadSuccess.call(this,wirings);
67+
68+
// Customize to display composed module in the left list
69+
this.updateComposedModuleList();
70+
},
71+
72+
/**
73+
* All the saved wirings are reusable modules :
74+
*/
75+
updateComposedModuleList: function() {
76+
77+
// Remove all previous module with the ComposedModule class
78+
var el = YAHOO.util.Dom.get("module-category-Composed");
79+
if( el ) {
80+
// Purge element (remove listeners on el and childNodes recursively)
81+
YAHOO.util.Event.purgeElement(el, true);
82+
el.innerHTML = "";
83+
}
84+
85+
86+
if(YAHOO.lang.isArray(this.pipes)) {
87+
for(var i = 0 ; i < this.pipes.length ; i++) {
88+
var module = this.pipes[i];
89+
90+
var m = {
91+
category: "Composed",
92+
container: {
93+
"xtype": "WireIt.ComposedContainer",
94+
"title": module.name,
95+
"wiring": this.pipes[i]
96+
}
97+
};
98+
YAHOO.lang.augmentObject(m, this.pipes[i]);
99+
100+
this.addModuleToList(m);
101+
}
102+
}
103+
104+
}
105+
106+
});

‎js/extensions/composable/ComposedContainer.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* ComposedContainer is a class for Container representing Pipes.
3+
* It automatically generates the inputEx Form from the input Params.
4+
*
5+
* @class ComposedContainer
6+
* @extends WireIt.FormContainer
7+
* @constructor
8+
*/
9+
WireIt.ComposedContainer = function(options, layer) {
10+
11+
if(!options.fields) {
12+
13+
options.fields = [];
14+
options.terminals = [];
15+
16+
var pipe = eval('('+options.wiring.working+')');
17+
18+
for(var i = 0 ; i < pipe.modules.length ; i++) {
19+
var m = pipe.modules[i];
20+
if( m.name == "input") {
21+
m.value.input.inputParams.wirable = true;
22+
options.fields.push(m.value.input);
23+
}
24+
else if(m.name == "output") {
25+
options.terminals.push({
26+
name: m.value.name,
27+
"direction": [0,1],
28+
"offsetPosition": {"left": options.terminals.length*40, "bottom": -15},
29+
"ddConfig": {
30+
"type": "output",
31+
"allowedTypes": ["input"]
32+
}
33+
});
34+
}
35+
}
36+
}
37+
38+
WireIt.ComposedContainer.superclass.constructor.call(this, options, layer);
39+
};
40+
YAHOO.extend(WireIt.ComposedContainer, WireIt.FormContainer);

0 commit comments

Comments
 (0)