@moxa/graph 3.0.0-beta.8 → 3.0.0-beta.9

package/README.md

@@ -104,11 +104,13 @@ graph.render();
 ## Components
 
 ### Node Components
+
 - **node-device**: Device node with icon and label support
 - **node-icon**: Icon-only node component
 - **node-label**: Label-only node component
 
 ### Edge Components
+
 - **edge-line**: Straight line edges
 - **edge-polyline**: Multi-segment polyline edges
 - **edge-quadratic**: Curved quadratic edges
@@ -116,6 +118,7 @@ graph.render();
 - **edge-label**: Labels for edges
 
 ### Group Components
+
 - **group-device**: Device group with expand/collapse functionality
 
 ## Behaviors
@@ -254,26 +257,34 @@ libs/graph/
 #### Detailed Folder Responsibilities
 
 ##### Core (`src/core/`)
+
 **Purpose**: Essential graph functionality and APIs
+
 - **`graph/`**: Main Graph class implementing the public API, lifecycle management, and core operations
 - **`model/`**: TypeScript type definitions, interfaces, and data structures used throughout the library
 - **`utils/`**: Core utility functions for graph manipulation, theme management, and element operations
 
 ##### Components (`src/components/`)
+
 **Purpose**: Visual rendering components for graph elements
+
 - **Node Components**: Different node types (device, icon, label) with specialized rendering logic
 - **Edge Components**: Various edge types (line, polyline, quadratic) with arrow and label support
 - **Group Components**: Container components for grouping and organizing elements
 - **Shared**: Common utilities and transformations used across components
 
 ##### Behaviors (`src/behaviors/`)
+
 **Purpose**: User interaction handling and graph manipulation
+
 - Each behavior handles specific user interactions (clicking, dragging, selecting)
 - Behaviors are modular and can be enabled/disabled independently
 - Includes both mouse and keyboard interaction handling
 
 ##### Layouts (`src/layouts/`)
+
 **Purpose**: Automatic positioning algorithms for graph elements
+
 - **Force**: Physics-based layout for natural node arrangements
 - **Tree**: Hierarchical layouts for tree-structured data
 - **Grid**: Regular grid arrangements for systematic positioning
@@ -281,27 +292,33 @@ libs/graph/
 - **Align**: Tools for manual element alignment
 
 ##### Plugins (`src/plugins/`)
+
 **Purpose**: Extensible features that enhance graph functionality
+
 - Each plugin is self-contained and optional
 - Plugins can add UI elements (toolbars, tooltips, minimap)
 - Includes data management features (history, context menus)
 
 ##### Shared (`src/shared/`)
+
 **Purpose**: Common utilities and infrastructure
+
 - **Types**: Shared TypeScript definitions used across modules
 - **Utils**: Generic utility functions and shared components
 - **Transforms**: Data transformation pipeline for processing graph configurations
 - **Constants**: Application-wide constants and configuration values
 
 ##### Testing Infrastructure
+
 - **`tests/`**: Reusable test utilities and helper functions
 - **`e2e/`**: End-to-end visual regression testing with Playwright
-- **Each component includes its own test suite with visual snapshots
+- \*\*Each component includes its own test suite with visual snapshots
 
 ##### Documentation & Development
+
 - **`.storybook/`**: Interactive documentation and component playground
 - **`stories/`**: Written documentation and API guides
-- **Each component includes comprehensive Storybook stories for demonstration and testing
+- \*\*Each component includes comprehensive Storybook stories for demonstration and testing
 
 ### Development Workflow
 
@@ -433,9 +450,12 @@ class CustomPlugin extends BasePlugin {
 }
 
 // Add plugin to graph
-graph.setPlugin('custom-plugin', new CustomPlugin({
-  // plugin options
-}));
+graph.setPlugin(
+  'custom-plugin',
+  new CustomPlugin({
+    // plugin options
+  }),
+);
 ```
 
 ## Development Workflow
@@ -651,11 +671,7 @@ Implement Playwright visual regression tests:
 ```typescript
 // components/my-component/stories/tests/my-component-basic.spec.ts
 import { test } from '@playwright/test';
-import {
-  getGraphContainer,
-  getStorybookUrl,
-  verifySnapshot,
-} from '@tests/helpers';
+import { getGraphContainer, getStorybookUrl, verifySnapshot } from '@tests/helpers';
 
 const STORY_ID = 'components-my-component--basic';
 const SNAPSHOT_NAME = 'my-component-basic.png';
@@ -665,10 +681,7 @@ test.describe('My Component Visual Tests', () => {
     await page.setViewportSize({ width: 600, height: 500 });
   });
 
-  test('should display basic component correctly', async ({
-    page,
-    baseURL,
-  }) => {
+  test('should display basic component correctly', async ({ page, baseURL }) => {
     await page.goto(getStorybookUrl(baseURL, STORY_ID));
     await page.waitForSelector('div.container', { timeout: 10000 });