ShapeHandleOverlayUtil

Extends OverlayUtil<TLShapeHandleOverlay>.

Overlay util for shape handles (arrow endpoints, line vertices, etc.).

class ShapeHandleOverlayUtil extends OverlayUtil<TLShapeHandleOverlay> {}

Constructs a new instance of the OverlayUtil class

Parameters

Editor;

Properties

static type: string;

editor: Editor;

options: {
  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;

getCursor(_overlay: TLShapeHandleOverlay): TLCursorType | undefined;

Parameters

TLShapeHandleOverlay;

Returns

TLCursorType | undefined;

getGeometry(overlay: TLShapeHandleOverlay): Geometry2d | null;

Parameters

TLShapeHandleOverlay;

Returns

Geometry2d | null;

getOverlays(): TLShapeHandleOverlay[];

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: TLShapeHandleOverlay[]): void;

Parameters

CanvasRenderingContext2D;

TLShapeHandleOverlay[];

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;