feat: add dotDiagram

- a simple DagreWrapper for artists

.changeset/wise-planets-smile.md

@@ -0,0 +1,11 @@
+---
+'@pintora/diagrams': minor
+'@pintora/test-shared': minor
+'pintora-website': minor
+'@pintora/cli': minor
+'@pintora/core': minor
+'@pintora/renderer': minor
+'@pintora/standalone': minor
+---
+
+feat: add dotDiagram

packages/pintora-diagrams/scripts/build-grammar.js

@@ -9,6 +9,7 @@ const grammarFiles = [
   { input: 'src/activity/parser/activityDiagram.ne', output: 'src/activity/parser/activityDiagram.ts' },
   { input: 'src/mindmap/parser/mindmap.ne', output: 'src/mindmap/parser/mindmap.ts' },
   { input: 'src/gantt/parser/gantt.ne', output: 'src/gantt/parser/gantt.ts' },
+  { input: 'src/dot/parser/dotDiagram.ne', output: 'src/dot/parser/dotDiagram.ts' },
 ]
 
 grammarFiles.forEach(async ({ input, output }) => {

packages/pintora-diagrams/src/dot/__tests__/__snapshots__/dot-parser.spec.js.snap

@@ -0,0 +1,185 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dot parser should parse attr stmt 1`] = `
+Object {
+  "attrs": Object {
+    "edge": Object {
+      "color": "purple",
+      "fontcolor": "green",
+    },
+    "graph": Object {
+      "color": "lightgrey",
+    },
+    "node": Object {
+      "color": "red",
+      "fontcolor": "blue",
+    },
+  },
+  "children": Array [
+    Object {
+      "attrs": Object {
+        "graph": Object {
+          "label": "process",
+        },
+      },
+      "children": Array [],
+      "id": "sub",
+      "type": "subgraph",
+    },
+  ],
+  "id": "",
+  "type": "graph",
+}
+`;
+
+exports[`dot parser should parse directed edge 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "edge_list": Array [
+        Object {
+          "id": "a",
+          "type": "node_id",
+        },
+        Object {
+          "id": "b",
+          "type": "node_id",
+        },
+      ],
+      "type": "edge_stmt",
+    },
+  ],
+  "id": "Test",
+  "type": "digraph",
+}
+`;
+
+exports[`dot parser should parse dot comment 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "nodeId": Object {
+        "id": "some_node",
+        "type": "node_id",
+      },
+      "type": "node_stmt",
+    },
+  ],
+  "id": "Test",
+  "type": "graph",
+}
+`;
+
+exports[`dot parser should parse edge 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "edge_list": Array [
+        Object {
+          "id": "name0",
+          "type": "node_id",
+        },
+        Object {
+          "id": "course",
+          "type": "node_id",
+        },
+      ],
+      "type": "edge_stmt",
+    },
+    Object {
+      "attrs": Object {
+        "label": "n",
+        "len": "1.00",
+      },
+      "edge_list": Array [
+        Object {
+          "id": "course",
+          "type": "node_id",
+        },
+        Object {
+          "id": "C-I",
+          "type": "node_id",
+        },
+      ],
+      "type": "edge_stmt",
+    },
+  ],
+  "id": "Test",
+  "type": "graph",
+}
+`;
+
+exports[`dot parser should parse node 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "attrs": Object {
+        "shape": "box",
+      },
+      "nodeId": Object {
+        "id": "name",
+        "type": "node_id",
+      },
+      "type": "node_stmt",
+    },
+    Object {
+      "nodeId": Object {
+        "id": "course",
+        "type": "node_id",
+      },
+      "type": "node_stmt",
+    },
+    Object {
+      "nodeId": Object {
+        "id": "student",
+        "type": "node_id",
+      },
+      "type": "node_stmt",
+    },
+  ],
+  "id": "ER",
+  "type": "graph",
+}
+`;
+
+exports[`dot parser should parse subgraph 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [
+        Object {
+          "nodeId": Object {
+            "id": "n1",
+            "type": "node_id",
+          },
+          "type": "node_stmt",
+        },
+      ],
+      "id": "S1",
+      "type": "subgraph",
+    },
+    Object {
+      "nodeId": Object {
+        "id": "n2",
+        "type": "node_id",
+      },
+      "type": "node_stmt",
+    },
+    Object {
+      "edge_list": Array [
+        Object {
+          "id": "n1",
+          "type": "node_id",
+        },
+        Object {
+          "id": "n2",
+          "type": "node_id",
+        },
+      ],
+      "type": "edge_stmt",
+    },
+  ],
+  "id": "Test",
+  "type": "graph",
+}
+`;

packages/pintora-diagrams/src/dot/__tests__/dot-config.spec.js

@@ -0,0 +1,43 @@
+//@ts-check
+import { parse } from '../parser'
+import db from '../db'
+import { getConf } from '../config'
+
+describe('dot config', () => {
+  afterEach(() => {
+    db.clear()
+  })
+  it('can parse param clause', () => {
+    const example = `
+dotDiagram
+  @param nodePadding 16
+  @param {
+    layoutDirection LR
+  }
+    `
+    parse(example)
+    const ir = db.getDiagramIR()
+    const conf = getConf(ir)
+    expect(conf).toMatchObject({
+      nodePadding: 16,
+      layoutDirection: 'LR',
+    })
+  })
+
+  it('can parse override clause', () => {
+    const example = `
+dotDiagram
+  @config({
+    "dot": {
+      "edgeColor": "#111"
+    }
+  })
+    `
+    parse(example)
+    const ir = db.getDiagramIR()
+    const conf = getConf(ir)
+    expect(conf).toMatchObject({
+      edgeColor: '#111',
+    })
+  })
+})

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

@@ -0,0 +1,105 @@
+import { parse } from '../parser'
+import db from '../db'
+import { stripStartEmptyLines } from '@pintora/test-shared'
+
+// some test set https://gitlab.com/graphviz/graphviz/-/tree/main/tests/graphs
+describe('dot parser', () => {
+  afterEach(() => {
+    db.clear()
+  })
+
+  it('should parse node', () => {
+    const example = stripStartEmptyLines(`
+dotDiagram
+
+graph ER {
+	name [shape=box]; course; student;
+}
+    `)
+    parse(example)
+    const ir = db.getDiagramIR()
+    // console.log(JSON.stringify(ir, null, 2))
+    expect(ir.graph).toMatchSnapshot()
+  })
+
+  it('should parse edge', () => {
+    const example = stripStartEmptyLines(`
+  dotDiagram
+  graph Test {
+    name0 -- course;
+    course -- "C-I" [label="n",len=1.00];
+  }
+      `)
+    parse(example)
+    const ir = db.getDiagramIR()
+    // console.log(JSON.stringify(ir, null, 2))
+    expect(ir.graph).toMatchSnapshot()
+  })
+
+  it('should parse directed edge', () => {
+    const example = stripStartEmptyLines(`
+  dotDiagram
+  digraph Test {
+    a -> b;
+  }
+      `)
+    parse(example)
+    const ir = db.getDiagramIR()
+    expect(ir.graph).toMatchSnapshot()
+  })
+
+  it('should parse attr stmt', () => {
+    const example = stripStartEmptyLines(`
+  dotDiagram
+  graph {
+    color=lightgrey;
+    node [color=red, fontcolor=blue]
+    edge [color=purple, fontcolor=green]
+
+    subgraph sub {
+      label = "process";
+    }
+  }
+      `)
+    parse(example)
+    const ir = db.getDiagramIR()
+    expect(ir.graph).toMatchSnapshot()
+  })
+
+  it('should parse subgraph', () => {
+    const example = stripStartEmptyLines(`
+  dotDiagram
+  graph Test {
+    subgraph S1 {
+      n1;
+    }
+    n2;
+
+    n1 -- n2;
+  }
+      `)
+    parse(example)
+    const ir = db.getDiagramIR()
+    expect(ir.graph).toMatchSnapshot()
+  })
+
+  it('should parse dot comment', () => {
+    const example = stripStartEmptyLines(`
+  dotDiagram
+  // comment 1
+  graph Test {
+    // comment 2
+    some_node
+    %% pintora comment 1
+    /**
+     * block - comment
+     */
+  }
+  %% pintora comment 2
+      `)
+    parse(example)
+    const ir = db.getDiagramIR()
+    // console.log(JSON.stringify(ir, null, 2))
+    expect(ir.graph).toMatchSnapshot()
+  })
+})

packages/pintora-diagrams/src/dot/__tests__/style-context.spec.js

@@ -0,0 +1,40 @@
+import { StyleContext } from '../artist/style-context'
+
+describe('StyleContext', () => {
+  it('getValue through parent chain', () => {
+    const p = new StyleContext()
+    const c = new StyleContext()
+    c.setParent(p)
+
+    p.setValues({
+      color: 'green',
+      fontcolor: 'purple',
+    })
+    expect(c.getValue('color')).toEqual('green')
+
+    c.set('color', 'red')
+    expect(c.getValue('color')).toEqual('red')
+    expect(c.getValue('fontcolor')).toEqual('purple')
+
+    const c2 = c.spawn()
+    expect(c2.getValue('fontcolor')).toEqual('purple')
+  })
+
+  it('resolve through parent chain', () => {
+    const p = new StyleContext()
+    const c = new StyleContext()
+    c.setParent(p)
+
+    p.setValues({
+      color: 'green',
+    })
+
+    expect(c.resolve('not_exist')).toMatchObject({
+      resolved: false,
+    })
+    expect(c.resolve('color')).toMatchObject({
+      resolved: true,
+      value: 'green',
+    })
+  })
+})