Bump version & changelog

Fixes #911

.gitignore

@@ -1,11 +1,19 @@
-node_modules
-credentials.json
-flows*.json
+.DS_store
+.config.json
+.dist
+.jshintignore
+.npm
+.project
+.sessions.json
+.settings
+.tern-project
 *.backup
 *_cred*
+coverage
+credentials.json
+flows*.json
 nodes/node-red-nodes/
-.npm
-/coverage
-.config.json
-.sessions.json
-
+node_modules
+public
+locales/zz-ZZ
+nodes/core/locales/zz-ZZ

.jshintrc

@@ -0,0 +1,14 @@
+{
+    "asi": true,        // allow missing semicolons
+    "curly": true,      // require braces
+    "eqnull": true,     // ignore ==null
+    "forin": true,      // require property filtering in "for in" loops
+    "immed": true,      // require immediate functions to be wrapped in ( )
+    "nonbsp": true,     // warn on unexpected whitespace breaking chars
+    //"strict": true,   // commented out for now as it causes 100s of warnings, but want to get there eventually
+    //"unused": true,   // Check for unused functions and variables
+    "loopfunc": true,   // allow functions to be defined in loops
+    //"expr": true,     // allow ternery operator syntax...
+    "sub": true,        // don't warn that foo['bar'] should be written as foo.bar
+    "proto": true       // allow setting of __proto__ in node < v0.12
+}

.nodemonignore

@@ -1,4 +1,5 @@
-.git/*
-*.json
-lib/*
+/Gruntfile.js
+/.git/*
+/lib/*
 *.backup
+/public/*

.npmignore

@@ -0,0 +1,7 @@
+.settings
+.jshintignore
+.jshintrc
+.project
+.tern-project
+.travis.yml
+.git

.travis.yml

@@ -1,9 +1,24 @@
+sudo: false
 language: node_js
-before_install:
-  - npm install -g npm@~1.4.18
+env:
+  - CXX="g++-4.8"
+addons:
+  apt:
+    sources:
+    - ubuntu-toolchain-r-test
+    packages:
+    - g++-4.8
+    - gcc-4.8
+matrix:
+  allow_failures:
+  - node_js: "5"
+  - node_js: "6"
 node_js:
+  - "6"
+  - "5"
+  - "4"
+  - "0.12"
   - "0.10"
-  - "0.8"
 script:
   - istanbul cover ./node_modules/.bin/grunt --report lcovonly && istanbul report text && ( cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js || true ) && rm -rf coverage
 before_script:

CHANGELOG.md

@@ -0,0 +1,353 @@
+#### 0.14.1: Maintenance Release
+
+Fixes
+
+ - Handle undefined property that led to missing wires in the editor
+ - Remove duplicate 'Delete' entry in keyboard shortcut window. Closes #911
+ - Add 'exec' to node-red-pi launch script. Closes #910
+
+#### 0.14.0: Milestone Release
+
+Editor
+
+ - Replace edit dialog with edit tray
+ - Enable shift-drag detach of just the selected link
+ - Allow workspace tabs to be re-ordered
+ - Scope keyboard shortcuts to dom elements
+ - Ensure parent nodes marked as changed due to child config node changes
+ - Validate all edit dialog inputs when one changes
+ - Add editableList widget and update Switch/Change nodes to use it
+ - Add option to filter Debug sidebar by flow and highlight subflow-emitting nodes
+ - Back off comms reconnect attempts after prolonged failures
+ - Prompt for login if comms reconnect fails authentication
+ - Change style of nodes in subflow template view
+ - Add CHANGELOG.md and make it accessible from menu
+
+Runtime
+
+ - Always log node warnings on start without requiring -v
+ - Add support for loading scoped node modules. Closes #885
+ - Add process.env.PORT to settings.js
+ - Clear node context on deploy. Closes #870
+ - Enable finer grained permissions in adminAuth
+
+Nodes
+
+ - Enable config nodes to reference other config nodes
+ - Add Split/Join nodes
+ - Add Link nodes
+ - Add support to HTTP In node for PATCH requests. Closes #904
+ - Add cookie handling to HTTP In and HTTP Response nodes
+ - Add repeat indicator to inject node label. Closes #887
+ - Add javascript highlighter to template node
+ - Add optional timeout to exec node
+ - Add TLS node and update MQTT/HTTP nodes to use it
+ - Let trigger node also send last payload to arrive
+ - Add timestamp as a default typedInput and update Inject and change nodes to match,
+ - Add QoS option to MQTT In node
+ - Add status to exec spawn mode
+ - Add Move capability to Change node
+ - Update Serial node to support custom baud rates
+ - Add support for array-syntax in typedInput msg properties
+ - Add RED.util to Function node sandbox
+ - Capture error stack on node.error. Closes #879
+
+
+Fixes
+
+ - Add error handling to all node definition api calls
+ - Handle null return from Function node in array of messages
+ - Defer loading of token sessions until they are accessed. Fixes #895
+ - set pi gpio pin status correctly if set on start
+ - Prevent parent window scrolling when view is focused. Fixes #635
+ - Handle missing tab nodes in a loaded flow config
+ - Ensure typedInput dropdown doesn't fall off the page
+ - Protect against node types with reserved names such as toString. Fixes #880
+ - Do not rely on the HTML file to identify where nodes are registered from
+ - Preserve node properties on import
+ - Fix regression in delay node. topic based queue was emptying all the time instead of spreading out messages.
+ - Throw an error if a Function node adds an input event listener
+ - Fix hang on partial deploy with disconnected mqtt node
+ - TypedInput: preload type icons to ensure width calc correct
+ - Ensure tcp node creates a buffer of size 1 at least
+ - Return editorTheme default if value is undefined
+ - Fix RED.util.compareObjects for Function created objects and Buffers
+ - Ensure default settings copied to command-line specified userDir
+
+
+#### 0.13.4: Maintenance Release
+
+ - Add timed release mode to delay node
+ - Enable link splicing for when import_dragging nodes. Closes #811
+ - Fix uncaught exception on deploy whilst node sending messages
+ - Deprecate old mqtt client and connection pool modules
+ - Change node: add bool/num types to change mode Closes #835
+ - Validate fields that are `$(env-vars)` Closes #825
+ - Handle missing config nodes when validating node properties
+ - Pi node - don't try to send data if closing
+ - Load node message catalog when added dynamically
+ - Split palette labels on spaces and hyphens when laying out
+ - Warn if editor routes are accessed but runtime not started Closes #816
+ - Better handling of zero-length flow files Closes #819
+ - Allow runtime calls to RED._ to specify other namespace
+ - Better right alignment of numerics in delay and trigger nodes
+ - Allow node modules to include example flows
+ - Create node_modules in userDir
+ - Ensure errors in node def functions don't break view rendering Fixes #815
+ - Updated Inject node info with instructions for flow and global options
+
+
+
+#### 0.13.3: Maintenance Release
+
+ - Fix crash on repeated inject of invalid json payload
+ - Add binary mode to tail node
+ - Revert Cheerio to somewhat smaller version
+ - Add os/platform info to default debug
+
+
+
+#### 0.13.2: Maintenance Release
+
+ - Don't force reconnect mqtt client if message arrives (fixes the MQTT connect/disconnect endless cycle)
+ - Add -p/--port option to override listening port
+ - Invert config node filter toggle button colours so state is more obvious
+ - Add timeout to httprequest node
+ - Tidy up of all node info content - make style consistent
+ - Make jquery spinner element css consistent with other inputs
+ - tcp node add reply (to all) capability
+ - Allow the template node to be treated as plain text
+ - Validate MQTT In topics Fixes #792
+ - httpNodeAuth should not block http options requests Fixes #793
+ - Disable perMessageDeflate on WS servers - fixes 'zlib binding closed' error
+ - Clear trigger status icon on re-deploy
+ - Don't default inject payload to blank string
+ - Trigger node, add configurable reset
+ - Allow function properties in settings Fixes #790 - fixes use of httpNodeMiddleware
+ - Fix order of config dialog calls to save/creds/validate
+ - Add debounce to Pi GPIO node
+
+
+
+#### 0.13.1: Maintenance Release
+
+ - Revert wrapping of http request object
+
+
+
+#### 0.13.0: Milestone Release
+
+ - Add 'previous value' option to Switch node
+ - Allow existing nodes to splice into links on drag
+ - CORS not properly configured on multiple http routes Fixes #783
+ - Restore shift-drag to snap/unsnap to grid
+ - Moving nodes with keyboard should flag workspace dirty
+ - Notifications flagged as fixed should not be click-closable
+ - Rework config sidebar and deploy warning
+ - Wrap http request object to match http response object
+ - Add 'view' menu and reorganise a few things
+ - Allow shift-click to detach existing wires
+ - Splice nodes dragged from palette into links
+ - try to trim imported/dragged flows to [ ]
+ - Move version number as title of NR logo
+ - Moving nodes mark workspace as dirty
+ - Ok/Cancel edit dialogs with Ctrl-Enter/Escape
+ - Handle OSX Meta key when selecting nodes
+ - Add grid-alignment options
+ - Add oneditresize function definition
+ - Rename propertySelect to typedInput and add boolean opt
+ - Add propertySelect to switch node
+ - Add propertySelect support to Change node
+ - Add context/flow/global support to Function node
+ - Add node context/flow/global
+ - Add propertySelect jquery widget
+ - Add add/update/delete flow apis
+ - Allow core nodes dir to be provided to runtime via settings
+ - Tidy up API passed to node modules
+ - Move locale files under api/runtime components
+ - Add flow reload admin api
+
+
+
+#### 0.12.5: Maintenance Release
+
+ - Add attribute capability to HTML parser node
+ - Add Pi Keyboard code node
+ - Fix for MQTT client connection cycling on partial deploy
+ - Fix for tcp node properly closing connections
+ - Update sentiment node dependencies
+ - Fix for file node handling of UTF8 extended characters
+
+
+
+#### 0.12.4: Maintenance Release
+
+ - Add readOnly setting to prevent file writes in localfilesystem storage
+ - Support bcrypt for httpNodeAuth
+ - Pi no longer needs root workaround to access gpio
+ - Fix: Input File node will not retain the file name
+
+
+
+#### 0.12.3: Maintenance Release
+
+ - Fixes for TCP Get node reconnect handling
+ - Clear delay node status on re-deploy
+ - Update Font-Awesome to v4.5
+ - Fix trigger to block properly until reset
+ - Update example auth properties in settings.js
+ - Ensure httpNodeAuth doesn't get applied to admin routes
+ - TCP Get node not passing on existing msg properties
+
+
+
+#### 0.12.2: Maintenance Release
+
+ - Enable touch-menu for links so they can be deleted
+ - Allow nodes to be installed by path name
+ - Fix basic authentication on httpNode/Admin/Static
+ - Handle errors thrown in Function node setTimeout/Interval
+ - Fix mqtt node lifecycle with partial deployments
+ - Update tcp node status on reconnect after timeout
+ - Debug node not handling null messages
+ - Kill processes run with exec node when flows redeployed
+ - Inject time spinner incrementing value incorrectly
+
+
+
+#### 0.12.1: Maintenance Release
+
+ - Enable touch-menu for links so they can be deleted
+ - Allow nodes to be installed by path name
+ - Fix basic authentication on httpNode/Admin/Static
+
+
+
+#### 0.12.0: Milestone Release
+
+ - Change/Switch rules now resize with dialog width
+ - Support for node 4.x
+ - Move to Express 4.x
+ - Copy default settings file to user dir on start up
+ - Config nodes can be scoped to a particular subflow/tab
+ - Comms link tolerates <5 second breaks in connection before notifying user
+ - MQTT node overhaul - add will/tls/birth message support
+ - Status node - to report status events from other nodes
+ - Error node can be targeted to specific other nodes
+ - JSON node can encode Array types
+ - Switch node regular expression rule can now be set to be case-insensitive
+ - HTTP In node can accept non-UTF8 payloads - will return a Buffer when appropriate
+ - Exec node configuration consistent regardless of the spawn option
+ - Function node can now display status icon/text
+ - CSV node can now handle arrays
+ - setInterval/clearInterval add to Function node
+ - Function node automatically clears all timers (setInterval/setTimeout) when the node is stopped
+
+
+
+#### 0.11.2: Maintenance Release
+
+ - Allow XML parser options be set on the message
+ - Add 'mobile' category to the palette (no core nodes included)
+ - Allow a message catalog provide a partial translation
+ - Fix HTTP Node nls message id
+ - Remove delay spinner upper limit
+ - Update debug node output to include length of payload
+
+
+
+
+#### 0.11.1: Maintenance Release
+
+ - Fix exclusive config node check when type not registered (prevented HTTP In node from being editable unless the swagger node was also installed)
+
+
+
+#### 0.11.0: Milestone Release
+
+ - Add Node 0.12 support
+ - Internationalization support
+ - Editor UI refresh
+ - Add RBE node
+ - File node optionally creates path to file
+ - Function node can access `clearTimeout`
+ - Fix: Unable to login with 'read' permission
+
+
+
+#### 0.10.10: Maintenance Release
+
+ - Fix permissions issue with packaged nrgpio script
+- Add better help message if deprecated node missing
+
+
+
+#### 0.10.9: Maintenance Release
+
+Fix packaging of bin scripts
+
+
+
+#### 0.10.8: Maintenance Release
+
+- Nodes moved out of core
+  - still included as a dependency: twitter, serial, email, feedparser
+ - no longer included: mongo, arduino, irc, redis
+- node icon defn can be a function
+- http_proxy support
+- httpNodeMiddleware setting
+- Trigger node ui refresh
+- editorTheme setting
+- Warn on deploy of unused config nodes
+- catch node prevents error loops
+
+
+
+#### 0.10.6: Maintenance Release
+
+Changes:
+ - Performance improvements in editor
+ - Palette appearance update
+ - Warn on navigation with undeployed changes
+ - Disable undeployed node action buttons
+ - Disable subflow node action buttons
+ - Add Catch node
+ - Add logging functions to Function node
+ - Add send function to Function node
+ - Update Change node to support multiple rules
+
+
+
+#### 0.10.4: Maintenance Release
+
+Changes:
+
+- http request node passes on request url as msg.url
+- handle config nodes appearing out of order in flow file - don't assume they are always at the start
+- move subflow palette category to the top, to make it more obvious
+- fix labelling of Raspberry Pi pins
+- allow email node to mark mail as read
+- fix saving library content
+- add node-red and node-red-pi start scripts
+- use $HOME/.node-red for user data unless specified otherwise (or existing data is found in install dir)
+
+
+
+#### 0.10.3: Maintenance Release
+
+Fixes:
+
+ - httpAdminAuth was too aggressively deprecated (ie removed); restoring with a console warning when used
+ - adds reporting of node.js version on start-up
+ - mongo node skip/limit options can be strings or numbers
+ - CSV parser passes through provided message object
+
+
+
+#### 0.10.2: Maintenance Release
+
+Fixes:
+ - subflow info sidebar more useful
+ - adds missing font-awesome file
+ - inject node day selection defaulted to invalid selection
+ - loading a flow with no tabs failed to add nodes to default tab

CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at team@nodered.org. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -6,11 +6,14 @@ We welcome contributions, but request you follow these guidelines.
  - [Feature requests](#feature-requests)
  - [Pull-Requests](#pull-requests)
    - [Contributor License Agreement](#contributor-license-agreement)
- 
+
+This project adheres to the [Contributor Covenant 1.4](http://contributor-covenant.org/version/1/4/).
+By participating, you are expected to uphold this code. Please report unacceptable
+behavior to any of the [project's core team](https://github.com/orgs/node-red/teams/core).
+
 ## Raising issues
 
-Please raise any bug reports on the project's 
-[issue tracker](https://github.com/node-red/node-red/issues?state=open). Be sure to
+Please raise any bug reports on the relevant project's issue tracker. Be sure to
 search the list to see if your issue has already been raised.
 
 A good bug report is one that make it easy for us to understand what you were
@@ -25,7 +28,6 @@ At a minimum, please include:
  - Version of Node-RED - either release number if you downloaded a zip, or the first few lines of `git log` if you are cloning the repository directly.
  - Version of node.js - what does `node -v` say?
 
-
 ## Feature requests
 
 For feature requests, please raise them on the [mailing list](https://groups.google.com/forum/#!forum/node-red).
@@ -33,15 +35,15 @@ For feature requests, please raise them on the [mailing list](https://groups.goo
 ## Pull-Requests
 
 If you want to raise a pull-request with a new feature, or a refactoring
-of existing code, it may well get rejected if you haven't discussed it on 
+of existing code, it may well get rejected if you haven't discussed it on
 the [mailing list](https://groups.google.com/forum/#!forum/node-red) first.
 
 ### Contributor License Agreement
 
 In order for us to accept pull-requests, the contributor must first complete
-a Contributor License Agreement (CLA). This clarifies the intellectual 
-property license granted with any contribution. It is for your protection as a 
-Contributor as well as the protection of IBM and its customers; it does not 
+a Contributor License Agreement (CLA). This clarifies the intellectual
+property license granted with any contribution. It is for your protection as a
+Contributor as well as the protection of IBM and its customers; it does not
 change your rights to use your own Contributions for any other purpose.
 
 You can download the CLAs here:
@@ -59,13 +61,5 @@ code base. Some basic rules include:
 
  - all files must have the Apache license in the header.
  - indent with 4-spaces, no tabs. No arguments.
- - opening brace on same line as `if`/`for`/`function`/etc, closing brace on its
-   own line.
-
-
-
-
-
-
-
-
+ - opening brace on same line as `if`/`for`/`function` and so on, closing brace
+ on its own line.

Gruntfile.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013, 2014 IBM Corp.
+ * Copyright 2013, 2015 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,82 +14,421 @@
  * limitations under the License.
  **/
 
