base/src/interaction.js

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
	},
}

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'} flex-shrink-0" $style="\${this.isVertical?'height':'width'}:3px;\${!this.isVertical?'height':'width'}:100%;cursor:\${this.isVertical?'row-resize':'col-resize'}"></div>
`))