49 lines
1.9 KiB
JavaScript
49 lines
1.9 KiB
JavaScript
|
import { Component, Util } from '@web/state'
|
||
|
|
|
||
|
|
let _mouseMoverMoving = false
|
||
|
|
let _mouseMoverPos = {}
|
||
|
|
let _mouseMoverEvents = {}
|
||
|
|
|
||
|
|
export const MouseMover = {
|
||
|
|
start: (event, { onmousemove, onmouseup }) => {
|
||
|
|
_mouseMoverPos = { x: event.clientX, y: event.clientY, w: 0, h: 0 }
|
||
|
|
_mouseMoverEvents = { onmousemove, onmouseup }
|
||
|
|
_mouseMoverMoving = true
|
||
|
|
},
|
||
|
|
}
|
||
|
|
globalThis.MouseMover = MouseMover
|
||
|
|
|
||
|
|
if (typeof document !== 'undefined') {
|
||
|
|
document.addEventListener('mouseup', event => {
|
||
|
|
if (!_mouseMoverMoving) return
|
||
|
|
_mouseMoverMoving = false
|
||
|
|
_mouseMoverEvents.onmouseup?.({ event, ..._mouseMoverPos })
|
||
|
|
})
|
||
|
|
document.addEventListener('mousemove', event => {
|
||
|
|
if (!_mouseMoverMoving) return
|
||
|
|
_mouseMoverPos.w = event.clientX - _mouseMoverPos.x
|
||
|
|
_mouseMoverPos.h = event.clientY - _mouseMoverPos.y
|
||
|
|
_mouseMoverEvents.onmousemove?.({ event, ..._mouseMoverPos })
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
Component.register('Resizer', container => {
|
||
|
|
const isVertical = container.hasAttribute('vertical')
|
||
|
|
const min = parseInt(container.getAttribute('min')) || 10
|
||
|
|
const max = parseInt(container.getAttribute('max')) || 1000
|
||
|
|
const target = container.target || container.previousElementSibling
|
||
|
|
const getSize = (startSize, w, h) => {
|
||
|
|
const newSize = startSize + (isVertical ? h : w)
|
||
|
|
return newSize < min ? min : newSize > max ? max : newSize
|
||
|
|
}
|
||
|
|
container.addEventListener('mousedown', event => {
|
||
|
|
const startSize = isVertical ? target.offsetHeight : target.offsetWidth
|
||
|
|
MouseMover.start(event, {
|
||
|
|
onmousemove: ({ w, h }) => target.style[isVertical ? 'height' : 'width'] = getSize(startSize, w, h) + 'px',
|
||
|
|
onmouseup: ({ w, h }) => container.dispatchEvent(new CustomEvent('resize', { detail: { oldSize: startSize, newSize: getSize(startSize, w, h) }, bubbles: false })),
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}, Util.makeDom(/*html*/`
|
||
|
|
<div $class="border-\${this.isVertical?'top':'start'}" $style="\${this.isVertical?'height':'width'}:3px;cursor:\${this.isVertical?'row-resize':'col-resize'}"></div>
|
||
|
|
`))
|