@visualli/core 0.1.7 → 0.2.1
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/README.md +37 -105
- package/dist/chunk-25AJTPMS.js +68 -0
- package/dist/chunk-25AJTPMS.js.map +1 -0
- package/dist/chunk-64PUANNH.js +151 -0
- package/dist/chunk-64PUANNH.js.map +1 -0
- package/dist/chunk-ITDZ72JE.js +96 -0
- package/dist/chunk-ITDZ72JE.js.map +1 -0
- package/dist/{chunk-PDP5CVUL.js → chunk-LOQLNYB3.js} +2 -2
- package/dist/chunk-N7HCYULH.js +12 -0
- package/dist/chunk-N7HCYULH.js.map +1 -0
- package/dist/{chunk-I75TMOE4.js → chunk-P6PKWVYF.js} +2 -2
- package/dist/chunk-RFMUATWB.js +753 -0
- package/dist/chunk-RFMUATWB.js.map +1 -0
- package/dist/chunk-UAMEJG2C.js +267 -0
- package/dist/chunk-UAMEJG2C.js.map +1 -0
- package/dist/{chunk-LJYSKSCE.js → chunk-W2CAOOJJ.js} +6 -6
- package/dist/chunk-W2CAOOJJ.js.map +1 -0
- package/dist/{chunk-6NXADJK2.js → chunk-WO4JAAKP.js} +84 -117
- package/dist/chunk-WO4JAAKP.js.map +1 -0
- package/dist/config/index.cjs +250 -349
- package/dist/config/index.cjs.map +1 -1
- package/dist/config/index.d.cts +107 -66
- package/dist/config/index.d.ts +107 -66
- package/dist/config/index.js +52 -34
- package/dist/constants/index.cjs +14 -333
- package/dist/constants/index.cjs.map +1 -1
- package/dist/constants/index.d.cts +5 -243
- package/dist/constants/index.d.ts +5 -243
- package/dist/constants/index.js +5 -75
- package/dist/designSystem-D49xVfr8.d.cts +150 -0
- package/dist/designSystem-D49xVfr8.d.ts +150 -0
- package/dist/document-BFBwn93X.d.ts +26 -0
- package/dist/document-MEJEfxl3.d.cts +26 -0
- package/dist/ideaSize-BTJu6thN.d.cts +11 -0
- package/dist/ideaSize-RKbms8K6.d.ts +11 -0
- package/dist/index-CcF0Jvmb.d.ts +99 -0
- package/dist/index-Dt--T2l8.d.cts +99 -0
- package/dist/index.cjs +1636 -961
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +350 -27
- package/dist/index.d.ts +350 -27
- package/dist/index.js +434 -179
- package/dist/index.js.map +1 -1
- package/dist/{document-B3hnNr-F.d.cts → layer-B2A3Ki48.d.cts} +2 -16
- package/dist/{document-B3hnNr-F.d.ts → layer-B2A3Ki48.d.ts} +2 -16
- package/dist/layout/index.d.cts +2 -1
- package/dist/layout/index.d.ts +2 -1
- package/dist/mindmap-BO3YD5qu.d.cts +182 -0
- package/dist/mindmap-D0Of0jaZ.d.ts +182 -0
- package/dist/parser/index.cjs +745 -179
- package/dist/parser/index.cjs.map +1 -1
- package/dist/parser/index.d.cts +23 -8
- package/dist/parser/index.d.ts +23 -8
- package/dist/parser/index.js +7 -2
- package/dist/performance/index.cjs +13 -0
- package/dist/performance/index.cjs.map +1 -1
- package/dist/performance/index.js +2 -2
- package/dist/theme/index.cjs +884 -0
- package/dist/theme/index.cjs.map +1 -0
- package/dist/theme/index.d.cts +2 -0
- package/dist/theme/index.d.ts +2 -0
- package/dist/theme/index.js +53 -0
- package/dist/types/index.d.cts +4 -2
- package/dist/types/index.d.ts +4 -2
- package/dist/viewport/index.cjs +17 -6
- package/dist/viewport/index.cjs.map +1 -1
- package/dist/viewport/index.d.cts +6 -4
- package/dist/viewport/index.d.ts +6 -4
- package/dist/viewport/index.js +2 -2
- package/licenses/visualli-design-system/LICENSE +9 -0
- package/licenses/visualli-design-system/NOTICE.md +6 -0
- package/package.json +12 -4
- package/src/config/README.md +2 -4
- package/src/config/USAGE_EXAMPLES.md +0 -4
- package/src/config/index.ts +3 -4
- package/src/constants/index.ts +1 -1
- package/src/constants/layout.ts +11 -0
- package/src/constants/performanceConstants.ts +8 -27
- package/src/generated/README.md +12 -0
- package/src/generated/designSystem.ts +758 -0
- package/src/generated/geometry/blob.ts +99 -0
- package/src/generated/geometry/blobShapes.ts +4 -0
- package/src/generated/geometry/color.ts +37 -0
- package/src/generated/geometry/container.ts +84 -0
- package/src/generated/geometry/detail.ts +22 -0
- package/src/generated/geometry/idea.ts +56 -0
- package/src/generated/geometry/interaction.ts +122 -0
- package/src/generated/geometry/motion.ts +140 -0
- package/src/index.ts +18 -1
- package/src/parser/configUtils.ts +12 -19
- package/src/parser/visualliConverter.ts +71 -112
- package/src/parser/visualliParser.ts +16 -1
- package/src/rendering/culling.ts +16 -12
- package/src/rendering/ideaSize.ts +21 -0
- package/src/rendering/nodeGeometry.ts +97 -0
- package/src/theme/index.ts +136 -0
- package/src/types/document.ts +9 -0
- package/src/types/layer.ts +1 -1
- package/src/types/mindmap.ts +13 -0
- package/src/utils/navigation.ts +33 -63
- package/src/viewport/viewportUtils.ts +6 -4
- package/dist/animations/index.cjs +0 -146
- package/dist/animations/index.cjs.map +0 -1
- package/dist/animations/index.d.cts +0 -81
- package/dist/animations/index.d.ts +0 -81
- package/dist/animations/index.js +0 -35
- package/dist/chunk-6NXADJK2.js.map +0 -1
- package/dist/chunk-F36SMC3K.js +0 -106
- package/dist/chunk-F36SMC3K.js.map +0 -1
- package/dist/chunk-G5H3P4YZ.js +0 -273
- package/dist/chunk-G5H3P4YZ.js.map +0 -1
- package/dist/chunk-LDJRGT2Q.js +0 -163
- package/dist/chunk-LDJRGT2Q.js.map +0 -1
- package/dist/chunk-LJYSKSCE.js.map +0 -1
- package/dist/chunk-LNTJTDB2.js +0 -349
- package/dist/chunk-LNTJTDB2.js.map +0 -1
- package/dist/mindmap-DWS0WZT_.d.cts +0 -118
- package/dist/mindmap-DWS0WZT_.d.ts +0 -118
- package/src/animations/constants.ts +0 -72
- package/src/animations/easing.ts +0 -70
- package/src/animations/index.ts +0 -2
- package/src/config/blobShapes.ts +0 -146
- package/src/config/textScaling.ts +0 -54
- package/src/constants/design.ts +0 -281
- /package/dist/{chunk-PDP5CVUL.js.map → chunk-LOQLNYB3.js.map} +0 -0
- /package/dist/{chunk-I75TMOE4.js.map → chunk-P6PKWVYF.js.map} +0 -0
- /package/dist/{animations → theme}/index.js.map +0 -0
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
interface MindMapNode {
|
|
2
|
-
id: string;
|
|
3
|
-
title: string;
|
|
4
|
-
level: number;
|
|
5
|
-
x: number;
|
|
6
|
-
y: number;
|
|
7
|
-
children?: MindMapNode[];
|
|
8
|
-
parent?: string;
|
|
9
|
-
color?: string;
|
|
10
|
-
relationshipLabel?: string;
|
|
11
|
-
}
|
|
12
|
-
/** Flat structure for performance-optimised storage (10K+ nodes). */
|
|
13
|
-
interface FlatNode {
|
|
14
|
-
id: string;
|
|
15
|
-
parentId: string | null;
|
|
16
|
-
/** IDs of child nodes for quick tree traversal */
|
|
17
|
-
childrenIds?: string[];
|
|
18
|
-
x: number;
|
|
19
|
-
y: number;
|
|
20
|
-
/** Alternative position format for compatibility */
|
|
21
|
-
position?: {
|
|
22
|
-
x: number;
|
|
23
|
-
y: number;
|
|
24
|
-
};
|
|
25
|
-
/** Depth in tree hierarchy */
|
|
26
|
-
level: number;
|
|
27
|
-
title: string;
|
|
28
|
-
description?: string;
|
|
29
|
-
/** Label describing relationship to parent */
|
|
30
|
-
relationshipLabel?: string;
|
|
31
|
-
color: string;
|
|
32
|
-
width: number;
|
|
33
|
-
height: number;
|
|
34
|
-
/** Whether this node's children are visible */
|
|
35
|
-
isExpanded?: boolean;
|
|
36
|
-
branchCount?: number;
|
|
37
|
-
createdAt: Date;
|
|
38
|
-
updatedAt: Date;
|
|
39
|
-
}
|
|
40
|
-
/** Map-based node storage for O(1) lookups. */
|
|
41
|
-
type NodeMap = Map<string, FlatNode>;
|
|
42
|
-
/** Spatial bounds for RBush indexing. */
|
|
43
|
-
interface SpatialBounds {
|
|
44
|
-
minX: number;
|
|
45
|
-
minY: number;
|
|
46
|
-
maxX: number;
|
|
47
|
-
maxY: number;
|
|
48
|
-
nodeId: string;
|
|
49
|
-
}
|
|
50
|
-
/** Viewport state for camera position and zoom. */
|
|
51
|
-
interface ViewportState {
|
|
52
|
-
centerX: number;
|
|
53
|
-
centerY: number;
|
|
54
|
-
zoomLevel: number;
|
|
55
|
-
rotation: number;
|
|
56
|
-
visibleBounds: {
|
|
57
|
-
minX: number;
|
|
58
|
-
minY: number;
|
|
59
|
-
maxX: number;
|
|
60
|
-
maxY: number;
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
/** Single-selection node state. */
|
|
64
|
-
interface NodeSelection {
|
|
65
|
-
selectedId: string | null;
|
|
66
|
-
}
|
|
67
|
-
/** Render configuration flags. */
|
|
68
|
-
interface RenderConfig {
|
|
69
|
-
renderMode: 'canvas' | 'simplified';
|
|
70
|
-
qualityLevel: 'high' | 'medium' | 'low';
|
|
71
|
-
cullingEnabled: boolean;
|
|
72
|
-
fpsTarget: number;
|
|
73
|
-
memoryLimit: number;
|
|
74
|
-
}
|
|
75
|
-
interface MindMapData {
|
|
76
|
-
nodes: MindMapNode[];
|
|
77
|
-
connections: MindMapConnection[];
|
|
78
|
-
}
|
|
79
|
-
/** Simplified connection type for mindmap rendering (not to be confused with schema Connection) */
|
|
80
|
-
interface MindMapConnection {
|
|
81
|
-
from: string;
|
|
82
|
-
to: string;
|
|
83
|
-
level: number;
|
|
84
|
-
label?: string;
|
|
85
|
-
}
|
|
86
|
-
interface TopLevelConnection {
|
|
87
|
-
from: string;
|
|
88
|
-
to: string;
|
|
89
|
-
label: string;
|
|
90
|
-
}
|
|
91
|
-
/** Complete mindmap configuration schema. */
|
|
92
|
-
interface MindMapConfig {
|
|
93
|
-
metadata: {
|
|
94
|
-
id?: string;
|
|
95
|
-
title: string;
|
|
96
|
-
description?: string;
|
|
97
|
-
version: string;
|
|
98
|
-
created: string;
|
|
99
|
-
lastModified: string;
|
|
100
|
-
};
|
|
101
|
-
nodes: MindMapNode[];
|
|
102
|
-
topLevelConnections: TopLevelConnection[];
|
|
103
|
-
settings?: {
|
|
104
|
-
defaultColors?: {
|
|
105
|
-
level0: string;
|
|
106
|
-
level1: string;
|
|
107
|
-
level2: string;
|
|
108
|
-
level3: string;
|
|
109
|
-
[key: `level${number}`]: string;
|
|
110
|
-
};
|
|
111
|
-
layout?: {
|
|
112
|
-
nodeSpacing: number;
|
|
113
|
-
levelSpacing: number;
|
|
114
|
-
};
|
|
115
|
-
};
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
export type { FlatNode as F, MindMapConnection as M, NodeSelection as N, RenderConfig as R, SpatialBounds as S, TopLevelConnection as T, ViewportState as V, MindMapConfig as a, MindMapData as b, MindMapNode as c, NodeMap as d };
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
interface MindMapNode {
|
|
2
|
-
id: string;
|
|
3
|
-
title: string;
|
|
4
|
-
level: number;
|
|
5
|
-
x: number;
|
|
6
|
-
y: number;
|
|
7
|
-
children?: MindMapNode[];
|
|
8
|
-
parent?: string;
|
|
9
|
-
color?: string;
|
|
10
|
-
relationshipLabel?: string;
|
|
11
|
-
}
|
|
12
|
-
/** Flat structure for performance-optimised storage (10K+ nodes). */
|
|
13
|
-
interface FlatNode {
|
|
14
|
-
id: string;
|
|
15
|
-
parentId: string | null;
|
|
16
|
-
/** IDs of child nodes for quick tree traversal */
|
|
17
|
-
childrenIds?: string[];
|
|
18
|
-
x: number;
|
|
19
|
-
y: number;
|
|
20
|
-
/** Alternative position format for compatibility */
|
|
21
|
-
position?: {
|
|
22
|
-
x: number;
|
|
23
|
-
y: number;
|
|
24
|
-
};
|
|
25
|
-
/** Depth in tree hierarchy */
|
|
26
|
-
level: number;
|
|
27
|
-
title: string;
|
|
28
|
-
description?: string;
|
|
29
|
-
/** Label describing relationship to parent */
|
|
30
|
-
relationshipLabel?: string;
|
|
31
|
-
color: string;
|
|
32
|
-
width: number;
|
|
33
|
-
height: number;
|
|
34
|
-
/** Whether this node's children are visible */
|
|
35
|
-
isExpanded?: boolean;
|
|
36
|
-
branchCount?: number;
|
|
37
|
-
createdAt: Date;
|
|
38
|
-
updatedAt: Date;
|
|
39
|
-
}
|
|
40
|
-
/** Map-based node storage for O(1) lookups. */
|
|
41
|
-
type NodeMap = Map<string, FlatNode>;
|
|
42
|
-
/** Spatial bounds for RBush indexing. */
|
|
43
|
-
interface SpatialBounds {
|
|
44
|
-
minX: number;
|
|
45
|
-
minY: number;
|
|
46
|
-
maxX: number;
|
|
47
|
-
maxY: number;
|
|
48
|
-
nodeId: string;
|
|
49
|
-
}
|
|
50
|
-
/** Viewport state for camera position and zoom. */
|
|
51
|
-
interface ViewportState {
|
|
52
|
-
centerX: number;
|
|
53
|
-
centerY: number;
|
|
54
|
-
zoomLevel: number;
|
|
55
|
-
rotation: number;
|
|
56
|
-
visibleBounds: {
|
|
57
|
-
minX: number;
|
|
58
|
-
minY: number;
|
|
59
|
-
maxX: number;
|
|
60
|
-
maxY: number;
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
/** Single-selection node state. */
|
|
64
|
-
interface NodeSelection {
|
|
65
|
-
selectedId: string | null;
|
|
66
|
-
}
|
|
67
|
-
/** Render configuration flags. */
|
|
68
|
-
interface RenderConfig {
|
|
69
|
-
renderMode: 'canvas' | 'simplified';
|
|
70
|
-
qualityLevel: 'high' | 'medium' | 'low';
|
|
71
|
-
cullingEnabled: boolean;
|
|
72
|
-
fpsTarget: number;
|
|
73
|
-
memoryLimit: number;
|
|
74
|
-
}
|
|
75
|
-
interface MindMapData {
|
|
76
|
-
nodes: MindMapNode[];
|
|
77
|
-
connections: MindMapConnection[];
|
|
78
|
-
}
|
|
79
|
-
/** Simplified connection type for mindmap rendering (not to be confused with schema Connection) */
|
|
80
|
-
interface MindMapConnection {
|
|
81
|
-
from: string;
|
|
82
|
-
to: string;
|
|
83
|
-
level: number;
|
|
84
|
-
label?: string;
|
|
85
|
-
}
|
|
86
|
-
interface TopLevelConnection {
|
|
87
|
-
from: string;
|
|
88
|
-
to: string;
|
|
89
|
-
label: string;
|
|
90
|
-
}
|
|
91
|
-
/** Complete mindmap configuration schema. */
|
|
92
|
-
interface MindMapConfig {
|
|
93
|
-
metadata: {
|
|
94
|
-
id?: string;
|
|
95
|
-
title: string;
|
|
96
|
-
description?: string;
|
|
97
|
-
version: string;
|
|
98
|
-
created: string;
|
|
99
|
-
lastModified: string;
|
|
100
|
-
};
|
|
101
|
-
nodes: MindMapNode[];
|
|
102
|
-
topLevelConnections: TopLevelConnection[];
|
|
103
|
-
settings?: {
|
|
104
|
-
defaultColors?: {
|
|
105
|
-
level0: string;
|
|
106
|
-
level1: string;
|
|
107
|
-
level2: string;
|
|
108
|
-
level3: string;
|
|
109
|
-
[key: `level${number}`]: string;
|
|
110
|
-
};
|
|
111
|
-
layout?: {
|
|
112
|
-
nodeSpacing: number;
|
|
113
|
-
levelSpacing: number;
|
|
114
|
-
};
|
|
115
|
-
};
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
export type { FlatNode as F, MindMapConnection as M, NodeSelection as N, RenderConfig as R, SpatialBounds as S, TopLevelConnection as T, ViewportState as V, MindMapConfig as a, MindMapData as b, MindMapNode as c, NodeMap as d };
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
// ─── Animation Constants ──────────────────────────────────────────────────────
|
|
2
|
-
|
|
3
|
-
// ── Timing (ms) ───────────────────────────────────────────────────────────────
|
|
4
|
-
|
|
5
|
-
export const ANIMATION_DURATION = {
|
|
6
|
-
ZOOM_IN_LAYER: 500,
|
|
7
|
-
ZOOM_OUT_LAYER: 500,
|
|
8
|
-
ZOOM_GESTURE: 500,
|
|
9
|
-
FADE_OUT: 200,
|
|
10
|
-
FADE_IN: 250,
|
|
11
|
-
COLOR_TRANSITION: 500,
|
|
12
|
-
CURSOR_CHANGE: 150,
|
|
13
|
-
LOADING_FADE: 200,
|
|
14
|
-
} as const;
|
|
15
|
-
|
|
16
|
-
export const ANIMATION_PHASES = {
|
|
17
|
-
ZOOM_IN: {
|
|
18
|
-
ZOOM_TO_TARGET: 500,
|
|
19
|
-
FADE_OUT_START: 120,
|
|
20
|
-
FADE_OUT: 280,
|
|
21
|
-
CONTENT_SWAP: 310,
|
|
22
|
-
FADE_IN: 200,
|
|
23
|
-
TOTAL: 510,
|
|
24
|
-
},
|
|
25
|
-
ZOOM_OUT: {
|
|
26
|
-
FADE_OUT: 200,
|
|
27
|
-
ZOOM_BACK: 50,
|
|
28
|
-
FADE_IN: 250,
|
|
29
|
-
TOTAL: 500,
|
|
30
|
-
},
|
|
31
|
-
} as const;
|
|
32
|
-
|
|
33
|
-
// ── Zoom Thresholds ───────────────────────────────────────────────────────────
|
|
34
|
-
|
|
35
|
-
export const ZOOM_THRESHOLDS = {
|
|
36
|
-
ENTER_LAYER: 5.0,
|
|
37
|
-
EXIT_LAYER: 0.5,
|
|
38
|
-
GESTURE_TRIGGER: 0.8,
|
|
39
|
-
} as const;
|
|
40
|
-
|
|
41
|
-
// ── Cooldowns (ms) ────────────────────────────────────────────────────────────
|
|
42
|
-
|
|
43
|
-
export const COOLDOWN = {
|
|
44
|
-
NAVIGATION: 1000,
|
|
45
|
-
ZOOM_GESTURE: 800,
|
|
46
|
-
DOUBLE_CLICK: 200,
|
|
47
|
-
} as const;
|
|
48
|
-
|
|
49
|
-
// ── Opacity ───────────────────────────────────────────────────────────────────
|
|
50
|
-
|
|
51
|
-
export const OPACITY = {
|
|
52
|
-
VISIBLE: 1.0,
|
|
53
|
-
HIDDEN: 0.0,
|
|
54
|
-
TRANSITIONING: 0.3,
|
|
55
|
-
} as const;
|
|
56
|
-
|
|
57
|
-
// ── Target Zoom Levels ────────────────────────────────────────────────────────
|
|
58
|
-
|
|
59
|
-
export const TARGET_ZOOM = {
|
|
60
|
-
NORMAL: 1.0,
|
|
61
|
-
FOCUSED: 0.8,
|
|
62
|
-
FILL_NODE: 3.0,
|
|
63
|
-
DETAIL: 2.0,
|
|
64
|
-
} as const;
|
|
65
|
-
|
|
66
|
-
// ── Viewport Framing ──────────────────────────────────────────────────────────
|
|
67
|
-
|
|
68
|
-
export const VIEWPORT_FRAMING = {
|
|
69
|
-
NODE_FILL_RATIO: 0.7,
|
|
70
|
-
EXIT_NODE_SIZE: 0.4,
|
|
71
|
-
PADDING_RATIO: 0.1,
|
|
72
|
-
} as const;
|
package/src/animations/easing.ts
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
// ─── Animation Easing Functions ───────────────────────────────────────────────
|
|
2
|
-
//
|
|
3
|
-
// Pure math easing functions for smooth, cinematic animations.
|
|
4
|
-
// No DOM / RAF dependencies – usable in any runtime.
|
|
5
|
-
|
|
6
|
-
export type EasingFunction = (t: number) => number;
|
|
7
|
-
|
|
8
|
-
/** Smooth cubic – slow start, fast middle, slow end. */
|
|
9
|
-
export const easeInOutCubic: EasingFunction = (t) =>
|
|
10
|
-
t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
|
11
|
-
|
|
12
|
-
/** Smooth quartic – more dramatic than cubic. */
|
|
13
|
-
export const easeInOutQuart: EasingFunction = (t) =>
|
|
14
|
-
t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2;
|
|
15
|
-
|
|
16
|
-
/** Fast start, slow end. */
|
|
17
|
-
export const easeOutCubic: EasingFunction = (t) => 1 - Math.pow(1 - t, 3);
|
|
18
|
-
|
|
19
|
-
/** Slow start, fast end. */
|
|
20
|
-
export const easeInCubic: EasingFunction = (t) => t * t * t;
|
|
21
|
-
|
|
22
|
-
/** Gentle ease-out (quadratic). */
|
|
23
|
-
export const easeOutQuad: EasingFunction = (t) => 1 - (1 - t) * (1 - t);
|
|
24
|
-
|
|
25
|
-
/** Very smooth, organic sine easing. */
|
|
26
|
-
export const easeInOutSine: EasingFunction = (t) =>
|
|
27
|
-
-(Math.cos(Math.PI * t) - 1) / 2;
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* Create a CSS cubic-bezier easing function from four control-point values.
|
|
31
|
-
*
|
|
32
|
-
* Builds a 256-entry lookup table at call time (once) so subsequent evaluations
|
|
33
|
-
* are a single table lookup + linear interpolation.
|
|
34
|
-
*/
|
|
35
|
-
export function createCubicBezier(
|
|
36
|
-
x1: number, y1: number,
|
|
37
|
-
x2: number, y2: number,
|
|
38
|
-
): EasingFunction {
|
|
39
|
-
const N = 256;
|
|
40
|
-
const lut = new Float64Array(N + 1);
|
|
41
|
-
|
|
42
|
-
for (let i = 0; i <= N; i++) {
|
|
43
|
-
const target = i / N;
|
|
44
|
-
let lo = 0, hi = 1;
|
|
45
|
-
for (let j = 0; j < 20; j++) {
|
|
46
|
-
const mid = (lo + hi) / 2;
|
|
47
|
-
const om = 1 - mid;
|
|
48
|
-
const x = 3 * om * om * mid * x1 + 3 * om * mid * mid * x2 + mid * mid * mid;
|
|
49
|
-
if (x < target) lo = mid; else hi = mid;
|
|
50
|
-
}
|
|
51
|
-
const u = (lo + hi) / 2;
|
|
52
|
-
const ou = 1 - u;
|
|
53
|
-
lut[i] = 3 * ou * ou * u * y1 + 3 * ou * u * u * y2 + u * u * u;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
return (t: number): number => {
|
|
57
|
-
if (t <= 0) return 0;
|
|
58
|
-
if (t >= 1) return 1;
|
|
59
|
-
const s = t * N;
|
|
60
|
-
const i = s | 0;
|
|
61
|
-
return lut[i] + (lut[i + 1] - lut[i]) * (s - i);
|
|
62
|
-
};
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* Zoom-transition easing — matches CSS cubic-bezier(0.2, 0.8, 0.2, 1).
|
|
67
|
-
* Fast start with smooth, organic settle. Used for all layer transitions.
|
|
68
|
-
* Pre-computed LUT: subsequent calls are a single table lookup + linear interpolation.
|
|
69
|
-
*/
|
|
70
|
-
export const easeZoomTransition: EasingFunction = createCubicBezier(0.2, 0.8, 0.2, 1);
|
package/src/animations/index.ts
DELETED
package/src/config/blobShapes.ts
DELETED
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
export interface BlobPoint { x: number; y: number }
|
|
2
|
-
export type BlobShape = BlobPoint[];
|
|
3
|
-
|
|
4
|
-
// ── Blob Layer Config ─────────────────────────────────────────────────────────
|
|
5
|
-
|
|
6
|
-
export const BLOB_LAYER_CONFIG = [
|
|
7
|
-
{ opacity: 0.3, rotation: -15, scaleUp: 1.30, strokeWidth: 3, dash: [6, 4] }, // Layer #3 (outermost)
|
|
8
|
-
{ opacity: 0.4, rotation: -10, scaleUp: 1.20, strokeWidth: 1, dash: undefined }, // Layer #2
|
|
9
|
-
{ opacity: 0.5, rotation: -5, scaleUp: 1.10, strokeWidth: 2, dash: undefined }, // Layer #1
|
|
10
|
-
] as const;
|
|
11
|
-
|
|
12
|
-
export const NODE_LAYER_CONFIG = { opacity: 1, rotation: 0, strokeWidth: 3 } as const;
|
|
13
|
-
|
|
14
|
-
// ── Blob Shapes ───────────────────────────────────────────────────────────────
|
|
15
|
-
|
|
16
|
-
export const ALL_BLOB_SHAPES: ReadonlyArray<BlobShape> = [
|
|
17
|
-
// Shape 0 · Blob 1
|
|
18
|
-
[
|
|
19
|
-
{ x: 1.12, y: 0 }, { x: 0.86, y: 0.56 }, { x: 0.46, y: 0.94 }, { x: -0.08, y: 1.06 },
|
|
20
|
-
{ x: -0.68, y: 0.82 }, { x: -0.96, y: 0.08 }, { x: -0.55, y: -0.82 }, { x: 0.04, y: -1.02 },
|
|
21
|
-
{ x: 0.72, y: -0.8 }, { x: 1.08, y: -0.38 },
|
|
22
|
-
],
|
|
23
|
-
// Shape 1 · Blob 2
|
|
24
|
-
[
|
|
25
|
-
{ x: -0.489, y: -0.625 }, { x: -0.384, y: -0.716 }, { x: -0.285, y: -0.792 }, { x: -0.189, y: -0.855 },
|
|
26
|
-
{ x: -0.090, y: -0.903 }, { x: 0.014, y: -0.932 }, { x: 0.129, y: -0.940 }, { x: 0.255, y: -0.924 },
|
|
27
|
-
{ x: 0.412, y: -0.876 }, { x: 0.516, y: -0.832 }, { x: 0.612, y: -0.780 }, { x: 0.695, y: -0.725 },
|
|
28
|
-
{ x: 0.767, y: -0.666 }, { x: 0.830, y: -0.606 }, { x: 0.885, y: -0.546 }, { x: 0.933, y: -0.486 },
|
|
29
|
-
{ x: 0.979, y: -0.425 }, { x: 1.006, y: -0.385 }, { x: 1.034, y: -0.334 }, { x: 1.058, y: -0.276 },
|
|
30
|
-
{ x: 1.078, y: -0.209 }, { x: 1.092, y: -0.133 }, { x: 1.101, y: -0.046 }, { x: 1.102, y: 0.052 },
|
|
31
|
-
{ x: 1.094, y: 0.173 }, { x: 1.083, y: 0.244 }, { x: 1.063, y: 0.324 }, { x: 1.034, y: 0.401 },
|
|
32
|
-
{ x: 0.996, y: 0.477 }, { x: 0.948, y: 0.549 }, { x: 0.889, y: 0.617 }, { x: 0.820, y: 0.681 },
|
|
33
|
-
{ x: 0.735, y: 0.741 }, { x: 0.658, y: 0.783 }, { x: 0.569, y: 0.822 }, { x: 0.474, y: 0.855 },
|
|
34
|
-
{ x: 0.372, y: 0.882 }, { x: 0.265, y: 0.904 }, { x: 0.156, y: 0.920 }, { x: 0.046, y: 0.931 },
|
|
35
|
-
{ x: -0.069, y: 0.938 }, { x: -0.155, y: 0.935 }, { x: -0.250, y: 0.919 }, { x: -0.346, y: 0.890 },
|
|
36
|
-
{ x: -0.443, y: 0.851 }, { x: -0.539, y: 0.800 }, { x: -0.633, y: 0.738 }, { x: -0.723, y: 0.667 },
|
|
37
|
-
{ x: -0.808, y: 0.585 }, { x: -0.882, y: 0.501 }, { x: -0.944, y: 0.421 }, { x: -0.994, y: 0.343 },
|
|
38
|
-
{ x: -1.034, y: 0.267 }, { x: -1.064, y: 0.192 }, { x: -1.085, y: 0.120 }, { x: -1.097, y: 0.042 },
|
|
39
|
-
{ x: -1.102, y: 0.001 }, { x: -1.090, y: -0.243 }, { x: -1.050, y: -0.365 }, { x: -0.990, y: -0.441 },
|
|
40
|
-
{ x: -0.911, y: -0.479 }, { x: -0.819, y: -0.499 }, { x: -0.715, y: -0.517 }, { x: -0.605, y: -0.551 },
|
|
41
|
-
],
|
|
42
|
-
// Shape 2 · Blob 3
|
|
43
|
-
[
|
|
44
|
-
{ x: 0.003, y: -0.970 }, { x: 0.163, y: -0.984 }, { x: 0.286, y: -1.028 }, { x: 0.389, y: -1.096 },
|
|
45
|
-
{ x: 0.488, y: -1.174 }, { x: 0.597, y: -1.210 }, { x: 0.728, y: -1.165 }, { x: 0.867, y: -1.036 },
|
|
46
|
-
{ x: 0.996, y: -0.839 }, { x: 1.098, y: -0.590 }, { x: 1.158, y: -0.304 }, { x: 1.153, y: 0.012 },
|
|
47
|
-
{ x: 1.080, y: 0.336 }, { x: 0.944, y: 0.639 }, { x: 0.756, y: 0.889 }, { x: 0.484, y: 1.072 },
|
|
48
|
-
{ x: 0.339, y: 1.079 }, { x: 0.219, y: 1.051 }, { x: 0.131, y: 0.994 }, { x: 0.059, y: 0.939 },
|
|
49
|
-
{ x: 0.008, y: 0.915 }, { x: -0.105, y: 0.931 }, { x: -0.176, y: 0.965 }, { x: -0.249, y: 1.005 },
|
|
50
|
-
{ x: -0.345, y: 1.039 }, { x: -0.497, y: 1.055 }, { x: -0.672, y: 1.032 }, { x: -0.817, y: 0.952 },
|
|
51
|
-
{ x: -0.945, y: 0.810 }, { x: -1.054, y: 0.600 }, { x: -1.160, y: 0.302 }, { x: -1.187, y: -0.011 },
|
|
52
|
-
{ x: -1.165, y: -0.326 }, { x: -1.097, y: -0.599 }, { x: -0.991, y: -0.838 }, { x: -0.852, y: -0.912 },
|
|
53
|
-
{ x: -0.695, y: -0.958 }, { x: -0.530, y: -0.988 }, { x: -0.357, y: -0.992 }, { x: -0.180, y: -0.983 },
|
|
54
|
-
],
|
|
55
|
-
// Shape 3 · Blob 4
|
|
56
|
-
[
|
|
57
|
-
{ x: -0.734, y: -1.127 }, { x: -0.656, y: -1.146 }, { x: -0.567, y: -1.142 }, { x: -0.468, y: -1.115 },
|
|
58
|
-
{ x: -0.358, y: -1.079 }, { x: -0.238, y: -1.034 }, { x: -0.107, y: -0.989 }, { x: 0.035, y: -0.953 },
|
|
59
|
-
{ x: 0.188, y: -0.929 }, { x: 0.325, y: -0.916 }, { x: 0.484, y: -0.896 }, { x: 0.650, y: -0.854 },
|
|
60
|
-
{ x: 0.811, y: -0.770 }, { x: 0.955, y: -0.631 }, { x: 1.068, y: -0.422 }, { x: 1.138, y: -0.126 },
|
|
61
|
-
{ x: 1.152, y: 0.272 }, { x: 1.121, y: 0.451 }, { x: 1.046, y: 0.602 }, { x: 0.928, y: 0.727 },
|
|
62
|
-
{ x: 0.767, y: 0.833 }, { x: 0.565, y: 0.925 }, { x: 0.323, y: 1.001 }, { x: 0.042, y: 1.075 },
|
|
63
|
-
{ x: -0.277, y: 1.142 }, { x: -0.368, y: 1.147 }, { x: -0.475, y: 1.136 }, { x: -0.589, y: 1.104 },
|
|
64
|
-
{ x: -0.704, y: 1.050 }, { x: -0.815, y: 0.973 }, { x: -0.913, y: 0.871 }, { x: -0.993, y: 0.746 },
|
|
65
|
-
{ x: -1.048, y: 0.593 }, { x: -1.109, y: 0.298 }, { x: -1.145, y: 0.018 }, { x: -1.154, y: -0.243 },
|
|
66
|
-
{ x: -1.135, y: -0.482 }, { x: -1.085, y: -0.695 }, { x: -1.003, y: -0.874 }, { x: -0.886, y: -1.020 },
|
|
67
|
-
],
|
|
68
|
-
// Shape 4 · Blob 5
|
|
69
|
-
[
|
|
70
|
-
{ x: -0.734, y: 1.127 }, { x: -0.656, y: 1.146 }, { x: -0.567, y: 1.142 }, { x: -0.468, y: 1.115 },
|
|
71
|
-
{ x: -0.358, y: 1.079 }, { x: -0.238, y: 1.034 }, { x: -0.107, y: 0.989 }, { x: 0.035, y: 0.953 },
|
|
72
|
-
{ x: 0.188, y: 0.929 }, { x: 0.325, y: 0.916 }, { x: 0.484, y: 0.896 }, { x: 0.650, y: 0.854 },
|
|
73
|
-
{ x: 0.811, y: 0.770 }, { x: 0.955, y: 0.631 }, { x: 1.068, y: 0.422 }, { x: 1.138, y: 0.126 },
|
|
74
|
-
{ x: 1.152, y: -0.272 }, { x: 1.121, y: -0.451 }, { x: 1.046, y: -0.602 }, { x: 0.928, y: -0.727 },
|
|
75
|
-
{ x: 0.767, y: -0.833 }, { x: 0.565, y: -0.925 }, { x: 0.323, y: -1.001 }, { x: 0.042, y: -1.075 },
|
|
76
|
-
{ x: -0.277, y: -1.142 }, { x: -0.368, y: -1.147 }, { x: -0.475, y: -1.136 }, { x: -0.589, y: -1.104 },
|
|
77
|
-
{ x: -0.704, y: -1.050 }, { x: -0.815, y: -0.973 }, { x: -0.913, y: -0.871 }, { x: -0.993, y: -0.746 },
|
|
78
|
-
{ x: -1.048, y: -0.593 }, { x: -1.109, y: -0.298 }, { x: -1.145, y: -0.018 }, { x: -1.154, y: 0.243 },
|
|
79
|
-
{ x: -1.135, y: 0.482 }, { x: -1.085, y: 0.695 }, { x: -1.003, y: 0.874 }, { x: -0.886, y: 1.020 },
|
|
80
|
-
],
|
|
81
|
-
// Shape 5 · Blob 6
|
|
82
|
-
[
|
|
83
|
-
{ x: 0.001, y: -1.006 }, { x: 0.134, y: -1.001 }, { x: 0.262, y: -1.024 },
|
|
84
|
-
{ x: 0.382, y: -1.073 }, { x: 0.498, y: -1.107 }, { x: 0.614, y: -1.105 },
|
|
85
|
-
{ x: 0.733, y: -1.049 }, { x: 0.850, y: -0.932 }, { x: 0.953, y: -0.755 },
|
|
86
|
-
{ x: 1.030, y: -0.529 }, { x: 1.067, y: -0.265 }, { x: 1.054, y: 0.018 },
|
|
87
|
-
{ x: 0.986, y: 0.300 }, { x: 0.868, y: 0.557 }, { x: 0.715, y: 0.766 },
|
|
88
|
-
{ x: 0.550, y: 0.909 }, { x: 0.396, y: 0.984 }, { x: 0.262, y: 1.005 },
|
|
89
|
-
{ x: 0.148, y: 1.003 }, { x: 0.037, y: 1.008 }, { x: -0.083, y: 1.040 },
|
|
90
|
-
{ x: -0.220, y: 1.118 }, { x: -0.360, y: 1.192 }, { x: -0.500, y: 1.234 },
|
|
91
|
-
{ x: -0.650, y: 1.175 }, { x: -0.810, y: 1.045 }, { x: -0.990, y: 0.855 },
|
|
92
|
-
{ x: -1.140, y: 0.610 }, { x: -1.240, y: 0.330 }, { x: -1.270, y: 0.040 },
|
|
93
|
-
{ x: -1.275, y: -0.250 }, { x: -1.225, y: -0.500 }, { x: -1.080, y: -0.720 },
|
|
94
|
-
{ x: -0.890, y: -0.920 }, { x: -0.734, y: -1.053 }, { x: -0.614, y: -1.112 },
|
|
95
|
-
{ x: -0.498, y: -1.127 }, { x: -0.381, y: -1.110 }, { x: -0.261, y: -1.095 },
|
|
96
|
-
{ x: -0.133, y: -1.058 }, { x: 0.001, y: -1.010 }, { x: 0.134, y: -1.001 },
|
|
97
|
-
],
|
|
98
|
-
];
|
|
99
|
-
|
|
100
|
-
export const ACTIVE_BLOB_TYPES: ReadonlyArray<number> = [0, 1, 2, 3, 4, 5];
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
* Per-shape text x-offset as a fraction of baseRadiusX.
|
|
104
|
-
* Compensates for visually asymmetric blobs. Positive = right, negative = left.
|
|
105
|
-
*/
|
|
106
|
-
export const BLOB_TEXT_OFFSETS: ReadonlyArray<number> = [0, 0, 0, 0, 0, -0.10];
|
|
107
|
-
|
|
108
|
-
/**
|
|
109
|
-
* Deterministic pseudo-random blob-type selector per tree level.
|
|
110
|
-
* Root level (0) always uses shape 0; consecutive levels use different shapes.
|
|
111
|
-
*/
|
|
112
|
-
export function getBlobTypeForLayer(level: number): number {
|
|
113
|
-
const numTypes = ACTIVE_BLOB_TYPES.length;
|
|
114
|
-
if (numTypes <= 1) return ACTIVE_BLOB_TYPES[0] ?? 0;
|
|
115
|
-
let currentType = 0;
|
|
116
|
-
for (let i = 1; i <= level; i++) {
|
|
117
|
-
const pseudoRandom = Math.floor(Math.abs(Math.sin((i + 1) * 12.9898) * 43758.5453));
|
|
118
|
-
const stepOffset = (pseudoRandom % (numTypes - 1)) + 1;
|
|
119
|
-
currentType = (currentType + stepOffset) % numTypes;
|
|
120
|
-
}
|
|
121
|
-
return ACTIVE_BLOB_TYPES[currentType];
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
/**
|
|
125
|
-
* Draw the blob path onto a canvas context (centered at 0,0).
|
|
126
|
-
* Uses closed quadratic bezier curves through midpoints of control points.
|
|
127
|
-
*/
|
|
128
|
-
export function drawBlobPath(
|
|
129
|
-
ctx: { beginPath(): void; moveTo(x: number, y: number): void; quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; closePath(): void },
|
|
130
|
-
radiusX: number,
|
|
131
|
-
radiusY: number,
|
|
132
|
-
blobType: number,
|
|
133
|
-
): void {
|
|
134
|
-
const srcPts = ALL_BLOB_SHAPES[blobType] ?? ALL_BLOB_SHAPES[0];
|
|
135
|
-
const pts = srcPts.map(p => ({ x: p.x * radiusX, y: p.y * radiusY }));
|
|
136
|
-
ctx.beginPath();
|
|
137
|
-
const last = pts[pts.length - 1];
|
|
138
|
-
const first = pts[0];
|
|
139
|
-
ctx.moveTo((last.x + first.x) / 2, (last.y + first.y) / 2);
|
|
140
|
-
for (let i = 0; i < pts.length; i++) {
|
|
141
|
-
const curr = pts[i];
|
|
142
|
-
const next = pts[(i + 1) % pts.length];
|
|
143
|
-
ctx.quadraticCurveTo(curr.x, curr.y, (curr.x + next.x) / 2, (curr.y + next.y) / 2);
|
|
144
|
-
}
|
|
145
|
-
ctx.closePath();
|
|
146
|
-
}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { NODE_HEIGHT } from '../constants/performanceConstants.js';
|
|
2
|
-
|
|
3
|
-
export const NODE_TEXT_BASE_FONT_PX = 28;
|
|
4
|
-
export const DESCRIPTION_TEXT_BASE_FONT_PX = 12;
|
|
5
|
-
export const CONTAINER_LABEL_BASE_FONT_PX = 24;
|
|
6
|
-
export const EDGE_LABEL_BASE_FONT_PX = 18;
|
|
7
|
-
export const OVERLAY_FONT_UPPER_BOOST_PX = 8;
|
|
8
|
-
|
|
9
|
-
// Keep text away from blob edges
|
|
10
|
-
const NODE_TEXT_SAFE_BLOB_FILL_RATIO = 0.88;
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Computes world-space text scale for node title:
|
|
14
|
-
* - inverse zoom for screen-space consistency
|
|
15
|
-
* - clamped so text stays inside the node blob with safe padding
|
|
16
|
-
*
|
|
17
|
-
* Matches visualli.ai's computeNodeTextWorldScale(nodeWidth, zoomLevel).
|
|
18
|
-
*/
|
|
19
|
-
export function computeNodeTextWorldScale(nodeWidth: number, zoomLevel: number): number {
|
|
20
|
-
const safeZoom = Math.max(zoomLevel, 0.0001);
|
|
21
|
-
const baseRadiusX = nodeWidth / 2;
|
|
22
|
-
const baseRadiusY = Math.max((NODE_HEIGHT * 1.6) / 2, baseRadiusX * 0.74);
|
|
23
|
-
const textNaturalWidth = nodeWidth - 40;
|
|
24
|
-
const textNaturalHeight = NODE_HEIGHT - 20;
|
|
25
|
-
|
|
26
|
-
const maxScaleX = ((baseRadiusX * 2) * NODE_TEXT_SAFE_BLOB_FILL_RATIO) / Math.max(textNaturalWidth, 1);
|
|
27
|
-
const maxScaleY = ((baseRadiusY * 2) * NODE_TEXT_SAFE_BLOB_FILL_RATIO) / Math.max(textNaturalHeight, 1);
|
|
28
|
-
const fitScale = Math.max(0.01, Math.min(maxScaleX, maxScaleY));
|
|
29
|
-
|
|
30
|
-
return Math.min(1 / safeZoom, fitScale);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/** Screen-space scale (zoom-adjusted) for text overlays. */
|
|
34
|
-
export function computeNodeTextScreenScale(nodeWidth: number, zoomLevel: number): number {
|
|
35
|
-
return computeNodeTextWorldScale(nodeWidth, zoomLevel) * zoomLevel;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Screen-space overlay scale for description/semantic tooltips.
|
|
40
|
-
* - lower bound: 1x
|
|
41
|
-
* - upper bound: node-title-root + OVERLAY_FONT_UPPER_BOOST_PX
|
|
42
|
-
*/
|
|
43
|
-
export function computeOverlayScale(zoomLevel: number): number {
|
|
44
|
-
const safeZoom = Math.max(zoomLevel, 0.0001);
|
|
45
|
-
const inverseScale = 1 / safeZoom;
|
|
46
|
-
const maxScale = (NODE_TEXT_BASE_FONT_PX + OVERLAY_FONT_UPPER_BOOST_PX) / NODE_TEXT_BASE_FONT_PX;
|
|
47
|
-
return Math.min(Math.max(inverseScale, 1), maxScale);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/** Scale for edge path labels in screen pixels. */
|
|
51
|
-
export function computeEdgeLabelScale(zoomLevel: number): number {
|
|
52
|
-
const safeZoom = Math.max(zoomLevel, 0.0001);
|
|
53
|
-
return Math.min(Math.max(EDGE_LABEL_BASE_FONT_PX / safeZoom, 10), 32);
|
|
54
|
-
}
|