CollaboratorShapeIndicatorOverlayUtil

Extends OverlayUtil<TLCollaboratorShapeIndicatorOverlay>.

Overlay util for remote collaborators' shape selection indicators.

Renders a per-peer outline around each shape another user has selected, using the peer's color. Drawn under the local ShapeIndicatorOverlayUtil (lower z-index) so the local user's selection always appears on top.

Non-interactive: contributes no hit-test geometry.

class CollaboratorShapeIndicatorOverlayUtil extends OverlayUtil<TLCollaboratorShapeIndicatorOverlay> {}

Constructs a new instance of the OverlayUtil class

Parameters

Editor;

Properties

static type: string;

editor: Editor;

options: {
  alpha: number;
  lineWidth: number;
  zIndex: number;
};

Methods

Create a new overlay util class with the given options merged in.

static configure<T extends TLOverlayUtilConstructor<any>>(
  this: T,
  options: T extends new (...args: any[]) => {
    options: infer Options;
  }
    ? Partial<Options>
    : never,
): T;

Example

const MyBrush = BrushOverlayUtil.configure({ fill: "rgba(0,0,255,0.1)" });

Parameters

T;

T extends new (...args: any[]) => {
  options: infer Options;
}
  ? Partial<Options>
  : never;

Returns

T;

Returns the cursor type to show when hovering this overlay.

getCursor(_overlay: T): TLCursorType | undefined;

Parameters

T;

Returns

TLCursorType | undefined;

Returns hit-test geometry for an overlay instance, in page coordinates. Return null for non-interactive overlays (e.g. snap indicators, scribbles).

getGeometry(_overlay: T): Geometry2d | null;

Parameters

T;

Returns

Geometry2d | null;

getOverlays(): TLCollaboratorShapeIndicatorOverlay[];

isActive(): boolean;

Called when the user points down on this overlay, before the default routing runs. Acts as an interrupt: define it to take over the event.

Return false to continue with the default behavior (e.g. the built-in rotate/resize handle transitions or shape-handle dispatch). Return true — or nothing at all — to skip the default. In other words, once you override this method you own the event unless you explicitly opt back in by returning false.

onPointerDown?(overlay: T, info: TLPointerEventInfo): boolean | void;

Parameters

T;

TLPointerEventInfo;

Returns

boolean | void;

render(
  ctx: CanvasRenderingContext2D,
  overlays: TLCollaboratorShapeIndicatorOverlay[],
): void;

Parameters

CanvasRenderingContext2D;

TLCollaboratorShapeIndicatorOverlay[];

Returns

void;

Optional: render all active overlays into the minimap canvas. The context is already transformed to page space (minimap camera applied), so overlays can use the same page-space coordinates as in OverlayUtil.render.

zoom is the minimap's screen-pixels-per-page-unit, analogous to editor.getCamera().z; use 1 / zoom for one-minimap-pixel line widths.

Most overlays should leave this blank — only overlays that are meaningful at minimap scale (e.g. brushes, collaborator cursors) should opt in.

renderMinimap(
  _ctx: CanvasRenderingContext2D,
  _overlays: T[],
  _zoom: number,
): void;

Parameters

CanvasRenderingContext2D;

T[];

number;

Returns

void;