Polymorphic State Machine Controllers Attached to Svelte Node Actions

export class BaseActionState {
  constructor(node) { this.node = node; }
  handlePointerDown(e) { return this; }
  handlePointerMove(e) { return this; }
  destroy() {}
}
 
export class IdleState extends BaseActionState {
  handlePointerDown(e) {
    this.node.style.borderColor = '#0055ff';
    return new DraggingState(this.node);
  }
}
 
export class DraggingState extends BaseActionState {
  handlePointerMove(e) {
    this.node.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
    return this;
  }
}
 
export function statefulAction(node) {
  let current = new IdleState(node);
  const onDown = (e) => { current = current.handlePointerDown(e) || current; };
  const onMove = (e) => { current = current.handlePointerMove(e) || current; };
  node.addEventListener('pointerdown', onDown);
  window.addEventListener('pointermove', onMove);
  return {
    destroy() {
      current.destroy();
      node.removeEventListener('pointerdown', onDown);
      window.removeEventListener('pointermove', onMove);
    }
  };
}