TEMP: 3rd iteration

KaotoIO · Jan 17, 2025 · 8c32011 · 8c32011
1 parent a1085ba
commit 8c32011
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/packages/ui/src/components/Visualization/Custom/Group/CustomGroup.tsx b/packages/ui/src/components/Visualization/Custom/Group/CustomGroup.tsx
@@ -49,7 +49,7 @@ const CustomGroupInner: FunctionComponent<ICustomGroup> = observer(({ element, o
   );
 });
 
-const CustomGroup: React.FunctionComponent<ICustomGroup> = ({ element, ...rest }: ICustomGroup) => {
+const CustomGroup: FunctionComponent<ICustomGroup> = ({ element, ...rest }: ICustomGroup) => {
   if (!isNode(element)) {
     throw new Error('CustomGroup must be used only on Node elements');
   }

diff --git a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx
@@ -16,6 +16,7 @@ import {
 import { FunctionComponent, useContext, useRef } from 'react';
 import { AddStepMode, IVisualizationNode, NodeToolbarTrigger } from '../../../../models';
 import { SettingsContext } from '../../../../providers';
+import { LayoutType } from '../../Canvas';
 import { StepToolbar } from '../../Canvas/StepToolbar/StepToolbar';
 import { CanvasDefaults } from '../../Canvas/canvas.defaults';
 import { AddStepIcon } from '../Edge/AddStepIcon';
@@ -47,7 +48,7 @@ export const CustomGroupExpandedInner: FunctionComponent<CustomGroupProps> = obs
         : selected;
     const shouldShowAddStep =
       shouldShowToolbar && vizNode?.getNodeInteraction().canHaveNextStep && vizNode.getNextNode() === undefined;
-    const isHorizontal = true; //element.getGraph().getLayout() === LayoutType.DagreHorizontal;
+    const isHorizontal = element.getGraph().getLayout() === LayoutType.DagreHorizontal;
 
     useAnchor((element: Node) => {
       return new TargetAnchor(element);

diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx
@@ -22,7 +22,6 @@ import {
   useCombineRefs,
   useDragNode,
   useHover,
-  useVisualizationController,
   withContextMenu,
   withDndDrop,
   withSelection,
@@ -33,7 +32,7 @@ import { useEntityContext } from '../../../../hooks/useEntityContext/useEntityCo
 import { AddStepMode, IVisualizationNode, NodeToolbarTrigger } from '../../../../models';
 import { SettingsContext } from '../../../../providers';
 import { CanvasDefaults } from '../../Canvas/canvas.defaults';
-import { CanvasNode } from '../../Canvas/canvas.models';
+import { CanvasNode, LayoutType } from '../../Canvas/canvas.models';
 import { StepToolbar } from '../../Canvas/StepToolbar/StepToolbar';
 import { NodeContextMenuFn } from '../ContextMenu/NodeContextMenu';
 import { customNodeDropTargetSpec } from '../customComponentUtils';
@@ -57,7 +56,6 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
 
     const vizNode: IVisualizationNode | undefined = element.getData()?.vizNode;
     const entitiesContext = useEntityContext();
-    const controller = useVisualizationController();
     const settingsAdapter = useContext(SettingsContext);
     const label = vizNode?.getNodeLabel(settingsAdapter.getSettings().nodeLabel);
     const isDisabled = !!vizNode?.getComponentSchema()?.definition?.disabled;
@@ -77,7 +75,7 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
         : selected;
     const shouldShowAddStep =
       shouldShowToolbar && vizNode?.getNodeInteraction().canHaveNextStep && vizNode.getNextNode() === undefined;
-    const isHorizontal = true; //element.getGraph().getLayout() === LayoutType.DagreHorizontal;
+    const isHorizontal = element.getGraph().getLayout() === LayoutType.DagreHorizontal;
 
     useAnchor((element: Node) => {
       return new TargetAnchor(element);
@@ -92,9 +90,13 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
     > = {
       item: { type: '#node#' },
       begin: () => {
-        const graph = controller.getGraph();
         // Hide all edges when dragging starts
-        graph.getEdges().forEach((edge) => edge.setVisible(false));
+        element
+          .getGraph()
+          .getEdges()
+          .forEach((edge) => {
+            edge.setVisible(false);
+          });
       },
       canDrag: () => {
         if (settingsAdapter.getSettings().experimentalFeatures.enableDragAndDrop) {
@@ -107,14 +109,21 @@ const CustomNodeInner: FunctionComponent<CustomNodeProps> = observer(
         if (monitor.didDrop() && dropResult) {
           const draggedNodePath = element.getData().vizNode.data.path;
           dropResult.getData()?.vizNode?.moveNodeTo(draggedNodePath);
+          // Set an empty model to clear the graph
+          element.getController().fromModel({
+            nodes: [],
+            edges: [],
+          });
           entitiesContext.updateEntitiesFromCamelResource();
         } else {
           // Show all edges after dropping
-          controller
+          element
             .getGraph()
             .getEdges()
-            .forEach((edge) => edge.setVisible(true));
-          controller.getGraph().layout();
+            .forEach((edge) => {
+              edge.setVisible(true);
+            });
+          element.getGraph().layout();
         }
       },
     };