kie-issues#886: On the DMN Editor, adding waypoints to edges that don't have a corresponding DMNEdge associated with it should create the DMNEdge and add the waypoint normally

packages/dmn-editor/src/diagram/Diagram.tsx

@@ -216,7 +216,7 @@
           const sourceBounds = sourceNode.data.shape["dc:Bounds"];
           const targetBounds = targetNode.data.shape["dc:Bounds"];
           if (!sourceBounds || !targetBounds) {
-            throw new Error("Cannot create connection without target bounds!");
+            throw new Error("Cannot create connection without source and target bounds!");
           }
 
           // --------- This is where we draw the line between the diagram and the model.
@@ -897,7 +897,7 @@
           }
         });
       },
       [reactFlowInstance, dmnEditorStoreApi, externalModelsByNamespace]
     );
 
     const resetToBeforeEditingBegan = useCallback(() => {

packages/dmn-editor/src/diagram/connections/isValidConnection.ts

@@ -39,14 +39,19 @@ export function checkIsValidConnection(
 export function _checkIsValidConnection(
   sourceNode: { type?: string; data: DmnDiagramNodeData } | undefined,
   targetNode: { type?: string; data: DmnDiagramNodeData } | undefined,
-  edgeType: string | null | undefined
+  edgeType: string | null | undefined,
+  extraArg?: {
+    allowExternalTarget: boolean;
+  }
 ) {
   if (!sourceNode?.type || !targetNode?.type || !edgeType) {
     return false;
   }
 
-  // External nodes cannot be targeted
-  if (targetNode.data.dmnObjectQName.prefix) {
+  // External nodes cannot be targeted by default
+  // However there are exceptions, for example adding a waypoint on the edge
+  const isTargetExternalNode = targetNode.data.dmnObjectQName.prefix != undefined;
+  if (!extraArg?.allowExternalTarget && isTargetExternalNode) {
     return false;
   }
 

packages/dmn-editor/src/diagram/edges/usePotentialWaypointControls.ts

@@ -25,6 +25,11 @@ import { snapPoint } from "../SnapGrid";
 import { DC__Point } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/ts-gen/types";
 import { DmnDiagramNodeData } from "../nodes/Nodes";
 import { DmnDiagramEdgeData } from "./Edges";
+import { useExternalModels } from "../../includedModels/DmnEditorDependenciesContext";
+import { addEdge } from "../../mutations/addEdge";
+import { EdgeType, NodeType } from "../connections/graphStructure";
+import { PositionalNodeHandleId } from "../connections/PositionalNodeHandles";
+import { getHandlePosition } from "../maths/DmnMaths";
 
 export function usePotentialWaypointControls(
   waypoints: DC__Point[],
@@ -38,6 +43,7 @@ export function usePotentialWaypointControls(
   const isDraggingWaypoint = useDmnEditorStore((s) => !!s.diagram.draggingWaypoints.find((e) => e === edgeId));
   const dmnEditorStoreApi = useDmnEditorStoreApi();
   const reactFlowInstance = RF.useReactFlow<DmnDiagramNodeData, DmnDiagramEdgeData>();
+  const { externalModelsByNamespace } = useExternalModels();
 
   const [potentialWaypoint, setPotentialWaypoint] = useState<ReturnType<typeof approximateClosestPoint> | undefined>(
     undefined
@@ -74,10 +80,81 @@ export function usePotentialWaypointControls(
   }, [snapGrid, potentialWaypoint]);
 
   const onDoubleClick = useCallback(() => {
-    if (!potentialWaypoint || !snappedPotentialWaypoint || edgeIndex === undefined) {
+    if (!potentialWaypoint || !snappedPotentialWaypoint) {
       return;
     }
 
+    if (edgeIndex === undefined) {
+      /**
+       * This means we are adding a first waypoint to one of following edges:
+       * - an edge in a non default DRD
+       * - an edge targeting an external node
+       */
+      dmnEditorStoreApi.setState((state) => {
+        const nodesById = state.computed(state).getDiagramData(externalModelsByNamespace).nodesById;
+        const edge = state.computed(state).getDiagramData(externalModelsByNamespace).edgesById.get(edgeId);
+        if (edge === undefined || edge.data?.dmnShapeSource === undefined || edge.data?.dmnShapeTarget == undefined) {
+          console.debug(
+            `DMN MUTATION: We can not add DMNEdge for '${edgeId}' edge into diagram. There are missing data edge: ${edge}, edge.data: ${edge?.data}`
+          );
+          return;
+        }
+        const edgeSourceBounds = edge.data?.dmnShapeSource["dc:Bounds"];
+        const edgeTargetBounds = edge.data?.dmnShapeTarget["dc:Bounds"];
+
+        if (edgeSourceBounds === undefined || edgeTargetBounds === undefined) {
+          console.debug(
+            `DMN MUTATION: We can not add DMNEdge for '${edgeId}' edge into diagram. There are missing data edgeSourceBounds: ${edgeSourceBounds}, edgeTargetBounds: ${edgeTargetBounds}`
+          );
+          return;
+        }
+
+        const sourceNode = nodesById.get(edge.source);
+        const targetNode = nodesById.get(edge.target);
+
+        if (sourceNode === undefined || targetNode === undefined) {
+          console.debug(
+            `DMN MUTATION: We can not add DMNEdge for '${edgeId}' edge into diagram. There are missing data sourceNode: ${sourceNode}, targetNode: ${targetNode}`
+          );
+          return;
+        }
+
+        const isTargetExternalNode = targetNode.data.dmnObjectQName.prefix !== undefined;
+
+        addEdge({
+          definitions: state.dmn.model.definitions,
+          drdIndex: state.computed(state).getDrdIndex(),
+          edge: {
+            type: edge.type as EdgeType,
+            targetHandle: getHandlePosition({ shapeBounds: edgeTargetBounds, waypoint: snappedPotentialWaypoint })
+              .handlePosition as PositionalNodeHandleId,
+            sourceHandle: getHandlePosition({ shapeBounds: edgeSourceBounds, waypoint: snappedPotentialWaypoint })
+              .handlePosition as PositionalNodeHandleId,
+            autoPositionedEdgeMarker: undefined,
+          },
+          sourceNode: {
+            type: sourceNode.type as NodeType,
+            data: sourceNode.data,
+            href: edge.source,
+            bounds: edgeSourceBounds,
+            shapeId: edge.data?.dmnShapeSource["@_id"],
+          },
+          targetNode: {
+            type: targetNode.type as NodeType,
+            href: edge.target,
+            data: targetNode.data,
+            bounds: edgeTargetBounds,
+            index: nodesById.get(edge.target)?.data.index ?? 0,
+            shapeId: edge.data?.dmnShapeTarget["@_id"],
+          },
+          keepWaypoints: false,
+          requirementEdgeTargetingExternalNodeId: isTargetExternalNode ? edgeId : undefined,
+        });
+
+        console.debug(`DMN MUTATION: DMNEdge for '${edgeId}' edge was added into diagram.`);
+      });
+    }
+
     if (isExistingWaypoint(snappedPotentialWaypoint)) {
       console.debug("Preventing overlapping waypoint creation.");
       return;
@@ -96,18 +173,27 @@ export function usePotentialWaypointControls(
     }
 
     dmnEditorStoreApi.setState((state) => {
+      const dmnEdgeIndex = state.computed(state).indexedDrd().dmnEdgesByDmnElementRef.get(edgeId)?.index;
+      if (dmnEdgeIndex === undefined) {
+        console.debug(`DMN MUTATION: DMNEdge for '${edgeId}' edge has missing index.`);
+        return;
+      }
       addEdgeWaypoint({
         definitions: state.dmn.model.definitions,
         drdIndex,
         beforeIndex: i - 1,
-        edgeIndex,
+        edgeIndex: dmnEdgeIndex,
         waypoint: snappedPotentialWaypoint,
       });
+
+      console.debug(`DMN MUTATION: Waypoint on the DMNEdge for '${edgeId}' edge was added.`);
     });
   }, [
     drdIndex,
     dmnEditorStoreApi,
+    edgeId,
     edgeIndex,
+    externalModelsByNamespace,
     isExistingWaypoint,
     potentialWaypoint,
     snappedPotentialWaypoint,

packages/dmn-editor/src/mutations/addEdge.ts

@@ -27,7 +27,6 @@ import {
   DMN15__tInformationRequirement,
   DMN15__tKnowledgeRequirement,
   DMNDI15__DMNEdge,
-  DMNDI15__DMNShape,
 } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/ts-gen/types";
 import { PositionalNodeHandleId } from "../diagram/connections/PositionalNodeHandles";
 import { EdgeType, NodeType } from "../diagram/connections/graphStructure";
@@ -49,6 +48,7 @@ export function addEdge({
   targetNode,
   edge,
   keepWaypoints,
+  requirementEdgeTargetingExternalNodeId,
 }: {
   definitions: Normalized<DMN15__tDefinitions>;
   drdIndex: number;
@@ -74,14 +74,16 @@ export function addEdge({
     autoPositionedEdgeMarker: AutoPositionedEdgeMarker | undefined;
   };
   keepWaypoints: boolean;
+  requirementEdgeTargetingExternalNodeId?: string;
 }) {
-  if (!_checkIsValidConnection(sourceNode, targetNode, edge.type)) {
+  const externalTargetAllowed = requirementEdgeTargetingExternalNodeId !== undefined;
+  if (!_checkIsValidConnection(sourceNode, targetNode, edge.type, { allowExternalTarget: externalTargetAllowed })) {
     throw new Error(`DMN MUTATION: Invalid structure: (${sourceNode.type}) --${edge.type}--> (${targetNode.type}) `);
   }
 
   const newEdgeId = generateUuid();
 
-  let existingEdgeId: string | undefined = undefined;
+  let existingEdgeId: string | undefined = requirementEdgeTargetingExternalNodeId;
 
   // Associations
   if (edge.type === EDGE_TYPES.association) {
@@ -109,7 +111,7 @@ export function addEdge({
     });
   }
   // Requirements
-  else {
+  else if (!externalTargetAllowed) {
     const requirements = getRequirementsFromEdge(sourceNode, newEdgeId, edge.type);
     const drgElement = definitions.drgElement![targetNode.index] as Normalized<DMN15__tDecision>; // We cast to tDecision here because it has all three types of requirement.
     if (requirements?.informationRequirement) {

packages/dmn-editor/src/mutations/addEdgeWaypoint.ts

@@ -38,7 +38,7 @@ export function addEdgeWaypoint({
 
   const diagramElement = diagramElements[edgeIndex];
   if (diagramElement.__$$element !== "dmndi:DMNEdge") {
-    throw new Error("DMN MUTATION: Can't remove a waypoint from an element that is not a DMNEdge.");
+    throw new Error("DMN MUTATION: Can't add a waypoint for an element that is not a DMNEdge.");
   }
 
   if (beforeIndex > (diagramElement["di:waypoint"]?.length ?? 0) - 1) {

packages/dmn-editor/src/mutations/addShape.ts

@@ -20,7 +20,6 @@
 import {
   DC__Point,
   DMN15__tDefinitions,
-  DMNDI15__DMNDecisionServiceDividerLine,
   DMNDI15__DMNShape,
 } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/ts-gen/types";
 import { NodeType } from "../diagram/connections/graphStructure";

packages/dmn-editor/src/mutations/addStandaloneNode.ts

@@ -18,7 +18,7 @@
  */
 
 import { switchExpression } from "@kie-tools-core/switch-expression-ts";
-import { DmnBuiltInDataType, generateUuid } from "@kie-tools/boxed-expression-component/dist/api";
+import { generateUuid } from "@kie-tools/boxed-expression-component/dist/api";
 import { DC__Bounds, DMN15__tDefinitions } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/ts-gen/types";
 import { NodeType } from "../diagram/connections/graphStructure";
 import { NODE_TYPES } from "../diagram/nodes/NodeTypes";

packages/dmn-editor/src/mutations/deleteEdge.ts

@@ -44,41 +44,40 @@ export function deleteEdge({
   edge: { id: string; dmnObject: DmnDiagramEdgeData["dmnObject"] };
   mode: EdgeDeletionMode;
 }) {
-  if (edge.dmnObject.namespace !== definitions["@_namespace"]) {
-    console.debug("DMN MUTATION: Can't delete an edge that's from an external node.");
-    return { dmnEdge: undefined };
-  }
-
-  const dmnObjects: Normalized<DMN15__tDefinitions>["drgElement" | "artifact"] =
-    switchExpression(edge?.dmnObject.type, {
-      association: definitions.artifact,
-      group: definitions.artifact,
-      default: definitions.drgElement,
-    }) ?? [];
+  if (edge.dmnObject.namespace === definitions["@_namespace"]) {
+    const dmnObjects: Normalized<DMN15__tDefinitions>["drgElement" | "artifact"] =
+      switchExpression(edge?.dmnObject.type, {
+        association: definitions.artifact,
+        group: definitions.artifact,
+        default: definitions.drgElement,
+      }) ?? [];
 
-  const dmnObjectIndex = dmnObjects.findIndex((d) => d["@_id"] === edge.dmnObject.id);
-  if (dmnObjectIndex < 0) {
-    throw new Error(`DMN MUTATION: Can't find DMN element with ID ${edge.dmnObject.id}`);
-  }
+    const dmnObjectIndex = dmnObjects.findIndex((d) => d["@_id"] === edge.dmnObject.id);
+    if (dmnObjectIndex < 0) {
+      throw new Error(`DMN MUTATION: Can't find DMN element with ID ${edge.dmnObject.id}`);
+    }
 
-  if (mode === EdgeDeletionMode.FROM_DRG_AND_ALL_DRDS) {
-    const requirements =
-      switchExpression(edge?.dmnObject.requirementType, {
-        // Casting to DMN15__tDecision because if has all types of requirement, but not necessarily that's true.
-        informationRequirement: (dmnObjects[dmnObjectIndex] as Normalized<DMN15__tDecision>).informationRequirement,
-        knowledgeRequirement: (dmnObjects[dmnObjectIndex] as Normalized<DMN15__tDecision>).knowledgeRequirement,
-        authorityRequirement: (dmnObjects[dmnObjectIndex] as Normalized<DMN15__tDecision>).authorityRequirement,
-        association: dmnObjects,
-      }) ?? [];
+    if (mode === EdgeDeletionMode.FROM_DRG_AND_ALL_DRDS) {
+      const requirements =
+        switchExpression(edge?.dmnObject.requirementType, {
+          // Casting to DMN15__tDecision because if has all types of requirement, but not necessarily that's true.
+          informationRequirement: (dmnObjects[dmnObjectIndex] as Normalized<DMN15__tDecision>).informationRequirement,
+          knowledgeRequirement: (dmnObjects[dmnObjectIndex] as Normalized<DMN15__tDecision>).knowledgeRequirement,
+          authorityRequirement: (dmnObjects[dmnObjectIndex] as Normalized<DMN15__tDecision>).authorityRequirement,
+          association: dmnObjects,
+        }) ?? [];
 
-    // Deleting the requirement
-    const requirementIndex = (requirements ?? []).findIndex((d) => d["@_id"] === edge.id);
-    if (requirementIndex >= 0) {
-      requirements?.splice(requirementIndex, 1);
+      // Deleting the requirement
+      const requirementIndex = (requirements ?? []).findIndex((d) => d["@_id"] === edge.id);
+      if (requirementIndex >= 0) {
+        requirements?.splice(requirementIndex, 1);
+      }
     }
   }
 
   // Deleting the DMNEdge's
+  // needs to be executed even if edge.dmnObject.namespace !== definitions["@_namespace"]
+  // As they may be DMNEdge depictions for edges targeting external nodes
   let deletedDmnEdgeOnCurrentDrd: Normalized<DMNDI15__DMNEdge> | undefined;
 
   const drdCount = (definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"] ?? []).length;

packages/dmn-editor/src/store/computed/computeDiagramData.ts

@@ -140,7 +140,13 @@ export function computeDiagramData(
   };
 
   // requirements
-  ackRequirementEdges(definitions["@_namespace"], definitions["@_namespace"], definitions.drgElement, ackEdge);
+  ackRequirementEdges(
+    definitions,
+    definitions["@_namespace"],
+    definitions["@_namespace"],
+    definitions.drgElement,
+    ackEdge
+  );
 
   // associations
   (definitions.artifact ?? []).forEach((dmnObject, index) => {
@@ -270,6 +276,7 @@ export function computeDiagramData(
     (acc, [namespace, externalDmn]) => {
       // Taking advantage of the loop to add the edges here...
       ackRequirementEdges(
+        definitions,
         definitions["@_namespace"],
         externalDmn.model.definitions["@_namespace"],
         externalDmn.model.definitions.drgElement,
@@ -390,6 +397,7 @@ export function computeDiagramData(
 }
 
 function ackRequirementEdges(
+  definitions: State["dmn"]["model"]["definitions"],
   thisDmnsNamespace: string,
   drgElementsNamespace: string,
   drgElements: Normalized<DMN15__tDefinitions>["drgElement"],
@@ -402,8 +410,13 @@ function ackRequirementEdges(
     if (dmnObject.__$$element === "decision") {
       (dmnObject.informationRequirement ?? []).forEach((ir, index) => {
         const irHref = parseXmlHref((ir.requiredDecision ?? ir.requiredInput)!["@_href"]);
+        // Search for definitions[`@_xmlns:included${includedIndex}`] that holds proper namespace
+        // and store the proper prefix: `included${includedIndex}` value
+        const namespaceIncludedPrefix = Object.entries(definitions)
+          .find(([key, val]) => val === namespace)?.[0]
+          ?.replace("@_xmlns:", "");
         ackEdge({
-          id: ir["@_id"]!,
+          id: (namespaceIncludedPrefix ? `${namespaceIncludedPrefix}:` : "") + ir["@_id"]!,
           dmnObject: {
             namespace: drgElementsNamespace,
             type: dmnObject.__$$element,

packages/dmn-editor/tests-e2e/__fixtures__/drgNodes.ts

@@ -26,7 +26,7 @@ export class DrgNodes {
     public page: Page
   ) {}
 
-  public async open() {
+  public async toggle() {
     await this.page.getByTitle("DRG Nodes").click();
   }