@operato/board 1.3.16 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.3.16",
+  "version": "1.4.0",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -88,16 +88,16 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.0.0-next.6",
-    "@operato/app": "^1.3.16",
-    "@operato/data-grist": "^1.3.16",
-    "@operato/font": "^1.3.16",
+    "@operato/app": "^1.3.17",
+    "@operato/data-grist": "^1.3.17",
+    "@operato/font": "^1.3.17",
     "@operato/graphql": "^1.3.13",
     "@operato/i18n": "^1.3.13",
-    "@operato/input": "^1.3.16",
+    "@operato/input": "^1.3.17",
     "@operato/layout": "^1.3.14",
     "@operato/markdown": "^1.3.13",
     "@operato/popup": "^1.3.13",
-    "@operato/property-editor": "^1.3.16",
+    "@operato/property-editor": "^1.3.17",
     "@operato/styles": "^1.3.13",
     "@operato/utils": "^1.3.13",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -148,5 +148,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f9979eae8731fc92d25796a10fe754326c9f2476"
+  "gitHead": "c632a7afef494d7c33cef6a0c0b9210e810181dc"
 }

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

@@ -182,6 +182,8 @@ export default class OxSceneViewer extends LitElement {
     this._onModeChanged(this.mode)
     this._onDisplayChanged(this.screenSize)
     this._onBaseUrlChanged(this.baseUrl)
+
+    this.focus()
   }
 
   _onDisplayChanged(screenSize: string | number) {

package/src/ox-board-component-info.ts

@@ -0,0 +1,178 @@
+import '@material/mwc-icon'
+import '@material/mwc-button'
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+import '@operato/markdown'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { ScrollbarStyles } from '@operato/styles'
+import { i18next } from '@operato/i18n'
+
+@customElement('ox-board-component-info')
+export class BoardComponentInfo extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        background-color: white;
+        font-size: 12px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        border: 2px solid var(--primary-color);
+        border-radius: 3px;
+
+        --mdc-icon-size: 12px;
+      }
+
+      [header] {
+        background-color: var(--primary-color);
+        user-select: none;
+        align-items: center;
+        color: #eee;
+        padding: 0 2px;
+
+        display: flex;
+      }
+
+      [header] mwc-icon {
+        margin-left: auto;
+        align-self: center;
+      }
+
+      [content] {
+        overflow: auto;
+      }
+
+      table {
+        border-collapse: collapse;
+        background-color: #fff;
+        width: 100%;
+        margin: auto;
+      }
+
+      tr {
+        border-bottom: var(--border-dark-color);
+      }
+
+      td {
+        padding: var(--padding-narrow);
+        border-right: var(--border-dark-color);
+        font-size: 0.8em;
+      }
+
+      [subTh] {
+        text-align: center !important;
+        font-weight: bold;
+        min-width: 60px;
+        text-transform: capitalize;
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+    `
+  ]
+
+  @property({ type: Object }) component?: any
+
+  private dragEndHandler = this.onDragEnd.bind(this) as EventListener
+  private dragMoveHandler = this.onDragMove.bind(this) as EventListener
+
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    document.addEventListener('mouseup', this.dragEndHandler)
+    document.addEventListener('mousemove', this.dragMoveHandler)
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+
+    document.removeEventListener('mouseup', this.dragEndHandler)
+    document.removeEventListener('mousemove', this.dragMoveHandler)
+  }
+
+  render() {
+    const { state, data, value } = this.component || {}
+    const { id, type } = state || {}
+
+    return html`
+      <div header @mousedown=${this.onDragStart.bind(this)} draggable="false">
+        Component Inspection<mwc-icon @click=${(e: MouseEvent) => this.dispatchEvent(new CustomEvent('close'))}
+          >close</mwc-icon
+        >
+      </div>
+      <div content>
+        <table>
+          <tr>
+            <td subTh>${i18next.t('label.id')}</td>
+            <td>${id}</td>
+          </tr>
+          <tr>
+            <td subTh>${i18next.t('label.type')}</td>
+            <td>${type}</td>
+          </tr>
+          <tr>
+            <td subTh>${i18next.t('label.value')}</td>
+            <td>${value === data ? 'equal to data' : html`<pre>${JSON.stringify(value, null, 2)}</pre>`}</td>
+          </tr>
+
+          <tr>
+            <td colspan="2">
+              <pre>${JSON.stringify(data, null, 2)}</pre>
+            </td>
+          </tr>
+        </table>
+      </div>
+    `
+  }
+
+  private dragStart?: { x: number; y: number }
+
+  onDragStart(e: MouseEvent) {
+    e.stopPropagation()
+
+    if (e.button == 0) {
+      this.dragStart = {
+        x: e.clientX,
+        y: e.clientY
+      }
+    }
+
+    return false
+  }
+
+  onDragMove(e: Event) {
+    if (!this.dragStart) {
+      return false
+    }
+
+    e.stopPropagation()
+    e.preventDefault()
+
+    var x = (e as MouseEvent).clientX,
+      y = (e as MouseEvent).clientY
+
+    const dragStart = { x, y }
+
+    x -= this.dragStart.x
+    y -= this.dragStart.y
+
+    this.dragStart = dragStart
+
+    this.style.left =
+      Math.min(this.parentElement!.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px'
+    this.style.top =
+      Math.min(this.parentElement!.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px'
+
+    return false
+  }
+
+  onDragEnd(e: Event) {
+    if (this.dragStart) {
+      e.stopPropagation()
+      e.preventDefault()
+
+      delete this.dragStart
+    }
+  }
+}

package/src/ox-board-viewer.ts

@@ -1,5 +1,6 @@
 import '@material/mwc-fab'
 import '@material/mwc-icon'
+import './ox-board-component-info.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -12,6 +13,8 @@ import { DataStorage } from './data-storage/data-storage.js'
 import { DataSubscriptionProviderImpl } from './graphql/data-subscription.js'
 import { runScenario, startScenario } from './graphql/scenario.js'
 
+import { BoardComponentInfo } from './ox-board-component-info.js'
+
 @customElement('ox-board-viewer')
 export class BoardViewer extends LitElement {
   static styles = [
@@ -36,6 +39,17 @@ export class BoardViewer extends LitElement {
         outline: 0;
       }
 
+      ::slotted(ox-board-component-info) {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        width: 240px;
+        opacity: 0.9;
+        box-shadow: 2px 2px 4px gray;
+        max-height: 600px;
+        overflow: auto;
+      }
+
       /* navigation buttons */
       mwc-icon {
         z-index: 10;
@@ -105,6 +119,7 @@ export class BoardViewer extends LitElement {
   @state() _fade_animations?: Array<Animation>
 
   public currentBoardId?: string = this.board?.id
+  private popup?: BoardComponentInfo
 
   @query('#target') _target!: HTMLElement
   @query('#prev') _prev!: HTMLElement
@@ -161,6 +176,7 @@ export class BoardViewer extends LitElement {
         @mousemove=${(e: Event) => this.transientShowButtons()}
       ></div>
 
+      <slot></slot>
       ${next} ${fullscreen}
     `
   }
@@ -190,6 +206,7 @@ export class BoardViewer extends LitElement {
 
   updated(changes: PropertyValues<this>) {
     if (changes.has('board')) {
+      this.hidePopup()
       this.closeScene()
 
       if (this.board && this.board.id) {
@@ -335,6 +352,7 @@ export class BoardViewer extends LitElement {
     this._scene.on('route-page', this.onRoutePage, this)
     this._scene.on('start-scenario', this.onStartScenario, this)
     this._scene.on('run-scenario', this.onRunScenario, this)
+    this._scene.on('click', this.onClickEvent, this)
   }
 
   unbindSceneEvents(scene: any) {
@@ -345,6 +363,7 @@ export class BoardViewer extends LitElement {
     scene.off('route-page', this.onRoutePage, this)
     scene.off('start-scenario', this.onStartScenario, this)
     scene.off('run-scenario', this.onRunScenario, this)
+    scene.off('click', this.onClickEvent, this)
   }
 
   transientShowButtons(stop?: boolean) {
@@ -490,6 +509,32 @@ export class BoardViewer extends LitElement {
     }
   }
 
+  onClickEvent(e: MouseEvent, hint: any) {
+    const component = hint.origin
+
+    if (!this.popup && e.altKey) {
+      const popup = document.createElement('ox-board-component-info') as BoardComponentInfo
+      popup.addEventListener('close', e => {
+        e.stopPropagation()
+        this.hidePopup()
+      })
+
+      this.appendChild(popup)
+      this.popup = popup
+    }
+
+    if (this.popup) {
+      this.popup.component = component
+    }
+  }
+
+  hidePopup() {
+    if (this.popup) {
+      this.removeChild(this.popup)
+      delete this.popup
+    }
+  }
+
   getSceneData() {
     return this._scene?.data
   }