From aae1275ac322b4ac72dfc08c579512210250a150 Mon Sep 17 00:00:00 2001 From: hikerpig Date: Sat, 11 Dec 2021 15:30:33 +0800 Subject: [PATCH] feat(pintora-diagrams): [activityDiagram] parse and draw arrowLabel --- .../__tests__/activity-parser.spec.js | 31 ++++++++++++++++++ .../pintora-diagrams/src/activity/artist.ts | 32 ++++++++++++++++--- packages/pintora-diagrams/src/activity/db.ts | 24 +++++++++++++- .../src/activity/parser/activityDiagram.ne | 8 +++++ website/docs/diagrams/activity-diagram.mdx | 19 +++++++++++ .../current/diagrams/activity-diagram.mdx | 19 +++++++++++ 6 files changed, 128 insertions(+), 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 index de9bae8c..9e1c804d 100644 --- 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 index 8914ace2..76b47462 100644 --- 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() stepNotesMap = new Map() + stepArrowLabelMap = new Map() 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 index a02e58b2..cb5133ac 100644 --- 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 = { type: string @@ -75,6 +81,7 @@ export type Step = { 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 index 7f9bda00..7060ed24 100644 --- 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 index 6f57d88f..5c56fdc8 100644 --- 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/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/activity-diagram.mdx b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/activity-diagram.mdx index b64d770e..51e49c9d 100644 --- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/activity-diagram.mdx +++ b/website/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 +```