@operato/app 1.0.0-alpha.2 → 1.0.0-alpha.22

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 }))
+  }
+}

package/src/input/ox-input-graphql.ts

@@ -0,0 +1,169 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import 'codemirror/addon/display/fullscreen'
+import 'codemirror/addon/display/autorefresh'
+import 'codemirror/addon/hint/show-hint'
+import 'codemirror/addon/lint/lint'
+import 'codemirror-graphql/hint'
+import 'codemirror-graphql/lint'
+import 'codemirror-graphql/mode'
+
+import { GRAPHQL_URI, client } from '@operato/graphql'
+import { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
+
+import CodeMirror from 'codemirror'
+import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
+import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'
+import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'
+import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
+import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'
+import { fetch } from 'cross-fetch'
+import { print } from 'graphql'
+
+/**
+ WEB Component for code-mirror graphql editor.
+ 
+ Example:
+ 
+   <ox-input-graphql value=${text} link=${link}>
+   </ox-input-graphql>
+ */
+@customElement('ox-input-graphql')
+export default class OxInputGraphql extends LitElement {
+  static styles = [
+    css`
+      ${unsafeCSS(CodeMirrorStyle)}
+      ${unsafeCSS(FullScreenStyle)}
+         ${unsafeCSS(NightThemeStyle)}
+         ${unsafeCSS(LintStyle)}
+         ${unsafeCSS(ShowHintStyle)}
+    `,
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      textarea {
+        display: block;
+        height: 100%;
+        width: 100%;
+        resize: none;
+        font-size: 16px;
+        line-height: 20px;
+        border: 0px;
+        padding: 0px;
+      }
+    `
+  ]
+
+  /**
+   * `value`는 에디터에서 작성중인 contents이다.
+   */
+  @property({ type: String }) value?: string
+  @property({ type: String }) link?: string
+
+  @query('textarea') textarea!: HTMLTextAreaElement
+
+  private _self_changing: boolean = false
+  private _changed: boolean = false
+  private _editor?: CodeMirror.EditorFromTextArea
+
+  async updated(changes: PropertyValues<this>) {
+    if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {
+      if (changes.has('link')) {
+        this._editor = undefined
+      }
+      ;(await this.getEditor())!.setValue(this.value === undefined ? '' : String(this.value))
+      // ;(await this.getEditor()).refresh()
+    }
+  }
+
+  render() {
+    return html` <textarea></textarea> `
+  }
+
+  async getSchema() {
+    const executor = async ({ document, variables }: any) => {
+      const query = print(document)
+      const uri = this.link || GRAPHQL_URI
+
+      const fetchResult = await fetch(uri, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ query, variables })
+      })
+      return fetchResult.json()
+    }
+
+    return await wrapSchema({
+      schema: await introspectSchema(executor),
+      executor
+    })
+  }
+
+  async getEditor() {
+    if (!this._editor) {
+      try {
+        var schema = await this.getSchema()
+      } catch (err) {
+        console.error(err)
+      }
+
+      if (this.textarea) {
+        this._editor = CodeMirror.fromTextArea(this.textarea, {
+          value: this.value,
+          mode: 'graphql',
+          lint: {
+            //@ts-ignore
+            schema
+          },
+          hintOptions: {
+            //@ts-ignore
+            schema
+          },
+          tabSize: 2,
+          lineNumbers: false,
+          showCursorWhenSelecting: true,
+          theme: 'night',
+          extraKeys: {
+            F11: function (cm) {
+              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+            },
+            Esc: function (cm) {
+              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+            }
+          },
+          autoRefresh: {
+            delay: 500
+          }
+        })
+
+        this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {
+          if (!this._changed) return
+
+          this.value = editor.getValue()
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+        })
+
+        this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {
+          this._self_changing = true
+
+          this._changed = true
+
+          await this.requestUpdate()
+
+          this._self_changing = false
+        })
+      }
+    }
+
+    return this._editor
+  }
+}

package/src/property-editor/index.ts

@@ -0,0 +1,59 @@
+import '@operato/property-editor/ox-property-editor-legend.js'
+import '@operato/property-editor/ox-property-editor-number.js'
+import '@operato/property-editor/ox-property-editor-password.js'
+import '@operato/property-editor/ox-property-editor-angle.js'
+import '@operato/property-editor/ox-property-editor-string.js'
+import '@operato/property-editor/ox-property-editor-data.js'
+import '@operato/property-editor/ox-property-editor-date.js'
+import '@operato/property-editor/ox-property-editor-checkbox.js'
+import '@operato/property-editor/ox-property-editor-options.js'
+import '@operato/property-editor/ox-property-editor-select.js'
+import '@operato/property-editor/ox-property-editor-scene-component-id.js'
+import '@operato/property-editor/ox-property-editor-color.js'
+import '@operato/property-editor/ox-property-editor-multiple-colors.js'
+import '@operato/property-editor/ox-property-editor-solid-colorstops.js'
+import '@operato/property-editor/ox-property-editor-gradient-colorstops.js'
+import '@operato/property-editor/ox-property-editor-gradient-colorstops.js'
+import '@operato/property-editor/ox-property-editor-textarea.js'
+import '@operato/property-editor/ox-property-editor-table.js'
+import '@operato/property-editor/ox-property-editor-value-map.js'
+import '@operato/property-editor/ox-property-editor-value-ranges.js'
+import '@operato/attachment/ox-property-editor-attachment-selector.js'
+import '@operato/attachment/ox-property-editor-image-selector.js'
+import '@operato/font/ox-property-editor-font-selector.js'
+import './ox-property-editor-graphql.js'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+
+OxPropertyEditor.register({
+  legend: 'ox-property-editor-legend',
+  number: 'ox-property-editor-number',
+  slider: 'ox-property-editor-range',
+  password: 'ox-property-editor-password',
+  angle: 'ox-property-editor-angle',
+  string: 'ox-property-editor-string',
+  textarea: 'ox-property-editor-textarea',
+  javascript: 'ox-property-editor-textarea',
+  checkbox: 'ox-property-editor-checkbox',
+  boolean: 'ox-property-editor-checkbox',
+  select: 'ox-property-editor-select',
+  date: 'ox-property-editor-date',
+  options: 'ox-property-editor-options',
+  data: 'ox-property-editor-data',
+  file: 'ox-property-editor-file',
+  image: 'ox-property-editor-image',
+  'range-input': 'ox-property-editor-range',
+  'attachment-selector': 'ox-property-editor-attachment-selector',
+  'gltf-selector': 'ox-property-editor-attachment-selector',
+  'image-selector': 'ox-property-editor-image-selector',
+  color: 'ox-property-editor-color',
+  'solid-color-stops': 'ox-property-editor-solid-colorstops',
+  'gradient-color-stops': 'ox-property-editor-gradient-colorstops',
+  'multiple-color': 'ox-property-editor-multiple-colors',
+  map: 'ox-property-editor-value-map',
+  range: 'ox-property-editor-value-ranges',
+  graphql: 'ox-property-editor-graphql',
+  'editor-table': 'ox-property-editor-table',
+  'id-input': 'ox-property-editor-scene-component-id',
+  'font-selector': 'ox-property-editor-font-selector'
+})

package/src/property-editor/ox-property-editor-graphql.ts

@@ -0,0 +1,12 @@
+import '../input/ox-input-graphql.js'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+import { customElement } from 'lit/decorators.js'
+import { html } from 'lit'
+
+@customElement('ox-property-editor-graphql')
+export class OxPropertyEditorGraphQL extends OxPropertyEditor {
+  editorTemplate() {
+    return html` <ox-input-graphql id="editor" .value=${this.value} fullwidth> </ox-input-graphql> `
+  }
+}