@things-factory/modeller-ui 5.0.0-alpha.5 → 5.0.0-alpha.6

package/client/bootstrap.js

@@ -1,33 +1,29 @@
 import { OxPropertyEditor } from '@operato/property-editor'
+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/app/property-editor/ox-property-editor-graphql.js'
 
 export default function bootstrap() {
   OxPropertyEditor.register({
-    legend: 'property-editor-legend',
-    number: 'property-editor-number',
-    password: 'property-editor-password',
-    angle: 'property-editor-angle',
-    string: 'property-editor-string',
-    textarea: 'property-editor-textarea',
-    javascript: 'property-editor-textarea',
-    graphql: 'property-editor-graphql',
-    data: 'property-editor-data',
-    checkbox: 'property-editor-checkbox',
-    boolean: 'property-editor-checkbox',
-    select: 'property-editor-select',
-    color: 'property-editor-color',
-    'solid-color-stops': 'property-editor-solid-colorstops',
-    'gradient-color-stops': 'property-editor-gradient-colorstops',
-    'multiple-color': 'property-editor-multiple-color',
-    'editor-table': 'property-editor-table',
-    'id-input': 'property-editor-id',
-    'range-input': 'property-editor-range-input',
-    options: 'property-editor-options',
-    date: 'property-editor-date',
-    map: 'property-editor-value-map',
-    range: 'property-editor-value-range',
-    'attachment-selector': 'property-editor-attachment-selector',
-    'gltf-selector': 'property-editor-attachment-selector',
-    'image-selector': 'property-editor-image-selector',
     'font-selector': 'property-editor-font-selector'
   })
 }

package/client/editors/things-editor-layout/things-card-layout.js

@@ -45,7 +45,7 @@ class ThingsCardLayout extends LitElement {
   render() {
     return html`
       <label>active index</label>
-      <input type="number" value-key="activeIndex" .value=${this.activeIndex}></input>
+      <input type="number" value-key="activeIndex" .value=${this.activeIndex} />
     `
   }
 

package/client/editors/things-editor-property.js

@@ -2,557 +2,12 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
-import './things-editor-angle-input'
-import './things-editor-range-input'
-import './things-editor-code'
-import './things-editor-graphql'
-import './things-editor-data'
-import './things-editor-color'
-import './things-editor-color-stops'
-import './things-editor-id'
-import './things-editor-multiple-color'
-import './things-editor-options'
-import './things-editor-table'
-import './things-editor-value-map'
-import './things-editor-value-range'
-import './things-editor-attachment-selector'
 import './things-editor-font-selector'
-import '@operato/input/ox-select.js'
-import '@operato/input/ox-checkbox.js'
-import '@operato/popup/ox-popup-list.js'
 
-import { css, html } from 'lit'
+import { html } from 'lit'
 
 import { OxPropertyEditor } from '@operato/property-editor'
 
-class PropertyEditorLegend extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-legend'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html` <legend>${props.property.label}</legend> `
-  }
-}
-
-customElements.define(PropertyEditorLegend.is, PropertyEditorLegend)
-
-class PropertyEditorNumber extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-number'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html`
-      <input
-        id="editor"
-        type="number"
-        placeholder=${props.placeholder || ''}
-        .value=${props.value}
-        .step=${props.property && props.property.step}
-        .min=${props.property && props.property.min}
-        .max=${props.property && props.property.max}
-        @focus=${e => {
-          var el = e.currentTarget
-          el.lastValidValue = el.value
-        }}
-        @input=${e => {
-          var el = e.currentTarget
-          var validity = el.checkValidity()
-          if (validity) el.lastValidValue = el.value
-          else el.value = el.lastValidValue || ''
-        }}
-        @blur=${e => {
-          var el = e.currentTarget
-          delete el.lastValidValue
-        }}
-      />
-    `
-  }
-}
-
-customElements.define(PropertyEditorNumber.is, PropertyEditorNumber)
-
-class PropertyEditorRangeInput extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-range-input'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html`
-      <things-editor-range-input
-        id="editor"
-        .value=${props.value}
-        .step=${props.property && props.property.step}
-        .min=${props.property && props.property.min}
-        .max=${props.property && props.property.max}
-      ></things-editor-range-input>
-    `
-  }
-}
-
-customElements.define(PropertyEditorRangeInput.is, PropertyEditorRangeInput)
-
-class PropertyEditorAngle extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-angle'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  get valueProperty() {
-    return 'radian'
-  }
-
-  editorTemplate(props) {
-    return html`
-      <things-editor-angle-input
-        id="editor"
-        .radian=${props.value}
-        placeholder=${props.placeholder || ''}
-      ></things-editor-angle-input>
-    `
-  }
-}
-
-customElements.define(PropertyEditorAngle.is, PropertyEditorAngle)
-
-class PropertyEditorString extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-string'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html` <input type="text" id="editor" .value=${props.value} placeholder=${props.placeholder || ''} /> `
-  }
-}
-
-customElements.define(PropertyEditorString.is, PropertyEditorString)
-
-class PropertyEditorPassword extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-password'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html` <input type="password" id="editor" .value=${props.value} placeholder=${props.placeholder || ''} /> `
-  }
-}
-
-customElements.define(PropertyEditorPassword.is, PropertyEditorPassword)
-
-class PropertyEditorTextArea extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-textarea'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html`
-      <things-editor-code
-        id="editor"
-        .value=${props.value}
-        mode="${props.property?.mode || ''}"
-        tab-size="${props.property?.tabSize || ''}"
-        tab-as-space="${props.property?.tabAsSpace || 'false'}"
-        fullwidth
-      >
-      </things-editor-code>
-    `
-  }
-}
-
-customElements.define(PropertyEditorTextArea.is, PropertyEditorTextArea)
-
-class PropertyEditorGraphQL extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-graphql'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html` <things-editor-graphql id="editor" .value=${props.value} fullwidth> </things-editor-graphql> `
-  }
-}
-
-customElements.define(PropertyEditorGraphQL.is, PropertyEditorGraphQL)
-
-class PropertyEditorData extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-data'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html` <things-editor-data id="editor" .value=${props.value} fullwidth> </things-editor-data> `
-  }
-}
-
-customElements.define(PropertyEditorData.is, PropertyEditorData)
-
-class PropertyEditorCheckbox extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-checkbox'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  get valueProperty() {
-    return 'checked'
-  }
-
-  editorTemplate(props) {
-    return html` <input type="checkbox" id="editor" .checked=${props.value} placeholder=${props.placeholder || ''} /> `
-  }
-}
-
-customElements.define(PropertyEditorCheckbox.is, PropertyEditorCheckbox)
-
-class PropertyEditorSelect extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-select'
-  }
-
-  static get styles() {
-    return [
-      ...OxPropertyEditor.styles,
-      css`
-        ox-select {
-          background-color: var(--theme-white-color);
-          padding: 1px 2px;
-          color: var(--theme-black-color);
-          font-size: 13.5px;
-        }
-      `
-    ]
-  }
-
-  async connectedCallback() {
-    super.connectedCallback()
-
-    var options = this.property?.options
-    if (typeof options === 'function') {
-      this.property = {
-        ...this.property,
-        options: await options.apply(this)
-      }
-    }
-  }
-
-  editorTemplate(props) {
-    var options = props.property?.options
-    if (!(options instanceof Array)) {
-      options = []
-    }
-
-    return html`
-      <ox-select id="editor" .value=${props.value} placeholder="${props.placeholder}">
-        <ox-popup-list with-search>
-          ${options.map(
-            item => html`
-              <div option value=${props._getOptionValue(item)} ?selected=${props._isSelected(props.value, item)}>
-                ${this._getOptionDisplay(item) || html`&nbsp;`}
-              </div>
-            `
-          )}
-        </ox-popup-list>
-      </ox-select>
-    `
-  }
-
-  _getOptionValue(item) {
-    if (typeof item == 'string') return item
-
-    return item.value
-  }
-
-  _getOptionDisplay(item) {
-    if (typeof item == 'string') return item
-
-    return item.display
-  }
-
-  _isSelected(value, item) {
-    return value == this._getOptionValue(item)
-  }
-}
-
-customElements.define(PropertyEditorSelect.is, PropertyEditorSelect)
-
-class PropertyEditorColor extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-color'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html`
-      <things-editor-color
-        id="editor"
-        .value=${props.value}
-        placeholder=${props.placeholder || ''}
-        .properties=${props.property}
-      ></things-editor-color>
-    `
-  }
-}
-
-customElements.define(PropertyEditorColor.is, PropertyEditorColor)
-
-class PropertyEditorSolidColorStops extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-solid-colorstops'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html`
-      <things-editor-color-stops
-        id="editor"
-        type="solid"
-        .value=${props.value}
-        .min=${props.property && props.property.min}
-        .max=${props.property && props.property.max}
-        fullwidth
-      >
-      </things-editor-color-stops>
-    `
-  }
-}
-
-customElements.define(PropertyEditorSolidColorStops.is, PropertyEditorSolidColorStops)
-
-class PropertyEditorGradientColorStops extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-gradient-colorstops'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html`
-      <things-editor-color-stops
-        id="editor"
-        type="gradient"
-        .value=${props.value}
-        .min=${props.property && props.property.min}
-        .max=${props.property && props.property.max}
-        fullwidth
-      >
-      </things-editor-color-stops>
-    `
-  }
-}
-
-customElements.define(PropertyEditorGradientColorStops.is, PropertyEditorGradientColorStops)
-
-class PropertyEditorMultipleColor extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-multiple-color'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  get valueProperty() {
-    return 'values'
-  }
-
-  editorTemplate(props) {
-    return html` <things-editor-multiple-color id="editor" .values=${props.value}></things-editor-multiple-color> `
-  }
-}
-
-customElements.define(PropertyEditorMultipleColor.is, PropertyEditorMultipleColor)
-
-class PropertyEditorDate extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-date'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html` <input type="date" id="editor" .value=${props.value} /> `
-  }
-}
-
-customElements.define(PropertyEditorDate.is, PropertyEditorDate)
-
-class PropertyEditorOptions extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-options'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  get valueProperty() {
-    return 'options'
-  }
-
-  editorTemplate(props) {
-    return html` <things-editor-options id="editor" .options=${props.value} fullwidth></things-editor-options> `
-  }
-}
-
-customElements.define(PropertyEditorOptions.is, PropertyEditorOptions)
-
-class PropertyEditorTable extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-table'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html` <things-editor-table id="editor" .property=${props.property} fullwidth></things-editor-table> `
-  }
-}
-
-customElements.define(PropertyEditorTable.is, PropertyEditorTable)
-
-class PropertyEditorId extends OxPropertyEditor {
-  static get is() {
-    return 'property-editor-id'
-  }
-
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html` <things-editor-id id="editor" .value=${props.value} .property=${props.property}></things-editor-id> `
-  }
-}
-
-customElements.define(PropertyEditorId.is, PropertyEditorId)
-
-class PropertyEditorValueMap extends OxPropertyEditor {
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    const { value, property } = props
-    const valuetype = property?.valuetype || 'string'
-    /* IMPLEMENT-ME valuetype 에 editor를 전달할 수 있는 기능 개발 */
-
-    return html`
-      <things-editor-value-map id="editor" .valuetype=${valuetype} .value=${value} fullwidth></things-editor-value-map>
-    `
-  }
-}
-
-customElements.define('property-editor-value-map', PropertyEditorValueMap)
-
-class PropertyEditorValueRange extends OxPropertyEditor {
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    const { value, property } = props
-    const valuetype = property?.valuetype || 'string'
-    /* IMPLEMENT-ME valuetype 에 editor를 전달할 수 있는 기능 개발 */
-
-    return html`
-      <things-editor-value-range
-        id="editor"
-        .valuetype=${valuetype}
-        .value=${value}
-        fullwidth
-      ></things-editor-value-range>
-    `
-  }
-}
-
-customElements.define('property-editor-value-range', PropertyEditorValueRange)
-
-class PropertyEditorAttachmentSelector extends OxPropertyEditor {
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html`
-      <things-editor-attachment-selector
-        id="editor"
-        .value=${props.value}
-        .properties=${props.property}
-      ></things-editor-attachment-selector>
-    `
-  }
-}
-
-customElements.define('property-editor-attachment-selector', PropertyEditorAttachmentSelector)
-
-class PropertyEditorImageSelector extends OxPropertyEditor {
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(props) {
-    return html`
-      <things-editor-attachment-selector
-        id="editor"
-        .value=${props.value}
-        .properties=${Object.assign({ category: 'image' }, props)}
-      ></things-editor-attachment-selector>
-    `
-  }
-}
-
-customElements.define('property-editor-image-selector', PropertyEditorImageSelector)
-
 class PropertyEditorFontSelector extends OxPropertyEditor {
   static get styles() {
     return [...OxPropertyEditor.styles]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/modeller-ui",
-  "version": "5.0.0-alpha.5",
+  "version": "5.0.0-alpha.6",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -29,14 +29,15 @@
     "@graphql-tools/url-loader": "^7.2.0",
     "@graphql-tools/wrap": "^8.1.1",
     "@material/mwc-icon": "^0.25.3",
-    "@operato/graphql": "1.0.0-alpha.4",
-    "@operato/help": "1.0.0-alpha.4",
-    "@operato/input": "1.0.0-alpha.4",
-    "@operato/layout": "1.0.0-alpha.4",
-    "@operato/popup": "1.0.0-alpha.4",
-    "@operato/property-editor": "1.0.0-alpha.4",
-    "@operato/shell": "1.0.0-alpha.4",
-    "@operato/utils": "1.0.0-alpha.4",
+    "@operato/attachment": "1.0.0-alpha.14",
+    "@operato/graphql": "1.0.0-alpha.14",
+    "@operato/help": "1.0.0-alpha.14",
+    "@operato/input": "1.0.0-alpha.14",
+    "@operato/layout": "1.0.0-alpha.14",
+    "@operato/popup": "1.0.0-alpha.14",
+    "@operato/property-editor": "1.0.0-alpha.14",
+    "@operato/shell": "1.0.0-alpha.14",
+    "@operato/utils": "1.0.0-alpha.14",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-form-element-behavior": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
@@ -49,10 +50,10 @@
     "@polymer/paper-listbox": "^3.0.1",
     "@polymer/paper-ripple": "^3.0.2",
     "@polymer/paper-slider": "^3.0.1",
-    "@polymer/polymer": "^3.3.1",
-    "@things-factory/attachment-ui": "^5.0.0-alpha.5",
-    "@things-factory/font-ui": "^5.0.0-alpha.5",
-    "@things-factory/i18n-base": "^5.0.0-alpha.5",
+    "@polymer/polymer": "^3.4.1",
+    "@things-factory/attachment-ui": "^5.0.0-alpha.6",
+    "@things-factory/font-ui": "^5.0.0-alpha.6",
+    "@things-factory/i18n-base": "^5.0.0-alpha.6",
     "ace-builds": "^1.4.11",
     "brace": "^0.11.1",
     "codemirror": "^5.59.1",
@@ -64,5 +65,5 @@
   "devDependencies": {
     "@types/codemirror": "^0.0.105"
   },
-  "gitHead": "379449b7be7b3d8220f1cac9ab684b812117edfd"
+  "gitHead": "72544163ae4a11a4d34cda016f4a28a3207806ae"
 }