@tremolo-ui/dom 0.8.0 → 0.9.0

package/src/pointer/wheel.ts

@@ -1,6 +1,10 @@
 export interface WheelOptions {
-  /** Replace the callback through {@link WheelInstance.update}. */
-  onWheel?: (event: WheelEvent) => void
+  /**
+   * Called for every wheel event that `requireFocus` lets through. The
+   * listener is not passive, so this may call `preventDefault()` to keep the
+   * page from scrolling.
+   */
+  onWheel: (event: WheelEvent) => void
   /**
    * Only report events while the focus is inside the element.
    *
@@ -19,7 +23,7 @@ export interface WheelOptions {
 
 export interface WheelInstance {
   /** Replace the given options, keeping the listener in place. */
-  update: (options: WheelOptions) => void
+  update: (options: Partial<WheelOptions>) => void
   destroy: () => void
 }
 
@@ -31,10 +35,9 @@ export interface WheelInstance {
  */
 export function createWheel(
   element: Element,
-  onWheel: (event: WheelEvent) => void,
-  options: WheelOptions = {},
+  options: WheelOptions,
 ): WheelInstance {
-  let opts = { ...options, onWheel }
+  let opts = options
 
   function hasFocus() {
     const active = element.ownerDocument?.activeElement
@@ -43,7 +46,7 @@ export function createWheel(
 
   const handler = (event: Event) => {
     if (opts.requireFocus && !hasFocus()) return
-    opts.onWheel?.(event as WheelEvent)
+    opts.onWheel(event as WheelEvent)
   }
 
   element.addEventListener('wheel', handler, { passive: false })

package/src/points-editor/index.ts

@@ -68,6 +68,11 @@ export interface PointsEditorPoint {
   element?: Element | null
   /** The wheel option the point resolved, `null` for no wheel. */
   wheel?: ModifierValue<InputEventOption> | null
+  /**
+   * Called just before the wheel moves this point as the focused one, so that
+   * it can report its change as started before the value arrives.
+   */
+  beforeWheel?: () => void
 }
 
 export interface PointsEditorOptions {
@@ -326,7 +331,7 @@ export function createPointsEditor(
     nudgePoint,
     nudgeFocusedPoint: (axis, direction, modifiers) => {
       for (const [id, read] of points) {
-        const { element, wheel, readonly, onChange } = read()
+        const { element, wheel, readonly, onChange, beforeWheel } = read()
         // The document the point is in, which need not be the one this script
         // runs in — an editor rendered into an iframe has its own focus.
         const active = element?.ownerDocument.activeElement
@@ -334,6 +339,7 @@ export function createPointsEditor(
         // axes stay part of the same interaction.
         if (!active || !element?.contains(active)) continue
         if (!wheel || readonly || !onChange) return false
+        beforeWheel?.()
         nudgePoint(id, axis, direction, wheel, modifiers)
         return true
       }