@operato/scene-visualizer 9.2.2 → 10.0.0-beta.10

package/dist/editors/property-editor-gltf-play-targets.js

@@ -0,0 +1,388 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * GLTF 애니메이션 타겟 선택 에디터.
+ * All / None / Custom 모드로 started에 바인딩할 애니메이션 선택.
+ * 각 애니메이션을 개별 미리보기(play/stop) 가능.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import { css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { ScrollbarStyles } from '@operato/styles/scrollbar-styles.js';
+function getMode(value) {
+    if (value === '*')
+        return 'all';
+    if (value === 'none')
+        return 'none';
+    if (Array.isArray(value) && value.length > 0)
+        return 'custom';
+    if (Array.isArray(value))
+        return 'custom'; // empty array = custom with nothing
+    if (!value)
+        return 'all'; // undefined = default = all
+    return 'all';
+}
+let GLTFPlayTargetsEditor = class GLTFPlayTargetsEditor extends OxPropertyEditor {
+    static styles = [
+        ...OxPropertyEditor.styles,
+        ScrollbarStyles,
+        css `
+      .mode-selector {
+        display: flex;
+        gap: 0;
+        margin-bottom: 6px;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .mode-btn {
+        flex: 1;
+        padding: 5px 0;
+        font-size: 11px;
+        font-weight: 500;
+        text-align: center;
+        cursor: pointer;
+        background: var(--md-sys-color-surface-container, #f3edf7);
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        border: none;
+        border-right: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1));
+        transition: all 0.15s;
+      }
+
+      .mode-btn:last-child {
+        border-right: none;
+      }
+
+      .mode-btn:hover {
+        background: var(--md-sys-color-surface-container-highest, #e6e0e9);
+      }
+
+      .mode-btn[active] {
+        background: var(--md-sys-color-primary, #6750a4);
+        color: var(--md-sys-color-on-primary, #fff);
+      }
+
+      .anim-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+        max-height: 200px;
+        overflow-y: auto;
+        font-size: 12px;
+      }
+
+      .anim-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: background 0.1s;
+      }
+
+      .anim-item:hover {
+        background: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.12));
+      }
+
+      .anim-item input[type='checkbox'] {
+        margin: 0;
+        accent-color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .anim-item span {
+        flex: 1;
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+      }
+
+      .anim-item md-icon {
+        --md-icon-size: 18px;
+        cursor: pointer;
+        color: var(--md-sys-color-on-surface-variant, #666);
+        transition: color 0.15s;
+      }
+
+      .anim-item md-icon:hover {
+        color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .anim-item md-icon[playing] {
+        color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .mode-desc {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface-variant, #666);
+        padding: 4px 0;
+      }
+
+      .mini-btn {
+        font-size: 10px;
+        padding: 2px 8px;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));
+        border-radius: 4px;
+        background: var(--md-sys-color-surface-container, #f3edf7);
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        cursor: pointer;
+      }
+
+      .mini-btn:hover {
+        background: var(--md-sys-color-surface-container-highest, #e6e0e9);
+      }
+
+      .play-toggle {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 0;
+        margin-bottom: 4px;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+      }
+
+      .play-toggle input[type='checkbox'] {
+        accent-color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .empty {
+        color: var(--md-sys-color-on-surface-variant, #999);
+        font-size: 11px;
+        padding: 8px;
+        text-align: center;
+      }
+    `
+    ];
+    _component = null;
+    _lastExternalValue = undefined;
+    updated(changes) {
+        if (changes.has('src')) {
+            this.dispatchEvent(new CustomEvent('i-need-selected', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    callback: (selected) => {
+                        this._component = selected?.[0];
+                        this._refreshAnimNames();
+                    }
+                }
+            }));
+        }
+    }
+    _refreshAnimNames() {
+        if (!this._component) {
+            this._animNames = [];
+            return;
+        }
+        this._animNames = this._component.animationNames ?? [];
+    }
+    _pollTimer;
+    connectedCallback() {
+        super.connectedCallback();
+        // GLTF 비동기 로드 후 애니메이션 목록 갱신을 위한 폴링 (최대 20회 = 20초)
+        let retries = 0;
+        this._pollTimer = window.setInterval(() => {
+            if (!this._animNames?.length) {
+                this._refreshAnimNames();
+            }
+            if (this._animNames?.length || ++retries >= 20) {
+                clearInterval(this._pollTimer);
+                this._pollTimer = undefined;
+            }
+        }, 1000);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._pollTimer) {
+            clearInterval(this._pollTimer);
+        }
+    }
+    editorTemplate(value, _spec) {
+        if (!this._animNames?.length) {
+            this._refreshAnimNames();
+        }
+        if (value !== this._lastExternalValue) {
+            this._lastExternalValue = value;
+            this._mode = getMode(value);
+        }
+        const mode = this._mode;
+        const animCount = this._animNames?.length ?? 0;
+        const targets = Array.isArray(this.value) ? this.value : (Array.isArray(value) ? value : []);
+        const isPlaying = this._getPlayState();
+        return html `
+      <fieldset fullwidth>
+        ${animCount > 0
+            ? html `
+              <label class="play-toggle">
+                <input
+                  type="checkbox"
+                  .checked=${isPlaying}
+                  @change=${(e) => {
+                e.stopPropagation();
+                this._setPlay(e.target.checked);
+            }}
+                />
+                <span>Play</span>
+              </label>
+
+              <div class="mode-selector">
+                <div class="mode-btn" ?active=${mode === 'all'} @click=${() => this._setMode('all')}>All</div>
+                <div class="mode-btn" ?active=${mode === 'none'} @click=${() => this._setMode('none')}>None</div>
+                <div class="mode-btn" ?active=${mode === 'custom'} @click=${() => this._setMode('custom')}>Custom</div>
+              </div>
+
+              ${mode === 'all'
+                ? html `<div class="mode-desc">${animCount} animations — play all</div>`
+                : nothing}
+              ${mode === 'none'
+                ? html `<div class="mode-desc">No animations auto-play</div>`
+                : nothing}
+              ${mode === 'custom'
+                ? html `
+                    <div class="mode-desc">
+                      <span style="flex:1">${targets.length} / ${animCount} selected</span>
+                      <button class="mini-btn" @click=${() => this._applyValue([...(this._animNames ?? [])])}>All</button>
+                      <button class="mini-btn" @click=${() => this._applyValue([])}>Clear</button>
+                    </div>
+                  `
+                : nothing}
+
+              <div class="anim-list">
+                ${(this._animNames ?? []).map(name => html `
+                    <div class="anim-item">
+                      ${mode === 'custom'
+                ? html `
+                            <input
+                              type="checkbox"
+                              .checked=${targets.includes(name)}
+                              @change=${(e) => {
+                    e.stopPropagation();
+                    this._onToggle(name, e.target.checked, targets);
+                }}
+                            />
+                          `
+                : nothing}
+                      <span>${name}</span>
+                      <md-icon
+                        ?playing=${this._playingAnim === name}
+                        @click=${() => this._togglePreview(name)}
+                        title="preview"
+                      >${this._playingAnim === name ? 'stop' : 'play_arrow'}</md-icon>
+                    </div>
+                  `)}
+              </div>
+            `
+            : html `<div class="empty">No animations available</div>`}
+      </fieldset>
+    `;
+    }
+    _setMode(mode) {
+        const prevMode = this._mode;
+        this._mode = mode;
+        let newValue;
+        switch (mode) {
+            case 'all':
+                newValue = '*';
+                break;
+            case 'none':
+                newValue = 'none';
+                break;
+            case 'custom':
+                if (prevMode === 'all') {
+                    newValue = [...(this._animNames ?? [])];
+                }
+                else if (prevMode === 'none') {
+                    newValue = [];
+                }
+                else {
+                    newValue = Array.isArray(this.value) ? this.value : [];
+                }
+                break;
+        }
+        this._applyValue(newValue);
+    }
+    _onToggle(name, checked, current) {
+        const list = [...current];
+        if (checked) {
+            if (!list.includes(name))
+                list.push(name);
+        }
+        else {
+            const idx = list.indexOf(name);
+            if (idx >= 0)
+                list.splice(idx, 1);
+        }
+        this._applyValue(list);
+    }
+    _applyValue(newValue) {
+        this.value = newValue;
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    selected[0].set('playTargets', newValue);
+                }
+            }
+        }));
+    }
+    _getPlayState() {
+        return this._component?.state?.play !== false;
+    }
+    _setPlay(value) {
+        if (!this._component)
+            return;
+        this._component.set('play', value);
+        this.requestUpdate();
+    }
+    _togglePreview(name) {
+        if (!this._component)
+            return;
+        const ro = this._component.realObject;
+        if (!ro?._animationActions)
+            return;
+        const action = ro._animationActions.get(name);
+        if (!action)
+            return;
+        if (this._playingAnim === name) {
+            action.stop();
+            this._playingAnim = null;
+        }
+        else {
+            // 이전 프리뷰 중지
+            if (this._playingAnim) {
+                ro._animationActions.get(this._playingAnim)?.stop();
+            }
+            action.play();
+            this._playingAnim = name;
+        }
+        this._component.invalidate();
+        this.requestUpdate();
+    }
+};
+__decorate([
+    property({ type: String })
+], GLTFPlayTargetsEditor.prototype, "src", void 0);
+__decorate([
+    state()
+], GLTFPlayTargetsEditor.prototype, "_animNames", void 0);
+__decorate([
+    state()
+], GLTFPlayTargetsEditor.prototype, "_mode", void 0);
+__decorate([
+    state()
+], GLTFPlayTargetsEditor.prototype, "_playingAnim", void 0);
+GLTFPlayTargetsEditor = __decorate([
+    customElement('property-editor-gltf-play-targets')
+], GLTFPlayTargetsEditor);
+export default GLTFPlayTargetsEditor;
+//# sourceMappingURL=property-editor-gltf-play-targets.js.map

