From 930672bf68b723cdd2db44af219163c3e0a8140b Mon Sep 17 00:00:00 2001 From: neyric Date: Mon, 13 Jul 2009 12:13:59 +0200 Subject: [PATCH] Layouts (experimental) + examples for wire events and layouts --- VERSION.txt | 6 + backend/php/WiringEditor.smd | 46 ------- backend/php/test.html | 63 --------- css/WireItEditor.css | 4 +- examples/WiringEditor/demo.js | 7 +- examples/WiringEditor/index.html | 3 - examples/dotparser/DotToJson.js | 177 +++++++++++++++++++++++++ examples/dotparser/index.html | 84 ++++++++++++ examples/dotparser/philo.dot | 31 +++++ examples/dotparser/sample.dot | 15 +++ examples/dotparser/unix-mod.dot | 52 ++++++++ examples/jsBox/jsBox.js | 1 - examples/logicGates/index.html | 3 - examples/logicGates/logicGates.js | 184 +++++++++++++------------- examples/spring_layout.html | 91 +++++++++++++ examples/wire_tooltips.html | 125 ++++++++++++++++++ examples/wires_and_terminals.html | 3 +- images/terminals.png | Bin 1892 -> 2877 bytes index.html | 213 ++++++++++++++++++++---------- js/Layout.js | 205 ++++++++++++++++++++++++++++ js/Terminal.js | 2 +- 21 files changed, 1031 insertions(+), 284 deletions(-) delete mode 100644 backend/php/WiringEditor.smd delete mode 100644 backend/php/test.html create mode 100644 examples/dotparser/DotToJson.js create mode 100644 examples/dotparser/index.html create mode 100644 examples/dotparser/philo.dot create mode 100644 examples/dotparser/sample.dot create mode 100644 examples/dotparser/unix-mod.dot create mode 100644 examples/spring_layout.html create mode 100644 examples/wire_tooltips.html create mode 100644 js/Layout.js diff --git a/VERSION.txt b/VERSION.txt index 939bf3ee..97b10264 100644 --- a/VERSION.txt +++ b/VERSION.txt @@ -5,8 +5,14 @@ To get the latest version, please visit http://javascript.neyric.com/wireit Version 0.4.1 not released yet +TODO: + * Layer.onChangeEvt (+implementation in WiringEditor for saved state, + implementation in Layouts) + Changeset: + * Spring Layout (experimental) (+examples) + * Wire mouse events + * Adapters for WiringEditor (removed the complicated SMD & YUI-RPC stuff) * Bug fix for wire positioning using FormContainer * Added drawing method 'bezierArrows' (early alpha) diff --git a/backend/php/WiringEditor.smd b/backend/php/WiringEditor.smd deleted file mode 100644 index 764ca08e..00000000 --- a/backend/php/WiringEditor.smd +++ /dev/null @@ -1,46 +0,0 @@ -{ - "SMDVersion":"2.0", - "description": "JSON-RPC interface for the WiringEditor", - - "envelope":"JSON-RPC-2.0", - "transport":"POST", - - "target":"WiringEditor.php", - - "services": { - - "saveWiring" : { - "description": "Save the module", - "parameters": [ - {"name":"name","type":"string"}, - {"name":"working","type":"text"}, - {"name":"language","type":"text"} - ] - }, - - "listWirings" : { - "description": "Get the list of modules", - "parameters": [ - {"name":"language","type":"text"} - ] - }, - - "loadWiring" : { - "description": "Load the module", - "parameters": [ - {"name":"name","type":"string"}, - {"name":"language","type":"text"} - ] - }, - - "deleteWiring" : { - "description": "Delete the module", - "parameters": [ - {"name":"name","type":"string"}, - {"name":"language","type":"text"} - ] - } - - - } -} \ No newline at end of file diff --git a/backend/php/test.html b/backend/php/test.html deleted file mode 100644 index fd890d3f..00000000 --- a/backend/php/test.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - Test for the WiringEditor Php Backend - - - - - - - - - - - - - - - - diff --git a/css/WireItEditor.css b/css/WireItEditor.css index 8b6a3d8b..0169c881 100644 --- a/css/WireItEditor.css +++ b/css/WireItEditor.css @@ -19,10 +19,10 @@ body { } #top .logo { - font-family: cursive; + /*font-family: cursive; + color: #3366CC;*/ font-size: 30px; font-weight: bold; - color: #3366CC; padding-left: 10px; padding-top: 4px; } diff --git a/examples/WiringEditor/demo.js b/examples/WiringEditor/demo.js index 5256b0ed..328b749c 100644 --- a/examples/WiringEditor/demo.js +++ b/examples/WiringEditor/demo.js @@ -1,16 +1,17 @@ var demoLanguage = { + // Set a unique name for the language languageName: "meltingpotDemo", - - smdUrl: '../../backend/php/WiringEditor.smd', + // inputEx fields for pipes properties propertiesFields: [ {"type": "string", inputParams: {"name": "name", label: "Title", typeInvite: "Enter a title" } }, {"type": "text", inputParams: {"name": "description", label: "Description", cols: 30} } ], + // List of node types definition modules: [ - + { "name": "FormContainer", "container": { diff --git a/examples/WiringEditor/index.html b/examples/WiringEditor/index.html index 811d74b7..1c4dba1b 100644 --- a/examples/WiringEditor/index.html +++ b/examples/WiringEditor/index.html @@ -62,9 +62,6 @@ - - - diff --git a/examples/dotparser/DotToJson.js b/examples/dotparser/DotToJson.js new file mode 100644 index 00000000..b4bbc75e --- /dev/null +++ b/examples/dotparser/DotToJson.js @@ -0,0 +1,177 @@ +/** + * Crappy DOT parser + * + * Usage: DotParser.parse(dotString); + * + */ +DotParser = (function() { + + var Tokenizer = function(str) { + this.str = str; + }; + + Tokenizer.prototype = { + + reco: function(s) { + var matches = this.str.match(/^(\S+)\s*/); + if (matches) { + return (s == matches[1]); + } else { + return false; + } + }, + + recoA: function(s) { + var matches = this.str.match(/^(\S+)\s*/); + if (matches) { + this.str = this.str.substr(matches[0].length); + return (s == matches[1]); + } else { + return false; + } + }, + + takeChars: function(num) { + if (!num) { + num = 1; + } + var tokens = new Array(); + while (num--) { + var matches = this.str.match(/^(\S+)\s*/); + if (matches) { + this.str = this.str.substr(matches[0].length); + tokens.push(matches[1]); + } else { + tokens.push(false); + } + } + if (1 == tokens.length) { + return tokens[0]; + } else { + return tokens; + } + }, + takeNumber: function(num) { + if (!num) { + num = 1; + } + if (1 == num) { + return Number(this.takeChars()); + } else { + var tokens = this.takeChars(num); + while (num--) { + tokens[num] = Number(tokens[num]); + } + return tokens; + } + }, + takeString: function() { + var byte_count = Number(this.takeChars()), char_count = 0, char_code; + if ('-' != this.str.charAt(0)) { + return false; + } + while (0 < byte_count) { + ++char_count; + char_code = this.str.charCodeAt(char_count); + if (0x80 > char_code) { + --byte_count; + } else if (0x800 > char_code) { + byte_count -= 2; + } else { + byte_count -= 3; + } + } + var str = this.str.substr(1, char_count); + this.str = this.str.substr(1 + char_count).replace(/^\s+/, ''); + return str; + } + }; + + + + var _graph = null; + var tokenizer = null; + var _log = null; + + function log(o) { + _log.push(o); + } + + function parse(text) { + _graph = { + nodes: [], + edges: [] + }; + _log = []; + tokenizer = new Tokenizer(text); + + graph(); + + //console.log(this._graph); + //console.log(this._log); + + return _graph; + } + + function graph() { + + // strict property + _graph.strict = tokenizer.reco("strict") ? tokenizer.recoA("strict") : false; + + // type property + _graph.type = tokenizer.takeChars(); + if( _graph.type != "graph" && _graph.type != "digraph") { + log("Error, expecting 'graph' or 'digraph'"); + } + + // id + if( !tokenizer.reco('{') ) { + _graph.ID = id(); + } + + // { + if( !tokenizer.recoA('{') ) { + log("Error, expecting '{'"); + } + + stmt_list(); + + // } + if( !tokenizer.recoA('}') ) { + log("Error, expecting '}' got "+tokenizer.takeChars()); + } + + } + + function id() { + return tokenizer.takeChars(); // TODO + } + + + function stmt_list() { stmt(); stmt_list1(); } + function stmt_list1() { while( tokenizer.recoA(";") ) { stmt(); } } + function stmt () { if(tokenizer.reco('}')) return; _graph.edges.push( edge_stmt() ); } + + function edge_stmt() { + return { + node1: node_id(), + op: tokenizer.takeChars(), + node2: node_id() + }; + } + + function node_id() { + var id = tokenizer.takeChars(); + if(_graph.nodes.indexOf(id) == -1) { + _graph.nodes.push(id); + } + return id; + } + + + + return { + parse: parse + }; + +})(); \ No newline at end of file diff --git a/examples/dotparser/index.html b/examples/dotparser/index.html new file mode 100644 index 00000000..6b4a8914 --- /dev/null +++ b/examples/dotparser/index.html @@ -0,0 +1,84 @@ + + + + WireIt Example, DOT parser prototype + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/dotparser/philo.dot b/examples/dotparser/philo.dot new file mode 100644 index 00000000..df77f5cb --- /dev/null +++ b/examples/dotparser/philo.dot @@ -0,0 +1,31 @@ +digraph PhiloDilemma { +ri3 -> acq2 ; +ri3 -> acq3 ; +hu3 -> acq3 ; +bec3 -> hu3 ; +th3 -> bec3 ; +rel3 -> th3 ; +rel3 -> ri3 ; +ea3 -> rel3 ; +acq3 -> ea3 ; +ri2 -> acq1 ; +ri2 -> acq2 ; +hu2 -> acq2 ; +bec2 -> hu2 ; +th2 -> bec2 ; +rel2 -> th2 ; +rel2 -> ri2 ; +ea2 -> rel2 ; +acq2 -> ea2 ; +ri1 -> acq3 ; +ri1 -> acq1 ; +hu1 -> acq1 ; +bec1 -> hu1 ; +th1 -> bec1 ; +rel1 -> th1 ; +rel1 -> ri1 ; +ea1 -> rel1 ; +acq1 -> ea1 ; +} + + diff --git a/examples/dotparser/sample.dot b/examples/dotparser/sample.dot new file mode 100644 index 00000000..6c8e3a1c --- /dev/null +++ b/examples/dotparser/sample.dot @@ -0,0 +1,15 @@ +graph G { + run -- intr ; + intr -- runbl ; + runbl -- run ; + run -- kernel ; + kernel -- zombie ; + kernel -- sleep ; + kernel -- runmem ; + sleep -- swap ; + swap -- runswap ; + runswap -> new ; + runswap -- runmem ; + new -- runmem ; + sleep -- runmem ; +} \ No newline at end of file diff --git a/examples/dotparser/unix-mod.dot b/examples/dotparser/unix-mod.dot new file mode 100644 index 00000000..bce4a97f --- /dev/null +++ b/examples/dotparser/unix-mod.dot @@ -0,0 +1,52 @@ +digraph unix { + "5thEdition" -> "6thEdition" ; + "5thEdition" -> "PWB1.0" ; + "6thEdition" -> "LSX" ; + "6thEdition" -> "1BSD" ; + "6thEdition" -> "MiniUnix" ; + "6thEdition" -> "Wollongong" ; + "6thEdition" -> "Interdata" ; + "Interdata" -> "Unix/TS3.0" ; + "Interdata" -> "PWB2.0" ; + "Interdata" -> "7thEdition" ; + "7thEdition" -> "8thEdition" ; + "7thEdition" -> "32V" ; + "7thEdition" -> "V7M" ; + "7thEdition" -> "Ultrix-11" ; + "7thEdition" -> "Xenix" ; + "7thEdition" -> "UniPlus+" ; + "V7M" -> "Ultrix-11" ; + "8thEdition" -> "9thEdition" ; + "1BSD" -> "2BSD" ; + "2BSD" -> "2.8BSD" ; + "2.8BSD" -> "Ultrix-11" ; + "2.8BSD" -> "2.9BSD" ; + "32V" -> "3BSD" ; + "3BSD" -> "4BSD" ; + "4BSD" -> "4.1BSD" ; + "4.1BSD" -> "4.2BSD" ; + "4.1BSD" -> "2.8BSD" ; + "4.1BSD" -> "8thEdition" ; + "4.2BSD" -> "4.3BSD" ; + "4.2BSD" -> "Ultrix-32" ; + "PWB1.0" -> "PWB1.2" ; + "PWB1.0" -> "USG1.0" ; + "PWB1.2" -> "PWB2.0" ; + "USG1.0" -> "CB Unix1" ; + "USG1.0" -> "USG2.0" ; + "CB Unix1" -> "CB Unix2" ; + "CB Unix2" -> "CB Unix3" ; + "CB Unix3" -> "Unix/TS++" ; + "CB Unix3" -> "PDP-11 SysV" ; + "USG2.0" -> "USG3.0" ; + "USG3.0" -> "Unix/TS3.0" ; + "PWB2.0" -> "Unix/TS3.0" ; + "Unix/TS1.0" -> "Unix/TS3.0" ; + "Unix/TS3.0" -> "TS4.0" ; + "Unix/TS++" -> "TS4.0" ; + "CB Unix3" -> "TS4.0" ; + "TS4.0" -> "SystemV.0" ; + "SystemV.0" -> "SystemV.2" ; + "SystemV.2" -> "SystemV.3" ; +} + diff --git a/examples/jsBox/jsBox.js b/examples/jsBox/jsBox.js index d1f3027c..39836522 100644 --- a/examples/jsBox/jsBox.js +++ b/examples/jsBox/jsBox.js @@ -5,7 +5,6 @@ var jsBox = { language: { languageName: "jsBox", - smdUrl: '../../backend/php/WiringEditor.smd', propertiesFields: [ {"type": "string", inputParams: {"name": "name", label: "Title", typeInvite: "Enter a title" } }, {"type": "text", inputParams: {"name": "description", label: "Description", cols: 30} } diff --git a/examples/logicGates/index.html b/examples/logicGates/index.html index 35dd400f..bab82513 100644 --- a/examples/logicGates/index.html +++ b/examples/logicGates/index.html @@ -26,9 +26,6 @@ - - - diff --git a/examples/logicGates/logicGates.js b/examples/logicGates/logicGates.js index c9d0d914..c58a26a8 100644 --- a/examples/logicGates/logicGates.js +++ b/examples/logicGates/logicGates.js @@ -1,116 +1,116 @@ var logicGatesLang = { - + // Set a unique name for the language languageName: "logicGates", - - smdUrl: '../../backend/php/WiringEditor.smd', + // inputEx fields for pipes properties propertiesFields: [ {"type": "string", inputParams: {"name": "name", label: "Name", typeInvite: "Enter a title"} }, {"type": "text", inputParams: {"name": "description", label: "Description", cols: 30} } ], + // List of node types definition modules: [ - { - "name": "AND", + { + "name": "AND", - "container" : { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/gate_and.png", - "terminals": [ - {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}}, - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } + "container" : { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/gate_and.png", + "terminals": [ + {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}}, + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } - }, + }, - { - "name": "OR", + { + "name": "OR", - "container": { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/gate_or.png", - "terminals": [ - {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}}, - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + "container": { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/gate_or.png", + "terminals": [ + {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}}, + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "NOT", - "container": { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/gate_not.png", - "terminals": [ - {"name": "_INPUT", "direction": [-1,0], "offsetPosition": {"left": -12, "top": 23 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 117, "top": 23 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + { + "name": "NOT", + "container": { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/gate_not.png", + "terminals": [ + {"name": "_INPUT", "direction": [-1,0], "offsetPosition": {"left": -12, "top": 23 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 117, "top": 23 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "NAND", - "container": { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/gate_nand.png", - "terminals": [ - {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 }, "ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + { + "name": "NAND", + "container": { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/gate_nand.png", + "terminals": [ + {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 }, "ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "XOR", - "container": { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/gate_xor.png", - "terminals": [ - {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + { + "name": "XOR", + "container": { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/gate_xor.png", + "terminals": [ + {"name": "_INPUT1", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 2 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_INPUT2", "direction": [-1,0], "offsetPosition": {"left": -3, "top": 37 },"ddConfig": {"type": "input","allowedTypes": ["output"]}, "nMaxWires": 1 }, + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 103, "top": 20 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "A", - "container" : { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/A.png", - "terminals": [ - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + { + "name": "A", + "container" : { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/A.png", + "terminals": [ + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "B", - "container" : { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/B.png", - "terminals": [ - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - }, + { + "name": "B", + "container" : { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/B.png", + "terminals": [ + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + }, - { - "name": "C", - "container" : { - "xtype":"WireIt.ImageContainer", - "image": "../logicGates/images/C.png", - "terminals": [ - {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} - ] - } - } + { + "name": "C", + "container" : { + "xtype":"WireIt.ImageContainer", + "image": "../logicGates/images/C.png", + "terminals": [ + {"name": "_OUTPUT", "direction": [1,0], "offsetPosition": {"left": 94, "top": 18 },"ddConfig": {"type": "output","allowedTypes": ["input"]}} + ] + } + } ] }; diff --git a/examples/spring_layout.html b/examples/spring_layout.html new file mode 100644 index 00000000..08746fdf --- /dev/null +++ b/examples/spring_layout.html @@ -0,0 +1,91 @@ + + + + WireIt Example, Spring model layout + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/wire_tooltips.html b/examples/wire_tooltips.html new file mode 100644 index 00000000..f6e22c09 --- /dev/null +++ b/examples/wire_tooltips.html @@ -0,0 +1,125 @@ + + + + WireIt Example, handle wire events + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/wires_and_terminals.html b/examples/wires_and_terminals.html index 4fc577c0..e06052a4 100644 --- a/examples/wires_and_terminals.html +++ b/examples/wires_and_terminals.html @@ -32,7 +32,8 @@ float: left; position: relative; z-index: 5; - background-color: rgb(255,200,200); + /*background-color: rgb(255,200,200);*/ + border: 1px solid #aaa; opacity: 0.8; padding: 10px; font-weight: bold; diff --git a/images/terminals.png b/images/terminals.png index 5d89b9f3c9437bfc407935d3be476c196f839ec5..06ea4f86c954d19887c466dcdc08fbc1d96e46c4 100644 GIT binary patch delta 2870 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 UTtD^>xBvhE07*qoM6N<$f*Bu%00000 delta 1851 zcmV-B2gLZj7UT|)Bo78+OGiWiDgdPb{27X^W|2T1f7l8O4l)fkSFVHr00!|%L_t(& z-tC!7ZyVPYfWJF4oChDGNQq(#J4j+TksZ`13KaFq@v2B+FANviIPlgx`7aoS{zA0# zq8lUK1Tc)Eu7j)`b<;&xUPJ~OKakjoOiL6W!+G;&ac6`PO^SA<#5KwT9B?o*xZgdG zd(OQ>f0)TkX7Z+sc$Js$-o2}vrWreqL!nRrAc`V9&m#;&e+M8*5`5pM-|y4ubm;f{c%C=a?Zz~) zX_|4~Qpa)7bsZtpoP`iLjst*{5-BA~lEl-DnhJIthf=Au$I=X%fpuNSwr!-8#Bod% zMN`A4O?#nGC}3F@rfI$a9fg~wiDg;48Gj(~PbE{qQ4|pb0bv-DBneW=7v4$ZN*IO& ze?jn4uAUlW&+{l03K)j5n@D+=XV5IOUDw6)yn}8gFg^ zd95Y$r)Uy0naNCMGLxCi;x?RfAx<>>(IcTd=W1+99Di&WU*+lQnv+_0$92r zkq{3h-*n({Px9R7#AhEFQ}Rm6|1(H$f8uH+tTJV9{pd z(w(?*U~t{$+FNC`qQOeJAgGuS451%MdXbB@TRi*tb}SAAe{L29 zL&-JU5R?llrrij75%fZ-epC2ApThAf94QOxHrEbxlBk+cvjnEDU||B`P+1)&IUPcf z!1pdR9S9O}up4IO^VWXXM@eqPUe-aMGt`~magdYYHTL*Xl+?t+T+divL`f8nicqC1# zG_m@jPze^o@0L`2m*+tftZokEfxigIoq(msJ<0tx{OK6`+=}wFgEHBz@yj>9-ufn}8NTjlS%ZJ}K6!eDy&s!dAVZzquf9H%tsntkH zW8UJ~k+PuaK+ym{ftDxH1gqcn8E*Nk0b8GaWE@_1x^yQd8nSPPGIiuM=qrQM+D+Y7 z6>SWd{oFf~nfxE`GUcs{2H*e|V2)_kgCZat(E#wog`4p!gXOJ@WuTgZ?J@94-~jLe z59o*sH~TLImbWhIDKOK@e*|#W>ca`(9?;2DT)3G`1gFp%urLB2XZ1LX_gI_LEufu; ziwV#gP*0)r6Rh43+yiz}=r+(Eh35-vbp%?^!85D#i8cxjQcJz`odTebL~@u;L|L3B zQX|#H5pV{d8?kyE*ax~fOY{01XaOy8;bz}RmrQj;>l5Ikv1Uwcf2}c=Ci#%aTNiyJ z=fX-ZreopX4IBP-bLC`MIYzB$1JEA$n7s#F3D@o&)mn{xpiw%xKH%tozI1Xfh1GJ& zwUEMg-TwFF!+-syzWRse;u0S$6!_J=#*wmM-ZAjZCH|(JZ!*~Y$NSpj_eP)z5U0>x zHBy&ZsoJSJX-umbfAq`6tC!!a2$pN`jyfL!Y9C!HNDLwPQoDMY=iE52e|0(q2C0R1 zE<_e!8Y2ZEdyvJ_`EJ3S#{U}yq?1O&H-S1-Vb3f@Tp)1t@4rO9f~a)wAWAe>$pOH&;%LS~#l41n}+z z!pbq;sVMg@r8`SKSMPM8?kzbG4+U-{`FH;qw8sPU78g=AbJx4~YDJp`TgB8iKpWFm zG@+i&Td-h@EaS(HmtDWs{}!X%;*Lf%Y!7_4e92A#ehkAgN1~xr&vpXX@+Iwo&!q9P zYi&$h+tcFAf8GNg_25xY^2}3T1QH1nrHNGco_Xq>M?Elm4@j5N#IYxVgRBf*3D@pD z?5YFXHyz350Ne5ZdW%g&E6ZUV-re}%c1yIH|MuYYx#=iInGym~p7 zYRN3vD!sRS<=%%~1x>5gcG{u3xe4s?fRMK?R)8k(%k(#Ejg1LS;?zD(!XDEOTe+6F z349N1inJ{@NBVK&0Bx}|1>OQSU)x3?zvrr_;KSJZbjHBjDRg^u&(#_8O(bjL!69w- pI{!P{A=}rwp?|GMn4jy=_9K*9GG|wMnvnni002ovPDHLkV1hT+fN1~# diff --git a/index.html b/index.html index 4132e6d0..362c97e6 100644 --- a/index.html +++ b/index.html @@ -18,10 +18,10 @@ #headbar { background-image: url(res/logo-wireit.jpg); height: 223px; margin: 0; padding: 0; } -#navigation { position: absolute; margin: 6px 0 0 380px; } -#navigation li { margin: 0; display: inline; margin-right: 30px;} -#navigation li a { color: white; text-decoration: none; font-size: 14px; } -#navigation li a:hover { color: #cccc33; text-decoration: underline; } +/*.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%;} @@ -31,11 +31,11 @@ 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: 160px; top: 10px; font-size: 18px; text-decoration: none;} +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: 12pt;} -div.appBox p span.big { color: #ffb73e; font-size: 20pt; font-weight: bold;} +div.appBox p span {color: #aaa;font-size: 11pt;} +div.appBox p span.big { color: #ffb73e; font-size: 16pt; font-weight: bold;} @@ -44,15 +44,21 @@ @@ -61,18 +67,11 @@ -

