@operato/process 7.1.31 → 7.1.32

package/src/modeller/property-sidebar/styles/styles.ts

@@ -1,577 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
-import '@operato/help/ox-title-with-help.js'
-import '@operato/input/ox-input-color.js'
-import '@operato/input/ox-input-range.js'
-import '@operato/app/input/ox-input-fill-style.js'
-import '@operato/font/ox-font-selector.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { css, html } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { Component } from '@hatiolab/things-scene'
-
-import { AbstractProperty } from '../abstract-property.js'
-import { PropertySharedStyle } from '../property-shared-style.js'
-
-export class PropertyStyles extends AbstractProperty {
-  static styles = [
-    PropertySharedStyle,
-    css`
-      ox-input-range {
-        width: 100%;
-      }
-
-      .btn-group {
-        height: 24px;
-      }
-
-      .btn-group paper-button {
-        width: 30px;
-        height: 24px;
-        min-width: initial;
-        margin: 0 4px 0 0;
-        padding: 0;
-        border-radius: 0;
-        display: inline-block;
-        border-bottom: 2px solid #fff;
-
-        background: var(--url-icon-properties) no-repeat;
-        background-size: 70%;
-      }
-
-      .btn-group paper-button.tbold {
-        background-position: 50% -170px;
-      }
-
-      .btn-group paper-button.titalic {
-        background-position: 50% -205px;
-      }
-
-      .btn-group paper-button.tunderline {
-        background-position: 50% -240px;
-      }
-
-      .btn-group paper-button.tstrikethrough {
-        background-position: 50% -415px;
-      }
-
-      .btn-group paper-button[active] {
-        border-color: #f2471c;
-      }
-
-      .line-type paper-listbox {
-        overflow: hidden;
-        max-width: 100px;
-      }
-      .line-type paper-item {
-        background: var(--url-icon-properties-line-type) 50% 0 no-repeat;
-        min-height: 25px;
-        padding: 3px 9px;
-        width: 80px;
-      }
-
-      .line-type paper-item.solid {
-        background-position: 50% 10px;
-      }
-      .line-type paper-item.round-dot {
-        background-position: 50% -40px;
-      }
-      .line-type paper-item.square-dot {
-        background-position: 50% -90px;
-      }
-      .line-type paper-item.dash {
-        background-position: 50% -140px;
-      }
-      .line-type paper-item.dash-dot {
-        background-position: 50% -190px;
-      }
-      .line-type paper-item.long-dash {
-        background-position: 50% -240px;
-      }
-      .line-type paper-item.long-dash-dot {
-        background-position: 50% -290px;
-      }
-      .line-type paper-item.long-dash-dot-dot {
-        background-position: 50% -340px;
-      }
-
-      .line-type .paper-input-container input {
-        background: var(--url-icon-properties-line-type) 50% 0 no-repeat !important;
-      }
-      .line-type.solid .paper-input-container input {
-        background-position: 50% 5px !important;
-      }
-      .line-type.round-dot .paper-input-container input {
-        background-position: 50% -45px !important;
-      }
-      .line-type.square-dot .paper-input-container input {
-        background-position: 50% -85px !important;
-      }
-      .line-type.dash .paper-input-container input {
-        background-position: 50% -145px !important;
-      }
-      .line-type.dash-dot .paper-input-container input {
-        background-position: 50% -185px !important;
-      }
-      .line-type.long-dash .paper-input-container input {
-        background-position: 50% -245px !important;
-      }
-      .line-type.long-dash-dot .paper-input-container input {
-        background-position: 50% -285px !important;
-      }
-      .line-type.long-dash-dot-dot .paper-input-container input {
-        background-position: 50% -345px !important;
-      }
-
-      .arrow-type paper-menu {
-        overflow: hidden;
-        max-width: 140px;
-      }
-      .arrow-type paper-item {
-        background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;
-        min-height: 30px;
-        padding: 3px 7px;
-        width: 30px;
-        float: left;
-      }
-      .arrow-type paper-item.begin-no {
-        background-position: 50% 16px;
-      }
-      .arrow-type paper-item.begin-arrow {
-        background-position: 50% -39px;
-      }
-      .arrow-type paper-item.begin-open-arrow {
-        background-position: 50% -89px;
-      }
-      .arrow-type paper-item.begin-stealth-arrow {
-        background-position: 50% -139px;
-      }
-      .arrow-type paper-item.begin-diamond-arrow {
-        background-position: 50% -190px;
-      }
-      .arrow-type paper-item.begin-oval-arrow {
-        background-position: 50% -238px;
-      }
-      .arrow-type paper-item.begin-size1 {
-        background-position: 50% -286px;
-      }
-      .arrow-type paper-item.begin-size2 {
-        background-position: 50% -336px;
-      }
-      .arrow-type paper-item.begin-size3 {
-        background-position: 50% -386px;
-      }
-      .arrow-type paper-item.begin-size4 {
-        background-position: 50% -436px;
-      }
-      .arrow-type paper-item.begin-size5 {
-        background-position: 50% -486px;
-      }
-      .arrow-type paper-item.begin-size6 {
-        background-position: 50% -536px;
-      }
-      .arrow-type paper-item.begin-size7 {
-        background-position: 50% -589px;
-      }
-      .arrow-type paper-item.begin-size8 {
-        background-position: 50% -639px;
-      }
-      .arrow-type paper-item.begin-size9 {
-        background-position: 50% -689px;
-      }
-      .arrow-type paper-item.end-no {
-        background-position: 50% 16px;
-      }
-      .arrow-type paper-item.end-arrow {
-        background-position: 50% -739px;
-      }
-      .arrow-type paper-item.end-open-arrow {
-        background-position: 50% -789px;
-      }
-      .arrow-type paper-item.end-stealth-arrow {
-        background-position: 50% -839px;
-      }
-      .arrow-type paper-item.end-diamond-arrow {
-        background-position: 50% -890px;
-      }
-      .arrow-type paper-item.end-oval-arrow {
-        background-position: 50% -938px;
-      }
-      .arrow-type paper-item.end-size1 {
-        background-position: 50% -986px;
-      }
-      .arrow-type paper-item.end-size2 {
-        background-position: 50% -1036px;
-      }
-      .arrow-type paper-item.end-size3 {
-        background-position: 50% -1086px;
-      }
-      .arrow-type paper-item.end-size4 {
-        background-position: 50% -1136px;
-      }
-      .arrow-type paper-item.end-size5 {
-        background-position: 50% -1186px;
-      }
-      .arrow-type paper-item.end-size6 {
-        background-position: 50% -1236px;
-      }
-      .arrow-type paper-item.end-size7 {
-        background-position: 50% -1289px;
-      }
-      .arrow-type paper-item.end-size8 {
-        background-position: 50% -1339px;
-      }
-      .arrow-type paper-item.end-size9 {
-        background-position: 50% -1389px;
-      }
-
-      .arrow-type .paper-input-container input {
-        background: var(--url-icon-properties-arrow-type) 110% 0 no-repeat !important;
-      }
-      .arrow-type.begin-no .paper-input-container input {
-        background-position: 110% 5px !important;
-      }
-      .arrow-type.begin-arrow .paper-input-container input {
-        background-position: 110% -50px !important;
-      }
-      .arrow-type.begin-open-arrow .paper-input-container input {
-        background-position: 110% -100px !important;
-      }
-      .arrow-type.begin-stealth-arrow .paper-input-container input {
-        background-position: 110% -150px !important;
-      }
-      .arrow-type.begin-diamond-arrow .paper-input-container input {
-        background-position: 110% -200px !important;
-      }
-      .arrow-type.begin-oval-arrow .paper-input-container input {
-        background-position: 110% -250px !important;
-      }
-      .arrow-type.begin-size1 .paper-input-container input {
-        background-position: 110% -298px !important;
-      }
-      .arrow-type.begin-size2 .paper-input-container input {
-        background-position: 110% -348px !important;
-      }
-      .arrow-type.begin-size3 .paper-input-container input {
-        background-position: 110% -398px !important;
-      }
-      .arrow-type.begin-size4 .paper-input-container input {
-        background-position: 110% -448px !important;
-      }
-      .arrow-type.begin-size5 .paper-input-container input {
-        background-position: 110% -498px !important;
-      }
-      .arrow-type.begin-size6 .paper-input-container input {
-        background-position: 110% -548px !important;
-      }
-      .arrow-type.begin-size7 .paper-input-container input {
-        background-position: 110% -600px !important;
-      }
-      .arrow-type.begin-size8 .paper-input-container input {
-        background-position: 110% -650px !important;
-      }
-      .arrow-type.begin-size9 .paper-input-container input {
-        background-position: 110% -700px !important;
-      }
-      .arrow-type.end-no .paper-input-container input {
-        background-position: 110% 5px !important;
-      }
-      .arrow-type.end-arrow .paper-input-container input {
-        background-position: 110% -750px !important;
-      }
-      .arrow-type.end-open-arrow .paper-input-container input {
-        background-position: 110% -800px !important;
-      }
-      .arrow-type.end-stealth-arrow .paper-input-container input {
-        background-position: 110% -850px !important;
-      }
-      .arrow-type.end-diamond-arrow .paper-input-container input {
-        background-position: 110% -900px !important;
-      }
-      .arrow-type.end-oval-arrow .paper-input-container input {
-        background-position: 110% -950px !important;
-      }
-      .arrow-type.end-size1 .paper-input-container input {
-        background-position: 110% -998px !important;
-      }
-      .arrow-type.end-size2 .paper-input-container input {
-        background-position: 110% -1048px !important;
-      }
-      .arrow-type.end-size3 .paper-input-container input {
-        background-position: 110% -1098px !important;
-      }
-      .arrow-type.end-size4 .paper-input-container input {
-        background-position: 110% -1148px !important;
-      }
-      .arrow-type.end-size5 .paper-input-container input {
-        background-position: 110% -1198px !important;
-      }
-      .arrow-type.end-size6 .paper-input-container input {
-        background-position: 110% -1248px !important;
-      }
-      .arrow-type.end-size7 .paper-input-container input {
-        background-position: 110% -1300px !important;
-      }
-      .arrow-type.end-size8 .paper-input-container input {
-        background-position: 110% -1350px !important;
-      }
-      .arrow-type.end-size9 .paper-input-container input {
-        background-position: 110% -1400px !important;
-      }
-    `
-  ]
-  @property({ type: Object }) value: any = {}
-  @property({ type: Array }) selected: Component[] = []
-  @property({ type: Array }) fonts: any[] = []
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  render() {
-    var {
-      alpha = 1,
-      fontFamily,
-      fontSize,
-      lineHeight,
-      fontColor,
-      bold,
-      italic,
-      fillStyle,
-      lineWidth,
-      strokeStyle,
-      lineDash,
-      lineCap,
-      lineJoin,
-      begin,
-      beginSize,
-      end,
-      endSize
-    } = this.value || {}
-
-    return html`
-      <fieldset>
-        <legend>
-          <ox-title-with-help topic="process-modeller/styles/opacity" msgid="label.opacity">opacity</ox-title-with-help>
-        </legend>
-        <ox-input-range min="0" max="1" step="0.1" value-key="alpha" .value=${alpha} editable> </ox-input-range>
-      </fieldset>
-
-      <fieldset>
-        <legend>
-          <ox-title-with-help topic="process-modeller/styles/text-style" msgid="label.text-style"
-            >text style</ox-title-with-help
-          >
-        </legend>
-
-        <div class="property-grid">
-          <label class="property-full-label">
-            <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
-          </label>
-
-          <ox-font-selector
-            value-key="fontFamily"
-            .value=${fontFamily}
-            class="property-full-input"
-            custom-editor
-          ></ox-font-selector>
-
-          <label class="property-half-label icon-only-label font-size"></label>
-          <input type="number" value-key="fontSize" .value=${fontSize} class="property-half-input" />
-
-          <label class="property-half-label icon-only-label lineHeight"></label>
-          <input type="number" value-key="lineHeight" .value=${lineHeight} class="property-half-input" />
-
-          <label class="property-half-label icon-only-label color"></label>
-          <ox-input-color value-key="fontColor" .value=${fontColor} class="property-half-input"> </ox-input-color>
-
-          <label class="property-half-label"></label>
-          <div class="property-half-input btn-group">
-            <paper-button toggles value-key="bold" ?active=${bold} class="tbold"> </paper-button>
-            <paper-button toggles value-key="italic" ?active=${italic} class="titalic"> </paper-button>
-          </div>
-        </div>
-      </fieldset>
-
-      <fieldset>
-        <legend>
-          <ox-title-with-help topic="process-modeller/styles/fill-style" msgid="label.fill-style"
-            >fill style</ox-title-with-help
-          >
-        </legend>
-
-        <ox-input-fill-style value-key="fillStyle" .value=${fillStyle}> </ox-input-fill-style>
-      </fieldset>
-
-      <fieldset>
-        <legend>
-          <ox-title-with-help msgid="label.line-style" topic="process-modeller/styles/line-style"></ox-title-with-help>
-        </legend>
-
-        <div class="property-grid">
-          <label class="property-half-label icon-only-label linewidth"></label>
-          <input type="number" value-key="lineWidth" .value=${lineWidth} class="property-half-input" />
-
-          <label class="property-half-label icon-only-label color"></label>
-          <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input"> </ox-input-color>
-
-          <label class="property-full-label">
-            <ox-i18n msgid="label.line-type">line type</ox-i18n>
-          </label>
-          <paper-dropdown-menu no-label-float="true" class="property-full-input line-type solid">
-            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
-            <paper-listbox
-              value-key="lineDash"
-              @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}
-              slot="dropdown-content"
-              .selected=${lineDash}
-              attr-for-selected="name"
-            >
-              <paper-item class="solid" name="solid"></paper-item>
-              <paper-item class="round-dot" name="round-dot"></paper-item>
-              <paper-item class="square-dot" name="square-dot"></paper-item>
-              <paper-item class="dash" name="dash"></paper-item>
-              <paper-item class="dash-dot" name="dash-dot"></paper-item>
-              <paper-item class="long-dash" name="long-dash"></paper-item>
-              <paper-item class="long-dash-dot" name="long-dash-dot"></paper-item>
-              <paper-item class="long-dash-dot-dot" name="long-dash-dot-dot"></paper-item>
-            </paper-listbox>
-          </paper-dropdown-menu>
-
-          <label class="property-full-label">
-            <ox-i18n msgid="label.cap-type">cap type</ox-i18n>
-          </label>
-          <select class="property-full-input select-content" value-key="lineCap" .value=${lineCap}>
-            <option value="butt"><ox-i18n msgid="label.square">square</ox-i18n></option>
-            <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
-          </select>
-
-          <label class="property-full-label">
-            <ox-i18n msgid="label.join-type">join type</ox-i18n>
-          </label>
-          <select class="property-full-input select-content" value-key="lineJoin" .value=${lineJoin}>
-            <option value="miter"><ox-i18n msgid="label.miter">miter</ox-i18n></option>
-            <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
-            <option value="bevel"><ox-i18n msgid="label.bevel">bevel</ox-i18n></option>
-          </select>
-
-          ${this._isLine(this.selected)
-            ? html`
-                <label class="property-full-label">
-                  <ox-i18n msgid="label.begin-type">begin type</ox-i18n>
-                </label>
-                <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type begin-no">
-                  <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
-                  <paper-listbox
-                    value-key="begin"
-                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}
-                    slot="dropdown-content"
-                    .selected=${begin}
-                    attr-for-selected="name"
-                  >
-                    <paper-item class="begin-no" name="none"></paper-item>
-                    <paper-item class="begin-arrow" name="arrow"></paper-item>
-                    <paper-item class="begin-open-arrow" name="open-arrow"></paper-item>
-                    <paper-item class="begin-stealth-arrow" name="sharp-arrow"></paper-item>
-                    <paper-item class="begin-diamond-arrow" name="diamond"></paper-item>
-                    <paper-item class="begin-oval-arrow" name="oval"></paper-item>
-                  </paper-listbox>
-                </paper-dropdown-menu>
-
-                <label class="property-full-label">
-                  <ox-i18n msgid="label.begin-size">begin size</ox-i18n>
-                </label>
-                <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type begin-size1">
-                  <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
-                  <paper-listbox
-                    value-key="beginSize"
-                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}
-                    slot="dropdown-content"
-                    .selected=${beginSize}
-                    attr-for-selected="name"
-                  >
-                    <paper-item class="begin-size1" name="size1"></paper-item>
-                    <paper-item class="begin-size2" name="size2"></paper-item>
-                    <paper-item class="begin-size3" name="size3"></paper-item>
-                    <paper-item class="begin-size4" name="size4"></paper-item>
-                    <paper-item class="begin-size5" name="size5"></paper-item>
-                    <paper-item class="begin-size6" name="size6"></paper-item>
-                    <paper-item class="begin-size7" name="size7"></paper-item>
-                    <paper-item class="begin-size8" name="size8"></paper-item>
-                    <paper-item class="begin-size9" name="size9"></paper-item>
-                  </paper-listbox>
-                </paper-dropdown-menu>
-
-                <label class="property-full-label">
-                  <ox-i18n msgid="label.end-type">end type</ox-i18n>
-                </label>
-                <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type end-no">
-                  <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
-                  <paper-listbox
-                    value-key="end"
-                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}
-                    slot="dropdown-content"
-                    .selected=${end}
-                    attr-for-selected="name"
-                  >
-                    <paper-item class="end-no" name="none"></paper-item>
-                    <paper-item class="end-arrow" name="arrow"></paper-item>
-                    <paper-item class="end-open-arrow" name="open-arrow"></paper-item>
-                    <paper-item class="end-stealth-arrow" name="sharp-arrow"></paper-item>
-                    <paper-item class="end-diamond-arrow" name="diamond"></paper-item>
-                    <paper-item class="end-oval-arrow" name="oval"></paper-item>
-                  </paper-listbox>
-                </paper-dropdown-menu>
-
-                <label class="property-full-label">
-                  <ox-i18n msgid="label.end-size">end size</ox-i18n>
-                </label>
-                <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type end-size1">
-                  <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
-                  <paper-listbox
-                    value-key="endSize"
-                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}
-                    slot="dropdown-content"
-                    .selected=${endSize}
-                    attr-for-selected="name"
-                  >
-                    <paper-item class="end-size1" name="size1"></paper-item>
-                    <paper-item class="end-size2" name="size2"></paper-item>
-                    <paper-item class="end-size3" name="size3"></paper-item>
-                    <paper-item class="end-size4" name="size4"></paper-item>
-                    <paper-item class="end-size5" name="size5"></paper-item>
-                    <paper-item class="end-size6" name="size6"></paper-item>
-                    <paper-item class="end-size7" name="size7"></paper-item>
-                    <paper-item class="end-size8" name="size8"></paper-item>
-                    <paper-item class="end-size9" name="size9"></paper-item>
-                  </paper-listbox>
-                </paper-dropdown-menu>
-              `
-            : html``}
-        </div>
-      </fieldset>
-    `
-  }
-
-  _isLine(selected: Component[]) {
-    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
-  }
-}

