@operato/scene-urdf 10.0.0-beta.1 → 10.0.0-beta.18

package/dist/urdf-viewer.js

@@ -1,202 +0,0 @@
-import { __decorate } from "tslib";
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { HTMLOverlayElement, sceneComponent } from '@hatiolab/things-scene';
-import * as THREE from 'three';
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
-import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js';
-import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import './elements/urdf-manipulator-element.js';
-const NATURE = {
-    mutable: false,
-    resizable: true,
-    rotatable: true,
-    properties: [
-        {
-            type: 'string',
-            label: 'package',
-            name: 'package'
-        },
-        {
-            type: 'string',
-            label: 'urdf',
-            name: 'urdf'
-        },
-        {
-            type: 'select',
-            label: 'up',
-            name: 'up',
-            property: {
-                options: ['', '+X', '-X', '+Y', '-Y', '+Z', '-Z']
-            }
-        },
-        {
-            type: 'checkbox',
-            label: 'display-shadow',
-            name: 'displayShadow'
-        },
-        {
-            type: 'color',
-            label: 'ambient-color',
-            name: 'ambientColor'
-        },
-        {
-            type: 'color',
-            label: 'highlight-color',
-            name: 'highlightColor'
-        },
-        {
-            type: 'checkbox',
-            label: 'ignore-limits',
-            name: 'ignoreLimits'
-        },
-        {
-            type: 'checkbox',
-            label: 'no-auto-recenter',
-            name: 'noAutoRecenter'
-        },
-        {
-            type: 'checkbox',
-            label: 'disable-dragging',
-            name: 'disableDragging'
-        },
-        {
-            type: 'checkbox',
-            label: 'no-camera-control',
-            name: 'noCameraControl'
-        },
-        {
-            type: 'range-input',
-            label: 'init-camera-pos-x',
-            name: 'initCameraPosX',
-            placeholder: '1',
-            property: {
-                step: 0.1,
-                max: 180,
-                min: -180
-            }
-        },
-        {
-            type: 'range-input',
-            label: 'init-camera-pos-y',
-            name: 'initCameraPosY',
-            placeholder: '1',
-            property: {
-                step: 0.1,
-                max: 180,
-                min: -180
-            }
-        },
-        {
-            type: 'range-input',
-            label: 'init-camera-pos-z',
-            name: 'initCameraPosZ',
-            placeholder: '1',
-            property: {
-                step: 0.1,
-                max: 180,
-                min: -180
-            }
-        }
-    ],
-    'value-property': 'angles'
-};
-let UrdfViewer = class UrdfViewer extends HTMLOverlayElement {
-    static get nature() {
-        return NATURE;
-    }
-    oncreate_element(element) {
-        element.addEventListener('angle-change', (e) => {
-            this.data = element.angles;
-        });
-        element.loadMeshFunc = (path, manager, done) => {
-            const ext = path.split(/\./g).pop().toLowerCase();
-            switch (ext) {
-                case 'gltf':
-                case 'glb':
-                    new GLTFLoader(manager).load(path, result => done(result.scene), undefined, err => done(null, err));
-                    break;
-                case 'obj':
-                    new OBJLoader(manager).load(path, result => done(result), undefined, err => done(null, err));
-                    break;
-                case 'dae':
-                    new ColladaLoader(manager).load(path, result => done(result.scene), undefined, err => done(null, err));
-                    break;
-                case 'stl':
-                    new STLLoader(manager).load(path, result => {
-                        const material = new THREE.MeshPhongMaterial();
-                        const mesh = new THREE.Mesh(result, material);
-                        done(mesh);
-                    }, undefined, err => done(null, err));
-                    break;
-            }
-        };
-        // initialize first camera position
-        var { initCameraPosX = 1, initCameraPosY = 1, initCameraPosZ = 1 } = this.state;
-        element.camera.position.set(initCameraPosX, initCameraPosY, initCameraPosZ);
-    }
-    dispose() {
-        super.dispose();
-    }
-    /*
-     * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,
-     * 그에 따른 html element의 반영이 필요한 부분을 구현한다.
-     *
-     * ThingsComponent state => HTML element properties
-     */
-    setElementProperties(element) {
-        var { package: _package, urdf, displayShadow, ignoreLimits, up, ambientColor, highlightColor, noAutoRecenter, disableDragging, noCameraControl, angles } = this.state;
-        element.style.pointerEvents = 'auto'; //'inherit'
-        element.package = _package;
-        element.urdf = urdf;
-        element.displayShadow = displayShadow;
-        element.ignoreLimits = ignoreLimits;
-        element.up = up;
-        element.ambientColor = ambientColor;
-        element.highlightColor = highlightColor;
-        element.noAutoRecenter = noAutoRecenter;
-        element.disableDragging = disableDragging;
-        element.controls.enabled = !noCameraControl;
-        element.angles = angles;
-        requestAnimationFrame(() => element.redraw());
-    }
-    /*
-     * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.
-     * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.
-     */
-    reposition() {
-        super.reposition();
-    }
-    get tagName() {
-        return 'urdf-viewer';
-    }
-    get angles() {
-        // return this.element.angles
-        return this.state.angles;
-    }
-    set angles(angles) {
-        // this.element.angles = angles
-        this.setState({ angles });
-    }
-    get highlightColor() {
-        return this.state.highlightColor;
-    }
-    set highlightColor(highlightColor) {
-        this.setState({ highlightColor });
-    }
-    onchange(after, before) {
-        if ('initCameraPosX' in after || 'initCameraPosY' in after || 'initCameraPosZ' in after) {
-            const { initCameraPosX = 1, initCameraPosY = 1, initCameraPosZ = 1 } = this.state;
-            this.element &&
-                this.element.camera.position.set(initCameraPosX, initCameraPosY, initCameraPosZ);
-        }
-        super.onchange && super.onchange(after, before);
-    }
-};
-UrdfViewer = __decorate([
-    sceneComponent('urdf-viewer')
-], UrdfViewer);
-export default UrdfViewer;
-//# sourceMappingURL=urdf-viewer.js.map

