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

package/dist/editors/index.d.ts

@@ -0,0 +1,6 @@
+import './property-editor-urdf-joints.js';
+declare const _default: {
+    type: string;
+    element: string;
+}[];
+export default _default;

package/dist/editors/index.js

@@ -1,2 +1,8 @@
-"use strict";
+import './property-editor-urdf-joints.js';
+export default [
+    {
+        type: 'urdf-joints',
+        element: 'property-editor-urdf-joints'
+    }
+];
 //# sourceMappingURL=index.js.map

package/dist/editors/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/editors/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/editors/index.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA;AAEzC,eAAe;IACb;QACE,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,6BAA6B;KACvC;CACF,CAAA","sourcesContent":["import './property-editor-urdf-joints.js'\n\nexport default [\n  {\n    type: 'urdf-joints',\n    element: 'property-editor-urdf-joints'\n  }\n]\n"]}

package/dist/editors/property-editor-urdf-joints.d.ts

@@ -0,0 +1,54 @@
+import '@operato/i18n/ox-i18n.js';
+import { TemplateResult } from 'lit';
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
+type JointMeta = {
+    name: string;
+    type: 'fixed' | 'continuous' | 'revolute' | 'planar' | 'prismatic' | 'floating';
+    axis: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    limit: {
+        lower: number;
+        upper: number;
+        effort: number;
+        velocity: number;
+    };
+};
+/**
+ * URDF 조인트 슬라이더 에디터.
+ *
+ * 값(value)은 state.joints 객체: `{ [jointName]: number | { value: number } }`.
+ * 조인트 메타(이름/타입/axis/limit)는 로드된 RealObjectURDF.jointMeta에서 읽으며,
+ * 선택된 컴포넌트 참조를 얻기 위해 `i-need-selected` 커스텀 이벤트를 사용한다.
+ *
+ * 슬라이더 조작 시 state.joints를 immutable하게 업데이트한 새 객체를 value로
+ * 설정 — things-scene setState의 deep-equality 변화 감지를 통과시키기 위함.
+ */
+export default class URDFJointsEditor extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
+    private _component;
+    private _pollTimer?;
+    meta: JointMeta[];
+    constructor();
+    editorTemplate(value: any, _spec: PropertySpec): TemplateResult;
+    private _renderJointSlider;
+    private _onSlide;
+    /**
+     * 슬라이더 드래그 종료 시 브라우저가 네이티브 'change' 이벤트를 발행한다.
+     * 이 이벤트가 OxPropertyEditor 베이스의 _valueChanged(renderRoot 리스너)에
+     * 도달하면 input.value(문자열)를 this.value에 assign해버려서 joints 객체가
+     * "45" 같은 문자열로 덮어쓰여진다. shadow DOM 내부에서 바로 stopPropagation.
+     */
+    private _stopChange;
+    private _onReset;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * 선택된 URDF 컴포넌트를 얻어 jointMeta를 읽는다. 로드가 아직이면 주기적 폴링.
+     */
+    private _requestSelectedComponent;
+    private _refreshJointMeta;
+}
+export {};

package/dist/editors/property-editor-urdf-joints.js

