@mocanvas/editor · class
declare class ShapeIndicatorCompositor<H extends TLIndicatorHost = TLIndicatorHost> extends OverlayUtil<H, TLShapeIndicatorOptions>Paints shape indicators onto the canvas overlay.
This is the *engine*. The name the SDK exposes for it —
ShapeIndicatorOverlayUtil — lives in @mocanvas/mocanvas, which subclasses
this and adds nothing: 5.2 moved that class out of the editor package. The
implementation could not follow it, because <Canvas> here has to composite
indicators for an app that only ever depends on @mocanvas/editor, and the
editor cannot import the package that depends on it. So the seam and the
engine stay, and the exported name moves.
Two override points, in ascending order of effort:
- ShapeIndicatorCompositor.configure({ lineWidth, hintedLineWidth })
returns a subclass with different stroke weights and nothing else changed.
- subclassing and overriding ShapeIndicatorCompositor.shouldShowIndicator
controls *which* shapes get an outline at all — the hook for a board that
reads selection through its own chrome instead of a stroke.
Anything finer than that belongs in the shape util's getIndicatorPath.
Methods · 5
getIndicatorColor(_context: TLIndicatorContext): stringStroke colour for a context. The selection colour of the live theme, for all three.
getIndicatorLineWidth(context: TLIndicatorContext): numberStroke weight for a context, in CSS pixels.
getIndicators(): TLIndicatorOverlay[]Every outline to draw this frame, hinted ones last so a drop target's heavier stroke lands on top of the selection stroke of the same shape.
Each shape appears at most once: a shape that is both selected and hinted is drawn as hinted, because the gesture in flight is the more urgent fact.
render(ctx: CanvasRenderingContext2D): voidStroke the indicators onto ctx.
ctx arrives in device pixels. Everything below is expressed once, here,
so a util never has to think about it:
- the camera transform maps page → device, so paths are drawn in the
shape-local units the util wrote them in;
- lineWidth is divided by zoom * dpr's page-space scale so a 1.5 stays
1.5 CSS pixels at 10 % and at 800 % — the hairline that makes an
indicator legible at every zoom;
- clipPath is installed even-odd before the outline is stroked, and
removed again before additionalPaths.
shouldShowIndicator(_shape: UnknownShape, _context: TLIndicatorContext): booleanWhether this shape shows an outline in this context.
The default hides nothing; a host that draws its own selection language overrides this rather than teaching every shape util about the host.
Properties · 2
static options: TLShapeIndicatorOptionsStroke weights for this class. Replaced wholesale on a fresh subclass by the inherited OverlayUtil.configure:
``ts
overlayUtils: [ShapeIndicatorOverlayUtil.configure({ lineWidth: 2 })]
``
static type: stringMentioned here
mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.