feat(pintora-diagrams): [activityDiagram] parse and draw arrowLabel

hikerpig · Dec 11, 2021 · aae1275 · aae1275
1 parent 192e699
commit aae1275
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 5 deletions.
diff --git a/packages/pintora-diagrams/src/activity/__tests__/activity-parser.spec.js b/packages/pintora-diagrams/src/activity/__tests__/activity-parser.spec.js
@@ -431,4 +431,35 @@ activityDiagram
       },
     })
   })
+
+  it('can parse arrow statement', () => {
+    const example = stripStartEmptyLines(`
+activityDiagram
+  :Text 1;
+  -> Arrow label;
+`)
+    parse(example)
+    const ir = db.getDiagramIR()
+    // console.log('ir', JSON.stringify(ir, null, 2))
+    expect(ir).toMatchObject({
+      steps: [
+        {
+          type: 'action',
+          value: {
+            actionType: 'normal',
+            message: 'Text 1',
+            id: '1',
+          },
+        },
+      ],
+      arrowLabels: [
+        {
+          id: '2',
+          type: 'arrowLabel',
+          text: 'Arrow label',
+          target: '1',
+        },
+      ],
+    })
+  })
 })
diff --git a/packages/pintora-diagrams/src/activity/artist.ts b/packages/pintora-diagrams/src/activity/artist.ts
@@ -13,7 +13,19 @@ import {
   configApi,
   last,
 } from '@pintora/core'
