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

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