@operato/board 9.0.0-beta.18 → 9.0.0-beta.20

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

@@ -1,146 +0,0 @@
-/**
- * @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, var(--md-sys-color-on-secondary-container));
-    font: var(--property-sidebar-fieldset-label);
-  }
-
-  fieldset legend {
-    padding: 5px 0 0 5px;
-    color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));
-    font: var(--property-sidebar-fieldset-legend);
-    text-transform: capitalize;
-  }
-
-  select,
-  input {
-    border: var(--property-sidebar-fieldset-border);
-  }
-
-  ox-input-data {
-    height: 300px;
-  }
-
-  /* property grid */
-  .property-grid {
-    display: grid;
-    grid-template-columns: repeat(24, 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 8;
-    text-align: right;
-    text-transform: capitalize;
-    line-height: 2;
-  }
-
-  .property-grid > input,
-  .property-grid > table,
-  .property-grid > select,
-  .property-grid > ox-input-angle,
-  .property-grid > ox-buttons-radio,
-  .property-grid > ox-input-color,
-  [custom-editor] {
-    grid-column: span 16;
-    align-self: stretch;
-  }
-
-  .property-grid > .checkbox-row {
-    grid-column: 1 / -1;
-  }
-
-  .property-grid > .property-full-label {
-    grid-column: span 8;
-    text-align: right;
-    text-transform: capitalize;
-  }
-
-  .property-grid > .property-full-input {
-    grid-column: span 16;
-  }
-
-  .property-grid > .property-half-label {
-    grid-column: span 3;
-  }
-
-  .property-grid > .property-half-input {
-    grid-column: span 9;
-  }
-
-  .property-grid > .property-onethird-label {
-    grid-column: span 3;
-  }
-
-  .property-grid > .property-onethird-input {
-    grid-column: span 5;
-  }
-
-  /* checkbox-row */
-  .checkbox-row {
-    display: grid;
-    grid-template-columns: repeat(24, 1fr);
-    grid-gap: 5px;
-    grid-auto-rows: minmax(24px, auto);
-    align-items: center;
-  }
-
-  .checkbox-row > input {
-    grid-column: 9 / 12;
-  }
-
-  .checkbox-row > label {
-    grid-column: 12 / -1;
-    text-align: left;
-  }
-
-  /* image resources */
-  .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;
-  }
-  .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;
-  }
-  .icon-only-label.letterSpacing {
-    background-position: 100% -1595px;
-  }
-`;
-//# sourceMappingURL=property-shared-style.js.map

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

@@ -1 +0,0 @@
-{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IrC,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, var(--md-sys-color-on-secondary-container));\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, var(--md-sys-color-on-secondary-container));\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  ox-input-data {\n    height: 300px;\n  }\n\n  /* property grid */\n  .property-grid {\n    display: grid;\n    grid-template-columns: repeat(24, 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 8;\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 > ox-input-angle,\n  .property-grid > ox-buttons-radio,\n  .property-grid > ox-input-color,\n  [custom-editor] {\n    grid-column: span 16;\n    align-self: stretch;\n  }\n\n  .property-grid > .checkbox-row {\n    grid-column: 1 / -1;\n  }\n\n  .property-grid > .property-full-label {\n    grid-column: span 8;\n    text-align: right;\n    text-transform: capitalize;\n  }\n\n  .property-grid > .property-full-input {\n    grid-column: span 16;\n  }\n\n  .property-grid > .property-half-label {\n    grid-column: span 3;\n  }\n\n  .property-grid > .property-half-input {\n    grid-column: span 9;\n  }\n\n  .property-grid > .property-onethird-label {\n    grid-column: span 3;\n  }\n\n  .property-grid > .property-onethird-input {\n    grid-column: span 5;\n  }\n\n  /* checkbox-row */\n  .checkbox-row {\n    display: grid;\n    grid-template-columns: repeat(24, 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: 9 / 12;\n  }\n\n  .checkbox-row > label {\n    grid-column: 12 / -1;\n    text-align: left;\n  }\n\n  /* image resources */\n  .icon-only-label {\n    grid-column: span 3;\n\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  .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  .icon-only-label.letterSpacing {\n    background-position: 100% -1595px;\n  }\n`\n"]}

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