-import { Action, ActivityDiagramIR, AGroup, Condition, Keyword, Note, Step, Switch, Case, While } from './db'
+import {
+  Action,
+  ActivityDiagramIR,
+  AGroup,
+  Condition,
+  Keyword,
+  Note,
+  Step,
+  Switch,
+  Case,
+  While,
+  ArrowLabel,
+} from './db'
 import { ActivityConf, getConf } from './config'
 import { adjustEntities, createLayoutGraph, getGraphBounds, LayoutEdge, LayoutGraph, LayoutNode } from '../util/graph'
 import {
@@ -121,6 +133,7 @@ class ArtistModel {
 
   stepModelMap = new Map<string, StepModel>()
   stepNotesMap = new Map<string, Note[]>()
+  stepArrowLabelMap = new Map<string, ArrowLabel>()
 
   private shouldTouchPrevIds(step: Step) {
     return step.type !== 'group'
@@ -280,6 +293,12 @@ class ArtistModel {
         stepNotes.push(note)
       }
     })
+    ir.arrowLabels.forEach(arrowLabel => {
+      const parentId = arrowLabel.target
+      if (parentId && this.stepModelMap.has(parentId)) {
+        this.stepArrowLabelMap.set(parentId, arrowLabel)
+      }
+    })
   }
 
   protected makeStepModel(step: Step): StepModel {
@@ -346,12 +365,17 @@ class ActivityDraw {
     if (result && result.stepModel) {
       const prevId = result.stepModel.prevId
       const startIdOfCurrent = result.stepModel.startId || result.stepModel.id
+      let label = ''
+      const arrowLabel = this.model.stepArrowLabelMap.get(prevId)
+      if (arrowLabel) {
+        label = arrowLabel.text
+      }
       if (prevId && prevId === this.keywordStepResults.start?.id) {
-        g.setEdge(prevId, startIdOfCurrent, { label: '' })
+        g.setEdge(prevId, startIdOfCurrent, { label })
       } else if (result === this.keywordStepResults.end) {
-        g.setEdge(prevId, startIdOfCurrent, { label: '' })
+        g.setEdge(prevId, startIdOfCurrent, { label })
       } else if (prevId) {
-        g.setEdge(prevId, startIdOfCurrent, { label: '' })
+        g.setEdge(prevId, startIdOfCurrent, { label })
       }
     }
 

diff --git a/packages/pintora-diagrams/src/activity/db.ts b/packages/pintora-diagrams/src/activity/db.ts
@@ -64,7 +64,13 @@ export type Note = {
   target?: string
 }
 
-type StepValue = Action | Condition | While | Keyword | AGroup | Switch | Case
+export type ArrowLabel = {
+  id: string
+  text: string
+  target?: string
+}
+
+type StepValue = Action | Condition | While | Keyword | AGroup | Switch | Case | ArrowLabel
 
 export type Step<T extends StepValue = StepValue> = {
   type: string
@@ -75,6 +81,7 @@ export type Step<T extends StepValue = StepValue> = {
 export type ActivityDiagramIR = {
   steps: Step[]
   notes: Note[]
+  arrowLabels: ArrowLabel[]
 }
 
 type ApplyPart =
@@ -133,6 +140,10 @@ type ApplyPart =
       text: string
       placement: string
     }
+  | {
+      type: 'arrowLabel'
+      text: string
+    }
 
 type DbApplyState = {
   prevStepId?: string | undefined
@@ -143,6 +154,7 @@ class ActivityDb {
   protected styleParams: StyleParam[] = []
   protected steps: Step[] = []
   protected notes: Note[] = []
+  protected arrowLabels: ArrowLabel[] = []
   protected idCounter = makeIdCounter()
 
   protected makeId() {
@@ -250,6 +262,15 @@ class ActivityDb {
         this.notes.push(value)
         break
       }
+      case 'arrowLabel': {
+        const value: ArrowLabel = { id: this.makeId(), ...part }
+        const prevStepId = state.prevStepId
+        if (prevStepId) {
+          value.target = prevStepId
+        }
+        this.arrowLabels.push(value)
+        break
+      }
       case 'addStyle':
         {
           this.styleParams.push(part)
@@ -271,6 +292,7 @@ class ActivityDb {
     return {
       steps: this.steps,
       notes: this.notes,
+      arrowLabels: this.arrowLabels,
     }
   }
 

diff --git a/packages/pintora-diagrams/src/activity/parser/activityDiagram.ne b/packages/pintora-diagrams/src/activity/parser/activityDiagram.ne
@@ -77,6 +77,7 @@ statement ->
   | whileSentence
   | switchSentence
   | noteStatement
+  | arrowLabelStatement
 
 conditionSentence ->
     "if" %SPACE:+ wordsInParens %SPACE:+ "then" wordsInParens:? %SPACE:* %NEWLINE line:* elseClause:? _ "endif" _ %NEWLINE {%
@@ -213,3 +214,10 @@ noteStatement ->
         return { type: 'note', placement: d[2], text }
       }
     %}
+
+arrowLabelStatement ->
+    "->" __ words %SEMICOLON _ %NEWLINE {%
+      function(d) {
+        return { type: 'arrowLabel', text: d[2] }
+      }
+    %}
diff --git a/website/docs/diagrams/activity-diagram.mdx b/website/docs/diagrams/activity-diagram.mdx
@@ -130,3 +130,22 @@ activityDiagram
   @end_note
   end
 ```
+
+## Arrow Label
+
+In the next line of action, you can add label to the arrow with the arrow label notation.
+
+Currently only single line text is supported.
+
+```
+-> multiline description;
+```
+
+```pintora play
+activityDiagram
+  start
+  :Action 1;
+  -> Hey there;
+  :Action 2;
+  end
+```
diff --git a/...i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/activity-diagram.mdx b/...i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/activity-diagram.mdx
@@ -132,3 +132,22 @@ activityDiagram
   @end_note
   end
 ```
+
+## 为箭头添加文字
+
+在动作语句下一行可以使用箭头标记语法来指定箭头文字。
+
+目前只支持单行文字。
+
+```
+-> [说明文字];
+```
+
+```pintora play
+activityDiagram
+  start
+  :行动 1;
+  -> 行动说明文字;
+  :行动 2;
+  end
+```