@@ -0,0 +1,242 @@
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { ScrollbarStyles } from '@operato/styles/scrollbar-styles.js';
+const RAD2DEG = 180 / Math.PI;
+/**
+ * URDF 조인트 슬라이더 에디터.
+ *
+ * 값(value)은 state.joints 객체: `{ [jointName]: number | { value: number } }`.
+ * 조인트 메타(이름/타입/axis/limit)는 로드된 RealObjectURDF.jointMeta에서 읽으며,
+ * 선택된 컴포넌트 참조를 얻기 위해 `i-need-selected` 커스텀 이벤트를 사용한다.
+ *
+ * 슬라이더 조작 시 state.joints를 immutable하게 업데이트한 새 객체를 value로
+ * 설정 — things-scene setState의 deep-equality 변화 감지를 통과시키기 위함.
+ */
+let URDFJointsEditor = class URDFJointsEditor extends OxPropertyEditor {
+    static styles = [
+        ...OxPropertyEditor.styles,
+        ScrollbarStyles,
+        css `
+      [joints-panel] {
+        max-height: 320px;
+        overflow-y: auto;
+        padding: 4px 0;
+      }
+
+      .joint-row {
+        display: grid;
+        grid-template-columns: 80px 1fr 60px;
+        gap: 6px;
+        align-items: center;
+        margin: 3px 0;
+      }
+
+      .joint-row > .joint-name {
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        text-align: right;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .joint-row > .joint-name[data-fixed] {
+        color: var(--md-sys-color-on-surface-variant, #888);
+        font-style: italic;
+      }
+
+      .joint-row > input[type='range'] {
+        width: 100%;
+        accent-color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .joint-row > .joint-value {
+        font: 11px monospace;
+        color: var(--md-sys-color-on-surface-variant, #666);
+        text-align: right;
+      }
+
+      .joint-empty,
+      .joint-waiting {
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface-variant, #888);
+        padding: 8px 10px;
+        font-style: italic;
+      }
+
+      .joint-type-badge {
+        display: inline-block;
+        font-size: 9px;
+        padding: 1px 5px;
+        margin-left: 4px;
+        border-radius: 6px;
+        background: var(--md-sys-color-secondary-container, #e8def8);
+        color: var(--md-sys-color-on-secondary-container, #1d192b);
+        text-transform: uppercase;
+      }
+
+      .reset-btn {
+        font-size: 10px;
+        padding: 3px 8px;
+        margin-top: 4px;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.2));
+        border-radius: 6px;
+        background: var(--md-sys-color-surface-container, #f3edf7);
+        cursor: pointer;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+      }
+      .reset-btn:hover {
+        background: var(--md-sys-color-surface-container-highest, #e6e0e9);
+      }
+    `
+    ];
+    _component = null;
+    _pollTimer;
+    constructor() {
+        super();
+        this.meta = [];
+    }
+    editorTemplate(value, _spec) {
+        const joints = (value || {});
+        return html `
+      <fieldset fullwidth>
+        <legend>Joints</legend>
+        <div joints-panel>
+          ${this.meta.length === 0
+            ? html `<div class="joint-waiting">Waiting for URDF to load…</div>`
+            : this.meta.map(m => this._renderJointSlider(m, joints))}
+        </div>
+        ${this.meta.length > 0
+            ? html `<button class="reset-btn" @click=${this._onReset}>Reset all</button>`
+            : null}
+      </fieldset>
+    `;
+    }
+    _renderJointSlider(m, joints) {
+        const raw = joints[m.name];
+        const internal = typeof raw === 'number' ? raw : (raw?.value ?? 0);
+        const isRad = m.type === 'revolute' || m.type === 'continuous';
+        const scale = isRad ? RAD2DEG : 1;
+        const unit = isRad ? '°' : 'm';
+        const minDisp = m.limit.lower * scale;
+        const maxDisp = m.limit.upper * scale;
+        const dispVal = internal * scale;
+        const step = isRad ? 1 : Math.max((m.limit.upper - m.limit.lower) / 100, 0.001);
+        return html `
+      <div class="joint-row">
+        <span class="joint-name" title="${m.name} (${m.type})">
+          ${m.name}
+          <span class="joint-type-badge">${m.type.substring(0, 3)}</span>
+        </span>
+        <input
+          type="range"
+          min=${minDisp}
+          max=${maxDisp}
+          step=${step}
+          .value=${String(dispVal)}
+          data-joint=${m.name}
+          data-scale=${scale}
+          @input=${this._onSlide}
+          @change=${this._stopChange}
+        />
+        <span class="joint-value">${dispVal.toFixed(isRad ? 1 : 3)}${unit}</span>
+      </div>
+    `;
+    }
+    _onSlide = (e) => {
+        e.stopPropagation();
+        const input = e.target;
+        const jointName = input.dataset.joint;
+        const scale = parseFloat(input.dataset.scale || '1');
+        const internal = parseFloat(input.value) / scale;
+        // 이전 값을 immutable하게 새 객체로 머지. state.joints를 mutate하면
+        // setState의 deep-equality 체크에서 before=after로 판정되어 change 감지
+        // 실패 → onchange가 fire되지 않음. Phase 1에서 확인된 규칙.
+        const prev = (this.value || {});
+        const next = { ...prev, [jointName]: internal };
+        this.value = next;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    };
+    /**
+     * 슬라이더 드래그 종료 시 브라우저가 네이티브 'change' 이벤트를 발행한다.
+     * 이 이벤트가 OxPropertyEditor 베이스의 _valueChanged(renderRoot 리스너)에
+     * 도달하면 input.value(문자열)를 this.value에 assign해버려서 joints 객체가
+     * "45" 같은 문자열로 덮어쓰여진다. shadow DOM 내부에서 바로 stopPropagation.
+     */
+    _stopChange = (e) => {
+        e.stopPropagation();
+    };
+    _onReset = (e) => {
+        e.stopPropagation();
+        this.value = {};
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    };
+    connectedCallback() {
+        super.connectedCallback();
+        this._requestSelectedComponent();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._pollTimer) {
+            clearInterval(this._pollTimer);
+            this._pollTimer = undefined;
+        }
+    }
+    /**
+     * 선택된 URDF 컴포넌트를 얻어 jointMeta를 읽는다. 로드가 아직이면 주기적 폴링.
+     */
+    _requestSelectedComponent() {
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    const component = selected?.[0];
+                    if (!component)
+                        return;
+                    this._component = component;
+                    this._refreshJointMeta();
+                }
+            }
+        }));
+    }
+    _refreshJointMeta() {
+        const ro = this._component?.realObject;
+        const meta = ro?.jointMeta;
+        if (meta && meta.length > 0) {
+            this.meta = meta;
+            if (this._pollTimer) {
+                clearInterval(this._pollTimer);
+                this._pollTimer = undefined;
+            }
+            return;
+        }
+        // 아직 로드 전이면 폴링 (최대 20회 = 10초)
+        if (this._pollTimer)
+            return;
+        let retries = 0;
+        this._pollTimer = window.setInterval(() => {
+            const m = this._component?.realObject?.jointMeta;
+            if (m && m.length > 0) {
+                this.meta = m;
+                clearInterval(this._pollTimer);
+                this._pollTimer = undefined;
+            }
+            else if (++retries >= 20) {
+                clearInterval(this._pollTimer);
+                this._pollTimer = undefined;
+            }
+        }, 500);
+    }
+};
+__decorate([
+    state()
+], URDFJointsEditor.prototype, "meta", void 0);
+URDFJointsEditor = __decorate([
+    customElement('property-editor-urdf-joints')
+], URDFJointsEditor);
+export default URDFJointsEditor;
+//# sourceMappingURL=property-editor-urdf-joints.js.map

