Giter VIP home page Giter VIP logo

Comments (9)

jerosoler avatar jerosoler commented on June 13, 2024

Hello,

It is not possible to have nodes outside the editor.

I've played around with this idea a bit. With the new :has css element we can do something.

I have limited the movement of the background.

Here the html code:

<!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 .parent-node:has(.drawflow-node.right) {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
        z-index: 2;
    }
    
    #drawflow .drawflow-node.right {
        right: 0px !important;
        top: 0px !important;
        left: auto !important;
        height: 100%;
        pointer-events: all;
        
    }

    #drawflow .parent-node:has(.drawflow-node.left) {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
        z-index: 2;
    }
    
    #drawflow .drawflow-node.left {
        left: 0px !important;
        top: 0px !important;
        height: 100%;
        pointer-events: all;
        
    }

    .drawflow, .drawflow .parent-node  {
        z-index: 1;
    }

  </style>
</head>
<body>
  <div>
    <div id="drawflow"></div>
  </div>
  <script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();

    editor.on("clickEnd", (e) => {
        editor.editor_selected = false;
    })
    
    editor.addNode("left", 0, 8, 150, 300, "left", {}, '');
    editor.addNode("right", 8, 0, 150, 300, "right", {}, '');

    editor.addNode("item", 1, 1, 150, 200, "item", {}, '');
    editor.addNode("item", 1, 1, 300, 300, "item", {}, '');
    editor.addNode("item", 1, 1, 700, 400, "item", {}, '');
    editor.addNode("item", 1, 1, 900, 700, "item", {}, '');
    editor.addNode("item", 1, 1, 500, 550, "item", {}, '');
  </script>
</body>
</html>

image

Try and tell me.

from drawflow.

jerosoler avatar jerosoler commented on June 13, 2024

View for link items to a simulate nodes in panels:

from drawflow.

chirstius avatar chirstius commented on June 13, 2024

Thanks for the quick response. This does get close but it's the same issue I had before, and maybe poorly represented above so here's a new image:
drawflow-fixed-nodes2

While this does allow individual nodes to be dragged "between" the outer nodes. I'd like to be able to move the "canvas" under everything but keep those outer nodes fixed in place. Maybe I've altered something else in my CSS if that is working for you, but maybe this gif better illustrates what I'm seeing. So at least initially this looks perfect - visually. But the two outer nodes get dragged along with the div.drawflow as it is translated, and ideally I'd like them to "stay" fixed always where they start.

Another sample of playing around "actively" moving a node (payload) back to (0,0) - translated as needed "opposite" to div.drawflow - to show more of what I am looking for. In this case I'm just hooking the drag end, and making a single move back to (0,0) but of course it works with the active drag event(s) as well, I just feel like that's so heavy-handed I'd prefer not to do it that way.

drawflow-fixed-nodes3

Am I missing/overriding something in my current CSS to not enable the "fixed" behavior (meaning are YOU seeing those outer nodes stay fixed at all times)? Or is there something else required to get the "sticky" behavior in the last gif within the editor?

Thanks again!

from drawflow.

jerosoler avatar jerosoler commented on June 13, 2024

You could listen to the "translate" event and get the "x" and "y" values. And do a translate of the left and right nodes.

from drawflow.

chirstius avatar chirstius commented on June 13, 2024

I'm using Vue - with nodes as their own components, and the editor in a "main" mapping canvas Component. I'm somewhat new to Vue - is there an easy way to access the editor instance in the "parent" to hook the translate event from child components? Should I add it as a property to be passed in to Nodes that need to remain "fixed"? or is there a more generic/simpler way I am missing? Apologies, I know this isn't a drawflow specific question

from drawflow.

chirstius avatar chirstius commented on June 13, 2024

