@operato/process 1.1.25 → 1.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.1.25",
+  "version": "1.1.27",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -51,16 +51,16 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^1.1.25",
-    "@operato/board": "^1.1.25",
-    "@operato/data-grist": "^1.1.25",
-    "@operato/font": "^1.1.25",
+    "@operato/app": "^1.1.27",
+    "@operato/board": "^1.1.27",
+    "@operato/data-grist": "^1.1.27",
+    "@operato/font": "^1.1.27",
     "@operato/graphql": "^1.1.13",
     "@operato/i18n": "^1.1.13",
-    "@operato/input": "^1.1.25",
+    "@operato/input": "^1.1.27",
     "@operato/markdown": "^1.1.13",
     "@operato/popup": "^1.1.23",
-    "@operato/property-editor": "^1.1.25",
+    "@operato/property-editor": "^1.1.27",
     "@operato/styles": "^1.1.13",
     "@operato/utils": "^1.1.15",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -111,5 +111,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "1c50ee23ddf78a70486e099137cacc3e94d1cacc"
+  "gitHead": "5605397be78c3f388251d275cd7d0f41c6ba53ff"
 }

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

@@ -24,7 +24,17 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
         background-color: var(--component-toolbar-background-color);
       }
 
-      img {
+      [components] {
+        display: block;
+        padding: 0;
+        margin: 0;
+
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      [components] > img {
         display: flex;
         flex-direction: row;
 
@@ -63,6 +73,7 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
 
   @query('#shift') shift!: HTMLImageElement
   @query('process-component-menu') private menu!: HTMLElement
+  @query('div[components]') private componentsContainer!: HTMLElement
   @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>
 
   private icons: { [name: string]: string } = {}
@@ -107,19 +118,21 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
     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)} />
-
-      ${componentList
-        .filter(group => group.templates?.length > 0)
-        .map(
-          group => html`
-            <img
-              data-group=${group.name}
-              @click=${(e: MouseEvent) => this._onClickGroup(e)}
-              .src=${this.icons[group.name]}
-            />
-          `
-        )}
+      <div components @mousewheel=${(e: MouseEvent) => this.onWheelEvent(e)}>
+        <img id="shift" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />
+
+        ${componentList
+          .filter(group => group.templates?.length > 0)
+          .map(
+            group => html`
+              <img
+                data-group=${group.name}
+                @click=${(e: MouseEvent) => this._onClickGroup(e)}
+                .src=${this.icons[group.name]}
+              />
+            `
+          )}
+      </div>
 
       <process-component-menu
         tabindex="-1"
@@ -135,6 +148,13 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
     `
   }
 
+  onWheelEvent(e: Event) {
+    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
+    this.componentsContainer.scrollTop += delta * 10
+
+    e.preventDefault()
+  }
+
   _setMode(mode: SCENE_MODE) {
     this.mode = mode
 

package/src/ox-process-modeller.ts

@@ -1,10 +1,10 @@
 import '@material/mwc-fab'
-import '@hatiolab/things-scene'
-import './ox-process-viewer'
 import '@operato/board/ox-scene-handler.js'
 import '@operato/board/ox-scene-layer.js'
 import '@operato/board/ox-scene-property.js'
 import '@operato/board/ox-scene-viewer.js'
+import '@hatiolab/things-scene'
+import './ox-process-viewer'
 
 import { saveAs } from 'file-saver'
 import { css, html, LitElement, PropertyValues } from 'lit'
@@ -15,11 +15,10 @@ import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { OxPopup } from '@operato/popup'
 import { isMacOS, togglefullscreen } from '@operato/utils'
 
-import { ComponentGroup, ComponentTemplate } from './types'
-
 import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar'
 import { EditToolbar } from './modeller/edit-toolbar'
 import { PropertySidebar } from './modeller/property-sidebar/property-sidebar'
+import { ComponentGroup, ComponentTemplate } from './types'
 
 const MACOS = isMacOS()
 
@@ -43,34 +42,38 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
   static styles = [
     css`
       :host {
-        display: grid;
-
-        grid-template-rows: auto 1fr;
-        grid-template-columns: auto 1fr auto;
-        grid-template-areas: 'toolbar toolbar toolbar' 'palletbar scene propertybar';
-        grid-gap: 0;
+        display: flex;
+        flex-direction: column;
 
         height: 100%;
         overflow: hidden;
       }
 
       process-edit-toolbar {
-        grid-area: toolbar;
+        flex: 45px;
+        max-height: 45px;
+      }
+
+      div[content] {
+        flex: 1;
+        max-height: calc(100% - 45px);
+
+        display: flex;
+        flex-direction: row;
       }
 
       process-component-toolbar {
-        grid-area: palletbar;
+        max-height: 100%;
       }
 
       process-property-sidebar {
-        grid-area: propertybar;
         overflow: hidden;
       }
 
       #scene-wrap {
-        grid-area: scene;
         position: relative;
 
+        flex: 1;
         display: flex;
         flex-direction: row;
       }
