@operato/board 9.0.0-beta.5 → 9.0.0-beta.51

package/dist/src/modeller/property-sidebar/effects/property-shadow.js

@@ -1,103 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import '@operato/i18n/ox-i18n.js';
-import '@operato/input/ox-input-color.js';
-import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { convert } from './value-converter.js';
-/**
- * 컴포넌트의 그림자 속성을 편집하는 element
- *
- * Example:
- *  <property-shadow
- *    @change="${e => { this.shadow = e.target.value }}"
- *    value="${this.shadow}"
- *  ></property-shadow>
- */
-export class PropertyShadow extends LitElement {
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
-    }
-    render() {
-        const value = this.value || {};
-        return html `
-      <label> <ox-i18n msgid="label.shadowOffsetX">offset-X</ox-i18n> </label>
-
-      <input type="number" value-key="left" .value=${value.left} />
-
-      <label> <ox-i18n msgid="label.shadowOffsetY">offset-Y</ox-i18n> </label>
-
-      <input type="number" value-key="top" .value=${value.top} />
-
-      <label> <ox-i18n msgid="label.shadowSize">Size</ox-i18n> </label>
-
-      <input type="number" value-key="blurSize" .value=${value.blurSize} />
-
-      <label class="icon-only-label color"></label>
-
-      <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
-    `;
-    }
-    _onValueChange(e) {
-        var element = e.target;
-        var key = element.getAttribute('value-key');
-        if (!key) {
-            return;
-        }
-        this.value = {
-            ...this.value,
-            [key]: convert(element)
-        };
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
-}
-PropertyShadow.styles = [
-    css `
-      :host {
-        display: grid;
-        grid-template-columns: repeat(10, 1fr);
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-
-        align-items: center;
-      }
-
-      * {
-        align-self: stretch;
-      }
-
-      label {
-        grid-column: span 3;
-        text-align: right;
-        text-transform: capitalize;
-
-        align-self: center;
-      }
-
-      input[type='number'],
-      ox-input-color {
-        grid-column: span 7;
-      }
-      input[type='number'] {
-        border: var(--property-sidebar-fieldset-border);
-      }
-
-      .icon-only-label {
-        grid-column: span 3;
-        background: var(--url-icon-properties-label) no-repeat;
-        float: left;
-        margin: 0;
-        align-self: stretch;
-      }
-
-      .icon-only-label.color {
-        background-position: 100% -500px;
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], PropertyShadow.prototype, "value", void 0);
-//# sourceMappingURL=property-shadow.js.map

package/dist/src/modeller/property-sidebar/effects/property-shadow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"property-shadow.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI5C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C;;;;;;;;GAQG;AAEH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAgD5C,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;qDAGsC,KAAK,CAAC,IAAI;;;;oDAIX,KAAK,CAAC,GAAG;;;;yDAIJ,KAAK,CAAC,QAAQ;;;;iDAItB,KAAK,CAAC,KAAK;KACvD,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAvFM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\n\nimport { convert } from './value-converter.js'\n\n/**\n * 컴포넌트의 그림자 속성을 편집하는 element\n *\n * Example:\n *  <property-shadow\n *    @change=\"${e => { this.shadow = e.target.value }}\"\n *    value=\"${this.shadow}\"\n *  ></property-shadow>\n */\n\nexport class PropertyShadow extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n\n        align-items: center;\n      }\n\n      * {\n        align-self: stretch;\n      }\n\n      label {\n        grid-column: span 3;\n        text-align: right;\n        text-transform: capitalize;\n\n        align-self: center;\n      }\n\n      input[type='number'],\n      ox-input-color {\n        grid-column: span 7;\n      }\n      input[type='number'] {\n        border: var(--property-sidebar-fieldset-border);\n      }\n\n      .icon-only-label {\n        grid-column: span 3;\n        background: var(--url-icon-properties-label) no-repeat;\n        float: left;\n        margin: 0;\n        align-self: stretch;\n      }\n\n      .icon-only-label.color {\n        background-position: 100% -500px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      <label> <ox-i18n msgid=\"label.shadowOffsetX\">offset-X</ox-i18n> </label>\n\n      <input type=\"number\" value-key=\"left\" .value=${value.left} />\n\n      <label> <ox-i18n msgid=\"label.shadowOffsetY\">offset-Y</ox-i18n> </label>\n\n      <input type=\"number\" value-key=\"top\" .value=${value.top} />\n\n      <label> <ox-i18n msgid=\"label.shadowSize\">Size</ox-i18n> </label>\n\n      <input type=\"number\" value-key=\"blurSize\" .value=${value.blurSize} />\n\n      <label class=\"icon-only-label color\"></label>\n\n      <ox-input-color value-key=\"color\" .value=${value.color}> </ox-input-color>\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/effects/value-converter.d.ts

@@ -1 +0,0 @@
-export declare function convert(element: any): any;

package/dist/src/modeller/property-sidebar/effects/value-converter.js

@@ -1,21 +0,0 @@
-export function convert(element) {
-    switch (element.tagName) {
-        case 'INPUT':
-            switch (element.type) {
-                case 'checkbox':
-                    return element.checked;
-                case 'number':
-                    return Number(element.value) || 0;
-                case 'text':
-                    return String(element.value);
-            }
-            break;
-        case 'PAPER-BUTTON':
-            return element.active;
-        case 'PAPER-LISTBOX':
-            return element.selected;
-        default:
-            return element.value;
-    }
-}
-//# sourceMappingURL=value-converter.js.map

package/dist/src/modeller/property-sidebar/effects/value-converter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"value-converter.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/value-converter.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,OAAO,CAAC,OAAY;IAClC,QAAQ,OAAO,CAAC,OAAO,EAAE,CAAC;QACxB,KAAK,OAAO;YACV,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;gBACrB,KAAK,UAAU;oBACb,OAAO,OAAO,CAAC,OAAO,CAAA;gBACxB,KAAK,QAAQ;oBACX,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;gBACnC,KAAK,MAAM;oBACT,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;YAChC,CAAC;YACD,MAAK;QAEP,KAAK,cAAc;YACjB,OAAO,OAAO,CAAC,MAAM,CAAA;QAEvB,KAAK,eAAe;YAClB,OAAO,OAAO,CAAC,QAAQ,CAAA;QAEzB;YACE,OAAO,OAAO,CAAC,KAAK,CAAA;IACxB,CAAC;AACH,CAAC","sourcesContent":["export function convert(element: any) {\n  switch (element.tagName) {\n    case 'INPUT':\n      switch (element.type) {\n        case 'checkbox':\n          return element.checked\n        case 'number':\n          return Number(element.value) || 0\n        case 'text':\n          return String(element.value)\n      }\n      break\n\n    case 'PAPER-BUTTON':\n      return element.active\n\n    case 'PAPER-LISTBOX':\n      return element.selected\n\n    default:\n      return element.value\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts

@@ -1,27 +0,0 @@
-import '@operato/input/ox-input-search.js';
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { Component, Scene } from '@hatiolab/things-scene';
-export declare class SceneInspector extends LitElement {
-    static styles: import("lit").CSSResult[];
-    scene?: Scene;
-    private searchText;
-    private _extendedMap;
-    private show;
-    private count;
-    disconnectScene(scene?: Scene): void;
-    disconnectedCallback(): void;
-    render(): TemplateResult<1>;
-    firstUpdated(): void;
-    refresh(): void;
-    updated(change: PropertyValues<this>): void;
-    _onclick(e: MouseEvent): void;
-    _ondblclick(e: MouseEvent): void;
-    get extendedMap(): any;
-    getNodeHandleClass(component: Component): "extended" | "collapsed" | "collapsespace";
-    isExtended(component: Component): boolean;
-    toggleExtended(component: Component): void;
-    toggleHidden(component: Component): void;
-    selectComponent(component: Component, append?: boolean): void;
-    shouldBeShown(component: Component, counting?: boolean): boolean;
-    renderComponent(component: Component, depth: number): TemplateResult;
-}

package/dist/src/modeller/property-sidebar/inspector/inspector.js

@@ -1,355 +0,0 @@
-import { __decorate } from "tslib";
-import '@operato/input/ox-input-search.js';
-import { css, html, LitElement } from 'lit';
-import { property, state } from 'lit/decorators.js';
-// TODO test Sortable
-// import Sortable from 'sortablejs'
-import { i18next } from '@operato/i18n';
-export class SceneInspector extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.searchText = '';
-        this.show = false;
-        this.count = -1;
-    }
-    disconnectScene(scene) {
-        if (scene) {
-            scene.off('selected', undefined, this);
-            scene.off('execute', undefined, this);
-            scene.off('undo', undefined, this);
-            scene.off('redo', undefined, this);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.disconnectScene(this.scene);
-        delete this._extendedMap;
-    }
-    render() {
-        this.count = 0;
-        return html `
-      <ox-input-search
-        .placeholder=${i18next.t('text.search with type, id or tag')}
-        autofocus
-        @change=${(e) => (this.searchText = (e.target.value || '').toLowerCase())}
-      ></ox-input-search>
-
-      <div result>${!this.scene ? html `` : this.renderComponent(this.scene.root, 0)}</div>
-    `;
-    }
-    firstUpdated() {
-        dispatchEvent(new Event('resize'));
-        this.renderRoot.addEventListener('click', this._onclick.bind(this));
-        this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this));
-    }
-    refresh() {
-        var _a;
-        let selected = ((_a = this.scene) === null || _a === void 0 ? void 0 : _a.selected) || [];
-        selected.forEach(component => {
-            let parent = component.parent;
-            while (parent && !this.extendedMap.get(parent)) {
-                this.extendedMap.set(parent, true);
-                parent = parent.parent;
-            }
-        });
-        this.requestUpdate();
-    }
-    updated(change) {
-        if (change.has('scene')) {
-            let oldScene = change.get('scene');
-            if (oldScene) {
-                this.disconnectScene(oldScene);
-                delete this._extendedMap;
-            }
-            if (this.scene && this.scene.root) {
-                this.scene.on('selected', this.refresh, this);
-                this.scene.on('execute', this.refresh, this);
-                this.scene.on('undo', this.refresh, this);
-                this.scene.on('redo', this.refresh, this);
-                this.refresh();
-            }
-        }
-        // TODO test Sortable
-        // this.updateComplete.then(() => {
-        //   this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {
-        //     new Sortable(sortable as HTMLElement, this.sortableConfig)
-        //   })
-        // })
-    }
-    // TODO test Sortable
-    // sortableConfig: Sortable.Options = {
-    //   group: 'inspector',
-    //   animation: 150,
-    //   draggable: '.component',
-    //   swapThreshold: 1,
-    //   onSort: this.onSort.bind(this)
-    // }
-    // TODO test Sortable
-    // onSort(e: Sortable.SortableEvent) {
-    //   if (!this.scene) return
-    //   var component = (e.item as HTMLElement & { component: Component }).component
-    //   var to_container = (e.to as HTMLElement & { component: Component }).component as Container
-    //   var to_index = e.newIndex! - 1
-    //   this.scene.move(component, to_container, to_index)
-    //   this.show = false
-    //   this.updateComplete.then(() => {
-    //     this.show = true
-    //   })
-    // }
-    _onclick(e) {
-        e.stopPropagation();
-        var targetElement = e.target;
-        var classList = targetElement.classList;
-        var component;
-        while (!component && targetElement) {
-            component = targetElement.component;
-            if (component)
-                break;
-            targetElement = targetElement.parentNode;
-            if (!targetElement || targetElement === this.renderRoot)
-                break;
-        }
-        if (component) {
-            if (classList.contains('eye')) {
-                this.toggleHidden(component);
-            }
-            else if (classList.contains('extended') || classList.contains('collapsed')) {
-                this.toggleExtended(component);
-            }
-            this.selectComponent(component, e.shiftKey);
-        }
-        else {
-            if (classList.contains('inspector')) {
-                this.show = !this.show;
-                this.style.height = this.show ? '100%' : '';
-            }
-        }
-        this.requestUpdate();
-    }
-    _ondblclick(e) {
-        e.stopPropagation();
-        var targetElement = e.target;
-        var component;
-        while (!component && targetElement) {
-            component = targetElement.component;
-            if (component)
-                break;
-            targetElement = targetElement.parentNode;
-            if (!targetElement || targetElement === this.renderRoot)
-                break;
-        }
-        if (component && component.isContainer()) {
-            this.toggleExtended(component);
-        }
-        this.requestUpdate();
-    }
-    get extendedMap() {
-        if (!this._extendedMap) {
-            this._extendedMap = new WeakMap();
-        }
-        return this._extendedMap;
-    }
-    getNodeHandleClass(component) {
-        if (component.isContainer() && component.components.length > 0) {
-            return !!this.extendedMap.get(component) ? 'extended' : 'collapsed';
-        }
-        else {
-            return 'collapsespace';
-        }
-    }
-    isExtended(component) {
-        return !!this.extendedMap.get(component);
-    }
-    toggleExtended(component) {
-        var extended = this.isExtended(component);
-        if (extended) {
-            this.extendedMap.delete(component);
-        }
-        else {
-            this.extendedMap.set(component, !extended);
-        }
-        this.requestUpdate();
-    }
-    toggleHidden(component) {
-        component.set('hidden', !component.hidden);
-        this.requestUpdate();
-    }
-    selectComponent(component, append = false) {
-        const selected = this.scene.selected;
-        if (append) {
-            const idx = selected.findIndex(s => s === component);
-            if (idx != -1) {
-                selected.splice(idx, 1);
-                this.scene.selected = [...selected];
-            }
-            else {
-                this.scene.selected = [...selected, component];
-            }
-        }
-        else {
-            this.scene.selected = [component];
-        }
-        component.trigger('reactionreset');
-        component.trigger('reaction');
-        this.requestUpdate();
-    }
-    shouldBeShown(component, counting = false) {
-        const { type, name, id, tag } = component.state;
-        const found = !this.searchText || `${type} ${name || ''} ${id || ''} ${tag || ''}`.toLowerCase().search(this.searchText) > -1;
-        if (counting && found) {
-            this.count++;
-        }
-        const foundChildren = (component.components || []).filter((child) => this.shouldBeShown(child, counting)).length;
-        return !!(found || foundChildren > 0);
-    }
-    renderComponent(component, depth) {
-        var _a;
-        if (!component) {
-            return html ``;
-        }
-        if (!this.shouldBeShown(component, depth == 0)) {
-            return html ``;
-        }
-        const children = (component.isContainer() && component.components) || [];
-        const extended = this.isExtended(component) ? children.filter(child => this.shouldBeShown(child)) : [];
-        const { type, id, tag, class: clazz } = component.state;
-        const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '');
-        return html `
-      <div
-        class="component"
-        ?selected=${(((_a = this.scene) === null || _a === void 0 ? void 0 : _a.selected) || []).indexOf(component) > -1}
-        .component=${component}
-        ?sortable=${component.isContainer()}
-      >
-        <span>
-          ${depth > 0
-            ? html `
-                <md-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</md-icon>
-                <pre>${' '.repeat(depth)}</pre>
-              `
-            : html ` <pre>${' '.repeat(depth + 2)}</pre> `}
-
-          <span class=${this.getNodeHandleClass(component)}> </span>
-
-          <span class="type">${depth == 0 ? html `ROOT(count: ${this.count})` : type}</span>
-          ${name ? html ` <span class="name">${name}</span> ` : html ``}
-        </span>
-
-        ${extended.map(child => this.renderComponent(child, depth + 1))}
-      </div>
-    `;
-    }
-}
-SceneInspector.styles = [
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        color: var(--scene-inspector-color);
-      }
-
-      ox-input-search {
-        --input-search-padding: 3px;
-        --input-search-focus-border-bottom: none;
-        --input-search-font: normal 16px var(--theme-font);
-
-        border-radius: 999px;
-        box-sizing: border-box;
-        border: 1px solid var(--md-sys-color-on-secondary-container);
-        padding: 0 10px;
-        margin: 5px;
-      }
-
-      div[result] {
-        flex: 1;
-
-        display: flex;
-        flex-direction: column;
-
-        overflow-y: auto;
-      }
-
-      .component {
-        display: block;
-        overflow: hidden;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-        font-size: 14px;
-      }
-
-      .component[selected] {
-        background-color: var(--scene-inspector-selected-background-color);
-        border-top: var(--scene-inspector-selected-border);
-        border-bottom: var(--scene-inspector-selected-border);
-      }
-      [selected] .type {
-        font-weight: bold;
-      }
-
-      span,
-      i {
-        display: inline-block;
-      }
-
-      span.type {
-        text-overflow: ellipses;
-      }
-
-      span.name {
-        background-color: var(--scene-inspector-name-background-color);
-        border-radius: var(--border-radius);
-        padding: 0 4px;
-        color: #fff;
-        font-size: 0.8em;
-      }
-
-      .eye {
-        margin: 0 0 0 5px;
-        vertical-align: middle;
-        opacity: 0.7;
-        font-size: 1.1em;
-        color: var(--scene-inspector-eye-icon-color);
-      }
-
-      .collapsed::before,
-      .extended::before,
-      .collapsespace::before {
-        background: var(--url-icon-shell-inspector) no-repeat;
-        width: 16px;
-        height: 18px;
-        display: inline-block;
-        content: '';
-        opacity: 0.6;
-      }
-
-      .collapsed::before {
-        background-position: 100% -195px;
-      }
-
-      .extended::before {
-        background-position: 100% -295px;
-      }
-
-      .collapsespace::before {
-        background-position: 100% -395px;
-        opacity: 0.9;
-        width: 16px;
-      }
-      .collapsed,
-      .extended,
-      .collapsespace {
-        border-left: 1px dotted rgba(0, 0, 0, 0.1);
-      }
-
-      pre {
-        display: inline;
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], SceneInspector.prototype, "scene", void 0);
-__decorate([
-    state()
-], SceneInspector.prototype, "searchText", void 0);
-//# sourceMappingURL=inspector.js.map

package/dist/src/modeller/property-sidebar/inspector/inspector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/inspector/inspector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\n// TODO test Sortable\n// import Sortable from 'sortablejs'\nimport { i18next } from '@operato/i18n'\n\nimport { Component, Container, Scene } from '@hatiolab/things-scene'\n\nexport class SceneInspector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        color: var(--scene-inspector-color);\n      }\n\n      ox-input-search {\n        --input-search-padding: 3px;\n        --input-search-focus-border-bottom: none;\n        --input-search-font: normal 16px var(--theme-font);\n\n        border-radius: 999px;\n        box-sizing: border-box;\n        border: 1px solid var(--md-sys-color-on-secondary-container);\n        padding: 0 10px;\n        margin: 5px;\n      }\n\n      div[result] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n\n        overflow-y: auto;\n      }\n\n      .component {\n        display: block;\n        overflow: hidden;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        font-size: 14px;\n      }\n\n      .component[selected] {\n        background-color: var(--scene-inspector-selected-background-color);\n        border-top: var(--scene-inspector-selected-border);\n        border-bottom: var(--scene-inspector-selected-border);\n      }\n      [selected] .type {\n        font-weight: bold;\n      }\n\n      span,\n      i {\n        display: inline-block;\n      }\n\n      span.type {\n        text-overflow: ellipses;\n      }\n\n      span.name {\n        background-color: var(--scene-inspector-name-background-color);\n        border-radius: var(--border-radius);\n        padding: 0 4px;\n        color: #fff;\n        font-size: 0.8em;\n      }\n\n      .eye {\n        margin: 0 0 0 5px;\n        vertical-align: middle;\n        opacity: 0.7;\n        font-size: 1.1em;\n        color: var(--scene-inspector-eye-icon-color);\n      }\n\n      .collapsed::before,\n      .extended::before,\n      .collapsespace::before {\n        background: var(--url-icon-shell-inspector) no-repeat;\n        width: 16px;\n        height: 18px;\n        display: inline-block;\n        content: '';\n        opacity: 0.6;\n      }\n\n      .collapsed::before {\n        background-position: 100% -195px;\n      }\n\n      .extended::before {\n        background-position: 100% -295px;\n      }\n\n      .collapsespace::before {\n        background-position: 100% -395px;\n        opacity: 0.9;\n        width: 16px;\n      }\n      .collapsed,\n      .extended,\n      .collapsespace {\n        border-left: 1px dotted rgba(0, 0, 0, 0.1);\n      }\n\n      pre {\n        display: inline;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene?: Scene\n\n  @state() private searchText: string = ''\n\n  private _extendedMap: any\n  private show: boolean = false\n  private count: number = -1\n\n  disconnectScene(scene?: Scene) {\n    if (scene) {\n      scene.off('selected', undefined, this)\n      scene.off('execute', undefined, this)\n      scene.off('undo', undefined, this)\n      scene.off('redo', undefined, this)\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.disconnectScene(this.scene)\n    delete this._extendedMap\n  }\n\n  render() {\n    this.count = 0\n\n    return html`\n      <ox-input-search\n        .placeholder=${i18next.t('text.search with type, id or tag')}\n        autofocus\n        @change=${(e: Event) => (this.searchText = ((e.target as HTMLInputElement).value || '').toLowerCase())}\n      ></ox-input-search>\n\n      <div result>${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)}</div>\n    `\n  }\n\n  firstUpdated() {\n    dispatchEvent(new Event('resize'))\n\n    this.renderRoot.addEventListener('click', this._onclick.bind(this) as EventListener)\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this) as EventListener)\n  }\n\n  refresh() {\n    let selected = this.scene?.selected || []\n\n    selected.forEach(component => {\n      let parent = component.parent\n      while (parent && !this.extendedMap.get(parent)) {\n        this.extendedMap.set(parent, true)\n        parent = parent.parent\n      }\n    })\n\n    this.requestUpdate()\n  }\n\n  updated(change: PropertyValues<this>) {\n    if (change.has('scene')) {\n      let oldScene = change.get('scene') as Scene\n\n      if (oldScene) {\n        this.disconnectScene(oldScene)\n        delete this._extendedMap\n      }\n\n      if (this.scene && this.scene.root) {\n        this.scene.on('selected', this.refresh, this)\n        this.scene.on('execute', this.refresh, this)\n        this.scene.on('undo', this.refresh, this)\n        this.scene.on('redo', this.refresh, this)\n\n        this.refresh()\n      }\n    }\n\n    // TODO test Sortable\n    // this.updateComplete.then(() => {\n    //   this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {\n    //     new Sortable(sortable as HTMLElement, this.sortableConfig)\n    //   })\n    // })\n  }\n\n  // TODO test Sortable\n  // sortableConfig: Sortable.Options = {\n  //   group: 'inspector',\n  //   animation: 150,\n  //   draggable: '.component',\n  //   swapThreshold: 1,\n  //   onSort: this.onSort.bind(this)\n  // }\n\n  // TODO test Sortable\n  // onSort(e: Sortable.SortableEvent) {\n  //   if (!this.scene) return\n\n  //   var component = (e.item as HTMLElement & { component: Component }).component\n  //   var to_container = (e.to as HTMLElement & { component: Component }).component as Container\n  //   var to_index = e.newIndex! - 1\n\n  //   this.scene.move(component, to_container, to_index)\n\n  //   this.show = false\n  //   this.updateComplete.then(() => {\n  //     this.show = true\n  //   })\n  // }\n\n  _onclick(e: MouseEvent) {\n    e.stopPropagation()\n\n    var targetElement = e.target as HTMLElement & { component: Component }\n    var classList = targetElement.classList\n    var component\n\n    while (!component && targetElement) {\n      component = targetElement.component\n\n      if (component) break\n\n      targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n      if (!targetElement || targetElement === this.renderRoot) break\n    }\n\n    if (component) {\n      if (classList.contains('eye')) {\n        this.toggleHidden(component)\n      } else if (classList.contains('extended') || classList.contains('collapsed')) {\n        this.toggleExtended(component)\n      }\n\n      this.selectComponent(component, e.shiftKey)\n    } else {\n      if (classList.contains('inspector')) {\n        this.show = !this.show\n        this.style.height = this.show ? '100%' : ''\n      }\n    }\n\n    this.requestUpdate()\n  }\n\n  _ondblclick(e: MouseEvent) {\n    e.stopPropagation()\n\n    var targetElement = e.target as HTMLElement & { component: Component }\n    var component\n\n    while (!component && targetElement) {\n      component = targetElement.component\n\n      if (component) break\n\n      targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n      if (!targetElement || targetElement === this.renderRoot) break\n    }\n\n    if (component && component.isContainer()) {\n      this.toggleExtended(component)\n    }\n\n    this.requestUpdate()\n  }\n\n  get extendedMap() {\n    if (!this._extendedMap) {\n      this._extendedMap = new WeakMap()\n    }\n\n    return this._extendedMap\n  }\n\n  getNodeHandleClass(component: Component) {\n    if (component.isContainer() && (component as Container).components.length > 0) {\n      return !!this.extendedMap.get(component) ? 'extended' : 'collapsed'\n    } else {\n      return 'collapsespace'\n    }\n  }\n\n  isExtended(component: Component) {\n    return !!this.extendedMap.get(component)\n  }\n\n  toggleExtended(component: Component) {\n    var extended = this.isExtended(component)\n\n    if (extended) {\n      this.extendedMap.delete(component)\n    } else {\n      this.extendedMap.set(component, !extended)\n    }\n\n    this.requestUpdate()\n  }\n\n  toggleHidden(component: Component) {\n    component.set('hidden', !component.hidden)\n\n    this.requestUpdate()\n  }\n\n  selectComponent(component: Component, append: boolean = false) {\n    const selected = this.scene!.selected\n\n    if (append) {\n      const idx = selected.findIndex(s => s === component)\n      if (idx != -1) {\n        selected.splice(idx, 1)\n        this.scene!.selected = [...selected]\n      } else {\n        this.scene!.selected = [...selected, component]\n      }\n    } else {\n      this.scene!.selected = [component]\n    }\n\n    component.trigger('reactionreset')\n    component.trigger('reaction')\n\n    this.requestUpdate()\n  }\n\n  shouldBeShown(component: Component, counting: boolean = false): boolean {\n    const { type, name, id, tag } = component.state\n    const found =\n      !this.searchText || `${type} ${name || ''} ${id || ''} ${tag || ''}`.toLowerCase().search(this.searchText) > -1\n\n    if (counting && found) {\n      this.count++\n    }\n\n    const foundChildren = ((component as Container).components || []).filter((child: Component) =>\n      this.shouldBeShown(child, counting)\n    ).length\n\n    return !!(found || foundChildren > 0)\n  }\n\n  renderComponent(component: Component, depth: number): TemplateResult {\n    if (!component) {\n      return html``\n    }\n\n    if (!this.shouldBeShown(component, depth == 0)) {\n      return html``\n    }\n\n    const children = (component.isContainer() && (component as Container).components) || []\n    const extended = this.isExtended(component) ? children.filter(child => this.shouldBeShown(child)) : []\n    const { type, id, tag, class: clazz } = component.state\n\n    const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '')\n\n    return html`\n      <div\n        class=\"component\"\n        ?selected=${(this.scene?.selected || []).indexOf(component) > -1}\n        .component=${component}\n        ?sortable=${component.isContainer()}\n      >\n        <span>\n          ${depth > 0\n            ? html`\n                <md-icon class=\"eye\">${component.get('hidden') ? 'visibility_off' : 'visibility'}</md-icon>\n                <pre>${' '.repeat(depth)}</pre>\n              `\n            : html` <pre>${' '.repeat(depth + 2)}</pre> `}\n\n          <span class=${this.getNodeHandleClass(component)}> </span>\n\n          <span class=\"type\">${depth == 0 ? html`ROOT(count: ${this.count})` : type}</span>\n          ${name ? html` <span class=\"name\">${name}</span> ` : html``}\n        </span>\n\n        ${extended.map(child => this.renderComponent(child, depth + 1))}\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/property-shared-style.d.ts

@@ -1,4 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-export declare const PropertySharedStyle: import("lit").CSSResult;