It's a nice time to release v2.0.0 during golden week!

v2.0.0

Author: SSShooter

.eslintignore

@@ -1,3 +1,2 @@
 dist
-src/__tests__
-**/*.d.ts
+src/__tests__

package.json

@@ -45,13 +45,11 @@
     "@typescript-eslint/parser": "^5.52.0",
     "babel-loader": "^8.0.6",
     "better-docs": "^2.3.2",
-    "canvg": "^3.0.6",
     "css-loader": "^6.7.1",
     "docdash": "^1.1.1",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
     "husky": "^8.0.3",
     "jest": "^27.5.1",

readme.cn.md

@@ -1,6 +1,6 @@
-![mindelixir logo](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo.png)
+<p align="center"><a href="mind-elixir.com" target="_blank" rel="noopener noreferrer"><img width="150" src="https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png" alt="mindelixir logo2"></a></p>
 
-<p>
+<p align="center">
   <a href="https://www.npmjs.com/package/mind-elixir">
     <img src="https://img.shields.io/npm/v/mind-elixir" alt="version">
   </a>
@@ -78,17 +78,17 @@ let options = {
   direction: MindElixir.LEFT,
   // create new map data
   data: MindElixir.new('new topic') or example,
-  // the data return from `.getAllData()`
+  // the data return from `.getData()`
   draggable: true, // default true
   contextMenu: true, // default true
   toolBar: true, // default true
   nodeMenu: true, // default true
   keypress: true, // default true
   locale: 'en', // [zh_CN,zh_TW,en,ja,pt] waiting for PRs
   overflowHidden: false, // default false
-  primaryLinkStyle: 2, // [1,2] default 1
-  primaryNodeVerticalGap: 15, // default 25
-  primaryNodeHorizontalGap: 15, // default 65
+  mainLinkStyle: 2, // [1,2] default 1
+  mainNodeVerticalGap: 15, // default 25
+  mainNodeHorizontalGap: 15, // default 65
   contextMenuOption: {
     focus: true,
     link: true,
@@ -165,9 +165,9 @@ mind.bus.addListener('expandNode', node => {
 ### 数据导出
 
 ```javascript
-mind.getAllData() // javascript object, see src/example.js
-mind.getAllDataString() // stringify object
-mind.getAllDataMd() // markdown
+mind.getData() // javascript object, see src/example.js
+mind.getDataString() // stringify object
+mind.getDataMd() // markdown
 ```
 
 ### 输出图片
@@ -207,7 +207,3 @@ let mind = new MindElixir({
 ## 文档
 
 https://doc.mind-elixir.com/
-
-## 感谢
-
-[canvg](https://github.com/canvg/canvg)

readme.md

@@ -1,6 +1,6 @@
-![mindelixir logo](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo.png)
+<p align="center"><a href="mind-elixir.com" target="_blank" rel="noopener noreferrer"><img width="150" src="https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png" alt="mindelixir logo2"></a></p>
 
-<p>
+<p align="center">
   <a href="https://www.npmjs.com/package/mind-elixir">
     <img src="https://img.shields.io/npm/v/mind-elixir" alt="version">
   </a>
@@ -20,11 +20,13 @@
 
 Mind elixir is a free open source mind map core.
 
+- Zero dependency
 - High performance
 - Lightweight
 - Framework agnostic
 - Pluginable
 - Build-in drag and drop / node edit plugin
+- Styling your node with CSS
 
 <details>
 <summary>Table of Contents</summary>
@@ -46,6 +48,7 @@ Mind elixir is a free open source mind map core.
   - [Event Handling](#event-handling)
   - [Data Export And Import](#data-export-and-import)
   - [Operation Guards](#operation-guards)
+- [Theme](#theme)
 - [Not only core](#not-only-core)
 
 </details>
@@ -66,11 +69,11 @@ https://mind-elixir.com/
 
 https://codepen.io/ssshooter/pen/GVQRYK
 
-#### Use with React 
+#### Use with React
 
 https://codesandbox.io/s/mind-elixir-react-9sisb
 
-#### Use with Vue 
+#### Use with Vue
 
 https://codesandbox.io/s/mind-elixir-vue-nqjjl
 
@@ -128,9 +131,9 @@ let options = {
   keypress: true, // default true
   locale: 'en', // [zh_CN,zh_TW,en,ja,pt,ru] waiting for PRs
   overflowHidden: false, // default false
-  primaryLinkStyle: 2, // [1,2] default 1
-  primaryNodeVerticalGap: 15, // default 25
-  primaryNodeHorizontalGap: 15, // default 65
+  mainLinkStyle: 2, // [1,2] default 1
+  mainNodeVerticalGap: 15, // default 25
+  mainNodeHorizontalGap: 15, // default 65
   contextMenuOption: {
     focus: true,
     link: true,
@@ -162,7 +165,7 @@ mind.install(plugin) // install your plugin
 // create new map data
 const data = MindElixir.new('new topic')
 // or `example`
-// or the data return from `.getAllData()`
+// or the data return from `.getData()`
 mind.init(data)
 
 // get a node
@@ -173,7 +176,7 @@ E('node-id')
 
 ```javascript
 // whole node data structure up to now
-nodeData = {
+const nodeData = {
   topic: 'node topic',
   id: 'bd1c24420cd2c2f5',
   style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
@@ -182,10 +185,10 @@ nodeData = {
   icons: ['😀'],
   hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
   image: {
-    url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo.png', // required
+    url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png', // required
     // you need to query the height and width of the image and calculate the appropriate value to display the image
     height: 90, // required
-    width: 300, // required
+    width: 90, // required
   },
   children: [
     {
@@ -227,9 +230,9 @@ mind.bus.addListener('expandNode', node => {
 
 ```javascript
 // data export
-const data = mind.getAllData() // javascript object, see src/example.js
-mind.getAllDataString() // stringify object
-mind.getAllDataMd() // markdown
+const data = mind.getData() // javascript object, see src/example.js
+mind.getDataString() // stringify object
+mind.getDataMd() // markdown
 
 // data import
 // initiate
@@ -263,6 +266,28 @@ let mind = new MindElixir({
 })
 ```
 
+## Theme
+
+```javascript
+const options = {
+  // ...
+  theme: {
+    name: 'Dark',
+    // main lines color palette
+    palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
+    // overwrite css variables
+    cssVar: {
+      '--main-color': '#ffffff',
+      '--main-bgcolor': '#4c4f69',
+      '--color': '#cccccc',
+      '--bgcolor': '#252526',
+    },
+    // all variables see /src/index.less
+  },
+  // ...
+}
+```
+
 ## Not only core
 
 - [@mind-elixir/export-xmind](https://github.com/ssshooter/export-xmind)

src/__tests__/nodeOperation.js

@@ -72,7 +72,7 @@ describe('nodeOperation', () => {
       await m.moveNode(from, to)
 
       const domCheck =
-        from.closest('children').previousElementSibling === to.parentNode
+        from.closest('me-children').previousElementSibling === to.parentNode
 
       from = from.nodeObj
       to = to.nodeObj
@@ -90,7 +90,7 @@ describe('nodeOperation', () => {
       await m.moveNodeBefore(from, to)
 
       const domCheck =
-        from.closest('grp') === to.closest('grp').previousElementSibling
+        from.closest('me-wrapper') === to.closest('me-wrapper').previousElementSibling
 
       from = from.nodeObj
       to = to.nodeObj
@@ -112,7 +112,7 @@ describe('nodeOperation', () => {
       await m.moveNodeAfter(from, to)
 
       const domCheck =
-        from.closest('grp').previousElementSibling === to.closest('grp')
+        from.closest('me-wrapper').previousElementSibling === to.closest('me-wrapper')
 
       from = from.nodeObj
       to = to.nodeObj
@@ -142,7 +142,7 @@ describe('nodeOperation', () => {
     expect(res[1]).toBeFalsy()
 
     const delRoot = await page.evaluate(async() => {
-      const el = E('root')
+      const el = E('me-root')
       try {
         await m.removeNode(el)
       } catch (err) {

src/const.ts

@@ -3,7 +3,17 @@ export const RIGHT = 1
 export const SIDE = 2
 export const DOWN = 3
 
-export const GAP = 20 // must sync with --gap in index.less
-export const PRIMARY_NODE_HORIZONTAL_GAP = 65
-export const PRIMARY_NODE_VERTICAL_GAP = 25
+export const GAP = 30 // must sync with --gap in index.less
+export const MAIN_NODE_HORIZONTAL_GAP = 65
+export const MAIN_NODE_VERTICAL_GAP = 25
 export const TURNPOINT_R = 8
+export const THEME = {
+  name: 'Latte',
+  palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
+  cssVar: {
+    '--main-color': '#444446',
+    '--main-bgcolor': '#ffffff',
+    '--color': '#777777',
+    '--bgcolor': '#f6f6f6',
+  },
+}

src/dev.dist.js

@@ -42,9 +42,9 @@ const mind = new MindElixir({
       return true
     },
   },
-  // primaryLinkStyle: 2,
-  primaryNodeVerticalGap: 15, // 25
-  primaryNodeHorizontalGap: 15, // 65
+  // mainLinkStyle: 2,
+  mainNodeVerticalGap: 15, // 25
+  mainNodeHorizontalGap: 15, // 65
 })
 mind.init(example)
 function sleep() {

src/dev.ts

@@ -55,9 +55,9 @@ const options = {
       return true
     },
   },
-  primaryLinkStyle: 1,
-  primaryNodeVerticalGap: 25, // 25
-  primaryNodeHorizontalGap: 65, // 65
+  mainLinkStyle: 1,
+  mainNodeVerticalGap: 25, // 25
+  mainNodeHorizontalGap: 65, // 65
 }
 
 const mind = new (MindElixir as any)(options)

src/exampleData/1.cn.js

@@ -1,6 +1,6 @@
 export default {
   nodeData: {
-    id: 'root',
+    id: 'me-root',
     topic: 'Mind Elixir',
     root: true,
     children: [

src/exampleData/1.js

@@ -1,22 +1,32 @@
 export default {
   direction: 0,
+  theme: {
+    name: 'Dark',
+    palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
+    cssVar: {
+      '--main-color': '#ffffff',
+      '--main-bgcolor': '#4c4f69',
+      '--color': '#cccccc',
+      '--bgcolor': '#252526',
+    },
+  },
   nodeData: {
-    id: 'root',
+    id: 'me-root',
     topic: 'Mind Elixir',
     root: true,
     children: [
       {
-        topic: 'logo',
+        topic: 'logo2',
         id: '56dae51a90d350a8',
         direction: 0,
         expanded: true,
         children: [
           {
             topic: 'mind-elixir',
             image: {
-              url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo.png',
+              url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png',
               height: 90,
-              width: 300,
+              width: 90,
             },
           },
         ],
@@ -26,7 +36,7 @@ export default {
         id: 'bd4313fbac40284b',
         direction: 0,
         expanded: true,
-        branchColor: '#e64553',
+        // branchColor: '#e64553',
         children: [
           { topic: 'A mind map core', id: 'beeb823afd6d2114' },
           { topic: 'Free', id: 'c1f068377de9f3a0' },
@@ -170,14 +180,6 @@ export default {
             id: 'bd41fd4ca32322a5',
             hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
           },
-          // {
-          //   topic: 'Image URL',
-          //   id: 'bd41fd4ca32322a6',
-          //   image: {
-          //     url: 'https://cdn.jsdelivr.net/gh/ssshooter/mind-elixir-core/logo.png',
-          //     width: 200,
-          //   },
-          // },
         ],
       },
       {