@@ -180,7 +183,7 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
         ids = this.scene.ids.map(({ key }) => key)
       }
 
-      ids = ids.filter(id => !!id).sort()
+      ids = ids.filter(Boolean).sort()
       callback(ids)
     })
 
@@ -219,72 +222,74 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
         ${this.renderBrandingZone()}
       </process-edit-toolbar>
 
-      <process-component-toolbar
-        .scene=${this.scene}
-        .mode=${this.mode}
-        @mode-changed=${(e: CustomEvent) => {
-          this.mode = e.detail.value
-        }}
-        .componentGroupList=${this.componentGroupList}
-        .group=${this.group}
-      >
-      </process-component-toolbar>
-
-      <div id="scene-wrap">
-        <ox-scene-viewer
-          id="scene"
+      <div content>
+        <process-component-toolbar
           .scene=${this.scene}
-          @scene-changed=${(e: CustomEvent) => {
-            this.scene = e.detail.value
-          }}
-          .model=${this.model}
-          .selected=${this.selected}
-          @selected-changed=${(e: CustomEvent) => {
-            this.selected = e.detail.value
-          }}
           .mode=${this.mode}
           @mode-changed=${(e: CustomEvent) => {
             this.mode = e.detail.value
           }}
-          fit="ratio"
-          .baseUrl=${this.baseUrl}
-          @contextmenu=${() => this.onContextMenu()}
-          .provider=${this.provider}
-          name="modeller"
+          .componentGroupList=${this.componentGroupList}
+          .group=${this.group}
         >
-          <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>
-          <ox-scene-layer type="shift-layer">
-            <ox-scene-property name="text" value="${this.overlay}"></ox-scene-property>
-            <ox-scene-property name="alpha" value="0.3"></ox-scene-property>
-            <ox-scene-property name="fontFamily" value="arial"></ox-scene-property>
-            <ox-scene-property name="fontSize" value="30" type="number"></ox-scene-property>
-            <ox-scene-property name="fontColor" value="navy"></ox-scene-property>
-            <ox-scene-property name="textBaseline" value="top"></ox-scene-property>
-            <ox-scene-property name="textAlign" value="left"></ox-scene-property>
-            <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="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>
-
-        <mwc-fab icon="save" @click=${() => this.onTapSave()} title="save"> </mwc-fab>
+        </process-component-toolbar>
+
+        <div id="scene-wrap">
+          <ox-scene-viewer
+            id="scene"
+            .scene=${this.scene}
+            @scene-changed=${(e: CustomEvent) => {
+              this.scene = e.detail.value
+            }}
+            .model=${this.model}
+            .selected=${this.selected}
+            @selected-changed=${(e: CustomEvent) => {
+              this.selected = e.detail.value
+            }}
+            .mode=${this.mode}
+            @mode-changed=${(e: CustomEvent) => {
+              this.mode = e.detail.value
+            }}
+            fit="ratio"
+            .baseUrl=${this.baseUrl}
+            @contextmenu=${() => this.onContextMenu()}
+            .provider=${this.provider}
+            name="modeller"
+          >
+            <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>
+            <ox-scene-layer type="shift-layer">
+              <ox-scene-property name="text" value="${this.overlay}"></ox-scene-property>
+              <ox-scene-property name="alpha" value="0.3"></ox-scene-property>
+              <ox-scene-property name="fontFamily" value="arial"></ox-scene-property>
+              <ox-scene-property name="fontSize" value="30" type="number"></ox-scene-property>
+              <ox-scene-property name="fontColor" value="navy"></ox-scene-property>
+              <ox-scene-property name="textBaseline" value="top"></ox-scene-property>
+              <ox-scene-property name="textAlign" value="left"></ox-scene-property>
+              <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="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>
+
+          <mwc-fab icon="save" @click=${() => this.onTapSave()} title="save"> </mwc-fab>
+        </div>
+
+        <process-property-sidebar
+          .scene=${this.scene}
+          .selected=${this.selected}
+          .collapsed=${this.hideProperty}
+          .fonts=${this.fonts}
+          .propertyEditor=${this.propertyEditor}
+        >
+        </process-property-sidebar>
       </div>
-
-      <process-property-sidebar
-        .scene=${this.scene}
-        .selected=${this.selected}
-        .collapsed=${this.hideProperty}
-        .fonts=${this.fonts}
-        .propertyEditor=${this.propertyEditor}
-      >
-      </process-property-sidebar>
     `
   }