+var path = require("path");
+
 module.exports = function(grunt) {
-    
-    // Project configuration.
+
+    var nodemonArgs = ["-v"];
+    var flowFile = grunt.option('flowFile');
+    if (flowFile) {
+        nodemonArgs.push(flowFile);
+    }
+
     grunt.initConfig({
-            pkg: grunt.file.readJSON('package.json'),
-            simplemocha: {
-                options: {
-                    globals: ['expect'],
-                    timeout: 3000,
-                    ignoreLeaks: false,
-                    ui: 'bdd',
-                    reporter: 'spec'
-                },
-                all: { src: ['test/**/*_spec.js'] },
-                core: { src: ["test/_spec.js","test/red/**/*_spec.js"]},
-                nodes: { src: ["test/nodes/**/*_spec.js"]}
+        pkg: grunt.file.readJSON('package.json'),
+        paths: {
+            dist: ".dist"
+        },
+        simplemocha: {
+            options: {
+                globals: ['expect'],
+                timeout: 3000,
+                ignoreLeaks: false,
+                ui: 'bdd',
+                reporter: 'spec'
             },
-            jshint: {
-                options: {
-                    // http://www.jshint.com/docs/options/
-                    "asi": true,      // allow missing semicolons
-                    "curly": true,    // require braces
-                    "eqnull": true,   // ignore ==null
-                    "forin": true,    // require property filtering in "for in" loops
-                    "immed": true,    // require immediate functions to be wrapped in ( )
-                    "nonbsp": true,   // warn on unexpected whitespace breaking chars
-                    //"strict": true, // commented out for now as it causes 100s of warnings, but want to get there eventually
-                    "loopfunc": true, // allow functions to be defined in loops
-                    "sub": true       // don't warn that foo['bar'] should be written as foo.bar
-                },
-                all: [
-                    'Gruntfile.js',
-                    'red.js',
-                    'red/**/*.js',
-                    'nodes/**/*.js',
-                    'public/red/**/*.js'
-                ],
-                
-                core: {
-                    files: {
-                        src: [
-                            'Gruntfile.js',
-                            'red.js',
-                            'red/**/*.js'
-                        ]
-                    }
-                },
-                nodes: {
-                    files: {
-                        src: [ 'nodes/**/*.js' ]
-                    }
-                },
-                editor: {
-                    files: {
-                        src: [ 'public/red/**/*.js' ]
-                    }
-                },
-                tests: {
-                    files: {
-                        src: ['test/**/*.js']
-                    },
-                    options: {
-                        "expr": true
-                    }
+            all: { src: ['test/**/*_spec.js'] },
+            core: { src: ["test/_spec.js","test/red/**/*_spec.js"]},
+            nodes: { src: ["test/nodes/**/*_spec.js"]}
+        },
+        jshint: {
+            options: {
+                jshintrc:true
+                // http://www.jshint.com/docs/options/
+                //"asi": true,      // allow missing semicolons
+                //"curly": true,    // require braces
+                //"eqnull": true,   // ignore ==null
+                //"forin": true,    // require property filtering in "for in" loops
+                //"immed": true,    // require immediate functions to be wrapped in ( )
+                //"nonbsp": true,   // warn on unexpected whitespace breaking chars
+                ////"strict": true, // commented out for now as it causes 100s of warnings, but want to get there eventually
+                //"loopfunc": true, // allow functions to be defined in loops
+                //"sub": true       // don't warn that foo['bar'] should be written as foo.bar
+            },
+            all: [
+                'Gruntfile.js',
+                'red.js',
+                'red/**/*.js',
+                'nodes/core/*/*.js',
+                'editor/js/**/*.js'
+            ],
+            core: {
+                files: {
+                    src: [
+                        'Gruntfile.js',
+                        'red.js',
+                        'red/**/*.js'
+                    ]
+                }
+            },
+            nodes: {
+                files: {
+                    src: [ 'nodes/core/*/*.js' ]
+                }
+            },
+            editor: {
+                files: {
+                    src: [ 'editor/js/**/*.js' ]
+                }
+            },
+            tests: {
+                files: {
+                    src: ['test/**/*.js']
+                },
+                options: {
+                    "expr": true
                 }
-                
             }
+        },
+        concat: {
+            options: {
+                separator: ";",
+            },
+            build: {
+                src: [
+                    // Ensure editor source files are concatenated in
+                    // the right order
+                    "editor/js/main.js",
+                    "editor/js/events.js",
+                    "editor/js/i18n.js",
+                    "editor/js/settings.js",
+                    "editor/js/user.js",
+                    "editor/js/comms.js",
+                    "editor/js/ui/state.js",
+                    "editor/js/nodes.js",
+                    "editor/js/history.js",
+                    "editor/js/validators.js",
+                    "editor/js/ui/deploy.js",
+                    "editor/js/ui/menu.js",
+                    "editor/js/ui/keyboard.js",
+                    "editor/js/ui/tabs.js",
+                    "editor/js/ui/popover.js",
+                    "editor/js/ui/workspaces.js",
+                    "editor/js/ui/view.js",
+                    "editor/js/ui/sidebar.js",
+                    "editor/js/ui/palette.js",
+                    "editor/js/ui/tab-info.js",
+                    "editor/js/ui/tab-config.js",
+                    "editor/js/ui/editor.js",
+                    "editor/js/ui/tray.js",
+                    "editor/js/ui/clipboard.js",
+                    "editor/js/ui/library.js",
+                    "editor/js/ui/notifications.js",
+                    "editor/js/ui/subflow.js",
+                    "editor/js/ui/touch/radialMenu.js",
+                    "editor/js/ui/typedInput.js",
+                    "editor/js/ui/editableList.js"
+                ],
+                dest: "public/red/red.js"
+            },
+            vendor: {
+                files: {
+                    "public/vendor/vendor.js": [
+                        "editor/vendor/jquery/js/jquery-1.11.3.min.js",
+                        "editor/vendor/bootstrap/js/bootstrap.min.js",
+                        "editor/vendor/jquery/js/jquery-ui-1.10.3.custom.min.js",
+                        "editor/vendor/jquery/js/jquery.ui.touch-punch.min.js",
+                        "editor/vendor/marked/marked.min.js",
+                        "editor/vendor/d3/d3.v3.min.js",
+                        "editor/vendor/i18next/i18next.min.js"
+                    ],
+                    "public/vendor/vendor.css": [
+                        // TODO: resolve relative resource paths in
+                        //       bootstrap/FA/jquery
+                    ]
+                }
+            }
+        },
+        uglify: {
+            build: {
+                files: {
+                    'public/red/red.min.js': 'public/red/red.js'
+                }
+            }
+        },
+        sass: {
+            build: {
+                options: {
+                    outputStyle: 'compressed'
+                },
+                files: [{
+                    dest: 'public/red/style.min.css',
+                    src: 'editor/sass/style.scss'
+                },
+                {
+                    dest: 'public/vendor/bootstrap/css/bootstrap.min.css',
+                    src: 'editor/vendor/bootstrap/css/bootstrap.css'
+                }]
+            }
+        },
+        jsonlint: {
+            messages: {
+                src: [
+                    'nodes/core/locales/en-US/messages.json',
+                    'red/api/locales/en-US/editor.json',
+                    'red/runtime/locales/en-US/runtime.json'
+                ]
+            }
+        },
+        attachCopyright: {
+            js: {
+                src: [
+                    'public/red/red.min.js'
+                ]
+            },
+            css: {
+                src: [
+                    'public/red/style.min.css'
+                ]
+            }
+        },
+        clean: {
+            build: {
+                src: [
+                    "public/red",
+                    "public/index.html",
+                    "public/favicon.ico",
+                    "public/icons",
+                    "public/vendor"
+                ]
+            },
+            release: {
+                src: [
+                    '<%= paths.dist %>'
+                ]
+            }
+        },
+        watch: {
+            js: {
+                files: [
+                    'editor/js/**/*.js'
+                ],
+                tasks: ['concat','uglify','attachCopyright:js']
+            },
+            sass: {
+                files: [
+                    'editor/sass/**/*.scss'
+                ],
+                tasks: ['sass','attachCopyright:css']
+            },
+            json: {
+                files: [
+                    'nodes/core/locales/en-US/messages.json',
+                    'red/api/locales/en-US/editor.json',
+                    'red/runtime/locales/en-US/runtime.json'
+                ],
+                tasks: ['jsonlint:messages']
+            },
+            misc: {
+                files: [
+                    'CHANGELOG.md'
+                ],
+                tasks: ['copy:build']
+            }
+        },
+
+        nodemon: {
+            /* uses .nodemonignore */
+            dev: {
+                script: 'red.js',
+                options: {
+                    args: nodemonArgs,
+                    ext: 'js,html,json',
+                    watch: [
+                        'red','nodes'
+                    ]
+                }
+            }
+        },
+
+        concurrent: {
+            dev: {
+                tasks: ['nodemon', 'watch'],
+                options: {
+                    logConcurrentOutput: true
+                }
+            }
+        },
+
+        copy: {
+            build: {
+                files:[{
+                    cwd: 'editor/images',
+                    src: '**',
+                    expand: true,
+                    dest: 'public/red/images/'
+                },
+                {
+                    cwd: 'editor/vendor',
+                    src: [
+                        'ace/**',
+                        //'bootstrap/css/**',
+                        'bootstrap/img/**',
+                        'jquery/css/**',
+                        'font-awesome/**'
+                    ],
+                    expand: true,
+                    dest: 'public/vendor/'
+                },
+                {
+                    cwd: 'editor/icons',
+                    src: '**',
+                    expand: true,
+                    dest: 'public/icons/'
+                },
+                {
+                    expand: true,
+                    src: ['editor/index.html','editor/favicon.ico'],
+                    dest: 'public/',
+                    flatten: true
+                },
+                {
+                    src: 'CHANGELOG.md',
+                    dest: 'public/red/about'
+                }
+                ]
+            },
+            release: {
+                files: [{
+                    mode: true,
+                    expand: true,
+                    src: [
+                        '*.md',
+                        'LICENSE',
+                        'package.json',
+                        'settings.js',
+                        'red.js',
+                        'lib/.gitignore',
+                        'nodes/*.demo',
+                        'nodes/core/**',
+                        'red/**',
+                        'public/**',
+                        'editor/templates/**',
+                        'bin/**'
+                    ],
+                    dest: path.resolve('<%= paths.dist %>/node-red-<%= pkg.version %>')
+                }]
+            }
+        },
+        chmod: {
+            options: {
+                mode: '755'
+            },
+            release: {
+                // Target-specific file/dir lists and/or options go here.
+                src: [
+                    path.resolve('<%= paths.dist %>/node-red-<%= pkg.version %>/nodes/core/hardware/nrgpio*')
+                ]
+            }
+        },
+        compress: {
+            release: {
+                options: {
+                    archive: '<%= paths.dist %>/node-red-<%= pkg.version %>.zip'
+                },
+                expand: true,
+                cwd: '<%= paths.dist %>/',
+                src: ['node-red-<%= pkg.version %>/**']
+            }
+        }
     });
-    
+
     grunt.loadNpmTasks('grunt-simple-mocha');
     grunt.loadNpmTasks('grunt-contrib-jshint');
-    
-    grunt.registerTask('default', ['test-core','test-editor','test-nodes']);
-    
-    grunt.registerTask('test-core', ['jshint:core','simplemocha:core']);
-    grunt.registerTask('test-editor', ['jshint:editor']);
-    grunt.registerTask('test-nodes', ['simplemocha:nodes']);
-    
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-concurrent');
+    grunt.loadNpmTasks('grunt-sass');
+    grunt.loadNpmTasks('grunt-nodemon');
+    grunt.loadNpmTasks('grunt-contrib-compress');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-chmod');
+    grunt.loadNpmTasks('grunt-jsonlint');
+
+    grunt.registerMultiTask('attachCopyright', function() {
+        var files = this.data.src;
+        var copyright = "/**\n"+
+            " * Copyright 2013, 2015 IBM Corp.\n"+
+            " *\n"+
+            " * Licensed under the Apache License, Version 2.0 (the \"License\");\n"+
+            " * you may not use this file except in compliance with the License.\n"+
+            " * You may obtain a copy of the License at\n"+
+            " *\n"+
+            " * http://www.apache.org/licenses/LICENSE-2.0\n"+
+            " *\n"+
+            " * Unless required by applicable law or agreed to in writing, software\n"+
+            " * distributed under the License is distributed on an \"AS IS\" BASIS,\n"+
+            " * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n"+
+            " * See the License for the specific language governing permissions and\n"+
+            " * limitations under the License.\n"+
+            " **/\n";
+
+        if (files) {
+            for (var i=0;i<files.length;i++) {
+                var file = files[i];
+                if (!grunt.file.exists(file)) {
+                    grunt.log.warn('File '+ file + ' not found');
+                    return false;
+                } else {
+                    var content = grunt.file.read(file);
+                    if (content.indexOf(copyright) == -1) {
+                        content = copyright+content;
+                        if (!grunt.file.write(file, content)) {
+                            return false;
+                        }
+                        grunt.log.writeln("Attached copyright to "+file);
+                    } else {
+                        grunt.log.writeln("Copyright already on "+file);
+                    }
+                }
+            }
+        }
+    });
+
+    grunt.registerTask('setDevEnv',
+        'Sets NODE_ENV=development so non-minified assets are used',
+            function () {
+                process.env.NODE_ENV = 'development';
+            });
+
+    grunt.registerTask('default',
+        'Builds editor content then runs code style checks and unit tests on all components',
+        ['build','test-core','test-editor','test-nodes']);
+
+    grunt.registerTask('test-core',
+        'Runs code style check and unit tests on core runtime code',
+        ['jshint:core','simplemocha:core']);
+
+    grunt.registerTask('test-editor',
+        'Runs code style check on editor code',
+        ['jshint:editor']);
+
+    grunt.registerTask('test-nodes',
+        'Runs unit tests on core nodes',
+        ['simplemocha:nodes']);
+
+    grunt.registerTask('build',
+        'Builds editor content',
+        ['clean:build','concat:build','concat:vendor','uglify:build','sass:build','jsonlint:messages','copy:build','attachCopyright']);
+
+    grunt.registerTask('dev',
+        'Developer mode: run node-red, watch for source changes and build/restart',
+        ['build','setDevEnv','concurrent:dev']);
+
+    grunt.registerTask('release',
+        'Create distribution zip file',
+        ['build','clean:release','copy:release','chmod:release','compress:release']);
+
 };

INSTALL.md

@@ -1,57 +0,0 @@
-Node-RED Install
-================
-
-## Install node.js
-
-You can get the latest version from <http://nodejs.org/download/>.
-
-Or, you may want to use a version from your operating system's package manager:
- <https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager>
-
-## Get Node-RED
-
-Clone the repository from GitHub:
-
-    $ git clone git@github.com:node-red/node-red.git
-
-## Install the pre-requisite modules
-
-From the top-level directory of Node-RED, run:
-
-    $ npm install
-
-This will install the core pre-requisite modules.
-
-## Run Node-RED
-
-From the top-level directory, run:
-
-    $ node red.js
-
-You can then access Node-RED at <http://localhost:1880>.
-
-Online documentation is available at <http://nodered.org/docs>.
-
-## Installing individual node dependencies
-
-When Node-RED starts, it attempts to load the nodes from the `nodes/` directory.
-Each will have its own set of dependencies that will need to be installed before
-the node is available in the palette.
-
-To help identify the dependencies, Node-RED logs any modules it fails to find
-for a particular node. You don't have to install these unless you want or need
-that node to appear.
-
-Alternatively, a node's `.js` file can be examined to identify the modules it
-explicitly requires. For example, the Twitter node is defined in
-`nodes/social/27-twitter.js` and contains:
-
-	var RED = require("../../red/red");
-	var ntwitter = require('ntwitter');
-	var OAuth= require('oauth').OAuth;
-
-Of these, `ntwitter` and `oauth` are neither built-in modules nor ones provided
-by Node-RED itself. They can subsequently be installed by running:
-
-    $ npm install ntwitter oauth
-

README.md

@@ -2,39 +2,62 @@
 
 http://nodered.org
 
-[![Build Status](https://travis-ci.org/node-red/node-red.png)](https://travis-ci.org/node-red/node-red) [![Coverage Status](https://coveralls.io/repos/node-red/node-red/badge.png?branch=master)](https://coveralls.io/r/node-red/node-red?branch=master)
-
+[![Build Status](https://travis-ci.org/node-red/node-red.svg)](https://travis-ci.org/node-red/node-red)
+[![Coverage Status](https://coveralls.io/repos/node-red/node-red/badge.svg?branch=master)](https://coveralls.io/r/node-red/node-red?branch=master)
 
 A visual tool for wiring the Internet of Things.
 
-![Screenshot](http://nodered.org/images/node-red-screenshot.png "Node-RED: A visual tool for wiring the Internet of Things")
+![Node-RED: A visual tool for wiring the Internet of Things](http://nodered.org/images/node-red-screenshot.png)
 
 ## Quick Start
 
-Check out [INSTALL](INSTALL.md) for full instructions on getting started.
+Check out http://nodered.org/docs/getting-started/ for full instructions on getting
+started.
 
-1. download the zip and unzip, or git clone
-2. cd node-red
-3. npm install
-4. node red.js
-5. Open <http://localhost:1880>
+1. `sudo npm install -g node-red`
+2. `node-red`
+3. Open <http://localhost:1880>
 
 ## Getting Help
 
 More documentation can be found [here](http://nodered.org/docs).
 
-For further help, or general discussion, please use the [mailing list](https://groups.google.com/forum/#!forum/node-red).
+For further help, or general discussion, please use the
+[mailing list](https://groups.google.com/forum/#!forum/node-red).
 
-## Browser Support
+## Developers
 
-The Node-RED editor runs in the browser. We routinely develop and test using
-Chrome and Firefox. We have anecdotal evidence that it works in recent versions of IE.
+If you want to run the latest code from git, here's how to get started:
 
-We have basic support for using in mobile/tablet browsers.
+1. Install grunt, the build tool
+
+        npm install -g grunt-cli
+
+2. Clone the code:
+
+        git clone https://github.com/node-red/node-red.git
+        cd node-red
+
+3. Install the node-red dependencies
+
+        npm install
+
+4. Build the code
+
+        grunt build
+
+5. Run
+
+        node red.js
 
 ## Contributing
 
-Before raising a pull-request, please read our [contributing guide](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md).
+Before raising a pull-request, please read our
+[contributing guide](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md).
+
+This project adheres to the [Contributor Covenant 1.4](http://contributor-covenant.org/version/1/4/).
+ By participating, you are expected to uphold this code. Please report unacceptable
+ behavior to any of the [project's core team](https://github.com/orgs/node-red/teams/core).
 
 ## Authors
 
@@ -47,4 +70,4 @@ For more open-source projects from IBM, head over [here](http://ibm.github.io).
 
 ## Copyright and license
 
-Copyright 2013, 2015 IBM Corp. under [the Apache 2.0 license](LICENSE).
+Copyright 2013, 2016 IBM Corp. under [the Apache 2.0 license](LICENSE).

bin/node-red-pi

@@ -40,4 +40,4 @@ SCRIPT_PATH="`pwd`";
 cd $CURRENT_PATH
 
 # Run Node-RED
-/usr/bin/env node $OPTIONS $SCRIPT_PATH/../red.js $ARGS
+exec /usr/bin/env node $OPTIONS $SCRIPT_PATH/../red.js $ARGS

editor/images/node-red-icon-black.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="480" height="480" viewBox="0, 0, 480, 480">
+  <g id="Calque_1">
+    <path d="M408,16 C438.928,16 464,41.072 464,72 L464,408 C464,438.928 438.928,464 408,464 L72,464 C41.072,464 16,438.928 16,408 L16,296.002 L69.339,296.002 C89.715,296.002 105.993,279.497 105.993,259.12 L105.992,242.19 C190.296,243.397 214.83,265.317 241.661,288.777 C267.502,311.375 296.48,335.662 371.989,336.261 L371.993,344.57 C372.002,364.947 388.693,382 409.069,382 L463.991,382 L463.991,356 L409.069,356 C402.189,356 396.991,351.449 396.991,344.569 L396.991,308.32 C396.991,301.44 402.189,296 409.069,296 L463.991,296 L463.991,272 L409.069,272 C388.693,272 372.002,287.943 371.993,308.32 L371.99,316.908 C300.63,316.672 280.362,296.883 254.41,274.189 C232.267,254.825 206.244,233.534 148.914,225.789 C149.412,225.361 149.872,224.945 150.353,224.505 C161.391,214.382 167.343,202.153 173.167,191.593 C178.99,181.034 184.469,172.221 193.444,166.061 C200.725,161.064 211.08,157.338 226.992,156.647 L226.993,165.123 C226.997,185.5 243.431,202.999 263.808,202.999 L411.141,202.999 C431.517,202.999 447.993,185.5 447.993,165.123 L447.993,128.874 C447.993,108.497 431.517,91.999 411.141,91.999 L263.808,91.999 C243.431,91.999 226.983,108.496 226.993,128.874 L226.998,137.281 C207.794,138.053 193.238,142.713 182.496,150.086 C169.469,159.028 162.277,171.247 156.21,182.247 C150.144,193.247 145.009,203.104 137.25,210.218 C130.497,216.411 121.157,221.193 105.993,222.976 L105.993,222.579 C106.111,202.203 89.715,186.002 69.339,186.002 L16,186.002 L16,72 C16,41.072 41.072,16 72,16 L408,16 z" fill="#000000"/>
+    <path d="M16,211.002 L69.339,211.002 C76.219,211.002 81.992,215.991 81.992,222.871 L81.992,259.12 C81.992,266 76.219,272.002 69.339,272.002 L16,272.002 L16,211.002 z" fill="#000000"/>
+    <path d="M411.135,116.997 C418.015,116.997 422.987,121.992 422.987,128.872 L422.987,165.122 C422.987,172.002 418.015,176.998 411.135,176.998 L263.802,176.998 C256.923,176.998 250.99,172.002 250.99,165.122 L250.99,128.872 C250.99,121.993 256.923,116.997 263.802,116.997 L411.135,116.997 z" fill="#000000"/>
+  </g>
+</svg>

editor/images/node-red-icon.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="480" width="480" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 480.00002 479.99999">
+ <title>Node-RED Icon</title>
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title>Node-RED Icon</dc:title>
+    <cc:license rdf:resource="http://creativecommons.org/licenses/by/3.0/"/>
+    <dc:creator>
+     <cc:Agent>
+      <dc:title>Nick O&apos;Leary</dc:title>
+     </cc:Agent>
+    </dc:creator>
+   </cc:Work>
+   <cc:License rdf:about="http://creativecommons.org/licenses/by/3.0/">
+    <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
+    <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
+    <cc:requires rdf:resource="http://creativecommons.org/ns#Notice"/>
+    <cc:requires rdf:resource="http://creativecommons.org/ns#Attribution"/>
+    <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
+   </cc:License>
+  </rdf:RDF>
+ </metadata>
+ <g transform="translate(0 -572.36)">
+  <rect style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" ry="56" height="448" width="448" y="588.36" x="16" fill="#8f0000"/>
+  <g transform="matrix(8.545 0 0 8.545 -786.19 -1949.8)">
+   <path style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m104.41 321.21c0.0138-2.3846-1.905-4.2806-4.2896-4.2806h-6.243v2.9257h6.243c0.80513 0 1.4808 0.58383 1.4808 1.389v4.2422c0 0.80513-0.67566 1.5075-1.4808 1.5075h-6.243v2.8086h6.243c2.3846 0 4.2895-1.9315 4.2895-4.3162l-0.00005-1.9812c9.8659 0.14125 12.737 2.7065 15.877 5.4519 3.0241 2.6446 6.4153 5.4869 15.252 5.557l0.00046 0.97238c0.001 2.3846 1.9543 4.3803 4.3389 4.3803h6.4273v-3.0427h-6.4273c-0.80514 0-1.4135-0.53255-1.4135-1.3377v-4.2422c0-0.80513 0.60835-1.4418 1.4135-1.4418h6.4273v-2.8086h-6.4273c-2.3846 0-4.3379 1.8658-4.3389 4.2504l-0.00045 1.005c-8.351-0.0276-10.723-2.3434-13.76-4.9992-2.5914-2.2662-5.6368-4.7578-12.346-5.6642 0.0583-0.0501 0.11211-0.0987 0.16838-0.15027 1.2918-1.1846 1.9884-2.6158 2.6699-3.8516 0.68148-1.2357 1.3227-2.267 2.373-2.9879 0.85207-0.58483 2.0639-1.0208 3.926-1.1017l0.00018 0.99192c0.00043 2.3846 1.9236 4.4325 4.3083 4.4325h17.242c2.3846 0 4.3127-2.0479 4.3127-4.4325v-4.2422c0-2.3846-1.9281-4.3153-4.3127-4.3153h-17.242c-2.3846 0-4.3095 1.9306-4.3083 4.3153l0.00051 0.98395c-2.2474 0.0903-3.9508 0.6357-5.2079 1.4985-1.5245 1.0464-2.3662 2.4764-3.0762 3.7637-0.70992 1.2873-1.3108 2.4408-2.2188 3.2734-0.79034 0.72475-1.8834 1.2844-3.658 1.493zm18.468-12.356h17.242c0.80514 0 1.387 0.58455 1.387 1.3897v4.2422c0 0.80514-0.5819 1.3898-1.387 1.3898h-17.242c-0.80514 0-1.4994-0.58462-1.4994-1.3898v-4.2422c0-0.80513 0.69431-1.3897 1.4994-1.3897z" fill="#fff"/>
+  </g>
+ </g>
+</svg>

editor/js/comms.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2014 IBM Corp.
+ * Copyright 2014, 2016 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,23 +13,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  **/
- 
+
 RED.comms = (function() {
-    
+
     var errornotification = null;
     var clearErrorTimer = null;
-    
+    var connectCountdownTimer = null;
+    var connectCountdown = 10;
     var subscriptions = {};
     var ws;
     var pendingAuth = false;
-    
+    var reconnectAttempts = 0;
+    var active = false;
+
     function connectWS() {
-        var path = location.hostname+":"+location.port+document.location.pathname;
+        active = true;
+        var path = location.hostname;
+        var port = location.port;
+        if (port.length !== 0) {
+            path = path+":"+port;
+        }
+        path = path+document.location.pathname;
         path = path+(path.slice(-1) == "/"?"":"/")+"comms";
         path = "ws"+(document.location.protocol=="https:"?"s":"")+"://"+path;
+
         var auth_tokens = RED.settings.get("auth-tokens");
         pendingAuth = (auth_tokens!=null);
-        
+
         function completeConnection() {
             for (var t in subscriptions) {
                 if (subscriptions.hasOwnProperty(t)) {
@@ -37,9 +47,10 @@ RED.comms = (function() {
                 }
             }
         }
-        
+
         ws = new WebSocket(path);
         ws.onopen = function() {
+            reconnectAttempts = 0;
             if (errornotification) {
                 clearErrorTimer = setTimeout(function() {
                     errornotification.close();
@@ -54,9 +65,17 @@ RED.comms = (function() {
         }
         ws.onmessage = function(event) {
             var msg = JSON.parse(event.data);
-            if (pendingAuth && msg.auth == "ok") {
-                pendingAuth = false;
-                completeConnection();
+            if (pendingAuth && msg.auth) {
+                if (msg.auth === "ok") {
+                    pendingAuth = false;
+                    completeConnection();
+                } else if (msg.auth === "fail") {
+                    // anything else is an error...
+                    active = false;
+                    RED.user.login({updateMenu:true},function() {
+                        connectWS();
+                    })
+                }
             } else if (msg.topic) {
                 for (var t in subscriptions) {
                     if (subscriptions.hasOwnProperty(t)) {
@@ -74,16 +93,45 @@ RED.comms = (function() {
             }
         };
         ws.onclose = function() {
-            if (errornotification == null) {
-                errornotification = RED.notify("<b>Error</b>: Lost connection to server","error",true);
-            } else if (clearErrorTimer) {
+            if (!active) {
+                return;
+            }
+            if (clearErrorTimer) {
                 clearTimeout(clearErrorTimer);
                 clearErrorTimer = null;
             }
-            setTimeout(connectWS,1000);
+            reconnectAttempts++;
+            if (reconnectAttempts < 10) {
+                setTimeout(connectWS,1000);
+                if (reconnectAttempts > 5 && errornotification == null) {
+                    errornotification = RED.notify(RED._("notification.errors.lostConnection"),"error",true);
+                }
+            } else if (reconnectAttempts < 20) {
+                setTimeout(connectWS,2000);
+            } else {
+                connectCountdown = 60;
+                connectCountdownTimer = setInterval(function() {
+                    connectCountdown--;
+                    if (connectCountdown === 0) {
+                        errornotification.update(RED._("notification.errors.lostConnection"));
+                        clearInterval(connectCountdownTimer);
+                        connectWS();
+                    } else {
+                        var msg = RED._("notification.errors.lostConnectionReconnect",{time: connectCountdown})+' <a href="#">'+ RED._("notification.errors.lostConnectionTry")+'</a>';
+                        errornotification.update(msg);
+                        $(errornotification).find("a").click(function(e) {
+                            e.preventDefault();
+                            errornotification.update(RED._("notification.errors.lostConnection"));
+                            clearInterval(connectCountdownTimer);
+                            connectWS();
+                        })
+                    }
+                },1000);
+            }
+
         }
     }
-    
+
     function subscribe(topic,callback) {
         if (subscriptions[topic] == null) {
             subscriptions[topic] = [];
@@ -93,7 +141,7 @@ RED.comms = (function() {
             ws.send(JSON.stringify({subscribe:topic}));
         }
     }
-    
+
     function unsubscribe(topic,callback) {
         if (subscriptions[topic]) {
             for (var i=0;i<subscriptions[topic].length;i++) {
@@ -107,7 +155,7 @@ RED.comms = (function() {
             }
         }
     }
-    
+
     return {
         connect: connectWS,
         subscribe: subscribe,

editor/js/events.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2015 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+ RED.events = (function() {
+     var handlers = {};
+
+     function on(evt,func) {
+         handlers[evt] = handlers[evt]||[];
+         handlers[evt].push(func);
+     }
+     function off(evt,func) {
+         var handler = handlers[evt];
+         if (handler) {
+             for (var i=0;i<handler.length;i++) {
+                 if (handler[i] === func) {
+                     handler.splice(i,1);
+                     return;
+                 }
+             }
+         }
+     }
+     function emit(evt,arg) {
+         if (handlers[evt]) {
+             for (var i=0;i<handlers[evt].length;i++) {
+                 handlers[evt][i](arg);
+             }
+
+         }
+     }
+     return {
+         on: on,
+         off: off,
+         emit: emit
+     }
+ })();

editor/js/history.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013, 2015 IBM Corp.
+ * Copyright 2013, 2016 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,7 +15,7 @@
  **/
 RED.history = (function() {
     var undo_history = [];
-    
+
     return {
         //TODO: this function is a placeholder until there is a 'save' event that can be listened to
         markAllDirty: function() {
@@ -23,6 +23,9 @@ RED.history = (function() {
                 undo_history[i].dirty = true;
             }
         },
+        list: function() {
+            return undo_history
+        },
         depth: function() {
             return undo_history.length;
         },
@@ -33,6 +36,7 @@ RED.history = (function() {
             var ev = undo_history.pop();
             var i;
             var node;
+            var subflow;
             var modifiedTabs = {};
             if (ev) {
                 if (ev.t == 'add') {
@@ -62,6 +66,29 @@ RED.history = (function() {
                             RED.workspaces.remove(ev.subflows[i]);
                         }
                     }
+                    if (ev.subflow) {
+                        if (ev.subflow.instances) {
+                            ev.subflow.instances.forEach(function(n) {
+                                var node = RED.nodes.node(n.id);
+                                if (node) {
+                                    node.changed = n.changed;
+                                    node.dirty = true;
+                                }
+                            });
+                        }
+                        if (ev.subflow.hasOwnProperty('changed')) {
+                            subflow = RED.nodes.subflow(ev.subflow.id);
+                            if (subflow) {
+                                subflow.changed = ev.subflow.changed;
+                            }
+                        }
+                    }
+                    if (ev.removedLinks) {
+                        for (i=0;i<ev.removedLinks.length;i++) {
+                            RED.nodes.addLink(ev.removedLinks[i]);
+                        }
+                    }
+
                 } else if (ev.t == "delete") {
                     if (ev.workspaces) {
                         for (i=0;i<ev.workspaces.length;i++) {
@@ -69,10 +96,9 @@ RED.history = (function() {
                             RED.workspaces.add(ev.workspaces[i]);
                         }
                     }
-                    if (ev.subflow) {
-                        RED.nodes.addSubflow(ev.subflow);
+                    if (ev.subflow && ev.subflow.subflow) {
+                        RED.nodes.addSubflow(ev.subflow.subflow);
                     }
-                    var subflow;
                     if (ev.subflowInputs && ev.subflowInputs.length > 0) {
                         subflow = RED.nodes.subflow(ev.subflowInputs[0].z);
                         subflow.in.push(ev.subflowInputs[0]);
@@ -97,9 +123,17 @@ RED.history = (function() {
                             });
                         }
                     }
+                    if (ev.subflow && ev.subflow.hasOwnProperty('instances')) {
+                        ev.subflow.instances.forEach(function(n) {
+                            var node = RED.nodes.node(n.id);
+                            if (node) {
+                                node.changed = n.changed;
+                                node.dirty = true;
+                            }
+                        });
+                    }
                     if (subflow) {
                         RED.nodes.filterNodes({type:"subflow:"+subflow.id}).forEach(function(n) {
-                            n.changed = true;
                             n.inputs = subflow.in.length;
                             n.outputs = subflow.out.length;
                             while (n.outputs > n.ports.length) {
@@ -120,6 +154,22 @@ RED.history = (function() {
                             RED.nodes.addLink(ev.links[i]);
                         }
                     }
+                    if (ev.changes) {
+                        for (i in ev.changes) {
+                            if (ev.changes.hasOwnProperty(i)) {
+                                node = RED.nodes.node(i);
+                                if (node) {
+                                    for (var d in ev.changes[i]) {
+                                        if (ev.changes[i].hasOwnProperty(d)) {
+                                            node[d] = ev.changes[i][d];
+                                        }
+                                    }
+                                    node.dirty = true;
+                                }
+                            }
+                        }
+
+                    }
                 } else if (ev.t == "move") {
                     for (i=0;i<ev.nodes.length;i++) {
                         var n = ev.nodes[i];
@@ -127,9 +177,31 @@ RED.history = (function() {
                         n.n.y = n.oy;
                         n.n.dirty = true;
                     }
+                    // A move could have caused a link splice
+                    if (ev.links) {
+                        for (i=0;i<ev.links.length;i++) {
+                            RED.nodes.removeLink(ev.links[i]);
+                        }
+                    }
+                    if (ev.removedLinks) {
+                        for (i=0;i<ev.removedLinks.length;i++) {
+                            RED.nodes.addLink(ev.removedLinks[i]);
+                        }
+                    }
                 } else if (ev.t == "edit") {
                     for (i in ev.changes) {
                         if (ev.changes.hasOwnProperty(i)) {
+                            if (ev.node._def.defaults[i].type) {
+                                // This is a config node property
+                                var currentConfigNode = RED.nodes.node(ev.node[i]);
+                                if (currentConfigNode) {
+                                    currentConfigNode.users.splice(currentConfigNode.users.indexOf(ev.node),1);
+                                }
+                                var newConfigNode = RED.nodes.node(ev.changes[i]);
+                                if (newConfigNode) {
+                                    newConfigNode.users.push(ev.node);
+                                }
+                            }
                             ev.node[i] = ev.changes[i];
                         }
                     }
@@ -148,14 +220,24 @@ RED.history = (function() {
                                 ev.node.out = ev.node.out.concat(ev.subflow.outputs);
                             }
                         }
+                        if (ev.subflow.hasOwnProperty('instances')) {
+                            ev.subflow.instances.forEach(function(n) {
+                                var node = RED.nodes.node(n.id);
+                                if (node) {
+                                    node.changed = n.changed;
+                                    node.dirty = true;
+                                }
+                            });
+                        }
                         RED.nodes.filterNodes({type:"subflow:"+ev.node.id}).forEach(function(n) {
-                            n.changed = ev.changed;
                             n.inputs = ev.node.in.length;
                             n.outputs = ev.node.out.length;
                             RED.editor.updateNodeProperties(n);
                         });
-                        
-                        RED.palette.refresh();
+
+                        if (ev.node.type === 'subflow') {
+                            $("#menu-item-workspace-menu-"+ev.node.id.replace(".","-")).text(ev.node.name);
+                        }
                     } else {
                         RED.editor.updateNodeProperties(ev.node);
                         RED.editor.validateNode(ev.node);
@@ -169,7 +251,7 @@ RED.history = (function() {
                     ev.node.changed = ev.changed;
                 } else if (ev.t == "createSubflow") {
                     if (ev.nodes) {
-                        RED.nodes.filterNodes({z:ev.subflow.id}).forEach(function(n) {
+                        RED.nodes.filterNodes({z:ev.subflow.subflow.id}).forEach(function(n) {
                             n.z = ev.activeWorkspace;
                             n.dirty = true;
                         });
@@ -182,15 +264,19 @@ RED.history = (function() {
                             RED.nodes.removeLink(ev.links[i]);
                         }
                     }
-                    
-                    RED.nodes.removeSubflow(ev.subflow);
-                    RED.workspaces.remove(ev.subflow);
-                    
+
+                    RED.nodes.removeSubflow(ev.subflow.subflow);
+                    RED.workspaces.remove(ev.subflow.subflow);
+
                     if (ev.removedLinks) {
                         for (i=0;i<ev.removedLinks.length;i++) {
                             RED.nodes.addLink(ev.removedLinks[i]);
                         }
                     }
+                } else if (ev.t == "reorder") {
+                    if (ev.order) {
+                        RED.workspaces.order(ev.order);
+                    }
                 }
                 Object.keys(modifiedTabs).forEach(function(id) {
                     var subflow = RED.nodes.subflow(id);
@@ -199,11 +285,15 @@ RED.history = (function() {
                     }
                 });
 
-                
                 RED.nodes.dirty(ev.dirty);
                 RED.view.redraw(true);
                 RED.palette.refresh();
+                RED.workspaces.refresh();
+                RED.sidebar.config.refresh();
             }
+        },
+        peek: function() {
+            return undo_history[undo_history.length-1];
         }
     }
 

editor/js/i18n.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright 2013, 2015 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+RED.i18n = (function() {
+
+    return {
+        init: function(done) {
+            i18n.init({
+                resGetPath: 'locales/__ns__',
+                dynamicLoad: false,
+                load:'current',
+                ns: {
+                    namespaces: ["editor","node-red"],
+                    defaultNs: "editor"
+                },
+                fallbackLng: ['en-US'],
+                useCookie: false
+            },function() {
+                done();
+            });
+            RED["_"] = function() {
+                return i18n.t.apply(null,arguments);
+            }
+
+        },
+        loadCatalog: function(namespace,done) {
+            i18n.loadNamespace(namespace,done);
+        }
+    }
+})();

editor/js/main.js

@@ -16,10 +16,6 @@
 var RED = (function() {
 
 
-    function loadSettings() {
-        RED.settings.init(loadNodeList);
-    }
-
     function loadNodeList() {
         $.ajax({
             headers: {
@@ -29,7 +25,23 @@ var RED = (function() {
             url: 'nodes',
             success: function(data) {
                 RED.nodes.setNodeList(data);
-                loadNodes();
+
+                var nsCount = 0;
+                for(var i=0;i<data.length;i++) {
+                    var ns = data[i];
+                    if (ns.module != "node-red") {
+                        nsCount++;
+                        RED.i18n.loadCatalog(ns.id, function() {
+                            nsCount--;
+                            if (nsCount === 0) {
+                                loadNodes();
+                            }
+                        });
+                    }
+                }
+                if (nsCount === 0) {
+                    loadNodes();
+                }
             }
         });
     }
@@ -43,6 +55,9 @@ var RED = (function() {
             url: 'nodes',
             success: function(data) {
                 $("body").append(data);
+                $("body").i18n();
+
+
                 $(".palette-spinner").hide();
                 $(".palette-scroll").show();
                 $("#palette-search").show();
@@ -66,6 +81,9 @@ var RED = (function() {
                     var parts = topic.split("/");
                     var node = RED.nodes.node(parts[1]);
                     if (node) {
+                        if (msg.text) {
+                            msg.text = node._(msg.text.toString(),{defaultValue:msg.text.toString()});
+                        }
                         node.status = msg;
                         if (statusEnabled) {
                             node.dirty = true;
@@ -85,13 +103,15 @@ var RED = (function() {
                             var id = m.id;
                             RED.nodes.addNodeSet(m);
                             addedTypes = addedTypes.concat(m.types);
-                            $.get('nodes/'+id, function(data) {
-                                $("body").append(data);
+                            RED.i18n.loadCatalog(id, function() {
+                                $.get('nodes/'+id, function(data) {
+                                    $("body").append(data);
+                                });
                             });
                         }
                         if (addedTypes.length) {
                             typeList = "<ul><li>"+addedTypes.join("</li><li>")+"</li></ul>";
-                            RED.notify("Node"+(addedTypes.length!=1 ? "s":"")+" added to palette:"+typeList,"success");
+                            RED.notify(RED._("palette.event.nodeAdded", {count:addedTypes.length})+typeList,"success");
                         }
                     } else if (topic == "node/removed") {
                         for (i=0;i<msg.length;i++) {
@@ -99,7 +119,7 @@ var RED = (function() {
                             info = RED.nodes.removeNodeSet(m.id);
                             if (info.added) {
                                 typeList = "<ul><li>"+m.types.join("</li><li>")+"</li></ul>";
-                                RED.notify("Node"+(m.types.length!=1 ? "s":"")+" removed from palette:"+typeList,"success");
+                                RED.notify(RED._("palette.event.nodeRemoved", {count:m.types.length})+typeList,"success");
                             }
                         }
                     } else if (topic == "node/enabled") {
@@ -108,12 +128,12 @@ var RED = (function() {
                             if (info.added) {
                                 RED.nodes.enableNodeSet(msg.id);
                                 typeList = "<ul><li>"+msg.types.join("</li><li>")+"</li></ul>";
-                                RED.notify("Node"+(msg.types.length!=1 ? "s":"")+" enabled:"+typeList,"success");
+                                RED.notify(RED._("palette.event.nodeEnabled", {count:msg.types.length})+typeList,"success");
                             } else {
                                 $.get('nodes/'+msg.id, function(data) {
                                     $("body").append(data);
                                     typeList = "<ul><li>"+msg.types.join("</li><li>")+"</li></ul>";
-                                    RED.notify("Node"+(msg.types.length!=1 ? "s":"")+" added to palette:"+typeList,"success");
+                                    RED.notify(RED._("palette.event.nodeAdded", {count:msg.types.length})+typeList,"success");
                                 });
                             }
                         }
@@ -121,14 +141,27 @@ var RED = (function() {
                         if (msg.types) {
                             RED.nodes.disableNodeSet(msg.id);
                             typeList = "<ul><li>"+msg.types.join("</li><li>")+"</li></ul>";
-                            RED.notify("Node"+(msg.types.length!=1 ? "s":"")+" disabled:"+typeList,"success");
+                            RED.notify(RED._("palette.event.nodeDisabled", {count:msg.types.length})+typeList,"success");
                         }
                     }
+                    // Refresh flow library to ensure any examples are updated
+                    RED.library.loadFlowLibrary();
                 });
             }
         });
     }
 
+    function showAbout() {
+        $.get('red/about', function(data) {
+            var aboutHeader = '<div style="text-align:center;">'+
+                                '<img width="50px" src="red/images/node-red-icon.svg" />'+
+                              '</div>';
+
+            RED.sidebar.info.set(aboutHeader+marked(data));
+            RED.sidebar.info.show();
+        });
+    }
+
     var statusEnabled = false;
     function toggleStatus(state) {
         statusEnabled = state;
@@ -138,39 +171,46 @@ var RED = (function() {
     function loadEditor() {
         RED.menu.init({id:"btn-sidemenu",
             options: [
-                {id:"btn-sidebar",label:"Sidebar",toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true},
-                {id:"btn-node-status",label:"Display node status",toggle:true,onselect:toggleStatus, selected: true},
-                null,
-                {id:"btn-import-menu",label:"Import",options:[
-                    {id:"btn-import-clipboard",label:"Clipboard",onselect:RED.clipboard.import},
-                    {id:"btn-import-library",label:"Library",options:[]}
-                ]},
-                {id:"btn-export-menu",label:"Export",disabled:true,options:[
-                    {id:"btn-export-clipboard",label:"Clipboard",disabled:true,onselect:RED.clipboard.export},
-                    {id:"btn-export-library",label:"Library",disabled:true,onselect:RED.library.export}
+                {id:"menu-item-view-menu",label:RED._("menu.label.view.view"),options:[
+                    {id:"menu-item-view-show-grid",label:RED._("menu.label.view.showGrid"),toggle:true,onselect:RED.view.toggleShowGrid},
+                    {id:"menu-item-view-snap-grid",label:RED._("menu.label.view.snapGrid"),toggle:true,onselect:RED.view.toggleSnapGrid},
+                    {id:"menu-item-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:toggleStatus, selected: true},
+                    null,
+                    {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true}
                 ]},
                 null,
-                {id:"btn-config-nodes",label:"Configuration nodes",onselect:RED.sidebar.config.show},
-                null,
-                {id:"btn-subflow-menu",label:"Subflows", options: [
-                    {id:"btn-create-subflow",label:"Create subflow",onselect:RED.subflow.createSubflow},
-                    {id:"btn-convert-subflow",label:"Selection to subflow",disabled:true,onselect:RED.subflow.convertToSubflow},
+                {id:"menu-item-import",label:RED._("menu.label.import"),options:[
+                    {id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:RED.clipboard.import},
+                    {id:"menu-item-import-library",label:RED._("menu.label.library"),options:[]}
+                ]},
+                {id:"menu-item-export",label:RED._("menu.label.export"),disabled:true,options:[
+                    {id:"menu-item-export-clipboard",label:RED._("menu.label.clipboard"),disabled:true,onselect:RED.clipboard.export},
+                    {id:"menu-item-export-library",label:RED._("menu.label.library"),disabled:true,onselect:RED.library.export}
                 ]},
                 null,
-                {id:"btn-workspace-menu",label:"Workspaces",options:[
-                    {id:"btn-workspace-add",label:"Add",onselect:RED.workspaces.add},
-                    {id:"btn-workspace-edit",label:"Rename",onselect:RED.workspaces.edit},
-                    {id:"btn-workspace-delete",label:"Delete",onselect:RED.workspaces.remove},
+                {id:"menu-item-config-nodes",label:RED._("menu.label.displayConfig"),onselect:function(){}},
+                {id:"menu-item-workspace",label:RED._("menu.label.flows"),options:[
+                    {id:"menu-item-workspace-add",label:RED._("menu.label.add"),onselect:RED.workspaces.add},
+                    {id:"menu-item-workspace-edit",label:RED._("menu.label.rename"),onselect:RED.workspaces.edit},
+                    {id:"menu-item-workspace-delete",label:RED._("menu.label.delete"),onselect:RED.workspaces.remove},
                     null
                 ]},
+                {id:"menu-item-subflow",label:RED._("menu.label.subflows"), options: [
+                    {id:"menu-item-subflow-create",label:RED._("menu.label.createSubflow"),onselect:RED.subflow.createSubflow},
+                    {id:"menu-item-subflow-convert",label:RED._("menu.label.selectionToSubflow"),disabled:true,onselect:RED.subflow.convertToSubflow},
+                ]},
                 null,
-                {id:"btn-keyboard-shortcuts",label:"Keyboard Shortcuts",onselect:RED.keyboard.showHelp},
-                {id:"btn-help",label:"Node-RED Website", href:"http://nodered.org/docs"}
+                {id:"menu-item-keyboard-shortcuts",label:RED._("menu.label.keyboardShortcuts"),onselect:RED.keyboard.showHelp},
+                {id:"menu-item-help",
+                    label: RED.settings.theme("menu.menu-item-help.label","Node-RED Website"),
+                    href: RED.settings.theme("menu.menu-item-help.url","http://nodered.org/docs")
+                },
+                {id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: showAbout }
             ]
         });
-        
+
         RED.user.init();
-        
+
         RED.library.init();
         RED.palette.init();
         RED.sidebar.init();
@@ -178,9 +218,11 @@ var RED = (function() {
         RED.workspaces.init();
         RED.clipboard.init();
         RED.view.init();
-        RED.deploy.init();
-        
-        RED.keyboard.add(/* ? */ 191,{shift:true},function(){RED.keyboard.showHelp();d3.event.preventDefault();});
+        RED.editor.init();
+
+        RED.deploy.init(RED.settings.theme("deployButton",null));
+
+        RED.keyboard.add("workspace", /* ? */ 191,{shift:true},function(){RED.keyboard.showHelp();d3.event.preventDefault();});
         RED.comms.connect();
 
         $("#main-container").show();
@@ -190,14 +232,16 @@ var RED = (function() {
     }
 
     $(function() {
-            
+
         if ((window.location.hostname !== "localhost") && (window.location.hostname !== "127.0.0.1")) {
-            document.title = "Node-RED : "+window.location.hostname;
+            document.title = document.title+" : "+window.location.hostname;
         }
-        
+
         ace.require("ace/ext/language_tools");
 
-        RED.settings.init(loadEditor);
+        RED.i18n.init(function() {
+            RED.settings.init(loadEditor);
+        })
     });
 
 

editor/js/nodes.js

@@ -21,21 +21,22 @@ RED.nodes = (function() {
     var links = [];
     var defaultWorkspace;
     var workspaces = {};
+    var workspacesOrder =[];
     var subflows = {};
-    
+
     var dirty = false;
-    
+
     function setDirty(d) {
         dirty = d;
-        eventHandler.emit("change",{dirty:dirty});
+        RED.events.emit("nodes:change",{dirty:dirty});
     }
-    
+
     var registry = (function() {
         var nodeList = [];
         var nodeSets = {};
         var typeToId = {};
         var nodeDefinitions = {};
-        
+
         var exports = {
             getNodeList: function() {
                 return nodeList;
@@ -107,7 +108,23 @@ RED.nodes = (function() {
             registerNodeType: function(nt,def) {
                 nodeDefinitions[nt] = def;
                 if (def.category != "subflows") {
+                    def.set = nodeSets[typeToId[nt]];
                     nodeSets[typeToId[nt]].added = true;
+
+                    var ns;
+                    if (def.set.module === "node-red") {
+                        ns = "node-red";
+                    } else {
+                        ns = def.set.id;
+                    }
+                    def["_"] = function() {
+                        var args = Array.prototype.slice.call(arguments, 0);
+                        if (args[0].indexOf(":") === -1) {
+                            args[0] = ns+":"+args[0];
+                        }
+                        return RED._.apply(null,args);
+                    }
+
                     // TODO: too tightly coupled into palette UI
                 }
                 RED.palette.add(nt,def);
@@ -117,6 +134,7 @@ RED.nodes = (function() {
             },
             removeNodeType: function(nt) {
                 if (nt.substring(0,8) != "subflow:") {
+                    // NON-NLS - internal debug message
                     throw new Error("this api is subflow only. called with:",nt);
                 }
                 delete nodeDefinitions[nt];
@@ -128,16 +146,24 @@ RED.nodes = (function() {
         };
         return exports;
     })();
-    
+
     function getID() {
         return (1+Math.random()*4294967295).toString(16);
     }
 
     function addNode(n) {
+        if (n.type.indexOf("subflow") !== 0) {
+            n["_"] = n._def._;
+        }
         if (n._def.category == "config") {
             configNodes[n.id] = n;
-            RED.sidebar.config.refresh();
         } else {
+            n.ports = [];
+            if (n.outputs) {
+                for (var i=0;i<n.outputs;i++) {
+                    n.ports.push(i);
+                }
+            }
             n.dirty = true;
             var updatedConfigNode = false;
             for (var d in n._def.defaults) {
@@ -148,15 +174,17 @@ RED.nodes = (function() {
                         if (type && type.category == "config") {
                             var configNode = configNodes[n[d]];
                             if (configNode) {
-                                updatedConfigNode = true;
-                                configNode.users.push(n);
+                                if (configNode.users.indexOf(n) === -1) {
+                                    updatedConfigNode = true;
+                                    configNode.users.push(n);
+                                }
                             }
                         }
                     }
                 }
             }
             if (updatedConfigNode) {
-                RED.sidebar.config.refresh();
+                // TODO: refresh config tab?
             }
             if (n._def.category == "subflows" && typeof n.i === "undefined") {
                 var nextId = 0;
@@ -167,9 +195,7 @@ RED.nodes = (function() {
             }
             nodes.push(n);
         }
-        if (n._def.onadd) {
-            n._def.onadd.call(n);
-        }
+        RED.events.emit('nodes:add',n);
     }
     function addLink(l) {
         links.push(l);
@@ -190,11 +216,13 @@ RED.nodes = (function() {
 
     function removeNode(id) {
         var removedLinks = [];
+        var removedNodes = [];
         var node;
         if (id in configNodes) {
             node = configNodes[id];
             delete configNodes[id];
-            RED.sidebar.config.refresh();
+            RED.events.emit('nodes:remove',node);
+            RED.workspaces.refresh();
         } else {
             node = getNode(id);
             if (node) {
@@ -211,22 +239,28 @@ RED.nodes = (function() {
                                 var configNode = configNodes[node[d]];
                                 if (configNode) {
                                     updatedConfigNode = true;
-                                    var users = configNode.users;
-                                    users.splice(users.indexOf(node),1);
+                                    if (configNode._def.exclusive) {
+                                        removeNode(node[d]);
+                                        removedNodes.push(configNode);
+                                    } else {
+                                        var users = configNode.users;
+                                        users.splice(users.indexOf(node),1);
+                                    }
                                 }
                             }
                         }
                     }
                 }
                 if (updatedConfigNode) {
-                    RED.sidebar.config.refresh();
+                    RED.workspaces.refresh();
                 }
+                RED.events.emit('nodes:remove',node);
             }
         }
-        if (node._def.onremove) {
+        if (node && node._def.onremove) {
             node._def.onremove.call(n);
         }
-        return removedLinks;
+        return {links:removedLinks,nodes:removedNodes};
     }
 
     function removeLink(l) {
@@ -238,24 +272,42 @@ RED.nodes = (function() {
 
     function addWorkspace(ws) {
         workspaces[ws.id] = ws;
+        ws._def = {
+            defaults: {
+                label: {value:""}
+            }
+        };
+
+        workspacesOrder.push(ws.id);
     }
     function getWorkspace(id) {
         return workspaces[id];
     }
     function removeWorkspace(id) {
         delete workspaces[id];
+        workspacesOrder.splice(workspacesOrder.indexOf(id),1);
+
         var removedNodes = [];
         var removedLinks = [];
         var n;
+        var node;
         for (n=0;n<nodes.length;n++) {
-            var node = nodes[n];
+            node = nodes[n];
             if (node.z == id) {
                 removedNodes.push(node);
             }
         }
+        for(n in configNodes) {
+            if (configNodes.hasOwnProperty(n)) {
+                node = configNodes[n];
+                if (node.z == id) {
+                    removedNodes.push(node);
+                }
+            }
+        }
         for (n=0;n<removedNodes.length;n++) {
-            var rmlinks = removeNode(removedNodes[n].id);
-            removedLinks = removedLinks.concat(rmlinks);
+            var result = removeNode(removedNodes[n].id);
+            removedLinks = removedLinks.concat(result.links);
         }
         return {nodes:removedNodes,links:removedLinks};
     }
@@ -265,7 +317,7 @@ RED.nodes = (function() {
             var subflowNames = Object.keys(subflows).map(function(sfid) {
                 return subflows[sfid].name;
             });
-            
+
             subflowNames.sort();
             var copyNumber = 1;
             var subflowName = sf.name;
@@ -277,10 +329,11 @@ RED.nodes = (function() {
             });
             sf.name = subflowName;
         }
-        
+
         subflows[sf.id] = sf;
         RED.nodes.registerType("subflow:"+sf.id, {
             defaults:{name:{value:""}},
+            info: sf.info,
             icon:"subflow.png",
             category: "subflows",
             inputs: sf.in.length,
@@ -288,10 +341,13 @@ RED.nodes = (function() {
             color: "#da9",
             label: function() { return this.name||RED.nodes.subflow(sf.id).name },
             labelStyle: function() { return this.name?"node_label_italic":""; },
-            paletteLabel: function() { return RED.nodes.subflow(sf.id).name }
+            paletteLabel: function() { return RED.nodes.subflow(sf.id).name },
+            set:{
+                module: "node-red"
+            }
         });
-        
-        
+
+
     }
     function getSubflow(id) {
         return subflows[id];
@@ -300,7 +356,7 @@ RED.nodes = (function() {
         delete subflows[sf.id];
         registry.removeNodeType("subflow:"+sf.id);
     }
-    
+
     function subflowContains(sfid,nodeid) {
         for (var i=0;i<nodes.length;i++) {
             var node = nodes[i];
@@ -320,7 +376,7 @@ RED.nodes = (function() {
         }
         return false;
     }
-    
+
     function getAllFlowNodes(node) {
         var visited = {};
         visited[node.id] = true;
@@ -353,6 +409,7 @@ RED.nodes = (function() {
         var node = {};
         node.id = n.id;
         node.type = n.type;
+        node.z = n.z;
         if (node.type == "unknown") {
             for (var p in n._orig) {
                 if (n._orig.hasOwnProperty(p)) {
@@ -388,7 +445,6 @@ RED.nodes = (function() {
         if (n._def.category != "config") {
             node.x = n.x;
             node.y = n.y;
-            node.z = n.z;
             node.wires = [];
             for(var i=0;i<n.outputs;i++) {
                 node.wires.push([]);
@@ -409,9 +465,10 @@ RED.nodes = (function() {
         node.id = n.id;
         node.type = n.type;
         node.name = n.name;
+        node.info = n.info;
         node.in = [];
         node.out = [];
-        
+
         n.in.forEach(function(p) {
             var nIn = {x:p.x,y:p.y,wires:[]};
             var wires = links.filter(function(d) { return d.source === p });
@@ -435,8 +492,8 @@ RED.nodes = (function() {
             }
             node.out.push(nOut);
         });
-            
-                
+
+
         return node;
     }
     /**
@@ -472,7 +529,7 @@ RED.nodes = (function() {
                         if ((exportable == null || exportable)) {
                             if (!(node[d] in exportedConfigNodes)) {
                                 exportedConfigNodes[node[d]] = true;
-                                nns.unshift(RED.nodes.convertNode(confNode));
+                                set.push(confNode);
                             }
                         } else {
                             convertedNode[d] = "";
@@ -492,11 +549,9 @@ RED.nodes = (function() {
     function createCompleteNodeSet() {
         var nns = [];
         var i;
-        for (i in workspaces) {
-            if (workspaces.hasOwnProperty(i)) {
-                if (workspaces[i].type == "tab") {
-                    nns.push(workspaces[i]);
-                }
+        for (i=0;i<workspacesOrder.length;i++) {
+            if (workspaces[workspacesOrder[i]].type == "tab") {
+                nns.push(workspaces[workspacesOrder[i]]);
             }
         }
         for (i in subflows) {
@@ -516,6 +571,35 @@ RED.nodes = (function() {
         return nns;
     }
 
+    function compareNodes(nodeA,nodeB,idMustMatch) {
+        if (idMustMatch && nodeA.id != nodeB.id) {
+            return false;
+        }
+        if (nodeA.type != nodeB.type) {
+            return false;
+        }
+        var def = nodeA._def;
+        for (var d in def.defaults) {
+            if (def.defaults.hasOwnProperty(d)) {
+                var vA = nodeA[d];
+                var vB = nodeB[d];
+                if (typeof vA !== typeof vB) {
+                    return false;
+                }
+                if (vA === null || typeof vA === "string" || typeof vA === "number") {
+                    if (vA !== vB) {
+                        return false;
+                    }
+                } else {
+                    if (JSON.stringify(vA) !== JSON.stringify(vB)) {
+                        return false;
+                    }
+                }
+            }
+        }
+        return true;
+    }
+
     function importNodes(newNodesObj,createNewIds) {
         var i;
         var n;
@@ -527,7 +611,7 @@ RED.nodes = (function() {
             try {
                 newNodes = JSON.parse(newNodesObj);
             } catch(err) {
-                var e = new Error("Invalid flow: "+err.message);
+                var e = new Error(RED._("clipboard.invalidFlow",{message:err.message}));
                 e.code = "NODE_RED";
                 throw e;
             }
@@ -542,21 +626,19 @@ RED.nodes = (function() {
         for (i=0;i<newNodes.length;i++) {
             n = newNodes[i];
             // TODO: remove workspace in next release+1
-            if (n.type != "workspace" && 
-                n.type != "tab" && 
+            if (n.type != "workspace" &&
+                n.type != "tab" &&
                 n.type != "subflow" &&
                 !registry.getNodeType(n.type) &&
                 n.type.substring(0,8) != "subflow:" &&
                 unknownTypes.indexOf(n.type)==-1) {
-            
                     unknownTypes.push(n.type);
             }
         }
         if (unknownTypes.length > 0) {
             var typeList = "<ul><li>"+unknownTypes.join("</li><li>")+"</li></ul>";
             var type = "type"+(unknownTypes.length > 1?"s":"");
-            RED.notify("<strong>Imported unrecognised "+type+":</strong>"+typeList,"error",false,10000);
-            //"DO NOT DEPLOY while in this state.<br/>Either, add missing types to Node-RED, restart and then reload page,<br/>or delete unknown "+n.name+", rewire as required, and then deploy.","error");
+            RED.notify("<strong>"+RED._("clipboard.importUnrecognised",{count:unknownTypes.length})+"</strong>"+typeList,"error",false,10000);
         }
 
         var activeWorkspace = RED.workspaces.active();
@@ -568,27 +650,32 @@ RED.nodes = (function() {
                     var subflowId = m[1];
                     var err;
                     if (subflowId === activeSubflow.id) {
-                        err = new Error("Cannot add subflow to itself");
+                        err = new Error(RED._("notification.errors.cannotAddSubflowToItself"));
                     }
                     if (subflowContains(m[1],activeSubflow.id)) {
-                        err = new Error("Cannot add subflow - circular reference detected");
+                        err = new Error(RED._("notification.errors.cannotAddCircularReference"));
                     }
                     if (err) {
                         // TODO: standardise error codes
                         err.code = "NODE_RED";
                         throw err;
                     }
-                    
                 }
             }
         }
-        
+
         var new_workspaces = [];
         var workspace_map = {};
         var new_subflows = [];
         var subflow_map = {};
+        var node_map = {};
+        var new_nodes = [];
+        var new_links = [];
         var nid;
         var def;
+        var configNode;
+
+        // Find all tabs and subflow templates
         for (i=0;i<newNodes.length;i++) {
             n = newNodes[i];
             // TODO: remove workspace in next release+1
@@ -630,35 +717,74 @@ RED.nodes = (function() {
                 });
                 new_subflows.push(n);
                 addSubflow(n,createNewIds);
-            } else {
-                def = registry.getNodeType(n.type);
-                if (def && def.category == "config") {
-                    if (!RED.nodes.node(n.id)) {
-                        var configNode = {id:n.id,type:n.type,users:[]};
-                        for (var d in def.defaults) {
-                            if (def.defaults.hasOwnProperty(d)) {
-                                configNode[d] = n[d];
-                            }
-                        }
-                        configNode.label = def.label;
-                        configNode._def = def;
-                        RED.nodes.add(configNode);
-                    }
-                }
             }
         }
+
+        // Add a tab if there isn't one there already
         if (defaultWorkspace == null) {
-            defaultWorkspace = { type:"tab", id:getID(), label:"Sheet 1" };
+            defaultWorkspace = { type:"tab", id:getID(), label:RED._('workspace.defaultName',{number:1})};
             addWorkspace(defaultWorkspace);
             RED.workspaces.add(defaultWorkspace);
             new_workspaces.push(defaultWorkspace);
             activeWorkspace = RED.workspaces.active();
         }
 
-        var node_map = {};
-        var new_nodes = [];
-        var new_links = [];
+        // Find all config nodes and add them
+        for (i=0;i<newNodes.length;i++) {
+            n = newNodes[i];
+            def = registry.getNodeType(n.type);
+            if (def && def.category == "config") {
+                var existingConfigNode = null;
+                if (createNewIds) {
+                    if (n.z) {
+                        if (subflow_map[n.z]) {
+                            n.z = subflow_map[n.z].id;
+                        } else {
+                            n.z = workspace_map[n.z];
+                            if (!workspaces[n.z]) {
+                                n.z = activeWorkspace;
+                            }
+                        }
+                    }
+                    existingConfigNode = RED.nodes.node(n.id);
+                    if (existingConfigNode) {
+                        if (n.z && existingConfigNode.z !== n.z) {
+                            existingConfigNode = null;
+                            // Check the config nodes on n.z
+                            for (var cn in configNodes) {
+                                if (configNodes.hasOwnProperty(cn)) {
+                                    if (configNodes[cn].z === n.z && compareNodes(configNodes[cn],n,false)) {
+                                        existingConfigNode = configNodes[cn];
+                                        node_map[n.id] = configNodes[cn];
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+                    }
 
+                }
+
+                if (!existingConfigNode) { //} || !compareNodes(existingConfigNode,n,true) || existingConfigNode._def.exclusive || existingConfigNode.z !== n.z) {
+                    configNode = {id:n.id, z:n.z, type:n.type, users:[]};
+                    for (var d in def.defaults) {
+                        if (def.defaults.hasOwnProperty(d)) {
+                            configNode[d] = n[d];
+                        }
+                    }
+                    configNode.label = def.label;
+                    configNode._def = def;
+                    if (createNewIds) {
+                        configNode.id = getID();
+                    }
+                    node_map[n.id] = configNode;
+                    new_nodes.push(configNode);
+                    RED.nodes.add(configNode);
+                }
+            }
+        }
+
+        // Find regular flow nodes and subflow instances
         for (i=0;i<newNodes.length;i++) {
             n = newNodes[i];
             // TODO: remove workspace in next release+1
@@ -704,11 +830,13 @@ RED.nodes = (function() {
                                     defaults: {},
                                     label: "unknown: "+n.type,
                                     labelStyle: "node_label_italic",
-                                    outputs: n.outputs||n.wires.length
+                                    outputs: n.outputs||n.wires.length,
+                                    set: registry.getNodeSet("node-red/unknown")
                                 }
                             } else {
                                 node._def = {
-                                    category:"config"
+                                    category:"config",
+                                    set: registry.getNodeSet("node-red/unknown")
                                 };
                                 node.users = [];
                             }
@@ -741,19 +869,52 @@ RED.nodes = (function() {
                 }
             }
         }
+        // TODO: make this a part of the node definition so it doesn't have to
+        //       be hardcoded here
+        var nodeTypeArrayReferences = {
+            "catch":"scope",
+            "status":"scope",
+            "link in":"links",
+            "link out":"links"
+        }
+
+
+        // Remap all wires and config node references
         for (i=0;i<new_nodes.length;i++) {
             n = new_nodes[i];
-            for (var w1=0;w1<n.wires.length;w1++) {
-                var wires = (n.wires[w1] instanceof Array)?n.wires[w1]:[n.wires[w1]];
-                for (var w2=0;w2<wires.length;w2++) {
-                    if (wires[w2] in node_map) {
-                        var link = {source:n,sourcePort:w1,target:node_map[wires[w2]]};
-                        addLink(link);
-                        new_links.push(link);
+            if (n.wires) {
+                for (var w1=0;w1<n.wires.length;w1++) {
+                    var wires = (n.wires[w1] instanceof Array)?n.wires[w1]:[n.wires[w1]];
+                    for (var w2=0;w2<wires.length;w2++) {
+                        if (wires[w2] in node_map) {
+                            var link = {source:n,sourcePort:w1,target:node_map[wires[w2]]};
+                            addLink(link);
+                            new_links.push(link);
+                        }
+                    }
+                }
+                delete n.wires;
+            }
+            for (var d3 in n._def.defaults) {
+                if (n._def.defaults.hasOwnProperty(d3)) {
+                    if (n._def.defaults[d3].type && node_map[n[d3]]) {
+                        n[d3] = node_map[n[d3]].id;
+                        configNode = RED.nodes.node(n[d3]);
+                        if (configNode && configNode.users.indexOf(n) === -1) {
+                            configNode.users.push(n);
+                        }
+                    } else if (nodeTypeArrayReferences.hasOwnProperty(n.type) && nodeTypeArrayReferences[n.type] === d3 && n[d3] !== undefined && n[d3] !== null) {
+                        for (var j = 0;j<n[d3].length;j++) {
+                            if (node_map[n[d3][j]]) {
+                                n[d3][j] = node_map[n[d3][j]].id;
+                            }
+                        }
+
                     }
                 }
             }
-            delete n.wires;
+
+
         }
         for (i=0;i<new_subflows.length;i++) {
             n = new_subflows[i];
@@ -779,20 +940,21 @@ RED.nodes = (function() {
                 delete output.wires;
             });
         }
-        
+
+        RED.workspaces.refresh();
         return [new_nodes,new_links,new_workspaces,new_subflows];
     }
-    
+
     // TODO: supports filter.z|type
     function filterNodes(filter) {
         var result = [];
-        
+
         for (var n=0;n<nodes.length;n++) {
             var node = nodes[n];
-            if (filter.z && node.z !== filter.z) {
+            if (filter.hasOwnProperty("z") && node.z !== filter.z) {
                 continue;
             }
-            if (filter.type && node.type !== filter.type) {
+            if (filter.hasOwnProperty("type") && node.type !== filter.type) {
                 continue;
             }
             result.push(node);
@@ -801,84 +963,64 @@ RED.nodes = (function() {
     }
     function filterLinks(filter) {
         var result = [];
-        
+
         for (var n=0;n<links.length;n++) {
             var link = links[n];
             if (filter.source) {
-                if (filter.source.id && link.source.id !== filter.source.id) {
+                if (filter.source.hasOwnProperty("id") && link.source.id !== filter.source.id) {
                     continue;
                 }
-                if (filter.source.z && link.source.z !== filter.source.z) {
+                if (filter.source.hasOwnProperty("z") && link.source.z !== filter.source.z) {
                     continue;
                 }
             }
             if (filter.target) {
-                if (filter.target.id && link.target.id !== filter.target.id) {
+                if (filter.target.hasOwnProperty("id") && link.target.id !== filter.target.id) {
                     continue;
                 }
-                if (filter.target.z && link.target.z !== filter.target.z) {
+                if (filter.target.hasOwnProperty("z") && link.target.z !== filter.target.z) {
                     continue;
                 }
             }
-            if (filter.sourcePort && link.sourcePort !== filter.sourcePort) {
+            if (filter.hasOwnProperty("sourcePort") && link.sourcePort !== filter.sourcePort) {
                 continue;
             }
             result.push(link);
         }
         return result;
     }
-    
-    // TODO: DRY
-    var eventHandler = (function() {
-        var handlers = {};
-        
-        return {
-            on: function(evt,func) {
-                handlers[evt] = handlers[evt]||[];
-                handlers[evt].push(func);
-            },
-            emit: function(evt,arg) {
-                if (handlers[evt]) {
-                    for (var i=0;i<handlers[evt].length;i++) {
-                        handlers[evt][i](arg);
-                    }
-                    
-                }
-            }
-        }
-    })();
-    
+
     return {
-        on: eventHandler.on,
-        
         registry:registry,
         setNodeList: registry.setNodeList,
-        
+
         getNodeSet: registry.getNodeSet,
         addNodeSet: registry.addNodeSet,
         removeNodeSet: registry.removeNodeSet,
         enableNodeSet: registry.enableNodeSet,
         disableNodeSet: registry.disableNodeSet,
-        
+
         registerType: registry.registerNodeType,
         getType: registry.getNodeType,
         convertNode: convertNode,
-        
+
         add: addNode,
         remove: removeNode,
-        
+
         addLink: addLink,
         removeLink: removeLink,
-        
+
         addWorkspace: addWorkspace,
         removeWorkspace: removeWorkspace,
+        getWorkspaceOrder: function() { return workspacesOrder },
+        setWorkspaceOrder: function(order) { workspacesOrder = order; },
         workspace: getWorkspace,
-        
+
         addSubflow: addSubflow,
         removeSubflow: removeSubflow,
         subflow: getSubflow,
         subflowContains: subflowContains,
-        
+
         eachNode: function(cb) {
             for (var n=0;n<nodes.length;n++) {
                 cb(nodes[n]);
@@ -903,14 +1045,19 @@ RED.nodes = (function() {
                 }
             }
         },
-        
+        eachWorkspace: function(cb) {
+            for (var i=0;i<workspacesOrder.length;i++) {
+                cb(workspaces[workspacesOrder[i]]);
+            }
+        },
+
         node: getNode,
-        
+
         filterNodes: filterNodes,
         filterLinks: filterLinks,
-        
+
         import: importNodes,
-        
+
         getAllFlowNodes: getAllFlowNodes,
         createExportableNodeSet: createExportableNodeSet,
         createCompleteNodeSet: createCompleteNodeSet,

editor/js/settings.js

@@ -16,9 +16,9 @@
 
 
 RED.settings = (function () {
-    
+
     var loadedSettings = {};
-        
+
     var hasLocalStorage = function () {
         try {
             return 'localStorage' in window && window['localStorage'] !== null;
@@ -33,6 +33,7 @@ RED.settings = (function () {
         }
         localStorage.setItem(key, JSON.stringify(value));
     };
+
     /**
      * If the key is not set in the localStorage it returns <i>undefined</i>
      * Else return the JSON parsed value
@@ -74,7 +75,7 @@ RED.settings = (function () {
             RED.settings.set("auth-tokens",{access_token: accessToken});
             window.location.search = "";
         }
-        
+
         $.ajaxSetup({
             beforeSend: function(jqXHR,settings) {
                 // Only attach auth header for requests to relative paths
@@ -89,7 +90,7 @@ RED.settings = (function () {
 
         load(done);
     }
-    
+
     var load = function(done) {
         $.ajax({
             headers: {
@@ -112,20 +113,39 @@ RED.settings = (function () {
                         window.location.search = "";
                     }
                     RED.user.login(function() { load(done); });
-                 } else {
-                     console.log("Unexpected error:",jqXHR.status,textStatus);
-                 }
+                } else {
+                    console.log("Unexpected error:",jqXHR.status,textStatus);
+                }
             }
         });
     };
 
+    function theme(property,defaultValue) {
+        if (!RED.settings.editorTheme) {
+            return defaultValue;
+        }
+        var parts = property.split(".");
+        var v = RED.settings.editorTheme;
+        try {
+            for (var i=0;i<parts.length;i++) {
+                v = v[parts[i]];
+            }
+            if (v === undefined) {
+                return defaultValue;
+            }
+            return v;
+        } catch(err) {
+            return defaultValue;
+        }
+    }
 
     return {
         init: init,
         load: load,
         set: set,
         get: get,
-        remove: remove
+        remove: remove,
+        theme: theme
     }
 })
 ();

editor/js/ui/clipboard.js

@@ -0,0 +1,190 @@
+/**
+ * Copyright 2015 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+
+RED.clipboard = (function() {
+
+    var dialog;
+    var dialogContainer;
+    var exportNodesDialog;
+    var importNodesDialog;
+
+    function setupDialogs() {
+        dialog = $('<div id="clipboard-dialog" class="hide node-red-dialog"><form class="dialog-form form-horizontal"></form></div>')
+            .appendTo("body")
+            .dialog({
+                modal: true,
+                autoOpen: false,
+                width: 500,
+                resizable: false,
+                buttons: [
+                    {
+                        id: "clipboard-dialog-cancel",
+                        text: RED._("common.label.cancel"),
+                        click: function() {
+                            $( this ).dialog( "close" );
+                        }
+                    },
+                    {
+                        id: "clipboard-dialog-close",
+                        class: "primary",
+                        text: RED._("common.label.close"),
+                        click: function() {
+                            $( this ).dialog( "close" );
+                        }
+                    },
+                    {
+                        id: "clipboard-dialog-ok",
+                        class: "primary",
+                        text: RED._("common.label.import"),
+                        click: function() {
+                            RED.view.importNodes($("#clipboard-import").val());
+                            $( this ).dialog( "close" );
+                        }
+                    }
+                ],
+                open: function(e) {
+                    $(this).parent().find(".ui-dialog-titlebar-close").hide();
+                },
+                close: function(e) {
+                }
+            });
+
+        dialogContainer = dialog.children(".dialog-form");
+
+        exportNodesDialog = '<div class="form-row">'+
+            '<label for="node-input-export" style="display: block; width:100%;"><i class="fa fa-clipboard"></i> '+RED._("clipboard.nodes")+'</label>'+
+            '<textarea readonly style="resize: none; width: 100%; border-radius: 0px;font-family: monospace; font-size: 12px; background:#eee; padding-left: 0.5em; box-sizing:border-box;" id="clipboard-export" rows="5"></textarea>'+
+            '</div>'+
+            '<div class="form-tips">'+
+            RED._("clipboard.selectNodes")+
+            '</div>';
+
+        importNodesDialog = '<div class="form-row">'+
+            '<textarea style="resize: none; width: 100%; border-radius: 0px;font-family: monospace; font-size: 12px; background:#eee; padding-left: 0.5em; box-sizing:border-box;" id="clipboard-import" rows="5" placeholder="'+
+            RED._("clipboard.pasteNodes")+
+            '"></textarea>'+
+            '</div>';
+    }
+
+    function validateImport() {
+        var importInput = $("#clipboard-import");
+        var v = importInput.val();
+        v = v.substring(v.indexOf('['),v.lastIndexOf(']')+1);
+        try {
+            JSON.parse(v);
+            importInput.removeClass("input-error");
+            importInput.val(v);
+            $("#clipboard-dialog-ok").button("enable");
+        } catch(err) {
+            if (v !== "") {
+                importInput.addClass("input-error");
+            }
+            $("#clipboard-dialog-ok").button("disable");
+        }
+    }
+
+    function importNodes() {
+        dialogContainer.empty();
+        dialogContainer.append($(importNodesDialog));
+        $("#clipboard-dialog-ok").show();
+        $("#clipboard-dialog-cancel").show();
+        $("#clipboard-dialog-close").hide();
+        $("#clipboard-dialog-ok").button("disable");
+        $("#clipboard-import").keyup(validateImport);
+        $("#clipboard-import").on('paste',function() { setTimeout(validateImport,10)});
+
+        dialog.dialog("option","title",RED._("clipboard.importNodes")).dialog("open");
+    }
+
+    function exportNodes() {
+        dialogContainer.empty();
+        dialogContainer.append($(exportNodesDialog));
+        $("#clipboard-dialog-ok").hide();
+        $("#clipboard-dialog-cancel").hide();
+        $("#clipboard-dialog-close").show();
+        var selection = RED.view.selection();
+        if (selection.nodes) {
+            var nns = RED.nodes.createExportableNodeSet(selection.nodes);
+            if (RED.settings.flowFilePretty) {
+                nns = JSON.stringify(nns,null,4);
+            } else {
+                nns = JSON.stringify(nns);
+            }
+            $("#clipboard-export")
+                .val(nns)
+                .focus(function() {
+                    var textarea = $(this);
+                    textarea.select();
+                    textarea.mouseup(function() {
+                        textarea.unbind("mouseup");
+                        return false;
+                    })
+                });
+            dialog.dialog("option","title",RED._("clipboard.exportNodes")).dialog( "open" );
+        }
+    }
+
+    function hideDropTarget() {
+        $("#dropTarget").hide();
+        RED.keyboard.remove(/* ESCAPE */ 27);
+    }
+
+    return {
+        init: function() {
+            setupDialogs();
+            RED.events.on("view:selection-changed",function(selection) {
+                if (!selection.nodes) {
+                    RED.menu.setDisabled("menu-item-export",true);
+                    RED.menu.setDisabled("menu-item-export-clipboard",true);
+                    RED.menu.setDisabled("menu-item-export-library",true);
+                } else {
+                    RED.menu.setDisabled("menu-item-export",false);
+                    RED.menu.setDisabled("menu-item-export-clipboard",false);
+                    RED.menu.setDisabled("menu-item-export-library",false);
+                }
+            });
+            RED.keyboard.add("workspace", /* e */ 69,{ctrl:true},function(){exportNodes();d3.event.preventDefault();});
+            RED.keyboard.add("workspace", /* i */ 73,{ctrl:true},function(){importNodes();d3.event.preventDefault();});
+
+            $('#chart').on("dragenter",function(event) {
+                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
+                    $("#dropTarget").css({display:'table'});
+                    RED.keyboard.add("*", /* ESCAPE */ 27,hideDropTarget);
+                }
+            });
+
+            $('#dropTarget').on("dragover",function(event) {
+                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
+                    event.preventDefault();
+                }
+            })
+            .on("dragleave",function(event) {
+                hideDropTarget();
+            })
+            .on("drop",function(event) {
+                var data = event.originalEvent.dataTransfer.getData("text/plain");
+                hideDropTarget();
+                data = data.substring(data.indexOf('['),data.lastIndexOf(']')+1);
+                RED.view.importNodes(data);
+                event.preventDefault();
+            });
+
+        },
+        import: importNodes,
+        export: exportNodes
+    }
+})();

editor/js/ui/deploy.js

@@ -0,0 +1,289 @@
+/**
+ * Copyright 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+RED.deploy = (function() {
+
+    var deploymentTypes = {
+        "full":{img:"red/images/deploy-full-o.png"},
+        "nodes":{img:"red/images/deploy-nodes-o.png"},
+        "flows":{img:"red/images/deploy-flows-o.png"}
+    }
+
+    var ignoreDeployWarnings = {
+        unknown: false,
+        unusedConfig: false,
+        invalid: false
+    }
+
+    var deploymentType = "full";
+
+    function changeDeploymentType(type) {
+        deploymentType = type;
+        $("#btn-deploy img").attr("src",deploymentTypes[type].img);
+    }
+
+
+    /**
+     * options:
+     *   type: "default" - Button with drop-down options - no further customisation available
+     *   type: "simple"  - Button without dropdown. Customisations:
+     *      label: the text to display - default: "Deploy"
+     *      icon : the icon to use. Null removes the icon. default: "red/images/deploy-full-o.png"
+     */
+    function init(options) {
+        options = options || {};
+        var type = options.type || "default";
+
+        if (type == "default") {
+            $('<li><span class="deploy-button-group button-group">'+
+              '<a id="btn-deploy" class="deploy-button disabled" href="#"><img id="btn-deploy-icon" src="red/images/deploy-full-o.png"> <span>'+RED._("deploy.deploy")+'</span></a>'+
+              '<a id="btn-deploy-options" data-toggle="dropdown" class="deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
+              '</span></li>').prependTo(".header-toolbar");
+              RED.menu.init({id:"btn-deploy-options",
+                  options: [
+                      {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.png",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}},
+                      {id:"deploymenu-item-flow",toggle:"deploy-type",icon:"red/images/deploy-flows.png",label:RED._("deploy.modifiedFlows"),sublabel:RED._("deploy.modifiedFlowsDesc"), onselect:function(s) {if(s){changeDeploymentType("flows")}}},
+                      {id:"deploymenu-item-node",toggle:"deploy-type",icon:"red/images/deploy-nodes.png",label:RED._("deploy.modifiedNodes"),sublabel:RED._("deploy.modifiedNodesDesc"),onselect:function(s) { if(s){changeDeploymentType("nodes")}}}
+                  ]
+              });
+        } else if (type == "simple") {
+            var label = options.label || RED._("deploy.deploy");
+            var icon = 'red/images/deploy-full-o.png';
+            if (options.hasOwnProperty('icon')) {
+                icon = options.icon;
+            }
+
+            $('<li><span class="deploy-button-group button-group">'+
+              '<a id="btn-deploy" class="deploy-button disabled" href="#">'+
+              (icon?'<img id="btn-deploy-icon" src="'+icon+'"> ':'')+
+              '<span>'+label+'</span></a>'+
+              '</span></li>').prependTo(".header-toolbar");
+        }
+
+        $('#btn-deploy').click(function() { save(); });
+
+        $( "#node-dialog-confirm-deploy" ).dialog({
+                title: "Confirm deploy",
+                modal: true,
+                autoOpen: false,
+                width: 550,
+                height: "auto",
+                buttons: [
+                    {
+                        text: RED._("deploy.confirm.button.cancel"),
+                        click: function() {
+                            $( this ).dialog( "close" );
+                        }
+                    },
+                    {
+                        text: RED._("deploy.confirm.button.confirm"),
+                        class: "primary",
+                        click: function() {
+
+                            var ignoreChecked = $( "#node-dialog-confirm-deploy-hide" ).prop("checked");
+                            if (ignoreChecked) {
+                                ignoreDeployWarnings[$( "#node-dialog-confirm-deploy-type" ).val()] = true;
+                            }
+                            save(true);
+                            $( this ).dialog( "close" );
+                        }
+                    }
+                ],
+                create: function() {
+                    $("#node-dialog-confirm-deploy").parent().find("div.ui-dialog-buttonpane")
+                        .prepend('<div style="height:0; vertical-align: middle; display:inline-block; margin-top: 13px; float:left;">'+
+                                   '<input style="vertical-align:top;" type="checkbox" id="node-dialog-confirm-deploy-hide">'+
+                                   '<label style="display:inline;" for="node-dialog-confirm-deploy-hide"> do not warn about this again</label>'+
+                                   '<input type="hidden" id="node-dialog-confirm-deploy-type">'+
+                                   '</div>');
+                }
+        });
+
+        RED.events.on('nodes:change',function(state) {
+            if (state.dirty) {
+                window.onbeforeunload = function() {
+                    return RED._("deploy.confirm.undeployedChanges");
+                }
+                $("#btn-deploy").removeClass("disabled");
+            } else {
+                window.onbeforeunload = null;
+                $("#btn-deploy").addClass("disabled");
+            }
+        });
+    }
+
+    function getNodeInfo(node) {
+        var tabLabel = "";
+        if (node.z) {
+            var tab = RED.nodes.workspace(node.z);
+            if (!tab) {
+                tab = RED.nodes.subflow(node.z);
+                tabLabel = tab.name;
+            } else {
+                tabLabel = tab.label;
+            }
+        }
+        var label = "";
+        if (typeof node._def.label == "function") {
+            label = node._def.label.call(node);
+        } else {
+            label = node._def.label;
+        }
+        label = label || node.id;
+        return {tab:tabLabel,type:node.type,label:label};
+    }
+    function sortNodeInfo(A,B) {
+        if (A.tab < B.tab) { return -1;}
+        if (A.tab > B.tab) { return 1;}
+        if (A.type < B.type) { return -1;}
+        if (A.type > B.type) { return 1;}
+        if (A.name < B.name) { return -1;}
+        if (A.name > B.name) { return 1;}
+        return 0;
+    }
+
+    function save(force) {
+        if (RED.nodes.dirty()) {
+            //$("#debug-tab-clear").click();  // uncomment this to auto clear debug on deploy
+
+            if (!force) {
+                var hasUnknown = false;
+                var hasInvalid = false;
+                var hasUnusedConfig = false;
+
+                var unknownNodes = [];
+                var invalidNodes = [];
+
+                RED.nodes.eachNode(function(node) {
+                    hasInvalid = hasInvalid || !node.valid;
+                    if (!node.valid) {
+                        invalidNodes.push(getNodeInfo(node));
+                    }
+                    if (node.type === "unknown") {
+                        if (unknownNodes.indexOf(node.name) == -1) {
+                            unknownNodes.push(node.name);
+                        }
+                    }
+                });
+                hasUnknown = unknownNodes.length > 0;
+
+                var unusedConfigNodes = [];
+                RED.nodes.eachConfig(function(node) {
+                    if (node.users.length === 0) {
+                        unusedConfigNodes.push(getNodeInfo(node));
+                        hasUnusedConfig = true;
+                    }
+                });
+
+                $( "#node-dialog-confirm-deploy-config" ).hide();
+                $( "#node-dialog-confirm-deploy-unknown" ).hide();
+                $( "#node-dialog-confirm-deploy-unused" ).hide();
+
+                var showWarning = false;
+
+                if (hasUnknown && !ignoreDeployWarnings.unknown) {
+                    showWarning = true;
+                    $( "#node-dialog-confirm-deploy-type" ).val("unknown");
+                    $( "#node-dialog-confirm-deploy-unknown" ).show();
+                    $( "#node-dialog-confirm-deploy-unknown-list" )
+                        .html("<li>"+unknownNodes.join("</li><li>")+"</li>");
+                } else if (hasInvalid && !ignoreDeployWarnings.invalid) {
+                    showWarning = true;
+                    $( "#node-dialog-confirm-deploy-type" ).val("invalid");
+                    $( "#node-dialog-confirm-deploy-config" ).show();
+                    invalidNodes.sort(sortNodeInfo);
+                    $( "#node-dialog-confirm-deploy-invalid-list" )
+                        .html("<li>"+invalidNodes.map(function(A) { return (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")"}).join("</li><li>")+"</li>");
+
+                } else if (hasUnusedConfig && !ignoreDeployWarnings.unusedConfig) {
+                    // showWarning = true;
+                    // $( "#node-dialog-confirm-deploy-type" ).val("unusedConfig");
+                    // $( "#node-dialog-confirm-deploy-unused" ).show();
+                    //
+                    // unusedConfigNodes.sort(sortNodeInfo);
+                    // $( "#node-dialog-confirm-deploy-unused-list" )
+                    //     .html("<li>"+unusedConfigNodes.map(function(A) { return (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")"}).join("</li><li>")+"</li>");
+                }
+                if (showWarning) {
+                    $( "#node-dialog-confirm-deploy-hide" ).prop("checked",false);
+                    $( "#node-dialog-confirm-deploy" ).dialog( "open" );
+                    return;
+                }
+            }
+
+
+
+
+            var nns = RED.nodes.createCompleteNodeSet();
+
+            $("#btn-deploy-icon").removeClass('fa-download');
+            $("#btn-deploy-icon").addClass('spinner');
+            RED.nodes.dirty(false);
+
+            $.ajax({
+                url:"flows",
+                type: "POST",
+                data: JSON.stringify(nns),
+                contentType: "application/json; charset=utf-8",
+                headers: {
+                    "Node-RED-Deployment-Type":deploymentType
+                }
+            }).done(function(data,textStatus,xhr) {
+                if (hasUnusedConfig) {
+                    RED.notify(
+                    '<p>'+RED._("deploy.successfulDeploy")+'</p>'+
+                    '<p>'+RED._("deploy.unusedConfigNodes")+' <a href="#" onclick="RED.sidebar.config.show(true); return false;">'+RED._("deploy.unusedConfigNodesLink")+'</a></p>',"success",false,6000);
+                } else {
+                    RED.notify(RED._("deploy.successfulDeploy"),"success");
+                }
+                RED.nodes.eachNode(function(node) {
+                    if (node.changed) {
+                        node.dirty = true;
+                        node.changed = false;
+                    }
+                    if(node.credentials) {
+                        delete node.credentials;
+                    }
+                });
+                RED.nodes.eachConfig(function (confNode) {
+                    if (confNode.credentials) {
+                        delete confNode.credentials;
+                    }
+                });
+                // Once deployed, cannot undo back to a clean state
+                RED.history.markAllDirty();
+                RED.view.redraw();
+                RED.events.emit("deploy");
+            }).fail(function(xhr,textStatus,err) {
+                RED.nodes.dirty(true);
+                if (xhr.status === 401) {
+                    RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error");
+                } else if (xhr.responseText) {
+                    RED.notify(RED._("deploy.deployFailed",{message:xhr.responseText}),"error");
+                } else {
+                    RED.notify(RED._("deploy.deployFailed",{message:RED._("deploy.errors.noResponse")}),"error");
+                }
+            }).always(function() {
+                $("#btn-deploy-icon").removeClass('spinner');
+                $("#btn-deploy-icon").addClass('fa-download');
+            });
+        }
+    }
+
+    return {
+        init: init
+    }
+})();

editor/js/ui/editableList.js

@@ -0,0 +1,191 @@
+/**
+ * Copyright 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+(function($) {
+
+/**
+ * options:
+ *   - addButton : boolean|string - text for add label, default 'add'
+ *   - height : number|'auto'
+ *   - resize : function - called when list as a whole is resized
+ *   - resizeItem : function(item) - called to resize individual item
+ *   - sortable : boolean|string - string is the css selector for handle
+ *   - sortItems : function(items) - when order of items changes
+ *   - connectWith : css selector of other sortables
+ *   - removable : boolean - whether to display delete button on items
+ *   - addItem : function(row,index,itemData) - when an item is added
+ *   - removeItem : function(itemData) - called when an item is removed
+ * methods:
+ *   - addItem(itemData)
+ *   - removeItem(itemData)
+ *   - width(width)
+ *   - height(height)
+ *   - items()
+ *   - empty()
+ */
+    $.widget( "nodered.editableList", {
+        _create: function() {
+            var that = this;
+
+            this.element.addClass('red-ui-editableList-list');
+            this.uiWidth = this.element.width();
+            this.uiContainer = this.element
+                .wrap( "<div>" )
+                .parent();
+            this.topContainer = this.uiContainer.wrap("<div>").parent();
+
+            this.topContainer.addClass('red-ui-editableList');
+
+            if (this.options.addButton !== false) {
+                var addLabel;
+                if (typeof this.options.addButton === 'string') {
+                    addLabel = this.options.addButton
+                } else {
+                    if (RED && RED._) {
+                        addLabel = RED._("editableList.add");
+                    } else {
+                        addLabel = 'add';
+                    }
+                }
+                $('<a href="#" class="editor-button editor-button-small" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>')
+                    .appendTo(this.topContainer)
+                    .click(function(evt) {
+                        evt.preventDefault();
+                        that.addItem({});
+                    });
+            }
+
+            this.uiContainer.addClass("red-ui-editableList-container");
+
+            this.uiHeight = this.element.height();
+
+            var minHeight = this.element.css("minHeight");
+            if (minHeight !== '0px') {
+                this.uiContainer.css("minHeight",minHeight);
+                this.element.css("minHeight",0);
+            }
+            if (this.options.height !== 'auto') {
+                this.uiContainer.css("overflow-y","scroll");
+                if (!isNaN(this.options.height)) {
+                    this.uiHeight = this.options.height;
+                }
+            }
+            if (this.options.sortable) {
+                var handle = (typeof this.options.sortable === 'string')?
+                                this.options.sortable :
+                                ".red-ui-editableList-item-handle";
+                var sortOptions = {
+                    axis: "y",
+                    update: function( event, ui ) {
+                        if (that.options.sortItems) {
+                            that.options.sortItems(that.items());
+                        }
+                    },
+                    handle:handle,
+                    cursor: "move",
+                    tolerance: "pointer",
+                    forcePlaceholderSize:true,
+                    placeholder: "red-ui-editabelList-item-placeholder",
+                    start: function(e, ui){
+                        ui.placeholder.height(ui.item.height()-4);
+                    }
+                };
+                if (this.options.connectWith) {
+                    sortOptions.connectWith = this.options.connectWith;
+                }
+
+                this.element.sortable(sortOptions);
+            }
+
+            this._resize();
+
+            // this.menu = this._createMenu(this.types, function(v) { that.type(v) });
+            // this.type(this.options.default||this.types[0].value);
+        },
+        _resize: function() {
+            var currentFullHeight = this.topContainer.height();
+            var innerHeight = this.uiContainer.height();
+            var delta = currentFullHeight - innerHeight;
+            if (this.uiHeight !== 0) {
+                this.uiContainer.height(this.uiHeight-delta);
+            }
+            if (this.options.resize) {
+                this.options.resize();
+            }
+            if (this.options.resizeItem) {
+                var that = this;
+                this.element.children().each(function(i) {
+                    that.options.resizeItem($(this).find(".red-ui-editableList-item-content"),i);
+                });
+            }
+        },
+        _destroy: function() {
+        },
+        width: function(desiredWidth) {
+            this.uiWidth = desiredWidth;
+            this._resize();
+        },
+        height: function(desiredHeight) {
+            this.uiHeight = desiredHeight;
+            this._resize();
+        },
+        addItem: function(data) {
+            var that = this;
+            data = data || {};
+            var li = $('<li>').appendTo(this.element);
+            var row = $('<div/>').addClass("red-ui-editableList-item-content").appendTo(li);
+            row.data('data',data);
+            if (this.options.sortable === true) {
+                $('<i class="red-ui-editableList-item-handle fa fa-bars"></i>').appendTo(li);
+                li.addClass("red-ui-editableList-item-sortable");
+            }
+            if (this.options.removable) {
+                var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove editor-button editor-button-small"}).appendTo(li);
+                $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
+                li.addClass("red-ui-editableList-item-removable");
+                deleteButton.click(function() {
+                    li.addClass("red-ui-editableList-item-deleting")
+                    li.fadeOut(300, function() {
+                        $(this).remove();
+                        if (that.options.removeItem) {
+                            that.options.removeItem(row.data('data'));
+                        }
+                    });
+                });
+            }
+            if (this.options.addItem) {
+                var index = that.element.children().length-1;
+                setTimeout(function() {
+                    that.options.addItem(row,index,data);
+                },0);
+            }
+        },
+        removeItem: function(data) {
+            var items = this.element.children().filter(function(f) {
+                return data === $(this).find(".red-ui-editableList-item-content").data('data');
+            });
+            items.remove();
+            if (this.options.removeItem) {
+                this.options.removeItem(data);
+            }
+        },
+        items: function() {
+            return this.element.children().map(function(i) { return $(this).find(".red-ui-editableList-item-content"); });
+        },
+        empty: function() {
+            this.element.empty();
+        }
+    });
+})(jQuery);

editor/js/ui/keyboard.js

@@ -0,0 +1,149 @@
+/**
+ * Copyright 2013 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+RED.keyboard = (function() {
+
+    var handlers = {};
+
+    function resolveKeyEvent(evt) {
+        var slot = handlers;
+        if (evt.ctrlKey || evt.metaKey) {
+            slot = slot.ctrl;
+        }
+        if (slot && evt.shiftKey) {
+            slot = slot.shift;
+        }
+        if (slot && evt.altKey) {
+            slot = slot.alt;
+        }
+        if (slot && slot[evt.keyCode]) {
+            var handler = slot[evt.keyCode];
+            if (handler.scope && handler.scope !== "*") {
+                var target = evt.target;
+                while (target.nodeName !== 'BODY' && target.id !== handler.scope) {
+                    target = target.parentElement;
+                }
+                if (target.nodeName === 'BODY') {
+                    handler = null;
+                }
+            }
+            return handler;
+        }
+    }
+    d3.select(window).on("keydown",function() {
+        var handler = resolveKeyEvent(d3.event);
+        if (handler && handler.ondown) {
+            handler.ondown();
+        }
+    });
+    d3.select(window).on("keyup",function() {
+        var handler = resolveKeyEvent(d3.event);
+        if (handler && handler.onup) {
+            handler.onup();
+        }
+    });
+
+    function addHandler(scope,key,modifiers,ondown,onup) {
+        var mod = modifiers;
+        var cbdown = ondown;
+        var cbup = onup;
+        if (typeof modifiers == "function") {
+            mod = {};
+            cbdown = modifiers;
+            cbup = ondown;
+        }
+        var slot = handlers;
+        if (mod.ctrl) {
+            slot.ctrl = slot.ctrl||{};
+            slot = slot.ctrl;
+        }
+        if (mod.shift) {
+            slot.shift = slot.shift||{};
+            slot = slot.shift;
+        }
+        if (mod.alt) {
+            slot.alt = slot.alt||{};
+            slot = slot.alt;
+        }
+        slot[key] = {scope: scope, ondown:cbdown, onup:cbup};
+    }
+
+    function removeHandler(key,modifiers) {
+        var mod = modifiers || {};
+        var slot = handlers;
+        if (mod.ctrl) {
+            slot = slot.ctrl;
+        }
+        if (slot && mod.shift) {
+            slot = slot.shift;
+        }
+        if (slot && mod.alt) {
+            slot = slot.alt;
+        }
+        if (slot) {
+            delete slot[key];
+        }
+    }
+
+    var dialog = null;
+
+    function showKeyboardHelp() {
+        if (!RED.settings.theme("menu.menu-item-keyboard-shortcuts",true)) {
+            return;
+        }
+        if (!dialog) {
+            dialog = $('<div id="keyboard-help-dialog" class="hide">'+
+                '<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
+                    '<table class="keyboard-shortcuts">'+
+                        '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">a</span></td><td>'+RED._("keyboard.selectAll")+'</td></tr>'+
+                        '<tr><td><span class="help-key">Shift</span> + <span class="help-key">Click</span></td><td>'+RED._("keyboard.selectAllConnected")+'</td></tr>'+
+                        '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">Click</span></td><td>'+RED._("keyboard.addRemoveNode")+'</td></tr>'+
+                        '<tr><td>&nbsp;</td><td></td></tr>'+
+                        '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">i</span></td><td>'+RED._("keyboard.importNode")+'</td></tr>'+
+                        '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">e</span></td><td>'+RED._("keyboard.exportNode")+'</td></tr>'+
+                    '</table>'+
+                '</div>'+
+                '<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
+                    '<table class="keyboard-shortcuts">'+
+                        '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">Space</span></td><td>'+RED._("keyboard.toggleSidebar")+'</td></tr>'+
+                        '<tr><td></td><td></td></tr>'+
+                        '<tr><td><span class="help-key">Delete</span></td><td>'+RED._("keyboard.deleteNode")+'</td></tr>'+
+                        '<tr><td></td><td></td></tr>'+
+                        '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">c</span></td><td>'+RED._("keyboard.copyNode")+'</td></tr>'+
+                        '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">x</span></td><td>'+RED._("keyboard.cutNode")+'</td></tr>'+
+                        '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">v</span></td><td>'+RED._("keyboard.pasteNode")+'</td></tr>'+
+                    '</table>'+
+                '</div>'+
+                '</div>')
+            .appendTo("body")
+            .dialog({
+                modal: true,
+                autoOpen: false,
+                width: "800",
+                title:"Keyboard shortcuts",
+                resizable: false
+            });
+        }
+
+        dialog.dialog("open");
+    }
+
+    return {
+        add: addHandler,
+        remove: removeHandler,
+        showHelp: showKeyboardHelp
+    }
+
+})();

editor/js/ui/library.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013, 2015 IBM Corp.
+ * Copyright 2013, 2016 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,8 +14,10 @@
  * limitations under the License.
  **/
 RED.library = (function() {
-    
-    
+
+
+    var exportToLibraryDialog;
+
     function loadFlowLibrary() {
         $.getJSON("library/flows",function(data) {
             //console.log(data);
@@ -25,7 +27,9 @@ RED.library = (function() {
                 var li;
                 var a;
                 var ul = document.createElement("ul");
-                ul.id = "btn-import-library-submenu";
+                if (root === "") {
+                    ul.id = "menu-item-import-library-submenu";
+                }
                 ul.className = "dropdown-menu";
                 if (data.d) {
                     for (i in data.d) {
@@ -34,7 +38,8 @@ RED.library = (function() {
                             li.className = "dropdown-submenu pull-left";
                             a = document.createElement("a");
                             a.href="#";
-                            a.innerHTML = i;
+                            var label = i.replace(/^node-red-contrib-/,"").replace(/^node-red-node-/,"").replace(/-/," ").replace(/_/," ");
+                            a.innerHTML = label;
                             li.appendChild(a);
                             li.appendChild(buildMenu(data.d[i],root+(root!==""?"/":"")+i));
                             ul.appendChild(li);
@@ -51,7 +56,7 @@ RED.library = (function() {
                             a.flowName = root+(root!==""?"/":"")+data.f[i];
                             a.onclick = function() {
                                 $.get('library/flows/'+this.flowName, function(data) {
-                                        RED.view.importNodes(data);
+                                    RED.view.importNodes(data);
                                 });
                             };
                             li.appendChild(a);
@@ -61,17 +66,27 @@ RED.library = (function() {
                 }
                 return ul;
             };
+            var examples;
+            if (data.d && data.d._examples_) {
+                examples = data.d._examples_;
+                delete data.d._examples_;
+            }
             var menu = buildMenu(data,"");
+            $("#menu-item-import-examples").remove();
+            if (examples) {
+                RED.menu.addItem("menu-item-import",{id:"menu-item-import-examples",label:RED._("menu.label.examples"),options:[]})
+                $("#menu-item-import-examples-submenu").replaceWith(buildMenu(examples,"_examples_"));
+            }
             //TODO: need an api in RED.menu for this
-            $("#btn-import-library-submenu").replaceWith(menu);
+            $("#menu-item-import-library-submenu").replaceWith(menu);
         });
     }
-    
+
     function createUI(options) {
         var libraryData = {};
         var selectedLibraryItem = null;
         var libraryEditor = null;
-        
+
         // Orion editor has set/getText
         // ACE editor has set/getValue
         // normalise to set/getValue
@@ -84,14 +99,14 @@ RED.library = (function() {
         if (options.editor.getText) {
             options.editor.getValue = options.editor.getText;
         }
-        
+
         function buildFileListItem(item) {
             var li = document.createElement("li");
             li.onmouseover = function(e) { $(this).addClass("list-hover"); };
             li.onmouseout = function(e) { $(this).removeClass("list-hover"); };
             return li;
         }
-        
+
         function buildFileList(root,data) {
             var ul = document.createElement("ul");
             var li;
@@ -104,7 +119,7 @@ RED.library = (function() {
                         var dirName = v;
                         return function(e) {
                             var bcli = $('<li class="active"><span class="divider">/</span> <a href="#">'+dirName+'</a></li>');
-                            $("a",bcli).click(function(e) { 
+                            $("a",bcli).click(function(e) {
                                 $(this).parent().nextAll().remove();
                                 $.getJSON("library/"+options.url+root+dirName,function(data) {
                                     $("#node-select-library").children().first().replaceWith(buildFileList(root+dirName+"/",data));
@@ -115,7 +130,7 @@ RED.library = (function() {
                             $(".active",bc).removeClass("active");
                             bc.append(bcli);
                             $.getJSON("library/"+options.url+root+dirName,function(data) {
-                                    $("#node-select-library").children().first().replaceWith(buildFileList(root+dirName+"/",data));
+                                $("#node-select-library").children().first().replaceWith(buildFileList(root+dirName+"/",data));
                             });
                         }
                     })();
@@ -123,42 +138,42 @@ RED.library = (function() {
                     ul.appendChild(li);
                 } else {
                     // file
-                   li = buildFileListItem(v);
-                   li.innerHTML = v.name;
-                   li.onclick = (function() {
-                       var item = v;
-                       return function(e) {
-                           $(".list-selected",ul).removeClass("list-selected");
-                           $(this).addClass("list-selected");
-                           $.get("library/"+options.url+root+item.fn, function(data) {
-                                   selectedLibraryItem = item;
-                                   libraryEditor.setValue(data,-1);
-                           });
-                       }
-                   })();
-                   ul.appendChild(li);
+                    li = buildFileListItem(v);
+                    li.innerHTML = v.name;
+                    li.onclick = (function() {
+                        var item = v;
+                        return function(e) {
+                            $(".list-selected",ul).removeClass("list-selected");
+                            $(this).addClass("list-selected");
+                            $.get("library/"+options.url+root+item.fn, function(data) {
+                                selectedLibraryItem = item;
+                                libraryEditor.setValue(data,-1);
+                            });
+                        }
+                    })();
+                    ul.appendChild(li);
                 }
             }
             return ul;
         }
-    
-        $('#node-input-name').addClass('input-append-left').css("width","65%").after(
-            '<div class="btn-group" style="margin-left: 0px;">'+
-            '<button id="node-input-'+options.type+'-lookup" class="btn input-append-right" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></button>'+
+
+        $('#node-input-name').css("width","60%").after(
+            '<div class="btn-group" style="margin-left: 5px;">'+
+            '<a id="node-input-'+options.type+'-lookup" class="editor-button" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
             '<ul class="dropdown-menu pull-right" role="menu">'+
-            '<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">Open Library...</a></li>'+
-            '<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">Save to Library...</a></li>'+
+            '<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">'+RED._("library.openLibrary")+'</a></li>'+
+            '<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">'+RED._("library.saveToLibrary")+'</a></li>'+
             '</ul></div>'
         );
-    
-        
-        
+
+
+
         $('#node-input-'+options.type+'-menu-open-library').click(function(e) {
             $("#node-select-library").children().remove();
             var bc = $("#node-dialog-library-breadcrumbs");
             bc.children().first().nextAll().remove();
             libraryEditor.setValue('',-1);
-            
+
             $.getJSON("library/"+options.url,function(data) {
                 $("#node-select-library").append(buildFileList("/",data));
                 $("#node-dialog-library-breadcrumbs a").click(function(e) {
@@ -168,10 +183,10 @@ RED.library = (function() {
                 });
                 $( "#node-dialog-library-lookup" ).dialog( "open" );
             });
-            
+
             e.preventDefault();
         });
-    
+
         $('#node-input-'+options.type+'-menu-save-library').click(function(e) {
             //var found = false;
             var name = $("#node-input-name").val().replace(/(^\s*)|(\s*$)/g,"");
@@ -217,7 +232,7 @@ RED.library = (function() {
             $( "#node-dialog-library-save" ).dialog( "open" );
             e.preventDefault();
         });
-    
+
         libraryEditor = ace.edit('node-select-library-text');
         libraryEditor.setTheme("ace/theme/tomorrow");
         if (options.mode) {
@@ -230,16 +245,23 @@ RED.library = (function() {
         });
         libraryEditor.renderer.$cursorLayer.element.style.opacity=0;
         libraryEditor.$blockScrolling = Infinity;
-        
+
         $( "#node-dialog-library-lookup" ).dialog({
-            title: options.type+" library",
+            title: RED._("library.typeLibrary", {type:options.type}),
             modal: true,
             autoOpen: false,
             width: 800,
             height: 450,
             buttons: [
                 {
-                    text: "Ok",
+                    text: RED._("common.label.cancel"),
+                    click: function() {
+                        $( this ).dialog( "close" );
+                    }
+                },
+                {
+                    text: RED._("common.label.load"),
+                    class: "primary",
                     click: function() {
                         if (selectedLibraryItem) {
                             for (var i=0;i<options.fields.length;i++) {
@@ -250,12 +272,6 @@ RED.library = (function() {
                         }
                         $( this ).dialog( "close" );
                     }
-                },
-                {
-                    text: "Cancel",
-                    click: function() {
-                        $( this ).dialog( "close" );
-                    }
                 }
             ],
             open: function(e) {
@@ -270,16 +286,16 @@ RED.library = (function() {
                 $(".form-row:last-child",form).children().height(form.height()-60);
             }
         });
-        
+
         function saveToLibrary(overwrite) {
             var name = $("#node-input-name").val().replace(/(^\s*)|(\s*$)/g,"");
             if (name === "") {
-                name = "Unnamed "+options.type;
+                name = RED._("library.unnamedType",{type:options.type});
             }
             var filename = $("#node-dialog-library-save-filename").val().replace(/(^\s*)|(\s*$)/g,"");
             var pathname = $("#node-dialog-library-save-folder").val().replace(/(^\s*)|(\s*$)/g,"");
             if (filename === "" || !/.+\.js$/.test(filename)) {
-                RED.notify("Invalid filename","warning");
+                RED.notify(RED._("library.invalidFilename"),"warning");
                 return;
             }
             var fullpath = pathname+(pathname===""?"":"/")+filename;
@@ -304,8 +320,7 @@ RED.library = (function() {
                 //    }
                 //}
                 //if (exists) {
-                //    $("#node-dialog-library-save-type").html(options.type);
-                //    $("#node-dialog-library-save-name").html(fullpath);
+                //    $("#node-dialog-library-save-content").html(RED._("library.dialogSaveOverwrite",{libraryType:options.type,libraryName:fullpath}));
                 //    $("#node-dialog-library-save-confirm").dialog( "open" );
                 //    return;
                 //}
@@ -320,7 +335,7 @@ RED.library = (function() {
                     data[field] = $("#node-input-"+field).val();
                 }
             }
-            
+
             data.text = options.editor.getValue();
             $.ajax({
                 url:"library/"+options.url+'/'+fullpath,
@@ -328,50 +343,56 @@ RED.library = (function() {
                 data: JSON.stringify(data),
                 contentType: "application/json; charset=utf-8"
             }).done(function(data,textStatus,xhr) {
-                RED.notify("Saved "+options.type,"success");
+                RED.notify(RED._("library.savedType", {type:options.type}),"success");
             }).fail(function(xhr,textStatus,err) {
-                RED.notify("Saved failed: "+xhr.responseJSON.message,"error");
+                if (xhr.status === 401) {
+                    RED.notify(RED._("library.saveFailed",{message:RED._("user.notAuthorized")}),"error");
+                } else {
+                    RED.notify(RED._("library.saveFailed",{message:xhr.responseText}),"error");
+                }
             });
         }
         $( "#node-dialog-library-save-confirm" ).dialog({
-            title: "Save to library",
+            title: RED._("library.saveToLibrary"),
             modal: true,
             autoOpen: false,
             width: 530,
             height: 230,
             buttons: [
                 {
-                    text: "Ok",
+                    text: RED._("common.label.cancel"),
                     click: function() {
-                        saveToLibrary(true);
                         $( this ).dialog( "close" );
                     }
                 },
                 {
-                    text: "Cancel",
+                    text: RED._("common.label.save"),
+                    class: "primary",
                     click: function() {
+                        saveToLibrary(true);
                         $( this ).dialog( "close" );
                     }
                 }
             ]
         });
         $( "#node-dialog-library-save" ).dialog({
-            title: "Save to library",
+            title: RED._("library.saveToLibrary"),
             modal: true,
             autoOpen: false,
             width: 530,
             height: 230,
             buttons: [
                 {
-                    text: "Ok",
+                    text: RED._("common.label.cancel"),
                     click: function() {
-                        saveToLibrary(false);
                         $( this ).dialog( "close" );
                     }
                 },
                 {
-                    text: "Cancel",
+                    text: RED._("common.label.save"),
+                    class: "primary",
                     click: function() {
+                        saveToLibrary(false);
                         $( this ).dialog( "close" );
                     }
                 }
@@ -379,36 +400,93 @@ RED.library = (function() {
         });
 
     }
-    
+
     function exportFlow() {
         //TODO: don't rely on the main dialog
         var nns = RED.nodes.createExportableNodeSet(RED.view.selection().nodes);
-        $("#dialog-form").html($("script[data-template-name='export-library-dialog']").html());
-        $("#node-input-filename").attr('nodes',JSON.stringify(nns));
-        $( "#dialog" ).dialog("option","title","Export nodes to library").dialog( "open" );
+        $("#node-input-library-filename").attr('nodes',JSON.stringify(nns));
+        exportToLibraryDialog.dialog( "open" );
     }
-    
+
     return {
         init: function() {
-            RED.view.on("selection-changed",function(selection) {
+            RED.events.on("view:selection-changed",function(selection) {
                 if (!selection.nodes) {
-                    RED.menu.setDisabled("btn-export-menu",true);
-                    RED.menu.setDisabled("btn-export-clipboard",true);
-                    RED.menu.setDisabled("btn-export-library",true);
+                    RED.menu.setDisabled("menu-item-export",true);
+                    RED.menu.setDisabled("menu-item-export-clipboard",true);
+                    RED.menu.setDisabled("menu-item-export-library",true);
                 } else {
-                    RED.menu.setDisabled("btn-export-menu",false);
-                    RED.menu.setDisabled("btn-export-clipboard",false);
-                    RED.menu.setDisabled("btn-export-library",false);
+                    RED.menu.setDisabled("menu-item-export",false);
+                    RED.menu.setDisabled("menu-item-export-clipboard",false);
+                    RED.menu.setDisabled("menu-item-export-library",false);
                 }
             });
-            
-            loadFlowLibrary();
+
+            if (RED.settings.theme("menu.menu-item-import-library") !== false) {
+                loadFlowLibrary();
+            }
+
+            exportToLibraryDialog = $('<div id="library-dialog" class="hide"><form class="dialog-form form-horizontal"></form></div>')
+                .appendTo("body")
+                .dialog({
+                    modal: true,
+                    autoOpen: false,
+                    width: 500,
+                    resizable: false,
+                    title: RED._("library.exportToLibrary"),
+                    buttons: [
+                        {
+                            id: "library-dialog-cancel",
+                            text: RED._("common.label.cancel"),
+                            click: function() {
+                                $( this ).dialog( "close" );
+                            }
+                        },
+                        {
+                            id: "library-dialog-ok",
+                            class: "primary",
+                            text: RED._("common.label.export"),
+                            click: function() {
+                                //TODO: move this to RED.library
+                                var flowName = $("#node-input-library-filename").val();
+                                if (!/^\s*$/.test(flowName)) {
+                                    $.ajax({
+                                        url:'library/flows/'+flowName,
+                                        type: "POST",
+                                        data: $("#node-input-library-filename").attr('nodes'),
+                                        contentType: "application/json; charset=utf-8"
+                                    }).done(function() {
+                                        RED.library.loadFlowLibrary();
+                                        RED.notify(RED._("library.savedNodes"),"success");
+                                    }).fail(function(xhr,textStatus,err) {
+                                        if (xhr.status === 401) {
+                                            RED.notify(RED._("library.saveFailed",{message:RED._("user.notAuthorized")}),"error");
+                                        } else {
+                                            RED.notify(RED._("library.saveFailed",{message:xhr.responseText}),"error");
+                                        }
+                                    });
+                                }
+                                $( this ).dialog( "close" );
+                            }
+                        }
+                    ],
+                    open: function(e) {
+                        $(this).parent().find(".ui-dialog-titlebar-close").hide();
+                    },
+                    close: function(e) {
+                    }
+                });
+            exportToLibraryDialog.children(".dialog-form").append($(
+                '<div class="form-row">'+
+                '<label for="node-input-library-filename" data-i18n="[append]editor:library.filename"><i class="fa fa-file"></i> </label>'+
+                '<input type="text" id="node-input-library-filename" data-i18n="[placeholder]editor:library.fullFilenamePlaceholder">'+
+                '<input type="text" style="display: none;" />'+ // Second hidden input to prevent submit on Enter
+                '</div>'
+            ));
         },
         create: createUI,
         loadFlowLibrary: loadFlowLibrary,
-        
+
         export: exportFlow
     }
 })();
-
-

editor/js/ui/menu.js

@@ -23,7 +23,14 @@ RED.menu = (function() {
     function createMenuItem(opt) {
         var item;
 
-        function setState() {
+        if (opt !== null && opt.id) {
+            var themeSetting = RED.settings.theme("menu."+opt.id);
+            if (themeSetting === false) {
+                return null;
+            }
+        }
+
+        function setInitialState() {
             var savedStateActive = isSavedStateActive(opt.id);
             if (savedStateActive) {
                 link.addClass("active");
@@ -45,12 +52,16 @@ RED.menu = (function() {
             item = $('<li class="divider"></li>');
         } else {
             item = $('<li></li>');
-            
+
+            if (opt.group) {
+                item.addClass("menu-group-"+opt.group);
+
+            }
             var linkContent = '<a '+(opt.id?'id="'+opt.id+'" ':'')+'tabindex="-1" href="#">';
             if (opt.toggle) {
                 linkContent += '<i class="fa fa-square pull-left"></i>';
                 linkContent += '<i class="fa fa-check-square pull-left"></i>';
-                
+
             }
             if (opt.icon !== undefined) {
                 if (/\.png/.test(opt.icon)) {
@@ -59,16 +70,16 @@ RED.menu = (function() {
                     linkContent += '<i class="'+(opt.icon?opt.icon:'" style="display: inline-block;"')+'"></i> ';
                 }
             }
-            
+
             if (opt.sublabel) {
                 linkContent += '<span class="menu-label-container"><span class="menu-label">'+opt.label+'</span>'+
                                '<span class="menu-sublabel">'+opt.sublabel+'</span></span>'
             } else {
                 linkContent += '<span class="menu-label">'+opt.label+'</span>'
             }
-            
+
             linkContent += '</a>';
-                
+
             var link = $(linkContent).appendTo(item);
 
             menuItems[opt.id] = opt;
@@ -99,7 +110,7 @@ RED.menu = (function() {
                         opt.onselect.call(opt);
                     }
                 });
-                setState();
+                setInitialState();
             } else if (opt.href) {
                 link.attr("target","_blank").attr("href",opt.href);
             } else if (!opt.options) {
@@ -113,23 +124,15 @@ RED.menu = (function() {
                 var submenu = $('<ul id="'+opt.id+'-submenu" class="dropdown-menu"></ul>').appendTo(item);
 
                 for (var i=0;i<opt.options.length;i++) {
-                    createMenuItem(opt.options[i]).appendTo(submenu);
+                    var li = createMenuItem(opt.options[i]);
+                    if (li) {
+                        li.appendTo(submenu);
+                    }
                 }
             }
             if (opt.disabled) {
                 item.addClass("disabled");
             }
-            if (opt.tip) {
-                item.popover({
-                    placement:"left",
-                    trigger: "hover",
-                    delay: { show: 350, hide: 20 },
-                    html: true,
-                    container:'body',
-                    content: opt.tip
-                });
-            }
-            
         }
 
 
@@ -144,13 +147,20 @@ RED.menu = (function() {
         //    $("#"+options.id+"-submenu").show();
         //    event.preventDefault();
         //});
-        
-        
+
+
         var topMenu = $("<ul/>",{id:options.id+"-submenu", class:"dropdown-menu pull-right"}).insertAfter(button);
 
+        var lastAddedSeparator = false;
         for (var i=0;i<options.options.length;i++) {
             var opt = options.options[i];
-            createMenuItem(opt).appendTo(topMenu);
+            if (opt !== null || !lastAddedSeparator) {
+                var li = createMenuItem(opt);
+                if (li) {
+                    li.appendTo(topMenu);
+                    lastAddedSeparator = (opt === null);
+                }
+            }
         }
     }
 
@@ -176,7 +186,7 @@ RED.menu = (function() {
         } else {
             $("#"+id).removeClass("active");
         }
-        if (opt.onselect) {
+        if (opt && opt.onselect) {
             opt.onselect.call(opt,state);
         }
         setSavedState(id, state);
@@ -191,24 +201,47 @@ RED.menu = (function() {
     }
 
     function addItem(id,opt) {
-        createMenuItem(opt).appendTo("#"+id+"-submenu");
+        var item = createMenuItem(opt);
+        if (opt.group) {
+            var groupItems = $("#"+id+"-submenu").children(".menu-group-"+opt.group);
+            if (groupItems.length === 0) {
+                item.appendTo("#"+id+"-submenu");
+            } else {
+                for (var i=0;i<groupItems.length;i++) {
+                    var groupItem = groupItems[i];
+                    var label = $(groupItem).find(".menu-label").html();
+                    if (opt.label < label) {
+                        $(groupItem).before(item);
+                        break;
+                    }
+                }
+                if (i === groupItems.length) {
+                    item.appendTo("#"+id+"-submenu");
+                }
+            }
+        } else {
+            item.appendTo("#"+id+"-submenu");
+        }
     }
     function removeItem(id) {
         $("#"+id).parent().remove();
     }
 
     function setAction(id,action) {
-        menuItems[id].onselect = action;
-        $("#"+id).click(function() {
-            if ($(this).parent().hasClass("disabled")) {
-                return;
-            }
-            if (menuItems[id].toggle) {
-                setSelected(id,!isSelected(id));
-            } else {
-                menuItems[id].onselect.call(menuItems[id]);
-            }
-        });
+        var opt = menuItems[id];
+        if (opt) {
+            opt.onselect = action;
+            $("#"+id).click(function() {
+                if ($(this).parent().hasClass("disabled")) {
+                    return;
+                }
+                if (menuItems[id].toggle) {
+                    setSelected(id,!isSelected(id));
+                } else {
+                    menuItems[id].onselect.call(menuItems[id]);
+                }
+            });
+        }
     }
 
     return {

editor/js/ui/notifications.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013 IBM Corp.
+ * Copyright 2013, 2016 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,10 +30,10 @@ RED.notify = (function() {
         }
         var n = document.createElement("div");
         n.id="red-notification-"+c;
-        n.className = "alert";
+        n.className = "notification";
         n.fixed = fixed;
         if (type) {
-            n.className = "alert alert-"+type;
+            n.className = "notification notification-"+type;
         }
         n.style.display = "none";
         n.innerHTML = msg;
@@ -44,11 +44,26 @@ RED.notify = (function() {
             return function() {
                 currentNotifications.splice(currentNotifications.indexOf(nn),1);
                 $(nn).slideUp(300, function() {
-                        nn.parentNode.removeChild(nn);
+                    nn.parentNode.removeChild(nn);
                 });
             };
         })();
+
+        n.update = (function() {
+            var nn = n;
+            return function(msg) {
+                nn.innerHTML = msg;
+            }
+        })();
+        
         if (!fixed) {
+            $(n).click((function() {
+                var nn = n;
+                return function() {
+                    nn.close();
+                    window.clearTimeout(nn.timeoutid);
+                };
+            })());
             n.timeoutid = window.setTimeout(n.close,timeout||3000);
         }
         currentNotifications.push(n);
@@ -56,4 +71,3 @@ RED.notify = (function() {
         return n;
     }
 })();
-

editor/js/ui/palette.js

@@ -0,0 +1,451 @@
+/**
+ * Copyright 2013, 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+RED.palette = (function() {
+
+    var exclusion = ['config','unknown','deprecated'];
+    var core = ['subflows', 'input', 'output', 'function', 'social', 'mobile', 'storage', 'analysis', 'advanced'];
+
+    var categoryContainers = {};
+
+    function createCategoryContainer(category, label){
+        label = label || category.replace("_", " ");
+        var catDiv = $('<div id="palette-container-'+category+'" class="palette-category palette-close hide">'+
+            '<div id="palette-header-'+category+'" class="palette-header"><i class="expanded fa fa-angle-down"></i><span>'+label+'</span></div>'+
+            '<div class="palette-content" id="palette-base-category-'+category+'">'+
+            '<div id="palette-'+category+'-input"></div>'+
+            '<div id="palette-'+category+'-output"></div>'+
+            '<div id="palette-'+category+'-function"></div>'+
+            '</div>'+
+            '</div>').appendTo("#palette-container");
+
+        categoryContainers[category] = {
+            container: catDiv,
+            close: function() {
+                catDiv.removeClass("palette-open");
+                catDiv.addClass("palette-closed");
+                $("#palette-base-category-"+category).slideUp();
+                $("#palette-header-"+category+" i").removeClass("expanded");
+            },
+            open: function() {
+                catDiv.addClass("palette-open");
+                catDiv.removeClass("palette-closed");
+                $("#palette-base-category-"+category).slideDown();
+                $("#palette-header-"+category+" i").addClass("expanded");
+            },
+            toggle: function() {
+                if (catDiv.hasClass("palette-open")) {
+                    categoryContainers[category].close();
+                } else {
+                    categoryContainers[category].open();
+                }
+            }
+        };
+
+        $("#palette-header-"+category).on('click', function(e) {
+            categoryContainers[category].toggle();
+        });
+    }
+
+    function setLabel(type, el,label, info) {
+        var nodeWidth = 82;
+        var nodeHeight = 25;
+        var lineHeight = 20;
+        var portHeight = 10;
+
+        var words = label.split(/[ -]/);
+
+        var displayLines = [];
+
+        var currentLine = words[0];
+        var currentLineWidth = RED.view.calculateTextWidth(currentLine, "palette_label", 0);
+
+        for (var i=1;i<words.length;i++) {
+            var newWidth = RED.view.calculateTextWidth(currentLine+" "+words[i], "palette_label", 0);
+            if (newWidth < nodeWidth) {
+                currentLine += " "+words[i];
+                currentLineWidth = newWidth;
+            } else {
+                displayLines.push(currentLine);
+                currentLine = words[i];
+                currentLineWidth = RED.view.calculateTextWidth(currentLine, "palette_label", 0);
+            }
+        }
+        displayLines.push(currentLine);
+
+        var lines = displayLines.join("<br/>");
+        var multiLineNodeHeight = 8+(lineHeight*displayLines.length);
+        el.css({height:multiLineNodeHeight+"px"});
+
+        var labelElement = el.find(".palette_label");
+        labelElement.html(lines);
+
+        el.find(".palette_port").css({top:(multiLineNodeHeight/2-5)+"px"});
+
+        var popOverContent;
+        try {
+            var l = "<p><b>"+label+"</b></p>";
+            if (label != type) {
+                l = "<p><b>"+label+"</b><br/><i>"+type+"</i></p>";
+            }
+            popOverContent = $(l+(info?info:$("script[data-help-name|='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
+                                .filter(function(n) {
+                                    return (this.nodeType == 1 && this.nodeName == "P") || (this.nodeType == 3 && this.textContent.trim().length > 0)
+                                }).slice(0,2);
+        } catch(err) {
+            // Malformed HTML may cause errors. TODO: need to understand what can break
+            // NON-NLS: internal debug
+            console.log("Error generating pop-over label for ",type);
+            console.log(err.toString());
+            popOverContent = "<p><b>"+label+"</b></p><p>"+RED._("palette.noInfo")+"</p>";
+        }
+
+        el.data('popover').setContent(popOverContent);
+    }
+
+    function escapeNodeType(nt) {
+        return nt.replace(" ","_").replace(".","_").replace(":","_");
+    }
+
+    function addNodeType(nt,def) {
+        var nodeTypeId = escapeNodeType(nt);
+        if ($("#palette_node_"+nodeTypeId).length) {
+            return;
+        }
+        if (exclusion.indexOf(def.category)===-1) {
+
+            var category = def.category.replace(" ","_");
+            var rootCategory = category.split("-")[0];
+
+            var d = document.createElement("div");
+            d.id = "palette_node_"+nodeTypeId;
+            d.type = nt;
+
+            var label = /^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1];
+            if (typeof def.paletteLabel !== "undefined") {
+                try {
+                    label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||"";
+                } catch(err) {
+                    console.log("Definition error: "+nt+".paletteLabel",err);
+                }
+            }
+
+            $('<div/>',{class:"palette_label"+(def.align=="right"?" palette_label_right":"")}).appendTo(d);
+
+            d.className="palette_node";
+
+
+            if (def.icon) {
+                var icon_url = "arrow-in.png";
+                try {
+                    icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
+                } catch(err) {
+                    console.log("Definition error: "+nt+".icon",err);
+                }
+                var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
+                $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer);
+            }
+
+            d.style.backgroundColor = def.color;
+
+            if (def.outputs > 0) {
+                var portOut = document.createElement("div");
+                portOut.className = "palette_port palette_port_output";
+                d.appendChild(portOut);
+            }
+
+            if (def.inputs > 0) {
+                var portIn = document.createElement("div");
+                portIn.className = "palette_port palette_port_input";
+                d.appendChild(portIn);
+            }
+
+            if ($("#palette-base-category-"+rootCategory).length === 0) {
+                if(core.indexOf(rootCategory) !== -1){
+                    createCategoryContainer(rootCategory, RED._("node-red:palette.label."+rootCategory, {defaultValue:rootCategory}));
+                } else {
+                    var ns = def.set.id;
+                    createCategoryContainer(rootCategory, RED._(ns+":palette.label."+rootCategory, {defaultValue:rootCategory}));
+                }
+            }
+            $("#palette-container-"+rootCategory).show();
+
+            if ($("#palette-"+category).length === 0) {
+                $("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
+            }
+
+            $("#palette-"+category).append(d);
+            d.onmousedown = function(e) { e.preventDefault(); };
+
+            RED.popover.create({
+                target:$(d),
+                content: "hi",
+                delay: { show: 750, hide: 50 }
+            });
+
+            // $(d).popover({
+            //     title:d.type,
+            //     placement:"right",
+            //     trigger: "hover",
+            //     delay: { show: 750, hide: 50 },
+            //     html: true,
+            //     container:'body'
+            // });
+            $(d).click(function() {
+                RED.view.focus();
+                var helpText;
+                if (nt.indexOf("subflow:") === 0) {
+                    helpText = marked(RED.nodes.subflow(nt.substring(8)).info||"");
+                } else {
+                    helpText = $("script[data-help-name|='"+d.type+"']").html()||"";
+                }
+                var help = '<div class="node-help">'+helpText+"</div>";
+                RED.sidebar.info.set(help);
+            });
+            var chart = $("#chart");
+            var chartOffset = chart.offset();
+            var chartSVG = $("#chart>svg").get(0);
+            var activeSpliceLink;
+            var mouseX;
+            var mouseY;
+            var spliceTimer;
+            $(d).draggable({
+                helper: 'clone',
+                appendTo: 'body',
+                revert: true,
+                revertDuration: 50,
+                start: function() {RED.view.focus();},
+                stop: function() { d3.select('.link_splice').classed('link_splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}},
+                drag: function(e,ui) {
+                    // TODO: this is the margin-left of palette node. Hard coding
+                    // it here makes me sad
+                    //console.log(ui.helper.position());
+                    ui.position.left += 17.5;
+                    if (def.inputs > 0 && def.outputs > 0) {
+                        mouseX = ui.position.left+(ui.helper.width()/2) - chartOffset.left + chart.scrollLeft();
+                        mouseY = ui.position.top+(ui.helper.height()/2) - chartOffset.top + chart.scrollTop();
+
+
+                        if (!spliceTimer) {
+                            spliceTimer = setTimeout(function() {
+                                var nodes = [];
+                                var bestDistance = Infinity;
+                                var bestLink = null;
+                                if (chartSVG.getIntersectionList) {
+                                    var svgRect = chartSVG.createSVGRect();
+                                    svgRect.x = mouseX;
+                                    svgRect.y = mouseY;
+                                    svgRect.width = 1;
+                                    svgRect.height = 1;
+                                    nodes = chartSVG.getIntersectionList(svgRect,chartSVG);
+                                    mouseX /= RED.view.scale();
+                                    mouseY /= RED.view.scale();
+                                } else {
+                                    // Firefox doesn't do getIntersectionList and that
+                                    // makes us sad
+                                    mouseX /= RED.view.scale();
+                                    mouseY /= RED.view.scale();
+                                    nodes = RED.view.getLinksAtPoint(mouseX,mouseY);
+                                }
+                                for (var i=0;i<nodes.length;i++) {
+                                    if (d3.select(nodes[i]).classed('link_background')) {
+                                        var length = nodes[i].getTotalLength();
+                                        for (var j=0;j<length;j+=10) {
+                                            var p = nodes[i].getPointAtLength(j);
+                                            var d2 = ((p.x-mouseX)*(p.x-mouseX))+((p.y-mouseY)*(p.y-mouseY));
+                                            if (d2 < 200 && d2 < bestDistance) {
+                                                bestDistance = d2;
+                                                bestLink = nodes[i];
+                                            }
+                                        }
+                                    }
+                                }
+                                if (activeSpliceLink && activeSpliceLink !== bestLink) {
+                                    d3.select(activeSpliceLink.parentNode).classed('link_splice',false);
+                                }
+                                if (bestLink) {
+                                    d3.select(bestLink.parentNode).classed('link_splice',true)
+                                } else {
+                                    d3.select('.link_splice').classed('link_splice',false);
+                                }
+                                if (activeSpliceLink !== bestLink) {
+                                    if (bestLink) {
+                                        $(ui.helper).data('splice',d3.select(bestLink).data()[0]);
+                                    } else {
+                                        $(ui.helper).removeData('splice');
+                                    }
+                                }
+                                activeSpliceLink = bestLink;
+                                spliceTimer = null;
+                            },200);
+                        }
+                    }
+                }
+            });
+
+            var nodeInfo = null;
+            if (def.category == "subflows") {
+                $(d).dblclick(function(e) {
+                    RED.workspaces.show(nt.substring(8));
+                    e.preventDefault();
+                });
+                nodeInfo = marked(def.info||"");
+            }
+            setLabel(nt,$(d),label,nodeInfo);
+
+            var categoryNode = $("#palette-container-"+category);
+            if (categoryNode.find(".palette_node").length === 1) {
+                categoryContainers[category].open();
+            }
+
+        }
+    }
+
+    function removeNodeType(nt) {
+        var nodeTypeId = escapeNodeType(nt);
+        var paletteNode = $("#palette_node_"+nodeTypeId);
+        var categoryNode = paletteNode.closest(".palette-category");
+        paletteNode.remove();
+        if (categoryNode.find(".palette_node").length === 0) {
+            if (categoryNode.find("i").hasClass("expanded")) {
+                categoryNode.find(".palette-content").slideToggle();
+                categoryNode.find("i").toggleClass("expanded");
+            }
+        }
+    }
+    function hideNodeType(nt) {
+        var nodeTypeId = escapeNodeType(nt);
+        $("#palette_node_"+nodeTypeId).hide();
+    }
+
+    function showNodeType(nt) {
+        var nodeTypeId = escapeNodeType(nt);
+        $("#palette_node_"+nodeTypeId).show();
+    }
+
+    function refreshNodeTypes() {
+        RED.nodes.eachSubflow(function(sf) {
+            var paletteNode = $("#palette_node_subflow_"+sf.id.replace(".","_"));
+            var portInput = paletteNode.find(".palette_port_input");
+            var portOutput = paletteNode.find(".palette_port_output");
+
+            if (portInput.length === 0 && sf.in.length > 0) {
+                var portIn = document.createElement("div");
+                portIn.className = "palette_port palette_port_input";
+                paletteNode.append(portIn);
+            } else if (portInput.length !== 0 && sf.in.length === 0) {
+                portInput.remove();
+            }
+
+            if (portOutput.length === 0 && sf.out.length > 0) {
+                var portOut = document.createElement("div");
+                portOut.className = "palette_port palette_port_output";
+                paletteNode.append(portOut);
+            } else if (portOutput.length !== 0 && sf.out.length === 0) {
+                portOutput.remove();
+            }
+            setLabel(sf.type+":"+sf.id,paletteNode,sf.name,marked(sf.info||""));
+        });
+    }
+
+    function filterChange() {
+        var val = $("#palette-search-input").val();
+        if (val === "") {
+            $("#palette-search-clear").hide();
+        } else {
+            $("#palette-search-clear").show();
+        }
+
+        var re = new RegExp(val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),'i');
+        $("#palette-container .palette_node").each(function(i,el) {
+            var currentLabel = $(el).find(".palette_label").text();
+            if (val === "" || re.test(el.id) || re.test(currentLabel)) {
+                $(this).show();
+            } else {
+                $(this).hide();
+            }
+        });
+
+        for (var category in categoryContainers) {
+            if (categoryContainers.hasOwnProperty(category)) {
+                if (categoryContainers[category].container
+                        .find(".palette_node")
+                        .filter(function() { return $(this).css('display') !== 'none'}).length === 0) {
+                    categoryContainers[category].close();
+                } else {
+                    categoryContainers[category].open();
+                }
+            }
+        }
+    }
+
+    function init() {
+        $(".palette-spinner").show();
+        if (RED.settings.paletteCategories) {
+            RED.settings.paletteCategories.forEach(function(category){
+                createCategoryContainer(category, RED._("palette.label."+category,{defaultValue:category}));
+            });
+        } else {
+            core.forEach(function(category){
+                createCategoryContainer(category, RED._("palette.label."+category,{defaultValue:category}));
+            });
+        }
+
+        $("#palette-search-clear").on("click",function(e) {
+            e.preventDefault();
+            $("#palette-search-input").val("");
+            filterChange();
+            $("#palette-search-input").focus();
+        });
+
+        $("#palette-search-input").val("");
+        $("#palette-search-input").on("keyup",function() {
+            filterChange();
+        });
+
+        $("#palette-search-input").on("focus",function() {
+            $("body").one("mousedown",function() {
+                $("#palette-search-input").blur();
+            });
+        });
+
+        $("#palette-collapse-all").on("click", function(e) {
+            e.preventDefault();
+            for (var cat in categoryContainers) {
+                if (categoryContainers.hasOwnProperty(cat)) {
+                    categoryContainers[cat].close();
+                }
+            }
+        });
+        $("#palette-expand-all").on("click", function(e) {
+            e.preventDefault();
+            for (var cat in categoryContainers) {
+                if (categoryContainers.hasOwnProperty(cat)) {
+                    categoryContainers[cat].open();
+                }
+            }
+        });
+    }
+
+    return {
+        init: init,
+        add:addNodeType,
+        remove:removeNodeType,
+        hide:hideNodeType,
+        show:showNodeType,
+        refresh:refreshNodeTypes
+    };
+})();

editor/js/ui/popover.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright 2015 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+RED.popover = (function() {
+
+
+    function createPopover(options) {
+        var target = options.target;
+
+        var content = options.content;
+        var delay = options.delay;
+        var timer = null;
+        var active;
+        var div;
+
+        var openPopup = function() {
+            if (active) {
+                div = $('<div class="red-ui-popover"></div>').html(content).appendTo("body");
+                var targetPos = target.offset();
+                var targetWidth = target.width();
+                var targetHeight = target.height();
+
+                var divHeight = div.height();
+                div.css({top: targetPos.top+targetHeight/2-divHeight/2-10,left:targetPos.left+targetWidth+17});
+
+                div.fadeIn("fast");
+            }
+        }
+        var closePopup = function() {
+            if (!active) {
+                if (div) {
+                    div.fadeOut("fast",function() {
+                        $(this).remove();
+                    });
+                    div = null;
+                }
+            }
+        }
+
+        target.on('mouseenter',function(e) {
+            clearTimeout(timer);
+            active = true;
+            timer = setTimeout(openPopup,delay.show);
+        });
+        target.on('mouseleave', function(e) {
+            if (timer) {
+                clearTimeout(timer);
+            }
+            active = false;
+            setTimeout(closePopup,delay.hide);
+        });
+        var res = {
+            setContent: function(_content) {
+                content = _content;
+            }
+        }
+        target.data('popover',res);
+        return res;
+
+    }
+
+    return {
+        create: createPopover
+    }
+
+})();

editor/js/ui/sidebar.js

@@ -20,25 +20,84 @@ RED.sidebar = (function() {
         id:"sidebar-tabs",
         onchange:function(tab) {
             $("#sidebar-content").children().hide();
-            $("#"+tab.id).show();
+            $("#sidebar-footer").children().hide();
+            if (tab.onchange) {
+                tab.onchange.call(tab);
+            }
+            $(tab.wrapper).show();
+            if (tab.toolbar) {
+                $(tab.toolbar).show();
+            }
         },
         onremove: function(tab) {
-            $("#"+tab.id).remove();
-        }
+            $(tab.wrapper).hide();
+            if (tab.onremove) {
+                tab.onremove.call(tab);
+            }
+        },
+        minimumActiveTabWidth: 110
     });
-    
-    function addTab(title,content,closeable) {
-        $("#sidebar-content").append(content);
-        $(content).hide();
-        sidebar_tabs.addTab({id:"tab-"+title,label:title,closeable:closeable});
-        //content.style.position = "absolute";
-        //$('#sidebar').tabs("refresh");
+
+    var knownTabs = {
+
+    };
+
+    function addTab(title,content,closeable,visible) {
+        var options;
+        if (typeof title === "string") {
+            // TODO: legacy support in case anyone uses this...
+            options = {
+                id: content.id,
+                label: title,
+                name: title,
+                content: content,
+                closeable: closeable,
+                visible: visible
+            }
+        } else if (typeof title === "object") {
+            options = title;
+        }
+
+        options.wrapper = $('<div>',{style:"height:100%"}).appendTo("#sidebar-content")
+        options.wrapper.append(options.content);
+        options.wrapper.hide();
+
+        if (!options.enableOnEdit) {
+            options.shade = $('<div>',{class:"sidebar-shade hide"}).appendTo(options.wrapper);
+        }
+
+        if (options.toolbar) {
+            $("#sidebar-footer").append(options.toolbar);
+            $(options.toolbar).hide();
+        }
+        var id = options.id;
+
+        RED.menu.addItem("menu-item-view-menu",{
+            id:"menu-item-view-menu-"+options.id,
+            label:options.name,
+            onselect:function() {
+                showSidebar(options.id);
+            },
+            group: "sidebar-tabs"
+        });
+
+        knownTabs[options.id] = options;
+
+        if (options.visible !== false) {
+            sidebar_tabs.addTab(knownTabs[options.id]);
+        }
     }
 
-    function removeTab(title) {
-        sidebar_tabs.removeTab("tab-"+title);
+    function removeTab(id) {
+        sidebar_tabs.removeTab(id);
+        $(knownTabs[id].wrapper).remove();
+        if (knownTabs[id].footer) {
+            knownTabs[id].footer.remove();
+        }
+        delete knownTabs[id];
+        RED.menu.removeItem("menu-item-view-menu-"+id);
     }
-    
+
     var sidebarSeparator =  {};
     $("#sidebar-separator").draggable({
             axis: "x",
@@ -50,16 +109,15 @@ RED.sidebar = (function() {
                 sidebarSeparator.chartWidth = $("#workspace").width();
                 sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
 
-
-                if (!RED.menu.isSelected("btn-sidebar")) {
+                if (!RED.menu.isSelected("menu-item-sidebar")) {
                     sidebarSeparator.opening = true;
-                    var newChartRight = 15;
+                    var newChartRight = 7;
                     $("#sidebar").addClass("closing");
                     $("#workspace").css("right",newChartRight);
-                    $("#chart-zoom-controls").css("right",newChartRight+20);
+                    $("#editor-stack").css("right",newChartRight+1);
                     $("#sidebar").width(0);
-                    RED.menu.setSelected("btn-sidebar",true);
-                    eventHandler.emit("resize");
+                    RED.menu.setSelected("menu-item-sidebar",true);
+                    RED.events.emit("sidebar:resize");
                 }
                 sidebarSeparator.width = $("#sidebar").width();
             },
@@ -67,9 +125,9 @@ RED.sidebar = (function() {
                 var d = ui.position.left-sidebarSeparator.start;
                 var newSidebarWidth = sidebarSeparator.width-d;
                 if (sidebarSeparator.opening) {
-                    newSidebarWidth -= 13;
+                    newSidebarWidth -= 3;
                 }
-                
+
                 if (newSidebarWidth > 150) {
                     if (sidebarSeparator.chartWidth+d < 200) {
                         ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
@@ -77,7 +135,7 @@ RED.sidebar = (function() {
                         newSidebarWidth = sidebarSeparator.width-d;
                     }
                 }
-                    
+
                 if (newSidebarWidth < 150) {
                     if (!sidebarSeparator.closing) {
                         $("#sidebar").addClass("closing");
@@ -95,28 +153,28 @@ RED.sidebar = (function() {
 
                 var newChartRight = sidebarSeparator.chartRight-d;
                 $("#workspace").css("right",newChartRight);
-                $("#chart-zoom-controls").css("right",newChartRight+20);
+                $("#editor-stack").css("right",newChartRight+1);
                 $("#sidebar").width(newSidebarWidth);
 
                 sidebar_tabs.resize();
-                eventHandler.emit("resize");
+                RED.events.emit("sidebar:resize");
             },
             stop:function(event,ui) {
                 if (sidebarSeparator.closing) {
                     $("#sidebar").removeClass("closing");
-                    RED.menu.setSelected("btn-sidebar",false);
+                    RED.menu.setSelected("menu-item-sidebar",false);
                     if ($("#sidebar").width() < 180) {
                         $("#sidebar").width(180);
-                        $("#workspace").css("right",208);
-                        $("#chart-zoom-controls").css("right",228);
+                        $("#workspace").css("right",187);
+                        $("#editor-stack").css("right",188);
                     }
                 }
                 $("#sidebar-separator").css("left","auto");
-                $("#sidebar-separator").css("right",($("#sidebar").width()+13)+"px");
-                eventHandler.emit("resize");
+                $("#sidebar-separator").css("right",($("#sidebar").width()+2)+"px");
+                RED.events.emit("sidebar:resize");
             }
     });
-    
+
     function toggleSidebar(state) {
         if (!state) {
             $("#main-container").addClass("sidebar-closed");
@@ -124,44 +182,34 @@ RED.sidebar = (function() {
             $("#main-container").removeClass("sidebar-closed");
             sidebar_tabs.resize();
         }
-        eventHandler.emit("resize");
+        RED.events.emit("sidebar:resize");
     }
-    
+
     function showSidebar(id) {
         if (id) {
-            sidebar_tabs.activateTab("tab-"+id);
-        }
-    }
-    
-    function containsTab(id) {
-        return sidebar_tabs.contains("tab-"+id);
-    }
-    
-    function init () {
-        RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("btn-sidebar",!RED.menu.isSelected("btn-sidebar"));d3.event.preventDefault();});
-        showSidebar();
-        RED.sidebar.info.show();
-    }
-    
-    var eventHandler = (function() {
-        var handlers = {};
-        
-        return {
-            on: function(evt,func) {
-                handlers[evt] = handlers[evt]||[];
-                handlers[evt].push(func);
-            },
-            emit: function(evt,arg) {
-                if (handlers[evt]) {
-                    for (var i=0;i<handlers[evt].length;i++) {
-                        handlers[evt][i](arg);
-                    }
-                    
-                }
+            if (!containsTab(id)) {
+                sidebar_tabs.addTab(knownTabs[id]);
+            }
+            sidebar_tabs.activateTab(id);
+            if (!RED.menu.isSelected("menu-item-sidebar")) {
+                RED.menu.setSelected("menu-item-sidebar",true);
             }
         }
-    })();
-    
+    }
+
+    function containsTab(id) {
+        return sidebar_tabs.contains(id);
+    }
+
+    function init () {
+        RED.keyboard.add("*",/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("menu-item-sidebar",!RED.menu.isSelected("menu-item-sidebar"));d3.event.preventDefault();});
+        showSidebar();
+        RED.sidebar.info.init();
+        RED.sidebar.config.init();
+        // hide info bar at start if screen rather narrow...
+        if ($(window).width() < 600) { toggleSidebar(); }
+    }
+
     return {
         init: init,
         addTab: addTab,
@@ -169,7 +217,6 @@ RED.sidebar = (function() {
         show: showSidebar,
         containsTab: containsTab,
         toggleSidebar: toggleSidebar,
-        on: eventHandler.on
     }
-    
+
 })();

editor/js/ui/subflow.js

@@ -0,0 +1,608 @@
+/**
+ * Copyright 2015 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+RED.subflow = (function() {
+
+
+    function getSubflow() {
+        return RED.nodes.subflow(RED.workspaces.active());
+    }
+
+    function findAvailableSubflowIOPosition(subflow,isInput) {
+        var pos = {x:50,y:30};
+        if (!isInput) {
+            pos.x += 110;
+        }
+        for (var i=0;i<subflow.out.length+subflow.in.length;i++) {
+            var port;
+            if (i < subflow.out.length) {
+                port = subflow.out[i];
+            } else {
+                port = subflow.in[i-subflow.out.length];
+            }
+            if (port.x == pos.x && port.y == pos.y) {
+                pos.x += 55;
+                i=0;
+            }
+        }
+        return pos;
+    }
+
+    function addSubflowInput() {
+        var subflow = RED.nodes.subflow(RED.workspaces.active());
+        if (subflow.in.length === 1) {
+            return;
+        }
+        var position = findAvailableSubflowIOPosition(subflow,true);
+        var newInput = {
+            type:"subflow",
+            direction:"in",
+            z:subflow.id,
+            i:subflow.in.length,
+            x:position.x,
+            y:position.y,
+            id:RED.nodes.id()
+        };
+        var oldInCount = subflow.in.length;
+        subflow.in.push(newInput);
+        subflow.dirty = true;
+        var wasDirty = RED.nodes.dirty();
+        var wasChanged = subflow.changed;
+        subflow.changed = true;
+        var result = refresh(true);
+        var historyEvent = {
+            t:'edit',
+            node:subflow,
+            dirty:wasDirty,
+            changed:wasChanged,
+            subflow: {
+                inputCount: oldInCount,
+                instances: result.instances
+            }
+        };
+        RED.history.push(historyEvent);
+        RED.view.select();
+        RED.nodes.dirty(true);
+        RED.view.redraw();
+        $("#workspace-subflow-input-add").addClass("active");
+        $("#workspace-subflow-input-remove").removeClass("active");
+    }
+
+    function removeSubflowInput() {
+        var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
+        if (activeSubflow.in.length === 0) {
+            return;
+        }
+        var removedInput = activeSubflow.in[0];
+        var removedInputLinks = [];
+        RED.nodes.eachLink(function(l) {
+            if (l.source.type == "subflow" && l.source.z == activeSubflow.id && l.source.i == removedInput.i) {
+                removedInputLinks.push(l);
+            } else if (l.target.type == "subflow:"+activeSubflow.id) {
+                removedInputLinks.push(l);
+            }
+        });
+        removedInputLinks.forEach(function(l) { RED.nodes.removeLink(l)});
+        activeSubflow.in = [];
+        $("#workspace-subflow-input-add").removeClass("active");
+        $("#workspace-subflow-input-remove").addClass("active");
+        activeSubflow.changed = true;
+        return {subflowInputs: [ removedInput ], links:removedInputLinks};
+    }
+
+    function addSubflowOutput(id) {
+        var subflow = RED.nodes.subflow(RED.workspaces.active());
+        var position = findAvailableSubflowIOPosition(subflow,false);
+
+        var newOutput = {
+            type:"subflow",
+            direction:"out",
+            z:subflow.id,
+            i:subflow.out.length,
+            x:position.x,
+            y:position.y,
+            id:RED.nodes.id()
+        };
+        var oldOutCount = subflow.out.length;
+        subflow.out.push(newOutput);
+        subflow.dirty = true;
+        var wasDirty = RED.nodes.dirty();
+        var wasChanged = subflow.changed;
+        subflow.changed = true;
+
+        var result = refresh(true);
+
+        var historyEvent = {
+            t:'edit',
+            node:subflow,
+            dirty:wasDirty,
+            changed:wasChanged,
+            subflow: {
+                outputCount: oldOutCount,
+                instances: result.instances
+            }
+        };
+        RED.history.push(historyEvent);
+        RED.view.select();
+        RED.nodes.dirty(true);
+        RED.view.redraw();
+        $("#workspace-subflow-output .spinner-value").html(subflow.out.length);
+    }
+
+    function removeSubflowOutput(removedSubflowOutputs) {
+        var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
+        if (activeSubflow.out.length === 0) {
+            return;
+        }
+        if (typeof removedSubflowOutputs === "undefined") {
+            removedSubflowOutputs = [activeSubflow.out[activeSubflow.out.length-1]];
+        }
+        var removedLinks = [];
+        removedSubflowOutputs.sort(function(a,b) { return b.i-a.i});
+        for (i=0;i<removedSubflowOutputs.length;i++) {
+            var output = removedSubflowOutputs[i];
+            activeSubflow.out.splice(output.i,1);
+            var subflowRemovedLinks = [];
+            var subflowMovedLinks = [];
+            RED.nodes.eachLink(function(l) {
+                if (l.target.type == "subflow" && l.target.z == activeSubflow.id && l.target.i == output.i) {
+                    subflowRemovedLinks.push(l);
+                }
+                if (l.source.type == "subflow:"+activeSubflow.id) {
+                    if (l.sourcePort == output.i) {
+                        subflowRemovedLinks.push(l);
+                    } else if (l.sourcePort > output.i) {
+                        subflowMovedLinks.push(l);
+                    }
+                }
+            });
+            subflowRemovedLinks.forEach(function(l) { RED.nodes.removeLink(l)});
+            subflowMovedLinks.forEach(function(l) { l.sourcePort--; });
+
+            removedLinks = removedLinks.concat(subflowRemovedLinks);
+            for (var j=output.i;j<activeSubflow.out.length;j++) {
+                activeSubflow.out[j].i--;
+                activeSubflow.out[j].dirty = true;
+            }
+        }
+        activeSubflow.changed = true;
+
+        return {subflowOutputs: removedSubflowOutputs, links: removedLinks}
+    }
+
+    function refresh(markChange) {
+        var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
+        refreshToolbar(activeSubflow);
+        var subflowInstances = [];
+        if (activeSubflow) {
+            RED.nodes.filterNodes({type:"subflow:"+activeSubflow.id}).forEach(function(n) {
+                subflowInstances.push({
+                    id: n.id,
+                    changed: n.changed
+                });
+                if (markChange) {
+                    n.changed = true;
+                }
+                n.inputs = activeSubflow.in.length;
+                n.outputs = activeSubflow.out.length;
+                while (n.outputs < n.ports.length) {
+                    n.ports.pop();
+                }
+                n.resize = true;
+                n.dirty = true;
+                RED.editor.updateNodeProperties(n);
+            });
+            RED.editor.validateNode(activeSubflow);
+            return {
+                instances: subflowInstances
+            }
+        }
+    }
+    function refreshToolbar(activeSubflow) {
+        if (activeSubflow) {
+            $("#workspace-subflow-input-add").toggleClass("active", activeSubflow.in.length !== 0);
+            $("#workspace-subflow-input-remove").toggleClass("active",activeSubflow.in.length === 0);
+
+            $("#workspace-subflow-output .spinner-value").html(activeSubflow.out.length);
+        }
+    }
+
+    function showWorkspaceToolbar(activeSubflow) {
+        var toolbar = $("#workspace-toolbar");
+        toolbar.empty();
+
+        $('<a class="button" id="workspace-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowProperties"><i class="fa fa-pencil"></i> </a>').appendTo(toolbar);
+        $('<span style="margin-left: 5px;" data-i18n="subflow.input"></span> '+
+            '<div style="display: inline-block;" class="button-group">'+
+            '<a id="workspace-subflow-input-remove" class="button active" href="#">0</a>'+
+            '<a id="workspace-subflow-input-add" class="button" href="#">1</a>'+
+            '</div>').appendTo(toolbar);
+
+        $('<span style="margin-left: 5px;" data-i18n="subflow.output"></span> <div id="workspace-subflow-output" style="display: inline-block;" class="button-group spinner-group">'+
+            '<a id="workspace-subflow-output-remove" class="button" href="#"><i class="fa fa-minus"></i></a>'+
+            '<div class="spinner-value">3</div>'+
+            '<a id="workspace-subflow-output-add" class="button" href="#"><i class="fa fa-plus"></i></a>'+
+            '</div>').appendTo(toolbar);
+
+        // $('<a class="button disabled" id="workspace-subflow-add-input" href="#" data-i18n="[append]subflow.input"><i class="fa fa-plus"></i> </a>').appendTo(toolbar);
+        // $('<a class="button" id="workspace-subflow-add-output" href="#" data-i18n="[append]subflow.output"><i class="fa fa-plus"></i> </a>').appendTo(toolbar);
+        $('<a class="button" id="workspace-subflow-delete" href="#" data-i18n="[append]subflow.deleteSubflow"><i class="fa fa-trash"></i> </a>').appendTo(toolbar);
+        toolbar.i18n();
+
+
+        $("#workspace-subflow-output-remove").click(function(event) {
+            event.preventDefault();
+            var wasDirty = RED.nodes.dirty();
+            var wasChanged = activeSubflow.changed;
+            var result = removeSubflowOutput();
+            if (result) {
+                var inst = refresh(true);
+                RED.history.push({
+                    t:'delete',
+                    links:result.links,
+                    subflowOutputs: result.subflowOutputs,
+                    changed: wasChanged,
+                    dirty:wasDirty,
+                    subflow: {
+                        instances: inst.instances
+                    }
+                });
+
+                RED.view.select();
+                RED.nodes.dirty(true);
+                RED.view.redraw(true);
+            }
+        });
+        $("#workspace-subflow-output-add").click(function(event) {
+            event.preventDefault();
+            addSubflowOutput();
+        });
+
+        $("#workspace-subflow-input-add").click(function(event) {
+            event.preventDefault();
+            addSubflowInput();
+        });
+        $("#workspace-subflow-input-remove").click(function(event) {
+            event.preventDefault();
+            var wasDirty = RED.nodes.dirty();
+            var wasChanged = activeSubflow.changed;
+            activeSubflow.changed = true;
+            var result = removeSubflowInput();
+            if (result) {
+                var inst = refresh(true);
+                RED.history.push({
+                    t:'delete',
+                    links:result.links,
+                    changed: wasChanged,
+                    subflowInputs: result.subflowInputs,
+                    dirty:wasDirty,
+                    subflow: {
+                        instances: inst.instances
+                    }
+                });
+                RED.view.select();
+                RED.nodes.dirty(true);
+                RED.view.redraw(true);
+            }
+        });
+
+        $("#workspace-subflow-edit").click(function(event) {
+            RED.editor.editSubflow(RED.nodes.subflow(RED.workspaces.active()));
+            event.preventDefault();
+        });
+
+        $("#workspace-subflow-delete").click(function(event) {
+            event.preventDefault();
+            var removedNodes = [];
+            var removedLinks = [];
+            var startDirty = RED.nodes.dirty();
+
+            var activeSubflow = getSubflow();
+
+            RED.nodes.eachNode(function(n) {
+                if (n.type == "subflow:"+activeSubflow.id) {
+                    removedNodes.push(n);
+                }
+                if (n.z == activeSubflow.id) {
+                    removedNodes.push(n);
+                }
+            });
+            RED.nodes.eachConfig(function(n) {
+                if (n.z == activeSubflow.id) {
+                    removedNodes.push(n);
+                }
+            });
+
+            var removedConfigNodes = [];
+            for (var i=0;i<removedNodes.length;i++) {
+                var removedEntities = RED.nodes.remove(removedNodes[i].id);
+                removedLinks = removedLinks.concat(removedEntities.links);
+                removedConfigNodes = removedConfigNodes.concat(removedEntities.nodes);
+            }
+            // TODO: this whole delete logic should be in RED.nodes.removeSubflow..
+            removedNodes = removedNodes.concat(removedConfigNodes);
+
+            RED.nodes.removeSubflow(activeSubflow);
+
+            RED.history.push({
+                    t:'delete',
+                    nodes:removedNodes,
+                    links:removedLinks,
+                    subflow: {
+                        subflow: activeSubflow
+                    },
+                    dirty:startDirty
+            });
+
+            RED.workspaces.remove(activeSubflow);
+            RED.nodes.dirty(true);
+            RED.view.redraw();
+        });
+
+        refreshToolbar(activeSubflow);
+
+        $("#chart").css({"margin-top": "40px"});
+        $("#workspace-toolbar").show();
+    }
+    function hideWorkspaceToolbar() {
+        $("#workspace-toolbar").hide().empty();
+        $("#chart").css({"margin-top": "0"});
+    }
+
+
+    function init() {
+        RED.events.on("workspace:change",function(event) {
+            var activeSubflow = RED.nodes.subflow(event.workspace);
+            if (activeSubflow) {
+                showWorkspaceToolbar(activeSubflow);
+            } else {
+                hideWorkspaceToolbar();
+            }
+        });
+        RED.events.on("view:selection-changed",function(selection) {
+            if (!selection.nodes) {
+                RED.menu.setDisabled("menu-item-subflow-convert",true);
+            } else {
+                RED.menu.setDisabled("menu-item-subflow-convert",false);
+            }
+        });
+
+    }
+
+    function createSubflow() {
+        var lastIndex = 0;
+        RED.nodes.eachSubflow(function(sf) {
+           var m = (new RegExp("^Subflow (\\d+)$")).exec(sf.name);
+           if (m) {
+               lastIndex = Math.max(lastIndex,m[1]);
+           }
+        });
+
+        var name = "Subflow "+(lastIndex+1);
+
+        var subflowId = RED.nodes.id();
+        var subflow = {
+            type:"subflow",
+            id:subflowId,
+            name:name,
+            info:"",
+            in: [],
+            out: []
+        };
+        RED.nodes.addSubflow(subflow);
+        RED.history.push({
+            t:'createSubflow',
+            subflow: {
+                subflow:subflow
+            },
+            dirty:RED.nodes.dirty()
+        });
+        RED.workspaces.show(subflowId);
+        RED.nodes.dirty(true);
+    }
+
+    function convertToSubflow() {
+        var selection = RED.view.selection();
+        if (!selection.nodes) {
+            RED.notify(RED._("subflow.errors.noNodesSelected"),"error");
+            return;
+        }
+        var i;
+        var nodes = {};
+        var new_links = [];
+        var removedLinks = [];
+
+        var candidateInputs = [];
+        var candidateOutputs = [];
+        var candidateInputNodes = {};
+
+
+        var boundingBox = [selection.nodes[0].x,
+            selection.nodes[0].y,
+            selection.nodes[0].x,
+            selection.nodes[0].y];
+
+        for (i=0;i<selection.nodes.length;i++) {
+            var n = selection.nodes[i];
+            nodes[n.id] = {n:n,outputs:{}};
+            boundingBox = [
+                Math.min(boundingBox[0],n.x),
+                Math.min(boundingBox[1],n.y),
+                Math.max(boundingBox[2],n.x),
+                Math.max(boundingBox[3],n.y)
+            ]
+        }
+
+        var center = [(boundingBox[2]+boundingBox[0]) / 2,(boundingBox[3]+boundingBox[1]) / 2];
+
+        RED.nodes.eachLink(function(link) {
+            if (nodes[link.source.id] && nodes[link.target.id]) {
+                // A link wholely within the selection
+            }
+
+            if (nodes[link.source.id] && !nodes[link.target.id]) {
+                // An outbound link from the selection
+                candidateOutputs.push(link);
+                removedLinks.push(link);
+            }
+            if (!nodes[link.source.id] && nodes[link.target.id]) {
+                // An inbound link
+                candidateInputs.push(link);
+                candidateInputNodes[link.target.id] = link.target;
+                removedLinks.push(link);
+            }
+        });
+
+        var outputs = {};
+        candidateOutputs = candidateOutputs.filter(function(v) {
+             if (outputs[v.source.id+":"+v.sourcePort]) {
+                 outputs[v.source.id+":"+v.sourcePort].targets.push(v.target);
+                 return false;
+             }
+             v.targets = [];
+             v.targets.push(v.target);
+             outputs[v.source.id+":"+v.sourcePort] = v;
+             return true;
+        });
+        candidateOutputs.sort(function(a,b) { return a.source.y-b.source.y});
+
+        if (Object.keys(candidateInputNodes).length > 1) {
+             RED.notify(RED._("subflow.errors.multipleInputsToSelection"),"error");
+             return;
+        }
+
+        var lastIndex = 0;
+        RED.nodes.eachSubflow(function(sf) {
+           var m = (new RegExp("^Subflow (\\d+)$")).exec(sf.name);
+           if (m) {
+               lastIndex = Math.max(lastIndex,m[1]);
+           }
+        });
+
+        var name = "Subflow "+(lastIndex+1);
+
+        var subflowId = RED.nodes.id();
+        var subflow = {
+            type:"subflow",
+            id:subflowId,
+            name:name,
+            info:"",
+            in: Object.keys(candidateInputNodes).map(function(v,i) { var index = i; return {
+                type:"subflow",
+                direction:"in",
+                x:candidateInputNodes[v].x-(candidateInputNodes[v].w/2)-80,
+                y:candidateInputNodes[v].y,
+                z:subflowId,
+                i:index,
+                id:RED.nodes.id(),
+                wires:[{id:candidateInputNodes[v].id}]
+            }}),
+            out: candidateOutputs.map(function(v,i) { var index = i; return {
+                type:"subflow",
+                direction:"in",
+                x:v.source.x+(v.source.w/2)+80,
+                y:v.source.y,
+                z:subflowId,
+                i:index,
+                id:RED.nodes.id(),
+                wires:[{id:v.source.id,port:v.sourcePort}]
+            }})
+        };
+
+        RED.nodes.addSubflow(subflow);
+
+        var subflowInstance = {
+            id:RED.nodes.id(),
+            type:"subflow:"+subflow.id,
+            x: center[0],
+            y: center[1],
+            z: RED.workspaces.active(),
+            inputs: subflow.in.length,
+            outputs: subflow.out.length,
+            h: Math.max(30/*node_height*/,(subflow.out.length||0) * 15),
+            changed:true
+        }
+        subflowInstance._def = RED.nodes.getType(subflowInstance.type);
+        RED.editor.validateNode(subflowInstance);
+        RED.nodes.add(subflowInstance);
+
+        candidateInputs.forEach(function(l) {
+            var link = {source:l.source, sourcePort:l.sourcePort, target: subflowInstance};
+            new_links.push(link);
+            RED.nodes.addLink(link);
+        });
+
+        candidateOutputs.forEach(function(output,i) {
+            output.targets.forEach(function(target) {
+                var link = {source:subflowInstance, sourcePort:i, target: target};
+                new_links.push(link);
+                RED.nodes.addLink(link);
+            });
+        });
+
+        subflow.in.forEach(function(input) {
+            input.wires.forEach(function(wire) {
+                var link = {source: input, sourcePort: 0, target: RED.nodes.node(wire.id) }
+                new_links.push(link);
+                RED.nodes.addLink(link);
+            });
+        });
+        subflow.out.forEach(function(output,i) {
+            output.wires.forEach(function(wire) {
+                var link = {source: RED.nodes.node(wire.id), sourcePort: wire.port , target: output }
+                new_links.push(link);
+                RED.nodes.addLink(link);
+            });
+        });
+
+        for (i=0;i<removedLinks.length;i++) {
+            RED.nodes.removeLink(removedLinks[i]);
+        }
+
+        for (i=0;i<selection.nodes.length;i++) {
+            selection.nodes[i].z = subflow.id;
+        }
+
+        RED.history.push({
+            t:'createSubflow',
+            nodes:[subflowInstance.id],
+            links:new_links,
+            subflow: {
+                subflow: subflow
+            },
+
+            activeWorkspace: RED.workspaces.active(),
+            removedLinks: removedLinks,
+
+            dirty:RED.nodes.dirty()
+        });
+
+        RED.editor.validateNode(subflow);
+        RED.nodes.dirty(true);
+        RED.view.redraw(true);
+    }
+
+
+
+    return {
+        init: init,
+        createSubflow: createSubflow,
+        convertToSubflow: convertToSubflow,
+        refresh: refresh,
+        removeInput: removeSubflowInput,
+        removeOutput: removeSubflowOutput
+    }
+})();

editor/js/ui/tab-config.js

@@ -0,0 +1,293 @@
+/**
+ * Copyright 2013, 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+RED.sidebar.config = (function() {
+
+
+    var content = document.createElement("div");
+    content.className = "sidebar-node-config";
+
+    $('<div class="button-group sidebar-header">'+
+      '<a class="sidebar-header-button-toggle selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
+      '<a class="sidebar-header-button-toggle" id="workspace-config-node-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+
+      '</div>'
+    ).appendTo(content);
+
+
+    var toolbar = $('<div>'+
+        '<a class="sidebar-footer-button" id="workspace-config-node-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a> '+
+        '<a class="sidebar-footer-button" id="workspace-config-node-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>'+
+        '</div>');
+
+    var globalCategories = $("<div>").appendTo(content);
+    var flowCategories = $("<div>").appendTo(content);
+    var subflowCategories = $("<div>").appendTo(content);
+
+    var showUnusedOnly = false;
+
+    var categories = {};
+
+    function getOrCreateCategory(name,parent,label) {
+        name = name.replace(/\./i,"-");
+        if (!categories[name]) {
+            var container = $('<div class="palette-category workspace-config-node-category" id="workspace-config-node-category-'+name+'"></div>').appendTo(parent);
+            var header = $('<div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container);
+            if (label) {
+                $('<span class="config-node-label"/>').text(label).appendTo(header);
+            } else {
+                $('<span class="config-node-label" data-i18n="sidebar.config.'+name+'">').appendTo(header);
+            }
+            $('<span class="config-node-filter-info"></span>').appendTo(header);
+            category = $('<ul class="palette-content config-node-list"></ul>').appendTo(container);
+            container.i18n();
+            var icon = header.find("i");
+            var result = {
+                label: label,
+                list: category,
+                size: function() {
+                    return result.list.find("li:not(.config_node_none)").length
+                },
+                open: function(snap) {
+                    if (!icon.hasClass("expanded")) {
+                        icon.addClass("expanded");
+                        if (snap) {
+                            result.list.show();
+                        } else {
+                            result.list.slideDown();
+                        }
+                    }
+                },
+                close: function(snap) {
+                    if (icon.hasClass("expanded")) {
+                        icon.removeClass("expanded");
+                        if (snap) {
+                            result.list.hide();
+                        } else {
+                            result.list.slideUp();
+                        }
+                    }
+                },
+                isOpen: function() {
+                    return icon.hasClass("expanded");
+                }
+            };
+
+            header.on('click', function(e) {
+                if (result.isOpen()) {
+                    result.close();
+                } else {
+                    result.open();
+                }
+            });
+            categories[name] = result;
+        } else {
+            if (categories[name].label !== label) {
+                categories[name].list.parent().find('.config-node-label').text(label);
+                categories[name].label = label;
+            }
+        }
+        return categories[name];
+    }
+
+    function createConfigNodeList(id,nodes) {
+        var category = getOrCreateCategory(id.replace(/\./i,"-"))
+        var list = category.list;
+
+        nodes.sort(function(A,B) {
+            if (A.type < B.type) { return -1;}
+            if (A.type > B.type) { return 1;}
+            return 0;
+        });
+        if (showUnusedOnly) {
+            var hiddenCount = nodes.length;
+            nodes = nodes.filter(function(n) {
+                return n.users.length === 0;
+            })
+            hiddenCount = hiddenCount - nodes.length;
+            if (hiddenCount > 0) {
+                list.parent().find('.config-node-filter-info').text(RED._('sidebar.config.filtered',{count:hiddenCount})).show();
+            } else {
+                list.parent().find('.config-node-filter-info').hide();
+            }
+        } else {
+            list.parent().find('.config-node-filter-info').hide();
+        }
+        list.empty();
+        if (nodes.length === 0) {
+            $('<li class="config_node_none" data-i18n="sidebar.config.none">NONE</li>').i18n().appendTo(list);
+            category.close(true);
+        } else {
+            var currentType = "";
+            nodes.forEach(function(node) {
+                var label = "";
+                if (typeof node._def.label == "function") {
+                    label = node._def.label.call(node);
+                } else {
+                    label = node._def.label;
+                }
+                label = label || node.id;
+                if (node.type != currentType) {
+                    $('<li class="config_node_type">'+node.type+'</li>').appendTo(list);
+                    currentType = node.type;
+                }
+
+                var entry = $('<li class="palette_node config_node"></li>').appendTo(list);
+                $('<div class="palette_label"></div>').text(label).appendTo(entry);
+
+                var iconContainer = $('<div/>',{class:"palette_icon_container  palette_icon_container_right"}).text(node.users.length).appendTo(entry);
+                if (node.users.length === 0) {
+                    entry.addClass("config_node_unused");
+                }
+                entry.on('click',function(e) {
+                    RED.sidebar.info.refresh(node);
+                });
+                entry.on('dblclick',function(e) {
+                    RED.editor.editConfig("", node.type, node.id);
+                });
+                var userArray = node.users.map(function(n) { return n.id });
+                entry.on('mouseover',function(e) {
+                    RED.nodes.eachNode(function(node) {
+                        if( userArray.indexOf(node.id) != -1) {
+                            node.highlighted = true;
+                            node.dirty = true;
+                        }
+                    });
+                    RED.view.redraw();
+                });
+
+                entry.on('mouseout',function(e) {
+                    RED.nodes.eachNode(function(node) {
+                        if(node.highlighted) {
+                            node.highlighted = false;
+                            node.dirty = true;
+                        }
+                    });
+                    RED.view.redraw();
+                });
+            });
+            category.open(true);
+        }
+    }
+
+    function refreshConfigNodeList() {
+        var validList = {"global":true};
+
+        getOrCreateCategory("global",globalCategories);
+
+        RED.nodes.eachWorkspace(function(ws) {
+            validList[ws.id.replace(/\./g,"-")] = true;
+            getOrCreateCategory(ws.id,flowCategories,ws.label);
+        })
+        RED.nodes.eachSubflow(function(sf) {
+            validList[sf.id.replace(/\./g,"-")] = true;
+            getOrCreateCategory(sf.id,subflowCategories,sf.name);
+        })
+        $(".workspace-config-node-category").each(function() {
+            var id = $(this).attr('id').substring("workspace-config-node-category-".length);
+            if (!validList[id]) {
+                $(this).remove();
+                delete categories[id];
+            }
+        })
+        var globalConfigNodes = [];
+        var configList = {};
+        RED.nodes.eachConfig(function(cn) {
+            if (cn.z) {//} == RED.workspaces.active()) {
+                configList[cn.z.replace(/\./g,"-")] = configList[cn.z.replace(/\./g,"-")]||[];
+                configList[cn.z.replace(/\./g,"-")].push(cn);
+            } else if (!cn.z) {
+                globalConfigNodes.push(cn);
+            }
+        });
+        for (var id in validList) {
+            if (validList.hasOwnProperty(id)) {
+                createConfigNodeList(id,configList[id]||[]);
+            }
+        }
+        createConfigNodeList('global',globalConfigNodes);
+    }
+
+    function init() {
+        RED.sidebar.addTab({
+            id: "config",
+            label: RED._("sidebar.config.label"),
+            name: RED._("sidebar.config.name"),
+            content: content,
+            toolbar: toolbar,
+            closeable: true,
+            visible: false,
+            onchange: function() { refreshConfigNodeList(); }
+        });
+
+        RED.menu.setAction('menu-item-config-nodes',function() {
+            RED.sidebar.show('config');
+        })
+
+        $("#workspace-config-node-collapse-all").on("click", function(e) {
+            e.preventDefault();
+            for (var cat in categories) {
+                if (categories.hasOwnProperty(cat)) {
+                    categories[cat].close();
+                }
+            }
+        });
+        $("#workspace-config-node-expand-all").on("click", function(e) {
+            e.preventDefault();
+            for (var cat in categories) {
+                if (categories.hasOwnProperty(cat)) {
+                    if (categories[cat].size() > 0) {
+                        categories[cat].open();
+                    }
+                }
+            }
+        });
+        $('#workspace-config-node-filter-all').on("click",function(e) {
+            e.preventDefault();
+            if (showUnusedOnly) {
+                $(this).addClass('selected');
+                $('#workspace-config-node-filter-unused').removeClass('selected');
+                showUnusedOnly = !showUnusedOnly;
+                refreshConfigNodeList();
+            }
+        });
+        $('#workspace-config-node-filter-unused').on("click",function(e) {
+            e.preventDefault();
+            if (!showUnusedOnly) {
+                $(this).addClass('selected');
+                $('#workspace-config-node-filter-all').removeClass('selected');
+                showUnusedOnly = !showUnusedOnly;
+                refreshConfigNodeList();
+            }
+        });
+
+
+    }
+    function show(unused) {
+        if (unused !== undefined) {
+            if (unused) {
+                $('#workspace-config-node-filter-unused').click();
+            } else {
+                $('#workspace-config-node-filter-all').click();
+            }
+        }
+        refreshConfigNodeList();
+        RED.sidebar.show("config");
+    }
+    return {
+        init:init,
+        show:show,
+        refresh:refreshConfigNodeList
+    }
+})();

editor/js/ui/tab-info.js

@@ -27,17 +27,25 @@ RED.sidebar.info = (function() {
     });
 
     var content = document.createElement("div");
-    content.id = "tab-info";
     content.style.paddingTop = "4px";
     content.style.paddingLeft = "4px";
     content.style.paddingRight = "4px";
+    content.className = "sidebar-node-info"
 
     var propertiesExpanded = false;
-    
+
+    function init() {
+        RED.sidebar.addTab({
+            id: "info",
+            label: RED._("sidebar.info.label"),
+            name: RED._("sidebar.info.name"),
+            content: content,
+            enableOnEdit: true
+        });
+
+    }
+
     function show() {
-        if (!RED.sidebar.containsTab("info")) {
-            RED.sidebar.addTab("info",content,false);
-        }
         RED.sidebar.show("info");
     }
 
@@ -60,24 +68,24 @@ RED.sidebar.info = (function() {
 
     function refresh(node) {
         var table = '<table class="node-info"><tbody>';
-        table += '<tr class="blank"><td colspan="2">Node</td></tr>';
+        table += '<tr class="blank"><td colspan="2">'+RED._("sidebar.info.node")+'</td></tr>';
         if (node.type != "subflow" && node.name) {
-            table += "<tr><td>Name</td><td>&nbsp;"+node.name+"</td></tr>";
+            table += "<tr><td>"+RED._("common.label.name")+"</td><td>&nbsp;"+node.name+"</td></tr>";
         }
-        table += "<tr><td>Type</td><td>&nbsp;"+node.type+"</td></tr>";
-        table += "<tr><td>ID</td><td>&nbsp;"+node.id+"</td></tr>";
-        
+        table += "<tr><td>"+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>";
+        table += "<tr><td>"+RED._("sidebar.info.id")+"</td><td>&nbsp;"+node.id+"</td></tr>";
+
         var m = /^subflow(:(.+))?$/.exec(node.type);
+        var subflowNode;
         if (m) {
-            var subflowNode;
             if (m[2]) {
                 subflowNode = RED.nodes.subflow(m[2]);
             } else {
                 subflowNode = node;
             }
-            
-            table += '<tr class="blank"><td colspan="2">Subflow</td></tr>';
-            
+
+            table += '<tr class="blank"><td colspan="2">'+RED._("sidebar.info.subflow")+'</td></tr>';
+
             var userCount = 0;
             var subflowType = "subflow:"+subflowNode.id;
             RED.nodes.eachNode(function(n) {
@@ -85,12 +93,12 @@ RED.sidebar.info = (function() {
                     userCount++;
                 }
             });
-            table += "<tr><td>name</td><td>"+subflowNode.name+"</td></tr>";
-            table += "<tr><td>instances</td><td>"+userCount+"</td></tr>";
+            table += "<tr><td>"+RED._("common.label.name")+"</td><td>"+subflowNode.name+"</td></tr>";
+            table += "<tr><td>"+RED._("sidebar.info.instances")+"</td><td>"+userCount+"</td></tr>";
         }
-        
+
         if (!m && node.type != "subflow" && node.type != "comment") {
-            table += '<tr class="blank"><td colspan="2"><a href="#" class="node-info-property-header"><i style="width: 10px; text-align: center;" class="fa fa-caret-'+(propertiesExpanded?"down":"right")+'"></i> Properties</a></td></tr>';
+            table += '<tr class="blank"><td colspan="2"><a href="#" class="node-info-property-header"><i style="width: 10px; text-align: center;" class="fa fa-caret-'+(propertiesExpanded?"down":"right")+'"></i> '+RED._("sidebar.info.properties")+'</a></td></tr>';
             if (node._def) {
                 for (var n in node._def.defaults) {
                     if (n != "name" && node._def.defaults.hasOwnProperty(n)) {
@@ -98,7 +106,7 @@ RED.sidebar.info = (function() {
                         var type = typeof val;
                         if (type === "string") {
                             if (val.length === 0) {
-                                val += '<span style="font-style: italic; color: #ccc;">blank</span>';
+                                val += '<span style="font-style: italic; color: #ccc;">'+RED._("sidebar.info.blank")+'</span>';
                             } else {
                                 if (val.length > 30) {
                                     val = val.substring(0,30)+" ...";
@@ -114,33 +122,34 @@ RED.sidebar.info = (function() {
                                 val += "&nbsp;"+i+": "+vv+"<br/>";
                             }
                             if (node[n].length > 10) {
-                                val += "&nbsp;... "+node[n].length+" items<br/>";
+                                val += "&nbsp;... "+RED._("sidebar.info.arrayItems",{count:node[n].length})+"<br/>";
                             }
                             val += "]";
                         } else {
                             val = JSON.stringify(val,jsonFilter," ");
                             val = val.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
                         }
-    
+
                         table += '<tr class="node-info-property-row'+(propertiesExpanded?"":" hide")+'"><td>'+n+"</td><td>"+val+"</td></tr>";
                     }
                 }
             }
         }
         table += "</tbody></table><hr/>";
-        if (node.type != "comment") {
+        if (!subflowNode && node.type != "comment") {
             var helpText = $("script[data-help-name|='"+node.type+"']").html()||"";
             table  += '<div class="node-help">'+helpText+"</div>";
         }
-
-        if (node._def && node._def.info) {
+        if (subflowNode) {
+            table += '<div class="node-help">'+marked(subflowNode.info||"")+'</div>';
+        } else if (node._def && node._def.info) {
             var info = node._def.info;
             table += '<div class="node-help">'+marked(typeof info === "function" ? info.call(node) : info)+'</div>';
             //table += '<div class="node-help">'+(typeof info === "function" ? info.call(node) : info)+'</div>';
         }
 
-        $("#tab-info").html(table);
-        
+        $(content).html(table);
+
         $(".node-info-property-header").click(function(e) {
             var icon = $(this).find("i");
             if (icon.hasClass("fa-caret-right")) {
@@ -154,16 +163,20 @@ RED.sidebar.info = (function() {
                 $(".node-info-property-row").hide();
                 propertiesExpanded = false;
             }
-            
+
             e.preventDefault();
         });
     }
-    
+
     function clear() {
-        $("#tab-info").html("");
+        $(content).html("");
     }
-    
-    RED.view.on("selection-changed",function(selection) {
+
+    function set(html) {
+        $(content).html(html);
+    }
+
+    RED.events.on("view:selection-changed",function(selection) {
         if (selection.nodes) {
             if (selection.nodes.length == 1) {
                 var node = selection.nodes[0];
@@ -184,8 +197,10 @@ RED.sidebar.info = (function() {
     });
 
     return {
+        init: init,
         show: show,
         refresh:refresh,
-        clear: clear
+        clear: clear,
+        set: set
     }
 })();

editor/js/ui/tabs.js

@@ -0,0 +1,276 @@
+/**
+ * Copyright 2013, 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+
+
+RED.tabs = (function() {
+
+
+    function createTabs(options) {
+        var tabs = {};
+        var currentTabWidth;
+        var currentActiveTabWidth = 0;
+
+        var ul = $("#"+options.id);
+        ul.addClass("red-ui-tabs");
+        ul.children().first().addClass("active");
+        ul.children().addClass("red-ui-tab");
+
+        function onTabClick() {
+            activateTab($(this));
+            return false;
+        }
+
+        function onTabDblClick() {
+            if (options.ondblclick) {
+                options.ondblclick(tabs[$(this).attr('href').slice(1)]);
+            }
+            return false;
+        }
+
+        function activateTab(link) {
+            if (typeof link === "string") {
+                link = ul.find("a[href='#"+link+"']");
+            }
+            if (!link.parent().hasClass("active")) {
+                ul.children().removeClass("active");
+                ul.children().css({"transition": "width 100ms"});
+                link.parent().addClass("active");
+                if (options.onchange) {
+                    options.onchange(tabs[link.attr('href').slice(1)]);
+                }
+                updateTabWidths();
+                setTimeout(function() {
+                    ul.children().css({"transition": ""});
+                },100);
+            }
+        }
+
+        function updateTabWidths() {
+            var tabs = ul.find("li.red-ui-tab");
+            var width = ul.width();
+            var tabCount = tabs.size();
+            var tabWidth = (width-12-(tabCount*6))/tabCount;
+            currentTabWidth = 100*tabWidth/width;
+            currentActiveTabWidth = currentTabWidth+"%";
+
+            if (options.hasOwnProperty("minimumActiveTabWidth")) {
+                if (tabWidth < options.minimumActiveTabWidth) {
+                    tabCount -= 1;
+                    tabWidth = (width-12-options.minimumActiveTabWidth-(tabCount*6))/tabCount;
+                    currentTabWidth = 100*tabWidth/width;
+                    currentActiveTabWidth = options.minimumActiveTabWidth+"px";
+                } else {
+                    currentActiveTabWidth = 0;
+                }
+            }
+            tabs.css({width:currentTabWidth+"%"});
+            if (tabWidth < 50) {
+                ul.find(".red-ui-tab-close").hide();
+                ul.find(".red-ui-tab-icon").hide();
+                ul.find(".red-ui-tab-label").css({paddingLeft:Math.min(12,Math.max(0,tabWidth-38))+"px"})
+            } else {
+                ul.find(".red-ui-tab-close").show();
+                ul.find(".red-ui-tab-icon").show();
+                ul.find(".red-ui-tab-label").css({paddingLeft:""})
+            }
+            if (currentActiveTabWidth !== 0) {
+                ul.find("li.red-ui-tab.active").css({"width":options.minimumActiveTabWidth});
+                ul.find("li.red-ui-tab.active .red-ui-tab-close").show();
+                ul.find("li.red-ui-tab.active .red-ui-tab-icon").show();
+                ul.find("li.red-ui-tab.active .red-ui-tab-label").css({paddingLeft:""})
+            }
+
+        }
+
+        ul.find("li.red-ui-tab a").on("click",onTabClick).on("dblclick",onTabDblClick);
+        updateTabWidths();
+
+
+        function removeTab(id) {
+            var li = ul.find("a[href='#"+id+"']").parent();
+            if (li.hasClass("active")) {
+                var tab = li.prev();
+                if (tab.size() === 0) {
+                    tab = li.next();
+                }
+                activateTab(tab.find("a"));
+            }
+            li.remove();
+            if (options.onremove) {
+                options.onremove(tabs[id]);
+            }
+            delete tabs[id];
+            updateTabWidths();
+        }
+
+        return {
+            addTab: function(tab) {
+                tabs[tab.id] = tab;
+                var li = $("<li/>",{class:"red-ui-tab"}).appendTo(ul);
+                li.data("tabId",tab.id);
+                var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
+                if (tab.icon) {
+                    $('<img src="'+tab.icon+'" class="red-ui-tab-icon"/>').appendTo(link);
+                }
+                $('<span/>').text(tab.label).appendTo(link);
+
+                link.on("click",onTabClick);
+                link.on("dblclick",onTabDblClick);
+                if (tab.closeable) {
+                    var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close"}).appendTo(li);
+                    closeLink.append('<i class="fa fa-times" />');
+
+                    closeLink.on("click",function(event) {
+                        removeTab(tab.id);
+                    });
+                }
+                updateTabWidths();
+                if (options.onadd) {
+                    options.onadd(tab);
+                }
+                link.attr("title",tab.label);
+                if (ul.find("li.red-ui-tab").size() == 1) {
+                    activateTab(link);
+                }
+                if (options.onreorder) {
+                    var originalTabOrder;
+                    var tabDragIndex;
+                    var tabElements = [];
+                    var startDragIndex;
+
+                    li.draggable({
+                        axis:"x",
+                        distance: 20,
+                        start: function(event,ui) {
+                            originalTabOrder = [];
+                            tabElements = [];
+                            ul.children().each(function(i) {
+                                tabElements[i] = {
+                                    el:$(this),
+                                    text: $(this).text(),
+                                    left: $(this).position().left,
+                                    width: $(this).width()
+                                };
+                                if ($(this).is(li)) {
+                                    tabDragIndex = i;
+                                    startDragIndex = i;
+                                }
+                                originalTabOrder.push($(this).data("tabId"));
+                            });
+                            ul.children().each(function(i) {
+                                if (i!==tabDragIndex) {
+                                    $(this).css({
+                                        position: 'absolute',
+                                        left: tabElements[i].left+"px",
+                                        width: tabElements[i].width+2,
+                                        transition: "left 0.3s"
+                                    });
+                                }
+
+                            })
+                            if (!li.hasClass('active')) {
+                                li.css({'zIndex':1});
+                            }
+                        },
+                        drag: function(event,ui) {
+                            ui.position.left += tabElements[tabDragIndex].left;
+                            var tabCenter = ui.position.left + tabElements[tabDragIndex].width/2;
+                            for (var i=0;i<tabElements.length;i++) {
+                                if (i === tabDragIndex) {
+                                    continue;
+                                }
+                                if (tabCenter > tabElements[i].left && tabCenter < tabElements[i].left+tabElements[i].width) {
+                                    if (i < tabDragIndex) {
+                                        tabElements[i].left += tabElements[tabDragIndex].width+8;
+                                        tabElements[tabDragIndex].el.detach().insertBefore(tabElements[i].el);
+                                    } else {
+                                        tabElements[i].left -= tabElements[tabDragIndex].width+8;
+                                        tabElements[tabDragIndex].el.detach().insertAfter(tabElements[i].el);
+                                    }
+                                    tabElements[i].el.css({left:tabElements[i].left+"px"});
+
+                                    tabElements.splice(i, 0, tabElements.splice(tabDragIndex, 1)[0]);
+
+                                    tabDragIndex = i;
+                                    break;
+                                }
+                            }
+
+                            // console.log(ui.position.left,ui.offset.left);
+                        },
+                        stop: function(event,ui) {
+                            ul.children().css({position:"relative",left:"",transition:""});
+                            if (!li.hasClass('active')) {
+                                li.css({zIndex:""});
+                            }
+                            updateTabWidths();
+                            if (startDragIndex !== tabDragIndex) {
+                                options.onreorder(originalTabOrder, $.makeArray(ul.children().map(function() { return $(this).data('tabId');})));
+                            }
+                            activateTab(tabElements[tabDragIndex].el.data('tabId'));
+                        }
+                    })
+                }
+            },
+            removeTab: removeTab,
+            activateTab: activateTab,
+            resize: updateTabWidths,
+            count: function() {
+                return ul.find("li.red-ui-tab").size();
+            },
+            contains: function(id) {
+                return ul.find("a[href='#"+id+"']").length > 0;
+            },
+            renameTab: function(id,label) {
+                tabs[id].label = label;
+                var tab = ul.find("a[href='#"+id+"']");
+                tab.attr("title",label);
+                tab.find("span").text(label);
+                updateTabWidths();
+            },
+            order: function(order) {
+                var existingTabOrder = $.makeArray(ul.children().map(function() { return $(this).data('tabId');}));
+                if (existingTabOrder.length !== order.length) {
+                    return
+                }
+                var i;
+                var match = true;
+                for (i=0;i<order.length;i++) {
+                    if (order[i] !== existingTabOrder[i]) {
+                        match = false;
+                        break;
+                    }
+                }
+                if (match) {
+                    return;
+                }
+                var existingTabMap = {};
+                var existingTabs = ul.children().detach().each(function() {
+                    existingTabMap[$(this).data("tabId")] = $(this);
+                });
+                for (i=0;i<order.length;i++) {
+                    existingTabMap[order[i]].appendTo(ul);
+                }
+            }
+
+        }
+    }
+
+    return {
+        create: createTabs
+    }
+})();

editor/js/ui/tray.js

@@ -0,0 +1,271 @@
+/**
+ * Copyright 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+RED.tray = (function() {
+
+    var stack = [];
+    var editorStack = $("#editor-stack");
+    var openingTray = false;
+
+    function resize() {
+
+    }
+    function showTray(options) {
+        var el = $('<div class="editor-tray"></div>');
+        var header = $('<div class="editor-tray-header"></div>').appendTo(el);
+        var bodyWrapper = $('<div class="editor-tray-body-wrapper"></div>').appendTo(el);
+        var body = $('<div class="editor-tray-body"></div>').appendTo(bodyWrapper);
+        var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
+        var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el);
+        // var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
+        // var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
+        if (options.title) {
+            $('<div class="editor-tray-titlebar">'+options.title+'</div>').appendTo(header);
+        }
+        var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header);
+        var primaryButton;
+        if (options.buttons) {
+            for (var i=0;i<options.buttons.length;i++) {
+                var button = options.buttons[i];
+
+                var b = $('<button>').appendTo(buttonBar);
+                if (button.id) {
+                    b.attr('id',button.id);
+                }
+                if (button.text) {
+                    b.html(button.text);
+                }
+                if (button.click) {
+                    b.click((function(action) {
+                        return function(evt) {
+                            if (!$(this).hasClass('disabled')) {
+                                action(evt);
+                            }
+                        };
+                    })(button.click));
+                }
+                if (button.class) {
+                    b.addClass(button.class);
+                    if (button.class === "primary") {
+                        primaryButton = button;
+                    }
+                }
+            }
+        }
+        el.appendTo(editorStack);
+        var tray = {
+            tray: el,
+            header: header,
+            body: body,
+            footer: footer,
+            options: options,
+            primaryButton: primaryButton
+        };
+        stack.push(tray);
+
+        el.draggable({
+                handle: resizer,
+                axis: "x",
+                start:function(event,ui) {
+                    el.width('auto');
+                },
+                drag: function(event,ui) {
+                    var absolutePosition = editorStack.position().left+ui.position.left
+                    if (absolutePosition < 7) {
+                        ui.position.left += 7-absolutePosition;
+                    } else if (ui.position.left > -tray.preferredWidth-1) {
+                        ui.position.left = -Math.min(editorStack.position().left-7,tray.preferredWidth-1);
+                    }
+                    if (tray.options.resize) {
+                        setTimeout(function() {
+                            tray.options.resize({width: -ui.position.left});
+                        },0);
+                    }
+                    tray.width = -ui.position.left;
+                },
+                stop:function(event,ui) {
+                    el.width(-ui.position.left);
+                    el.css({left:''});
+                    if (tray.options.resize) {
+                        tray.options.resize({width: -ui.position.left});
+                    }
+                    tray.width = -ui.position.left;
+                }
+            });
+
+        if (options.open) {
+            options.open(el);
+        }
+
+        $("#header-shade").show();
+        $("#editor-shade").show();
+        $(".sidebar-shade").show();
+
+        tray.preferredWidth = Math.max(el.width(),500);
+        body.css({"minWidth":tray.preferredWidth-40});
+
+        if (options.width) {
+            if (options.width > $("#editor-stack").position().left-8) {
+                options.width = $("#editor-stack").position().left-8;
+            }
+            el.width(options.width);
+        } else {
+            el.width(tray.preferredWidth);
+        }
+
+        tray.width = el.width();
+        if (tray.width > $("#editor-stack").position().left-8) {
+            tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8);
+            el.width(tray.width);
+        }
+
+        // tray.body.parent().width(Math.min($("#editor-stack").position().left-8,tray.width));
+
+        el.css({
+            right: -(el.width()+10)+"px",
+            transition: "right 0.25s ease"
+        });
+        $("#workspace").scrollLeft(0);
+        handleWindowResize();
+        openingTray = true;
+        setTimeout(function() {
+            setTimeout(function() {
+                if (!options.width) {
+                    el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8));
+                }
+                if (options.resize) {
+                    options.resize({width:el.width()});
+                }
+                if (options.show) {
+                    options.show();
+                }
+                setTimeout(function() {
+                    // Delay resetting the flag, so we don't close prematurely
+                    openingTray = false;
+                },200);
+            },150);
+            el.css({right:0});
+        },0);
+
+        // growButton.click(function(e) {
+        //     e.preventDefault();
+        //     tray.lastWidth = tray.width;
+        //     tray.width = $("#editor-stack").position().left-8;
+        //     el.width(tray.width);
+        //     if (options.resize) {
+        //         options.resize({width:tray.width});
+        //     }
+        // });
+        // shrinkButton.click(function(e) {
+        //     e.preventDefault();
+        //     if (tray.lastWidth && tray.width > tray.lastWidth) {
+        //         tray.width = tray.lastWidth;
+        //     } else if (tray.width > tray.preferredWidth) {
+        //         tray.width = tray.preferredWidth;
+        //     }
+        //     el.width(tray.width);
+        //     if (options.resize) {
+        //         options.resize({width:tray.width});
+        //     }
+        // });
+
+    }
+
+    function handleWindowResize() {
+        if (stack.length > 0) {
+            var tray = stack[stack.length-1];
+            var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
+            tray.body.height(trayHeight-40);
+            if (tray.width > $("#editor-stack").position().left-8) {
+                tray.width = $("#editor-stack").position().left-8;
+                tray.tray.width(tray.width);
+                // tray.body.parent().width(tray.width);
+            } else if (tray.width < tray.preferredWidth) {
+                tray.width = Math.min($("#editor-stack").position().left-8,tray.preferredWidth);
+                tray.tray.width(tray.width);
+                // tray.body.parent().width(tray.width);
+            }
+            if (tray.options.resize) {
+                tray.options.resize({width:tray.width});
+            }
+        }
+    }
+
+    return {
+        init: function init() {
+            $(window).resize(handleWindowResize);
+            RED.events.on("sidebar:resize",handleWindowResize);
+            $("#editor-shade").click(function() {
+                if (!openingTray) {
+                    var tray = stack[stack.length-1];
+                    if (tray && tray.primaryButton) {
+                        tray.primaryButton.click();
+                    }
+                }
+            });
+        },
+        show: function show(options) {
+            if (stack.length > 0) {
+                var oldTray = stack[stack.length-1];
+                oldTray.tray.css({
+                    right: -(oldTray.tray.width()+10)+"px"
+                });
+                setTimeout(function() {
+                    oldTray.tray.detach();
+                    showTray(options);
+                },250)
+            } else {
+                RED.events.emit("editor:open");
+                showTray(options);
+            }
+
+        },
+        close: function close(done) {
+            if (stack.length > 0) {
+                var tray = stack.pop();
+                tray.tray.css({
+                    right: -(tray.tray.width()+10)+"px"
+                });
+                setTimeout(function() {
+                    if (tray.options.close) {
+                        tray.options.close();
+                    }
+                    tray.tray.remove();
+                    if (stack.length > 0) {
+                        var oldTray = stack[stack.length-1];
+                        oldTray.tray.appendTo("#editor-stack");
+                        setTimeout(function() {
+                            handleWindowResize();
+                            oldTray.tray.css({right:0});
+                            if (oldTray.options.show) {
+                                oldTray.options.show();
+                            }
+                        },0);
+                    }
+                    if (done) {
+                        done();
+                    }
+                    if (stack.length === 0) {
+                        $("#header-shade").hide();
+                        $("#editor-shade").hide();
+                        $(".sidebar-shade").hide();
+                        RED.events.emit("editor:close");
+                        RED.view.focus();
+                    }
+                },250)
+            }
+        }
+    }
+})();

editor/js/ui/typedInput.js

@@ -0,0 +1,405 @@
+/**
+ * Copyright 2015, 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+(function($) {
+    function validateExpression(str) {
+        var length = str.length;
+        var start = 0;
+        var inString = false;
+        var inBox = false;
+        var quoteChar;
+        var v;
+        for (var i=0;i<length;i++) {
+            var c = str[i];
+            if (!inString) {
+                if (c === "'" || c === '"') {
+                    if (!inBox) {
+                        return false;
+                    }
+                    inString = true;
+                    quoteChar = c;
+                    start = i+1;
+                } else if (c === '.') {
+                    if (i===0 || i===length-1) {
+                        return false;
+                    }
+                    // Next char is a-z
+                    if (!/[a-z0-9]/i.test(str[i+1])) {
+                        return false;
+                    }
+                    start = i+1;
+                } else if (c === '[') {
+                    if (i === 0) {
+                        return false;
+                    }
+                    if (i===length-1) {
+                        return false;
+                    }
+                    // Next char is either a quote or a number
+                    if (!/["'\d]/.test(str[i+1])) {
+                        return false;
+                    }
+                    start = i+1;
+                    inBox = true;
+                } else if (c === ']') {
+                    if (!inBox) {
+                        return false;
+                    }
+                    if (start != i) {
+                        v = str.substring(start,i);
+                        if (!/^\d+$/.test(v)) {
+                            return false;
+                        }
+                    }
+                    start = i+1;
+                    inBox = false;
+                } else if (c === ' ') {
+                    return false;
+                }
+            } else {
+                if (c === quoteChar) {
+                    // Next char must be a ]
+                    if (!/\]/.test(str[i+1])) {
+                        return false;
+                    }
+                    start = i+1;
+                    inString = false;
+                }
+            }
+
+        }
+        if (inBox || inString) {
+            return false;
+        }
+        return true;
+    }
+    var allOptions = {
+        msg: {value:"msg",label:"msg.",validate:validateExpression},
+        flow: {value:"flow",label:"flow.",validate:validateExpression},
+        global: {value:"global",label:"global.",validate:validateExpression},
+        str: {value:"str",label:"string",icon:"red/images/typedInput/az.png"},
+        num: {value:"num",label:"number",icon:"red/images/typedInput/09.png",validate:/^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/},
+        bool: {value:"bool",label:"boolean",icon:"red/images/typedInput/bool.png",options:["true","false"]},
+        json: {value:"json",label:"JSON",icon:"red/images/typedInput/json.png", validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}}},
+        re: {value:"re",label:"regular expression",icon:"red/images/typedInput/re.png"},
+        date: {value:"date",label:"timestamp",hasValue:false}
+    };
+    var nlsd = false;
+
+    $.widget( "nodered.typedInput", {
+        _create: function() {
+            if (!nlsd && RED && RED._) {
+                for (var i in allOptions) {
+                    if (allOptions.hasOwnProperty(i)) {
+                        allOptions[i].label = RED._("typedInput.type."+i,{defaultValue:allOptions[i].label});
+                    }
+                }
+            }
+            nlsd = true;
+            var that = this;
+
+            this.disarmClick = false;
+            this.element.addClass('red-ui-typedInput');
+            this.uiWidth = this.element.width();
+            this.uiSelect = this.element
+                .wrap( "<div>" )
+                .parent();
+
+            ["Right","Left"].forEach(function(d) {
+                var m = that.element.css("margin"+d);
+                that.uiSelect.css("margin"+d,m);
+                that.element.css("margin"+d,0);
+            });
+            this.uiSelect.addClass("red-ui-typedInput-container");
+
+            this.options.types = this.options.types||Object.keys(allOptions);
+
+            this.selectTrigger = $('<a href="#"></a>').prependTo(this.uiSelect);
+            $('<i class="fa fa-sort-desc"></i>').appendTo(this.selectTrigger);
+            this.selectLabel = $('<span></span>').appendTo(this.selectTrigger);
+
+            this.types(this.options.types);
+
+            if (this.options.typeField) {
+                this.typeField = $(this.options.typeField).hide();
+                var t = this.typeField.val();
+                if (t && this.typeMap[t]) {
+                    this.options.default = t;
+                }
+            } else {
+                this.typeField = $("<input>",{type:'hidden'}).appendTo(this.uiSelect);
+            }
+
+            this.element.on('focus', function() {
+                that.uiSelect.addClass('red-ui-typedInput-focus');
+            });
+            this.element.on('blur', function() {
+                that.uiSelect.removeClass('red-ui-typedInput-focus');
+            });
+            this.element.on('change', function() {
+                that.validate();
+            })
+            this.selectTrigger.click(function(event) {
+                event.preventDefault();
+                if (that.typeList.length > 1) {
+                    that._showMenu(that.menu,that.selectTrigger);
+                } else {
+                    that.element.focus();
+                }
+            });
+
+            // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
+            this.optionSelectTrigger = $('<a href="#" class="red-ui-typedInput-option-trigger" style="display:inline-block"><i class="fa fa-sort-desc"></i></a>').appendTo(this.uiSelect);
+            this.optionSelectLabel = $('<span></span>').prependTo(this.optionSelectTrigger);
+            this.optionSelectTrigger.click(function(event) {
+                event.preventDefault();
+                if (that.optionMenu) {
+                    that.optionMenu.css({
+                        minWidth:that.optionSelectLabel.width()
+                    });
+
+                    that._showMenu(that.optionMenu,that.optionSelectLabel)
+                }
+            });
+            this.type(this.options.default||this.typeList[0].value);
+        },
+        _hideMenu: function(menu) {
+            $(document).off("mousedown.close-property-select");
+            menu.hide();
+            this.element.focus();
+        },
+        _createMenu: function(opts,callback) {
+            var that = this;
+            var menu = $("<div>").addClass("red-ui-typedInput-options");
+            opts.forEach(function(opt) {
+                if (typeof opt === 'string') {
+                    opt = {value:opt,label:opt};
+                }
+                var op = $('<a href="#">').attr("value",opt.value).appendTo(menu);
+                if (opt.label) {
+                    op.text(opt.label);
+                }
+                if (opt.icon) {
+                    $('<img>',{src:opt.icon,style:"margin-right: 4px; height: 18px;"}).prependTo(op);
+                } else {
+                    op.css({paddingLeft: "18px"});
+                }
+
+                op.click(function(event) {
+                    event.preventDefault();
+                    callback(opt.value);
+                    that._hideMenu(menu);
+                });
+            });
+            menu.css({
+                display: "none",
+            });
+            menu.appendTo(document.body);
+            return menu;
+
+        },
+        _showMenu: function(menu,relativeTo) {
+            if (this.disarmClick) {
+                this.disarmClick = false;
+                return
+            }
+            var that = this;
+            var pos = relativeTo.offset();
+            var height = relativeTo.height();
+            var menuHeight = menu.height();
+            var top = (height+pos.top-3);
+            if (top+menuHeight > $(window).height()) {
+                top -= (top+menuHeight)-$(window).height()+5;
+            }
+            menu.css({
+                top: top+"px",
+                left: (2+pos.left)+"px",
+            });
+            menu.slideDown(100);
+            this._delay(function() {
+                that.uiSelect.addClass('red-ui-typedInput-focus');
+                $(document).on("mousedown.close-property-select", function(event) {
+                    if(!$(event.target).closest(menu).length) {
+                        that._hideMenu(menu);
+                    }
+                    if ($(event.target).closest(relativeTo).length) {
+                        that.disarmClick = true;
+                        event.preventDefault();
+                    }
+                })
+            });
+        },
+        _getLabelWidth: function(label) {
+            var labelWidth = label.width();
+            if (labelWidth === 0) {
+                var newTrigger = label.clone();
+                newTrigger.css({
+                    position:"absolute",
+                    top:0,
+                    left:-1000
+                }).appendTo(document.body);
+                labelWidth = newTrigger.width()+4;
+                newTrigger.remove();
+            }
+            return labelWidth;
+        },
+        _resize: function() {
+            if (this.typeMap[this.propertyType] && this.typeMap[this.propertyType].hasValue === false) {
+                this.selectTrigger.width(this.uiWidth+5);
+            } else {
+                this.selectTrigger.width('auto');
+                var labelWidth = this._getLabelWidth(this.selectTrigger);
+
+                var newWidth = this.uiWidth-labelWidth+4;
+                this.element.width(newWidth);
+
+                if (this.optionSelectTrigger) {
+                    var triggerWidth = this._getLabelWidth(this.optionSelectTrigger);
+                    labelWidth = this._getLabelWidth(this.optionSelectLabel)-4;
+                    this.optionSelectLabel.width(labelWidth+(newWidth-triggerWidth));
+                }
+            }
+        },
+        _destroy: function() {
+            this.menu.remove();
+        },
+        types: function(types) {
+            var that = this;
+            var currentType = this.type();
+            this.typeMap = {};
+            this.typeList = types.map(function(opt) {
+                var result;
+                if (typeof opt === 'string') {
+                    result = allOptions[opt];
+                } else {
+                    result = opt;
+                }
+                that.typeMap[result.value] = result;
+                return result;
+            });
+            this.selectTrigger.toggleClass("disabled", this.typeList.length === 1);
+            if (this.menu) {
+                this.menu.remove();
+            }
+            this.menu = this._createMenu(this.typeList, function(v) { that.type(v) });
+            if (currentType && !this.typeMap.hasOwnProperty(currentType)) {
+                this.type(this.typeList[0].value);
+            }
+        },
+        width: function(desiredWidth) {
+            this.uiWidth = desiredWidth;
+            this._resize();
+        },
+        value: function(value) {
+            if (!arguments.length) {
+                return this.element.val();
+            } else {
+                if (this.typeMap[this.propertyType].options) {
+                    if (this.typeMap[this.propertyType].options.indexOf(value) === -1) {
+                        value = "";
+                    }
+                    this.optionSelectLabel.text(value);
+                }
+                this.element.val(value);
+                this.element.trigger('change',this.type(),value);
+            }
+        },
+        type: function(type) {
+            if (!arguments.length) {
+                return this.propertyType;
+            } else {
+                var that = this;
+                var opt = this.typeMap[type];
+                if (opt && this.propertyType !== type) {
+                    this.propertyType = type;
+                    this.typeField.val(type);
+                    this.selectLabel.empty();
+                    var image;
+                    if (opt.icon) {
+                        image = new Image();
+                        image.name = opt.icon;
+                        image.src = opt.icon;
+                        $('<img>',{src:opt.icon,style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel);
+                    } else {
+                        this.selectLabel.text(opt.label);
+                    }
+                    if (opt.options) {
+                        if (this.optionSelectTrigger) {
+                            this.optionSelectTrigger.show();
+                            this.element.hide();
+                            this.optionMenu = this._createMenu(opt.options,function(v){
+                                that.optionSelectLabel.text(v);
+                                that.value(v);
+                            });
+                            var currentVal = this.element.val();
+                            if (opt.options.indexOf(currentVal) !== -1) {
+                                this.optionSelectLabel.text(currentVal);
+                            } else {
+                                this.value(opt.options[0]);
+                            }
+                        }
+                    } else {
+                        if (this.optionMenu) {
+                            this.optionMenu.remove();
+                            this.optionMenu = null;
+                        }
+                        if (this.optionSelectTrigger) {
+                            this.optionSelectTrigger.hide();
+                        }
+                        if (opt.hasValue === false) {
+                            this.oldValue = this.element.val();
+                            this.element.val("");
+                            this.element.hide();
+                        } else {
+                            if (this.oldValue !== undefined) {
+                                this.element.val(this.oldValue);
+                                delete this.oldValue;
+                            }
+                            this.element.show();
+                        }
+                        this.element.trigger('change',this.propertyType,this.value());
+                    }
+                    if (image) {
+                        image.onload = function() { that._resize(); }
+                        image.onerror = function() { that._resize(); }
+                    } else {
+                        this._resize();
+                    }
+                }
+            }
+        },
+        validate: function() {
+            var result;
+            var value = this.value();
+            var type = this.type();
+            if (this.typeMap[type] && this.typeMap[type].validate) {
+                var val = this.typeMap[type].validate;
+                if (typeof val === 'function') {
+                    result = val(value);
+                } else {
+                    result = val.test(value);
+                }
+            } else {
+                result = true;
+            }
+            if (result) {
+                this.uiSelect.removeClass('input-error');
+            } else {
+                this.uiSelect.addClass('input-error');
+            }
+            return result;
+        }
+    });
+})(jQuery);