<commit_before><link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">

<link rel="import" href="../../bower_components/neon-animation/web-animations.html">

<dom-module id="dtile-layer-list">
    <template>
        <style>
            :host {
                display: block;
                position: relative;
                overflow: hidden;
                color: var(--primary-text-color);
            }

            #header {
                display: flex;
                padding-left: 16px;
                padding-right: 8px;
            }

            #title {
                text-align: left;
                flex-grow: 1;
                display: flex;
                align-items: center;
                @apply --paper-font-subhead;
            }

            #items {
                width: 100%;
                height: 100%;
                position: relative;
            }

            .layerItem {
                user-select: none;
                padding-right: 0;
                cursor: default;
                box-sizing: border-box;
                transition: background 0.2s, color 0.2s;
            }

            .layerItem[selected] {
                background: var(--primary-color);
                color: var(--contrasting-text-color);
            }

            .layerItem[selected] paper-icon-button {
                color: var(--contrasting-text-color);
            }

            .layerItem > paper-ripple {
                color: var(--primary-color);
            }

            .layerName {
                text-align: left;
                flex-grow: 1;
            }

            #renameDialog > paper-input {
                text-align: left;
            }

            paper-icon-button {
                color: var(--secondary-color);
            }
        </style>

        <div id="header">
            <span id="title">Layers</span>
            <paper-icon-button icon="add" on-tap="_addLayer"></paper-icon-button>
        </div>

        <div id="items" role="listbox">
            <template is="dom-repeat" items="[[layers]]" sort="_reverseLayerOrder">
                <paper-item class="layerItem" on-tap="_selectLayer"
                    selected$="{{_isLayerSelected(item.index)}}">
                    <paper-ripple></paper-ripple>
                    <span class="layerName">[[item.name]]</span>
                    <paper-menu-button class="layerMenuButton" on-tap="_stopPropagation">
                        <paper-icon-button icon="more-vert" slot="dropdown-trigger"></paper-icon-button>

                        <div slot="dropdown-content">
                            <paper-item on-tap="_removeLayer">Remove</paper-item>
                        </div>
                    </paper-menu-button>
                </paper-item>
            </template>
        </div>
    </template>
</dom-module>

<script>
    class DTileLayerList extends DTile.ReduxMixin(Polymer.Element) {
        static get is() { return "dtile-layer-list"; }

        static get properties() {
            return {
                layers: {
                    type: Array,
                    statePath: state => {
                        if (!state.ui.currentMapId) return;
                        const mapData = state.entities.maps[parseInt(state.ui.currentMapId)];
                        if (!mapData) return;
                        return mapData.present.layers
                            .map((layer, index) => ({ ...layer, index }));
                    }
                }
            };
        }

        static get observers() {
            return [
                "_layersUpdated(layers)"
            ];
        }

        static get actions() {
            return {
                addLayer(mapId, name) {
                    return {
                        type: "ADD_LAYER",
                        payload: {
                            mapId,
                            name
                        }
                    };
                },

                removeLayer(mapId, index) {
                    return {
                        type: "REMOVE_LAYER",
                        payload: {
                            mapId,
                            layerIndex: index
                        }
                    };
                },

                setCurrentLayer(index) {
                    return {
                        type: "SET_CURRENT_LAYER_INDEX",
                        payload: index
                    };
                }
            };
        }

        _stopPropagation(e) { e.stopPropagation(); }
        _reverseLayerOrder(layer1, layer2) {
            return this.layers.indexOf(layer1) < this.layers.indexOf(layer2);
        }
        _isLayerSelected(index) { return index === this.getState().ui.currentLayerIndex; }

        _layersUpdated(layers) {
            if (!layers) return;
            const selected = this.getState().ui.currentLayerIndex;
            if (typeof selected !== "number") this.dispatch("setCurrentLayer", 0);
        }

        _addLayer() {
            const state = this.getState();
            const currentMapId = state.ui.currentMapId;
            const layers = state.entities.maps[currentMapId].present.layers;
<commit_msg>Add keyboard shortcut for selecting layers<commit_after><link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">

<link rel="import" href="../../bower_components/neon-animation/web-animations.html">

<dom-module id="dtile-layer-list">
    <template>
        <style>
            :host {
                display: block;
                position: relative;
                overflow: hidden;
                color: var(--primary-text-color);
            }

            #header {
                display: flex;
                padding-left: 16px;
                padding-right: 8px;
            }

            #title {
                text-align: left;
                flex-grow: 1;
                display: flex;
                align-items: center;
                @apply --paper-font-subhead;
            }

            #items {
                width: 100%;
                height: 100%;
                position: relative;
            }

            .layerItem {
                user-select: none;
                padding-right: 0;
                cursor: default;
                box-sizing: border-box;
                transition: background 0.2s, color 0.2s;
            }

            .layerItem[selected] {
                background: var(--primary-color);
                color: var(--contrasting-text-color);
            }

            .layerItem[selected] paper-icon-button {
                color: var(--contrasting-text-color);
            }

            .layerItem > paper-ripple {
                color: var(--primary-color);
            }

            .layerName {
                text-align: left;
                flex-grow: 1;
            }

            #renameDialog > paper-input {
                text-align: left;
            }

            paper-icon-button {
                color: var(--secondary-color);
            }
        </style>

        <div id="header">
            <span id="title">Layers</span>
            <paper-icon-button icon="add" on-tap="_addLayer"></paper-icon-button>
        </div>

        <div id="items" role="listbox">
            <template is="dom-repeat" items="[[layers]]" sort="_reverseLayerOrder">
                <paper-item class="layerItem" on-tap="_selectLayer"
                    selected$="{{_isLayerSelected(item.index, _selectedIndex)}}">
                    <paper-ripple></paper-ripple>
                    <span class="layerName">[[item.name]]</span>
                    <paper-menu-button class="layerMenuButton" on-tap="_stopPropagation">
                        <paper-icon-button icon="more-vert" slot="dropdown-trigger"></paper-icon-button>

                        <div slot="dropdown-content">
                            <paper-item on-tap="_removeLayer">Remove</paper-item>
                        </div>
                    </paper-menu-button>
                </paper-item>
            </template>
        </div>
    </template>
