@operato/board 0.2.42 → 0.2.46

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

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@things-factory/i18n-base';
+import '@things-factory/modeller-ui/client/editors/things-editor-color';
+import { LitElement } from 'lit';
+import { Properties } from '@hatiolab/things-scene';
+/**
+ * 컴포넌트의 그림자 속성을 편집하는 element
+ *
+ * Example:
+ *  <property-shadow
+ *    @change="${e => { this.shadow = e.target.value }}"
+ *    value="${this.shadow}"
+ *  ></property-shadow>
+ */
+export default class PropertyShadow extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: Properties;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _onValueChange(e: Event): void;
+}

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

@@ -0,0 +1,110 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@things-factory/i18n-base';
+import '@things-factory/modeller-ui/client/editors/things-editor-color';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { convert } from './value-converter';
+/**
+ * 컴포넌트의 그림자 속성을 편집하는 element
+ *
+ * Example:
+ *  <property-shadow
+ *    @change="${e => { this.shadow = e.target.value }}"
+ *    value="${this.shadow}"
+ *  ></property-shadow>
+ */
+let PropertyShadow = class PropertyShadow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    render() {
+        return html `
+      <label> <i18n-msg msgid="label.shadowOffsetX">offset-X</i18n-msg> </label>
+
+      <input type="number" value-key="left" .value=${this.value.left} />
+
+      <label> <i18n-msg msgid="label.shadowOffsetY">offset-Y</i18n-msg> </label>
+
+      <input type="number" value-key="top" .value=${this.value.top} />
+
+      <label> <i18n-msg msgid="label.shadowSize">Size</i18n-msg> </label>
+
+      <input type="number" value-key="blurSize" .value=${this.value.blurSize} />
+
+      <label class="icon-only-label color"></label>
+
+      <things-editor-color value-key="color" .value=${this.value.color}> </things-editor-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'],
+      things-editor-color {
+        grid-column: span 7;
+      }
+      input[type='number'] {
+        border: var(--property-sidebar-fieldset-border);
+      }
+
+      .icon-only-label {
+        grid-column: span 3;
+        background: url(/assets/images/icon-properties-label.png) 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);
+PropertyShadow = __decorate([
+    customElement('property-shadow')
+], PropertyShadow);
+export default PropertyShadow;
+//# sourceMappingURL=property-shadow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-shadow.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,2BAA2B,CAAA;AAClC,OAAO,gEAAgE,CAAA;AAEvE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGxD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAE3C;;;;;;;;GAQG;AAGH,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IAAtD;;QA8C8B,UAAK,GAAe,EAAE,CAAA;IAyCpD,CAAC;IAvCC,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,OAAO,IAAI,CAAA;;;qDAGsC,IAAI,CAAC,KAAK,CAAC,IAAI;;;;oDAIhB,IAAI,CAAC,KAAK,CAAC,GAAG;;;;yDAIT,IAAI,CAAC,KAAK,CAAC,QAAQ;;;;sDAItB,IAAI,CAAC,KAAK,CAAC,KAAK;KACjE,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;YACR,OAAM;SACP;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;CACF,CAAA;AAtFQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAuB;AA9C/B,cAAc;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACZ,cAAc,CAuFlC;eAvFoB,cAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport { convert } from './value-converter'\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\n@customElement('property-shadow')\nexport default 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      things-editor-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: url(/assets/images/icon-properties-label.png) 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    return html`\n      <label> <i18n-msg msgid=\"label.shadowOffsetX\">offset-X</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"left\" .value=${this.value.left} />\n\n      <label> <i18n-msg msgid=\"label.shadowOffsetY\">offset-Y</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"top\" .value=${this.value.top} />\n\n      <label> <i18n-msg msgid=\"label.shadowSize\">Size</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"blurSize\" .value=${this.value.blurSize} />\n\n      <label class=\"icon-only-label color\"></label>\n\n      <things-editor-color value-key=\"color\" .value=${this.value.color}> </things-editor-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

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

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

@@ -0,0 +1,23 @@
+export function convert(element) {
+    switch (element.tagName) {
+        case 'THINGS-EDITOR-ANGLE-INPUT':
+            return Number(element.radian) || 0;
+        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

@@ -0,0 +1 @@
+{"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;QACvB,KAAK,2BAA2B;YAC9B,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QAEpC,KAAK,OAAO;YACV,QAAQ,OAAO,CAAC,IAAI,EAAE;gBACpB,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;aAC/B;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;KACvB;AACH,CAAC","sourcesContent":["export function convert(element: any) {\n  switch (element.tagName) {\n    case 'THINGS-EDITOR-ANGLE-INPUT':\n      return Number(element.radian) || 0\n\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

@@ -0,0 +1,24 @@
+import { Component, Scene } from '@hatiolab/things-scene';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import Sortable from 'sortablejs';
+export default class SceneInspector extends LitElement {
+    static styles: import("lit").CSSResult[];
+    scene?: Scene;
+    private _extendedMap;
+    private show;
+    render(): TemplateResult<1>;
+    firstUpdated(): void;
+    updated(change: PropertyValues<this>): void;
+    sortableConfig: Sortable.Options;
+    onSort(e: Sortable.SortableEvent): void;
+    disconnectedCallback(): 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): void;
+    renderComponent(component: Component, depth: number): TemplateResult;
+}

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

@@ -0,0 +1,290 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import Sortable from 'sortablejs';
+let SceneInspector = class SceneInspector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.show = false;
+        this.sortableConfig = {
+            group: 'inspector',
+            animation: 150,
+            draggable: '.component',
+            swapThreshold: 1,
+            onSort: this.onSort.bind(this)
+        };
+    }
+    render() {
+        return html ` ${!this.scene ? html `` : this.renderComponent(this.scene.root, 0)} `;
+    }
+    firstUpdated() {
+        dispatchEvent(new Event('resize'));
+        this.renderRoot.addEventListener('click', this._onclick.bind(this));
+        this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this));
+    }
+    updated(change) {
+        if (change.has('scene')) {
+            let oldScene = change.get('scene');
+            if (oldScene) {
+                oldScene.off('selected');
+                oldScene.off('execute');
+                oldScene.off('undo');
+                oldScene.off('redo');
+                delete this._extendedMap;
+            }
+            if (this.scene && this.scene.root) {
+                // root 는 기본상태가 extended 되도록 하기위해서임.
+                this.extendedMap.set(this.scene.root, true);
+                this.scene.on('selected', (after, before) => {
+                    let selected = after;
+                    selected.forEach(component => {
+                        let parent = component.parent;
+                        while (parent && !this.extendedMap.get(parent)) {
+                            this.extendedMap.set(parent, true);
+                            parent = parent.parent;
+                        }
+                    });
+                    this.requestUpdate();
+                });
+                this.scene.on('execute', () => {
+                    this.requestUpdate();
+                });
+                this.scene.on('undo', () => {
+                    this.extendedMap.set(this.scene.root, true);
+                    this.requestUpdate();
+                });
+                this.scene.on('redo', () => {
+                    this.extendedMap.set(this.scene.root, true);
+                    this.requestUpdate();
+                });
+            }
+        }
+        this.updateComplete.then(() => {
+            this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {
+                new Sortable(sortable, this.sortableConfig);
+            });
+        });
+    }
+    onSort(e) {
+        if (!this.scene)
+            return;
+        var component = e.item.component;
+        var to_container = e.to.component;
+        var to_index = e.newIndex - 1;
+        this.scene.move(component, to_container, to_index);
+        this.show = false;
+        this.updateComplete.then(() => {
+            this.show = true;
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        delete this.scene;
+        delete this._extendedMap;
+    }
+    _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);
+        }
+        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) {
+        this.scene.selected = [component];
+        this.requestUpdate();
+    }
+    renderComponent(component, depth) {
+        var _a;
+        if (!component) {
+            return html ``;
+        }
+        var children = (component.isContainer() && component.components) || [];
+        var extended = this.isExtended(component) ? children : [];
+        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 `
+                <mwc-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>
+                <pre>${' '.repeat(depth)}</pre>
+              `
+            : html ` <pre>${' '.repeat(depth + 2)}</pre> `}
+
+          <span class=${this.getNodeHandleClass(component)}> </span>
+
+          <span class="type">${depth == 0 ? 'ROOT' : component.get('type')}</span> ${component.get('id')
+            ? html ` <span class="name">#${component.get('id')}</span> `
+            : html ``}
+        </span>
+
+        ${extended.map(child => this.renderComponent(child, depth + 1))}
+      </div>
+    `;
+    }
+};
+SceneInspector.styles = [
+    css `
+      :host {
+        color: var(--scene-inspector-color);
+      }
+
+      .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: url(/assets/images/icon-shell-inspector.png) 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);
+SceneInspector = __decorate([
+    customElement('scene-inspector')
+], SceneInspector);
+export default SceneInspector;
+//# sourceMappingURL=inspector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/inspector/inspector.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Container, Properties, Scene } from '@hatiolab/things-scene'\nimport { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport Sortable from 'sortablejs'\n\n@customElement('scene-inspector')\nexport default class SceneInspector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        color: var(--scene-inspector-color);\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: url(/assets/images/icon-shell-inspector.png) 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  private _extendedMap: any\n  private show: boolean = false\n\n  render() {\n    return html` ${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)} `\n  }\n\n  firstUpdated() {\n    dispatchEvent(new Event('resize'))\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  updated(change: PropertyValues<this>) {\n    if (change.has('scene')) {\n      let oldScene = change.get('scene') as Scene\n\n      if (oldScene) {\n        oldScene.off('selected')\n        oldScene.off('execute')\n        oldScene.off('undo')\n        oldScene.off('redo')\n\n        delete this._extendedMap\n      }\n\n      if (this.scene && this.scene.root) {\n        // root 는 기본상태가 extended 되도록 하기위해서임.\n        this.extendedMap.set(this.scene.root, true)\n\n        this.scene.on('selected', (after: Component[], before: Component[]) => {\n          let selected = after\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        this.scene.on('execute', () => {\n          this.requestUpdate()\n        })\n\n        this.scene.on('undo', () => {\n          this.extendedMap.set(this.scene!.root, true)\n          this.requestUpdate()\n        })\n\n        this.scene.on('redo', () => {\n          this.extendedMap.set(this.scene!.root, true)\n          this.requestUpdate()\n        })\n      }\n    }\n\n    this.updateComplete.then(() => {\n      this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {\n        new Sortable(sortable as HTMLElement, this.sortableConfig)\n      })\n    })\n  }\n\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  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  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    delete this.scene\n    delete this._extendedMap\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)\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) {\n    this.scene!.selected = [component]\n\n    this.requestUpdate()\n  }\n\n  renderComponent(component: Component, depth: number): TemplateResult {\n    if (!component) {\n      return html``\n    }\n\n    var children = (component.isContainer() && (component as Container).components) || []\n    var extended = this.isExtended(component) ? children : []\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                <mwc-icon class=\"eye\">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-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 ? 'ROOT' : component.get('type')}</span> ${component.get('id')\n            ? html` <span class=\"name\">#${component.get('id')}</span> `\n            : 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

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