@@ -1,48 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import '@material/web/icon/icon.js';
-import { LitElement, PropertyValues } from 'lit';
-import { Component, Model, Scene } from '@hatiolab/things-scene';
-import { PropertyEffects } from '@operato/property-panel/effects.js';
-import { SceneInspector } from '@operato/property-panel/inspector.js';
-import { PropertyShapes } from '@operato/property-panel/shapes.js';
-import { PropertySpecific } from '@operato/property-panel/specifics.js';
-import { PropertyStyles } from '@operato/property-panel/styles.js';
-import { PropertyDataBinding } from '@operato/property-panel/data-binding.js';
-declare const PropertySidebar_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
-export declare class PropertySidebar extends PropertySidebar_base {
-    static styles: import("lit").CSSResult[];
-    scene: Scene | null;
-    bounds: any;
-    model: Model | null;
-    selected: Component[];
-    specificProps: any;
-    tabName: string | null;
-    collapsed: boolean;
-    fonts: any[];
-    propertyEditor: any[];
-    propertyTarget: Component | null;
-    firstUpdated(): void;
-    updated(change: PropertyValues<this>): void;
-    static get scopedElements(): {
-        'property-shape': typeof PropertyShapes;
-        'property-style': typeof PropertyStyles;
-        'property-effect': typeof PropertyEffects;
-        'property-specific': typeof PropertySpecific;
-        'property-data-binding': typeof PropertyDataBinding;
-        'scene-inspector': typeof SceneInspector;
-    };
-    render(): import("lit-html").TemplateResult<1>;
-    private onPropertyChanged;
-    private onBoundsChanged;
-    private onChangedByScene;
-    private setPropertyTargetAsDefault;
-    private onCollapsed;
-    private onSceneChanged;
-    private onSelectedChanged;
-    private setPropertyTarget;
-    private setBounds;
-    private isLine;
-}
-export {};

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

