feat(pintora-diagrams): [componentDiagram] we can have relationship f…

…rom element to group

packages/pintora-diagrams/src/component/__tests__/component-parser.spec.js

@@ -188,12 +188,60 @@ componentDiagram
     componentDiagram
       component "A" {
         component "A.1" {
+          [Diagrams]
         }
       }
     `)
     parse(componentExample)
-    // const ir = db.getDiagramIR()
-    // console.log('ir', ir)
+    const ir = db.getDiagramIR()
+    // console.log(JSON.stringify(ir, null, 2))
+    expect(ir).toMatchObject({
+      components: {
+        Diagrams: {
+          type: 'component',
+          name: 'Diagrams',
+          parent: 'A.1',
+        },
+      },
+      groups: {
+        'A.1': {
+          type: 'group',
+          name: 'A.1',
+          groupType: 'component',
+          label: 'A.1',
+          children: [
+            {
+              type: 'component',
+              name: 'Diagrams',
+              parent: 'A.1',
+            },
+          ],
+          parent: 'A',
+        },
+        A: {
+          type: 'group',
+          name: 'A',
+          groupType: 'component',
+          label: 'A',
+          children: [
+            {
+              type: 'group',
+              name: 'A.1',
+              groupType: 'component',
+              label: 'A.1',
+              children: [
+                {
+                  type: 'component',
+                  name: 'Diagrams',
+                  parent: 'A.1',
+                },
+              ],
+              parent: 'A',
+            },
+          ],
+        },
+      },
+    })
   })
 
   it('can parse style clause', () => {
@@ -211,4 +259,38 @@ componentDiagram
       },
     ])
   })
+
+  it('can parse element to group relationship', () => {
+    parse(
+      stripStartEmptyLines(`
+  componentDiagram
+    package "P_A" {
+      [ContentA]
+    }
+    package "P_B" {
+      [ContentB]
+    }
+    ContentA --> P_B : imports
+    `),
+    )
+    const ir = db.getDiagramIR()
+    // console.log(JSON.stringify(ir, null, 2))
+    expect(Object.keys(ir.interfaces).length).toBe(0)
+    expect(ir.relationships).toMatchObject([
+      {
+        from: {
+          type: 'interface',
+          name: 'ContentA',
+        },
+        to: {
+          type: 'interface',
+          name: 'P_B',
+        },
+        line: {
+          lineType: 'SOLID_ARROW',
+        },
+        message: 'imports',
+      },
+    ])
+  })
 })

packages/pintora-diagrams/src/component/artist.ts

@@ -20,6 +20,7 @@ import { createLayoutGraph, getGraphBounds, LayoutEdge, LayoutGraph, LayoutNode,
 import { makeMark, drawArrowTo, calcDirection, makeLabelBg } from '../util/artist-util'
 import dagre from '@pintora/dagre'
 import { Edge } from '@pintora/graphlib'
+import { isDev } from '../util/env'
 
 let conf: ComponentConf
 
@@ -31,11 +32,13 @@ type EdgeData = {
   name: string
   relationship: Relationship
   onLayout(data: LayoutEdge<EdgeData>, edge: Edge): void
+  /** this edge is for layout, should not be drawn */
+  isDummyEdge?: boolean
 }
 
 const componentArtist: IDiagramArtist<ComponentDiagramIR, ComponentConf> = {
   draw(ir) {
-    // logger.info('[artist] component', ir)
+    // console.info('[artist] component', ir)
     conf = getConf(ir.configParams)
 
     const rootMark: Group = {
@@ -66,7 +69,9 @@ const componentArtist: IDiagramArtist<ComponentDiagramIR, ComponentConf> = {
     dagre.layout(g, {
       // debugTiming: true,
     })
-    // ;(window as any).graph = g
+    if (isDev) {
+      ;(window as any).componentGraph = g
+    }
 
     adjustMarkInGraph(g)
 
@@ -194,6 +199,7 @@ function drawInterfacesTo(parentMark: Group, ir: ComponentDiagramIR, g: LayoutGr
         safeAssign(textMark.attrs, { x, y: y + 2 })
       },
     }
+
     g.setNode(id, layoutNode)
 
     if (labelDims.width > interfaceSize) {
@@ -329,6 +335,7 @@ function drawGroupsTo(parentMark: Group, ir: ComponentDiagramIR, g: LayoutGraph)
 
 function drawRelationshipsTo(parentMark: Group, ir: ComponentDiagramIR, g: LayoutGraph) {
   ir.relationships.forEach(function (r) {
+    // console.log('draw relationship', r)
     const lineMark = makeMark(
       'polyline',
       {
@@ -368,7 +375,13 @@ function drawRelationshipsTo(parentMark: Group, ir: ComponentDiagramIR, g: Layou
       labelpos: 'r',
       labeloffset: 100,
       onLayout(data, edge) {
-        // console.log('edge onlayout', data, 'points', data.points.map(t => `${t.x},${t.y}`))
+        // console.log(
+        //   'edge onLayout',
+        //   edge,
+        //   data,
+        //   'points',
+        //   data.points.map(t => `${t.x},${t.y}`),
+        // )
         const points = data.points.map(p => [p.x, p.y]) as PointTuple[]
         lineMark.attrs.points = points
         if (relText) {
@@ -385,12 +398,27 @@ function drawRelationshipsTo(parentMark: Group, ir: ComponentDiagramIR, g: Layou
           const arrowMark = drawArrowTo(lastPoint, 8, arrowRad, {
             color: conf.relationLineColor,
           })
-          // arrowMark.class = 'component__rel-arrow'
           relationGroupMark.children.push(arrowMark)
         }
       },
     } as EdgeData)
 
+    const isFromGroup = r.from.type === 'group'
+    const isToGroup = r.to.type === 'group'
+    if (isFromGroup || isToGroup) {
+      if (isToGroup) {
+        const toGroup = ir.groups[r.to.name]
+        const firstChild = toGroup?.children[0]
+        if (firstChild && 'name' in firstChild) {
+          g.setEdge(r.from.name, firstChild.name, { isDummyEdge: true } as EdgeData)
+        }
+      } else if (isFromGroup) {
+        const fromGroup = ir.groups[r.from.name]
+        const firstChild = fromGroup?.children[0]
+        if (firstChild && 'name' in firstChild) g.setEdge(firstChild.name, r.to.name, { isDummyEdge: true } as EdgeData)
+      }
+    }
+
     const relationGroupMark = makeMark(
       'group',
       {},

packages/pintora-diagrams/src/component/db.ts

@@ -23,7 +23,7 @@ type CGroup = {
   parent?: string
 }
 
-type ElementType = 'component' | 'interface'
+type ElementType = 'component' | 'interface' | 'group'
 
 type ElementRef = {
   name: string
@@ -110,6 +110,7 @@ class ComponentDb {
   addGroup(name: string, group: CGroup) {
     if (this.groups[name]) return
     this.groups[name] = group
+    this.aliases[name] = group
   }
 
   addRelationship(r: Relationship) {
@@ -177,6 +178,19 @@ class ComponentDb {
         }
       }
     })
+
+    // correct relationship elements
+    this.relationships.forEach(r => {
+      ;[r.from, r.to].forEach(e => {
+        const aliasEntity = this.aliases[e.name]
+        if (aliasEntity) {
+          if ('type' in aliasEntity && (aliasEntity as any).type !== e.type) {
+            // console.log('alias', e, aliasEntity)
+            Object.assign(e, aliasEntity)
+          }
+        }
+      })
+    })
   }
 
   getDiagramIR(): ComponentDiagramIR {

packages/test-shared/example-files/component-1.pintora

@@ -23,5 +23,5 @@ componentDiagram
   }
   [IDiagram] --> GraphicsIR : generate
   [standalone] --> registry : register all of @pintora/diagrams
-  [standalone] --> [@pintora/diagrams] : import
+  [@pintora/standalone] --> [@pintora/diagrams] : import
   [standalone] --> renderFn : call with GraphicsIR

packages/test-shared/src/data/examples.ts

@@ -201,7 +201,7 @@ componentDiagram
   }
   [IDiagram] --> GraphicsIR : generate
   [standalone] --> registry : register all of @pintora/diagrams
-  [standalone] --> [@pintora/diagrams] : import
+  [@pintora/standalone] --> [@pintora/diagrams] : import
   [standalone] --> renderFn : call with GraphicsIR
   `),
 }