@operato/board 1.0.0-beta.4 → 1.0.0-beta.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.40",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -49,20 +49,21 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/app": "^1.0.0-beta.4",
-    "@operato/data-grist": "^1.0.0-beta.4",
-    "@operato/font": "^1.0.0-beta.4",
-    "@operato/graphql": "^1.0.0-beta.4",
-    "@operato/i18n": "^1.0.0-beta.4",
-    "@operato/input": "^1.0.0-beta.4",
-    "@operato/markdown": "^1.0.0-beta.4",
-    "@operato/popup": "^1.0.0-beta.4",
-    "@operato/property-editor": "^1.0.0-beta.4",
-    "@operato/styles": "^1.0.0-beta.4",
-    "@operato/utils": "^1.0.0-beta.4",
+    "@operato/app": "^1.0.0-beta.40",
+    "@operato/data-grist": "^1.0.0-beta.40",
+    "@operato/font": "^1.0.0-beta.40",
+    "@operato/graphql": "^1.0.0-beta.40",
+    "@operato/i18n": "^1.0.0-beta.40",
+    "@operato/input": "^1.0.0-beta.40",
+    "@operato/markdown": "^1.0.0-beta.40",
+    "@operato/popup": "^1.0.0-beta.40",
+    "@operato/property-editor": "^1.0.0-beta.40",
+    "@operato/styles": "^1.0.0-beta.40",
+    "@operato/utils": "^1.0.0-beta.40",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
+    "dexie": "^3.2.2",
     "file-saver": "^2.0.5",
     "lit": "^2.2.1",
     "lodash-es": "^4.17.21",
@@ -71,7 +72,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^2.8.1",
+    "@hatiolab/things-scene": "^3.0.16",
     "@material/mwc-fab": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@open-wc/eslint-config": "^4.3.0",
@@ -83,12 +84,12 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.29",
-    "@web/dev-server-storybook": "next",
+    "@web/dev-server-storybook": "^0.5.0",
     "@web/test-runner": "next",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
+    "husky": "^7.0.2",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
@@ -107,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "08201dc8c015c0d6ccceb846907dd9950363a553"
+  "gitHead": "6f51f0b86e909ea850e6f185f737930daaec509e"
 }

package/src/data-storage/data-storage.ts

@@ -0,0 +1,47 @@
+import Dexie from 'dexie'
+
+import { Component, PersistentDataStorage } from '@hatiolab/things-scene'
+
+class BoardDatabase extends Dexie {
+  board_data!: Dexie.Table<IBoardData, number> // number = type of the primkey
+  //...other tables goes here...
+
+  constructor() {
+    super('operato-board-database')
+    this.version(1).stores({
+      board_data: '[board+refid]'
+      //...other tables goes here...
+    })
+  }
+}
+
+interface IBoardData {
+  id?: number
+  board: string
+  refid: string | number
+  data: any
+  timestamp: number
+}
+
+const db = new BoardDatabase()
+
+export class DataStorage implements PersistentDataStorage {
+  private id: string
+
+  constructor(id: string) {
+    this.id = id
+  }
+
+  public async load(key: Component): Promise<any> {
+    const saved = await db.board_data.where({ board: this.id, refid: key.state.refid }).first()
+    return saved?.data
+  }
+
+  public async save(key: Component, value: any): Promise<void> {
+    await db.board_data.put({ board: this.id, refid: key.state.refid, data: value, timestamp: Date.now() })
+  }
+
+  public async clear(key: Component): Promise<void> {
+    await db.board_data.where({ board: this.id, refid: key.state.refid }).delete()
+  }
+}

package/src/index.ts

@@ -1,8 +1,9 @@
-export * from './types'
+export * from './types.js'
 
-export { registerDefaultGroups } from './component/register-default-groups'
+export { registerDefaultGroups } from './component/register-default-groups.js'
+export { DataStorage } from './data-storage/data-storage.js'
 
-export * from './ox-board-viewer'
-export * from './ox-board-player'
-export * from './ox-board-modeller'
-export * from './ox-board-list'
+export * from './ox-board-viewer.js'
+export * from './ox-board-player.js'
+export * from './ox-board-modeller.js'
+export * from './ox-board-list.js'

package/src/modeller/component-toolbar/component-menu.ts

@@ -4,14 +4,13 @@
 
 import './component-detail'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { Pallet, PalletItem } from '../../types'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { Scene } from '@hatiolab/things-scene'
 import { ScrollbarStyles } from '@operato/styles'
 
