@operato/board 1.0.0-alpha.6 → 1.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-beta.0",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -49,28 +49,29 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/data-grist": "^1.0.0-alpha.6",
-    "@operato/graphql": "^1.0.0-alpha.6",
-    "@operato/i18n": "^1.0.0-alpha.6",
-    "@operato/input": "^1.0.0-alpha.6",
-    "@operato/markdown": "^1.0.0-alpha.6",
-    "@operato/popup": "^1.0.0-alpha.6",
-    "@operato/property-editor": "^1.0.0-alpha.6",
-    "@operato/styles": "^1.0.0-alpha.6",
-    "@operato/utils": "^1.0.0-alpha.6",
+    "@operato/app": "^1.0.0-beta.0",
+    "@operato/data-grist": "^1.0.0-beta.0",
+    "@operato/font": "^1.0.0-beta.0",
+    "@operato/graphql": "^1.0.0-beta.0",
+    "@operato/i18n": "^1.0.0-beta.0",
+    "@operato/input": "^1.0.0-beta.0",
+    "@operato/markdown": "^1.0.0-beta.0",
+    "@operato/popup": "^1.0.0-beta.0",
+    "@operato/property-editor": "^1.0.0-beta.0",
+    "@operato/styles": "^1.0.0-beta.0",
+    "@operato/utils": "^1.0.0-beta.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
-    "@things-factory/modeller-ui": "^5.0.0-alpha.3",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
     "file-saver": "^2.0.5",
-    "lit": "^2.2.0",
+    "lit": "^2.2.1",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^2.7.34",
+    "@hatiolab/things-scene": "^2.8.1",
     "@material/mwc-fab": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@open-wc/eslint-config": "^4.3.0",
@@ -106,5 +107,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "10e76a7dff381643b2f2ff3bb57d59f93f752a2b"
+  "gitHead": "06b7a224872643b4dfdd95efc83770ce96057bdf"
 }

package/src/graphql/data-subscription.ts

@@ -0,0 +1,30 @@
+import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene'
+
+import gql from 'graphql-tag'
+import { subscribe } from '@operato/graphql'
+
+export class DataSubscriptionProviderImpl implements DataSubscriptionProvider {
+  async subscribe(tag: string, component: Component) {
+    return await subscribe(
+      {
+        query: gql`
+                  subscription {
+                    data(tag: "${tag}") {
+                      tag
+                      data
+                    }
+                  }
+                `
+      },
+      {
+        next: async ({ data }: { data: any }) => {
+          if (data) {
+            component.data = data.data.data
+          }
+        }
+      }
+    )
+  }
+
+  dispose() {}
+}

package/src/modeller/property-sidebar/abstract-property.ts

