@kieler/klighd-core/lib/hover/popup-provider.js

Core KLighD diagram visualization with Sprotty

"use strict";
/*
 * KIELER - Kiel Integrated Environment for Layout Eclipse RichClient
 *
 * http://rtsys.informatik.uni-kiel.de/kieler
 *
 * Copyright 2021-2023 by
 * + Kiel University
 *   + Department of Computer Science
 *     + Real-Time and Embedded Systems Group
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopupModelProvider = void 0;
const inversify_1 = require("inversify");
const skgraph_models_1 = require("../skgraph-models");
const skgraph_utils_1 = require("../skgraph-utils");
const hover_1 = require("./hover");
/* global SVGElement */
/** Provide PopupModels created from SKGraphElements. */
let PopupModelProvider = class PopupModelProvider {
    getPopupModel(request, elementSchema) {
        if (elementSchema &&
            hover_1.RequestKlighdPopupModelAction.isThisAction(request) &&
            (0, skgraph_models_1.isSKGraphElement)(request.parent) &&
            request.element !== undefined) {
            const tooltip = this.findTooltip(request.parent, request.element);
            if (tooltip) {
                const escapedTooltip = this.escapeHtml(tooltip);
                return {
                    type: 'html',
                    id: 'popup',
                    children: [
                        {
                            type: 'pre-rendered',
                            id: 'popup-body',
                            code: `<div class="klighd-popup">${escapedTooltip}</div>`,
                        },
                    ],
                    canvasBounds: request.bounds,
                };
            }
        }
        return undefined;
    }
    /**
     * Finds the tooltip defined in the SKGraphElement in its rendering with the given ID.
     * @param element The SKGraphElement to look in.
     * @param svgElement The SVG element representing the KRendering.
     */
    findTooltip(element, svgElement) {
        if (element.properties['klighd.tooltip']) {
            return element.properties['klighd.tooltip'];
        }
        const rendering = (0, skgraph_utils_1.findRendering)(element, svgElement);
        if (rendering) {
            return rendering.properties['klighd.tooltip'];
        }
        return undefined;
    }
    /**
     * Escapes the given string to prevent XSS attacks and to let it appear correctly in HTML.
     * @param unsafe The string to escape.
     * @returns The escaped string.
     */
    escapeHtml(unsafe) {
        return unsafe
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;')
            .replace(/\n/g, '<br/>');
    }
};
exports.PopupModelProvider = PopupModelProvider;
exports.PopupModelProvider = PopupModelProvider = __decorate([
    (0, inversify_1.injectable)()
], PopupModelProvider);
//# sourceMappingURL=popup-provider.js.map