ClipBoard events

[cj-dimaano]

So there's this thing:
https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent

and this related article:
https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

Basically what I want to do is use native DOM events for handling cut, copy, and paste; however, in order to do this, I need to use ClipboardEvent.clipboardData from the event payload and call setData and getData. The problem is that setData takes two arguments that are strings. In the method outlined in the article, and in other examples elsewhere, the clipboard data is serialized into a string to be passed by the DataTransfer object of the clipboard event payloads. What this means: if the graph editor component is to handle these clipboard events (as it should for reasons unrelated to @RighteousRaichu's main argument), then the graph editor needs access to the serializer.

There are a couple of other problems related to this as well; one of them is easily addressable. The first is that when copying nodes, DrawableGraph.createNode now needs an optional like parameter so that the node types can be appropriately copied. The second deals with cut. There are two approaches we can take for this. We can immediately delete the selected elements upon cut, or we can keep them around, e.g. the same way files are kept around, until the user pastes them to a new location. I prefer the former approach as it does not require DataTransfer to contain references to the previously selected stuff (side note: the selection needs to be cached, since the user might not immediately paste after a cut or copy, and the selection may change by the time a paste occurs).

Then there's the issue with paste. The data stored in DataTransfer has to be deserialized. Currently, the application only uses the serializer for files. Even if the graph editor had access to the serializer, it wouldn't be able to create graph elements with it since it would also need access to the GraphController. These are two issues that tie the graph editor closer to the IDE.

Why all the fuss? Using the native ClipboardEvent allows us to do things like what @Sheyne was requesting with pasting a node into the properties panel. It also allows us to do many other things like dropping a file into the editor. The DragEvent also uses this DataTransfer interface. I feel that if we nail down how to take advantage of this DataTransfer object, it would make our application more robust.

[Sheyne]

We might be able to get around the serialization issue by serializing the core bit to something like {referenceTo: 8281}. Not sure if that's best yet. We would need to keep track of old nodes if they were still in the clipboard but deleted.

[danielscottjames]

• For cutting, we should copy the data and then delete the nodes. Once you cut you can paste 0-many times.
• I agree serialization would be cool.
• There are so many problems with dealing with the clipboard in javascript. If you can get around all the problems then cool, but there's a reason I set it up like I did.
  • Make sure that the graph-editor doesn't steal all copy,paste,cut events and if a text box is highlighted then that gets the event.

[cj-dimaano]

Your third bullet point has been addressed. Clipboard events are only captured by the editor if it currently has focus (via hidden input ala the article in OP).

…

On Feb 21, 2017 12:11 PM, "Daniel James" ***@***.***> wrote: - For cutting, we should copy the data and then delete the nodes. Once you cut you can paste 0-many times. - I agree serialization would be cool. - There are so many problems with dealing with the clipboard in javascript. If you can get around all the problems then cool, but there's a reason I set it up like I did. - Make sure that the graph-editor doesn't steal all copy,paste,cut events and if a text box is highlighted then that gets the event. — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#155 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AVV1vGk0hD4Ewq1SS-OlS_0qU7O1u5qkks5rezbkgaJpZM4MHs2r> .

[danielscottjames]

I noticed look at other stuff that electron has better access to the clipboard than plain javascript, so we should try to use that: https://github.com/electron/electron/blob/master/docs/api/clipboard.md

Might help with #162

[Sheyne]

@ilargierdi Close?

[danielscottjames]

#315