Dad72 Posted June 18, 2017 Share Posted June 18, 2017 Hello, Is it possible with BABYLON.GUI to move containers (drag drop). For example I would like to be able to move an image of a container and add it to another container. (To move an item from an inventory to an actionbar for example) I would also like to move a rectangle inside the canvas. Is this something possible now or is this something that can be added? I try to completely rewrite my SDK using BABYLON.GUI instead of appendChild() Thank you Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 19, 2017 Share Posted June 19, 2017 Hi Dad. Sorry to interrupt... but... during drag... would it be OK if dragged item... changed into little abs-position html element? Then, when dropped... re-creates advancedDynamicTexture (ADT) in new container (placed upon a mesh.material there). Would that work for you? During drag, dragged item is "tokenized" into something else... and stays that way until the drop is complete. *shrug* kbye again. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 19, 2017 Author Share Posted June 19, 2017 I'm not sure I understood your approach. Do you have an example on PG? Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 19, 2017 Share Posted June 19, 2017 No, I have no PG of that. I will try to explain better. You pointer-down on GUI item. When dragging starts... 1. Collect information about dragged item. Collect enough information to create a NEW item... exactly the same as dragged item. 2. Create absolute positioned html element at mouse pointer, and wire its CSS top/left... to mouse pointerX/Y. You will drag IT, and not GUI item. 3. Make dragged GUI item invisible. Don't drag it... just prepare it to be disposed if drop is successful. 4. When user drops the HTML element in the new location/container... RE-CREATE an exact copy of old invisible GUI item... in the new container. 5. Make the new created GUI item visible (it will be, by default). Make it flow/fit into new container properly. Then dispose old invisible GUI item from old location. 6. Delete HTML token at pointer. Drop was successful. See, you never dragged the GUI item. You faked it. You showed the user a "token" of the dragged item, but the actual GUI item... is not really dragged. Just a "token" of it, is dragged. It is a common practice in many things. For example, when you drag an image into Wordpad... you don't see the actual image... until the drop is done. Before the drop, while dragging... it is a white box (a token/proxy), I think. When dropped... boom, it becomes a picture again. Sorry. I should learn the correct terminology for these things. I'm too noob for the things I try to talk about. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 19, 2017 Author Share Posted June 19, 2017 There's some idea. I will try to see in the days that come what I can do with this idea. Thank you Wingnut Wingnut and GameMonetize 2 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 19, 2017 Share Posted June 19, 2017 My pleasure. You don't need to use HTML element for token/proxy. There are mouse pointer shapes (CSS cursor: stylerule) already designed-for dragging and OK-TO-DROP-HERE... and NO-DROP-ALLOWED-HERE... etc. Perhaps you could change pointer during drag... indicating that something is being "held". *shrug* And... you can use your own image.... for a mouse pointer. So you could make a pointer that is an image... a hand carrying a mesh in a basket... you know... something to tell the user that an item is being moved. And you could spray particles from the pointer arrow... when dragging an item. Pretty. Pretty ridiculous. Using a mesh as a token? Even an animated one? Can do... but you can't drag the token onto HTML areas. Mesh won't travel off-canvas. Abs-positioned html can travel anywhere on the page, including atop flash players and Windows Media Player embeds. (huh?) I think the "make your own pointer image"-method would work real nice... for your drag system, Dad. No need for abs-pos html. Just change pointer to be YOUR pointer image... when dragging something. You can change to a different pointer-picture... for NO-DROP-ALLOWED-HERE, too. Pretty easy. Dad72 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 19, 2017 Author Share Posted June 19, 2017 That seems good to me. I just saw that we have the event move, which will help me a lot. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 20, 2017 Share Posted June 20, 2017 Wingnut continues a conversation from another thread... talking about dragging GUI stuff. Here's my latest failure: http://www.babylonjs-playground.com/#XCPP9Y#127 Still testing. My 'diff' looks good at console, now. But... button won't update position... when pointer is down. (it seems) I try lines 60-61... trying to set button dirty, so framework will update. Nope. I try 34... no change. It seems... line 55/56 fails... while button is down. And it NEEDS to be down... for dragging. Goofy. No updating of button.left and button.top... when mouse button pressed. Crap. So close. Surely Wingnut mistake. Fun experimenting, though. I hope I'm not in-the-way, Dad. Maybe if Wingnut shuddup, DK would talk more, eh? Sorry. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 20, 2017 Author Share Posted June 20, 2017 Try this, I almost succeeded, it looks like the container is not fullscreen http://www.babylonjs-playground.com/#XCPP9Y#128 Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 20, 2017 Share Posted June 20, 2017 COOL!!! You got it! Yep... just some minor tweaks, remain. (Wingnut shakes your hand and pours raspberry koolaid for everyone.) Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 20, 2017 Author Share Posted June 20, 2017 I changed the container (line 24) and it seems better. http://www.babylonjs-playground.com/#XCPP9Y#129 But there is still a bug if we move too fast. And it returns to its original place. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 20, 2017 Share Posted June 20, 2017 Interesting. Perhaps we are setting .top and .left too fast. isDirty checker cannot keep-up. Update: Nope, both isDirty lines aren't needed. hmm. Update2: Button seems to think it didn't move, after dropping. So NEXT drag... snaps to 0,0 again, or something like that. Update3: Wingy needs lunch. Too much playing... forgot to eat. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 20, 2017 Author Share Posted June 20, 2017 I think this is a bug or not. "coordinates" is not updated. Whenever you move a first time, it's ok, but the next time, the center starts, so the button returns to the center. http://www.babylonjs-playground.com/#XCPP9Y#131 In this PG, I position the button higher and as one moves it, it returns to the center. It always leaves the center. I do not know why http://www.babylonjs-playground.com/#XCPP9Y#132 good meal Wingnut Quote Link to comment Share on other sites More sharing options...
adam Posted June 20, 2017 Share Posted June 20, 2017 http://www.babylonjs-playground.com/#XCPP9Y#133 better yet: http://www.babylonjs-playground.com/#XCPP9Y#134 Dad72, inteja and Wingnut 3 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 20, 2017 Author Share Posted June 20, 2017 Thanks Adam. It was almost there. It's cool, you can drag drop items BABYLON.GUI Wingnut 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 20, 2017 Share Posted June 20, 2017 This is really cool! For the sake of search I created a new PG with metadata: http://www.babylonjs-playground.com/#CNT1E0 inteja, Dad72 and Wingnut 3 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted June 21, 2017 Share Posted June 21, 2017 Notice how important diff became? When Deltakosh first used diff (in the drag'n'drop demo), he actually set a precedent (a standard) for all future onPointerMove handlers. But it actually started centuries ago, in the ancient lands of Differencia... based upon parchments written-by old Differencian scholars. Their civilization spent MOST of their waking hours... subtracting yesterday from today... trying to determine the diff between the two. Of course, the Differencian civilization died-out, due to extreme boredom. Yet, we owe them... for our new, cool, Babylon.GUI drag'n'drop. Hooray for Differencia! Long live diff ! heh. (Geez, my own goofy story nearly bored me to death) Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 21, 2017 Author Share Posted June 21, 2017 I made another PG which allows to move a rectangle with a picture inside. Even if you click on the image to move the rectangle, everything is moving inside the rectangle. This is useful for moving windows with elements inside (window of options, inventory ...) http://www.babylonjs-playground.com/#CNT1E0#1 I therefore use isHitTestVisible = false; On the layers that are in the Control to moved for its events to be taken into account. In short, a more concrete PG of Drag drop Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 21, 2017 Author Share Posted June 21, 2017 @Deltakosh: Would it be possible to have two new event: onPointerDragStartObservable onPointerDragEndObservable This would be very useful for the drag drop to know when an item is moving then stoping. Thanks DK Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 21, 2017 Share Posted June 21, 2017 I do not plan to support drag'n drop for now Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 21, 2017 Author Share Posted June 21, 2017 Well I will have to tweak with what exists Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 21, 2017 Share Posted June 21, 2017 But I added support for sprite in image http://doc.babylonjs.com/overviews/gui#image Dad72 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 21, 2017 Author Share Posted June 21, 2017 I'm not sure what that's all about? Not that it should not be useful, but in what cases can it be used? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted June 21, 2017 Share Posted June 21, 2017 You can use GUI with a sprite sheet now Quote Link to comment Share on other sites More sharing options...
Dad72 Posted June 21, 2017 Author Share Posted June 21, 2017 Ok, I see. I know what that is, except term. I have look on google to understand better GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.