@lichess-org/chessground 9.2.3

package/src/config.ts

@@ -0,0 +1,165 @@
+import { HeadlessState } from './state.js';
+import { setCheck, setSelected } from './board.js';
+import { read as fenRead } from './fen.js';
+import { DrawShape, DrawBrushes } from './draw.js';
+import * as cg from './types.js';
+
+export interface Config {
+  fen?: cg.FEN; // chess position in Forsyth notation
+  orientation?: cg.Color; // board orientation. white | black
+  turnColor?: cg.Color; // turn to play. white | black
+  check?: cg.Color | boolean; // true for current color, false to unset
+  lastMove?: cg.Key[]; // squares part of the last move ["c3", "c4"]
+  selected?: cg.Key; // square currently selected "a1"
+  coordinates?: boolean; // include coords attributes
+  coordinatesOnSquares?: boolean; // include coords attributes on every square
+  autoCastle?: boolean; // immediately complete the castle by moving the rook after king move
+  viewOnly?: boolean; // don't bind events: the user will never be able to move pieces around
+  disableContextMenu?: boolean; // because who needs a context menu on a chessboard
+  addPieceZIndex?: boolean; // adds z-index values to pieces (for 3D)
+  addDimensionsCssVarsTo?: HTMLElement; // add ---cg-width and ---cg-height CSS vars containing the board's dimensions to this element
+  blockTouchScroll?: boolean; // block scrolling via touch dragging on the board, e.g. for coordinate training
+  // pieceKey: boolean; // add a data-key attribute to piece elements
+  trustAllEvents?: boolean; // disable checking for human only input (e.isTrusted)
+  highlight?: {
+    lastMove?: boolean; // add last-move class to squares
+    check?: boolean; // add check class to squares
+    custom?: cg.SquareClasses; // add custom classes to custom squares
+  };
+  animation?: {
+    enabled?: boolean;
+    duration?: number;
+  };
+  movable?: {
+    free?: boolean; // all moves are valid - board editor
+    color?: cg.Color | 'both'; // color that can move. white | black | both | undefined
+    dests?: cg.Dests; // valid moves. {"a2" ["a3" "a4"] "b1" ["a3" "c3"]}
+    showDests?: boolean; // whether to add the move-dest class on squares
+    events?: {
+      after?: (orig: cg.Key, dest: cg.Key, metadata: cg.MoveMetadata) => void; // called after the move has been played
+      afterNewPiece?: (role: cg.Role, key: cg.Key, metadata: cg.MoveMetadata) => void; // called after a new piece is dropped on the board
+    };
+    rookCastle?: boolean; // castle by moving the king to the rook
+  };
+  premovable?: {
+    enabled?: boolean; // allow premoves for color that can not move
+    showDests?: boolean; // whether to add the premove-dest class on squares
+    castle?: boolean; // whether to allow king castle premoves
+    dests?: cg.Key[]; // premove destinations for the current selection
+    customDests?: cg.Dests; // use custom valid premoves. {"a2" ["a3" "a4"] "b1" ["a3" "c3"]}
+    events?: {
+      set?: (orig: cg.Key, dest: cg.Key, metadata?: cg.SetPremoveMetadata) => void; // called after the premove has been set
+      unset?: () => void; // called after the premove has been unset
+    };
+  };
+  predroppable?: {
+    enabled?: boolean; // allow predrops for color that can not move
+    events?: {
+      set?: (role: cg.Role, key: cg.Key) => void; // called after the predrop has been set
+      unset?: () => void; // called after the predrop has been unset
+    };
+  };
+  draggable?: {
+    enabled?: boolean; // allow moves & premoves to use drag'n drop
+    distance?: number; // minimum distance to initiate a drag; in pixels
+    autoDistance?: boolean; // lets chessground set distance to zero when user drags pieces
+    showGhost?: boolean; // show ghost of piece being dragged
+    deleteOnDropOff?: boolean; // delete a piece when it is dropped off the board
+  };
+  selectable?: {
+    // disable to enforce dragging over click-click move
+    enabled?: boolean;
+  };
+  events?: {
+    change?: () => void; // called after the situation changes on the board
+    // called after a piece has been moved.
+    // capturedPiece is undefined or like {color: 'white'; 'role': 'queen'}
+    move?: (orig: cg.Key, dest: cg.Key, capturedPiece?: cg.Piece) => void;
+    dropNewPiece?: (piece: cg.Piece, key: cg.Key) => void;
+    select?: (key: cg.Key) => void; // called when a square is selected
+    insert?: (elements: cg.Elements) => void; // when the board DOM has been (re)inserted
+  };
+  drawable?: {
+    enabled?: boolean; // can draw
+    visible?: boolean; // can view
+    defaultSnapToValidMove?: boolean;
+    // false to keep the drawing if a movable piece is clicked.
+    // Clicking an empty square or immovable piece will clear the drawing regardless.
+    eraseOnClick?: boolean;
+    shapes?: DrawShape[];
+    autoShapes?: DrawShape[];
+    brushes?: DrawBrushes;
+    onChange?: (shapes: DrawShape[]) => void; // called after drawable shapes change
+  };
+}
+
+export function applyAnimation(state: HeadlessState, config: Config): void {
+  if (config.animation) {
+    deepMerge(state.animation, config.animation);
+    // no need for such short animations
+    if ((state.animation.duration || 0) < 70) state.animation.enabled = false;
+  }
+}
+
+export function configure(state: HeadlessState, config: Config): void {
+  // don't merge destinations and autoShapes. Just override.
+  if (config.movable?.dests) state.movable.dests = undefined;
+  if (config.drawable?.autoShapes) state.drawable.autoShapes = [];
+
+  deepMerge(state, config);
+
+  // if a fen was provided, replace the pieces
+  if (config.fen) {
+    state.pieces = fenRead(config.fen);
+    state.drawable.shapes = config.drawable?.shapes || [];
+  }
+
+  // apply config values that could be undefined yet meaningful
+  if ('check' in config) setCheck(state, config.check || false);
+  if ('lastMove' in config && !config.lastMove) state.lastMove = undefined;
+  // in case of ZH drop last move, there's a single square.
+  // if the previous last move had two squares,
+  // the merge algorithm will incorrectly keep the second square.
+  else if (config.lastMove) state.lastMove = config.lastMove;
+
+  // fix move/premove dests
+  if (state.selected) setSelected(state, state.selected);
+
+  applyAnimation(state, config);
+
+  if (!state.movable.rookCastle && state.movable.dests) {
+    const rank = state.movable.color === 'white' ? '1' : '8',
+      kingStartPos = ('e' + rank) as cg.Key,
+      dests = state.movable.dests.get(kingStartPos),
+      king = state.pieces.get(kingStartPos);
+    if (!dests || !king || king.role !== 'king') return;
+    state.movable.dests.set(
+      kingStartPos,
+      dests.filter(
+        d =>
+          !(d === 'a' + rank && dests.includes(('c' + rank) as cg.Key)) &&
+          !(d === 'h' + rank && dests.includes(('g' + rank) as cg.Key)),
+      ),
+    );
+  }
+}
+
+function deepMerge(base: any, extend: any): void {
+  for (const key in extend) {
+    if (key === '__proto__' || key === 'constructor' || !Object.prototype.hasOwnProperty.call(extend, key))
+      continue;
+    if (
+      Object.prototype.hasOwnProperty.call(base, key) &&
+      isPlainObject(base[key]) &&
+      isPlainObject(extend[key])
+    )
+      deepMerge(base[key], extend[key]);
+    else base[key] = extend[key];
+  }
+}
+
+function isPlainObject(o: unknown): boolean {
+  if (typeof o !== 'object' || o === null) return false;
+  const proto = Object.getPrototypeOf(o);
+  return proto === Object.prototype || proto === null;
+}

