Track HiveGrid Cloud planning reference

2026-06-26 20:48:01 +02:00
1 parent b3d5ea6764
commit e341c5938a
@@ -0,0 +1,120 @@
+import { Fragment, useContext } from "react";
+import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getStraightPath } from "@xyflow/react";
+import WorkflowContext from "../../context/WorkflowContext";
+import clsx from "clsx";
+import { t as i18nT } from "i18next";
+
+function getConditionLabel(condition: string) {
+  if (condition === "true" || condition === "false") {
+    return i18nT(`workflows.boolean.${condition}`);
+  }
+  if (condition === "default") {
+    return i18nT("workflows.blocks.editor.defaultCase");
+  }
+  if (condition === "loopNext") {
+    return i18nT("workflows.blocks.editor.loopNext");
+  }
+  if (condition === "loopEnd") {
+    return i18nT("workflows.blocks.editor.loopEnd");
+  }
+  return condition;
+}
+
+export default function CustomEdge({ id, data, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, markerEnd }: EdgeProps) {
+  const { isReadOnly, onEdgeDelete } = useContext(WorkflowContext);
+  const [edgePath, labelX, labelY] = getStraightPath({
+    sourceX,
+    sourceY,
+    // sourcePosition,
+    targetX,
+    targetY,
+    // targetPosition,
+  });
+  const condition = data?.condition as string | null | undefined;
+  const isExecuted = data?.isExecuted as boolean | undefined;
+  const conditionLabel = condition ? getConditionLabel(condition) : null;
+
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{
+          ...style,
+          strokeWidth: 1.5,
+          opacity: isExecuted ? 1 : 0.5,
+          transition: "stroke 0.3s, opacity 0.3s",
+        }}
+      />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: "absolute",
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            fontSize: 12,
+            // everything inside EdgeLabelRenderer has no pointer events by default
+            // if you have an interactive element, set pointer-events: all
+            pointerEvents: "all",
+          }}
+          className="nodrag nopan"
+        >
+          {condition ? (
+            <button
+              className={clsx(
+                "rounded-md border px-1 py-0.5",
+                !isReadOnly && "group",
+                condition === "true"
+                  ? "border-green-300 bg-green-50 text-green-800"
+                  : condition === "false"
+                  ? "border-red-300 bg-red-50 text-red-800"
+                  : "border-border text-foreground bg-secondary"
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                onEdgeDelete(id);
+              }}
+              disabled={isReadOnly}
+              aria-label={i18nT("workflows.blocks.editor.deleteConditionConnection", { condition: conditionLabel })}
+            >
+              <span className=" group-hover:hidden">{conditionLabel}</span>
+              <span className="hidden group-hover:block">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="h-4 w-4">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                  />
+                </svg>
+              </span>
+            </button>
+          ) : (
+            <Fragment>
+              {!isReadOnly && (
+                <button
+                  type="button"
+                  aria-label={i18nT("workflows.blocks.editor.deleteConnection")}
+                  className="bg-background rounded-full"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdgeDelete(id);
+                  }}
+                >
+                  <svg
+                    className="text-muted-foreground h-4 w-4"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth="1.5"
+                    stroke="currentColor"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </button>
+              )}
+            </Fragment>
+          )}
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+}