power-link 1.0.11 → 2.0.0

package/README.md

@@ -7,14 +7,8 @@ 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)
 
-### 📹 Demo Video
 
-<video width="100%" controls>
-  <source src="https://github.com/Tem-man/power-link/blob/main/public/images/video.mp4" type="video/mp4">
-  Your browser does not support the video tag.
-</video>
-
-**Watch the demo video** to see power-link in action! [Download video](https://github.com/Tem-man/node-link-utils/raw/main/packages/images/video.mp4)
+### [online demo](https://tem-man.github.io/power-link)
 
 ## ✨ Features
 
@@ -80,6 +74,12 @@ const connector = new Connector({
     console.log("View changed:", viewState);
     // viewState: { scale: 1, translateX: 0, translateY: 0 }
     // Save view state to restore later
+  },
+
+  onNodeMove: ({ id, x, y }) => {
+    console.log("Node moved:", id, "to", x, y);
+    // Synchronize node position with your state management
+    // This prevents nodes from jumping back after dragging
   }
 });
 
@@ -142,6 +142,9 @@ connector.registerNode("node2", node2, {
 | `onConnect`        | Function    | `() => {}`   | Callback when connection is created             |
 | `onDisconnect`     | Function    | `() => {}`   | Callback when connection is removed             |
 | `onViewChange`     | Function    | `() => {}`   | Callback when view state changes (zoom/pan)    |
+| `onNodeMove`       | Function    | `() => {}`   | Callback when a node is dragged (receives `{ id, x, y }`) |
+| `onNodeSelect`     | Function    | `() => {}`   | Callback when a node is selected/deselected (receives node info or `null`) |
+| `onNodeDelete`     | Function    | `() => {}`   | Callback when a node is deleted (receives `{ id, info }`) |
 
 ### Methods
 
@@ -156,9 +159,11 @@ Register a node for connection.
 - `options` (Object): Node configuration
   - `dotPositions` (String | Array): Connection dot positions
     - `'both'`: Both left and right dots
+    - `'left'`: Only left dot (string format)
+    - `'right'`: Only right dot (string format)
     - `['left', 'right']`: Array format, both sides
-    - `['left']`: Only left dot
-    - `['right']`: Only right dot
+    - `['left']`: Only left dot (array format)
+    - `['right']`: Only right dot (array format)
   - `info` (Object): Node extraneous information
 
 **Returns:** Node object
@@ -253,6 +258,34 @@ Update node position (called when node is moved).
 
 - `nodeId` (String): Node ID
 
+#### `deleteNode(id)`
+
+Delete a node and all its connections. This method removes the node from the connector, disconnects all associated connections, and triggers the `onNodeDelete` callback.
+
+**Note:** This method does not remove the DOM element itself. You should handle DOM removal in your framework (e.g., Vue/React) within the `onNodeDelete` callback.
+
+**Parameters:**
+
+- `id` (String): Node ID to delete
+
+**Example:**
+
+```javascript
+// Delete a specific node
+connector.deleteNode('node1');
+
+// In your connector setup, handle the deletion callback
+const connector = new Connector({
+  container: container,
+  onNodeDelete: ({ id, info }) => {
+    console.log('Node deleted:', id);
+    // Remove node from your state management
+    // In Vue: nodes.value = nodes.value.filter(n => n.id !== id);
+    // In React: setNodes(nodes.filter(n => n.id !== id));
+  }
+});
+```
+
 #### `destroy(options)`
 
 Destroy the connector and clean up all resources.
@@ -370,6 +403,104 @@ Update all connection line positions (useful when container size changes or afte
 connector.updateAllConnections(); // Refresh all connection lines
 ```
 
+#### `export()`
+
+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)
+- `viewState`: Current view state (scale, translateX, translateY)
+
+**Example:**
+
+```javascript
+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'] }
+//   ],
+//   connections: [
+//     { from: 'node1', to: 'node2', fromDot: 'right', toDot: 'left' }
+//   ],
+//   viewState: { scale: 1, translateX: 0, translateY: 0 }
+// }
+
+// Save to localStorage
+localStorage.setItem('topology', JSON.stringify(data));
+
+// Or send to server
+await fetch('/api/topology', {
+  method: 'POST',
+  body: JSON.stringify(data)
+});
+```
+
+#### `import(data, nodeFactory?)`
+
+Restore topology from exported data. Supports two modes:
+
+**Parameters:**
+
+- `data` (ExportData): Topology data returned by `export()`
+- `nodeFactory` (Function, optional): Factory function for creating DOM elements (native JS mode only)
+
+**Two Usage Modes:**
+
+1. **Framework Mode (Vue/React/etc.) - No nodeFactory**
+   - Framework handles DOM rendering
+   - Library finds elements by `id` attribute
+   - Use when nodes are managed by framework reactivity
+
+2. **Native JS Mode - With nodeFactory**
+   - Library calls factory to create DOM elements
+   - Library handles positioning and mounting
+   - Use for pure JavaScript applications
+
+**Returns:** Promise<void>
+
+**Example (Framework Mode - Vue):**
+
+```javascript
+// Save
+const data = connector.export();
+localStorage.setItem('topology', JSON.stringify(data));
+
+// Load
+const savedData = JSON.parse(localStorage.getItem('topology'));
+// 1. Update framework reactive state (triggers DOM rendering)
+nodes.value = savedData.nodes;
+// 2. Wait for DOM to be ready
+await nextTick();
+// 3. Import (library finds elements by id and restores connections)
+await connector.import(savedData);
+```
+
+**Example (Native JS Mode):**
+
+```javascript
+// Save
+const data = connector.export();
+localStorage.setItem('topology', JSON.stringify(data));
+
+// Load
+const savedData = JSON.parse(localStorage.getItem('topology'));
+await connector.import(savedData, (nodeData) => {
+  // Factory function: create and return DOM element
+  const el = document.createElement('div');
+  el.id = nodeData.id;
+  el.className = 'node';
+  el.textContent = nodeData.info?.name || nodeData.id;
+  el.style.position = 'absolute';
+  // Library will set left/top automatically
+  return el;
+});
+```
+
+**Note:** Connections are restored silently (without triggering `onConnect` callbacks) to avoid duplicate events during data restoration.
+
 
 ## 🎨 Usage Examples
 
@@ -749,6 +880,65 @@ const connector = new Connector({
 
     // Save view state to restore later
     saveViewState(viewState);
+  },
+
+  onNodeMove: ({ id, x, y }) => {
+    console.log("Node moved:", id, "to", x, y);
+    // Synchronize node position with your state management
+    // This prevents nodes from jumping back to original position after dragging
+    // In Vue: const node = nodes.value.find(n => n.id === id); if (node) { node.x = x; node.y = y; }
+    // In React: setNodes(nodes.map(n => n.id === id ? { ...n, x, y } : n));
+  },
+
+  onNodeSelect: (info) => {
+    if (info) {
+      console.log("Node selected:", info.id, info.info);
+    } else {
+      console.log("Node deselected");
+    }
+  },
+
+  onNodeDelete: ({ id, info }) => {
+    console.log("Node deleted:", id);
+    // Remove node from your state management
+    // In Vue: nodes.value = nodes.value.filter(n => n.id !== id);
+    // In React: setNodes(nodes.filter(n => n.id !== id));
+  }
+});
+```
+
+### Node Management
+
+#### Node Position Synchronization
+
+When using frameworks like Vue or React, you need to synchronize node positions after dragging to prevent nodes from jumping back to their original position. Use the `onNodeMove` callback:
+
+**Vue Example:**
+
+```javascript
+const connector = new Connector({
+  container: containerRef.value,
+  onNodeMove: ({ id, x, y }) => {
+    // Update Vue reactive state
+    const node = nodes.value.find(n => n.id === id);
+    if (node) {
+      node.x = x;
+      node.y = y;
+    }
+  }
+});
+```
+
+**React Example:**
+
+```javascript
+const connector = new Connector({
+  container: containerRef.current,
+  onNodeMove: ({ id, x, y }) => {
+    // Update React state
+    setNodes(prevNodes => 
+      prevNodes.map(n => n.id === id ? { ...n, x, y } : n)
+    );
   }
 });
 ```
@@ -780,6 +970,101 @@ connector.resetView(); // Reset to default (scale: 1, translateX: 0, translateY:
 connector.updateAllConnections();
 ```
 
+### Save and Restore Topology
+
+The `export()` and `import()` methods allow you to save and restore the entire topology (nodes, connections, and view state).
+
+**Save Topology:**
+
+```javascript
+// Export current topology
+const data = connector.export();
+
+// Save to localStorage
+localStorage.setItem('topology', JSON.stringify(data));
+
+// Or save to server
+await fetch('/api/topology', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify(data)
+});
+```
+
+**Restore Topology (Framework Mode - Vue Example):**
+
+```vue
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+import Connector from 'power-link';
+
+const containerRef = ref(null);
+const nodes = ref([]);
+let connector = null;
+
+const saveTopology = () => {
+  const data = connector.export();
+  // Merge custom fields (label, 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 };
+  });
+  localStorage.setItem('topology', JSON.stringify(data));
+};
+
+const loadTopology = async () => {
+  const saved = localStorage.getItem('topology');
+  if (saved) {
+    const data = JSON.parse(saved);
+    // 1. Update reactive state (triggers framework rendering)
+    nodes.value = data.nodes;
+    // 2. Wait for DOM to be ready
+    await nextTick();
+    // 3. Import (library finds elements by id and restores connections + view state)
+    await connector.import(data);
+  }
+};
+
+onMounted(() => {
+  connector = new Connector({ container: containerRef.value });
+  loadTopology();
+});
+</script>
+```
+
+**Restore Topology (Native JS Mode):**
+
+```javascript
+const loadTopology = async () => {
+  const saved = localStorage.getItem('topology');
+  if (saved) {
+    const data = JSON.parse(saved);
+    // Import with factory function
+    await connector.import(data, (nodeData) => {
+      const el = document.createElement('div');
+      el.id = nodeData.id;
+      el.className = 'node';
+      el.textContent = nodeData.info?.name || nodeData.id;
+      // Library will set position automatically
+      return el;
+    });
+  }
+};
+```
+
+**What's Included in Export:**
+
+- **Nodes**: ID, position (x, y), custom info, dot positions
+- **Connections**: Source/target nodes, dot positions
+- **View State**: Current zoom level and pan position (scale, translateX, translateY)
+
+**Benefits:**
+
+- ✅ Save/load entire graph state
+- ✅ Restore view position and zoom level
+- ✅ Preserve all node positions and connections
+- ✅ Works with any storage backend (localStorage, database, etc.)
+
 ## 🔧 Browser Support
 
 - Chrome (latest)

package/dist/index.d.mts

@@ -28,6 +28,10 @@ interface ConnectorNode {
     dots: Partial<Record<DotPosition, Dot>>;
     dotPositions: DotPosition[];
     connections: Connection[];
+    /** 节点相对于 contentWrapper 的 x 坐标（由库内部维护） */
+    x: number;
+    /** 节点相对于 contentWrapper 的 y 坐标（由库内部维护） */
+    y: number;
 }
 /** 连接对象 */
 interface Connection {
@@ -38,7 +42,7 @@ interface Connection {
     toDot: Dot;
     line: SVGPathElement;
     hoverPath?: SVGPathElement;
-    deleteButton: HTMLDivElement;
+    deleteButton: SVGGElement;
 }
 /** 连接信息（回调 / API 返回用） */
 interface ConnectionInfo {
@@ -66,6 +70,24 @@ interface ConnectorConfig {
     minZoom: number;
     maxZoom: number;
     zoomStep: number;
+    /** 节点选中时的高亮颜色 */
+    selectedBorderColor: string;
+}
+/** 节点移动信息（拖拽回调用） */
+interface NodeMoveInfo {
+    id: string;
+    x: number;
+    y: number;
+}
+/** 节点选中信息 */
+interface NodeSelectInfo {
+    id: string;
+    info?: Record<string, unknown>;
+}
+/** 节点删除信息 */
+interface NodeDeleteInfo {
+    id: string;
+    info?: Record<string, unknown>;
 }
 /** 构造函数选项 */
 interface ConnectorOptions extends Partial<ConnectorConfig> {
@@ -73,17 +95,50 @@ interface ConnectorOptions extends Partial<ConnectorConfig> {
     onConnect?: (info: ConnectionInfo) => void;
     onDisconnect?: (info: ConnectionInfo) => void;
     onViewChange?: (state: ViewState) => void;
+    onNodeMove?: (info: NodeMoveInfo) => void;
+    /** 节点被选中/取消选中时触发，取消选中时 info 为 null */
+    onNodeSelect?: (info: NodeSelectInfo | null) => void;
+    /** 节点被删除时触发 */
+    onNodeDelete?: (info: NodeDeleteInfo) => void;
     config?: Partial<ConnectorConfig>;
 }
 /** 节点注册选项 */
 interface RegisterNodeOptions {
     info?: Record<string, unknown>;
-    dotPositions?: 'both' | DotPosition[];
+    dotPositions?: 'both' | DotPosition | DotPosition[];
 }
 /** 静默操作选项 */
 interface SilentOptions {
     silent?: boolean;
 }
+/** 导出的单个节点数据 */
+interface ExportNodeData {
+    id: string;
+    x: number;
+    y: number;
+    info?: Record<string, unknown>;
+    dotPositions: DotPosition[];
+}
+/** 导出的单条连接数据 */
+interface ExportConnectionData {
+    from: string;
+    to: string;
+    fromDot: DotPosition;
+    toDot: DotPosition;
+}
+/** export() 返回的完整拓扑数据 */
+interface ExportData {
+    nodes: ExportNodeData[];
+    connections: ExportConnectionData[];
+    /** 视图状态（缩放、平移），可选 */
+    viewState?: ViewState;
+}
+/**
+ * 节点工厂函数（用于 import() 的原生 JS 场景）
+ * 接收节点数据，返回对应的 HTMLElement（或 Promise）
+ * 库会负责定位和挂载，工厂只需构建元素结构
+ */
+type NodeFactory = (nodeData: ExportNodeData) => HTMLElement | Promise<HTMLElement>;
 
 /**
  * @fileoverview 连线器主类
@@ -113,6 +168,24 @@ declare class Connector {
      * 更新节点位置（当节点移动时调用）
      */
     updateNodePosition(nodeId: string): void;
+    /**
+     * 选中指定节点
+     * @param id - 节点 ID
+     */
+    selectNode(id: string): void;
+    /**
+     * 取消选中当前节点
+     */
+    deselectNode(): void;
+    /**
+     * 获取当前选中的节点信息
+     */
+    getSelectedNode(): ConnectorNode | null;
+    /**
+     * 删除指定节点（移除其连接与触点，触发 onNodeDelete 回调）
+     * @param id - 节点 ID
+     */
+    deleteNode(id: string): void;
     /**
      * 创建连接（编程式）
      */
@@ -135,6 +208,41 @@ declare class Connector {
      * 更新所有连接线位置
      */
     updateAllConnections(): void;
+    /**
+     * 导出当前拓扑快照
+     * 返回所有节点（含坐标）、连接关系和视图状态的标准 JSON，可直接持久化
+     */
+    export(): ExportData;
+    /**
+     * 从拓扑快照恢复节点与连接
+     *
+     * **两种使用模式：**
+     *
+     * 1. **框架模式（Vue / React 等）—— 不传 nodeFactory**
+     *    调用方负责将节点渲染到 DOM（使用框架响应式），等待渲染完成后再调用
+     *    `import(data)`，库会在 contentWrapper 内按 `id` 属性查找已存在的元素，
+     *    完成注册并还原连接。
+     *    ```js
+     *    nodes.value = data.nodes;        // 触发框架渲染
+     *    await nextTick();                // 等待 DOM 就绪
+     *    await connector.import(data);    // 注册 + 连线
+     *    ```
+     *
+     * 2. **原生 JS 模式 —— 传入 nodeFactory**
+     *    库调用工厂函数创建 DOM 元素，自动定位、挂载、注册，最后还原连接。
+     *    ```js
+     *    await connector.import(data, (nodeData) => {
+     *      const el = document.createElement('div');
+     *      el.className = 'node';
+     *      el.textContent = nodeData.info?.name ?? nodeData.id;
+     *      return el;
+     *    });
+     *    ```
+     *
+     * @param data       由 `export()` 返回的拓扑数据
+     * @param nodeFactory 可选，原生 JS 场景下的节点元素工厂
+     */
+    import(data: ExportData, nodeFactory?: NodeFactory): Promise<void>;
     /**
      * 设置缩放比例（以画布中心为基准）
      */
@@ -175,4 +283,4 @@ declare class Connector {
  * @description 导出 Connector 类及相关类型定义
  */
 
-export { type Connection, type ConnectionInfo, Connector, type ConnectorConfig, type ConnectorNode, type ConnectorOptions, type Dot, type DotPosition, type Point, type RegisterNodeOptions, type SilentOptions, type ViewState, Connector as default };
+export { type Connection, type ConnectionInfo, Connector, type ConnectorConfig, type ConnectorNode, type ConnectorOptions, type Dot, type DotPosition, type ExportConnectionData, type ExportData, type ExportNodeData, type NodeDeleteInfo, type NodeFactory, type NodeMoveInfo, type NodeSelectInfo, type Point, type RegisterNodeOptions, type SilentOptions, type ViewState, Connector as default };

package/dist/index.d.ts

@@ -28,6 +28,10 @@ interface ConnectorNode {
     dots: Partial<Record<DotPosition, Dot>>;
     dotPositions: DotPosition[];
     connections: Connection[];
+    /** 节点相对于 contentWrapper 的 x 坐标（由库内部维护） */
+    x: number;
+    /** 节点相对于 contentWrapper 的 y 坐标（由库内部维护） */
+    y: number;
 }
 /** 连接对象 */
 interface Connection {
@@ -38,7 +42,7 @@ interface Connection {
     toDot: Dot;
     line: SVGPathElement;
     hoverPath?: SVGPathElement;
-    deleteButton: HTMLDivElement;
+    deleteButton: SVGGElement;
 }
 /** 连接信息（回调 / API 返回用） */
 interface ConnectionInfo {
@@ -66,6 +70,24 @@ interface ConnectorConfig {
     minZoom: number;
     maxZoom: number;
     zoomStep: number;
+    /** 节点选中时的高亮颜色 */
+    selectedBorderColor: string;
+}
+/** 节点移动信息（拖拽回调用） */
+interface NodeMoveInfo {
+    id: string;
+    x: number;
+    y: number;
+}
+/** 节点选中信息 */
+interface NodeSelectInfo {
+    id: string;
+    info?: Record<string, unknown>;
+}
+/** 节点删除信息 */
+interface NodeDeleteInfo {
+    id: string;
+    info?: Record<string, unknown>;
 }
 /** 构造函数选项 */
 interface ConnectorOptions extends Partial<ConnectorConfig> {
@@ -73,17 +95,50 @@ interface ConnectorOptions extends Partial<ConnectorConfig> {
     onConnect?: (info: ConnectionInfo) => void;
     onDisconnect?: (info: ConnectionInfo) => void;
     onViewChange?: (state: ViewState) => void;
+    onNodeMove?: (info: NodeMoveInfo) => void;
+    /** 节点被选中/取消选中时触发，取消选中时 info 为 null */
+    onNodeSelect?: (info: NodeSelectInfo | null) => void;
+    /** 节点被删除时触发 */
+    onNodeDelete?: (info: NodeDeleteInfo) => void;
     config?: Partial<ConnectorConfig>;
 }
 /** 节点注册选项 */
 interface RegisterNodeOptions {
     info?: Record<string, unknown>;
-    dotPositions?: 'both' | DotPosition[];
+    dotPositions?: 'both' | DotPosition | DotPosition[];
 }
 /** 静默操作选项 */
 interface SilentOptions {
     silent?: boolean;
 }
+/** 导出的单个节点数据 */
+interface ExportNodeData {
+    id: string;
+    x: number;
+    y: number;
+    info?: Record<string, unknown>;
+    dotPositions: DotPosition[];
+}
+/** 导出的单条连接数据 */
+interface ExportConnectionData {
+    from: string;
+    to: string;
+    fromDot: DotPosition;
+    toDot: DotPosition;
+}
+/** export() 返回的完整拓扑数据 */
+interface ExportData {
+    nodes: ExportNodeData[];
+    connections: ExportConnectionData[];
+    /** 视图状态（缩放、平移），可选 */
+    viewState?: ViewState;
+}
+/**
+ * 节点工厂函数（用于 import() 的原生 JS 场景）
+ * 接收节点数据，返回对应的 HTMLElement（或 Promise）
+ * 库会负责定位和挂载，工厂只需构建元素结构
+ */
+type NodeFactory = (nodeData: ExportNodeData) => HTMLElement | Promise<HTMLElement>;
 
 /**
  * @fileoverview 连线器主类
@@ -113,6 +168,24 @@ declare class Connector {
      * 更新节点位置（当节点移动时调用）
      */
     updateNodePosition(nodeId: string): void;
+    /**
+     * 选中指定节点
+     * @param id - 节点 ID
+     */
+    selectNode(id: string): void;
+    /**
+     * 取消选中当前节点
+     */
+    deselectNode(): void;
+    /**
+     * 获取当前选中的节点信息
+     */
+    getSelectedNode(): ConnectorNode | null;
+    /**
+     * 删除指定节点（移除其连接与触点，触发 onNodeDelete 回调）
+     * @param id - 节点 ID
+     */
+    deleteNode(id: string): void;
     /**
      * 创建连接（编程式）
      */
@@ -135,6 +208,41 @@ declare class Connector {
      * 更新所有连接线位置
      */
     updateAllConnections(): void;
+    /**
+     * 导出当前拓扑快照
+     * 返回所有节点（含坐标）、连接关系和视图状态的标准 JSON，可直接持久化
+     */
+    export(): ExportData;
+    /**
+     * 从拓扑快照恢复节点与连接
+     *
+     * **两种使用模式：**
+     *
+     * 1. **框架模式（Vue / React 等）—— 不传 nodeFactory**
+     *    调用方负责将节点渲染到 DOM（使用框架响应式），等待渲染完成后再调用
+     *    `import(data)`，库会在 contentWrapper 内按 `id` 属性查找已存在的元素，
+     *    完成注册并还原连接。
+     *    ```js
+     *    nodes.value = data.nodes;        // 触发框架渲染
+     *    await nextTick();                // 等待 DOM 就绪
+     *    await connector.import(data);    // 注册 + 连线
+     *    ```
+     *
+     * 2. **原生 JS 模式 —— 传入 nodeFactory**
+     *    库调用工厂函数创建 DOM 元素，自动定位、挂载、注册，最后还原连接。
+     *    ```js
+     *    await connector.import(data, (nodeData) => {
+     *      const el = document.createElement('div');
+     *      el.className = 'node';
+     *      el.textContent = nodeData.info?.name ?? nodeData.id;
+     *      return el;
+     *    });
+     *    ```
+     *
+     * @param data       由 `export()` 返回的拓扑数据
+     * @param nodeFactory 可选，原生 JS 场景下的节点元素工厂
+     */
+    import(data: ExportData, nodeFactory?: NodeFactory): Promise<void>;
     /**
      * 设置缩放比例（以画布中心为基准）
      */
@@ -175,4 +283,4 @@ declare class Connector {
  * @description 导出 Connector 类及相关类型定义
  */
 
-export { type Connection, type ConnectionInfo, Connector, type ConnectorConfig, type ConnectorNode, type ConnectorOptions, type Dot, type DotPosition, type Point, type RegisterNodeOptions, type SilentOptions, type ViewState, Connector as default };
+export { type Connection, type ConnectionInfo, Connector, type ConnectorConfig, type ConnectorNode, type ConnectorOptions, type Dot, type DotPosition, type ExportConnectionData, type ExportData, type ExportNodeData, type NodeDeleteInfo, type NodeFactory, type NodeMoveInfo, type NodeSelectInfo, type Point, type RegisterNodeOptions, type SilentOptions, type ViewState, Connector as default };