diff --git a/components/graph.bak.bak/index.js b/components/graph.bak.bak/index.js deleted file mode 100644 index 8ec97d1..0000000 --- a/components/graph.bak.bak/index.js +++ /dev/null @@ -1,149 +0,0 @@ - -const { - map, - values, - flatten, - merge, - indexBy, -} = require('ramda'); - -const React = require('react'); - -const r = require('r-dom'); - -const { connect } = require('react-redux'); - -const d3 = require('d3'); - -const key = pao => `${pao.type}-${pao.index}`; - -class Graph extends React.Component { - constructor(props) { - super(props); - - this.container = React.createRef(); - - this.connectionToPao = new WeakMap(); - } - - componentDidMount() { - this.svg = d3 - .select(this.container.current) - .append('svg'); - } - - _connectSinkInput(sinkInput) { - const connection = this.jsPlumb.connect({ - source: `client-${sinkInput.info.clientIndex}`, - target: `sink-${sinkInput.info.sinkIndex}`, - anchor: 'Continuous', - overlays: [ [ 'Arrow', { location: -1 } ] ], - }); - this.connectionToPao.set(connection, sinkInput); - } - - _connectSourceOutput(sourceOutput) { - const connection = this.jsPlumb.connect({ - source: `source-${sourceOutput.info.sourceIndex}`, - target: `client-${sourceOutput.info.clientIndex}`, - anchor: 'Continuous', - overlays: [ [ 'Arrow', { location: -1 } ] ], - }); - this.connectionToPao.set(connection, sourceOutput); - } - - _connectByType(pao) { - if (pao.type === 'sinkInput') { - this._connectSinkInput(pao); - } else { - this._connectSourceOutput(pao); - } - } - - _handleResize() { - this.svg - .attr('width', this.container.current.clientWidth) - .attr('height', this.container.current.clientHeight); - } - - componentDidUpdate() { - this._handleResizeBound = this._handleResize.bind(this); - this.container.current.ownerDocument.defaultView.addEventListener('resize', this._handleResizeBound); - - /* - this.jsPlumb.batch(() => { - const propsPaos = merge( - indexBy(key, values(this.props.sinkInputs)), - indexBy(key, values(this.props.sourceOutputs)), - ); - this.jsPlumb.getAllConnections().forEach(connection => { - const connectionPao = this.connectionToPao.get(connection); - const k = key(connectionPao); - const propsPao = propsPaos[k]; - if (!propsPao) { - this.jsPlumb.deleteConnection(connection); - } else if (propsPao === connectionPao) { - // Noop - } else if (propsPao.info) { - this.jsPlumb.deleteConnection(connection); - this._connectByType(propsPao); - } - delete propsPaos[k]; - }); - values(propsPaos).forEach(propsPao => { - if (propsPao.info) { - this._connectByType(propsPao); - } - }); - }); - */ - - /* - flatten( - map(paos => map(pao => r.div({ - id: key(pao), - key: key(pao), - className: 'jtk-node', - style: { - border: '1px solid black', - userSelect: 'none', - cursor: 'default', - }, - ref: el => { - if (el) { - this.jsPlumb.draggable(el, {}); - /// this.jsPlumb.addEndpoint(); - } - }, - }, [ - key(pao), - ]), values(paos)), [ - this.props.sinks, - this.props.sources, - this.props.clients, - ]), - ) - */ - } - - componentWillUnmount() { - this.container.current.ownerDocument.defaultView.removeEventListener('resize', this._handleResizeBound); - } - - render() { - return r.div({ - ref: this.container, - style: { - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, - }, - }); - } -} - -module.exports = connect( - state => state.pulse, -)(Graph); diff --git a/components/graph.bak/index.js b/components/graph.bak/index.js deleted file mode 100644 index f37f9d0..0000000 --- a/components/graph.bak/index.js +++ /dev/null @@ -1,126 +0,0 @@ - -const { - map, - values, - flatten, - merge, - indexBy, -} = require('ramda'); - -const React = require('react'); - -const r = require('r-dom'); - -const { connect } = require('react-redux'); - -const { - jsPlumb, -} = require('jsplumb'); - -const key = pao => `${pao.type}-${pao.index}`; - -class Graph extends React.Component { - constructor(props) { - super(props); - - this.container = React.createRef(); - - this.connectionToPao = new WeakMap(); - } - - componentDidMount() { - this.jsPlumb = jsPlumb.getInstance({ - Container: this.container.current, - }); - } - - _connectSinkInput(sinkInput) { - const connection = this.jsPlumb.connect({ - source: `client-${sinkInput.info.clientIndex}`, - target: `sink-${sinkInput.info.sinkIndex}`, - anchor: 'Continuous', - overlays: [ [ 'Arrow', { location: -1 } ] ], - }); - this.connectionToPao.set(connection, sinkInput); - } - - _connectSourceOutput(sourceOutput) { - const connection = this.jsPlumb.connect({ - source: `source-${sourceOutput.info.sourceIndex}`, - target: `client-${sourceOutput.info.clientIndex}`, - anchor: 'Continuous', - overlays: [ [ 'Arrow', { location: -1 } ] ], - }); - this.connectionToPao.set(connection, sourceOutput); - } - - _connectByType(pao) { - if (pao.type === 'sinkInput') { - this._connectSinkInput(pao); - } else { - this._connectSourceOutput(pao); - } - } - - componentDidUpdate() { - this.jsPlumb.batch(() => { - const propsPaos = merge( - indexBy(key, values(this.props.sinkInputs)), - indexBy(key, values(this.props.sourceOutputs)), - ); - this.jsPlumb.getAllConnections().forEach(connection => { - const connectionPao = this.connectionToPao.get(connection); - const k = key(connectionPao); - const propsPao = propsPaos[k]; - if (!propsPao) { - this.jsPlumb.deleteConnection(connection); - } else if (propsPao === connectionPao) { - // Noop - } else if (propsPao.info) { - this.jsPlumb.deleteConnection(connection); - this._connectByType(propsPao); - } - delete propsPaos[k]; - }); - values(propsPaos).forEach(propsPao => { - if (propsPao.info) { - this._connectByType(propsPao); - } - }); - }); - } - - render() { - return r.div({ - ref: this.container, - style: { position: 'relative' }, - }, flatten( - map(paos => map(pao => r.div({ - id: key(pao), - key: key(pao), - className: 'jtk-node', - style: { - border: '1px solid black', - userSelect: 'none', - cursor: 'default', - }, - ref: el => { - if (el) { - this.jsPlumb.draggable(el, {}); - /// this.jsPlumb.addEndpoint(); - } - }, - }, [ - key(pao), - ]), values(paos)), [ - this.props.sinks, - this.props.sources, - this.props.clients, - ]), - )); - } -} - -module.exports = connect( - state => state.pulse, -)(Graph);