@operato/scene-visualizer 9.2.2 → 10.0.0-beta.2

package/dist/three-container.d.ts

@@ -1,85 +0,0 @@
-import { Component, ComponentNature, Container, Properties } from '@hatiolab/things-scene';
-import * as THREE from 'three';
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-import './three-layout.js';
-import { RealObject } from './threed/real-object.js';
-import { ThreeDimensionalContainer } from './threed/three-dimensional-container.js';
-import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-export declare class ThreeContainer extends Container implements ThreeDimensionalContainer {
-    _scene3d?: THREE.Scene;
-    _initalizeComplete?: Promise<void>;
-    _mixer?: THREE.AnimationMixer;
-    _camera?: THREE.PerspectiveCamera;
-    _renderer3d?: THREE.WebGLRenderer;
-    _mouse?: THREE.Vector2;
-    _clock?: THREE.Clock;
-    _controls?: any;
-    _onFocus?: (e: FocusEvent) => void;
-    _onResize?: (e: Event) => void;
-    _noSupportWebgl: boolean;
-    _raycaster: THREE.Raycaster;
-    _lastFocused?: RealObject;
-    _lastHovered?: RealObject;
-    private _css3DScene?;
-    private _css3DRenderer?;
-    composer?: EffectComposer;
-    containable(component: Component): boolean;
-    is3dContainer(): boolean;
-    createObjects(components: Component[]): void;
-    destroy_scene3d(): void;
-    update(): void;
-    resize(): void;
-    init_scene3d(): void;
-    threed_animate(): void;
-    stop(): void;
-    get scene3d(): THREE.Scene | undefined;
-    get renderer3d(): THREE.WebGLRenderer | undefined;
-    get mixer(): THREE.AnimationMixer | undefined;
-    get zoom(): number | undefined;
-    /**
-     * CSS3DRenderer용 THREE.Scene을 제공
-     */
-    get css3DScene(): THREE.Scene;
-    protected buildCSS3DScene(): THREE.Scene;
-    protected disposeCSS3DScene(): void;
-    /**
-     * css3d-renderer getter
-     */
-    get css3DRenderer(): CSS3DRenderer;
-    protected createCSS3DRenderer(): CSS3DRenderer;
-    protected disposeCSS3DRenderer(): void;
-    /**
-     * element내부에 필요한 overlay들을 생성
-     * ViewRenderer에서는 CSS3DRenderer와 GLRendering을 위한 canvas를 오버레이로 만든다.
-     * Warn: this.element는 아직 만들어지지 않은 상태에 buildOverlays가 호출됨.
-     * @param into
-     */
-    buildOverlays(): void;
-    render_threed(): void;
-    render(ctx: CanvasRenderingContext2D): void;
-    postrender(ctx: CanvasRenderingContext2D): void;
-    dispose(): void;
-    get layout(): import("@hatiolab/things-scene").LAYOUT;
-    get nature(): ComponentNature;
-    getObjectByRaycast(): THREE.Object3D | undefined;
-    getObjectsByRaycast(): THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>[] | undefined;
-    _showWebglNoSupportText(context: CanvasRenderingContext2D): void;
-    onchange(after: Properties, before: Properties): void;
-    onmousedown(e: MouseEvent): void;
-    onmouseup(e: MouseEvent): void;
-    onmousemove(e: MouseEvent): void;
-    onmouseleave(e: MouseEvent): void;
-    onwheel(e: WheelEvent): void;
-    ondblclick(e: MouseEvent): void;
-    ondragstart(e: DragEvent): void;
-    ondragmove(e: DragEvent): void;
-    ondragend(e: DragEvent): void;
-    ontouchstart(e: TouchEvent): void;
-    onpan(e: TouchEvent): void;
-    ontouchend(e: TouchEvent): void;
-    onkeydown(e: KeyboardEvent): void;
-    onpinch(e: TouchEvent): void;
-    ondoubletap(): void;
-    handleMouseWheel(event: WheelEvent): void;
-    onredraw(): void;
-}

package/dist/three-container.js

