@operato/process 1.1.32 → 1.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.1.32",
+  "version": "1.1.33",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -52,7 +52,7 @@
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
     "@operato/app": "^1.1.32",
-    "@operato/board": "^1.1.32",
+    "@operato/board": "^1.1.33",
     "@operato/data-grist": "^1.1.32",
     "@operato/font": "^1.1.32",
     "@operato/graphql": "^1.1.13",
@@ -111,5 +111,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "fec8914bc212af7b10a83243f578c6cef34c4e14"
+  "gitHead": "4971b11f50e98b3fba68786043669a351213fd8d"
 }

package/src/ox-process-viewer.ts

@@ -6,6 +6,7 @@ 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 { ScrollbarStyles } from '@operato/styles'
 
 import { DataStorage } from './data-storage/data-storage.js'
 import { DataSubscriptionProviderImpl } from './graphql/data-subscription.js'
@@ -13,91 +14,79 @@ import { runScenario, startScenario } from './graphql/scenario.js'
 
 @customElement('ox-process-viewer')
 export class OxProcessViewer extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-      position: relative;
+        position: relative;
 
-      width: 100%; /* 전체화면보기를 위해서 필요함. */
-      overflow: hidden;
-    }
+        width: 100%; /* 전체화면보기를 위해서 필요함. */
+        overflow: hidden;
+      }
 
-    #target {
-      flex: 1;
+      #target {
+        flex: 1;
 
-      width: 100%; /* 전체화면보기를 위해서 필요함. */
-      height: 100%;
+        width: 100%; /* 전체화면보기를 위해서 필요함. */
+        height: 100%;
 
-      outline: 0;
-    }
-
-    /* navigation buttons */
-    mwc-icon {
-      z-index: 10;
-      position: absolute;
-      top: 45%;
-      min-width: 50px;
-      width: 50px;
-      height: 50px;
-      margin: 0;
-      padding: 0;
-      color: #fff;
-      user-select: none;
-
-      --mdc-icon-size: 3em;
-    }
-
-    mwc-icon[hidden] {
-      display: none;
-    }
+        outline: 0;
+      }
 
-    mwc-icon:hover {
-      background-color: rgba(0, 0, 0, 0.2);
-      border-radius: 50%;
-    }
+      /* navigation buttons */
+      mwc-icon {
+        z-index: 10;
+        position: absolute;
+        top: 45%;
+        min-width: 50px;
+        width: 50px;
+        height: 50px;
+        margin: 0;
+        padding: 0;
+        color: #fff;
+        user-select: none;
+
+        --mdc-icon-size: 3em;
+      }
 
-    #prev {
-      left: 5px;
-    }
+      mwc-icon[hidden] {
+        display: none;
+      }
 
-    #next {
-      right: 5px;
-    }
+      mwc-icon:hover {
+        background-color: rgba(0, 0, 0, 0.2);
+        border-radius: 50%;
+      }
 
-    #fullscreen {
-      position: absolute;
-      bottom: 15px;
-      right: 16px;
-    }
+      #prev {
+        left: 5px;
+      }
 
-    /* for scroller */
-    ::-webkit-scrollbar {
-      width: 5px;
-      height: 5px;
-    }
-    ::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-    ::-webkit-scrollbar-thumb {
-      background-color: rgba(0, 0, 0, 0.2);
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background-color: #aa866a;
-    }
+      #next {
+        right: 5px;
+      }
 
-    [hidden] {
-      display: none;
-    }
+      #fullscreen {
+        position: absolute;
+        bottom: 15px;
+        right: 16px;
+      }
 
-    @media print {
-      mwc-fab,
-      mwc-icon {
+      [hidden] {
         display: none;
       }
-    }
-  `
+
+      @media print {
+        mwc-fab,
+        mwc-icon {
+          display: none;
+        }
+      }
+    `
+  ]
 
   @property({ type: String }) baseUrl: string = ''
   @property({ type: Object }) process: any = {}
@@ -269,6 +258,13 @@ export class OxProcessViewer extends LitElement {
   setupScene(scene: any) {
     this._scene = scene
 
+    const backgroundColor = this._scene?.root.state.fillStyle
+    if (typeof backgroundColor === 'string') {
+      this.style.backgroundColor = backgroundColor
+    } else {
+      this.style.backgroundColor = 'initial'
+    }
+
     /* scene의 기존 target을 보관한다. */
     this._oldtarget = this._scene.target