UNPKG

@lhs7/wheel-selector

Version:
129 lines (128 loc) 4.84 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.MouseWheelSelector = void 0; const WheelSelector_1 = require("./WheelSelector"); const events_1 = require("../util/events"); class MouseWheelSelector extends WheelSelector_1.WheelSelector { constructor(options) { super(options); this.isLeftClicked = false; this.activateKey = null; this.startPos = null; this.lineInfo = null; this.eventHandlers = { keydown: (event) => { if (event.key === this.activateKey) { const centerX = window.innerWidth / 2; const centerY = window.innerHeight / 2; (0, events_1.hideMouseCursor)(document); this.activateSelector({ x: centerX, y: centerY }); } }, keyup: (event) => { if (event.key === this.activateKey) { (0, events_1.showMouseCursor)(document); this.deactivateSelector(); } }, click: (event) => { if (this.isActive) { event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); //클릭이벤트 중복 처리를 막기위해 더 뒤에서 처리되는 click에서 처리 this.deactivateSelector(); } }, mousedown: (event) => { if (event.button === 0) this.isLeftClicked = true; if (event.button === 2 && this.isLeftClicked) { event.preventDefault(); this.activateSelector({ x: event.clientX, y: event.clientY }); } }, mousemove: (event) => { if (!this.isActive) { this.startPos = { x: event.clientX, y: event.clientY }; return; } if (this.position === null) return null; const { angle, length } = this.calculLine(event.clientX, event.clientY); this.selectedItemNo = this.checkSelected({ angle, length }); this.lineInfo = { angle, length }; this.redraw(); }, mouseup: (event) => { if (this.isActive) { event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); if (event.button === 2) this.deactivateSelector(); } if (event.button === 0) { this.isLeftClicked = false; } }, contextmenu: (event) => { if (this.isLeftClicked === true) event.preventDefault(); }, }; if (options) this.activateKey = options.activateKey ? options.activateKey : null; this.addEventHandlers(); } activateSelector({ x, y }) { (0, events_1.disableIframePointerEvents)(document); super.activateSelector({ x, y }); } calculLine(ex, ey) { const { x, y } = this.startPos; const [dx, dy] = [ex - x, ey - y]; const angle = Math.atan2(dy, dx); const length = Math.sqrt(dy * dy + dx * dx); return { angle, length, }; } checkSelected({ angle, length, }) { if (length < this.innerDistance) return "CANCEL"; const normalizedAngle = ((angle % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI); let startAngle = 0; const angleStep = (2 * Math.PI) / this.items.length; for (let idx = 0; idx < this.items.length; idx++) { const endAngle = startAngle + angleStep; if (normalizedAngle >= startAngle && normalizedAngle < endAngle) { return idx; } startAngle = endAngle; } return null; } deactivateSelector() { (0, events_1.restoreIframePointerEvents)(document); this.lineInfo = null; super.deactivateSelector(); this.triggerSelected(); } addEventHandlers() { if (document === null) return; for (const [event, handler] of Object.entries(this.eventHandlers)) { document.addEventListener(event, handler, true); } } removeEventHandlers() { if (document === null) return; for (const [event, handler] of Object.entries(this.eventHandlers)) { document.removeEventListener(event, handler, true); } } } exports.MouseWheelSelector = MouseWheelSelector;