threepipe/lib/three/controls/TransformControls2.js

A modern 3D viewer framework built on top of three.js, written in TypeScript, designed to make creating high-quality, modular, and extensible 3D experiences on the web simple and enjoyable.

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;
};
import { TransformControls } from './TransformControls.js';
import { MathUtils } from 'three';
import { iObjectCommons } from '../../core';
import { uiDropdown, uiFolderContainer, uiSlider, uiToggle } from 'uiconfig.js';
let TransformControls2 = class TransformControls2 extends TransformControls {
    _keyDownListener(event) {
        if (!this.enabled)
            return;
        if (!this.object)
            return;
        if (event.metaKey || event.ctrlKey)
            return;
        switch (event.code) {
            case 'KeyQ':
                this.space = this.space === 'local' ? 'world' : 'local';
                break;
            case 'ShiftLeft':
                this.translationSnap = 0.5;
                this.rotationSnap = MathUtils.degToRad(15);
                this.scaleSnap = 0.25;
                break;
            case 'KeyW':
                this.mode = 'translate';
                break;
            case 'KeyE':
                this.mode = 'rotate';
                break;
            case 'KeyR':
                this.mode = 'scale';
                break;
            case 'Equal':
            case 'NumpadAdd':
            case 'Plus':
                this.size = this.size + 0.1;
                break;
            case 'Minus':
            case 'NumpadSubtract':
            case 'Underscore':
                this.size = Math.max(this.size - 0.1, 0.1);
                break;
            case 'KeyX':
                this.showX = !this.showX;
                break;
            case 'KeyY':
                this.showY = !this.showY;
                break;
            case 'KeyZ':
                this.showZ = !this.showZ;
                break;
            case 'Space':
                this.enabled = !this.enabled;
                break;
            default:
                return;
        }
        this.setDirty({ refreshScene: true, frameFade: true });
    }
    _keyUpListener(event) {
        if (!this.enabled)
            return;
        // reset events
        switch (event.code) {
            case 'ShiftLeft':
                this.translationSnap = null;
                this.rotationSnap = null;
                this.scaleSnap = null;
                break;
            default:
                break;
        }
        if (!this.object)
            return;
        // non-reset events
        switch (event.code) {
            default:
                break;
        }
    }
    constructor(camera, canvas) {
        super(camera, canvas);
        this.isWidget = true;
        this.assetType = 'widget';
        this.setDirty = iObjectCommons.setDirty.bind(this);
        this.refreshUi = iObjectCommons.refreshUi.bind(this);
        this.visible = false;
        this.userData.bboxVisible = false;
        this.size = 1.5;
        this.addEventListener('objectChange', () => {
            this?.object?.setDirty && this.object.setDirty({ frameFade: false });
            // todo: do this.setDirty?
        });
        this.addEventListener('change', () => {
            this.setDirty({ frameFade: false });
        });
        this._keyUpListener = this._keyUpListener.bind(this);
        this._keyDownListener = this._keyDownListener.bind(this);
        window.addEventListener('keydown', this._keyDownListener);
        window.addEventListener('keyup', this._keyUpListener);
    }
    dispose() {
        window.removeEventListener('keydown', this._keyDownListener);
        window.removeEventListener('keyup', this._keyUpListener);
        super.dispose();
    }
    // dragging: boolean
    // endregion
    /**
     * Get the threejs object
     * @deprecated
     */
    get modelObject() {
        return this;
    }
};
__decorate([
    uiDropdown('Mode', ['translate', 'rotate', 'scale'].map(label => ({ label })))
], TransformControls2.prototype, "mode", void 0);
__decorate([
    uiDropdown('Space', ['world', 'local'].map(label => ({ label })))
], TransformControls2.prototype, "space", void 0);
__decorate([
    uiSlider('Size', [0.1, 10], 0.1)
], TransformControls2.prototype, "size", void 0);
__decorate([
    uiToggle('Show X')
], TransformControls2.prototype, "showX", void 0);
__decorate([
    uiToggle('Show Y')
], TransformControls2.prototype, "showY", void 0);
__decorate([
    uiToggle('Show Z')
], TransformControls2.prototype, "showZ", void 0);
TransformControls2 = __decorate([
    uiFolderContainer('Transform Controls')
], TransformControls2);
export { TransformControls2 };
//# sourceMappingURL=TransformControls2.js.map