@operato/scene-visualizer 1.2.31 → 1.2.37

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.37](https://github.com/things-scene/operato-scene/compare/v1.2.36...v1.2.37) (2023-05-21)
+
+
+### :bug: Bug Fix
+
+* add div element into form templates ([2f2ecdc](https://github.com/things-scene/operato-scene/commit/2f2ecdc0461265b5e5c666af9b3ded3242ae5689))
+
+
+
+## [1.2.36](https://github.com/things-scene/operato-scene/compare/v1.2.35...v1.2.36) (2023-05-13)
+
+
+### :bug: Bug Fix
+
+* license ([d37d485](https://github.com/things-scene/operato-scene/commit/d37d48597407dea1ad022e674f2899720e56d695))
+
+
+
 ## [1.2.31](https://github.com/things-scene/operato-scene/compare/v1.2.30...v1.2.31) (2023-05-07)
 
 

package/dist/three-modeller.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=three-modeller.js.map

package/dist/three-modeller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"three-modeller.js","sourceRoot":"","sources":["../src/three-modeller.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/three-space.d.ts

@@ -0,0 +1,86 @@
+/// <reference path="../src/component.d.ts" />
+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';
+import { RealObject } from './threed/real-object';
+import { ThreeDimensionalContainer } from './threed/three-dimensional-container';
+import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+export declare class ThreeSpace 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.Event>>[] | 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-space.js

@@ -0,0 +1,566 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Container, error, FPS, Layout } 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';
+import './three-layout';
+import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { createFloor } from './threed/floor/floor';
+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: 'controller',
+            name: 'controller',
+            property: 'controller'
+        }
+    ],
+    help: 'scene/component/three-space'
+};
+const WEBGL_NO_SUPPORT_TEXT = 'WebGL no support';
+export class ThreeSpace 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);
+        var _directionalLight = new THREE.DirectionalLight(0xd6e1ff, 0.01);
+        var _pointLight1 = new THREE.PointLight(0xd6e1ff, 1, undefined, 2);
+        _pointLight1.power = cameraZPos * 50;
+        _pointLight1.castShadow = true;
+        _pointLight1.position.set(0, cameraZPos, 0);
+        _pointLight1.shadow.camera.near = 0.1;
+        _pointLight1.shadow.camera.far = cameraZPos * 2;
+        // const helper = new THREE.CameraHelper(_pointLight1.shadow.camera)
+        // this._scene3d?.add(helper)
+        this.scene3d.add(_hemiLight);
+        this.scene3d.add(_pointLight1);
+        this._camera.add(_directionalLight);
+        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 (this._floor) {
+        //   this.object3d.remove(this._floor)
+        //   this._floor.clear()
+        //   delete this._floor
+        // }
+        if (floor) {
+            // this._floor = floor
+            this._scene3d.add(floor);
+        }
+        // this.invalidate()
+        // 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';
+        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.get('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();
+    }
+}
+Component.register('3d-space', ThreeSpace);
+//# sourceMappingURL=three-space.js.map