UnitedLexCorp / SimpleTalk

An implementation of HyperTalk in Ohm-js
Apache License 2.0
7 stars 1 forks source link

Interactive Targeting v1 #204

Closed darth-cheney closed 3 years ago

darth-cheney commented 3 years ago

What

This PR implements a new Halo button and mode of interaction that allows us to visually and interactively set the target of one part to be another part.

Implementation

How to do it

The Halo now has a "target" button. Click this will put the system into "target mode," as indicated by the crosshair cursor. Hovering over any other visible part will turn that part red, indicating that you can click it to establish it as the target part. If you wish to cancel targeting mode, hit the escape key.

Once established, the correct value will be set in the original Part's target property and can be used as normal.

Halo Targeting Handlers

The implementation includes several handlers and methods on PartView that Halo will call in order to toggle targeting mode. Most of the interaction deals with adding and removing handlers, in particular enter, leave, and click events. Note that in targeting mode, mouse enter will remove the default click event and mouseleave will add it back. This is to prevent the original click action from triggering (on buttons, for example) when binding the element as a target.

Testing

We need to just test this ourselves since there is so much complex mouse interaction. So far it's working well, even if it's a bit ugly.

dkrasner commented 3 years ago

@darth-cheney this is great! works

it's nice you can even jump cards using the nav and set targets elsewhere, although this was a little buggy jumping stacks but this is more of a nav issue I think...

anyhow i made a comment but otherwise i think we can merge this in

ApproximateIdentity commented 3 years ago

I might be misunderstanding something, but if I load up the bootstrap.html page on this branch, then create a button, then click it's little target thing, I get the following error in the console:

Uncaught DOMException: Element.querySelectorAll: '[part-id]:not(st-card, st-stack)' is not a valid selector

Am I misunderstanding how this works?

ApproximateIdentity commented 3 years ago

Okay judging by the video maybe there needs to be a target code in a script handler before you can set the target?

darth-cheney commented 3 years ago

@dkrasner

it's nice you can even jump cards using the nav and set targets elsewhere, although this was a little buggy jumping stacks but this is more of a nav issue I think...

Hah, I didn't even think to test this.

Also @ApproximateIdentity found an interesting bug that he's just pushed a fix to