package/dist/editors/property-editor-urdf-joints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-urdf-joints.js","sourceRoot":"","sources":["../../src/editors/property-editor-urdf-joints.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { ScrollbarStyles } from '@operato/styles/scrollbar-styles.js'\n\ntype JointMeta = {\n  name: string\n  type: 'fixed' | 'continuous' | 'revolute' | 'planar' | 'prismatic' | 'floating'\n  axis: { x: number; y: number; z: number }\n  limit: { lower: number; upper: number; effort: number; velocity: number }\n}\n\nconst RAD2DEG = 180 / Math.PI\n\n/**\n * URDF 조인트 슬라이더 에디터.\n *\n * 값(value)은 state.joints 객체: `{ [jointName]: number | { value: number } }`.\n * 조인트 메타(이름/타입/axis/limit)는 로드된 RealObjectURDF.jointMeta에서 읽으며,\n * 선택된 컴포넌트 참조를 얻기 위해 `i-need-selected` 커스텀 이벤트를 사용한다.\n *\n * 슬라이더 조작 시 state.joints를 immutable하게 업데이트한 새 객체를 value로\n * 설정 — things-scene setState의 deep-equality 변화 감지를 통과시키기 위함.\n */\n@customElement('property-editor-urdf-joints')\nexport default class URDFJointsEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    ScrollbarStyles,\n    css`\n      [joints-panel] {\n        max-height: 320px;\n        overflow-y: auto;\n        padding: 4px 0;\n      }\n\n      .joint-row {\n        display: grid;\n        grid-template-columns: 80px 1fr 60px;\n        gap: 6px;\n        align-items: center;\n        margin: 3px 0;\n      }\n\n      .joint-row > .joint-name {\n        font-size: 11px;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n        text-align: right;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .joint-row > .joint-name[data-fixed] {\n        color: var(--md-sys-color-on-surface-variant, #888);\n        font-style: italic;\n      }\n\n      .joint-row > input[type='range'] {\n        width: 100%;\n        accent-color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .joint-row > .joint-value {\n        font: 11px monospace;\n        color: var(--md-sys-color-on-surface-variant, #666);\n        text-align: right;\n      }\n\n      .joint-empty,\n      .joint-waiting {\n        font-size: 11px;\n        color: var(--md-sys-color-on-surface-variant, #888);\n        padding: 8px 10px;\n        font-style: italic;\n      }\n\n      .joint-type-badge {\n        display: inline-block;\n        font-size: 9px;\n        padding: 1px 5px;\n        margin-left: 4px;\n        border-radius: 6px;\n        background: var(--md-sys-color-secondary-container, #e8def8);\n        color: var(--md-sys-color-on-secondary-container, #1d192b);\n        text-transform: uppercase;\n      }\n\n      .reset-btn {\n        font-size: 10px;\n        padding: 3px 8px;\n        margin-top: 4px;\n        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.2));\n        border-radius: 6px;\n        background: var(--md-sys-color-surface-container, #f3edf7);\n        cursor: pointer;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n      }\n      .reset-btn:hover {\n        background: var(--md-sys-color-surface-container-highest, #e6e0e9);\n      }\n    `\n  ]\n\n  private _component: any = null\n  private _pollTimer?: number\n\n  @state() declare meta: JointMeta[]\n\n  constructor() {\n    super()\n    this.meta = []\n  }\n\n  editorTemplate(value: any, _spec: PropertySpec): TemplateResult {\n    const joints = (value || {}) as Record<string, number | { value?: number }>\n\n    return html`\n      <fieldset fullwidth>\n        <legend>Joints</legend>\n        <div joints-panel>\n          ${this.meta.length === 0\n            ? html`<div class=\"joint-waiting\">Waiting for URDF to load…</div>`\n            : this.meta.map(m => this._renderJointSlider(m, joints))}\n        </div>\n        ${this.meta.length > 0\n          ? html`<button class=\"reset-btn\" @click=${this._onReset}>Reset all</button>`\n          : null}\n      </fieldset>\n    `\n  }\n\n  private _renderJointSlider(m: JointMeta, joints: Record<string, number | { value?: number }>) {\n    const raw = joints[m.name]\n    const internal = typeof raw === 'number' ? raw : (raw?.value ?? 0)\n    const isRad = m.type === 'revolute' || m.type === 'continuous'\n    const scale = isRad ? RAD2DEG : 1\n    const unit = isRad ? '°' : 'm'\n    const minDisp = m.limit.lower * scale\n    const maxDisp = m.limit.upper * scale\n    const dispVal = internal * scale\n    const step = isRad ? 1 : Math.max((m.limit.upper - m.limit.lower) / 100, 0.001)\n\n    return html`\n      <div class=\"joint-row\">\n        <span class=\"joint-name\" title=\"${m.name} (${m.type})\">\n          ${m.name}\n          <span class=\"joint-type-badge\">${m.type.substring(0, 3)}</span>\n        </span>\n        <input\n          type=\"range\"\n          min=${minDisp}\n          max=${maxDisp}\n          step=${step}\n          .value=${String(dispVal)}\n          data-joint=${m.name}\n          data-scale=${scale}\n          @input=${this._onSlide}\n          @change=${this._stopChange}\n        />\n        <span class=\"joint-value\">${dispVal.toFixed(isRad ? 1 : 3)}${unit}</span>\n      </div>\n    `\n  }\n\n  private _onSlide = (e: Event) => {\n    e.stopPropagation()\n    const input = e.target as HTMLInputElement\n    const jointName = input.dataset.joint!\n    const scale = parseFloat(input.dataset.scale || '1')\n    const internal = parseFloat(input.value) / scale\n\n    // 이전 값을 immutable하게 새 객체로 머지. state.joints를 mutate하면\n    // setState의 deep-equality 체크에서 before=after로 판정되어 change 감지\n    // 실패 → onchange가 fire되지 않음. Phase 1에서 확인된 규칙.\n    const prev = (this.value || {}) as Record<string, any>\n    const next = { ...prev, [jointName]: internal }\n    this.value = next\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /**\n   * 슬라이더 드래그 종료 시 브라우저가 네이티브 'change' 이벤트를 발행한다.\n   * 이 이벤트가 OxPropertyEditor 베이스의 _valueChanged(renderRoot 리스너)에\n   * 도달하면 input.value(문자열)를 this.value에 assign해버려서 joints 객체가\n   * \"45\" 같은 문자열로 덮어쓰여진다. shadow DOM 내부에서 바로 stopPropagation.\n   */\n  private _stopChange = (e: Event) => {\n    e.stopPropagation()\n  }\n\n  private _onReset = (e: MouseEvent) => {\n    e.stopPropagation()\n    this.value = {}\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this._requestSelectedComponent()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this._pollTimer) {\n      clearInterval(this._pollTimer)\n      this._pollTimer = undefined\n    }\n  }\n\n  /**\n   * 선택된 URDF 컴포넌트를 얻어 jointMeta를 읽는다. 로드가 아직이면 주기적 폴링.\n   */\n  private _requestSelectedComponent() {\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const component = selected?.[0]\n            if (!component) return\n            this._component = component\n            this._refreshJointMeta()\n          }\n        }\n      })\n    )\n  }\n\n  private _refreshJointMeta() {\n    const ro = this._component?.realObject\n    const meta: JointMeta[] | undefined = ro?.jointMeta\n    if (meta && meta.length > 0) {\n      this.meta = meta\n      if (this._pollTimer) {\n        clearInterval(this._pollTimer)\n        this._pollTimer = undefined\n      }\n      return\n    }\n\n    // 아직 로드 전이면 폴링 (최대 20회 = 10초)\n    if (this._pollTimer) return\n    let retries = 0\n    this._pollTimer = window.setInterval(() => {\n      const m = this._component?.realObject?.jointMeta\n      if (m && m.length > 0) {\n        this.meta = m\n        clearInterval(this._pollTimer!)\n        this._pollTimer = undefined\n      } else if (++retries >= 20) {\n        clearInterval(this._pollTimer!)\n        this._pollTimer = undefined\n      }\n    }, 500)\n  }\n}\n"]}

