MyFastHtml/tests/html/mouse_support.js

/**
 * 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,
    contextmenuHandler: null
  };

  /**
   * 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'
    };

    return aliasMap[normalized] || normalized;
  }

  /**
   * 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;
  }

  /**
   * Trigger an action for a matched combination
   * @param {string} elementId - ID of the element
   * @param {Object} config - HTMX configuration object
   * @param {string} combinationStr - The matched combination string
   * @param {boolean} isInside - Whether the click was inside the element
   */
  function triggerAction(elementId, config, combinationStr, isInside) {
    const element = document.getElementById(elementId);
    if (!element) return;

    const hasFocus = document.activeElement === element;

    // Extract HTTP method and URL from hx-* attributes
    let method = 'POST'; // default
    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 = {};

    // Map hx-target to target
    if (config['hx-target']) {
      htmxOptions.target = config['hx-target'];
    }

    // Map hx-swap to swap
    if (config['hx-swap']) {
      htmxOptions.swap = config['hx-swap'];
    }

    // Map hx-vals to values and add combination, has_focus, and is_inside
    const values = {};
    if (config['hx-vals']) {
      Object.assign(values, config['hx-vals']);
    }
    values.combination = combinationStr;
    values.has_focus = hasFocus;
    values.is_inside = isInside;
    htmxOptions.values = values;

    // Add any other hx-* attributes (like hx-headers, hx-select, etc.)
    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'].includes(key)) {
        // Remove 'hx-' prefix and convert to camelCase
        const optionKey = key.substring(3).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
        htmxOptions[optionKey] = value;
      }
    }

    // Make AJAX call with htmx
    htmx.ajax(method, url, htmxOptions);
  }

  /**
   * 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) {
    console.debug("Global click detected");

    // 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;

    for (const [elementId, data] of MouseRegistry.elements) {
      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 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) {
        triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
      }

      // 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;

      MouseRegistry.pendingTimeout = setTimeout(() => {
        // Timeout expired, trigger ALL pending matches
        for (const match of MouseRegistry.pendingMatches) {
          triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
        }

        // 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 right-click events (triggers only for clicked element)
   * @param {MouseEvent} event - The mouse event
   */
  function handleElementRightClick(event) {
    // 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) {
        triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
      }

      // 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;

      MouseRegistry.pendingTimeout = setTimeout(() => {
        // Timeout expired, trigger ALL pending matches
        for (const match of MouseRegistry.pendingMatches) {
          triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
        }

        // 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 = [];
    }
  }

  /**
   * 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.contextmenuHandler = (e) => handleMouseEvent(e, 'right_click');

      document.addEventListener('click', MouseRegistry.clickHandler);
      document.addEventListener('contextmenu', MouseRegistry.contextmenuHandler);
      MouseRegistry.listenerAttached = true;
    }
  }

  /**
   * Detach the global mouse event listeners
   */
  function detachGlobalListener() {
    if (MouseRegistry.listenerAttached) {
      document.removeEventListener('click', MouseRegistry.clickHandler);
      document.removeEventListener('contextmenu', MouseRegistry.contextmenuHandler);
      MouseRegistry.listenerAttached = false;

      // Clean up handler references
      MouseRegistry.clickHandler = null;
      MouseRegistry.contextmenuHandler = null;

      // Clean up all state
      MouseRegistry.snapshotHistory = [];
      if (MouseRegistry.pendingTimeout) {
        clearTimeout(MouseRegistry.pendingTimeout);
        MouseRegistry.pendingTimeout = null;
      }
      MouseRegistry.pendingMatches = [];
    }
  }

  /**
   * 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();
    }
  };
})();