From 0b346aabbf0981e626173bc93cd0880d57335108 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 27 Sep 2024 16:20:57 +0200
Subject: [PATCH] decouple node inspector from right hand panel

---
 .../components/Common/DraggableSeparator.vue  | 139 +++++++++++++++++
 client/src/components/Panels/FlexPanel.vue    | 143 ++----------------
 .../src/components/Workflow/Editor/Index.vue  |  13 +-
 .../Workflow/Editor/NodeInspector.vue         |  41 +++++
 .../Workflow/Editor/WorkflowGraph.vue         |   1 +
 client/src/composables/eventEmitter.ts        |  20 +++
 6 files changed, 216 insertions(+), 141 deletions(-)
 create mode 100644 client/src/components/Common/DraggableSeparator.vue
 create mode 100644 client/src/components/Workflow/Editor/NodeInspector.vue
 create mode 100644 client/src/composables/eventEmitter.ts

diff --git a/client/src/components/Common/DraggableSeparator.vue b/client/src/components/Common/DraggableSeparator.vue
new file mode 100644
index 000000000000..b722bb3c1802
--- /dev/null
+++ b/client/src/components/Common/DraggableSeparator.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { useDebounce, useDraggable } from "@vueuse/core";
+import { computed, ref, watch } from "vue";
+
+import { useEmit } from "@/composables/eventEmitter";
+import { useClamp } from "@/composables/math";
+import { useAnimationFrameThrottle } from "@/composables/throttle";
+
+const props = withDefaults(
+    defineProps<{
+        position: number;
+        min?: number;
+        max?: number;
+        showDelay?: number;
+        keyboardStepSize?: number;
+        side: "left" | "right";
+        additionalOffset?: number;
+    }>(),
+    {
+        showDelay: 100,
+        keyboardStepSize: 50,
+        min: -Infinity,
+        max: Infinity,
+        additionalOffset: 0,
+    }
+);
+
+const emit = defineEmits<{
+    (e: "positionChanged", position: number): void;
+    (e: "visibilityChanged", isVisible: boolean): void;
+    (e: "dragging", isDragging: boolean): void;
+}>();
+
+const { throttle } = useAnimationFrameThrottle();
+
+const draggable = ref<HTMLButtonElement | null>(null);
+
+const { position: draggablePosition, isDragging } = useDraggable(draggable, {
+    preventDefault: true,
+    exact: true,
+    initialValue: { x: props.position, y: 0 },
+});
+
+useEmit(isDragging, emit, "dragging");
+
+const handlePosition = useClamp(
+    ref(props.position),
+    () => props.min,
+    () => props.max
+);
+
+useEmit(handlePosition, emit, "positionChanged");
+
+watch(
+    () => props.position,
+    () => (handlePosition.value = props.position)
+);
+
+function updatePosition() {
+    handlePosition.value = draggablePosition.value.x;
+}
+
+watch(
+    () => draggablePosition.value,
+    () => throttle(updatePosition)
+);
+
+const hoverDraggable = ref(false);
+
+const hoverDraggableDebounced = useDebounce(
+    hoverDraggable,
+    computed(() => props.showDelay)
+);
+
+const showHover = computed(() => (hoverDraggable.value && hoverDraggableDebounced.value) || isDragging.value);
+
+useEmit(showHover, emit, "visibilityChanged");
+
+function onKeyLeft() {
+    handlePosition.value -= props.keyboardStepSize;
+}
+
+function onKeyRight() {
+    handlePosition.value += props.keyboardStepSize;
+}
+
+const style = computed(() => ({
+    "--position": handlePosition.value + "px",
+}));
+</script>
+
+<template>
+    <button
+        ref="draggable"
+        class="drag-handle"
+        :class="`side-${props.side}`"
+        :style="style"
+        @mouseenter="hoverDraggable = true"
+        @focusin="hoverDraggable = true"
+        @mouseout="hoverDraggable = false"
+        @focusout="hoverDraggable = false"
+        @keydown.left="onKeyLeft"
+        @keydown.right="onKeyRight">
+        <span class="sr-only"> Resizable drag handle </span>
+    </button>
+</template>
+
+<style scoped lang="scss">
+$border-width: 8px;
+
+.drag-handle {
+    --position: 0;
+
+    background-color: transparent;
+    background: none;
+    border: none;
+    border-radius: 0;
+    position: absolute;
+    width: $border-width;
+    padding: 0;
+    height: 100%;
+    z-index: 10000;
+
+    --hover-expand: 4px;
+
+    &:hover {
+        cursor: ew-resize;
+        width: calc($border-width + var(--hover-expand));
+    }
+
+    &.side-left {
+        left: var(--position);
+    }
+
+    &.side-right {
+        right: var(--position);
+    }
+}
+</style>
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 9d0031af395f..a01a8612b097 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -2,14 +2,9 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { useDebounce, useDraggable } from "@vueuse/core";
 import { computed, ref, watch } from "vue";
 
