62 lines
2.4 KiB
JavaScript
62 lines
2.4 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 => {
|
|
container.isVertical = container.hasAttribute('vertical')
|
|
const min = parseInt(container.getAttribute('min')) || 10
|
|
const max = parseInt(container.getAttribute('max')) || 1000
|
|
const target = container.target || container.previousElementSibling
|
|
container.addEventListener('bind', e => {
|
|
if (e.detail !== undefined && e.detail !== null) {
|
|
target.style[container.isVertical ? 'height' : 'width'] = e.detail + 'px'
|
|
}
|
|
})
|
|
const getSize = (startSize, w, h) => {
|
|
const newSize = startSize + (container.isVertical ? h : w)
|
|
return newSize < min ? min : newSize > max ? max : newSize
|
|
}
|
|
container.addEventListener('mousedown', event => {
|
|
const startSize = container.isVertical ? target.offsetHeight : target.offsetWidth
|
|
MouseMover.start(event, {
|
|
onmousemove: ({ w, h }) => {
|
|
const newSize = getSize(startSize, w, h)
|
|
target.style[container.isVertical ? 'height' : 'width'] = newSize + 'px'
|
|
container.dispatchEvent(new CustomEvent('resizing', { detail: { oldSize: startSize, newSize }, bubbles: false }))
|
|
},
|
|
onmouseup: ({ w, h }) => {
|
|
const newSize = getSize(startSize, w, h)
|
|
container.dispatchEvent(new CustomEvent('resize', { detail: { oldSize: startSize, newSize }, bubbles: false }))
|
|
container.dispatchEvent(new CustomEvent('change', { detail: newSize, 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>
|
|
`))
|