Skip to content

Commit

Permalink
WiringEditor: search box in load panel, Layer: eventChanged
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericabouaf
ericabouaf committed Jul 20, 2009
1 parent 86d229b commit 2db5490
Show file tree
Hide file tree
Showing 6 changed files with 198 additions and 140 deletions.
21 changes: 19 additions & 2 deletions VERSION.txt
View file
Expand Up @@ -2,14 +2,31 @@
To get the latest version, please visit http://javascript.neyric.com/wireit
---------------------------------------------------------------------------

Version 0.4.1
Version 0.5.0
not released yet

Current:
* Layer.onChangeEvt (+implementation in WiringEditor for saved state, + implementation in Layouts to reinit the layout)

TODO:
* Layer.onChangeEvt (+implementation in WiringEditor for saved state, + implementation in Layouts)

* Guide
* Do Ajax + REST adapter
* BUG: jsBox: form values in input fields are overriden !!
* Autoload in WiringEditor: example, si http://.../editor/?name=test/math => charger "test/math"
* Default language propertiesForm
* Provide XML Adapter using REST Adapter
* Gears adapter if no backend usable
* BUG: if terminal not visible, give the offset of the first parent DOM element visible

LATER

* Uneditable layer

Changeset:

* filter box in load panel
* InOutContainer
* Spring Layout (experimental) (+examples)
* Wire mouse events
* Adapters for WiringEditor (removed the complicated SMD & YUI-RPC stuff)
Expand Down
93 changes: 42 additions & 51 deletions examples/jsBox/jsBox.js
View file
Expand Up @@ -126,48 +126,53 @@ jsBox.WiringEditor = function(options) {

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

/**
* Update the module list right after loading the SMD
*/
onSMDsuccess: function() {

this.service.listWirings({language: this.options.languageName},{
success: function(result) {
this.pipes = result.result;
this.pipesByName = {};
this.renderLoadPanel();
this.updateLoadPanelList();
//this.loadPanel.show();
},
scope: this
});
},


/**
* Add the "run" button
*/
renderButtons: function() {
jsBox.WiringEditor.superclass.renderButtons.call(this);

// Add the run button
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);
},

/**
* Overwrite updateLoadPanelList to add Composed modules to the module list
*/
updateLoadPanelList: function() {
try {
var left = YAHOO.util.Dom.get('left');
var list = WireIt.cn("ul");
if(YAHOO.lang.isArray(this.pipes)) {
for(var i = 0 ; i < this.pipes.length ; i++) {
var module = this.pipes[i];

this.pipesByName[module.name] = module;

// Add the module to the list

load: function() {

this.adapter.listWirings({language: this.options.languageName},{
success: function(result) {
this.pipes = result.result;
this.pipesByName = {};
this.renderLoadPanel();
this.updateLoadPanelList();
this.loadPanel.show();

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

},


updateComposedModuleList: function() {

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);
Expand All @@ -178,27 +183,13 @@ YAHOO.lang.extend(jsBox.WiringEditor, WireIt.WiringEditor, {
"title": module.name
}
};
left.appendChild(div);

this.leftEl.appendChild(div);

var li = WireIt.cn('li',null,{cursor: 'pointer'},module.name);
YAHOO.util.Event.addListener(li, 'click', function(e,args) {
try {
this.loadPipe(YAHOO.util.Event.getTarget(e).innerHTML);
}
catch(ex) {
console.log(ex);
}
}, this, true);
list.appendChild(li);
}
}
var panelBody = YAHOO.util.Dom.get('loadPanelBody');
panelBody.innerHTML = "";
panelBody.appendChild(list);

}catch(ex){console.log(ex);}
}
}
}

}


});

