jerosoler
commented
2 years ago Hi!
Being an infinite canvas is difficult.
The only way I have finder is this:
Disabling the background to be draggable.
editor.on("clickEnd", () => {
editor.editor_selected = false;
})And adding a width to the child container.
#drawflow {
position: relative;
text-align:initial;
width: auto;
height: 800px;
border: 1px solid red;
overflow: auto;
}
.parent-drawflow .drawflow {
width: 3000px ;
height: 800px;
overflow: scroll;
position: absolute
}Here is the complet sample code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>
</head>
<div id="drawflow"></div>
<style>
#drawflow {
position: relative;
text-align:initial;
width: auto;
height: 800px;
border: 1px solid red;
overflow: auto;
}
.parent-drawflow .drawflow {
width: 3000px ;
height: 800px;
overflow: scroll;
position: absolute
}
</style>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.on("clickEnd", () => {
editor.editor_selected = false;
})
editor.force_first_input = true;
editor.start();
editor.addNode('aaa', 1, 1, 600, 200, 'aaa', {}, `aaa` );
editor.addNode('bbb', 1, 1, 850, 200, 'bbb', {}, `bbb` );
editor.addNode('ccc', 1, 1, 850, 370, 'ccc', {}, `ccc`);
editor.addConnection(1, 2, 'output_1', 'input_1');
editor.addConnection(2, 3, 'output_1', 'input_1');
editor.addNode('GROUP', 0, 0, 1200, 100, 'GROUP', { elements: []}, `` );
editor.addNode('GROUP', 0, 0, 0, 100, 'GROUP', { elements: []}, `` );
</script>
</body>
</html>
xaimepardal
How can I scroll horizontally?
I've tried this and it doesn't work for me, it only scrolls vertically. Issue #75
Thanks.