@benev/nubs/x/elements/stickpad/element.js

user-input system for web games

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 _NubStickpad_instances, _NubStickpad_area_rect_get, _NubStickpad_reset_offset_to_center, _NubStickpad_update_vector_and_dispatch_cause, _NubStickpad_pointer_listeners, _NubStickpad_pointer_listeners_augmented_to_change_offset;
import { html, LitElement } from "lit";
import { property, query } from "lit/decorators.js";
import { mixinCss, nap } from "@chasemoskal/magical";
import { styles } from "./styles.css.js";
import { NubCauseEvent } from "../../events/cause.js";
import { NubStickGraphic } from "../stick-graphic/element.js";
import { calculate_offset } from "./utils/calculate_offset.js";
import { transform } from "../stick-graphic/utils/transform.js";
import { on_element_resize } from "./utils/on_element_resize.js";
import { calculate_centered_offset } from "./utils/calculate_centered_offset.js";
import { make_pointer_listeners } from "../stick/utils/make_pointer_listeners.js";
import { calculate_new_vector_from_pointer_position } from "../stick/utils/calculate_new_vector_from_pointer_position.js";
let NubStickpad = class NubStickpad extends LitElement {
    constructor() {
        super(...arguments);
        _NubStickpad_instances.add(this);
        this.cause = "Stick";
        this.vector = [0, 0];
        this.offset = [0, 0];
        _NubStickpad_reset_offset_to_center.set(this, () => {
            this.offset = calculate_centered_offset(this.graphic.basis, __classPrivateFieldGet(this, _NubStickpad_instances, "a", _NubStickpad_area_rect_get));
        });
        _NubStickpad_update_vector_and_dispatch_cause.set(this, (vector) => {
            this.vector = vector;
            NubCauseEvent
                .target(this)
                .dispatch({
                vector,
                kind: "stick",
                cause: this.cause,
            });
        });
        _NubStickpad_pointer_listeners.set(this, make_pointer_listeners({
            get_pointer_capture_element: () => this.graphic,
            set_vector: __classPrivateFieldGet(this, _NubStickpad_update_vector_and_dispatch_cause, "f"),
            set_pointer_position: position => {
                __classPrivateFieldGet(this, _NubStickpad_update_vector_and_dispatch_cause, "f").call(this, calculate_new_vector_from_pointer_position(this.graphic.basis, position));
            },
        }));
        _NubStickpad_pointer_listeners_augmented_to_change_offset.set(this, {
            pointerdown: (event) => {
                this.offset = calculate_offset(event, this.graphic.basis, __classPrivateFieldGet(this, _NubStickpad_instances, "a", _NubStickpad_area_rect_get));
                __classPrivateFieldGet(this, _NubStickpad_pointer_listeners, "f").pointerdown.handleEvent(event);
            },
            pointerup: (event) => {
                __classPrivateFieldGet(this, _NubStickpad_reset_offset_to_center, "f").call(this);
                __classPrivateFieldGet(this, _NubStickpad_pointer_listeners, "f").pointerup.handleEvent(event);
            },
        });
    }
    firstUpdated() {
        nap(0).then(() => __classPrivateFieldGet(this, _NubStickpad_reset_offset_to_center, "f").call(this));
        on_element_resize(this, () => __classPrivateFieldGet(this, _NubStickpad_reset_offset_to_center, "f").call(this));
    }
    render() {
        const listeners = __classPrivateFieldGet(this, _NubStickpad_pointer_listeners, "f");
        const augmented = __classPrivateFieldGet(this, _NubStickpad_pointer_listeners_augmented_to_change_offset, "f");
        const graphic_style = transform(...this.offset);
        return html `
			<div
				part=area
				@pointerdown=${augmented.pointerdown}
				@pointermove=${listeners.pointermove}
				@pointerup=${augmented.pointerup}
				>
				<nub-stick-graphic
					part=graphic
					exportparts="base over under"
					style="${graphic_style}"
					.vector=${this.vector}
				></nub-stick-graphic>
			</div>
		`;
    }
};
_NubStickpad_reset_offset_to_center = new WeakMap();
_NubStickpad_update_vector_and_dispatch_cause = new WeakMap();
_NubStickpad_pointer_listeners = new WeakMap();
_NubStickpad_pointer_listeners_augmented_to_change_offset = new WeakMap();
_NubStickpad_instances = new WeakSet();
_NubStickpad_area_rect_get = function _NubStickpad_area_rect_get() {
    var _a;
    return (_a = this.area) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
};
__decorate([
    property({ type: String, reflect: true })
], NubStickpad.prototype, "cause", void 0);
__decorate([
    property()
], NubStickpad.prototype, "vector", void 0);
__decorate([
    property()
], NubStickpad.prototype, "offset", void 0);
__decorate([
    query(`[part="area"]`)
], NubStickpad.prototype, "area", void 0);
__decorate([
    query(NubStickGraphic.tag)
], NubStickpad.prototype, "graphic", void 0);
NubStickpad = __decorate([
    mixinCss(styles)
], NubStickpad);
export { NubStickpad };
//# sourceMappingURL=element.js.map