Expand Down
49 changes: 12 additions & 37 deletions index.html
View file
Expand Up @@ -5,39 +5,12 @@
<title>WireIt - a Javascript Wiring Library</title>
<meta name="author" content="Eric Abouaf" />
<meta name="copyright" content="Copyright 2006-2009 Eric Abouaf" />
<meta name="keywords" content="wireit,javascript,library,pipes,visualization,yui,programming,canvas,wire,wires,framework" />
<meta name="keywords" content="wireit,javascript,library,pipes,visualization,yui,programming,canvas,wire,wires,framework,webdev,ajax,ui,web,graphics,graph,graphs,opensource,tools" />
<meta name="description" content="WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages or graphical modeling." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="WireIt blog" href="http://javascript.neyric.com/blog/feed/" />
<link rel="shortcut icon" type="images/x-icon" href="res/favicon.ico" />
<style>

body { background-color: white; margin: 0; padding: 0; font-family:"Trebuchet MS",Helvetica,Arial,Verdana; font-size: 13px; }
p { font-size: 13px; }
ul li { font-size: 13px;}

#headbar { background-image: url(res/logo-wireit.jpg); height: 223px; margin: 0; padding: 0; }

/*.navigation { }*/
.navigation li { margin: 0; display: inline; margin-right: 30px;}
.navigation li a { color: #999999; text-decoration: none; font-size: 14px; }
.navigation li a:hover { color: #cccc33; text-decoration: underline; }

#layout { width: 80%; }
#layout td.left { width: 55%;}
#layout td.right { width: 45%;}
#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(res/star.png); }

div.appBox { width: 100%; /*height: 144px;*/ position: relative; margin-top: 10px; }
div.appBox p { position: absolute; left: 130px; top: 0px; font-size: 18px; text-decoration: none;}
div.appBox a {text-decoration: none;}
div.appBox p span {color: #aaa;font-size: 11pt;}
div.appBox p span.big { color: #ffb73e; font-size: 16pt; font-weight: bold;}
</style>

<link rel="stylesheet" type="text/css" href="res/style.css" />
</head>

<body>
Expand All @@ -48,7 +21,8 @@
<li><a href="http://javascript.neyric.com/wireit">Home</a></li>
<li><a href="http://github.com/neyric/wireit/">GitHub[Git]</a></li>
<li><a href="http://neyric.lighthouseapp.com/projects/25048-wireit">Issues</a></li>
<li><a href="doc/index.html">Documentation</a></li>
<li><a href="guide.html">Guide</a></li>
<li><a href="doc/index.html">API Documentation</a></li>
<li><a href="http://javascript.neyric.com/blog/category/wireit/">Blog</a>
<a href="http://javascript.neyric.com/blog/feed/"><img src="doc/rss.png" border="0"/></a></li>
<li><a href="http://groups.google.com/group/wireit/">Forums</a></li>
Expand Down Expand Up @@ -99,8 +73,9 @@

<p>Different types of Container are provided :</p>
<ul>
<li>ImageContainer - use images as graph nodes</li>
<li>InOutContainer - simple module with named inputs and outputs</li>
<li>FormContainer - build form containers based on <a href="http://javascript.neyric.com/inputex/">inputEx</a> forms</li>
<li>ImageContainer - use images as graph nodes</li>
</ul>

<p>You can create your own container by subclassing the base <i>Container</i> class, and still benefit from the drop-in use of the WiringEditor in your web application.</p>
Expand All @@ -115,6 +90,7 @@


<ul>
<li><a href="guide.html">WireIt's Guide</a> - the ultimate ressource</li>
<li><a href="doc/index.html">API documentation</a> built with <a href="http://developer.yahoo.com/yui/yuidoc/">YUI Doc</a></li>
<li><a href="http://wiki.github.com/neyric/wireit">Wiki</a></li>
</ul>
Expand All @@ -132,10 +108,8 @@
<!-- Right Column -->
<td class="right">

<!-- Updates changeset -->
<p class="title">Download</p>

<div style="text-align:center;font-weight:bold; font-size:15px;background-color:#EEEEEE;-moz-border-radius: 10px; padding: 10px;-webkit-border-radius: 10px;">
<!-- Download -->
<div style="text-align:center;font-weight:bold; font-size:17px;background-color:#EEEEEE;-moz-border-radius: 10px; padding: 10px;-webkit-border-radius: 10px;">
<a href="http://cloud.github.com/downloads/neyric/wireit/WireIt-0.4.0.zip">Download WireIt 0.4.0</a><br/>
<span style="font-size: 70%; font-weight: normal;">(WireIt-0.4.0.zip - 7.8MB - <a href="VERSION.txt">changeset</a>)</span>
</div>
Expand Down Expand Up @@ -250,12 +224,13 @@
<li><a href="http://javascript.neyric.com/wireit">Home</a></li>
<li><a href="http://github.com/neyric/wireit/">GitHub[Git]</a></li>
<li><a href="http://neyric.lighthouseapp.com/projects/25048-wireit">Issues</a></li>
<li><a href="doc/index.html">Documentation</a></li>
<li><a href="guide.html">Guide</a></li>
<li><a href="doc/index.html">API Documentation</a></li>
<li><a href="http://javascript.neyric.com/blog/category/wireit/">Blog</a></a></li>
<li><a href="http://groups.google.com/group/wireit/">Forums</a></li>
</ul>

<p style="font-size: 90%; margin-top: 20px;">Rails is released under the <a href="license.txt" style="color: white;">MIT license</a>.</p>
<p style="font-size: 90%; margin-top: 20px;">WireIt is released under the <a href="license.txt" style="color: white;">MIT license</a>.</p>
</div>

</center>
Expand Down
20 changes: 17 additions & 3 deletions js/Layer.js
View file
Expand Up @@ -29,7 +29,13 @@ WireIt.Layer = function(options) {
* @type {HTMLElement}
*/
this.el = null;


/**
* Event that is fired when the layer has been changed
* You can register this event with myTerminal.eventChanged.subscribe(function(e,params) { }, scope);
* @event eventChanged
*/
this.eventChanged = new YAHOO.util.CustomEvent("eventChanged");

/**
* Event that is fired when a wire is added
Expand All @@ -45,7 +51,6 @@ WireIt.Layer = function(options) {
*/
this.eventRemoveWire = new YAHOO.util.CustomEvent("eventRemoveWire");


/**
* Event that is fired when a container is added
* You can register this event with myTerminal.eventAddContainer.subscribe(function(e,params) { var container=params[0];}, scope);
Expand Down Expand Up @@ -74,7 +79,6 @@ WireIt.Layer = function(options) {
*/
this.eventContainerResized = new YAHOO.util.CustomEvent("eventContainerResized");


this.render();

this.initContainers();
Expand Down Expand Up @@ -190,15 +194,19 @@ WireIt.Layer.prototype = {
if(container.ddResize) {
container.ddResize.on('endDragEvent', function() {
this.eventContainerResized.fire(container);
this.eventChanged.fire(this);
}, this, true);
}
if(container.dd) {
container.dd.on('endDragEvent', function() {
this.eventContainerDragged.fire(container);
this.eventChanged.fire(this);
}, this, true);
}

this.eventAddContainer.fire(container);

this.eventChanged.fire(this);

return container;
},
Expand All @@ -216,6 +224,8 @@ WireIt.Layer.prototype = {
this.containers = WireIt.compact(this.containers);

this.eventRemoveContainer.fire(container);

this.eventChanged.fire(this);
}
},

Expand All @@ -238,6 +248,9 @@ WireIt.Layer.prototype = {

// Re-Fire an event at the layer level
this.eventAddWire.fire(wire);

// Fire the layer changed event
this.eventChanged.fire(this);
}
},

Expand All @@ -254,6 +267,7 @@ WireIt.Layer.prototype = {
this.wires[index] = null;
this.wires = WireIt.compact(this.wires);
this.eventRemoveWire.fire(wire);
this.eventChanged.fire(this);
}
},

Expand Down

0 comments on commit 2db5490

Please sign in to comment.