kakidash 0.2.1 → 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 (7) hide show
  1. package/README.ja.md +102 -123
  2. package/README.md +103 -123
  3. package/dist/index.d.ts +49 -1
  4. package/dist/kakidash.cjs +6 -6
  5. package/dist/kakidash.es.js +842 -786
  6. package/dist/kakidash.umd.js +6 -6
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -45,6 +45,7 @@ pnpm add kakidash
45
45
  ```
46
46
 
47
47
  ## Usage
48
+
48
49
  ### 1. HTML Preparation
49
50
 
50
51
  Prepare a container element (e.g., `div`) to display `kakidash`.
@@ -53,26 +54,28 @@ Prepare a container element (e.g., `div`) to display `kakidash`.
53
54
  ```html
54
55
  <!DOCTYPE html>
55
56
  <html lang="en">
56
- <head>
57
- <meta charset="UTF-8">
57
+ <head>
58
+ <meta charset="UTF-8" />
58
59
  <title>Kakidash Demo</title>
59
60
  <style>
60
- /* Container size is required */
61
- #mindmap-container {
62
- width: 100vw;
63
- height: 100vh;
64
- border: 1px solid #ccc;
65
- margin: 0;
66
- padding: 0;
67
- overflow: hidden; /* Prevent scrolling within container */
68
- }
69
- body { margin: 0; }
61
+ /* Container size is required */
62
+ #mindmap-container {
63
+ width: 100vw;
64
+ height: 100vh;
65
+ border: 1px solid #ccc;
66
+ margin: 0;
67
+ padding: 0;
68
+ overflow: hidden; /* Prevent scrolling within container */
69
+ }
70
+ body {
71
+ margin: 0;
72
+ }
70
73
  </style>
71
- </head>
72
- <body>
74
+ </head>
75
+ <body>
73
76
  <div id="mindmap-container"></div>
74
77
  <!-- Script Injection Here -->
75
- </body>
78
+ </body>
76
79
  </html>
77
80
  ```
78
81
 
@@ -84,7 +87,7 @@ Prepare a container element (e.g., `div`) to display `kakidash`.
84
87
  pnpm add kakidash
85
88
  ```
86
89
 
87
- ```typescript
90
+ ````typescript
88
91
  import { Kakidash } from 'kakidash';
89
92
 
90
93
  // Get container
@@ -108,8 +111,9 @@ You can switch themes dynamically:
108
111
 
109
112
  ```typescript
110
113
  kakidash.setTheme('dark'); // 'default', 'simple', 'colorful', 'dark'
111
- ```
112
- ```
114
+ ````
115
+
116
+ ````
113
117
 
114
118
  #### B. Browser Direct Import (Script Tag / CDN)
115
119
 
@@ -129,10 +133,10 @@ Use the built `umd` file. The library will be exposed under the global variable
129
133
  // Initialize
130
134
  const container = document.getElementById('mindmap-container');
131
135
  const kakidash = new Kakidash(container);
132
-
136
+
133
137
  console.log('Kakidash initialized:', kakidash);
134
138
  </script>
