Gdevelop: Object name can't be selected

Created on 18 Feb 2020  路  15Comments  路  Source: 4ian/GDevelop

Describe the bug

When editing the name of an object, the text cannot be selected with the mouse. Instead, it drags the object.
image

Not happening with groups, scenes and layers.

馃憣good first issue 馃槫Non optimal UI behavior

Most helpful comment

@jimil749 Yes feel free to also take a look! :)

@geetesh-gupta:

If you see for _onRenameObject in the SceneEditor/index.js file, you'll find:
https://github.com/4ian/GDevelop/blob/ec9a629124947cf4bc45114052cf5652ae3bfc94/newIDE/app/src/SceneEditor/index.js#L986

Ok, so this is a prop in the <ObjectsList component. So let's find the prop in the ObjectsList file. It's declared there:
https://github.com/4ian/GDevelop/blob/8eede20b07968c2fb07ec815d240d064fc767328/newIDE/app/src/ObjectsList/index.js#L81-L85

But where is this called? Let's search in the file:
https://github.com/4ian/GDevelop/blob/8eede20b07968c2fb07ec815d240d064fc767328/newIDE/app/src/ObjectsList/index.js#L308

It's in a function called _rename... but when is this function called? Let's search in the file:
https://github.com/4ian/GDevelop/blob/8eede20b07968c2fb07ec815d240d064fc767328/newIDE/app/src/ObjectsList/index.js#L546

It's in a component <SortableVirtualizedItemList... let's see where it's implemented. It's in this file: https://github.com/4ian/GDevelop/blob/949f370118e8f04bd5491310e1a62e22611601f0/newIDE/app/src/UI/SortableVirtualizedItemList/index.js

At this moment we've been digging a bit into components. We want to disable dragging when renaming is done? Surely this component must know which item of the list is being renamed, otherwise how can it even show it? Well turns out that the component has a prop:
https://github.com/4ian/GDevelop/blob/949f370118e8f04bd5491310e1a62e22611601f0/newIDE/app/src/UI/SortableVirtualizedItemList/index.js#L25

and when searching how this props is used, what do we find? We find the code to render an item and something interesting...
https://github.com/4ian/GDevelop/blob/949f370118e8f04bd5491310e1a62e22611601f0/newIDE/app/src/UI/SortableVirtualizedItemList/index.js#L100-L118

We find that is declaring that this item is drag'n'droppable. Now let's do a bit of research about what is this DragSourceAndDropTarget and if we can say to it "don't be draggable when renaming is active". There are surely multiple solution, let's try to find the simplest. (I'll let you search from now on :)).

All 15 comments

I also had this issue with functions. IDK if it was fixed.

Can i try to work on this issue?

Sure feel free to go ahead and give it a try!

Hey @4ian should we stop the dragging feature while renaming ?

Yes that's probably a solution!

can you please tell me what technologies are used for gui?

@BoldHonor Please inspect the code by yourself :) It's actually the very first line of one README file.

Hey @PascalLadalle I am unable to figure out at which part you are facing this error. Can you pinpoint from where I can reproduce the error?

This is the list of objects that is on the right when you're editing a scene.

@4ian Can I work on this issue?

Sure, no need to ask for permission :) Though saying "I'm trying this" and/or "Finally I'm moving to something else" is useful to avoid multiple persons doing the same :)
If you get a fix working well, you can then open a PR.

Hi @4ian Can you guide me where the rename function is actually implemented? I have reached to the SceneEditorindex.js. There _onRenameObject() function is there that is supposed to be called whenever rename is done but I am unable to figure out where the actual renaming is happening.

Hey @4ian, is it fine that even I ponder into the issue, that way I'll be able to explore and understand the code-base.

@jimil749 Yes feel free to also take a look! :)

@geetesh-gupta:

If you see for _onRenameObject in the SceneEditor/index.js file, you'll find:
https://github.com/4ian/GDevelop/blob/ec9a629124947cf4bc45114052cf5652ae3bfc94/newIDE/app/src/SceneEditor/index.js#L986

Ok, so this is a prop in the <ObjectsList component. So let's find the prop in the ObjectsList file. It's declared there:
https://github.com/4ian/GDevelop/blob/8eede20b07968c2fb07ec815d240d064fc767328/newIDE/app/src/ObjectsList/index.js#L81-L85

But where is this called? Let's search in the file:
https://github.com/4ian/GDevelop/blob/8eede20b07968c2fb07ec815d240d064fc767328/newIDE/app/src/ObjectsList/index.js#L308

It's in a function called _rename... but when is this function called? Let's search in the file:
https://github.com/4ian/GDevelop/blob/8eede20b07968c2fb07ec815d240d064fc767328/newIDE/app/src/ObjectsList/index.js#L546

It's in a component <SortableVirtualizedItemList... let's see where it's implemented. It's in this file: https://github.com/4ian/GDevelop/blob/949f370118e8f04bd5491310e1a62e22611601f0/newIDE/app/src/UI/SortableVirtualizedItemList/index.js

At this moment we've been digging a bit into components. We want to disable dragging when renaming is done? Surely this component must know which item of the list is being renamed, otherwise how can it even show it? Well turns out that the component has a prop:
https://github.com/4ian/GDevelop/blob/949f370118e8f04bd5491310e1a62e22611601f0/newIDE/app/src/UI/SortableVirtualizedItemList/index.js#L25

and when searching how this props is used, what do we find? We find the code to render an item and something interesting...
https://github.com/4ian/GDevelop/blob/949f370118e8f04bd5491310e1a62e22611601f0/newIDE/app/src/UI/SortableVirtualizedItemList/index.js#L100-L118

We find that is declaring that this item is drag'n'droppable. Now let's do a bit of research about what is this DragSourceAndDropTarget and if we can say to it "don't be draggable when renaming is active". There are surely multiple solution, let's try to find the simplest. (I'll let you search from now on :)).

Thanks @4ian for such a great explanation. It will help a lot in solving the problem. I will now try to further dig into the files to find the optimal solution.

Was this page helpful?
0 / 5 - 0 ratings