feat: custom style engine and @style rule in componentDiagram

hikerpig · Sep 5, 2021 · 14dc634 · 14dc634
1 parent 0372a29
commit 14dc634
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 13 deletions.
diff --git a/packages/pintora-diagrams/src/component/__tests__/component-parser.spec.js b/packages/pintora-diagrams/src/component/__tests__/component-parser.spec.js
@@ -195,4 +195,20 @@ componentDiagram
     // const ir = db.getDiagramIR()
     // console.log('ir', ir)
   })
+
+  it('can parse style clause', () => {
+    const example = stripStartEmptyLines(`
+componentDiagram
+  @style lineWidth 3
+  `)
+    parse(example)
+    const ir = db.getDiagramIR()
+    // console.log(JSON.stringify(ir, null, 2))
+    expect(ir.styleParams).toMatchObject([
+      {
+        key: 'lineWidth',
+        value: '3',
+      },
+    ])
+  })
 })
diff --git a/packages/pintora-diagrams/src/component/artist.ts b/packages/pintora-diagrams/src/component/artist.ts
@@ -35,7 +35,7 @@ type EdgeData = {
 const componentArtist: IDiagramArtist<ComponentDiagramIR, ComponentConf> = {
   draw(ir) {
     // logger.info('[artist] component', ir)
-    conf = getConf()
+    conf = getConf(ir.styleParams)
 
     const rootMark: Group = {
       type: 'group',

diff --git a/packages/pintora-diagrams/src/component/config.ts b/packages/pintora-diagrams/src/component/config.ts
@@ -1,6 +1,7 @@
 import { PALETTE } from '../util/theme'
 import { configApi, safeAssign } from '@pintora/core'
 import { DiagramsConf } from '../type'
+import { interpreteStyles, StyleParam } from '../util/style'
 
 export type ComponentConf = {
   diagramPadding: number
@@ -42,11 +43,22 @@ export const defaultConfig: ComponentConf = {
   interfaceSize: 16,
 }
 
-export const conf: ComponentConf = {
-  ...defaultConfig,
-}
+export const COMPONENT_STYLE_RULES = {
+  diagramPadding: { valueType: 'size' },
+  componentPadding: { valueType: 'size' },
+  componentBackground: { valueType: 'color' },
+  componentBorderColor: { valueType: 'color' },
+  groupBackground: { valueType: 'color' },
+  groupBorderColor: { valueType: 'color' },
+  relationLineColor: { valueType: 'color' },
+  textColor: { valueType: 'color' },
+  lineWidth: { valueType: 'size' },
+  labelBackground: { valueType: 'color' },
+  interfaceSize: { valueType: 'size' },
+} as const
 
-export function getConf() {
+export function getConf(styleParams: StyleParam[]) {
+  const conf = { ...defaultConfig }
   const globalConfig: DiagramsConf = configApi.getConfig()
   const t = globalConfig.themeConfig.themeVariables
   safeAssign(conf, {
@@ -59,5 +71,6 @@ export function getConf() {
     textColor: t.textColor,
   })
   Object.assign(conf, globalConfig.component || {})
+  Object.assign(conf, interpreteStyles(COMPONENT_STYLE_RULES, styleParams))
   return conf
 }
diff --git a/packages/pintora-diagrams/src/component/db.ts b/packages/pintora-diagrams/src/component/db.ts
@@ -1,3 +1,5 @@
+import { StyleParam } from '../util/style'
+
 type Component = {
   name: string
   label?: string
@@ -56,13 +58,18 @@ type ApplyPart = {
   name: string
   label?: string
   children: UMLElement[]
-}
+} | {
+    type: 'addStyle'
+    key: string
+    value: string
+  }
 
 export type ComponentDiagramIR = {
   components: Record<string, Component>
   interfaces: Record<string, Interface>
   groups: Record<string, CGroup>
   relationships: Relationship[]
+  styleParams: StyleParam[]
 }
 
 export enum LineType {
@@ -78,6 +85,7 @@ class ComponentDb {
   protected interfaces: Record<string, Interface> = {}
   protected groups: Record<string, CGroup> = {}
   protected relationships: Relationship[] = []
+  protected styleParams: StyleParam[] = []
 
   LineType = LineType
 
@@ -112,7 +120,8 @@ class ComponentDb {
     if (!part) return
     // console.log('apply', part)
     switch (part.type) {
-      case 'group': {
+      case 'addStyle': {
+        this.styleParams.push(part)
       } break
       default: {
       }
@@ -170,6 +179,7 @@ class ComponentDb {
       interfaces: this.interfaces,
       groups: this.groups,
       relationships: this.relationships,
+      styleParams: this.styleParams,
     }
   }
 
@@ -179,6 +189,7 @@ class ComponentDb {
     this.interfaces = {}
     this.groups = {}
     this.relationships = []
+    this.styleParams = []
   }
 }
 

diff --git a/packages/pintora-diagrams/src/component/parser/componentDiagram.ne b/packages/pintora-diagrams/src/component/parser/componentDiagram.ne
@@ -34,6 +34,7 @@ export function setYY(v) {
 @lexer lexer
 @builtin "string.ne"
 @builtin "whitespace.ne"
+@include "../../util/parser-grammars/style.ne"
 
 start -> __ start
   | "componentDiagram" document {%
@@ -57,12 +58,14 @@ line ->
     %SPACE:* statement
 	| %NEWLINE {% (d) => null %}
 
-statement -> UMLElement {%
-    function(d) {
-      // console.log('[statement]', JSON.stringify(d[0]))
-      return d[0]
-    }
-  %}
+statement ->
+    UMLElement {%
+      function(d) {
+        // console.log('[statement]', JSON.stringify(d[0]))
+        return d[0]
+      }
+    %}
+  | styleClause _ %NEWLINE
 
 UMLElement ->
     group {%

diff --git a/website/docs/diagrams/component-diagram.mdx b/website/docs/diagrams/component-diagram.mdx
@@ -83,3 +83,17 @@ database "MySql" {
 [Folder 3] --> [Frame 4]
 ```
 
+## Override config
+
+You can override diagarm style config through `@style` directive.
+
+All available configs can be seen in the [Config page](../configuration/config.md#component).
+
+```pintora play
+componentDiagram
+  @style componentBackground #61afef
+  @style componentBorderColor #61afef
+
+  DataQuery -- [Component]
+  [Component] ..> HTTP : use
+```