<commit_before>import Component from "./component";
import * as $ from "jquery";
import "gridstack.jQueryUI";
import App from "./app";
import stateEngine from "./state-engine";
import appGridService from "./app-grid-service";

import "style-loader!gridstack/dist/gridstack.css";

export default class Grid extends Component {

    private widgetCount: number;

    constructor(parent: HTMLElement, id: string) {
        super(parent, id);
        this.widgetCount = 0;
    }

    protected getInnerHTML(): string {
        return `
            <div class="grid-stack" data-gs-width="12" data-gs-animate="yes"></div>
        `;
    }

    private removeItem(item: HTMLElement): void {
        const installedApps = stateEngine.get("installed-apps") as Array<App>;
        const newInstalledApps = new Array<App>();
        installedApps.forEach(app => {
            if (item.id != app.getId()) {
                newInstalledApps.push(app);
            }
        })
        stateEngine.set("installed-apps", newInstalledApps);
        appGridService.saveInstalledGrid();
    }

    protected afterRendered() {
        $(() => {
            $('.grid-stack').gridstack({
                width: 12,
                alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
                removable: '.app-station-header',
                removeTimeout: 100
            });
            $('.grid-stack').on('change', (event: JQueryEventObject, items: any[]) => {
                this.serializeGridState();
            });
            $('.grid-stack').on('removed', (event, items) => {
                for (var i = 0; i < items.length; i++) {
                    this.removeItem(items[i]);
                }
            });
        });
        this.setClass("app-station-grid");
    }

    protected onStateChange(): (state: Object, property: string, value: any) => void {
        return (state: Object, property: string, value: any) => {
            switch (property) {
                case "installed-apps":
                    this.syncApps(value as Array<App>);
                    break;
                case "fullscreen-app":
                    this.fullscreenApp(value as App);
                    break;
            }
        }
    }

    private fullscreenApp(app: App): void {
        const grid = $('.grid-stack').data('gridstack');
        if (app != null) {
            grid.disable();
            app.getContainer().classList.toggle("app-station-fullscreen");
            //app.getContainer().classList.toggle("grid-stack-item");
            app.getContentElement().classList.toggle("grid-stack-item-content")
            app.onFullScreen();<commit_msg>fixing remove behavior<commit_after>import Component from "./component";
import * as $ from "jquery";
import "gridstack.jQueryUI";
import App from "./app";
import stateEngine from "./state-engine";
import appGridService from "./app-grid-service";

import "style-loader!gridstack/dist/gridstack.css";

export default class Grid extends Component {

    private widgetCount: number;

    constructor(parent: HTMLElement, id: string) {
        super(parent, id);
        this.widgetCount = 0;
    }

    protected getInnerHTML(): string {
        return `
            <div class="grid-stack" data-gs-width="12" data-gs-animate="yes"></div>
        `;
    }

    private removeItem(item: HTMLElement): void {
        const installedApps = stateEngine.get("installed-apps") as Array<App>;
        const newInstalledApps = new Array<App>();
        installedApps.forEach(app => {
            if (item.id != app.getId()) {
                newInstalledApps.push(app);
            }
        })
        stateEngine.set("installed-apps", newInstalledApps);
        appGridService.saveInstalledGrid();
    }

    protected afterRendered() {
        $(() => {
            $('.grid-stack').gridstack({
                width: 12,
                alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
            });
            $('.grid-stack').on('change', (event: JQueryEventObject, items: any[]) => {
                this.serializeGridState();
            });
            $('.grid-stack').on('removed', (event, items) => {
                for (var i = 0; i < items.length; i++) {
                    this.removeItem(items[i]);
                }
            });
            let overHeader = false;
            const mouseEnterHandler = () => {
                overHeader = true;
            }
            const mouseLeftHandler = () => {
                overHeader = false;
            }
            $('.grid-stack').on('dragstart', (event, items) => {
                overHeader = false;
                $('.app-station-header').on('mouseenter', mouseEnterHandler);
                $('.app-station-header').on('mouseleave', mouseLeftHandler);
            });
            $('.grid-stack').on('dragstop', (event, items) => {
                $('.app-station-header').off('mouseenter', mouseEnterHandler);
                $('.app-station-header').off('mouseleave', mouseLeftHandler);
                if(overHeader == true){
                    $('.grid-stack').data('gridstack').removeWidget(event.target as HTMLElement);
                }
            });
        });
        this.setClass("app-station-grid");
    }

    protected onStateChange(): (state: Object, property: string, value: any) => void {
        return (state: Object, property: string, value: any) => {
            switch (property) {
                case "installed-apps":
                    this.syncApps(value as Array<App>);
                    break;
                case "fullscreen-app":
                    this.fullscreenApp(value as App);
                    break;
            }
        }
    }

    private fullscreenApp(app: App): void {
        const grid = $('.grid-stack').data('gridstack');
        if (app != null) {
            grid.disable();
            app.getContainer().classList.toggle("app-station-fullscreen");
            //app.getContainer().classList.toggle("grid-stack-item");
            app.getContentElement().classList.toggle("grid-stack-item-content")
            app.onFullScreen();
{'fraction_non_alphanumeric': 0.14619321817018555, 'fraction_numerical': 0.0023992322456813818, 'mean_word_length': 1.9016241299303944, 'pattern_counts': {'":': 4, '<': 15, '<?xml version=': 0, '>': 29, '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': '6556170', 'n_tokens_mistral': 1721, 'n_tokens_neox': 1660, 'n_words': 319}