Editor option to show NodeInterface value when its port is hovered

docs/visual-editor/customization.md

@@ -106,6 +106,7 @@ Below you can find a list of CSS classes used in Baklava:
     -   `--output`: Applied when the node interface is an output
     -   `--connected`: Applied when the node interface has a connection
     -   `__port`: The "dot" via which the node interface can be connected
+    -   `.__tooltip`: The tooltip that is shown when hovering over the node interface
 -   **Connection:**
     -   `baklava-connection`: Base class for each connection
     -   `--temporary`: Applied when the connection is still being dragged (in the process of being created or changed)

docs/visual-editor/setup.md

@@ -60,3 +60,40 @@ export default defineComponent({
 });
 </script>
 ```
+
+## Settings
+Settings can be changed by accessing the `settings` property of the view model right after creating it or reactively at any moment later. 
+
+For example, to enable displaying the value of a node interface on hover:
+
+```ts
+const baklava = useBaklava();
+baklava.settings.displayValueOnHover = true;
+```
+
+Available settings are:
+
+```ts
+interface IViewSettings {
+    /** Use straight connections instead of bezier curves */
+    useStraightConnections: boolean;
+    /** Show a minimap */
+    enableMinimap: boolean;
+    /** Background settings */
+    background: {
+        gridSize: number;
+        gridDivision: number;
+        subGridVisibleThreshold: number;
+    };
+    /** Sidebar settings */
+    sidebar: {
+        /** Width of the sidebar in pixels */
+        width: number;
+        /** Whether users should be able to resize the sidebar */
+        resizable: boolean;
+    };
+    /** Show interface value on port hover */
+    displayValueOnHover: boolean;
+}
+```
+

packages/renderer-vue/playground/App.vue

@@ -50,7 +50,7 @@ const editor = baklavaView.editor;
 (window as any).editor = baklavaView.editor;
 baklavaView.settings.enableMinimap = true;
 baklavaView.settings.sidebar.resizable = false;
-
+baklavaView.settings.displayValueOnHover = true;
 const engine = new DependencyEngine(editor);
 engine.events.afterRun.subscribe(token, (r) => {
     engine.pause();

packages/renderer-vue/src/node/NodeInterface.vue

@@ -6,7 +6,11 @@
             :class="{ '--selected': temporaryConnection?.from === intf }"
             @pointerover="startHover"
             @pointerout="endHover"
-        />
+        >
+            <span v-if="showTooltip === true" class="__tooltip">
+                {{ ellipsis(intf.value) }}
+            </span>
+        </div>
         <component
             :is="intf.component"
             v-if="showComponent"
@@ -30,6 +34,13 @@ import {
     TEMPORARY_CONNECTION_HANDLER_INJECTION_SYMBOL,
 } from "../editor/temporaryConnection";
 
+const ellipsis = (value: string, characters = 100) => {
+    if (value.length > characters) {
+        return value.slice(0, characters) + "...";
+    }
+    return value;
+};
+
 const props = defineProps<{
     node: AbstractNode;
     intf: NodeInterface;
@@ -43,6 +54,8 @@ const { hoveredOver, temporaryConnection } = inject<ITemporaryConnectionHandler>
 const el = ref<HTMLElement | null>(null) as Ref<HTMLElement>;
 
 const isConnected = computed(() => props.intf.connectionCount > 0);
+const isHovered = ref<boolean>(false);
+const showTooltip = computed(() => viewModel.value.settings.displayValueOnHover && isHovered.value);
 const classes = computed(() => ({
     "--input": props.intf.isInput,
     "--output": !props.intf.isInput,
@@ -53,9 +66,11 @@ const showComponent = computed<boolean>(
 );
 
 const startHover = () => {
+    isHovered.value = true;
     hoveredOver(props.intf);
 };
 const endHover = () => {
+    isHovered.value = false;
     hoveredOver(undefined);
 };
 

packages/renderer-vue/src/viewModel.ts

@@ -29,6 +29,8 @@ export interface IViewSettings {
         /** Whether users should be able to resize the sidebar */
         resizable: boolean;
     };
+    /** Show interface value on port hover */
+    displayValueOnHover: boolean;
 }
 
 export interface IBaklavaViewModel extends IBaklavaTapable {
@@ -72,6 +74,7 @@ export function useBaklava(existingEditor?: Editor): IBaklavaViewModel {
             width: 300,
             resizable: true,
         },
+        displayValueOnHover: false,
     } satisfies IViewSettings);
 
     const commandHandler = useCommandHandler();

packages/themes/src/classic/components/node-interface.scss

@@ -33,4 +33,16 @@
             right: -1.1em;
         }
     }
+
+    .__tooltip {
+        position: absolute;
+        left: 5px;
+        top: 15px;
+        transform: translate(-50%, 0%);
+        background: var(--baklava-editor-background-pattern-black);
+        color: var(--baklava-control-color-primary);
+        padding: 0.25em 0.5em;
+        text-align: center;
+        z-index: 2;
+    }
 }