@leverege/tpi-viz 0.2.2 → 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 +13 -6
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
|
|
|
@@ -22,10 +22,12 @@
|
|
|
22
22
|
--t-med: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
23
23
|
--t-slow: 300ms ease; /* collapse/expand animations */
|
|
24
24
|
|
|
25
|
-
/* Shape
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
--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);
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
/* Surfaces / borders / text / shadows follow the host's light–dark theme.
|
|
@@ -55,6 +57,7 @@
|
|
|
55
57
|
|
|
56
58
|
--shadow-soft: 0 2px 10px rgba(20, 28, 50, 0.10);
|
|
57
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 */
|
|
58
61
|
}
|
|
59
62
|
|
|
60
63
|
.dark .tpi-viz {
|
|
@@ -78,6 +81,7 @@
|
|
|
78
81
|
|
|
79
82
|
--shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
|
|
80
83
|
--shadow-med: 0 4px 18px rgba(0, 0, 0, 0.45);
|
|
84
|
+
--vignette: rgba(0, 0, 0, 0.35);
|
|
81
85
|
}
|
|
82
86
|
|
|
83
87
|
/* Reset and base. Everything is scoped under .tpi-viz (the viewer root that
|
|
@@ -86,7 +90,10 @@
|
|
|
86
90
|
.tpi-viz, .tpi-viz * { margin: 0; padding: 0; box-sizing: border-box; }
|
|
87
91
|
|
|
88
92
|
.tpi-viz {
|
|
89
|
-
|
|
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);
|
|
90
97
|
font-feature-settings: 'tnum' 1, 'cv11' 1; /* tabular numerals */
|
|
91
98
|
background: var(--bg-canvas);
|
|
92
99
|
color: var(--text-1);
|
|
@@ -106,7 +113,7 @@
|
|
|
106
113
|
background: radial-gradient(
|
|
107
114
|
ellipse at center,
|
|
108
115
|
transparent 55%,
|
|
109
|
-
|
|
116
|
+
var(--vignette) 100%
|
|
110
117
|
);
|
|
111
118
|
z-index: 5;
|
|
112
119
|
}
|