[editor] Targeting

[Izhaki]

Constraints and Use Cases

No pointer events on gs

svg g elements cannot be pointer targets - they have no geometry (see SO).

We want to enable click on target, but not children.

Hence the latter child selector:

    '[data-target]': {
      pointerEvents: 'auto',
      cursor: 'pointer',
    },
    '[data-target] > *': {
      pointerEvents: 'none',
    },

More than one child is clickable

In the case of a connection with caption and labels, we probably want ALL children to be clickable, yet it would be silly to have each child with the target info.

👱‍♀️Just keep targeting info on root, make all children clickable, and use closest to search parents for target?
🤔 Is this even the framework business?
👱‍♀️ Not really, but ideally there is some sane convention.
👱‍♂️ Hi I'm Mark!
🤔 Who?
👱‍♂️ Mark!
👱‍♀️ Bad timing - shush.
🤔 But how will this work with drag? Every mouse move will require traversing up the DOM!
👱‍♀️ Not really, only for g elements (so long no pointer events on anything but targets).
🤔 I like it!

▶ We are going to do this

👱‍♂️ Can I speak now?

Current issue

Targeting is iron-clad

So we have this code in Line

    const overlay =
      showOverlay &&
      React.createElement(type, {
        ...elementProps,
        className: 'regraph-connection-overlay',
        'data-target': 'connection',
        'data-target-id': id,
      });

Where data-target attributes lock clients to a specific API.

Possible solution - targeting prop.

One option is for all framework component to have a target property that is then spread on the element that represent the target.

So instead of the code above we provide target={{ 'data-target' : 'connection', 'data-target-id' : id }}, and then:

    const overlay =
      target &&
      React.createElement(type, {
        ...elementProps,
        className: 'regraph-connection-overlay',
        ...target
      });

This means we won't force this api or another.