package/dist/src/modeller/property-sidebar/property-shared-style.js

@@ -0,0 +1,131 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { css } from 'lit';
+export const PropertySharedStyle = css `
+  fieldset {
+    border: none;
+    margin: 4px;
+    padding: 9px 4px 9px 4px;
+    border-bottom: var(--property-sidebar-fieldset-border);
+    color: var(--property-sidebar-fieldset-legend-color);
+    font: var(--property-sidebar-fieldset-label);
+  }
+
+  fieldset legend {
+    padding: 5px 0 0 5px;
+    color: var(--property-sidebar-fieldset-legend-color);
+    font: var(--property-sidebar-fieldset-legend);
+    text-transform: capitalize;
+  }
+
+  select,
+  input {
+    border: var(--property-sidebar-fieldset-border);
+  }
+
+  /* property grid */
+  .property-grid {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-gap: 5px;
+    grid-auto-rows: minmax(24px, auto);
+    align-items: center;
+  }
+
+  .property-grid > * {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .property-grid > label {
+    grid-column: span 3;
+    text-align: right;
+    text-transform: capitalize;
+    line-height: 2;
+  }
+
+  .property-grid > input,
+  .property-grid > table,
+  .property-grid > select,
+  .property-grid > things-editor-angle-input,
+  .property-grid > things-editor-buttons-radio,
+  .property-grid > things-editor-color,
+  [custom-editor] {
+    grid-column: span 7;
+    align-self: stretch;
+  }
+
+  .property-grid > .checkbox-row {
+    grid-column: span 10;
+  }
+
+  .property-grid > .property-full-label {
+    grid-column: span 3;
+    text-align: right;
+    text-transform: capitalize;
+  }
+
+  .property-grid > .property-half-label {
+    grid-column: span 1;
+  }
+
+  .property-grid > .property-full-input {
+    grid-column: span 7;
+  }
+
+  .property-grid > .property-half-input {
+    grid-column: span 4;
+  }
+
+  /* checkbox-row */
+  .checkbox-row {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-gap: 5px;
+    grid-auto-rows: minmax(24px, auto);
+    align-items: center;
+  }
+
+  .checkbox-row > input {
+    grid-column: 4 / 5;
+  }
+
+  .checkbox-row > label {
+    grid-column: span 6;
+    text-align: left;
+  }
+
+  /* image resources */
+  .icon-only-label {
+    grid-column: span 1;
+
+    background: url(/assets/images/icon-properties-label.png) no-repeat;
+    float: left;
+    margin: 0;
+    align-self: stretch;
+  }
+
+  .icon-only-label.color {
+    background-position: 100% -500px;
+  }
+  .icon-only-label.font-size {
+    background-position: 100% -594px;
+  }
+  .icon-only-label.leading {
+    background-position: 100% -696px;
+  }
+  .icon-only-label.hscale {
+    background-position: 100% -296px;
+  }
+  .icon-only-label.vscale {
+    background-position: 100% -396px;
+  }
+  .icon-only-label.linewidth {
+    background-position: 100% -894px;
+  }
+  .icon-only-label.lineHeight {
+    background-position: 100% -995px;
+  }
+`;
+//# sourceMappingURL=property-shared-style.js.map

