flow-mindmap 0.1.1-beta.1 → 0.2.0

package/README.md

@@ -62,6 +62,48 @@ const data: MindMapNode = {
 </template>
 ```
 
+### 从 Markdown 渲染
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MindMap } from 'flow-mindmap'
+import 'flow-mindmap/style.css'
+
+const md = ref(`# 项目计划
+
+## 第一阶段
+
+调研 / 设计
+
+## 第二阶段
+
+实现
+
+## 第三阶段
+
+上线`)
+
+// 监听变化把 markdown 同步回外部存储(可选)
+function onMdChange(next: string) {
+  // 写入 localStorage / autosave / 远端等
+  console.log('md changed, length =', next.length)
+}
+</script>
+
+<template>
+  <MindMap
+    :markdown="md"
+    :theme="{ fontSize: 16, rainbowBranch: true }"
+    :line-colors="['#5eead4', '#fbbf24', '#f472b6', '#a78bfa']"
+    @markdown-change="onMdChange"
+    style="width: 100vw; height: 100vh"
+  />
+</template>
+```
+
+`markdown` prop 接受标准 markdown:`# / ## / ###` 作为节点层级;紧跟 heading 的 `[label](url)` 作为节点的 link;` ```note ... ``` ` 围栏作为节点的 note;`![alt](url)` 作为图片。改节点文字会自动 emit `markdownChange`,你可以把它写回输入框或远端。
+
 ## Props
 
 | Prop | Type | Default | 说明 |
@@ -70,6 +112,8 @@ const data: MindMapNode = {
 | `readonly` | `boolean` | `false` | 只读模式:禁用增删改、拖拽、编辑输入框。 |
 | `previewMode` | `boolean` | `false` | 预览模式:隐藏画布自带工具栏,只保留节点和折叠/调整手柄。适合做截图、嵌入展示。 |
 | `theme` | [`MindMapTheme`](#数据类型) | — | 主题色/字号/连线粗细等外观配置,见下表。 |
+| `markdown` | `string` | — | 可选:传入 markdown 文本,内部解析为 `data`。**与 `data` 二选一**,传了 `markdown` 后 `data` 被忽略。双向同步:数据变化时通过 `markdownChange` 事件回传序列化结果。 |
+| `lineColors` | `string[]` | — | 可选:顶层分支**连线**颜色列表(hex / rgb / 命名色)。优先级高于 `branchPaletteId` / `customPalettes`;留空走 palette 流程。 |
 
 ### `MindMapTheme` 字段
 
@@ -81,7 +125,7 @@ const data: MindMapNode = {
 | `branchText` | `string` | — | 普通节点文字色 |
 | `lineColor` | `string` | — | 连线颜色 |
 | `bgColor` | `string` | — | 画布背景色 |
-| `fontSize` | `number` | — | 基础字号(px) |
+| `fontSize` | `number` | `14` | 基础字号(px)。**节点的实际尺寸(高度/最小宽度/内边距/文本宽度)会按 `fontSize / 14` 等比缩放**——`fontSize=28` 时所有节点都会变成两倍大;`fontSize=10` 时一半。 |
 | `lineWidthStart` | `number` | `2.2` | 父端连线粗细(px) |
 | `lineWidthEnd` | `number` | `0.8` | 子端连线粗细(px) |
 | `rainbowBranch` | `boolean` | `false` | 顶层分支按色板循环配色 |
@@ -93,6 +137,7 @@ const data: MindMapNode = {
 | `change` | `MindMapNode` | 数据变更(增删改、导入、拖动)后触发,载荷是**新的整棵根节点**。 |
 | `select` | `MindMapNode \| null` | 用户点击节点时触发;`null` 表示点空白处取消选中。 |
 | `edit-note` | `nodeId: string` | 用户点击节点笔记图标 / 右键"添加/编辑笔记"时触发,由父组件决定如何展示笔记编辑界面。 |
+| `markdownChange` | `markdown: string` | 当使用了 `markdown` prop 且内部数据变化时触发,载荷是重新序列化后的 markdown 文本。`markdown` prop 写入触发时**不会**回环 emit。 |
 
 ## Expose 方法(通过 `ref` 访问)
 
@@ -148,6 +193,8 @@ mm.value.addChild('a') // 给 id=a 的节点加一个子节点
 | ---- | ---- |
 | `exportData()` | 返回当前数据的 JSON 字符串。 |
 | `importData(json)` | 从 JSON 字符串恢复数据,成功返回 `true`。 |
+| `getMarkdown()` | 返回当前数据序列化后的 markdown 字符串。 |
+| `setMarkdown(md, emitMarkdownChange?)` | 用 markdown 解析结果替换数据。`emitMarkdownChange` 默认 `true`,传 `false` 可避免回环(比如用 `markdown` prop 接收外部值后写回时)。 |
 
 ### 设置项
 
@@ -268,6 +315,8 @@ import {
   removeNode,  // (root, id) => 移除子树
   addChild,    // (parent, text) => 新子节点
   addSibling,  // (node, text) => 新同级节点
+  markdownToMindMap, // (md, rootText?) => MindMapNode — 与 MindMap 内部解析逻辑一致
+  mindMapToMarkdown, // (node, depth?) => string — 与 MindMap 内部序列化逻辑一致
 } from 'flow-mindmap'
 ```
 

package/dist/core/layout.d.ts

@@ -44,16 +44,31 @@ export interface LayoutNode {
     note?: {
         text: string;
     };
+    /** Mirrored from MindMapNode.richContent.  Read by the renderer
+     *  to show a small framed body under the node title (code / list /
+     *  table / paragraph).  Undefined means the node is plain text
+     *  only — the default behaviour, unchanged from before this
+     *  field was introduced. */
+    richContent?: RichContent;
     children: LayoutNode[];
     parent: LayoutNode | null;
 }
-import type { MindMapNode, MindMapImage } from '../types';
+import type { MindMapNode, MindMapImage, RichContent } from '../types';
 /** Return the rendered font size for a node at the given depth, scaled
  *  by the host's `theme.fontSize` (default 14).  The base table is
  *  tuned at 14px; values scale linearly so a 30px theme produces
  *  roughly 2.14× larger nodes. */
 declare function fontAt(depth: number, baseFontSize?: number): number;
 declare function heightAt(depth: number, baseFontSize?: number): number;
+/** Max text-label width in px.  MUST match `max-width` on `.zm-text`
+ *  in MindMap.vue.  The layout reserves this much room for the label
+ *  regardless of how long the actual text is — the DOM then truncates
+ *  with `text-overflow: ellipsis`.  Without this cap, a long string
+ *  pushes the rendered node box past the layout's reserved width and
+ *  the line anchor (computed from layout width) ends up inside the
+ *  box.  The 200px default is the same value `flow-mindmap` shipped
+ *  with before; keeping it keeps edge anchors stable. */
+export declare const TEXT_MAX_W = 200;
 export type LayoutMode = 'mindmap' | 'tree' | 'org';
 export interface LayoutOptions {
     mode?: LayoutMode;

package/dist/entry.d.ts

@@ -1,10 +1,10 @@
 import MindMap from './components/MindMap.vue';
 import type { App } from 'vue';
-import type { MindMapNode, MindMapOptions, MindMapTheme, MindMapExpose, MindMapSettings, NodeStyle, LineStyle, LayoutMode, BranchPalette, BranchPaletteId } from './types';
-import { uid, clone, findNode, findParent, removeNode, addChild, addSibling, markdownToMindMap, mindMapToMarkdown } from './tree';
-export type { MindMapNode, MindMapOptions, MindMapTheme, MindMapExpose, MindMapSettings, NodeStyle, LineStyle, LayoutMode, BranchPalette, BranchPaletteId };
+import type { MindMapNode, MindMapOptions, MindMapTheme, MindMapExpose, MindMapSettings, NodeStyle, LineStyle, LayoutMode, BranchPalette, BranchPaletteId, RichContent } from './types';
+import { uid, clone, findNode, findParent, removeNode, addChild, addSibling, markdownToMindMap, mindMapToMarkdown, markdownToRichMindMap, richBlockToMarkdown } from './tree';
+export type { MindMapNode, MindMapOptions, MindMapTheme, MindMapExpose, MindMapSettings, NodeStyle, LineStyle, LayoutMode, BranchPalette, BranchPaletteId, RichContent };
 export { MindMap };
-export { uid, clone, findNode, findParent, removeNode, addChild, addSibling, markdownToMindMap, mindMapToMarkdown };
+export { uid, clone, findNode, findParent, removeNode, addChild, addSibling, markdownToMindMap, mindMapToMarkdown, markdownToRichMindMap, richBlockToMarkdown };
 declare const plugin: {
     install(app: App): void;
 };