@@ -1,342 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
-import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import deepClone from 'lodash-es/cloneDeep.js';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { ScrollbarStyles } from '@operato/styles';
-import { PropertyEffects } from '@operato/property-panel/effects.js';
-import { SceneInspector } from '@operato/property-panel/inspector.js';
-import { PropertyShapes } from '@operato/property-panel/shapes.js';
-import { PropertySpecific } from '@operato/property-panel/specifics.js';
-import { PropertyStyles } from '@operato/property-panel/styles.js';
-import { PropertyDataBinding } from '@operato/property-panel/data-binding.js';
-export class PropertySidebar extends ScopedElementsMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.scene = null;
-        this.bounds = {};
-        this.model = {};
-        this.selected = [];
-        this.tabName = 'shape';
-        this.collapsed = false;
-        this.fonts = [];
-        this.propertyEditor = [];
-        this.propertyTarget = null;
-    }
-    firstUpdated() {
-        this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this));
-        this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this));
-    }
-    updated(change) {
-        change.has('scene') && this.onSceneChanged();
-        change.has('selected') && this.onSelectedChanged(this.selected);
-        change.has('collapsed') && this.onCollapsed(this.collapsed);
-    }
-    static get scopedElements() {
-        return {
-            'property-shape': PropertyShapes,
-            'property-style': PropertyStyles,
-            'property-effect': PropertyEffects,
-            'property-specific': PropertySpecific,
-            'property-data-binding': PropertyDataBinding,
-            'scene-inspector': SceneInspector
-        };
-    }
-    render() {
-        var tabName = this.tabName ? this.tabName : 'shape';
-        return html `
-      <div
-        tab
-        @click=${(e) => {
-            this.tabName = e.target.getAttribute('name');
-        }}
-      >
-        <md-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</md-icon>
-        <md-icon name="style" ?selected=${tabName == 'style'}>palette</md-icon>
-        <md-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</md-icon>
-        <md-icon name="specific" ?selected=${tabName == 'specific'}>tune</md-icon>
-        <md-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</md-icon>
-        <md-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</md-icon>
-      </div>
-
-      <div content>
-        ${html `
-          ${{
-            shape: html `
-              <property-shape
-                .value=${this.model}
-                .bounds=${this.bounds}
-                .selected=${this.selected}
-                ?active=${tabName == 'shape'}
-                ?is-line=${this.isLine(this.selected)}
-              >
-              </property-shape>
-            `,
-            style: html `
-              <property-style
-                .value=${this.model}
-                .selected=${this.selected}
-                .fonts=${this.fonts}
-                ?active=${tabName == 'style'}
-              >
-              </property-style>
-            `,
-            effect: html `
-              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>
-              </property-effect>
-            `,
-            specific: html `
-              <property-specific
-                .value=${this.model}
-                .scene=${this.scene}
-                .selected=${this.selected}
-                .props=${this.specificProps}
-                .propertyEditor=${this.propertyEditor}
-                ?active=${tabName == 'specific'}
-              >
-              </property-specific>
-            `,
-            'data-binding': html `
-              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>
-              </property-data-binding>
-            `,
-            inspector: html `
-              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>
-            `
-        }[this.tabName]}
-        `}
-      </div>
-    `;
-    }
-    onPropertyChanged(e) {
-        var detail = e.detail;
-        if (this.propertyTarget) {
-            /* 단일 컴포넌트의 경우에 적용 */
-            this.scene && this.scene.undoableChange(() => this.propertyTarget.set(detail));
-        }
-        else {
-            /* 여러 컴포넌트의 경우에 적용 */
-            this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)));
-        }
-    }
-    onBoundsChanged(e) {
-        var detail = e.detail;
-        if (!this.scene) {
-            return;
-        }
-        if (this.propertyTarget) {
-            /* 단일 컴포넌트의 경우에 적용 */
-            this.scene.undoableChange(() => {
-                this.propertyTarget.bounds = {
-                    ...this.propertyTarget.bounds,
-                    ...detail
-                };
-            });
-        }
-        else {
-            /* 여러 컴포넌트의 경우에 적용 */
-            this.scene.undoableChange(() => {
-                this.selected.forEach(component => {
-                    component.bounds = {
-                        ...component.bounds,
-                        ...detail
-                    };
-                });
-            });
-        }
-    }
-    onChangedByScene() {
-        if (this.propertyTarget) {
-            this.model = {
-                ...this.propertyTarget.model
-            };
-            this.setBounds(this.propertyTarget.bounds);
-        }
-    }
-    setPropertyTargetAsDefault() {
-        if (!this.scene) {
-            this.setPropertyTarget(null);
-            this.specificProps = [];
-            this.model = null;
-            this.bounds = {};
-        }
-        else {
-            this.scene.select('model-layer');
-        }
-    }
-    onCollapsed(collapsed) {
-        !collapsed && (this.style.display = '');
-        this.animate(collapsed
-            ? [
-                { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },
-                { transform: 'translateX(100%)', opacity: 1 }
-            ]
-            : [
-                { transform: 'translateX(100%)', opacity: 1 },
-                { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }
-            ], {
-            duration: 500
-        }).onfinish = () => {
-            collapsed && (this.style.display = 'none');
-            dispatchEvent(new Event('resize'));
-        };
-    }
-    async onSceneChanged() {
-        await this.updateComplete;
-        if (this.scene)
-            this.selected = this.scene.select('model-layer');
-    }
-    async onSelectedChanged(after) {
-        await this.updateComplete;
-        if (after.length == 1) {
-            this.setPropertyTarget(after[0]);
-            // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.
-            // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.
-            this.specificProps = deepClone(this.propertyTarget.nature.properties);
-            this.model = {
-                ...this.propertyTarget.model
-            };
-            this.setBounds(this.propertyTarget.bounds);
-        }
-        else if (after.length == 0) {
-            // 선택이 안된 경우
-            this.setPropertyTargetAsDefault();
-        }
-        else {
-            // 다중 선택된 경우
-            var type = after[0].model.type;
-            for (let i = 1; i < after.length; i++) {
-                if (after[i].model.type != type) {
-                    type = undefined;
-                    break;
-                }
-            }
-            this.setPropertyTarget(null);
-            if (type)
-                this.specificProps = deepClone(after[0].nature.properties);
-            else
-                this.specificProps = null;
-            this.model = {
-                type: type,
-                alpha: 1
-            };
-            this.bounds = {};
-        }
-    }
-    setPropertyTarget(newTarget) {
-        var oldTarget = this.propertyTarget;
-        if (oldTarget) {
-            oldTarget.off('change', this.onChangedByScene, this);
-        }
-        if (newTarget) {
-            newTarget.on('change', this.onChangedByScene, this);
-        }
-        this.propertyTarget = newTarget;
-    }
-    setBounds(bounds) {
-        this.bounds = {
-            left: bounds.left,
-            top: bounds.top,
-            width: Math.round(bounds.width),
-            height: Math.round(bounds.height)
-        };
-    }
-    isLine(selected) {
-        var isLine = false;
-        for (var i = 0; i < selected.length; i++) {
-            var comp = selected[i];
-            if (!comp.isLine || !comp.isLine()) {
-                isLine = false;
-                return isLine;
-            }
-            isLine = true;
-        }
-        return isLine;
-    }
-}
-PropertySidebar.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        border-left: 1px solid var(--md-sys-color-border, #ccc);
-        width: 270px;
-        display: flex;
-        flex-direction: column;
-        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
-        color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));
-        user-select: none;
-
-        --input-padding: var(--spacing-small);
-        --label-font: var(--property-sidebar-fieldset-label, roboto);
-      }
-
-      [tab] {
-        display: flex;
-        background-color: rgba(0, 0, 0, 0.08);
-        opacity: 0.85;
-      }
-
-      [tab] md-icon {
-        flex: 1;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        color: var(--property-sidebar-tab-icon-color);
-        height: 40px;
-      }
-
-      [tab] [selected] {
-        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
-        border-left: 1px solid rgba(255, 255, 255, 0.5);
-        border-right: 1px solid rgba(0, 0, 0, 0.15);
-        opacity: 1;
-      }
-
-      [content] {
-        flex: 1;
-
-        overflow: hidden;
-        overflow-y: auto;
-
-        --md-icon-size: 22px;
-      }
-
-      [content] > :not([active]) {
-        display: none;
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], PropertySidebar.prototype, "scene", void 0);
-__decorate([
-    property({ type: Object })
-], PropertySidebar.prototype, "bounds", void 0);
-__decorate([
-    property({ type: Object })
-], PropertySidebar.prototype, "model", void 0);
-__decorate([
-    property({ type: Array })
-], PropertySidebar.prototype, "selected", void 0);
-__decorate([
-    property({ type: Array })
-], PropertySidebar.prototype, "specificProps", void 0);
-__decorate([
-    property({ type: String })
-], PropertySidebar.prototype, "tabName", void 0);
-__decorate([
-    property({ type: Boolean })
-], PropertySidebar.prototype, "collapsed", void 0);
-__decorate([
-    property({ type: Array })
-], PropertySidebar.prototype, "fonts", void 0);
-__decorate([
-    property({ type: Array })
-], PropertySidebar.prototype, "propertyEditor", void 0);
-//# sourceMappingURL=property-sidebar.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"property-sidebar.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-sidebar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep.js'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyEffects } from '@operato/property-panel/effects.js'\nimport { SceneInspector } from '@operato/property-panel/inspector.js'\nimport { PropertyShapes } from '@operato/property-panel/shapes.js'\nimport { PropertySpecific } from '@operato/property-panel/specifics.js'\nimport { PropertyStyles } from '@operato/property-panel/styles.js'\nimport { PropertyDataBinding } from '@operato/property-panel/data-binding.js'\n\nexport class PropertySidebar extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        border-left: 1px solid var(--md-sys-color-border, #ccc);\n        width: 270px;\n        display: flex;\n        flex-direction: column;\n        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n        color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));\n        user-select: none;\n\n        --input-padding: var(--spacing-small);\n        --label-font: var(--property-sidebar-fieldset-label, roboto);\n      }\n\n      [tab] {\n        display: flex;\n        background-color: rgba(0, 0, 0, 0.08);\n        opacity: 0.85;\n      }\n\n      [tab] md-icon {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--property-sidebar-tab-icon-color);\n        height: 40px;\n      }\n\n      [tab] [selected] {\n        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n        border-left: 1px solid rgba(255, 255, 255, 0.5);\n        border-right: 1px solid rgba(0, 0, 0, 0.15);\n        opacity: 1;\n      }\n\n      [content] {\n        flex: 1;\n\n        overflow: hidden;\n        overflow-y: auto;\n\n        --md-icon-size: 22px;\n      }\n\n      [content] > :not([active]) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Object }) bounds: any = {}\n  @property({ type: Object }) model: Model | null = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) specificProps: any\n  @property({ type: String }) tabName: string | null = 'shape'\n  @property({ type: Boolean }) collapsed: boolean = false\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  propertyTarget: Component | null = null\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this) as EventListener)\n    this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this) as EventListener)\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('scene') && this.onSceneChanged()\n    change.has('selected') && this.onSelectedChanged(this.selected)\n    change.has('collapsed') && this.onCollapsed(this.collapsed)\n  }\n\n  static get scopedElements() {\n    return {\n      'property-shape': PropertyShapes,\n      'property-style': PropertyStyles,\n      'property-effect': PropertyEffects,\n      'property-specific': PropertySpecific,\n      'property-data-binding': PropertyDataBinding,\n      'scene-inspector': SceneInspector\n    }\n  }\n\n  render() {\n    var tabName = this.tabName ? this.tabName : 'shape'\n\n    return html`\n      <div\n        tab\n        @click=${(e: MouseEvent) => {\n          this.tabName = (e.target as HTMLElement).getAttribute('name')\n        }}\n      >\n        <md-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</md-icon>\n        <md-icon name=\"style\" ?selected=${tabName == 'style'}>palette</md-icon>\n        <md-icon name=\"effect\" ?selected=${tabName == 'effect'}>movie_filter</md-icon>\n        <md-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</md-icon>\n        <md-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'}>share</md-icon>\n        <md-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</md-icon>\n      </div>\n\n      <div content>\n        ${html`\n          ${{\n            shape: html`\n              <property-shape\n                .value=${this.model}\n                .bounds=${this.bounds}\n                .selected=${this.selected}\n                ?active=${tabName == 'shape'}\n                ?is-line=${this.isLine(this.selected)}\n              >\n              </property-shape>\n            `,\n            style: html`\n              <property-style\n                .value=${this.model}\n                .selected=${this.selected}\n                .fonts=${this.fonts}\n                ?active=${tabName == 'style'}\n              >\n              </property-style>\n            `,\n            effect: html`\n              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n              </property-effect>\n            `,\n            specific: html`\n              <property-specific\n                .value=${this.model}\n                .scene=${this.scene}\n                .selected=${this.selected}\n                .props=${this.specificProps}\n                .propertyEditor=${this.propertyEditor}\n                ?active=${tabName == 'specific'}\n              >\n              </property-specific>\n            `,\n            'data-binding': html`\n              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>\n              </property-data-binding>\n            `,\n            inspector: html`\n              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>\n            `\n          }[this.tabName!]}\n        `}\n      </div>\n    `\n  }\n\n  private onPropertyChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n    }\n  }\n\n  private onBoundsChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (!this.scene) {\n      return\n    }\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.propertyTarget!.bounds = {\n          ...this.propertyTarget!.bounds,\n          ...detail\n        }\n      })\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.selected.forEach(component => {\n          component.bounds = {\n            ...component.bounds,\n            ...detail\n          }\n        })\n      })\n    }\n  }\n\n  private onChangedByScene() {\n    if (this.propertyTarget) {\n      this.model = {\n        ...this.propertyTarget.model\n      }\n      this.setBounds(this.propertyTarget.bounds)\n    }\n  }\n\n  private setPropertyTargetAsDefault() {\n    if (!this.scene) {\n      this.setPropertyTarget(null)\n      this.specificProps = []\n      this.model = null\n      this.bounds = {}\n    } else {\n      this.scene.select('model-layer')\n    }\n  }\n\n  private onCollapsed(collapsed: boolean) {\n    !collapsed && (this.style.display = '')\n\n    this.animate(\n      collapsed\n        ? [\n            { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },\n            { transform: 'translateX(100%)', opacity: 1 }\n          ]\n        : [\n            { transform: 'translateX(100%)', opacity: 1 },\n            { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }\n          ],\n      {\n        duration: 500\n      }\n    ).onfinish = () => {\n      collapsed && (this.style.display = 'none')\n      dispatchEvent(new Event('resize'))\n    }\n  }\n\n  private async onSceneChanged() {\n    await this.updateComplete\n\n    if (this.scene) this.selected = this.scene.select('model-layer')\n  }\n\n  private async onSelectedChanged(after: Component[]) {\n    await this.updateComplete\n\n    if (after.length == 1) {\n      this.setPropertyTarget(after[0])\n      // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n      // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n      this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n      this.model = {\n        ...this.propertyTarget!.model\n      }\n      this.setBounds(this.propertyTarget!.bounds)\n    } else if (after.length == 0) {\n      // 선택이 안된 경우\n\n      this.setPropertyTargetAsDefault()\n    } else {\n      // 다중 선택된 경우\n\n      var type = after[0].model.type\n      for (let i = 1; i < after.length; i++) {\n        if (after[i].model.type != type) {\n          type = undefined\n          break\n        }\n      }\n\n      this.setPropertyTarget(null)\n\n      if (type) this.specificProps = deepClone(after[0].nature.properties)\n      else this.specificProps = null\n\n      this.model = {\n        type: type,\n        alpha: 1\n      }\n      this.bounds = {}\n    }\n  }\n\n  private setPropertyTarget(newTarget: Component | null) {\n    var oldTarget = this.propertyTarget\n\n    if (oldTarget) {\n      oldTarget.off('change', this.onChangedByScene, this)\n    }\n    if (newTarget) {\n      newTarget.on('change', this.onChangedByScene, this)\n    }\n\n    this.propertyTarget = newTarget\n  }\n\n  private setBounds(bounds: BOUNDS) {\n    this.bounds = {\n      left: bounds.left,\n      top: bounds.top,\n      width: Math.round(bounds.width),\n      height: Math.round(bounds.height)\n    }\n  }\n\n  private isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.d.ts

