pawelrojek / nextcloud-drawio

Draw.io intergration app
https://apps.nextcloud.com/apps/drawio
GNU Affero General Public License v3.0
227 stars 60 forks source link

Collaborative Editing #14

Open her001 opened 7 years ago

her001 commented 7 years ago

Thanks for your work on this app!

Is it possible for collaborative editing to be enabled? Or is that something that must be raised with draw.io themselves? If it could be done, what sort of work would that entail?

andersruneson commented 7 years ago

Hmm, is there anything preventing two users overwriting each others changes currently, like some sort of lock?

@her001 It may actually be possible with the draw.io-component, if one uses the "autosave" feature, that sends an event every time something is moved, added or changed. But I'm not sure that is enough.

her001 commented 7 years ago

Well this is a feature when drawio is linked to Google Drive, if I remember correctly. We could probably take a look at that implementation to have similar functionality in Nextcloud.

steineiche commented 7 years ago

Auch von mir einen herzlichen Dank für diese App in Nextcloud. Ich würde mir auch sehr wünschen, die collaborative Bearbeitung zu ermöglichen. Steht das bereits auf dem Plan zur Umsetzung?

mr-gosh commented 5 years ago

Indeed this was the idea behind our test - but with a missing colaborative feature this is not worth installing it into nextcloud i think... :(

davidjgraph commented 5 years ago

Google Drive deprecated their real time system, so we're writing a replacement that isn't dependent on any particular system. Currently, it needs if-match/etag header support on the file to work.

BThiebaut commented 5 years ago

Hi, there are news about this feature ? We have installed this on our nextcloud but it could be dangerous if we work with a shared diagram if there is not live update. We don't want to override colleague work accidentally :°

skynick11 commented 5 years ago

We don't want to override colleague work accidentally :°

Yes, you're right, several users can open the same file at the same time in Draw.io App - in this case "the last save wins". Also Nextcloud doesn't have a locking feature to prevent overwrites in such situations and its developers don't like to implement it...

But there is a workaround: to check before saving whether the file has been changed in a storage since it was opened in the editor or since the last save and notify the user in this case.

Could it be possible to implement something like this workaround?

davidjgraph commented 5 years ago

diff-sync model merging is implemented in draw.io. That basically allows arbitary data models to be merged together. This can either be used for RT collaboration, or to detect that the saved file has changed and to merge the two files together.

We can point out how to invoke this functionality, but how this works in NextCloud, I have no idea.

skynick11 commented 5 years ago

but how this works in NextCloud, I have no idea

I also don’t know how, but I know where it works in NextCloud: it's possible to open the same .txt or .md file twice in the Nextcloud text editor (in different browser tabs), after that "the first save wins" - the editor in the other tab saying "Cannot save file as it has been modified since opening".

This may be an autosave feature, of course, but it could be at least some kind of starting point.

yrammos commented 5 years ago

Oh dear, just as we were thrilled to discover this wonderful app… Sadly, no collab functionality.

ColaIan commented 4 years ago

Any cool people can contribute and add this collaborative editing functionality please 🙏

camherry commented 4 years ago

I installed this application on our Nextcloud infrastructure. I thought collaborative editing was native, but it seems not, just like other if collaborative editing can't be installed so it's not useful for me

vision-ken commented 3 years ago

A temporary solution is to install the Temporary files lock application.

sualko commented 3 years ago

Also Nextcloud doesn't have a locking feature to prevent overwrites in such situations and its developers don't like to implement it...

I think this information is outdated. OCP\Files\File is throwing an lock exception so there should be some kind of lock possible. Looking further I think OCP\Files\Node::lock() is looking promising.

skynick11 commented 3 years ago

Also Nextcloud doesn't have a locking feature to prevent overwrites in such situations and its developers don't like to implement it...

I think this information is outdated. OCP\Files\File is throwing an lock exception so there should be some kind of lock possible. Looking further I think OCP\Files\Node::lock() is looking promising.

At this moment my information about locks is only partially outdated: Nextcloud stills have no WebDAV locks and its developers still not like to implement it.

Yes, OCP\Files\Node::lock() (and "Temporary files lock" application mentioned by vision-ken which uses it) can lock a file, and it will be locked for webdav access for other users too, but it's still impossible to lock/unlock a file from the webdav side.

Also, in case of "Temporary files lock" the same user is still be able to modify the same file by two or more applications at the same time (for example, edit it in one tab/in one browser and overwrite it in another tab/in another browser). I don't know, is it possible to lock a file on a per-running-process basis, not only on per-user basis?

But OCP\Files\Node::lock() is much better then nothing.

sualko commented 3 years ago

After thinking more about this, even the OCP\Files\Node::lock() would require some extra work to ensure that there are no dangling locks in case someone closes the browser etc. Maybe it's easier to remember the modification time and warn the user that the file has changed in the meanwhile. Maybe the app could also show a dialog which allows the user to save his changes with a new filename.

davidjgraph commented 3 years ago

Do files (where diagrams are stored) have etag support?

sualko commented 3 years ago

Do files (where diagrams are stored) have etag support?

They have. Good idea. That would be more standard confirm than the mdate.

githubkoma commented 3 years ago

perhaps embed-mode could also help? https://desk.draw.io/support/solutions/articles/16000042544

i am not 100% sure, but i think they use this mechanism for the real time collaboration in google drive etc

looks like there is even: {action: 'merge', xml: '...'} can be sent at any time to merge the contents of the given XML into the current file, an {event: 'merge', error: '...', message: ...} with the incoming message and an optional error is returned. If the merge was successful, then the error is null.

Source²: https://github.com/jgraph/drawio-integration

davidjgraph commented 3 years ago

Collab is done via a diff-sync model client-side. In the case of Google Drive we add a delta cache so clients can sync with the lowest bandwidth needed to make the change, but it still works syncing from the full file.

But if you're already using embed mode, that's the method by which you enable collab editing. I think we added this for th VSCode extension people, but they didn't use it. Does the current implementation use embed mode, anyone know?

githubkoma commented 3 years ago

Does the current implementation use embed mode, anyone know?

a) Yes, looks like embed mode is being used, much of the JS-Interaction seems to happen here: https://github.com/pawelrojek/nextcloud-drawio/blob/master/drawio/js/editor.js

