The Problems Cereb Solves

// Before: Scattered handlers, shared state, duplicated logic
let currentScale = 1;
let isZoomMode = false;
let initialPinchDistance = 0;

window.addEventListener('keydown', e => {
  if (e.key === 'z') { isZoomMode = true; }
  if (isZoomMode && (e.key === '+' || e.key === '-')) {
    e.preventDefault();
    currentScale = Math.max(MIN, Math.min(MAX, currentScale * ...));
    render(currentScale);
  }
});
window.addEventListener('keyup', e => { /* isZoomMode = false ... */ });

box.addEventListener('wheel', e => {
  if (!isZoomMode) return;
  currentScale = Math.max(MIN, Math.min(MAX, ...));  // duplicated
  render(currentScale);
}, { passive: false });

// Pinch: touchstart/touchmove/touchend with distance calculation...
box.addEventListener('touchstart', e => { /* ... */ });
box.addEventListener('touchmove', e => { /* distance, ratio, min/max again */ });
box.addEventListener('touchend', () => { /* cleanup */ });

// 8+ handlers, 3+ shared states, min/max duplicated everywhere

// After: Clear flow, no shared state, composable
import { keydown, keyheld, wheel } from "cereb";
import { zoom, when, extend, spy } from "cereb/operators";
import { pinch } from "@cereb/pinch";

const zoomMode$ = keyheld(window, { code: "KeyZ" })
  .pipe(extend((signal) => ({ opened: signal.value.held })));

const zoomOp = () => zoom({ minScale: 0.5, maxScale: 3.0, baseScale: getScale });

// Pinch zoom
pinch(element)
  .pipe(zoomOp())
  .on(applyScale);

// z + wheel zoom
wheel(element, { passive: false })
  .pipe(
    when(zoomMode$),
    spy((signal) => signal.value.originalEvent.preventDefault()),
    extend((signal) => ({ ratio: Math.exp(-signal.value.deltaY * 0.005) })),
    zoomOp(),
  )
  .on(applyScale);

// z + '+/-' zoom
keydown(window, { code: ["Equal", "Minus"] })
  .pipe(
    when(zoomMode$),
    extend((signal) => ({ ratio: signal.value.code === "Equal" ? 1.2 : 1 / 1.2 })),
    zoomOp(),
  )
  .on(applyScale);

// Before: Multiple addEventListener calls
window.addEventListener('keydown', handler1);
window.addEventListener('keydown', handler2);
window.addEventListener('keydown', handler3);

// After: Single native listener, multiple observers
const key$ = keyboard(window).pipe(share());
key$.on(handler1);
key$.on(handler2);
key$.on(handler3);

pan(element)
  .pipe(
    offset({ target }),     // Element-relative coordinates
    axisLock()              // Lock to horizontal/vertical
  )