Merge pull request #63 in YR/star-web-components from dock to master

* commit '70e3a23a322565690a26f30a5a8cff9bda4910c1':
  TASK: #104293 - fix a dock bug

src/components/dock/dock.ts

@@ -1,9 +1,10 @@
-import {html, LitElement} from 'lit'
+import {html} from 'lit'
 import {customElement, query} from 'lit/decorators.js'
 import DockChild from './dock-child'
 import customStyle from './style'
 import dockStyle from './dock-styles'
 import slotStyleHandler from './SlotStyleHandler'
+import {StarBaseElement} from '../base'
 
 interface DragAndDrop {
   // Whether drag-and-drop is enabled
@@ -65,7 +66,7 @@ const DEFAULT_DND_TIMEOUT = 300
 const STATE_CHANGE_TIMEOUT = 100
 
 @customElement('star-dock')
-export default class StarDock extends LitElement {
+export default class StarDock extends StarBaseElement {
   @query('#container') container!: HTMLElement
 
   name: string = 'star-dock'
@@ -116,6 +117,15 @@ export default class StarDock extends LitElement {
     },
   }
 
+  constructor() {
+    super()
+    this.startGestureDetector({
+      panThreshold: 0,
+      velocityThreshold: 0.2,
+      holdThreshold: 300,
+    })
+  }
+
   appendContainerChild = (
     element: HTMLElement,
     order?: number,
@@ -167,8 +177,7 @@ export default class StarDock extends LitElement {
       if (mode == 'current') {
         child.master.style.order = String(child.order)
       } else if (+child.master.style.order !== child.order) {
-        const insertedMaster =
-          this.children[+child.master.style.order]
+        const insertedMaster = this.children[+child.master.style.order]
         if (insertedMaster) {
           this.insertBefore(child.master, insertedMaster)
         }
@@ -222,7 +231,7 @@ export default class StarDock extends LitElement {
   }
 
   dropPosition: 'outter' | 'inner' = 'inner'
-  handleEvent(event: TouchEvent) {
+  handleEvent(event: CustomEvent) {
     switch (event.type) {
       case 'touchstart':
       case 'mousedown':
@@ -266,30 +275,36 @@ export default class StarDock extends LitElement {
           return
         }
 
-        if (this._dnd.delay > 0) {
-          this._dnd.timeout = window.setTimeout(() => {
-            this._dnd.timeout = undefined
-            this.startDrag()
-          }, this._dnd.delay)
-        } else {
+        if (this._dnd.delay <= 0) {
           this.startDrag()
         }
         break
 
-      case 'touchmove':
-      case 'mousemove':
-        let pageX: number, pageY: number, clientX, clientY
-        if (event instanceof MouseEvent) {
-          pageX = event.pageX
-          pageY = event.pageY
-          clientX = event.clientX
-          clientY = event.clientY
-        } else {
-          pageX = (event as TouchEvent).touches[0].pageX
-          pageY = (event as TouchEvent).touches[0].pageY
-          clientX = (event as TouchEvent).touches[0].clientX
-          clientY = (event as TouchEvent).touches[0].clientY
+      case 'holdstart':
+        if (this._dnd.delay > 0) {
+          this.startDrag()
         }
+        break
+
+      case 'holdmove':
+      // case 'touchmove':
+      // case 'mousemove':
+        let pageX: number, pageY: number, clientX, clientY
+        // if (event instanceof MouseEvent) {
+        //   pageX = event.pageX
+        //   pageY = event.pageY
+        //   clientX = event.clientX
+        //   clientY = event.clientY
+        // } else {
+        //   pageX = (event as TouchEvent).touches[0].pageX
+        //   pageY = (event as TouchEvent).touches[0].pageY
+        //   clientX = (event as TouchEvent).touches[0].clientX
+        //   clientY = (event as TouchEvent).touches[0].clientY
+        // }
+        pageX = event.detail.touches[0].pageX
+        pageY = event.detail.touches[0].pageY
+        clientX = event.detail.touches[0].clientX
+        clientY = event.detail.touches[0].clientY
         this.distance = pageX - this._dnd.last.pageX
 
         if (this._dnd.timeout) {
@@ -350,8 +365,9 @@ export default class StarDock extends LitElement {
         this.cancelDrag()
         break
 
-      case 'touchend':
-      case 'mouseup':
+      case 'holdend':
+      // case 'touchend':
+      // case 'mouseup':
         if (this._dnd.active) {
           event.preventDefault()
         }
@@ -621,9 +637,12 @@ export default class StarDock extends LitElement {
     slotStyleHandler.injectGlobalCss(this, dockStyle.cssText, this.name)
     this.addEventListener('touchstart', this)
     this.addEventListener('click', this)
-    this.addEventListener('touchmove', this)
-    this.addEventListener('touchend', this)
+    // this.addEventListener('touchmove', this)
+    // this.addEventListener('touchend', this)
     this.addEventListener('touchcancel', this)
+    this.addEventListener('holdstart', this)
+    this.addEventListener('holdmove', this)
+    this.addEventListener('holdend', this)
 
     this.resize()
   }
@@ -691,7 +710,9 @@ export default class StarDock extends LitElement {
       </div>
     `
   }
-  static styles = [customStyle, dockStyle]
+  static override get styles() {
+    return [customStyle, dockStyle]
+  }
 }
 
 declare global {