@@ -26,10 +26,6 @@ export class AbstractProperty extends LitElement {
     var value
 
     switch (element.tagName) {
-      case 'THINGS-EDITOR-ANGLE-INPUT':
-        value = Number((element as any).radian) || 0
-        break
-
       case 'INPUT':
         switch ((element as any).type) {
           case 'checkbox':

package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts

@@ -2,16 +2,15 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/modeller-ui/client/editors/things-editor-value-map'
-import '@things-factory/modeller-ui/client/editors/things-editor-value-range'
+import '@operato/input/ox-input-value-map.js'
+import '@operato/input/ox-input-value-ranges.js'
 import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-code.js'
 import '@operato/i18n/ox-i18n.js'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
+import { LitElement, PropertyValues, css, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 export type Rule =
   | {
@@ -220,21 +219,21 @@ export default class DataBindingMapper extends LitElement {
       </ox-buttons-radio>
 
       <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>
-        <things-editor-value-map
+        <ox-input-value-map
           value-key="map"
           .value=${this.rule.map || {}}
           .valuetype=${this._valuetype(mapping.property!)}
           ?active=${mapping.rule == 'map'}
         >
-        </things-editor-value-map>
+        </ox-input-value-map>
 
-        <things-editor-value-range
+        <ox-input-value-ranges
           value-key="range"
           .value=${this.rule.range || []}
           .valuetype=${this._valuetype(mapping.property!)}
           ?active=${mapping.rule == 'range'}
         >
-        </things-editor-value-range>
+        </ox-input-value-ranges>
 
         <ox-input-code
           value-key="eval"

package/src/modeller/property-sidebar/data-binding/data-binding.ts

@@ -9,10 +9,9 @@ import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-data.js'
 import '@operato/i18n/ox-i18n.js'
 
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { PropertyValues, css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'
@@ -213,6 +212,9 @@ class PropertyDataBinding extends AbstractProperty {
           <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
           <input value-key="class" .value=${value.class || ''} />
 
+          <label> <ox-i18n msgid="label.tag">Tag</ox-i18n> </label>
+          <input value-key="tag" .value=${value.tag || ''} />
+
           <label> <ox-i18n msgid="label.template-prefix">Template Prefix</ox-i18n> </label>
           <input value-key="templatePrefix" .value=${value.templatePrefix || ''} />
 
@@ -370,8 +372,8 @@ class PropertyDataBinding extends AbstractProperty {
     if (mapping && mapping.target) {
       this.scene &&
         this.scene.findAll(mapping.target, this.scene.selected && this.scene.selected[0]).forEach((c, i) => {
-          if (i == 0) c.trigger('tagreset')
-          c.trigger('tag', {})
+          if (i == 0) c.trigger('decotagreset')
+          c.trigger('decotag', {})
         })
     }
 

package/src/modeller/property-sidebar/effects/effects-shared-style.ts

@@ -29,7 +29,7 @@ export const EffectsSharedStyle = css`
   input,
   select,
   ox-input-angle,
-  things-editor-color,
+  ox-input-color,
   [custom-editor] {
     grid-column: span 7;
   }
@@ -37,7 +37,7 @@ export const EffectsSharedStyle = css`
   input,
   select,
   ox-input-angle input,
-  things-editor-color input,
+  ox-input-color input,
   [custom-editor] input {
     border: var(--property-sidebar-fieldset-border);
   }

package/src/modeller/property-sidebar/effects/property-shadow.ts

@@ -2,14 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/modeller-ui/client/editors/things-editor-color'
 import '@operato/i18n/ox-i18n.js'
+import '@operato/input/ox-input-color.js'
 
-import { css, html, LitElement } from 'lit'
+import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { Properties } from '@hatiolab/things-scene'
-
 import { convert } from './value-converter'
 
 /**
@@ -48,7 +47,7 @@ export default class PropertyShadow extends LitElement {
       }
 
       input[type='number'],
-      things-editor-color {
+      ox-input-color {
         grid-column: span 7;
       }
       input[type='number'] {
@@ -93,7 +92,7 @@ export default class PropertyShadow extends LitElement {
 
       <label class="icon-only-label color"></label>
 
-      <things-editor-color value-key="color" .value=${value.color}> </things-editor-color>
+      <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
     `
   }
 

package/src/modeller/property-sidebar/effects/value-converter.ts

@@ -1,8 +1,5 @@
 export function convert(element: any) {
   switch (element.tagName) {
-    case 'THINGS-EDITOR-ANGLE-INPUT':
-      return Number(element.radian) || 0
-
     case 'INPUT':
       switch (element.type) {
         case 'checkbox':

package/src/modeller/property-sidebar/property-shared-style.ts

@@ -52,7 +52,7 @@ export const PropertySharedStyle = css`
   .property-grid > select,
   .property-grid > ox-input-angle,
   .property-grid > ox-buttons-radio,
-  .property-grid > things-editor-color,
+  .property-grid > ox-input-color,
   [custom-editor] {
     grid-column: span 7;
     align-self: stretch;

package/src/modeller/property-sidebar/specifics/specific-properties-builder.ts

@@ -2,13 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/modeller-ui/client/editors/things-editor-property'
+import '@operato/app/property-editor.js' /* for registering property editors */
 
-import { html, LitElement, PropertyValues } from 'lit'
+import { LitElement, PropertyValues, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { Properties } from '@hatiolab/things-scene'
 import { OxPropertyEditor } from '@operato/property-editor'
+import { Properties } from '@hatiolab/things-scene'
 
 /**
 모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.

package/src/modeller/property-sidebar/styles/styles.ts

@@ -4,17 +4,16 @@
 
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@operato/help/ox-title-with-help.js'
-import '@things-factory/modeller-ui/client/editors/things-editor-color'
-import '@things-factory/modeller-ui/client/editors/things-editor-color-style'
-import '@things-factory/modeller-ui/client/editors/things-editor-font-selector'
+import '@operato/input/ox-input-color.js'
+import '@operato/app/input/ox-input-fill-style.js'
+import '@operato/font/ox-font-selector.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { Component } from '@hatiolab/things-scene'
-
 import { AbstractProperty } from '../abstract-property'
+import { Component } from '@hatiolab/things-scene'
 import { PropertySharedStyle } from '../property-shared-style'
 
 @customElement('property-style')
@@ -374,12 +373,12 @@ class PropertyStyles extends AbstractProperty {
             <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
           </label>
 
-          <things-editor-font-selector
+          <ox-font-selector
             value-key="fontFamily"
             .value=${fontFamily}
             class="property-full-input"
             custom-editor
-          ></things-editor-font-selector>
+          ></ox-font-selector>
 
           <label class="property-half-label icon-only-label font-size"></label>
           <input type="number" value-key="fontSize" .value=${fontSize} class="property-half-input" />
@@ -388,8 +387,7 @@ class PropertyStyles extends AbstractProperty {
           <input type="number" value-key="lineHeight" .value=${lineHeight} class="property-half-input" />
 
           <label class="property-half-label icon-only-label color"></label>
-          <things-editor-color value-key="fontColor" .value=${fontColor} class="property-half-input">
-          </things-editor-color>
+          <ox-input-color value-key="fontColor" .value=${fontColor} class="property-half-input"> </ox-input-color>
 
           <label class="property-half-label"></label>
           <div class="property-half-input btn-group">
@@ -406,7 +404,7 @@ class PropertyStyles extends AbstractProperty {
           >
         </legend>
 
-        <things-editor-color-style value-key="fillStyle" .value=${fillStyle}> </things-editor-color-style>
+        <ox-input-fill-style value-key="fillStyle" .value=${fillStyle}> </ox-input-fill-style>
       </fieldset>
 
       <fieldset>
@@ -419,8 +417,7 @@ class PropertyStyles extends AbstractProperty {
           <input type="number" value-key="lineWidth" .value=${lineWidth} class="property-half-input" />
 
           <label class="property-half-label icon-only-label color"></label>
-          <things-editor-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input">
-          </things-editor-color>
+          <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input"> </ox-input-color>
 
           <label class="property-full-label">
             <ox-i18n msgid="label.line-type">line type</ox-i18n>

package/src/ox-board-modeller.ts

@@ -6,16 +6,15 @@ import './modeller/edit-toolbar'
 import '@hatiolab/things-scene'
 import './ox-board-viewer'
 
-import { saveAs } from 'file-saver'
-import { css, html, LitElement } from 'lit'
+import { ComponentGroup, ComponentTemplate } from './types'
+import { LitElement, css, html } from 'lit'
+import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
 import { customElement, property, query } from 'lit/decorators.js'
-
-import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
-import { OxPopup } from '@operato/popup'
 import { isMacOS, togglefullscreen } from '@operato/utils'
 
 import { EditToolbar } from './modeller/edit-toolbar'
-import { ComponentGroup, ComponentTemplate } from './types'
+import { OxPopup } from '@operato/popup'
+import { saveAs } from 'file-saver'
 
 const MACOS = isMacOS()
 
@@ -256,7 +255,7 @@ export class BoardModeller extends LitElement {
             <ox-scene-property name="paddingTop" value="50" type="number"></ox-scene-property>
             <ox-scene-property name="paddingLeft" value="50" type="number"></ox-scene-property>
           </ox-scene-layer>
-          <ox-scene-layer type="tag-layer"></ox-scene-layer>
+          <ox-scene-layer type="decotag-layer"></ox-scene-layer>
           <ox-scene-handler type="text-editor"></ox-scene-handler>
           <ox-scene-handler type="move-handler"></ox-scene-handler>
         </ox-scene-viewer>

package/src/ox-board-viewer.ts

@@ -2,10 +2,12 @@ import '@material/mwc-fab'
 import '@material/mwc-icon'
 
 import { LitElement, PropertyValues, css, html } from 'lit'
-import { SCENE_MODE, create } from '@hatiolab/things-scene'
+import { ReferenceProvider, SCENE_MODE, create } from '@hatiolab/things-scene'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { isIOS, togglefullscreen } from '@operato/utils'
 
+import { DataSubscriptionProviderImpl } from './graphql/data-subscription'
+
 @customElement('ox-board-viewer')
 export class BoardViewer extends LitElement {
   static styles = css`
@@ -96,7 +98,7 @@ export class BoardViewer extends LitElement {
 
   @property({ type: String }) baseUrl: string = ''
   @property({ type: Object }) board: any = {}
-  @property({ type: Object }) provider: any = null
+  @property({ type: Object }) provider: ReferenceProvider | null = null
   @property({ type: Object }) data: any
 
   @property({ type: Boolean, reflect: true, attribute: 'hide-fullscreen' }) hideFullscreen = false
@@ -196,7 +198,11 @@ export class BoardViewer extends LitElement {
       this.closeScene()
 
       if (this.board && this.board.id) {
-        this.initScene()
+        if (this.board.model) {
+          this.initScene()
+        } else {
+          this.initSceneAsync()
+        }
       }
     }
 
@@ -205,6 +211,13 @@ export class BoardViewer extends LitElement {
     }
   }
 
+  async initSceneAsync() {
+    if (!this.board || !this.board.id) return
+
+    this._scene = await this.provider!.get(this.board.id, true)
+    this.setupScene(this._scene)
+  }
+
   initScene() {
     if (!this.board || !this.board.id) return
 
@@ -213,14 +226,15 @@ export class BoardViewer extends LitElement {
         ...this.board.model
       },
       mode: SCENE_MODE.VIEW,
-      refProvider: this.provider
+      refProvider: this.provider!,
+      dataSubscriptionProvider: new DataSubscriptionProviderImpl()
     })
 
     if (this.baseUrl) {
       this._scene.baseUrl = this.baseUrl
     }
 
-    this.provider.add(this.board.id, this._scene)
+    this.provider!.add(this.board.id, this._scene)
 
     this.setupScene(this._scene)
   }
@@ -254,7 +268,7 @@ export class BoardViewer extends LitElement {
     /* scene의 기존 target을 보관한다. */
     this._oldtarget = this._scene.target
 
-    this._scene.fit(this.board.model.fitMode)
+    this._scene.fit(this._scene.fitMode)
     this._scene.target = this._target
 
     if (this.data) {
@@ -270,7 +284,7 @@ export class BoardViewer extends LitElement {
     if (!boardId) return
 
     try {
-      var scene = await this.provider.get(boardId, true)
+      var scene = await this.provider!.get(boardId, true)
 
       if (scene === this._scene) {
         scene.release()