try to deal with #439, replaced selection.append(node) with selection…

….append(Rpd.unit(node)) everywhere, still some examples do fail

src/d3_tiny.js

@@ -66,7 +66,7 @@ Selection.prototype.selectAll = function(v) { return new Selection(v, this.selec
 
 Selection.prototype.append = function(name) {
     var selection = [];
-    modify(this, (typeof name === 'string') ? document.createElementNS(this.namespace, name) : name,
+    modify(this, (typeof name === 'string') ? document.createElementNS(this.namespace, name) : name(),
                  function(subj, elm) { subj.appendChild(elm); selection.push(elm); });
     return new Selection(selection);
 };

src/modules/visual-history.js

@@ -8,6 +8,8 @@ if (typeof Rpd === "undefined" && typeof require !== "undefined") {
 
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 function spanWithText(text) {
     return d3.select(document.createElement('span')).text(text.join('')).node();
 }
@@ -253,7 +255,7 @@ Rpd.visualHistory = function(target, type) {
         li.append('span').classed('update-type', true).text((updateTitle[updateType] || updateType) + ':');
         div = li.append('div').classed('update-details', true);
         if (renderUpdate[updateType]) {
-            div.append(renderUpdate[updateType](update));
+            div.append(ƒ(renderUpdate[updateType](update)));
         } else {
             div.append('span').text('<Unknown>');
         }

src/render/html.js

@@ -124,7 +124,7 @@ return function(networkRoot, userConfig) {
             if ((config.closeParent || config.fullPage) && update.parent) update.parent.close();
             currentPatch = update.patch;
             var newCanvas = tree.patches[update.patch.id];
-            networkRoot.append(newCanvas.node());
+            networkRoot.append(ƒ(newCanvas.node()));
 
             tree.patchToLinks[update.patch.id].updateAll();
             if (style.onPatchSwitch) style.onPatchSwitch(currentPatch, newCanvas.node());
@@ -171,7 +171,7 @@ return function(networkRoot, userConfig) {
 
             var nodeBox = d3.select(document.createElement('div')).attr('class', 'rpd-node-box');
             var styledNode = style.createNode(node, render, nodeDescriptions[node.type], nodeTypeIcons[node.type]);
-            var nodeElm = nodeBox.append(styledNode.element);
+            var nodeElm = nodeBox.append(ƒ(styledNode.element));
 
             nodeElm.classed('rpd-'+node.type.slice(0, node.type.indexOf('/'))+'-toolkit-node', true)
                    .classed('rpd-'+node.type.replace('/','-'), true);
@@ -262,7 +262,7 @@ return function(networkRoot, userConfig) {
             }
 
             // append to the the patch canvas node
-            tree.patches[patch.id].append(nodeBox.node());
+            tree.patches[patch.id].append(ƒ(nodeBox.node()));
 
         },
 
@@ -326,7 +326,7 @@ return function(networkRoot, userConfig) {
                                          inletElm.select('.rpd-value-holder'),
                                          inletElm.select('.rpd-value'),
                                          d3.select(document.createElement('div')));
-                inletElm.select('.rpd-value-holder').append(editor.editorElm.node());
+                inletElm.select('.rpd-value-holder').append(ƒ(editor.editorElm.node()));
             }
 
             tree.inlets[inlet.id] = inletElm.data({
@@ -344,7 +344,7 @@ return function(networkRoot, userConfig) {
             // listen for clicks in connector and allow to edit links this way
             connectivity.subscribeInlet(inlet, inletElm.select('.rpd-connector'));
 
-            inletsTarget.append(inletElm.node());
+            inletsTarget.append(ƒ(inletElm.node()));
         },
 
         'node/add-outlet': function(update) {
@@ -368,7 +368,7 @@ return function(networkRoot, userConfig) {
             // listen for clicks in connector and allow to edit links this way
             connectivity.subscribeOutlet(outlet, outletElm.select('.rpd-connector'));
 
-            outletsTarget.append(outletElm.node());
+            outletsTarget.append(ƒ(outletElm.node()));
         },
 
         'node/remove-inlet': function(update) {

src/render/shared.js

@@ -8,10 +8,10 @@ if (typeof Rpd === "undefined" && typeof require !== "undefined") {
 
 Rpd.Render = (function() {
 
-var ƒ = Rpd.unit;
-
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 // =============================================================================
 // ============================= Placing =======================================
 // =============================================================================
@@ -124,7 +124,7 @@ VLink.prototype.update = function() {
     return this;
 }
 VLink.prototype.appendTo = function(target) {
-    target.append(this.element.node());
+    target.append(ƒ(this.element.node()));
     return this;
 }
 VLink.prototype.removeFrom = function(target) {

src/render/svg.js

@@ -6,8 +6,6 @@ if (typeof Rpd === "undefined" && typeof require !== "undefined") {
     Rpd = require('rpd');
 }
 
-var ƒ = Rpd.unit;
-
 var defaultConfig = {
     style: 'quartz',
     // network takes the full page, so the target element will be resized
@@ -33,6 +31,8 @@ var defaultConfig = {
 // either use the full d3.js library or the super-tiny version provided with RPD
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 var Render = Rpd.Render; // everything common between renderers
 
 var tree = {
@@ -102,17 +102,19 @@ return function(networkRoot, userConfig) {
                                              .attr('height', docElm.property('clientHeight'));
             }
 
-            var patchCanvas = svg.append(style.createCanvas(patch, networkRoot.node()).element)
+            var patchCanvas = svg.append(ƒ(style.createCanvas(patch, networkRoot.node())).element)
                                .classed('rpd-style-' + config.style, true)
                                .classed('rpd-values-' + (config.valuesOnHover ? 'on-hover' : 'always-shown'), true)
                                .classed('rpd-show-boxes', config.showBoxes)
                                .data(update.patch);
 
-            tree.patches[patch.id] = svg.data({ canvas: patchCanvas,
-                                                width: docElm.property('clientWidth'),
-                                                height: docElm.property('clientHeight'),
-                                                patch: update.patch
-                                              });
+            svg.data({ canvas: patchCanvas,
+                       width: docElm.property('clientWidth'),
+                       height: docElm.property('clientHeight'),
+                       patch: update.patch
+                     });
+
+            tree.patches[patch.id] = svg;
 
             // resize network root on window resize
             if (config.fullPage) updateCanvasHeightOnResize(window, document, svg, svg.select('.rpd-background'));
@@ -136,7 +138,7 @@ return function(networkRoot, userConfig) {
             if ((config.closeParent || config.fullPage) && update.parent) update.parent.close();
             currentPatch = update.patch;
             var newCanvas = tree.patches[update.patch.id];
-            networkRoot.append(newCanvas.node());
+            networkRoot.append(ƒ(newCanvas.node()));
 
             tree.patchToLinks[update.patch.id].updateAll();
             if (style.onPatchSwitch) style.onPatchSwitch(currentPatch, newCanvas.node());
@@ -153,7 +155,7 @@ return function(networkRoot, userConfig) {
             var nodeBox = tree.nodes[node.id];
 
             nodeBox.select('.rpd-node').classed('rpd-patch-reference', true);
-            nodeBox.data().processTarget.append(_createSvgElement('text'))
+            nodeBox.data().processTarget.append(ƒ(_createSvgElement('text')))
                                                 .text('[' + (update.target.name || update.target.id) + ']');
 
             // add the ability to enter the patch by clicking node body (TODO: move to special node type)
@@ -193,7 +195,7 @@ return function(networkRoot, userConfig) {
 
             var nodeBox = d3.select(_createSvgElement('g')).attr('class', 'rpd-node-box');
             var styledNode = style.createNode(node, render, nodeDescriptions[node.type], nodeTypeIcons[node.type]);
-            var nodeElm = nodeBox.append(styledNode.element);
+            var nodeElm = nodeBox.append(ƒ(styledNode.element));
 
             // store targets information and node canvas element itself
             tree.nodes[node.id] = nodeBox.data({ inletsTarget:  nodeElm.select('.rpd-inlets'),
@@ -263,7 +265,7 @@ return function(networkRoot, userConfig) {
 
             // append to the the patch canvas node
             var patchCanvas = tree.patches[node.patch.id].data().canvas;
-            patchCanvas.append(nodeBox.node());
+            patchCanvas.append(ƒ(nodeBox.node()));
 
         },
 
@@ -330,7 +332,7 @@ return function(networkRoot, userConfig) {
                                          inletElm.select('.rpd-value-holder'),
                                          inletElm.select('.rpd-value'),
                                          d3.select(_createSvgElement('g')));
-                inletElm.select('.rpd-value-holder').append(editor.editorElm.node());
+                inletElm.select('.rpd-value-holder').append(ƒ(editor.editorElm.node()));
             }
 
             tree.inlets[inlet.id] = inletElm.data({
@@ -349,7 +351,7 @@ return function(networkRoot, userConfig) {
             // listen for clicks in connector and allow to edit links this way
             connectivity.subscribeInlet(inlet, inletElm.select('.rpd-connector'));
 
-            inletsTarget.append(inletElm.node());
+            inletsTarget.append(ƒ(inletElm.node()));
         },
 
         'node/add-outlet': function(update) {
@@ -376,7 +378,7 @@ return function(networkRoot, userConfig) {
             // listen for clicks in connector and allow to edit links this way
             connectivity.subscribeOutlet(outlet, outletElm.select('.rpd-connector'));
 
-            outletsTarget.append(outletElm.node());
+            outletsTarget.append(ƒ(outletElm.node()));
         },
 
         'node/remove-inlet': function(update) {

src/style/ableton-out/svg.js

@@ -10,6 +10,8 @@ Rpd.style('ableton-out', 'svg', function(config) {
 
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 function _createSvgElement(name) {
     return document.createElementNS(d3.namespaces.svg, name);
 }
@@ -103,7 +105,7 @@ return {
     createCanvas: function(patch, parent) {
         var canvas = d3.select(_createSvgElement('g'))
                        .classed('rpd-patch', true);
-        canvas.append(defs.node());
+        canvas.append(ƒ(defs.node()));
         canvas.append('rect').attr('width', '100%').attr('height', '100%')
               .classed('rpd-background', true);
         return { element: canvas.node() };
@@ -165,7 +167,7 @@ return {
 
         // append tooltip with description
         nodeElm.select('.rpd-header')
-               .append(_createSvgElement('title'))
+               .append(ƒ(_createSvgElement('title')))
                .text(description ? (description + ' (' + node.type + ')') : node.type);
 
         // append remove button

src/style/ableton/svg.js

@@ -10,6 +10,8 @@ Rpd.style('ableton', 'svg', function(config) {
 
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 function _createSvgElement(name) {
     return document.createElementNS(d3.namespaces.svg, name);
 }
@@ -103,7 +105,7 @@ return {
     createCanvas: function(patch, parent) {
         var canvas = d3.select(_createSvgElement('g'))
                        .classed('rpd-patch', true);
-        canvas.append(defs.node());
+        canvas.append(ƒ(defs.node()));
         canvas.append('rect').attr('width', '100%').attr('height', '100%')
               .classed('rpd-background', true);
         return { element: canvas.node() };
@@ -182,7 +184,7 @@ return {
 
         // append tooltip with description
         nodeElm.select('.rpd-header')
-               .append(_createSvgElement('title'))
+               .append(ƒ(_createSvgElement('title')))
                .text(description ? (description + ' (' + node.type + ')') : node.type);
 
         // append remove button

src/style/black-white/svg.js

@@ -10,6 +10,8 @@ Rpd.style('black-white', 'svg', function(config) {
 
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 function _createSvgElement(name) {
     return document.createElementNS(d3.namespaces.svg, name);
 }
@@ -46,7 +48,7 @@ return {
     createCanvas: function(patch, parent) {
         var canvas = d3.select(_createSvgElement('g'))
                        .classed('rpd-patch', true);
-        canvas.append(defs.node());
+        canvas.append(ƒ(defs.node()));
         canvas.append('rect').attr('width', '100%').attr('height', '100%')
                              .attr('fill', 'url(#polka)');
         return { element: canvas.node() };
@@ -120,7 +122,7 @@ return {
 
         // append tooltip with description
         nodeElm.select('.rpd-header')
-               .append(_createSvgElement('title'))
+               .append(ƒ(_createSvgElement('title')))
                .text(description ? (description + ' (' + node.type + ')') : node.type);
 
         // append remove button

src/style/blender/svg.js

@@ -10,6 +10,8 @@ Rpd.style('blender', 'svg', function(config) {
 
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 function _createSvgElement(name) {
     return document.createElementNS(d3.namespaces.svg, name);
 }
@@ -165,7 +167,7 @@ return {
     createCanvas: function(patch, parent) {
         var canvas = d3.select(_createSvgElement('g'))
                        .classed('rpd-patch', true);
-        canvas.append(defs.node());
+        canvas.append(ƒ(defs.node()));
         canvas.append('rect').attr('width', '100%').attr('height', '100%')
                              .attr('fill', 'url(#blueprint)');
         return { element: canvas.node() };
@@ -245,7 +247,7 @@ return {
 
         // append tooltip with description
         nodeElm.select('.rpd-header')
-               .append(_createSvgElement('title'))
+               .append(ƒ(_createSvgElement('title')))
                .text(description ? (description + ' (' + node.type + ')') : node.type);
 
         // append remove button

src/style/compact-v/svg.js

@@ -10,6 +10,8 @@ Rpd.style('compact-v', 'svg', (function() {
 
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 var socketPadding = 20, // distance between inlets/outlets in SVG units
     socketsMargin = 8; // distance between first/last inlet/outlet and body edge
 var headerHeight = 10; // height of a node header in SVG units
@@ -89,7 +91,7 @@ return {
 
         // append tooltip with description
         nodeElm.select('.rpd-header')
-               .append(_createSvgElement('title'))
+               .append(ƒ(_createSvgElement('title')))
                .text(description ? (description + ' (' + node.type + ')') : node.type);
 
         // append remove button

src/style/compact/svg.js

@@ -10,6 +10,8 @@ Rpd.style('compact', 'svg', (function() {
 
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 var socketPadding = 25, // distance between inlets/outlets in SVG units
     socketsMargin = 20; // distance between first/last inlet/outlet and body edge
 var headerWidth = 10; // width of a node header in SVG units
@@ -88,7 +90,7 @@ return {
 
         // append tooltip with description
         nodeElm.select('.rpd-header')
-               .append(_createSvgElement('title'))
+               .append(ƒ(_createSvgElement('title')))
                .text(description ? (description + ' (' + node.type + ')') : node.type);
 
         // append remove button

src/style/pd/svg.js

@@ -10,6 +10,8 @@ Rpd.style('pd', 'svg', (function() {
 
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 // we need this canvas to be shared between all instances of a function below,
 // it is used to measure node header width, since it contains text, we need
 // some hidden element to measure string width in pixels
@@ -67,7 +69,7 @@ return {
         var fakeName = d3.select(_createSvgElement('text'))
                          .attr('class', 'rpd-fake-name')
                          .text(node.def.title || node.type).attr('x', -1000).attr('y', -1000);
-        globalLastCanvas.append(fakeName.node());
+        globalLastCanvas.append(ƒ(fakeName.node()));
         var headerWidth = fakeName.node().getBBox().width + 12;
         fakeName.remove();
 
@@ -113,7 +115,7 @@ return {
 
         // append tooltip with description
         nodeElm.select('.rpd-header')
-               .append(_createSvgElement('title'))
+               .append(ƒ(_createSvgElement('title')))
                .text(description ? (description + ' (' + node.type + ')') : node.type);
 
         // append remove button

src/style/plain/svg.js

@@ -10,6 +10,8 @@ Rpd.style('plain', 'svg', (function() {
 
 var d3 = Rpd.d3;
 
+var ƒ = Rpd.unit;
+
 var socketPadding = 30, // distance between inlets/outlets in SVG units
     socketsMargin = 5; // distance between first/last inlet/outlet and body edge
 
@@ -70,7 +72,7 @@ return {
 
         // append tooltip with description
         nodeElm.select('.rpd-header')
-               .append(_createSvgElement('title'))
+               .append(ƒ(_createSvgElement('title')))
                .text(description ? (description + ' (' + node.type + ')') : node.type);
 
         // append remove button