TASK: #104293 - fix a dock bug
This commit is contained in:
luojiahao
parent
dc18d4783d
commit
70e3a23a32
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue