Source: out/view/VisualizationPanel.js

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.VisualizationPanel = void 0;
const fs_1 = require("fs");
const vscode = require("vscode");
const extension_1 = require("../extension");
const helpers_1 = require("../support/helpers");
const Node_1 = require("../parser/Node");
/**
 * Class representing a panel (tab) with visualization
 */
class VisualizationPanel {
    //public static kill() {
    //    VisualizationPanel.currentPanel?.dispose();
    //    VisualizationPanel.currentPanel = undefined;
    //}
    //
    //public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
    //    VisualizationPanel.currentPanel = new VisualizationPanel(panel, extensionUri);
    //}
    /**
     * Initialize panel class.
     * @param extensionUri Extension URI.
     */
    constructor(extensionUri) {
        /**
         * Identifies the type of the WebView panel.
         */
        this.viewType = "visualization";
        /**
         * List of disposables, which should be disposed when the panel is disposed.
         */
        this._disposables = [];
        this._extensionUri = extensionUri;
    }
    /**
     * Creates and show a panel or just show if already exists.
     * @param extensionUri Extension URI.
     * @returns void
     */
    createOrShow(extensionUri) {
        const column = vscode.window.activeTextEditor
            ? vscode.window.activeTextEditor.viewColumn
            : undefined;
        if (this._panel) {
            this._panel.reveal(column);
            this._panel.webview.html = this._getHtmlForWebview(this._panel.webview);
            return;
        }
        const panel = vscode.window.createWebviewPanel(this.viewType, "Visualization", column || vscode.ViewColumn.One, {
            enableScripts: true,
            retainContextWhenHidden: true,
            localResourceRoots: [
                vscode.Uri.joinPath(extensionUri, "src", "js_scripts"),
                vscode.Uri.joinPath(extensionUri, "styles"),
            ],
        });
        panel.webview.html = this._getHtmlForWebview(panel.webview);
        this.initMessageReciever(panel);
        panel.onDidDispose(() => this.dispose(), null, this._disposables);
        this._panel = panel;
    }
    /**
     * Update visualization data of  the panel.
     * @param graphString JSON string with graph data.
     * @param mode Mode of analysis.
     * @param distance Distance between the nodes (for the force directed algorithm).
     * @param iterations Number of iterations (for the force directed algorithm).
     * @param strength Strength of the force between nodes (for the force directed algorithm).
     */
    updateData(graphString, mode, distance, iterations, strength) {
        this.graphString = graphString;
        this.mode = mode;
        this.distance = distance;
        this.iterations = iterations;
        this.strength = strength;
    }
    /**
     * Initialize actions for different messages.
     * @param panel WebView panel.
     */
    initMessageReciever(panel) {
        panel.webview.onDidReceiveMessage((data) => __awaiter(this, void 0, void 0, function* () {
            switch (data.command) {
                case "select-node-v": {
                    if (!data.name) {
                        return;
                    }
                    vscode.window.showInformationMessage(data.name);
                    var selectedNode = new Node_1.Node(data.id, data.name);
                    selectedNode.setRecipe(data.recipe);
                    (0, extension_1.selectNode)(selectedNode, data.used_by, data.requested, data.affected);
                    break;
                }
                case "export-svg-v": {
                    if (!data.svg) {
                        return;
                    }
                    vscode.window.showSaveDialog({ filters: { "Images": ["svg"] } }).then(file => {
                        if (file !== undefined) {
                            (0, fs_1.writeFileSync)(file.fsPath, '<?xml version="1.0" standalone="no"?>\r\n' + data.svg);
                        }
                    });
                    break;
                }
                case "show-legend-v": {
                    (0, extension_1.setLegendData)(data.legend);
                    break;
                }
            }
        }));
    }
    /**
     * Close the panel and clear resources.
     */
    dispose() {
        var _a;
        (_a = this._panel) === null || _a === void 0 ? void 0 : _a.dispose();
        while (this._disposables.length) {
            const x = this._disposables.pop();
            if (x) {
                x.dispose();
            }
        }
    }
    /**
     * Send message to the visualization.js file that the node with given ID should be removed.
     * @param id ID of the node which should be removed.
     */
    removeNode(id) {
        var _a;
        (_a = this._panel) === null || _a === void 0 ? void 0 : _a.webview.postMessage({
            command: "remove-node-v",
            id: id
        });
    }
    /**
     * Send message to the visualization.js file that the node with given ID should be returned
     * to visualization.
     * @param name Name of the node which should be returned to visualization.
     */
    returnNode(name) {
        var _a;
        (_a = this._panel) === null || _a === void 0 ? void 0 : _a.webview.postMessage({
            command: "return-node-v",
            name: name
        });
    }
    /**
     * Send message to the visualization.js file that the SVG should be exported.
     */
    callExportSVG() {
        var _a;
        (_a = this._panel) === null || _a === void 0 ? void 0 : _a.webview.postMessage({
            command: "call-export-svg-v"
        });
    }
    /**
     * Send message to the visualization.js file that the node from the TreeView should be selected.
     * @param name Name of the node which should be selected.
     */
    selectNodeFromList(name) {
        var _a;
        (_a = this._panel) === null || _a === void 0 ? void 0 : _a.webview.postMessage({
            command: "select-node-from-list-v",
            name: name
        });
    }
    /**
     * Create HTML content of the WebView.
     * @param webview WebView instance.
     * @returns HTML content.
     */
    _getHtmlForWebview(webview) {
        const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "src", "js_scripts", "visualization.js"));
        const stylesResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "styles", "reset.css"));
        const stylesMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "styles", "vscode.css"));
        const nonce = (0, helpers_1.getNonce)();
        return `<!DOCTYPE html>
			<html lang="en">
			    <head>
			    	<meta charset="UTF-8">
			    	<!--
			    		Use a content security policy to only allow loading images from https or from our extension directory,
			    		and only allow scripts that have a specific nonce.
                    -->
                    <meta http-equiv="Content-Security-Policy" content="style-src 'unsafe-inline' ${webview.cspSource}; script-src 'nonce-${nonce}';">
			    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
			    	<link href="${stylesMainUri}" rel="stylesheet">
			    	<link href="${stylesResetUri}" rel="stylesheet">
			    </head>
                <body>
                    <div class="chart">
                        <div id="visualization"></div>
                        <input type="hidden" id="graph" name="graph" value='${this.graphString}''>
                        <input type="hidden" id="mode" name="mode" value='${this.mode}''>
                        <input type="hidden" id="distance" value="${this.distance}">
                        <input type="hidden" id="iterations" value="${this.iterations}">
                        <input type="hidden" id="strength" value="${this.strength}">
                        <script src="${scriptUri}" type="module" nonce="${nonce}"></script>
                    </div>
			    </body>
			</html>`;
    }
}
exports.VisualizationPanel = VisualizationPanel;
//# sourceMappingURL=VisualizationPanel.js.map