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>

Swim lanes #746

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions