Hi nick, if we say we only wanna use a single view...

# doodle

[Cherrio LLC]

Hi nick, if we say we only wanna use a single view throughout the app and just draw children on the canvas. Will we be able to get away with that? Build interactive UI, I was thinking we’ll loose access to pointer inputs. Any gotcha we should know?

[Nick]

this would be challenging to do if the goal is to really have all the same functionality. Views don’t draw their children, for example. so you’d have to manage that yourself. pointer and key events, along with the focus system all work at the View level. so you’d lose those. and there are a host of other things that would apply to.

can you say more about your use case? what are trying to accomplish and/avoid? is performance a concern? also, which platform do you see the need for this on?

[Cherrio LLC]

We’re thinking of a drawing app, we want to able to drag and click shapes

[Nick]

makes sense. this is a good use case for a single View. you can manage pointer events by handling them for the View and managing hit detection for the shapes from there. the pointer location for these events will be localized to the View’s coordinate space.

changes to the shapes would just need to trigger rerender on the View.

overall, i don’t see an issue given the scope of the children and what features you’d need for the shapes.

[Cherrio LLC]

Hmmmm

[Cherrio LLC]

That sounds like I’ll have to handle focus too

[Cherrio LLC]

And I’ll loose accessibility too

[Nick]

yes. but do you need complex focus handling? i imagine all shapes are at the same level (no nesting). which means you just need to have a depth sorting to determine which shape has been selected via the pointer (and which order to draw the shapes in). is there more complex focus you need? will you have keyboard traversal?

[Nick]

yes, accessibility is tied to views. and the role of a view is fixed. what do you have in mind for accessibility?

[Cherrio LLC]

Yes like select a shape or path, use the keyboard to move it around if you want or just drag and drop

[Cherrio LLC]

I can just forget accessibility and focus for now

[Cherrio LLC]

Do you have an example code of how I can pass the views’s inputs to shapes, using their points to determine who reacts??

[Nick]

you can also do this. you’ll need the view to have focus. then it will get the key events and you can handle them to move the selected shape around. updates to the e shape’s properties would just need to trigger the view to rerender.

accessibility is where things break down a bit. since the view would only be able to have a single role. at best, you could update the accessibility label as different shapes are selected etc.

[Cherrio LLC]

Can i request focus manually?

[Nick]

hmm. you’ll probably need your shapes in a list sorted by z-order. then you handle pointer events like:

pointerChanged += on(
    pressed {
        selectedShapeBounds = findHitShape(it.location)
    },
    released = {
        selectedShapeBounds = null
    }
}

pointerMotionChanged += dragged {
    val delta = it.location - downOffset

    // this works best if you keep the shape’s original bounds and update based on delta
    updateSlectedShapeBounds(delta)
}

[Nick]

take a look at Resizer to see how it handles changing the view’s bounds based on pointer events. it’s not exactly what you need, but can inspire.

[Nick]

note that the location you get in the event is relative to the view’s origin. so you’ll need to subtract the shape’s offset position from it to get a point relative to the shape. then all the math for hit detection can work on that point.