react-super-mermaid 0.1.0 → 0.3.0

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 +338 -165
  2. package/dist/index.cjs +560 -16
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +30 -2
  5. package/dist/index.d.ts +30 -2
  6. package/dist/index.js +560 -17
  7. package/dist/index.js.map +1 -1
  8. package/llms.txt +41 -0
  9. package/package.json +84 -83
package/dist/index.d.cts CHANGED
@@ -60,6 +60,8 @@ 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
65
  interface RenderDiagramOptions {
64
66
  /** mermaid 原始碼字串。 */
65
67
  code: string;
@@ -124,6 +126,12 @@ interface ToolbarProps {
124
126
  exporting: boolean;
125
127
  onExportSvg: () => void;
126
128
  onExportPng: () => void;
129
+ backgroundEnabled: boolean;
130
+ background: RsmBackground;
131
+ onCycleBackground: () => void;
132
+ fullscreenEnabled: boolean;
133
+ fullscreen: boolean;
134
+ onToggleFullscreen: () => void;
127
135
  }
128
136
  declare function Toolbar(props: ToolbarProps): React.JSX.Element;
129
137
 
@@ -144,7 +152,15 @@ interface MermaidViewerProps {
144
152
  search?: boolean;
145
153
  /** 是否啟用匯出 SVG/PNG(toolbar 內)。預設 true。 */
146
154
  exportable?: boolean;
147
- /** 是否綁定鍵盤快捷鍵(/ Ctrl+F 搜尋、+ - 0 1 縮放)。預設 true。 */
155
+ /** 是否顯示背景切換鈕(透明 / 純色 / 格線)。預設 true。 */
156
+ background?: boolean;
157
+ /** 背景模式初始 / 受控值,預設 'transparent';toolbar 變更存內部 state。 */
158
+ backgroundMode?: RsmBackground;
159
+ /** 是否顯示全螢幕鈕(以跳窗形式覆蓋整個視窗,支援 RWD)。預設 true。 */
160
+ fullscreen?: boolean;
161
+ /** 進 / 出全螢幕時的回呼。 */
162
+ onFullscreenChange?: (fullscreen: boolean) => void;
163
+ /** 是否綁定鍵盤快捷鍵(/ Ctrl+F 搜尋、+ - 0 1 縮放、F 全螢幕、B 背景)。預設 true。 */
148
164
  keyboard?: boolean;
149
165
  /** sketch 抖動種子,預設 42。 */
150
166
  seed?: number;
@@ -180,6 +196,13 @@ interface MermaidViewerHandle {
180
196
  downloadSvg: (filename?: string) => void;
181
197
  downloadPng: (filename?: string, opts?: ExportRasterOptions) => Promise<void>;
182
198
  getSvg: () => SVGSVGElement | null;
199
+ enterFullscreen: () => void;
200
+ exitFullscreen: () => void;
201
+ toggleFullscreen: () => void;
202
+ isFullscreen: () => boolean;
203
+ setBackground: (mode: RsmBackground) => void;
204
+ cycleBackground: () => void;
205
+ getBackground: () => RsmBackground;
183
206
  }
184
207
  declare const MermaidViewer: react.ForwardRefExoticComponent<MermaidViewerProps & react.RefAttributes<MermaidViewerHandle>>;
185
208
 
@@ -250,6 +273,11 @@ declare function ensureStyles(): void;
250
273
  interface ColorizeOptions {
251
274
  dark?: boolean;
252
275
  }
276
+ /**
277
+ * 字體清晰度:對「任何主題」渲染出的圖加重文字字重,小字與縮圖也讀得清楚。
278
+ * 只動 font-weight(不改色),故對原生 neutral/forest/dark 主題也安全,不會打架。
279
+ */
280
+ declare function boostLegibility(root: ParentNode): void;
253
281
  /** 在已渲染的 mermaid SVG 上套用 Colorful 樣式(就地修改 DOM)。 */
254
282
  declare function colorizeDiagram(root: ParentNode, opts?: ColorizeOptions): void;
255
283
 
@@ -298,4 +326,4 @@ declare function rasterizeToBlob(prepared: PreparedSvg, opts?: ExportRasterOptio
298
326
  /** 觸發瀏覽器下載一個 Blob。 */
299
327
  declare function downloadBlob(blob: Blob, filename: string): void;
300
328
 
301
- 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, colorizeDiagram, downloadBlob, ensureSketchFont, ensureStyles, loadMermaid, loadSvgPanZoom, prepareSvgElement, prepareSvgString, rasterizeToBlob, renderDiagram, resolveTheme, serializeLiveSvg, sketchifyDiagram, svgBlob, useMermaidViewer };
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 };
package/dist/index.d.ts CHANGED
@@ -60,6 +60,8 @@ 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
65
  interface RenderDiagramOptions {
64
66
  /** mermaid 原始碼字串。 */
65
67
  code: string;
@@ -124,6 +126,12 @@ interface ToolbarProps {
124
126
  exporting: boolean;
125
127
  onExportSvg: () => void;
126
128
  onExportPng: () => void;
129
+ backgroundEnabled: boolean;
130
+ background: RsmBackground;
131
+ onCycleBackground: () => void;
132
+ fullscreenEnabled: boolean;
133
+ fullscreen: boolean;
134
+ onToggleFullscreen: () => void;
127
135
  }
128
136
  declare function Toolbar(props: ToolbarProps): React.JSX.Element;
129
137
 
@@ -144,7 +152,15 @@ interface MermaidViewerProps {
144
152
  search?: boolean;
145
153
  /** 是否啟用匯出 SVG/PNG(toolbar 內)。預設 true。 */
146
154
  exportable?: boolean;
147
- /** 是否綁定鍵盤快捷鍵(/ Ctrl+F 搜尋、+ - 0 1 縮放)。預設 true。 */
155
+ /** 是否顯示背景切換鈕(透明 / 純色 / 格線)。預設 true。 */
156
+ background?: boolean;
157
+ /** 背景模式初始 / 受控值,預設 'transparent';toolbar 變更存內部 state。 */
158
+ backgroundMode?: RsmBackground;
159
+ /** 是否顯示全螢幕鈕(以跳窗形式覆蓋整個視窗,支援 RWD)。預設 true。 */
160
+ fullscreen?: boolean;
161
+ /** 進 / 出全螢幕時的回呼。 */
162
+ onFullscreenChange?: (fullscreen: boolean) => void;
163
+ /** 是否綁定鍵盤快捷鍵(/ Ctrl+F 搜尋、+ - 0 1 縮放、F 全螢幕、B 背景)。預設 true。 */
148
164
  keyboard?: boolean;
149
165
  /** sketch 抖動種子,預設 42。 */
150
166
  seed?: number;
@@ -180,6 +196,13 @@ interface MermaidViewerHandle {
180
196
  downloadSvg: (filename?: string) => void;
181
197
  downloadPng: (filename?: string, opts?: ExportRasterOptions) => Promise<void>;
182
198
  getSvg: () => SVGSVGElement | null;
199
+ enterFullscreen: () => void;
200
+ exitFullscreen: () => void;
201
+ toggleFullscreen: () => void;
202
+ isFullscreen: () => boolean;
203
+ setBackground: (mode: RsmBackground) => void;
204
+ cycleBackground: () => void;
205
+ getBackground: () => RsmBackground;
183
206
  }
184
207
  declare const MermaidViewer: react.ForwardRefExoticComponent<MermaidViewerProps & react.RefAttributes<MermaidViewerHandle>>;
185
208
 
@@ -250,6 +273,11 @@ declare function ensureStyles(): void;
250
273
  interface ColorizeOptions {
251
274
  dark?: boolean;
252
275
  }
276
+ /**
277
+ * 字體清晰度:對「任何主題」渲染出的圖加重文字字重,小字與縮圖也讀得清楚。
278
+ * 只動 font-weight(不改色),故對原生 neutral/forest/dark 主題也安全,不會打架。
279
+ */
280
+ declare function boostLegibility(root: ParentNode): void;
253
281
  /** 在已渲染的 mermaid SVG 上套用 Colorful 樣式(就地修改 DOM)。 */
254
282
  declare function colorizeDiagram(root: ParentNode, opts?: ColorizeOptions): void;
255
283
 
@@ -298,4 +326,4 @@ declare function rasterizeToBlob(prepared: PreparedSvg, opts?: ExportRasterOptio
298
326
  /** 觸發瀏覽器下載一個 Blob。 */
299
327
  declare function downloadBlob(blob: Blob, filename: string): void;
300
328
 
301
- 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, colorizeDiagram, downloadBlob, ensureSketchFont, ensureStyles, loadMermaid, loadSvgPanZoom, prepareSvgElement, prepareSvgString, rasterizeToBlob, renderDiagram, resolveTheme, serializeLiveSvg, sketchifyDiagram, svgBlob, useMermaidViewer };
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 };