search

jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.41k stars 713 forks source link

After setting zoom out manually and then zoomrefresh() so the connected lines of each node gets disconnected. #852

Closed neelphilips closed 1 month ago

neelphilips commented 2 months ago

Hello Jerosoler, I have implemented this in angular.My issue is after setting zoom out manually and then zoomrefresh() so the connected lines of each node gets disconnected as you can see in below image1:-

Capture

and now if just select nodes and move them anywhere the lines of nodes will get connects as you can see in image2:-

Capture2

https://github.com/jerosoler/Drawflow/assets/131708799/44515e8d-8323-4e94-bf11-1b982b971e5c

this is my code:- createChart() { this.id = document.getElementById("drawflow"); this.editor = new Drawflow(this.id); this.registerEvents(this.editor); this.editor.reroute = true; this.editor.drawflow = this.orderWorkFlowDataObject.flowChartData; this.editor.curvature = 0; this.editor.reroute_curvature_start_end = 0; this.editor.reroute_curvature = 0; this.editor.createCurvature = function (start_pos_x: any, start_pos_y: any, end_pos_x: any, end_pos_y: any, curvature_value: any, type: any) { let angle = 15; const stroke = 2; // === stroke CSS. const input_distance = 10; const fix_arrow_distance = 10; const min_x_distance = 45; const x = start_pos_x + input_distance; const y = start_pos_y; const end_x = end_pos_x - fix_arrow_distance; const end_y = end_pos_y; const center_x = ((end_x - x) / 2) + x; const center_y = ((end_y - y) / 2) + y; const distance_x = end_x - x; const distance_y = end_y - y; let minX = false; let line = ''; if (distance_x <= min_x_distance) { minX = true; } if (end_y > y) { //Down Lines if (distance_y <= angle 2) { angle = distance_y / 2; } if (minX) { if (distance_y <= angle 4) { angle = distance_y / 4; } line += M ${x} ${y} L ${x + min_x_distance - angle} ${y} A ${angle} ${angle} 1 0 1 ${x + min_x_distance} ${y + angle} L ${x + min_x_distance} ${center_y - angle} A ${angle} ${angle} 1 0 1 ${x + min_x_distance - angle} ${center_y} L ${end_x - min_x_distance} ${center_y} A ${angle} ${angle} 1 0 0 ${end_x - min_x_distance - angle} ${center_y + angle} L ${end_x - min_x_distance - angle} ${end_y - angle} A ${angle} ${angle} 1 0 0 ${end_x - min_x_distance} ${end_y} L ${end_x} ${end_y} ; } else { line += M ${x} ${y} L ${center_x - angle} ${y} A ${angle} ${angle} 1 0 1 ${center_x} ${y + angle} L ${center_x} ${center_y} L ${center_x} ${end_y - angle} A ${angle} ${angle} 1 0 0 ${center_x + angle} ${end_y} L ${end_x} ${end_y} ; } } else { // UP Lines if (distance_y -1 <= angle 2) { angle = distance_y -1 / 2; } if (minX) { if (distance_y -1 <= angle 4) { angle = distance_y -1 / 4; } line += M ${x} ${y} L ${x + min_x_distance - angle} ${y} A ${angle} ${angle} 1 0 0 ${x + min_x_distance} ${y - angle} L ${x + min_x_distance} ${center_y + angle} A ${angle} ${angle} 1 0 0 ${x + min_x_distance - angle} ${center_y} L ${end_x - min_x_distance} ${center_y} A ${angle} ${angle} 1 0 1 ${end_x - min_x_distance - angle} ${center_y - angle} L ${end_x - min_x_distance - angle} ${end_y + angle} A ${angle} ${angle} 1 0 1 ${end_x - min_x_distance} ${end_y} L ${end_x} ${end_y} ; } else { line += M ${x} ${y} L ${center_x - angle} ${y} A ${angle} ${angle} 1 0 0 ${center_x} ${y - angle} L ${center_x} ${center_y} L ${center_x} ${end_y + angle} A ${angle} ${angle} 1 0 1 ${center_x + angle} ${end_y} L ${end_x} ${end_y} ; } } let arrow = M ${end_x + 0.5} ${end_y + 0.5} L ${end_x - 10} ${end_y - 10} M ${end_x + 0.5} ${end_y - 0.5} L ${end_x - 10} ${end_y + 10}; switch (type) { case 'open': return line; break case 'close': return line + arrow; break case 'other': return line; break default: return line + arrow; break; } return line + arrow; } this.editor.zoom = 0.6; this.editor.start(); this.editor.zoom_refresh(); const elements = document.getElementsByClassName("drag-drawflow"); for (let i = 0; i < elements.length; i++) { elements[i].addEventListener("touchend", this.drop, false); elements[i].addEventListener("touchmove", this.positionMobile, false); elements[i].addEventListener("touchstart", this.drag, false); } const drawflowElements: any = document.getElementsByClassName("drawflow"); for (var i = 0; i < drawflowElements.length - 1; i++) { drawflowElements[i].classList.add('display-none'); } }

### And this my css file if needed:-

drawflow {

position: relative; width: 100%; height: 100%; }

@media only screen and (max-width: 768px) { .col { width: 50px; } .col .drag-drawflow span { display: none; }

drawflow {

width: 100%;

} }

/ Editing Drawflow / .drawflow .drawflow-node { display: flex; align-items: center; position: absolute; z-index: 2; background: var(--background-color); border: 1px solid var(--border-color); -webkit-box-shadow: 0 2px 15px 2px var(--border-color); box-shadow: 0 2px 15px 2px var(--border-color); padding: 0px; width: 200px; color: var(--color); }

.drawflow .drawflow-node.selected { background: var(--color); border: 1px solid var(--border-color); -webkit-box-shadow: 0 2px 20px 2px var(--border-color); box-shadow: 0 2px 20px 2px var(--border-color); }

.drawflow .drawflow-node.selected .title-box { color: var(--background-color); background: var(--border-color); border-bottom: 1px solid var(--border-color); }

.drawflow .connection .main-path { stroke: var(--border-color); stroke-width: 3px; }

.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { height: 15px; width: 15px; border: 2px solid var(--border-color); }

.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { background: var(--border-color); }

.drawflow .drawflow-node .output { right: 10px; }

.drawflow .drawflow-node .input { left: -10px; background: var(--color); }

.drawflow > .drawflow-delete { border: 2px solid #43b993; background: var(--color); color: #43b993; -webkit-box-shadow: 0 2px 20px 2px #43b993; box-shadow: 0 2px 20px 2px #43b993; }

.drawflow-delete { border: 2px solid var(--border-color); background: var(--color); color: var(--border-color); -webkit-box-shadow: 0 2px 20px 2px var(--border-color); box-shadow: 0 2px 20px 2px var(--border-color); }

.drawflow-node .title-box { height: 50px; line-height: 50px; background: var(--background-box-title); / border-bottom: 1px solid var(--border-color); / border-radius: 4px 4px 0px 0px; padding-left: 10px; }

.drawflow .title-box svg { position: initial; }

.drawflow-node .box { padding: 10px 20px 20px 20px; font-size: 14px; color: var(--color); }

.drawflow-node .box p { margin-top: 5px; margin-bottom: 5px; }

.drawflow .drawflow-node.selected .box { color: var(--background-color); }

.drawflow-node.welcome { width: 250px; }

.drawflow-node.slack .title-box { border-radius: 4px; }

.drawflow-node input, .drawflow-node select, .drawflow-node textarea { border-radius: 4px; border: 1px solid var(--border-color); height: 30px; line-height: 30px; font-size: 16px; width: 158px; color: #555555; }

.drawflow-node textarea { height: 100px; }

.drawflow-node.personalized { background: red; height: 200px; text-align: center; color: var(--color); }

.drawflow-node.personalized .input { background: yellow; }

.drawflow-node.personalized .output { background: green; }

.drawflow-node.personalized.selected { background: blue; }

.drawflow .connection .point { stroke: var(--border-color); stroke-width: 2; fill: var(--color); transform: translate(-9999px, -9999px); }

.drawflow .connection .point.selected, .drawflow .connection .point:hover { fill: var(--border-color); }

/ -------------------------------------------------------------------------------- / / -------------------------------------------------------------------------------- / / -------------------------------------------------------------------------------- / / -------------------------------------------------------------------------------- /

.drawflow, .drawflow .parent-node { position: relative; }

.parent-drawflow { display: flex; overflow: hidden; touch-action: none; outline: 0; }

.drawflow { width: 100%; height: 100%; user-select: none; }

.drawflow .drawflow-node:hover { cursor: move; }

.drawflow .drawflow-node .inputs, .drawflow .drawflow-node .outputs { width: 0; }

.drawflow .drawflow-node .drawflow_content_node { width: 100%; display: block; }

.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { position: relative; width: 20px; height: 20px; background: #fff; border-radius: 50%; border: 2px solid #000; cursor: crosshair; z-index: 1; margin-bottom: 5px; }

.drawflow .drawflow-node .input { left: -27px; top: 2px; background: #ff0; }

.drawflow .drawflow-node .output { right: -3px; top: 2px; }

.drawflow svg { z-index: 0; position: absolute; overflow: visible !important; }

.drawflow .connection { position: absolute; transform: translate(9999px, 9999px); }

.drawflow .connection .main-path { fill: none; stroke-width: 5px; stroke: var(--border-color); transform: translate(-9999px, -9999px); }

.drawflow .connection .main-path:hover { stroke: #1266ab; cursor: pointer; }

.drawflow .connection .main-path.selected { stroke: #43b993; }

.drawflow .connection .point { cursor: move; stroke: #000; stroke-width: 2; fill: #fff; transform: translate(-9999px, -9999px); }

.drawflow .connection .point.selected, .drawflow .connection .point:hover { fill: #1266ab; }

.drawflow .main-path { fill: none; stroke-width: 5px; stroke: var(--border-color); }

.drawflow .selectbox { z-index: 3; position: absolute; transform: translate(9999px, 9999px); }

.drawflow .selectbox rect { fill: #00f; opacity: 0.5; stroke: #ff0; stroke-width: 5; stroke-opacity: 0.5; transform: translate(-9999px, -9999px); }

.drawflow-delete { position: absolute; display: block; width: 30px; height: 30px; background: #000; color: #fff; z-index: 4; border: 2px solid #fff; line-height: 30px; font-weight: 700; text-align: center; border-radius: 50%; font-family: monospace; cursor: pointer; }

.drawflow > .drawflow-delete { margin-left: -15px; margin-top: 15px; }

.parent-node .drawflow-delete { right: -15px; top: -15px; } // igx-display-container{ // top:0px !important // } .sap{ margin: 10px 0px; } .drag-drawflow{

line-height: 20px; border: 1px solid #e2e2e2; padding: 5px 5px; margin: 5px 0px; border-radius: 5px; transition: 0.6s; } .drag-drawflow:hover{

background-color: #afdde7; }

.drag-drawflow i{ background-color: #e9e9e9; padding: 10px; border-radius: 5px; transition: 0.6s; }

.drag-drawflow:hover i{
background-color: #afdde7; }

Thank you in advance

jerosoler commented 2 months ago

It should work.

Since in these two cases it works:

neelphilips commented 2 months ago

Thank you for your response. I had already gone through all of your example which you have attached above but nothing has work in my scenario as you can see my code is custom made. This solution works:- editor.start() editor.zoom_out(); editor.zoom_out(); editor.zoom_out(); editor.zoom_out();

but the thing is at the first time drawflow is created so zoom value is this. zoom: 0.6000000000000001 zoom_last_value: 0.6000000000000001

as soon as i dont made any changes in drawflow and save that same changes again so the value of zoom gets changes zoom: 0.40000000000000013 zoom_last_value: 0.40000000000000013

so in this case i have used by setting it manual:- this.editor.start(); this.editor.zoom = 0.6000000000000001; this.editor.zoom_last_value = 0.6000000000000001; this.editor.zoom_refresh();

so the value of zoom does not changes but the thing is the connected lines get distorted as you can see in the video below.

https://github.com/jerosoler/Drawflow/assets/131708799/ad13a4f1-8415-4c75-9467-9441b1ed2c62

neelphilips commented 2 months ago

Hi jerosoler, If you get any other method to solve this issue as mentioned above so please let me know but as for now I have used zoom reset method while saving data which has solved my issue.