135
- ```
139
+ ````
136
140
 
137
141
  ## Custom Styling
138
142
 
@@ -143,28 +147,28 @@ You can define custom styles using `updateGlobalStyles`. These settings are pers
143
147
  // These settings are saved internally.
144
148
  kakidash.updateGlobalStyles({
145
149
  // Root node style
146
- rootNode: {
150
+ rootNode: {
147
151
  border: '4px solid gold',
148
152
  background: '#ffeeee',
149
- color: '#333' // Font color
153
+ color: '#333', // Font color
150
154
  },
151
-
155
+
152
156
  // Child nodes style
153
- childNode: {
154
- border: '2px dashed blue',
157
+ childNode: {
158
+ border: '2px dashed blue',
155
159
  background: 'white',
156
- color: '#555' // Font color
160
+ color: '#555', // Font color
157
161
  },
158
-
162
+
159
163
  // Connection line color
160
- connection: {
161
- color: 'orange'
164
+ connection: {
165
+ color: 'orange',
162
166
  },
163
-
167
+
164
168
  // Entire canvas background
165
169
  canvas: {
166
- background: '#fafafa' // Use 'transparent' for transparency
167
- }
170
+ background: '#fafafa', // Use 'transparent' for transparency
171
+ },
168
172
  });
169
173
 
170
174
  // 2. Activate the custom theme to see your changes
@@ -175,13 +179,13 @@ kakidash.setTheme('custom');
175
179
 
176
180
  All values accept standard CSS strings.
177
181
 
178
- | Object | Property | Description | Example |
179
- | --- | --- | --- | --- |
180
- | `rootNode`, `childNode` | `border` | Node border | `'2px solid red'`, `'none'` |
181
- | | `background` | Node background | `'#ffffff'`, `'rgba(0,0,0,0.5)'`, `'transparent'` |
182
- | | `color` | Text color | `'#333'`, `'black'` |
183
- | `connection` | `color` | Connection line color | `'#ccc'`, `'orange'` |
184
- | `canvas` | `background` | Canvas background | `'#f0f0f0'`, `'transparent'` |
182
+ | Object | Property | Description | Example |
183
+ | ----------------------- | ------------ | --------------------- | ------------------------------------------------- |
184
+ | `rootNode`, `childNode` | `border` | Node border | `'2px solid red'`, `'none'` |
185
+ | | `background` | Node background | `'#ffffff'`, `'rgba(0,0,0,0.5)'`, `'transparent'` |
186
+ | | `color` | Text color | `'#333'`, `'black'` |
187
+ | `connection` | `color` | Connection line color | `'#ccc'`, `'orange'` |
188
+ | `canvas` | `background` | Canvas background | `'#f0f0f0'`, `'transparent'` |
185
189
 
186
190
  ## API Reference
187
191
 
@@ -209,15 +213,15 @@ All values accept standard CSS strings.
209
213
 
210
214
  ### Events
211
215
 
212
- | Event Name | Payload | Description |
213
- | --- | --- | --- |
214
- | `node:select` | `string \| null` | Fired when a node is selected. |
215
- | `node:add` | `{ id: string; topic: string }` | Fired when a new node is added. |
216
- | `node:remove` | `string` | Fired when a node is removed. |
217
- | `node:update` | `{ id: string; topic?: string; icon?: string }` | Fired when a node is updated. |
218
- | `node:move` | `{ nodeId: string; newParentId: string; position?: string }` | Fired when a node is moved. |
219
- | `model:load` | `MindMapData` | Fired when data is loaded. |
220
- | `model:change` | `void` | Fired when the data model changes. |
216
+ | Event Name | Payload | Description |
217
+ | -------------- | ------------------------------------------------------------ | ---------------------------------- |
218
+ | `node:select` | `string \| null` | Fired when a node is selected. |
219
+ | `node:add` | `{ id: string; topic: string }` | Fired when a new node is added. |
220
+ | `node:remove` | `string` | Fired when a node is removed. |
221
+ | `node:update` | `{ id: string; topic?: string; icon?: string }` | Fired when a node is updated. |
222
+ | `node:move` | `{ nodeId: string; newParentId: string; position?: string }` | Fired when a node is moved. |
223
+ | `model:load` | `MindMapData` | Fired when data is loaded. |
224
+ | `model:change` | `void` | Fired when the data model changes. |
221
225
 
222
226
  ```typescript
223
227
  kakidash.on('node:select', (nodeId) => {
@@ -236,7 +240,7 @@ const kakidash = new Kakidash(container, {
236
240
  shortcuts: {
237
241
  // Override 'addChild' to Ctrl+N
238
242
  addChild: [{ key: 'n', ctrlKey: true }],
239
- }
243
+ },
240
244
  });
241
245
  ```
242
246
 
@@ -246,41 +250,19 @@ Here is the complete default configuration. You can partially override these key
246
250
 
247
251
  ```json
248
252
  {
249
- "navUp": [
250
- { "key": "ArrowUp" },
251
- { "key": "k" }
252
- ],
253
- "navDown": [
254
- { "key": "ArrowDown" },
255
- { "key": "j" }
256
- ],
257
- "navLeft": [
258
- { "key": "ArrowLeft" },
259
- { "key": "h" }
260
- ],
261
- "navRight": [
262
- { "key": "ArrowRight" },
263
- { "key": "l" }
264
- ],
265
- "addChild": [
266
- { "key": "Tab" },
267
- { "key": "a" }
268
- ],
253
+ "navUp": [{ "key": "ArrowUp" }, { "key": "k" }],
254
+ "navDown": [{ "key": "ArrowDown" }, { "key": "j" }],
255
+ "navLeft": [{ "key": "ArrowLeft" }, { "key": "h" }],
256
+ "navRight": [{ "key": "ArrowRight" }, { "key": "l" }],
257
+ "addChild": [{ "key": "Tab" }, { "key": "a" }],
269
258
  "insertParent": [
270
259
  { "key": "Tab", "shiftKey": true },
271
260
  { "key": "a", "shiftKey": true }
272
261
  ],
273
262
  "addSibling": [{ "key": "Enter" }],
274
263
  "addSiblingBefore": [{ "key": "Enter", "shiftKey": true }],
275
- "deleteNode": [
276
- { "key": "Delete" },
277
- { "key": "Backspace" }
278
- ],
279
- "beginEdit": [
280
- { "key": "i" },
281
- { "key": " " },
282
- { "key": "F2" }
283
- ],
264
+ "deleteNode": [{ "key": "Delete" }, { "key": "Backspace" }],
265
+ "beginEdit": [{ "key": "i" }, { "key": " " }, { "key": "F2" }],
284
266
  "copy": [
285
267
  { "key": "c", "ctrlKey": true },
286
268
  { "key": "c", "metaKey": true }
@@ -305,14 +287,8 @@ Here is the complete default configuration. You can partially override these key
305
287
  ],
306
288
  "bold": [{ "key": "b", "shiftKey": true }],
307
289
  "italic": [{ "key": "i", "shiftKey": true }],
308
- "increaseFontSize": [
309
- { "key": ">", "shiftKey": true },
310
- { "key": "." }
311
- ],
312
- "decreaseFontSize": [
313
- { "key": "<", "shiftKey": true },
314
- { "key": "," }
315
- ],
290
+ "increaseFontSize": [{ "key": ">", "shiftKey": true }, { "key": "." }],
291
+ "decreaseFontSize": [{ "key": "<", "shiftKey": true }, { "key": "," }],
316
292
  "zoomIn": [{ "key": "[" }],
317
293
  "zoomOut": [{ "key": "]" }],
318
294
  "resetZoom": [{ "key": ":" }],
@@ -331,51 +307,55 @@ Here is the complete default configuration. You can partially override these key
331
307
  ## Shortcuts
332
308
 
333
309
  ### General
334
- | Key | Description |
335
- | --- | --- |
336
- | `m` | Command Palette (Search / Icons) |
337
- | `Arrow Keys` | Navigate between nodes |
338
- | `h` / `j` / `k` / `l` | Navigate between nodes (Vim-style) |
339
- | `F2` / `DblClick` / `Space` / `i` | Start editing node (Space triggers zoom if image) |
340
- | `Enter` | Add sibling node (below) |
341
- | `Shift + Enter` | Add sibling node (above) |
342
- | `Tab` / `a` | Add child node |
343
- | `Shift + Tab` / `Shift + a` | Insert parent node |
344
- | `Delete` / `Backspace` | Delete node |
345
- | `Ctrl/Cmd + z` | Undo |
346
- | `Ctrl/Cmd + Shift + z` / `Ctrl + y` | Redo |
347
- | `Ctrl/Cmd + C` | Copy |
348
- | `Ctrl/Cmd + X` | Cut |
349
- | `Ctrl/Cmd + V` | Paste (Images supported) |
350
- | `Drag` (Canvas) | Pan screen |
351
- | `Wheel` | Vertical scroll (Pan) |
352
- | `Shift + Wheel` | Horizontal scroll (Pan) |
353
- | `Ctrl/Cmd + Wheel` | Zoom in/out |
354
- | `[` | Canvas Zoom In |
355
- | `]` | Canvas Zoom Out |
356
- | `:` | Reset Zoom |
357
- | Click `+/-` / `f` | Toggle node folding |
310
+
311
+ | Key | Description |
312
+ | ----------------------------------- | ------------------------------------------------- |
313
+ | `m` | Command Palette (Search / Icons) |
314
+ | `Arrow Keys` | Navigate between nodes |
315
+ | `h` / `j` / `k` / `l` | Navigate between nodes (Vim-style) |
316
+ | `F2` / `DblClick` / `Space` / `i` | Start editing node (Space triggers zoom if image) |
317
+ | `Enter` | Add sibling node (below) |
318
+ | `Shift + Enter` | Add sibling node (above) |
319
+ | `Tab` / `a` | Add child node |
320
+ | `Shift + Tab` / `Shift + a` | Insert parent node |
321
+ | `Delete` / `Backspace` | Delete node |
322
+ | `Ctrl/Cmd + z` | Undo |
323
+ | `Ctrl/Cmd + Shift + z` / `Ctrl + y` | Redo |
324
+ | `Ctrl/Cmd + C` | Copy |
325
+ | `Ctrl/Cmd + X` | Cut |
326
+ | `Ctrl/Cmd + V` | Paste (Images supported) |
327
+ | `Drag` (Canvas) | Pan screen |
328
+ | `Wheel` | Vertical scroll (Pan) |
329
+ | `Shift + Wheel` | Horizontal scroll (Pan) |
330
+ | `Ctrl/Cmd + Wheel` | Zoom in/out |
331
+ | `[` | Canvas Zoom In |
332
+ | `]` | Canvas Zoom Out |
333
+ | `:` | Reset Zoom |
334
+ | Click `+/-` / `f` | Toggle node folding |
358
335
 
359
336
  ### Editing (Text Input)
360
- | Key | Description |
361
- | --- | --- |
362
- | `Enter` | Confirm edit |
363
- | `Shift + Enter` | New line |
364
- | `Esc` | Cancel edit |
337
+
338
+ | Key | Description |
339
+ | --------------- | ------------ |
340
+ | `Enter` | Confirm edit |
341
+ | `Shift + Enter` | New line |
342
+ | `Esc` | Cancel edit |
365
343
 
366
344
  ### Styling (Since selection)
367
- | Key | Description |
368
- | --- | --- |
369
- | `Shift + b` | Toggle Bold |
370
- | `Shift + i` | Toggle Italic |
371
- | `Shift + . (>)` / `.` | Increase font size |
372
- | `Shift + , (<)` / `,` | Decrease font size |
373
- | `Shift + ArrowLeft / Right` | Adjust node width |
374
- | `1` - `7` | Change node color (Palette order) |
345
+
346
+ | Key | Description |
347
+ | --------------------------- | --------------------------------- |
348
+ | `Shift + b` | Toggle Bold |
349
+ | `Shift + i` | Toggle Italic |
350
+ | `Shift + . (>)` / `.` | Increase font size |
351
+ | `Shift + , (<)` / `,` | Decrease font size |
352
+ | `Shift + ArrowLeft / Right` | Adjust node width |
353
+ | `1` - `7` | Change node color (Palette order) |
375
354
 
376
355
  ## Architecture
377
356
 
378
357
  For details on the software architecture and internal module dependencies, please refer to:
358
+
379
359
  - [Software Architecture Design](./docs/SOFTWARE_ARCHITECTURE.md)
380
360
 
381
361
  ## Development
package/dist/index.d.ts CHANGED
@@ -1,5 +1,25 @@
1
1
  export declare type Direction = 'Up' | 'Down' | 'Left' | 'Right';
2
2
 
3
+ /**
4
+ * Interface for handling file Import/Export operations.
5
+ * Allows external systems (like VS Code Extension) to override default browser behaviors.
6
+ */
7
+ export declare interface FileHandler {
8
+ /**
9
+ * Request to import a file.
10
+ * @param format The expected file format (e.g., 'xmind').
11
+ * @returns The file content as ArrayBuffer (binary) or string (text), or null if cancelled.
12
+ */
13
+ onImportFile(format: string): Promise<ArrayBuffer | string | null>;
14
+ /**
15
+ * Request to export a file.
16
+ * @param data The data to export (Blob or string).
17
+ * @param filename The suggested filename.
18
+ * @param format The file format (e.g., 'png', 'svg', 'markdown').
19
+ */
20
+ onExportFile(data: Blob | string, filename: string, format: string): Promise<void>;
21
+ }
22
+
3
23
  /**
4
24
  * The main class for the Kakidash mind map library.
5
25
  * It manages the mind map data, interaction, and rendering.
@@ -77,6 +97,11 @@ export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
77
97
  getRootId(): string;
78
98
  }
79
99
 
100
+ declare type KakidashCommandArgs = {
101
+ name: string;
102
+ args?: any;
103
+ };
104
+
80
105
  export declare type KakidashEventMap = {
81
106
  'node:select': string | null;
82
107
  'node:add': {
@@ -95,6 +120,7 @@ export declare type KakidashEventMap = {
95
120
  };
96
121
  'model:load': MindMapData;
97
122
  'model:change': void;
123
+ command: KakidashCommandArgs;
98
124
  };
99
125
 
100
126
  export declare interface KakidashOptions {
@@ -108,6 +134,12 @@ export declare interface KakidashOptions {
108
134
  * Custom styles to apply to the mind map initially.
109
135
  */
110
136
  customStyles?: MindMapStyles;
137
+ /**
138
+ * Optional handler for file I/O operations.
139
+ * If provided, this handler will be used instead of default browser DOM APIs
140
+ * for importing and exporting files.
141
+ */
142
+ fileHandler?: FileHandler;
111
143
  }
112
144
 
113
145
  export declare interface KeyBinding {
@@ -120,7 +152,7 @@ export declare interface KeyBinding {
120
152
 
121
153
  export declare type LayoutMode = 'Right' | 'Left' | 'Both';
122
154
 
123
- export declare class MindMap {
155
+ declare class MindMap {
124
156
  root: Node_2;
125
157
  theme: Theme;
126
158
  constructor(rootNode: Node_2);
@@ -222,6 +254,15 @@ export declare type ShortcutAction = 'navUp' | 'navDown' | 'navLeft' | 'navRight
222
254
 
223
255
  export declare type ShortcutConfig = Partial<Record<ShortcutAction, KeyBinding[]>>;
224
256
 
257
+ export declare class SvgGenerator {
258
+ /**
259
+ * Generates an SVG string representation of the mind map content within the given container.
260
+ * @param container The element containing the mind map layers.
261
+ * @returns A string containing the serialized SVG.
262
+ */
263
+ generate(container: HTMLElement): string;
264
+ }
265
+
225
266
  export declare type Theme = 'default' | 'simple' | 'colorful' | 'custom';
226
267
 
227
268
  declare class TypedEventEmitter<EventMap extends Record<string, any>> {
@@ -233,4 +274,11 @@ declare class TypedEventEmitter<EventMap extends Record<string, any>> {
233
274
  protected emit<K extends keyof EventMap>(event: K, payload: EventMap[K]): void;
234
275
  }
235
276
 
277
+ export declare class XMindImporter {
278
+ private idGenerator;
279
+ constructor();
280
+ extractMindMapData(data: ArrayBuffer | Blob | Uint8Array | string): Promise<MindMapData>;
281
+ private transformTopic;
282
+ }
283
+
236
284
  export { }