drawui-core 0.2.0 → 0.2.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 (5) hide show
  1. package/dist/index.cjs +43 -4
  2. package/dist/index.d.cts +53 -3
  3. package/dist/index.d.ts +53 -3
  4. package/dist/index.js +43 -4
  5. package/package.json +7 -8
package/dist/index.d.cts CHANGED
@@ -419,6 +419,10 @@ declare const dictionaries: {
419
419
  readonly 'minimap.collapse': "收起小地图";
420
420
  readonly 'tool.mind-map': "思维导图";
421
421
  readonly 'toolbar.mind-map': "思维导图";
422
+ readonly 'toolbar.export': "导出";
423
+ readonly 'toolbar.export.png': "PNG 图片";
424
+ readonly 'toolbar.export.svg': "SVG 矢量图";
425
+ readonly 'toolbar.export.pdf': "PDF 文档";
422
426
  readonly 'shape.mind-map': "思维导图";
423
427
  readonly 'mindmap.defaultRoot': "中心主题";
424
428
  readonly 'mindmap.defaultBranch': "分支主题";
@@ -532,6 +536,10 @@ declare const dictionaries: {
532
536
  readonly 'minimap.collapse': "Collapse minimap";
533
537
  readonly 'tool.mind-map': "Mind map";
534
538
  readonly 'toolbar.mind-map': "Mind map";
539
+ readonly 'toolbar.export': "Export";
540
+ readonly 'toolbar.export.png': "PNG image";
541
+ readonly 'toolbar.export.svg': "SVG vector";
542
+ readonly 'toolbar.export.pdf': "PDF document";
535
543
  readonly 'shape.mind-map': "Mind map";
536
544
  readonly 'mindmap.defaultRoot': "Central topic";
537
545
  readonly 'mindmap.defaultBranch': "Branch topic";
@@ -561,6 +569,31 @@ declare function subscribeLanguage(listener: LanguageListener): () => void;
561
569
  /** 取文案；{n} 等占位符由 params 替换 */
562
570
  declare function t(key: MessageKey, params?: Record<string, string | number>): string;
563
571
 
572
+ type ExportFormat = 'png' | 'svg' | 'pdf';
573
+ interface ExportOptions {
574
+ /** 输出缩放倍数（仅位图 PNG 生效，默认 2，矢量 SVG 始终无损） */
575
+ scale?: number;
576
+ /** 内容四周留白（页面坐标，默认 24） */
577
+ padding?: number;
578
+ /** 背景色，null = 透明；不传默认白色（'#ffffff'） */
579
+ background?: string | null;
580
+ }
581
+ /** 计算所有图形的并集包围盒（含留白），用于导出画布尺寸与视口 */
582
+ declare function getContentBounds(shapes: Shape[], padding?: number): {
583
+ x: number;
584
+ y: number;
585
+ width: number;
586
+ height: number;
587
+ };
588
+ /** 把图形渲染到一张离屏 canvas（白底 / 指定缩放）并返回 */
589
+ declare function renderToCanvas(shapes: Shape[], opts?: ExportOptions): HTMLCanvasElement;
590
+ /** 生成完整 SVG 字符串（矢量，全部图形类型）。返回可直接保存为 .svg 的文本。 */
591
+ declare function renderSVGString(shapes: Shape[], opts?: ExportOptions): string;
592
+ /** 导出为 Blob（png/svg/pdf） */
593
+ declare function exportToBlob(shapes: Shape[], format: ExportFormat, opts?: ExportOptions): Promise<Blob>;
594
+ /** 浏览器端触发下载 */
595
+ declare function downloadBlob(blob: Blob, fileName: string): void;
596
+
564
597
  type Listener = () => void;
565
598
  type NotificationListener = (message: string) => void;
566
599
  /** 核心 → React 的 UI 指令事件 */
@@ -800,6 +833,21 @@ declare class Editor {
800
833
  getCamera(): Camera;
801
834
  /** 指针是否处于按下状态（拖拽/画线/框选中） */
802
835
  isPointerDown(): boolean;
836
+ /** 当前画布内容的包围盒（世界坐标，含留白），导出时用于确定画布尺寸与视口 */
837
+ getContentBounds(padding?: number): {
838
+ x: number;
839
+ y: number;
840
+ width: number;
841
+ height: number;
842
+ };
843
+ /**
844
+ * 导出当前画布为图片 Blob。
845
+ * @param format png | svg | pdf
846
+ * @param opts scale（PNG 倍率，默认 2）/ padding（四周留白）/ background（背景色，默认白色，null 透明）
847
+ */
848
+ exportImage(format: ExportFormat, opts?: ExportOptions): Promise<Blob>;
849
+ /** 导出并触发浏览器下载 */
850
+ downloadImage(fileName?: string, format?: ExportFormat, opts?: ExportOptions): Promise<void>;
803
851
  zoomIn(): void;
804
852
  zoomOut(): void;
805
853
  resetZoom(): void;
@@ -879,7 +927,7 @@ declare class Renderer {
879
927
  /** 文本排版缓存：避免每帧对每个字符做 measureText */
880
928
  private textLayoutCache;
881
929
  private static readonly TEXT_CACHE_LIMIT;
882
- constructor(canvas: HTMLCanvasElement);
930
+ constructor(canvas: HTMLCanvasElement, dpr?: number);
883
931
  resize(width: number, height: number): void;
884
932
  setShowGrid(show: boolean): void;
885
933
  render(shapes: Shape[], camera: Camera, selectedIds: Set<string>, brushRect?: {
@@ -893,7 +941,9 @@ declare class Renderer {
893
941
  } | null, mindMapHover?: {
894
942
  shapeId: string;
895
943
  nodeId: string;
896
- } | null): void;
944
+ } | null,
945
+ /** 导出用：非 null 时先以该颜色铺满整块画布（白底等），默认不铺（透明） */
946
+ background?: string | null): void;
897
947
  /** 橡皮擦：半透明主色圆 + 主色描边，半径与笔刷命中范围一致（屏幕像素恒定） */
898
948
  private drawEraserBrush;
899
949
  /** 连接进行中，高亮目标图形四边中点的可连锚点 */
@@ -1379,4 +1429,4 @@ declare function countMindMapNodes(root: MindMapNode): number;
1379
1429
  */
1380
1430
  declare function layoutMindMap(root: MindMapNode): MindMapLayoutResult;
1381
1431
 
1382
- export { type ArrowBinding, type ArrowHeadType, type ArrowShape, ArrowTool, Camera, type CameraState, type CircleShape, type ConnectionType, type DiamondShape, type DrawShape, type DrawuiTheme, type DrawuiThemeSelection, Editor, type EditorData, type EditorOptions, type EditorState, type EllipseShape, type FreehandMode, FreehandTool, type GenerationContext, HandTool, type HexagonShape, type Language, type LineShape, LineTool, MINDMAP_COLORS, MINDMAP_FONT_SIZE, MINDMAP_MAX_WIDTH, MINDMAP_MIN_WIDTH, MINDMAP_NODE_HEIGHT, Mat2d, type MessageKey, type MindMapLayoutResult, type MindMapNode, type MindMapNodePos, type MindMapShape, type OctagonShape, type ParallelogramShape, type PentagonShape, type Rect, type RectangleShape, Renderer, type RoundedRectangleShape, SelectTool, type Shape, type ShapeStyle, ShapeTool, type ShapeType, type SnapGuide, type StarShape, THEME, type TextShape, type ToolType, type TrapezoidShape, type TriangleShape, UML_FONT_SIZE, UML_HEADER_HEIGHT, UML_LINE_HEIGHT, UML_MIN_WIDTH, UML_PADDING_X, UML_PADDING_Y, type UiEvent, type UmlAttribute, type UmlClassShape, type UmlInterfaceShape, type UmlMethod, type UmlVisibility, Vec, type Vec2 as Vec2Type, calcUmlClassSize, cloneMindMapNode, countMindMapNodes, findMindMapNode, getLanguage, getMindMapNodeDepth, getMindMapParent, getTheme, hexToRgba, layoutMindMap, mindMapNodeColor, mindMapNodeSize, setLanguage, setTheme, shadeColor, subscribeLanguage, subscribeTheme, t };
1432
+ export { type ArrowBinding, type ArrowHeadType, type ArrowShape, ArrowTool, Camera, type CameraState, type CircleShape, type ConnectionType, type DiamondShape, type DrawShape, type DrawuiTheme, type DrawuiThemeSelection, Editor, type EditorData, type EditorOptions, type EditorState, type EllipseShape, type ExportFormat, type ExportOptions, type FreehandMode, FreehandTool, type GenerationContext, HandTool, type HexagonShape, type Language, type LineShape, LineTool, MINDMAP_COLORS, MINDMAP_FONT_SIZE, MINDMAP_MAX_WIDTH, MINDMAP_MIN_WIDTH, MINDMAP_NODE_HEIGHT, Mat2d, type MessageKey, type MindMapLayoutResult, type MindMapNode, type MindMapNodePos, type MindMapShape, type OctagonShape, type ParallelogramShape, type PentagonShape, type Rect, type RectangleShape, Renderer, type RoundedRectangleShape, SelectTool, type Shape, type ShapeStyle, ShapeTool, type ShapeType, type SnapGuide, type StarShape, THEME, type TextShape, type ToolType, type TrapezoidShape, type TriangleShape, UML_FONT_SIZE, UML_HEADER_HEIGHT, UML_LINE_HEIGHT, UML_MIN_WIDTH, UML_PADDING_X, UML_PADDING_Y, type UiEvent, type UmlAttribute, type UmlClassShape, type UmlInterfaceShape, type UmlMethod, type UmlVisibility, Vec, type Vec2 as Vec2Type, calcUmlClassSize, cloneMindMapNode, countMindMapNodes, downloadBlob, exportToBlob, findMindMapNode, getContentBounds, getLanguage, getMindMapNodeDepth, getMindMapParent, getTheme, hexToRgba, layoutMindMap, mindMapNodeColor, mindMapNodeSize, renderSVGString, renderToCanvas, setLanguage, setTheme, shadeColor, subscribeLanguage, subscribeTheme, t };
package/dist/index.d.ts CHANGED
@@ -419,6 +419,10 @@ declare const dictionaries: {
419
419
  readonly 'minimap.collapse': "收起小地图";
420
420
  readonly 'tool.mind-map': "思维导图";
421
421
  readonly 'toolbar.mind-map': "思维导图";
422
+ readonly 'toolbar.export': "导出";
423
+ readonly 'toolbar.export.png': "PNG 图片";
424
+ readonly 'toolbar.export.svg': "SVG 矢量图";
425
+ readonly 'toolbar.export.pdf': "PDF 文档";
422
426
  readonly 'shape.mind-map': "思维导图";
423
427
  readonly 'mindmap.defaultRoot': "中心主题";
424
428
  readonly 'mindmap.defaultBranch': "分支主题";
@@ -532,6 +536,10 @@ declare const dictionaries: {
532
536
  readonly 'minimap.collapse': "Collapse minimap";
533
537
  readonly 'tool.mind-map': "Mind map";
534
538
  readonly 'toolbar.mind-map': "Mind map";
539
+ readonly 'toolbar.export': "Export";
540
+ readonly 'toolbar.export.png': "PNG image";
541
+ readonly 'toolbar.export.svg': "SVG vector";
542
+ readonly 'toolbar.export.pdf': "PDF document";
535
543
  readonly 'shape.mind-map': "Mind map";
536
544
  readonly 'mindmap.defaultRoot': "Central topic";
537
545
  readonly 'mindmap.defaultBranch': "Branch topic";
@@ -561,6 +569,31 @@ declare function subscribeLanguage(listener: LanguageListener): () => void;
561
569
  /** 取文案；{n} 等占位符由 params 替换 */
562
570
  declare function t(key: MessageKey, params?: Record<string, string | number>): string;
563
571
 
572
+ type ExportFormat = 'png' | 'svg' | 'pdf';
573
+ interface ExportOptions {
574
+ /** 输出缩放倍数（仅位图 PNG 生效，默认 2，矢量 SVG 始终无损） */
575
+ scale?: number;
576
+ /** 内容四周留白（页面坐标，默认 24） */
577
+ padding?: number;
578
+ /** 背景色，null = 透明；不传默认白色（'#ffffff'） */
579
+ background?: string | null;
580
+ }
581
+ /** 计算所有图形的并集包围盒（含留白），用于导出画布尺寸与视口 */
582
+ declare function getContentBounds(shapes: Shape[], padding?: number): {
583
+ x: number;
584
+ y: number;
585
+ width: number;
586
+ height: number;
587
+ };
588
+ /** 把图形渲染到一张离屏 canvas（白底 / 指定缩放）并返回 */
589
+ declare function renderToCanvas(shapes: Shape[], opts?: ExportOptions): HTMLCanvasElement;
590
+ /** 生成完整 SVG 字符串（矢量，全部图形类型）。返回可直接保存为 .svg 的文本。 */
591
+ declare function renderSVGString(shapes: Shape[], opts?: ExportOptions): string;
592
+ /** 导出为 Blob（png/svg/pdf） */
593
+ declare function exportToBlob(shapes: Shape[], format: ExportFormat, opts?: ExportOptions): Promise<Blob>;
594
+ /** 浏览器端触发下载 */
595
+ declare function downloadBlob(blob: Blob, fileName: string): void;
596
+
564
597
  type Listener = () => void;
565
598
  type NotificationListener = (message: string) => void;
566
599
  /** 核心 → React 的 UI 指令事件 */
@@ -800,6 +833,21 @@ declare class Editor {
800
833
  getCamera(): Camera;
801
834
  /** 指针是否处于按下状态（拖拽/画线/框选中） */
802
835
  isPointerDown(): boolean;
836
+ /** 当前画布内容的包围盒（世界坐标，含留白），导出时用于确定画布尺寸与视口 */
837
+ getContentBounds(padding?: number): {
838
+ x: number;
839
+ y: number;
840
+ width: number;
841
+ height: number;
842
+ };
843
+ /**
844
+ * 导出当前画布为图片 Blob。
845
+ * @param format png | svg | pdf
846
+ * @param opts scale（PNG 倍率，默认 2）/ padding（四周留白）/ background（背景色，默认白色，null 透明）
847
+ */
848
+ exportImage(format: ExportFormat, opts?: ExportOptions): Promise<Blob>;
849
+ /** 导出并触发浏览器下载 */
850
+ downloadImage(fileName?: string, format?: ExportFormat, opts?: ExportOptions): Promise<void>;
803
851
  zoomIn(): void;
804
852
  zoomOut(): void;
805
853
  resetZoom(): void;
@@ -879,7 +927,7 @@ declare class Renderer {
879
927
  /** 文本排版缓存：避免每帧对每个字符做 measureText */
880
928
  private textLayoutCache;
881
929
  private static readonly TEXT_CACHE_LIMIT;
882
- constructor(canvas: HTMLCanvasElement);
930
+ constructor(canvas: HTMLCanvasElement, dpr?: number);
883
931
  resize(width: number, height: number): void;
884
932
  setShowGrid(show: boolean): void;
885
933
  render(shapes: Shape[], camera: Camera, selectedIds: Set<string>, brushRect?: {
@@ -893,7 +941,9 @@ declare class Renderer {
893
941
  } | null, mindMapHover?: {
894
942
  shapeId: string;
895
943
  nodeId: string;
896
- } | null): void;
944
+ } | null,
945
+ /** 导出用：非 null 时先以该颜色铺满整块画布（白底等），默认不铺（透明） */
946
+ background?: string | null): void;
897
947
  /** 橡皮擦：半透明主色圆 + 主色描边，半径与笔刷命中范围一致（屏幕像素恒定） */
898
948
  private drawEraserBrush;
899
949
  /** 连接进行中，高亮目标图形四边中点的可连锚点 */
@@ -1379,4 +1429,4 @@ declare function countMindMapNodes(root: MindMapNode): number;
1379
1429
  */
1380
1430
  declare function layoutMindMap(root: MindMapNode): MindMapLayoutResult;
1381
1431
 
1382
- export { type ArrowBinding, type ArrowHeadType, type ArrowShape, ArrowTool, Camera, type CameraState, type CircleShape, type ConnectionType, type DiamondShape, type DrawShape, type DrawuiTheme, type DrawuiThemeSelection, Editor, type EditorData, type EditorOptions, type EditorState, type EllipseShape, type FreehandMode, FreehandTool, type GenerationContext, HandTool, type HexagonShape, type Language, type LineShape, LineTool, MINDMAP_COLORS, MINDMAP_FONT_SIZE, MINDMAP_MAX_WIDTH, MINDMAP_MIN_WIDTH, MINDMAP_NODE_HEIGHT, Mat2d, type MessageKey, type MindMapLayoutResult, type MindMapNode, type MindMapNodePos, type MindMapShape, type OctagonShape, type ParallelogramShape, type PentagonShape, type Rect, type RectangleShape, Renderer, type RoundedRectangleShape, SelectTool, type Shape, type ShapeStyle, ShapeTool, type ShapeType, type SnapGuide, type StarShape, THEME, type TextShape, type ToolType, type TrapezoidShape, type TriangleShape, UML_FONT_SIZE, UML_HEADER_HEIGHT, UML_LINE_HEIGHT, UML_MIN_WIDTH, UML_PADDING_X, UML_PADDING_Y, type UiEvent, type UmlAttribute, type UmlClassShape, type UmlInterfaceShape, type UmlMethod, type UmlVisibility, Vec, type Vec2 as Vec2Type, calcUmlClassSize, cloneMindMapNode, countMindMapNodes, findMindMapNode, getLanguage, getMindMapNodeDepth, getMindMapParent, getTheme, hexToRgba, layoutMindMap, mindMapNodeColor, mindMapNodeSize, setLanguage, setTheme, shadeColor, subscribeLanguage, subscribeTheme, t };
1432
+ export { type ArrowBinding, type ArrowHeadType, type ArrowShape, ArrowTool, Camera, type CameraState, type CircleShape, type ConnectionType, type DiamondShape, type DrawShape, type DrawuiTheme, type DrawuiThemeSelection, Editor, type EditorData, type EditorOptions, type EditorState, type EllipseShape, type ExportFormat, type ExportOptions, type FreehandMode, FreehandTool, type GenerationContext, HandTool, type HexagonShape, type Language, type LineShape, LineTool, MINDMAP_COLORS, MINDMAP_FONT_SIZE, MINDMAP_MAX_WIDTH, MINDMAP_MIN_WIDTH, MINDMAP_NODE_HEIGHT, Mat2d, type MessageKey, type MindMapLayoutResult, type MindMapNode, type MindMapNodePos, type MindMapShape, type OctagonShape, type ParallelogramShape, type PentagonShape, type Rect, type RectangleShape, Renderer, type RoundedRectangleShape, SelectTool, type Shape, type ShapeStyle, ShapeTool, type ShapeType, type SnapGuide, type StarShape, THEME, type TextShape, type ToolType, type TrapezoidShape, type TriangleShape, UML_FONT_SIZE, UML_HEADER_HEIGHT, UML_LINE_HEIGHT, UML_MIN_WIDTH, UML_PADDING_X, UML_PADDING_Y, type UiEvent, type UmlAttribute, type UmlClassShape, type UmlInterfaceShape, type UmlMethod, type UmlVisibility, Vec, type Vec2 as Vec2Type, calcUmlClassSize, cloneMindMapNode, countMindMapNodes, downloadBlob, exportToBlob, findMindMapNode, getContentBounds, getLanguage, getMindMapNodeDepth, getMindMapParent, getTheme, hexToRgba, layoutMindMap, mindMapNodeColor, mindMapNodeSize, renderSVGString, renderToCanvas, setLanguage, setTheme, shadeColor, subscribeLanguage, subscribeTheme, t };