`offset`

Adds element-relative coordinates (offset) to pointer signals.

Signature

function offset<T extends SignalWith<{ cursor: [number, number] }>>(options: {
  target: Element;
  recalculate$?: Stream<Signal>;
}): Operator<T, T & { offset: [number, number] }>

Options

Option	Type	Description
`target`	`Element`	Element to calculate offset relative to
`recalculate$`	`Stream<Signal>`	Optional stream that triggers rect recalculation

Example

import { singlePointer } from "cereb";
import { offset } from "cereb/operators";

singlePointer(canvas)
  .pipe(offset({ target: canvas }))
  .on((signal) => {
    // Draw at element-relative position
    const [ox, oy] = signal.value.offset;
    draw(ox, oy);
  });

Caching Behavior

By default, getBoundingClientRect() is called on every signal for accuracy.

For performance optimization, provide recalculate$ to cache the rect:

import { dom } from "cereb";

const resize$ = dom(window, "resize");

singlePointer(canvas)
  .pipe(offset({ target: canvas, recalculate$: resize$ }))
  .on(draw);

Use Cases

Drawing Application

singlePointer(canvas)
  .pipe(
    singlePointerSession(),
    offset({ target: canvas })
  )
  .on((signal) => {
    const [ox, oy] = signal.value.offset;
    ctx.lineTo(ox, oy);
    ctx.stroke();
  });

Drag Within Container

pan(container)
  .pipe(offset({ target: container }))
  .on((signal) => {
    const [ox, oy] = signal.value.offset;
    draggable.style.left = `${ox}px`;
    draggable.style.top = `${oy}px`;
  });