<commit_before>import UtilsNew from "../../core/utilsNew.js";
import Region from "../../core/bioinfo/region.js";
import {SVG} from "../../core/svg.js";
import GenomeBrowserConstants from "../genome-browser-constants.js";

export default class ChromosomePanel {

    constructor(target, config) {
        // eslint-disable-next-line no-undef
        Object.assign(this, Backbone.Events);

        this.target = target;
        this.config = {
            ...this.getDefaultConfig(),
            ...config,
        };

        this.#init();
    }

    #init() {
        this.id = UtilsNew.randomString(8);
        this.pixelBase = 0;
        this.species = this.config.species;
        this.width = this.config.width;
        this.height = this.config.height;
        this.collapsed = this.config.collapsed;
        this.hidden = this.config.hidden;

        this.region = new Region(this.config.region);

        this.lastChromosome = "";
        this.data = null;
        this.status = "";

        this.regionChanging = false;
        this.rendered = false;

        this.#initDom();
        this.#initEvents();
    }

    #initDom() {
        const template = UtilsNew.renderHTML(`
            <div id="${this.id}" class="unselectable">
                <div id="${this.id}Title" class="ocb-gv-panel-title unselectable">
                    <div id="${this.id}TitleText" class="ocb-gv-panel-text">
                        ${this.config?.title || ""}
                    </div>
                    <div id="${this.id}Collapse" class="ocb-gv-panel-collapse-control">
                        <span id="${this.id}CollapseIcon" class="fa fa-minus"></span>
                    </div>
                </div>
            </div>
        `);

        this.div = template.querySelector(`div#${this.id}`);
        this.titleDiv = this.div.querySelector(`div#${this.id}Title`);
        this.titleText = this.div.querySelector(`div#${this.id}TitleText`);
        this.collapseDiv = this.div.querySelector(`div#${this.id}Collapse`);
        this.collapseIcon = this.div.querySelector(`span#${this.id}CollapseIcon`);

        // Initialize SVG element
        this.svg = SVG.init(this.div, {
            "width": this.width,
            "height": this.height,
        });
        this.positionBox = null;
        this.selBox = null;

        this.target.append(this.div);
    }

    #initEvents() {
        const handleToggle = () => {
            this.collapsed ? this.showContent() : this.hideContent();
        };

        this.titleDiv.addEventListener("click", handleToggle);
        this.collapseDiv.addEventListener("click", handleToggle);

        // Prevent browser context menu
        this.svg.addEventListener("contextmenu", event => {
            event.preventDefault();
        });

        let downY, downX, moveX, moveY, lastX;
        const handleMouseMove = event => {
            // using parent offset works well on firefox and chrome. Could be because it is a div instead of svg
            moveX = event.clientX - (this.div.getBoundingClientRect().left - window.scrollX);
            const increment = moveX - downX;
            let newWidth = 0;
            this._recalculateResizeControls();

            switch (this.status) {
                case "resizePositionBoxLeft":
                    newWidth = parseInt(this.positionBox.getAttribute("width")) - increment;
                    if (newWidth > 0) {
                        this.positionBox.setAttribute("x", parseInt(this.positionBox.getAttribute("x")) + increment);
                        this.positionBox.setAttribute("width", newWidth);
                    }
                    downX = moveX;
                    break;
                case "resizePositionBoxRight":
                    newWidth = parseInt(this.positionBox.getAttribute("width")) + increment;<commit_msg>gb: fix chromosome panel toggle (#337)<commit_after>import UtilsNew from "../../core/utilsNew.js";
import Region from "../../core/bioinfo/region.js";
import {SVG} from "../../core/svg.js";
import GenomeBrowserConstants from "../genome-browser-constants.js";

export default class ChromosomePanel {

    constructor(target, config) {
        // eslint-disable-next-line no-undef
        Object.assign(this, Backbone.Events);

        this.target = target;
        this.config = {
            ...this.getDefaultConfig(),
            ...config,
        };

        this.#init();
    }

    #init() {
        this.id = UtilsNew.randomString(8);
        this.pixelBase = 0;
        this.species = this.config.species;
        this.width = this.config.width;
        this.height = this.config.height;
        this.collapsed = this.config.collapsed;
        this.hidden = this.config.hidden;

        this.region = new Region(this.config.region);

        this.lastChromosome = "";
        this.data = null;
        this.status = "";

        this.regionChanging = false;
        this.rendered = false;

        this.#initDom();
        this.#initEvents();
    }

    #initDom() {
        const template = UtilsNew.renderHTML(`
            <div id="${this.id}" class="unselectable">
                <div id="${this.id}Title" class="ocb-gv-panel-title unselectable">
                    <div id="${this.id}TitleText" class="ocb-gv-panel-text">
                        ${this.config?.title || ""}
                    </div>
                    <div id="${this.id}Collapse" class="ocb-gv-panel-collapse-control">
                        <span id="${this.id}CollapseIcon" class="fa fa-minus"></span>
                    </div>
                </div>
            </div>
        `);

        this.div = template.querySelector(`div#${this.id}`);
        this.titleDiv = this.div.querySelector(`div#${this.id}Title`);
        this.titleText = this.div.querySelector(`div#${this.id}TitleText`);
        this.collapseDiv = this.div.querySelector(`div#${this.id}Collapse`);
        this.collapseIcon = this.div.querySelector(`span#${this.id}CollapseIcon`);

        // Initialize SVG element
        this.svg = SVG.init(this.div, {
            "width": this.width,
            "height": this.height,
        });
        this.positionBox = null;
        this.selBox = null;

        this.target.append(this.div);
    }

    #initEvents() {
        const handleToggle = () => {
            this.collapsed ? this.showContent() : this.hideContent();
        };

        this.titleDiv.addEventListener("click", handleToggle);

        // Prevent browser context menu
        this.svg.addEventListener("contextmenu", event => {
            event.preventDefault();
        });

        let downY, downX, moveX, moveY, lastX;
        const handleMouseMove = event => {
            // using parent offset works well on firefox and chrome. Could be because it is a div instead of svg
            moveX = event.clientX - (this.div.getBoundingClientRect().left - window.scrollX);
            const increment = moveX - downX;
            let newWidth = 0;
            this._recalculateResizeControls();

            switch (this.status) {
                case "resizePositionBoxLeft":
                    newWidth = parseInt(this.positionBox.getAttribute("width")) - increment;
                    if (newWidth > 0) {
                        this.positionBox.setAttribute("x", parseInt(this.positionBox.getAttribute("x")) + increment);
                        this.positionBox.setAttribute("width", newWidth);
                    }
                    downX = moveX;
                    break;
                case "resizePositionBoxRight":
                    newWidth = parseInt(this.positionBox.getAttribute("width")) + increment;
{'fraction_non_alphanumeric': 0.1383911052975801, 'fraction_numerical': 0.0014388489208633094, 'mean_word_length': 1.8402674591381871, 'pattern_counts': {'":': 8, '<': 23, '<?xml version=': 0, '>': 31, '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': '3861608', 'n_tokens_mistral': 2120, 'n_tokens_neox': 2064, 'n_words': 382}