Custom tools

import {
  type ITool,
  type OverlayBuilder,
  resolveBrush,
  type ToolContext,
  type ToolPointerEvent,
} from 'peinten';
 
export interface LineOptions {
  /** Pen pressure applied along the line, 0..1. */
  readonly pressure: number;
}
 
export interface LineUIState {
  readonly drawing: boolean;
}
 
export type LineCommand = 'cancel';
 
export class LineTool implements ITool<'line', LineOptions, LineUIState, LineCommand> {
  readonly id = 'line';
  readonly defaultOptions: LineOptions = { pressure: 0.7 };
  #options = this.defaultOptions;
  #drag: { pointerId: number; x0: number; y0: number; x1: number; y1: number } | null = null;
 
  setOptions(options: Partial<LineOptions>): void {
    this.#options = { ...this.#options, ...options };
  }
 
  onPointerDown(e: ToolPointerEvent, ctx: ToolContext): void {
    if (e.button !== 0) return;
    this.#drag = { pointerId: e.pointerId, x0: e.x, y0: e.y, x1: e.x, y1: e.y };
    ctx.notifyUIState();
  }
 
  onPointerMove(e: ToolPointerEvent, ctx: ToolContext): void {
    const drag = this.#drag;
    if (!drag || drag.pointerId !== e.pointerId) return;
    drag.x1 = e.x;
    drag.y1 = e.y;
    ctx.requestOverlay();
  }
 
  onPointerUp(e: ToolPointerEvent, ctx: ToolContext): void {
    const drag = this.#drag;
    if (!drag || drag.pointerId !== e.pointerId) return;
    this.#reset(ctx);
    this.#paint(drag.x0, drag.y0, e.x, e.y, ctx);
  }
 
  onPointerCancel(ctx: ToolContext): void {
    this.#reset(ctx);
  }
 
  deactivate(ctx: ToolContext): void {
    this.#reset(ctx);
  }
 
  runCommand(command: LineCommand, ctx: ToolContext | null): void {
    if (command === 'cancel') this.#reset(ctx);
  }
 
  getUIState(): LineUIState {
    return { drawing: this.#drag !== null };
  }
 
  drawOverlay(overlay: OverlayBuilder): void {
    const drag = this.#drag;
    if (drag) overlay.polyline([drag.x0, drag.y0, drag.x1, drag.y1], { dashed: true, outline: true });
  }
 
  #reset(ctx: ToolContext | null): void {
    this.#drag = null;
    ctx?.requestOverlay();
    ctx?.notifyUIState();
  }
 
  #paint(x0: number, y0: number, x1: number, y1: number, ctx: ToolContext): void {
    const stroke = ctx.beginStroke({ brush: resolveBrush(ctx.resources.get()) });
    // Null when the active layer cannot be painted on, e.g. a folder or a locked layer.
    if (!stroke) return;
    const { zoom, rotation } = ctx.viewport.get();
    const steps = Math.max(1, Math.ceil(Math.hypot(x1 - x0, y1 - y0) / 2));
    for (let i = 0; i <= steps; i++) {
      const t = i / steps;
      stroke.addSample({
        x: x0 + (x1 - x0) * t,
        y: y0 + (y1 - y0) * t,
        // Zero pressure on the last sample lifts the pen.
        pressure: i === steps ? 0 : this.#options.pressure,
        xtilt: 0,
        ytilt: 0,
        dtime: 0.004,
        viewzoom: zoom,
        viewrotation: rotation,
        barrelRotation: 0,
      });
    }
    void stroke.end();
  }
}

import { BrushTool, PanTool } from 'peinten/tools';
import { LineTool } from './line-tool';
 
export const createTools = () => [new BrushTool(), new LineTool(), new PanTool()] as const;
export type Tools = ReturnType<typeof createTools>;

await runtime.setTool('line');
await runtime.setToolOptions('line', { pressure: 0.4 });
await runtime.runToolCommand('line', 'cancel');
 
const tool = runtime.getSnapshot().tool;
if (tool.id === 'line') console.log(tool.options.pressure, tool.uiState?.drawing);