feat: setConfig core.defaultRenderer

- Add docs about theme and configs

README.md

@@ -30,5 +30,5 @@ Check the online [documentation and demo](http://pintorajs.vercel.app/) for more
 - [x] Sequence Diagram and Entity Relationship Diagram
 - [x] Pintora node.js cli
 - [x] PlantUML style Component diagram
+- [x] Theme config
 - [ ] Load diagram implementation and canvas renderer only when needed
-- [ ] Theme config

demo/src/live-editor/redux/slice.ts

@@ -21,7 +21,7 @@ export type State = {
 }
 
 const DEFAULT_CONFIG: DeepPartial<DiagramsConf> = {
-  core: {
+  themeConfig: {
     theme: 'default',
   },
 }

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

@@ -48,7 +48,7 @@ export const conf: ComponentConf = {
 
 export function getConf() {
   const globalConfig: DiagramsConf = configApi.getConfig()
-  const t = globalConfig.core.themeVariables
+  const t = globalConfig.themeConfig.themeVariables
   safeAssign(conf, {
     componentBackground: t.secondaryColor,
     componentBorderColor: t.primaryColor,

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

@@ -56,7 +56,7 @@ export const conf: ErConf = {
 
 export function getConf() {
   const globalConfig: DiagramsConf = configApi.getConfig()
-  const t = globalConfig.core.themeVariables
+  const t = globalConfig.themeConfig.themeVariables
   safeAssign(conf, {
     stroke: t.primaryBorderColor,
     fill: t.primaryColor,

packages/pintora-diagrams/src/index.ts

@@ -8,7 +8,7 @@ import THEMES from './util/themes/index'
 export { DiagramsConf, THEMES }
 
 configApi.setConfig<DiagramsConf>({
-  core: {
+  themeConfig: {
     theme: 'default',
     darkTheme: 'dark',
     themeVariables: THEMES.default,

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

@@ -39,7 +39,7 @@ enum LineEndType {
 const sequenceArtist: IDiagramArtist<SequenceDiagramIR> = {
   draw(ir, config?) {
     conf = getConf()
-    theme = (configApi.getConfig() as DiagramsConf).core.themeVariables
+    theme = (configApi.getConfig() as DiagramsConf).themeConfig.themeVariables
     model.init()
     logger.debug(`C:${JSON.stringify(conf, null, 2)}`)
 
@@ -53,7 +53,7 @@ const sequenceArtist: IDiagramArtist<SequenceDiagramIR> = {
       children: [],
     }
     actorKeys.forEach(key => {
-      model.actorAttrsMap.set(key, { ...conf.actorStyle })
+      model.actorAttrsMap.set(key, { fill: conf.actorBackground, stroke: conf.actorBorderColor })
     })
 
     const maxMessageWidthPerActor = getMaxMessageWidthPerActor(ir)
@@ -700,11 +700,11 @@ const drawMessage = function (msgModel: MessageModel): DrawResult<Group> {
         y: lineStarty,
         textAlign: 'center',
         textBaseline: 'middle',
-        fill: conf.actorStyle.fill,
+        fill: conf.actorBackground,
       },
       { class: 'sequence-number' },
     )
-    const circleColor = conf.actorStyle.stroke
+    const circleColor = conf.actorBorderColor
     const circleMark = makeMark('marker', {
       symbol: 'circle',
       x: startx,
@@ -770,7 +770,7 @@ function drawDividerTo(divider: MessageModel, container: Group) {
     width: rectWidth,
     height: height + conf.wrapPadding * 2,
     fill: conf.activationBackground,
-    stroke: conf.actorStyle.stroke,
+    stroke: conf.actorBorderColor,
     lineWidth: 2,
   })
 
@@ -901,7 +901,7 @@ export const drawActors = function (
     if (isMirror) {
       attrs = { ...model.actorAttrsMap.get(key) }
     } else {
-      attrs = model.actorAttrsMap.get(key) || { ...conf.actorStyle }
+      attrs = model.actorAttrsMap.get(key) || { fill: conf.actorBackground, stroke: conf.actorBorderColor }
     }
     const textAttrs: Text['attrs'] = {
       fill: conf.actorTextColor,
@@ -1063,7 +1063,7 @@ function drawLoopTo(mark: Group, loopModel: LoopModel, labelText: string, conf:
 
   const labelWrap = makeLoopLabelBox({ x: startx, y: starty }, labelWidth, labelHeight, 5)
   safeAssign(labelWrap.attrs, {
-    fill: conf.actorStyle.fill,
+    fill: conf.actorBackground,
     stroke: loopLineColor,
   })
 

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

@@ -3,28 +3,10 @@ import { PALETTE } from '../util/theme'
 import { configApi, safeAssign } from '@pintora/core'
 import { DiagramsConf } from '../type'
 
-// export {
-//   PALETTE
-// }
-
-// export interface ITheme {
-//   textColor: string
-//   primaryColor: string
-// }
-
-// export const THEME: ITheme = {
-//   textColor: PALETTE.normalDark,
-//   primaryColor: PALETTE.orange,
-// }
-
 export type SequenceConf = {
-  actorWidth: number
-  actorHeight: number
-  actorMargin: number
   noteWidth: number
   noteHeight: number
   noteMargin: number
-  mirrorActors: boolean
   boxMargin: number
   activationWidth: number
   diagramMarginX: number
@@ -39,9 +21,17 @@ export type SequenceConf = {
   labelBoxWidth: number
   labelBoxHeight: number
 
+  /** color of loop box's border */
   loopLineColor: string
 
-  actorStyle: Partial<MarkAttrs>
+  /** if the actor should also appear in the bottom of the diagram, default is true */
+  mirrorActors: boolean
+  actorWidth: number
+  actorHeight: number
+  actorMargin: number
+
+  actorBackground: string
+  actorBorderColor: string
   actorTextColor: string
   actorLineColor: string
 
@@ -55,10 +45,6 @@ export type SequenceConf = {
 }
 
 export const defaultConfig: SequenceConf = {
-  mirrorActors: true,
-  actorWidth: 80,
-  actorHeight: 50,
-  actorMargin: 10,
   noteWidth: 80,
   noteHeight: 50,
   noteMargin: 10,
@@ -78,10 +64,12 @@ export const defaultConfig: SequenceConf = {
 
   loopLineColor: PALETTE.orange,
 
-  actorStyle: {
-    fill: PALETTE.orange,
-    stroke: PALETTE.normalDark,
-  },
+  mirrorActors: true,
+  actorWidth: 80,
+  actorHeight: 50,
+  actorMargin: 10,
+  actorBackground: PALETTE.orange,
+  actorBorderColor: PALETTE.normalDark,
   actorTextColor: PALETTE.normalDark,
   actorLineColor: PALETTE.normalDark,
 
@@ -100,12 +88,10 @@ export const conf: SequenceConf = {
 
 export function getConf() {
   const globalConfig: DiagramsConf = configApi.getConfig()
-  const t = globalConfig.core.themeVariables
+  const t = globalConfig.themeConfig.themeVariables
   safeAssign(conf, {
-    actorStyle: {
-      fill: t.primaryColor,
-      stroke: t.primaryBorderColor,
-    },
+    actorBackground: t.primaryColor,
+    actorBorderColor: t.primaryBorderColor,
     messageTextColor: t.textColor,
     loopLineColor: t.primaryColor,
     actorTextColor: t.textColor,

packages/pintora-diagrams/src/sequence/index.ts

@@ -2,7 +2,7 @@ import { IDiagram } from "@pintora/core"
 import { db, SequenceDiagramIR } from './db'
 import artist from './artist'
 import { parse } from './parser'
-import { SequenceConf, conf } from './config'
+import { SequenceConf } from './config'
 
 export {
   SequenceDiagramIR,
@@ -22,7 +22,4 @@ export const sequenceDiagram: IDiagram<SequenceDiagramIR, SequenceConf> = {
   clear() {
     db.clear()
   },
-  // setConfig(c) {
-  //   Object.assign(conf, c)
-  // }
 }

packages/pintora-diagrams/src/type.ts

@@ -1,15 +1,15 @@
-import { SequenceDiagramIR } from './sequence'
-import { ErDiagramIR } from './er'
-import { ComponentDiagramIR } from './component'
+import { SequenceConf } from './sequence'
+import { ErConf } from './er'
+import { ComponentConf } from './component'
 import { ITheme } from './util/themes/base'
 
 export type DiagramsConf = {
-  core: {
+  themeConfig: {
     theme: string
     darkTheme?: string
     themeVariables: ITheme
   }
-  component: ComponentDiagramIR
-  er: ErDiagramIR
-  sequence: SequenceDiagramIR
+  component: ComponentConf
+  er: ErConf
+  sequence: SequenceConf
 }

packages/pintora-standalone/src/index.ts

@@ -9,6 +9,19 @@ function initDiagrams() {
 }
 initDiagrams()
 
+export type PintoraConfig = DiagramsConf & {
+  core: {
+    /** by default it's 'svg' */
+    defaultRenderer: string
+  }
+}
+
+configApi.setConfig<PintoraConfig>({
+  core: {
+    defaultRenderer: 'svg',
+  },
+})
+
 type InitBrowserOptions = {
   startOnLoad?: boolean
 }
@@ -17,6 +30,10 @@ interface RenderToOptions extends RenderOptions {
   enhanceGraphicIR?(ir: GraphicsIR): GraphicsIR
 }
 
+const CLASSES = {
+  wrapper: 'pintora-wrapper',
+}
+
 const pintoraStandalone = {
   ...pintora,
   renderTo(code: string, options: RenderToOptions) {
@@ -40,8 +57,8 @@ const pintoraStandalone = {
       let graphicIR = drawResult.graphicIR
       if (options.enhanceGraphicIR) graphicIR = options.enhanceGraphicIR(graphicIR)
       if (!graphicIR.bgColor) {
-        const conf = configApi.getConfig<DiagramsConf>()
-        const canvasBackground = conf.core.themeVariables?.canvasBackground
+        const conf = configApi.getConfig<PintoraConfig>()
+        const canvasBackground = conf.themeConfig.themeVariables?.canvasBackground
         if (canvasBackground) graphicIR.bgColor = canvasBackground
       }
 
@@ -62,24 +79,34 @@ const pintoraStandalone = {
     })
   },
   renderContentOf(container: HTMLDivElement) {
+    const prevSibling = container.previousElementSibling
+    if (prevSibling && prevSibling.classList.contains(CLASSES.wrapper)) {
+      prevSibling.remove()
+    }
+
     const wrapper = document.createElement('div')
-    wrapper.classList.add('pintora-wrapper')
+    wrapper.classList.add(CLASSES.wrapper)
     container.style.display = 'none'
 
+    const renderer: any =
+      container.dataset.renderer || configApi.getConfig<PintoraConfig>().core?.defaultRenderer || 'svg'
+
     container.parentNode.insertBefore(wrapper, container)
     pintoraStandalone.renderTo(container.innerText, {
       container: wrapper,
+      renderer,
     })
   },
+  getConfig: configApi.getConfig,
   setConfig(c: Partial<DiagramsConf>) {
     configApi.setConfig(c)
-    if (c.core?.theme) {
-      const conf = configApi.getConfig<DiagramsConf>()
-      const newConf = { ...conf, }
-      const themeConfig = THEMES[c.core.theme]
+    if (c.themeConfig?.theme) {
+      const conf = configApi.getConfig<PintoraConfig>()
+      const newConf = { ...conf }
+      const themeConfig = THEMES[c.themeConfig.theme]
       if (themeConfig) {
-        newConf.core = newConf.core || {} as any
-        newConf.core.themeVariables = themeConfig
+        newConf.themeConfig = newConf.themeConfig || ({} as any)
+        newConf.themeConfig.themeVariables = themeConfig
       }
       configApi.setConfig(newConf)
     }

website/docs/configuration/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Configuration",
+  "position": 4
+}