gistfile1.txt

$roguerooms_zoomable $mol_view
	zoom? 1
	position? /
		0
		0
	event *
		wheel? <=> event_wheel? null
		keypress? <=> event_key? null
		mousedown? <=> event_mouse_down? null
		mousemove? <=> event_mouse_move? null
		mouseup? <=> event_mouse_up? null
	sub /
		<= ZoomComponent $mol_view
			sub <= content
			style <= styleForZoomComponent
		<= Controls $mol_view
			sub /
				<= ZoomInButton $mol_button
					click? <= zoomIn?
					title \+
				<= ZoomOutButton $mol_button
					click? <= zoomOut?
					title \-
				<= ZoomReset $mol_button
					click? <= reset?
					title \=

///

[roguerooms_zoomable_zoomComponent] {
	position: absolute;
	width: 0;
	height: 0;
	overflow: visible;
	transition: 0s;
	user-select: none;
}

[roguerooms_zoomable_controls] {
	position: absolute;
	top: var(--mol_gap_space);
	right: var(--mol_gap_space); 
	display: flex;
	flex-flow: row nowrap;
	gap: var(--mol_gap_space);
}

///


namespace $.$$ {
	
	export class $roguerooms_zoomable extends $.$roguerooms_zoomable {
		constructor() {
			super()
			this.log()
		}

		@ $mol_mem
		position(next = [0, 0]) {
			return next
		}

		@ $mol_mem
		size(next = [
			// @ts-ignore
			this.dom_node_actual().offsetWidth,
			// @ts-ignore
			this.dom_node_actual().offsetHeight,
		]) {
			console.log('size', next)
			return next
		}

		@ $mol_mem
		isDragging(next = false) {
			return next
		}

		@ $mol_mem
		dragStartPos(next = [0, 0]) {
			return next
		}

		@ $mol_mem
		center() {
			return [
				this.size()[0] / 2,
				this.size()[1] / 2
			]
		}

		@ $mol_mem
		zoom(next = 1) {
			return next
		}

		@ $mol_mem
		zoomLimits(next = [0.4, 10]) {
			return next
		}

		@ $mol_action
		zoomIn() {
			const [min, max] = this.zoomLimits()
			const currentZoom = this.zoom()
			const newZoom = Math.min(max, currentZoom * 1.2)
			this.zoom(newZoom)
		}

		@ $mol_action
		zoomOut() {
			const [min, max] = this.zoomLimits()
			const currentZoom = this.zoom()
			const newZoom = Math.max(min, currentZoom / 1.2)
			this.zoom(newZoom)
		}

		@ $mol_action
		reset() {
			this.position([0, 0])
			this.zoom(1)
		}

		@ $mol_mem
		styleForZoomComponent(): { [key: string]: string | number; } {
			const pos = this.position()
			const center = this.center()

			return {
				...this.style(),
				left: (center[0] + pos[0] * this.zoom()) + 'px',
				top: (center[1] + pos[1] * this.zoom()) + 'px',
				transform: `scale(${this.zoom()})`,
			}
		}

		@ $mol_action
		event_wheel( event: WheelEvent ) {
			if( event.defaultPrevented ) return

			console.log(event)

			if(event.deltaY >= 0) {
				this.zoomOut()
			} else {
				this.zoomIn()
			}
		}

		@ $mol_action
		event_key( event: KeyboardEvent ) {
			// if( event.defaultPrevented ) return

			console.log(event)
			if( event.key === 'a' ) {
				this.position( [ this.position()[0] - 20, this.position()[1] ] )
			}
			if( event.key === 'd' ) {
				this.position( [ this.position()[0] + 20, this.position()[1] ] )
			}
			if( event.key === 'w' ) {
				this.position( [ this.position()[0], this.position()[1] - 20 ] )
			}
			if( event.key === 's' ) {
				this.position( [ this.position()[0], this.position()[1] + 20 ] )
			}
		}

		@ $mol_action
		event_mouse_down(event: MouseEvent) {
			console.log(event)
			if (event.button === 1) { // Средняя кнопка мыши
				this.isDragging(true)
				this.dragStartPos([event.clientX, event.clientY])
				event.preventDefault()
			}
		}

		@ $mol_action
		event_mouse_move(event: MouseEvent) {
			if (!this.isDragging()) return

			const movement = [event.movementX, event.movementY]


			const currentPos = this.position()
			this.position([
				currentPos[0] + event.movementX / this.zoom(),
				currentPos[1] + event.movementY / this.zoom()
			])

			// this.dragStartPos([currentX, currentY])
			event.preventDefault()
		}

		@ $mol_action
		event_mouse_up(event: MouseEvent) {
			if (event.button === 1) {
				this.isDragging(false)
				event.preventDefault()
			}
		}

		@ $mol_mem
		log() {
			console.log(this.zoom())
			console.log(this.isDragging())
		}
	}
}