Skip to content

Commit

Permalink
#442, use __rpd_data__ property as a temporary and easy-replacable …
Browse files Browse the repository at this point in the history 
…solution to store independent data
  • Loading branch information
@shamansir
shamansir committed Feb 18, 2017
1 parent 2dfabda commit 137b7bf
Show file tree
Hide file tree
Showing 15 changed files with 223 additions and 149 deletions.
2 changes: 1 addition & 1 deletion examples/timbre.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<!-- Kefir -->
<script src="../node_modules/kefir/dist/kefir.min.js"></script>
<!-- d3-selection -->
<script src="../node_modules/d3-selection/build/d3-selection.min.js"></script>
<script src="../node_modules/d3-selection/build/d3-selection.js"></script>
<!-- RPD -->
<script src="../src/rpd.js"></script>

Expand Down
78 changes: 41 additions & 37 deletions src/render/html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ var NODE_LAYER = 0, // normally, nodes are layed out below everything

var Render = Rpd.Render; // everything common between renderers

var δ = Render.data;

var tree = {
patches: {},
nodes: {},
Expand Down Expand Up @@ -101,7 +103,7 @@ return function(networkRoot, userConfig) {
.classed('rpd-values-' + (config.valuesOnHover ? 'on-hover' : 'always-shown'), true)
.classed('rpd-show-boxes', config.showBoxes);

canvas.datum({ patch: update.patch });
δ(canvas, { patch: update.patch });

tree.patches[patch.id] = canvas;

Expand Down Expand Up @@ -140,10 +142,10 @@ return function(networkRoot, userConfig) {
var nodeBox = tree.nodes[node.id];

nodeBox.select('.rpd-node').classed('rpd-patch-reference', true);
nodeBox.datum().processTarget.text('[' + (update.target.name || update.target.id) + ']');
δ(nodeBox).processTarget.text('[' + (update.target.name || update.target.id) + ']');

// add the ability to enter the patch by clicking node body (TODO: move to special node type)
Kefir.fromEvents(nodeBox.datum().processTarget.node(), 'click')
Kefir.fromEvents(δ(nodeBox).processTarget.node(), 'click')
.onValue((function(current, target) {
return function() {
target.open(current);
Expand Down Expand Up @@ -175,11 +177,12 @@ return function(networkRoot, userConfig) {
nodeElm.classed('rpd-'+node.type.slice(0, node.type.indexOf('/'))+'-toolkit-node', true)
.classed('rpd-'+node.type.replace('/','-'), true);

nodeBox.style('z-index', NODE_LAYER)
.datum({ inletsTarget: nodeElm.select('.rpd-inlets-target'),
outletsTarget: nodeElm.select('.rpd-outlets-target'),
processTarget: nodeElm.select('.rpd-process-target'),
pos: { x: 0, y: 0 } });
nodeBox.style('z-index', NODE_LAYER);

δ(nodeBox, { inletsTarget: nodeElm.select('.rpd-inlets-target'),
outletsTarget: nodeElm.select('.rpd-outlets-target'),
processTarget: nodeElm.select('.rpd-process-target'),
pos: { x: 0, y: 0 } });

tree.nodes[node.id] = nodeBox;

Expand All @@ -194,7 +197,7 @@ return function(networkRoot, userConfig) {
{ start: function() {
nodeBox.classed('rpd-dragging', true);
nodeBox.style('z-index', NODEDRAG_LAYER);
return nodeBox.datum().pos;
return δ(nodeBox).pos;
},
drag: function(pos) {
nodeBox.style('left', pos.x + 'px');
Expand Down Expand Up @@ -245,8 +248,8 @@ return function(networkRoot, userConfig) {
nodePos = placing.nextPosition(node, nodeSize, { width: limitSrc.node().offsetWidth,
height: limitSrc.node().offsetHeight });

nodeElm.select('.rpd-body').style('min-width', Math.floor(nodeSize.width) + 'px');
nodeElm.select('.rpd-body').style('height', Math.floor(nodeSize.height) + 'px'); // height is min-height for table cells
nodeElm.select('.rpd-body').style('min-width', Math.floor(nodeSize.width) + 'px')
.style('height', Math.floor(nodeSize.height) + 'px'); // height is min-height for table cells

node.move(nodePos.x, nodePos.y); // x and y positions will be set in node/move event handler

Expand Down Expand Up @@ -286,9 +289,9 @@ return function(networkRoot, userConfig) {
'node/move': function(update) {
var nodeBox = tree.nodes[update.node.id];
var position = update.position;
nodeBox.style('left', Math.floor(position[0]) + 'px');
nodeBox.style('top', Math.floor(position[1]) + 'px');
nodeBox.datum().pos = { x: position[0], y: position[1] };
nodeBox.style('left', Math.floor(position[0]) + 'px')
.style('top', Math.floor(position[1]) + 'px');
δ(nodeBox).pos = { x: position[0], y: position[1] };
},

'node/process': function(update) {
Expand All @@ -297,7 +300,7 @@ return function(networkRoot, userConfig) {

// update node body with custom renderer, if defined
if (render.always) {
var bodyElm = tree.nodes[node.id].datum().processTarget.node();
var bodyElm = δ(tree.nodes[node.id]).processTarget.node();
render.always.bind(node)(bodyElm, update.inlets, update.outlets);
}
},
Expand All @@ -308,7 +311,7 @@ return function(networkRoot, userConfig) {

if (inlet.def.hidden) return;

var inletsTarget = tree.nodes[update.node.id].datum().inletsTarget;
var inletsTarget = δ(tree.nodes[update.node.id]).inletsTarget;
var render = update.render;

var inletElm = d3.select(style.createInlet(inlet, render).element);
Expand All @@ -328,7 +331,7 @@ return function(networkRoot, userConfig) {
inletElm.select('.rpd-value-holder').append(ƒ(editor.editorElm.node()));
}

inletElm.datum({
δ(inletElm, {
connector: inletElm.select('.rpd-connector'),
value: inletElm.select('.rpd-value'),
vlinks: new VLinks(), // links associated with this inlet
Expand All @@ -352,18 +355,19 @@ return function(networkRoot, userConfig) {

var outlet = update.outlet;

var outletsTarget = tree.nodes[update.node.id].datum().outletsTarget;
var outletsTarget = δ(tree.nodes[update.node.id]).outletsTarget;
var render = update.render;

var outletElm = d3.select(style.createOutlet(outlet, render).element);

outletElm.classed('rpd-'+outlet.type.replace('/','-'), true)
.classed('rpd-stale', true)
.datum({
connector: outletElm.select('.rpd-connector'),
value: outletElm.select('.rpd-value'),
vlinks: new VLinks() // links associated with this outlet
});
.classed('rpd-stale', true);

δ(outletElm, {
connector: outletElm.select('.rpd-connector'),
value: outletElm.select('.rpd-value'),
vlinks: new VLinks() // links associated with this outlet
});

tree.outlets[outlet.id] = outletElm;

Expand All @@ -375,7 +379,7 @@ return function(networkRoot, userConfig) {

'node/remove-inlet': function(update) {
var inlet = update.inlet;
var inletData = tree.inlets[inlet.id].datum();
var inletData = δ(tree.inlets[inlet.id]);

inletData.vlinks.forEach(function(vlink) {
vlink.get().disconnect();
Expand All @@ -390,7 +394,7 @@ return function(networkRoot, userConfig) {

'node/remove-outlet': function(update) {
var outlet = update.outlet;
var outletData = tree.outlets[outlet.id].datum();
var outletData = δ(tree.outlets[outlet.id]);

outletData.vlinks.forEach(function(vlink) {
vlink.get().disconnect();
Expand All @@ -411,7 +415,7 @@ return function(networkRoot, userConfig) {
var render = update.render;

var inletElm = tree.inlets[inlet.id];
var valueElm = inletElm.datum().value;
var valueElm = δ(inletElm).value;

if (!valueElm.empty()) {
var valueRepr = inlet.def.show ? inlet.def.show(update.value)
Expand All @@ -434,7 +438,7 @@ return function(networkRoot, userConfig) {
var render = update.render;

var outletElm = tree.outlets[outlet.id];
var valueElm = outletElm.datum().value;
var valueElm = δ(outletElm).value;

if (!valueElm.empty()) {
var valueRepr = outlet.def.show ? outlet.def.show(update.value)
Expand All @@ -460,8 +464,8 @@ return function(networkRoot, userConfig) {
var outletElm = tree.outlets[outlet.id];
var inletElm = tree.inlets[inlet.id];

var outletData = outletElm.datum();
var inletData = inletElm.datum();
var outletData = δ(outletElm);
var inletData = δ(inletElm);

if (!config.inletAcceptsMultipleLinks && (inletData.vlinks.count() === 1)) {
throw new Error('Inlet is already connected to a link');
Expand Down Expand Up @@ -504,8 +508,8 @@ return function(networkRoot, userConfig) {
var outlet = link.outlet;
var inlet = link.inlet;

var outletData = tree.outlets[outlet.id].datum();
var inletData = tree.inlets[inlet.id].datum();
var outletData = δ(tree.outlets[outlet.id]);
var inletData = δ(tree.inlets[inlet.id]);

// forget all references
tree.links[link.id] = null;
Expand All @@ -525,7 +529,7 @@ return function(networkRoot, userConfig) {

'link/enable': function(update) {
var inlet = update.link.inlet;
var inletData = tree.inlets[inlet.id].datum();
var inletData = δ(tree.inlets[inlet.id]);
if (inletData.editor) inletData.editor.disable();

tree.links[update.link.id].enable();
Expand All @@ -543,7 +547,7 @@ return function(networkRoot, userConfig) {

function patchByHash(tree) {
return function(hash) {
return tree.patches[hash].datum().patch;
return δ(tree.patches[hash]).patch;
}
}

Expand All @@ -557,7 +561,7 @@ function updateCanvasHeightOnResize(_window, _document, networkRoot, canvas) {
networkRoot.style('height', value + 'px');
canvas.style('height', value + 'px');
});
networkRoot.datum({
δ(networkRoot, {
subscribedToResize: true
});
}
Expand All @@ -576,7 +580,7 @@ function awaiting(a, b) {
var Connectivity = (function() {

function getLinks(inlet) {
return tree.inlets[inlet.id].datum().vlinks;
return δ(tree.inlets[inlet.id]).vlinks;
}
function hasLinks(inlet) {
return function() {
Expand Down Expand Up @@ -753,7 +757,7 @@ function ValueEditor(inlet, render, canvas, valueHolder, valueElm, editorElm) {
cancelEditing: !val[0] }; })
.onValue(function(conf) {
if (conf.startEditing) {
var inletData = tree.inlets[inlet.id].datum();
var inletData = δ(tree.inlets[inlet.id]);
if (inletData.link) inletData.link.disable();
valueIn.emit(conf.lastValue);
valueHolder.classed('rpd-editor-enabled', true);
Expand Down
9 changes: 9 additions & 0 deletions src/render/shared.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,16 @@ function reportErrorsToConsole(config) {
});
}

function _data(selection, data) {
// FIXME: should use d3Selection.datum() eventually
// see issue https://github.com/shamansir/rpd/issues/442
if (data) selection.node().__rpd_data__ = data;
else return selection.node().__rpd_data__;
};

return {
data: _data,

Placing: GridPlacing,
DragAndDrop: DragAndDrop,
//Connectivity: Connectivity,
Expand Down
Loading

0 comments on commit 137b7bf

Please sign in to comment.