1127 lines
37 KiB
JavaScript
1127 lines
37 KiB
JavaScript
|
|
/**
|
|
* Create mouse bindings
|
|
*/
|
|
(function () {
|
|
/**
|
|
* Global registry to store mouse shortcuts for multiple elements
|
|
*/
|
|
const MouseRegistry = {
|
|
elements: new Map(), // elementId -> { tree, element }
|
|
listenerAttached: false,
|
|
snapshotHistory: [],
|
|
pendingTimeout: null,
|
|
pendingMatches: [], // Array of matches waiting for timeout
|
|
sequenceTimeout: 500, // 500ms timeout for sequences
|
|
clickHandler: null,
|
|
dblclickHandler: null, // Handler reference for dblclick
|
|
contextmenuHandler: null,
|
|
mousedownState: null, // Active drag state (only after movement detected)
|
|
suppressNextClick: false, // Prevents click from firing after mousedown>mouseup
|
|
mousedownHandler: null, // Handler reference for cleanup
|
|
mouseupHandler: null, // Handler reference for cleanup
|
|
mousedownSafetyTimeout: null, // Safety timeout if mouseup never arrives
|
|
mousedownPending: null, // Pending mousedown data (before movement detected)
|
|
mousemoveHandler: null, // Handler for detecting drag movement
|
|
dragThreshold: 5 // Minimum pixels to consider it a drag (not a click)
|
|
};
|
|
|
|
/**
|
|
* Normalize mouse action names
|
|
* @param {string} action - The action to normalize
|
|
* @returns {string} - Normalized action name
|
|
*/
|
|
function normalizeAction(action) {
|
|
const normalized = action.toLowerCase().trim();
|
|
|
|
// Handle aliases
|
|
const aliasMap = {
|
|
'rclick': 'right_click',
|
|
'double_click': 'dblclick',
|
|
'dclick': 'dblclick'
|
|
};
|
|
|
|
return aliasMap[normalized] || normalized;
|
|
}
|
|
|
|
/**
|
|
* Check if an action Set contains a mousedown>mouseup action
|
|
* @param {Set} actionSet - Set of normalized actions
|
|
* @returns {boolean} - True if contains mousedown>mouseup or rmousedown>mouseup
|
|
*/
|
|
function isMousedownUpAction(actionSet) {
|
|
return actionSet.has('mousedown>mouseup') || actionSet.has('rmousedown>mouseup');
|
|
}
|
|
|
|
/**
|
|
* Get the expected mouse button for a mousedown>mouseup action
|
|
* @param {Set} actionSet - Set of normalized actions
|
|
* @returns {number} - 0 for left button, 2 for right button
|
|
*/
|
|
function getMousedownUpButton(actionSet) {
|
|
return actionSet.has('rmousedown>mouseup') ? 2 : 0;
|
|
}
|
|
|
|
/**
|
|
* Scan all registered element trees to find mousedown>mouseup candidates
|
|
* that are the next expected step given the current snapshot history.
|
|
* @param {Array} snapshotHistory - Current snapshot history
|
|
* @returns {Array} - Array of { elementId, node, actionSet, button } candidates
|
|
*/
|
|
function checkTreesForMousedownUp(snapshotHistory) {
|
|
const candidates = [];
|
|
|
|
for (const [elementId, data] of MouseRegistry.elements) {
|
|
const element = document.getElementById(elementId);
|
|
if (!element) continue;
|
|
|
|
// Traverse tree to current position in history
|
|
const currentNode = traverseTree(data.tree, snapshotHistory);
|
|
if (!currentNode) continue;
|
|
|
|
// Check children for mousedown>mouseup actions
|
|
for (const [key, childNode] of currentNode.children) {
|
|
const actionSet = new Set(key.split('+'));
|
|
if (isMousedownUpAction(actionSet)) {
|
|
candidates.push({
|
|
elementId: elementId,
|
|
node: childNode,
|
|
actionSet: actionSet,
|
|
button: getMousedownUpButton(actionSet)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return candidates;
|
|
}
|
|
|
|
/**
|
|
* Create a unique string key from a Set of actions for Map indexing
|
|
* @param {Set} actionSet - Set of normalized actions
|
|
* @returns {string} - Sorted string representation
|
|
*/
|
|
function setToKey(actionSet) {
|
|
return Array.from(actionSet).sort().join('+');
|
|
}
|
|
|
|
/**
|
|
* Parse a single element (can be a simple click or click with modifiers)
|
|
* @param {string} element - The element string (e.g., "click" or "ctrl+click")
|
|
* @returns {Set} - Set of normalized actions
|
|
*/
|
|
function parseElement(element) {
|
|
if (element.includes('+')) {
|
|
// Click with modifiers
|
|
return new Set(element.split('+').map(a => normalizeAction(a)));
|
|
}
|
|
// Simple click
|
|
return new Set([normalizeAction(element)]);
|
|
}
|
|
|
|
/**
|
|
* Parse a combination string into sequence elements
|
|
* @param {string} combination - The combination string (e.g., "click right_click")
|
|
* @returns {Array} - Array of Sets representing the sequence
|
|
*/
|
|
function parseCombination(combination) {
|
|
// Check if it's a sequence (contains space)
|
|
if (combination.includes(' ')) {
|
|
return combination.split(' ').map(el => parseElement(el.trim()));
|
|
}
|
|
|
|
// Single element (can be a click or click with modifiers)
|
|
return [parseElement(combination)];
|
|
}
|
|
|
|
/**
|
|
* Create a new tree node
|
|
* @returns {Object} - New tree node
|
|
*/
|
|
function createTreeNode() {
|
|
return {
|
|
config: null,
|
|
combinationStr: null,
|
|
children: new Map()
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Build a tree from combinations
|
|
* @param {Object} combinations - Map of combination strings to HTMX config objects
|
|
* @returns {Object} - Root tree node
|
|
*/
|
|
function buildTree(combinations) {
|
|
const root = createTreeNode();
|
|
|
|
for (const [combinationStr, config] of Object.entries(combinations)) {
|
|
const sequence = parseCombination(combinationStr);
|
|
//console.log("Parsing mouse combination", combinationStr, "=>", sequence);
|
|
let currentNode = root;
|
|
|
|
for (const actionSet of sequence) {
|
|
const key = setToKey(actionSet);
|
|
|
|
if (!currentNode.children.has(key)) {
|
|
currentNode.children.set(key, createTreeNode());
|
|
}
|
|
|
|
currentNode = currentNode.children.get(key);
|
|
}
|
|
|
|
// Mark as end of sequence and store config
|
|
currentNode.config = config;
|
|
currentNode.combinationStr = combinationStr;
|
|
}
|
|
|
|
return root;
|
|
}
|
|
|
|
/**
|
|
* Traverse the tree with the current snapshot history
|
|
* @param {Object} treeRoot - Root of the tree
|
|
* @param {Array} snapshotHistory - Array of Sets representing mouse actions
|
|
* @returns {Object|null} - Current node or null if no match
|
|
*/
|
|
function traverseTree(treeRoot, snapshotHistory) {
|
|
let currentNode = treeRoot;
|
|
|
|
for (const snapshot of snapshotHistory) {
|
|
const key = setToKey(snapshot);
|
|
|
|
if (!currentNode.children.has(key)) {
|
|
return null;
|
|
}
|
|
|
|
currentNode = currentNode.children.get(key);
|
|
}
|
|
|
|
return currentNode;
|
|
}
|
|
|
|
/**
|
|
* Check if we're inside an input element where clicking should work normally
|
|
* @returns {boolean} - True if inside an input-like element
|
|
*/
|
|
function isInInputContext() {
|
|
const activeElement = document.activeElement;
|
|
if (!activeElement) return false;
|
|
|
|
const tagName = activeElement.tagName.toLowerCase();
|
|
|
|
// Check for input/textarea
|
|
if (tagName === 'input' || tagName === 'textarea') {
|
|
return true;
|
|
}
|
|
|
|
// Check for contenteditable
|
|
if (activeElement.isContentEditable) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Get the element that was actually clicked (from registered elements)
|
|
* @param {Element} target - The clicked element
|
|
* @returns {string|null} - Element ID if found, null otherwise
|
|
*/
|
|
function findRegisteredElement(target) {
|
|
// Check if target itself is registered
|
|
if (target.id && MouseRegistry.elements.has(target.id)) {
|
|
return target.id;
|
|
}
|
|
|
|
// Check if any parent is registered
|
|
let current = target.parentElement;
|
|
while (current) {
|
|
if (current.id && MouseRegistry.elements.has(current.id)) {
|
|
return current.id;
|
|
}
|
|
current = current.parentElement;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Create a snapshot from mouse event
|
|
* @param {MouseEvent} event - The mouse event
|
|
* @param {string} baseAction - The base action ('click' or 'right_click')
|
|
* @returns {Set} - Set of actions representing this click
|
|
*/
|
|
function createSnapshot(event, baseAction) {
|
|
const actions = new Set([baseAction]);
|
|
|
|
// Add modifiers if present
|
|
if (event.ctrlKey || event.metaKey) {
|
|
actions.add('ctrl');
|
|
}
|
|
if (event.shiftKey) {
|
|
actions.add('shift');
|
|
}
|
|
if (event.altKey) {
|
|
actions.add('alt');
|
|
}
|
|
|
|
return actions;
|
|
}
|
|
|
|
/**
|
|
* Handle mouse events and trigger matching combinations
|
|
* @param {MouseEvent} event - The mouse event
|
|
* @param {string} baseAction - The base action ('click' or 'right_click')
|
|
*/
|
|
function handleMouseEvent(event, baseAction) {
|
|
// Different behavior for click vs right_click
|
|
if (baseAction === 'click') {
|
|
// Click: trigger for ALL registered elements (useful for closing modals/popups)
|
|
handleGlobalClick(event);
|
|
} else if (baseAction === 'right_click') {
|
|
// Right-click: trigger ONLY if clicked on a registered element
|
|
handleElementRightClick(event);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle global click events (triggers for all registered elements)
|
|
* @param {MouseEvent} event - The mouse event
|
|
*/
|
|
function handleGlobalClick(event) {
|
|
// Suppress click that fires after mousedown>mouseup drag
|
|
if (MouseRegistry.suppressNextClick) {
|
|
MouseRegistry.suppressNextClick = false;
|
|
return;
|
|
}
|
|
|
|
// Don't process clicks during active drag mode (movement detected)
|
|
// But DO process clicks if only mousedownPending (no movement = normal click)
|
|
if (MouseRegistry.mousedownState) return;
|
|
|
|
// DEBUG: Measure click handler performance
|
|
const clickStart = performance.now();
|
|
const elementCount = MouseRegistry.elements.size;
|
|
|
|
//console.warn(`🖱️ Click handler START: processing ${elementCount} registered elements`);
|
|
|
|
// Create a snapshot of current mouse action with modifiers
|
|
const snapshot = createSnapshot(event, 'click');
|
|
|
|
// Add snapshot to history
|
|
MouseRegistry.snapshotHistory.push(snapshot);
|
|
|
|
// Cancel any pending timeout
|
|
if (MouseRegistry.pendingTimeout) {
|
|
clearTimeout(MouseRegistry.pendingTimeout);
|
|
MouseRegistry.pendingTimeout = null;
|
|
MouseRegistry.pendingMatches = [];
|
|
}
|
|
|
|
// Collect match information for ALL registered elements
|
|
const currentMatches = [];
|
|
let anyHasLongerSequence = false;
|
|
let foundAnyMatch = false;
|
|
let iterationCount = 0;
|
|
|
|
for (const [elementId, data] of MouseRegistry.elements) {
|
|
iterationCount++;
|
|
const element = document.getElementById(elementId);
|
|
if (!element) continue;
|
|
|
|
// Check if click was inside this element
|
|
const isInside = element.contains(event.target);
|
|
|
|
const treeRoot = data.tree;
|
|
|
|
// Traverse the tree with current snapshot history
|
|
const currentNode = traverseTree(treeRoot, MouseRegistry.snapshotHistory);
|
|
|
|
if (!currentNode) {
|
|
// No match in this tree
|
|
continue;
|
|
}
|
|
|
|
// We found at least a partial match
|
|
foundAnyMatch = true;
|
|
|
|
// Check if we have a match (node has config)
|
|
const hasMatch = currentNode.config !== null;
|
|
|
|
// Check if there are longer sequences possible (node has children)
|
|
const hasLongerSequences = currentNode.children.size > 0;
|
|
|
|
if (hasLongerSequences) {
|
|
anyHasLongerSequence = true;
|
|
}
|
|
|
|
// Collect matches
|
|
if (hasMatch) {
|
|
currentMatches.push({
|
|
elementId: elementId,
|
|
config: currentNode.config,
|
|
combinationStr: currentNode.combinationStr,
|
|
isInside: isInside
|
|
});
|
|
}
|
|
}
|
|
|
|
// Prevent default only if click was INSIDE a registered element
|
|
// Clicks outside should preserve native behavior (checkboxes, buttons, etc.)
|
|
const anyMatchInside = currentMatches.some(match => match.isInside);
|
|
if (currentMatches.length > 0 && anyMatchInside && !isInInputContext()) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
// Decision logic based on matches and longer sequences
|
|
if (currentMatches.length > 0 && !anyHasLongerSequence) {
|
|
// We have matches and NO longer sequences possible
|
|
// Trigger ALL matches immediately
|
|
for (const match of currentMatches) {
|
|
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, event);
|
|
}
|
|
|
|
// Clear history after triggering
|
|
MouseRegistry.snapshotHistory = [];
|
|
|
|
} else if (currentMatches.length > 0 && anyHasLongerSequence) {
|
|
// We have matches but longer sequences are possible
|
|
// Wait for timeout - ALL current matches will be triggered if timeout expires
|
|
|
|
MouseRegistry.pendingMatches = currentMatches;
|
|
const savedEvent = event; // Save event for timeout callback
|
|
|
|
MouseRegistry.pendingTimeout = setTimeout(() => {
|
|
// Timeout expired, trigger ALL pending matches
|
|
for (const match of MouseRegistry.pendingMatches) {
|
|
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, savedEvent);
|
|
}
|
|
|
|
// Clear state
|
|
MouseRegistry.snapshotHistory = [];
|
|
MouseRegistry.pendingMatches = [];
|
|
MouseRegistry.pendingTimeout = null;
|
|
}, MouseRegistry.sequenceTimeout);
|
|
|
|
} else if (currentMatches.length === 0 && anyHasLongerSequence) {
|
|
// No matches yet but longer sequences are possible
|
|
// Just wait, don't trigger anything
|
|
|
|
} else {
|
|
// No matches and no longer sequences possible
|
|
// This is an invalid sequence - clear history
|
|
MouseRegistry.snapshotHistory = [];
|
|
}
|
|
|
|
// If we found no match at all, clear the history
|
|
if (!foundAnyMatch) {
|
|
MouseRegistry.snapshotHistory = [];
|
|
}
|
|
|
|
// Also clear history if it gets too long (prevent memory issues)
|
|
if (MouseRegistry.snapshotHistory.length > 10) {
|
|
MouseRegistry.snapshotHistory = [];
|
|
}
|
|
|
|
// Warn if click handler is slow
|
|
const clickDuration = performance.now() - clickStart;
|
|
if (clickDuration > 100) {
|
|
console.warn(`⚠️ SLOW CLICK HANDLER: ${clickDuration.toFixed(2)}ms for ${elementCount} elements`);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle right-click events (triggers only for clicked element)
|
|
* @param {MouseEvent} event - The mouse event
|
|
*/
|
|
function handleElementRightClick(event) {
|
|
// Don't process right-clicks during active drag with right button
|
|
// But DO process if only pending (no movement = normal right-click)
|
|
if (MouseRegistry.mousedownState && MouseRegistry.mousedownState.button === 2) return;
|
|
|
|
// Find which registered element was clicked
|
|
const elementId = findRegisteredElement(event.target);
|
|
|
|
if (!elementId) {
|
|
// Right-click wasn't on a registered element - don't prevent default
|
|
// This allows browser context menu to appear
|
|
return;
|
|
}
|
|
|
|
//console.debug("Right-click on registered element", elementId);
|
|
|
|
// For right-click, clicked_inside is always true (we only trigger if clicked on element)
|
|
const clickedInside = true;
|
|
|
|
// Create a snapshot of current mouse action with modifiers
|
|
const snapshot = createSnapshot(event, 'right_click');
|
|
|
|
// Add snapshot to history
|
|
MouseRegistry.snapshotHistory.push(snapshot);
|
|
|
|
// Cancel any pending timeout
|
|
if (MouseRegistry.pendingTimeout) {
|
|
clearTimeout(MouseRegistry.pendingTimeout);
|
|
MouseRegistry.pendingTimeout = null;
|
|
MouseRegistry.pendingMatches = [];
|
|
}
|
|
|
|
// Collect match information for this element
|
|
const currentMatches = [];
|
|
let anyHasLongerSequence = false;
|
|
let foundAnyMatch = false;
|
|
|
|
const data = MouseRegistry.elements.get(elementId);
|
|
if (!data) return;
|
|
|
|
const treeRoot = data.tree;
|
|
|
|
// Traverse the tree with current snapshot history
|
|
const currentNode = traverseTree(treeRoot, MouseRegistry.snapshotHistory);
|
|
|
|
if (!currentNode) {
|
|
// No match in this tree
|
|
//console.debug("No match in tree for right-click");
|
|
// Clear history for invalid sequences
|
|
MouseRegistry.snapshotHistory = [];
|
|
return;
|
|
}
|
|
|
|
// We found at least a partial match
|
|
foundAnyMatch = true;
|
|
|
|
// Check if we have a match (node has config)
|
|
const hasMatch = currentNode.config !== null;
|
|
|
|
// Check if there are longer sequences possible (node has children)
|
|
const hasLongerSequences = currentNode.children.size > 0;
|
|
|
|
if (hasLongerSequences) {
|
|
anyHasLongerSequence = true;
|
|
}
|
|
|
|
// Collect matches
|
|
if (hasMatch) {
|
|
currentMatches.push({
|
|
elementId: elementId,
|
|
config: currentNode.config,
|
|
combinationStr: currentNode.combinationStr,
|
|
isInside: true // Right-click only triggers when clicking on element
|
|
});
|
|
}
|
|
|
|
// Prevent default if we found any match and not in input context
|
|
if (currentMatches.length > 0 && !isInInputContext()) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
// Decision logic based on matches and longer sequences
|
|
if (currentMatches.length > 0 && !anyHasLongerSequence) {
|
|
// We have matches and NO longer sequences possible
|
|
// Trigger ALL matches immediately
|
|
for (const match of currentMatches) {
|
|
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, event);
|
|
}
|
|
|
|
// Clear history after triggering
|
|
MouseRegistry.snapshotHistory = [];
|
|
|
|
} else if (currentMatches.length > 0 && anyHasLongerSequence) {
|
|
// We have matches but longer sequences are possible
|
|
// Wait for timeout - ALL current matches will be triggered if timeout expires
|
|
|
|
MouseRegistry.pendingMatches = currentMatches;
|
|
const savedEvent = event; // Save event for timeout callback
|
|
|
|
MouseRegistry.pendingTimeout = setTimeout(() => {
|
|
// Timeout expired, trigger ALL pending matches
|
|
for (const match of MouseRegistry.pendingMatches) {
|
|
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, savedEvent);
|
|
}
|
|
|
|
// Clear state
|
|
MouseRegistry.snapshotHistory = [];
|
|
MouseRegistry.pendingMatches = [];
|
|
MouseRegistry.pendingTimeout = null;
|
|
}, MouseRegistry.sequenceTimeout);
|
|
|
|
} else if (currentMatches.length === 0 && anyHasLongerSequence) {
|
|
// No matches yet but longer sequences are possible
|
|
// Just wait, don't trigger anything
|
|
|
|
} else {
|
|
// No matches and no longer sequences possible
|
|
// This is an invalid sequence - clear history
|
|
MouseRegistry.snapshotHistory = [];
|
|
}
|
|
|
|
// If we found no match at all, clear the history
|
|
if (!foundAnyMatch) {
|
|
MouseRegistry.snapshotHistory = [];
|
|
}
|
|
|
|
// Also clear history if it gets too long (prevent memory issues)
|
|
if (MouseRegistry.snapshotHistory.length > 10) {
|
|
MouseRegistry.snapshotHistory = [];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle dblclick events (triggers for all registered elements).
|
|
* Uses a fresh single-step history so it never conflicts with click sequences.
|
|
* @param {MouseEvent} event - The dblclick event
|
|
*/
|
|
function handleDblClick(event) {
|
|
const snapshot = createSnapshot(event, 'dblclick');
|
|
const dblclickHistory = [snapshot];
|
|
|
|
const currentMatches = [];
|
|
|
|
for (const [elementId, data] of MouseRegistry.elements) {
|
|
const element = document.getElementById(elementId);
|
|
if (!element) continue;
|
|
|
|
const isInside = element.contains(event.target);
|
|
const currentNode = traverseTree(data.tree, dblclickHistory);
|
|
if (!currentNode || !currentNode.config) continue;
|
|
|
|
currentMatches.push({
|
|
elementId: elementId,
|
|
config: currentNode.config,
|
|
combinationStr: currentNode.combinationStr,
|
|
isInside: isInside
|
|
});
|
|
}
|
|
|
|
const anyMatchInside = currentMatches.some(m => m.isInside);
|
|
if (anyMatchInside && !isInInputContext()) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
for (const match of currentMatches) {
|
|
triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, event);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clean up mousedown state and safety timeout
|
|
*/
|
|
function clearMousedownState() {
|
|
if (MouseRegistry.mousedownSafetyTimeout) {
|
|
clearTimeout(MouseRegistry.mousedownSafetyTimeout);
|
|
MouseRegistry.mousedownSafetyTimeout = null;
|
|
}
|
|
|
|
// Remove mousemove listener if attached
|
|
if (MouseRegistry.mousemoveHandler) {
|
|
document.removeEventListener('mousemove', MouseRegistry.mousemoveHandler);
|
|
MouseRegistry.mousemoveHandler = null;
|
|
}
|
|
|
|
MouseRegistry.mousedownState = null;
|
|
MouseRegistry.mousedownPending = null;
|
|
}
|
|
|
|
/**
|
|
* Handle global mousedown events for mousedown>mouseup actions.
|
|
* Stores pending state and waits for movement to activate drag mode.
|
|
* @param {MouseEvent} event - The mousedown event
|
|
*/
|
|
function handleMouseDown(event) {
|
|
// Exit early if already in mousedown state or pending
|
|
if (MouseRegistry.mousedownState || MouseRegistry.mousedownPending) return;
|
|
|
|
// Check if any registered tree has a mousedown>mouseup action as the next step
|
|
const candidates = checkTreesForMousedownUp(MouseRegistry.snapshotHistory);
|
|
if (candidates.length === 0) return;
|
|
|
|
// Filter candidates by button match
|
|
const matchingCandidates = candidates.filter(c => c.button === event.button);
|
|
if (matchingCandidates.length === 0) return;
|
|
|
|
// Check if mousedown target is inside any registered element
|
|
const hasFocusMap = {};
|
|
for (const candidate of matchingCandidates) {
|
|
const element = document.getElementById(candidate.elementId);
|
|
if (element) {
|
|
hasFocusMap[candidate.elementId] = document.activeElement === element;
|
|
}
|
|
}
|
|
|
|
// Store PENDING mousedown state (not activated yet)
|
|
MouseRegistry.mousedownPending = {
|
|
button: event.button,
|
|
ctrlKey: event.ctrlKey || event.metaKey,
|
|
shiftKey: event.shiftKey,
|
|
altKey: event.altKey,
|
|
startX: event.clientX,
|
|
startY: event.clientY,
|
|
mousedownEvent: event,
|
|
hasFocusMap: hasFocusMap,
|
|
candidates: matchingCandidates
|
|
};
|
|
|
|
// Add mousemove listener to detect drag
|
|
MouseRegistry.mousemoveHandler = (moveEvent) => {
|
|
if (!MouseRegistry.mousedownPending) return;
|
|
|
|
const deltaX = Math.abs(moveEvent.clientX - MouseRegistry.mousedownPending.startX);
|
|
const deltaY = Math.abs(moveEvent.clientY - MouseRegistry.mousedownPending.startY);
|
|
|
|
// If moved beyond threshold, activate drag mode
|
|
if (deltaX > MouseRegistry.dragThreshold || deltaY > MouseRegistry.dragThreshold) {
|
|
activateDragMode(MouseRegistry.mousedownPending);
|
|
}
|
|
};
|
|
document.addEventListener('mousemove', MouseRegistry.mousemoveHandler);
|
|
|
|
// Safety timeout: clean up if mouseup never arrives (5 seconds)
|
|
MouseRegistry.mousedownSafetyTimeout = setTimeout(() => {
|
|
clearMousedownState();
|
|
}, 5000);
|
|
}
|
|
|
|
/**
|
|
* Activate drag mode after movement detected.
|
|
* Called by mousemove handler when threshold exceeded.
|
|
* @param {Object} pendingData - The pending mousedown data
|
|
*/
|
|
function activateDragMode(pendingData) {
|
|
if (!pendingData) return;
|
|
|
|
const event = pendingData.mousedownEvent;
|
|
|
|
// Suspend sequence timeout (keep pendingMatches but stop the timer)
|
|
if (MouseRegistry.pendingTimeout) {
|
|
clearTimeout(MouseRegistry.pendingTimeout);
|
|
MouseRegistry.pendingTimeout = null;
|
|
}
|
|
|
|
// Call hx-vals-extra JS functions at mousedown time, suffix results with _mousedown
|
|
const mousedownJsValues = {};
|
|
for (const candidate of pendingData.candidates) {
|
|
const config = candidate.node.config;
|
|
if (!config) continue;
|
|
|
|
const extra = config['hx-vals-extra'];
|
|
if (extra && extra.js) {
|
|
try {
|
|
const func = window[extra.js];
|
|
if (typeof func === 'function') {
|
|
const element = document.getElementById(candidate.elementId);
|
|
const dynamicValues = func(event, element, candidate.node.combinationStr);
|
|
if (dynamicValues && typeof dynamicValues === 'object') {
|
|
// Store raw values - _mousedown suffix added at mouseup time
|
|
mousedownJsValues[candidate.elementId] = dynamicValues;
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('Error calling dynamic hx-vals function at mousedown:', e);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Activate drag state
|
|
MouseRegistry.mousedownState = {
|
|
button: pendingData.button,
|
|
ctrlKey: pendingData.ctrlKey,
|
|
shiftKey: pendingData.shiftKey,
|
|
altKey: pendingData.altKey,
|
|
hasFocusMap: pendingData.hasFocusMap,
|
|
candidates: pendingData.candidates,
|
|
mousedownJsValues: mousedownJsValues
|
|
};
|
|
|
|
// Clear pending state
|
|
MouseRegistry.mousedownPending = null;
|
|
|
|
// Remove mousemove listener (threshold detection no longer needed)
|
|
if (MouseRegistry.mousemoveHandler) {
|
|
document.removeEventListener('mousemove', MouseRegistry.mousemoveHandler);
|
|
MouseRegistry.mousemoveHandler = null;
|
|
}
|
|
|
|
// Attach on_move handler if any candidate has 'on-move' config
|
|
const onMoveCandidates = MouseRegistry.mousedownState.candidates.filter(
|
|
c => c.node.config && c.node.config['on-move']
|
|
);
|
|
if (onMoveCandidates.length > 0) {
|
|
let rafId = null;
|
|
MouseRegistry.mousemoveHandler = (moveEvent) => {
|
|
if (rafId) return;
|
|
rafId = requestAnimationFrame(() => {
|
|
for (const candidate of onMoveCandidates) {
|
|
const funcName = candidate.node.config['on-move'];
|
|
try {
|
|
const func = window[funcName];
|
|
if (typeof func === 'function') {
|
|
const mousedownValues = mousedownJsValues[candidate.elementId] || null;
|
|
func(moveEvent, candidate.node.combinationStr, mousedownValues);
|
|
}
|
|
} catch (e) {
|
|
console.error('Error calling on_move function:', e);
|
|
}
|
|
}
|
|
rafId = null;
|
|
});
|
|
};
|
|
document.addEventListener('mousemove', MouseRegistry.mousemoveHandler);
|
|
}
|
|
|
|
// For right button: prevent context menu during drag
|
|
if (pendingData.button === 2) {
|
|
const preventContextMenu = (e) => {
|
|
e.preventDefault();
|
|
};
|
|
document.addEventListener('contextmenu', preventContextMenu, { capture: true, once: true });
|
|
}
|
|
|
|
// Prevent default if on a registered element and not in input context
|
|
const targetElementId = findRegisteredElement(event.target);
|
|
if (targetElementId && !isInInputContext()) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle global mouseup events for mousedown>mouseup actions.
|
|
* Resolves the mousedown>mouseup action when mouseup fires (only if drag was activated).
|
|
* @param {MouseEvent} event - The mouseup event
|
|
*/
|
|
function handleMouseUp(event) {
|
|
// Case 1: Drag mode was activated (movement detected)
|
|
if (MouseRegistry.mousedownState) {
|
|
const mdState = MouseRegistry.mousedownState;
|
|
|
|
// Verify button matches mousedown button
|
|
if (event.button !== mdState.button) return;
|
|
|
|
// Build action name based on button
|
|
const actionName = mdState.button === 2 ? 'rmousedown>mouseup' : 'mousedown>mouseup';
|
|
|
|
// Build snapshot Set with modifiers from mousedown time
|
|
const snapshot = new Set([actionName]);
|
|
if (mdState.ctrlKey) snapshot.add('ctrl');
|
|
if (mdState.shiftKey) snapshot.add('shift');
|
|
if (mdState.altKey) snapshot.add('alt');
|
|
|
|
// Add snapshot to history
|
|
MouseRegistry.snapshotHistory.push(snapshot);
|
|
|
|
// Clear mousedown state
|
|
clearMousedownState();
|
|
|
|
// Suppress next click for left button (click fires after mouseup)
|
|
if (mdState.button === 0) {
|
|
MouseRegistry.suppressNextClick = true;
|
|
}
|
|
|
|
// Resolve with tree-traversal matching
|
|
resolveAfterMouseUp(event, mdState);
|
|
return;
|
|
}
|
|
|
|
// Case 2: Mousedown pending but no movement (it's a click, not a drag)
|
|
if (MouseRegistry.mousedownPending) {
|
|
const pending = MouseRegistry.mousedownPending;
|
|
|
|
// Verify button matches
|
|
if (event.button !== pending.button) return;
|
|
|
|
// Clean up pending state - let the normal click handler process it
|
|
clearMousedownState();
|
|
// Don't suppress click - we want it to fire normally
|
|
return;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Resolve mousedown>mouseup action using tree-traversal matching.
|
|
* Same logic as handleGlobalClick but uses triggerMousedownUpAction.
|
|
* @param {MouseEvent} mouseupEvent - The mouseup event
|
|
* @param {Object} mdState - The mousedown state captured earlier
|
|
*/
|
|
function resolveAfterMouseUp(mouseupEvent, mdState) {
|
|
const currentMatches = [];
|
|
let anyHasLongerSequence = false;
|
|
let foundAnyMatch = false;
|
|
|
|
for (const [elementId, data] of MouseRegistry.elements) {
|
|
const element = document.getElementById(elementId);
|
|
if (!element) continue;
|
|
|
|
// isInside is based on mouseup target position
|
|
const isInside = element.contains(mouseupEvent.target);
|
|
|
|
const treeRoot = data.tree;
|
|
const currentNode = traverseTree(treeRoot, MouseRegistry.snapshotHistory);
|
|
|
|
if (!currentNode) continue;
|
|
|
|
foundAnyMatch = true;
|
|
|
|
const hasMatch = currentNode.config !== null;
|
|
const hasLongerSequences = currentNode.children.size > 0;
|
|
|
|
if (hasLongerSequences) {
|
|
anyHasLongerSequence = true;
|
|
}
|
|
|
|
if (hasMatch) {
|
|
currentMatches.push({
|
|
elementId: elementId,
|
|
config: currentNode.config,
|
|
combinationStr: currentNode.combinationStr,
|
|
isInside: isInside,
|
|
hasFocus: mdState.hasFocusMap[elementId] || false,
|
|
mousedownJsValues: mdState.mousedownJsValues[elementId] || {}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Clear pending matches from before mousedown
|
|
MouseRegistry.pendingMatches = [];
|
|
|
|
// Decision logic (same pattern as handleGlobalClick)
|
|
if (currentMatches.length > 0 && !anyHasLongerSequence) {
|
|
for (const match of currentMatches) {
|
|
triggerMousedownUpAction(match, mouseupEvent);
|
|
}
|
|
MouseRegistry.snapshotHistory = [];
|
|
|
|
} else if (currentMatches.length > 0 && anyHasLongerSequence) {
|
|
MouseRegistry.pendingMatches = currentMatches.map(m => ({ ...m, mouseupEvent: mouseupEvent }));
|
|
|
|
MouseRegistry.pendingTimeout = setTimeout(() => {
|
|
for (const match of MouseRegistry.pendingMatches) {
|
|
triggerMousedownUpAction(match, match.mouseupEvent);
|
|
}
|
|
MouseRegistry.snapshotHistory = [];
|
|
MouseRegistry.pendingMatches = [];
|
|
MouseRegistry.pendingTimeout = null;
|
|
}, MouseRegistry.sequenceTimeout);
|
|
|
|
} else if (currentMatches.length === 0 && anyHasLongerSequence) {
|
|
// Wait for more input
|
|
|
|
} else {
|
|
MouseRegistry.snapshotHistory = [];
|
|
}
|
|
|
|
if (!foundAnyMatch) {
|
|
MouseRegistry.snapshotHistory = [];
|
|
}
|
|
|
|
if (MouseRegistry.snapshotHistory.length > 10) {
|
|
MouseRegistry.snapshotHistory = [];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Trigger an HTMX action for a mousedown>mouseup match.
|
|
* Similar to triggerHtmxAction but merges suffixed JS values from both phases.
|
|
* @param {Object} match - The match object with config, elementId, etc.
|
|
* @param {MouseEvent} mouseupEvent - The mouseup event
|
|
*/
|
|
function triggerMousedownUpAction(match, mouseupEvent) {
|
|
const element = document.getElementById(match.elementId);
|
|
if (!element) return;
|
|
|
|
const config = match.config;
|
|
|
|
// Extract HTTP method and URL
|
|
let method = 'POST';
|
|
let url = null;
|
|
|
|
const methodMap = {
|
|
'hx-post': 'POST', 'hx-get': 'GET', 'hx-put': 'PUT',
|
|
'hx-delete': 'DELETE', 'hx-patch': 'PATCH'
|
|
};
|
|
|
|
for (const [attr, httpMethod] of Object.entries(methodMap)) {
|
|
if (config[attr]) {
|
|
method = httpMethod;
|
|
url = config[attr];
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!url) {
|
|
console.error('No HTTP method attribute found in config:', config);
|
|
return;
|
|
}
|
|
|
|
// Build htmx.ajax options
|
|
const htmxOptions = {};
|
|
|
|
if (config['hx-target']) {
|
|
htmxOptions.target = config['hx-target'];
|
|
}
|
|
|
|
if (config['hx-swap']) {
|
|
htmxOptions.swap = config['hx-swap'];
|
|
}
|
|
|
|
// Build values
|
|
const values = {};
|
|
|
|
// 1. Merge static hx-vals from command
|
|
if (config['hx-vals'] && typeof config['hx-vals'] === 'object') {
|
|
Object.assign(values, config['hx-vals']);
|
|
}
|
|
|
|
// 2. Merge mousedown JS values with _mousedown suffix
|
|
if (match.mousedownJsValues) {
|
|
for (const [key, value] of Object.entries(match.mousedownJsValues)) {
|
|
values[key + '_mousedown'] = value;
|
|
}
|
|
}
|
|
|
|
// 3. Call JS function at mouseup time, suffix with _mouseup
|
|
if (config['hx-vals-extra']) {
|
|
const extra = config['hx-vals-extra'];
|
|
|
|
// Merge static dict values
|
|
if (extra.dict && typeof extra.dict === 'object') {
|
|
Object.assign(values, extra.dict);
|
|
}
|
|
|
|
// Call dynamic JS function and suffix with _mouseup
|
|
if (extra.js) {
|
|
try {
|
|
const func = window[extra.js];
|
|
if (typeof func === 'function') {
|
|
const dynamicValues = func(mouseupEvent, element, match.combinationStr);
|
|
if (dynamicValues && typeof dynamicValues === 'object') {
|
|
for (const [key, value] of Object.entries(dynamicValues)) {
|
|
values[key + '_mouseup'] = value;
|
|
}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('Error calling dynamic hx-vals function at mouseup:', e);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 4. Add auto params
|
|
values.combination = match.combinationStr;
|
|
values.has_focus = match.hasFocus;
|
|
values.is_inside = match.isInside;
|
|
|
|
htmxOptions.values = values;
|
|
|
|
// Add any other hx-* attributes
|
|
for (const [key, value] of Object.entries(config)) {
|
|
if (key.startsWith('hx-') && !['hx-post', 'hx-get', 'hx-put', 'hx-delete', 'hx-patch', 'hx-target', 'hx-swap', 'hx-vals', 'hx-vals-extra'].includes(key)) {
|
|
const optionKey = key.substring(3).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
|
htmxOptions[optionKey] = value;
|
|
}
|
|
}
|
|
|
|
htmx.ajax(method, url, htmxOptions);
|
|
}
|
|
|
|
/**
|
|
* Attach the global mouse event listeners if not already attached
|
|
*/
|
|
function attachGlobalListener() {
|
|
if (!MouseRegistry.listenerAttached) {
|
|
// Store handler references for proper removal
|
|
MouseRegistry.clickHandler = (e) => handleMouseEvent(e, 'click');
|
|
MouseRegistry.dblclickHandler = (e) => handleDblClick(e);
|
|
MouseRegistry.contextmenuHandler = (e) => handleMouseEvent(e, 'right_click');
|
|
MouseRegistry.mousedownHandler = (e) => handleMouseDown(e);
|
|
MouseRegistry.mouseupHandler = (e) => handleMouseUp(e);
|
|
|
|
document.addEventListener('click', MouseRegistry.clickHandler);
|
|
document.addEventListener('dblclick', MouseRegistry.dblclickHandler);
|
|
document.addEventListener('contextmenu', MouseRegistry.contextmenuHandler);
|
|
document.addEventListener('mousedown', MouseRegistry.mousedownHandler);
|
|
document.addEventListener('mouseup', MouseRegistry.mouseupHandler);
|
|
MouseRegistry.listenerAttached = true;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Detach the global mouse event listeners
|
|
*/
|
|
function detachGlobalListener() {
|
|
if (MouseRegistry.listenerAttached) {
|
|
document.removeEventListener('click', MouseRegistry.clickHandler);
|
|
document.removeEventListener('dblclick', MouseRegistry.dblclickHandler);
|
|
document.removeEventListener('contextmenu', MouseRegistry.contextmenuHandler);
|
|
document.removeEventListener('mousedown', MouseRegistry.mousedownHandler);
|
|
document.removeEventListener('mouseup', MouseRegistry.mouseupHandler);
|
|
MouseRegistry.listenerAttached = false;
|
|
|
|
// Clean up handler references
|
|
MouseRegistry.clickHandler = null;
|
|
MouseRegistry.dblclickHandler = null;
|
|
MouseRegistry.contextmenuHandler = null;
|
|
MouseRegistry.mousedownHandler = null;
|
|
MouseRegistry.mouseupHandler = null;
|
|
|
|
// Clean up all state
|
|
MouseRegistry.snapshotHistory = [];
|
|
if (MouseRegistry.pendingTimeout) {
|
|
clearTimeout(MouseRegistry.pendingTimeout);
|
|
MouseRegistry.pendingTimeout = null;
|
|
}
|
|
MouseRegistry.pendingMatches = [];
|
|
clearMousedownState();
|
|
MouseRegistry.suppressNextClick = false;
|
|
MouseRegistry.mousedownPending = null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Add mouse support to an element
|
|
* @param {string} elementId - The ID of the element
|
|
* @param {string} combinationsJson - JSON string of combinations mapping
|
|
*/
|
|
window.add_mouse_support = function (elementId, combinationsJson) {
|
|
// Parse the combinations JSON
|
|
const combinations = JSON.parse(combinationsJson);
|
|
|
|
// Build tree for this element
|
|
const tree = buildTree(combinations);
|
|
|
|
// Get element reference
|
|
const element = document.getElementById(elementId);
|
|
if (!element) {
|
|
console.error("Element with ID", elementId, "not found!");
|
|
return;
|
|
}
|
|
|
|
// Add to registry
|
|
MouseRegistry.elements.set(elementId, {
|
|
tree: tree,
|
|
element: element
|
|
});
|
|
|
|
// Attach global listener if not already attached
|
|
attachGlobalListener();
|
|
};
|
|
|
|
/**
|
|
* Remove mouse support from an element
|
|
* @param {string} elementId - The ID of the element
|
|
*/
|
|
window.remove_mouse_support = function (elementId) {
|
|
// Remove from registry
|
|
if (!MouseRegistry.elements.has(elementId)) {
|
|
console.warn("Element with ID", elementId, "not found in mouse registry!");
|
|
return;
|
|
}
|
|
|
|
MouseRegistry.elements.delete(elementId);
|
|
|
|
// If no more elements, detach global listeners
|
|
if (MouseRegistry.elements.size === 0) {
|
|
detachGlobalListener();
|
|
}
|
|
};
|
|
})();
|
|
|