@pauloricca/spagbol 0.0.0-stage → 0.1.1

package/src/react/SpagbolControlNumber.tsx

@@ -0,0 +1,297 @@
+import { useEffect, useRef, useState, type PointerEvent, type KeyboardEvent, type RefObject } from 'react';
+/** Numeric entry, scrubbing and modifier-wheel behavior extracted directly from Teia. */
+export interface SpagbolControlNumberProps {
+  value: number; onChange(value: number): void; label?: string;
+  min?: number; max?: number; step?: number; integer?: boolean;
+  replaced?: boolean; disabled?: boolean; onClear?(): void; onEditStart?(): void;
+  /** Optional host input capture while editing (for example MIDI learn). */
+  capture?: { id: number; value: number; onCapture(): void };
+  onGestureStart?(): void; onGestureEnd?(cancelled: boolean): void;
+}
+export const formatNumber = (value: number) => formatNumericValue(value);
+export function SpagbolControlNumber({
+  value,
+  min,
+  max,
+  step: baseStep,
+  integer = false,
+  replaced = false,
+  onChange,
+  onClear,
+  capture,
+  onEditStart, label = "Value", disabled = false, onGestureStart, onGestureEnd,
+}: SpagbolControlNumberProps) {
+  const dragStep = integer ? (baseStep ?? 0.01) * 3 : baseStep;
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(formatNumericValue(value));
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const lastCaptureIdRef = useRef<number | null>(null);
+  const wheelValueRef = useRef(value);
+  const lastWheelTimeRef = useRef(-Infinity);
+  const wheelEnd = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const wheelTargetRef = useModifiedWheel<HTMLDivElement>((event) => {
+    if (disabled) return;
+    if (event.timeStamp - lastWheelTimeRef.current > 160) {
+      onGestureStart?.();
+      wheelValueRef.current = value;
+    }
+    lastWheelTimeRef.current = event.timeStamp;
+    if (wheelEnd.current) clearTimeout(wheelEnd.current);
+    wheelEnd.current = setTimeout(() => { wheelEnd.current = null; onGestureEnd?.(false); }, 160);
+    const wheelDelta = wheelAxisDeltaPixels(event, 'vertical');
+    if (wheelDelta === 0) return;
+    const nextValue = constrainValue(
+      roundValue(wheelValueRef.current + wheelDelta * scrubberStep(event, dragStep)),
+      min,
+      max,
+      integer,
+    );
+    wheelValueRef.current = nextValue;
+    onChange(nextValue);
+  });
+  const dragRef = useRef<{
+    pointerId: number;
+    anchorY: number;
+    anchorValue: number;
+    currentValue: number;
+    step: number;
+    dragging: boolean;
+  } | null>(null);
+
+  useEffect(() => {
+    if (!editing) {
+      setDraft(formatNumericValue(value));
+    }
+  }, [editing, value]);
+
+  useEffect(() => {
+    if (editing) {
+      setDraft(formatNumericValue(value));
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [editing, value]);
+
+  useEffect(() => {
+    if (!editing || !capture) return;
+    if (lastCaptureIdRef.current === capture.id) return;
+
+    lastCaptureIdRef.current = capture.id;
+    const nextValue = constrainValue(capture.value, min, max, integer);
+    setDraft(formatNumericValue(nextValue));
+    capture.onCapture();
+  }, [editing, integer, max, capture, min]);
+
+  function beginEditing() {
+    if (disabled) return;
+    onGestureStart?.();
+    lastCaptureIdRef.current = capture?.id ?? null;
+    onEditStart?.();
+    setEditing(true);
+  }
+
+  function startDrag(event: PointerEvent<HTMLDivElement>) {
+    event.stopPropagation();
+    if (disabled || event.button !== 0) return;
+    dragRef.current = {
+      pointerId: event.pointerId,
+      anchorY: event.clientY,
+      anchorValue: value,
+      currentValue: value,
+      step: scrubberStep(event, dragStep),
+      dragging: false,
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+
+  function updateDrag(event: PointerEvent<HTMLDivElement>) {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+
+    const distance = drag.anchorY - event.clientY;
+    if (!drag.dragging && Math.abs(distance) < 3) return;
+
+    if (!drag.dragging) onGestureStart?.();
+    drag.dragging = true;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const step = scrubberStep(event, dragStep);
+    if (step !== drag.step) {
+      drag.anchorY = event.clientY;
+      drag.anchorValue = drag.currentValue;
+      drag.step = step;
+    }
+
+    const nextValue = constrainValue(
+      roundValue(drag.anchorValue + (drag.anchorY - event.clientY) * drag.step),
+      min,
+      max,
+      integer,
+    );
+    drag.currentValue = nextValue;
+    onChange(nextValue);
+  }
+
+  function endDrag(event: PointerEvent<HTMLDivElement>) {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+
+    event.stopPropagation();
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    dragRef.current = null;
+
+    if (drag.dragging) {
+      onGestureEnd?.(false);
+      event.currentTarget.blur();
+    } else {
+      beginEditing();
+    }
+  }
+
+  function commitDraft() {
+    const trimmedDraft = draft.trim();
+    if (trimmedDraft.length === 0 && onClear) {
+      onClear();
+      onGestureEnd?.(false);
+      setEditing(false);
+      return;
+    }
+
+    const nextValue = Number(trimmedDraft);
+    if (Number.isFinite(nextValue)) {
+      onChange(constrainValue(nextValue, min, max, integer));
+    } else {
+      setDraft(formatNumericValue(value));
+    }
+    setEditing(false);
+    onGestureEnd?.(false);
+  }
+
+  function cancelDraft() {
+    onGestureEnd?.(true);
+    setDraft(formatNumericValue(value));
+    setEditing(false);
+  }
+
+  function handleEditKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    event.stopPropagation();
+    if (event.key === 'Enter') {
+      commitDraft();
+    }
+    if (event.key === 'Escape') {
+      cancelDraft();
+    }
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        className={`spagbol-control-number spagbol-control-number-editing${replaced ? ' spagbol-control-number-replaced' : ''} nodrag nopan`}
+        aria-label={label}
+        disabled={disabled}
+        type="text"
+        inputMode={integer ? 'numeric' : 'decimal'}
+        value={draft}
+        onChange={(event) => setDraft(event.target.value)}
+        onBlur={commitDraft}
+        onKeyDown={handleEditKeyDown}
+        onPointerDown={(event) => event.stopPropagation()}
+        onMouseDown={(event) => event.stopPropagation()}
+        onClick={(event) => event.stopPropagation()}
+        onDoubleClick={(event) => event.stopPropagation()}
+        spellCheck={false}
+      />
+    );
+  }
+
+  return (
+    <div
+      ref={wheelTargetRef}
+      className={`spagbol-control-number${replaced ? ' spagbol-control-number-replaced' : ''} nodrag nopan`}
+      role="spinbutton"
+      aria-label={label}
+      aria-disabled={disabled}
+      tabIndex={-1}
+      aria-valuenow={value}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      onPointerDown={startDrag}
+      onPointerMove={updateDrag}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onMouseDown={(event) => event.stopPropagation()}
+      onClick={(event) => event.stopPropagation()}
+      onDoubleClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          event.stopPropagation();
+          beginEditing();
+        }
+      }}
+    >
+      {formatNumericValue(value)}
+    </div>
+  );
+}
+
+function roundValue(value: number): number {
+  return Math.round(value * 10000) / 10000;
+}
+
+function scrubberStep(event: { metaKey: boolean; shiftKey: boolean }, baseStep = 0.01): number {
+  if (event.metaKey && event.shiftKey) return baseStep * 200;
+  if (event.metaKey) return baseStep * 20;
+  if (event.shiftKey) return baseStep * 0.1;
+  return baseStep;
+}
+
+function useModifiedWheel<T extends HTMLElement>(
+  onWheel: (event: WheelEvent, target: T) => void,
+): RefObject<T | null> {
+  const targetRef = useRef<T | null>(null);
+  const handlerRef = useRef(onWheel);
+  handlerRef.current = onWheel;
+
+  useEffect(() => {
+    const target = targetRef.current;
+    if (!target) return;
+
+    const handleWheel = (event: WheelEvent) => {
+      if (!event.shiftKey && !event.altKey) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      handlerRef.current(event, target);
+    };
+
+    target.addEventListener('wheel', handleWheel, { capture: true, passive: false });
+    return () => target.removeEventListener('wheel', handleWheel, { capture: true });
+  });
+
+  return targetRef;
+}
+
+function wheelAxisDeltaPixels(
+  event: Pick<WheelEvent, 'deltaX' | 'deltaY' | 'deltaMode'>,
+  direction: 'horizontal' | 'vertical',
+): number {
+  const delta = direction === 'vertical' ? event.deltaY : event.deltaX;
+  if (event.deltaMode === 1) return delta * 16;
+  if (event.deltaMode === 2) return delta * window.innerHeight;
+  return delta;
+}
+
+function constrainValue(value: number, min?: number, max?: number, integer = false): number {
+  const rounded = integer ? Math.round(value) : value;
+  return Math.min(Math.max(rounded, min ?? -Infinity), max ?? Infinity);
+}
+
+function formatNumericValue(value: number): string {
+  if (!Number.isFinite(value)) return '0';
+  if (Object.is(value, -0)) return '0';
+  return String(value);
+}