@@ -1 +0,0 @@
-export declare const BoxPaddingEditorStyles: import("lit").CSSResult;

package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.js

@@ -1,94 +0,0 @@
-import { css } from 'lit';
-export const BoxPaddingEditorStyles = css `
-  .box-padding {
-    width: 100%;
-  }
-
-  .box-padding td {
-    background: var(--url-icon-properties-padding) 50% 0 no-repeat;
-  }
-
-  .box-padding tr:nth-child(1),
-  .box-padding tr:nth-child(3) {
-    height: 20px;
-  }
-
-  .box-padding tr td:nth-child(1),
-  .box-padding tr td:nth-child(3) {
-    width: 18px;
-  }
-
-  .box-padding .slide1 {
-    background-position: 0 0;
-  }
-
-  .box-padding .slide2 {
-    background-position: 50% -40px;
-    background-color: rgba(69, 46, 41, 0.2);
-  }
-
-  .box-padding .slide3 {
-    background-position: 100% -440px;
-  }
-
-  .box-padding .slide4 {
-    background-position: 0 -360px;
-    background-color: rgba(69, 46, 41, 0.2);
-  }
-
-  .box-padding .slide5 {
-    background: none;
-    text-align: center;
-  }
-
-  .box-padding .slide6 {
-    background-position: 100% -160px;
-    background-color: rgba(69, 46, 41, 0.2);
-  }
-
-  .box-padding .slide7 {
-    background-position: 0 100%;
-  }
-
-  .box-padding .slide8 {
-    background-position: 50% -320px;
-    background-color: rgba(69, 46, 41, 0.2);
-  }
-
-  .box-padding .slide9 {
-    background-position: 0 0px;
-  }
-
-  .box-padding input {
-    background-color: transparent;
-    width: 35px;
-    margin: 0px;
-    padding: 0px;
-    clear: both;
-    float: initial;
-    border: 1px solid #fff;
-    border-width: 0 0 1px 0;
-    text-align: right;
-    font-size: 14px;
-  }
-
-  .slide5 input:nth-child(1),
-  .slide5 input:nth-child(4) {
-    display: block;
-    margin: auto;
-  }
-
-  .slide5 input:nth-child(2) {
-    float: left;
-  }
-
-  .slide5 input:nth-child(3) {
-    float: right;
-    margin-top: -25px;
-  }
-
-  .slide5 input:nth-child(4) {
-    margin-top: -5px;
-  }
-`;
-//# sourceMappingURL=box-padding-editor-styles.js.map