b) The guys at nextcloud/text use a continous background sync that returns a diff every X seconds, and when another person changes a text from abcde to abcdeTEST, the return data looks like this:

Request URL: https://xyz.de/nextcloud/apps/text/session/sync { "steps": [ { "id": 182, "data": [ { "stepType": "replace", "from": 6, "to": 6, "slice": { "content": [ { "type": "text", "text": "TEST" } ] } } ], "version": 46, "sessionId": 4 } ], "sessions": [ { "id": 4, "userId": null, "token": null, "color": "#9750a4", "lastContact": 1613259977, "guestName": "Okra", "documentId": 35940 }, { "id": 3, "userId": "xxx", "token": null, "color": "#6ea68f", "lastContact": 1613259991, "guestName": null, "documentId": 35940, "displayName": "xxx" } ], "document": { "id": 35940, "currentVersion": 46, "lastSavedVersion": 46, "lastSavedVersionTime": 1613259988, "baseVersionEtag": "6cb1dea6014809bcc2df1889692754e5", "initialVersion": 0 } }

see https://github.com/nextcloud/text/blob/master/appinfo/routes.php

c) ~@davidjgraph could you throw a hint how to make postMessage(JSON.stringify({action: 'merge', xml: '...'})); work? when i tried it in the browser console, it just inserted another page like "Page-1" with almost duplicate entities in it..~ (see below)

Boffice commented 3 years ago

@githubkoma Websockets can fix timing issue example: https://socket.io/.

degoya commented 3 years ago

Collab editing is really needed to make draw.io usefull in NextCloud. Hope it will be implemented soon.

githubkoma commented 3 years ago

Hey @davidjgraph , do you think its possible to implement that specific diff-sync: https://neil.fraser.name/writing/sync/ -> "4 Guaranteed Delivery Method" + "5 Topology" ?

You have recommendations for reliable Diff/Patch/Edit Libraries in PHP & Javascript?

(Or any other major hints, or Code how its implemented for Google Drive?)

davidjgraph commented 3 years ago

Sure, it's possible, if you've 2-3 months full-time spare to learn the codebase and implement it :).

githubkoma commented 3 years ago

Dear @davidjgraph regarding manual & auto sync as described in https://www.diagrams.net/doc/faq/synchronize

Is there more information available, on how that works in more detail? Does it also work in embed mode, that this nextcloud app uses?

perhaps it can be adapted to work here..

nooblag commented 3 years ago

I hope collaborative editing is built for this app soon 👍

MaykGyver commented 1 year ago

Here's the perfect description of a perfect feature: https://drawio-app.com/real-time-multi-user-collaborative-diagramming/ ... but for diagrams stored in nextcloud. All approaches with "save first, save last, ask for confirmation" are unlikely to be accepted by non-technical end users. I hope to find some time for further research soon.

arnowelzel commented 1 year ago

JFTR: Collaborative editing is available now for a while. You can close this issue.

image

thmo commented 1 year ago

But this uses the diagrams.net server? Is there a way to do it with a self-hosted server?

arnowelzel commented 1 year ago

No this is not possible yet, because this requires an additional service for the data exchange required by the collaboration which is not provided by a self-hosted server (yet?).

thibaultmol commented 1 year ago

But this uses the diagrams.net server? Is there a way to do it with a self-hosted server?

I think that is indeed the main point of this issue

arnowelzel commented 1 year ago

Then please rename the issue to "Collaborative editing with self hosted server" - because collaborative editing is possible with your own Nextcloud server using this app, just not with a self-hosted Draw.io/Diagram.net server.

arnowelzel commented 1 year ago

Also keep in mind:

THIS REPOSITORY IS NOT MAINTAINED ANY LONGER! PLEASE MOVE TO https://github.com/jgraph/drawio-nextcloud/

And there is already an issue about that: https://github.com/jgraph/drawio-nextcloud/issues/45

thmo commented 1 year ago

There's also https://github.com/jgraph/docker-drawio not sure to what extent it provides real-time collab.

arnowelzel commented 1 year ago

The real-time collaboration is a service provided by the creators of Diagram.net using Cloudflare. There is no self-hosting solution for this. Also see the ticket I mentioned above.

thmo commented 1 year ago

https://github.com/jgraph/docker-drawio/tree/dev/self-contained#real-time-collaboration

arnowelzel commented 1 year ago

Quote:

draw.io supports real-time collaboration with Google Drive and Microsoft OneDrive. In order to enable this feature, you need to a real-time notification service (we support pusher.com and AWS IoT). This docker compose file is set to use AWS IoT. You need to follow the instructions in etc/mxPusher folder to setup a lambda function for temporary keys as well as setting a role for that lambda function.

So I don't think that this will help for the Nextcloud integration - except if you consider getting an AWS EC2 instance for this or a paid account at pusher.com still as "self hosting". And I am not sure if "Google Drive" and "Microsoft OneDrive" can be substituted with Nextcloud.

thmo commented 1 year ago

Agreed, so let's keep this issue here open.

arnowelzel commented 1 year ago

This repository is not maintained any longer! Nobody will pick this up and work on it!

You may want to open a new issue at https://github.com/jgraph/drawio-nextcloud/issues

thibaultmol commented 1 year ago

Done