package/dist/index.d.ts

@@ -1,2 +1,4 @@
-export { default as UrdfViewer } from './urdf-viewer.js';
-export { default as UrdfController } from './urdf-controller.js';
+import './urdf-object.js';
+export { RealObjectURDF } from './real-object-urdf.js';
+export type { URDFJointState, URDFJointMeta } from './real-object-urdf.js';
+export { URDFObject } from './urdf-object.js';

package/dist/index.js

@@ -1,3 +1,17 @@
-export { default as UrdfViewer } from './urdf-viewer.js';
-export { default as UrdfController } from './urdf-controller.js';
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * URDF 플러그인 — things-scene의 RealObjectExternalModel 베이스를 상속받아
+ * URDF(Unified Robot Description Format) 로봇을 네이티브 3D 씬 오브젝트로
+ * 렌더링한다. @sceneComponent('urdf')로 등록되어 things-factory 보드에서
+ * 일반 컴포넌트처럼 사용 가능.
+ *
+ * 기본 loader는 STL/DAE/GLB를 지원하며, GLB는 things-scene의 RealObjectGLTF
+ * 캐시와 공유한다. xacro 전처리는 현재 미지원(ros-industrial 로봇 등은 사전
+ * 변환된 URDF 필요).
+ */
+// @sceneComponent decorator side-effect를 위해 import
+import './urdf-object.js';
+export { RealObjectURDF } from './real-object-urdf.js';
+export { URDFObject } from './urdf-object.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA","sourcesContent":["export { default as UrdfViewer } from './urdf-viewer.js'\nexport { default as UrdfController } from './urdf-controller.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,mDAAmD;AACnD,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * URDF 플러그인 — things-scene의 RealObjectExternalModel 베이스를 상속받아\n * URDF(Unified Robot Description Format) 로봇을 네이티브 3D 씬 오브젝트로\n * 렌더링한다. @sceneComponent('urdf')로 등록되어 things-factory 보드에서\n * 일반 컴포넌트처럼 사용 가능.\n *\n * 기본 loader는 STL/DAE/GLB를 지원하며, GLB는 things-scene의 RealObjectGLTF\n * 캐시와 공유한다. xacro 전처리는 현재 미지원(ros-industrial 로봇 등은 사전\n * 변환된 URDF 필요).\n */\n\n// @sceneComponent decorator side-effect를 위해 import\nimport './urdf-object.js'\n\nexport { RealObjectURDF } from './real-object-urdf.js'\nexport type { URDFJointState, URDFJointMeta } from './real-object-urdf.js'\nexport { URDFObject } from './urdf-object.js'\n"]}

