On Safari + MacOS node drag not working

[akshayred]

Nodes created using my drupal module works fine on all other browsers except safari. When I initially add any node all of them get stacked on one another and you can't move them by dragging. While same thing works on other browsers.

I have everything updated. Please check the plugins and their versions which I am using.

https://cdn.jsdelivr.net/npm/[email protected]/build/rete.min.js: {type: external, minified: true} https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js : {type: external, minified: true} https://cdn.jsdelivr.net/npm/[email protected]/build/vue-render-plugin.min.js: {type: external, minified: true} https://cdn.jsdelivr.net/npm/[email protected]/build/connection-plugin.min.js: {type: external, minified: true} https://cdn.jsdelivr.net/npm/[email protected]/alight.min.js: {type: external, minified: true} https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js: {type: external, minified: true} https://cdn.jsdelivr.net/npm/[email protected]/build/context-menu-plugin.min.js: {type: external, minified: true} https://cdn.jsdelivr.net/npm/[email protected]/build/area-plugin.min.js: {type: external, minified: true} https://cdn.jsdelivr.net/npm/[email protected]/build/comment-plugin.min.js: {type: external, minified: true} https://cdn.jsdelivr.net/npm/[email protected]/build/history-plugin.min.js: {type: external, minified: true} https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js: {type: external, minified: true} https://unpkg.com/[email protected]: {type: external}

[Ni55aN]

I don't have the opportunity to test this in Safari. Could you send logs and value of the position property in each node?

[akshayred]

There is no errors on Safari. So can you please explain what log and position property you want me to add here and how can I access them?

[Ni55aN]

@akshayred you can print an editor from console and view its nodes property.

Perhaps you should to pass new Rete.Editor to window.editor

[akshayred]

@Ni55aN Position of node is 0,0

[Ni55aN]

Hm.. then I need to test live on Safari bacause I don't have device with Mac OS

[shazron]

I've been seeing this as well. One clue, when on Safari, when you select a node, it doesn't turn yellow like on Chrome.

e.g. here: https://rete.js.org/#/examples/basic

[shazron]

Update: this bug does not occur on Safari Technology Preview release 81 (I didn't test previous releases). Release 81 (Safari 12.2, WebKit 14608.1.19.5)

[shazron]

I managed to download older releases from the Wayback Machine: the examples started working from Safari Technology Preview release 78 and newer

[Ni55aN]

I think the problem in the Pointer events support

https://webkit.org/blog/8676/release-notes-for-safari-technology-preview-78/

[Ni55aN]

@akshayred try this polyfill https://github.com/Rich-Harris/Points

[shazron]

Tried this polyfill: https://github.com/Rich-Harris/Points/tree/master/release/0.1.1 and applied it to the website: https://github.com/retejs/rete.js.org (just added a script tag in the index.html)

Now the nodes in the examples can be selected (they turn yellow) but they are still not draggable.

[akshayred]

@Ni55aN , Yes you are correct. I did some debugging of rete and it is the pointer events which are not working in safari. I tried adding Point.js but it didn't worked. May be I did something wrong.

[shazron]

Ok, with <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script> it worked! So I think RIch Harris' pointer events polyfill may be buggy/incomplete since it was implemented 6 years ago...

https://github.com/jquery/PEP

[shazron]

with the polyfill, it works but not perfect. When removing a connection, it tends to select the nodes (like a text select) since the pointer turns into a text caret.

[makeitrein]

Safari 13 solves this problem!

https://developer.apple.com/documentation/safari_release_notes/safari_13_beta_release_notes

Added support for the Pointer Events API enabling consistent access to mouse, trackpad, touch, and Apple Pencil events.

You can download Safari Technology Preview @ https://developer.apple.com/safari/download/ to see it working live.

[shazron]

Yes, this is essentially what I found out earlier (and of course whatever is in the Safari TP will be for the next version). Unfortunately a lot of people will still use the older versions, and the polyfill doesn't work perfectly.

[rete-js[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.