package/src/drag.ts

@@ -0,0 +1,223 @@
+import { State } from './state.js';
+import * as board from './board.js';
+import * as util from './util.js';
+import { clear as drawClear } from './draw.js';
+import * as cg from './types.js';
+import { anim } from './anim.js';
+
+export interface DragCurrent {
+  orig: cg.Key; // orig key of dragging piece
+  piece: cg.Piece;
+  origPos: cg.NumberPair; // first event position
+  pos: cg.NumberPair; // latest event position
+  started: boolean; // whether the drag has started; as per the distance setting
+  element: cg.PieceNode | (() => cg.PieceNode | undefined);
+  newPiece?: boolean; // it it a new piece from outside the board
+  force?: boolean; // can the new piece replace an existing one (editor)
+  previouslySelected?: cg.Key;
+  originTarget: EventTarget | null;
+  keyHasChanged: boolean; // whether the drag has left the orig key
+}
+
+export function start(s: State, e: cg.MouchEvent): void {
+  if (!(s.trustAllEvents || e.isTrusted)) return; // only trust when trustAllEvents is enabled
+  if (e.buttons !== undefined && e.buttons > 1) return; // only touch or left click
+  if (e.touches && e.touches.length > 1) return; // support one finger touch only
+  const bounds = s.dom.bounds(),
+    position = util.eventPosition(e)!,
+    orig = board.getKeyAtDomPos(position, board.whitePov(s), bounds);
+  if (!orig) return;
+  const piece = s.pieces.get(orig);
+  const previouslySelected = s.selected;
+  if (
+    !previouslySelected &&
+    s.drawable.enabled &&
+    (s.drawable.eraseOnClick || !piece || piece.color !== s.turnColor)
+  )
+    drawClear(s);
+  // Prevent touch scroll and create no corresponding mouse event, if there
+  // is an intent to interact with the board.
+  if (
+    e.cancelable !== false &&
+    (!e.touches || s.blockTouchScroll || piece || previouslySelected || pieceCloseTo(s, position))
+  )
+    e.preventDefault();
+  else if (e.touches) return; // Handle only corresponding mouse event https://github.com/lichess-org/chessground/pull/268
+
+  const hadPremove = !!s.premovable.current;
+  const hadPredrop = !!s.predroppable.current;
+  s.stats.ctrlKey = e.ctrlKey;
+  if (s.selected && board.canMove(s, s.selected, orig)) {
+    anim(state => board.selectSquare(state, orig), s);
+  } else {
+    board.selectSquare(s, orig);
+  }
+  const stillSelected = s.selected === orig;
+  const element = pieceElementByKey(s, orig);
+  if (piece && element && stillSelected && board.isDraggable(s, orig)) {
+    s.draggable.current = {
+      orig,
+      piece,
+      origPos: position,
+      pos: position,
+      started: s.draggable.autoDistance && s.stats.dragged,
+      element,
+      previouslySelected,
+      originTarget: e.target,
+      keyHasChanged: false,
+    };
+    element.cgDragging = true;
+    element.classList.add('dragging');
+    // place ghost
+    const ghost = s.dom.elements.ghost;
+    if (ghost) {
+      ghost.className = `ghost ${piece.color} ${piece.role}`;
+      util.translate(ghost, util.posToTranslate(bounds)(util.key2pos(orig), board.whitePov(s)));
+      util.setVisible(ghost, true);
+    }
+    processDrag(s);
+  } else {
+    if (hadPremove) board.unsetPremove(s);
+    if (hadPredrop) board.unsetPredrop(s);
+  }
+  s.dom.redraw();
+}
+
+function pieceCloseTo(s: State, pos: cg.NumberPair): boolean {
+  const asWhite = board.whitePov(s),
+    bounds = s.dom.bounds(),
+    radiusSq = Math.pow(bounds.width / 8, 2);
+  for (const key of s.pieces.keys()) {
+    const center = util.computeSquareCenter(key, asWhite, bounds);
+    if (util.distanceSq(center, pos) <= radiusSq) return true;
+  }
+  return false;
+}
+
+export function dragNewPiece(s: State, piece: cg.Piece, e: cg.MouchEvent, force?: boolean): void {
+  const key: cg.Key = 'a0';
+  s.pieces.set(key, piece);
+  s.dom.redraw();
+
+  const position = util.eventPosition(e)!;
+
+  s.draggable.current = {
+    orig: key,
+    piece,
+    origPos: position,
+    pos: position,
+    started: true,
+    element: () => pieceElementByKey(s, key),
+    originTarget: e.target,
+    newPiece: true,
+    force: !!force,
+    keyHasChanged: false,
+  };
+  processDrag(s);
+}
+
+function processDrag(s: State): void {
+  requestAnimationFrame(() => {
+    const cur = s.draggable.current;
+    if (!cur) return;
+    // cancel animations while dragging
+    if (s.animation.current?.plan.anims.has(cur.orig)) s.animation.current = undefined;
+    // if moving piece is gone, cancel
+    const origPiece = s.pieces.get(cur.orig);
+    if (!origPiece || !util.samePiece(origPiece, cur.piece)) cancel(s);
+    else {
+      if (!cur.started && util.distanceSq(cur.pos, cur.origPos) >= Math.pow(s.draggable.distance, 2))
+        cur.started = true;
+      if (cur.started) {
+        // support lazy elements
+        if (typeof cur.element === 'function') {
+          const found = cur.element();
+          if (!found) return;
+          found.cgDragging = true;
+          found.classList.add('dragging');
+          cur.element = found;
+        }
+
+        const bounds = s.dom.bounds();
+        util.translate(cur.element, [
+          cur.pos[0] - bounds.left - bounds.width / 16,
+          cur.pos[1] - bounds.top - bounds.height / 16,
+        ]);
+
+        cur.keyHasChanged ||= cur.orig !== board.getKeyAtDomPos(cur.pos, board.whitePov(s), bounds);
+      }
+    }
+    processDrag(s);
+  });
+}
+
+export function move(s: State, e: cg.MouchEvent): void {
+  // support one finger touch only
+  if (s.draggable.current && (!e.touches || e.touches.length < 2)) {
+    s.draggable.current.pos = util.eventPosition(e)!;
+  }
+}
+
+export function end(s: State, e: cg.MouchEvent): void {
+  const cur = s.draggable.current;
+  if (!cur) return;
+  // create no corresponding mouse event
+  if (e.type === 'touchend' && e.cancelable !== false) e.preventDefault();
+  // comparing with the origin target is an easy way to test that the end event
+  // has the same touch origin
+  if (e.type === 'touchend' && cur.originTarget !== e.target && !cur.newPiece) {
+    s.draggable.current = undefined;
+    return;
+  }
+  board.unsetPremove(s);
+  board.unsetPredrop(s);
+  // touchend has no position; so use the last touchmove position instead
+  const eventPos = util.eventPosition(e) || cur.pos;
+  const dest = board.getKeyAtDomPos(eventPos, board.whitePov(s), s.dom.bounds());
+  if (dest && cur.started && cur.orig !== dest) {
+    if (cur.newPiece) board.dropNewPiece(s, cur.orig, dest, cur.force);
+    else {
+      s.stats.ctrlKey = e.ctrlKey;
+      if (board.userMove(s, cur.orig, dest)) s.stats.dragged = true;
+    }
+  } else if (cur.newPiece) {
+    s.pieces.delete(cur.orig);
+  } else if (s.draggable.deleteOnDropOff && !dest) {
+    s.pieces.delete(cur.orig);
+    board.callUserFunction(s.events.change);
+  }
+  if ((cur.orig === cur.previouslySelected || cur.keyHasChanged) && (cur.orig === dest || !dest))
+    board.unselect(s);
+  else if (!s.selectable.enabled) board.unselect(s);
+
+  removeDragElements(s);
+
+  s.draggable.current = undefined;
+  s.dom.redraw();
+}
+
+export function cancel(s: State): void {
+  const cur = s.draggable.current;
+  if (cur) {
+    if (cur.newPiece) s.pieces.delete(cur.orig);
+    s.draggable.current = undefined;
+    board.unselect(s);
+    removeDragElements(s);
+    s.dom.redraw();
+  }
+}
+
+function removeDragElements(s: State): void {
+  const e = s.dom.elements;
+  if (e.ghost) util.setVisible(e.ghost, false);
+}
+
+function pieceElementByKey(s: State, key: cg.Key): cg.PieceNode | undefined {
+  let el = s.dom.elements.board.firstChild;
+  while (el) {
+    if ((el as cg.KeyedNode).cgKey === key && (el as cg.KeyedNode).tagName === 'PIECE')
+      return el as cg.PieceNode;
+    el = el.nextSibling;
+  }
+  return;
+}