package/dist/src/modeller/property-sidebar/property-shared-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-shared-style.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-shared-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const PropertySharedStyle = css`\n  fieldset {\n    border: none;\n    margin: 4px;\n    padding: 9px 4px 9px 4px;\n    border-bottom: var(--property-sidebar-fieldset-border);\n    color: var(--property-sidebar-fieldset-legend-color);\n    font: var(--property-sidebar-fieldset-label);\n  }\n\n  fieldset legend {\n    padding: 5px 0 0 5px;\n    color: var(--property-sidebar-fieldset-legend-color);\n    font: var(--property-sidebar-fieldset-legend);\n    text-transform: capitalize;\n  }\n\n  select,\n  input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  /* property grid */\n  .property-grid {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .property-grid > * {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .property-grid > label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    line-height: 2;\n  }\n\n  .property-grid > input,\n  .property-grid > table,\n  .property-grid > select,\n  .property-grid > things-editor-angle-input,\n  .property-grid > things-editor-buttons-radio,\n  .property-grid > things-editor-color,\n  [custom-editor] {\n    grid-column: span 7;\n    align-self: stretch;\n  }\n\n  .property-grid > .checkbox-row {\n    grid-column: span 10;\n  }\n\n  .property-grid > .property-full-label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n  }\n\n  .property-grid > .property-half-label {\n    grid-column: span 1;\n  }\n\n  .property-grid > .property-full-input {\n    grid-column: span 7;\n  }\n\n  .property-grid > .property-half-input {\n    grid-column: span 4;\n  }\n\n  /* checkbox-row */\n  .checkbox-row {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .checkbox-row > input {\n    grid-column: 4 / 5;\n  }\n\n  .checkbox-row > label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  /* image resources */\n  .icon-only-label {\n    grid-column: span 1;\n\n    background: url(/assets/images/icon-properties-label.png) 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  .icon-only-label.font-size {\n    background-position: 100% -594px;\n  }\n  .icon-only-label.leading {\n    background-position: 100% -696px;\n  }\n  .icon-only-label.hscale {\n    background-position: 100% -296px;\n  }\n  .icon-only-label.vscale {\n    background-position: 100% -396px;\n  }\n  .icon-only-label.linewidth {\n    background-position: 100% -894px;\n  }\n  .icon-only-label.lineHeight {\n    background-position: 100% -995px;\n  }\n`\n"]}