About

- -

   WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages or graphical modeling.

- -

   It supports all A-Grade Browsers. Please report your issues with specific browsers in the forum.

-

   It uses the YUI library (2.7.0) for DOM and events manipulation, and excanvas for IE support of the canvas tag.

+ -

What's new in 0.4 ?

-
    -
  • The WiringEditor, a full-blown interface to use visual languages.
    • -
- +

WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages, graphical modeling, or graph editors.

+ +
@@ -84,40 +83,49 @@
- -

Documentation

-

   WireIt comes with an exhaustive API documentation built with YUI Doc,
and the following examples :

+

Presentation

+ +

Here are the main component classes (bottom-up order):

+ +
    +
  • Wire - create wires in browsers
    • +
  • Terminal - wire endpoints and edition widget
    • +
  • Container - general "box" containing one or more terminals
    • +
  • Layer - handle multiple containers and wires
    • +
  • WiringEditor - single-page editor for your visual language.
    • +
- -
- - Learn Wires, Terminals -

learn
Wires, Terminals

- -
+

Different types of Container are provided :

+
    +
  • ImageContainer - use images as graph nodes
    • +
  • FormContainer - build form containers based on inputEx forms
    • +
+

You can create your own container by subclassing the base Container class, and still benefit from the drop-in use of the WiringEditor in your web application.

