@operato/app 1.0.0-alpha.3 → 1.0.0-alpha.30

package/src/grist-editor/ox-popup-value-map-input.ts

@@ -0,0 +1,101 @@
+import '@operato/input/ox-input-value-map.js'
+
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { ScrollbarStyles } from '@operato/styles'
+import { i18next } from '@operato/i18n'
+
+@customElement('ox-popup-value-map-input')
+export class OxPopupValueMapInput extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-input-value-map {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      span {
+        flex: 1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: var(--primary-color);
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: any
+  @property({ type: String }) valuetype: string = 'string'
+  @property({ type: Object }) confirmCallback!: (newval: any) => void
+
+  render() {
+    return html`
+      <ox-input-value-map
+        .value=${this.value}
+        keytype="string"
+        .valuetype=${this.valuetype}
+        @change=${this.onChange.bind(this)}
+      >
+      </ox-input-value-map>
+
+      <div class="button-container">
+        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
+        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      </div>
+    `
+  }
+
+  private onChange(e: CustomEvent) {
+    e.stopPropagation()
+
+    /* 
+      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
+      layout의 구성에 변화가 발생하면, 다시 render된다.
+      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
+      => 
+      이런 이유로, Object.assign(...)을 사용하였다.
+    */
+
+    if (!this.value) {
+      this.value = {}
+    }
+
+    for (let key in this.value) {
+      delete this.value[key]
+    }
+
+    Object.assign(this.value, e.detail)
+  }
+
+  private onCancel(e: Event) {
+    history.back()
+  }
+
+  private onConfirm(e: Event) {
+    this.confirmCallback && this.confirmCallback(this.value)
+    history.back()
+  }
+}

package/src/{grist/id-selector.ts → grist-editor/ox-selector-resource-id.ts}

@@ -9,8 +9,8 @@ import gql from 'graphql-tag'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 
-@customElement('ox-id-selector')
-export class IdSelector extends LitElement {
+@customElement('ox-selector-resource-id')
+export class OxSelectorResourceId extends LitElement {
   static styles = css`
     :host {
       display: flex;

package/src/{grist/object-selector.ts → grist-editor/ox-selector-resource-object.ts}

@@ -20,8 +20,8 @@ import gql from 'graphql-tag'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 
-@customElement('ox-object-selector')
-export class ObjectSelector extends LitElement {
+@customElement('ox-selector-resource-object')
+export class OxSelectorResourceObject extends LitElement {
   static styles = [
     MultiColumnFormStyles,
     css`
@@ -32,7 +32,7 @@ export class ObjectSelector extends LitElement {
         background-color: #fff;
       }
 
-      data-grist {
+      ox-grist {
         flex: 1;
       }
 

package/src/index.ts

@@ -1 +1,3 @@
-export * from './grist/index.js'
+export * from './input/index.js'
+export * from './property-editor'
+export * from './grist-editor/index.js'

package/src/input/index.ts

@@ -0,0 +1,3 @@
+export * from './ox-input-background-pattern.js'
+export * from './ox-input-fill-style.js'
+export * from './ox-input-graphql.js'

package/src/input/ox-input-background-pattern.ts

@@ -0,0 +1,166 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/i18n/ox-i18n.js'
+import '@operato/attachment/ox-attachment-selector.js'
+
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from '@operato/input'
+
+export type BackgroundPatternOption = {
+  image?: HTMLImageElement | string
+  align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'
+  offsetX?: number
+  offsetY?: number
+  width?: number
+  height?: number
+  fitPattern?: boolean
+}
+
+/**
+ * 컴포넌트의 fill pattern을 편집하는 element
+ *
+ * Example:
+ *  <ox-input-background-pattern
+ *    @change="${e => { this.pattern = e.target.value }}"
+ *    .value=${this.pattern}"
+ *  ></ox-input-background-pattern>
+ */
+
+@customElement('ox-input-background-pattern')
+export class OxInputBackgroundPattern extends OxFormField {
+  static styles = css`
+    :host,
+    .grid-10 {
+      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 2;
+      text-align: right;
+      text-transform: capitalize;
+
+      align-self: center;
+    }
+
+    .grid-10 {
+      grid-column: span 10;
+    }
+
+    select,
+    input,
+    [custom-editor] {
+      grid-column: span 8;
+    }
+
+    select {
+      height: 100%;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+
+    input[type='checkbox'] {
+      grid-column: 3 / 4;
+      align-self: center;
+    }
+
+    input[type='checkbox'] ~ label {
+      grid-column: span 7;
+      text-align: left;
+    }
+
+    .grid-10 > input[type='number'] {
+      grid-column: span 3;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+
+    .grid-10 > label {
+      grid-column: span 2;
+      text-align: right;
+    }
+  `
+
+  @property({ type: Object }) value?: BackgroundPatternOption
+
+  render() {
+    const value = this.value || ({} as BackgroundPatternOption)
+
+    return html`
+      <label> <ox-i18n msgid="label.image" auto="">image</ox-i18n> </label>
+
+      <ox-attachment-selector
+        value-key="image"
+        .value=${value.image || ''}
+        .properties=${{
+          category: 'image'
+        }}
+        custom-editor
+      ></ox-attachment-selector>
+
+      <label> <ox-i18n msgid="label.align" auto="">align</ox-i18n> </label>
+
+      <select value-key="align" class="select-content" .value=${value.align}>
+        <option value="left-top">Left Top</option>
+        <option value="top">Top</option>
+        <option value="right-top">Right Top</option>
+        <option value="left">Left</option>
+        <option value="center">Center</option>
+        <option value="right">Right</option>
+        <option value="left-bottom">Left Bottom</option>
+        <option value="bottom">Bottom</option>
+        <option value="right-bottom">Right Bottom</option>
+      </select>
+
+      <div class="grid-10">
+        <label> <ox-i18n msgid="label.offset-x" auto="">offsetX</ox-i18n> </label>
+        <input type="number" value-key="offsetX" .value=${value.offsetX} />
+
+        <label> <ox-i18n msgid="label.offset-y" auto="">offsetY</ox-i18n> </label>
+        <input type="number" value-key="offsetY" .value=${value.offsetY} />
+
+        <label> <ox-i18n msgid="label.width" auto="">width</ox-i18n> </label>
+        <input type="number" value-key="width" .value=${value.width} />
+
+        <label> <ox-i18n msgid="label.height" auto="">height</ox-i18n> </label>
+        <input type="number" value-key="height" .value=${value.height} />
+      </div>
+
+      <div class="grid-10">
+        <input value-key="fitPattern" type="checkbox" .checked=${value.fitPattern} required />
+        <label> <ox-i18n msgid="label.fit" auto="">Fit</ox-i18n> </label>
+      </div>
+    `
+  }
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
+
+  _onChange(e: Event) {
+    var element = e.target as HTMLInputElement
+    var key = element.getAttribute('value-key')
+    var value: any = element.value
+
+    if (key == 'fitPattern') {
+      value = element.checked
+    }
+
+    this.value = {
+      ...this.value,
+      [key!]: value
+    }
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+}

package/src/input/ox-input-fill-style.ts

@@ -0,0 +1,359 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/i18n/ox-i18n.js'
+import '@operato/input/ox-input-color.js'
+import '@operato/input/ox-input-color-stops.js'
+import '@operato/input/ox-input-color-gradient.js'
+import './ox-input-background-pattern.js'
+
+import { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'
+import { ColorStop, GradientOption, OxFormField, OxInputColorGradient } from '@operato/input'
+import { PropertyValues, css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+export type FillStyle =
+  | {
+      type?: 'no' | 'solid' | 'gradient' | 'pattern'
+      gradientType?: 'linear' | 'radial'
+      colorStops?: ColorStop[]
+      rotation?: number
+      center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'
+      image?: HTMLImageElement | string
+      offsetX?: number
+      offsetY?: number
+      width?: number
+      height?: number
+      align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'
+      fitPattern?: boolean
+    }
+  | 'no'
+  | string
+
+@customElement('ox-input-fill-style')
+export class OxInputColorStyle extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
+
+    [fill-type] {
+      display: flex;
+      margin: 0 0 14px 0;
+    }
+
+    [fill-type] * {
+      flex: auto;
+      margin: 0;
+      text-align: left;
+      align-self: center;
+    }
+
+    .grid-10 {
+      display: grid;
+
+      grid-template-columns: repeat(10, 1fr);
+      grid-gap: 5px;
+      grid-auto-rows: minmax(24px, auto);
+    }
+
+    .grid-10 > ox-input-color {
+      grid-column: span 4;
+    }
+
+    .grid-10 > .icon-only-label {
+      grid-column: span 1;
+
+      background: url(/assets/images/icon-properties-label.png) no-repeat;
+      float: left;
+      margin: 0;
+    }
+
+    .icon-only-label.color {
+      background-position: 70% -498px;
+    }
+
+    [editors] > :not([active]) {
+      display: none;
+    }
+  `
+
+  @property({ type: Object }) value?: FillStyle
+  @property({ type: String }) fillType?: string
+  @property({ type: String }) solid?: string
+  @property({ type: Object }) gradient?: GradientOption
+  @property({ type: Object }) pattern?: BackgroundPatternOption
+
+  private _block_reset: boolean = false
+
+  updated(changes: PropertyValues<this>) {
+    changes.has('value') && this._onChangedValue(this.value || {})
+  }
+
+  render() {
+    return html`
+      <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>
+        <input
+          type="radio"
+          id="fill-type-no"
+          name="fill-type"
+          value="no"
+          .checked=${!this.fillType || this.fillType == 'no'}
+        />
+        <label for="fill-type-no"><ox-i18n msgid="label.no-fill">no fill</ox-i18n></label>
+        <input type="radio" id="fill-type-solid" name="fill-type" value="solid" .checked=${this.fillType == 'solid'} />
+        <label for="fill-type-solid"><ox-i18n msgid="label.solid">solid</ox-i18n></label>
+        <input
+          type="radio"
+          id="fill-type-gradient"
+          name="fill-type"
+          value="gradient"
+          .checked=${this.fillType == 'gradient'}
+        />
+        <label for="fill-type-gradient"><ox-i18n msgid="label.gradient">gradient</ox-i18n></label>
+        <input
+          type="radio"
+          id="fill-type-pattern"
+          name="fill-type"
+          value="pattern"
+          .checked=${this.fillType == 'pattern'}
+        />
+        <label for="fill-type-pattern"><ox-i18n msgid="label.pattern">pattern</ox-i18n></label>
+      </div>
+
+      <div editors>
+        <div ?active=${this.fillType == 'no'}></div>
+
+        <div class="grid-10" ?active=${this.fillType == 'solid'}>
+          <label class="icon-only-label color"></label>
+          <ox-input-color @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}> </ox-input-color>
+        </div>
+
+        <div ?active=${this.fillType == 'gradient'}>
+          <ox-input-color-gradient @change=${(e: Event) => this._onChandedGradient(e)} .value=${this.gradient}>
+          </ox-input-color-gradient>
+        </div>
+
+        <div ?active=${this.fillType == 'pattern'}>
+          <ox-input-background-pattern @change=${(e: Event) => this._onChangedPattern(e)} .value=${this.pattern}>
+          </ox-input-background-pattern>
+        </div>
+      </div>
+    `
+  }
+
+  async _onChangedValue(value: FillStyle) {
+    /*
+     * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.
+     */
+    await this.requestUpdate()
+
+    /* 설정 값에 따라서, 멤버 속성을 설정한다. */
+    if (!value) {
+      this.fillType = 'no'
+
+      if (!this._block_reset) {
+        this.solid = undefined
+        this.gradient = undefined
+        this.pattern = undefined
+      }
+
+      this._block_reset = false
+      return
+    }
+
+    switch (typeof value) {
+      case 'string':
+        this.fillType = 'solid'
+        this.solid = value
+
+        if (!this._block_reset) {
+          this.gradient = undefined
+          this.pattern = undefined
+        }
+        break
+      case 'object':
+        this.fillType = value.type
+
+        if (value.type === 'gradient') {
+          this.gradient = {
+            type: value.gradientType || 'linear',
+            colorStops: value.colorStops || [
+              {
+                position: 0,
+                color: this.solid || '#000000'
+              },
+              {
+                position: 1,
+                color: this.solid || '#FFFFFF'
+              }
+            ],
+            rotation: Number(value.rotation) || 0,
+            center: value.center
+          }
+
+          if (!this._block_reset) {
+            this.pattern = undefined
+            this.solid = undefined
+          }
+        } else if (value.type === 'pattern') {
+          this.pattern = {
+            image: value.image,
+            offsetX: Number(value.offsetX) || 0,
+            offsetY: Number(value.offsetY) || 0,
+            width: Number(value.width),
+            height: Number(value.height),
+            align: value.align,
+            fitPattern: value.fitPattern
+          }
+
+          if (!this._block_reset) {
+            this.gradient = undefined
+            this.solid = undefined
+          }
+        }
+
+        break
+      default:
+    }
+
+    this._block_reset = false
+  }
+
+  _onChangedFillType(e: Event) {
+    const element = e.target as HTMLInputElement
+    this.fillType = element.value
+
+    switch (this.fillType) {
+      case 'gradient':
+        if (!this.gradient) {
+          this.gradient = {
+            type: 'linear',
+            colorStops: [
+              {
+                position: 0,
+                color: this.solid || '#000000'
+              },
+              {
+                position: 1,
+                color: this.solid || '#FFFFFF'
+              }
+            ],
+            rotation: 0,
+            center: 'center'
+          }
+        }
+
+        this.value = {
+          type: 'gradient',
+          gradientType: this.gradient.type || 'linear',
+          colorStops: this.gradient.colorStops || [
+            {
+              position: 0,
+              color: this.solid || '#000000'
+            },
+            {
+              position: 1,
+              color: this.solid || '#FFFFFF'
+            }
+          ],
+          rotation: Number(this.gradient.rotation) || 0,
+          center: this.gradient.center
+        }
+        break
+
+      case 'pattern':
+        if (!this.pattern) this.pattern = {}
+
+        this.value = {
+          type: 'pattern',
+          image: this.pattern.image,
+          offsetX: Number(this.pattern.offsetX) || 0,
+          offsetY: Number(this.pattern.offsetY) || 0,
+          width: Number(this.pattern.width),
+          height: Number(this.pattern.height),
+          align: this.pattern.align,
+          fitPattern: this.pattern.fitPattern
+        }
+        break
+
+      case 'solid':
+        if (!this.solid) this.solid = '#fff'
+        this.value = this.solid
+        break
+
+      case 'no':
+        this.value = ''
+        break
+    }
+
+    this._block_reset = true
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  _onChangedSolid(e: Event) {
+    if (this.fillType !== 'solid') return
+
+    this.solid = (e.target as HTMLInputElement).value
+
+    this.value = this.solid
+
+    this._block_reset = true
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  _onChandedGradient(e: Event) {
+    /*
+     * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.
+     * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.
+     */
+
+    if (this.fillType !== 'gradient') {
+      return
+    }
+
+    this.gradient = (e.target as OxInputColorGradient).value
+
+    this.value = {
+      type: 'gradient',
+      gradientType: this.gradient.type || 'linear',
+      colorStops: this.gradient.colorStops || [
+        {
+          position: 0,
+          color: this.solid || '#000000'
+        },
+        {
+          position: 1,
+          color: this.solid || '#FFFFFF'
+        }
+      ],
+      rotation: Number(this.gradient.rotation) || 0,
+      center: this.gradient.center
+    }
+
+    this._block_reset = true
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  _onChangedPattern(e: Event) {
+    if (this.fillType !== 'pattern') return
+
+    this.pattern = (e.target as OxInputBackgroundPattern).value
+
+    this.value = {
+      type: 'pattern',
+      image: this.pattern?.image,
+      offsetX: Number(this.pattern?.offsetX) || 0,
+      offsetY: Number(this.pattern?.offsetY) || 0,
+      width: Number(this.pattern?.width),
+      height: Number(this.pattern?.height),
+      align: this.pattern?.align,
+      fitPattern: this.pattern?.fitPattern
+    }
+
+    this._block_reset = true
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+}