diff --git a/packages/pintora-diagrams/scripts/build-grammar.js b/packages/pintora-diagrams/scripts/build-grammar.js index a12203dd..8a0e08d7 100755 --- a/packages/pintora-diagrams/scripts/build-grammar.js +++ b/packages/pintora-diagrams/scripts/build-grammar.js @@ -1,5 +1,6 @@ const shellExec = require('shell-exec') const path = require('path') +const fs = require('fs') const grammarFiles = [ { input: 'src/er/parser/erDiagram.ne', output: 'src/er/parser/erDiagram.ts' }, @@ -9,8 +10,16 @@ const grammarFiles = [ { input: 'src/mindmap/parser/mindmap.ne', output: 'src/mindmap/parser/mindmap.ts' }, ] -grammarFiles.forEach(({ input, output }) => { - shellExec(`npx nearleyc ${path.join(__dirname, '..', input)} -o ${path.join(__dirname, '..', output)}`) +grammarFiles.forEach(async ({ input, output }) => { + const outputPath = path.join(__dirname, '..', output) + await shellExec(`npx nearleyc ${path.join(__dirname, '..', input)} -o ${outputPath}`) .then(console.log) .catch(console.error) + + if (fs.existsSync(outputPath)) { + const content = fs.readFileSync(outputPath).toString() + // the 'declare var' that nearleyc generates may raise TS2300 error 'Duplicate identifier', so we need to ignore it + const newContent = content.replace(/declare\svar/g, '//@ts-ignore\ndeclare var') + fs.writeFileSync(outputPath, newContent) + } }) diff --git a/packages/pintora-diagrams/src/activity/__tests__/activity-config.spec.js b/packages/pintora-diagrams/src/activity/__tests__/activity-config.spec.js index c09c48e6..37ce2286 100644 --- a/packages/pintora-diagrams/src/activity/__tests__/activity-config.spec.js +++ b/packages/pintora-diagrams/src/activity/__tests__/activity-config.spec.js @@ -1,3 +1,4 @@ +//@ts-check import { parse } from '../parser' import { db } from '../db' import { getConf } from '../config' @@ -7,10 +8,10 @@ describe('activityDiagram config', () => { db.clear() }) - it('can parse config', () => { + it('can parse param clause', () => { const example = ` activityDiagram - @config { + @param { noteTextColor #ff0000 noteMargin 15 } @@ -24,10 +25,31 @@ activityDiagram ` parse(example) const ir = db.getDiagramIR() - const conf = getConf(ir.configParams) + const conf = getConf(ir) expect(conf).toMatchObject({ noteTextColor: '#ff0000', noteMargin: 15, }) }) + + it('can parse override clause', () => { + const example = ` +activityDiagram + @config({ + "activity": { + "edgesep": 4, + "edgeColor": "rgba(0, 0, 0, 1)", + "curvedEdge": true + } + }) + ` + parse(example) + const ir = db.getDiagramIR() + const conf = getConf(ir) + expect(conf).toMatchObject({ + edgesep: 4, + edgeColor: 'rgba(0, 0, 0, 1)', + curvedEdge: true, + }) + }) }) diff --git a/packages/pintora-diagrams/src/activity/artist.ts b/packages/pintora-diagrams/src/activity/artist.ts index a90ba06b..519dcf0a 100644 --- a/packages/pintora-diagrams/src/activity/artist.ts +++ b/packages/pintora-diagrams/src/activity/artist.ts @@ -69,8 +69,8 @@ function isEndAlikeKeyword(keyword: Keyword) { } const erArtist: IDiagramArtist = { - draw(ir) { - conf = getConf(ir.configParams) + draw(ir, config) { + conf = getConf(ir, config) model = new ArtistModel(ir) theme = (configApi.getConfig() as PintoraConfig).themeConfig.themeVariables // console.log('ir', JSON.stringify(ir, null, 2)) diff --git a/packages/pintora-diagrams/src/activity/config.ts b/packages/pintora-diagrams/src/activity/config.ts index 4667ab17..22c5a17e 100644 --- a/packages/pintora-diagrams/src/activity/config.ts +++ b/packages/pintora-diagrams/src/activity/config.ts @@ -1,6 +1,5 @@ import { PALETTE } from '../util/theme' -import { configApi, safeAssign, PintoraConfig } from '@pintora/core' -import { interpreteConfigs, ConfigParam } from '../util/style' +import { interpreteConfigs, makeConfigurator } from '../util/style' import { DEFAULT_FONT_FAMILY } from '../util/text' export type ActivityConf = { @@ -62,7 +61,7 @@ export const defaultConfig: ActivityConf = { fontFamily: DEFAULT_FONT_FAMILY, } -export const ACTIVITY_CONFIG_DIRECTIVE_RULES = { +export const ACTIVITY_PARAM_DIRECTIVE_RULES = { diagramPadding: { valueType: 'size' }, curvedEdge: { valueType: 'boolean' }, @@ -90,12 +89,16 @@ export const ACTIVITY_CONFIG_DIRECTIVE_RULES = { fontFamily: { valueType: 'string' }, } as const -export function getConf(configParams: ConfigParam[]) { - const globalConfig: PintoraConfig = configApi.getConfig() - const t = globalConfig.themeConfig?.themeVariables - const conf = { ...defaultConfig } - if (t) { - safeAssign(conf, { +export const configKey = 'activity' + +const configurator = makeConfigurator({ + defaultConfig, + configKey, + getConfigFromParamDirectives(configParams) { + return interpreteConfigs(ACTIVITY_PARAM_DIRECTIVE_RULES, configParams) + }, + getConfigFromTheme(t) { + return { actionBackground: t.primaryColor, actionBorderColor: t.primaryBorderColor, groupBackground: t.groupBackground, @@ -105,9 +108,8 @@ export function getConf(configParams: ConfigParam[]) { keywordBackground: t.textColor, labelBackground: t.canvasBackground || t.background1, labelTextColor: t.textColor, - }) - } - safeAssign(conf, { fontFamily: globalConfig.core.defaultFontFamily }, globalConfig.activity) - safeAssign(conf, interpreteConfigs(ACTIVITY_CONFIG_DIRECTIVE_RULES, configParams)) - return conf -} + } + }, +}) + +export const getConf = configurator.getConfig diff --git a/packages/pintora-diagrams/src/activity/db.ts b/packages/pintora-diagrams/src/activity/db.ts index 7aed706b..86766014 100644 --- a/packages/pintora-diagrams/src/activity/db.ts +++ b/packages/pintora-diagrams/src/activity/db.ts @@ -1,5 +1,7 @@ import { makeIdCounter } from '@pintora/core' -import { ConfigParam, ConfigAction } from '../util/style' +import { BaseDb } from '../util/base-db' +import { BaseDiagramIR } from '../util/ir' +import { OverrideAction, ParamAction } from '../util/style' import { dedent } from '../util/text' export type Action = { @@ -88,15 +90,15 @@ export type Step = { value: T } -export type ActivityDiagramIR = { +export type ActivityDiagramIR = BaseDiagramIR & { steps: Step[] notes: Note[] arrowLabels: ArrowLabel[] - configParams: ConfigParam[] } export type ApplyPart = - | ConfigAction + | ParamAction + | OverrideAction | { type: 'addAction' action: Action @@ -166,8 +168,7 @@ type DbApplyState = { parentId?: string | undefined } -class ActivityDb { - protected configParams: ConfigParam[] = [] +class ActivityDb extends BaseDb { protected steps: Step[] = [] protected notes: Note[] = [] protected arrowLabels: ArrowLabel[] = [] @@ -308,11 +309,14 @@ class ActivityDb { this.arrowLabels.push(value) break } - case 'addConfig': - { - this.configParams.push(part) - } + case 'addParam': { + this.configParams.push(part) break + } + case 'overrideConfig': { + this.addOverrideConfig(part) + break + } default: { } } @@ -330,15 +334,15 @@ class ActivityDb { steps: this.steps, notes: this.notes, arrowLabels: this.arrowLabels, - configParams: this.configParams, + ...this.getBaseDiagramIR(), } } clear() { + super.clear() this.idCounter.reset() this.steps = [] this.notes = [] - this.configParams = [] } } diff --git a/packages/pintora-diagrams/src/activity/parser/activityDiagram.ne b/packages/pintora-diagrams/src/activity/parser/activityDiagram.ne index 88556c65..21b5d9b7 100644 --- a/packages/pintora-diagrams/src/activity/parser/activityDiagram.ne +++ b/packages/pintora-diagrams/src/activity/parser/activityDiagram.ne @@ -1,22 +1,51 @@ +@preprocessor typescript +@lexer lexer +@builtin "whitespace.ne" +@include "../../util/parser-grammars/config.ne" +@include "../../util/parser-grammars/comment.ne" + @{% import * as moo from '@hikerpig/moo' -import { tv, textToCaseInsensitiveRegex, VALID_TEXT_REGEXP, COMMENT_LINE_REGEXP } from '../../util/parser-shared' +// import { tv, textToCaseInsensitiveRegex, VALID_TEXT_REGEXP, COMMENT_LINE_REGEXP } from '../../util/parser-shared' +import { + tv, + textToCaseInsensitiveRegex, + VALID_TEXT_REGEXP, + COMMENT_LINE_REGEXP, + CONFIG_DIRECTIVE, + QUOTED_WORD_REGEXP, + configLexerMainState, + configLexerConfigClauseState, + L_PAREN_REGEXP, + R_PAREN_REGEXP, +} from '../../util/parser-shared' import type { ApplyPart } from '../db' -let lexer = moo.compile({ - NEWLINE: { match: /\n/, lineBreaks: true }, - SPACE: { match: / /, lineBreaks: false }, - QUOTED_WORD: /\"[^"]*\"/, - SEMICOLON: /;/, - COLON: /:/, - L_PAREN: { match: /\(/ }, - R_PAREN: { match: /\)/ }, - L_BRACKET: { match: /\{/ }, - R_BRACKET: { match: /\}/ }, - START_NOTE: textToCaseInsensitiveRegex('@note'), - END_NOTE: textToCaseInsensitiveRegex('@end_note'), - COMMENT_LINE: COMMENT_LINE_REGEXP, +const COMMON_TOKEN_RULES = { VALID_TEXT: { match: VALID_TEXT_REGEXP, fallback: true }, +} + +let lexer = moo.states({ + main: { + NEWLINE: { match: /\n/, lineBreaks: true }, + SPACE: { match: / /, lineBreaks: false }, + QUOTED_WORD: QUOTED_WORD_REGEXP, + SEMICOLON: /;/, + COLON: /:/, + L_PAREN: L_PAREN_REGEXP, + R_PAREN: R_PAREN_REGEXP, + L_BRACKET: { match: /\{/ }, + R_BRACKET: { match: /\}/ }, + START_NOTE: textToCaseInsensitiveRegex('@note'), + END_NOTE: textToCaseInsensitiveRegex('@end_note'), + COMMENT_LINE: COMMENT_LINE_REGEXP, + ...configLexerMainState, + VALID_TEXT: { match: VALID_TEXT_REGEXP, fallback: true }, + }, + configClause: { + ...configLexerConfigClauseState, + ...COMMON_TOKEN_RULES, + }, }) let yy @@ -30,12 +59,6 @@ function extractChildren(o) { } %} -@preprocessor typescript -@lexer lexer -@builtin "whitespace.ne" -@include "../../util/parser-grammars/config.ne" -@include "../../util/parser-grammars/comment.ne" - start -> __ start {% (d) => d[1] %} | "activityDiagram" document __:? {% function(d) { @@ -77,6 +100,7 @@ statement -> | forkSentence | noteStatement | arrowLabelStatement + | paramClause _ %NEWLINE | configClause _ %NEWLINE | comment _ %NEWLINE diff --git a/packages/pintora-diagrams/src/component/__tests__/component-config.spec.js b/packages/pintora-diagrams/src/component/__tests__/component-config.spec.js index 62d3a089..e12c86fd 100644 --- a/packages/pintora-diagrams/src/component/__tests__/component-config.spec.js +++ b/packages/pintora-diagrams/src/component/__tests__/component-config.spec.js @@ -1,3 +1,4 @@ +//@ts-check import { parse } from '../parser' import db from '../db' import { getConf } from '../config' @@ -7,11 +8,11 @@ describe('componentDiagram config', () => { db.clear() }) - it('can parse config', () => { + it('can parse param clause', () => { const example = ` componentDiagram - @config groupBackground #000000 - @config { + @param groupBackground #000000 + @param { componentPadding 20 fontFamily serif } @@ -21,11 +22,30 @@ describe('componentDiagram config', () => { ` parse(example) const ir = db.getDiagramIR() - const conf = getConf(ir.configParams) + const conf = getConf(ir) expect(conf).toMatchObject({ groupBackground: '#000000', componentPadding: 20, fontFamily: 'serif', }) }) + + it('can parse override clause', () => { + const example = ` +componentDiagram + @config({ + "component": { + "componentPadding": 4, + "textColor": "rgba(0, 0, 0, 1)" + } + }) + ` + parse(example) + const ir = db.getDiagramIR() + const conf = getConf(ir) + expect(conf).toMatchObject({ + componentPadding: 4, + textColor: 'rgba(0, 0, 0, 1)', + }) + }) }) diff --git a/packages/pintora-diagrams/src/component/__tests__/component-parser.spec.js b/packages/pintora-diagrams/src/component/__tests__/component-parser.spec.js index 1b222d1e..729e517a 100644 --- a/packages/pintora-diagrams/src/component/__tests__/component-parser.spec.js +++ b/packages/pintora-diagrams/src/component/__tests__/component-parser.spec.js @@ -245,10 +245,10 @@ componentDiagram }) }) - it('can parse config clause', () => { + it('can parse param clause', () => { const example = stripStartEmptyLines(` componentDiagram - @config lineWidth 3 + @param lineWidth 3 `) parse(example) const ir = db.getDiagramIR() diff --git a/packages/pintora-diagrams/src/component/artist.ts b/packages/pintora-diagrams/src/component/artist.ts index 7c8e79e1..768349e6 100644 --- a/packages/pintora-diagrams/src/component/artist.ts +++ b/packages/pintora-diagrams/src/component/artist.ts @@ -40,9 +40,9 @@ type EdgeData = { } const componentArtist: IDiagramArtist = { - draw(ir) { + draw(ir, config) { // console.info('[artist] component', ir) - conf = getConf(ir.configParams) + conf = getConf(ir, config) const rootMark: Group = { type: 'group', diff --git a/packages/pintora-diagrams/src/component/config.ts b/packages/pintora-diagrams/src/component/config.ts index 2fab5d10..a07bcb23 100644 --- a/packages/pintora-diagrams/src/component/config.ts +++ b/packages/pintora-diagrams/src/component/config.ts @@ -1,6 +1,6 @@ import { PALETTE } from '../util/theme' -import { configApi, safeAssign, PintoraConfig, DEFAULT_FONT_FAMILY } from '@pintora/core' -import { interpreteConfigs, ConfigParam } from '../util/style' +import { DEFAULT_FONT_FAMILY } from '@pintora/core' +import { interpreteConfigs, makeConfigurator } from '../util/style' export type ComponentConf = { diagramPadding: number @@ -46,7 +46,7 @@ export const defaultConfig: ComponentConf = { interfaceSize: 16, } -export const COMPONENT_CONFIG_DIRECTIVE_RULES = { +export const COMPONENT_PARAM_DIRECTIVE_RULES = { diagramPadding: { valueType: 'size' }, componentPadding: { valueType: 'size' }, componentBackground: { valueType: 'color' }, @@ -62,20 +62,25 @@ export const COMPONENT_CONFIG_DIRECTIVE_RULES = { interfaceSize: { valueType: 'size' }, } as const -export function getConf(configParams: ConfigParam[]) { - const conf = { ...defaultConfig } - const globalConfig: PintoraConfig = configApi.getConfig() - const t = globalConfig.themeConfig.themeVariables - safeAssign(conf, { - componentBackground: t.primaryColor, - componentBorderColor: t.primaryBorderColor, - groupBackground: t.groupBackground, - groupBorderColor: t.primaryBorderColor, - relationLineColor: t.primaryColor, - labelBackground: t.canvasBackground || t.background1, - textColor: t.textColor, - }) - safeAssign(conf, { fontFamily: globalConfig.core.defaultFontFamily }, globalConfig.component || {}) - safeAssign(conf, interpreteConfigs(COMPONENT_CONFIG_DIRECTIVE_RULES, configParams)) - return conf -} +export const configKey = 'component' + +const configurator = makeConfigurator({ + defaultConfig, + configKey, + getConfigFromParamDirectives(configParams) { + return interpreteConfigs(COMPONENT_PARAM_DIRECTIVE_RULES, configParams) + }, + getConfigFromTheme(t) { + return { + componentBackground: t.primaryColor, + componentBorderColor: t.primaryBorderColor, + groupBackground: t.groupBackground, + groupBorderColor: t.primaryBorderColor, + relationLineColor: t.primaryColor, + labelBackground: t.canvasBackground || t.background1, + textColor: t.textColor, + } + }, +}) + +export const getConf = configurator.getConfig diff --git a/packages/pintora-diagrams/src/component/db.ts b/packages/pintora-diagrams/src/component/db.ts index 78cdea3d..128126d4 100644 --- a/packages/pintora-diagrams/src/component/db.ts +++ b/packages/pintora-diagrams/src/component/db.ts @@ -1,4 +1,6 @@ -import { ConfigParam } from '../util/style' +import { BaseDb } from '../util/base-db' +import { BaseDiagramIR } from '../util/ir' +import { OverrideAction, ParamAction } from '../util/style' type Component = { name: string @@ -45,6 +47,8 @@ export type Relationship = { type UMLElement = Component | Interface | CGroup | Relationship type ApplyPart = + | ParamAction + | OverrideAction | { type: 'component' name: string @@ -62,18 +66,12 @@ type ApplyPart = label?: string children: UMLElement[] } - | { - type: 'addConfig' - key: string - value: string - } -export type ComponentDiagramIR = { +export type ComponentDiagramIR = BaseDiagramIR & { components: Record interfaces: Record groups: Record relationships: Relationship[] - configParams: ConfigParam[] } export enum LineType { @@ -83,13 +81,12 @@ export enum LineType { DOTTED = 'DOTTED', } -class ComponentDb { +class ComponentDb extends BaseDb { protected aliases: Record = {} protected components: Record = {} protected interfaces: Record = {} protected groups: Record = {} protected relationships: Relationship[] = [] - protected configParams: ConfigParam[] = [] LineType = LineType @@ -125,11 +122,14 @@ class ComponentDb { if (!part) return // console.log('apply', part) switch (part.type) { - case 'addConfig': - { - this.configParams.push(part) - } + case 'addParam': { + this.configParams.push(part) break + } + case 'overrideConfig': { + this.addOverrideConfig(part) + break + } default: { } } @@ -199,17 +199,17 @@ class ComponentDb { interfaces: this.interfaces, groups: this.groups, relationships: this.relationships, - configParams: this.configParams, + ...this.getBaseDiagramIR(), } } - clear() { + override clear() { + super.clear() this.aliases = {} this.components = {} this.interfaces = {} this.groups = {} this.relationships = [] - this.configParams = [] } } diff --git a/packages/pintora-diagrams/src/component/index.ts b/packages/pintora-diagrams/src/component/index.ts index ef697e13..412c00dc 100644 --- a/packages/pintora-diagrams/src/component/index.ts +++ b/packages/pintora-diagrams/src/component/index.ts @@ -2,7 +2,7 @@ import { IDiagram } from '@pintora/core' import db, { ComponentDiagramIR } from './db' import artist from './artist' import { parse } from './parser' -import { ComponentConf } from './config' +import { ComponentConf, configKey } from './config' export { ComponentConf, ComponentDiagramIR } @@ -16,7 +16,7 @@ export const componentDiagram: IDiagram = { }, }, artist, - configKey: 'component', + configKey, clear() { db.clear() }, diff --git a/packages/pintora-diagrams/src/component/parser/componentDiagram.ne b/packages/pintora-diagrams/src/component/parser/componentDiagram.ne index abddc163..8ce1d02f 100644 --- a/packages/pintora-diagrams/src/component/parser/componentDiagram.ne +++ b/packages/pintora-diagrams/src/component/parser/componentDiagram.ne @@ -1,10 +1,23 @@ +@preprocessor typescript +@lexer lexer +@builtin "whitespace.ne" +@include "../../util/parser-grammars/config.ne" +@include "../../util/parser-grammars/comment.ne" + @{% import * as moo from '@hikerpig/moo' -import { tv, VALID_TEXT_REGEXP, COMMENT_LINE_REGEXP } from '../../util/parser-shared' +import { + tv, + VALID_TEXT_REGEXP, + COMMENT_LINE_REGEXP, + CONFIG_DIRECTIVE, + configLexerMainState, + configLexerConfigClauseState, +} from '../../util/parser-shared' const commonTopRules = { NEWLINE: { match: /\n/, lineBreaks: true }, - SPACE: {match: /\s+/, lineBreaks: true}, + SPACE: { match: /\s+/, lineBreaks: true }, L_SQ_BRACKET: { match: /\[/ }, R_SQ_BRACKET: { match: /\]/ }, COMMENT_LINE: COMMENT_LINE_REGEXP, @@ -20,6 +33,11 @@ let lexer = moo.states({ ...commonTopRules, L_BRACKET: { match: /\{/ }, R_BRACKET: { match: /\}/ }, + ...configLexerMainState, + ...commonTextRules, + }, + configClause: { + ...configLexerConfigClauseState, ...commonTextRules, }, }) @@ -31,12 +49,6 @@ export function setYY(v) { } %} -@preprocessor typescript -@lexer lexer -@builtin "whitespace.ne" -@include "../../util/parser-grammars/config.ne" -@include "../../util/parser-grammars/comment.ne" - start -> __ start | "componentDiagram" document {% function(d) { @@ -66,7 +78,8 @@ statement -> return d[0] } %} - | configClause _ %NEWLINE + | paramClause _ %NEWLINE + | configOpenCloseClause _ %NEWLINE | comment _ %NEWLINE UMLElement -> @@ -215,3 +228,4 @@ relationLine -> | "<.." {% (d) => ({ lineType: yy.LineType.DOTTED_ARROW, isReversed: true }) %} | "--" {% (d) => ({ lineType: yy.LineType.STRAIGHT }) %} | ".." {% (d) => ({ lineType: yy.LineType.DOTTED }) %} + diff --git a/packages/pintora-diagrams/src/er/__tests__/er-config.spec.js b/packages/pintora-diagrams/src/er/__tests__/er-config.spec.js index 92dade61..cf605446 100644 --- a/packages/pintora-diagrams/src/er/__tests__/er-config.spec.js +++ b/packages/pintora-diagrams/src/er/__tests__/er-config.spec.js @@ -1,3 +1,4 @@ +//@ts-check import { parse } from '../parser' import db from '../db' import { getConf } from '../config' @@ -6,19 +7,19 @@ describe('er config', () => { afterEach(() => { db.clear() }) - it('can parse config clause', () => { + it('can parse param clause', () => { const example = ` erDiagram - @config fill #aabb00 - @config fontSize 16 - @config { + @param fill #aabb00 + @param fontSize 16 + @param { layoutDirection LR } ORDER ` parse(example) const ir = db.getDiagramIR() - const conf = getConf(ir.configParams) + const conf = getConf(ir) // console.log('ir', JSON.stringify(ir, null, 2)) // console.log(conf) expect(conf).toMatchObject({ @@ -26,4 +27,23 @@ erDiagram fontSize: 16, }) }) + + it('can parse override clause', () => { + const example = ` +erDiagram + @config({ + "er": { + "borderRadius": 4 + } + }) + ORDER + ` + parse(example) + const ir = db.getDiagramIR() + const conf = getConf(ir) + // console.log('ir', JSON.stringify(ir, null, 2)) + expect(conf).toMatchObject({ + borderRadius: 4, + }) + }) }) diff --git a/packages/pintora-diagrams/src/er/artist.ts b/packages/pintora-diagrams/src/er/artist.ts index d835fd79..95a44656 100644 --- a/packages/pintora-diagrams/src/er/artist.ts +++ b/packages/pintora-diagrams/src/er/artist.ts @@ -23,7 +23,7 @@ let conf: ErConf const erArtist: IDiagramArtist = { draw(ir, config) { - conf = getConf(ir.configParams) + conf = getConf(ir) // Now we have to construct the diagram in a specific way: // --- // 1. Create all the entities in the svg node at 0,0, but with the correct dimensions (allowing for text content) diff --git a/packages/pintora-diagrams/src/er/config.ts b/packages/pintora-diagrams/src/er/config.ts index cc536c01..2bd3343b 100644 --- a/packages/pintora-diagrams/src/er/config.ts +++ b/packages/pintora-diagrams/src/er/config.ts @@ -1,6 +1,6 @@ import { PALETTE } from '../util/theme' -import { configApi, safeAssign, PintoraConfig, DEFAULT_FONT_FAMILY } from '@pintora/core' -import { interpreteConfigs, ConfigParam } from '../util/style' +import { DEFAULT_FONT_FAMILY } from '@pintora/core' +import { interpreteConfigs, makeConfigurator } from '../util/style' export type ErConf = { diagramPadding: number @@ -57,7 +57,7 @@ export const defaultConfig: ErConf = { fontFamily: DEFAULT_FONT_FAMILY, } -export const ER_CONFIG_DIRECTIVE_RULES = { +export const ER_PARAM_DIRECTIVE_RULES = { curvedEdge: { valueType: 'boolean' }, layoutDirection: { valueType: 'string' }, borderRadius: { valueType: 'size' }, @@ -71,21 +71,24 @@ export const ER_CONFIG_DIRECTIVE_RULES = { fontFamily: { valueType: 'string' }, } as const -export function getConf(configParams: ConfigParam[]) { - const globalConfig: PintoraConfig = configApi.getConfig() - const t = globalConfig.themeConfig?.themeVariables - const conf = { ...defaultConfig } - if (t) { - safeAssign(conf, { +export const configKey = 'er' + +const configurator = makeConfigurator({ + defaultConfig, + configKey, + getConfigFromParamDirectives(configParams) { + return interpreteConfigs(ER_PARAM_DIRECTIVE_RULES, configParams) + }, + getConfigFromTheme(t, conf) { + return { stroke: t.primaryBorderColor, fill: t.primaryColor, edgeColor: t.primaryLineColor, textColor: t.textColor, labelBackground: t.canvasBackground || t.background1, attributeFill: t.lightestBackground || conf.attributeFill, - }) - } - safeAssign(conf, { fontFamily: globalConfig.core.defaultFontFamily }, globalConfig.er || {}) - safeAssign(conf, interpreteConfigs(ER_CONFIG_DIRECTIVE_RULES, configParams)) - return conf -} + } + }, +}) + +export const getConf = configurator.getConfig diff --git a/packages/pintora-diagrams/src/er/db.ts b/packages/pintora-diagrams/src/er/db.ts index 18f8efa4..2d7cbcb5 100644 --- a/packages/pintora-diagrams/src/er/db.ts +++ b/packages/pintora-diagrams/src/er/db.ts @@ -1,4 +1,6 @@ +import { BaseDiagramIR } from '../util/ir' import { ConfigParam } from '../util/style' +import { BaseDb } from '../util/base-db' export enum Cardinality { ZERO_OR_ONE = 'ZERO_OR_ONE', @@ -36,19 +38,17 @@ export type RelSpec = { relType: Identification } -export type ErDiagramIR = { +export type ErDiagramIR = BaseDiagramIR & { entities: Record relationships: Relationship[] - configParams: ConfigParam[] } -class ErDb { +export class ErDb extends BaseDb { Cardinality = Cardinality Identification = Identification entities: Record = {} relationships: Relationship[] = [] - configParams: ErDiagramIR['configParams'] = [] addEntity(name: string) { if (!this.entities[name]) { @@ -71,16 +71,19 @@ class ErDb { entities: this.entities, relationships: this.relationships, configParams: this.configParams, + overrideConfig: this.overrideConfig, } } addAttributes(name: string, attributes: Attribute[]) { const entity = this.addEntity(name) entity.attributes.push(...attributes) } - addConfig(styleParam: ConfigParam) { + addParam(styleParam: ConfigParam) { this.configParams.push(styleParam) } - clear() { + + override clear() { + super.clear() this.entities = {} this.relationships = [] this.configParams = [] diff --git a/packages/pintora-diagrams/src/er/index.ts b/packages/pintora-diagrams/src/er/index.ts index 994b00ad..5ddf75d6 100644 --- a/packages/pintora-diagrams/src/er/index.ts +++ b/packages/pintora-diagrams/src/er/index.ts @@ -2,7 +2,7 @@ import { IDiagram } from '@pintora/core' import db, { ErDiagramIR } from './db' import artist from './artist' import { parse } from './parser' -import { ErConf } from './config' +import { configKey, ErConf } from './config' export { ErDiagramIR, ErConf } @@ -15,7 +15,7 @@ export const erDiagram: IDiagram = { }, }, artist, - configKey: 'er', + configKey, clear() { db.clear() }, diff --git a/packages/pintora-diagrams/src/er/parser/erDiagram.ne b/packages/pintora-diagrams/src/er/parser/erDiagram.ne index e29fd85d..e6524993 100644 --- a/packages/pintora-diagrams/src/er/parser/erDiagram.ne +++ b/packages/pintora-diagrams/src/er/parser/erDiagram.ne @@ -1,6 +1,20 @@ +@preprocessor typescript +@lexer lexer +@builtin "whitespace.ne" +@include "../../util/parser-grammars/config.ne" +@include "../../util/parser-grammars/comment.ne" + @{% import * as moo from '@hikerpig/moo' -import { tv, VALID_TEXT_REGEXP, COMMENT_LINE_REGEXP } from '../../util/parser-shared' +import { + tv, + textToCaseInsensitiveRegex, + VALID_TEXT_REGEXP, + COMMENT_LINE_REGEXP, + CONFIG_DIRECTIVE, + QUOTED_WORD_REGEXP, +} from '../../util/parser-shared' +import { ErDb } from '../db' let lexer = moo.compile({ NEWLINE: { match: /\n/, lineBreaks: true }, @@ -15,24 +29,19 @@ let lexer = moo.compile({ COLON: /:/, LEFT_BRACE: /\{/, RIGHT_BRACE: /\}/, - CONFIG_DIRECTIVE: /@config/, // for config.ne + PARAM_DIRECTIVE: /@param/, // for config.ne COMMENT_LINE: COMMENT_LINE_REGEXP, + CONFIG_DIRECTIVE, VALID_TEXT: { match: VALID_TEXT_REGEXP, fallback: true }, }) -let yy +let yy: ErDb export function setYY(v) { yy = v } %} -@preprocessor typescript -@lexer lexer -@builtin "whitespace.ne" -@include "../../util/parser-grammars/config.ne" -@include "../../util/parser-grammars/comment.ne" - start -> __ start | "erDiagram" document @@ -61,10 +70,15 @@ statement -> %} | entityName "{":? "}":? {% (d) => yy.addEntity(tv(d[0])) %} | entityName {% (d) => yy.addEntity(tv(d[0])) %} - | configClause _ %NEWLINE {% + | paramClause _ %NEWLINE {% function(d) { const { type, ...styleParam } = d[0] - yy.addConfig(styleParam) + yy.addParam(styleParam) + } + %} + | configClause _ %NEWLINE {% + function(d) { + yy.addOverrideConfig(d[0]) } %} | comment _ %NEWLINE diff --git a/packages/pintora-diagrams/src/mindmap/__tests__/mindmap-config.spec.js b/packages/pintora-diagrams/src/mindmap/__tests__/mindmap-config.spec.js index 49b975be..23bc3fc3 100644 --- a/packages/pintora-diagrams/src/mindmap/__tests__/mindmap-config.spec.js +++ b/packages/pintora-diagrams/src/mindmap/__tests__/mindmap-config.spec.js @@ -1,3 +1,4 @@ +//@ts-check import { parse } from '../parser' import db from '../db' import { getConf } from '../config' @@ -7,11 +8,11 @@ describe('mindmap config', () => { db.clear() }) - it('can parse config', () => { + it('can parse param clause', () => { const example = ` mindmap - @config maxFontSize 16 - @config { + @param maxFontSize 16 + @param { l1NodeBgColor #555555 l2NodeBgColor red } @@ -19,11 +20,28 @@ describe('mindmap config', () => { ` parse(example) const ir = db.getDiagramIR() - const conf = getConf(ir.configParams) + const conf = getConf(ir) expect(conf).toMatchObject({ maxFontSize: 16, l1NodeBgColor: '#555555', l2NodeBgColor: 'red', }) }) + + it('can parse override clause', () => { + const example = ` + mindmap + @config({ + "mindmap": { + "nodeBgColor": "#ff0000" + } + }) + ` + parse(example) + const ir = db.getDiagramIR() + const conf = getConf(ir) + expect(conf).toMatchObject({ + nodeBgColor: '#ff0000', + }) + }) }) diff --git a/packages/pintora-diagrams/src/mindmap/artist.ts b/packages/pintora-diagrams/src/mindmap/artist.ts index df180cda..03dfdea3 100644 --- a/packages/pintora-diagrams/src/mindmap/artist.ts +++ b/packages/pintora-diagrams/src/mindmap/artist.ts @@ -32,7 +32,7 @@ let mmDraw: MMDraw const mmArtist: IDiagramArtist = { draw(ir, config) { - conf = Object.assign(getConf(ir.configParams), config || {}) + conf = Object.assign(getConf(ir), config || {}) mmDraw = new MMDraw(ir) if (isDev) { ;(window as any).mmDraw = mmDraw diff --git a/packages/pintora-diagrams/src/mindmap/config.ts b/packages/pintora-diagrams/src/mindmap/config.ts index 53e1b44a..1f3ffb60 100644 --- a/packages/pintora-diagrams/src/mindmap/config.ts +++ b/packages/pintora-diagrams/src/mindmap/config.ts @@ -1,5 +1,5 @@ import { configApi, DEFAULT_FONT_FAMILY, MarkAttrs, PintoraConfig, safeAssign, tinycolor } from '@pintora/core' -import { ConfigParam, interpreteConfigs } from '../util/style' +import { ConfigParam, interpreteConfigs, makeConfigurator } from '../util/style' import { PALETTE } from '../util/theme' export type MindmapConf = { @@ -78,7 +78,7 @@ export const defaultConfig: MindmapConf = { l2NodeTextColor: PALETTE.normalDark, } -export const MINDMAP_CONFIG_DIRECTIVE_RULES = { +export const MINDMAP_PARAM_DIRECTIVE_RULES = { // curvedEdge: { valueType: 'boolean' }, diagramPadding: { valueType: 'size' }, layoutDirection: { valueType: 'layoutDirection' }, @@ -97,17 +97,21 @@ export const MINDMAP_CONFIG_DIRECTIVE_RULES = { l2NodeTextColor: { valueType: 'color' }, } as const -export function getConf(configParams: ConfigParam[]) { - const globalConfig: PintoraConfig = configApi.getConfig() - const t = globalConfig.themeConfig?.themeVariables - const conf: MindmapConf = { ...defaultConfig } - if (t) { +export const configKey = 'mindmap' + +const configurator = makeConfigurator({ + defaultConfig, + configKey, + getConfigFromParamDirectives(configParams) { + return interpreteConfigs(MINDMAP_PARAM_DIRECTIVE_RULES, configParams) + }, + getConfigFromTheme(t) { const { nodeBgColor, l1NodeBgColor, l2NodeBgColor } = getColorsByPrimary(t.primaryColor, t.isDark) const nodeBgColorInstance = tinycolor(nodeBgColor) const bgIsLight = nodeBgColorInstance.isLight() const textColorIsLight = tinycolor(t.textColor).isLight() const normalNodeTextColor = bgIsLight !== textColorIsLight ? t.textColor : t.canvasBackground - safeAssign(conf, { + return { nodeBgColor, textColor: normalNodeTextColor, edgeColor: t.primaryLineColor, @@ -115,9 +119,8 @@ export function getConf(configParams: ConfigParam[]) { l1NodeTextColor: t.textColor, l2NodeBgColor, l2NodeTextColor: t.textColor, - }) - } - safeAssign(conf, { fontFamily: globalConfig.core.defaultFontFamily }, globalConfig.mindmap || {}) - safeAssign(conf, interpreteConfigs(MINDMAP_CONFIG_DIRECTIVE_RULES, configParams)) - return conf -} + } + }, +}) + +export const getConf = configurator.getConfig diff --git a/packages/pintora-diagrams/src/mindmap/db.ts b/packages/pintora-diagrams/src/mindmap/db.ts index afa0156c..3704ebe8 100644 --- a/packages/pintora-diagrams/src/mindmap/db.ts +++ b/packages/pintora-diagrams/src/mindmap/db.ts @@ -1,5 +1,7 @@ import { makeIdCounter } from '@pintora/core' -import { ConfigParam, ConfigAction } from '../util/style' +import { BaseDb } from '../util/base-db' +import { BaseDiagramIR } from '../util/ir' +import { ConfigParam, OverrideAction, ParamAction } from '../util/style' export type LevelNotation = { depth: number @@ -33,7 +35,7 @@ export class MMTree { add(item: MMItem) { let cur = this.current - while (Math.abs(cur.depth) >= Math.abs(item.depth)) { + while (cur && Math.abs(cur.depth) >= Math.abs(item.depth)) { if (cur.id === this.root.id) break if (cur.parent) { cur = this.nodes.get(cur.parent) @@ -49,7 +51,6 @@ export class MMTree { const newNode = this.addItemToNode(item) this.addChild(cur, newNode) this.current = newNode - } else { } } @@ -94,7 +95,8 @@ export class MMTree { } export type ApplyPart = - | ConfigAction + | ParamAction + | OverrideAction | { type: 'addItem' depth: number @@ -102,13 +104,11 @@ export type ApplyPart = isReverse?: boolean } -export type MindmapIR = { +export type MindmapIR = BaseDiagramIR & { trees: IMMDataTree[] - configParams: ConfigParam[] } -class MindmapDb { - configParams: ConfigParam[] = [] +class MindmapDb extends BaseDb { items: MMItem[] = [] private currentTree: MMTree | null @@ -123,12 +123,12 @@ class MindmapDb { getDiagramIR(): MindmapIR { return { + ...this.getBaseDiagramIR(), trees: this.trees.map(tree => { const data = tree.serialize() this.treeMap.set(data, tree) return data }), - configParams: this.configParams, } } @@ -153,10 +153,14 @@ class MindmapDb { this.addItem({ ...data, id: this.makeId(), isReverse: Boolean(part.isReverse), children: [] }) break } - case 'addConfig': { + case 'addParam': { this.configParams.push(part) break } + case 'overrideConfig': { + this.addOverrideConfig(part) + break + } } } @@ -164,11 +168,11 @@ class MindmapDb { return this.treeMap.get(data) } - clear() { + override clear() { + super.clear() this.idCounter.reset() this.trees = [] this.items = [] - this.configParams = [] this.currentTree = null } } diff --git a/packages/pintora-diagrams/src/mindmap/index.ts b/packages/pintora-diagrams/src/mindmap/index.ts index ea4ca9a6..abffa22c 100644 --- a/packages/pintora-diagrams/src/mindmap/index.ts +++ b/packages/pintora-diagrams/src/mindmap/index.ts @@ -2,7 +2,7 @@ import { IDiagram } from '@pintora/core' import db, { MindmapIR } from './db' import artist from './artist' import { parse } from './parser' -import { MindmapConf } from './config' +import { configKey, MindmapConf } from './config' export { MindmapIR, MindmapConf } @@ -15,7 +15,7 @@ export const mindmap: IDiagram = { }, }, artist, - configKey: 'mindmap', + configKey, clear() { db.clear() }, diff --git a/packages/pintora-diagrams/src/mindmap/parser/mindmap.ne b/packages/pintora-diagrams/src/mindmap/parser/mindmap.ne index ce8213d2..366026a1 100644 --- a/packages/pintora-diagrams/src/mindmap/parser/mindmap.ne +++ b/packages/pintora-diagrams/src/mindmap/parser/mindmap.ne @@ -1,19 +1,49 @@ +@preprocessor typescript +@lexer lexer +@builtin "whitespace.ne" +@include "../../util/parser-grammars/config.ne" +@include "../../util/parser-grammars/comment.ne" + @{% import * as moo from '@hikerpig/moo' -import { tv, VALID_TEXT_REGEXP, MOO_NEWLINE, COMMENT_LINE_REGEXP } from '../../util/parser-shared' +import { + tv, + MOO_NEWLINE, + VALID_TEXT_REGEXP, + COMMENT_LINE_REGEXP, + CONFIG_DIRECTIVE, + L_PAREN_REGEXP, + R_PAREN_REGEXP, + configLexerMainState, + configLexerConfigClauseState, +} from '../../util/parser-shared' + import type { ApplyPart } from '../db' -let lexer = moo.compile({ - NEWLINE: MOO_NEWLINE, - SPACE: { match: /[ ]+/, lineBreaks: false }, - ASTERISKS: /\*+/, - PLUS: /\++/, - MINUS: /\-+/, - SEMICOLON: /;/, - COLON: /:/, - CONFIG_DIRECTIVE: /@config/, // for config.ne - COMMENT_LINE: COMMENT_LINE_REGEXP, +const COMMON_TOKEN_RULES = { VALID_TEXT: { match: VALID_TEXT_REGEXP, fallback: true }, +} + +let lexer = moo.states({ + main: { + NEWLINE: MOO_NEWLINE, + SPACE: { match: /[ ]+/, lineBreaks: false }, + ASTERISKS: /\*+/, + PLUS: /\++/, + MINUS: /\-+/, + SEMICOLON: /;/, + COLON: /:/, + PARAM_DIRECTIVE, + ...configLexerMainState, + L_PAREN: L_PAREN_REGEXP, + R_PAREN: R_PAREN_REGEXP, + COMMENT_LINE: COMMENT_LINE_REGEXP, + ...COMMON_TOKEN_RULES, + }, + configClause: { + ...configLexerConfigClauseState, + ...COMMON_TOKEN_RULES, + }, }) let yy @@ -23,12 +53,6 @@ export function setYY(v) { } %} -@preprocessor typescript -@lexer lexer -@builtin "whitespace.ne" -@include "../../util/parser-grammars/config.ne" -@include "../../util/parser-grammars/comment.ne" - start -> __ start | "mindmap" document @@ -61,7 +85,8 @@ statement -> return { type: 'addItem', label, depth: notation.depth, isReverse: notation.isReverse } as ApplyPart } %} - | configClause _ %NEWLINE + | paramClause _ %NEWLINE + | configOpenCloseClause %NEWLINE | comment _ %NEWLINE levelNotation -> diff --git a/packages/pintora-diagrams/src/sequence/__tests__/sequence-config.spec.js b/packages/pintora-diagrams/src/sequence/__tests__/sequence-config.spec.js new file mode 100644 index 00000000..4d3d6047 --- /dev/null +++ b/packages/pintora-diagrams/src/sequence/__tests__/sequence-config.spec.js @@ -0,0 +1,72 @@ +//@ts-check +import { stripStartEmptyLines } from '@pintora/test-shared' +import { parse } from '../parser' +import { db } from '../db' +import { getConf } from '../config' + +describe('er config', () => { + afterEach(() => { + db.clear() + }) + + it('can parse param clause', () => { + const example = stripStartEmptyLines(` +sequenceDiagram + @param noteTextColor #00bbaa + @param messageFontSize 20 + `) + parse(example) + const ir = db.getDiagramIR() + // console.log(JSON.stringify(ir, null, 2)) + expect(ir.configParams).toMatchObject([ + { + key: 'noteTextColor', + value: '#00bbaa', + }, + { + key: 'messageFontSize', + value: '20', + }, + ]) + }) + + it('can parse param clause inside brackets', () => { + const example = stripStartEmptyLines(` +sequenceDiagram + @param { + noteTextColor #00bbaa + messageFontSize 20 + } + `) + parse(example) + const ir = db.getDiagramIR() + expect(ir.configParams).toMatchObject([ + { + key: 'noteTextColor', + value: '#00bbaa', + }, + { + key: 'messageFontSize', + value: '20', + }, + ]) + }) + + it('can parse override clause', () => { + const example = ` +sequenceDiagram + @config({ + "sequence": { + "actorWidth": 4 + } + }) + ` + parse(example) + const ir = db.getDiagramIR() + const conf = getConf(ir) + // console.log('ir', JSON.stringify(ir, null, 2)) + expect(conf).toMatchObject({ + actorWidth: 4, + }) + }) +}) diff --git a/packages/pintora-diagrams/src/sequence/__tests__/sequence-parser.spec.js b/packages/pintora-diagrams/src/sequence/__tests__/sequence-parser.spec.js index 46ae3d21..815b8577 100644 --- a/packages/pintora-diagrams/src/sequence/__tests__/sequence-parser.spec.js +++ b/packages/pintora-diagrams/src/sequence/__tests__/sequence-parser.spec.js @@ -459,49 +459,6 @@ sequenceDiagram ]) }) - it('can parse config clause', () => { - const example = stripStartEmptyLines(` -sequenceDiagram - @config noteTextColor #00bbaa - @config messageFontSize 20 - `) - parse(example) - const ir = db.getDiagramIR() - // console.log(JSON.stringify(ir, null, 2)) - expect(ir.configParams).toMatchObject([ - { - key: 'noteTextColor', - value: '#00bbaa', - }, - { - key: 'messageFontSize', - value: '20', - }, - ]) - }) - - it('can parse config clause inside brackets', () => { - const example = stripStartEmptyLines(` -sequenceDiagram - @config { - noteTextColor #00bbaa - messageFontSize 20 - } - `) - parse(example) - const ir = db.getDiagramIR() - expect(ir.configParams).toMatchObject([ - { - key: 'noteTextColor', - value: '#00bbaa', - }, - { - key: 'messageFontSize', - value: '20', - }, - ]) - }) - it('can parse comments', () => { const example = stripStartEmptyLines(` sequenceDiagram diff --git a/packages/pintora-diagrams/src/sequence/artist.ts b/packages/pintora-diagrams/src/sequence/artist.ts index 76fbedf5..7ca9c5e5 100644 --- a/packages/pintora-diagrams/src/sequence/artist.ts +++ b/packages/pintora-diagrams/src/sequence/artist.ts @@ -54,7 +54,7 @@ const GROUP_LABEL_MAP = { const sequenceArtist: IDiagramArtist = { draw(ir, config?) { // console.log('[draw]', ir, config) - conf = getConf(ir.configParams, config) + conf = getConf(ir, config) theme = (configApi.getConfig() as PintoraConfig).themeConfig.themeVariables model.init() logger.debug(`C:${JSON.stringify(conf, null, 2)}`) diff --git a/packages/pintora-diagrams/src/sequence/config.ts b/packages/pintora-diagrams/src/sequence/config.ts index 56cb1374..2e065bb7 100644 --- a/packages/pintora-diagrams/src/sequence/config.ts +++ b/packages/pintora-diagrams/src/sequence/config.ts @@ -1,7 +1,7 @@ import { DEFAULT_FONT_FAMILY, MarkAttrs, PintoraConfig } from '@pintora/core' import { PALETTE } from '../util/theme' import { configApi, safeAssign } from '@pintora/core' -import { interpreteConfigs, ConfigParam } from '../util/style' +import { interpreteConfigs, ConfigParam, makeConfigurator } from '../util/style' export type SequenceConf = { noteWidth: number @@ -84,7 +84,7 @@ export const defaultConfig: SequenceConf = { showSequenceNumbers: false, } -export const SEQUENCE_CONFIG_DIRECTIVE_RULES = { +export const SEQUENCE_PARAM_DIRECTIVE_RULES = { noteMargin: { valueType: 'size' }, boxMargin: { valueType: 'size' }, activationWidth: { valueType: 'size' }, @@ -110,27 +110,55 @@ export const SEQUENCE_CONFIG_DIRECTIVE_RULES = { dividerTextColor: { valueType: 'color' }, } as const -export function getConf(configParams: ConfigParam[], extraConfig: SequenceConf | undefined) { - const globalConfig: PintoraConfig = configApi.getConfig() - const t = globalConfig.themeConfig.themeVariables - const conf = { ...defaultConfig } - safeAssign(conf, { - actorBackground: t.primaryColor, - actorBorderColor: t.primaryBorderColor, - messageTextColor: t.textColor, - loopLineColor: t.primaryColor, - actorTextColor: t.textColor, - actorLineColor: t.primaryLineColor, - noteTextColor: t.noteTextColor || t.textColor, - activationBackground: t.background1, - dividerTextColor: t.secondaryTextColor, - }) - safeAssign( - conf, - { messageFontFamily: globalConfig.core.defaultFontFamily }, - globalConfig.sequence || {}, - extraConfig || {}, - ) - safeAssign(conf, interpreteConfigs(SEQUENCE_CONFIG_DIRECTIVE_RULES, configParams)) - return conf -} +export const configKey = 'sequence' + +const configurator = makeConfigurator({ + defaultConfig, + configKey, + getConfigFromGlobalConfig(globalConfig) { + return safeAssign({ messageFontFamily: globalConfig.core.defaultFontFamily }) + }, + getConfigFromParamDirectives(configParams) { + return interpreteConfigs(SEQUENCE_PARAM_DIRECTIVE_RULES, configParams) + }, + getConfigFromTheme(t) { + return { + actorBackground: t.primaryColor, + actorBorderColor: t.primaryBorderColor, + messageTextColor: t.textColor, + loopLineColor: t.primaryColor, + actorTextColor: t.textColor, + actorLineColor: t.primaryLineColor, + noteTextColor: t.noteTextColor || t.textColor, + activationBackground: t.background1, + dividerTextColor: t.secondaryTextColor, + } + }, +}) + +export const getConf = configurator.getConfig + +// export function getConf(configParams: ConfigParam[], extraConfig: SequenceConf | undefined) { +// const globalConfig: PintoraConfig = configApi.getConfig() +// const t = globalConfig.themeConfig.themeVariables +// const conf = { ...defaultConfig } +// safeAssign(conf, { +// actorBackground: t.primaryColor, +// actorBorderColor: t.primaryBorderColor, +// messageTextColor: t.textColor, +// loopLineColor: t.primaryColor, +// actorTextColor: t.textColor, +// actorLineColor: t.primaryLineColor, +// noteTextColor: t.noteTextColor || t.textColor, +// activationBackground: t.background1, +// dividerTextColor: t.secondaryTextColor, +// }) +// safeAssign( +// conf, +// { messageFontFamily: globalConfig.core.defaultFontFamily }, +// globalConfig.sequence || {}, +// extraConfig || {}, +// ) +// safeAssign(conf, interpreteConfigs(SEQUENCE_PARAM_DIRECTIVE_RULES, configParams)) +// return conf +// } diff --git a/packages/pintora-diagrams/src/sequence/db.ts b/packages/pintora-diagrams/src/sequence/db.ts index 91fa5d3c..a86bf57b 100644 --- a/packages/pintora-diagrams/src/sequence/db.ts +++ b/packages/pintora-diagrams/src/sequence/db.ts @@ -1,5 +1,7 @@ import { logger, OrNull, parseColor } from '@pintora/core' -import { ConfigParam } from '../util/style' +import { ConfigParam, OverrideAction, ParamAction } from '../util/style' +import { BaseDb } from '../util/base-db' +import { BaseDiagramIR } from '../util/ir' export interface WrappedText { text: string @@ -85,17 +87,16 @@ export type GroupAttrs = { background: string | null } -export type SequenceDiagramIR = { +export type SequenceDiagramIR = BaseDiagramIR & { messages: Message[] notes: Note[] actors: { [key: string]: Actor } title: string showSequenceNumbers: boolean // titleWrapped: boolean - configParams: ConfigParam[] } -class SequenceDB { +class SequenceDB extends BaseDb { prevActorId: string | null = null messages: Message[] = [] notes: Note[] = [] @@ -104,7 +105,6 @@ class SequenceDB { titleWrapped = false wrapEnabled = false showSequenceNumbers = false - configParams: SequenceDiagramIR['configParams'] = [] addActor(param: AddActorParam) { const { actor: name, classifier } = param @@ -244,7 +244,7 @@ class SequenceDB { return message } - addConfig(sp: ConfigParam) { + addParam(sp: ConfigParam) { this.configParams.push(sp) } @@ -256,14 +256,14 @@ class SequenceDB { return Object.keys(this.actors) } - clear() { + override clear() { + super.clear() this.prevActorId = null this.messages = [] this.notes = [] this.actors = {} this.title = '' this.showSequenceNumbers = false - this.configParams = [] } getDiagramIR(): SequenceDiagramIR { @@ -274,6 +274,7 @@ class SequenceDB { title: this.title, showSequenceNumbers: this.showSequenceNumbers, configParams: this.configParams, + overrideConfig: this.overrideConfig, } } @@ -287,24 +288,23 @@ class SequenceDB { logger.debug('apply', param) switch (param.type) { case 'addActor': - // db.addActor(param.actor, param.actor, param.description) - db.addActor(param) + this.addActor(param) break case 'activeStart': case 'activeEnd': - db.addSignal(param.actor, undefined, undefined, param.signalType) + this.addSignal(param.actor, undefined, undefined, param.signalType) break case 'addNote': - db.addNote(param.actor, param.placement, param.text) + this.addNote(param.actor, param.placement, param.text) break case 'addSignal': - db.addSignal(param.from, param.to, param.msg, param.signalType) + this.addSignal(param.from, param.to, param.msg, param.signalType) break case 'groupStart': - db.addGroupStart(param.groupType, param.text, { background: param.background }) + this.addGroupStart(param.groupType, param.text, { background: param.background }) break case 'groupEnd': - db.addGroupEnd(param.groupType) + this.addGroupEnd(param.groupType) break // case 'rectStart': // addSignal(undefined, undefined, param.color, param.signalType) @@ -313,13 +313,16 @@ class SequenceDB { // addSignal(undefined, undefined, undefined, param.signalType) // break case 'setTitle': - db.setTitle(param.text) + this.setTitle(param.text) break case 'addDivider': - db.addSignalWithoutActor({ text: param.text, wrap: false }, param.signalType) + this.addSignalWithoutActor({ text: param.text, wrap: false }, param.signalType) break - case 'addConfig': - db.addConfig({ key: param.key, value: param.value }) + case 'addParam': + this.addParam({ key: param.key, value: param.value }) + break + case 'overrideConfig': + this.addOverrideConfig(param) break } } @@ -364,6 +367,8 @@ type AddActorParam = { * action param that will be handled by `apply` */ type ApplyParam = + | ParamAction + | OverrideAction | ({ type: 'addActor' } & AddActorParam) @@ -404,11 +409,6 @@ type ApplyParam = signalType: LINETYPE text: string } - | { - type: 'addConfig' - key: string - value: string - } export { db } @@ -423,5 +423,5 @@ export default { PLACEMENT, addNote: db.addNote, setTitle: db.setTitle, - apply: db.apply, + apply: db.apply.bind(db), } diff --git a/packages/pintora-diagrams/src/sequence/parser/sequenceDiagram.ne b/packages/pintora-diagrams/src/sequence/parser/sequenceDiagram.ne index b9bedf24..1d699470 100644 --- a/packages/pintora-diagrams/src/sequence/parser/sequenceDiagram.ne +++ b/packages/pintora-diagrams/src/sequence/parser/sequenceDiagram.ne @@ -1,12 +1,30 @@ +@preprocessor typescript +@lexer lexer +@builtin "whitespace.ne" +@include "../../util/parser-grammars/config.ne" +@include "../../util/parser-grammars/comment.ne" + @{% import * as moo from '@hikerpig/moo' -import { tv, textToCaseInsensitiveRegex, VALID_TEXT_REGEXP, COLOR_REGEXP, COMMENT_LINE_REGEXP } from '../../util/parser-shared' +import { + tv, + textToCaseInsensitiveRegex, + VALID_TEXT_REGEXP, + COMMENT_LINE_REGEXP, + CONFIG_DIRECTIVE, + QUOTED_WORD_REGEXP, + configLexerMainState, + configLexerConfigClauseState, + L_PAREN_REGEXP, + R_PAREN_REGEXP, +} from '../../util/parser-shared' let lexer = moo.states({ main: { NEWLINE: { match: /\n/, lineBreaks: true }, SPACE: {match: / +/, lineBreaks: false }, - QUOTED_WORD: /\"[^"]*\"/, + ...configLexerMainState, + QUOTED_WORD: QUOTED_WORD_REGEXP, START_NOTE: textToCaseInsensitiveRegex('@note'), END_NOTE: textToCaseInsensitiveRegex('@end_note'), BACKQUOTED_TEXT: /`[^`]*`/, @@ -26,6 +44,8 @@ let lexer = moo.states({ R_SQ_BRACKET: { match: /\]/ }, L_AN_BRACKET: { match: /\/ }, + L_PAREN: L_PAREN_REGEXP, + R_PAREN: R_PAREN_REGEXP, _PLACEMENT: [ { match: /left\sof/, type: () => 'LEFT_OF' }, { match: /right\sof/, type: () => 'RIGHT_OF' }, @@ -37,6 +57,10 @@ let lexer = moo.states({ line: { REST_OF_LINE: { match: /[^#\n;]+/, pop: 1 }, }, + configClause: { + ...configLexerConfigClauseState, + WORD: { match: VALID_TEXT_REGEXP, fallback: true }, + }, }) let yy @@ -46,12 +70,6 @@ export function setYY(v) { } %} -@preprocessor typescript -@lexer lexer -@builtin "whitespace.ne" -@include "../../util/parser-grammars/config.ne" -@include "../../util/parser-grammars/comment.ne" - start -> __ start {% (d) => d[1] %} | "sequenceDiagram" document __:? {% function(d) { @@ -156,7 +174,8 @@ statement -> return { type: 'addDivider', text, signalType: yy.LINETYPE.DIVIDER } } %} - | configClause _ %NEWLINE + | paramClause _ %NEWLINE + | configOpenCloseClause _ %NEWLINE | comment _ %NEWLINE participantWord -> diff --git a/packages/pintora-diagrams/src/util/base-db.ts b/packages/pintora-diagrams/src/util/base-db.ts new file mode 100644 index 00000000..a8abdd24 --- /dev/null +++ b/packages/pintora-diagrams/src/util/base-db.ts @@ -0,0 +1,28 @@ +import { PintoraConfig } from '@pintora/core' +import { BaseDiagramIR } from './ir' +import { ConfigParam, OverrideAction } from './style' + +export class BaseDb { + configParams: ConfigParam[] = [] + overrideConfig: Partial = {} + + addOverrideConfig(action: OverrideAction) { + if ('error' in action) { + console.error(action.error) + } else { + this.overrideConfig = action.value + } + } + + getBaseDiagramIR(): BaseDiagramIR { + return { + configParams: this.configParams, + overrideConfig: this.overrideConfig, + } + } + + clear() { + this.configParams = [] + this.overrideConfig = {} + } +} diff --git a/packages/pintora-diagrams/src/util/ir.ts b/packages/pintora-diagrams/src/util/ir.ts new file mode 100644 index 00000000..8d784329 --- /dev/null +++ b/packages/pintora-diagrams/src/util/ir.ts @@ -0,0 +1,7 @@ +import { PintoraConfig } from '@pintora/core' +import { ConfigParam } from './style' + +export type BaseDiagramIR = { + configParams: ConfigParam[] + overrideConfig: Partial +} diff --git a/packages/pintora-diagrams/src/util/parser-grammars/config.ne b/packages/pintora-diagrams/src/util/parser-grammars/config.ne index 4a264856..92a95f4b 100644 --- a/packages/pintora-diagrams/src/util/parser-grammars/config.ne +++ b/packages/pintora-diagrams/src/util/parser-grammars/config.ne @@ -1,20 +1,46 @@ @{% export const COLOR = /#[a-zA-Z0-9]+/ -export const CONFIG_DIRECTIVE = /@config/ -%} +export const PARAM_DIRECTIVE = /@param/ +// export const CONFIG_DIRECTIVE = /@config/ + +//@ts-ignore +let L_PAREN = /\(/ +//@ts-ignore +let R_PAREN = /\)/ + +/** token value */ +export function getTokenValue(token) { + if (token && 'value' in token) return token.value + return token +} + +function handleConfigOpenCloseClause(d) { + const text = d[2].map((v) => { + if (v.type) return getTokenValue(v) + return v + }).join('') + try { + const v = JSON.parse(text) + return { type: 'overrideConfig', value: v } + } catch (error) { + return { type: 'overrideConfig', error: error } + } +} + +%} color -> %COLOR {% (d) => tv(d[0]) %} -configClause -> - %CONFIG_DIRECTIVE __ configPart {% +paramClause -> + %PARAM_DIRECTIVE __ paramPart {% function(d) { - // console.log('[configClause]', d[2], JSON.stringify(d[4])) + // console.log('[paramClause]', d[2], JSON.stringify(d[4])) return d[2] } %} - | %CONFIG_DIRECTIVE __ "{" _ ([\n] _ configPart):* [\n] _ "}" {% + | %PARAM_DIRECTIVE __ "{" _ ([\n] _ paramPart):* [\n] _ "}" {% function(d) { - // console.log('[configClause]', JSON.stringify(d[4])) + // console.log('[paramClause]', JSON.stringify(d[4])) const params = [] d[4].forEach((seg) => { params.push(seg[2]) @@ -23,10 +49,31 @@ configClause -> } %} -configPart -> [a-zA-Z0-9]:+ __ [^ \n]:+ {% +paramPart -> [a-zA-Z0-9]:+ __ [^ \n]:+ {% function(d) { const key = d[0].map(v => tv(v)).join('') let value = d[2] if (typeof value !== 'string') value = value.map(v => tv(v)).join('') - return { type: 'addConfig', key, value } + return { type: 'addParam', key, value } }%} + +configClause -> + %CONFIG_DIRECTIVE "(" [^\)]:+ ")" {% + function(d) { + // console.log('[configClause]', JSON.stringify(d[2])) + const text = d[2].map((v) => { + if (v.type) return getTokenValue(v) + return v + }).join('') + + try { + const v = JSON.parse(text) + return { type: 'overrideConfig', value: v } + } catch (error) { + return { type: 'overrideConfig', error: error } + } + } + %} + +configOpenCloseClause -> + %CONFIG_DIRECTIVE %L_PAREN [^\)]:+ %R_PAREN {% handleConfigOpenCloseClause %} diff --git a/packages/pintora-diagrams/src/util/parser-shared.ts b/packages/pintora-diagrams/src/util/parser-shared.ts index 36e9c83d..b299de0c 100644 --- a/packages/pintora-diagrams/src/util/parser-shared.ts +++ b/packages/pintora-diagrams/src/util/parser-shared.ts @@ -28,6 +28,26 @@ export const COLOR_REGEXP = /#[a-zA-Z0-9]+/ export const MOO_NEWLINE = { match: /\n/, lineBreaks: true } -// export const CONFIG_DIRECTIVE = /@config/ +// export const PARAM_DIRECTIVE = /@param/ export const COMMENT_LINE_REGEXP = /%%.*/ + +export const L_PAREN_REGEXP = /\(/ +export const R_PAREN_REGEXP = /\)/ + +export const QUOTED_WORD_REGEXP = /\"[^"]*\"/ + +export const CONFIG_DIRECTIVE = /@config/ + +export const configLexerMainState = { + CONFIG_DIRECTIVE: { + match: CONFIG_DIRECTIVE, + push: 'configClause', + }, +} + +export const configLexerConfigClauseState = { + QUOTED_WORD: QUOTED_WORD_REGEXP, + L_PAREN: L_PAREN_REGEXP, + R_PAREN: { match: R_PAREN_REGEXP, pop: 1 }, +} diff --git a/packages/pintora-diagrams/src/util/style.ts b/packages/pintora-diagrams/src/util/style.ts index b3d71bd4..25e5d742 100644 --- a/packages/pintora-diagrams/src/util/style.ts +++ b/packages/pintora-diagrams/src/util/style.ts @@ -1,10 +1,63 @@ -import { ConfigParam, interpreteConfigs } from '@pintora/core' +import { ConfigParam, interpreteConfigs, PintoraConfig, safeAssign, configApi, ITheme } from '@pintora/core' export { ConfigParam, interpreteConfigs } /** parser action */ -export type ConfigAction = { - type: 'addConfig' +export type ParamAction = { + type: 'addParam' key: string value: string } + +export type OverrideAction = + | { + type: 'overrideConfig' + value: T + } + | { + type: 'overrideConfig' + error: Error + } + +export type DiagramConfigContext = { + configParams: ConfigParam[] + overrideConfig: Partial +} + +export function makeConfigurator(opts: { + defaultConfig: C + configKey: string + getConfigFromParamDirectives?(params: ConfigParam[]): Partial + getConfigFromGlobalConfig?(config: PintoraConfig): Partial + getConfigFromTheme(t: ITheme, conf: C): Partial +}) { + const { configKey, defaultConfig } = opts + + function getConfig(configContext: DiagramConfigContext, extraConfig?: Partial): C { + const globalConfig: PintoraConfig = configApi.getConfig() + const t = globalConfig.themeConfig?.themeVariables + const conf = { ...defaultConfig } + + safeAssign(conf, opts.getConfigFromTheme(t, conf)) + + const getConfigFromGlobalConfig = + opts.getConfigFromGlobalConfig || + (_globalConfig => { + const coreConfig = safeAssign({}, _globalConfig.core, configContext.overrideConfig?.core) + return safeAssign({ fontFamily: coreConfig.defaultFontFamily }, _globalConfig[configKey] || {}) + }) + safeAssign(conf, getConfigFromGlobalConfig(globalConfig)) + + if (extraConfig) safeAssign(conf, extraConfig) + + safeAssign(conf, configContext.overrideConfig?.[configKey]) + if (opts.getConfigFromParamDirectives) { + safeAssign(conf, opts.getConfigFromParamDirectives(configContext.configParams)) + } + return conf + } + + return { + getConfig, + } +} diff --git a/website/docs/configuration/config.md b/website/docs/configuration/config.md index 29f4f0e3..2cb1e951 100644 --- a/website/docs/configuration/config.md +++ b/website/docs/configuration/config.md @@ -235,23 +235,27 @@ export type MindmapConf = { } ``` -## The `@config` directive +## Override config by 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 `@config` 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 `@param` or `@config` directive. :::info This is the recommended way to override configs inside the text DSL for all pintora's builtin diagrams. But it may be slightly different or not implemented at all in some third-party diagrams, due to syntax confilict or other diagram-parser implementation details. ::: +### The `@param` directive + +This directive overrides local config in current diagram. + Syntax: ```text -@config prop value +@param prop value -# --- or --- +%% --- or --- -@config { +@param { prop value } ``` @@ -260,10 +264,10 @@ For example: ```pintora play sequenceDiagram - @config loopLineColor #79caf1 - @config actorBackground #61afef - @config actorTextColor #ffffff - @config { + @param loopLineColor #79caf1 + @param actorBackground #61afef + @param actorTextColor #ffffff + @param { messageFontFamily Consolas dividerTextColor #61afef } @@ -273,3 +277,46 @@ sequenceDiagram Pintora-->>Pintora: Has input changed? end ``` + +### The `@config` directive + +Unlike the `@param` directive, this directive: + +1. Overrides global config in this render. +2. Config needs to be valid JSON string. + +Syntax: + +```text +@config(...configJSON) +``` + +For example: + +```pintora play +mindmap + +@config({ + "core": { + "defaultFontFamily": "serif" + }, + "mindmap": { + "layoutDirection": "TB", + "l1NodeBgColor": "#2B7A5D", + "l1NodeTextColor": "#fff", + "l2NodeBgColor": "#26946C", + "l2NodeTextColor": "#fff", + "nodeBgColor": "#67B599", + "textColor": "#fff" + } +}) + ++ UML Diagrams +++ Behavior Diagrams ++++ Sequence Diagram ++++ State Diagram ++++ Activity Diagram +++ Structural Diagrams ++++ Class Diagram ++++ Component Diagram +``` diff --git a/website/docs/diagrams/activity-diagram.mdx b/website/docs/diagrams/activity-diagram.mdx index e9db9e76..c093ae53 100644 --- a/website/docs/diagrams/activity-diagram.mdx +++ b/website/docs/diagrams/activity-diagram.mdx @@ -203,18 +203,18 @@ activityDiagram ## Override config -You can override diagarm config through `@config` directive. +You can override diagarm config through `@param` directive. All available configs can be seen in the [Config page](../configuration/config.md#activity). ```pintora play activityDiagram - @config actionBackground #61afef - @config textColor #fff - @config noteTextColor #purple - @config edgeColor #143C9A - @config curvedEdge false - @config { + @param actionBackground #61afef + @param textColor #fff + @param noteTextColor #purple + @param edgeColor #143C9A + @param curvedEdge false + @param { keywordBackground #143C9A labelTextColor #143C9A } diff --git a/website/docs/diagrams/component-diagram.mdx b/website/docs/diagrams/component-diagram.mdx index 4483e157..27ac627a 100644 --- a/website/docs/diagrams/component-diagram.mdx +++ b/website/docs/diagrams/component-diagram.mdx @@ -85,14 +85,14 @@ database "MySql" { ## Override config -You can override diagarm config through `@config` directive. +You can override diagarm config through `@param` directive. All available configs can be seen in the [Config page](../configuration/config.md#component). ```pintora play componentDiagram - @config componentBackground #61afef - @config componentBorderColor #61afef + @param componentBackground #61afef + @param componentBorderColor #61afef DataQuery -- [Component] [Component] ..> HTTP : use diff --git a/website/docs/diagrams/er-diagram.mdx b/website/docs/diagrams/er-diagram.mdx index f8408752..44f1ce39 100644 --- a/website/docs/diagrams/er-diagram.mdx +++ b/website/docs/diagrams/er-diagram.mdx @@ -36,20 +36,20 @@ erDiagram ## Override config -You can override diagarm config through `@config` directive. +You can override diagarm config through `@param` directive. All available configs can be seen in the [Config page](../configuration/config.md#er). ```pintora play erDiagram - @config fill #aabb00 - @config stroke #aacc00 - @config textColor #cc4488 - @config attributeFill #fcfff2 - @config labelBackground #white - @config fontSize 16 - @config borderRadius 4 - @config curvedEdge false + @param fill #aabb00 + @param stroke #aacc00 + @param textColor #cc4488 + @param attributeFill #fcfff2 + @param labelBackground #white + @param fontSize 16 + @param borderRadius 4 + @param curvedEdge false artists { INTEGER ArtistId diff --git a/website/docs/diagrams/mindmap.mdx b/website/docs/diagrams/mindmap.mdx index 13247460..13ac9fec 100644 --- a/website/docs/diagrams/mindmap.mdx +++ b/website/docs/diagrams/mindmap.mdx @@ -62,14 +62,14 @@ mindmap ## Override config -You can override diagarm config through `@config` directive. +You can override diagarm config through `@param` directive. All available configs can be seen in the [Config page](../configuration/config.md#mindmap). ```pintora play mindmap -@config layoutDirection TB -@config { +@param layoutDirection TB +@param { l1NodeBgColor #2B7A5D l1NodeTextColor #fff l2NodeBgColor #26946C diff --git a/website/docs/diagrams/sequence-diagram.mdx b/website/docs/diagrams/sequence-diagram.mdx index c02996dc..5b864857 100644 --- a/website/docs/diagrams/sequence-diagram.mdx +++ b/website/docs/diagrams/sequence-diagram.mdx @@ -89,16 +89,16 @@ sequenceDiagram ## Override config -You can override diagarm config through `@config` directive. +You can override diagarm config through `@param` directive. All available configs can be seen in the [Config page](../configuration/config.md#sequence). ```pintora play sequenceDiagram - @config loopLineColor #79caf1 - @config actorBackground #61afef - @config actorTextColor #ffffff - @config { + @param loopLineColor #79caf1 + @param actorBackground #61afef + @param actorTextColor #ffffff + @param { messageFontFamily Consolas dividerTextColor #61afef } diff --git a/website/docs/intro.md b/website/docs/intro.md index c7f6fcd7..12ec10a0 100644 --- a/website/docs/intro.md +++ b/website/docs/intro.md @@ -27,7 +27,7 @@ Heavily inspired by [Mermaid.js](https://mermaid-js.github.io/mermaid/#/) and [P ```pintora play mindmap -@config layoutDirection TB +@param layoutDirection TB * Pintora diagrams ** UML Diagrams *** Sequence Diagram 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 182f1afc..9d3408bd 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 @@ -204,18 +204,18 @@ activityDiagram ## 覆盖设置 -可以使用 `@config` 指令覆盖图表的部分设置。 +可以使用 `@param` 指令覆盖图表的部分设置。 可设置项的说明请见 [Config page](../configuration/config.md#activity). ```pintora play activityDiagram - @config actionBackground #61afef - @config textColor #fff - @config noteTextColor #purple - @config edgeColor #143C9A - @config curvedEdge false - @config { + @param actionBackground #61afef + @param textColor #fff + @param noteTextColor #purple + @param edgeColor #143C9A + @param curvedEdge false + @param { keywordBackground #143C9A labelTextColor #143C9A } diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/mindmap.mdx b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/mindmap.mdx index 7538d390..7e4764ca 100644 --- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/mindmap.mdx +++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/mindmap.mdx @@ -60,14 +60,14 @@ mindmap ## 覆盖设置 -可以使用 `@config` 指令覆盖图表的部分设置。 +可以使用 `@param` 指令覆盖图表的部分设置。 可设置项的说明请见 [Config page](../configuration/config.md#mindmap). ```pintora play mindmap -@config layoutDirection TB -@config { +@param layoutDirection TB +@param { l1NodeBgColor #2B7A5D l1NodeTextColor #fff l2NodeBgColor #26946C diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/sequence-diagram.mdx b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/sequence-diagram.mdx index 6c0ea102..987c9058 100644 --- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/sequence-diagram.mdx +++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/sequence-diagram.mdx @@ -116,16 +116,16 @@ sequenceDiagram ## 覆盖设置 -可以使用 `@config` 指令覆盖图表的部分设置。 +可以使用 `@param` 指令覆盖图表的部分设置。 可设置项的说明请见 [Config page](../configuration/config.md#sequence). ```pintora play sequenceDiagram - @config loopLineColor #79caf1 - @config actorBackground #61afef - @config actorTextColor #ffffff - @config { + @param loopLineColor #79caf1 + @param actorBackground #61afef + @param actorTextColor #ffffff + @param { messageFontFamily Consolas dividerTextColor #61afef } diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/intro.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/intro.md index 43533247..22954827 100644 --- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/intro.md +++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/intro.md @@ -26,7 +26,7 @@ Pintora 是一个可在浏览器和 Node.js 环境下运行的文字转示意图 ```pintora play mindmap -@config layoutDirection TB +@param layoutDirection TB * Pintora diagrams ** UML 图表 *** 时序图 Sequence Diagram