npm - @operato/scene-urdf - Versions diffs - 1.2.2 - Mend

@operato/scene-urdf 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/CHANGELOG.md +11 -0
package/README.md +41 -0
package/assets/images/spinner.png +0 -0
package/demo/index.html +109 -0
package/dist/editors/index.d.ts +0 -0
package/dist/editors/index.js +2 -0
package/dist/editors/index.js.map +1 -0
package/dist/elements/drag-n-drop.d.ts +2 -0
package/dist/elements/drag-n-drop.js +126 -0
package/dist/elements/drag-n-drop.js.map +1 -0
package/dist/elements/urdf-controller-element.d.ts +12 -0
package/dist/elements/urdf-controller-element.js +283 -0
package/dist/elements/urdf-controller-element.js.map +1 -0
package/dist/elements/urdf-drag-controls.d.ts +32 -0
package/dist/elements/urdf-drag-controls.js +185 -0
package/dist/elements/urdf-drag-controls.js.map +1 -0
package/dist/elements/urdf-manipulator-element.d.ts +15 -0
package/dist/elements/urdf-manipulator-element.js +110 -0
package/dist/elements/urdf-manipulator-element.js.map +1 -0
package/dist/elements/urdf-viewer-element.d.ts +53 -0
package/dist/elements/urdf-viewer-element.js +401 -0
package/dist/elements/urdf-viewer-element.js.map +1 -0
package/dist/index.d.ts +2 -0
package/dist/index.js +3 -0
package/dist/index.js.map +1 -0
package/dist/templates/index.d.ts +14 -0
package/dist/templates/index.js +4 -0
package/dist/templates/index.js.map +1 -0
package/dist/templates/urdf-controller.d.ts +14 -0
package/dist/templates/urdf-controller.js +16 -0
package/dist/templates/urdf-controller.js.map +1 -0
package/dist/templates/urdf-viewer.d.ts +14 -0
package/dist/templates/urdf-viewer.js +16 -0
package/dist/templates/urdf-viewer.js.map +1 -0
package/dist/urdf-controller.d.ts +27 -0
package/dist/urdf-controller.js +65 -0
package/dist/urdf-controller.js.map +1 -0
package/dist/urdf-viewer.d.ts +50 -0
package/dist/urdf-viewer.js +198 -0
package/dist/urdf-viewer.js.map +1 -0
package/icons/urdf-controller.png +0 -0
package/icons/urdf-viewer.png +0 -0
package/package.json +66 -0
package/src/editors/index.ts +0 -0
package/src/elements/drag-n-drop.ts +142 -0
package/src/elements/urdf-controller-element.ts +297 -0
package/src/elements/urdf-drag-controls.ts +248 -0
package/src/elements/urdf-manipulator-element.ts +133 -0
package/src/elements/urdf-viewer-element.ts +495 -0
package/src/index.ts +2 -0
package/src/templates/index.ts +4 -0
package/src/templates/urdf-controller.ts +16 -0
package/src/templates/urdf-viewer.ts +16 -0
package/src/urdf-controller.ts +82 -0
package/src/urdf-viewer.ts +249 -0
package/things-scene.config.js +7 -0
package/translations/en.json +16 -0
package/translations/ko.json +16 -0
package/translations/ms.json +16 -0
package/translations/zh.json +16 -0
package/tsconfig.json +22 -0
package/tsconfig.tsbuildinfo +1 -0
package/web-dev-server.config.mjs +27 -0

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,11 @@
+# Change Log
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [1.2.2](https://github.com/things-scene/operato-scene/compare/v1.2.1...v1.2.2) (2023-02-09)
+### :bug: Bug Fix
+* migrate scene-urdf from things-factory ([3f75f87](https://github.com/things-scene/operato-scene/commit/3f75f8743e993a9a3ed595eed8f94b15da042a31))

package/README.md ADDED Viewed

@@ -0,0 +1,41 @@
+# \<scene-urdf>
+## Installation
+```bash
+npm i scene-urdf
+```
+## Usage
+```html
+```
+## Linting and formatting
+To scan the project for linting and formatting errors, run
+```bash
+npm run lint
+```
+To automatically fix linting and formatting errors, run
+```bash
+npm run format
+```
+## Tooling configs
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+If you customize the configuration a lot, you can consider moving them to individual files.
+## Local Demo with `web-dev-server`
+```bash
+npm start
+```
+To run a local development server that serves the basic demo located in `demo/index.html`

package/assets/images/spinner.png ADDED Viewed

Binary file

package/demo/index.html ADDED Viewed

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" />
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        /* This is a font-stack that tries to use the system-default sans-serifs first */
+        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+      ox-board-viewer {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="demo"></div>
+    <script type="module">
+      import { html, render } from 'lit'
+      import { ReferenceMap, create, error } from '@hatiolab/things-scene'
+      import '@operato/board/ox-board-viewer.js'
+      import '../dist/simple-switch.js'
+      const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
+      const boards = colors.map((color, idx) => {
+        var to = colors[(idx + 1) % colors.length]
+        return {
+          id: color,
+          model: {
+            width: 400,
+            height: 300,
+            fillStyle: color,
+            components: [
+              {
+                type: 'text',
+                left: 100,
+                top: 100,
+                width: 200,
+                height: 30,
+                text: `Click to move to ${to}`,
+                event: {
+                  tap: {
+                    action: 'goto',
+                    target: to
+                  }
+                }
+              },
+              {
+                type: 'simple-switch',
+                left: 100,
+                top: 200,
+                width: 100,
+                height: 30
+              }
+            ]
+          }
+        }
+      })
+      var provider = new ReferenceMap(
+        async (boardId, resolve, reject) => {
+          try {
+            const board = boards.find(board => {
+              return board.id === boardId
+            })
+            if (!board) {
+              throw `no board named as ${boardId}`
+            }
+            var scene
+            try {
+              scene = await provider.get(boardId)
+              console.warn('Board fetched more than twice.', boardId)
+            } catch (e) {
+              scene = create({
+                model: JSON.parse(JSON.stringify(board.model)),
+                mode: 0,
+                refProvider: provider
+              })
+            }
+            resolve(scene, board)
+          } catch (e) {
+            error(e)
+            reject(e)
+          }
+        },
+        async (id, ref) => {
+          ref.dispose()
+        }
+      )
+      render(
+        html` <ox-board-viewer .board=${boards[0]} .provider=${provider}></ox-board-viewer> `,
+        document.querySelector('#demo')
+      )
+    </script>
+  </body>
+</html>

package/dist/editors/index.d.ts ADDED Viewed

File without changes

package/dist/editors/index.js ADDED Viewed

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

package/dist/editors/index.js.map ADDED Viewed

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

package/dist/elements/drag-n-drop.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import URDFViewerElement from './urdf-viewer-element';
2	+ export declare function registerDragEvents(viewer: URDFViewerElement, callback: () => void): void;

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

@@ -0,0 +1,126 @@
+// 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 ADDED Viewed

@@ -0,0 +1 @@

+ {"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'\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 ADDED Viewed

@@ -0,0 +1,12 @@
+import { LitElement, PropertyValues } from 'lit';
+import { URDFRobot } from 'urdf-loader';
+import URDFManipulatorElement from './urdf-manipulator-element';
+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 ADDED Viewed

@@ -0,0 +1,283 @@
+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';
+import { ScrollbarStyles } from '@operato/styles';
+const DEG2RAD = Math.PI / 180;
+const RAD2DEG = 1 / DEG2RAD;
+let URDFControllerElement = class URDFControllerElement extends LitElement {
+    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) => {
+                var _a;
+                (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.setJointValue(name, e.target.value);
+            }}
+              />
+              <input
+                type="number"
+                .value=${degVal}
+                step="0.0001"
+                min=${inputMin}
+                max=${inputMax}
+                @change=${(e) => {
+                var _a;
+                (_a = this.viewer) === null || _a === void 0 ? void 0 : _a.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();
+    }
+};
+URDFControllerElement.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;
+      }
+    `
+];
+__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 ADDED Viewed

@@ -0,0 +1 @@

+ {"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'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { URDFRobot } from 'urdf-loader'\nimport URDFManipulatorElement from './urdf-manipulator-element'\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"]}