feat: show ghost node during node drag

Author: shivamG640

packages/demo-app-ts/src/demos/stylesDemo/Styles.tsx

@@ -132,6 +132,32 @@ export const NodeDecoratorStyles = withTopologySetup(() => {
   return null;
 });
 
+export const NodeShowDragGhostStyles = withTopologySetup(() => {
+  useComponentFactory(defaultComponentFactory);
+  useComponentFactory(stylesComponentFactory);
+  const nodes: NodeModel[] = createGroupNodes();
+  const nodes2: NodeModel[] = createGroupNodes('2', 600);
+
+  nodes.forEach((n) => (n.data.showDecorators = true));
+  nodes.forEach((n) => (n.data.labelPosition = LabelPosition.bottom));
+  nodes.forEach((n) => (n.data.showDragGhost = true));
+  nodes2.forEach((n) => (n.data.showDecorators = true));
+  nodes2.forEach((n) => (n.data.showDragGhost = true));
+  useModel(
+    useMemo(
+      (): Model => ({
+        graph: {
+          id: 'g1',
+          type: 'graph'
+        },
+        nodes: [...nodes, ...nodes2]
+      }),
+      [nodes, nodes2]
+    )
+  );
+  return null;
+});
+
 export const NodeLabelStyles = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);
@@ -928,6 +954,9 @@ export const StyleNodes: React.FunctionComponent = () => {
         <Tab eventKey={4} title={<TabTitleText>Decorators</TabTitleText>}>
           <NodeDecoratorStyles />
         </Tab>
+        <Tab eventKey={5} title={<TabTitleText>Show Drag Ghost While Dragging</TabTitleText>}>
+          <NodeShowDragGhostStyles />
+        </Tab>
       </Tabs>
     </div>
   );

packages/demo-app-ts/src/demos/topologyPackageDemo/DemoContext.tsx

