onPointerEnter and onPointerLeave Timing Issue

Issue description: With high frequency, objects are left highlighted when the mouse moves into and out of the boundaries of an embedded view. The mouse is moving at a normal speed.

I have a view embedded into a main view a number of times. The embedded view is configured with an
onPointerEnter event which sends a highlightOn message and an onPointerLeave event which sends a highlightOff message. The the view then responds to this message by changing the href attribute of an SVG <use> element.

When I place print statements inside the onPointer events, the console frequently logs the exit event before the enter event. If this timing reflects the code execution, then I think this explains the root cause, however I do not know the best way to fix this issue. I have also removed all other code from the event scripts and only used print statements, with the same results.

My goal is to program reliable highlight control for my SVG objects.

Messages are always asynchronous, so there's no guarantee one message will be "heard" before some other. That being said, I would only expect this to be encountered during the absolute shortest of elapsed periods, where a user quickly entered and then exited the Embedded View. Is there a reason you don't just directly modify the value in the script, instead of using a message handler?

The message is used so that multiple conveyor segments can respond to the same equipment id. Say 'Conveyor 1' is composed of a straight segment and an elbow. When either segment throws a mouse event, both segments should highlight. Each segment is an embedded view. I have an id list view parameter that allows the message handler to determine if the highlight message applies to this particular view.

I wanted to also bring up the point I made about the console logs. I have print statements in the onPointer events, not in the message handler, and these print statements are logging in reverse order as well. Is the console output also asynchronous?

One last point, I have responsive mouse event logic attached to views that do some CSS animation and these operate as I expect. They only miss an event with very fast movement. These embedded views with SVGs are encountering issues very frequently.

I solved this issue with the following logic: Whenever the highlight-off message handler runs, start a medium-duration timer which clears the highlight when the timer is done.

  1. If the pointer events occur in the correct order then:

    • If the user does not try to re-highlight an object they just passed over, the system will work as intended
    • If the user goes back to an object that was just passed over, the clear timer will turn off a highlight that they wanted to see. In this case, give them a medium amount of time to see the highlight
  2. If the pointer events occur in reverse order, the highlight will remain on until the timer is done. This time can be made short to clean up the screen quickly, but it may cause confusion for users who go back to an object they passed over.

Here is the coding approach I used:

Add a timer to the view
Create a View Custom Object Property called highlight-reset with these members:

  • duration: 500
  • setpoint: 0
  • done: false

Place this expression binding on the done property:

  • now()>{view.custom.highlight-reset.setpoint}

Create a timer start logic
Add the following to the message handler that turns highlight off:

time = system.date.toMillis(system.date.now())
timer = self.view.custom['highlight-reset']
timer.setpoint = time + timer.duration

Create a timer done logic
Create this tag change script on the timer's done property:

	if currentValue.value:
        # add necessary logic to disable your highlight
    	self.params.highlight.enable = False

I updated my work around for highlights being stuck on. When a new object is highlighted, all other object highlights are turned off. This means only one object can ever have a highlight stuck on, and in that case it should be the last object moused-over.