feat(pintora-diagrams): [activityDiagram] Add style config

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

@@ -54,7 +54,7 @@ function calcTextDims(text: string, attrs: Partial<Text['attrs']> = {}) {
 
 const erArtist: IDiagramArtist<ActivityDiagramIR, ActivityConf> = {
   draw(ir) {
-    conf = getConf([])
+    conf = getConf(ir.styleParams)
     model = new ArtistModel(ir)
     theme = (configApi.getConfig() as DiagramsConf).themeConfig.themeVariables
     // console.log('ir', JSON.stringify(ir, null, 2))
@@ -649,7 +649,7 @@ class ActivityDraw {
     group.children.push(bgMark, labelMark)
     parentMark.children.push(group)
 
-    aGroup.children.map((s, i) => {
+    aGroup.children.map(s => {
       const childResult = this.drawStep(parentMark, s)
       this.g.setParent(childResult.id, id)
       return childResult
@@ -688,7 +688,7 @@ class ActivityDraw {
     group.children.push(decisionBg, textMark)
     parentMark.children.push(group, diamondMark)
 
-    s.children.map((caseStep: Step<Case>, i) => {
+    s.children.map((caseStep: Step<Case>) => {
       const childResult = this.drawStep(parentMark, caseStep)
       // console.log('[drawSwitch]childResult', childResult)
       this.g.setEdge(id, childResult.stepModel.startId || childResult.id, {
@@ -718,7 +718,7 @@ class ActivityDraw {
     parentMark.children.push(group)
 
     if (c.children.length) {
-      c.children.map((caseClause, i) => {
+      c.children.map(caseClause => {
         const childResult = this.drawStep(parentMark, caseClause)
         return childResult
       })
@@ -744,8 +744,8 @@ class ActivityDraw {
     const group = makeEmptyGroup()
     const { label, id } = keyword
     const r = 10
-    const stroke = conf.keywordBgColor
-    const fill = conf.keywordBgColor
+    const stroke = conf.keywordBackground
+    const fill = conf.keywordBackground
     if (label === 'start') {
       const bgMark = makeMark('circle', {
         r,
@@ -957,7 +957,7 @@ function drawEdges(parent: Group, g: LayoutGraph) {
     // }
 
     const labelDims = calcTextDims(edge.label || '')
-    const labelBgMark = makeLabelBg(labelDims, { x: labelX, y: labelY }, {}, theme)
+    const labelBgMark = makeLabelBg(labelDims, { x: labelX, y: labelY }, { fill: conf.labelBackground }, theme)
     const labelMark = makeMark(
       'text',
       {
@@ -967,7 +967,7 @@ function drawEdges(parent: Group, g: LayoutGraph) {
         textBaseline: 'middle',
         x: labelX,
         y: labelY,
-        fill: conf.textColor,
+        fill: conf.labelTextColor,
         fontSize: conf.fontSize,
       },
       { class: 'activity__edge-label' },

packages/pintora-diagrams/src/activity/config.ts

@@ -19,11 +19,14 @@ export type ActivityConf = {
   textColor: string
   edgeColor: string
 
-  keywordBgColor: string
+  keywordBackground: string
 
   noteTextColor: string
   noteMargin: number
 
+  labelTextColor: string
+  labelBackground: string
+
   fontSize: number
 }
 
@@ -42,16 +45,41 @@ export const defaultConfig: ActivityConf = {
   textColor: PALETTE.normalDark,
   edgeColor: PALETTE.normalDark,
 
-  keywordBgColor: PALETTE.normalDark,
+  keywordBackground: PALETTE.normalDark,
 
   noteTextColor: PALETTE.normalDark,
   noteMargin: 10,
 
+  labelTextColor: PALETTE.normalDark,
+  labelBackground: PALETTE.white,
+
   fontSize: 14,
 }
 
 export const ACTIVITY_STYLE_RULES = {
+  diagramPadding: { valueType: 'size' },
+  layoutDirection: { valueType: 'string' },
+
+  actionPaddingX: { valueType: 'size' },
+  actionPaddingY: { valueType: 'size' },
+  actionBackground: { valueType: 'color' },
+  actionBorderColor: { valueType: 'color' },
+
+  groupBackground: { valueType: 'color' },
+  groupBorderColor: { valueType: 'color' },
+
   textColor: { valueType: 'color' },
+  edgeColor: { valueType: 'color' },
+
+  keywordBackground: { valueType: 'color' },
+
+  noteTextColor: { valueType: 'color' },
+  noteMargin: { valueType: 'size' },
+
+  labelBackground: { valueType: 'color' },
+  labelTextColor: { valueType: 'color' },
+
+  fontSize: { valueType: 'size' },
 } as const
 
 export function getConf(styleParams: StyleParam[]) {
@@ -66,7 +94,9 @@ export function getConf(styleParams: StyleParam[]) {
       groupBorderColor: t.primaryBorderColor,
       textColor: t.textColor,
       edgeColor: t.primaryColor,
-      keywordBgColor: t.textColor,
+      keywordBackground: t.textColor,
+      labelBackground: t.canvasBackground || t.background1,
+      labelTextColor: t.textColor,
     })
   }
   Object.assign(conf, globalConfig.er || {})

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

@@ -1,5 +1,5 @@
-import { StyleParam } from '../util/style'
 import { makeIdCounter } from '@pintora/core'
+import { StyleParam, StyleAction } from '../util/style'
 import { dedent } from '../util/text'
 
 export type Action = {
@@ -82,14 +82,11 @@ export type ActivityDiagramIR = {
   steps: Step[]
   notes: Note[]
   arrowLabels: ArrowLabel[]
+  styleParams: StyleParam[]
 }
 
 type ApplyPart =
-  | {
-      type: 'addStyle'
-      key: string
-      value: string
-    }
+  | StyleAction
   | {
       type: 'addAction'
       action: Action
@@ -293,13 +290,15 @@ class ActivityDb {
       steps: this.steps,
       notes: this.notes,
       arrowLabels: this.arrowLabels,
+      styleParams: this.styleParams,
     }
   }
 
   clear() {
     this.idCounter.reset()
     this.steps = []
     this.notes = []
+    this.styleParams = []
   }
 }
 

packages/pintora-diagrams/src/activity/parser/activityDiagram.ne

@@ -78,6 +78,7 @@ statement ->
   | switchSentence
   | noteStatement
   | arrowLabelStatement
+  | styleClause _ %NEWLINE
 
 conditionSentence ->
     "if" %SPACE:+ wordsInParens %SPACE:+ "then" wordsInParens:? %SPACE:* %NEWLINE line:* elseClause:? _ "endif" _ %NEWLINE {%

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

@@ -132,7 +132,7 @@ export function calcDirection(start: Point, end: Point) {
 export function makeLabelBg(labelDims: TSize, center: Point, attrs: Partial<Rect['attrs']> = {}, theme?: ITheme) {
   let fill = '#fff'
   if (theme) {
-    fill = theme.canvasBackground || (theme.isDark ? '#000' : '#fff')
+    fill = theme.canvasBackground || theme.background1 || (theme.isDark ? '#000' : '#fff')
   }
 
   const labelBg = makeMark(
@@ -141,7 +141,7 @@ export function makeLabelBg(labelDims: TSize, center: Point, attrs: Partial<Rect
       x: center.x - labelDims.width / 2,
       y: center.y - labelDims.height / 2,
       width: labelDims.width,
-      height: labelDims.height,
+      height: labelDims.height + 2,
       fill,
       opacity: 0.85,
       ...attrs,

packages/pintora-diagrams/src/util/style.ts

@@ -1,3 +1,10 @@
 import { StyleParam, interpreteStyles } from '@pintora/core'
 
 export { StyleParam, interpreteStyles }
+
+/** parser action */
+export type StyleAction = {
+  type: 'addStyle'
+  key: string
+  value: string
+}

website/docs/configuration/config.md

@@ -155,6 +155,37 @@ export type ComponentConf = {
 }
 ```
 
+### activity
+
+```ts
+export type ActivityConf = {
+  diagramPadding: number
+  layoutDirection: string
+
+  actionPaddingX: number
+  actionPaddingY: number
+
+  actionBackground: string
+  actionBorderColor: string
+
+  groupBackground: string
+  groupBorderColor: string
+
+  textColor: string
+  edgeColor: string
+
+  keywordBackground: string
+
+  noteTextColor: string
+  noteMargin: number
+
+  labelTextColor: string
+  labelBackground: string
+
+  fontSize: number
+}
+```
+
 ## The `@style` directive
 
 If you don't have the access to add JS script into the page or in the Node.js module, it's also possible to override some configs of the builtin diagrams through the `@style` directive.

website/docs/diagrams/activity-diagram.mdx

@@ -149,3 +149,31 @@ activityDiagram
   :Action 2;
   end
 ```
+
+
+## Override config
+
+You can override diagarm style config through `@style` directive.
+
+All available configs can be seen in the [Config page](../configuration/config.md#activity).
+
+```pintora play
+activityDiagram
+  @style actionBackground #61afef
+  @style textColor #fff
+  @style noteTextColor #purple
+  @style edgeColor #143C9A
+  @style {
+    keywordBackground #143C9A
+    labelTextColor #143C9A
+  }
+  start
+  partition Init {
+    :Read config;
+    @note right: comment
+  }
+  while (data available) is (yes)
+    :read data;
+  endwhile
+  end
+```

website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/activity-diagram.mdx

@@ -151,3 +151,30 @@ activityDiagram
   :行动 2;
   end
 ```
+
+## 覆盖设置
+
+可以使用 `@style` 指令覆盖图表的部分设置。
+
+可设置项的说明请见 [Config page](../configuration/config.md#activity).
+
+```pintora play
+activityDiagram
+  @style actionBackground #61afef
+  @style textColor #fff
+  @style noteTextColor #purple
+  @style edgeColor #143C9A
+  @style {
+    keywordBackground #143C9A
+    labelTextColor #143C9A
+  }
+  start
+  partition Init {
+    :Read config;
+    @note right: comment
+  }
+  while (data available) is (yes)
+    :read data;
+  endwhile
+  end
+```