<commit_before>class Zoom {
    constructor() {}
    reset() {
        this.margin = 100;
        this.zoomUpperLimit = document.getElementById("zoomUpperLimit").innerText === "true";
        this.isWheelActionZoom = document.getElementById("wheelAction").innerText === "zoom";
        this.img = document.getElementById("image");
        this.imgContainer = document.getElementById("image-container");
        this.naturalWidth = this.img.naturalWidth;
        this.naturalHeight = this.img.naturalHeight;
        this.setZoom(0);
        // document.body.scrollLeft = window.innerWidth / 2 + this.img.clientWidth / 2 - this.margin;
        // document.body.scrollTop = window.innerHeight / 2 + this.img.clientHeight / 2 - this.margin;
        let mp = this.getWindowCenterMousePointer();
        mp.imageX = 0.5;
        mp.imageY = 0.5;
        this.followMousePointer(mp);
    }
    smoothZomm(to, callback, ...args) {
        let winWidth = window.innerWidth;
        let minWidth = winWidth < this.naturalWidth ? winWidth : this.naturalWidth;
        let minZoom = minWidth / this.naturalWidth * 100;
        if (to < minZoom) to = minZoom;
        let from = this.zoom;
        if (from == to) return;
        const interval = 10;
        const level = 10;
        const delta = (to - from) / level;
        for (let i = 1; i <= level; i++) {
            setTimeout(() => {
                if (this.setZoom(from + delta * i) && callback) callback(...args);
            }, interval * i);
        }
    }
    setZoom(zoom) {
        let winWidth = window.innerWidth;
        let winHeight = window.innerHeight;
        let minWidth = winWidth < this.naturalWidth ? winWidth : this.naturalWidth;
        let minZoom = minWidth / this.naturalWidth * 100;
        const maxZoom = 100;

        let imgWidth = 0;
        let imgHeight = 0;
        if (this.zoomUpperLimit && zoom > maxZoom) {
            zoom = maxZoom;
            imgWidth = this.naturalWidth;
        } else if (zoom < minZoom) {
            zoom = minZoom;
            imgWidth = minWidth;
        } else {
            imgWidth = this.naturalWidth * zoom / 100;
        }
        let sizeChanged = !(this.zoom == zoom && this.img.clientWidth == imgWidth);
        if (sizeChanged) this.img.style.width = imgWidth + 'px';
        imgHeight = this.naturalHeight * zoom / 100;
        let ctnWidth = winWidth * 2 + imgWidth - this.margin * 2;
        let ctnHeight = winHeight * 2 + imgHeight - this.margin * 2;
        this.imgContainer.style.width = ctnWidth + 'px'
        this.imgContainer.style.height = ctnHeight + "px";
        this.zoom = zoom;
        return sizeChanged;
    }
    setScroll(left, top) {
        document.body.scrollLeft = left;
        document.body.scrollTop = top;
    }
    add() {
        let afterZoom = mouseAt => {
            this.followMousePointer(mouseAt);
            this.setToggleIcon();
            saveStatus();
        }
        let resetZoom = () => {
            this.reset();
            this.setToggleIcon();
            saveStatus();
        }
        this.reset();
        this.img.addEventListener("dblclick", () => {
            let mouseAt = this.getMousePointer();
            if (this.img.clientWidth >= this.naturalWidth) {
                resetZoom();
            } else
                this.smoothZomm(100, afterZoom, mouseAt);
        })
        document.getElementById("btnZoomIn").addEventListener("click", () => {
            this.smoothZomm(this.zoom * 1.2, afterZoom, this.getWindowCenterMousePointer());
        });
        document.getElementById("btnZoomOut").addEventListener("click", () => {
            this.smoothZomm(this.zoom / 1.2, afterZoom, this.getWindowCenterMousePointer());
        });
        document.getElementById("btnZoomToggle").addEventListener("click", () => {
            if (this.img.clientWidth >= this.naturalWidth) {
                resetZoom();
            } else
                this.smoothZomm(100, afterZoom, this.getWindowCenterMousePointer());
        });
        document.body.addEventListener("mousewheel", () => {
            // console.log(event.ctrlKey, event.wheelDeltaX, event.wheelDeltaY);
            // scroll to zoom, or ctrl key pressed scroll
            if (this.isWheelActionZoom || event.ctrlKey) {
                // ctrlKey == true: pinch
                let delta = event.ctrlKey ? event.wheelDelta / 60 : event.wheelDelta / 12;
                let mouseAt = this.getMousePointer();
                if (this.zoomUpperLimit) {
                    this.setZoom(this.zoom + delta);
                } else {
                    // zoom level increase / decrease by 30% for each wheel scroll
                    this.setZoom(this.zoom * (delta / 50 + 1));
                }
                this.followMousePointer(mouseAt);
                this.setToggleIcon();
                saveStatus();
                if (event.preventDefault) event.preventDefault();
                return false;
            }
        });
        window.onresize = () => this.reset();
    }
    followMousePointer(mouseAt) {
        let e = event || window.event;
        let imgWidth = this.img.clientWidth;
        let imgHeight = this.img.clientHeight;
        document.body.scrollLeft = imgWidth * mouseAt.imageX + window.innerWidth - this.margin - mouseAt.x;
        document.body.scrollTop = imgHeight * mouseAt.imageY + window.innerHeight - this.margin - mouseAt.y;
    }
    getMousePointer(x, y) {
        let imgWidth = this.img.clientWidth;
        let imgHeight = this.img.clientHeight;
        let e = event || window.event;
        let clientX = x || e.clientX
        let clientY = y || e.clientY
        let mouseAt = {
            x: clientX,
            y: clientY,
            imageX: (clientX + document.body.scrollLeft - window.innerWidth + this.margin) / imgWidth,
            imageY: (clientY + document.body.scrollTop - window.innerHeight + this.margin) / imgHeight,
        }
        return mouseAt;
    }
    getWindowCenterMousePointer() {
        let x = window.innerWidth / 2;
        let y = window.innerHeight / 2;
        return this.getMousePointer(x, y);
    }
    setToggleIcon() {<commit_msg>preview zoom code optimize<commit_after>class Zoom {
    constructor() {}
    reset() {
        this.margin = 100;
        this.blankX = 0;
        this.blankY = 0;
        this.zoomUpperLimit = document.getElementById("zoomUpperLimit").innerText === "true";
        this.isWheelActionZoom = document.getElementById("wheelAction").innerText === "zoom";
        this.img = document.getElementById("image");
        this.imgContainer = document.getElementById("image-container");
        this.naturalWidth = this.img.naturalWidth;
        this.naturalHeight = this.img.naturalHeight;
        this.setZoom(0);
        let mp = this.getWindowCenterMousePointer();
        mp.imageX = 0.5;
        mp.imageY = 0.5;
        this.followMousePointer(mp);
    }
    smoothZomm(to, callback, ...args) {
        let winWidth = window.innerWidth;
        let minWidth = winWidth < this.naturalWidth ? winWidth : this.naturalWidth;
        let minZoom = minWidth / this.naturalWidth * 100;
        if (to < minZoom) to = minZoom;
        let from = this.zoom;
        if (from == to) return;
        const interval = 10;
        const level = 10;
        const delta = (to - from) / level;
        for (let i = 1; i <= level; i++) {
            setTimeout(() => {
                if (this.setZoom(from + delta * i) && callback) callback(...args);
            }, interval * i);
        }
    }
    setZoom(zoom) {
        let winWidth = window.innerWidth;
        let winHeight = window.innerHeight;
        let minWidth = winWidth < this.naturalWidth ? winWidth : this.naturalWidth;
        let minZoom = minWidth / this.naturalWidth * 100;
        const maxZoom = 100;

        let imgWidth = 0;
        let imgHeight = 0;
        if (this.zoomUpperLimit && zoom > maxZoom) {
            zoom = maxZoom;
            imgWidth = this.naturalWidth;
        } else if (zoom < minZoom) {
            zoom = minZoom;
            imgWidth = minWidth;
        } else {
            imgWidth = this.naturalWidth * zoom / 100;
        }
        let sizeChanged = !(this.zoom == zoom && this.img.clientWidth == imgWidth);
        if (sizeChanged) this.img.style.width = imgWidth + 'px';
        imgHeight = this.naturalHeight * zoom / 100;
        let blankX = winWidth - this.margin;
        let blankY = winHeight - this.margin;
        this.balnkX = blankX < 0 ? 0 : blankX;
        this.blankY = blankY < 0 ? 0 : blankY;
        let ctnWidth = this.balnkX * 2 + imgWidth;
        let ctnHeight = this.blankY * 2 + imgHeight;
        this.imgContainer.style.width = ctnWidth + 'px'
        this.imgContainer.style.height = ctnHeight + "px";
        this.zoom = zoom;
        return sizeChanged;
    }
    setScroll(left, top) {
        document.body.scrollLeft = left;
        document.body.scrollTop = top;
    }
    add() {
        let afterZoom = mouseAt => {
            this.followMousePointer(mouseAt);
            this.setToggleIcon();
            saveStatus();
        }
        let resetZoom = () => {
            this.reset();
            this.setToggleIcon();
            saveStatus();
        }
        this.reset();
        this.img.addEventListener("dblclick", () => {
            let mouseAt = this.getMousePointer();
            if (this.img.clientWidth >= this.naturalWidth) {
                resetZoom();
            } else
                this.smoothZomm(100, afterZoom, mouseAt);
        })
        document.getElementById("btnZoomIn").addEventListener("click", () => {
            this.smoothZomm(this.zoom * 1.2, afterZoom, this.getWindowCenterMousePointer());
        });
        document.getElementById("btnZoomOut").addEventListener("click", () => {
            this.smoothZomm(this.zoom / 1.2, afterZoom, this.getWindowCenterMousePointer());
        });
        document.getElementById("btnZoomToggle").addEventListener("click", () => {
            if (this.img.clientWidth >= this.naturalWidth) {
                resetZoom();
            } else
                this.smoothZomm(100, afterZoom, this.getWindowCenterMousePointer());
        });
        document.body.addEventListener("mousewheel", () => {
            // console.log(event.ctrlKey, event.wheelDeltaX, event.wheelDeltaY);
            // scroll to zoom, or ctrl key pressed scroll
            if (this.isWheelActionZoom || event.ctrlKey) {
                // ctrlKey == true: pinch
                let delta = event.ctrlKey ? event.wheelDelta / 60 : event.wheelDelta / 12;
                let mouseAt = this.getMousePointer();
                if (this.zoomUpperLimit) {
                    this.setZoom(this.zoom + delta);
                } else {
                    // zoom level increase / decrease by 30% for each wheel scroll
                    this.setZoom(this.zoom * (delta / 50 + 1));
                }
                this.followMousePointer(mouseAt);
                this.setToggleIcon();
                saveStatus();
                if (event.preventDefault) event.preventDefault();
                return false;
            }
        });
        window.onresize = () => this.reset();
    }
    followMousePointer(mouseAt) {
        let e = event || window.event;
        let imgWidth = this.img.clientWidth;
        let imgHeight = this.img.clientHeight;
        document.body.scrollLeft = imgWidth * mouseAt.imageX + this.balnkX - mouseAt.x;
        document.body.scrollTop = imgHeight * mouseAt.imageY + this.blankY - mouseAt.y;
    }
    getMousePointer(x, y) {
        let imgWidth = this.img.clientWidth;
        let imgHeight = this.img.clientHeight;
        let e = event || window.event;
        let clientX = x || e.clientX
        let clientY = y || e.clientY
        let mouseAt = {
            x: clientX,
            y: clientY,
            imageX: (clientX + document.body.scrollLeft - this.balnkX) / imgWidth,
            imageY: (clientY + document.body.scrollTop - this.blankY) / imgHeight,
        }
        return mouseAt;
    }
    getWindowCenterMousePointer() {
        let x = window.innerWidth / 2;
        let y = window.innerHeight / 2;
        return this.getMousePointer(x, y);
    }
    setToggleIcon() {
{'fraction_non_alphanumeric': 0.11951219512195121, 'fraction_numerical': 0.00959349593495935, 'mean_word_length': 1.8461360481258677, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 27, 'https://': 0, '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': '1265152', 'n_tokens_mistral': 3513, 'n_tokens_neox': 3371, 'n_words': 739}