package/src/react/SpagbolControlNumberLink.tsx

@@ -0,0 +1,209 @@
+import { useEffect, useRef, useState, type PointerEvent, type KeyboardEvent } from 'react';
+export interface SpagbolControlNumberLinkProps {
+  value: number;
+  onChange: (value: number) => void;
+}
+
+export function SpagbolControlNumberLink({ value, onChange }: SpagbolControlNumberLinkProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(formatNumericValue(value));
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const wheelValueRef = useRef(value);
+  const lastWheelTimeRef = useRef(-Infinity);
+  const wheelTargetRef = useRef<HTMLDivElement | null>(null);
+  const latestValueRef = useRef(value);
+  const onChangeRef = useRef(onChange);
+  latestValueRef.current = value;
+  onChangeRef.current = onChange;
+  const dragRef = useRef<{
+    pointerId: number;
+    anchorY: number;
+    anchorValue: number;
+    currentValue: number;
+    step: number;
+    dragging: boolean;
+  } | null>(null);
+
+  useEffect(() => {
+    if (!editing) {
+      setDraft(formatNumericValue(value));
+    }
+  }, [editing, value]);
+
+  useEffect(() => {
+    if (!editing) return;
+
+    setDraft(formatNumericValue(value));
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    });
+  }, [editing, value]);
+
+  useEffect(() => {
+    const target = wheelTargetRef.current;
+    if (!target || editing) return;
+
+    const handleWheel = (event: WheelEvent) => {
+      if (!event.shiftKey && !event.altKey) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      if (event.timeStamp - lastWheelTimeRef.current > 160) {
+        wheelValueRef.current = latestValueRef.current;
+      }
+      lastWheelTimeRef.current = event.timeStamp;
+      const wheelDelta = verticalWheelDeltaPixels(event);
+      if (wheelDelta === 0) return;
+      const nextValue = roundValue(wheelValueRef.current + wheelDelta * scrubberStep(event));
+      wheelValueRef.current = nextValue;
+      onChangeRef.current(nextValue);
+    };
+
+    target.addEventListener('wheel', handleWheel, { capture: true, passive: false });
+    return () => target.removeEventListener('wheel', handleWheel, { capture: true });
+  }, [editing]);
+
+  function startDrag(event: PointerEvent<HTMLDivElement>) {
+    event.stopPropagation();
+    dragRef.current = {
+      pointerId: event.pointerId,
+      anchorY: event.clientY,
+      anchorValue: value,
+      currentValue: value,
+      step: scrubberStep(event),
+      dragging: false,
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+
+  function updateDrag(event: PointerEvent<HTMLDivElement>) {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+
+    const distance = drag.anchorY - event.clientY;
+    if (!drag.dragging && Math.abs(distance) < 3) return;
+
+    drag.dragging = true;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const step = scrubberStep(event);
+    if (step !== drag.step) {
+      drag.anchorY = event.clientY;
+      drag.anchorValue = drag.currentValue;
+      drag.step = step;
+    }
+
+    const nextValue = roundValue(drag.anchorValue + (drag.anchorY - event.clientY) * drag.step);
+    drag.currentValue = nextValue;
+    onChange(nextValue);
+  }
+
+  function endDrag(event: PointerEvent<HTMLDivElement>) {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+
+    event.stopPropagation();
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    dragRef.current = null;
+
+    if (drag.dragging) {
+      event.currentTarget.blur();
+    } else {
+      setEditing(true);
+    }
+  }
+
+  function commitDraft() {
+    const nextValue = Number(draft.trim());
+    if (Number.isFinite(nextValue)) {
+      onChange(nextValue);
+    } else {
+      setDraft(formatNumericValue(value));
+    }
+    setEditing(false);
+  }
+
+  function cancelDraft() {
+    setDraft(formatNumericValue(value));
+    setEditing(false);
+  }
+
+  function handleEditKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    event.stopPropagation();
+    if (event.key === 'Enter') {
+      commitDraft();
+    }
+    if (event.key === 'Escape') {
+      cancelDraft();
+    }
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        className="spagbol-control-number-link spagbol-control-number-link-editing nodrag nopan"
+        type="text"
+        inputMode="decimal"
+        value={draft}
+        onChange={(event) => setDraft(event.target.value)}
+        onBlur={commitDraft}
+        onKeyDown={handleEditKeyDown}
+        onPointerDown={(event) => event.stopPropagation()}
+        onMouseDown={(event) => event.stopPropagation()}
+        onDoubleClick={(event) => event.stopPropagation()}
+        spellCheck={false}
+      />
+    );
+  }
+
+  return (
+    <div
+      ref={wheelTargetRef}
+      className="spagbol-control-number-link nodrag nopan"
+      role="spinbutton"
+      tabIndex={-1}
+      aria-valuenow={value}
+      onPointerDown={startDrag}
+      onPointerMove={updateDrag}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onMouseDown={(event) => event.stopPropagation()}
+      onDoubleClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          event.stopPropagation();
+          setEditing(true);
+        }
+      }}
+    >
+      {formatNumericValue(value)}
+    </div>
+  );
+}
+
+function roundValue(value: number): number {
+  return Math.round(value * 10000) / 10000;
+}
+
+function scrubberStep(event: { metaKey: boolean; shiftKey: boolean }): number {
+  if (event.metaKey && event.shiftKey) return 2;
+  if (event.metaKey) return 0.2;
+  if (event.shiftKey) return 0.001;
+  return 0.01;
+}
+
+function verticalWheelDeltaPixels(event: Pick<WheelEvent, 'deltaY' | 'deltaMode'>): number {
+  const delta = event.deltaY;
+  if (event.deltaMode === 1) return delta * 16;
+  if (event.deltaMode === 2) return delta * window.innerHeight;
+  return delta;
+}
+
+function formatNumericValue(value: number): string {
+  if (!Number.isFinite(value)) return '0';
+  if (Object.is(value, -0)) return '0';
+  return String(value);
+}