-import { Pallet, PalletItem } from '../../types'
-
 const noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href
 
 @customElement('component-menu')
@@ -177,7 +176,7 @@ class ComponentMenu extends LitElement {
 
     if (this.scene) {
       this.template = this.templates.find(template => template.type == type)
-      this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 })
+      this.template && this.scene.startAddMode(JSON.parse(JSON.stringify(this.template.model)))
     }
 
     this.group = null

package/src/modeller/component-toolbar/component-toolbar.ts

@@ -98,7 +98,7 @@ class ComponentToolbar extends LitElement {
 
   render() {
     const componentList = this.componentGroupList || []
-    const modeIcon = this.icons[this.mode === SCENE_MODE.EDIT ? 'mode-edit' : 'mode-shift']
+    const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit']
 
     return html`
       <img id="shift" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />

package/src/modeller/edit-toolbar.ts

@@ -6,7 +6,7 @@ import { html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, queryAll } from 'lit/decorators.js'
 
 import { Component, Scene } from '@hatiolab/things-scene'
-import { isMacOS } from '@operato/utils'
+import { copyToClipboard, isMacOS } from '@operato/utils'
 
 import { style } from './edit-toolbar-style'
 
@@ -461,12 +461,12 @@ export class EditToolbar extends LitElement {
     this.scene?.cut()
   }
 
-  onTapCopy() {
+  async onTapCopy() {
     var copied = this.scene?.copy()
 
     if (!copied) return
 
-    navigator.clipboard.writeText(copied)
+    await copyToClipboard(copied)
     this.cliped = copied
   }
 

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

@@ -8,10 +8,9 @@ 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 =
   | {
@@ -27,6 +26,7 @@ export type Mapping = {
   target?: string
   property?: string
   param?: Rule
+  ndnsp?: boolean
 }
 
 /**
@@ -126,6 +126,26 @@ export default class DataBindingMapper extends LitElement {
         height: 300px;
         overflow: auto;
       }
+
+      /* checkbox-row */
+      .checkbox-row {
+        grid-column: span 10;
+
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-gap: 5px;
+        grid-auto-rows: minmax(24px, auto);
+        align-items: center;
+      }
+
+      .checkbox-row > input {
+        grid-column: 4 / 5;
+      }
+
+      .checkbox-row > label {
+        grid-column: span 6;
+        text-align: left;
+      }
     `
   ]
 
@@ -228,7 +248,7 @@ export default class DataBindingMapper extends LitElement {
         <div data-value="eval"><ox-i18n msgid="label.eval"></ox-i18n></div>
       </ox-buttons-radio>
 
-      <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>
+      <div rule-editors ?hidden=${mapping.rule == 'value'}>
         <ox-input-value-map
           value-key="map"
           .value=${this.rule.map || {}}
@@ -253,6 +273,11 @@ export default class DataBindingMapper extends LitElement {
         >
         </ox-input-code>
       </div>
+
+      <div class="checkbox-row">
+        <input id="checkbox-ndnsp" type="checkbox" value-key="ndnsp" .checked=${mapping.ndnsp === true} />
+        <label for="checkbox-ndnsp"> <ox-i18n msgid="label.ndnsp">No Data No Spreading</ox-i18n> </label>
+      </div>
     `
   }
 
@@ -332,9 +357,9 @@ export default class DataBindingMapper extends LitElement {
 
     if (!key) return
 
-    var value = element.value
+    var value: string | boolean = element.value
 
-    if (key == 'target') {
+    if (key === 'target') {
       if (value.length > 0 && !/^[.#(\[]/.test(value)) {
         value = '#' + value.trim()
 
@@ -345,25 +370,34 @@ export default class DataBindingMapper extends LitElement {
         ...this.mapping,
         target: value
       }
-    } else if (key == 'accessor') {
+    } else if (key === 'accessor') {
       this.mapping = {
         ...this.mapping,
         accessor: (value || '').trim()
       }
-    } else if (key == 'property') {
+    } else if (key === 'property') {
       this.mapping = {
         ...this.mapping,
         property: (value || '').trim()
       }
-    } else if (key == 'map' || key == 'range' || key == 'eval') {
+    } else if (key === 'map' || key === 'range' || key === 'eval') {
       this.rule[key] = value
       this.mapping = {
         ...this.mapping,
         param: value
       }
+    } else if (key === 'ndnsp' /* no data no spreading */) {
+      value = element.checked
+
+      this.mapping = {
+        ...this.mapping,
+        ndnsp: value
+      }
     }
 
-    if (!this.mapping.rule) this.mapping.rule = 'value'
+    if (!this.mapping.rule) {
+      this.mapping.rule = 'value'
+    }
 
     this._keep_saved_rule_params = true
     this.dispatchEvent(

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

@@ -9,10 +9,11 @@ import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-data.js'
 import '@operato/i18n/ox-i18n.js'
 
-import { Properties, Scene } from '@hatiolab/things-scene'
-import { PropertyValues, css, html } from 'lit'
+import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'
 
@@ -229,6 +230,13 @@ class PropertyDataBinding extends AbstractProperty {
               <ox-i18n msgid="label.intent-sensitive">Intent Sensitive</ox-i18n>
             </label>
           </div>
+
+          <div class="checkbox-row">
+            <input id="checkbox-persistent" type="checkbox" value-key="persistent" .checked=${value.persistent} />
+            <label for="checkbox-persistent">
+              <ox-i18n msgid="label.persistent-data">Persistent Data</ox-i18n>
+            </label>
+          </div>
         </div>
       </fieldset>
 

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

@@ -42,6 +42,10 @@ export const EffectsSharedStyle = css`
     border: var(--property-sidebar-fieldset-border);
   }
 
+  ox-input-data {
+    height: 300px;
+  }
+
   input[type='checkbox'] {
     grid-column: 4 / 5;
     align-self: center;

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

@@ -295,8 +295,11 @@ export default class SceneInspector extends LitElement {
       return html``
     }
 
-    var children = (component.isContainer() && (component as Container).components) || []
-    var extended = this.isExtended(component) ? children : []
+    const children = (component.isContainer() && (component as Container).components) || []
+    const extended = this.isExtended(component) ? children : []
+    const { type, id, tag, class: clazz } = component.state
+
+    const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '')
 
     return html`
       <div
@@ -315,8 +318,8 @@ export default class SceneInspector extends LitElement {
 
           <span class=${this.getNodeHandleClass(component)}> </span>
 
-          <span class="type">${depth == 0 ? 'ROOT' : component.get('type')}</span> ${component.get('id')
-            ? html` <span class="name">#${component.get('id')}</span> `
+          <span class="type">${depth == 0 ? 'ROOT' : type}</span> ${name
+            ? html` <span class="name">${name}</span> `
             : html``}
         </span>
 

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

@@ -26,6 +26,10 @@ export const PropertySharedStyle = css`
     border: var(--property-sidebar-fieldset-border);
   }
 
+  ox-input-data {
+    height: 300px;
+  }
+
   /* property grid */
   .property-grid {
     display: grid;

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

@@ -29,6 +29,7 @@ class PropertySidebar extends LitElement {
         flex-direction: column;
         background-color: var(--property-sidebar-background-color);
         user-select: none;
+        --input-padding: var(--padding-narrow);
       }
 
       [tab] {

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

@@ -5,6 +5,7 @@
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@operato/help/ox-title-with-help.js'
 import '@operato/input/ox-input-color.js'
+import '@operato/input/ox-input-range.js'
 import '@operato/app/input/ox-input-fill-style.js'
 import '@operato/font/ox-font-selector.js'
 import '@operato/i18n/ox-i18n.js'
@@ -21,7 +22,7 @@ class PropertyStyles extends AbstractProperty {
   static styles = [
     PropertySharedStyle,
     css`
-      paper-slider {
+      ox-input-range {
         width: 100%;
       }
 
@@ -334,7 +335,7 @@ class PropertyStyles extends AbstractProperty {
 
   render() {
     var {
-      alpha,
+      alpha = 1,
       fontFamily,
       fontSize,
       lineHeight,
@@ -351,14 +352,14 @@ class PropertyStyles extends AbstractProperty {
       beginSize,
       end,
       endSize
-    } = this.value
+    } = this.value || {}
 
     return html`
       <fieldset>
         <legend>
           <ox-title-with-help topic="board-modeller/styles/opacity" msgid="label.opacity">opacity</ox-title-with-help>
         </legend>
-        <paper-slider min="0" max="1" step="0.1" value-key="alpha" .value=${alpha || 1} editable> </paper-slider>
+        <ox-input-range min="0" max="1" step="0.1" value-key="alpha" .value=${alpha} editable> </ox-input-range>
       </fieldset>
 
       <fieldset>

package/src/modeller/scene-viewer/ox-scene-player.ts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { Scene } from '@hatiolab/things-scene'
@@ -70,7 +70,7 @@ class OxScenePlayer extends LitElement {
   _releaseRef() {
     if (this.scene) {
       this.scene.target = null
-      this.scene.release()
+      this.scene.release && this.scene.release()
       delete this.scene
     }
   }

package/src/modeller/scene-viewer/ox-scene-viewer.ts

@@ -2,10 +2,11 @@ import './confidential-overlay'
 import './ox-scene-layer'
 import './ox-scene-handler'
 
-import { Component, FITMODE, Model, Properties, SCENE_MODE, Scene, create as createScene } from '@hatiolab/things-scene'
-import { LitElement, PropertyValues, css, html } from 'lit'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { Component, create as createScene, FITMODE, Model, Properties, Scene, SCENE_MODE } from '@hatiolab/things-scene'
+
 import OxSceneLayer from './ox-scene-layer'
 
 @customElement('ox-scene-viewer')
@@ -114,7 +115,7 @@ export default class OxSceneViewer extends LitElement {
       this.scene.off('mode', this._onSceneModeChanged, this)
 
       if (this.provider) {
-        this.scene.release()
+        this.scene.release && this.scene.release()
       } else {
         this.scene.dispose()
       }
@@ -233,6 +234,8 @@ export default class OxSceneViewer extends LitElement {
 
     if (after === 2) {
       this.style.cursor = 'all-scroll'
+    } else if (after === 3) {
+      this.style.cursor = 'crosshair'
     } else {
       this.style.cursor = 'default'
     }

package/src/ox-board-list.ts

@@ -361,7 +361,7 @@ class BoardList extends LitElement {
       filters: this.groupId
         ? [
             {
-              name: 'group_id',
+              name: 'groupId',
               operator: 'eq',
               value: this.groupId
             }

package/src/ox-board-modeller.ts

@@ -241,6 +241,7 @@ export class BoardModeller extends LitElement {
         >
           <ox-scene-layer type="selection-layer"></ox-scene-layer>
           <ox-scene-layer type="modeling-layer"></ox-scene-layer>
+          <ox-scene-layer type="add-layer"> </ox-scene-layer>
           <ox-scene-layer type="guide-layer">
             <ox-scene-property name="ruler" value="disabled"></ox-scene-property>
           </ox-scene-layer>

package/src/ox-board-viewer.ts

@@ -7,8 +7,9 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { Component, create, ReferenceProvider, SCENE_MODE } from '@hatiolab/things-scene'
 import { isIOS, togglefullscreen } from '@operato/utils'
 
-import { DataSubscriptionProviderImpl } from './graphql/data-subscription'
-import { runScenario, startScenario } from './graphql/scenario'
+import { DataStorage } from './data-storage/data-storage.js'
+import { DataSubscriptionProviderImpl } from './graphql/data-subscription.js'
+import { runScenario, startScenario } from './graphql/scenario.js'
 
 @customElement('ox-board-viewer')
 export class BoardViewer extends LitElement {
@@ -229,6 +230,7 @@ export class BoardViewer extends LitElement {
       },
       mode: SCENE_MODE.VIEW,
       refProvider: this.provider!,
+      dataStorage: this.board.id !== 'preview' ? new DataStorage(this.board.id) : undefined,
       dataSubscriptionProvider: new DataSubscriptionProviderImpl()
     })
 
@@ -246,16 +248,16 @@ export class BoardViewer extends LitElement {
       this.unbindSceneEvents(this._scene)
 
       this._scene.target = null
-      this._scene.release()
+      this._scene.release && this._scene.release()
 
       this._scene = null
     }
 
     // delete queued scenes
-    this._forward.forEach(scene => scene.release())
+    this._forward.forEach(scene => scene.release && scene.release())
     this._forward = []
 
-    this._backward.forEach(scene => scene.release())
+    this._backward.forEach(scene => scene.release && scene.release())
     this._backward = []
   }
 
@@ -289,7 +291,7 @@ export class BoardViewer extends LitElement {
       var scene = await this.provider!.get(boardId, true)
 
       if (scene === this._scene) {
-        scene.release()
+        scene.release && scene.release()
         return
       }
 
@@ -303,7 +305,7 @@ export class BoardViewer extends LitElement {
 
       this._scene = scene
 
-      this._forward.forEach(scene => scene.release())
+      this._forward.forEach(scene => scene.release && scene.release())
 
       /* forward를 비운다. */
       this._forward = []

package/src/player/ox-board-wrapper.ts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 /**
@@ -63,7 +63,7 @@ class BoardWrapper extends LitElement {
   _releaseRef() {
     if (this._scene) {
       this._scene.target = null
-      this._scene.release()
+      this._scene.release && this._scene.release()
       delete this._scene
     }
   }