@operato/app 8.0.0-beta.0 → 8.0.0-beta.2

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

@@ -1,377 +0,0 @@
-/**
- * @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 { css, html, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { ColorStop, GradientOption, OxFormField, OxInputColorGradient } from '@operato/input'
-
-import { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.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
-      noRepeat?: boolean
-      color?: string
-    }
-  | '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: var(--url-icon-properties-label) no-repeat;
-      float: left;
-      margin: 0;
-    }
-
-    .icon-only-label.color {
-      background-position: 100% -500px;
-    }
-
-    [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
-
-  @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false
-
-  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>
-
-        ${this.colorOnly
-          ? html``
-          : html`
-              <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,
-            noRepeat: value.noRepeat,
-            color: value.color
-          }
-
-          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,
-          noRepeat: this.pattern.noRepeat,
-          color: this.pattern.color
-        }
-        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,
-      noRepeat: this.pattern?.noRepeat,
-      color: this.pattern?.color
-    }
-
-    this._block_reset = true
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}

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

@@ -1,153 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { print } from 'graphql'
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { graphql } from 'cm6-graphql'
-
-import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
-import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
-import { bracketMatching, syntaxHighlighting } from '@codemirror/language'
-import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
-import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'
-
-import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
-import { GRAPHQL_URI } from '@operato/graphql'
-import { OxFormField } from '@operato/input'
-import { togglefullscreen } from '@operato/utils'
-
-/**
- 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 OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        background: white;
-        overflow: auto;
-      }
-
-      .cm-editor {
-        flex: 1;
-      }
-    `
-  ]
-
-  /**
-   * `value`는 에디터에서 작성중인 contents이다.
-   */
-  @property({ type: String }) value?: string
-  @property({ type: String }) link?: string
-  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false
-
-  private _self_changing: boolean = false
-  private _editor?: EditorView
-  private _changed: boolean = false
-
-  async updated(changes: PropertyValues<this>) {
-    const editor = await this.getEditor()
-    if (changes.has('value') && editor && !this._self_changing) {
-      const to = editor.state.doc.toString().length
-      editor.dispatch({
-        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
-      })
-    }
-  }
-
-  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) {
-      var schema
-      try {
-        schema = await this.getSchema()
-      } catch (err) {
-        console.error(err)
-      }
-
-      this._editor = new EditorView({
-        doc: this.value,
-        extensions: [
-          ...(this.showLineNumbers ? [lineNumbers()] : []),
-          bracketMatching(),
-          closeBrackets(),
-          history(),
-          autocompletion(),
-          oneDark,
-          syntaxHighlighting(oneDarkHighlightStyle),
-          graphql(schema, {
-            onShowInDocs(field, type, parentType) {
-              alert(`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`)
-            },
-            onFillAllFields(view, schema, _query, cursor, token) {
-              alert(`Filling all fields. Token: ${token}`)
-            }
-          }),
-          highlightActiveLine(),
-          history(),
-          keymap.of([...historyKeymap, indentWithTab]),
-          EditorView.updateListener.of(async v => {
-            if (v.docChanged) {
-              this._self_changing = true
-              this._changed = true
-
-              await this.updateComplete
-
-              this._self_changing = false
-            }
-          })
-        ],
-        parent: this.renderRoot
-      })
-    }
-
-    this._editor.contentDOM.addEventListener('keydown', event => {
-      event.stopPropagation()
-
-      if (event.key === 'Escape') {
-        togglefullscreen(this._editor!.contentDOM)
-      }
-    })
-
-    this._editor.contentDOM.addEventListener('blur', e => {
-      if (!this._changed) {
-        return
-      }
-
-      this.value = this._editor!.state.doc.toString()
-      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-    })
-
-    return this._editor
-  }
-}

package/src/property-editor/index.ts

@@ -1,83 +0,0 @@
-import '@operato/property-editor/ox-property-editor-3axis.js'
-import '@operato/property-editor/ox-property-editor-3dish.js'
-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-unit-number.js'
-import '@operato/property-editor/ox-property-editor-password.js'
-import '@operato/property-editor/ox-property-editor-action.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-month.js'
-import '@operato/property-editor/ox-property-editor-time.js'
-import '@operato/property-editor/ox-property-editor-datetime.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-textarea.js'
-import '@operato/property-editor/ox-property-editor-table.js'
-import '@operato/property-editor/ox-property-editor-key-values.js'
-import '@operato/property-editor/ox-property-editor-partition-keys.js'
-import '@operato/property-editor/ox-property-editor-value-map.js'
-import '@operato/property-editor/ox-property-editor-value-ranges.js'
-import '@operato/property-editor/ox-property-editor-hashtags.js'
-import '@operato/property-editor/ox-property-editor-image.js'
-import '@operato/property-editor/ox-property-editor-file.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 './ox-property-editor-resource-object.js'
-
-import { OxPropertyEditor } from '@operato/property-editor'
-
-OxPropertyEditor.register({
-  '3axis': 'ox-property-editor-3axis',
-  '3dish': 'ox-property-editor-3dish',
-  legend: 'ox-property-editor-legend',
-  number: 'ox-property-editor-number',
-  'unit-number': 'ox-property-editor-unit-number',
-  slider: 'ox-property-editor-range',
-  password: 'ox-property-editor-password',
-  action: 'ox-property-editor-action',
-  angle: 'ox-property-editor-angle',
-  string: 'ox-property-editor-string',
-  textarea: 'ox-property-editor-textarea',
-  javascript: 'ox-property-editor-textarea',
-  script: 'ox-property-editor-textarea',
-  checkbox: 'ox-property-editor-checkbox',
-  boolean: 'ox-property-editor-checkbox',
-  select: 'ox-property-editor-select',
-  date: 'ox-property-editor-date',
-  month: 'ox-property-editor-month',
-  datetime: 'ox-property-editor-datetime',
-  time: 'ox-property-editor-time',
-  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',
-  'partition-keys': 'ox-property-editor-partion-keys',
-  'key-values': 'ox-property-editor-key-values',
-  hashtags: 'ox-property-editor-hashtags',
-  'resource-object': 'ox-property-editor-resource-object'
-})

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

@@ -1,22 +0,0 @@
-import '../input/ox-input-graphql.js'
-
-import { css, html, TemplateResult } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-
-@customElement('ox-property-editor-graphql')
-export class OxPropertyEditorGraphQL extends OxPropertyEditor {
-  static styles = [
-    ...OxPropertyEditor.styles,
-    css`
-      :host {
-        grid-template-rows: auto 1fr;
-      }
-    `
-  ]
-
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    return html` <ox-input-graphql class="multiline-input" id="editor" .value=${value} fullwidth> </ox-input-graphql> `
-  }
-}