GUI Pointer Issues

radicalappdev · July 20, 2023, 10:42am

I’ve run into an issue with GUI, perhaps because of what I’m trying to do.

I have a “main card window” card with several controls that will be interactive to open an additional card window. The control in the center of this card is a Rectangle with another control in side of it. The rectangle has onPointerEnterObservable and onPointerOutObservable events to create a hover effect.

The control is created in this file starting on line 93

github.com

radicalappdev/radical-canvatorium/blob/Lab047/utils/lab-examples.js

import { TextBlock, Image, Control, Rectangle, Button, Grid } from "babylonjs-gui";

// use toolbar
export const exampleToolbar = (activeIndex, computingData, scene) => {
  const handlePrevButtonClick = () => {
    let newIndex = activeIndex.value - 1;
    if (newIndex < 0) {
      newIndex = computingData.length - 1;
    }
    activeIndex.value = newIndex;
  };

  const handleNextButtonClick = () => {
    let newIndex = activeIndex.value + 1;
    if (newIndex > computingData.length - 1) {
      newIndex = 0;
    }
    activeIndex.value = newIndex;
  };

This file has been truncated. show original

When I click on the rectangle, I’m showing another plane with an ADT in front of the current one. That part works as expected, but because the new card appears in front of the old one, the onPointerOutObservable from the main card Rectangle never fires, leaving the control in a hovered state.

The issue starts when firing onPointerUpObservable on line 32

github.com

radicalappdev/radical-canvatorium/blob/Lab047/pages/labs/lab047.vue

<script setup>
  import { Vector3, Animation } from "babylonjs";
  import { TextBlock, Control } from "babylonjs-gui";
  import computingData from "@/data/computing.json";

  definePageMeta({
    featured: false,
    title: "Lab 047 - Modals, Dialogs, and Sheets",
    description: "Building a main window that will be used across a series of labs."
  });

  const createLabContent = async (scene) => {
    // Data and state at parent scope
    const activeIndex = ref(1);
    const activeRecord = computed(() => computingData[activeIndex.value]);

    const showModal = ref(false);

    const cam = scene.getCameraByName("camera");
    cam.position = new Vector3(0, 1.4, -2);

This file has been truncated. show original

Also, I’m not sure if this is caused by the issue above or a separate issue, but sometimes it is no longer possible to click on the rectangle after dismissing the modal card. Sometimes it works and sometimes I have to move the pointer and click elsewhere in the scene before trying again.

I’ve tried marking the ADT and the controls as dirty, but that didn’t help. I’ve also tried setting focusedControl to another control or to null.

Is there some other way to force a complete reset of the texture? Or a way to manually drop hover and focus from the rectangle?

You may be able to see the issue for yourself here. Click on the large rectangle with the description, then dismiss the modal that appears. Try it several times to see if it happens to you.
https://radical-canvatorium-git-lab047-radicalappdev.vercel.app/labs/lab047
(edited link to Lab 047)

carolhmj · July 20, 2023, 12:19pm

Hello! Are you able to isolate the issue on the Playground? It will be easier to see what’s going on. I tried interacting with the example page, but I’m not seeing anything to dismiss the page that appears when I click one of the examples:

Something that may work for your situation is simulating a pointer event with pick: Babylon.js/packages/dev/gui/src/2D/advancedDynamicTexture.ts at master · BabylonJS/Babylon.js (github.com)

radicalappdev · July 20, 2023, 1:16pm

Sorry, it looks like my link to the scene was wrong. It looks like you ended up at the lab template scene, but the problem is in Lab 047.

https://radical-canvatorium-git-lab047-radicalappdev.vercel.app/labs/lab047

I haven’t tried to reproduce this on a playground yet as it would involve significant modification of the code.

carolhmj · July 20, 2023, 1:50pm

Oh thanks for the link! Can you try setting the modal’s isPickable property to false when you close it? This should allow the pick events to pass through it and hit the back plane.

radicalappdev · July 20, 2023, 3:37pm

You pointed me in the right direction. isPickable should not be needed because the modal is supposed to be behind the card when it’s not active. The two cards are supposed to be switching positions. There was an error in my animation code that was placing the non-active modal card into the same z position of the active main card.

So that solves the picking issue, but the other issue remains.

When I click the rectangle on the main card, it still holds onto the hover state. When the modal card appears in front of the main, the onPointerOutObservable from the main card rectangle never fires, leaving the control in a hovered state.

On the rectangle, is there a way to call or force the onPointerOutObservable to run? Or a reliable way to “reset” the texture to its base state? I’ve tried markAsDirty() which doesn’t seem to do anything any more. That used to be my go-to method to reset an Advanced Dynamic Texture.

carolhmj · July 20, 2023, 8:25pm

You can make an observable fire by calling observable.notifyObservers(), so something like: edff | Babylon.js Playground (babylonjs.com) would work for you?

radicalappdev · July 20, 2023, 8:48pm

Ah! That is perfect! I didn’t know about notifyObservers. Thank you for all your help

radicalappdev · July 23, 2023, 10:58am

Thanks again for the help on this @carolhmj

I just published this lab if you want to see it in action.

mawa · July 23, 2023, 11:28am

That works pretty well. GJ

carolhmj · July 24, 2023, 11:15am

Yes, it looks very nice!