mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
124 lines
4.0 KiB
JavaScript
124 lines
4.0 KiB
JavaScript
/**
|
|
* Utility for debugging SVG rendering issues
|
|
*/
|
|
|
|
/**
|
|
* Adds a visible debug overlay to the SVG to test z-index rendering
|
|
* @param {SVGElement} svgElement - The SVG DOM element
|
|
*/
|
|
export function addDebugOverlay(svgElement) {
|
|
if (!svgElement) return;
|
|
|
|
const svgNS = "http://www.w3.org/2000/svg";
|
|
|
|
// Create a debug group at the highest level
|
|
const debugGroup = document.createElementNS(svgNS, "g");
|
|
debugGroup.setAttribute("id", "debug-overlay");
|
|
debugGroup.setAttribute(
|
|
"style",
|
|
"pointer-events: none; z-index: 10000; position: relative;"
|
|
);
|
|
|
|
// Add a semi-transparent rectangle across the entire SVG
|
|
const svgWidth = svgElement.viewBox?.baseVal?.width || 1000;
|
|
const svgHeight = svgElement.viewBox?.baseVal?.height || 1000;
|
|
|
|
const rect = document.createElementNS(svgNS, "rect");
|
|
rect.setAttribute("x", "0");
|
|
rect.setAttribute("y", "0");
|
|
rect.setAttribute("width", svgWidth.toString());
|
|
rect.setAttribute("height", svgHeight.toString());
|
|
rect.setAttribute("fill", "rgba(255, 255, 0, 0.1)");
|
|
rect.setAttribute("stroke", "none");
|
|
|
|
// Add some test circles at fixed positions
|
|
const testPositions = [
|
|
{ x: 50, y: 50, color: "red" },
|
|
{ x: 150, y: 150, color: "blue" },
|
|
{ x: 250, y: 250, color: "green" },
|
|
{ x: 350, y: 350, color: "purple" },
|
|
];
|
|
|
|
testPositions.forEach((pos, i) => {
|
|
const testCircle = document.createElementNS(svgNS, "circle");
|
|
testCircle.setAttribute("cx", pos.x.toString());
|
|
testCircle.setAttribute("cy", pos.y.toString());
|
|
testCircle.setAttribute("r", "20");
|
|
testCircle.setAttribute("fill", pos.color);
|
|
testCircle.setAttribute("fill-opacity", "0.5");
|
|
testCircle.setAttribute("stroke", "black");
|
|
testCircle.setAttribute("stroke-width", "2");
|
|
testCircle.setAttribute("class", "debug-circle");
|
|
|
|
debugGroup.appendChild(testCircle);
|
|
});
|
|
|
|
// Add the debug group to the SVG
|
|
svgElement.appendChild(debugGroup);
|
|
|
|
console.log("Debug overlay added to SVG");
|
|
}
|
|
|
|
/**
|
|
* Checks if clue points are visible and fixes rendering issues
|
|
* @param {SVGElement} svgElement - The SVG DOM element
|
|
*/
|
|
export function fixCluePointsRendering(svgElement) {
|
|
if (!svgElement) return;
|
|
|
|
// Find the clue points overlay group
|
|
let overlayGroup = svgElement.querySelector(".clue-points-overlay");
|
|
|
|
// If no overlay group exists, create one
|
|
if (!overlayGroup) {
|
|
console.log("No clue points overlay found, creating one");
|
|
overlayGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
overlayGroup.setAttribute("class", "clue-points-overlay");
|
|
overlayGroup.setAttribute(
|
|
"style",
|
|
"pointer-events: all !important; z-index: 9999 !important; position: relative !important;"
|
|
);
|
|
svgElement.appendChild(overlayGroup);
|
|
}
|
|
|
|
// Find all clue points
|
|
const cluePoints = svgElement.querySelectorAll(".clue-point");
|
|
const clickAreas = svgElement.querySelectorAll(".clue-click-area");
|
|
|
|
console.log(
|
|
`Found ${cluePoints.length} clue points and ${clickAreas.length} click areas`
|
|
);
|
|
|
|
// Ensure all clue points are in the overlay group and have proper styles
|
|
cluePoints.forEach((point, i) => {
|
|
// Clone the point to remove any existing event handlers and styling issues
|
|
const newPoint = point.cloneNode(true);
|
|
|
|
// Apply explicit styles to ensure visibility
|
|
newPoint.setAttribute(
|
|
"style",
|
|
"fill: #ff9800; stroke: #e65100; stroke-width: 3px; " +
|
|
"pointer-events: all !important; cursor: pointer !important; " +
|
|
"z-index: 9999 !important; position: relative !important; " +
|
|
"r: 14px; fill-opacity: 1; stroke-opacity: 1; " +
|
|
"filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.7));"
|
|
);
|
|
|
|
// Move to overlay group
|
|
if (point.parentNode !== overlayGroup) {
|
|
// Remove from current location
|
|
if (point.parentNode) {
|
|
point.parentNode.removeChild(point);
|
|
}
|
|
|
|
// Add to overlay group
|
|
overlayGroup.appendChild(newPoint);
|
|
}
|
|
});
|
|
|
|
// Move the overlay group to be the last child of the SVG
|
|
svgElement.appendChild(overlayGroup);
|
|
|
|
console.log("Clue points rendering fixed");
|
|
}
|