react-godot-shader-preview 0.5.2 → 0.5.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.
|
@@ -20,6 +20,14 @@
|
|
|
20
20
|
min-height: 0;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
/* When no fixed previewWidth: fill parent so user can drop component in any container */
|
|
24
|
+
.rgs-rootFill {
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
flex: 1 1 0;
|
|
28
|
+
min-height: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
23
31
|
.rgs-previewWrap {
|
|
24
32
|
max-width: 100%;
|
|
25
33
|
min-width: 0;
|
|
@@ -108,17 +116,21 @@
|
|
|
108
116
|
z-index: 10;
|
|
109
117
|
}
|
|
110
118
|
|
|
111
|
-
/* Status
|
|
112
|
-
.rgs-
|
|
113
|
-
|
|
119
|
+
/* Status as overlay on frame only (no separate block) */
|
|
120
|
+
.rgs-statusOverlay {
|
|
121
|
+
position: absolute;
|
|
122
|
+
bottom: 0;
|
|
123
|
+
left: 0;
|
|
124
|
+
right: 0;
|
|
125
|
+
z-index: 9;
|
|
114
126
|
display: flex;
|
|
115
127
|
align-items: center;
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
justify-content: center;
|
|
129
|
+
padding: 8px 12px;
|
|
130
|
+
pointer-events: none;
|
|
118
131
|
}
|
|
119
132
|
|
|
120
|
-
.rgs-
|
|
121
|
-
.rgs-statusSuccess, .rgs-statusError { padding: 8px 12px; border-radius: 4px; font-size: 13px; }
|
|
133
|
+
.rgs-statusSuccess, .rgs-statusError { padding: 6px 10px; border-radius: 4px; font-size: 12px; }
|
|
122
134
|
.rgs-statusSuccess { background: var(--rgs-ok); color: var(--rgs-ok-fg); }
|
|
123
135
|
.rgs-statusError { background: var(--rgs-err); color: var(--rgs-err-fg); }
|
|
124
136
|
|
|
@@ -6,7 +6,6 @@ import { RGS_EMBED_FOLDER } from './GodotMaterialPreview.types';
|
|
|
6
6
|
export { RGS_EMBED_FOLDER } from './GodotMaterialPreview.types';
|
|
7
7
|
const DEFAULTS = {
|
|
8
8
|
embedUrl: `/${RGS_EMBED_FOLDER}/embed.html`,
|
|
9
|
-
previewWidth: 512,
|
|
10
9
|
showMeshSwitch: true,
|
|
11
10
|
allowMouseInteraction: true,
|
|
12
11
|
showParameters: false,
|
|
@@ -2,7 +2,7 @@ import type { DisplayMode, SamplerState, ShaderUniform } from './GodotMaterialPr
|
|
|
2
2
|
export interface GodotMaterialPreviewViewProps {
|
|
3
3
|
iframeRef: React.RefObject<HTMLIFrameElement | null>;
|
|
4
4
|
embedUrl: string;
|
|
5
|
-
previewWidth
|
|
5
|
+
previewWidth?: number;
|
|
6
6
|
showMeshSwitch: boolean;
|
|
7
7
|
allowMouseInteraction: boolean;
|
|
8
8
|
showParameters: boolean;
|
|
@@ -8,6 +8,7 @@ function DiamondIcon(props) {
|
|
|
8
8
|
import { DEFAULT_SAMPLER_STATE, rgbToHex, hexToRgb } from './GodotMaterialPreview.types';
|
|
9
9
|
const cn = {
|
|
10
10
|
root: 'rgs-root',
|
|
11
|
+
rootFill: 'rgs-rootFill',
|
|
11
12
|
previewWrap: 'rgs-previewWrap',
|
|
12
13
|
preview: 'rgs-preview',
|
|
13
14
|
canvas: 'rgs-canvas',
|
|
@@ -17,8 +18,7 @@ const cn = {
|
|
|
17
18
|
modeStripButton: 'rgs-modeStripButton',
|
|
18
19
|
modeStripButtonActive: 'rgs-modeStripButtonActive',
|
|
19
20
|
loadingOverlay: 'rgs-loadingOverlay',
|
|
20
|
-
|
|
21
|
-
statusBarSlot: 'rgs-statusBarSlot',
|
|
21
|
+
statusOverlay: 'rgs-statusOverlay',
|
|
22
22
|
statusSuccess: 'rgs-statusSuccess',
|
|
23
23
|
statusError: 'rgs-statusError',
|
|
24
24
|
paramsPanel: 'rgs-paramsPanel',
|
|
@@ -43,7 +43,9 @@ const cn = {
|
|
|
43
43
|
paramSelect: 'rgs-paramSelect',
|
|
44
44
|
};
|
|
45
45
|
export function GodotMaterialPreviewView({ iframeRef, embedUrl, previewWidth, showMeshSwitch, allowMouseInteraction, showParameters, status, godotLoading, uniforms, samplerState, displayMode, setDisplayMode, updateUniform, updateSampler, setParameter, className, }) {
|
|
46
|
-
|
|
46
|
+
const rootStyle = previewWidth != null ? { flex: `0 0 ${previewWidth}px` } : undefined;
|
|
47
|
+
const rootClass = [cn.root, previewWidth == null ? cn.rootFill : '', className].filter(Boolean).join(' ');
|
|
48
|
+
return (_jsxs("div", { className: rootClass, style: rootStyle, children: [_jsx("div", { className: cn.previewWrap, children: _jsxs("div", { className: cn.preview, children: [_jsx("iframe", { ref: iframeRef, src: embedUrl, title: "Shader preview", className: cn.canvas }), !allowMouseInteraction && _jsx("div", { className: cn.mouseBlockOverlay, "aria-hidden": true }), _jsxs("div", { className: cn.previewOverlays, children: [showMeshSwitch && (_jsxs("div", { className: cn.modeStrip, role: "group", "aria-label": "Preview display mode", children: [_jsx("button", { type: "button", className: `${cn.modeStripButton} ${displayMode === 'Circle' ? cn.modeStripButtonActive : ''}`, onClick: () => setDisplayMode('Circle'), "aria-pressed": displayMode === 'Circle', "aria-label": "Sphere", children: _jsx(CircleIcon, {}) }), _jsx("button", { type: "button", className: `${cn.modeStripButton} ${displayMode === 'Plane' ? cn.modeStripButtonActive : ''}`, onClick: () => setDisplayMode('Plane'), "aria-pressed": displayMode === 'Plane', "aria-label": "Plane", children: _jsx(DiamondIcon, {}) })] })), godotLoading && (_jsx("div", { className: cn.loadingOverlay, children: _jsx("div", { children: status?.message ?? 'Loading...' }) })), status && !godotLoading && (_jsx("div", { className: cn.statusOverlay, children: _jsx("span", { className: status.error ? cn.statusError : cn.statusSuccess, children: status.message }) }))] })] }) }), showParameters && (_jsxs("div", { className: cn.paramsPanel, children: [_jsx("div", { className: cn.paramsTitle, children: uniforms.length > 0 ? 'Shader parameters' : 'Parameters' }), uniforms.length > 0 ? (uniforms.map((u, i) => (_jsx(ParamRow, { u: u, i: i, samplerState: samplerState, updateUniform: updateUniform, updateSampler: updateSampler, setParameter: setParameter }, u.name)))) : (_jsx("p", { className: cn.paramsPlaceholder, children: "Load a shader with uniform variables to see and edit parameters here." }))] }))] }));
|
|
47
49
|
}
|
|
48
50
|
function ParamRow({ u, i, samplerState, updateUniform, updateSampler, setParameter }) {
|
|
49
51
|
const state = samplerState[u.name] ?? DEFAULT_SAMPLER_STATE;
|
package/dist/style.css
CHANGED
|
@@ -20,6 +20,14 @@
|
|
|
20
20
|
min-height: 0;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
/* When no fixed previewWidth: fill parent so user can drop component in any container */
|
|
24
|
+
.rgs-rootFill {
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
flex: 1 1 0;
|
|
28
|
+
min-height: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
23
31
|
.rgs-previewWrap {
|
|
24
32
|
max-width: 100%;
|
|
25
33
|
min-width: 0;
|
|
@@ -108,17 +116,21 @@
|
|
|
108
116
|
z-index: 10;
|
|
109
117
|
}
|
|
110
118
|
|
|
111
|
-
/* Status
|
|
112
|
-
.rgs-
|
|
113
|
-
|
|
119
|
+
/* Status as overlay on frame only (no separate block) */
|
|
120
|
+
.rgs-statusOverlay {
|
|
121
|
+
position: absolute;
|
|
122
|
+
bottom: 0;
|
|
123
|
+
left: 0;
|
|
124
|
+
right: 0;
|
|
125
|
+
z-index: 9;
|
|
114
126
|
display: flex;
|
|
115
127
|
align-items: center;
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
justify-content: center;
|
|
129
|
+
padding: 8px 12px;
|
|
130
|
+
pointer-events: none;
|
|
118
131
|
}
|
|
119
132
|
|
|
120
|
-
.rgs-
|
|
121
|
-
.rgs-statusSuccess, .rgs-statusError { padding: 8px 12px; border-radius: 4px; font-size: 13px; }
|
|
133
|
+
.rgs-statusSuccess, .rgs-statusError { padding: 6px 10px; border-radius: 4px; font-size: 12px; }
|
|
122
134
|
.rgs-statusSuccess { background: var(--rgs-ok); color: var(--rgs-ok-fg); }
|
|
123
135
|
.rgs-statusError { background: var(--rgs-err); color: var(--rgs-err-fg); }
|
|
124
136
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-godot-shader-preview",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.3",
|
|
4
4
|
"description": "React component for live Godot shader preview via WebAssembly. Load shader code, switch mesh (sphere/plane), edit uniforms and samplers.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|