</dom-module>

<script>
    class DTileLayerList extends DTile.ReduxMixin(Polymer.Element) {
        static get is() { return "dtile-layer-list"; }

        static get properties() {
            return {
                layers: {
                    type: Array,
                    statePath: state => {
                        if (!state.ui.currentMapId) return;
                        const mapData = state.entities.maps[parseInt(state.ui.currentMapId)];
                        if (!mapData) return;
                        return mapData.present.layers
                            .map((layer, index) => ({ ...layer, index }));
                    }
                },

                _selectedIndex: { type: Number, statePath: "ui.currentLayerIndex" }
            };
        }

        static get observers() {
            return [
                "_layersUpdated(layers)"
            ];
        }

        static get actions() {
            return {
                addLayer(mapId, name) {
                    return {
                        type: "ADD_LAYER",
                        payload: {
                            mapId,
                            name
                        }
                    };
                },

                removeLayer(mapId, index) {
                    return {
                        type: "REMOVE_LAYER",
                        payload: {
                            mapId,
                            layerIndex: index
                        }
                    };
                },

                setCurrentLayer(index) {
                    return {
                        type: "SET_CURRENT_LAYER_INDEX",
                        payload: index
                    };
                }
            };
        }

        ready() {
            super.ready();

            window.addEventListener("keydown", e => {
                const state = this.getState();
                if (state.ui.currentPage !== "edit-map") return;

                const n = e.key === "0" ? 10 : parseInt(e.key);
                if (isNaN(n) || n <= 0 || n > this.layers.length) return;

                this.dispatch("setCurrentLayer", n - 1);
            });
        }

        _stopPropagation(e) { e.stopPropagation(); }
        _reverseLayerOrder(layer1, layer2) {
            return this.layers.indexOf(layer1) < this.layers.indexOf(layer2);
        }
        _isLayerSelected(index, selected) { return index === selected; }

        _layersUpdated(layers) {
            if (!layers) return;
            const selected = this.getState().ui.currentLayerIndex;
            if (typeof selected !== "number") this.dispatch("setCurrentLayer", 0);
        }

        _addLayer() {
            const state = this.getState();
            const currentMapId = state.ui.currentMapId;
            const layers = state.entities.maps[currentMapId].present.layers;

{'fraction_non_alphanumeric': 0.12299823928900813, 'fraction_numerical': 0.003940638886559906, 'mean_word_length': 1.1802229939681959, 'pattern_counts': {'":': 0, '<': 82, '<?xml version=': 0, '>': 89, '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': '2539743', 'n_tokens_mistral': 3145, 'n_tokens_neox': 2909, 'n_words': 515}