Grid-Hoover-Function

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hover Grid Example</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/konva.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; }
    #container { border: 1px solid #ccc; display: inline-block; }
  </style>
</head>
<body>

<div id="container"></div>

<script>
function enableCellHover(rect, layer, row, col, allCells) {
  let tooltipEl = document.getElementById('tooltip');
  if (!tooltipEl) {
    tooltipEl = document.createElement('div');
    tooltipEl.id = 'tooltip';
    document.body.appendChild(tooltipEl);
  }

  if (!document.getElementById('tooltip-style')) {
    const style = document.createElement('style');
    style.id = 'tooltip-style';
    style.textContent = `
      #tooltip {
        position: absolute;
        padding: 5px 8px;
        background: #333;
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
        display: none;
        pointer-events: none;
        z-index: 999;
      }
    `;
    document.head.appendChild(style);
  }

  const originalFill = rect.fill();
  const originalStroke = rect.stroke();
  const highlightColor = '#fff9c4';
  const crossColor = '#fffeee';

  function highlightCrossLines(enable) {
    for (const cell of allCells) {
      const isSameRow = cell.row === row;
      const isSameCol = cell.col === col;
      if ((isSameRow || isSameCol) && cell.rect !== rect) {
        cell.rect.fill(enable ? crossColor : cell.originalFill);
      }
    }
  }

  rect.on('mouseover', () => {
    rect.stroke('blue');
    rect.fill(highlightColor);
    tooltipEl.style.display = 'block';
    tooltipEl.textContent = `(${row}, ${col})`;
    highlightCrossLines(true);
    layer.batchDraw();
  });

  rect.on('mousemove', (e) => {
    tooltipEl.style.left = e.evt.pageX + 25 + 'px';
    tooltipEl.style.top = e.evt.pageY + 25 + 'px';
  });

 ...