@@ -1,565 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { Container, error, FPS, Layout, sceneComponent } from '@hatiolab/things-scene';
-import * as THREE from 'three';
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
-import ThreeControls from './three-controls.js';
-import './three-layout.js';
-import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import { createFloor } from './threed/floor/floor.js';
-const NATURE = {
-    mutable: false,
-    resizable: true,
-    rotatable: true,
-    properties: [
-        {
-            type: 'select',
-            label: 'precision',
-            name: 'precision',
-            property: {
-                options: [
-                    {
-                        display: 'High',
-                        value: 'highp'
-                    },
-                    {
-                        display: 'Medium',
-                        value: 'mediump'
-                    },
-                    {
-                        display: 'Low',
-                        value: 'lowp'
-                    }
-                ]
-            }
-        },
-        {
-            type: 'checkbox',
-            label: 'anti-alias',
-            name: 'antialias',
-            property: 'antialias'
-        },
-        {
-            type: 'checkbox',
-            label: '3dmode',
-            name: 'threed',
-            property: 'threed'
-        },
-        {
-            type: 'checkbox',
-            label: 'auto-rotate',
-            name: 'autoRotate',
-            property: 'autoRotate'
-        },
-        {
-            type: 'checkbox',
-            label: 'debug',
-            name: 'debug',
-            property: 'debug'
-        }
-    ],
-    help: 'scene/component/three-container'
-};
-const WEBGL_NO_SUPPORT_TEXT = 'WebGL no support';
-let ThreeContainer = class ThreeContainer extends Container {
-    constructor() {
-        super(...arguments);
-        this._noSupportWebgl = false;
-        this._raycaster = new THREE.Raycaster();
-    }
-    containable(component) {
-        return component.is3dish();
-    }
-    is3dContainer() {
-        return true;
-    }
-    /* THREE Object related .. */
-    createObjects(components) {
-        for (let component of components) {
-            try {
-                var item = component.realObject;
-                if (item) {
-                    if (component.isHTMLElement()) {
-                        this.css3DScene.add(item.object3d);
-                    }
-                    else {
-                        this._scene3d.add(item.object3d);
-                    }
-                }
-            }
-            catch (err) {
-                error(err);
-            }
-        }
-    }
-    destroy_scene3d() {
-        var _a;
-        this.stop();
-        window.removeEventListener('focus', this._onFocus);
-        window.removeEventListener('resize', this._onResize);
-        if (this._renderer3d)
-            this._renderer3d.clear();
-        if ((_a = this._controls) === null || _a === void 0 ? void 0 : _a.autoRotate) {
-            this._controls.doAutoRotate(false);
-        }
-        delete this._renderer3d;
-        delete this._camera;
-        delete this._controls;
-        if (this._scene3d) {
-            let children = this._scene3d.children.slice();
-            for (let i in children) {
-                let child = children[i];
-                if (child.dispose)
-                    child.dispose();
-                if (child.geometry && child.geometry.dispose)
-                    child.geometry.dispose();
-                if (child.material && child.material.dispose)
-                    child.material.dispose();
-                if (child.texture && child.texture.dispose)
-                    child.texture.dispose();
-                this._scene3d.remove(child);
-            }
-        }
-        delete this._scene3d;
-    }
-    update() {
-        var { width, height } = this.bounds;
-        var { fov = 45, near = 0.1, far = 20000, antialias = true, precision = 'highp', cameraX, cameraY, cameraZ, exposure = 2.5 } = this.state;
-        var components = this.components || [];
-        // SCENE
-        this._scene3d = new THREE.Scene();
-        // CAMERA
-        var aspect = width / height;
-        this._camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-        var cameraXPos = height * 0.8, cameraYPos = width * 0.8, cameraZPos = Math.min(500, Math.floor(Math.min(width, height)));
-        // cameraZPos = Math.floor(Math.min(width, height))
-        if (cameraX != undefined)
-            cameraXPos = cameraX * width;
-        if (cameraY != undefined)
-            cameraYPos = cameraY * height;
-        if (cameraZ != undefined)
-            cameraZPos = cameraZ * Math.floor(Math.min(width, height));
-        this._camera.position.set(cameraXPos, cameraZPos, cameraYPos);
-        this._scene3d.add(this._camera);
-        this._camera.lookAt(this._scene3d.position);
-        this._camera.zoom = this.getState('zoom') * 0.01;
-        try {
-            const canvas = document.createElement('canvas');
-            let context = canvas.getContext('webgl2');
-            var renderer3d = new THREE.WebGLRenderer({
-                canvas,
-                context,
-                precision,
-                alpha: true,
-                antialias
-            });
-        }
-        catch (e) {
-            this._noSupportWebgl = true;
-            return;
-        }
-        this._renderer3d = renderer3d;
-        renderer3d.autoClear = true;
-        // @ts-ignore for three@0.150.1
-        renderer3d.outputColorSpace = THREE.SRGBColorSpace;
-        renderer3d.useLegacyLights = false;
-        renderer3d.toneMappingExposure = Math.pow(exposure, 5.0);
-        renderer3d.toneMapping = THREE.LinearToneMapping;
-        renderer3d.shadowMap.enabled = true;
-        renderer3d.setClearColor(0xffffff, 0); // transparent
-        renderer3d.setSize(width, height);
-        // CONTROLS
-        this._controls = new ThreeControls(this._camera, this);
-        this._controls.cameraChanged = true;
-        // Lights
-        var _hemiLight = new THREE.HemisphereLight(0xdddddd, 0x333333, 0.035);
-        this.scene3d.add(_hemiLight);
-        this._mouse = new THREE.Vector2();
-        this._clock = new THREE.Clock(true);
-        this._mixer = new THREE.AnimationMixer(this.scene3d);
-        this.createObjects(components);
-        this._camera.updateProjectionMatrix();
-        const floor = createFloor(this);
-        if (floor) {
-            this._scene3d.add(floor);
-        }
-        // postprocessing
-        var composer = (this.composer = new EffectComposer(renderer3d));
-        composer.setSize(width, height);
-        const renderPass = new RenderPass(this._scene3d, this._camera);
-        composer.addPass(renderPass);
-        this._onFocus = (e) => {
-            this.render_threed();
-        };
-        this._onResize = (e) => {
-            this.resize();
-        };
-        window.addEventListener('resize', this._onResize);
-        window.addEventListener('focus', this._onFocus);
-        this.buildOverlays();
-        this.resize();
-    }
-    resize() {
-        var _a;
-        const { width, height } = this.bounds;
-        this._camera.aspect = width / height;
-        this.renderer3d.setSize(width, height);
-        this.css3DRenderer.setSize(width, height);
-        (_a = this.composer) === null || _a === void 0 ? void 0 : _a.setSize(width, height);
-        this._camera.updateProjectionMatrix();
-    }
-    init_scene3d() {
-        this.root.on('redraw', this.onredraw, this);
-        if (this._scene3d) {
-            this.destroy_scene3d();
-        }
-        this.update();
-        this.onchangeData && this.onchangeData(this.data, this.data);
-    }
-    threed_animate() {
-        if (!this._controls) {
-            return;
-        }
-        if (this._mixer) {
-            this._mixer.update(this._clock.getDelta());
-        }
-        this._controls.update();
-        if (this.state.autoRotate) {
-            this.invalidate();
-        }
-        this.render_threed();
-    }
-    stop() { }
-    get scene3d() {
-        if (!this._scene3d) {
-            this.init_scene3d();
-        }
-        return this._scene3d;
-    }
-    get renderer3d() {
-        return this._renderer3d;
-    }
-    get mixer() {
-        return this._mixer;
-    }
-    get zoom() {
-        var _a;
-        return (_a = this._camera) === null || _a === void 0 ? void 0 : _a.zoom;
-    }
-    /**
-     * CSS3DRenderer용 THREE.Scene을 제공
-     */
-    get css3DScene() {
-        if (!this._css3DScene) {
-            this._css3DScene = this.buildCSS3DScene();
-        }
-        return this._css3DScene;
-    }
-    buildCSS3DScene() {
-        return new THREE.Scene();
-    }
-    disposeCSS3DScene() {
-        var children = [...this.css3DScene.children];
-        children.forEach(child => this.css3DScene.remove(child));
-    }
-    /* css3d-renderer */
-    /**
-     * css3d-renderer getter
-     */
-    get css3DRenderer() {
-        if (!this._css3DRenderer) {
-            this._css3DRenderer = this.createCSS3DRenderer();
-        }
-        return this._css3DRenderer;
-    }
-    createCSS3DRenderer() {
-        var renderer = new CSS3DRenderer();
-        var div = renderer.domElement;
-        div.style.position = 'absolute';
-        div.style.top = '0';
-        div.style.pointerEvents = 'none';
-        div.setAttribute('scene', 'three-container:css3d-renderer');
-        if (this.app.isViewMode) {
-            // disableAllUserEvents(div)
-        }
-        else {
-            div.style.pointerEvents = 'none';
-        }
-        return renderer;
-    }
-    disposeCSS3DRenderer() {
-        // Nothing to do
-    }
-    /**
-     * element내부에 필요한 overlay들을 생성
-     * ViewRenderer에서는 CSS3DRenderer와 GLRendering을 위한 canvas를 오버레이로 만든다.
-     * Warn: this.element는 아직 만들어지지 않은 상태에 buildOverlays가 호출됨.
-     * @param into
-     */
-    buildOverlays() {
-        this.element.appendChild(this.css3DRenderer.domElement);
-    }
-    render_threed() {
-        if (this.composer) {
-            this.composer.render();
-        }
-    }
-    /* Container Overides .. */
-    render(ctx) {
-        if (this.app.isViewMode) {
-            this.setState('threed', true);
-        }
-        if (this.state.threed && !this._noSupportWebgl && this._camera) {
-            this.css3DRenderer.render(this.css3DScene, this._camera);
-            return;
-        }
-        super.render(ctx);
-    }
-    postrender(ctx) {
-        var { left, top, debug, threed } = this.state;
-        var { width, height } = this.bounds;
-        // ios에서 width, height에 소수점이 있으면 3d를 표현하지 못하는 문제가 있어 정수화
-        width = Math.floor(width);
-        height = Math.floor(height);
-        if (threed) {
-            if (!this._scene3d) {
-                this.init_scene3d();
-                this.render_threed();
-            }
-            if (this._noSupportWebgl) {
-                this._showWebglNoSupportText(ctx);
-                return;
-            }
-            if (!this._renderer3d) {
-                return;
-            }
-            var { width: rendererWidth, height: rendererHeight } = this._renderer3d.getSize(new THREE.Vector2());
-            ctx.drawImage(this._renderer3d.domElement, 0, 0, rendererWidth, rendererHeight, left, top, width, height);
-            if (debug) {
-                ctx.font = 100 + 'px Arial';
-                ctx.textAlign = 'center';
-                ctx.fillStyle = 'black';
-                ctx.globalAlpha = 0.5;
-                ctx.fillText(String(FPS()), 100, 100);
-            }
-        }
-        else {
-            super.postrender(ctx);
-        }
-    }
-    dispose() {
-        var _a;
-        this.root.off('redraw', this.onredraw, this);
-        this.disposeCSS3DScene();
-        (_a = this.composer) === null || _a === void 0 ? void 0 : _a.dispose();
-        this.destroy_scene3d();
-        super.dispose();
-    }
-    get layout() {
-        return Layout.get('three');
-    }
-    get nature() {
-        return NATURE;
-    }
-    getObjectByRaycast() {
-        var intersects = this.getObjectsByRaycast();
-        if (intersects && intersects.length > 0) {
-            var object = intersects[0].object;
-            while (object) {
-                if (object.userData.context) {
-                    return object;
-                }
-                object = object.parent;
-            }
-        }
-    }
-    getObjectsByRaycast() {
-        var vector = this._mouse;
-        if (!this._camera) {
-            return;
-        }
-        this._raycaster.setFromCamera(vector, this._camera);
-        var intersects = this._raycaster.intersectObjects(this._scene3d.children, true);
-        return intersects;
-    }
-    _showWebglNoSupportText(context) {
-        context.save();
-        var { width, height } = this.state;
-        context.font = width / 20 + 'px Arial';
-        context.textAlign = 'center';
-        context.fillText(WEBGL_NO_SUPPORT_TEXT, width / 2 - width / 40, height / 2);
-        context.restore();
-    }
-    /* Event Handlers */
-    onchange(after, before) {
-        if (after.hasOwnProperty('width') || after.hasOwnProperty('height') || after.hasOwnProperty('threed'))
-            this.destroy_scene3d();
-        if (after.hasOwnProperty('autoRotate')) {
-            if (this._controls) {
-                this._controls.doAutoRotate(after.autoRotate);
-            }
-        }
-        if (after.hasOwnProperty('fov') ||
-            after.hasOwnProperty('near') ||
-            after.hasOwnProperty('far') ||
-            after.hasOwnProperty('zoom')) {
-            if (this._camera) {
-                const { near, far, zoom, fov } = this.state;
-                this._camera.near = near;
-                this._camera.far = far;
-                this._camera.zoom = zoom * 0.01;
-                this._camera.fov = fov;
-                this._camera.updateProjectionMatrix();
-                this._controls.cameraChanged = true;
-            }
-        }
-    }
-    onmousedown(e) {
-        if (this._controls) {
-            this._controls.onMouseDown(e);
-        }
-    }
-    onmouseup(e) {
-        var _a;
-        if (this._controls) {
-            if (this._lastFocused) {
-                ;
-                this._lastFocused._focused = false;
-            }
-            const { left, top, width, height } = this.state;
-            var pointer = this.transcoordC2S(e.offsetX, e.offsetY);
-            this._mouse.x = ((pointer.x - left) / width) * 2 - 1;
-            this._mouse.y = -((pointer.y - top) / height) * 2 + 1;
-            var object = this.getObjectByRaycast();
-            var realObject = object === null || object === void 0 ? void 0 : object.userData.context;
-            if (realObject) {
-                ;
-                realObject._focused = true;
-                realObject._focusedAt = performance.now();
-                this._lastFocused = realObject;
-                (_a = realObject.component) === null || _a === void 0 ? void 0 : _a.trigger('click', e);
-            }
-            e.stopPropagation();
-        }
-    }
-    onmousemove(e) {
-        var _a, _b;
-        if (this._controls) {
-            const { left, top, width, height } = this.state;
-            var pointer = this.transcoordC2S(e.offsetX, e.offsetY);
-            this._mouse.x = ((pointer.x - left) / width) * 2 - 1;
-            this._mouse.y = -((pointer.y - top) / height) * 2 + 1;
-            var object = this.getObjectByRaycast();
-            var realObject = object === null || object === void 0 ? void 0 : object.userData.context;
-            if (realObject !== this._lastHovered) {
-                if (this._lastHovered) {
-                    (_a = this._lastHovered.component) === null || _a === void 0 ? void 0 : _a.trigger('mouseleave', e);
-                    delete this._lastHovered;
-                }
-                if (realObject) {
-                    this._lastHovered = realObject;
-                    (_b = this._lastHovered.component) === null || _b === void 0 ? void 0 : _b.trigger('mouseenter', e);
-                }
-            }
-            this._controls.onMouseMove(e);
-            e.stopPropagation();
-        }
-    }
-    onmouseleave(e) { }
-    onwheel(e) {
-        if (this._controls) {
-            this.handleMouseWheel(e);
-            e.stopPropagation();
-        }
-    }
-    ondblclick(e) {
-        if (this._controls) {
-            this.setState('zoom', this.getState('zoom'));
-            this._controls.reset();
-            e.stopPropagation();
-        }
-    }
-    ondragstart(e) {
-        if (this._controls) {
-            var pointer = this.transcoordC2S(e.offsetX, e.offsetY);
-            var { left, top, width, height } = this.bounds;
-            this._mouse.x = ((pointer.x - left) / width) * 2 - 1;
-            this._mouse.y = -((pointer.y - top) / height) * 2 + 1;
-            this._controls.onDragStart(e);
-            e.stopPropagation();
-        }
-    }
-    ondragmove(e) {
-        if (this._controls) {
-            this._controls.cameraChanged = true;
-            this._controls.onDragMove(e);
-            e.stopPropagation();
-        }
-    }
-    ondragend(e) {
-        if (this._controls) {
-            this._controls.cameraChanged = true;
-            this._controls.onDragEnd(e);
-            e.stopPropagation();
-        }
-    }
-    ontouchstart(e) {
-        if (this._controls) {
-            this._controls.onTouchStart(e);
-            e.stopPropagation();
-        }
-    }
-    onpan(e) {
-        if (this._controls) {
-            this._controls.cameraChanged = true;
-            this._controls.onTouchMove(e);
-            e.stopPropagation();
-        }
-    }
-    ontouchend(e) {
-        if (this._controls) {
-            this._controls.onTouchEnd(e);
-            e.stopPropagation();
-        }
-    }
-    onkeydown(e) {
-        if (this._controls) {
-            this._controls.onKeyDown(e);
-            e.stopPropagation();
-        }
-    }
-    onpinch(e) {
-        if (this._controls) {
-            var zoom = this.getState('zoom');
-            //@ts-ignore
-            zoom *= e.scale;
-            if (zoom < 100)
-                zoom = 100;
-            this.setState('zoom', zoom);
-            e.stopPropagation();
-        }
-    }
-    ondoubletap() {
-        this._controls.reset();
-    }
-    handleMouseWheel(event) {
-        var delta = 0;
-        var zoom = this.getState('zoom');
-        delta = -event.deltaY;
-        zoom += delta * 0.1;
-        if (zoom < 100)
-            zoom = 100;
-        this.setState('zoom', zoom);
-    }
-    onredraw() {
-        this.threed_animate();
-    }
-};
-ThreeContainer = __decorate([
-    sceneComponent('3d-container')
-], ThreeContainer);
-export { ThreeContainer };
-//# sourceMappingURL=three-container.js.map