Not working graph about connect-it HOT 15 CLOSED

I apologize. Since this was my first commit, something went wrong and I didn't realize it. I will try to start from the beta version next time...

I solved the problem. Please update the library to latest version (v1.0.2).

P.S.: And I also didn’t quite understand if there is a refresh command in this library.

No need to refresh, just import the library in your HTML:
<script src="./node_modules/connect-it/dist/connect-it.js" defer></script>

Maybe you need to include also the old library: https://github.com/n-yousefi/Arg-Graph?
No, this library is completely independent

Thank you for registering this issue and please let me know if your problem is not solved.

from connect-it.

Thank you for responding so promptly.
I updated the library, but the error did not go away.
I connected the script as you said: <script src="/assets/connect-it/dist/connect-it.js" defer="defer"></script>
Replaced files with the method: delete - unpack again. I checked that everything was replaced on the server. Cleared the cache. The browser cache is disabled. The error remains.

from connect-it.

Your posted html is fine see this demo: https://playcode.io/972425
Please share your full code (html and css) in playcode so I can check it out.

from connect-it.

I have a very large module using the twig templating engine and a very large number of different scripts, css and libraries. Some of them automatically pull data from the server and on this basis create elements in the DOM tree. Bootstrap is actively used (including select and datepicker). Somewhere 3 versions, and somewhere 4 and even 5.
While removing the files on my local machine, I found out that the problem was in the Bootstrap library and its wrapper. If the related files are removed, then everything works. But I can’t remove them from all projects for the sake of one module out of a dozen, and sometimes hundreds of others. And the module that I am developing now is a universal solution.

By analogy with your code, I tried to implement my module (the part that can be saved in open form) + bootstrap, but for some reason the project does not see the jQuery library, no matter how I tried to connect it. On the local machine, it doesn't throw any errors.
https://playcode.io/972539 - that's what happens. From this it is clear how I use bootstrap and, perhaps, this will already help solving the problem, rather than I will sit for another hour and figure out why jQuery is not connected to playcode.io.

from connect-it.

I really liked that the library is easy to use, lightweight and customizable. This is what I just need in my module. It remains to make friends with Bootstrap.

from connect-it.

I also couldn't detect the jQuery problem in playcode, but I downloaded your code from playcode and didn't see any errors. It seems that the graph is drawn without problems.

from connect-it.

And I still have Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'x'). I'll try to do something with it a little later and then I'll write what happened.

from connect-it.

The problem is that when the page is initialized, the block with the graph is hidden. For it (<div class="tab-pane" id="blades_block" role="tabpanel" aria-labelledby="blades_tab">) the active class is not set and, accordingly, the style works:

.tab-content > .tab-pane {
     display: none;
}

and the connect-it library fails. If you immediately specify the class tab-pane active, then everything works correctly. But this behavior is undesirable, since the first step is to fill out the form on the first tab.

from connect-it.

I think re-registering the component caused the problem. I gave a new version to solve this problem, please update and tell me the result.

from connect-it.

Hello. I updated the library, but still the connect-it library doesn't work. The error hasn't changed.
I will insert a crutch that, after loading the page, will remove the active class from the desired block for correct operation. But if you manage to solve the problem, then I will update the library and remove my bad code for solving it.

from connect-it.

Another problem has surfaced. I don’t know whether to write here or create a new issue. The library generates an svg element that has absolute positioning relative to the page, not the block in which its elements are located. As a result, no clickable elements work on pages (buttons are not pressed, etc.) that are outside the block with the library. Elements inside this block remain clickable.
Resolved by the property position: relative; in the parent block. But this should be written in the documentation.

from connect-it.

The problem is that when the page is initialized, the block with the graph is hidden.

Fortunately, I was able to simulate the problem and notice the bug. I will try to give a new update soon to fix these two bugs.
Again, thank you very much for pointing out the bugs.

from connect-it.

@Olleandra Please update to the latest version. Your problems should be solved.

from connect-it.

Hello. Thanks a lot. The error is gone. But the arrows are still drawn only if the parent block has the class tab-pane active. At the moment it suits me.
I'm really looking forward to new versions of the library, in which drag and drop and other interesting things will appear.

from connect-it.

from connect-it.