@@ -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) VERSION.txt @@ -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); @@ -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);} - } + } + } + + } + }); examples/jsBox/jsBox.js @@ -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> @@ -48,7 +21,8 @@ div.appBox p span.big { color: #ffb73e; font-size: 16pt; font-weight: bold;} <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> @@ -99,8 +73,9 @@ div.appBox p span.big { color: #ffb73e; font-size: 16pt; font-weight: bold;} <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> @@ -115,6 +90,7 @@ div.appBox p span.big { color: #ffb73e; font-size: 16pt; font-weight: bold;} <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> @@ -132,10 +108,8 @@ div.appBox p span.big { color: #ffb73e; font-size: 16pt; font-weight: bold;} <!-- 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> @@ -250,12 +224,13 @@ div.appBox p span.big { color: #ffb73e; font-size: 16pt; font-weight: bold;} <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> index.html @@ -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 @@ -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); @@ -74,7 +79,6 @@ WireIt.Layer = function(options) { */ this.eventContainerResized = new YAHOO.util.CustomEvent("eventContainerResized"); - this.render(); this.initContainers(); @@ -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; }, @@ -216,6 +224,8 @@ WireIt.Layer.prototype = { this.containers = WireIt.compact(this.containers); this.eventRemoveContainer.fire(container); + + this.eventChanged.fire(this); } }, @@ -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); } }, @@ -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); } }, js/Layer.js @@ -93,26 +93,7 @@ WireIt.WiringEditor = function(options) { modal: true }); this.helpPanel.render(); - - this.alertPanel = new widget.Panel('WiringEditor-alertPanel', { - fixedcenter: true, - draggable: true, - width: '500px', - visible: false, - modal: true - }); - this.alertPanel.setHeader("Message"); - this.alertPanel.setBody("<div id='alertPanelBody'></div>"); - this.alertPanel.render(document.body); - Event.onAvailable('alertPanelBody', function() { - var button = WireIt.cn('button', null, null, "Ok"); - Dom.get('alertPanelBody').appendChild(button); - Event.addListener(button,'click', function() { - this.alertPanel.hide(); - }, this, true); - }, this, true); - /** * @property layout @@ -126,6 +107,7 @@ WireIt.WiringEditor = function(options) { * @type {WireIt.Layer} */ this.layer = new WireIt.Layer(this.options.layerOptions); + this.layer.eventChanged.subscribe(this.onLayerChanged, this, true); /** * @property leftEl @@ -170,7 +152,6 @@ WireIt.WiringEditor.prototype = { this.adapter = options.adapter || WireIt.WiringEditor.adapters.JsonRpc; this.options.languageName = options.languageName || 'anonymousLanguage'; - this.options.propertiesFields = options.propertiesFields; @@ -287,7 +268,7 @@ WireIt.WiringEditor.prototype = { var value = this.getValue(); if(value.name === "") { - alert("Please choose a name"); + this.alert("Please choose a name"); return; } @@ -307,7 +288,7 @@ WireIt.WiringEditor.prototype = { */ saveModuleSuccess: function(o) { - alert("Saved !"); + this.alert("Saved !"); console.log(this.tempSavedWiring); var name = this.tempSavedWiring.name; @@ -326,10 +307,12 @@ WireIt.WiringEditor.prototype = { * @method saveModuleFailure */ saveModuleFailure: function(o) { - alert("error while saving! "); + this.alert("error while saving! "); }, - alert: function() { + alert: function(txt) { + if(!this.alertPanel){ this.renderAlertPanel(); } + Dom.get('alertPanelBody').innerHTML = txt; this.alertPanel.show(); }, @@ -345,9 +328,12 @@ WireIt.WiringEditor.prototype = { * @method onNew */ onNew: function() { - this.layer.clear(); - - this.propertiesForm.clear(); + this.preventLayerChangedEvent = true; + + this.layer.clear(); + this.propertiesForm.clear(); + + this.preventLayerChangedEvent = false; }, /** @@ -359,8 +345,10 @@ WireIt.WiringEditor.prototype = { var value = this.getValue(); this.adapter.deleteWiring({name: value.name, language: this.options.languageName},{ success: function(result) { - alert("Deleted !"); - } + this.onNew(); + this.alert("Deleted !"); + }, + scope: this }); } @@ -386,38 +374,56 @@ WireIt.WiringEditor.prototype = { modal: true }); this.loadPanel.setHeader("Select module"); - this.loadPanel.setBody("<div id='loadPanelBody'></div>"); + this.loadPanel.setBody("Search: <input type='text' id='loadFilter' /><div id='loadPanelBody'></div>"); this.loadPanel.render(document.body); + + // Listen the keyup event to filter the module list + Event.onAvailable('loadFilter', function() { + Event.addListener('loadFilter', "keyup", this.inputFilterTimer, this, true); + }, this, true); + } }, + /** + * Method called from each keyup on the search filter in load panel. + * The real filtering occurs only after 500ms so that the filter process isn't called too often + */ + inputFilterTimer: function() { + if(this.inputFilterTimeout) { + clearTimeout(this.inputFilterTimeout); + this.inputFilterTimeout = null; + } + var that = this; + this.inputFilterTimeout = setTimeout(function() { + that.updateLoadPanelList(Dom.get('loadFilter').value); + }, 500); + }, + /** * @method updateLoadPanelList */ - updateLoadPanelList: function() { + updateLoadPanelList: function(filter) { + var list = WireIt.cn("ul"); if(lang.isArray(this.pipes)) { for(var i = 0 ; i < this.pipes.length ; i++) { var module = this.pipes[i]; - this.pipesByName[module.name] = module; - - var li = WireIt.cn('li',null,{cursor: 'pointer'},module.name); - Event.addListener(li, 'click', function(e,args) { - try { - this.loadPipe(Event.getTarget(e).innerHTML); - } - catch(ex) { - console.log(ex); - } - }, this, true); - list.appendChild(li); + if(!filter || filter === "" || module.name.match(new RegExp(filter,"i")) ) { + list.appendChild( WireIt.cn('li',null,{cursor: 'pointer'},module.name) ); + } } } var panelBody = Dom.get('loadPanelBody'); panelBody.innerHTML = ""; panelBody.appendChild(list); + + Event.addListener(list, 'click', function(e,args) { + this.loadPipe(Event.getTarget(e).innerHTML); + }, this, true); + }, /** @@ -429,6 +435,7 @@ WireIt.WiringEditor.prototype = { success: function(result) { this.pipes = result.result; this.pipesByName = {}; + this.renderLoadPanel(); this.updateLoadPanelList(); this.loadPanel.show(); @@ -468,6 +475,13 @@ WireIt.WiringEditor.prototype = { * @param {String} name Pipe name */ loadPipe: function(name) { + + try { + + this.preventLayerChangedEvent = true; + + this.loadPanel.hide(); + var pipe = this.getPipeByName(name), i; // TODO: check if current pipe is saved... @@ -502,9 +516,52 @@ WireIt.WiringEditor.prototype = { } } - this.loadPanel.hide(); + + this.preventLayerChangedEvent = true; + + } + catch(ex) { + this.alert(ex); + } }, - + + renderAlertPanel: function() { + + /** + * @property alertPanel + * @type {YAHOO.widget.Panel} + */ + this.alertPanel = new widget.Panel('WiringEditor-alertPanel', { + fixedcenter: true, + draggable: true, + width: '500px', + visible: false, + modal: true + }); + this.alertPanel.setHeader("Message"); + this.alertPanel.setBody("<div id='alertPanelBody'></div><button id='alertPanelButton'>Ok</button>"); + this.alertPanel.render(document.body); + Event.addListener('alertPanelButton','click', function() { + this.alertPanel.hide(); + }, this, true); + }, + + + onLayerChanged: function() { + if(!this.preventLayerChangedEvent) { + console.log("layer changed !"); + this.markUnsaved(); + } + }, + + markSaved: function() { + + }, + + markUnsaved: function() { + + }, + /** * This method return a wiring within the given vocabulary described by the modules list @@ -555,6 +612,10 @@ WireIt.WiringEditor.adapters = {}; */ WireIt.WiringEditor.adapters.JsonRpc = { + config: { + url: '../../backend/php/WiringEditor.php' + }, + saveWiring: function(val, callbacks) { this._sendJsonRpcRequest("saveWiring", val, callbacks); }, @@ -571,7 +632,7 @@ WireIt.WiringEditor.adapters.JsonRpc = { _sendJsonRpcRequest: function(method, value, callbacks) { var postData = YAHOO.lang.JSON.stringify({"id":(this._requestId++),"method":method,"params":value,"version":"json-rpc-2.0"}); - YAHOO.util.Connect.asyncRequest('POST', '../../backend/php/WiringEditor.php', { + YAHOO.util.Connect.asyncRequest('POST', this.config.url, { success: function(o) { var s = o.responseText, r = YAHOO.lang.JSON.parse(s); js/WiringEditor.js @@ -1,7 +1,7 @@ /* Distributed under the MIT License : -Copyright (c) 2007-2008, Eric Abouaf <neyric@via.ecp.fr> +Copyright (c) 2007-2009, Eric Abouaf <eric.abouaf at gmail> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal license.txt 86d229bd5b56835dc3d42ddd20b5c834fa5eb24b neyric eric.abouaf@gmail.com http://github.com/neyric/wireit/commit/2db5490566f482e74ea695dfe9314b2963ee473d 2db5490566f482e74ea695dfe9314b2963ee473d 2009-07-20T13:54:02-07:00 2009-07-20T13:54:02-07:00 WiringEditor: search box in load panel, Layer: eventChanged e8c092ec1b0129026d5af04b62775d374bf0bebc neyric eric.abouaf@gmail.com