Editor option to show NodeInterface value when its port is hovered

docs/visual-editor/customization.md

@@ -61,6 +61,19 @@ For this, the editor provides the following slots:
 -   `sidebar` [(default component)](https://github.com/newcat/baklavajs/blob/master/packages/renderer-vue/src/sidebar/Sidebar.vue)
 -   `minimap` [(default component)](https://github.com/newcat/baklavajs/blob/master/packages/renderer-vue/src/components/Minimap.vue)
 
+There are other components that provide slots as well:
+
+- Node
+  - `nodeInterface` [(default component)](https://github.com/newcat/baklavajs/blob/master/packages/renderer-vue/src/node/NodeInterface.vue)
+    - Props:
+      - `type` (type: `"input"|"output"`)
+      - `node` (type: <code><ApiLink type="classes" module="@baklavajs/core" name="AbstractNode">AbstractNode</ApiLink></code>)
+      - `intf` (type: <code><ApiLink type="classes" module="@baklavajs/core" name="NodeInterface">NodeInterface</ApiLink></code>)
+- NodeInterface
+  - `portTooltip` [(default content)](https://github.com/newcat/baklavajs/blob/master/packages/renderer-vue/src/node/NodeInterface.vue#L11-L13)
+    - Props:
+      - `showTooltip` (type: `boolean`)
+
 So, for example, if you want to use a custom component for a certain node type, you could do it like this:
 
 ```vue
@@ -106,6 +119,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,13 @@
             :class="{ '--selected': temporaryConnection?.from === intf }"
             @pointerover="startHover"
             @pointerout="endHover"
-        />
+        >
+            <slot name="portTooltip" :show-tooltip="showTooltip">
+                <span v-if="showTooltip === true" class="__tooltip">
+                    {{ ellipsis(intf.value) }}
+                </span>
+            </slot>
+        </div>
         <component
             :is="intf.component"
             v-if="showComponent"
@@ -30,6 +36,16 @@ import {
     TEMPORARY_CONNECTION_HANDLER_INJECTION_SYMBOL,
 } from "../editor/temporaryConnection";
 
+const ellipsis = (value: any, characters = 100) => {
+    const stringValue = value?.toString ? value.toString() : "";
+
+    if (stringValue.length > characters) {
+        return stringValue.slice(0, characters) + "...";
+    }
+
+    return stringValue;
+};
+
 const props = defineProps<{
     node: AbstractNode;
     intf: NodeInterface;
@@ -43,6 +59,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 +71,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-node-interface-port-tooltip-color-background);
+        color: var(--baklava-node-interface-port-tooltip-color-foreground);
+        padding: 0.25em 0.5em;
+        text-align: center;
+        z-index: 2;
+    }
 }

packages/themes/src/classic/variables.scss

@@ -22,6 +22,8 @@
     --baklava-node-title-color-foreground: white;
     --baklava-group-node-title-color-background: rgb(5, 75, 5);
     --baklava-group-node-title-color-foreground: white;
+    --baklava-node-interface-port-tooltip-color-foreground: var(--baklava-control-color-primary);
+    --baklava-node-interface-port-tooltip-color-background: var(--baklava-editor-background-pattern-black);
     --baklava-node-border-radius: 4px;
 
     // Connections

packages/themes/src/syrup-dark/variables.scss

@@ -22,6 +22,8 @@
     --baklava-node-title-color-foreground: white;
     --baklava-group-node-title-color-background: #215636;
     --baklava-group-node-title-color-foreground: white;
+    --baklava-node-interface-port-tooltip-color-foreground: var(--baklava-control-color-primary);
+    --baklava-node-interface-port-tooltip-color-background: var(--baklava-editor-background-pattern-black);
     --baklava-node-border-radius: 6px;
 
     // Connections