Temp: Stop propagation and remove edge when the step is placeholder

lordrip · Nov 29, 2024 · 315b0b7 · 315b0b7
1 parent 6333972
commit 315b0b7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/ui/src/components/Visualization/Custom/Edge/AddStepIcon.tsx b/packages/ui/src/components/Visualization/Custom/Edge/AddStepIcon.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { FunctionComponent, PropsWithChildren } from 'react';
+import { FunctionComponent, MouseEventHandler, PropsWithChildren, useCallback } from 'react';
 import { AddStepMode, IDataTestID, IVisualizationNode } from '../../../../models';
 import { useAddStep } from '../hooks/add-step.hook';
 import './AddStepIcon.scss';
@@ -18,9 +18,16 @@ export const AddStepIcon: FunctionComponent<AddStepIconProps> = ({
   'data-testid': dataTestId,
 }) => {
   const { onAddStep } = useAddStep(vizNode, mode);
+  const onClick: MouseEventHandler<HTMLDivElement> = useCallback(
+    async (event) => {
+      event.stopPropagation();
+      await onAddStep();
+    },
+    [onAddStep],
+  );
 
   return (
-    <div className={clsx(className, 'add-step-icon')} onClick={onAddStep} data-testid={dataTestId}>
+    <div className={clsx(className, 'add-step-icon')} onClick={onClick} data-testid={dataTestId}>
       <div className="add-step-icon__icon">{children}</div>
     </div>
   );

diff --git a/packages/ui/src/components/Visualization/Custom/Edge/CustomEdge.tsx b/packages/ui/src/components/Visualization/Custom/Edge/CustomEdge.tsx
@@ -31,7 +31,7 @@ export const CustomEdge: FunctionComponent<CustomEdgeProps> = observer(({ elemen
   const x = startPoint.x + (endPoint.x - startPoint.x - CanvasDefaults.ADD_STEP_ICON_SIZE) / 2;
   const y = startPoint.y + (endPoint.y - startPoint.y - CanvasDefaults.ADD_STEP_ICON_SIZE) / 2;
   const vizNode: IVisualizationNode | undefined = element.getTarget().getData().vizNode;
-  const shouldShowPrepend = vizNode?.getNodeInteraction().canHavePreviousStep;
+  const shouldShowPrepend = !vizNode?.data.isPlaceholder && vizNode?.getNodeInteraction().canHavePreviousStep;
 
   const bendpoints = element.getBendpoints();
   const backgroundPath = `M${startPoint.x} ${startPoint.y} ${bendpoints