class MapaCanvas { constructor(config = {}) { this.width = config.width || 960; this.height = config.height || 500; this.container = config.container; this.projectionType = config.projection || "geoNaturalEarth1"; this.baseScale = config.baseScale || 200; this.layersHighRes = config.layersHighRes || this.getDefaultLayers(); this.layersLowRes = config.layersLowRes || this.layersHighRes; this.scaleExtent = config.scaleExtent || [1, 8]; this.debounceMs = config.debounceMs || 100; this.rotation = config.rotation || [0, 0, 0]; this.lastTransform = d3.zoomIdentity; this.initialViewState = {}; if (config.center) this.initialViewState.center = config.center; if (config.zoom) this.initialViewState.zoom = config.zoom; this.renderTimeout = null; this.isMoving = false; this.context = null; this.showStats = config.showStats || false; this.ariaLayer = config.ariaLayer || null; this.zoom = null; this.dpr = window.devicePixelRatio || 1; this.enableInteraction = config.enableInteraction || false; this.debug = config.debug || false; this.onFeatureClick = config.onFeatureClick || null; this.onFeatureHover = config.onFeatureHover || null; this.renderCount = 0; this.lastRenderTime = 0; // CRITICAL FIX: Cache patterns to prevent memory leaks this.patternCache = new Map(); if (this.enableInteraction) { this.hitCanvas = document.createElement("canvas"); this.hitCanvas.width = this.width * this.dpr; this.hitCanvas.height = this.height * this.dpr; this.hitCanvas.style.width = this.width + "px"; this.hitCanvas.style.height = this.height + "px"; this.hitContext = this.hitCanvas.getContext("2d", { willReadFrequently: true }); this.hitContext.scale(this.dpr, this.dpr); this.featureToColor = new Map(); this.colorToFeature = new Map(); this.colorIndex = 1; // CRITICAL FIX: Track if hit canvas needs redraw this.hitCanvasNeedsUpdate = true; this.lastHitTransform = null; } } getDefaultLayers() { return [ [{ type: "Sphere" }, { fill: "#f0f0f0", stroke: "none" }], [d3.geoGraticule()(), { fill: "none", stroke: "#ccc", strokeWidth: 0.5 }] ]; } render() { const canvas = DOM.canvas(this.width, this.height); canvas.style.touchAction = "none"; canvas.width = this.width * this.dpr; canvas.height = this.height * this.dpr; canvas.style.width = this.width + "px"; canvas.style.height = this.height + "px"; this.context = canvas.getContext("2d"); this.context.scale(this.dpr, this.dpr); if (this.container) { const canvasContainer = this.container.querySelector(".mapa-canvas"); if (canvasContainer) { canvasContainer.innerHTML = ""; canvasContainer.appendChild(canvas); } else { this.container.innerHTML = ""; this.container.appendChild(canvas); } } if (this.initialViewState.center || this.initialViewState.zoom) { const state = { center: this.initialViewState.center || [0, 0], zoom: this.initialViewState.zoom || 1 }; const projection = d3[this.projectionType]() .scale(this.baseScale) .translate([this.width / 2, this.height / 2]) .rotate(this.rotation); const projected = projection(state.center); const x = this.width / 2 - projected[0] * state.zoom; const y = this.height / 2 - projected[1] * state.zoom; this.lastTransform = d3.zoomIdentity.translate(x, y).scale(state.zoom); } this.zoom = d3 .zoom() .scaleExtent(this.scaleExtent) .filter((event) => !event.ctrlKey && !event.button) .on("start", () => this.onZoomStart()) .on("zoom", (event) => this.onZoom(event)) .on("end", () => this.onZoomEnd()); d3.select(canvas) .call(this.zoom) .call(this.zoom.transform, this.lastTransform) .on("touchstart", (event) => event.preventDefault()); if (this.enableInteraction) { this.setupInteraction(canvas); } this.renderHighRes(); return this.container ? this.container : canvas; } syncZoomTransform() { if (this.zoom && this.context && this.context.canvas) { d3.select(this.context.canvas).call( this.zoom.transform, this.lastTransform ); } } onZoomStart() { this.isMoving = true; clearTimeout(this.renderTimeout); } onZoom(event) { this.lastTransform = event.transform; // CRITICAL FIX: Only render visible canvas during zoom, NOT hit canvas this.renderVisibleCanvas(this.layersLowRes, event.transform); if (this.showStats && this.container) { this.renderStats(this.container); } } onZoomEnd() { this.isMoving = false; this.renderTimeout = setTimeout(() => { this.renderHighRes(); }, this.debounceMs); } updateAriaDescription() { if (!this.container || !this.ariaLayer) return; let descElement = this.container.querySelector(".map-description"); if (!descElement) return; const state = this.getViewState(); const centerFeature = this.getFeatureAtCenter(); const name = centerFeature?.properties?.sr_subunit || centerFeature?.properties?.NAME || centerFeature?.properties?.name || "Unknown"; const region = centerFeature?.properties?.region || ""; const subregion = centerFeature?.properties?.subregion || ""; const zoom = state.zoom.toFixed(1); const description = `Viewing ${name}${region ? ` in ${region}` : ""}${ subregion ? `, ${subregion}` : "" }, zoom level ${zoom}`; descElement.textContent = description; } getFeatureAtCenter() { if (!this.enableInteraction) return null; const rect = this.context.canvas.getBoundingClientRect(); const fakeEvent = { target: this.context.canvas, clientX: rect.left + this.width / 2, clientY: rect.top + this.height / 2 }; return this.getFeatureAtPoint(fakeEvent); } // CRITICAL FIX: Split rendering into visible and hit detection renderVisibleCanvas(layers, transform) { const startTime = performance.now(); const proj = d3[this.projectionType]() .scale(this.baseScale) .translate([this.width / 2, this.height / 2]) .rotate(this.rotation); const path = d3.geoPath(proj, this.context); this.context.clearRect(0, 0, this.width, this.height); this.context.save(); this.context.translate(transform.x, transform.y); this.context.scale(transform.k, transform.k); for (const [geometry, style] of layers) { if (style.minZoom !== undefined && transform.k < style.minZoom) { continue; } if (style.maxZoom !== undefined && transform.k > style.maxZoom) { continue; } this.context.beginPath(); path(geometry); if (style.fill && style.fill !== "none") { if (style.fill instanceof HTMLCanvasElement) { // CRITICAL FIX: Cache patterns instead of creating new ones const patternKey = `${style.fill.width}-${style.fill.height}-${transform.k}`; let pattern = this.patternCache.get(patternKey); if (!pattern) { pattern = this.context.createPattern(style.fill, "repeat"); const matrix = new DOMMatrix(); matrix.scaleSelf(1 / transform.k, 1 / transform.k); pattern.setTransform(matrix); // Limit cache size to prevent memory growth if (this.patternCache.size > 20) { const firstKey = this.patternCache.keys().next().value; this.patternCache.delete(firstKey); } this.patternCache.set(patternKey, pattern); } this.context.fillStyle = pattern; const previousCompositeOp = this.context.globalCompositeOperation; if (style.blendMode) { this.context.globalCompositeOperation = style.blendMode; } const previousAlpha = this.context.globalAlpha; if (style.fillOpacity !== undefined) { this.context.globalAlpha = style.fillOpacity; } this.context.fill(); this.context.globalAlpha = previousAlpha; this.context.globalCompositeOperation = previousCompositeOp; } else { this.context.fillStyle = style.fill; this.context.fill(); } } if (style.stroke && style.stroke !== "none") { this.context.strokeStyle = style.stroke; this.context.lineWidth = (style.strokeWidth || 1) / transform.k; // Additional stroke properties if (style.lineJoin) { this.context.lineJoin = style.lineJoin; // 'miter', 'round', 'bevel' } if (style.miterLimit !== undefined) { this.context.miterLimit = style.miterLimit; } if (style.lineCap) { this.context.lineCap = style.lineCap; // 'butt', 'round', 'square' } if (style.lineDash) { this.context.setLineDash(style.lineDash); // e.g., [5, 3] } if (style.lineDashOffset !== undefined) { this.context.lineDashOffset = style.lineDashOffset; } this.context.stroke(); // Reset line dash if it was set if (style.lineDash) { this.context.setLineDash([]); } } } this.context.restore(); this.renderCount++; this.lastRenderTime = performance.now() - startTime; } // CRITICAL FIX: Only render hit canvas when necessary renderHitCanvas(layers, transform) { if (!this.enableInteraction) return; const proj = d3[this.projectionType]() .scale(this.baseScale) .translate([this.width / 2, this.height / 2]) .rotate(this.rotation); const hitPath = d3.geoPath(proj, this.hitContext); this.hitContext.clearRect(0, 0, this.width, this.height); this.hitContext.save(); this.hitContext.translate(transform.x, transform.y); this.hitContext.scale(transform.k, transform.k); for (const [geometry, style] of layers) { if (style.minZoom !== undefined && transform.k < style.minZoom) { continue; } if (style.maxZoom !== undefined && transform.k > style.maxZoom) { continue; } if (geometry.features && style.hitDetection === true) { for (const feature of geometry.features) { const color = this.getFeatureColor(feature); this.hitContext.fillStyle = color; this.hitContext.beginPath(); hitPath(feature); this.hitContext.fill(); } } } this.hitContext.restore(); this.hitCanvasNeedsUpdate = false; this.lastHitTransform = transform; } renderLayers(layers, transform) { this.renderVisibleCanvas(layers, transform); // Only render hit canvas if needed if (this.enableInteraction && this.hitCanvasNeedsUpdate) { this.renderHitCanvas(layers, transform); } if (this.showStats && this.container) { this.renderStats(this.container); } } renderHighRes() { this.hitCanvasNeedsUpdate = true; // Mark for update this.renderLayers(this.layersHighRes, this.lastTransform); } renderLowRes() { // Don't update hit canvas during low-res renders this.renderVisibleCanvas(this.layersLowRes, this.lastTransform); } getFeatureColor(feature) { if (!this.enableInteraction) return null; const featureId = feature.id || JSON.stringify(feature.properties); let color = this.featureToColor.get(featureId); if (!color) { const r = (this.colorIndex & 0xff0000) >> 16; const g = (this.colorIndex & 0x00ff00) >> 8; const b = this.colorIndex & 0x0000ff; color = `rgb(${r},${g},${b})`; this.featureToColor.set(featureId, color); this.colorToFeature.set(color, feature); this.colorIndex++; } return color; } setupInteraction(canvas) { if (!this.enableInteraction) return; // CRITICAL FIX: Debounce mousemove to reduce getImageData calls let mouseMoveTimeout; canvas.addEventListener("click", (event) => { const feature = this.getFeatureAtPoint(event); if (feature && this.onFeatureClick) { this.onFeatureClick(feature, event); } }); canvas.addEventListener("mousemove", (event) => { clearTimeout(mouseMoveTimeout); mouseMoveTimeout = setTimeout(() => { const feature = this.getFeatureAtPoint(event); if (this.onFeatureHover) { this.onFeatureHover(feature, event); } canvas.style.cursor = feature ? "pointer" : "default"; }, 16); // ~60fps }); } getFeatureAtPoint(event) { if (!this.enableInteraction || !this.lastHitTransform) return null; const rect = event.target.getBoundingClientRect(); const x = (event.clientX - rect.left) * this.dpr; const y = (event.clientY - rect.top) * this.dpr; const pixel = this.hitContext.getImageData(x, y, 1, 1).data; if (pixel[3] === 0) { return null; } const color = `rgb(${pixel[0]},${pixel[1]},${pixel[2]})`; return this.colorToFeature.get(color) || null; } renderStats(container) { if (!this.showStats) { if (this.statsElement) { this.statsElement.remove(); this.statsElement = null; } return; } if (!this.statsElement) { this.statsElement = document.createElement("div"); this.statsElement.style.cssText = ` position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 10px; font-family: monospace; font-size: 12px; border-radius: 3px; pointer-events: none; `; container.appendChild(this.statsElement); } const state = this.getViewState(); const mapSize = this.enableInteraction ? this.colorToFeature.size : 0; const patternCacheSize = this.patternCache.size; this.statsElement.innerHTML = ` Zoom: ${state.zoom.toFixed(2)}
Center: [${state.center[0].toFixed(2)}, ${state.center[1].toFixed(2)}]
Projection: ${state.projection}
DPR: ${this.dpr}
Renders: ${this.renderCount}
Last: ${this.lastRenderTime.toFixed(2)}ms
Features: ${mapSize}
Patterns: ${patternCacheSize} `; } getViewState() { const projection = d3[this.projectionType]() .scale(this.baseScale) .translate([this.width / 2, this.height / 2]) .rotate(this.rotation); const screenCenterX = this.width / 2; const screenCenterY = this.height / 2; const geoCenter = projection.invert([ (screenCenterX - this.lastTransform.x) / this.lastTransform.k, (screenCenterY - this.lastTransform.y) / this.lastTransform.k ]); return { zoom: this.lastTransform.k, center: geoCenter, projection: this.projectionType }; } setViewState(state) { if (state.projection && state.projection !== this.projectionType) { this.projectionType = state.projection; } if (state.rotation) { this.rotation = state.rotation; } if (state.baseScale) { this.baseScale = state.baseScale; } const projection = d3[this.projectionType]() .scale(this.baseScale) .translate([this.width / 2, this.height / 2]) .rotate(this.rotation); const projected = projection(state.center); const x = this.width / 2 - projected[0] * state.zoom; const y = this.height / 2 - projected[1] * state.zoom; this.lastTransform = d3.zoomIdentity.translate(x, y).scale(state.zoom); this.renderHighRes(); this.syncZoomTransform(); } animateToView( targetState, duration = 1500, easingFn = null, onComplete = null ) { const startState = this.getViewState(); const startTime = performance.now(); const easing = easingFn || ((t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t)); let animationId; const animate = (currentTime) => { const elapsed = currentTime - startTime; const t = Math.min(elapsed / duration, 1); const eased = easing(t); const zoom = startState.zoom + (targetState.zoom - startState.zoom) * eased; const center = [ startState.center[0] + (targetState.center[0] - startState.center[0]) * eased, startState.center[1] + (targetState.center[1] - startState.center[1]) * eased ]; const projection = d3[this.projectionType]() .scale(this.baseScale) .translate([this.width / 2, this.height / 2]) .rotate(this.rotation); const projected = projection(center); const x = this.width / 2 - projected[0] * zoom; const y = this.height / 2 - projected[1] * zoom; this.lastTransform = d3.zoomIdentity.translate(x, y).scale(zoom); this.renderLowRes(); // Use low-res during animation if (t < 1) { animationId = requestAnimationFrame(animate); } else { this.renderHighRes(); this.syncZoomTransform(); if (onComplete) onComplete(); } }; animationId = requestAnimationFrame(animate); return animationId; } animateGlobeRotation(targetRotation, duration = 1500) { const startRotation = [...this.rotation]; const startTime = performance.now(); let animationId; const animate = (currentTime) => { const elapsed = currentTime - startTime; const t = Math.min(elapsed / duration, 1); const eased = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; const rotation = [ startRotation[0] + (targetRotation[0] - startRotation[0]) * eased, startRotation[1] + (targetRotation[1] - startRotation[1]) * eased, startRotation[2] + (targetRotation[2] - startRotation[2]) * eased ]; this.rotation = rotation; this.hitCanvasNeedsUpdate = true; this.renderHighRes(); if (t < 1) { animationId = requestAnimationFrame(animate); } }; animationId = requestAnimationFrame(animate); return animationId; } animateSequence(sequence) { let index = 0; const next = () => { if (index >= sequence.length) return; const { state, duration, easing } = sequence[index]; index++; this.animateToView(state, duration, easing, next); }; next(); } destroy() { if (this.renderTimeout) { clearTimeout(this.renderTimeout); } if (this.context && this.context.canvas) { const canvas = this.context.canvas; d3.select(canvas).on(".zoom", null); canvas.replaceWith(canvas.cloneNode(true)); } if (this.enableInteraction) { this.featureToColor.clear(); this.colorToFeature.clear(); } // Clear pattern cache this.patternCache.clear(); if (this.statsElement) { this.statsElement.remove(); } if (this.context) { this.context.clearRect(0, 0, this.width, this.height); } if (this.hitContext) { this.hitContext.clearRect(0, 0, this.width, this.height); } } }