package/dist/editors/property-editor-gltf-play-targets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-gltf-play-targets.js","sourceRoot":"","sources":["../../src/editors/property-editor-gltf-play-targets.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * GLTF 애니메이션 타겟 선택 에디터.\n * All / None / Custom 모드로 started에 바인딩할 애니메이션 선택.\n * 각 애니메이션을 개별 미리보기(play/stop) 가능.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { ScrollbarStyles } from '@operato/styles/scrollbar-styles.js'\n\ntype AnimMode = 'all' | 'none' | 'custom'\n\nfunction getMode(value: any): AnimMode {\n  if (value === '*') return 'all'\n  if (value === 'none') return 'none'\n  if (Array.isArray(value) && value.length > 0) return 'custom'\n  if (Array.isArray(value)) return 'custom' // empty array = custom with nothing\n  if (!value) return 'all' // undefined = default = all\n  return 'all'\n}\n\n@customElement('property-editor-gltf-play-targets')\nexport default class GLTFPlayTargetsEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    ScrollbarStyles,\n    css`\n      .mode-selector {\n        display: flex;\n        gap: 0;\n        margin-bottom: 6px;\n        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));\n        border-radius: 6px;\n        overflow: hidden;\n      }\n\n      .mode-btn {\n        flex: 1;\n        padding: 5px 0;\n        font-size: 11px;\n        font-weight: 500;\n        text-align: center;\n        cursor: pointer;\n        background: var(--md-sys-color-surface-container, #f3edf7);\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n        border: none;\n        border-right: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1));\n        transition: all 0.15s;\n      }\n\n      .mode-btn:last-child {\n        border-right: none;\n      }\n\n      .mode-btn:hover {\n        background: var(--md-sys-color-surface-container-highest, #e6e0e9);\n      }\n\n      .mode-btn[active] {\n        background: var(--md-sys-color-primary, #6750a4);\n        color: var(--md-sys-color-on-primary, #fff);\n      }\n\n      .anim-list {\n        display: flex;\n        flex-direction: column;\n        gap: 1px;\n        max-height: 200px;\n        overflow-y: auto;\n        font-size: 12px;\n      }\n\n      .anim-item {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 4px 8px;\n        border-radius: 4px;\n        transition: background 0.1s;\n      }\n\n      .anim-item:hover {\n        background: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.12));\n      }\n\n      .anim-item input[type='checkbox'] {\n        margin: 0;\n        accent-color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .anim-item span {\n        flex: 1;\n        font-size: 12px;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n      }\n\n      .anim-item md-icon {\n        --md-icon-size: 18px;\n        cursor: pointer;\n        color: var(--md-sys-color-on-surface-variant, #666);\n        transition: color 0.15s;\n      }\n\n      .anim-item md-icon:hover {\n        color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .anim-item md-icon[playing] {\n        color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .mode-desc {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        font-size: 11px;\n        color: var(--md-sys-color-on-surface-variant, #666);\n        padding: 4px 0;\n      }\n\n      .mini-btn {\n        font-size: 10px;\n        padding: 2px 8px;\n        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));\n        border-radius: 4px;\n        background: var(--md-sys-color-surface-container, #f3edf7);\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n        cursor: pointer;\n      }\n\n      .mini-btn:hover {\n        background: var(--md-sys-color-surface-container-highest, #e6e0e9);\n      }\n\n      .play-toggle {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 4px 0;\n        margin-bottom: 4px;\n        cursor: pointer;\n        font-size: 12px;\n        font-weight: 500;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n      }\n\n      .play-toggle input[type='checkbox'] {\n        accent-color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .empty {\n        color: var(--md-sys-color-on-surface-variant, #999);\n        font-size: 11px;\n        padding: 8px;\n        text-align: center;\n      }\n    `\n  ]\n\n  @property({ type: String }) declare src: string | undefined\n\n  @state() declare private _animNames: string[]\n  @state() declare private _mode: AnimMode\n  @state() declare private _playingAnim: string | null\n\n  private _component: any = null\n  private _lastExternalValue: any = undefined\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('src')) {\n      this.dispatchEvent(\n        new CustomEvent('i-need-selected', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            callback: (selected: any[]) => {\n              this._component = selected?.[0]\n              this._refreshAnimNames()\n            }\n          }\n        })\n      )\n    }\n  }\n\n  private _refreshAnimNames() {\n    if (!this._component) {\n      this._animNames = []\n      return\n    }\n\n    this._animNames = (this._component.animationNames as string[]) ?? []\n  }\n\n  private _pollTimer?: number\n\n  connectedCallback() {\n    super.connectedCallback()\n    // GLTF 비동기 로드 후 애니메이션 목록 갱신을 위한 폴링 (최대 20회 = 20초)\n    let retries = 0\n    this._pollTimer = window.setInterval(() => {\n      if (!this._animNames?.length) {\n        this._refreshAnimNames()\n      }\n      if (this._animNames?.length || ++retries >= 20) {\n        clearInterval(this._pollTimer)\n        this._pollTimer = undefined\n      }\n    }, 1000)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this._pollTimer) {\n      clearInterval(this._pollTimer)\n    }\n  }\n\n  editorTemplate(value: any, _spec: PropertySpec): TemplateResult {\n    if (!this._animNames?.length) {\n      this._refreshAnimNames()\n    }\n\n    if (value !== this._lastExternalValue) {\n      this._lastExternalValue = value\n      this._mode = getMode(value)\n    }\n\n    const mode = this._mode\n    const animCount = this._animNames?.length ?? 0\n    const targets: string[] = Array.isArray(this.value) ? this.value : (Array.isArray(value) ? value : [])\n\n    const isPlaying = this._getPlayState()\n\n    return html`\n      <fieldset fullwidth>\n        ${animCount > 0\n          ? html`\n              <label class=\"play-toggle\">\n                <input\n                  type=\"checkbox\"\n                  .checked=${isPlaying}\n                  @change=${(e: Event) => {\n                    e.stopPropagation()\n                    this._setPlay((e.target as HTMLInputElement).checked)\n                  }}\n                />\n                <span>Play</span>\n              </label>\n\n              <div class=\"mode-selector\">\n                <div class=\"mode-btn\" ?active=${mode === 'all'} @click=${() => this._setMode('all')}>All</div>\n                <div class=\"mode-btn\" ?active=${mode === 'none'} @click=${() => this._setMode('none')}>None</div>\n                <div class=\"mode-btn\" ?active=${mode === 'custom'} @click=${() => this._setMode('custom')}>Custom</div>\n              </div>\n\n              ${mode === 'all'\n                ? html`<div class=\"mode-desc\">${animCount} animations — play all</div>`\n                : nothing}\n              ${mode === 'none'\n                ? html`<div class=\"mode-desc\">No animations auto-play</div>`\n                : nothing}\n              ${mode === 'custom'\n                ? html`\n                    <div class=\"mode-desc\">\n                      <span style=\"flex:1\">${targets.length} / ${animCount} selected</span>\n                      <button class=\"mini-btn\" @click=${() => this._applyValue([...(this._animNames ?? [])])}>All</button>\n                      <button class=\"mini-btn\" @click=${() => this._applyValue([])}>Clear</button>\n                    </div>\n                  `\n                : nothing}\n\n              <div class=\"anim-list\">\n                ${(this._animNames ?? []).map(\n                  name => html`\n                    <div class=\"anim-item\">\n                      ${mode === 'custom'\n                        ? html`\n                            <input\n                              type=\"checkbox\"\n                              .checked=${targets.includes(name)}\n                              @change=${(e: Event) => {\n                                e.stopPropagation()\n                                this._onToggle(name, (e.target as HTMLInputElement).checked, targets)\n                              }}\n                            />\n                          `\n                        : nothing}\n                      <span>${name}</span>\n                      <md-icon\n                        ?playing=${this._playingAnim === name}\n                        @click=${() => this._togglePreview(name)}\n                        title=\"preview\"\n                      >${this._playingAnim === name ? 'stop' : 'play_arrow'}</md-icon>\n                    </div>\n                  `\n                )}\n              </div>\n            `\n          : html`<div class=\"empty\">No animations available</div>`}\n      </fieldset>\n    `\n  }\n\n  private _setMode(mode: AnimMode) {\n    const prevMode = this._mode\n    this._mode = mode\n\n    let newValue: any\n    switch (mode) {\n      case 'all':\n        newValue = '*'\n        break\n      case 'none':\n        newValue = 'none'\n        break\n      case 'custom':\n        if (prevMode === 'all') {\n          newValue = [...(this._animNames ?? [])]\n        } else if (prevMode === 'none') {\n          newValue = []\n        } else {\n          newValue = Array.isArray(this.value) ? this.value : []\n        }\n        break\n    }\n\n    this._applyValue(newValue)\n  }\n\n  private _onToggle(name: string, checked: boolean, current: string[]) {\n    const list = [...current]\n    if (checked) {\n      if (!list.includes(name)) list.push(name)\n    } else {\n      const idx = list.indexOf(name)\n      if (idx >= 0) list.splice(idx, 1)\n    }\n    this._applyValue(list)\n  }\n\n  private _applyValue(newValue: any) {\n    this.value = newValue\n    this.requestUpdate()\n\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            selected[0].set('playTargets', newValue)\n          }\n        }\n      })\n    )\n  }\n\n  private _getPlayState(): boolean {\n    return this._component?.state?.play !== false\n  }\n\n  private _setPlay(value: boolean) {\n    if (!this._component) return\n    this._component.set('play', value)\n    this.requestUpdate()\n  }\n\n  private _togglePreview(name: string) {\n    if (!this._component) return\n\n    const ro = this._component.realObject as any\n    if (!ro?._animationActions) return\n\n    const action = ro._animationActions.get(name)\n    if (!action) return\n\n    if (this._playingAnim === name) {\n      action.stop()\n      this._playingAnim = null\n    } else {\n      // 이전 프리뷰 중지\n      if (this._playingAnim) {\n        ro._animationActions.get(this._playingAnim)?.stop()\n      }\n      action.play()\n      this._playingAnim = name\n    }\n\n    this._component.invalidate()\n    this.requestUpdate()\n  }\n}\n"]}

package/dist/editors/property-editor-location-increase-pattern.js

@@ -4,100 +4,9 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxPropertyEditor } from '@operato/property-editor';
 let LocationIncreasePatternEditor = class LocationIncreasePatternEditor extends OxPropertyEditor {
-    constructor() {
-        super(...arguments);
-        this.startSection = 1;
-        this.startUnit = 1;
-        this.skipNumbering = true;
-        this._specificPropEl = null;
-    }
-    editorTemplate(value, spec) {
-        // TODO: background image change to use the url-loader
-        return html `
-      <fieldset fullwidth>
-        <legend><ox-i18n msgid="label.location-increase-pattern">Increase Pattern</ox-i18n></legend>
-
-        <div class="property-grid">
-          <label> <ox-i18n msgid="label.start-section">Start Section</ox-i18n> </label>
-          <input
-            type="number"
-            data-start-section
-            value="${this.startSection}"
-            @change=${(e) => (this.startSection = e.target.valueAsNumber)}
-          />
-
-          <label> <ox-i18n msgid="label.start-unit">Start Unit</ox-i18n> </label>
-          <input
-            type="number"
-            data-start-unit
-            value="${this.startUnit}"
-            @change=${(e) => (this.startUnit = e.target.valueAsNumber)}
-          />
-
-          <div class="checkbox-row" fullwidth>
-            <input id="skip-numbering" type="checkbox" data-skip-numbering ?checked="${this.skipNumbering}" />
-            <label for="skip-numbering">
-              <ox-i18n msgid="label.skip-numbering">Skip Numbering</ox-i18n>
-            </label>
-          </div>
-
-          <div
-            id="pattern-set"
-            class="property-grid location-increase-pattern-btn"
-            @click=${(e) => this._onTapType(e)}
-          >
-            <button data-value="cw" type="button"></button>
-            <button data-value="ccw" type="button"></button>
-            <button data-value="zigzag" type="button"></button>
-            <button data-value="zigzag-reverse" type="button"></button>
-          </div>
-        </div>
-      </fieldset>
-    `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.property && this.property.event) {
-            Object.entries(this.property.event).forEach(entry => {
-                if (entry[0]) {
-                    document.addEventListener(entry[0], entry[1]);
-                }
-            });
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.property && this.property.event) {
-            Object.entries(this.property.event).forEach(entry => {
-                if (entry[0]) {
-                    document.removeEventListener(entry[0], entry[1]);
-                }
-            });
-        }
-    }
-    _onTapType(e) {
-        var _a;
-        var target = e.target;
-        const increasingDirection = (_a = target === null || target === void 0 ? void 0 : target.closest('[data-value]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-value');
-        if (!increasingDirection) {
-            return;
-        }
-        this.dispatchEvent(new CustomEvent('i-need-selected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                callback: (selected) => {
-                    const table = selected[0].parent;
-                    table.increaseLocation(increasingDirection, this.skipNumbering, this.startSection, this.startUnit);
-                }
-            }
-        }));
-        e.stopPropagation();
-    }
-};
-LocationIncreasePatternEditor.styles = [
-    ...OxPropertyEditor.styles,
-    css `
+    static styles = [
+        ...OxPropertyEditor.styles,
+        css `
       fieldset {
         border: none;
         border-bottom: 1px solid #cfd8dc;
@@ -250,7 +159,90 @@ LocationIncreasePatternEditor.styles = [
         text-align: left;
       }
     `
-];
+    ];
+    editorTemplate(value, spec) {
+        // TODO: background image change to use the url-loader
+        return html `
+      <fieldset fullwidth>
+        <legend><ox-i18n msgid="label.location-increase-pattern">Increase Pattern</ox-i18n></legend>
+
+        <div class="property-grid">
+          <label> <ox-i18n msgid="label.start-section">Start Section</ox-i18n> </label>
+          <input
+            type="number"
+            data-start-section
+            value="${this.startSection}"
+            @change=${(e) => (this.startSection = e.target.valueAsNumber)}
+          />
+
+          <label> <ox-i18n msgid="label.start-unit">Start Unit</ox-i18n> </label>
+          <input
+            type="number"
+            data-start-unit
+            value="${this.startUnit}"
+            @change=${(e) => (this.startUnit = e.target.valueAsNumber)}
+          />
+
+          <div class="checkbox-row" fullwidth>
+            <input id="skip-numbering" type="checkbox" data-skip-numbering ?checked="${this.skipNumbering}" />
+            <label for="skip-numbering">
+              <ox-i18n msgid="label.skip-numbering">Skip Numbering</ox-i18n>
+            </label>
+          </div>
+
+          <div
+            id="pattern-set"
+            class="property-grid location-increase-pattern-btn"
+            @click=${(e) => this._onTapType(e)}
+          >
+            <button data-value="cw" type="button"></button>
+            <button data-value="ccw" type="button"></button>
+            <button data-value="zigzag" type="button"></button>
+            <button data-value="zigzag-reverse" type="button"></button>
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.property && this.property.event) {
+            Object.entries(this.property.event).forEach(entry => {
+                if (entry[0]) {
+                    document.addEventListener(entry[0], entry[1]);
+                }
+            });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.property && this.property.event) {
+            Object.entries(this.property.event).forEach(entry => {
+                if (entry[0]) {
+                    document.removeEventListener(entry[0], entry[1]);
+                }
+            });
+        }
+    }
+    _onTapType(e) {
+        var target = e.target;
+        const increasingDirection = target?.closest('[data-value]')?.getAttribute('data-value');
+        if (!increasingDirection) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    const table = selected[0].parent;
+                    table.increaseLocation(increasingDirection, this.skipNumbering, this.startSection, this.startUnit);
+                }
+            }
+        }));
+        e.stopPropagation();
+    }
+};
 __decorate([
     property({ type: Number })
 ], LocationIncreasePatternEditor.prototype, "startSection", void 0);