Ability to Paste into InputText Control

[BabylonJSGuide]

Feature request

http://www.html5gamedevs.com/topic/40661-gui-input-text-behavior/

Use of CTRL + V to paste into inputText control

Useful Site (?) https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

[deltakosh]

THanks sir ;)

[ssaket]

Hi @deltakosh and @BabylonJSGuide
please assign this to me :)

-Thanks

[deltakosh]

It is all yours:)

[BabylonJSGuide]

Go for it @ssaket

[ssaket]

After spending a productive day, this is the first prototype that I have come up with 💯

[ssaket]

It supports copy, paste, cut events (above)

[ssaket]

I have few doubts on system design, as a newbie its hard for me to figure out what's the best place to
define a new function, class etc. This is what I have done -

1. Created a new event class in Events called ClipboardEvents(just like Pointer/Keyboard )
2. Coming to the event listeners, my first thought was to define them in DynamicTexture (because AdvanceDynamicTexture inherits it,
   and has preKeyBoardObservable which basically listens to all events and from which I can later call my corresponding subclass.. blah blah blah.. )
   • Soon after, I realised its not a good idea as DynamicTexture basically deals with texture related things and also it is part of core module (I thought its best not to define clipboard events here and ActionManager's code is really complex! Phew!! ).
   • So, I decided to put them in GUI/controls (only events actions, registration happens in AdvanceDynamicTexture) (please correct me if it shouldn't)

One major impediment-
The typescript version which we are using doesn't support navigator.clipboard or
creation of custom ClipboardEvent( the constructor doesn't let us use clipboardData while init
reference ) because of this I had to take the long route (I kinda mutated them; possible area of improvement)
Happy to discuss this further :)

[deltakosh]

This is fantastic :)
Can you create a PR so we can discuss over it

[ssaket]

Thanks, Sure !

[ssaket]

@deltakosh - while working on this, I thought of a cool feature 🏷
Let's say on a PG, I found a golden sphere, which caught my interest 😍 then I decide to copy(ctr-c) it (sphere) to my clipboard and using (ctr-v) place it into some other/different scene.

In short -
Allow copy-pasting of meshes, or also generate a .babylon file using copy (ctr-c)

I think this will help the users to do fast prototyping by having a databank of files(.babylon) of their favourite meshes. Also, if I an drop (.babylon) files onto scene using (ctr-v) What do you think ? also adding @BabylonJSGuide

[deltakosh]

Hahaha. Not sure this is something we want in the framework as it looks pretty specific and hard to discover

[ssaket]

Fair enough.. but I still would add them in snippets 😃 after I solve my re-triangulation problem

Note* This patch can help only in copy and pasting within the ADT, users won't be able to use navigator's clipboard (); reasons:

1. Missing Navigator.clipboard (clipboard asynchronous API) microsoft/TypeScript#26728
2. document.execCommand("paste") is not supported in major browsers including mine.

[ssaket]

I have realised how silly my idea was !! 🙊 This can be done in 5 line outside the framework, using -

document.addEventListener("copy", (evt) => {
         let scene = this.scene;
         scene.pick(.....) //get the mesh
         let smesh = BABYLON.SceneSerializer.SerializeMesh(mesh);
          evt.clipboardData.setData("application/json", smesh )
}, false)

#feelingEmbarrassed

[deltakosh]

No worry:)

[deltakosh]

Would be ok to create a doc for it? Thanks a lot (with sanples in the playground)

[ssaket]

Yeah ! Already created a PR - https://github.com/BabylonJS/Documentation/pull/1309

[deltakosh]

You rock

[gernot-nu-IT]

is there a chance to get a method or property to select the text of the inputText if focused by default?

[ssaket]

@gernot-nu-IT not as of now, you have to manually add this in onFocusObservable; example- https://www.babylonjs-playground.com/#UWS0TS#22

Now that you have pointed it out, I think it makes sense to have a boolean property like onFocusSelectAll on input text which would allow this.

[gernot-nu-IT]

@ssaket yes, I think it would be quite useful. also, if text is highlighted (like in your playground example) and you start typing, the highlighted text should be replaced.

[deltakosh]

Agree!

[deltakosh]

Done!

[prithviMP]

is there an event listener for copy paste as i want to control how this are copied in the inputText