mind-elixir 3.1.3 → 3.2.0

package/dist/example.iife.js

@@ -1,2 +1,2 @@
 var example=function(){"use strict";return{direction:2,nodeData:{id:"me-root",topic:"Mind Elixir",root:!0,tags:["Mind Map Core"],children:[{topic:"logo2",id:"56dae51a90d350a8",direction:0,expanded:!0,children:[{id:"use-image",topic:"mind-elixir",image:{url:"https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png",height:90,width:90}}]},{topic:"What is Mind Elixir",id:"bd4313fbac40284b",direction:0,expanded:!0,children:[{topic:"A mind map core",id:"beeb823afd6d2114"},{topic:"Free",id:"c1f068377de9f3a0"},{topic:"Open-Source",id:"c1f06d38a09f23ca"},{topic:"Use without JavaScript framework",id:"c1f06e4cbcf16463",expanded:!0,children:[]},{topic:"Use in your own project",id:"c1f1f11a7fbf7550",children:[{topic:"import MindElixir from 'mind-elixir'",id:"c1f1e245b0a89f9b"},{topic:"new MindElixir({...}).init(data)",id:"c1f1ebc7072c8928"}]},{topic:"Easy to use",id:"c1f0723c07b408d7",expanded:!0,children:[{topic:"Use it like other mind map application",id:"c1f09612fd89920d"}]}]},{topic:"Basics",id:"bd1b66c4b56754d9",direction:0,expanded:!0,children:[{topic:"tab - Create a child node",id:"bd1b6892bcab126a"},{topic:"enter - Create a sibling node",id:"bd1b6b632a434b27"},{topic:"del - Remove a node",id:"bd1b983085187c0a"}]},{topic:"Focus mode",id:"bd1b9b94a9a7a913",direction:1,expanded:!0,children:[{topic:"Right click and select Focus Mode",id:"bd1bb2ac4bbab458"},{topic:"Right click and select Cancel Focus Mode",id:"bd1bb4b14d6697c3"}]},{topic:"Left menu",id:"bd1b9d1816ede134",direction:0,expanded:!0,children:[{topic:"Node distribution",id:"bd1ba11e620c3c1a",expanded:!0,children:[{topic:"Left",id:"bd1c1cb51e6745d3"},{topic:"Right",id:"bd1c1e12fd603ff6"},{topic:"Both l & r",id:"bd1c1f03def5c97b"}]}]},{topic:"Bottom menu",id:"bd1ba66996df4ba4",direction:1,expanded:!0,children:[{topic:"Full screen",id:"bd1ba81d9bc95a7e"},{topic:"Return to Center",id:"bd1babdd5c18a7a2"},{topic:"Zoom in",id:"bd1bae68e0ab186e"},{topic:"Zoom out",id:"bd1bb06377439977"}]},{topic:"Link",id:"bd1beff607711025",direction:0,expanded:!0,children:[{topic:"Right click and select Link",id:"bd1bf320da90046a"},{topic:"Click the target you want to link",id:"bd1bf6f94ff2e642"},{topic:"Modify link with control points",id:"bd1c0c4a487bd036"}]},{topic:"Node style",id:"bd1c217f9d0b20bd",direction:0,expanded:!0,children:[{topic:"Font Size",id:"bd1c24420cd2c2f5",style:{fontSize:"32",color:"#3298db"}},{topic:"Font Color",id:"bd1c2a59b9a2739c",style:{color:"#c0392c"}},{topic:"Background Color",id:"bd1c2de33f057eb4",style:{color:"#bdc3c7",background:"#2c3e50"}},{topic:"Add tags",id:"bd1cff58364436d0",tags:["Completed"]},{topic:"Add icons",id:"bd1d0317f7e8a61a",icons:["😂"],tags:["www"]},{topic:"Bolder",id:"bd41fd4ca32322a4",style:{fontWeight:"bold"}},{topic:"Hyper link",id:"bd41fd4ca32322a5",hyperLink:"https://github.com/ssshooter/mind-elixir-core"}]},{topic:"Draggable",id:"bd1f03fee1f63bc6",direction:1,expanded:!0,children:[{topic:`Drag a node to another node
-and the former one will become a child node of latter one`,id:"bd1f07c598e729dc"}]},{topic:"TODO",id:"bd1facea32a1967c",direction:1,expanded:!0,children:[{topic:"Add image",id:"bd1fb1ec53010749"},{topic:"Free node (position)",id:"bd42d3e3bee992b9"},{topic:"Style adjustment",id:"beeb7f3db6ad6496"}]},{topic:"Export data",id:"beeb7586973430db",direction:1,expanded:!0,children:[{topic:"JSON",id:"beeb784cc189375f"},{topic:"HTML",id:"beeb7a6bec2d68f5"}]},{topic:"Caution",id:"bd42dad21aaf6bae",direction:0,style:{background:"#f1c40e"},expanded:!0,children:[{topic:"Only save manually",id:"bd42e1d0163ebf04",expanded:!0,children:[{topic:"Save button in the top-right corner",id:"bd42e619051878b3",expanded:!0,children:[]},{topic:"ctrl + S",id:"bd42e97d7ac35e99"}]}]}],expanded:!0},linkData:{},summaries:[{id:"a5e68e6a2ce1b648",parent:"bd42e1d0163ebf04",start:0,end:1,text:"summary"},{id:"a5e6978f1bc69f4a",parent:"bd4313fbac40284b",start:3,end:5,text:"summary"}]}}();
+and the former one will become a child node of latter one`,id:"bd1f07c598e729dc"}]},{topic:"TODO",id:"bd1facea32a1967c",direction:1,expanded:!0,children:[{topic:"Add image",id:"bd1fb1ec53010749"},{topic:"Free node (position)",id:"bd42d3e3bee992b9"},{topic:"Style adjustment",id:"beeb7f3db6ad6496"}]},{topic:"Export data",id:"beeb7586973430db",direction:1,expanded:!0,children:[{topic:"JSON",id:"beeb784cc189375f"},{topic:"HTML",id:"beeb7a6bec2d68f5"}]},{topic:"Caution",id:"bd42dad21aaf6bae",direction:0,style:{background:"#f1c40e"},expanded:!0,children:[{topic:"Only save manually",id:"bd42e1d0163ebf04",expanded:!0,children:[{topic:"Save button in the top-right corner",id:"bd42e619051878b3",expanded:!0,children:[]},{topic:"ctrl + S",id:"bd42e97d7ac35e99"}]}]}],expanded:!0},linkData:{ac5fb1df7345e9c4:{id:"ac5fb1df7345e9c4",label:"Render",from:"beeb784cc189375f",to:"beeb7a6bec2d68f5",delta1:{x:142.8828125,y:-57},delta2:{x:146.1171875,y:45}}},summaries:[{id:"a5e68e6a2ce1b648",parent:"bd42e1d0163ebf04",start:0,end:1,text:"summary"},{id:"a5e6978f1bc69f4a",parent:"bd4313fbac40284b",start:3,end:5,text:"summary"}]}}();

package/dist/example.js

@@ -221,7 +221,7 @@ and the former one will become a child node of latter one`,
             expanded: !0,
             children: [
               {
-                topic: "Save button in the top-right corner",
+                topic: "Save button in the top-right corner",
                 id: "bd42e619051878b3",
                 expanded: !0,
                 children: []
@@ -234,7 +234,22 @@ and the former one will become a child node of latter one`,
     ],
     expanded: !0
   },
-  linkData: {},
+  linkData: {
+    ac5fb1df7345e9c4: {
+      id: "ac5fb1df7345e9c4",
+      label: "Render",
+      from: "beeb784cc189375f",
+      to: "beeb7a6bec2d68f5",
+      delta1: {
+        x: 142.8828125,
+        y: -57
+      },
+      delta2: {
+        x: 146.1171875,
+        y: 45
+      }
+    }
+  },
   summaries: [
     {
       id: "a5e68e6a2ce1b648",

package/dist/types/customLink.d.ts

@@ -14,14 +14,19 @@ export type LinkItem = {
         y: number;
     };
 };
-export type LinkControllerData = {
+export type DivData = {
     cx: number;
     cy: number;
     w: number;
     h: number;
+    ctrlX: number;
+    ctrlY: number;
 };
-export declare const createLink: (this: MindElixirInstance, from: Topic, to: Topic, isInitPaint?: boolean, obj?: LinkItem) => void;
+export declare const drawCustomLink: (this: MindElixirInstance, from: Topic, to: Topic, obj: LinkItem, isInitPaint?: boolean) => void;
+export declare const createLink: (this: MindElixirInstance, from: Topic, to: Topic) => void;
 export declare const removeLink: (this: MindElixirInstance, linkSvg?: CustomSvg) => void;
 export declare const selectLink: (this: MindElixirInstance, link: CustomSvg) => void;
 export declare const hideLinkController: (this: MindElixirInstance) => void;
-export declare const showLinkController: (this: MindElixirInstance, p2x: number, p2y: number, p3x: number, p3y: number, linkItem: LinkItem, fromData: LinkControllerData, toData: LinkControllerData) => void;
+export declare const showLinkController: (this: MindElixirInstance, linkItem: LinkItem, fromData: DivData, toData: DivData) => void;
+export declare function renderCustomLink(this: MindElixirInstance): void;
+export declare function editCutsomLinkLabel(this: MindElixirInstance, el: CustomSvg): void;

package/dist/types/index.d.ts

@@ -9,17 +9,22 @@ declare function MindElixir(this: MindElixirInstance, { el, direction, locale, d
 declare namespace MindElixir {
     export var prototype: {
         init(this: MindElixirInstance, data: MindElixirData): Error | undefined;
+        exportSvg: (this: MindElixirInstance) => Blob;
+        exportPng: (this: MindElixirInstance) => Promise<Blob | null>;
         createSummary: (this: MindElixirInstance) => void;
         removeSummary: (this: MindElixirInstance, id: string) => void;
         selectSummary: (this: MindElixirInstance, el: import("./summary").SummarySvgGroup) => void;
         unselectSummary: (this: MindElixirInstance) => void;
         renderSummary: (this: MindElixirInstance) => void;
         editSummary: (this: MindElixirInstance, el: import("./summary").SummarySvgGroup) => void;
-        createLink: (this: MindElixirInstance, from: import("./types/dom").Topic, to: import("./types/dom").Topic, isInitPaint?: boolean | undefined, obj?: import("./customLink").LinkItem | undefined) => void;
+        renderCustomLink(this: MindElixirInstance): void;
+        editCutsomLinkLabel(this: MindElixirInstance, el: import("./types/dom").CustomSvg): void;
+        drawCustomLink: (this: MindElixirInstance, from: import("./types/dom").Topic, to: import("./types/dom").Topic, obj: import("./customLink").LinkItem, isInitPaint?: boolean | undefined) => void;
+        createLink: (this: MindElixirInstance, from: import("./types/dom").Topic, to: import("./types/dom").Topic) => void;
         removeLink: (this: MindElixirInstance, linkSvg?: import("./types/dom").CustomSvg | undefined) => void;
         selectLink: (this: MindElixirInstance, link: import("./types/dom").CustomSvg) => void;
         hideLinkController: (this: MindElixirInstance) => void;
-        showLinkController: (this: MindElixirInstance, p2x: number, p2y: number, p3x: number, p3y: number, linkItem: import("./customLink").LinkItem, fromData: import("./customLink").LinkControllerData, toData: import("./customLink").LinkControllerData) => void;
+        showLinkController: (this: MindElixirInstance, linkItem: import("./customLink").LinkItem, fromData: import("./customLink").DivData, toData: import("./customLink").DivData) => void;
         reshapeNode: (this: MindElixirInstance, ...args: unknown[]) => Promise<void>;
         insertSibling: (this: MindElixirInstance, ...args: unknown[]) => Promise<void>;
         insertBefore: (this: MindElixirInstance, ...args: unknown[]) => Promise<void>;

package/dist/types/methods.d.ts

@@ -9,17 +9,22 @@ export type MindElixirMethods = typeof methods;
  */
 declare const methods: {
     init(this: MindElixirInstance, data: MindElixirData): Error | undefined;
+    exportSvg: (this: MindElixirInstance) => Blob;
+    exportPng: (this: MindElixirInstance) => Promise<Blob | null>;
     createSummary: (this: MindElixirInstance) => void;
     removeSummary: (this: MindElixirInstance, id: string) => void;
     selectSummary: (this: MindElixirInstance, el: summaryOperation.SummarySvgGroup) => void;
     unselectSummary: (this: MindElixirInstance) => void;
     renderSummary: (this: MindElixirInstance) => void;
     editSummary: (this: MindElixirInstance, el: summaryOperation.SummarySvgGroup) => void;
-    createLink: (this: MindElixirInstance, from: import("./index").Topic, to: import("./index").Topic, isInitPaint?: boolean | undefined, obj?: customLink.LinkItem | undefined) => void;
+    renderCustomLink(this: MindElixirInstance): void;
+    editCutsomLinkLabel(this: MindElixirInstance, el: import("./index").CustomSvg): void;
+    drawCustomLink: (this: MindElixirInstance, from: import("./index").Topic, to: import("./index").Topic, obj: customLink.LinkItem, isInitPaint?: boolean | undefined) => void;
+    createLink: (this: MindElixirInstance, from: import("./index").Topic, to: import("./index").Topic) => void;
     removeLink: (this: MindElixirInstance, linkSvg?: import("./index").CustomSvg | undefined) => void;
     selectLink: (this: MindElixirInstance, link: import("./index").CustomSvg) => void;
     hideLinkController: (this: MindElixirInstance) => void;
-    showLinkController: (this: MindElixirInstance, p2x: number, p2y: number, p3x: number, p3y: number, linkItem: customLink.LinkItem, fromData: customLink.LinkControllerData, toData: customLink.LinkControllerData) => void;
+    showLinkController: (this: MindElixirInstance, linkItem: customLink.LinkItem, fromData: customLink.DivData, toData: customLink.DivData) => void;
     reshapeNode: (this: MindElixirInstance, ...args: unknown[]) => Promise<void>;
     insertSibling: (this: MindElixirInstance, ...args: unknown[]) => Promise<void>;
     insertBefore: (this: MindElixirInstance, ...args: unknown[]) => Promise<void>;

package/dist/types/plugin/exportImage.d.ts

@@ -0,0 +1,3 @@
+import type { MindElixirInstance } from '../types';
+export declare const exportSvg: (this: MindElixirInstance) => Blob;
+export declare const exportPng: (this: MindElixirInstance) => Promise<Blob | null>;

package/dist/types/types/dom.d.ts

@@ -44,6 +44,6 @@ export interface Expander extends HTMLElement {
 export type CustomLine = SVGPathElement;
 export type CustomArrow = SVGPathElement;
 export interface CustomSvg extends SVGGElement {
-    linkObj?: LinkItem;
-    children: HTMLCollection & [CustomLine, CustomArrow];
+    linkObj: LinkItem;
+    children: HTMLCollection & [CustomLine, CustomArrow, SVGTextElement];
 }

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

@@ -1,4 +1,3 @@
-import type { LinkControllerData } from '../customLink';
 import type { NodeObj, MindElixirInstance, NodeObjExport } from '../types/index';
 export declare function encodeHTML(s: string): string;
 export declare const isMobile: () => boolean;
@@ -15,14 +14,6 @@ export declare function getArrowPoints(p3x: number, p3y: number, p4x: number, p4
     x2: number;
     y2: number;
 };
-export declare function calcP1(fromData: LinkControllerData, p2x: number, p2y: number): {
-    x: number;
-    y: number;
-};
-export declare function calcP4(toData: LinkControllerData, p3x: number, p3y: number): {
-    x: number;
-    y: number;
-};
 export declare function generateUUID(): string;
 export declare const generateNewObj: (this: MindElixirInstance) => NodeObjExport;
 export declare function checkMoveValid(from: NodeObj, to: NodeObj): boolean;

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

@@ -1,6 +1,8 @@
+import type { MindElixirInstance } from '../types';
 import type { CustomSvg } from '../types/dom';
 export declare const createMainPath: (d: string, color: string) => SVGPathElement;
 export declare const createLinkSvg: (klass: string) => SVGSVGElement;
-export declare const createLine: (x1: number, y1: number, x2: number, y2: number) => SVGLineElement;
+export declare const createLine: () => SVGLineElement;
 export declare const createPath: (d: string, color: string) => SVGPathElement;
 export declare const createSvgGroup: (d: string, arrowd: string) => CustomSvg;
+export declare const editSvgText: (mei: MindElixirInstance, textEl: SVGTextElement, onblur: (div: HTMLDivElement) => void) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-elixir",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "type": "module",
   "description": "Mind elixir is a free open source mind map core.",
   "keywords": [
@@ -76,7 +76,6 @@
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.3",
     "less": "^4.1.3",
-    "less-loader": "^10.2.0",
     "lint-staged": "^13.2.3",
     "prettier": "2.8.4",
     "typescript": "^5.1.6",

package/readme.md

@@ -31,10 +31,12 @@ Mind elixir is a free open source mind map core.
 - High performance
 - Framework agnostic
 - Pluginable
+- Export as SVG or PNG
 - Build-in drag and drop / node edit plugin
 - Summarize nodes
-- Undo / Redo
 - Styling your node with CSS
+- Undo / Redo
+- Efficient shortcuts
 
 <details>
 <summary>Table of Contents</summary>
@@ -50,8 +52,10 @@ 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)
-- [Methods](#methods)
+- [Export as a Image](#export-as-a-image)
+- [APIs](#apis)
 - [Theme](#theme)
+- [Shortcuts](#shortcuts)
 - [Not only core](#not-only-core)
 - [Development](#development)
 - [Thanks](#thanks)
@@ -252,7 +256,27 @@ let mind = new MindElixir({
 })
 ```
 
-## Methods
+## Export as a Image
+
+```typescript
+import { exportPng } from './plugin/exportImage'
+
+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)
+}
+```
+
+## APIs
 
 https://github.com/ssshooter/mind-elixir-core/blob/master/api/mind-elixir.api.md
 
@@ -295,6 +319,28 @@ mind.changeTheme({
 
 Be aware that Mind Elixir will not observe the change of `prefers-color-scheme`. Please change the theme **manually** when the scheme changes.
 
+## Shortcuts
+
+| Shortcut           | Function                         |
+| ------------------ | -------------------------------- |
+| Enter              | Insert Sibling Node              |
+| Tab                | Insert Child Node                |
+| F1                 | Center the Map                   |
+| F2                 | Begin Editing the Current Node   |
+| Up Arrow           | Select the Previous Sibling Node |
+| Down Arrow         | Select the Next Sibling Node     |
+| Left/Right Arrow   | Select Parent or First Child     |
+| PageUp             | Move Up Node                     |
+| PageDown           | Move Down Node                   |
+| Ctrl + Up Arrow    | Change Layout Pattern to Side    |
+| Ctrl + Left Arrow  | Change Layout Pattern to Left    |
+| Ctrl + Right Arrow | Change Layout Pattern to Right   |
+| Ctrl + C           | Copy the Current Node            |
+| Ctrl + V           | Paste the Copied Node            |
+| Ctrl + "+"         | Zoom In Mind Map                 |
+| Ctrl + "-"         | Zoom Out Mind Map                |
+| Ctrl + 0           | Reset Zoom Level                 |
+
 ## Not only core
 
 - [@mind-elixir/node-menu](https://github.com/ssshooter/node-menu)