@revenexx/studio-integrations 0.1.3 → 0.2.0

package/dist/runtime/components/Integrations/WorkflowEdgeView.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { computed } from "vue";
+import { computed, inject, ref } from "vue";
 import {
   BaseEdge,
   EdgeLabelRenderer,
-  getSmoothStepPath
+  getSmoothStepPath,
+  useVueFlow
 } from "@vue-flow/core";
+import { Plus, Trash2 } from "lucide-vue-next";
 const props = defineProps({
   id: { type: String, required: true },
   sourceNode: { type: Object, required: true },
@@ -37,6 +39,8 @@ const props = defineProps({
   targetX: { type: Number, required: true },
   targetY: { type: Number, required: true }
 });
+const flow = useVueFlow();
+const edgeActions = inject("workflow-edge-actions", null);
 const path = computed(() => getSmoothStepPath({
   sourceX: props.sourceX,
   sourceY: props.sourceY,
@@ -44,7 +48,7 @@ const path = computed(() => getSmoothStepPath({
   targetX: props.targetX,
   targetY: props.targetY,
   targetPosition: props.targetPosition,
-  borderRadius: 12
+  borderRadius: 0
 }));
 const palette = {
   default: { stroke: "#94a3b8", label: "#475569", bg: "#f1f5f9" },
@@ -56,16 +60,46 @@ const palette = {
 };
 const color = computed(() => palette[props.data?.kind ?? "default"] ?? palette.default);
 const isSelected = computed(() => props.selected);
+const hovered = ref(false);
+let hoverTimer = null;
+function onHoverEnter() {
+  if (hoverTimer) clearTimeout(hoverTimer);
+  hovered.value = true;
+}
+function onHoverLeave() {
+  if (hoverTimer) clearTimeout(hoverTimer);
+  hoverTimer = setTimeout(() => {
+    hovered.value = false;
+  }, 200);
+}
+const toolsVisible = computed(() => edgeActions !== null && !props.data?.replay && (hovered.value || isSelected.value));
+function removeEdge() {
+  flow.removeEdges([props.id]);
+}
+function spliceNode() {
+  edgeActions?.splice(props.id);
+}
 </script>
 
 <template>
+  <!-- Invisible fat hit-path so the hover zone is comfortably wide. -->
+  <path
+    :d="path[0]"
+    fill="none"
+    stroke="transparent"
+    :stroke-width="16"
+    class="cursor-pointer"
+    @mouseenter="onHoverEnter"
+    @mouseleave="onHoverLeave"
+  />
+
   <BaseEdge
     :id="props.id"
     :path="path[0]"
     :marker-end="props.markerEnd"
     :style="{
-  stroke: color.stroke,
-  strokeWidth: isSelected ? 2.5 : 1.75,
+  stroke: props.data?.replay ? '#3b82f6' : color.stroke,
+  strokeWidth: props.data?.replay ? 2.5 : isSelected || hovered ? 2.5 : 1.75,
   transition: 'stroke-width 120ms ease-out'
 }"
   />
@@ -74,7 +108,7 @@ const isSelected = computed(() => props.selected);
     <div
       class="absolute pointer-events-none select-none rounded-md border px-1.5 py-0.5 text-mono shadow-sm"
       :style="{
-  transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2]}px)`,
+  transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] - (toolsVisible ? 16 : 0)}px)`,
   color: color.label,
   background: color.bg,
   borderColor: color.stroke + '55'
@@ -83,4 +117,32 @@ const isSelected = computed(() => props.selected);
       {{ props.data.label }}
     </div>
   </EdgeLabelRenderer>
+
+  <!-- Midpoint tools: insert a node into this connection / delete it. -->
+  <EdgeLabelRenderer v-if="toolsVisible">
+    <div
+      class="absolute z-20 flex items-center gap-0.5 rounded-md border border-black/[0.08] bg-white p-0.5 shadow-md"
+      :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] + (props.data?.label ? 14 : 0)}px)`, pointerEvents: 'all' }"
+      @mouseenter="onHoverEnter"
+      @mouseleave="onHoverLeave"
+    >
+      <button
+        type="button"
+        class="flex size-5 items-center justify-center rounded text-muted-foreground transition hover:bg-muted/60 hover:text-foreground"
+        title="Insert a node into this connection"
+        @click.stop="spliceNode"
+      >
+        <Plus :size="12" />
+      </button>
+      <div class="h-3.5 w-px bg-black/10" />
+      <button
+        type="button"
+        class="flex size-5 items-center justify-center rounded text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
+        title="Delete this connection"
+        @click.stop="removeEdge"
+      >
+        <Trash2 :size="12" />
+      </button>
+    </div>
+  </EdgeLabelRenderer>
 </template>

package/dist/runtime/components/Integrations/WorkflowEdgeView.vue.d.ts

@@ -2,12 +2,14 @@ import { type EdgeProps } from '@vue-flow/core';
 /**
  * Enterprise-style smoothstep edge:
  *
- *  - rounded right-angle routing (`getSmoothStepPath`)
+ *  - hard right-angle routing (`getSmoothStepPath`, radius 0)
  *  - arrow-head pointing into the target
  *  - color encodes the *source port kind* — branch outputs (`true`/`false`,
  *    switch cases) get a soft color, error outputs get rose, defaults stay
  *    slate
  *  - optional center label (used by the canvas to print branch names)
+ *  - n8n-style midpoint tools on hover/selection: [+] splices a node into
+ *    the connection (editor-provided action), [trash] deletes the edge
  *
  * The canvas creates these via `edgeTypes.flow = WorkflowEdgeView`. Edge
  * data is passed through Vue Flow's `data` prop verbatim.
@@ -17,6 +19,15 @@ interface Data {
     kind: EdgeKind;
     /** Optional human label shown mid-edge (e.g. "true", "cases:paid"). */
     label?: string;
+    /**
+     * Run-replay overlay (WorkflowRunReplayPanel): the edge is on the path the
+     * run actually took — drawn blue and thicker. `ahead` marks the part of the
+     * route the cursor hasn't reached yet (the panel sets `animated` on the edge
+     * so the default theme dashes it).
+     */
+    replay?: {
+        ahead: boolean;
+    };
 }
 type __VLS_Props = EdgeProps<Data>;
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/Integrations/WorkflowEditor.d.vue.ts

@@ -1,14 +1,21 @@
 import '@vue-flow/core/dist/style.css';
 import '@vue-flow/core/dist/theme-default.css';
-import '@vue-flow/controls/dist/style.css';
 import '@vue-flow/minimap/dist/style.css';
 import type { Workflow, WorkflowBlob } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /** Busy flag for the control-pane Play button (a run is being triggered). */
+    runBusy?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (blob: WorkflowBlob) => any;
+    run: () => any;
+    toggleActive: () => any;
+    openSettings: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onChange?: ((blob: WorkflowBlob) => any) | undefined;
+    onRun?: (() => any) | undefined;
+    onToggleActive?: (() => any) | undefined;
+    onOpenSettings?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;