@operato/scene-urdf 10.0.0-beta.2 → 10.0.0-beta.24

package/dist/elements/drag-n-drop.js

@@ -1,126 +0,0 @@
-// Converts a datatransfer structer into an object with all paths and files
-// listed out. Returns a promise that resolves with the file structure.
-function dataTransferToFiles(dataTransfer) {
-    if (!(dataTransfer instanceof DataTransfer)) {
-        throw new Error('Data must be of type "DataTransfer"');
-    }
-    const files = {};
-    // recurse down the webkit file structure resolving
-    // the paths to files names to store in the `files`
-    // object
-    function recurseDirectory(item) {
-        if (item.isFile) {
-            return new Promise(resolve => {
-                item.file((file) => {
-                    files[item.fullPath] = file;
-                    resolve();
-                });
-            });
-        }
-        else {
-            const reader = item.createReader();
-            return new Promise(resolve => {
-                const promises = [];
-                // exhaustively read all the directory entries
-                function readNextEntries() {
-                    reader.readEntries((et) => {
-                        if (et.length === 0) {
-                            Promise.all(promises).then(() => resolve());
-                        }
-                        else {
-                            et.forEach((e) => {
-                                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 = [];
-        if (dataTransfer.items) {
-            for (let i = 0; i < dataTransfer.items.length; i++) {
-                dtitems.push(dataTransfer.items[i]);
-            }
-        }
-        var dtfiles = [];
-        if (dataTransfer.files) {
-            for (let i = 0; i < dataTransfer.files.length; i++) {
-                dtfiles.push(dataTransfer.files[i]);
-            }
-        }
-        if (dtitems.length && dtitems[0].webkitGetAsEntry) {
-            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, callback) {
-    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) => {
-            // removes '..' and '.' tokens and normalizes slashes
-            const cleanFilePath = (path) => {
-                return path
-                    .replace(/\\/g, '/')
-                    .split(/\//g)
-                    .reduce((acc, el) => {
-                    if (el === '..')
-                        acc.pop();
-                    else if (el !== '.')
-                        acc.push(el);
-                    return acc;
-                }, [])
-                    .join('/');
-            };
-            // set the loader url modifier to check the list
-            // of files
-            const fileNames = Object.keys(files).map(n => cleanFilePath(n));
-            viewer.urlModifierFunc = (url) => {
-                // 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').value = viewer.up;
-            viewer.urdf = filesNames.filter(n => /urdf$/i.test(n)).shift();
-        });
-        callback();
-    });
-}
-//# sourceMappingURL=drag-n-drop.js.map

package/dist/elements/drag-n-drop.js.map

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

package/dist/elements/urdf-controller-element.d.ts

@@ -1,12 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-import { URDFRobot } from 'urdf-loader';
-import URDFManipulatorElement from './urdf-manipulator-element.js';
-export default class URDFControllerElement extends LitElement {
-    static styles: import("lit").CSSResult[];
-    viewer?: URDFManipulatorElement;
-    robot?: URDFRobot;
-    render(): import("lit-html").TemplateResult<1>;
-    updated(changes: PropertyValues<this>): void;
-    _setupViewer(viewer?: URDFManipulatorElement): void;
-    setColor(color: string): void;
-}

package/dist/elements/urdf-controller-element.js

@@ -1,283 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import * as THREE from 'three';
-import { registerDragEvents } from './drag-n-drop.js';
-import { ScrollbarStyles } from '@operato/styles';
-const DEG2RAD = Math.PI / 180;
-const RAD2DEG = 1 / DEG2RAD;
-let URDFControllerElement = class URDFControllerElement extends LitElement {
-    static styles = [
-        ScrollbarStyles,
-        css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        margin: 15px 0;
-        overflow: hidden;
-        user-select: none;
-      }
-
-      :host > * {
-        margin: 5px 0;
-      }
-
-      input[type='number'] {
-        color: white;
-        border: none;
-        font-weight: 300;
-        background: rgba(255, 255, 255, 0.25);
-        padding: 1px 2px;
-      }
-
-      ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-      }
-
-      input[type='range'] {
-        -webkit-appearance: none;
-        border: none;
-        outline: none;
-        width: 100%;
-        flex: 1;
-        height: 16px;
-        background-color: transparent;
-      }
-      input[type='range']::-webkit-slider-runnable-track {
-        width: 100%;
-        height: 1px;
-        background: white;
-        border: none;
-        border-radius: 5px;
-      }
-      input[type='range']::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        border: none;
-        height: 10px;
-        width: 10px;
-        border-radius: 50%;
-        background: white;
-        margin-top: -5px;
-      }
-      input[type='range']:focus {
-        outline: none;
-      }
-      input[type='range']:focus::-webkit-slider-runnable-track {
-        background: white;
-      }
-
-      input[type='range']::-moz-range-track {
-        width: 100%;
-        height: 1px;
-        background: white;
-        border: none;
-        border-radius: 5px;
-      }
-      input[type='range']::-moz-range-thumb {
-        border: none;
-        height: 10px;
-        width: 10px;
-        border-radius: 50%;
-        background: white;
-      }
-
-      input[type='range']:-moz-focusring {
-        outline: 1px solid white;
-        outline-offset: -1px;
-      }
-
-      input[type='range']::-ms-track {
-        width: 100%;
-        height: 1px;
-        background: white;
-        border-radius: 10px;
-        color: transparent;
-        border: none;
-        outline: none;
-      }
-      input[type='range']::-ms-thumb {
-        height: 10px;
-        width: 10px;
-        border-radius: 50%;
-        background: white;
-        border: none;
-        outline: none;
-        margin-top: 2px;
-      }
-
-      input:focus {
-        outline: none;
-        opacity: 1;
-      }
-
-      /* list of joint sliders */
-      ul {
-        flex: 1;
-        overflow-y: auto;
-      }
-
-      li {
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-        padding: 1px 0;
-
-        width: 100%;
-        user-select: text;
-
-        transition: background 0.25s ease;
-      }
-
-      li[robot-hovered] {
-        background: rgba(255, 255, 255, 0.35);
-      }
-
-      li:hover {
-        background: rgba(255, 255, 255, 0.35);
-      }
-
-      li span {
-        padding: 0 5px;
-        max-width: 125px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      li input[type='number'] {
-        width: 50px;
-        overflow: hidden;
-      }
-    `
-    ];
-    viewer;
-    robot;
-    render() {
-        const { joints = {} } = this.robot || {};
-        const { ignoreLimits = false } = this.viewer || {};
-        const jointsArray = Object.values(joints);
-        return html `
-      <ul>
-        ${jointsArray.map(joint => {
-            var { jointType, name, angle, limit } = joint;
-            var degVal = Number(angle || 0);
-            if (jointType === 'revolute' || jointType === 'continuous') {
-                degVal *= RAD2DEG;
-            }
-            if (Math.abs(degVal) > 1) {
-                degVal = degVal.toFixed(1);
-            }
-            else {
-                degVal = degVal.toPrecision(2);
-            }
-            var sliderMin;
-            var sliderMax;
-            var inputMin;
-            var inputMax;
-            if (ignoreLimits || jointType === 'continuous') {
-                sliderMin = -6.28;
-                sliderMax = 6.28;
-                inputMin = -6.28 * RAD2DEG;
-                inputMax = 6.28 * RAD2DEG;
-            }
-            else {
-                sliderMin = limit.lower;
-                sliderMax = limit.upper;
-                inputMin = Number(limit.lower) * RAD2DEG;
-                inputMax = Number(limit.upper) * RAD2DEG;
-            }
-            return html `
-            <li joint-type=${jointType} joint-name=${name}>
-              <span title=${name}>${name}</span>
-              <input
-                type="range"
-                .value=${String(angle)}
-                step="0.0001"
-                min=${sliderMin}
-                max=${sliderMax}
-                @input=${(e) => {
-                this.viewer?.setJointValue(name, e.target.value);
-            }}
-              />
-              <input
-                type="number"
-                .value=${degVal}
-                step="0.0001"
-                min=${inputMin}
-                max=${inputMax}
-                @change=${(e) => {
-                this.viewer?.setJointValue(name, Number(e.target.value) * DEG2RAD);
-            }}
-              />
-            </li>
-          `;
-        })}
-      </ul>
-    `;
-    }
-    updated(changes) {
-        if (changes.has('viewer')) {
-            this._setupViewer(this.viewer);
-        }
-    }
-    _setupViewer(viewer) {
-        if (!viewer) {
-            return;
-        }
-        this.robot = viewer.robot;
-        viewer.addEventListener('urdf-processed', () => {
-            this.robot = viewer.robot;
-        });
-        viewer.addEventListener('ignore-limits-change', () => {
-            this.requestUpdate();
-        });
-        viewer.addEventListener('angle-change', (e) => {
-            this.requestUpdate();
-        });
-        viewer.addEventListener('joint-mouseover', (e) => {
-            const j = this.renderRoot.querySelector(`li[joint-name="${e.detail}"]`);
-            if (j) {
-                j.setAttribute('robot-hovered', 'true');
-            }
-        });
-        viewer.addEventListener('joint-mouseout', (e) => {
-            const j = this.renderRoot.querySelector(`li[joint-name="${e.detail}"]`);
-            if (j) {
-                j.removeAttribute('robot-hovered');
-            }
-        });
-        let originalNoAutoRecenter;
-        viewer.addEventListener('manipulate-start', (e) => {
-            const j = this.renderRoot.querySelector(`li[joint-name="${e.detail}"]`);
-            if (j) {
-                // ??
-                j.scrollIntoView({ block: 'nearest' });
-                window.scrollTo(0, 0);
-            }
-            originalNoAutoRecenter = viewer.noAutoRecenter;
-            viewer.noAutoRecenter = true;
-        });
-        viewer.addEventListener('manipulate-end', (e) => {
-            viewer.noAutoRecenter = originalNoAutoRecenter;
-        });
-        registerDragEvents(viewer, () => {
-            this.setColor('#263238');
-        });
-    }
-    setColor(color) {
-        this.viewer.highlightColor = '#' + new THREE.Color(0xffffff).lerp(new THREE.Color(color), 0.35).getHexString();
-    }
-};
-__decorate([
-    property({ type: Object })
-], URDFControllerElement.prototype, "viewer", void 0);
-__decorate([
-    property({ type: Object })
-], URDFControllerElement.prototype, "robot", void 0);
-URDFControllerElement = __decorate([
-    customElement('urdf-controller')
-], URDFControllerElement);
-export default URDFControllerElement;
-//# sourceMappingURL=urdf-controller-element.js.map

package/dist/elements/urdf-controller-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"urdf-controller-element.js","sourceRoot":"","sources":["../../src/elements/urdf-controller-element.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as THREE from 'three'\nimport { registerDragEvents } from './drag-n-drop.js'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { URDFRobot } from 'urdf-loader'\nimport URDFManipulatorElement from './urdf-manipulator-element.js'\n\nconst DEG2RAD = Math.PI / 180\nconst RAD2DEG = 1 / DEG2RAD\n\n@customElement('urdf-controller')\nexport default class URDFControllerElement extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        margin: 15px 0;\n        overflow: hidden;\n        user-select: none;\n      }\n\n      :host > * {\n        margin: 5px 0;\n      }\n\n      input[type='number'] {\n        color: white;\n        border: none;\n        font-weight: 300;\n        background: rgba(255, 255, 255, 0.25);\n        padding: 1px 2px;\n      }\n\n      ul {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n      }\n\n      input[type='range'] {\n        -webkit-appearance: none;\n        border: none;\n        outline: none;\n        width: 100%;\n        flex: 1;\n        height: 16px;\n        background-color: transparent;\n      }\n      input[type='range']::-webkit-slider-runnable-track {\n        width: 100%;\n        height: 1px;\n        background: white;\n        border: none;\n        border-radius: 5px;\n      }\n      input[type='range']::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        border: none;\n        height: 10px;\n        width: 10px;\n        border-radius: 50%;\n        background: white;\n        margin-top: -5px;\n      }\n      input[type='range']:focus {\n        outline: none;\n      }\n      input[type='range']:focus::-webkit-slider-runnable-track {\n        background: white;\n      }\n\n      input[type='range']::-moz-range-track {\n        width: 100%;\n        height: 1px;\n        background: white;\n        border: none;\n        border-radius: 5px;\n      }\n      input[type='range']::-moz-range-thumb {\n        border: none;\n        height: 10px;\n        width: 10px;\n        border-radius: 50%;\n        background: white;\n      }\n\n      input[type='range']:-moz-focusring {\n        outline: 1px solid white;\n        outline-offset: -1px;\n      }\n\n      input[type='range']::-ms-track {\n        width: 100%;\n        height: 1px;\n        background: white;\n        border-radius: 10px;\n        color: transparent;\n        border: none;\n        outline: none;\n      }\n      input[type='range']::-ms-thumb {\n        height: 10px;\n        width: 10px;\n        border-radius: 50%;\n        background: white;\n        border: none;\n        outline: none;\n        margin-top: 2px;\n      }\n\n      input:focus {\n        outline: none;\n        opacity: 1;\n      }\n\n      /* list of joint sliders */\n      ul {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      li {\n        font-size: 16px;\n        display: flex;\n        align-items: center;\n        padding: 1px 0;\n\n        width: 100%;\n        user-select: text;\n\n        transition: background 0.25s ease;\n      }\n\n      li[robot-hovered] {\n        background: rgba(255, 255, 255, 0.35);\n      }\n\n      li:hover {\n        background: rgba(255, 255, 255, 0.35);\n      }\n\n      li span {\n        padding: 0 5px;\n        max-width: 125px;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      li input[type='number'] {\n        width: 50px;\n        overflow: hidden;\n      }\n    `\n  ]\n\n  @property({ type: Object }) viewer?: URDFManipulatorElement\n  @property({ type: Object }) robot?: URDFRobot\n\n  render() {\n    const { joints = {} } = this.robot || {}\n    const { ignoreLimits = false } = this.viewer || {}\n    const jointsArray = Object.values(joints)\n\n    return html`\n      <ul>\n        ${jointsArray.map(joint => {\n          var { jointType, name, angle, limit } = joint\n          var degVal: number | string = Number(angle || 0)\n\n          if (jointType === 'revolute' || jointType === 'continuous') {\n            degVal *= RAD2DEG\n          }\n\n          if (Math.abs(degVal) > 1) {\n            degVal = degVal.toFixed(1)\n          } else {\n            degVal = degVal.toPrecision(2)\n          }\n\n          var sliderMin\n          var sliderMax\n          var inputMin\n          var inputMax\n\n          if (ignoreLimits || jointType === 'continuous') {\n            sliderMin = -6.28\n            sliderMax = 6.28\n\n            inputMin = -6.28 * RAD2DEG\n            inputMax = 6.28 * RAD2DEG\n          } else {\n            sliderMin = limit.lower\n            sliderMax = limit.upper\n\n            inputMin = Number(limit.lower) * RAD2DEG\n            inputMax = Number(limit.upper) * RAD2DEG\n          }\n\n          return html`\n            <li joint-type=${jointType} joint-name=${name}>\n              <span title=${name}>${name}</span>\n              <input\n                type=\"range\"\n                .value=${String(angle)}\n                step=\"0.0001\"\n                min=${sliderMin}\n                max=${sliderMax}\n                @input=${(e: Event) => {\n                  this.viewer?.setJointValue(name, (e.target as any).value)\n                }}\n              />\n              <input\n                type=\"number\"\n                .value=${degVal}\n                step=\"0.0001\"\n                min=${inputMin}\n                max=${inputMax}\n                @change=${(e: Event) => {\n                  this.viewer?.setJointValue(name, Number((e.target as HTMLInputElement).value) * DEG2RAD)\n                }}\n              />\n            </li>\n          `\n        })}\n      </ul>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('viewer')) {\n      this._setupViewer(this.viewer)\n    }\n  }\n\n  _setupViewer(viewer?: URDFManipulatorElement) {\n    if (!viewer) {\n      return\n    }\n\n    this.robot = viewer.robot\n\n    viewer.addEventListener('urdf-processed', () => {\n      this.robot = viewer.robot\n    })\n\n    viewer.addEventListener('ignore-limits-change', () => {\n      this.requestUpdate()\n    })\n\n    viewer.addEventListener('angle-change', (e: Event) => {\n      this.requestUpdate()\n    })\n\n    viewer.addEventListener('joint-mouseover', (e: Event) => {\n      const j = this.renderRoot.querySelector(`li[joint-name=\"${(e as CustomEvent).detail}\"]`)\n      if (j) {\n        j.setAttribute('robot-hovered', 'true')\n      }\n    })\n\n    viewer.addEventListener('joint-mouseout', (e: Event) => {\n      const j = this.renderRoot.querySelector(`li[joint-name=\"${(e as CustomEvent).detail}\"]`)\n      if (j) {\n        j.removeAttribute('robot-hovered')\n      }\n    })\n\n    let originalNoAutoRecenter: boolean\n    viewer.addEventListener('manipulate-start', (e: Event) => {\n      const j = this.renderRoot.querySelector(`li[joint-name=\"${(e as CustomEvent).detail}\"]`)\n      if (j) {\n        // ??\n        j.scrollIntoView({ block: 'nearest' })\n        window.scrollTo(0, 0)\n      }\n\n      originalNoAutoRecenter = viewer.noAutoRecenter\n      viewer.noAutoRecenter = true\n    })\n\n    viewer.addEventListener('manipulate-end', (e: Event) => {\n      viewer.noAutoRecenter = originalNoAutoRecenter\n    })\n\n    registerDragEvents(viewer, () => {\n      this.setColor('#263238')\n    })\n  }\n\n  setColor(color: string) {\n    this.viewer!.highlightColor = '#' + new THREE.Color(0xffffff).lerp(new THREE.Color(color), 0.35).getHexString()\n  }\n}\n"]}

package/dist/elements/urdf-drag-controls.d.ts

@@ -1,32 +0,0 @@
-import { Raycaster, Vector3, Scene, Camera, Ray } from 'three';
-import { URDFJoint } from 'urdf-loader';
-export declare class URDFDragControls {
-    scene: Scene;
-    enabled: boolean;
-    raycaster: Raycaster;
-    initialGrabPoint: Vector3;
-    hitDistance: number;
-    hovered: any;
-    manipulating: any;
-    constructor(scene: Scene);
-    update(): void;
-    updateJoint(joint: URDFJoint, angle: number): void;
-    onDragStart(joint: URDFJoint): void;
-    onDragEnd(joint: URDFJoint): void;
-    onHover(joint: URDFJoint): void;
-    onUnhover(joint: URDFJoint): void;
-    getRevoluteDelta(joint: URDFJoint, startPoint: Vector3, endPoint: Vector3): number;
-    getPrismaticDelta(joint: URDFJoint, startPoint: Vector3, endPoint: Vector3): number;
-    moveRay(toRay: Ray): void;
-    setGrabbed(grabbed: boolean): void;
-}
-export declare class PointerURDFDragControls extends URDFDragControls {
-    camera: Camera;
-    domElement: HTMLElement;
-    _mouseDown: (e: MouseEvent) => void;
-    _mouseMove: (e: MouseEvent) => void;
-    _mouseUp: (e: MouseEvent) => void;
-    constructor(scene: Scene, camera: Camera, domElement: HTMLElement);
-    getRevoluteDelta(joint: URDFJoint, startPoint: Vector3, endPoint: Vector3): number;
-    dispose(): void;
-}