Source: viewer/templates/DefaultViewer.js

import { cloneDeep } from "lodash";
import shortcutsHelp from '../shortcutsHelp.html?raw';

/**
 * Initialize the configuration for a simple WebGIS
 * based on a simplified template config
 * 
 * @memberof vef.viewer.templates.DefaultViewer
 * 
 * @param {object} options
 */
export function getViewerConfig(options) {
    options = cloneDeep(options);

    // base metadata
    const title = options?.title || "Map Viewer";
    const caption = options?.caption || "";
    const description = options?.description || "";
    const references = options?.references || "";
    const keywords = options?.keywords || [];
    const authors = options?.authors || [];

    // content config
    const map = options?.config?.map || {};
    const baseLayers = options?.config?.baseLayers || {};
    const layers = options?.config?.layers || {};
    const cache = options?.config?.cache || {};
    const structure = options?.config?.structure || [];
    const filters = options?.config?.filters || [];
    const tools = options?.config?.tools || {};
    const indexUrl = options?.config?.indexUrl || null;
    const help = options?.config?.help || false;

    // should the info-section be displayed
    const showInfo = (description.length || references.length || references.length);

    const mapTools = [
        {
            type: "Zoom",
            position: "top-left"
        },
        {
            type: "ProjectionSwitcher",
            position: "top-left"
        },
        {
            type: "FitToScreen",
            position: "top-left"
        },
        {
            type: "DrawTools",
            position: "top-left"
        },
        {
            type: "LayerLegends",
            position: "top-left",
            targetTree: "layer-tree"
        },
        {
            type: "Screenshot",
            position: "top-left"
        },
        {
            type: "BaselayerSwitcher",
            position: "bottom-left",
            infoSidebar: "info-sidebar",
            infoSidebarGroup: "sidebar-info-content"
        },
        {
            type: "ScaleControl",
            position: "bottom-left"
        },
        {
            type: "CoordinateControl",
            position: "bottom-left"
        },
        {
            type: "Attribution",
            position: "bottom-right"
        }
    ].reduce((accumulator, tool) => {
        if (tool.type in tools) {
            if (typeof tools[tool.type] == "object") {
                accumulator.push(Object.assign({}, tool, tools[tool.type]));
            }
        } else {
            accumulator.push(tool);
        }
        return accumulator;
    }, []);

    // Create General Config
    return {
        theme: {},
        elements: [
            // Optional Authors and Info Element
            ... ((authors.length > 0) ? [{
                type: "Authors",
                id: "authors",
                authors: authors
            }] : []),
            ... ((showInfo) ? [{
                type: "ProjectInfo",
                id: "info-element",
                title: title,
                description: description,
                keywords: keywords,
                references: references
            }] : []),
            // Default Elements
            {
                type: "Template",
                id: "help-element",
                content: shortcutsHelp
            },
            {
                type: "Sidebar",
                id: "sidebar",
                position: "left",
                menu: true,
                closeable: true,
                responsive: true,
                groups: [
                    {
                        id: "sidebar-map",
                        title: title,
                        classes: "fas fa-map",
                        active: true
                    },
                    ... (showInfo) ? [{
                        id: "sidebar-info-group",
                        title: title,
                        classes: "fas fa-info",
                        active: false
                    }] : [],
                    ... (authors.length > 0) ? [{
                        id: "sidebar-authors-group",
                        title: "Authors & Contacts",
                        classes: "fas fa-users",
                        active: false
                    }] : [],
                    ...((help) ? [{
                        id: "sidebar-help-group",
                        title: "Help",
                        classes: "fas fa-question",
                        active: false
                    }] : [])
                ]
            },
            {
                type: "Sidebar",
                id: "info-sidebar",
                position: "right",
                underlineHeader: true,
                menu: false,
                closeable: true,
                responsive: true,
                groups: [
                    {
                        id: "sidebar-popup-content"
                    },
                    {
                        id: "sidebar-info-content"
                    }
                ]
            },
            {
                type: "Map",
                id: "map",
                mode: "2D",
                popup: {
                    targetSidebar: "info-sidebar",
                    sidebarGroup: "sidebar-popup-content"
                },
                activeAreaSidebar: "sidebar",
                options: map,
                tools: mapTools
            },
            {
                type: "LayerTree",
                id: "layer-tree",
                title: "Layer Tree",
                targetMap: "map",
                targetSidebar: "info-sidebar",
                infoSidebarGroup: "sidebar-info-content",
                addLayerMethods: [
                    "ows",
                    "dws",
                    "catalog",
                    "importer"
                ],
                indexUrl: indexUrl,
                deleteEnabled: true,
                editEnabled: true,
                addFolderEnabled: true,
                structure: structure
            },
            {
                type: "FileDropArea",
                id: "drag-drop-area",
                dropTarget: "map",
                targetTree: "layer-tree"
            },
            {
                type: "AddFilterButton",
                id: "add-filter-button",
                parentId: "sidebar-map"
            }
        ],
        layout: [
            {
                parent: "#",
                children: [
                    "map",
                    "sidebar",
                    "info-sidebar"
                ]
            },
            {
                parent: "sidebar-map",
                children: ["layer-tree"].concat(filters.map(f => f.id)).concat(["add-filter-button"])
            },
            ... (showInfo) ? [{
                parent: "sidebar-info-group",
                children: ["info-element"]
            }] : [],
            ... (authors.length > 0) ? [{
                parent: "sidebar-authors-group",
                children: ["authors"]
            }] : [],
            ... (help) ? [{
                parent: "sidebar-help-group",
                children: ["help-element"]
            }] : []
        ],
        layers: layers,
        cache: cache,
        baseLayers: baseLayers,
        filters: filters,
    };
}

/**
 * convert a regular viewer config to the
 * PortalViewer config
 * @namespace vef.viewer.templates.DefaultViewer
 */
export function getTemplateConfig(config, originalConfig) {
    config = (config) ? cloneDeep(config) : {};
    originalConfig = (originalConfig) ? cloneDeep(originalConfig) : {};

    originalConfig.template = "DefaultViewer";
    originalConfig.version = "2.0.0";
    originalConfig.config = {
        tools: originalConfig?.config?.tools || {},
        indexUrl: originalConfig?.config?.indexUrl || null,
        help: originalConfig?.config?.help || false,
        baseLayers: config?.baseLayers || {},
        layers: config?.layers || {},
        cache: config?.cache || {},
        filters: config.filters || [],
        map: {},
        structure: []
    };

    // find specific element configs
    config.elements.forEach(element => {
        switch (element.id) {
            case "map":
                originalConfig.config.map = element.options;
                break;
            case "layer-tree":
                originalConfig.config.structure = element.structure;
                break;
        }
    });

    return originalConfig;
}