Interface WidgetSkin

The application-supplied visuals of one widget — the seam described at the top of this module.

Every hook is optional, and every hook is called with the widget itself: a skin reads whatever it needs off the widget (size, state, text layout) and owns whatever it builds. A skin is free to add child nodes to the widget, to draw into an entirely separate subtree, or to do nothing at all.

const skin: WidgetSkin = {
  onAttach(widget) { quad = new Renderable(planeGeometry(…), material); widget.add(quad); },
  onLayout(widget) { quad.transform.scale.set(widget.measuredWidth, widget.measuredHeight, 1); },
  onStateChange(widget) { material.color = widget.pressed ? PRESSED : widget.hovered ? HOVER : IDLE; },
  onDetach(widget) { widget.remove(quad); quad.dispose(); },
};
Copy

Ordering guarantees: onAttach runs before the first onLayout/ onStateChange of that skin (assigning a skin to an already laid-out widget calls all three immediately, so a late skin is never stale), and onDetach runs before the widget forgets the skin.