This is an interesting problem.

Drawing to a canvas simply paints the pixels on the canvas. Any information about what was painted there (a circle, square, text, an image) is lost. To be able to tell what "entity" was clicked on, you need to have the information about what was drawn to the screen (like the vtree used internally in the canvas driver, or just an object where you kept all your entities before even calling cycle-canvas functions), and the coordinates of the click.

Long story short, you need this:

clickToEntity(allEntities, clickCoordinates) -> entity

Inside that function, you'll have to figure out the layout of all your entities:

their position (this will be affected by the position and any current transformation)
the ordering (if 2 entities overlap, the second one will be "over" the first one)
alpha (possibly, maybe not)
and from that you can figure out who was clicked.

You can do it yourself right now, just getting the clicks from the canvas element and creating your implementation of clickToEntity, or we can add it to the driver (it should be possible to use the instructions generated from the vtree to keep updating a hit-map while you perform the instructions).

This is a very interesting problem to solve, but I would question if it is something that cycle-canvas should support. Right now it's not clear to me if we want to have this driver being a straight on wrapper for the html canvas, or if we want to aim more towards something more similar to a game engine.

Another option is to use SVG, as you can attach event listeners to SVG elements in the DOM. I don't know if there's a svg-driver for cyclejs yet.

How to handle click events? #16

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions