@leverege/tpi-viz 0.2.1 → 0.2.3
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/package.json +2 -2
- package/src/main.js +14 -0
- package/src/styles/viewer_common.css +63 -28
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leverege/tpi-viz",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "3D scene viewer for TPI manufacturing data — renders blade geometry, PTZ cameras, defects, ply layers, and flows. Exports mountViewer()/destroy() for embedding (e.g. an Imaginarium React route); also runs standalone.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"@leverege/ptz-camera": "^0.3.0",
|
|
19
19
|
"@leverege/tpi-camera-modeling": "^0.3.1",
|
|
20
20
|
"@leverege/tpi-parsers": "^0.3.2",
|
|
21
|
-
"@leverege/tpi-viz-renderer": "^0.2.
|
|
21
|
+
"@leverege/tpi-viz-renderer": "^0.2.5",
|
|
22
22
|
"three": "^0.160.0"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
package/src/main.js
CHANGED
|
@@ -258,6 +258,20 @@ async function init() {
|
|
|
258
258
|
const canvas = document.getElementById('threeCanvas');
|
|
259
259
|
renderer = createSceneRenderer(canvas);
|
|
260
260
|
|
|
261
|
+
// Drive the 3D viewport background from the host theme: read the resolved
|
|
262
|
+
// --bg-canvas (light or dark, per the `.dark` class on <html>) and keep it
|
|
263
|
+
// in sync as the user toggles the theme. The render loop runs continuously,
|
|
264
|
+
// so setClearColor alone repaints — no manual render needed.
|
|
265
|
+
const applyThemeBackground = () => {
|
|
266
|
+
if ( !renderer || !_container ) { return; }
|
|
267
|
+
const bg = getComputedStyle( _container ).getPropertyValue( '--bg-canvas' ).trim();
|
|
268
|
+
if ( bg && typeof renderer.setClearColor === 'function' ) { renderer.setClearColor( new THREE.Color( bg ) ); }
|
|
269
|
+
};
|
|
270
|
+
applyThemeBackground();
|
|
271
|
+
const _themeObserver = new MutationObserver( applyThemeBackground );
|
|
272
|
+
_themeObserver.observe( document.documentElement, { attributes : true, attributeFilter : [ 'class' ] } );
|
|
273
|
+
_teardown.push( () => _themeObserver.disconnect() );
|
|
274
|
+
|
|
261
275
|
raycaster = new THREE.Raycaster();
|
|
262
276
|
mouse = new THREE.Vector2();
|
|
263
277
|
|
|
@@ -7,27 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
|
-
/*
|
|
11
|
-
--bg-canvas: #0b0d14;
|
|
12
|
-
--bg-sidebar: #11141d;
|
|
13
|
-
--bg-panel: #161a26;
|
|
14
|
-
--bg-panel-strong: #1c2030;
|
|
15
|
-
--bg-hover: #1d2230;
|
|
16
|
-
--bg-active: #232a3d;
|
|
17
|
-
--bg-overlay: rgba(10, 12, 20, 0.88);
|
|
18
|
-
|
|
19
|
-
/* Borders — barely-there to subtly-visible */
|
|
20
|
-
--border-hairline: #1a1d28;
|
|
21
|
-
--border-subtle: #232733;
|
|
22
|
-
--border-strong: #2e3344;
|
|
23
|
-
|
|
24
|
-
/* Text scale */
|
|
25
|
-
--text-1: #e7e9ef; /* body / primary */
|
|
26
|
-
--text-2: #aab1c0; /* labels */
|
|
27
|
-
--text-3: #7b8294; /* secondary, counts */
|
|
28
|
-
--text-4: #6b7488; /* hints, disabled — bumped from #535a6b for legibility on dark bg */
|
|
29
|
-
|
|
30
|
-
/* Accents (paired w/ semantic uses across the app) */
|
|
10
|
+
/* Accents (semantic; theme-independent — read on both light + dark) */
|
|
31
11
|
--accent-blue: #7a9bff; /* elements / general info */
|
|
32
12
|
--accent-blue-soft: #5063a8;
|
|
33
13
|
--accent-pink: #ff95c2; /* flows */
|
|
@@ -42,14 +22,66 @@
|
|
|
42
22
|
--t-med: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
43
23
|
--t-slow: 300ms ease; /* collapse/expand animations */
|
|
44
24
|
|
|
45
|
-
/* Shape
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
--r-
|
|
25
|
+
/* Shape — track the host's corner radius when embedded (Imaginarium sets
|
|
26
|
+
--radius, shadcn-style); fall back to the viewer's own scale standalone.
|
|
27
|
+
Mirrors shadcn's sm/md/lg derivation so controls round like the app. */
|
|
28
|
+
--r-sm: calc(var(--radius, 0.5rem) - 4px);
|
|
29
|
+
--r-md: calc(var(--radius, 0.5rem) - 2px);
|
|
30
|
+
--r-lg: var(--radius, 0.625rem);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Surfaces / borders / text / shadows follow the host's light–dark theme.
|
|
34
|
+
Imaginarium toggles `.dark` on <html> (shadcn `darkMode:["class"]`), so the
|
|
35
|
+
embedded viewer tracks the app by keying off the SAME class. Light is the
|
|
36
|
+
default; standalone (index.html) forces `.dark` to keep its original look.
|
|
37
|
+
The 3D WebGL clear-color stays dark in both — a dark viewport reads best for
|
|
38
|
+
the varied-hue ply contours — so only the chrome re-themes. */
|
|
39
|
+
.tpi-viz {
|
|
40
|
+
/* Light surfaces — cool grays mirroring the dark scale */
|
|
41
|
+
--bg-canvas: #eceef3;
|
|
42
|
+
--bg-sidebar: #f5f6f9;
|
|
43
|
+
--bg-panel: #ffffff;
|
|
44
|
+
--bg-panel-strong: #eef0f4;
|
|
45
|
+
--bg-hover: #e9edf4;
|
|
46
|
+
--bg-active: #dde6f7;
|
|
47
|
+
--bg-overlay: rgba(244, 246, 250, 0.92);
|
|
48
|
+
|
|
49
|
+
--border-hairline: #e8eaef;
|
|
50
|
+
--border-subtle: #dde0e7;
|
|
51
|
+
--border-strong: #c7cdd8;
|
|
52
|
+
|
|
53
|
+
--text-1: #181b24; /* body / primary */
|
|
54
|
+
--text-2: #424a59; /* labels */
|
|
55
|
+
--text-3: #667083; /* secondary, counts */
|
|
56
|
+
--text-4: #8891a1; /* hints, disabled */
|
|
57
|
+
|
|
58
|
+
--shadow-soft: 0 2px 10px rgba(20, 28, 50, 0.10);
|
|
59
|
+
--shadow-med: 0 4px 18px rgba(20, 28, 50, 0.16);
|
|
60
|
+
--vignette: rgba(30, 40, 60, 0.06); /* barely-there edge darkening on a light viewport */
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.dark .tpi-viz {
|
|
64
|
+
/* Dark surfaces — the original palette */
|
|
65
|
+
--bg-canvas: #0b0d14;
|
|
66
|
+
--bg-sidebar: #11141d;
|
|
67
|
+
--bg-panel: #161a26;
|
|
68
|
+
--bg-panel-strong: #1c2030;
|
|
69
|
+
--bg-hover: #1d2230;
|
|
70
|
+
--bg-active: #232a3d;
|
|
71
|
+
--bg-overlay: rgba(10, 12, 20, 0.88);
|
|
72
|
+
|
|
73
|
+
--border-hairline: #1a1d28;
|
|
74
|
+
--border-subtle: #232733;
|
|
75
|
+
--border-strong: #2e3344;
|
|
76
|
+
|
|
77
|
+
--text-1: #e7e9ef;
|
|
78
|
+
--text-2: #aab1c0;
|
|
79
|
+
--text-3: #7b8294;
|
|
80
|
+
--text-4: #6b7488;
|
|
49
81
|
|
|
50
|
-
/* Shadows */
|
|
51
82
|
--shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
|
|
52
83
|
--shadow-med: 0 4px 18px rgba(0, 0, 0, 0.45);
|
|
84
|
+
--vignette: rgba(0, 0, 0, 0.35);
|
|
53
85
|
}
|
|
54
86
|
|
|
55
87
|
/* Reset and base. Everything is scoped under .tpi-viz (the viewer root that
|
|
@@ -58,7 +90,10 @@
|
|
|
58
90
|
.tpi-viz, .tpi-viz * { margin: 0; padding: 0; box-sizing: border-box; }
|
|
59
91
|
|
|
60
92
|
.tpi-viz {
|
|
61
|
-
|
|
93
|
+
/* Inherit the host's font when embedded (Imaginarium sets --font-sans);
|
|
94
|
+
fall back to the viewer's own stack when standalone. Keeps the viewer
|
|
95
|
+
typographically cohesive with the rest of the app. */
|
|
96
|
+
font-family: var(--font-sans, 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif);
|
|
62
97
|
font-feature-settings: 'tnum' 1, 'cv11' 1; /* tabular numerals */
|
|
63
98
|
background: var(--bg-canvas);
|
|
64
99
|
color: var(--text-1);
|
|
@@ -78,7 +113,7 @@
|
|
|
78
113
|
background: radial-gradient(
|
|
79
114
|
ellipse at center,
|
|
80
115
|
transparent 55%,
|
|
81
|
-
|
|
116
|
+
var(--vignette) 100%
|
|
82
117
|
);
|
|
83
118
|
z-index: 5;
|
|
84
119
|
}
|