"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.attachGesture = void 0;
const perfect_freehand_1 = require("perfect-freehand");
const namespaceURI_1 = require("../component/namespaceURI");
const event_1 = require("../event");
function getSvgPathFromStroke(stroke) {
    if (!stroke.length) {
        return '';
    }
    const d = stroke.reduce((acc, [x0, y0], i, arr) => {
        const [x1, y1] = arr[(i + 1) % arr.length];
        acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2);
        return acc;
    }, ['M', ...stroke[0], 'Q']);
    d.push('Z');
    return d.join(' ');
}
const STROKE_OPT = {
    size: 3,
    smoothing: 0.99,
    thinning: 0.5,
    streamline: 0.25,
    easing: (t) => t,
    start: {
        taper: 0,
        cap: true,
    },
    end: {
        taper: 0,
        cap: true,
    },
};
function attachGesture(system) {
    // console.log('attachGesture')
    const { root, foreground: { svg }, api: { document: { createElementNS }, }, } = system;
    const captureGesture = (event, opt = {}, callback) => {
        const { pointerId, screenX, screenY } = event;
        // svg.setPointerCapture(pointerId)
        const path = createElementNS(namespaceURI_1.namespaceURI, 'path');
        svg.appendChild(path);
        const { lineWidth = 2, strokeStyle = '#d1d1d1' } = opt;
        const color = strokeStyle;
        path.style.stroke = color;
        path.style.strokeWidth = `${lineWidth}px`;
        path.style.fill = color;
        let active = true;
        const track = [{ x: screenX, y: screenY }];
        const pointerMoveListener = (_event) => {
            // console.log('attachGesture', 'pointerMoveListener')
            const { pointerId: _pointerId } = _event;
            if (_pointerId === pointerId) {
                const { clientX, clientY } = _event;
                const outline = (0, perfect_freehand_1.getStroke)(track, STROKE_OPT);
                const d = getSvgPathFromStroke(outline);
                path.setAttribute('d', d);
                track.push({ x: clientX, y: clientY });
            }
        };
        const pointerUpListener = (_event) => {
            // console.log('attachGesture', 'pointerUpListener')
            const { pointerId: _pointerId } = _event;
            if (_pointerId === pointerId) {
                unlisten();
                callback(_event, track);
            }
        };
        const unlisten = () => {
            if (active) {
                active = false;
                unlistenPointerMove();
                unlistenPointerUp();
                svg.removeChild(path);
            }
        };
        const unlistenPointerMove = (0, event_1._addEventListener)('pointermove', root.shadowRoot, pointerMoveListener, true);
        const unlistenPointerUp = (0, event_1._addEventListener)('pointerup', root.shadowRoot, pointerUpListener, true);
        return unlisten;
    };
    system.captureGesture = captureGesture;
}
exports.attachGesture = attachGesture;
//# sourceMappingURL=attachGesture.js.map