import { singlePointer } from "cereb";

// Create a stream from pointer events
singlePointer(canvas)
  // Listen to stream events
  .on((signal) => {
    // Receive signals from the stream
    const { phase, x, y } = signal.value;
    switch (phase){
      case "move":
        element.style.transform = `translate(${x}px, ${y}px)`;
        break;
    }
  });

import { pipe } from "cereb";
import { zoom } from "cereb/operators";
import { pinch } from "@cereb/pinch";

// pipe creates a pipeline where signals flow through operators
// Each operator extends the signal (signals are immutable)
pinch(element)
  // Operator: Determine scale value.
  .pipe(zoom({ minScale: 0.5, maxScale: 3.0 })).on((signal) => {
    // The scale property is extended from the value.
    // - pinch emits distance → zoom calculates scale
    // - zoom also works with other inputs (keyboard, wheel, etc.)
    element.style.transform = `scale(${signal.value.scale})`;
  });