Comments (9)
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>
Try and tell me.
from drawflow.
View for link items to a simulate nodes in panels:
from drawflow.
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:
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.
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.
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.
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.
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!
from drawflow.
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.
You are a legend! I will look to incorporate this update once the holidays settle down. Thank you!
from drawflow.
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)
- Can we have a before node delete event in angular? HOT 2
- Cannot read properties of undefined (reading 'inputs') HOT 3
- After setting zoom out manually and then zoomrefresh() so the connected lines of each node gets disconnected. HOT 3
- When input type = "password" the node can't be drag from list HOT 4
- [question] How to dynamically add point? HOT 1
- How to lock the full screen nodes and move into the area HOT 1
- Component return click event goes out of the canvas HOT 1
- Mouse gets stuck when leaving parent container HOT 1
- How to do a right click context menu on the connection links HOT 2
- How to place Inputs/Outputs at top & bottom instead of left and right HOT 1
- how can distribute flow in 2 part HOT 4
- Any way to designate True/False outputs for custom nodes? HOT 1
- newest npm package HOT 5
- on Zoom out not able to see all the nodes in single view (Full view) if nodes were more HOT 4
- Reference error in VS Code HOT 3
- Possibility to embed widgets or plots in nodes ? HOT 1
- Draw flow Angular 17 HOT 3
- How Can i want to add label as vertical center of connection line and also add background and border radius on this HOT 8
- Unable to drag the Drawflow nodes when there is a large number of nodes with the connections. HOT 4
- Cannot drag and drop HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from drawflow.