diff --git a/packages/pintora-diagrams/src/component/__tests__/component-parser.spec.js b/packages/pintora-diagrams/src/component/__tests__/component-parser.spec.js index ce8e4ad0..96224f32 100644 --- a/packages/pintora-diagrams/src/component/__tests__/component-parser.spec.js +++ b/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', + }, + ]) + }) }) diff --git a/packages/pintora-diagrams/src/component/artist.ts b/packages/pintora-diagrams/src/component/artist.ts index 809426f1..9b7649b0 100644 --- a/packages/pintora-diagrams/src/component/artist.ts +++ b/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, edge: Edge): void + /** this edge is for layout, should not be drawn */ + isDummyEdge?: boolean } const componentArtist: IDiagramArtist = { 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 = { 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', {}, diff --git a/packages/pintora-diagrams/src/component/db.ts b/packages/pintora-diagrams/src/component/db.ts index 685af330..78cdea3d 100644 --- a/packages/pintora-diagrams/src/component/db.ts +++ b/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 { diff --git a/packages/test-shared/example-files/component-1.pintora b/packages/test-shared/example-files/component-1.pintora index 9a3e0b20..2667bc97 100644 --- a/packages/test-shared/example-files/component-1.pintora +++ b/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 diff --git a/packages/test-shared/src/data/examples.ts b/packages/test-shared/src/data/examples.ts index d8a2d8a4..542f1413 100644 --- a/packages/test-shared/src/data/examples.ts +++ b/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 `), }