Creation of InputTextArea component #11710
Conversation
|
Cool that you are finishing it, let me know if you need help. |
There was a problem hiding this comment.
Wow, thank you so much for the. Such a wonderful addition to the GUI!
I have a few comments. The code should be cleaned and formatted, but those are minor issues.
My bigger question is this - I noticed you implemented yourself backspace, delete and so on. This is, eventually, a 3d-controlled <textarea> element. Why not use a textarea as the backend of this component and allow the browser to do the heavy-lifting of text editing?
|
I also wait for @DarraghBurkeMS's review to test the actual functionality. |
What about Native if using a textarea HTML element under the hood? |
That's a good point. @bghgary , is there some corresponding element to be used, or does the functionality needs to be (re) implemented? |
|
I'm not Gary, but: I don't think we can depend on any external text area implementation in Babylon Native. One of the critical design choices is that it's "bring your own UI", so we can't rely on any particular one of the many cross-platform UI solutions out there. The goal AFAIK is to implement enough of the canvas API that we can support Babylon GUI, but Babylon Native has no plans to support any DOM features (at that point we'd be making a browser.) From my POV, having a Babylon GUI text area brings a lot of value, but it's also worth keeping in mind that it will probably be significantly harder to maintain than our existing controls. That being said, I love that you've taken a stab at it, and I'll definitely give it a try later this week :) |
|
Totally aligned with @darraghjburke : no external dependencies beside just canvas API |
Maybe @CedricGuillemet can answer this part. In general, I'm also curious if there are any localization concerns with this change. |
|
Thanks a lot for all your feedbacks, I'll fix that later in the week! |
Hard to tell without testing. At the current state, (basic) text and shape rendering will work. Idk if any unimplemented method is needed here. |
|
@Valerian-Perez-Wanadev : @fneitzel is interested to contribute to your PR. Do you mind opening your branch for his PR? Anyway I recommend the 2 of you to chat as your code is based on @fneitzel one |
|
Would love to see this merged! This is a perfect fit for our project... |
Co-authored-by: Raanan Weber <raananw+github@gmail.com>
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Snapshot stored with reference name: Test environment: To test a playground add it to the URL, for example: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/11710/merge/index.html#WGZLGJ#4600 Links to test babylon tools with this snapshot: https://playground.babylonjs.com/?snapshot=refs/pull/11710/merge To test the snapshot in the playground with a playground ID add it after the snapshot query string: https://playground.babylonjs.com/?snapshot=refs/pull/11710/merge#BCU1XR#0 |
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Snapshot stored with reference name: Test environment: To test a playground add it to the URL, for example: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/11710/merge/index.html#WGZLGJ#4600 Links to test babylon tools with this snapshot: https://playground.babylonjs.com/?snapshot=refs/pull/11710/merge To test the snapshot in the playground with a playground ID add it after the snapshot query string: https://playground.babylonjs.com/?snapshot=refs/pull/11710/merge#BCU1XR#0 |
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Snapshot stored with reference name: Test environment: To test a playground add it to the URL, for example: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/11710/merge/index.html#WGZLGJ#4600 Links to test babylon tools with this snapshot: https://playground.babylonjs.com/?snapshot=refs/pull/11710/merge To test the snapshot in the playground with a playground ID add it after the snapshot query string: https://playground.babylonjs.com/?snapshot=refs/pull/11710/merge#BCU1XR#0 |
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Snapshot stored with reference name: Test environment: To test a playground add it to the URL, for example: https://babylonsnapshots.z22.web.core.windows.net/refs/pull/11710/merge/index.html#WGZLGJ#4600 Links to test babylon tools with this snapshot: https://playground.babylonjs.com/?snapshot=refs/pull/11710/merge To test the snapshot in the playground with a playground ID add it after the snapshot query string: https://playground.babylonjs.com/?snapshot=refs/pull/11710/merge#BCU1XR#0 |
I will have to edit the changelog afterwards, as it is generated automatically, but i'd be happy to do that. Please remind me after the next version is merged :-) Also a request regarding this PR - we will need to update the documentation with this new feature. Adding one or two working examples will also be wonderful. Will you be able to do that? |
I'll do that 👍 And my local PG has some beautiful examples! |
|
@Valerian-Perez-Wanadev I'd be happy to help out with the docs (I've been using the component for a few weeks already) |
Based on fneitzel prototype (Added prototype of InputTextArea), I improved the component to support the margin, the deletion (backspace/del.), the highlighting, deadkeys and copy/paste/cut shortcuts.
A lot of things remained to do :
My approach was highly naïve, so maybe a cleaner architecture will be necessery.