Playground = ({value, connector, sweep, radius} = {}) => {
const vis = d3.create('svg')
const node = vis.node()
value = _.cloneDeep(value)
vis.classed('playground', true)
vis
.attr('width', w)
.attr('height', h)
vis.append('text')
.classed('title', true)
.text(connector)
.attr('x', 10)
.attr('y', h-20)
function update() {
vis.selectAll('.link')
.data(value.links)
.join('path')
.classed('link', true)
.attr('d', d => {
let p1
let p2
if(value.nodes[d.source].control) {
p1 = value.nodes[d.target]
p2 = value.nodes[d.source]
}
else {
p1 = value.nodes[d.source]
p2 = value.nodes[d.target]
}
return corner_connectors[connector](p1, p2, {sweep: sweep, corner_radius: radius})
})
vis.selectAll('.node')
.data(d => value.nodes)
.join(
enter => enter.append('circle')
.classed('node', true)
.classed('control', d => d.control)
.call(d3.drag()
.on('drag', (event, d) => {
d.x = event.x
d.y = event.y
set(node, value)
})
)
)
.attr('r', 8)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
}
Object.defineProperty(node, 'value', {
get() {
return value
},
set(v) {
value = v
update()
}
})
node.value = value
return node
}