<commit_before><html>
<head>
    <script lang="JavaScript">

        var cellSize = {x: 16, y: 16};
        var cells = [];
        var lastCell;

        var nameElement;
        var sizeElement;
        var markerElement;
        var imageElement;
        var sourceImageElement;
        var debugElement;

        //var backgroundImage;

        function initialize() {
            var arrayLength = imageData.length;
            cellSize = {x: 128, y: 128};

            var sheet = document.getElementById("sheet");
            var sheetSize = {
                width: sheet.width,
                height: sheet.height
            };

            var cellDimensions = {
                width: sheetSize.width / cellSize.x,
                height: sheetSize.height / cellSize.y
            };

            var sheetContainerElement = document.getElementById("sheetContainer");
            sourceImageElement = document.getElementById("sheet");

            for (var i = 0; i < arrayLength; i++) {
                /*if (imageData[i].name == "minecraft:blocks/dirt") {
                 console.log("Found Dirt");
                 backgroundImage = imageData[i];
                 }*/

                var cellY = Math.floor(imageData[i].y / cellSize.y);
                var cellsUsedY = Math.ceil(imageData[i].height / cellSize.y);

                for (var y = 0; y < cellsUsedY; ++y) {
                    if (cells[cellY + y] === undefined) {
                        cells[cellY + y] = []
                    }

                    var cellX = Math.floor(imageData[i].x / cellSize.x);
                    var cellsUsedX = Math.ceil(imageData[i].width / cellSize.x);

                    for (var x = 0; x < cellsUsedX; ++x) {
                        if (cells[cellY + y][cellX + x] === undefined) {
                            cells[cellY + y][cellX + x] = [];
                        }

                        cells[cellY + y][cellX + x].push(i)
                    }
                }
            }

            nameElement = document.getElementById("name");
            sizeElement = document.getElementById("size");
            markerElement = document.getElementById("marker");
            imageElement = document.getElementById("singleImage");

            debugElement = document.getElementById("debug");

            console.log(cells);

            sheet.addEventListener("mousemove", onMouseMove);
            /*if (backgroundImage != null) {
             var bgCanvas = document.getElementById("backgroundRenderer");
             bgCanvas.width = backgroundImage.width * 2;
             bgCanvas.height = backgroundImage.height * 2;
             var ctx = bgCanvas.getContext("2d");
             ctx.imageSmoothingEnabled = false;
             ctx.drawImage(sourceImageElement,
             backgroundImage.x, backgroundImage.y, backgroundImage.width, backgroundImage.height,
             0, 0, bgCanvas.width, bgCanvas.height
             );
             console.log(bgCanvas.toDataURL())
             document.getElementsByTagName("body")[0].style.backgroundImage = "url(" + bgCanvas.toDataURL() + ")";
             }*/
        }

        function onMouseMove(eventInfo) {
            var target = eventInfo.target;
            var cellX = Math.floor((eventInfo.offsetX) / cellSize.x);
            var cellY = Math.floor((eventInfo.offsetY) / cellSize.y);

            var ctx = imageElement.getContext("2d");
            ctx.imageSmoothingEnabled = false;

            /*
             debug.innerHTML = `
             Cell: ${cellX}-${cellY}<br/>
             Offset: ${eventInfo.offsetX}-${eventInfo.offsetY}<br/>
             `;*/

            if (cells[cellY] !== undefined && cells[cellY][cellX] !== undefined) {
                var containedSprites = cells[cellY][cellX];
                var imageDataIndex = -1;
                for (var i = 0; i < containedSprites.length; ++i) {
                    var data = imageData[containedSprites[i]];
                    if (eventInfo.offsetX >= data.x && eventInfo.offsetX <= data.x + data.width) {
                        if (eventInfo.offsetY >= data.y && eventInfo.offsetY <= data.y + data.height) {
                            imageDataIndex = containedSprites[i];
                            break;
                        }
                    }
                }
                if (imageDataIndex < 0) {
                    console.log("No sprite");
                    return;
                }

                if (imageDataIndex != lastCell) {
                    lastCell = imageDataIndex
                    var data = imageData[imageDataIndex];

                    nameElement.innerText = data.name;
                    sizeElement.innerText = data.width + " x " + data.height;

                    markerElement.style.top = data.y + target.offsetTop;
                    markerElement.style.left = data.x + target.offsetLeft;
                    markerElement.style.width = data.width-2;
                    markerElement.style.height = data.height-2;
                    markerElement.style.display = "block";

                    ctx.clearRect(0, 0, imageElement.width, imageElement.height);
                    ctx.drawImage(sourceImageElement,
                            data.x, data.y, data.width, data.height,
                            0, 0, imageElement.width, imageElement.height
                    );
                }
            } else {
                ctx.clearRect(0, 0, imageElement.width, imageElement.height);
                nameElement.innerText = "";
                sizeElement.innerText = "";
                markerElement.style.display = "none";
            }
        }

        function nearestUpperPow2(v)
        {
            v--;
            v|=v>>1;
            v|=v>>2;
            v|=v>>4;
            v|=v>>8;
            v|=v>>16;
            return ++v;
        }

        document.addEventListener("DOMContentLoaded", initialize);

    </script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .header {
            width: 100%;
        }

        .infoPanel {
            float: left;
            width: 15em;
        }

        .fieldHeader {
            font-weight: bold;
        }

        .field {
            min-height: 1.2em;
            width: 15em;
            -moz-box-shadow: 0 0 5px #fff;
            -webkit-box-shadow: 0 0 5px #fff;
            box-shadow: 0px 0px 5px #fff;
        }

        #name {
            min-height: 2.4em;
        }

        #marker, .texturePlaceHolder {
            border: 1px solid red;
            position: absolute;
        }

        #singleImage, #backgroundRenderer {
            width: 128px;
            height: 128px;
            border: 1px black solid;
        }

        #sheetContainer {
            width: calc(100% - 17em);
            left: 17em;
            height: calc(100% - 4em);
            position: absolute;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div class="header">
    <h1><a href="https://github.com/mezz/TextureDump">Texture Dump</a></h1>

