import { ref, onBeforeUnmount, onMounted } from 'vue'
|
import { useCache } from '@/hooks/web/useCache'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
|
type Sidebar = 'DATASET' | 'DASHBOARD' | 'DATASOURCE' | 'DATA-FILLING'
|
|
export const useMoveLine = (type: Sidebar) => {
|
const { wsCache } = useCache('localStorage')
|
const width = ref(wsCache.get(type) || 280)
|
wsCache.set('current-collapse_bar', width.value)
|
|
const getCoordinates = () => {
|
if (document.querySelector('.sidebar-move-line')) {
|
document.querySelector('.sidebar-move-line').className = 'sidebar-move-line dragging'
|
}
|
document.addEventListener('mousemove', setCoordinates)
|
document.addEventListener('mouseup', cancelEvent)
|
document.querySelector('body').style['user-select'] = 'none'
|
}
|
|
const setCollapseBarWidth = () => {
|
wsCache.set('current-collapse_bar', width.value)
|
useEmitt().emitter.emit('current-collapse_bar')
|
}
|
|
const setCoordinates = (e: MouseEvent) => {
|
const x = e.clientX
|
if (x > 401 || x < 279) {
|
width.value = Math.max(Math.min(401, x), 279)
|
ele.style.left = width.value - 5 + 'px'
|
setCollapseBarWidth()
|
return
|
}
|
ele.style.left = width.value - 5 + 'px'
|
width.value = x
|
setCollapseBarWidth()
|
}
|
|
const cancelEvent = () => {
|
if (document.querySelector('.sidebar-move-line')) {
|
document.querySelector('.sidebar-move-line').className = 'sidebar-move-line'
|
}
|
document.querySelector('body').style['user-select'] = 'auto'
|
wsCache.set(type, width.value)
|
document.removeEventListener('mousemove', setCoordinates)
|
}
|
|
const node = ref()
|
|
const ele = document.createElement('div')
|
ele.className = 'sidebar-move-line'
|
ele.style.top = '0'
|
ele.style.left = width.value - 5 + 'px'
|
ele.addEventListener('mousedown', getCoordinates)
|
|
onMounted(() => {
|
;(node.value?.$el || node.value)?.appendChild(ele)
|
})
|
|
onBeforeUnmount(() => {
|
cancelEvent()
|
ele.removeEventListener('mousedown', getCoordinates)
|
;(node.value?.$el || node.value)?.removeChild?.(ele)
|
width.value = null
|
})
|
|
return {
|
width,
|
node
|
}
|
}
|
