search

jerosoler / Drawflow

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

connection line leaving their positions (input and output too) while dragging it extremally up or down #379

Closed VanuDev closed 2 years ago

VanuDev commented 2 years ago

Hi Jerosoler,

Your plugin is awesome its very useful.

I am facing issue with connection line when I drag to extremally up direction or down direction specially in chrome browser

Kindly check the attached video.

Please provide me solution for this issue it will be grateful for me.

https://user-images.githubusercontent.com/102649306/160770257-08e57626-c539-4ffc-a7bc-981dd4f74483.mp4

jerosoler commented 2 years ago

The demo is not last version of css. Do you have the latest version of css?

Similar issue:

VanuDev commented 2 years ago

Hi,

Thank you for reply I am using latest version (version": "0.0.55) of plugin.

When I set zoom 80% then connection line position will fix but when I want to create new connection the mouse pointer and line both are going far from each other (this part also cover in the video).

This is happing in the chrome browser only. In the Firefox I don't have to set zoom setting it is working perfectly there.

Please suggest any setting (code) that we can do for chrome browser only.

Thanks

jerosoler commented 2 years ago

Why version of chrome?

Test with: Versión 99.0.4844.82

https://user-images.githubusercontent.com/30957047/160775618-0ac6ce58-391a-4701-9f74-c24ac151ef29.mp4

VanuDev commented 2 years ago

Hi,

Thanks for demo.

I am using Version 100.0.4896.60 (Official Build) (64-bit) of chrome.

Can you please provide me plugin that you are using (showing in video) so that we can use it and let you know.

Thanks

jerosoler commented 2 years ago

It is the default template.

Try if you get the error with this.

<!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>

<style>
  #drawflow { 
    position: relative;
    text-align:initial;
    width: 100%;
    height: 800px;
    border: 1px solid red;
  }

</style>
</head>
<body>
<div id="drawflow"></div>

