@operato/process 1.1.1

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

@@ -0,0 +1,309 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import deepClone from 'lodash-es/cloneDeep';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScrollbarStyles } from '@operato/styles';
+import { PropertyShapes } from './shapes/shapes.js';
+import { PropertySpecific } from './specifics/specifics.js';
+import { PropertyStyles } from './styles/styles.js';
+import { SceneInspector } from './inspector/inspector';
+export class PropertySidebar extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.scene = null;
+        this.bounds = {};
+        this.model = {};
+        this.selected = [];
+        this.tabName = 'specific';
+        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 {
+            'process-property-shape': PropertyShapes,
+            'process-property-style': PropertyStyles,
+            'process-property-specific': PropertySpecific,
+            'process-scene-inspector': SceneInspector
+        };
+    }
+    render() {
+        var tabName = this.tabName ? this.tabName : 'specific';
+        return html `
+      <div
+        tab
+        @click=${(e) => {
+            this.tabName = e.target.getAttribute('name');
+        }}
+      >
+        <mwc-icon name="specific" ?selected=${tabName == 'specific'}>tune</mwc-icon>
+        <mwc-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>
+        <mwc-icon name="style" ?selected=${tabName == 'style'}>palette</mwc-icon>
+        <mwc-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>
+      </div>
+
+      <div content>
+        ${html `
+          ${{
+            specific: html `
+              <process-property-specific
+                .value=${this.model}
+                .scene=${this.scene}
+                .selected=${this.selected}
+                .props=${this.specificProps}
+                .propertyEditor=${this.propertyEditor}
+                ?active=${tabName == 'specific'}
+              >
+              </process-property-specific>
+            `,
+            shape: html `
+              <process-property-shape
+                .value=${this.model}
+                .bounds=${this.bounds}
+                .selected=${this.selected}
+                ?active=${tabName == 'shape'}
+              >
+              </process-property-shape>
+            `,
+            style: html `
+              <process-property-style
+                .value=${this.model}
+                .selected=${this.selected}
+                .fonts=${this.fonts}
+                ?active=${tabName == 'style'}
+              >
+              </process-property-style>
+            `,
+            inspector: html `
+              <process-scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></process-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
+            };
+    }
+    _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)
+        };
+    }
+}
+PropertySidebar.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        border-left: 1px solid var(--paper-blue-grey-100);
+        width: 270px;
+        display: flex;
+        flex-direction: column;
+        background-color: var(--property-sidebar-background-color);
+        user-select: none;
+        --input-padding: var(--padding-narrow);
+        --label-font: var(--property-sidebar-fieldset-label);
+      }
+
+      [tab] {
+        display: flex;
+        background-color: rgba(0, 0, 0, 0.08);
+        opacity: 0.85;
+      }
+
+      [tab] mwc-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);
+        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;
+      }
+
+      [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

@@ -0,0 +1 @@
+{"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/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyShapes } from './shapes/shapes.js'\nimport { PropertySpecific } from './specifics/specifics.js'\nimport { PropertyStyles } from './styles/styles.js'\nimport { SceneInspector } from './inspector/inspector'\n\nexport class PropertySidebar extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        border-left: 1px solid var(--paper-blue-grey-100);\n        width: 270px;\n        display: flex;\n        flex-direction: column;\n        background-color: var(--property-sidebar-background-color);\n        user-select: none;\n        --input-padding: var(--padding-narrow);\n        --label-font: var(--property-sidebar-fieldset-label);\n      }\n\n      [tab] {\n        display: flex;\n        background-color: rgba(0, 0, 0, 0.08);\n        opacity: 0.85;\n      }\n\n      [tab] mwc-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);\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\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 = 'specific'\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      'process-property-shape': PropertyShapes,\n      'process-property-style': PropertyStyles,\n      'process-property-specific': PropertySpecific,\n      'process-scene-inspector': SceneInspector\n    }\n  }\n\n  render() {\n    var tabName = this.tabName ? this.tabName : 'specific'\n\n    return html`\n      <div\n        tab\n        @click=${(e: MouseEvent) => {\n          this.tabName = (e.target as HTMLElement).getAttribute('name')\n        }}\n      >\n        <mwc-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</mwc-icon>\n        <mwc-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>\n        <mwc-icon name=\"style\" ?selected=${tabName == 'style'}>palette</mwc-icon>\n        <mwc-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>\n      </div>\n\n      <div content>\n        ${html`\n          ${{\n            specific: html`\n              <process-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              </process-property-specific>\n            `,\n            shape: html`\n              <process-property-shape\n                .value=${this.model}\n                .bounds=${this.bounds}\n                .selected=${this.selected}\n                ?active=${tabName == 'shape'}\n              >\n              </process-property-shape>\n            `,\n            style: html`\n              <process-property-style\n                .value=${this.model}\n                .selected=${this.selected}\n                .fonts=${this.fonts}\n                ?active=${tabName == 'style'}\n              >\n              </process-property-style>\n            `,\n            inspector: html`\n              <process-scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></process-scene-inspector>\n            `\n          }[this.tabName!]}\n        `}\n      </div>\n    `\n  }\n\n  _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  _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  _onChangedByScene() {\n    if (this.propertyTarget)\n      this.model = {\n        ...this.propertyTarget.model\n      }\n  }\n\n  _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  _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  async _onSceneChanged() {\n    await this.updateComplete\n\n    if (this.scene) this.selected = this.scene.select('model-layer')\n  }\n\n  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  _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  _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"]}

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

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

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

@@ -0,0 +1,94 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-padding-editor-styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FxC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const BoxPaddingEditorStyles = css`\n  .box-padding {\n    width: 100%;\n  }\n\n  .box-padding td {\n    background: var(--url-icon-properties-padding) 50% 0 no-repeat;\n  }\n\n  .box-padding tr:nth-child(1),\n  .box-padding tr:nth-child(3) {\n    height: 20px;\n  }\n\n  .box-padding tr td:nth-child(1),\n  .box-padding tr td:nth-child(3) {\n    width: 18px;\n  }\n\n  .box-padding .slide1 {\n    background-position: 0 0;\n  }\n\n  .box-padding .slide2 {\n    background-position: 50% -40px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide3 {\n    background-position: 100% -440px;\n  }\n\n  .box-padding .slide4 {\n    background-position: 0 -360px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide5 {\n    background: none;\n    text-align: center;\n  }\n\n  .box-padding .slide6 {\n    background-position: 100% -160px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide7 {\n    background-position: 0 100%;\n  }\n\n  .box-padding .slide8 {\n    background-position: 50% -320px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide9 {\n    background-position: 0 0px;\n  }\n\n  .box-padding input {\n    background-color: transparent;\n    width: 35px;\n    margin: 0px;\n    padding: 0px;\n    clear: both;\n    float: initial;\n    border: 1px solid #fff;\n    border-width: 0 0 1px 0;\n    text-align: right;\n    font-size: 14px;\n  }\n\n  .slide5 input:nth-child(1),\n  .slide5 input:nth-child(4) {\n    display: block;\n    margin: auto;\n  }\n\n  .slide5 input:nth-child(2) {\n    float: left;\n  }\n\n  .slide5 input:nth-child(3) {\n    float: right;\n    margin-top: -25px;\n  }\n\n  .slide5 input:nth-child(4) {\n    margin-top: -5px;\n  }\n`\n"]}

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

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/input/ox-input-angle.js';
+import '@operato/input/ox-buttons-radio.js';
+import '@material/mwc-icon';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/help/ox-title-with-help.js';
+import { BOUNDS, Component, Properties } from '@hatiolab/things-scene';
+import { AbstractProperty } from '../abstract-property';
+import { PropertyShadow } from '../effects/property-shadow.js';
+declare const PropertyShapes_base: typeof AbstractProperty & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class PropertyShapes extends PropertyShapes_base {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    bounds: BOUNDS | null;
+    selected: Component[];
+    firstUpdated(): void;
+    static get scopedElements(): {
+        'process-property-shadow': typeof PropertyShadow;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    _onValueChange(e: Event): void;
+    _hasTextProperty(selected: Component[]): boolean;
+    _isIdentifiable(selected: Component[]): boolean;
+    _isLine(selected: Component[]): boolean;
+}
+export {};