package/dist/urdf-viewer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"urdf-viewer.js","sourceRoot":"","sources":["../src/urdf-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport {\n  Component,\n  HTMLOverlayElement,\n  error,\n  Properties,\n  ComponentNature,\n  sceneComponent\n} from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'\nimport { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js'\nimport { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\nimport './elements/urdf-manipulator-element.js'\nimport URDFManipulatorElement from './elements/urdf-manipulator-element.js'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'package',\n      name: 'package'\n    },\n    {\n      type: 'string',\n      label: 'urdf',\n      name: 'urdf'\n    },\n    {\n      type: 'select',\n      label: 'up',\n      name: 'up',\n      property: {\n        options: ['', '+X', '-X', '+Y', '-Y', '+Z', '-Z']\n      }\n    },\n    {\n      type: 'checkbox',\n      label: 'display-shadow',\n      name: 'displayShadow'\n    },\n    {\n      type: 'color',\n      label: 'ambient-color',\n      name: 'ambientColor'\n    },\n    {\n      type: 'color',\n      label: 'highlight-color',\n      name: 'highlightColor'\n    },\n    {\n      type: 'checkbox',\n      label: 'ignore-limits',\n      name: 'ignoreLimits'\n    },\n    {\n      type: 'checkbox',\n      label: 'no-auto-recenter',\n      name: 'noAutoRecenter'\n    },\n    {\n      type: 'checkbox',\n      label: 'disable-dragging',\n      name: 'disableDragging'\n    },\n    {\n      type: 'checkbox',\n      label: 'no-camera-control',\n      name: 'noCameraControl'\n    },\n    {\n      type: 'range-input',\n      label: 'init-camera-pos-x',\n      name: 'initCameraPosX',\n      placeholder: '1',\n      property: {\n        step: 0.1,\n        max: 180,\n        min: -180\n      }\n    },\n    {\n      type: 'range-input',\n      label: 'init-camera-pos-y',\n      name: 'initCameraPosY',\n      placeholder: '1',\n      property: {\n        step: 0.1,\n        max: 180,\n        min: -180\n      }\n    },\n    {\n      type: 'range-input',\n      label: 'init-camera-pos-z',\n      name: 'initCameraPosZ',\n      placeholder: '1',\n      property: {\n        step: 0.1,\n        max: 180,\n        min: -180\n      }\n    }\n  ],\n  'value-property': 'angles'\n}\n\n@sceneComponent('urdf-viewer')\nexport default class UrdfViewer extends HTMLOverlayElement {\n  static get nature() {\n    return NATURE\n  }\n\n  oncreate_element(element: URDFManipulatorElement) {\n    element.addEventListener('angle-change', (e: Event) => {\n      this.data = element.angles\n    })\n\n    element.loadMeshFunc = (path: string, manager: THREE.LoadingManager, done: (result: any, err?: any) => void) => {\n      const ext = path.split(/\\./g).pop()!.toLowerCase()\n      switch (ext) {\n        case 'gltf':\n        case 'glb':\n          new GLTFLoader(manager).load(\n            path,\n            result => done(result.scene),\n            undefined,\n            err => done(null, err)\n          )\n          break\n        case 'obj':\n          new OBJLoader(manager).load(\n            path,\n            result => done(result),\n            undefined,\n            err => done(null, err)\n          )\n          break\n        case 'dae':\n          new ColladaLoader(manager).load(\n            path,\n            result => done(result!.scene),\n            undefined,\n            err => done(null, err)\n          )\n          break\n        case 'stl':\n          new STLLoader(manager).load(\n            path,\n            result => {\n              const material = new THREE.MeshPhongMaterial()\n              const mesh = new THREE.Mesh(result, material)\n              done(mesh)\n            },\n            undefined,\n            err => done(null, err)\n          )\n          break\n      }\n    }\n\n    // initialize first camera position\n    var { initCameraPosX = 1, initCameraPosY = 1, initCameraPosZ = 1 } = this.state\n    element.camera.position.set(initCameraPosX, initCameraPosY, initCameraPosZ)\n  }\n\n  dispose() {\n    super.dispose()\n  }\n\n  /*\n   * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,\n   * 그에 따른 html element의 반영이 필요한 부분을 구현한다.\n   *\n   * ThingsComponent state => HTML element properties\n   */\n  setElementProperties(element: URDFManipulatorElement) {\n    var {\n      package: _package,\n      urdf,\n      displayShadow,\n      ignoreLimits,\n      up,\n      ambientColor,\n      highlightColor,\n      noAutoRecenter,\n      disableDragging,\n      noCameraControl,\n      angles\n    } = this.state\n\n    element.style.pointerEvents = 'auto' //'inherit'\n\n    element.package = _package\n    element.urdf = urdf\n    element.displayShadow = displayShadow\n    element.ignoreLimits = ignoreLimits\n    element.up = up\n    element.ambientColor = ambientColor\n    element.highlightColor = highlightColor\n    element.noAutoRecenter = noAutoRecenter\n    element.disableDragging = disableDragging\n    element.controls.enabled = !noCameraControl\n    element.angles = angles\n\n    requestAnimationFrame(() => element.redraw())\n  }\n\n  /*\n   * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.\n   * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.\n   */\n  reposition() {\n    super.reposition()\n  }\n\n  get tagName() {\n    return 'urdf-viewer'\n  }\n\n  get angles() {\n    // return this.element.angles\n    return this.state.angles\n  }\n\n  set angles(angles) {\n    // this.element.angles = angles\n    this.setState({ angles })\n  }\n\n  get highlightColor() {\n    return this.state.highlightColor\n  }\n\n  set highlightColor(highlightColor: string) {\n    this.setState({ highlightColor })\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if ('initCameraPosX' in after || 'initCameraPosY' in after || 'initCameraPosZ' in after) {\n      const { initCameraPosX = 1, initCameraPosY = 1, initCameraPosZ = 1 } = this.state\n      this.element &&\n        (this.element as URDFManipulatorElement).camera.position.set(initCameraPosX, initCameraPosY, initCameraPosZ)\n    }\n\n    super.onchange && super.onchange(after, before)\n  }\n}\n"]}