Hover for sidebar and diagram popup fixes

applications/klighd-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kieler/klighd-cli",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Standalone web view for klighd-core diagrams",
   "author": "Kiel University <[email protected]>",
   "license": "EPL-2.0",
@@ -31,7 +31,7 @@
     "socket": "node ./lib/main.js --ls_port=5007"
   },
   "dependencies": {
-    "@kieler/klighd-core": "^0.4.1",
+    "@kieler/klighd-core": "^0.4.2",
     "commander": "^8.1.0",
     "fastify": "^3.15.0",
     "fastify-static": "^4.0.1",

applications/klighd-vscode/package.json

@@ -2,7 +2,7 @@
     "name": "klighd-vscode",
     "displayName": "KLighD Diagrams",
     "description": "KLighD diagram support for Visual Studio Code",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "publisher": "kieler",
     "author": "Kiel University <[email protected]>",
     "icon": "icon.png",
@@ -164,7 +164,7 @@
         "webpack": "^4.44.1"
     },
     "dependencies": {
-        "@kieler/klighd-core": "^0.4.1",
+        "@kieler/klighd-core": "^0.4.2",
         "inversify": "^5.0.1",
         "nanoid": "^3.1.23",
         "reflect-metadata": "^0.1.13",

packages/klighd-core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kieler/klighd-core",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "description": "Core KLighD diagram visualization with Sprotty",
     "author": "Kiel University <[email protected]>",
     "license": "EPL-2.0",
@@ -23,7 +23,7 @@
         "publish:next": "yarn publish --new-version \"$(semver $npm_package_version -i minor)-next.$(git rev-parse --short HEAD)\" --tag next --no-git-tag-version"
     },
     "dependencies": {
-        "@kieler/klighd-interactive": "^0.4.1",
+        "@kieler/klighd-interactive": "^0.4.2",
         "@types/file-saver": "^2.0.5",
         "feather-icons": "^4.28.0",
         "inversify": "^5.0.1",

packages/klighd-core/src/hover/popup-provider.ts

@@ -45,14 +45,15 @@ export class PopupModelProvider implements IPopupModelProvider {
         ) {
             const tooltip = this.findTooltip(request.parent, request.element.id);
             if (tooltip) {
+                const escapedTooltip = this.escapeHtml(tooltip);
                 return <HtmlRootSchema>{
                     type: "html",
                     id: "popup",
                     children: [
                         <PreRenderedElementSchema>{
                             type: "pre-rendered",
                             id: "popup-body",
-                            code: `<div>${tooltip}</div>`,
+                            code: `<div class="klighd-popup">${escapedTooltip}</div>`,
                         },
                     ],
                     canvasBounds: request.bounds,
@@ -75,4 +76,19 @@ export class PopupModelProvider implements IPopupModelProvider {
             return rendering.properties['klighd.tooltip'] as string;
         }
     }
+
+    /**
+     * 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.
+     */
+    private escapeHtml(unsafe: string): string {
+        return unsafe
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;")
+            .replace(/\n/g, "<br/>");
+    }
 }

packages/klighd-core/src/sidebar/sidebar.tsx

@@ -160,8 +160,16 @@ export class Sidebar extends AbstractUIExtension {
     private addMouseLeaveListener(containerElement: HTMLElement): void {
         containerElement.addEventListener("mouseleave", (e) => {
             const currentPanelID = this.sidebarPanelRegistry.currentPanelID;
-            if (currentPanelID && !this.renderOptionsRegistry.getValueOrDefault(PinSidebarOption)) {
-                this.actionDispatcher.dispatch(ToggleSidebarPanelAction.create(currentPanelID, "hide"));
+            // Check if the mouse really left the bounding box of the container element.
+            // This is necessary because the mouseleave event is also triggered when the mouse
+            // "leaves" the sidebar to enter a tooltip. Take a small margin into account to
+            // avoid an issue where the mouseleave event is triggered it is still inside the
+            // container element.
+            const rect = containerElement.getBoundingClientRect();
+            if (e.x <= rect.left + 2 || e.x >= rect.right - 2 || e.y <= rect.top + 2 || e.y >= rect.bottom - 2) {
+                if (currentPanelID && !this.renderOptionsRegistry.getValueOrDefault(PinSidebarOption)) {
+                    this.actionDispatcher.dispatch(ToggleSidebarPanelAction.create(currentPanelID, "hide"));
+                }
             }
 
         });

packages/klighd-core/styles/main.css

@@ -17,6 +17,7 @@
 
 @import "./theme.css";
 @import "./options.css";
+@import "./popup.css";
 @import "./sidebar.css";
 @import "sprotty/css/sprotty.css";
 

packages/klighd-core/styles/popup.css

@@ -0,0 +1,20 @@
+/*
+ * KIELER - Kiel Integrated Environment for Layout Eclipse RichClient
+ *
+ * http://rtsys.informatik.uni-kiel.de/kieler
+ *
+ * Copyright 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
+ */
+
+.klighd-popup {
+    color: black;
+}

packages/klighd-interactive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kieler/klighd-interactive",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A module for klighd-core to interactively apply constraints to the diagram",
   "author": "Kiel University <[email protected]>",
   "license": "EPL-2.0",