- -
- - Learn Containers, WiringEditor -

learn
Containers, WiringEditor

- -
+

The WiringEditor requires a connection to a database to use save/load features. You can customize it using adapters. A default adapter is provided, which uses JSON-RPC through ajax calls, and a PHP/MySQL backend.

-
    - -
  • Interactive presentation
    • -
  • Using animation
    • -
  • Using events
    • +

    WireIt supports all A-Grade Browsers. Please report your issues with specific browsers in the forum. It uses the YUI library (2.7.0) for DOM and events manipulation, and excanvas for IE support of the canvas tag.

    + + + +

    Documentation

    + + + - + +

    You can also get some help on the forum. Please report your issues or feature request at LightHouse.

    + +

    Deeper hacking into WireIt might require some knowledge in the libraries used :

    + @@ -126,33 +134,34 @@

    Download

    -

    Download WireIt 0.4.0
    (WireIt-0.4.0.zip - 7.8MB - changeset)

    + +
    + Download WireIt 0.4.0
    + (WireIt-0.4.0.zip - 7.8MB - changeset) +

    WireIt is released under the MIT License.

    Clone from GitHub: git clone git://github.com/neyric/wireit.git

    - - - -

    WireIt-based projects

    - +
    + + + + +
    + -

    Applications

    +

    Featured examples

    - Click to play now ! + Click to play now !

    Play the
    Planar Game
    @@ -161,7 +170,7 @@
    - Click to try jsBox ! + Click to try jsBox !

    visual javascript demo
    jsBox
    @@ -169,19 +178,85 @@
    - Click to try jsBox ! + Click to try jsBox !

    WiringEditor demo
    Logic Gates
    + + +
    + + Learn Wires, Terminals +

    learn
    Wires, Terminals

    +     +
    + - twitter Follow WireIt on Twitter

    - Bookmarks on Del.icio.us

    - twitter Follow on Github + +
    + + Learn Containers, WiringEditor +

    learn
    Containers, WiringEditor

    +     +
    + +

    More examples :

    + + + + +

    WireIt-based projects

    + + + + +

    Community

    + +
    + + +
    + + +
    + + +
    + + -

    Copyright (c) 2007-2009 Eric Abouaf

    + +
    + + + +

    Rails is released under the MIT license.

    +
    +