@operato/scene-urdf 1.2.2

package/dist/urdf-controller.js

@@ -0,0 +1,65 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'id-input',
+            label: 'urdf-reference',
+            name: 'reference',
+            property: {
+                component: 'urdf-viewer'
+            }
+        }
+    ]
+};
+import { Component, HTMLOverlayContainer } from '@hatiolab/things-scene';
+import './elements/urdf-controller-element';
+export default class UrdfController extends HTMLOverlayContainer {
+    static get nature() {
+        return NATURE;
+    }
+    oncreate_element(controller) { }
+    dispose() {
+        super.dispose();
+    }
+    /*
+     * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,
+     * 그에 따른 html element의 반영이 필요한 부분을 구현한다.
+     *
+     * ThingsComponent state => HTML element properties
+     */
+    setElementProperties(controller) {
+        var reference = this.reference;
+        controller.viewer = reference ? reference.element : undefined;
+    }
+    /*
+     * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.
+     * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.
+     */
+    reposition() {
+        super.reposition();
+    }
+    get tagName() {
+        return 'urdf-controller';
+    }
+    get reference() {
+        var { reference } = this.state;
+        if (!reference) {
+            return;
+        }
+        if (!this._reference) {
+            this._reference = this.root.findById(reference);
+        }
+        return this._reference;
+    }
+    set reference(reference) {
+        delete this._reference;
+        this.state.reference = reference;
+    }
+}
+Component.register('urdf-controller', UrdfController);
+//# sourceMappingURL=urdf-controller.js.map

package/dist/urdf-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"urdf-controller.js","sourceRoot":"","sources":["../src/urdf-controller.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE;gBACR,SAAS,EAAE,aAAa;aACzB;SACF;KACF;CACF,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,oCAAoC,CAAA;AAK3C,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB;IAG9D,MAAM,KAAK,MAAM;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,gBAAgB,CAAC,UAAiC,IAAG,CAAC;IAEtD,OAAO;QACL,KAAK,CAAC,OAAO,EAAE,CAAA;IACjB,CAAC;IAED;;;;;OAKG;IACH,oBAAoB,CAAC,UAAiC;QACpD,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QAC9B,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAE,SAAS,CAAC,OAAkC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC3F,CAAC;IAED;;;OAGG;IACH,UAAU;QACR,KAAK,CAAC,UAAU,EAAE,CAAA;IACpB,CAAC;IAED,IAAI,OAAO;QACT,OAAO,iBAAiB,CAAA;IAC1B,CAAC;IAED,IAAI,SAAS;QACX,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,IAAI,CAAC,SAAS,EAAE;YACd,OAAM;SACP;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAe,CAAA;SAC9D;QAED,OAAO,IAAI,CAAC,UAAU,CAAA;IACxB,CAAC;IAED,IAAI,SAAS,CAAC,SAAS;QACrB,OAAO,IAAI,CAAC,UAAU,CAAA;QACtB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAA;IAClC,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'id-input',\n      label: 'urdf-reference',\n      name: 'reference',\n      property: {\n        component: 'urdf-viewer'\n      }\n    }\n  ]\n}\n\nimport { Component, HTMLOverlayContainer } from '@hatiolab/things-scene'\nimport './elements/urdf-controller-element'\nimport URDFControllerElement from './elements/urdf-controller-element'\nimport URDFManipulatorElement from './elements/urdf-manipulator-element'\nimport UrdfViewer from './urdf-viewer'\n\nexport default class UrdfController extends HTMLOverlayContainer {\n  _reference?: UrdfViewer\n\n  static get nature() {\n    return NATURE\n  }\n\n  oncreate_element(controller: URDFControllerElement) {}\n\n  dispose() {\n    super.dispose()\n  }\n\n  /*\n   * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,\n   * 그에 따른 html element의 반영이 필요한 부분을 구현한다.\n   *\n   * ThingsComponent state => HTML element properties\n   */\n  setElementProperties(controller: URDFControllerElement) {\n    var reference = this.reference\n    controller.viewer = reference ? (reference.element as URDFManipulatorElement) : undefined\n  }\n\n  /*\n   * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.\n   * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.\n   */\n  reposition() {\n    super.reposition()\n  }\n\n  get tagName() {\n    return 'urdf-controller'\n  }\n\n  get reference() {\n    var { reference } = this.state\n    if (!reference) {\n      return\n    }\n\n    if (!this._reference) {\n      this._reference = this.root.findById(reference) as UrdfViewer\n    }\n\n    return this._reference\n  }\n\n  set reference(reference) {\n    delete this._reference\n    this.state.reference = reference\n  }\n}\n\nComponent.register('urdf-controller', UrdfController)\n"]}