@@ -15,7 +15,8 @@ export class DemoModel {
     badges: false,
     icons: false,
     contextMenus: false,
-    hulledOutline: true
+    hulledOutline: true,
+    showDragGhost: false
   };
   protected edgeOptionsP: GeneratorEdgeOptions = {
     showStyles: false,

packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx

@@ -194,6 +194,7 @@ const DemoNode: React.FunctionComponent<DemoNodeProps> = observer(
               options.showDecorators &&
               renderDecorators(options, nodeElement, rest.getShapeDecoratorCenter)
             }
+            showDragGhost={options.showDragGhost}
           >
             {(focused || detailsLevel !== ScaleDetailsLevel.low) && renderIcon(data, nodeElement)}
           </DefaultNode>

packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx

@@ -146,6 +146,16 @@ const OptionsContextBar: React.FC = observer(() => {
           >
             Rectangle Groups
           </SelectOption>
+          <SelectOption
+            hasCheckbox
+            value="Show Drag Ghost"
+            isSelected={options.nodeOptions.showDragGhost}
+            onClick={() =>
+              options.setNodeOptions({ ...options.nodeOptions, showDragGhost: !options.nodeOptions.showDragGhost })
+            }
+          >
+            Show Drag Ghost
+          </SelectOption>
         </SelectList>
       </Select>
     );

packages/demo-app-ts/src/demos/topologyPackageDemo/generator.ts

@@ -91,6 +91,7 @@ export interface GeneratorNodeOptions {
   contextMenus?: boolean;
   hideKebabMenu?: boolean;
   hulledOutline?: boolean;
+  showDragGhost?: boolean;
 }
 
 export interface GeneratorEdgeOptions {

packages/module/src/components/nodes/DefaultNode.tsx

@@ -6,7 +6,16 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import styles from '../../css/topology-components';
-import { BadgeLocation, GraphElement, isNode, LabelPosition, Node, NodeStatus, TopologyQuadrant } from '../../types';
+import {
+  BadgeLocation,
+  GraphElement,
+  isNode,
+  LabelPosition,
+  Node,
+  NodeStatus,
+  ScaleDetailsLevel,
+  TopologyQuadrant
+} from '../../types';
 import { ConnectDragSource, ConnectDropTarget, OnSelect, WithDndDragProps } from '../../behavior';
 import Decorator from '../decorators/Decorator';
 import { Layer } from '../layers';
@@ -122,10 +131,19 @@ interface DefaultNodeProps {
   raiseLabelOnHover?: boolean; // TODO: Update default to be false, assume demo code will be followed
   /** Hide context menu kebab for the node  */
   hideContextMenuKebab?: boolean;
+  /**
+   * When true, a non-interactive copy of the node is drawn at the pre-drag position while dragging.
+   * When false or omitted, only the live node is shown (previous behavior). Can also be set via
+   * node model data: `data: { showDragGhost: true }`.
+   */
+  showDragGhost?: boolean;
 }
 
 const SCALE_UP_TIME = 200;
 
+/** Scale factor for the drag ghost when the graph is not at low details level (visual “preview” size). */
+const DRAG_GHOST_SCALE = 0.7;
+
 type DefaultNodeInnerProps = Omit<DefaultNodeProps, 'element'> & { element: Node };
 
 const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observer(
@@ -172,8 +190,11 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
     onContextMenu,
     contextMenuOpen,
     raiseLabelOnHover = true,
-    hideContextMenuKebab
+    hideContextMenuKebab,
+    showDragGhost
   }) => {
+    const showDragGhostResolved =
+      showDragGhost ?? (element.getData() as { showDragGhost?: boolean } | undefined)?.showDragGhost ?? false;
     const [nodeHovered, hoverRef] = useHover();
     const [labelHovered, labelRef] = useHover();
     const hovered = nodeHovered || labelHovered;
@@ -183,6 +204,8 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
     const isHover = hover !== undefined ? hover : hovered;
     const [nodeScale, setNodeScale] = useState<number>(1);
     const decoratorRef = useRef(null);
+    const boxXRef = useRef<number | null>(null);
+    const boxYRef = useRef<number | null>(null);
 
     const statusDecorator = useMemo(() => {
       if (!status || !showStatusDecorator) {
@@ -258,6 +281,8 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
 
     const nodeLabelPosition = labelPosition || element.getLabelPosition();
     const scale = element.getGraph().getScale();
+    const detailsLevel = element.getGraph().getDetailsLevel();
+    const isLowDetailsLevel = detailsLevel === ScaleDetailsLevel.low;
 
     const animationRef = useRef<number>(null);
     const scaleGoal = useRef<number>(1);
@@ -325,6 +350,12 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
       return { translateX, translateY };
     }, [element, nodeScale, scaleNode]);
 
+    const box = element.getBounds();
+    if (!showDragGhostResolved || !dragging || !boxXRef.current || !boxYRef.current) {
+      boxXRef.current = box.x;
+      boxYRef.current = box.y;
+    }
+
     const renderLabel = () => {
       if (!showLabel || !(label || element.getLabel())) {
         return null;
@@ -397,7 +428,7 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
       return nodeLabel;
     };
 
-    return (
+    const mainNode = (
       <g
         className={groupClassName}
         transform={`${scaleNode ? `translate(${translateX}, ${translateY})` : ''} scale(${nodeScale})`}
@@ -421,6 +452,41 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
         {attachments}
       </g>
     );
+
+    if (!showDragGhostResolved) {
+      return mainNode;
+    }
+
+    return (
+      <>
+        {dragging && (
+          <g
+            className={groupClassName}
+            transform={`translate(${boxXRef.current - box.x}, ${boxYRef.current - box.y}) ${
+              isLowDetailsLevel ? '' : `scale(${DRAG_GHOST_SCALE})`
+            }`}
+          >
+            <NodeShadows />
+            <g>
+              {ShapeComponent && (
+                <ShapeComponent
+                  className={backgroundClassName}
+                  element={element}
+                  width={width}
+                  height={height}
+                  filter={filter}
+                />
+              )}
+              {!isLowDetailsLevel && renderLabel()}
+              {!isLowDetailsLevel && children}
+            </g>
+            {statusDecorator}
+            {attachments}
+          </g>
+        )}
+        {mainNode}
+      </>
+    );
   }
 );