Swim lanes - Githubissues

nbar10 commented 11 months ago

Does anyone know if it would be possible to add swim lanes. I have tried changing the background colour in the horizontal rows, but it all goes out the window when you zoom or move the entire flowchart. Effectively, the box needs to be inside the swim lane at all times, but we can't have html that spans multiple boxes.

jerosoler commented 11 months ago

Maybe I could save the value of the Zoom and the Canvas X and Y. So that they were css custom properties. To apply to the background?

nbarrett10 commented 11 months ago

So I would just set the properties when I zoom, or on initialisation, but either work, I think should work shouldn’t it?

nbar10 commented 11 months ago

Do you think you would be able to implement that soon?

jerosoler commented 11 months ago

@nbar10 It will not be implemented in the library.

nbar10 commented 11 months ago

Ok no problem, but would it be possible for some example code to override the existing? Thanks

jerosoler commented 11 months ago

By adding a background image, it doesn't go off track when zooming or moving the canvas.

<!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 .drawflow {
        background-image: url(https://img.officetimeline.com/website/Content/website/swimlane-diagram/swimlane-process-map-example.svg);
        background-repeat: no-repeat;
      }
      </style>
  </head>
  <body>
    <div>
        <div id="drawflow"></div>  
    </div>
    <script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();
    editor.addNode('test1', 1, 1, 50, 25, 'test1', {}, '<div>Test</div>');
</script> 
  </body>
</html>

Other example only Zoom with custom variables and react background with css.

<!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;
        --zoom: 1;
        background: transparent;
        background-size: calc(50px * var(--zoom))  calc(50px * var(--zoom));
        background-position: center;
        background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);

      }
      </style>
  </head>
  <body>
    <div>
        <div id="drawflow"></div>  
    </div>
    <script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();
    editor.addNode('test1', 1, 1, 50, 25, 'test1', {}, '<div>Test</div>');
    editor.on("zoom", (value) => {
        editor.container.style.setProperty("--zoom", value);
    });
</script> 
  </body>
</html>

jerosoler / Drawflow

Swim lanes #746