<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);

    editor.reroute = true;
    editor.reroute_fix_curvature = true;

    editor.start();
    const dataToImport = {"drawflow":{"Home":{"data":{"1":{"id":1,"name":"welcome","data":{},"class":"welcome","html":"\n    <div>\n      <div class=\"title-box\">👏 Welcome!!</div>\n      <div class=\"box\">\n        <p>Simple flow library <b>demo</b>\n        <a href=\"https://github.com/jerosoler/Drawflow\" target=\"_blank\">Drawflow</a> by <b>Jero Soler</b></p><br>\n\n        <p>Multiple input / outputs<br>\n           Data sync nodes<br>\n           Import / export<br>\n           Modules support<br>\n           Simple use<br>\n           Type: Fixed or Edit<br>\n           Events: view console<br>\n           Pure Javascript<br>\n        </p>\n        <br>\n        <p><b><u>Shortkeys:</u></b></p>\n        <p>🎹 <b>Delete</b> for remove selected<br>\n        💠 Mouse Left Click == Move<br>\n        ❌ Mouse Right == Delete Option<br>\n        🔍 Ctrl + Wheel == Zoom<br>\n        📱 Mobile support<br>\n        ...</p>\n      </div>\n    </div>\n    ","typenode": false, "inputs":{},"outputs":{},"pos_x":50,"pos_y":50},"2":{"id":2,"name":"slack","data":{},"class":"slack","html":"\n          <div>\n            <div class=\"title-box\"><i class=\"fab fa-slack\"></i> Slack chat message</div>\n          </div>\n          ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1028,"pos_y":87},"3":{"id":3,"name":"telegram","data":{"channel":"channel_2"},"class":"telegram","html":"\n          <div>\n            <div class=\"title-box\"><i class=\"fab fa-telegram-plane\"></i> Telegram bot</div>\n            <div class=\"box\">\n              <p>Send to telegram</p>\n              <p>select channel</p>\n              <select df-channel>\n                <option value=\"channel_1\">Channel 1</option>\n                <option value=\"channel_2\">Channel 2</option>\n                <option value=\"channel_3\">Channel 3</option>\n                <option value=\"channel_4\">Channel 4</option>\n              </select>\n            </div>\n          </div>\n          ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1032,"pos_y":184},"4":{"id":4,"name":"email","data":{},"class":"email","html":"\n            <div>\n              <div class=\"title-box\"><i class=\"fas fa-at\"></i> Send Email </div>\n            </div>\n            ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"5","input":"output_1"}]}},"outputs":{},"pos_x":1033,"pos_y":439},"5":{"id":5,"name":"template","data":{"template":"Write your template"},"class":"template","html":"\n            <div>\n              <div class=\"title-box\"><i class=\"fas fa-code\"></i> Template</div>\n              <div class=\"box\">\n                Ger Vars\n                <textarea df-template></textarea>\n                Output template with vars\n              </div>\n            </div>\n            ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"6","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"4","output":"input_1"},{"node":"11","output":"input_1"}]}},"pos_x":607,"pos_y":304},"6":{"id":6,"name":"github","data":{"name":"https://github.com/jerosoler/Drawflow"},"class":"github","html":"\n          <div>\n            <div class=\"title-box\"><i class=\"fab fa-github \"></i> Github Stars</div>\n            <div class=\"box\">\n              <p>Enter repository url</p>\n            <input type=\"text\" df-name>\n            </div>\n          </div>\n          ","typenode": false, "inputs":{},"outputs":{"output_1":{"connections":[{"node":"5","output":"input_1"}]}},"pos_x":341,"pos_y":191},"7":{"id":7,"name":"facebook","data":{},"class":"facebook","html":"\n        <div>\n          <div class=\"title-box\"><i class=\"fab fa-facebook\"></i> Facebook Message</div>\n        </div>\n        ","typenode": false, "inputs":{},"outputs":{"output_1":{"connections":[{"node":"2","output":"input_1"},{"node":"3","output":"input_1"},{"node":"11","output":"input_1"}]}},"pos_x":347,"pos_y":87},"11":{"id":11,"name":"log","data":{},"class":"log","html":"\n            <div>\n              <div class=\"title-box\"><i class=\"fas fa-file-signature\"></i> Save log file </div>\n            </div>\n            ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"5","input":"output_1"},{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1031,"pos_y":363}}},"Other":{"data":{"8":{"id":8,"name":"personalized","data":{},"class":"personalized","html":"\n            <div>\n              Personalized\n            </div>\n            ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"12","input":"output_1"},{"node":"12","input":"output_2"},{"node":"12","input":"output_3"},{"node":"12","input":"output_4"}]}},"outputs":{"output_1":{"connections":[{"node":"9","output":"input_1"}]}},"pos_x":764,"pos_y":227},"9":{"id":9,"name":"dbclick","data":{"name":"Hello World!!"},"class":"dbclick","html":"\n            <div>\n            <div class=\"title-box\"><i class=\"fas fa-mouse\"></i> Db Click</div>\n              <div class=\"box dbclickbox\" ondblclick=\"showpopup(event)\">\n                Db Click here\n                <div class=\"modal\" style=\"display:none\">\n                  <div class=\"modal-content\">\n                    <span class=\"close\" onclick=\"closemodal(event)\">&times;</span>\n                    Change your variable {name} !\n                    <input type=\"text\" df-name>\n                  </div>\n\n                </div>\n              </div>\n            </div>\n            ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"8","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"12","output":"input_2"}]}},"pos_x":209,"pos_y":38},"12":{"id":12,"name":"multiple","data":{},"class":"multiple","html":"\n            <div>\n              <div class=\"box\">\n                Multiple!\n              </div>\n            </div>\n            ","typenode": false, "inputs":{"input_1":{"connections":[]},"input_2":{"connections":[{"node":"9","input":"output_1"}]},"input_3":{"connections":[]}},"outputs":{"output_1":{"connections":[{"node":"8","output":"input_1"}]},"output_2":{"connections":[{"node":"8","output":"input_1"}]},"output_3":{"connections":[{"node":"8","output":"input_1"}]},"output_4":{"connections":[{"node":"8","output":"input_1"}]}},"pos_x":179,"pos_y":272}}}}}
    editor.import(dataToImport);

</script>

</body>
</html>
VanuDev commented 2 years ago

Hi Jerosoler, Thank for the reply, I tried above code, however I am facing same issue on the chrome browser. kindly check the screenshot.

Thanks

Screenshot 2022-03-30 chrome

Screenshot 2022-03-30 firefox

jerosoler commented 2 years ago

I am testing with the latest version of chrome.

But I don't get the error.

Are you using browser zoom? image

If so, in what percentage?

jerosoler commented 2 years ago

I have been doing tests and with the browser zoom it seems that it misaligns.

Option 1 I have found this solution:

  .drawflow .connection {
   aspect-ratio: 1 / 1;
  }

Zoom Browser: 75% Without aspec-ratio

image

Zoom Browser 75% with aspect-ratio: image

Option2 Another solution I have found is to put a with and a really big height to the svg.

.drawflow .connection {
    width: 1000000px;
    height: 1000000px;
}
VanuDev commented 2 years ago

Hi,

You are awesome, provided solutions (css) are working perfectly.

Thank you for your support 👍

jerosoler commented 2 years ago

Add aspec-ratio in version 0.0.56

VanuDev commented 2 years ago

Hi Jerosoler,

how we can add auto arrange node feature in drawflow?

Kindly check the attached video for your reference...

https://user-images.githubusercontent.com/102649306/177474544-f14b369b-ab5e-405b-8b13-1637cd9038dc.mp4

jerosoler commented 2 years ago

Hi @VanuDev

Please do not use a closed issue. This issue has nothing to do with your comment.

View for move nodes.