package/src/ox-editor-process-selector.ts

@@ -1,91 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-import './selector/ox-process-selector'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-editor-process-selector')
-export class ProcessSelector extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          position: relative;
-          display: inline-block;
-        }
-
-        input[type='text'] {
-          box-sizing: border-box;
-          width: 100%;
-          height: 100%;
-          border: 1px solid rgba(0, 0, 0, 0.2);
-        }
-
-        md-icon {
-          position: absolute;
-          top: 0;
-          right: 0;
-        }
-      `
-    ]
-  }
-
-  @property({ type: String }) value?: string
-  @property({ type: Object }) properties?: any
-
-  private popup: any
-
-  render() {
-    return html`
-      <input id="text" type="text" .value=${this.value || ''} @change=${(e: Event) => this._onInputChanged(e)} />
-
-      <md-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</md-icon>
-    `
-  }
-
-  _onInputChanged(e: Event) {
-    this.value = (e.target as any)?.value
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  openSelector() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    /*
-     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
-     * 주의. value는 object일 수도 있고, string일 수도 있다.
-     * string인 경우에는 해당 보드의 id로 해석한다.
-     */
-    var value = this.value || {}
-
-    var template = html`
-      <ox-process-selector
-        .creatable=${true}
-        .value=${value}
-        @process-selected=${async (e: CustomEvent) => {
-          var process = e.detail.process
-          this.value = process.id
-
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-          this.popup && this.popup.close()
-        }}
-      ></ox-process-selector>
-    `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.select process')
-    })
-  }
-}