Comments (8)
If you don't want to wait @mcantonbul
You can add a new function for example this:
editor.addReroutePoint = function(pos_x, pos_y, output_id, input_id, output_class_name, input_class_name) {
const nodeUpdate = output_id;
const nodeUpdateIn = input_id;
const output_class = output_class_name;
const input_class = input_class_name;
const point = document.createElementNS('http://www.w3.org/2000/svg',"circle");
point.classList.add("point");
/*var pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
var pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));*/
point.setAttributeNS(null, 'cx', pos_x);
point.setAttributeNS(null, 'cy', pos_y);
point.setAttributeNS(null, 'r', editor.reroute_width);
const ele = document.querySelector('.connection.node_in_node-'+input_id+'.node_out_node-'+output_id+'.'+output_class+'.'+input_class);
ele.appendChild(point);
const nodeId = nodeUpdate;
const searchConnection = editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections.findIndex(function(item,i) {
return item.node == nodeUpdateIn && item.output === input_class;
});
if(editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections[searchConnection].points === undefined) {
editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections[searchConnection].points = [];
}
editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections[searchConnection].points.push({ pos_x: pos_x, pos_y: pos_y });
console.log(editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections[searchConnection].points);
editor.dispatch('addReroute', nodeId);
editor.updateConnectionNodes('node-'+nodeUpdate);
}
And use:
editor.addReroutePoint(800,300,7,3,'output_1', 'input_1')
Test with
editor.reroute_fix_curvature = false;
from drawflow.
Thank you so much. @jerosoler
from drawflow.
Hello @nodegin
Try changin this line:
const search_point = Array.from(ele.children).indexOf(ele.children[0])
This line add in first position.
Try adding in the las position.
Jero
from drawflow.
@jerosoler Thanks! It works after changing children[0] to children[children.length - 1]
from drawflow.
I will look to modify the functions so that they can be added and deleted.
createReroutePoint
and removeReroutePoint
from drawflow.
@jerosoler Could you please update the addReroutePoint
to support when reroute_fix_curvature = true
?
I am experiencing buggy reroute position when adding if reroute_fix_curvature is false (default), once reroute_fix_curvature is true, the reroute point is appended normally at the desired position on the line.
But when reroute_fix_curvature is true, using addReroutePoint to restore the data is not showing what it should be... Thanks
from drawflow.
Hello @nodegin
Try
editor.addReroutePoint = function(pos_x, pos_y, output_id, input_id, output_class_name, input_class_name) {
const nodeUpdate = output_id;
const nodeUpdateIn = input_id;
const output_class = output_class_name;
const input_class = input_class_name;
const point = document.createElementNS('http://www.w3.org/2000/svg',"circle");
point.classList.add("point");
/*var pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
var pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));*/
point.setAttributeNS(null, 'cx', pos_x);
point.setAttributeNS(null, 'cy', pos_y);
point.setAttributeNS(null, 'r', editor.reroute_width);
const ele = document.querySelector('.connection.node_in_node-'+input_id+'.node_out_node-'+output_id+'.'+output_class+'.'+input_class);
let position_add_array_point = 0;
if(editor.reroute_fix_curvature) {
const numberPoints = ele.querySelectorAll(".main-path").length;
var path = document.createElementNS('http://www.w3.org/2000/svg',"path");
path.classList.add("main-path");
path.setAttributeNS(null, 'd', '');
ele.insertBefore(path, ele.children[numberPoints]);
if(numberPoints === 1) {
ele.appendChild(point);
} else {
const search_point = Array.from(ele.children).indexOf(ele.children[0])
position_add_array_point = search_point;
ele.insertBefore(point, ele.children[search_point+numberPoints+1]);
}
} else {
ele.appendChild(point);
}
const nodeId = nodeUpdate;
const searchConnection = editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections.findIndex(function(item,i) {
return item.node == nodeUpdateIn && item.output === input_class;
});
if(editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections[searchConnection].points === undefined) {
editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections[searchConnection].points = [];
}
if(editor.reroute_fix_curvature) {
//console.log(position_add_array_point)
if(position_add_array_point > 0) {
editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections[searchConnection].points.splice(position_add_array_point, 0, { pos_x: pos_x, pos_y: pos_y });
} else {
editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections[searchConnection].points.push({ pos_x: pos_x, pos_y: pos_y });
}
ele.querySelectorAll(".main-path").forEach((item, i) => {
item.classList.remove("selected");
});
} else {
editor.drawflow.drawflow[editor.module].data[nodeId].outputs[output_class].connections[searchConnection].points.push({ pos_x: pos_x, pos_y: pos_y });
}
editor.dispatch('addReroute', nodeId);
editor.updateConnectionNodes('node-'+nodeUpdate);
}
from drawflow.
Hello @jerosoler , I tried your snippet but seems the lines become wrong after restore...
from drawflow.
Related Issues (20)
- How to translate Node [QUESTION] HOT 1
- Issue for this.editor.createCurvature in angular HOT 10
- dynamic value added in input field is not avalible in export HOT 1
- How to disable movement of a Node [QUESTION] HOT 1
- How Can i show cross icon using click instated of right click. In line between two node HOT 4
- How can i make only single input and single output for all node. HOT 7
- drawflow NODES connections HOT 7
- Adding event listener to button inside drawflow node HOT 1
- Suggestion to get exact mouse position
- "view" editor mode disables translate click/drag HOT 2
- Is it possible to create a drawflow connection with a different curvature than the others? HOT 1
- Can we have a before node delete event in angular? HOT 2
- Cannot read properties of undefined (reading 'inputs') HOT 3
- After setting zoom out manually and then zoomrefresh() so the connected lines of each node gets disconnected. HOT 3
- When input type = "password" the node can't be drag from list HOT 4
- [question] How to dynamically add point? HOT 1
- How to lock the full screen nodes and move into the area HOT 1
- Component return click event goes out of the canvas HOT 1
- Mouse gets stuck when leaving parent container HOT 1
- How to do a right click context menu on the connection links HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from drawflow.