duoyun-ui/elements/input-capture.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _DuoyunInputCaptureElement_onClear, _DuoyunInputCaptureElement_onKeydown, _DuoyunInputCaptureElement_onPointerdown, _DuoyunInputCaptureElement_onPointermove, _DuoyunInputCaptureElement_onPointerup;
var DuoyunInputCaptureElement_1;
import { adoptedStyle, customElement, part } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { getDisplayKey } from '../lib/hotkeys';
import { throttle } from '../lib/utils';
import './paragraph';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: contents;
  }
  .container,
  .circle {
    position: fixed;
    z-index: calc(${theme.popupZIndex} + 3);
    pointer-events: none;
  }
  .container {
    font-size: 4em;
    left: 0;
    right: 0;
    bottom: 2em;
    text-align: center;
    white-space: nowrap;
    background: rgba(0, 0, 0, calc(${theme.maskAlpha} + 0.4));
  }
  .kbd {
    background: transparent;
    color: white;
  }
  .circle {
    border: 2px solid red;
    border-radius: 10em;
    width: 2.5em;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
  }
`);
/**
 * @customElement dy-input-capture
 */
let DuoyunInputCaptureElement = DuoyunInputCaptureElement_1 = class DuoyunInputCaptureElement extends GemElement {
    constructor() {
        super(...arguments);
        this.state = {
            keys: [],
            mousePosition: null,
        };
        _DuoyunInputCaptureElement_onClear.set(this, throttle(() => {
            this.setState({ keys: [] });
        }, 1000));
        _DuoyunInputCaptureElement_onKeydown.set(this, (evt) => {
            this.setState({ keys: [...this.state.keys.slice(-5), getDisplayKey(evt.code)] });
            __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onClear, "f").call(this);
        });
        _DuoyunInputCaptureElement_onPointerdown.set(this, (evt) => this.setState({ mousePosition: [evt.clientX, evt.clientY] }));
        _DuoyunInputCaptureElement_onPointermove.set(this, (evt) => this.state.mousePosition && __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onPointerdown, "f").call(this, evt));
        _DuoyunInputCaptureElement_onPointerup.set(this, () => this.setState({ mousePosition: null }));
        this.mounted = () => {
            addEventListener('keydown', __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onKeydown, "f"), { capture: true });
            addEventListener('pointerdown', __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onPointerdown, "f"), { capture: true });
            addEventListener('pointermove', __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onPointermove, "f"), { capture: true });
            addEventListener('pointerup', __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onPointerup, "f"), { capture: true });
            addEventListener('pointercancel', __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onPointerup, "f"), { capture: true });
            () => {
                removeEventListener('keydown', __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onKeydown, "f"), { capture: true });
                removeEventListener('pointerdown', __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onPointerdown, "f"), { capture: true });
                removeEventListener('pointermove', __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onPointermove, "f"), { capture: true });
                removeEventListener('pointerup', __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onPointerup, "f"), { capture: true });
                removeEventListener('pointercancel', __classPrivateFieldGet(this, _DuoyunInputCaptureElement_onPointerup, "f"), { capture: true });
            };
        };
        this.render = () => {
            const { keys, mousePosition } = this.state;
            return html `
      ${keys.length
                ? html `
            <dy-paragraph part=${DuoyunInputCaptureElement_1.container} class="container">
              ${keys.map((key) => html `<kbd part=${DuoyunInputCaptureElement_1.kbd} class="kbd">${key}</kbd>`)}
            </dy-paragraph>
          `
                : ''}
      ${mousePosition
                ? html `
            <div class="circle">
              <style>
                .circle {
                  left: ${mousePosition[0]}px;
                  top: ${mousePosition[1]}px;
                }
              </style>
            </div>
          `
                : ''}
    `;
        };
    }
};
_DuoyunInputCaptureElement_onClear = new WeakMap(), _DuoyunInputCaptureElement_onKeydown = new WeakMap(), _DuoyunInputCaptureElement_onPointerdown = new WeakMap(), _DuoyunInputCaptureElement_onPointermove = new WeakMap(), _DuoyunInputCaptureElement_onPointerup = new WeakMap();
__decorate([
    part
], DuoyunInputCaptureElement, "container", void 0);
__decorate([
    part
], DuoyunInputCaptureElement, "kbd", void 0);
DuoyunInputCaptureElement = DuoyunInputCaptureElement_1 = __decorate([
    customElement('dy-input-capture'),
    adoptedStyle(style)
], DuoyunInputCaptureElement);
export { DuoyunInputCaptureElement };
//# sourceMappingURL=input-capture.js.map