jerosoler
Re-arrange nodes position to look better view
Hi there, is there any function to re-arrange the nodes x,y position after user drag/drop in the canvas. So that there will be no overlapping nodes each other
second question, how to automatically adjust the zoom in /out of the nodes in the canvas so that it will fit into it
Note: just started exploring the angular2 with Drawflow...awesome Thanks.
Thanks jerosoler ! We will check on this and get back to you.
Another quick question - is there any css to change the node shape - circle, hexagon or any others. And i dnt want all are same shapes, onlye certain nodes is required in that shapes.
View this comment
- https://github.com/jerosoler/Drawflow/issues/454#issuecomment-1154762914
thanks for the reply. im trying with the circle for nodes.
found that it is break the css. also lagging. i want similar to the other node. like border circle and inside circle div different color. Also specific nodes required the connector different color. example 5 main nodes connector is orange. 3 subnode connector with purple color. So that it will be easier to differentiate which is main and subnode.
Example with circle node:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css" />
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
<style>
#drawflow {
position: relative;
width: 100%;
height: 800px;
border: 1px solid red;
}
.drawflow-node.round {
border-radius: 50%;
width: 100px;
height: 100px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.drawflow-node.orange {
background-color: orange;
}
.drawflow-node.orange .outputs .output {
background: orange;
}
</style>
</head>
<body>
<div>
<div id="drawflow"></div>
</div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
editor.addNode('round', 1, 1, 50, 25, 'round orange', {}, 'Round');
</script>
</body>
</html>
hi jerosoler,
i have implemented theme changes accordingly for user taste. the themes can be changed and the nodes colors are changing. however the node connector seems not joined properly whenever change the themes.
i need to drag or move the node upper a bit or down to make it connect correctly. Please let me know how to handle this situation.
after theme changed
after moved a bit the nodes, the connector sit in correcti position.
yes above is what i have done initially. but no different.
`theme(styleName: any): void { const head = this.document.getElementsByTagName('head')[0] as HTMLHeadElement; let themeLink = this.document.getElementById('workflow-theme') as HTMLLinkElement; let cssFileNm = styleName.toLowerCase();
if (themeLink) {
themeLink.href = `assets/workflow/css/${cssFileNm}.css`;
} else {
const style = this.document.createElement('link') as HTMLLinkElement;
style.id = 'workflow-theme';
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = `assets/workflow/css/${cssFileNm}.css`;
head.appendChild(style);
}
this.editor.updateConnectionNodes("node-1");
this.editor.updateConnectionNodes("node-2");
this.editor.updateConnectionNodes("node-3");
this.editor.updateConnectionNodes("node-4");
this.currentTheme = styleName;
}`
Try with a settimeout, the new style may not be loaded yet.
Others problems with style:
- https://github.com/jerosoler/Drawflow/issues/708