shogiground/esm/draw.js

lishogi.org shogi ui

import { unselect, cancelMoveOrDrop } from './board.js';
import { eventPosition, isRightButton, posOfOutsideEl, samePiece, getHandPieceAtDomPos, getKeyAtDomPos, sentePov, } from './util.js';
import { isPiece, pos2user, samePieceOrKey, setAttributes } from './shapes.js';
const brushes = ['primary', 'alternative0', 'alternative1', 'alternative2'];
export function start(state, e) {
    // support one finger touch only
    if (e.touches && e.touches.length > 1)
        return;
    e.stopPropagation();
    e.preventDefault();
    if (e.ctrlKey)
        unselect(state);
    else
        cancelMoveOrDrop(state);
    const pos = eventPosition(e), bounds = state.dom.bounds.board.bounds(), orig = pos && bounds && getKeyAtDomPos(pos, sentePov(state.orientation), state.dimensions, bounds), piece = state.drawable.piece;
    if (!orig)
        return;
    state.drawable.current = {
        orig,
        dest: undefined,
        pos,
        piece,
        brush: eventBrush(e, isRightButton(e) || state.drawable.forced),
    };
    processDraw(state);
}
export function startFromHand(state, piece, e) {
    // support one finger touch only
    if (e.touches && e.touches.length > 1)
        return;
    e.stopPropagation();
    e.preventDefault();
    if (e.ctrlKey)
        unselect(state);
    else
        cancelMoveOrDrop(state);
    const pos = eventPosition(e);
    if (!pos)
        return;
    state.drawable.current = {
        orig: piece,
        dest: undefined,
        pos,
        brush: eventBrush(e, isRightButton(e) || state.drawable.forced),
    };
    processDraw(state);
}
function processDraw(state) {
    requestAnimationFrame(() => {
        const cur = state.drawable.current, bounds = state.dom.bounds.board.bounds();
        if (cur && bounds) {
            const dest = getKeyAtDomPos(cur.pos, sentePov(state.orientation), state.dimensions, bounds) ||
                getHandPieceAtDomPos(cur.pos, state.hands.roles, state.dom.bounds.hands.pieceBounds());
            if (cur.dest !== dest && !(cur.dest && dest && samePieceOrKey(dest, cur.dest))) {
                cur.dest = dest;
                state.dom.redrawNow();
            }
            const outPos = posOfOutsideEl(cur.pos[0], cur.pos[1], sentePov(state.orientation), state.dimensions, bounds);
            if (!cur.dest && cur.arrow && outPos) {
                const dest = pos2user(outPos, state.orientation, state.dimensions, state.squareRatio);
                setAttributes(cur.arrow, {
                    x2: dest[0] - state.squareRatio[0] / 2,
                    y2: dest[1] - state.squareRatio[1] / 2,
                });
            }
            processDraw(state);
        }
    });
}
export function move(state, e) {
    if (state.drawable.current)
        state.drawable.current.pos = eventPosition(e);
}
export function end(state, _) {
    const cur = state.drawable.current;
    if (cur) {
        addShape(state.drawable, cur);
        cancel(state);
    }
}
export function cancel(state) {
    if (state.drawable.current) {
        state.drawable.current = undefined;
        state.dom.redraw();
    }
}
export function clear(state) {
    const drawableLength = state.drawable.shapes.length;
    if (drawableLength || state.drawable.piece) {
        state.drawable.shapes = [];
        state.drawable.piece = undefined;
        state.dom.redraw();
        if (drawableLength)
            onChange(state.drawable);
    }
}
export function setDrawPiece(state, piece) {
    if (state.drawable.piece && samePiece(state.drawable.piece, piece))
        state.drawable.piece = undefined;
    else
        state.drawable.piece = piece;
    state.dom.redraw();
}
function eventBrush(e, allowFirstModifier) {
    var _a;
    const modA = allowFirstModifier && (e.shiftKey || e.ctrlKey), modB = e.altKey || e.metaKey || ((_a = e.getModifierState) === null || _a === void 0 ? void 0 : _a.call(e, 'AltGraph'));
    return brushes[(modA ? 1 : 0) + (modB ? 2 : 0)];
}
function addShape(drawable, cur) {
    if (!cur.dest)
        return;
    const similarShape = (s) => cur.dest && samePieceOrKey(cur.orig, s.orig) && samePieceOrKey(cur.dest, s.dest);
    // separate shape for pieces
    const piece = cur.piece;
    cur.piece = undefined;
    const similar = drawable.shapes.find(similarShape), removePiece = drawable.shapes.find((s) => similarShape(s) && piece && s.piece && samePiece(piece, s.piece)), diffPiece = drawable.shapes.find((s) => similarShape(s) && piece && s.piece && !samePiece(piece, s.piece));
    // remove every similar shape
    if (similar)
        drawable.shapes = drawable.shapes.filter((s) => !similarShape(s));
    if (!isPiece(cur.orig) && piece && !removePiece) {
        drawable.shapes.push({ orig: cur.orig, dest: cur.orig, piece: piece, brush: cur.brush });
        // force circle around drawn pieces
        if (!samePieceOrKey(cur.orig, cur.dest))
            drawable.shapes.push({ orig: cur.orig, dest: cur.orig, brush: cur.brush });
    }
    if (!similar || diffPiece || similar.brush !== cur.brush)
        drawable.shapes.push(cur);
    onChange(drawable);
}
function onChange(drawable) {
    if (drawable.onChange)
        drawable.onChange(drawable.shapes);
}
//# sourceMappingURL=draw.js.map