-import { useTimeoutThrottle } from "@/composables/throttle";
-
-import { determineWidth } from "./utilities";
-
-const { throttle } = useTimeoutThrottle(10);
+import DraggableSeparator from "../Common/DraggableSeparator.vue";
 
 library.add(faChevronLeft, faChevronRight);
 
@@ -28,26 +23,18 @@ const props = withDefaults(defineProps<Props>(), {
     defaultWidth: 300,
 });
 
-const draggable = ref<HTMLElement | null>(null);
-const root = ref<HTMLElement | null>(null);
-
 const panelWidth = ref(props.defaultWidth);
-const show = ref(true);
-
-const { position, isDragging } = useDraggable(draggable, {
-    preventDefault: true,
-    exact: true,
-});
 
-const hoverDraggable = ref(false);
-const hoverDraggableDebounced = useDebounce(hoverDraggable, 100);
-const showHover = computed(() => (hoverDraggable.value && hoverDraggableDebounced.value) || isDragging.value);
+const root = ref<HTMLElement | null>(null);
+const show = ref(true);
 
 const showToggle = ref(false);
 const hoverToggle = ref(false);
-const hoverDraggableOrToggle = computed(
-    () => (hoverDraggableDebounced.value || hoverToggle.value) && !isDragging.value
-);
+
+const isHoveringDragHandle = ref(false);
+const isDragging = ref(false);
+
+const hoverDraggableOrToggle = computed(() => (isHoveringDragHandle.value || hoverToggle.value) && !isDragging.value);
 
 const toggleLinger = 500;
 const toggleShowDelay = 600;
@@ -70,72 +57,6 @@ watch(
     }
 );
 
