power-link 2.0.1 → 2.0.3

package/README.md

@@ -7,9 +7,7 @@ A pure TypeScript visual node connector for creating draggable connections betwe
 
 ![Node Link Connector Demo](https://github.com/Tem-man/power-link/blob/main/public/images/screen-shot.png)
 
-
 ### online demo
-<!-- 访问线上demo -->
 visit [online demo](https://tem-man.github.io/power-link)
 
 ## ✨ Features
@@ -159,6 +157,7 @@ Register a node for connection.
 - `id` (String): Unique identifier for the node
 - `element` (HTMLElement): DOM element of the node
 - `options` (Object): Node configuration
+  - `label` (String): Node name/label (optional)
   - `dotPositions` (String | Array): Connection dot positions
     - `'both'`: Both left and right dots
     - `'left'`: Only left dot (string format)
@@ -174,6 +173,7 @@ Register a node for connection.
 
 ```javascript
 connector.registerNode("myNode", element, {
+  label: "My Node",
   dotPositions: ["right"],
   info: {
     id: "123",
@@ -410,8 +410,8 @@ connector.updateAllConnections(); // Refresh all connection lines
 Export the current topology (nodes, connections, and view state) as a JSON object.
 
 **Returns:** ExportData object containing:
-- `nodes`: Array of node data (id, x, y, info, dotPositions)
-- `connections`: Array of connection data (from, to, fromDot, toDot)
+- `nodes`: Array of node data (id, label, x, y, info, dotPositions)
+- `connections`: Array of connection data (from, fromLabel, fromInfo, to, toLabel, toInfo, fromDot, toDot)
 - `viewState`: Current view state (scale, translateX, translateY)
 
 **Example:**
@@ -421,11 +421,20 @@ const data = connector.export();
 console.log(data);
 // {
 //   nodes: [
-//     { id: 'node1', x: 100, y: 100, info: {...}, dotPositions: ['right'] },
-//     { id: 'node2', x: 400, y: 100, info: {...}, dotPositions: ['left'] }
+//     { id: 'node1', label: 'Node 1', x: 100, y: 100, info: {...}, dotPositions: ['right'] },
+//     { id: 'node2', label: 'Node 2', x: 400, y: 100, info: {...}, dotPositions: ['left'] }
 //   ],
 //   connections: [
-//     { from: 'node1', to: 'node2', fromDot: 'right', toDot: 'left' }
+//     { 
+//       from: 'node1', 
+//       fromLabel: 'Node 1', 
+//       fromInfo: {...}, 
+//       to: 'node2', 
+//       toLabel: 'Node 2', 
+//       toInfo: {...}, 
+//       fromDot: 'right', 
+//       toDot: 'left' 
+//     }
 //   ],
 //   viewState: { scale: 1, translateX: 0, translateY: 0 }
 // }
@@ -1006,10 +1015,11 @@ let connector = null;
 
 const saveTopology = () => {
   const data = connector.export();
-  // Merge custom fields (label, type, etc.) if needed
+  // label is now included in export() by default
+  // Merge other custom fields (type, etc.) if needed
   data.nodes = data.nodes.map(exportNode => {
     const origin = nodes.value.find(n => n.id === exportNode.id);
-    return { ...exportNode, label: origin?.label, type: origin?.type };
+    return { ...exportNode, type: origin?.type };
   });
   localStorage.setItem('topology', JSON.stringify(data));
 };
@@ -1056,8 +1066,8 @@ const loadTopology = async () => {
 
 **What's Included in Export:**
 
-- **Nodes**: ID, position (x, y), custom info, dot positions
-- **Connections**: Source/target nodes, dot positions
+- **Nodes**: ID, label (node name), position (x, y), custom info, dot positions
+- **Connections**: Source/target nodes, source/target labels, source/target info, dot positions
 - **View State**: Current zoom level and pan position (scale, translateX, translateY)
 
 **Benefits:**

package/dist/index.d.mts

@@ -23,6 +23,8 @@ interface Dot {
 /** 节点对象 */
 interface ConnectorNode {
     id: string;
+    /** 节点名称 */
+    label?: string;
     element: HTMLElement;
     info?: Record<string, unknown>;
     dots: Partial<Record<DotPosition, Dot>>;
@@ -104,6 +106,8 @@ interface ConnectorOptions extends Partial<ConnectorConfig> {
 }
 /** 节点注册选项 */
 interface RegisterNodeOptions {
+    /** 节点名称 */
+    label?: string;
     info?: Record<string, unknown>;
     dotPositions?: 'both' | DotPosition | DotPosition[];
 }
@@ -114,6 +118,8 @@ interface SilentOptions {
 /** 导出的单个节点数据 */
 interface ExportNodeData {
     id: string;
+    /** 节点名称 */
+    label?: string;
     x: number;
     y: number;
     info?: Record<string, unknown>;
@@ -122,7 +128,15 @@ interface ExportNodeData {
 /** 导出的单条连接数据 */
 interface ExportConnectionData {
     from: string;
+    /** from 节点名称 */
+    fromLabel?: string;
+    /** from 节点附加信息 */
+    fromInfo?: Record<string, unknown>;
     to: string;
+    /** to 节点名称 */
+    toLabel?: string;
+    /** to 节点附加信息 */
+    toInfo?: Record<string, unknown>;
     fromDot: DotPosition;
     toDot: DotPosition;
 }

package/dist/index.d.ts

@@ -23,6 +23,8 @@ interface Dot {
 /** 节点对象 */
 interface ConnectorNode {
     id: string;
+    /** 节点名称 */
+    label?: string;
     element: HTMLElement;
     info?: Record<string, unknown>;
     dots: Partial<Record<DotPosition, Dot>>;
@@ -104,6 +106,8 @@ interface ConnectorOptions extends Partial<ConnectorConfig> {
 }
 /** 节点注册选项 */
 interface RegisterNodeOptions {
+    /** 节点名称 */
+    label?: string;
     info?: Record<string, unknown>;
     dotPositions?: 'both' | DotPosition | DotPosition[];
 }
@@ -114,6 +118,8 @@ interface SilentOptions {
 /** 导出的单个节点数据 */
 interface ExportNodeData {
     id: string;
+    /** 节点名称 */
+    label?: string;
     x: number;
     y: number;
     info?: Record<string, unknown>;
@@ -122,7 +128,15 @@ interface ExportNodeData {
 /** 导出的单条连接数据 */
 interface ExportConnectionData {
     from: string;
+    /** from 节点名称 */
+    fromLabel?: string;
+    /** from 节点附加信息 */
+    fromInfo?: Record<string, unknown>;
     to: string;
+    /** to 节点名称 */
+    toLabel?: string;
+    /** to 节点附加信息 */
+    toInfo?: Record<string, unknown>;
     fromDot: DotPosition;
     toDot: DotPosition;
 }

package/dist/index.global.js

@@ -445,6 +445,7 @@ var PowerLink = (function (exports) {
       const y = parseFloat(element.style.top) || 0;
       const node = {
         id,
+        label: options.label,
         element,
         info: options.info,
         dots,
@@ -1362,6 +1363,7 @@ var PowerLink = (function (exports) {
       return {
         nodes: this.ctx.nodes.map((node) => ({
           id: node.id,
+          label: node.label,
           x: node.x,
           y: node.y,
           info: node.info,
@@ -1369,7 +1371,11 @@ var PowerLink = (function (exports) {
         })),
         connections: this.ctx.connections.map((conn) => ({
           from: conn.fromNode.id,
+          fromLabel: conn.fromNode.label,
+          fromInfo: conn.fromNode.info,
           to: conn.toNode.id,
+          toLabel: conn.toNode.label,
+          toInfo: conn.toNode.info,
           fromDot: conn.fromDot.position,
           toDot: conn.toDot.position
         })),

package/dist/index.js

@@ -446,6 +446,7 @@ var _NodeManager = class _NodeManager {
     const y = parseFloat(element.style.top) || 0;
     const node = {
       id,
+      label: options.label,
       element,
       info: options.info,
       dots,
@@ -1363,6 +1364,7 @@ var _Connector = class _Connector {
     return {
       nodes: this.ctx.nodes.map((node) => ({
         id: node.id,
+        label: node.label,
         x: node.x,
         y: node.y,
         info: node.info,
@@ -1370,7 +1372,11 @@ var _Connector = class _Connector {
       })),
       connections: this.ctx.connections.map((conn) => ({
         from: conn.fromNode.id,
+        fromLabel: conn.fromNode.label,
+        fromInfo: conn.fromNode.info,
         to: conn.toNode.id,
+        toLabel: conn.toNode.label,
+        toInfo: conn.toNode.info,
         fromDot: conn.fromDot.position,
         toDot: conn.toDot.position
       })),

package/dist/index.mjs

@@ -442,6 +442,7 @@ var _NodeManager = class _NodeManager {
     const y = parseFloat(element.style.top) || 0;
     const node = {
       id,
+      label: options.label,
       element,
       info: options.info,
       dots,
@@ -1359,6 +1360,7 @@ var _Connector = class _Connector {
     return {
       nodes: this.ctx.nodes.map((node) => ({
         id: node.id,
+        label: node.label,
         x: node.x,
         y: node.y,
         info: node.info,
@@ -1366,7 +1368,11 @@ var _Connector = class _Connector {
       })),
       connections: this.ctx.connections.map((conn) => ({
         from: conn.fromNode.id,
+        fromLabel: conn.fromNode.label,
+        fromInfo: conn.fromNode.info,
         to: conn.toNode.id,
+        toLabel: conn.toNode.label,
+        toInfo: conn.toNode.info,
         fromDot: conn.fromDot.position,
         toDot: conn.toDot.position
       })),

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "power-link",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "A pure TypeScript visual node connector for creating draggable connections between nodes. Framework-agnostic and easy to use",
   "author": {
     "name": "Lin Ji Man",
     "email": "Temman_lin@qq.com"
   },
   "keywords": [
-    "power-link",
     "connector",
     "node-link",
     "visual-connector",
     "drag-line",
-    "bezier-curve"
+    "bezier-curve",
+    "high-customization",
+    "flow-chart"
   ],
   "license": "MIT",
   "homepage": "https://tem-man.github.io/power-link",