@capillarytech/blaze-ui 5.4.1 → 5.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CapAskAira/index.js +312 -341
- package/CapAskAira/index.js.map +1 -1
- package/CapExpressionEditor/README.md +32 -0
- package/CapExpressionEditor/index.d.ts +1654 -0
- package/CapExpressionEditor/index.d.ts.map +1 -0
- package/CapExpressionEditor/index.js +312 -349
- package/CapExpressionEditor/index.js.map +1 -1
- package/CapExpressionEditor/js/fixGrammar.d.ts +3 -0
- package/CapExpressionEditor/js/fixGrammar.d.ts.map +1 -0
- package/CapExpressionEditor/js/grammar.d.ts +1628 -0
- package/CapExpressionEditor/js/grammar.d.ts.map +1 -0
- package/CapExpressionEditor/types.d.ts +18 -0
- package/CapExpressionEditor/types.d.ts.map +1 -0
- package/CapLevelGraphRenderer/index.js +130 -127
- package/CapLevelGraphRenderer/index.js.map +1 -1
- package/index.d.ts +2 -2
- package/index.d.ts.map +1 -1
- package/index.js +4352 -1108
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/.npmrc +0 -2
- package/CapLevelGraphRenderer/CapLevelGraphRenderer-test-cases.md +0 -50
- package/CapLevelGraphRenderer/README.md +0 -123
- package/CapLevelGraphRenderer/Tooltip.d.ts +0 -24
- package/CapLevelGraphRenderer/Tooltip.d.ts.map +0 -1
- package/CapLevelGraphRenderer/Tooltip_MIGRATION_ANALYSIS.md +0 -120
- package/CapLevelGraphRenderer/index.d.ts +0 -16
- package/CapLevelGraphRenderer/index.d.ts.map +0 -1
- package/CapLevelGraphRenderer/types.d.ts +0 -151
- package/CapLevelGraphRenderer/types.d.ts.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capillarytech/blaze-ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.6.0",
|
|
4
4
|
"description": "Capillary UI component library with Ant Design v6",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"react-virtuoso": "4.9.0",
|
|
52
52
|
"sanitize.css": "^13.0.0",
|
|
53
53
|
"whatwg-fetch": "3.0.0",
|
|
54
|
-
"
|
|
55
|
-
"
|
|
54
|
+
"jquery": "^3.6.0",
|
|
55
|
+
"rangy": "^1.3.2"
|
|
56
56
|
},
|
|
57
57
|
"lint-staged": {
|
|
58
58
|
"components/**/*.{ts,tsx}": [
|
package/.npmrc
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
# Test Cases: CapLevelGraphRenderer (Antd v3→v6)
|
|
2
|
-
|
|
3
|
-
## Component Analysis
|
|
4
|
-
- **Component**: CapLevelGraphRenderer
|
|
5
|
-
- **Complexity**: medium
|
|
6
|
-
- **Source**: blaze-ui/components/CapLevelGraphRenderer/
|
|
7
|
-
- **Dependencies**: @antv/x6, React, CapButton, CapIcon
|
|
8
|
-
- **Key Features**: Graph rendering with nodes, forward/reverse connections, pagination, tooltips
|
|
9
|
-
|
|
10
|
-
## Test Cases (≤20 for medium complexity)
|
|
11
|
-
|
|
12
|
-
| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
|
|
13
|
-
|---|---|---|---|---|---|---|
|
|
14
|
-
| UC-001 | Basic rendering with nodes and connections | `nodes=[{id: 'tier1', height: 295, component: MockComponent}, {id: 'tier2', height: 500, component: MockComponent}]`, `connections=[{sourceId: 'tier2', targetId: 'tier1'}]`, `graphId="test-graph"` | Graph renders with 2 nodes, forward connection between nodes, reverse connection visible, pagination controls visible | P0 | BasicRendering | Core functionality - must render graph |
|
|
15
|
-
| UC-002 | Empty state - no nodes | `nodes=[]`, `connections=[]`, `graphId="test-graph"` | Graph container renders, no nodes visible, pagination buttons disabled, no errors | P1 | EmptyState | Edge case - empty data |
|
|
16
|
-
| UC-003 | Single node without connections | `nodes=[{id: 'tier1', height: 295, component: MockComponent}]`, `connections=[]`, `graphId="test-graph"` | Single node renders, no connections drawn, pagination buttons disabled | P1 | SingleNode | Minimal valid state |
|
|
17
|
-
| UC-004 | Multiple nodes with forward connections only | `nodes=[{id: 'tier1', height: 200}, {id: 'tier2', height: 300}, {id: 'tier3', height: 250}]`, `connections=[]`, `graphId="test-graph"` | 3 nodes render in sequence, forward connections between adjacent nodes visible, no reverse connections | P0 | ForwardConnections | Default forward connection behavior |
|
|
18
|
-
| UC-005 | Reverse connections - level by level | `nodes=[{id: 'tier1', height: 200}, {id: 'tier2', height: 300}, {id: 'tier3', height: 250}]`, `connections=[{sourceId: 'tier3', targetId: 'tier1'}, {sourceId: 'tier2', targetId: 'tier1'}]`, `graphId="test-graph"` | Reverse connections render at different levels, avoid overlapping nodes, connections properly routed | P0 | ReverseConnections | Core reverse connection algorithm |
|
|
19
|
-
| UC-006 | All styling props | `className="custom-class"`, `graphStyles={{border: '1px solid red'}}`, `containerStyles={{padding: '10px'}}`, `scrollClassName="custom-scroll"`, `graphId="test-graph"` | Custom classes and styles applied to respective containers, visual styling visible | P1 | StylingProps | Grouped all style-related props |
|
|
20
|
-
| UC-007 | All layout/dimension props | `graphWidth="800px"`, `graphHeight="600px"`, `defaultStartX=50`, `defaultStartY=50`, `offsetHeight=30`, `defaultEleWidth=150`, `defaultEleDistance=40`, `offsetLineDistance=25`, `graphId="test-graph"` | Graph renders at specified dimensions, nodes positioned correctly, spacing matches props | P1 | LayoutProps | Grouped all layout configuration |
|
|
21
|
-
| UC-008 | Connection styling props | `lineStrokeColor="#ff0000"`, `forwardConnProps={{strokeWidth: 3}}`, `reverseConnProps={{strokeDasharray: '5,5'}}`, `graphId="test-graph"` | Forward connections use red color and thicker stroke, reverse connections use dashed style | P1 | ConnectionStyling | Grouped connection appearance props |
|
|
22
|
-
| UC-009 | Tooltip functionality - forward arrows | `showToolTip=true`, `allowForwardArrowTooltip=true`, `nodes=[{id: 'tier1', height: 200, toolTip: 'Tier 1'}, {id: 'tier2', height: 300, toolTip: 'Tier 2'}]`, `connections=[]`, `graphId="test-graph"` | Hovering forward connection shows tooltip with "Tier 1 - Tier 2" format | P1 | ForwardArrowTooltip | Tooltip on forward connections |
|
|
23
|
-
| UC-010 | Tooltip functionality - reverse arrows | `showToolTip=true`, `allowReverseArrowTooltip=true`, `nodes=[{id: 'tier1', height: 200, toolTip: 'Tier 1'}, {id: 'tier2', height: 300, toolTip: 'Tier 2'}]`, `connections=[{sourceId: 'tier2', targetId: 'tier1'}]`, `graphId="test-graph"` | Hovering reverse connection shows tooltip with combined tooltip text | P1 | ReverseArrowTooltip | Tooltip on reverse connections |
|
|
24
|
-
| UC-011 | Tooltip disabled | `showToolTip=false`, `nodes=[{id: 'tier1', height: 200, toolTip: 'Tier 1'}]`, `graphId="test-graph"` | No tooltip appears on hover, tooltip tool not registered | P2 | TooltipDisabled | Tooltip feature toggle |
|
|
25
|
-
| UC-012 | Pagination - previous button interaction | `nodes=[5 nodes with width 100, distance 20]`, `graphWidth="300px"`, `graphId="test-graph"` | Click previous button scrolls graph left, button disabled at start, scroll position updates | P0 | PaginationPrevious | Pagination navigation |
|
|
26
|
-
| UC-013 | Pagination - next button interaction | `nodes=[5 nodes with width 100, distance 20]`, `graphWidth="300px"`, `graphId="test-graph"` | Click next button scrolls graph right, button disabled at end, scroll position updates | P0 | PaginationNext | Pagination navigation |
|
|
27
|
-
| UC-014 | Pagination button states | `nodes=[3 nodes]`, `graphWidth="500px"` (fits all), `graphId="test-graph"` | Both buttons disabled when all nodes visible, buttons enabled when content exceeds viewport | P1 | PaginationStates | Button disabled logic |
|
|
28
|
-
| UC-015 | Scroller props customization | `scrollerProps={{padding: 10, pannable: true}}`, `graphId="test-graph"` | Scroller applies custom padding and panning behavior, graph respects scroller config | P2 | ScrollerProps | Advanced scroller configuration |
|
|
29
|
-
| UC-016 | Node props - component rendering | `nodes=[{id: 'tier1', height: 200, component: CustomComponent, props: {label: 'Test'}}]`, `graphId="test-graph"` | Custom React component renders inside node with passed props, component visible in graph | P0 | NodeComponent | Node content rendering |
|
|
30
|
-
| UC-017 | Complex connection scenarios | `nodes=[4 nodes]`, `connections=[multiple overlapping reverse connections]`, `graphId="test-graph"` | Multiple reverse connections render at different levels, no overlaps, proper routing around nodes | P0 | ComplexConnections | Edge case - complex graph topology |
|
|
31
|
-
| UC-018 | Missing graphId (required prop) | `nodes=[{id: 'tier1', height: 200}]` (no graphId) | Component throws error or handles gracefully, PropTypes validation catches missing prop | P0 | MissingGraphId | Required prop validation |
|
|
32
|
-
| UC-019 | Invalid connections | `nodes=[{id: 'tier1'}, {id: 'tier2'}]`, `connections=[{sourceId: 'invalid', targetId: 'tier1'}]`, `graphId="test-graph"` | Component handles invalid connection gracefully, only valid connections render, no errors | P1 | InvalidConnections | Edge case - invalid data |
|
|
33
|
-
| UC-020 | Migration - antv/x6 Graph API | Standard props with nodes and connections | Graph initializes correctly, nodes and edges added via x6 API, React components render in nodes, events work | P0 | MigrationX6API | Verify @antv/x6 integration works in v6 context |
|
|
34
|
-
|
|
35
|
-
## Grouping Rationale
|
|
36
|
-
|
|
37
|
-
- **UC-006**: Grouped all style props (className, graphStyles, containerStyles, scrollClassName) into single test
|
|
38
|
-
- **UC-007**: Grouped all layout/dimension props (graphWidth, graphHeight, positioning, spacing) into single test
|
|
39
|
-
- **UC-008**: Grouped connection styling props (lineStrokeColor, forwardConnProps, reverseConnProps) into single test
|
|
40
|
-
- **UC-009-011**: Tooltip tests grouped by feature (forward, reverse, disabled)
|
|
41
|
-
- **UC-012-014**: Pagination tests grouped by interaction type (previous, next, states)
|
|
42
|
-
|
|
43
|
-
## Notes
|
|
44
|
-
|
|
45
|
-
- Component uses @antv/x6 Graph library - verify compatibility with Antd v6
|
|
46
|
-
- Tooltip uses custom TooltipTool class extending ToolsView.ToolItem
|
|
47
|
-
- Pagination uses CapButton and CapIcon components
|
|
48
|
-
- Node components render via react-shape in x6
|
|
49
|
-
- Reverse connections use level-based algorithm to avoid overlaps
|
|
50
|
-
- Component requires DOM element with graphId for initialization
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
# CapLevelGraphRenderer
|
|
2
|
-
|
|
3
|
-
Graph renderer component that displays nodes with custom React components and draws level-by-level backward edges using the @antv/x6 Graph library.
|
|
4
|
-
|
|
5
|
-
## Migration (Antd v3 → v6)
|
|
6
|
-
|
|
7
|
-
- **Antd usage**: This component does **not** use any Ant Design components directly. It uses the `@antv/x6` Graph library for rendering. The component uses Cap UI components (`CapButton`, `CapIcon`) for pagination controls. No Antd theme config or API changes apply.
|
|
8
|
-
- **PropTypes removed**: All runtime PropTypes were removed and replaced with TypeScript types from `types.ts`.
|
|
9
|
-
- **defaultProps removed**: All `defaultProps` were removed and converted to destructuring with default values in the function signature.
|
|
10
|
-
- **Styles**: `styles.scss` uses CSS Modules with one `:global` override for Ant Design icon spacing (with mandatory `// OVERRIDE:` comment).
|
|
11
|
-
|
|
12
|
-
## Props
|
|
13
|
-
|
|
14
|
-
See `types.ts` for full interfaces. Main props:
|
|
15
|
-
|
|
16
|
-
| Prop | Type | Description |
|
|
17
|
-
|------|------|-------------|
|
|
18
|
-
| `nodes` | `GraphNode[]` | Array of nodes to render. Each node requires `id`, `component`, `height`, and optionally `props` and `toolTip`. Default: `[]` |
|
|
19
|
-
| `graphId` | `string` | **Required.** Unique identifier for the graph container DOM element. |
|
|
20
|
-
| `connections` | `GraphConnection[]` | Array of connections between nodes. Each connection has `sourceId` and `targetId`. Default: `[]` |
|
|
21
|
-
| `graphWidth` | `number \| string` | Width of the graph container. Default: `'500px'` |
|
|
22
|
-
| `graphHeight` | `number \| string` | Height of the graph container. Default: `'500px'` |
|
|
23
|
-
| `showToolTip` | `boolean` | Whether to show tooltips on edges. Default: `false` |
|
|
24
|
-
| `allowForwardArrowTooltip` | `boolean` | Whether to allow tooltips on forward arrows. Default: `false` |
|
|
25
|
-
| `allowReverseArrowTooltip` | `boolean` | Whether to allow tooltips on reverse arrows. Default: `false` |
|
|
26
|
-
| `defaultEleWidth` | `number` | Default width for each node element. Default: `100` |
|
|
27
|
-
| `defaultEleDistance` | `number` | Default distance between node elements. Default: `20` |
|
|
28
|
-
| `offsetHeight` | `number` | Offset height for connection lines from node top. Default: `20` |
|
|
29
|
-
| `offsetLineDistance` | `number` | Offset distance for reverse connection lines. Default: `18` |
|
|
30
|
-
| `defaultStartX` | `number` | Default starting X coordinate. Default: `0` |
|
|
31
|
-
| `defaultStartY` | `number` | Default starting Y coordinate. Default: `0` |
|
|
32
|
-
| `lineStrokeColor` | `string` | Color for connection lines. Default: `'gray'` |
|
|
33
|
-
| `forwardConnProps` | `Record<string, unknown>` | Props to apply to forward connections. Default: `{}` |
|
|
34
|
-
| `reverseConnProps` | `Record<string, unknown>` | Props to apply to reverse connections. Default: `{}` |
|
|
35
|
-
| `scrollerProps` | `Record<string, unknown>` | Props to pass to the x6 scroller. Default: `{}` |
|
|
36
|
-
| `scrollClassName` | `string` | CSS class name for the scroller. Default: `''` |
|
|
37
|
-
| `graphStyles` | `React.CSSProperties` | Inline styles for the graph container. Default: `{}` |
|
|
38
|
-
| `containerStyles` | `React.CSSProperties` | Inline styles for the container wrapper. Default: `{}` |
|
|
39
|
-
| `className` | `string` | Additional CSS class name. Default: `''` |
|
|
40
|
-
|
|
41
|
-
## Usage
|
|
42
|
-
|
|
43
|
-
```tsx
|
|
44
|
-
import CapLevelGraphRenderer from '@capillarytech/blaze-ui/components/CapLevelGraphRenderer';
|
|
45
|
-
import type { GraphNode, GraphConnection } from '@capillarytech/blaze-ui/components/CapLevelGraphRenderer/types';
|
|
46
|
-
|
|
47
|
-
const MyComponent = () => {
|
|
48
|
-
const nodes: GraphNode[] = [
|
|
49
|
-
{
|
|
50
|
-
id: 'tier1',
|
|
51
|
-
component: MyCustomComponent,
|
|
52
|
-
height: 295,
|
|
53
|
-
props: { label: 'Tier 1' },
|
|
54
|
-
toolTip: 'First Tier',
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
id: 'tier2',
|
|
58
|
-
component: MyCustomComponent,
|
|
59
|
-
height: 500,
|
|
60
|
-
props: { label: 'Tier 2' },
|
|
61
|
-
toolTip: 'Second Tier',
|
|
62
|
-
},
|
|
63
|
-
];
|
|
64
|
-
|
|
65
|
-
const connections: GraphConnection[] = [
|
|
66
|
-
{ sourceId: 'tier2', targetId: 'tier1' },
|
|
67
|
-
];
|
|
68
|
-
|
|
69
|
-
return (
|
|
70
|
-
<CapLevelGraphRenderer
|
|
71
|
-
graphId="my-graph"
|
|
72
|
-
nodes={nodes}
|
|
73
|
-
connections={connections}
|
|
74
|
-
graphWidth="800px"
|
|
75
|
-
graphHeight="600px"
|
|
76
|
-
showToolTip={true}
|
|
77
|
-
allowForwardArrowTooltip={true}
|
|
78
|
-
allowReverseArrowTooltip={true}
|
|
79
|
-
/>
|
|
80
|
-
);
|
|
81
|
-
};
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
## Features
|
|
85
|
-
|
|
86
|
-
- **Custom Node Components**: Each node can render a custom React component
|
|
87
|
-
- **Forward Connections**: Automatically draws forward connections between adjacent nodes
|
|
88
|
-
- **Reverse Connections**: Calculates and draws reverse connections level-by-level to avoid overlaps
|
|
89
|
-
- **Pagination**: Built-in pagination controls for horizontal scrolling
|
|
90
|
-
- **Tooltips**: Optional tooltips on edges (forward and reverse arrows)
|
|
91
|
-
- **Customizable Styling**: Supports custom styles for graph container, connections, and scroller
|
|
92
|
-
|
|
93
|
-
## Breaking Changes
|
|
94
|
-
|
|
95
|
-
None. This component did not use Ant Design components or deprecated APIs.
|
|
96
|
-
|
|
97
|
-
## Dependencies
|
|
98
|
-
|
|
99
|
-
- `@antv/x6`: Graph rendering library (version: ^1.12.4)
|
|
100
|
-
- `@antv/x6-react-shape`: React shape plugin for x6 (version: ^1.2.3)
|
|
101
|
-
- `classnames`, `lodash` (already in blaze-ui dependencies)
|
|
102
|
-
|
|
103
|
-
## Style Overrides
|
|
104
|
-
|
|
105
|
-
The component uses one `:global` override for Ant Design icon spacing:
|
|
106
|
-
|
|
107
|
-
```scss
|
|
108
|
-
// OVERRIDE: Specific icon spacing override - no token available for nested icon margin within button
|
|
109
|
-
:global {
|
|
110
|
-
& > span + .anticon {
|
|
111
|
-
margin: 0;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
This override is necessary because there's no design token available for nested icon margin within button components.
|
|
117
|
-
|
|
118
|
-
## Notes
|
|
119
|
-
|
|
120
|
-
- The component requires a DOM element with the specified `graphId` to exist before rendering
|
|
121
|
-
- The component uses module-level objects (`nodePostionObj`, `edgeObj`) for state tracking
|
|
122
|
-
- Reverse connections are calculated using a level-based algorithm to prevent overlaps
|
|
123
|
-
- The graph instance is managed via React refs
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { ToolsView } from '@antv/x6';
|
|
2
|
-
/**
|
|
3
|
-
* Custom tooltip tool for x6 graph edges
|
|
4
|
-
* Extends ToolsView.ToolItem to provide tooltip functionality on edge hover
|
|
5
|
-
*
|
|
6
|
-
* Note: Uses type assertions for @antv/x6 properties as the library's TypeScript
|
|
7
|
-
* definitions may not fully expose all ToolItem properties.
|
|
8
|
-
*/
|
|
9
|
-
declare class TooltipTool extends ToolsView.ToolItem {
|
|
10
|
-
delay: number;
|
|
11
|
-
knob: HTMLElement;
|
|
12
|
-
tooltipVisible?: boolean;
|
|
13
|
-
timer?: number;
|
|
14
|
-
constructor(props: Record<string, unknown>);
|
|
15
|
-
render(): this;
|
|
16
|
-
toggleTooltip(visible: boolean): void;
|
|
17
|
-
updatePosition(e?: MouseEvent): void;
|
|
18
|
-
onMouseLeave(): void;
|
|
19
|
-
onMouseMove: (e: MouseEvent) => void;
|
|
20
|
-
delegateEvents(): this;
|
|
21
|
-
onRemove(): void;
|
|
22
|
-
}
|
|
23
|
-
export default TooltipTool;
|
|
24
|
-
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../components/CapLevelGraphRenderer/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQrC;;;;;;GAMG;AACH,cAAM,WAAY,SAAQ,SAAS,CAAC,QAAQ;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAG,WAAW,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;gBAEH,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAK1C,MAAM,IAAI,IAAI;IAWd,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAarC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAepC,YAAY,IAAI,IAAI;IASpB,WAAW,GAAI,GAAG,UAAU,KAAG,IAAI,CAWjC;IAEF,cAAc,IAAI,IAAI;IAMtB,QAAQ,IAAI,IAAI;CAKjB;AAOD,eAAe,WAAW,CAAC"}
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
# Migration Analysis Report: Tooltip.tsx
|
|
2
|
-
|
|
3
|
-
## STAGE 1: Pre-Analysis
|
|
4
|
-
|
|
5
|
-
### Analysis Report for Tooltip.tsx
|
|
6
|
-
|
|
7
|
-
#### 1. Antd Style Overrides Found
|
|
8
|
-
|
|
9
|
-
| Line # | Old Override | Can Tokenize? | Token Path | Token Value | Override Reason |
|
|
10
|
-
|--------|-------------|---------------|------------|-------------|-----------------|
|
|
11
|
-
| N/A | None | N/A | N/A | N/A | No Antd style overrides found |
|
|
12
|
-
|
|
13
|
-
**Tokenizable overrides**: 0
|
|
14
|
-
**Non-tokenizable overrides**: 0
|
|
15
|
-
**Status**: No Antd style overrides found - will skip theme config update
|
|
16
|
-
|
|
17
|
-
#### 2. API Breaking Changes
|
|
18
|
-
|
|
19
|
-
| Old API | New API | Affected Props |
|
|
20
|
-
|---------|---------|----------------|
|
|
21
|
-
| `visible` (CapTooltip) | `open` (CapTooltip) | Line 27: `visible` prop used |
|
|
22
|
-
|
|
23
|
-
**Note**: The file uses deprecated `visible` prop on CapTooltip component. Should use `open` instead.
|
|
24
|
-
|
|
25
|
-
#### 3. Backward Compatibility Plan
|
|
26
|
-
|
|
27
|
-
| Deprecated Prop | Fallback Logic |
|
|
28
|
-
|----------------|----------------|
|
|
29
|
-
| `visible` (CapTooltip) | Use `open` prop instead (CapTooltip handles backward compatibility internally) |
|
|
30
|
-
|
|
31
|
-
#### 4. Type Definitions Needed
|
|
32
|
-
|
|
33
|
-
- **TooltipToolOptions interface**: Type for constructor props/options
|
|
34
|
-
- `tooltip?: string` - Tooltip text content
|
|
35
|
-
- **Class property types**:
|
|
36
|
-
- `knob: HTMLElement` - DOM element for tooltip rendering
|
|
37
|
-
- `delay: number` - Delay in milliseconds
|
|
38
|
-
- `tooltipVisible: boolean` - Current tooltip visibility state
|
|
39
|
-
- `timer: ReturnType<typeof setTimeout>` - Timer reference
|
|
40
|
-
- **Method parameter types**:
|
|
41
|
-
- `toggleTooltip(visible: boolean): void`
|
|
42
|
-
- `updatePosition(e?: MouseEvent): void`
|
|
43
|
-
- `onMouseMove(e: MouseEvent): void`
|
|
44
|
-
|
|
45
|
-
#### 5. PropTypes Removal
|
|
46
|
-
|
|
47
|
-
- [x] Component uses PropTypes: **NO**
|
|
48
|
-
- [x] PropTypes file exists: **NO**
|
|
49
|
-
- [x] PropTypes imports found: **NO**
|
|
50
|
-
- [x] Component.propTypes assignments found: **NO**
|
|
51
|
-
- **Action Required**: None - no PropTypes found
|
|
52
|
-
|
|
53
|
-
#### 6. DefaultProps Removal
|
|
54
|
-
|
|
55
|
-
- [x] Component uses defaultProps: **NO**
|
|
56
|
-
- [x] Component.defaultProps assignments found: **NO**
|
|
57
|
-
- [x] Old function syntax with props parameter: **NO** (class-based component)
|
|
58
|
-
- [x] Default values assigned inside function body: **YES** (line 10: `this.delay = 100`)
|
|
59
|
-
- **Action Required**: None - defaultProps not used, default value assignment is acceptable for class properties
|
|
60
|
-
|
|
61
|
-
#### 7. External Package Dependencies
|
|
62
|
-
|
|
63
|
-
**External packages found**:
|
|
64
|
-
- `@antv/x6` - Already in package.json (added in main component migration)
|
|
65
|
-
- `react-dom/client` - Already available (React dependency)
|
|
66
|
-
|
|
67
|
-
**Package status**:
|
|
68
|
-
- All dependencies already present
|
|
69
|
-
|
|
70
|
-
#### 8. Component-Specific Notes
|
|
71
|
-
|
|
72
|
-
- Class-based component extending `ToolsView.ToolItem` from @antv/x6
|
|
73
|
-
- Uses React 18 `createRoot` API (already migrated)
|
|
74
|
-
- Uses deprecated `visible` prop on CapTooltip - needs update to `open`
|
|
75
|
-
- Missing TypeScript types for class properties and method parameters
|
|
76
|
-
- Uses DOM manipulation directly (acceptable for x6 tool implementation)
|
|
77
|
-
|
|
78
|
-
---
|
|
79
|
-
|
|
80
|
-
## STAGE 2: Theme Config Update
|
|
81
|
-
|
|
82
|
-
**Status**: No theme config changes required
|
|
83
|
-
|
|
84
|
-
**Reason**: No Antd style overrides found. Component uses @antv/x6 ToolsView.ToolItem and CapTooltip component.
|
|
85
|
-
|
|
86
|
-
---
|
|
87
|
-
|
|
88
|
-
## STAGE 3: Implementation Required
|
|
89
|
-
|
|
90
|
-
1. **Add TypeScript types**:
|
|
91
|
-
- Define interface for TooltipToolOptions
|
|
92
|
-
- Add type annotations for class properties
|
|
93
|
-
- Add type annotations for method parameters
|
|
94
|
-
|
|
95
|
-
2. **Fix deprecated prop usage**:
|
|
96
|
-
- Change `visible` to `open` on CapTooltip (line 27)
|
|
97
|
-
|
|
98
|
-
3. **Improve type safety**:
|
|
99
|
-
- Add proper types for DOM elements and event handlers
|
|
100
|
-
|
|
101
|
-
---
|
|
102
|
-
|
|
103
|
-
## STAGE 3: Implementation Complete
|
|
104
|
-
|
|
105
|
-
All changes have been implemented:
|
|
106
|
-
- ✅ **TypeScript types added**: Created interfaces for TooltipToolOptions, GraphInstance, and CellViewInstance
|
|
107
|
-
- ✅ **Class property types**: Added proper types for knob, delay, tooltipVisible, timer, and root
|
|
108
|
-
- ✅ **Method parameter types**: Added types for toggleTooltip, updatePosition, onMouseMove, onMouseLeave
|
|
109
|
-
- ✅ **Deprecated prop fixed**: Changed `visible` to `open` on CapTooltip (line 84)
|
|
110
|
-
- ✅ **Type safety improved**: Used type assertions for @antv/x6 properties that aren't fully typed
|
|
111
|
-
- ✅ **Cleanup added**: Added proper cleanup in onRemove method (unmount React root, clear timer)
|
|
112
|
-
|
|
113
|
-
**Key Changes**:
|
|
114
|
-
1. Fixed deprecated `visible` prop → `open` prop on CapTooltip
|
|
115
|
-
2. Added TypeScript interfaces for options and x6 instance types
|
|
116
|
-
3. Added proper type annotations for all class properties and methods
|
|
117
|
-
4. Improved cleanup with React root unmounting
|
|
118
|
-
5. Used type assertions for @antv/x6 properties that aren't fully exposed in TypeScript definitions
|
|
119
|
-
|
|
120
|
-
**Migration Status**: ✅ COMPLETE
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
*
|
|
3
|
-
* CapLevelGraphRenderer
|
|
4
|
-
*
|
|
5
|
-
* It render graph with custom node and draw level by level backward edge
|
|
6
|
-
*
|
|
7
|
-
* Mock Data
|
|
8
|
-
* nodes = [{ id: 'tier1', height: 295 }, { id: 'tier2', height: 500 }]
|
|
9
|
-
* connections = [ { sourceId: 'tier2', targetId: 'tier1' }]
|
|
10
|
-
*/
|
|
11
|
-
import '@antv/x6-react-shape';
|
|
12
|
-
import React from 'react';
|
|
13
|
-
import type { CapLevelGraphRendererProps } from './types';
|
|
14
|
-
declare const CapLevelGraphRenderer: React.FC<CapLevelGraphRendererProps>;
|
|
15
|
-
export default CapLevelGraphRenderer;
|
|
16
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapLevelGraphRenderer/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,sBAAsB,CAAC;AAG9B,OAAO,KAAmD,MAAM,OAAO,CAAC;AAOxE,OAAO,KAAK,EACV,0BAA0B,EAM3B,MAAM,SAAS,CAAC;AAKjB,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA2b/D,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
import { Graph } from '@antv/x6';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
/**
|
|
4
|
-
* Node data structure for graph rendering
|
|
5
|
-
*/
|
|
6
|
-
export interface GraphNode {
|
|
7
|
-
/** Unique identifier for the node */
|
|
8
|
-
id: string;
|
|
9
|
-
/** React component to render inside the node */
|
|
10
|
-
component: React.ComponentType<Record<string, unknown>>;
|
|
11
|
-
/** Height of the node in pixels */
|
|
12
|
-
height: number;
|
|
13
|
-
/** Props to pass to the component */
|
|
14
|
-
props?: Record<string, unknown>;
|
|
15
|
-
/** Tooltip text for the node */
|
|
16
|
-
toolTip?: string;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Connection data structure for graph edges
|
|
20
|
-
*/
|
|
21
|
-
export interface GraphConnection {
|
|
22
|
-
/** Source node ID */
|
|
23
|
-
sourceId: string;
|
|
24
|
-
/** Target node ID */
|
|
25
|
-
targetId: string;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* Node position tracking object
|
|
29
|
-
*/
|
|
30
|
-
export interface NodePosition {
|
|
31
|
-
/** X coordinate */
|
|
32
|
-
x: number;
|
|
33
|
-
/** Y coordinate */
|
|
34
|
-
y: number;
|
|
35
|
-
/** End X coordinate */
|
|
36
|
-
x1: number;
|
|
37
|
-
/** End Y coordinate */
|
|
38
|
-
y1: number;
|
|
39
|
-
/** Node height */
|
|
40
|
-
height: number;
|
|
41
|
-
/** Node width */
|
|
42
|
-
width: number;
|
|
43
|
-
/** Tooltip text */
|
|
44
|
-
toolTip: string;
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* Edge tracking object
|
|
48
|
-
*/
|
|
49
|
-
export interface EdgeObj {
|
|
50
|
-
forward?: boolean;
|
|
51
|
-
reverse?: boolean;
|
|
52
|
-
}
|
|
53
|
-
/**
|
|
54
|
-
* Connection object for internal tracking
|
|
55
|
-
*/
|
|
56
|
-
export interface ConnectionObj {
|
|
57
|
-
in: string[];
|
|
58
|
-
out: string[];
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* Props for CapLevelGraphRenderer component
|
|
62
|
-
*/
|
|
63
|
-
export interface CapLevelGraphRendererProps {
|
|
64
|
-
/** Array of nodes to render in the graph */
|
|
65
|
-
nodes?: GraphNode[];
|
|
66
|
-
/** Unique identifier for the graph container DOM element (required) */
|
|
67
|
-
graphId: string;
|
|
68
|
-
/** Additional CSS class name */
|
|
69
|
-
className?: string;
|
|
70
|
-
/** Width of the graph container (number in pixels or string like '500px') */
|
|
71
|
-
graphWidth?: number | string;
|
|
72
|
-
/** Height of the graph container (number in pixels or string like '500px') */
|
|
73
|
-
graphHeight?: number | string;
|
|
74
|
-
/** Whether to show tooltips on edges */
|
|
75
|
-
showToolTip?: boolean;
|
|
76
|
-
/** Array of connections between nodes */
|
|
77
|
-
connections?: GraphConnection[];
|
|
78
|
-
/** Inline styles for the graph container */
|
|
79
|
-
graphStyles?: React.CSSProperties;
|
|
80
|
-
/** Offset height for connection lines from node top */
|
|
81
|
-
offsetHeight?: number;
|
|
82
|
-
/** Default starting X coordinate */
|
|
83
|
-
defaultStartX?: number;
|
|
84
|
-
/** Default starting Y coordinate */
|
|
85
|
-
defaultStartY?: number;
|
|
86
|
-
/** Props to pass to the x6 scroller */
|
|
87
|
-
scrollerProps?: Record<string, unknown>;
|
|
88
|
-
/** CSS class name for the scroller */
|
|
89
|
-
scrollClassName?: string;
|
|
90
|
-
/** Inline styles for the container wrapper */
|
|
91
|
-
containerStyles?: React.CSSProperties;
|
|
92
|
-
/** Color for connection lines */
|
|
93
|
-
lineStrokeColor?: string;
|
|
94
|
-
/** Default width for each node element */
|
|
95
|
-
defaultEleWidth?: number;
|
|
96
|
-
/** Default distance between node elements */
|
|
97
|
-
defaultEleDistance?: number;
|
|
98
|
-
/** Offset distance for reverse connection lines */
|
|
99
|
-
offsetLineDistance?: number;
|
|
100
|
-
/** Props to apply to forward connections */
|
|
101
|
-
forwardConnProps?: Record<string, unknown>;
|
|
102
|
-
/** Props to apply to reverse connections */
|
|
103
|
-
reverseConnProps?: Record<string, unknown>;
|
|
104
|
-
/** Whether to allow tooltips on forward arrows */
|
|
105
|
-
allowForwardArrowTooltip?: boolean;
|
|
106
|
-
/** Whether to allow tooltips on reverse arrows */
|
|
107
|
-
allowReverseArrowTooltip?: boolean;
|
|
108
|
-
}
|
|
109
|
-
/**
|
|
110
|
-
* Reference type for the graph instance
|
|
111
|
-
*/
|
|
112
|
-
export type GraphRef = React.MutableRefObject<Graph | null>;
|
|
113
|
-
/**
|
|
114
|
-
* Options for TooltipTool
|
|
115
|
-
*/
|
|
116
|
-
export interface TooltipToolOptions {
|
|
117
|
-
/** Tooltip text content */
|
|
118
|
-
tooltip?: string;
|
|
119
|
-
}
|
|
120
|
-
/**
|
|
121
|
-
* Type for x6 Graph instance methods used by TooltipTool
|
|
122
|
-
*/
|
|
123
|
-
export interface GraphInstance {
|
|
124
|
-
/** Convert client coordinates to graph coordinates */
|
|
125
|
-
clientToGraph: (x: number, y: number) => {
|
|
126
|
-
x: number;
|
|
127
|
-
y: number;
|
|
128
|
-
};
|
|
129
|
-
}
|
|
130
|
-
/**
|
|
131
|
-
* Type for x6 CellView instance methods used by TooltipTool
|
|
132
|
-
*/
|
|
133
|
-
export interface CellViewInstance {
|
|
134
|
-
/** Register event handler */
|
|
135
|
-
on: (event: string, handler: () => void, context: unknown) => void;
|
|
136
|
-
/** Unregister event handler */
|
|
137
|
-
off: (event: string, handler: () => void) => void;
|
|
138
|
-
}
|
|
139
|
-
/**
|
|
140
|
-
* Type for Edge with addTools/removeTools methods (not in @antv/x6 TypeScript definitions)
|
|
141
|
-
*/
|
|
142
|
-
export interface EdgeWithTools {
|
|
143
|
-
/** Add tools to the edge */
|
|
144
|
-
addTools?: (tools: Array<{
|
|
145
|
-
name: string;
|
|
146
|
-
args: Record<string, unknown>;
|
|
147
|
-
}>) => void;
|
|
148
|
-
/** Remove tools from the edge */
|
|
149
|
-
removeTools?: () => void;
|
|
150
|
-
}
|
|
151
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapLevelGraphRenderer/types.ts"],"names":[],"mappings":"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"}
|