-/** Watch position changes and adjust width accordingly */
-watch(position, () => {
-    throttle(() => {
-        if (!root.value || !draggable.value) {
-            return;
-        }
-
-        const rectRoot = root.value.getBoundingClientRect();
-        const rectDraggable = draggable.value.getBoundingClientRect();
-        panelWidth.value = determineWidth(
-            rectRoot,
-            rectDraggable,
-            props.minWidth,
-            props.maxWidth,
-            props.side,
-            position.value.x
-        );
-    });
-});
-
-/** If the `maxWidth` changes, prevent the panel from exceeding it */
-watch(
-    () => props.maxWidth,
-    (newVal) => {
-        if (newVal && panelWidth.value > newVal) {
-            panelWidth.value = props.maxWidth;
-        }
-    },
-    { immediate: true }
-);
-
-/** If the `minWidth` changes, ensure the panel width is at least the `minWidth` */
-watch(
-    () => props.minWidth,
-    (newVal) => {
-        if (newVal && panelWidth.value < newVal) {
-            panelWidth.value = newVal;
-        }
-    },
-    { immediate: true }
-);
-
-function onKeyLeft() {
-    if (props.side === "left") {
-        decreaseWidth();
-    } else {
-        increaseWidth();
-    }
-}
-
-function onKeyRight() {
-    if (props.side === "left") {
-        increaseWidth();
-    } else {
-        decreaseWidth();
-    }
-}
-
-function increaseWidth(by = 50) {
-    panelWidth.value = Math.min(panelWidth.value + by, props.maxWidth);
-}
-
-function decreaseWidth(by = 50) {
-    panelWidth.value = Math.max(panelWidth.value - by, props.minWidth);
-}
-
 const sideClasses = computed(() => ({
     left: props.side === "left",
     right: props.side === "right",
@@ -148,19 +69,9 @@ const sideClasses = computed(() => ({
         :id="side"
         ref="root"
         class="flex-panel"
-        :class="{ ...sideClasses, 'show-hover': showHover }"
+        :class="{ ...sideClasses }"
         :style="`--width: ${panelWidth}px`">
-        <button
-            ref="draggable"
-            class="drag-handle"
-            @mouseenter="hoverDraggable = true"
-            @focusin="hoverDraggable = true"
-            @mouseout="hoverDraggable = false"
-            @focusout="hoverDraggable = false"
-            @keydown.left="onKeyLeft"
-            @keydown.right="onKeyRight">
-            <span class="sr-only"> Side panel drag handle </span>
-        </button>
+        <DraggableSeparator :position="panelWidth" :side="props.side"></DraggableSeparator>
 
         <button
             v-if="props.collapsible"
@@ -235,14 +146,6 @@ $border-width: 6px;
         &::after {
             right: -1px;
         }
-
-        .drag-handle {
-            right: -$border-width;
-
-            &:hover {
-                right: calc(-1 * $border-width - var(--hover-expand) / 2);
-            }
-        }
     }
 
     &.right {
@@ -251,32 +154,6 @@ $border-width: 6px;
         &::after {
             left: -1px;
         }
-
-        .drag-handle {
-            left: -$border-width;
-
-            &:hover {
-                left: calc(-1 * $border-width - var(--hover-expand) / 2);
-            }
-        }
-    }
-}
-
-.drag-handle {
-    background: none;
-    border: none;
-    border-radius: 0;
-    position: absolute;
-    width: $border-width;
-    padding: 0;
-    height: 100%;
-    z-index: 10000;
-
-    --hover-expand: 4px;
-
-    &:hover {
-        cursor: ew-resize;
-        width: calc($border-width + var(--hover-expand));
     }
 }
 
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index f394b55d9e01..164552cdc141 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -149,9 +149,10 @@
                     @onChange="onChange"
                     @onRemove="onRemove"
                     @onUpdateStepPosition="onUpdateStepPosition">
+                    <NodeInspector v-if="activeStep" :step="activeStep"></NodeInspector>
                 </WorkflowGraph>
             </div>
-            <FlexPanel side="right">
+            <!--FlexPanel side="right">
                 <div class="unified-panel bg-white">
                     <div ref="rightPanelElement" class="unified-panel-body workflow-right p-2">
                         <div v-if="!initialLoading" class="position-relative h-100">
@@ -178,7 +179,7 @@
                         </div>
                     </div>
                 </div>
-            </FlexPanel>
+            </FlexPanel-->
         </template>
     </div>
 </template>
@@ -216,6 +217,7 @@ import reportDefault from "./reportDefault";
 
 import WorkflowLint from "./Lint.vue";
 import MessagesModal from "./MessagesModal.vue";
+import NodeInspector from "./NodeInspector.vue";
 import RefactorConfirmationModal from "./RefactorConfirmationModal.vue";
 import SaveChangesModal from "./SaveChangesModal.vue";
 import StateUpgradeModal from "./StateUpgradeModal.vue";
@@ -224,12 +226,9 @@ import WorkflowGraph from "./WorkflowGraph.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
 import MarkdownToolBox from "@/components/Markdown/MarkdownToolBox.vue";
-import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
-import FormDefault from "@/components/Workflow/Editor/Forms/FormDefault.vue";
-import FormTool from "@/components/Workflow/Editor/Forms/FormTool.vue";
 
 library.add(faArrowLeft, faArrowRight, faHistory);
 
@@ -237,12 +236,9 @@ export default {
     components: {
         ActivityBar,
         MarkdownEditor,
-        FlexPanel,
         SaveChangesModal,
         StateUpgradeModal,
         ToolPanel,
-        FormDefault,
-        FormTool,
         WorkflowAttributes,
         WorkflowLint,
         RefactorConfirmationModal,
@@ -252,6 +248,7 @@ export default {
         UndoRedoStack,
         WorkflowPanel,
         MarkdownToolBox,
+        NodeInspector,
     },
     props: {
         workflowId: {
diff --git a/client/src/components/Workflow/Editor/NodeInspector.vue b/client/src/components/Workflow/Editor/NodeInspector.vue
new file mode 100644
index 000000000000..4b506626242f
--- /dev/null
+++ b/client/src/components/Workflow/Editor/NodeInspector.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { Step } from "@/stores/workflowStepStore";
+
+import Heading from "@/components/Common/Heading.vue";
+
+const props = defineProps<{
+    step: Step;
+}>();
+</script>
+
+<template>
+    <section class="tool-inspector">
+        <Heading h2 size="md">
+            {{ props.step.name }}
+        </Heading>
+    </section>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.tool-inspector {
+    --clearance: 8px;
+    --width: 300px;
+
+    position: absolute;
+    right: 0;
+    top: var(--clearance);
+    bottom: var(--clearance);
+    width: var(--width);
+
+    background-color: $white;
+
+    z-index: 50000;
+    border-color: $border-color;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 0.5rem 0 0 0.5rem;
+    padding: 0.25rem 0.5rem;
+}
+</style>
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 917e3cb55ad4..210ea6d5e838 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -64,6 +64,7 @@
             :viewport-bounding-box="viewportBoundingBox"
             @panBy="panBy"
             @moveTo="moveTo" />
+        <slot></slot>
     </div>
 </template>
 <script setup lang="ts">
diff --git a/client/src/composables/eventEmitter.ts b/client/src/composables/eventEmitter.ts
new file mode 100644
index 000000000000..13f95a4992ba
--- /dev/null
+++ b/client/src/composables/eventEmitter.ts
@@ -0,0 +1,20 @@
+import { type Ref, watch } from "vue";
+
+/**
+ * Emits an event whenever a value changes
+ * @param ref value to watch
+ * @param emit event emitter function
+ * @param name event to emit
+ */
+export function useEmit<Name extends string, T, F extends { (name: Name, arg: T): void }>(
+    ref: Ref<T>,
+    emit: F,
+    name: Name
+) {
+    watch(
+        () => ref.value,
+        () => {
+            emit(name, ref.value);
+        }
+    );
+}