package/src/draw.ts

@@ -0,0 +1,154 @@
+import { State } from './state.js';
+import { unselect, cancelMove, getKeyAtDomPos, getSnappedKeyAtDomPos, whitePov } from './board.js';
+import { eventPosition, isRightButton } from './util.js';
+import * as cg from './types.js';
+
+export interface DrawShape {
+  orig: cg.Key;
+  dest?: cg.Key;
+  brush?: string; // if no brush, no shape. label moved to top right of square
+  modifiers?: DrawModifiers;
+  piece?: DrawShapePiece;
+  customSvg?: { html: string; center?: 'orig' | 'dest' | 'label' }; // 100 x 100 viewbox cenetered at [50,50]
+  label?: { text: string; fill?: string }; // fill is in '#rrggbb' format
+}
+
+export interface DrawModifiers {
+  lineWidth?: number;
+  hilite?: boolean;
+}
+
+export interface DrawShapePiece {
+  role: cg.Role;
+  color: cg.Color;
+  scale?: number;
+}
+
+export interface DrawBrush {
+  key: string;
+  color: string;
+  opacity: number;
+  lineWidth: number;
+}
+
+export interface DrawBrushes {
+  green: DrawBrush;
+  red: DrawBrush;
+  blue: DrawBrush;
+  yellow: DrawBrush;
+  [color: string]: DrawBrush;
+}
+
+export interface Drawable {
+  enabled: boolean; // can draw
+  visible: boolean; // can view
+  defaultSnapToValidMove: boolean;
+  eraseOnClick: boolean;
+  onChange?: (shapes: DrawShape[]) => void;
+  shapes: DrawShape[]; // user shapes
+  autoShapes: DrawShape[]; // computer shapes
+  current?: DrawCurrent;
+  brushes: DrawBrushes;
+  prevSvgHash: string;
+}
+
+export interface DrawCurrent {
+  orig: cg.Key; // orig key of drawing
+  dest?: cg.Key; // shape dest, or undefined for circle
+  mouseSq?: cg.Key; // square being moused over
+  pos: cg.NumberPair; // relative current position
+  brush: cg.BrushColor; // brush name for shape
+  snapToValidMove: boolean; // whether to snap to valid piece moves
+}
+
+const brushes: cg.BrushColor[] = ['green', 'red', 'blue', 'yellow'];
+
+export function start(state: State, e: cg.MouchEvent): void {
+  // support one finger touch only
+  if (e.touches && e.touches.length > 1) return;
+  e.stopPropagation();
+  e.preventDefault();
+  e.ctrlKey ? unselect(state) : cancelMove(state);
+  const pos = eventPosition(e)!,
+    orig = getKeyAtDomPos(pos, whitePov(state), state.dom.bounds());
+  if (!orig) return;
+  state.drawable.current = {
+    orig,
+    pos,
+    brush: eventBrush(e),
+    snapToValidMove: state.drawable.defaultSnapToValidMove,
+  };
+
+  processDraw(state);
+}
+
+export function processDraw(state: State): void {
+  requestAnimationFrame(() => {
+    const cur = state.drawable.current;
+    if (cur) {
+      const keyAtDomPos = getKeyAtDomPos(cur.pos, whitePov(state), state.dom.bounds());
+      if (!keyAtDomPos) {
+        cur.snapToValidMove = false;
+      }
+      const mouseSq = cur.snapToValidMove
+        ? getSnappedKeyAtDomPos(cur.orig, cur.pos, whitePov(state), state.dom.bounds())
+        : keyAtDomPos;
+      if (mouseSq !== cur.mouseSq) {
+        cur.mouseSq = mouseSq;
+        cur.dest = mouseSq !== cur.orig ? mouseSq : undefined;
+        state.dom.redrawNow();
+      }
+      processDraw(state);
+    }
+  });
+}
+
+export function move(state: State, e: cg.MouchEvent): void {
+  if (state.drawable.current) state.drawable.current.pos = eventPosition(e)!;
+}
+
+export function end(state: State): void {
+  const cur = state.drawable.current;
+  if (cur) {
+    if (cur.mouseSq) addShape(state.drawable, cur);
+    cancel(state);
+  }
+}
+
+export function cancel(state: State): void {
+  if (state.drawable.current) {
+    state.drawable.current = undefined;
+    state.dom.redraw();
+  }
+}
+
+export function clear(state: State): void {
+  if (state.drawable.shapes.length) {
+    state.drawable.shapes = [];
+    state.dom.redraw();
+    onChange(state.drawable);
+  }
+}
+
+function eventBrush(e: cg.MouchEvent): cg.BrushColor {
+  const modA = (e.shiftKey || e.ctrlKey) && isRightButton(e);
+  const modB = e.altKey || e.metaKey || e.getModifierState?.('AltGraph');
+  return brushes[(modA ? 1 : 0) + (modB ? 2 : 0)];
+}
+
+function addShape(drawable: Drawable, cur: DrawCurrent): void {
+  const sameShape = (s: DrawShape) => s.orig === cur.orig && s.dest === cur.dest;
+  const similar = drawable.shapes.find(sameShape);
+  if (similar) drawable.shapes = drawable.shapes.filter(s => !sameShape(s));
+  if (!similar || similar.brush !== cur.brush)
+    drawable.shapes.push({
+      orig: cur.orig,
+      dest: cur.dest,
+      brush: cur.brush,
+    });
+  onChange(drawable);
+}
+
+function onChange(drawable: Drawable): void {
+  if (drawable.onChange) drawable.onChange(drawable.shapes);
+}

