react-godot-shader-preview 0.6.2 → 0.6.4

package/dist/GodotMaterialPreview.css

@@ -212,3 +212,28 @@
 @media (max-width: 700px) {
   .rgs-previewWrap { flex: 0 0 auto; width: 100%; max-width: 400px; }
 }
+
+/* Print: keep iframe and preview block on one page, avoid breaks inside */
+@media print {
+  .rgs-root,
+  .rgs-previewWrap,
+  .rgs-preview,
+  .rgs-canvas {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  .rgs-previewOverlays,
+  .rgs-modeStrip,
+  .rgs-statusOverlay,
+  .rgs-paramsPanel,
+  .rgs-paramRow {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  /* Keep iframe content from breaking; canvas is the iframe */
+  .rgs-canvas {
+    overflow: hidden;
+  }
+}

package/dist/GodotMaterialPreviewView.js

@@ -45,7 +45,7 @@ const cn = {
 export function GodotMaterialPreviewView({ iframeRef, embedUrl, previewWidth, showMeshSwitch, allowMouseInteraction, showParameters, status, godotLoading, uniforms, samplerState, displayMode, setDisplayMode, updateUniform, updateSampler, setParameter, className, }) {
     const rootStyle = previewWidth != null ? { flex: `0 0 ${previewWidth}px` } : undefined;
     const rootClass = [cn.root, previewWidth == null ? cn.rootFill : '', className].filter(Boolean).join(' ');
-    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." }))] }))] }));
+    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, tabIndex: -1 }), !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." }))] }))] }));
 }
 function ParamRow({ u, i, samplerState, updateUniform, updateSampler, setParameter }) {
     const state = samplerState[u.name] ?? DEFAULT_SAMPLER_STATE;

package/dist/style.css

@@ -212,3 +212,28 @@
 @media (max-width: 700px) {
   .rgs-previewWrap { flex: 0 0 auto; width: 100%; max-width: 400px; }
 }
+
+/* Print: keep iframe and preview block on one page, avoid breaks inside */
+@media print {
+  .rgs-root,
+  .rgs-previewWrap,
+  .rgs-preview,
+  .rgs-canvas {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  .rgs-previewOverlays,
+  .rgs-modeStrip,
+  .rgs-statusOverlay,
+  .rgs-paramsPanel,
+  .rgs-paramRow {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  /* Keep iframe content from breaking; canvas is the iframe */
+  .rgs-canvas {
+    overflow: hidden;
+  }
+}

package/godot/embed.html

@@ -8,6 +8,7 @@
     * { margin: 0; padding: 0; box-sizing: border-box; }
     html, body { width: 100%; height: 100%; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
     #godot-canvas { display: block; max-width: 100%; max-height: 100%; width: 100% !important; height: 100% !important; object-fit: contain; cursor: grab;
+      break-inside: avoid; page-break-inside: avoid;
       /* Override Godot engine inline positioning/sizing so flex centering works */
       position: relative !important; left: auto !important; top: auto !important; min-width: 0 !important; }
   </style>
@@ -21,9 +22,7 @@
         console.error('[embed] Engine not found. index.js did not load.');
         return;
       }
-      var baseConfig = {"args":[],"canvasResizePolicy":2,"emscriptenPoolSize":8,"ensureCrossOriginIsolationHeaders":true,"executable":"index","experimentalVK":false,"fileSizes":{"index.pck":2830792,"index.wasm":30805867},"focusCanvas":true,"gdextensionLibs":[],"godotPoolSize":4};
-      var path = window.location.pathname;
-      var assetBase = window.location.origin + path.replace(/\/[^/]*$/, '/');
+      var baseConfig = {"args":[],"canvasResizePolicy":2,"emscriptenPoolSize":8,"ensureCrossOriginIsolationHeaders":true,"executable":"index","experimentalVK":false,"fileSizes":{"index.pck":2830792,"index.wasm":30805867},"focusCanvas":false,"gdextensionLibs":[],"godotPoolSize":4};
       var canvasEl = document.getElementById('godot-canvas');
       var engine = new Engine(baseConfig);
       var startOverrides = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-godot-shader-preview",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "React component for live Godot shader preview via WebAssembly. Load shader code, switch mesh (sphere/plane), edit uniforms and samplers.",
   "type": "module",
   "main": "./dist/index.js",