duoyun-ui/elements/selection-box.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 _DuoyunSelectionBoxElement_getMode, _DuoyunSelectionBoxElement_onPointerDown, _DuoyunSelectionBoxElement_onPointerUp, _DuoyunSelectionBoxElement_onPointerMove;
import { adoptedStyle, customElement, emitter, state } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import './reflect';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: contents;
  }
`);
/**
 * @customElement dy-selection-box
 */
let DuoyunSelectionBoxElement = class DuoyunSelectionBoxElement extends GemElement {
    constructor() {
        super(...arguments);
        this.state = {
            rect: {
                left: 0,
                right: 0,
                bottom: 0,
                top: 0,
                width: 0,
                height: 0,
            },
            mode: 'new',
        };
        _DuoyunSelectionBoxElement_getMode.set(this, ({ shiftKey, metaKey, ctrlKey }) => {
            if (!shiftKey && !metaKey && !ctrlKey)
                return 'new';
            if (shiftKey)
                return 'append';
            return 'delete';
        });
        _DuoyunSelectionBoxElement_onPointerDown.set(this, (evt) => {
            var _a;
            if (evt.altKey)
                return;
            (_a = document.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
            this.selecting = true;
            this.setState({ start: [evt.x, evt.y], mode: __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_getMode, "f").call(this, evt) });
            addEventListener('pointermove', __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_onPointerMove, "f"));
            addEventListener('pointerup', __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_onPointerUp, "f"));
            addEventListener('pointercancel', __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_onPointerUp, "f"));
            addEventListener('contextmenu', __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_onPointerUp, "f"));
        });
        _DuoyunSelectionBoxElement_onPointerUp.set(this, () => {
            this.selecting = false;
            this.setState({ start: undefined, stop: undefined });
            removeEventListener('pointermove', __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_onPointerMove, "f"));
            removeEventListener('pointerup', __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_onPointerUp, "f"));
            removeEventListener('pointercancel', __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_onPointerUp, "f"));
            removeEventListener('contextmenu', __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_onPointerUp, "f"));
        });
        _DuoyunSelectionBoxElement_onPointerMove.set(this, (evt) => {
            const start = this.state.start;
            const x = evt.x === start[0] ? evt.x + 0.01 : evt.x;
            const y = evt.y === start[1] ? evt.y + 0.01 : evt.y;
            const rect = {
                left: Math.min(start[0], x),
                right: Math.max(start[0], x),
                top: Math.min(start[1], y),
                bottom: Math.max(start[1], y),
                width: Math.abs(start[0] - x),
                height: Math.abs(start[1] - y),
            };
            if (Math.sqrt(rect.width ** 2 + rect.height ** 2) < 4)
                return;
            this.setState({ stop: [x, y], rect });
            this.change({ rect, mode: this.state.mode });
        });
        this.mounted = () => {
            const root = this.getRootNode();
            root.addEventListener('pointerdown', __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_onPointerDown, "f"));
            return () => {
                root.removeEventListener('pointerdown', __classPrivateFieldGet(this, _DuoyunSelectionBoxElement_onPointerDown, "f"));
            };
        };
        this.render = () => {
            const { start, stop, rect } = this.state;
            if (!start || !stop)
                return html ``;
            const { left, top, width, height } = rect;
            return html `
      <dy-reflect .target=${document.body}>
        <dy-selection-box-mask
          style=${styleMap({
                left: left + 'px',
                top: top + 'px',
                width: width + 'px',
                height: height + 'px',
            })}
        ></dy-selection-box-mask>
      </dy-reflect>
    `;
        };
    }
};
_DuoyunSelectionBoxElement_getMode = new WeakMap(), _DuoyunSelectionBoxElement_onPointerDown = new WeakMap(), _DuoyunSelectionBoxElement_onPointerUp = new WeakMap(), _DuoyunSelectionBoxElement_onPointerMove = new WeakMap();
__decorate([
    emitter
], DuoyunSelectionBoxElement.prototype, "change", void 0);
__decorate([
    state
], DuoyunSelectionBoxElement.prototype, "selecting", void 0);
DuoyunSelectionBoxElement = __decorate([
    customElement('dy-selection-box'),
    adoptedStyle(style)
], DuoyunSelectionBoxElement);
export { DuoyunSelectionBoxElement };
const borderWidth = 10;
const maskStyle = createCSSSheet(css `
  :host {
    position: fixed;
    border: ${borderWidth}px solid transparent;
    transform: translate(-${borderWidth}px, -${borderWidth}px);
  }
  :host::after,
  :host::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  :host::before {
    opacity: 0.4;
    background: ${theme.informativeColor};
  }
  :host::after {
    border: 1px solid ${theme.informativeColor};
  }
`);
/**
 * @customElement dy-selection-box-mask
 */
let DuoyunSelectionBoxMaskElement = class DuoyunSelectionBoxMaskElement extends GemElement {
};
DuoyunSelectionBoxMaskElement = __decorate([
    customElement('dy-selection-box-mask'),
    adoptedStyle(maskStyle)
], DuoyunSelectionBoxMaskElement);
export { DuoyunSelectionBoxMaskElement };
//# sourceMappingURL=selection-box.js.map