mocanvasv4.11.2

OverlayUtil

declare abstract class OverlayUtil<H extends OverlayHost = OverlayHost, O extends object = object>

Base class for a canvas overlay.

render is called once per frame with a context whose transform is already the *screen* transform (CSS pixels, y down, origin at the canvas corner — the device-pixel ratio is applied by the host). Applying the camera is the util's own job, because some overlays (a brush, a handle) live in screen space and some (an indicator) live in page space.

The two type arguments are the host it reads from and the shape of its static options. Options live on the *class*, not the instance, so that OverlayUtil.configure can hand back a restyled subclass which is still a constructor the manager can register.

On this page

constructor options render type configure dispose editor getCursor getGeometry getOverlays isActive onPointerDown options renderMinimap type zIndex

Methods · 4

constructor(editor: H)

get options(): O

This util's options, read off the class it was constructed from.

abstract render(ctx: CanvasRenderingContext2D, overlays?: OverlayLike[]): void

Paint this overlay. Implementations must leave ctx in the state they found it.

overlays is what getOverlays returned this frame, handed over so a subclass can paint a subset and delegate the rest:

``ts override render(ctx: CanvasRenderingContext2D, overlays = this.getOverlays()) {``

Without it the only way to narrow what gets painted was to override getOverlays() — which also narrows what hit-testing, the cursor lookup and onPointerDown see, for every caller and not just the painter.

A util that ignores the parameter is unaffected: a one-argument render still satisfies this signature, and the manager passes what it already computed either way.

get type(): string

Properties · 12

static configure<T extends {

A subclass of this util with different options.

Returns a *class*, not an instance, because overlay utils are registered by constructor: overlayUtils: [BrushOverlayUtil.configure({ lineWidth: 2 })]. Omitted keys keep the value they had, so configuring a subclass twice layers rather than resets, and the class it was called on is untouched.

dispose?(): void

Release anything held. Called when the util is replaced or the editor closes.

readonly editor: H

getCursor?(overlay: OverlayLike): string | undefined

Cursor to show while the pointer is over this overlay.

getGeometry?(overlay: OverlayLike): Geometry2d | undefined

Page-space geometry an overlay can be pointed at through, if any.

getOverlays?(): OverlayLike[]

The individual overlays this util is drawing — one per snap line, one per collaborator cursor, one per handle. A util that does not implement it counts as a single overlay named after its own type, which is all a paint-only util ever needs.

isActive?(): boolean

Whether this util has anything to contribute this frame. A util that does not implement it is always active.

onPointerDown?(overlay: OverlayLike): void

The pointer went down on this overlay.

static options: object

Configuration for this class. A subclass narrows the type by redeclaring it; configure replaces it wholesale on a fresh subclass.

renderMinimap?(ctx: CanvasRenderingContext2D): void

The minimap pass. Only utils that opt in by implementing it are called.

static type: string

The id this overlay is registered under.

static zIndex?: number

Painting order; higher paints later, and so wins a hit test. A util that says nothing paints at 0, in registration order.

All of @mocanvas/editor Guides Demos

mocanvas

Docs Licensing mocanvas@symbio.agency

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.