search

jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.42k stars 714 forks source link

Re-arrange nodes position to look better view #781

Open vnomohan opened 8 months ago

vnomohan commented 8 months ago

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.

jerosoler commented 8 months ago

View:

Form move canvas to node:

vnomohan commented 8 months ago

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.

jerosoler commented 8 months ago

View this comment

vnomohan commented 8 months ago

thanks for the reply. im trying with the circle for nodes.

Screenshot 2023-11-09 at 1 33 59 AM

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.

jerosoler commented 8 months ago

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>
vnomohan commented 7 months ago

Thank you so much ! great app and great support!

vnomohan commented 7 months ago

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

Screenshot 2023-11-23 at 1 24 41 AM

after moved a bit the nodes, the connector sit in correcti position.

Screenshot 2023-11-23 at 1 29 22 AM
vnomohan commented 7 months ago

anyone?

jerosoler commented 7 months ago

Force update conections with:

editor.updateConnectionNodes('node-4');
vnomohan commented 7 months ago

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;
}`
jerosoler commented 7 months ago

Try with a settimeout, the new style may not be loaded yet.

Others problems with style:

vnomohan commented 7 months ago

omg how im missed this...timeout...you are the saviour ! thanks man!