mind-elixir 5.0.0-beta.9 → 5.0.1

package/dist/types/utils/pubsub.d.ts

@@ -20,11 +20,6 @@ type NodeOperation = {
     name: 'moveNodeAfter' | 'moveNodeBefore' | 'moveNodeIn';
     objs: NodeObj[];
     toObj: NodeObj;
-} | {
-    name: 'removeNode';
-    obj: NodeObj;
-    originIndex?: number;
-    originParentId?: string;
 };
 type MultipleNodeOperation = {
     name: 'removeNodes';
@@ -64,8 +59,7 @@ export type EventMap = {
     selectNode: (nodeObj: NodeObj, e?: MouseEvent) => void;
     selectNewNode: (nodeObj: NodeObj) => void;
     selectNodes: (nodeObj: NodeObj[]) => void;
-    unselectNode: () => void;
-    unselectNodes: () => void;
+    unselectNodes: (nodeObj: NodeObj[]) => void;
     expandNode: (nodeObj: NodeObj) => void;
     linkDiv: () => void;
     scale: (scale: number) => void;
@@ -77,12 +71,12 @@ export type EventMap = {
      *  please use throttling to prevent performance degradation
      */
     updateArrowDelta: (arrow: Arrow) => void;
+    showContextMenu: (e: MouseEvent) => void;
 };
 export declare function createBus<T extends Record<string, (...args: any[]) => void> = EventMap>(): {
     handlers: Record<keyof T, ((...arg: any[]) => void)[]>;
-    showHandler: () => void;
     addListener: <K extends keyof T>(type: K, handler: T[K]) => void;
-    fire: <K_1 extends keyof T>(type: K_1, ...payload: Parameters<T[K_1]>) => void;
-    removeListener: <K_2 extends keyof T>(type: K_2, handler: T[K_2]) => void;
+    fire: <K extends keyof T>(type: K, ...payload: Parameters<T[K]>) => void;
+    removeListener: <K extends keyof T>(type: K, handler: T[K]) => void;
 };
 export {};

package/dist/types/utils/svg.d.ts

@@ -2,8 +2,16 @@ import type { Arrow } from '../arrow';
 import type { Summary } from '../summary';
 import type { MindElixirInstance } from '../types';
 import type { CustomSvg } from '../types/dom';
+export declare const svgNS = "http://www.w3.org/2000/svg";
 export declare const createPath: (d: string, color: string, width: string) => SVGPathElement;
 export declare const createLinkSvg: (klass: string) => SVGSVGElement;
 export declare const createLine: () => SVGLineElement;
-export declare const createSvgGroup: (d: string, arrowd1: string, arrowd2: string) => CustomSvg;
+export declare const createSvgGroup: (d: string, arrowd1: string, arrowd2: string, style?: {
+    stroke?: string;
+    strokeWidth?: string | number;
+    strokeDasharray?: string;
+    strokeLinecap?: "butt" | "round" | "square";
+    opacity?: string | number;
+    labelColor?: string;
+}) => CustomSvg;
 export declare const editSvgText: (mei: MindElixirInstance, textEl: SVGTextElement, node: Summary | Arrow) => void;

package/dist/types/utils/theme.d.ts

@@ -1,4 +1,3 @@
 import type { MindElixirInstance } from '../types/index';
 import type { Theme } from '../types/index';
-declare const changeTheme: (this: MindElixirInstance, theme: Theme, shouldRefresh?: boolean) => void;
-export default changeTheme;
+export declare const changeTheme: (this: MindElixirInstance, theme: Theme, shouldRefresh?: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-elixir",
-  "version": "5.0.0-beta.9",
+  "version": "5.0.1",
   "type": "module",
   "description": "Mind elixir is a free open source mind map core.",
   "keywords": [
@@ -36,8 +36,14 @@
       "import": "./dist/example.js",
       "require": "./dist/example.js"
     },
+    "./LayoutSsr": {
+      "types": "./dist/types/utils/LayoutSsr.d.ts",
+      "import": "./dist/LayoutSsr.js",
+      "require": "./dist/LayoutSsr.js"
+    },
     "./readme.md": "./readme.md",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./style": "./dist/style.css"
   },
   "typesVersions": {
     "*": {
@@ -77,7 +83,8 @@
     "@types/node": "^20.14.2",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@viselect/vanilla": "3.5.1",
+    "@viselect/vanilla": "3.9.0",
+    "@zumer/snapdom": "^1.3.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -86,7 +93,6 @@
     "lint-staged": "^13.3.0",
     "prettier": "2.8.4",
     "typescript": "^5.4.5",
-    "vite": "^4.5.3",
-    "vite-plugin-css-injected-by-js": "^3.5.1"
+    "vite": "^4.5.3"
   }
 }

package/readme.md

@@ -34,19 +34,34 @@
 
 Mind elixir is a open source JavaScript mind map core. You can use it with any frontend framework you like.
 
-Features:
-
-- Lightweight
-- High performance
-- Framework agnostic
-- Pluginable
-- Build-in drag and drop / node edit plugin
-- Export as SVG / PNG / Html
-- Summarize nodes
-- Bulk operations supported
-- Undo / Redo
-- Efficient shortcuts
-- Easily Styling your node with CSS variables
+## Features
+
+### 🎨 **User Experience**
+
+- **Fluent UX** - Smooth and intuitive interactions
+- **Well designed** - Clean and modern interface
+- **Mobile friendly** - Touch events for mobile devices
+- **Efficient shortcuts** - Keyboard shortcuts for power users
+
+### ⚡ **Performance & Architecture**
+
+- **Lightweight** - Minimal bundle size
+- **High performance** - Optimized for large mind maps
+- **Framework agnostic** - Works with any frontend framework
+- **Pluginable** - Extensible architecture
+
+### 🛠️ **Core Features**
+
+- **Interactive editing** - Built-in drag and drop / node edit capabilities
+- **Bulk operations** - Multi-node selection and operations
+- **Undo / Redo** - Complete operation history
+- **Node connections & summarization** - Custom node linking and content summarization
+
+### 📤 **Export & Customization**
+
+- **Multiple export formats** - SVG / PNG / HTML export
+- **Easy styling** - Customize mindmap with CSS variables
+- **Theme support** - Built-in themes and custom styling
 
 <details>
 <summary>Table of Contents</summary>
@@ -64,29 +79,27 @@ Features:
   - [Data Export And Import](#data-export-and-import)
   - [Operation Guards](#operation-guards)
 - [Export as a Image](#export-as-a-image)
-  - [Solution 1](#solution-1)
-  - [Solution 2](#solution-2)
 - [Theme](#theme)
 - [Shortcuts](#shortcuts)
 - [Ecosystem](#ecosystem)
 - [Development](#development)
 - [Thanks](#thanks)
 - [Contributors](#contributors)
+- [v5 Breaking Changes](#v5-breaking-changes)
 
 </details>
 
 ## Try now
 
-![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/screenshot2.png)
+![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/screenshot5.jpg)
 
 https://mind-elixir.com/
 
 ### Playground
 
-- Vanilla JS - https://codepen.io/ssshooter/pen/OJrJowN
-- React - https://codesandbox.io/s/mind-elixir-3-x-react-18-x-vy9fcq
-- Vue3 - https://codesandbox.io/s/mind-elixir-3-x-vue3-lth484
-- Vue2 - https://codesandbox.io/s/mind-elixir-3-x-vue-2-x-5kdfjp
+- Vanilla JS - https://codepen.io/ssshooter/pen/vEOqWjE
+- React - https://codesandbox.io/p/devbox/mind-elixir-3-x-react-18-x-forked-f3mtcd
+- Vue3 - https://codesandbox.io/p/sandbox/mind-elixir-3-x-vue3-lth484
 
 ## Documentation
 
@@ -103,7 +116,8 @@ npm i mind-elixir -S
 ```
 
 ```javascript
-import MindElixir from 'mind-elixir'
+import MindElixir from 'mind-elixir';
+import "mind-elixir/style";
 ```
 
 #### Script tag
@@ -112,6 +126,12 @@ import MindElixir from 'mind-elixir'
 <script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>
 ```
 
+And in your CSS file:
+
+```css
+@import "https://cdn.jsdelivr.net/npm/mind-elixir/dist/style.css";
+```
+
 ### Init
 
 ```html
@@ -124,10 +144,9 @@ import MindElixir from 'mind-elixir'
 </style>
 ```
 
-**Breaking Change** since 1.0.0, `data` should be passed to `init()`, not `options`.
-
 ```javascript
 import MindElixir from 'mind-elixir'
+import "mind-elixir/style";
 import example from 'mind-elixir/dist/example1'
 
 let options = {
@@ -155,11 +174,7 @@ let options = {
     ],
   },
   before: {
-    insertSibling(el, obj) {
-      return true
-    },
-    async addChild(el, obj) {
-      await sleep()
+    insertSibling(type, obj) {
       return true
     },
   },
@@ -256,18 +271,8 @@ mind.refresh(data)
 let mind = new MindElixir({
   // ...
   before: {
-    insertSibling(el, obj) {
-      console.log(el, obj)
-      if (this.currentNode.nodeObj.parent.root) {
-        return false
-      }
-      return true
-    },
     async addChild(el, obj) {
-      await sleep()
-      if (this.currentNode.nodeObj.parent.root) {
-        return false
-      }
+      await saveDataToDb()
       return true
     },
   },
@@ -276,26 +281,6 @@ let mind = new MindElixir({
 
 ## Export as a Image
 
-### Solution 1
-
-```typescript
-const mind = {
-  /** mind elixir instance */
-}
-const downloadPng = async () => {
-  const blob = await mind.exportPng() // Get a Blob!
-  if (!blob) return
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = 'filename.png'
-  a.click()
-  URL.revokeObjectURL(url)
-}
-```
-
-### Solution 2
-
 Install `@ssshooter/modern-screenshot`, then:
 
 ```typescript
@@ -303,14 +288,6 @@ import { domToPng } from '@ssshooter/modern-screenshot'
 
 const download = async () => {
   const dataUrl = await domToPng(mind.nodes, {
-    onCloneNode: node => {
-      const n = node as HTMLDivElement
-      n.style.position = ''
-      n.style.top = ''
-      n.style.left = ''
-      n.style.bottom = ''
-      n.style.right = ''
-    },
     padding: 300,
     quality: 1,
   })
@@ -426,5 +403,19 @@ pnpm doc:md
 Thanks for your contributions to Mind Elixir! Your support and dedication make this project better.
 
 <a href="https://github.com/SSShooter/mind-elixir-core/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=SSShooter/mind-elixir-core&columns=6" />
+  <img src="https://contrib.rocks/image?repo=SSShooter/mind-elixir-core" />
 </a>
+
+## v5 Breaking Changes
+
+- Move scroll-based movement to transition-based movement
+- `Summary.text` -> `Summary.label`
+- Remove `getDataMd()`
+- MindElixir.dragMoveHelper -> instance.dragMoveHelper
+- Remove `unselectNode()`
+- Remove `removeNode()`
+- `node.style.fontSize`: use string instead of number which means you should add `px` to the end
+- Use `instance.findEl` instead of `MindElixir.E` to get a node element
+- CSS file is separated from JS file, you need to import it manually
+  - If using a bundler with CSS support: `import "mind-elixir/style";`
+  - If using a CDN you can add to your CSS file: `@import "https://cdn.jsdelivr.net/npm/mind-elixir@^5.0.0/dist/style.css";`