Source: components/Snapping.js

/**
 * @module components/Snapping.js
 * @name Snapping
 * @copyright 2023 3Liz
 * @author BOISTEAULT Nicolas
 * @license MPL-2.0
 */

import { mainLizmap, mainEventDispatcher } from '../modules/Globals.js';
import { html, render } from 'lit-html';
import '../images/svg/refresh.svg';

/**
 * @class
 * @name Snapping
 * @augments HTMLElement
 */
export default class Snapping extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        // Display
        const mainTemplate = () => html`
        <div class="${mainLizmap.snapping.config !== undefined ? '' : 'hide'}">
            <h3>${lizDict['snapping.title']}</h3>
            <div class="control-group">
                <div class="controls">
                    <div class="btn-group">
                        <button
                            class="btn ${mainLizmap.snapping.active ? 'active btn-success' : ''}"
                            @click=${() => mainLizmap.snapping.toggle()}
                            >
                            ${mainLizmap.snapping.active ? lizDict['geolocate.toolbar.stop'] : lizDict['geolocate.toolbar.start']}
                        </button>
                        <button
                            class="btn ${mainLizmap.snapping._snapLayersRefreshable ? 'btn-warning' : ''}"
                            ?disabled=${!mainLizmap.snapping._snapLayersRefreshable}
                            @click=${() => mainLizmap.snapping.getSnappingData() }
                            >
                            <svg width="14" height="14">
                                <use xlink:href="#refresh"/>
                            </svg>
                        </button>
                    </div>
                </div>
                ${mainLizmap.snapping.active ?
                    html`<div class="snap-panel-controls">
                        <p class="snap-layers-list-title">${lizDict['snapping.list.title']}</p>
                        <div class="snap-layers-list">
                            ${mainLizmap.snapping?.config?.snap_layers.map((snapLayer) =>
                                html`<div class="snap-layer">
                                    <input
                                        id="${'snap-layer-'+snapLayer}"
                                        name="${snapLayer}"
                                        @change=${()=> mainLizmap.snapping.snapToggled = snapLayer}
                                        .disabled=${!mainLizmap.snapping?.config?.snap_enabled[snapLayer]}
                                        .checked=${mainLizmap.snapping?.config?.snap_on_layers[snapLayer]}
                                        type="checkbox"/>
                                    <label
                                        data-bs-toggle="tooltip"
                                        data-bs-title="${
                                            mainLizmap.snapping?.config?.snap_enabled[snapLayer] ?
                                                lizDict['snapping.list.toggle'] :
                                                    lizDict['snapping.list.disabled']}"
                                        for="${'snap-layer-'+snapLayer}"
                                        class="${mainLizmap.snapping?.config?.snap_enabled[snapLayer] ? '' : 'snap-disabled'}"
                                        >
                                        ${mainLizmap.snapping?.getLayerTitle(snapLayer)}
                                    </label>
                                </div>
                                `
                            )}
                        </div>
                    </div>`
                    : ''
                }
            </div>
        <div>`;

        render(mainTemplate(), this);

        mainEventDispatcher.addListener(
            () => {
                render(mainTemplate(), this);
                // display tooltips on rendered layer list
                $('.snap-layer label', this).tooltip({
                    placement: 'top'
                });
            },
            [
                'snapping.config',
                'snapping.active',
                'snapping.refreshable'
            ]
        );
    }

    disconnectedCallback() {
    }
}