Ok, this is where things are at - ignoring formatting within the INPUTS panel. I'm just passing the editor through via props and "undoing" any translation of the overall canvas to hold it in place. It's not ideal (I'd love to have it out of the translation flow entirely), but it does work.

I am also calling editor.updateConnectionNodes() to keep the connections all sorted. I do wish I could get rid of the jittering, but for now I think I can move forward with other things. Thank you for the help!

drawflow-fixed-nodes4

from drawflow.

jerosoler avatar jerosoler commented on June 13, 2024

Hi!

View new example with custom variables for positions.

04db3c9b-c518-4c15-a62a-19663d1ac6d3.mp4

Not flickering.

And Zoom panels fixed on left and right.

<!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>
    :root {
      --x: 0;
      --y: 0;
      --zoomRev: 1;
    }
    #drawflow {
      position: relative;
      width: 100%;
      height: 800px;
      border: 1px solid red;
    }

    #drawflow .parent-node:has(.drawflow-node.right) {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
        z-index: 2;
        transform: translate(calc(var(--x) * var(--zoomRev)), calc(var(--y) * var(--zoomRev))) scale(var(--zoomRev));
    }
    #drawflow .drawflow-node.right {
        right: 0px !important;
        top: 0px !important;
        left: auto !important;
        height: 100%;
        pointer-events: all;
        
    }
    #drawflow .parent-node:has(.drawflow-node.left) {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
        z-index: 2;
        transform: translate(calc(var(--x) * var(--zoomRev)), calc(var(--y) * var(--zoomRev))) scale(var(--zoomRev));
    }
    
    #drawflow .drawflow-node.left {
        left: 0px !important;
        top: 0px !important;
        height: 100%;
        pointer-events: all;
        
    }

    .drawflow, .drawflow .parent-node  {
        z-index: 1;
    }
  </style>
</head>
<body>
  <div>
    <div id="drawflow"></div>
  </div>
  <script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);

    editor.zoom_refresh = function(){
      this.canvas_x = (this.canvas_x / this.zoom_last_value) * this.zoom;
      this.canvas_y = (this.canvas_y / this.zoom_last_value) * this.zoom;
      this.zoom_last_value = this.zoom;
      this.precanvas.style.transform = "translate("+this.canvas_x+"px, "+this.canvas_y+"px) scale("+this.zoom+")";
      this.dispatch('zoom', this.zoom);
    }
  
    editor.start();  
    editor.on("translate", (pos) => {
      document.documentElement.style.setProperty('--x', pos.x*-1 + "px");
      document.documentElement.style.setProperty('--y', pos.y*-1 + "px");
      editor.updateConnectionNodes(`node-${NodeLeft}`)
      editor.updateConnectionNodes(`node-${NodeRight}`)
    })

    editor.on("zoom", (zoom) => {
      document.documentElement.style.setProperty('--zoomRev', 1/zoom);
      document.documentElement.style.setProperty('--x', editor.canvas_x*-1 + "px");
      document.documentElement.style.setProperty('--y', editor.canvas_y*-1 + "px");
      editor.updateConnectionNodes(`node-${NodeLeft}`)
      editor.updateConnectionNodes(`node-${NodeRight}`)
    });

    const NodeLeft = editor.addNode("left", 0, 8, 150, 300, "left", {}, '');
    const NodeRight = editor.addNode("right", 8, 0, 150, 300, "right", {}, '');

    editor.addNode("item", 1, 1, 150, 200, "item", {}, '');
    editor.addNode("item", 1, 1, 300, 300, "item", {}, '');
    editor.addNode("item", 1, 1, 700, 400, "item", {}, '');
    editor.addNode("item", 1, 1, 900, 700, "item", {}, '');
    editor.addNode("item", 1, 1, 500, 550, "item", {}, '');
  </script>
</body>
</html>

from drawflow.

chirstius avatar chirstius commented on June 13, 2024

You are a legend! I will look to incorporate this update once the holidays settle down. Thank you!

from drawflow.

chirstius avatar chirstius commented on June 13, 2024

Finally got to adding this all in and it works brilliantly. Thank you. Feel free to close this one out unless you have any other thoughts on it.

from drawflow.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.