@operato/process 1.4.41 → 1.4.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.4.41",
+  "version": "1.4.43",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -69,7 +69,7 @@
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
     "@operato/app": "^1.4.39",
-    "@operato/board": "^1.4.41",
+    "@operato/board": "^1.4.43",
     "@operato/data-grist": "^1.4.39",
     "@operato/font": "^1.4.39",
     "@operato/graphql": "^1.4.20",
@@ -128,5 +128,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f08abc45b71c195fb3b8e4db2d001acc8f7fe40a"
+  "gitHead": "5d18365d3ce6a8832a78bb3cfdca6c25947604d6"
 }

package/src/modeller/edit-toolbar.ts

@@ -72,16 +72,6 @@ export class EditToolbar extends LitElement {
       .addEventListener('tap', this.onTapFontDecrease.bind(this) as EventListener)
     this.renderRoot.querySelector('#group')!.addEventListener('tap', this.onTapGroup.bind(this) as EventListener)
     this.renderRoot.querySelector('#ungroup')!.addEventListener('tap', this.onTapUngroup.bind(this) as EventListener)
-    this.renderRoot
-      .querySelector('#symmetry-x')!
-      .addEventListener('tap', this.onTapSymmetryX.bind(this) as EventListener)
-    this.renderRoot
-      .querySelector('#symmetry-y')!
-      .addEventListener('tap', this.onTapSymmetryY.bind(this) as EventListener)
-    this.renderRoot.querySelector('#rotate-cw')!.addEventListener('tap', this.onTapRotateCW.bind(this) as EventListener)
-    this.renderRoot
-      .querySelector('#rotate-ccw')!
-      .addEventListener('tap', this.onTapRotateCCW.bind(this) as EventListener)
     this.renderRoot
       .querySelector('#toggle-property')!
       .addEventListener('tap', this.onTapToggle.bind(this) as EventListener)
@@ -194,14 +184,6 @@ export class EditToolbar extends LitElement {
 
         <span class="vline"></span>
 
-        <span button id="symmetry-x" title="symmetry-x (${this.getShortcutString('alt', 'shift', 'x')})"> </span>
-        <span button id="symmetry-y" title="symmetry-y (${this.getShortcutString('alt', 'shift', 'y')})"> </span>
-        <span button id="rotate-cw" title="rotate clockwise (${this.getShortcutString('alt', 'shift', 'e')})"> </span>
-        <span button id="rotate-ccw" title="rotate counter clockwise (${this.getShortcutString('alt', 'shift', 'w')})">
-        </span>
-
-        <span class="vline"></span>
-
         <span button id="group" title="group (${this.getShortcutString('cmd', 'g')})"> </span>
         <span button id="ungroup" title="ungroup (${this.getShortcutString('cmd', 'shift', 'g')})"> </span>
 
@@ -292,7 +274,6 @@ export class EditToolbar extends LitElement {
         break
       case 'KeyY':
         if (ctrlKey && !shiftKey) this.onTapRedo()
-        else if (altKey && shiftKey) this.onTapSymmetryY()
         break
       case 'KeyC':
         if (ctrlKey && !shiftKey) this.onTapCopy()
@@ -300,7 +281,6 @@ export class EditToolbar extends LitElement {
         break
       case 'KeyX':
         if (ctrlKey && !shiftKey) this.onTapCut()
-        else if (altKey && shiftKey) this.onTapSymmetryX()
         break
       case 'KeyV':
         if (ctrlKey && !shiftKey) {
@@ -361,9 +341,6 @@ export class EditToolbar extends LitElement {
       case 'KeyT':
         if (altKey && shiftKey) this.onTapAlign('top')
         break
-      case 'KeyY':
-        if (altKey && shiftKey) this.onTapSymmetryY()
-        break
       case 'KeyD':
         if (ctrlKey) {
           this.onTapFitScene()
@@ -371,11 +348,7 @@ export class EditToolbar extends LitElement {
         }
         break
       case 'KeyE':
-        if (altKey && shiftKey) this.onTapRotateCW()
-        else if (ctrlKey && shiftKey) this.onTapDownloadModel()
-        break
-      case 'KeyW':
-        if (altKey && shiftKey) this.onTapRotateCCW()
+        if (ctrlKey && shiftKey) this.onTapDownloadModel()
         break
       case 'Digit1':
         if (ctrlKey) {
@@ -550,48 +523,6 @@ export class EditToolbar extends LitElement {
     zorder && this.scene.zorder(zorder)
   }
 
-  onTapSymmetryX() {
-    this.scene && this.scene.symmetryX()
-  }
-
-  onTapSymmetryY() {
-    this.scene && this.scene.symmetryY()
-  }
-
-  onTapRotateCW() {
-    if (!this.scene) return
-
-    var selected = this.scene.selected
-    if (selected.length && selected[0].isRootModel()) return
-
-    this.scene.undoableChange(function () {
-      selected.forEach(function (component) {
-        var rotation = component.get('rotation')
-
-        if (!rotation) rotation = 0
-
-        component.set('rotation', (rotation + Math.PI / 2) % (Math.PI * 2))
-      })
-    })
-  }
-
-  onTapRotateCCW() {
-    if (!this.scene) return
-
-    var selected = this.scene.selected
-    if (selected.length && selected[0].isRootModel()) return
-
-    this.scene.undoableChange(function () {
-      selected.forEach(function (component) {
-        var rotation = component.get('rotation')
-
-        if (!rotation) rotation = 0
-
-        component.set('rotation', (rotation - Math.PI / 2) % (Math.PI * 2))
-      })
-    })
-  }
-
   onTapGroup() {
     this.scene && this.scene.group()
   }

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

@@ -2,9 +2,11 @@ import '@operato/input/ox-input-search.js'
 
 import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { property, state } from 'lit/decorators.js'
-import Sortable from 'sortablejs'
 
+// TODO test Sortable
+// import Sortable from 'sortablejs'
 import { i18next } from '@operato/i18n'
+
 import { Component, Container, Scene } from '@hatiolab/things-scene'
 
 export class SceneInspector extends LitElement {
@@ -122,6 +124,7 @@ export class SceneInspector extends LitElement {
 
   private _extendedMap: any
   private show: boolean = false
+  private count: number = -1
 
   disconnectScene(scene?: Scene) {
     if (scene) {
@@ -140,11 +143,13 @@ export class SceneInspector extends LitElement {
   }
 
   render() {
+    this.count = 0
+
     return html`
       <ox-input-search
         .placeholder=${i18next.t('text.search with type, id or tag')}
         autofocus
-        @change=${(e: Event) => (this.searchText = (e.target as HTMLInputElement).value)}
+        @change=${(e: Event) => (this.searchText = ((e.target as HTMLInputElement).value || '').toLowerCase())}
       ></ox-input-search>
 
       <div result>${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)}</div>
@@ -191,35 +196,38 @@ export class SceneInspector extends LitElement {
       }
     }
 
-    this.updateComplete.then(() => {
-      this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {
-        new Sortable(sortable as HTMLElement, this.sortableConfig)
-      })
-    })
+    // TODO test Sortable
+    // this.updateComplete.then(() => {
+    //   this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {
+    //     new Sortable(sortable as HTMLElement, this.sortableConfig)
+    //   })
+    // })
   }
 
-  sortableConfig: Sortable.Options = {
-    group: 'inspector',
-    animation: 150,
-    draggable: '.component',
-    swapThreshold: 1,
-    onSort: this.onSort.bind(this)
-  }
+  // TODO test Sortable
+  // sortableConfig: Sortable.Options = {
+  //   group: 'inspector',
+  //   animation: 150,
+  //   draggable: '.component',
+  //   swapThreshold: 1,
+  //   onSort: this.onSort.bind(this)
+  // }
 
-  onSort(e: Sortable.SortableEvent) {
-    if (!this.scene) return
+  // TODO test Sortable
+  // onSort(e: Sortable.SortableEvent) {
+  //   if (!this.scene) return
 
-    var component = (e.item as HTMLElement & { component: Component }).component
-    var to_container = (e.to as HTMLElement & { component: Component }).component as Container
-    var to_index = e.newIndex! - 1
+  //   var component = (e.item as HTMLElement & { component: Component }).component
+  //   var to_container = (e.to as HTMLElement & { component: Component }).component as Container
+  //   var to_index = e.newIndex! - 1
 
-    this.scene.move(component, to_container, to_index)
+  //   this.scene.move(component, to_container, to_index)
 
-    this.show = false
-    this.updateComplete.then(() => {
-      this.show = true
-    })
-  }
+  //   this.show = false
+  //   this.updateComplete.then(() => {
+  //     this.show = true
+  //   })
+  // }
 
   _onclick(e: MouseEvent) {
     e.stopPropagation()
@@ -245,7 +253,7 @@ export class SceneInspector extends LitElement {
         this.toggleExtended(component)
       }
 
-      this.selectComponent(component)
+      this.selectComponent(component, e.shiftKey)
     } else {
       if (classList.contains('inspector')) {
         this.show = !this.show
@@ -317,20 +325,33 @@ export class SceneInspector extends LitElement {
     this.requestUpdate()
   }
 
-  selectComponent(component: Component) {
-    this.scene!.selected = [component]
+  selectComponent(component: Component, append: boolean = false) {
+    this.scene!.selected = append ? [...this.scene!.selected, component] : [component]
+
+    component.trigger('reactionreset')
+    component.trigger('reaction')
 
     this.requestUpdate()
   }
 
-  shouldBeShown(component: Component): boolean {
+  shouldBeShown(component: Component, counting: boolean = false): boolean {
     const { type, name, id, tag } = component.state
+    const found =
+      !this.searchText || `${type} ${name || ''} ${id || ''} ${tag || ''}`.toLowerCase().search(this.searchText) > -1
+
+    if (counting && found) {
+      this.count++
+    }
+
+    if (counting) {
+      console.log(found)
+    }
+
+    const foundChildren = ((component as Container).components || []).filter((child: Component) =>
+      this.shouldBeShown(child, counting)
+    ).length
 
-    return !!(
-      !this.searchText ||
-      `${type} ${name || ''} ${id || ''} ${tag || ''}`.search(this.searchText) > -1 ||
-      ((component as Container).components || []).find((child: Component) => this.shouldBeShown(child))
-    )
+    return !!(found || foundChildren > 0)
   }
 
   renderComponent(component: Component, depth: number): TemplateResult {
@@ -338,7 +359,7 @@ export class SceneInspector extends LitElement {
       return html``
     }
 
-    if (!this.shouldBeShown(component)) {
+    if (!this.shouldBeShown(component, depth == 0)) {
       return html``
     }
 
@@ -365,9 +386,8 @@ export class SceneInspector extends LitElement {
 
           <span class=${this.getNodeHandleClass(component)}> </span>
 
-          <span class="type">${depth == 0 ? 'ROOT' : type}</span> ${name
-            ? html` <span class="name">${name}</span> `
-            : html``}
+          <span class="type">${depth == 0 ? html`ROOT(count: ${this.count})` : type}</span>
+          ${name ? html` <span class="name">${name}</span> ` : html``}
         </span>
 
         ${extended.map(child => this.renderComponent(child, depth + 1))}