Commit c2bb9d2a authored by Jaden DIEFENBAUGH's avatar Jaden DIEFENBAUGH
Browse files

let user click on output/input to create conn, closes #79

parent 134e1a10
Pipeline #24513 passed with stages
in 46 minutes and 48 seconds
......@@ -510,7 +510,9 @@ export default class GraphicalEditor extends React.PureComponent<Props, State> {
}, 50);
};
// d3 behaviour for dragging lines from an output to an input and creating a connection
// d3 behaviour for connecting an output and input and creating a connection
// allows users to drag from output to input,
// or click an output and click an input
initD3Connections = () => {
// creating connections
setTimeout(() => {
......@@ -519,8 +521,17 @@ export default class GraphicalEditor extends React.PureComponent<Props, State> {
const channelColors = this.props.repData.channel_colors;
const {datasets, blocks} = this.props;
let startBlock;
// the user has started dragging from an output block
let startX = 0;
let startY = 0;
// the user has started dragging from an output block,
// or it might be starting a click event!
// to see if the user is clicking or dragging,
// check in endDrag() if the distance travelled is small
// enough to be considered a click or not
function startDrag(d) {
console.log('startDrag');
startX = d3.event.x;
startY = d3.event.y;
// find the block that the user started from
const rawId = d3.select(this).attr('id');
const bName = rawId.split('-output-')[0];
......@@ -533,37 +544,57 @@ export default class GraphicalEditor extends React.PureComponent<Props, State> {
.append('line')
.classed('tmp', true)
.attr('stroke', 'black')
.attr('x1', d3.event.x)
.attr('y1', d3.event.y)
.attr('x2', d3.event.x)
.attr('y2', d3.event.y);
.attr('x1', startX)
.attr('y1', startY)
.attr('x2', startX)
.attr('y2', startY);
}
// create a connection if the user ended the drag on an input block,
// else just remove the temp svg line
function endDrag() {
const {x, y} = d3.event;
d3.select('.tmp')
.remove();
const processEndBlock = (endInput: HTMLElement) => {
if(!startBlock)
return;
// with the location of the end event,
// compare the location to the location & dims of all input blocks
// in the svg.
const endInput = Array.from(document.querySelectorAll('.iBlock'))
.find(n => {
const nx = n.x.baseVal.value;
const ny = n.y.baseVal.value;
const width = n.width.baseVal.value;
const height = n.height.baseVal.value;
return nx <= x && x <= nx + width && ny <= y && y <= ny + height;
});
if(endInput === undefined)
return;
console.log(endInput);
const endId = endInput.id.replace('-input-', '.');
// create a new connection
// create a new connection assuming theres a given func that does it
if(createConnection)
createConnection(startId, endId, startBlock.synchronized_channel || startBlock.name);
startBlock = undefined;
};
// create a connection if the user ended the drag on an input block,
// else just remove the temp svg line
function endDrag(d) {
//console.log('endDrag');
const {x, y} = d3.event;
if(Math.abs(startX - x) < 10 && Math.abs(startY - y) < 10) {
// click event not drag
} else {
// probably not a click event
d3.select('.tmp').remove();
// with the location of the end event,
// compare the location to the location & dims of all input blocks
// in the svg.
const endInput = Array.from(document.querySelectorAll('.iBlock'))
.find(n => {
const nx = n.x.baseVal.value;
const ny = n.y.baseVal.value;
const width = n.width.baseVal.value;
const height = n.height.baseVal.value;
return nx <= x && x <= nx + width && ny <= y && y <= ny + height;
});
if(endInput === undefined){
startBlock = undefined;
} else {
processEndBlock(endInput);
}
}
}
// create a connection if the user clicked an input block,
// else just reset the startBlock
function endClick() {
processEndBlock(this);
}
// update the temp line
......@@ -573,12 +604,16 @@ export default class GraphicalEditor extends React.PureComponent<Props, State> {
.attr('y2', d3.event.y);
}
d3.selectAll('.oBlock').call(
d3.selectAll('.oBlock')
.call(
d3.drag()
.on('start', startDrag)
.on('end', endDrag)
.on('drag', dragged)
);
d3.selectAll('.iBlock')
.on('click', endClick);
}, 50);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment