@things-factory/modeller-ui 4.0.7 → 4.0.12

package/client/bootstrap.js

@@ -1,6 +1,33 @@
-import { store } from '@things-factory/shell'
-import modeller from './reducers/modeller'
+import { OxPropertyEditor } from '@operato/property-editor'
 
 export default function bootstrap() {
-  store.addReducers({ modeller })
+  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-property.js

@@ -3,8 +3,6 @@
  */
 
 import '@things-factory/i18n-base'
-import { deepClone } from '@things-factory/utils'
-import { html, LitElement } from 'lit-element'
 import './things-editor-angle-input'
 import './things-editor-range-input'
 import './things-editor-code'
@@ -21,94 +19,16 @@ import './things-editor-value-range'
 import './things-editor-attachment-selector'
 import './things-editor-font-selector'
 
-import { ThingsEditorPropertyStyles } from './things-editor-property-styles'
+import { OxPropertyEditor } from '@operato/property-editor'
+import { html } from 'lit'
 
-export default class ThingsEditorProperty extends LitElement {
-  static get is() {
-    return 'things-editor-property'
-  }
-
-  static get properties() {
-    return {
-      value: Object,
-      type: String,
-      label: String,
-      placeholder: String,
-      property: Object,
-      host: Object
-    }
-  }
-
-  static get styles() {
-    return [ThingsEditorPropertyStyles]
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.shadowRoot.addEventListener('change', this._valueChanged.bind(this))
-  }
-
-  editorTemplate(props) {
-    return html``
-  }
-
-  render() {
-    return html`
-      ${this.editorTemplate(this)}
-      ${this.label
-        ? html`
-            <label for="editor">
-              <i18n-msg msgid=${this._computeLabelId(this.label)}>${this.label}</i18n-msg>
-            </label>
-          `
-        : html``}
-    `
-  }
-
-  shouldUpdate(changedProperties) {
-    if (this.__by_me) {
-      return false
-    }
-
-    if (changedProperties.has('value')) {
-      this.__by_me = true
-      this.value = deepClone(this.value)
-      this.__by_me = false
-    }
-
-    return true
-  }
-
-  get valueProperty() {
-    return 'value'
-  }
-
-  _computeLabelId(label) {
-    if (label.indexOf('label.') >= 0) return label
-
-    return 'label.' + label
-  }
-
-  _valueChanged(e) {
-    e.stopPropagation()
-
-    this.value = deepClone(e.target[this.valueProperty])
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-    if (!this.observe) return
-    this.observe.call(this, this.value)
-  }
-}
-
-class PropertyEditorLegend extends ThingsEditorProperty {
+class PropertyEditorLegend extends OxPropertyEditor {
   static get is() {
     return 'property-editor-legend'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -118,13 +38,13 @@ class PropertyEditorLegend extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorLegend.is, PropertyEditorLegend)
 
-class PropertyEditorNumber extends ThingsEditorProperty {
+class PropertyEditorNumber extends OxPropertyEditor {
   static get is() {
     return 'property-editor-number'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -158,13 +78,13 @@ class PropertyEditorNumber extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorNumber.is, PropertyEditorNumber)
 
-class PropertyEditorRangeInput extends ThingsEditorProperty {
+class PropertyEditorRangeInput extends OxPropertyEditor {
   static get is() {
     return 'property-editor-range-input'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -182,13 +102,13 @@ class PropertyEditorRangeInput extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorRangeInput.is, PropertyEditorRangeInput)
 
-class PropertyEditorAngle extends ThingsEditorProperty {
+class PropertyEditorAngle extends OxPropertyEditor {
   static get is() {
     return 'property-editor-angle'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   get valueProperty() {
@@ -208,13 +128,13 @@ class PropertyEditorAngle extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorAngle.is, PropertyEditorAngle)
 
-class PropertyEditorString extends ThingsEditorProperty {
+class PropertyEditorString extends OxPropertyEditor {
   static get is() {
     return 'property-editor-string'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -224,13 +144,13 @@ class PropertyEditorString extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorString.is, PropertyEditorString)
 
-class PropertyEditorPassword extends ThingsEditorProperty {
+class PropertyEditorPassword extends OxPropertyEditor {
   static get is() {
     return 'property-editor-password'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -240,30 +160,39 @@ class PropertyEditorPassword extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorPassword.is, PropertyEditorPassword)
 
-class PropertyEditorTextArea extends ThingsEditorProperty {
+class PropertyEditorTextArea extends OxPropertyEditor {
   static get is() {
     return 'property-editor-textarea'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    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> `
+    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 ThingsEditorProperty {
+class PropertyEditorGraphQL extends OxPropertyEditor {
   static get is() {
     return 'property-editor-graphql'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -273,13 +202,13 @@ class PropertyEditorGraphQL extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorGraphQL.is, PropertyEditorGraphQL)
 
-class PropertyEditorData extends ThingsEditorProperty {
+class PropertyEditorData extends OxPropertyEditor {
   static get is() {
     return 'property-editor-data'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -289,13 +218,13 @@ class PropertyEditorData extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorData.is, PropertyEditorData)
 
-class PropertyEditorCheckbox extends ThingsEditorProperty {
+class PropertyEditorCheckbox extends OxPropertyEditor {
   static get is() {
     return 'property-editor-checkbox'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   get valueProperty() {
@@ -309,13 +238,13 @@ class PropertyEditorCheckbox extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorCheckbox.is, PropertyEditorCheckbox)
 
-class PropertyEditorSelect extends ThingsEditorProperty {
+class PropertyEditorSelect extends OxPropertyEditor {
   static get is() {
     return 'property-editor-select'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   async connectedCallback() {
@@ -368,13 +297,13 @@ class PropertyEditorSelect extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorSelect.is, PropertyEditorSelect)
 
-class PropertyEditorColor extends ThingsEditorProperty {
+class PropertyEditorColor extends OxPropertyEditor {
   static get is() {
     return 'property-editor-color'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -391,13 +320,13 @@ class PropertyEditorColor extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorColor.is, PropertyEditorColor)
 
-class PropertyEditorSolidColorStops extends ThingsEditorProperty {
+class PropertyEditorSolidColorStops extends OxPropertyEditor {
   static get is() {
     return 'property-editor-solid-colorstops'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -417,13 +346,13 @@ class PropertyEditorSolidColorStops extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorSolidColorStops.is, PropertyEditorSolidColorStops)
 
-class PropertyEditorGradientColorStops extends ThingsEditorProperty {
+class PropertyEditorGradientColorStops extends OxPropertyEditor {
   static get is() {
     return 'property-editor-gradient-colorstops'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -443,13 +372,13 @@ class PropertyEditorGradientColorStops extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorGradientColorStops.is, PropertyEditorGradientColorStops)
 
-class PropertyEditorMultipleColor extends ThingsEditorProperty {
+class PropertyEditorMultipleColor extends OxPropertyEditor {
   static get is() {
     return 'property-editor-multiple-color'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   get valueProperty() {
@@ -463,13 +392,13 @@ class PropertyEditorMultipleColor extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorMultipleColor.is, PropertyEditorMultipleColor)
 
-class PropertyEditorDate extends ThingsEditorProperty {
+class PropertyEditorDate extends OxPropertyEditor {
   static get is() {
     return 'property-editor-date'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -479,13 +408,13 @@ class PropertyEditorDate extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorDate.is, PropertyEditorDate)
 
-class PropertyEditorOptions extends ThingsEditorProperty {
+class PropertyEditorOptions extends OxPropertyEditor {
   static get is() {
     return 'property-editor-options'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   get valueProperty() {
@@ -499,13 +428,13 @@ class PropertyEditorOptions extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorOptions.is, PropertyEditorOptions)
 
-class PropertyEditorTable extends ThingsEditorProperty {
+class PropertyEditorTable extends OxPropertyEditor {
   static get is() {
     return 'property-editor-table'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -515,13 +444,13 @@ class PropertyEditorTable extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorTable.is, PropertyEditorTable)
 
-class PropertyEditorId extends ThingsEditorProperty {
+class PropertyEditorId extends OxPropertyEditor {
   static get is() {
     return 'property-editor-id'
   }
 
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -531,9 +460,9 @@ class PropertyEditorId extends ThingsEditorProperty {
 
 customElements.define(PropertyEditorId.is, PropertyEditorId)
 
-class PropertyEditorValueMap extends ThingsEditorProperty {
+class PropertyEditorValueMap extends OxPropertyEditor {
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -549,9 +478,9 @@ class PropertyEditorValueMap extends ThingsEditorProperty {
 
 customElements.define('property-editor-value-map', PropertyEditorValueMap)
 
-class PropertyEditorValueRange extends ThingsEditorProperty {
+class PropertyEditorValueRange extends OxPropertyEditor {
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -572,9 +501,9 @@ class PropertyEditorValueRange extends ThingsEditorProperty {
 
 customElements.define('property-editor-value-range', PropertyEditorValueRange)
 
-class PropertyEditorAttachmentSelector extends ThingsEditorProperty {
+class PropertyEditorAttachmentSelector extends OxPropertyEditor {
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -590,9 +519,9 @@ class PropertyEditorAttachmentSelector extends ThingsEditorProperty {
 
 customElements.define('property-editor-attachment-selector', PropertyEditorAttachmentSelector)
 
-class PropertyEditorImageSelector extends ThingsEditorProperty {
+class PropertyEditorImageSelector extends OxPropertyEditor {
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {
@@ -608,9 +537,9 @@ class PropertyEditorImageSelector extends ThingsEditorProperty {
 
 customElements.define('property-editor-image-selector', PropertyEditorImageSelector)
 
-class PropertyEditorFontSelector extends ThingsEditorProperty {
+class PropertyEditorFontSelector extends OxPropertyEditor {
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {

package/client/index.js

@@ -1,4 +0,0 @@
-export * from './actions/modeller'
-
-export { default as ThingsEditorProperty } from './editors/things-editor-property'
-export { ThingsEditorPropertyStyles } from './editors/things-editor-property-styles'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/modeller-ui",
-  "version": "4.0.7",
+  "version": "4.0.12",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -29,6 +29,7 @@
     "@graphql-tools/url-loader": "^7.2.0",
     "@graphql-tools/wrap": "^8.1.1",
     "@material/mwc-icon": "^0.25.3",
+    "@operato/property-editor": "^0.2.43",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-form-element-behavior": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
@@ -42,9 +43,9 @@
     "@polymer/paper-ripple": "^3.0.2",
     "@polymer/paper-slider": "^3.0.1",
     "@polymer/polymer": "^3.3.1",
-    "@things-factory/attachment-ui": "^4.0.7",
-    "@things-factory/font-ui": "^4.0.7",
-    "@things-factory/i18n-base": "^4.0.7",
+    "@things-factory/attachment-ui": "^4.0.12",
+    "@things-factory/font-ui": "^4.0.12",
+    "@things-factory/i18n-base": "^4.0.12",
     "ace-builds": "^1.4.11",
     "brace": "^0.11.1",
     "codemirror": "^5.59.1",
@@ -56,5 +57,5 @@
   "devDependencies": {
     "@types/codemirror": "^0.0.105"
   },
-  "gitHead": "035fa60359aefa9b9111f807fc7e8db6a15a4a6e"
+  "gitHead": "29d59ff95fcb473cb43c6f798cd04f3ec3a779a0"
 }

package/client/actions/modeller.js

@@ -1 +0,0 @@
-export const ADD_MODELLER_EDITORS = 'ADD_MODELLER_EDITORS'

package/client/reducers/modeller.js

@@ -1,53 +0,0 @@
-import { ADD_MODELLER_EDITORS } from '../actions/modeller.js'
-
-const INITIAL_STATE = {
-  editors: {
-    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'
-  }
-}
-
-const modeller = (state = INITIAL_STATE, action) => {
-  switch (action.type) {
-    case ADD_MODELLER_EDITORS:
-      let editors = {
-        ...state.editors,
-        ...(action.editors || {})
-      }
-
-      return {
-        ...state,
-        editors
-      }
-
-    default:
-      return state
-  }
-}
-
-export default modeller