# src/toolbar/BCFMode.js

    import {BCFViewpointsPlugin} from "../../lib/xeokit/plugins/BCFViewpointsPlugin/BCFViewpointsPlugin.js";
    import {math} from "../../lib/xeokit/viewer/scene/math/math.js";
    import {Controller} from "../Controller.js";

    /**
     * @desc Manages BCF viewpoints.
     *
     * Located at {@link Toolbar#bcf}.
     */
    class BCFMode extends Controller {

        constructor(parent, cfg) {
            super(parent, cfg);
            this._element = document.getElementById(cfg.bcfPanelId);
            this._records = [];
            this._recordsMap = {};
            this._bcfViewpointsPlugin = new BCFViewpointsPlugin(this.viewer, {});
        }

        createViewpoint() {
            const viewpointId = math.createUUID();
            const viewpoint = this._bcfViewpointsPlugin.getViewpoint();
            const record = {
                id: viewpointId,
                viewpoint: viewpoint
            };
            this._records.push(record);
            this._recordsMap[record.id] = record;
            this._repaint();
        }

        clearViewpoints() {
            this._records = [];
            this._recordsMap = {};
            this._repaint();
        }

        _repaint() {
            var h = "";
            for (var i = 0, len = this._records.length; i < len; i++) {
                const record = this._records[i];
                h += '<br><div class="panel panel-primary">';
                h += '<div class="panel-heading">';
                h += '<a id="' + record.id + '" href=""><img src="' + record.viewpoint.snapshot.snapshot_data + '" style="border: 1px solid black;" width="150", height="130"></a>';
                h += '</div>';
                h += '</div>';
            }
            const self = this;
            this._element.innerHTML = h;
            for (var i = 0, len = this._records.length; i < len; i++) {
                (function () {
                    const record = self._records[i];
                    $("#" + record.id).on('click', (event) => {
                        self._bcfViewpointsPlugin.setViewpoint(record.viewpoint);
                        event.preventDefault();
                    });
                })();
            }
        }

        /** @private */
        destroy() {
            super.destroy();
            this._bcfViewpointsPlugin.destroy();
        }
    }

    export {BCFMode};