</div>

<div id="sheetContainer">
    <div id="marker"></div>
    <image id="sheet" src="[textureName].png" />
</div>

<div class="infoPanel">
    <div></div>
    <div class="fieldHeader">Name: </div>
    <div id="name" class="field"></div>
    <div class="fieldHeader">Size: </div>
    <div id="size" class="field"></div>
    <canvas id="singleImage"></canvas>
    <!--<canvas id="backgroundRenderer"></canvas>-->
    <div id="debug" class="field"></div>
</div>

<script language="JavaScript">
    var imageData = [textureData];
</script>
<script>
    initialize();
</script>
</body>
</html><commit_msg>Attempt to improve performance again to fix #2, also moved texture name to fix #4<commit_after><html>
<head>
    <script lang="JavaScript">

        var cellSize = {x: 16, y: 16};
        var cells = [];
        var lastCell;

        var modIdElement;
        var nameElement;
        var sizeElement;
        var markerElement;
        var imageElement;
        var sourceImageElement;
        var debugElement;

        function initialize() {
            cellSize = {x: 128, y: 128};

            var sheet = document.getElementById("sheet");

            var cellDimensions = {
                width: sheet.width / cellSize.x,
                height: sheet.height / cellSize.y
            };

            //Preallocate Cells for speed
            cells = [];
            for (var y = 0; y < cellDimensions.height; ++y) {
                cells[y] = [];
                for (var x = 0; x < cellDimensions.width; ++x) {
                    cells[y][x] = []
                }
            }

            //Add sprite indexes to all the cells they occupy
            var arrayLength = imageData.length;
            for (var i = 0; i < arrayLength; i++) {
                var sprite = imageData[i];

                var cellY = Math.floor(sprite.y / cellSize.y);
                var cellsUsedY = Math.ceil(sprite.height / cellSize.y);
                for (var y = 0; y < cellsUsedY; ++y) {
                    var cellX = Math.floor(sprite.x / cellSize.x);
                    var cellsUsedX = Math.ceil(sprite.width / cellSize.x);
                    for (var x = 0; x < cellsUsedX; ++x) {
                        cells[cellY + y][cellX + x].push(i)
                    }
                }
            }

            //Pre-resolve elements that will be updated
            modIdElement = document.getElementById("modId");
            nameElement = document.getElementById("name");
            sizeElement = document.getElementById("size");
            markerElement = document.getElementById("marker");
            imageElement = document.getElementById("singleImage");
            debugElement = document.getElementById("debug");
            sourceImageElement = document.getElementById("sheet");

            sheet.addEventListener("mousemove", onMouseMove);
        }

        function onMouseMove(eventInfo) {
            var cellX = Math.floor(eventInfo.offsetX / cellSize.x);
            var cellY = Math.floor(eventInfo.offsetY / cellSize.y);

            var ctx = imageElement.getContext("2d");
            ctx.mozImageSmoothingEnabled = false;
            ctx.msImageSmoothingEnabled = false;
            ctx.imageSmoothingEnabled = false;

            if (cells[cellY] !== undefined && cells[cellY][cellX] !== undefined) {
                var containedSprites = cells[cellY][cellX];
                var imageDataIndex = -1;
                for (var i = 0; i < containedSprites.length; ++i) {
                    var data = imageData[containedSprites[i]];
                    if (eventInfo.offsetX >= data.x && eventInfo.offsetX <= data.x + data.width) {
                        if (eventInfo.offsetY >= data.y && eventInfo.offsetY <= data.y + data.height) {
                            imageDataIndex = containedSprites[i];
                            break;
                        }
                    }
                }

                if (imageDataIndex < 0) {
                    return;
                }

                if (imageDataIndex != lastCell) {
                    lastCell = imageDataIndex;
                    var data = imageData[imageDataIndex];

                    modIdElement.innerText = data.name.substring(0, data.name.indexOf(":"));
                    nameElement.innerText = data.name.substring(data.name.indexOf(":") + 1);
                    sizeElement.innerText = data.width + " x " + data.height;

                    markerElement.style.top = data.y + eventInfo.target.offsetTop;
                    markerElement.style.left = data.x + eventInfo.target.offsetLeft;
                    markerElement.style.width = data.width-2;
                    markerElement.style.height = data.height-2;
                    markerElement.style.display = "block";

                    ctx.clearRect(0, 0, imageElement.width, imageElement.height);
                    ctx.drawImage(sourceImageElement,
                            data.x, data.y, data.width, data.height,
                            0, 0, imageElement.width, imageElement.height
                    );
                }
            } else {
                ctx.clearRect(0, 0, imageElement.width, imageElement.height);
                nameElement.innerText = "";
                sizeElement.innerText = "";
                markerElement.style.display = "none";
            }
        }

        document.addEventListener("DOMContentLoaded", initialize);

    </script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .infoPanel {
            float: left;
            width: 15em;
        }

        .fieldHeader {
            font-weight: bold;
        }

        .field {
            min-height: 1.2em;
            width: 15em;
            -moz-box-shadow: 0 0 5px #fff;
            -webkit-box-shadow: 0 0 5px #fff;
            box-shadow: 0px 0px 5px #fff;
        }

        #name {
            min-height: 2.4em;
        }

        #marker {
            border: 1px solid red;
            position: absolute;
        }

        #singleImage {
            width: 128px;
            height: 128px;
            border: 1px black solid;
        }

        #sheetContainer {
            width: calc(100% - 17em);
            left: 17em;
            height: calc(100% - 4em);
            position: absolute;
            overflow: scroll;
        }
    </style>
</head>
<body>

<div id="header">
    <div id="headerContainer">
        <h1><a href="https://github.com/mezz/TextureDump">Texture Dump</a></h1>
    </div>
    <div id="name"></div>
</div>

<div id="sheetContainer">
    <div id="marker"></div>
    <image id="sheet" src="[textureName].png" />
</div>

<div class="infoPanel">
    <div class="fieldHeader">Mod ID: </div>
    <div id="modId" class="field"></div>
    <div class="fieldHeader">Size: </div>
    <div id="size" class="field"></div>
    <canvas id="singleImage"></canvas>
    <div id="debug" class="field"></div>
</div>
<script language="JavaScript">
    var imageData = [textureData];
</script>
<script>
    initialize();
</script>
</body>
</html>
{'fraction_non_alphanumeric': 0.12202277013340784, 'fraction_numerical': 0.011175525598938325, 'mean_word_length': 1.4391822827938672, 'pattern_counts': {'":': 2, '<': 108, '<?xml version=': 0, '>': 106, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2005082', 'n_tokens_mistral': 4050, 'n_tokens_neox': 3732, 'n_words': 809}