package/src/drop.ts

@@ -0,0 +1,36 @@
+import { State } from './state.js';
+import * as cg from './types.js';
+import * as board from './board.js';
+import * as util from './util.js';
+import { cancel as dragCancel } from './drag.js';
+
+export function setDropMode(s: State, piece?: cg.Piece): void {
+  s.dropmode = {
+    active: true,
+    piece,
+  };
+  dragCancel(s);
+}
+
+export function cancelDropMode(s: State): void {
+  s.dropmode = {
+    active: false,
+  };
+}
+
+export function drop(s: State, e: cg.MouchEvent): void {
+  if (!s.dropmode.active) return;
+
+  board.unsetPremove(s);
+  board.unsetPredrop(s);
+
+  const piece = s.dropmode.piece;
+
+  if (piece) {
+    s.pieces.set('a0', piece);
+    const position = util.eventPosition(e);
+    const dest = position && board.getKeyAtDomPos(position, board.whitePov(s), s.dom.bounds());
+    if (dest) board.dropNewPiece(s, 'a0', dest);
+  }
+  s.dom.redraw();
+}

package/src/events.ts

@@ -0,0 +1,86 @@
+import { State } from './state.js';
+import * as drag from './drag.js';
+import * as draw from './draw.js';
+import { drop } from './drop.js';
+import { isRightButton } from './util.js';
+import * as cg from './types.js';
+
+type MouchBind = (e: cg.MouchEvent) => void;
+type StateMouchBind = (d: State, e: cg.MouchEvent) => void;
+
+export function bindBoard(s: State, onResize: () => void): void {
+  const boardEl = s.dom.elements.board;
+
+  if ('ResizeObserver' in window) new ResizeObserver(onResize).observe(s.dom.elements.wrap);
+
+  if (s.disableContextMenu || s.drawable.enabled) {
+    boardEl.addEventListener('contextmenu', e => e.preventDefault());
+  }
+
+  if (s.viewOnly) return;
+
+  // Cannot be passive, because we prevent touch scrolling and dragging of
+  // selected elements.
+  const onStart = startDragOrDraw(s);
+  boardEl.addEventListener('touchstart', onStart as EventListener, {
+    passive: false,
+  });
+  boardEl.addEventListener('mousedown', onStart as EventListener, {
+    passive: false,
+  });
+}
+
+// returns the unbind function
+export function bindDocument(s: State, onResize: () => void): cg.Unbind {
+  const unbinds: cg.Unbind[] = [];
+
+  // Old versions of Edge and Safari do not support ResizeObserver. Send
+  // chessground.resize if a user action has changed the bounds of the board.
+  if (!('ResizeObserver' in window)) unbinds.push(unbindable(document.body, 'chessground.resize', onResize));
+
+  if (!s.viewOnly) {
+    const onmove = dragOrDraw(s, drag.move, draw.move);
+    const onend = dragOrDraw(s, drag.end, draw.end);
+
+    for (const ev of ['touchmove', 'mousemove'])
+      unbinds.push(unbindable(document, ev, onmove as EventListener));
+    for (const ev of ['touchend', 'mouseup']) unbinds.push(unbindable(document, ev, onend as EventListener));
+
+    const onScroll = () => s.dom.bounds.clear();
+    unbinds.push(unbindable(document, 'scroll', onScroll, { capture: true, passive: true }));
+    unbinds.push(unbindable(window, 'resize', onScroll, { passive: true }));
+  }
+
+  return () => unbinds.forEach(f => f());
+}
+
+function unbindable(
+  el: EventTarget,
+  eventName: string,
+  callback: EventListener,
+  options?: AddEventListenerOptions,
+): cg.Unbind {
+  el.addEventListener(eventName, callback, options);
+  return () => el.removeEventListener(eventName, callback, options);
+}
+
+const startDragOrDraw =
+  (s: State): MouchBind =>
+  e => {
+    if (s.draggable.current) drag.cancel(s);
+    else if (s.drawable.current) draw.cancel(s);
+    else if (e.shiftKey || isRightButton(e)) {
+      if (s.drawable.enabled) draw.start(s, e);
+    } else if (!s.viewOnly) {
+      if (s.dropmode.active) drop(s, e);
+      else drag.start(s, e);
+    }
+  };
+
+const dragOrDraw =
+  (s: State, withDrag: StateMouchBind, withDraw: StateMouchBind): MouchBind =>
+  e => {
+    if (s.drawable.current) {
+      if (s.drawable.enabled) withDraw(s, e);
+    } else if (!s.viewOnly) withDrag(s, e);
+  };

package/src/explosion.ts

@@ -0,0 +1,19 @@
+import { State } from './state.js';
+import { Key } from './types.js';
+
+export function explosion(state: State, keys: Key[]): void {
+  state.exploding = { stage: 1, keys };
+  state.dom.redraw();
+  setTimeout(() => {
+    setStage(state, 2);
+    setTimeout(() => setStage(state, undefined), 120);
+  }, 120);
+}
+
+function setStage(state: State, stage: number | undefined): void {
+  if (state.exploding) {
+    if (stage) state.exploding.stage = stage;
+    else state.exploding = undefined;
+    state.dom.redraw();
+  }
+}