react-super-mermaid 0.3.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +6 -5
  2. package/dist/index.cjs +409 -58
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +45 -11
  5. package/dist/index.d.ts +45 -11
  6. package/dist/index.js +408 -59
  7. package/dist/index.js.map +1 -1
  8. package/llms.txt +3 -3
  9. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -60,8 +60,15 @@ interface PanZoomInstance {
60
60
  }
61
61
  type MermaidTheme = 'colorful' | 'sketch' | 'auto' | 'default' | 'dark' | 'neutral' | 'forest';
62
62
  type MermaidBaseTheme = 'default' | 'dark' | 'neutral' | 'forest';
63
- /** 畫布背景模式:透明(跟隨頁面) / 純色(surface) / 點陣格線。 */
64
- type RsmBackground = 'transparent' | 'solid' | 'grid';
63
+ /** 畫布疊加圖樣:無 / 網點 / 網格線。可與任一底色(透明或純色)自由組合。 */
64
+ type RsmPattern = 'none' | 'dots' | 'grid';
65
+ /** 一個底色預設色票;`value` 為 null 代表「預設 / 透明」(跟隨頁面底色)。 */
66
+ interface RsmBackgroundPreset {
67
+ /** 色票 hex(如 `#FFFFFF`);null = 透明 / 跟隨頁面。 */
68
+ value: string | null;
69
+ /** 顯示名稱(tooltip / aria-label)。 */
70
+ label: string;
71
+ }
65
72
  interface RenderDiagramOptions {
66
73
  /** mermaid 原始碼字串。 */
67
74
  code: string;
@@ -109,6 +116,18 @@ interface ThemeOption {
109
116
  value: MermaidTheme;
110
117
  label: string;
111
118
  }
119
+ /**
120
+ * 底色預設色票。第一個 value=null 代表「預設 / 透明」(跟隨頁面底色);
121
+ * 其餘對齊 VS Code 擴充套件的色票,色相柔和、適合做圖表底色。
122
+ * 不符合時可用面板裡的「自訂」色票自選任意顏色。
123
+ */
124
+ declare const BACKGROUND_PRESETS: RsmBackgroundPreset[];
125
+ /** 疊加圖樣選項(分段切換鈕):無 / 網點 / 網格線。 */
126
+ declare const PATTERN_OPTIONS: {
127
+ value: RsmPattern;
128
+ glyph: string;
129
+ label: string;
130
+ }[];
112
131
  declare const DEFAULT_THEME_OPTIONS: ThemeOption[];
113
132
  interface ToolbarProps {
114
133
  theme: MermaidTheme;
@@ -126,9 +145,16 @@ interface ToolbarProps {
126
145
  exporting: boolean;
127
146
  onExportSvg: () => void;
128
147
  onExportPng: () => void;
148
+ /** 是否顯示背景選擇器。 */
129
149
  backgroundEnabled: boolean;
130
- background: RsmBackground;
131
- onCycleBackground: () => void;
150
+ /** 目前底色(hex);null = 透明 / 跟隨頁面。 */
151
+ surface: string | null;
152
+ /** 使用者選了新底色。 */
153
+ onSurfaceChange: (color: string | null) => void;
154
+ /** 目前疊加圖樣。 */
155
+ pattern: RsmPattern;
156
+ /** 使用者切換了圖樣。 */
157
+ onPatternChange: (pattern: RsmPattern) => void;
132
158
  fullscreenEnabled: boolean;
133
159
  fullscreen: boolean;
134
160
  onToggleFullscreen: () => void;
@@ -152,10 +178,15 @@ interface MermaidViewerProps {
152
178
  search?: boolean;
153
179
  /** 是否啟用匯出 SVG/PNG(toolbar 內)。預設 true。 */
154
180
  exportable?: boolean;
155
- /** 是否顯示背景切換鈕(透明 / 純色 / 格線)。預設 true。 */
181
+ /** 是否顯示背景選擇器(底色色票 + 自訂色 + 網點 / 網格圖樣)。預設 true。 */
156
182
  background?: boolean;
157
- /** 背景模式初始 / 受控值,預設 'transparent';toolbar 變更存內部 state。 */
158
- backgroundMode?: RsmBackground;
183
+ /** 疊加圖樣初始 / 受控值,預設 'dots'(網點);toolbar 變更存內部 state。 */
184
+ pattern?: RsmPattern;
185
+ /**
186
+ * 底色初始 / 受控值(hex,如 `#EFF6FF`);null / 省略 = 透明(跟隨頁面底色)。
187
+ * toolbar 的色票與「自訂」色會更新此值。
188
+ */
189
+ solidColor?: string | null;
159
190
  /** 是否顯示全螢幕鈕(以跳窗形式覆蓋整個視窗,支援 RWD)。預設 true。 */
160
191
  fullscreen?: boolean;
161
192
  /** 進 / 出全螢幕時的回呼。 */
@@ -200,9 +231,12 @@ interface MermaidViewerHandle {
200
231
  exitFullscreen: () => void;
201
232
  toggleFullscreen: () => void;
202
233
  isFullscreen: () => boolean;
203
- setBackground: (mode: RsmBackground) => void;
204
- cycleBackground: () => void;
205
- getBackground: () => RsmBackground;
234
+ setPattern: (pattern: RsmPattern) => void;
235
+ cyclePattern: () => void;
236
+ getPattern: () => RsmPattern;
237
+ /** 設定底色(hex);null = 透明 / 跟隨頁面。 */
238
+ setSolidColor: (color: string | null) => void;
239
+ getSolidColor: () => string | null;
206
240
  }
207
241
  declare const MermaidViewer: react.ForwardRefExoticComponent<MermaidViewerProps & react.RefAttributes<MermaidViewerHandle>>;
208
242
 
@@ -326,4 +360,4 @@ declare function rasterizeToBlob(prepared: PreparedSvg, opts?: ExportRasterOptio
326
360
  /** 觸發瀏覽器下載一個 Blob。 */
327
361
  declare function downloadBlob(blob: Blob, filename: string): void;
328
362
 
329
- export { type ColorizeOptions, DEFAULT_THEME_OPTIONS, DEFAULT_VIRGIL_FONT_URL, type ExportRasterOptions, type LoadMermaidOptions, type MermaidBaseTheme, MermaidDiagram, type MermaidLike, type MermaidSource, type MermaidTheme, MermaidViewer, type MermaidViewerHandle, type MermaidViewerProps, type PanZoomInstance, type PreparedSvg, type RasterType, type RenderDiagramOptions, type RenderResult, type RenderStatus, SKETCH_FONT, type SearchState, type SketchOptions, type SvgPanZoomSource, type ThemeOption, Toolbar, type ToolbarProps, type UseMermaidViewerOptions, type UseMermaidViewerResult, boostLegibility, colorizeDiagram, downloadBlob, ensureSketchFont, ensureStyles, loadMermaid, loadSvgPanZoom, prepareSvgElement, prepareSvgString, rasterizeToBlob, renderDiagram, resolveTheme, serializeLiveSvg, sketchifyDiagram, svgBlob, useMermaidViewer };
363
+ export { BACKGROUND_PRESETS, type ColorizeOptions, DEFAULT_THEME_OPTIONS, DEFAULT_VIRGIL_FONT_URL, type ExportRasterOptions, type LoadMermaidOptions, type MermaidBaseTheme, MermaidDiagram, type MermaidLike, type MermaidSource, type MermaidTheme, MermaidViewer, type MermaidViewerHandle, type MermaidViewerProps, PATTERN_OPTIONS, type PanZoomInstance, type PreparedSvg, type RasterType, type RenderDiagramOptions, type RenderResult, type RenderStatus, type RsmBackgroundPreset, type RsmPattern, SKETCH_FONT, type SearchState, type SketchOptions, type SvgPanZoomSource, type ThemeOption, Toolbar, type ToolbarProps, type UseMermaidViewerOptions, type UseMermaidViewerResult, boostLegibility, colorizeDiagram, downloadBlob, ensureSketchFont, ensureStyles, loadMermaid, loadSvgPanZoom, prepareSvgElement, prepareSvgString, rasterizeToBlob, renderDiagram, resolveTheme, serializeLiveSvg, sketchifyDiagram, svgBlob, useMermaidViewer };
package/dist/index.d.ts CHANGED
@@ -60,8 +60,15 @@ interface PanZoomInstance {
60
60
  }
61
61
  type MermaidTheme = 'colorful' | 'sketch' | 'auto' | 'default' | 'dark' | 'neutral' | 'forest';
62
62
  type MermaidBaseTheme = 'default' | 'dark' | 'neutral' | 'forest';
63
- /** 畫布背景模式:透明(跟隨頁面) / 純色(surface) / 點陣格線。 */
64
- type RsmBackground = 'transparent' | 'solid' | 'grid';
63
+ /** 畫布疊加圖樣:無 / 網點 / 網格線。可與任一底色(透明或純色)自由組合。 */
64
+ type RsmPattern = 'none' | 'dots' | 'grid';
65
+ /** 一個底色預設色票;`value` 為 null 代表「預設 / 透明」(跟隨頁面底色)。 */
66
+ interface RsmBackgroundPreset {
67
+ /** 色票 hex(如 `#FFFFFF`);null = 透明 / 跟隨頁面。 */
68
+ value: string | null;
69
+ /** 顯示名稱(tooltip / aria-label)。 */
70
+ label: string;
71
+ }
65
72
  interface RenderDiagramOptions {
66
73
  /** mermaid 原始碼字串。 */
67
74
  code: string;
@@ -109,6 +116,18 @@ interface ThemeOption {
109
116
  value: MermaidTheme;
110
117
  label: string;
111
118
  }
119
+ /**
120
+ * 底色預設色票。第一個 value=null 代表「預設 / 透明」(跟隨頁面底色);
121
+ * 其餘對齊 VS Code 擴充套件的色票,色相柔和、適合做圖表底色。
122
+ * 不符合時可用面板裡的「自訂」色票自選任意顏色。
123
+ */
124
+ declare const BACKGROUND_PRESETS: RsmBackgroundPreset[];
125
+ /** 疊加圖樣選項(分段切換鈕):無 / 網點 / 網格線。 */
126
+ declare const PATTERN_OPTIONS: {
127
+ value: RsmPattern;
128
+ glyph: string;
129
+ label: string;
130
+ }[];
112
131
  declare const DEFAULT_THEME_OPTIONS: ThemeOption[];
113
132
  interface ToolbarProps {
114
133
  theme: MermaidTheme;
@@ -126,9 +145,16 @@ interface ToolbarProps {
126
145
  exporting: boolean;
127
146
  onExportSvg: () => void;
128
147
  onExportPng: () => void;
148
+ /** 是否顯示背景選擇器。 */
129
149
  backgroundEnabled: boolean;
130
- background: RsmBackground;
131
- onCycleBackground: () => void;
150
+ /** 目前底色(hex);null = 透明 / 跟隨頁面。 */
151
+ surface: string | null;
152
+ /** 使用者選了新底色。 */
153
+ onSurfaceChange: (color: string | null) => void;
154
+ /** 目前疊加圖樣。 */
155
+ pattern: RsmPattern;
156
+ /** 使用者切換了圖樣。 */
157
+ onPatternChange: (pattern: RsmPattern) => void;
132
158
  fullscreenEnabled: boolean;
133
159
  fullscreen: boolean;
134
160
  onToggleFullscreen: () => void;
@@ -152,10 +178,15 @@ interface MermaidViewerProps {
152
178
  search?: boolean;
153
179
  /** 是否啟用匯出 SVG/PNG(toolbar 內)。預設 true。 */
154
180
  exportable?: boolean;
155
- /** 是否顯示背景切換鈕(透明 / 純色 / 格線)。預設 true。 */
181
+ /** 是否顯示背景選擇器(底色色票 + 自訂色 + 網點 / 網格圖樣)。預設 true。 */
156
182
  background?: boolean;
157
- /** 背景模式初始 / 受控值,預設 'transparent';toolbar 變更存內部 state。 */
158
- backgroundMode?: RsmBackground;
183
+ /** 疊加圖樣初始 / 受控值,預設 'dots'(網點);toolbar 變更存內部 state。 */
184
+ pattern?: RsmPattern;
185
+ /**
186
+ * 底色初始 / 受控值(hex,如 `#EFF6FF`);null / 省略 = 透明(跟隨頁面底色)。
187
+ * toolbar 的色票與「自訂」色會更新此值。
188
+ */
189
+ solidColor?: string | null;
159
190
  /** 是否顯示全螢幕鈕(以跳窗形式覆蓋整個視窗,支援 RWD)。預設 true。 */
160
191
  fullscreen?: boolean;
161
192
  /** 進 / 出全螢幕時的回呼。 */
@@ -200,9 +231,12 @@ interface MermaidViewerHandle {
200
231
  exitFullscreen: () => void;
201
232
  toggleFullscreen: () => void;
202
233
  isFullscreen: () => boolean;
203
- setBackground: (mode: RsmBackground) => void;
204
- cycleBackground: () => void;
205
- getBackground: () => RsmBackground;
234
+ setPattern: (pattern: RsmPattern) => void;
235
+ cyclePattern: () => void;
236
+ getPattern: () => RsmPattern;
237
+ /** 設定底色(hex);null = 透明 / 跟隨頁面。 */
238
+ setSolidColor: (color: string | null) => void;
239
+ getSolidColor: () => string | null;
206
240
  }
207
241
  declare const MermaidViewer: react.ForwardRefExoticComponent<MermaidViewerProps & react.RefAttributes<MermaidViewerHandle>>;
208
242
 
@@ -326,4 +360,4 @@ declare function rasterizeToBlob(prepared: PreparedSvg, opts?: ExportRasterOptio
326
360
  /** 觸發瀏覽器下載一個 Blob。 */
327
361
  declare function downloadBlob(blob: Blob, filename: string): void;
328
362
 
329
- export { type ColorizeOptions, DEFAULT_THEME_OPTIONS, DEFAULT_VIRGIL_FONT_URL, type ExportRasterOptions, type LoadMermaidOptions, type MermaidBaseTheme, MermaidDiagram, type MermaidLike, type MermaidSource, type MermaidTheme, MermaidViewer, type MermaidViewerHandle, type MermaidViewerProps, type PanZoomInstance, type PreparedSvg, type RasterType, type RenderDiagramOptions, type RenderResult, type RenderStatus, SKETCH_FONT, type SearchState, type SketchOptions, type SvgPanZoomSource, type ThemeOption, Toolbar, type ToolbarProps, type UseMermaidViewerOptions, type UseMermaidViewerResult, boostLegibility, colorizeDiagram, downloadBlob, ensureSketchFont, ensureStyles, loadMermaid, loadSvgPanZoom, prepareSvgElement, prepareSvgString, rasterizeToBlob, renderDiagram, resolveTheme, serializeLiveSvg, sketchifyDiagram, svgBlob, useMermaidViewer };
363
+ export { BACKGROUND_PRESETS, type ColorizeOptions, DEFAULT_THEME_OPTIONS, DEFAULT_VIRGIL_FONT_URL, type ExportRasterOptions, type LoadMermaidOptions, type MermaidBaseTheme, MermaidDiagram, type MermaidLike, type MermaidSource, type MermaidTheme, MermaidViewer, type MermaidViewerHandle, type MermaidViewerProps, PATTERN_OPTIONS, type PanZoomInstance, type PreparedSvg, type RasterType, type RenderDiagramOptions, type RenderResult, type RenderStatus, type RsmBackgroundPreset, type RsmPattern, SKETCH_FONT, type SearchState, type SketchOptions, type SvgPanZoomSource, type ThemeOption, Toolbar, type ToolbarProps, type UseMermaidViewerOptions, type UseMermaidViewerResult, boostLegibility, colorizeDiagram, downloadBlob, ensureSketchFont, ensureStyles, loadMermaid, loadSvgPanZoom, prepareSvgElement, prepareSvgString, rasterizeToBlob, renderDiagram, resolveTheme, serializeLiveSvg, sketchifyDiagram, svgBlob, useMermaidViewer };