package/dist/real-object-urdf.d.ts

@@ -0,0 +1,75 @@
+import * as THREE from 'three';
+import type { URDFRobot } from 'urdf-loader';
+import type { Properties } from '@hatiolab/things-scene';
+import { RealObjectExternalModel } from '@hatiolab/things-scene';
+export interface URDFJointState {
+    /** revolute/continuous: 라디안. prismatic: 거리(URDF 단위). */
+    value?: number;
+}
+export interface URDFJointMeta {
+    name: string;
+    type: 'fixed' | 'continuous' | 'revolute' | 'planar' | 'prismatic' | 'floating';
+    axis: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    limit: {
+        lower: number;
+        upper: number;
+        effort: number;
+        velocity: number;
+    };
+}
+export declare class RealObjectURDF extends RealObjectExternalModel<URDFRobot> {
+    protected get _formatLabel(): string;
+    protected get _placeholderColor(): number;
+    private static _urdfCache;
+    private static _topViewCache;
+    /**
+     * URDF를 로드한다 (동일 URL 캐시).
+     * mesh 로더는 STL/DAE(내장) + GLB(확장)를 지원한다.
+     *
+     * URDFLoader.loadAsync는 URDF XML 파싱 직후 resolve하지만 mesh(STL/DAE/GLB)는
+     * 비동기로 뒤늦게 attach된다. robot.clone() 시점에 mesh가 아직 없으면 클론된
+     * 트리엔 visual이 비게 되고 원본에만 mesh가 붙는다. 전용 LoadingManager의
+     * onLoad를 사용해 URDF + 모든 mesh가 완료된 후 resolve한다.
+     */
+    static loadURDF(url: string): Promise<URDFRobot>;
+    /** 모든 캐시 비움 (보드 전환 시 호출) */
+    static flushCache(): void;
+    static getTopViewCache(source: string): HTMLCanvasElement | undefined;
+    static setTopViewCache(source: string, canvas: HTMLCanvasElement): void;
+    private _robot?;
+    private _jointIndex;
+    private _jointMeta;
+    private _jointOriginals;
+    get robot(): URDFRobot | undefined;
+    /** 로드된 조인트 메타 리스트 (property panel 등이 참조) */
+    get jointMeta(): URDFJointMeta[];
+    get jointNames(): string[];
+    protected _loadExternal(url: string): Promise<URDFRobot>;
+    protected _onLoaded(robot: URDFRobot): void;
+    private _resolveUnitScale;
+    /**
+     * 조인트 트리를 순회하며 인덱스와 메타를 구축한다.
+     * fixed 조인트는 조작 대상이 아니므로 메타에서 제외하되 인덱스에는 남긴다.
+     */
+    private _buildJointIndex;
+    /**
+     * state.joints 맵을 순회하며 각 조인트 값을 적용한다.
+     * 값은 숫자 또는 { value: number } 형식 모두 허용 (유연성).
+     *
+     * joint transform 변경 후 component.invalidate()로 재렌더를 요청한다.
+     * 표준 경로: invalidate → Layer.throttle_render → rAF __draw__ → trigger('redraw')
+     * → ThreeCapability.animate → renderThreeD.
+     */
+    private _applyJointStates;
+    /**
+     * 모든 조인트를 원본 값으로 복원한다.
+     */
+    private _resetAllJoints;
+    clear(): THREE.Object3D<THREE.Object3DEventMap>;
+    updateDimension(): void;
+    onchange(after: Properties, before: Properties): void;
+}