window.getElementSize = (element) => {
    return {
        width: element.clientWidth,
        height: element.clientHeight,
    };
}

window.setCanvasSize = (canvas, width, height) => {
    canvas.width = width;
    canvas.height = height;
}

// Image loading and caching functionality
window.imageCache = new Map();

window.preloadImage = (imagePath) => {
    return new Promise((resolve, reject) => {
        if (window.imageCache.has(imagePath)) {
            resolve(window.imageCache.get(imagePath));
            return;
        }

        const img = new Image();
        img.onload = () => {
            window.imageCache.set(imagePath, img);
            resolve(img);
        };
        img.onerror = () => {
            reject(new Error(`Failed to load image: ${imagePath}`));
        };
        img.src = imagePath;
    });
};

window.preloadImageFromUrl = (url, cacheKey) => {
    return new Promise((resolve, reject) => {
        if (window.imageCache.has(cacheKey)) {
            resolve(window.imageCache.get(cacheKey));
            return;
        }

        const img = new Image();
        img.onload = () => {
            window.imageCache.set(cacheKey, img);
            resolve(img);
        };
        img.onerror = (error) => {
            reject(new Error(`Failed to load image from URL: ${url}`));
        };
        
        // Don't set crossOrigin for same-origin requests
        // Only set it if you're loading from a different domain
        // img.crossOrigin = 'anonymous';
        
        img.src = url;
    });
};

window.getImageDimensions = (cacheKey) => {
    const img = window.imageCache.get(cacheKey);
    if (!img) {
        return { width: 0, height: 0 };
    }
    
    return {
        width: img.naturalWidth || img.width,
        height: img.naturalHeight || img.height
    };
};

window.drawImageOnCanvas = (canvas, imagePath, x, y, width, height) => {
    const ctx = canvas.getContext('2d');
    const img = window.imageCache.get(imagePath);
    
    if (!img) {
        return false;
    }

    try {
        ctx.drawImage(img, x, y, width, height);
        return true;
    } catch (error) {
        return false;
    }
};

window.drawCachedImageOnCanvas = (canvas, cacheKey, x, y, width, height) => {
    const ctx = canvas.getContext('2d');
    const img = window.imageCache.get(cacheKey);
    
    if (!img) {
        return false;
    }

    try {
        ctx.drawImage(img, x, y, width, height);
        return true;
    } catch (error) {
        return false;
    }
};