react-godot-shader-preview 0.5.2 → 0.5.4

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.
Files changed (6) hide show
  1. package/dist/GodotMaterialPreview.css +19 -8
  2. package/dist/GodotMaterialPreview.js +0 -1
  3. package/dist/GodotMaterialPreviewView.d.ts +1 -1
  4. package/dist/GodotMaterialPreviewView.js +5 -3
  5. package/dist/style.css +19 -8
  6. package/package.json +1 -1
package/dist/GodotMaterialPreview.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;
@@ -34,7 +42,6 @@
34
42
  position: relative;
35
43
  overflow: hidden;
36
44
  border: 1px solid var(--rgs-b);
37
- border-radius: 6px;
38
45
  background: #000;
39
46
  aspect-ratio: 1;
40
47
  height: 100%;
@@ -108,17 +115,21 @@
108
115
  z-index: 10;
109
116
  }
110
117
 
111
- /* Status: fixed-height slot so canvas size does not change when status appears */
112
- .rgs-statusBarSlot {
113
- flex: 0 0 auto;
118
+ /* Status as overlay on frame only (no separate block) */
119
+ .rgs-statusOverlay {
120
+ position: absolute;
121
+ bottom: 0;
122
+ left: 0;
123
+ right: 0;
124
+ z-index: 9;
114
125
  display: flex;
115
126
  align-items: center;
116
- margin-top: 8px;
117
- min-height: 32px;
127
+ justify-content: center;
128
+ padding: 8px 12px;
129
+ pointer-events: none;
118
130
  }
119
131
 
120
- .rgs-statusBar { display: flex; align-items: center; min-height: 32px; }
121
- .rgs-statusSuccess, .rgs-statusError { padding: 8px 12px; border-radius: 4px; font-size: 13px; }
132
+ .rgs-statusSuccess, .rgs-statusError { padding: 6px 10px; border-radius: 4px; font-size: 12px; }
122
133
  .rgs-statusSuccess { background: var(--rgs-ok); color: var(--rgs-ok-fg); }
123
134
  .rgs-statusError { background: var(--rgs-err); color: var(--rgs-err-fg); }
124
135
 
package/dist/GodotMaterialPreview.js CHANGED
@@ -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,
package/dist/GodotMaterialPreviewView.d.ts CHANGED
@@ -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: number;
5
+ previewWidth?: number;
6
6
  showMeshSwitch: boolean;
7
7
  allowMouseInteraction: boolean;
8
8
  showParameters: boolean;
package/dist/GodotMaterialPreviewView.js CHANGED
@@ -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
- statusBar: 'rgs-statusBar',
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
- return (_jsxs("div", { className: `${cn.root} ${className ?? ''}`, style: { flex: `0 0 ${previewWidth}px` }, 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'), title: "Sphere", "aria-pressed": displayMode === 'Circle', "aria-label": "Sphere", children: _jsx(CircleIcon, {}) }), _jsx("button", { type: "button", className: `${cn.modeStripButton} ${displayMode === 'Plane' ? cn.modeStripButtonActive : ''}`, onClick: () => setDisplayMode('Plane'), title: "Plane", "aria-pressed": displayMode === 'Plane', "aria-label": "Plane", children: _jsx(DiamondIcon, {}) })] })), godotLoading && (_jsx("div", { className: cn.loadingOverlay, children: _jsx("div", { children: status?.message ?? 'Loading...' }) }))] })] }) }), _jsx("div", { className: cn.statusBarSlot, children: status && !godotLoading ? (_jsx("span", { className: status.error ? cn.statusError : cn.statusSuccess, children: status.message })) : null }), 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." }))] }))] }));
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;
@@ -34,7 +42,6 @@
34
42
  position: relative;
35
43
  overflow: hidden;
36
44
  border: 1px solid var(--rgs-b);
37
- border-radius: 6px;
38
45
  background: #000;
39
46
  aspect-ratio: 1;
40
47
  height: 100%;
@@ -108,17 +115,21 @@
108
115
  z-index: 10;
109
116
  }
110
117
 
111
- /* Status: fixed-height slot so canvas size does not change when status appears */
112
- .rgs-statusBarSlot {
113
- flex: 0 0 auto;
118
+ /* Status as overlay on frame only (no separate block) */
119
+ .rgs-statusOverlay {
120
+ position: absolute;
121
+ bottom: 0;
122
+ left: 0;
123
+ right: 0;
124
+ z-index: 9;
114
125
  display: flex;
115
126
  align-items: center;
116
- margin-top: 8px;
117
- min-height: 32px;
127
+ justify-content: center;
128
+ padding: 8px 12px;
129
+ pointer-events: none;
118
130
  }
119
131
 
120
- .rgs-statusBar { display: flex; align-items: center; min-height: 32px; }
121
- .rgs-statusSuccess, .rgs-statusError { padding: 8px 12px; border-radius: 4px; font-size: 13px; }
132
+ .rgs-statusSuccess, .rgs-statusError { padding: 6px 10px; border-radius: 4px; font-size: 12px; }
122
133
  .rgs-statusSuccess { background: var(--rgs-ok); color: var(--rgs-ok-fg); }
123
134
  .rgs-statusError { background: var(--rgs-err); color: var(--rgs-err-fg); }
124
135
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-godot-shader-preview",
3
- "version": "0.5.2",
3
+ "version": "0.5.4",
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",