shogiground/esm/events.js

lishogi.org shogi ui

import * as drag from './drag.js';
import * as draw from './draw.js';
import { callUserFunction, eventPosition, getHandPieceAtDomPos, isMiddleButton, isPieceNode, isRightButton, samePiece, } from './util.js';
import { anim } from './anim.js';
import { userDrop, userMove, cancelPromotion, selectSquare } from './board.js';
import { usesBounds } from './shapes.js';
function clearBounds(s) {
    s.dom.bounds.board.bounds.clear();
    s.dom.bounds.hands.bounds.clear();
    s.dom.bounds.hands.pieceBounds.clear();
}
function onResize(s) {
    return () => {
        clearBounds(s);
        if (usesBounds(s.drawable.shapes.concat(s.drawable.autoShapes)))
            s.dom.redrawShapes();
    };
}
export function bindBoard(s, boardEls) {
    if ('ResizeObserver' in window)
        new ResizeObserver(onResize(s)).observe(boardEls.board);
    if (s.viewOnly)
        return;
    const piecesEl = boardEls.pieces, promotionEl = boardEls.promotion;
    // Cannot be passive, because we prevent touch scrolling and dragging of selected elements.
    const onStart = startDragOrDraw(s);
    piecesEl.addEventListener('touchstart', onStart, {
        passive: false,
    });
    piecesEl.addEventListener('mousedown', onStart, {
        passive: false,
    });
    if (s.disableContextMenu || s.drawable.enabled)
        piecesEl.addEventListener('contextmenu', (e) => e.preventDefault());
    if (promotionEl) {
        const pieceSelection = (e) => promote(s, e);
        promotionEl.addEventListener('click', pieceSelection);
        if (s.disableContextMenu)
            promotionEl.addEventListener('contextmenu', (e) => e.preventDefault());
    }
}
export function bindHand(s, handEl) {
    if ('ResizeObserver' in window)
        new ResizeObserver(onResize(s)).observe(handEl);
    if (s.viewOnly)
        return;
    const onStart = startDragFromHand(s);
    handEl.addEventListener('mousedown', onStart, { passive: false });
    handEl.addEventListener('touchstart', onStart, {
        passive: false,
    });
    handEl.addEventListener('click', () => {
        if (s.promotion.current) {
            cancelPromotion(s);
            s.dom.redraw();
        }
    });
    if (s.disableContextMenu || s.drawable.enabled)
        handEl.addEventListener('contextmenu', (e) => e.preventDefault());
}
// returns the unbind function
export function bindDocument(s) {
    const unbinds = [];
    // Old versions of Edge and Safari do not support ResizeObserver. Send
    // shogiground.resize if a user action has changed the bounds of the board.
    if (!('ResizeObserver' in window)) {
        unbinds.push(unbindable(document.body, 'shogiground.resize', onResize(s)));
    }
    if (!s.viewOnly) {
        const onmove = dragOrDraw(s, drag.move, draw.move), onend = dragOrDraw(s, drag.end, draw.end);
        for (const ev of ['touchmove', 'mousemove'])
            unbinds.push(unbindable(document, ev, onmove));
        for (const ev of ['touchend', 'mouseup'])
            unbinds.push(unbindable(document, ev, onend));
        unbinds.push(unbindable(document, 'scroll', () => clearBounds(s), { capture: true, passive: true }));
        unbinds.push(unbindable(window, 'resize', () => clearBounds(s), { passive: true }));
    }
    return () => unbinds.forEach((f) => f());
}
function unbindable(el, eventName, callback, options) {
    el.addEventListener(eventName, callback, options);
    return () => el.removeEventListener(eventName, callback, options);
}
function startDragOrDraw(s) {
    return (e) => {
        if (s.draggable.current)
            drag.cancel(s);
        else if (s.drawable.current)
            draw.cancel(s);
        else if (e.shiftKey || isRightButton(e) || s.drawable.forced) {
            if (s.drawable.enabled)
                draw.start(s, e);
        }
        else if (!s.viewOnly && !drag.unwantedEvent(e))
            drag.start(s, e);
    };
}
function dragOrDraw(s, withDrag, withDraw) {
    return (e) => {
        if (s.drawable.current) {
            if (s.drawable.enabled)
                withDraw(s, e);
        }
        else if (!s.viewOnly)
            withDrag(s, e);
    };
}
function startDragFromHand(s) {
    return (e) => {
        if (s.promotion.current)
            return;
        const pos = eventPosition(e), piece = pos && getHandPieceAtDomPos(pos, s.hands.roles, s.dom.bounds.hands.pieceBounds());
        if (piece) {
            if (s.draggable.current)
                drag.cancel(s);
            else if (s.drawable.current)
                draw.cancel(s);
            else if (isMiddleButton(e)) {
                if (s.drawable.enabled) {
                    if (e.cancelable !== false)
                        e.preventDefault();
                    draw.setDrawPiece(s, piece);
                }
            }
            else if (e.shiftKey || isRightButton(e) || s.drawable.forced) {
                if (s.drawable.enabled)
                    draw.startFromHand(s, piece, e);
            }
            else if (!s.viewOnly && !drag.unwantedEvent(e)) {
                if (e.cancelable !== false)
                    e.preventDefault();
                drag.dragNewPiece(s, piece, e);
            }
        }
    };
}
function promote(s, e) {
    e.stopPropagation();
    const target = e.target, cur = s.promotion.current;
    if (target && isPieceNode(target) && cur) {
        const piece = { color: target.sgColor, role: target.sgRole }, prom = !samePiece(cur.piece, piece);
        if (cur.dragged || (s.turnColor !== s.activeColor && s.activeColor !== 'both')) {
            if (s.selected)
                userMove(s, s.selected, cur.key, prom);
            else if (s.selectedPiece)
                userDrop(s, s.selectedPiece, cur.key, prom);
        }
        else
            anim((s) => selectSquare(s, cur.key, prom), s);
        callUserFunction(s.promotion.events.after, piece);
    }
    else
        anim((s) => cancelPromotion(s), s);
    s.promotion.current = undefined;
    s.dom.redraw();
}
//# sourceMappingURL=events.js.map