package/src/react/SpagbolControlZoom.tsx

@@ -0,0 +1,102 @@
+import { ControlButton, Controls, useReactFlow } from "@xyflow/react";
+import type { ReactNode } from "react";
+
+export interface SpagbolControlZoomProps {
+  zoom: number;
+  className?: string;
+  onReset?(): void;
+  extra?: ReactNode;
+  layout?: "flow" | "corner";
+}
+/** Zoom UI reusable with either Spagbol's controller or a host-owned flow. */
+export function SpagbolControlZoom({
+  zoom,
+  className,
+  onReset,
+  extra,
+  layout = "flow",
+}: SpagbolControlZoomProps) {
+  const flow = useReactFlow();
+  const percentage = `${Math.round(zoom * 100)}%`;
+  const reset = () => {
+    if (onReset) onReset();
+    else void flow.zoomTo(1);
+  };
+  const label = `Reset zoom to 100% (currently ${percentage})`;
+  if (layout === "flow")
+    return (
+      <Controls
+        showInteractive={false}
+        className={`spagbol-control-zoom ${className ?? ""}`}
+      >
+        <ControlButton
+          className="react-flow__controls-zoom-percentage"
+          type="button"
+          onClick={reset}
+          aria-label={label}
+          title={label}
+        >
+          {percentage}
+        </ControlButton>
+        {extra}
+      </Controls>
+    );
+  return (
+    <div
+      className={`spagbol-control-zoom spagbol-control-zoom-corner nodrag nopan ${className ?? ""}`}
+      role="group"
+      aria-label="Canvas zoom controls"
+      onPointerDown={(event) => event.stopPropagation()}
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      <div className="spagbol-control-zoom-stack">
+        <button
+          type="button"
+          aria-label="Zoom in"
+          title="Zoom in"
+          disabled={zoom >= 3 - 0.0001}
+          onClick={() => {
+            void flow.zoomIn();
+          }}
+        >
+          +
+        </button>
+        <button
+          type="button"
+          aria-label="Zoom out"
+          title="Zoom out"
+          disabled={zoom <= 0.05 + 0.0001}
+          onClick={() => {
+            void flow.zoomOut();
+          }}
+        >
+          −
+        </button>
+        <button
+          type="button"
+          aria-label="Fit graph to view"
+          title="Fit graph to view"
+          onClick={() => {
+            void flow.fitView({ padding: 0.18 });
+          }}
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4" />
+          </svg>
+        </button>
+      </div>
+      <div className="spagbol-control-zoom-extras">
+        {extra}
+        <button
+          type="button"
+          className="spagbol-control-zoom-percentage"
+          aria-label={label}
+          title={label}
+          onClick={reset}
+        >
+          {percentage}
+        </button>
+      </div>
+    </div>
+  );
+}