package/dist/urdf-viewer.d.ts

@@ -0,0 +1,50 @@
+import { HTMLOverlayElement, Properties } from '@hatiolab/things-scene';
+import './elements/urdf-manipulator-element';
+import URDFManipulatorElement from './elements/urdf-manipulator-element';
+export default class UrdfViewer extends HTMLOverlayElement {
+    static get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+            placeholder?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                options: string[];
+                step?: undefined;
+                max?: undefined;
+                min?: undefined;
+            };
+            placeholder?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            placeholder: number;
+            property: {
+                step: number;
+                max: number;
+                min: number;
+                options?: undefined;
+            };
+        })[];
+        'value-property': string;
+    };
+    oncreate_element(element: URDFManipulatorElement): void;
+    dispose(): void;
+    setElementProperties(element: URDFManipulatorElement): void;
+    reposition(): void;
+    get tagName(): string;
+    get angles(): any;
+    set angles(angles: any);
+    get highlightColor(): string;
+    set highlightColor(highlightColor: string);
+    onchange(after: Properties, before: Properties): void;
+}

package/dist/urdf-viewer.js

@@ -0,0 +1,198 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, HTMLOverlayElement } 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';
+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'
+};
+export default 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);
+    }
+}
+Component.register('urdf-viewer', UrdfViewer);
+//# sourceMappingURL=urdf-viewer.js.map

package/dist/urdf-viewer.js.map

@@ -0,0 +1 @@
+{"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 { Component, HTMLOverlayElement, error, Properties } 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'\nimport URDFManipulatorElement from './elements/urdf-manipulator-element'\n\nconst NATURE = {\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\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\nComponent.register('urdf-viewer', UrdfViewer)\n"]}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@operato/scene-urdf",
+  "description": "Scene module for manipulating robot simulation through URDF format",
+  "author": "heartyoh",
+  "version": "1.2.2",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@oprato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/urdf"
+  },
+  "scripts": {
+    "serve": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"things-factory-dev\"",
+    "serve:dev": "npm run serve",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^3.2.0",
+    "@operato/styles": "^1.0.0",
+    "lit": "^2.5.0",
+    "three": "^0.122.0",
+    "urdf-loader": "^0.10.4",
+    "xacro-parser": "^0.3.9"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@things-factory/builder": "^6.0.0",
+    "@things-factory/operato-board": "^6.0.0",
+    "@types/tinycolor2": "^1.4.3",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.9.4"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "9fa14a34d4629bf22be3184e5826480f52bf2604"
+}

package/src/elements/drag-n-drop.ts

