improvement(Topology): Allows a promise to be returned by the create …

…connector callback (patternfly#4390) For instances where some computation may be necessary, allow a promise to be returned to the create connector callback.
jonkoops · Jun 17, 2020 · a1c76c4 · a1c76c4
1 parent 40ff63c
commit a1c76c4
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 10 deletions.
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Connectors.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Connectors.tsx
@@ -210,7 +210,13 @@ export const CreateConnector = withTopologySetup(() => {
         }
         if (kind === ModelKind.node) {
           return withCreateConnector(
-            (source: Node, target: Node | Graph, event: DragEvent, choice: ColorChoice | undefined): any[] | null => {
+            (
+              source: Node,
+              target: Node | Graph,
+              event: DragEvent,
+              dropHints: string[],
+              choice: ColorChoice | undefined
+            ): ColorChoice[] | void => {
               if (!choice) {
                 return [{ label: 'Create Annotation', color: 'red' }, { label: 'Create Binding', color: 'green' }];
               }
@@ -246,7 +252,6 @@ export const CreateConnector = withTopologySetup(() => {
                 }
               });
               controller.fromModel(model);
-              return null;
             }
           )(
             withDndDrop<Node, any, { droppable?: boolean; hover?: boolean; canDrop?: boolean }, NodeProps>({

diff --git a/packages/react-styles/src/css/components/Topology/topology-components.css b/packages/react-styles/src/css/components/Topology/topology-components.css
@@ -14,6 +14,11 @@
   stroke-dasharray: 5px, 5px;
 }
 
+.pf-topology-default-create-connector__arrow {
+  fill: var(--pf-topology-create-connector-color);
+  stroke: var(--pf-topology-create-connector-color);
+}
+
 .pf-topology-default-create-connector__create__bg {
   stroke: var(--pf-topology-create-connector-color);
   fill: var(--pf-topology-create-connector-bg-color);

diff --git a/packages/react-topology/src/behavior/withCreateConnector.tsx b/packages/react-topology/src/behavior/withCreateConnector.tsx
@@ -6,7 +6,14 @@ import Point from '../geom/Point';
 import Layer from '../components/layers/Layer';
 import { ContextMenu, ContextMenuItem } from '../components/contextmenu';
 import { Node, isNode, AnchorEnd, GraphElement, isGraph, Graph } from '../types';
-import { DragSourceSpec, DragSourceMonitor, DragEvent } from './dnd-types';
+import {
+  DragSourceSpec,
+  DragSourceMonitor,
+  DragEvent,
+  DragObjectWithType,
+  DragSpecOperationType,
+  DragOperationWithType
+} from './dnd-types';
 import { useDndDrag } from './useDndDrag';
 
 export const CREATE_CONNECTOR_OPERATION = '#createconnector#';
@@ -30,15 +37,18 @@ interface ConnectorComponentProps {
 
 type CreateConnectorRenderer = React.ComponentType<ConnectorComponentProps>;
 
+type OnCreateResult = ConnectorChoice[] | void | undefined | null;
+
 type CreateConnectorWidgetProps = {
   element: Node;
   onKeepAlive: (isAlive: boolean) => void;
   onCreate: (
     element: Node,
     target: Node | Graph,
     event: DragEvent,
+    dropHints?: string[] | undefined,
     choice?: ConnectorChoice
-  ) => ConnectorChoice[] | void | undefined | null | React.ReactElement[];
+  ) => Promise<OnCreateResult> | OnCreateResult;
   ConnectorComponent: CreateConnectorRenderer;
   contextMenuClass?: string;
 } & CreateConnectorOptions;
@@ -74,20 +84,26 @@ const CreateConnectorWidget: React.FC<CreateConnectorWidgetProps> = observer(pro
   const hintsRef = React.useRef<string[] | undefined>();
 
   const spec = React.useMemo(() => {
-    const dragSourceSpec: DragSourceSpec<any, any, any, CollectProps> = {
+    const dragSourceSpec: DragSourceSpec<
+      DragObjectWithType,
+      DragSpecOperationType<DragOperationWithType>,
+      GraphElement,
+      CollectProps,
+      CreateConnectorWidgetProps
+    > = {
       item: { type: CREATE_CONNECTOR_DROP_TYPE },
       operation: { type: CREATE_CONNECTOR_OPERATION },
       begin: (monitor: DragSourceMonitor, dragProps: any) => {
         setActive(true);
         return dragProps.element;
       },
-      drag: (event: DragEvent, monitor: DragSourceMonitor, p: any) => {
+      drag: (event: DragEvent, monitor: DragSourceMonitor, p: CreateConnectorWidgetProps) => {
         p.element.raise();
       },
-      end: (dropResult: GraphElement, monitor: DragSourceMonitor, dragProps: any) => {
+      end: async (dropResult: GraphElement, monitor: DragSourceMonitor, dragProps: CreateConnectorWidgetProps) => {
         const event = monitor.getDragEvent();
         if ((isNode(dropResult) || isGraph(dropResult)) && event) {
-          const choices = dragProps.onCreate(dragProps.element, dropResult, event);
+          const choices = await dragProps.onCreate(dragProps.element, dropResult, event, monitor.getDropHints());
           if (choices && choices.length) {
             setPrompt({ element: dragProps.element, target: dropResult, event, choices });
             return;
@@ -175,7 +191,7 @@ const CreateConnectorWidget: React.FC<CreateConnectorWidgetProps> = observer(pro
             <ContextMenuItem
               key={c.label}
               onClick={() => {
-                onCreate(prompt.element, prompt.target, prompt.event, c);
+                onCreate(prompt.element, prompt.target, prompt.event, hintsRef.current, c);
               }}
             >
               {c.label}

diff --git a/packages/react-topology/src/components/DefaultCreateConnector.tsx b/packages/react-topology/src/components/DefaultCreateConnector.tsx
@@ -59,7 +59,11 @@ const DefaultCreateConnector: React.FC<DefaultCreateConnectorProps> = ({
           )}
         </g>
       ) : (
-        <ConnectorArrow startPoint={startPoint} endPoint={endPoint} />
+        <ConnectorArrow
+          className="pf-topology-default-create-connector__arrow"
+          startPoint={startPoint}
+          endPoint={endPoint}
+        />
       )}
     </g>
   );