@@ -0,0 +1,142 @@
+// Converts a datatransfer structer into an object with all paths and files
+
+import URDFViewerElement from './urdf-viewer-element'
+
+// listed out. Returns a promise that resolves with the file structure.
+function dataTransferToFiles(dataTransfer: DataTransfer) {
+  if (!(dataTransfer instanceof DataTransfer)) {
+    throw new Error('Data must be of type "DataTransfer"')
+  }
+
+  const files = {} as any
+
+  // recurse down the webkit file structure resolving
+  // the paths to files names to store in the `files`
+  // object
+  function recurseDirectory(item: any): Promise<void> {
+    if (item.isFile) {
+      return new Promise(resolve => {
+        item.file((file: any) => {
+          files[item.fullPath] = file
+          resolve()
+        })
+      })
+    } else {
+      const reader = item.createReader()
+
+      return new Promise(resolve => {
+        const promises = [] as any
+
+        // exhaustively read all the directory entries
+        function readNextEntries() {
+          reader.readEntries((et: any) => {
+            if (et.length === 0) {
+              Promise.all(promises).then(() => resolve())
+            } else {
+              et.forEach((e: any) => {
+                promises.push(recurseDirectory(e))
+              })
+              readNextEntries()
+            }
+          })
+        }
+
+        readNextEntries()
+      })
+    }
+  }
+
+  return new Promise(resolve => {
+    // Traverse down the tree and add the files into the zip
+    // const dtitems = dataTransfer.items && [...dataTransfer.items]
+    // const dtfiles = [...dataTransfer.files]
+    var dtitems = [] as DataTransferItem[]
+    if (dataTransfer.items) {
+      for (let i = 0; i < dataTransfer.items.length; i++) {
+        dtitems.push(dataTransfer.items[i])
+      }
+    }
+
+    var dtfiles = [] as File[]
+    if (dataTransfer.files) {
+      for (let i = 0; i < dataTransfer.files.length; i++) {
+        dtfiles.push(dataTransfer.files[i])
+      }
+    }
+
+    if (dtitems.length && (dtitems[0].webkitGetAsEntry as any)) {
+      const promises = []
+      for (let i = 0; i < dtitems.length; i++) {
+        const item = dtitems[i]
+        const entry = item.webkitGetAsEntry()
+
+        promises.push(recurseDirectory(entry))
+      }
+      Promise.all(promises).then(() => resolve(files))
+    } else {
+      // add a '/' prefix to math the file directory entry
+      // on webkit browsers
+      dtfiles.filter(f => f.size !== 0).forEach(f => (files['/' + f.name] = f))
+
+      resolve(files)
+    }
+  })
+}
+
+export function registerDragEvents(viewer: URDFViewerElement, callback: () => void) {
+  document.addEventListener('dragover', e => e.preventDefault())
+  document.addEventListener('dragenter', e => e.preventDefault())
+  document.addEventListener('drop', e => {
+    e.preventDefault()
+
+    // convert the files
+    dataTransferToFiles(e.dataTransfer!).then((files: any) => {
+      // removes '..' and '.' tokens and normalizes slashes
+      const cleanFilePath = (path: string) => {
+        return path
+          .replace(/\\/g, '/')
+          .split(/\//g)
+          .reduce((acc, el) => {
+            if (el === '..') acc.pop()
+            else if (el !== '.') acc.push(el)
+            return acc
+          }, [] as string[])
+          .join('/')
+      }
+
+      // set the loader url modifier to check the list
+      // of files
+      const fileNames = Object.keys(files).map(n => cleanFilePath(n))
+      viewer.urlModifierFunc = (url: string) => {
+        // find the matching file given the requested url
+        const cleaned = cleanFilePath(url.replace(viewer.package, ''))
+        const fileName = fileNames
+          .filter(name => {
+            // check if the end of file and url are the same
+            const len = Math.min(name.length, cleaned.length)
+            return cleaned.substr(cleaned.length - len) === name.substr(name.length - len)
+          })
+          .pop()
+
+        if (fileName !== undefined) {
+          // revoke the url after it's been used
+          const bloburl = URL.createObjectURL(files[fileName])
+          requestAnimationFrame(() => URL.revokeObjectURL(bloburl))
+
+          return bloburl
+        }
+
+        return url
+      }
+
+      // set the source of the element to the most likely intended display model
+      const filesNames = Object.keys(files)
+      viewer.up = '+Z'
+      ;(document.getElementById('up-select') as any)!.value = viewer.up
+
+      viewer.urdf = filesNames.filter(n => /urdf$/i.test(n)).shift()!
+    })
+
+    callback()
+  })
+}