From 628b2d339e5145c2d7447cc3aa4165b70f8916c9 Mon Sep 17 00:00:00 2001
From: ruucm <ruucm.a@gmail.com>
Date: Sun, 12 Nov 2023 20:45:09 -0800
Subject: [PATCH 1/6] useContextLostFallback

---
 .../src-dev/ShaderGradientCanvas.tsx          |  5 +++
 .../src-dev/useContextLostFallback.tsx        | 42 +++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 packages/shadergradient/src-dev/useContextLostFallback.tsx

diff --git a/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx b/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx
index ffbafede..4bb541d8 100644
--- a/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx
+++ b/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx
@@ -1,5 +1,6 @@
 import { Canvas } from '@react-three/fiber'
 import { canvasProps } from './consts'
+import { useContextLostFallback } from './useContextLostFallback'
 
 export function ShaderGradientCanvas({
   children,
@@ -8,16 +9,20 @@ export function ShaderGradientCanvas({
   fov = 45,
   ...rest
 }: any) {
+  const [contextLost, handleContextEvents] = useContextLostFallback()
+
   return (
     <>
       {/* Disable drag rotations of gradeint (for Framer & Figma) */}
       {/* <style>{`#gradientCanvas canvas { pointer-events: none; }`}</style> */}
+      {contextLost && <div>Restoring graphics...</div>}
       <Canvas
         id='gradientCanvas'
         key={pixelDensity + fov}
         resize={{ offsetSize: true }}
         {...canvasProps(pixelDensity, fov)}
         style={{ pointerEvents }}
+        onCreated={handleContextEvents}
         {...rest}
       >
         {children}
diff --git a/packages/shadergradient/src-dev/useContextLostFallback.tsx b/packages/shadergradient/src-dev/useContextLostFallback.tsx
new file mode 100644
index 00000000..5b05858c
--- /dev/null
+++ b/packages/shadergradient/src-dev/useContextLostFallback.tsx
@@ -0,0 +1,42 @@
+import { useState } from 'react'
+
+export function useContextLostFallback() {
+  const [contextLost, setContextLost] = useState(false)
+
+  const handleContextEvents = (state) => {
+    const renderer = state.gl.domElement
+
+    const handleContextLost = (event) => {
+      event.preventDefault()
+      setContextLost(true)
+      console.log('[Context Lost.]')
+      //   console.log('renderer', renderer)
+
+      //   const gl = renderer.getContext('webgl')
+
+      //   console.log('gl', gl)
+
+      //   const ext = gl.getExtension('WEBGL_lose_context')
+      //   console.log('ext', ext)
+    }
+
+    const handleContextRestored = () => {
+      setContextLost(false)
+      console.log('[Context Restored.]')
+      // Additional reinitialization if needed
+    }
+
+    renderer.addEventListener('webglcontextlost', handleContextLost)
+    renderer.addEventListener('webglcontextrestored', handleContextRestored)
+
+    return () => {
+      renderer.removeEventListener('webglcontextlost', handleContextLost)
+      renderer.removeEventListener(
+        'webglcontextrestored',
+        handleContextRestored
+      )
+    }
+  }
+
+  return [contextLost, handleContextEvents]
+}

From a8481d5157891a653a37c4c4a860a9d6dd368223 Mon Sep 17 00:00:00 2001
From: ruucm <ruucm.a@gmail.com>
Date: Sun, 12 Nov 2023 20:55:43 -0800
Subject: [PATCH 2/6] fmt

---
 .../shadergradient/src-dev/ShaderGradientCanvas.tsx    |  7 +++++--
 .../shadergradient/src-dev/useContextLostFallback.tsx  | 10 +++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx b/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx
index 4bb541d8..7e2771e4 100644
--- a/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx
+++ b/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx
@@ -9,13 +9,16 @@ export function ShaderGradientCanvas({
   fov = 45,
   ...rest
 }: any) {
-  const [contextLost, handleContextEvents] = useContextLostFallback()
+  const [contextLost, handleContextEvents]: any = useContextLostFallback()
 
   return (
     <>
       {/* Disable drag rotations of gradeint (for Framer & Figma) */}
       {/* <style>{`#gradientCanvas canvas { pointer-events: none; }`}</style> */}
-      {contextLost && <div>Restoring graphics...</div>}
+      <div style={{ color: 'green' }}>
+        contextLost: {contextLost}
+        {contextLost === 1 && <div>Restoring graphics...</div>}
+      </div>
       <Canvas
         id='gradientCanvas'
         key={pixelDensity + fov}
diff --git a/packages/shadergradient/src-dev/useContextLostFallback.tsx b/packages/shadergradient/src-dev/useContextLostFallback.tsx
index 5b05858c..288a330d 100644
--- a/packages/shadergradient/src-dev/useContextLostFallback.tsx
+++ b/packages/shadergradient/src-dev/useContextLostFallback.tsx
@@ -1,15 +1,15 @@
 import { useState } from 'react'
 
 export function useContextLostFallback() {
-  const [contextLost, setContextLost] = useState(false)
+  const [contextLost, setContextLost] = useState(-1)
 
   const handleContextEvents = (state) => {
     const renderer = state.gl.domElement
 
     const handleContextLost = (event) => {
       event.preventDefault()
-      setContextLost(true)
-      console.log('[Context Lost.]')
+      setContextLost(1)
+      console.log('[Context Lost]')
       //   console.log('renderer', renderer)
 
       //   const gl = renderer.getContext('webgl')
@@ -21,8 +21,8 @@ export function useContextLostFallback() {
     }
 
     const handleContextRestored = () => {
-      setContextLost(false)
-      console.log('[Context Restored.]')
+      setContextLost(0)
+      console.log('[Context Restored]')
       // Additional reinitialization if needed
     }
 

From ca977fef207820f67458dc136e088ab72ade09cf Mon Sep 17 00:00:00 2001
From: ruucm <ruucm.a@gmail.com>
Date: Sun, 12 Nov 2023 21:03:47 -0800
Subject: [PATCH 3/6] logs

---
 .../src-dev/Gradient/ShaderGradient.tsx             |  2 +-
 .../src-dev/useContextLostFallback.tsx              | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/shadergradient/src-dev/Gradient/ShaderGradient.tsx b/packages/shadergradient/src-dev/Gradient/ShaderGradient.tsx
index 1f601d0e..6d88d48c 100644
--- a/packages/shadergradient/src-dev/Gradient/ShaderGradient.tsx
+++ b/packages/shadergradient/src-dev/Gradient/ShaderGradient.tsx
@@ -29,7 +29,7 @@ export function ShaderGradient({
   const { lightType, envPreset, brightness, grain, toggleAxis, ...others } =
     controlProps
 
-  usePostProcessing(grain === 'off')
+  // usePostProcessing(grain === 'off')
 
   return (
     <>
diff --git a/packages/shadergradient/src-dev/useContextLostFallback.tsx b/packages/shadergradient/src-dev/useContextLostFallback.tsx
index 288a330d..0b9782ec 100644
--- a/packages/shadergradient/src-dev/useContextLostFallback.tsx
+++ b/packages/shadergradient/src-dev/useContextLostFallback.tsx
@@ -10,19 +10,20 @@ export function useContextLostFallback() {
       event.preventDefault()
       setContextLost(1)
       console.log('[Context Lost]')
-      //   console.log('renderer', renderer)
-
-      //   const gl = renderer.getContext('webgl')
-
-      //   console.log('gl', gl)
+      const canvas = event.srcElement
+      console.log('canvas', canvas)
 
+      // const gl = canvas.getContext('webgl')
+      // console.log('gl', gl)
       //   const ext = gl.getExtension('WEBGL_lose_context')
       //   console.log('ext', ext)
     }
 
-    const handleContextRestored = () => {
+    const handleContextRestored = (event) => {
       setContextLost(0)
       console.log('[Context Restored]')
+      const canvas = event.srcElement
+      console.log('canvas (restored)', canvas)
       // Additional reinitialization if needed
     }
 

From aa0389c4417d7b32ba4b84e20b9a5a056cf14e8c Mon Sep 17 00:00:00 2001
From: ruucm <ruucm.a@gmail.com>
Date: Sat, 25 Nov 2023 19:01:24 -0800
Subject: [PATCH 4/6] handleContextError & cleanup

---
 .../src-dev/useContextLostFallback.tsx        | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/shadergradient/src-dev/useContextLostFallback.tsx b/packages/shadergradient/src-dev/useContextLostFallback.tsx
index 0b9782ec..d1006db4 100644
--- a/packages/shadergradient/src-dev/useContextLostFallback.tsx
+++ b/packages/shadergradient/src-dev/useContextLostFallback.tsx
@@ -10,25 +10,22 @@ export function useContextLostFallback() {
       event.preventDefault()
       setContextLost(1)
       console.log('[Context Lost]')
-      const canvas = event.srcElement
-      console.log('canvas', canvas)
-
-      // const gl = canvas.getContext('webgl')
-      // console.log('gl', gl)
-      //   const ext = gl.getExtension('WEBGL_lose_context')
-      //   console.log('ext', ext)
     }
 
     const handleContextRestored = (event) => {
       setContextLost(0)
       console.log('[Context Restored]')
-      const canvas = event.srcElement
-      console.log('canvas (restored)', canvas)
       // Additional reinitialization if needed
     }
 
+    const handleContextError = (event) => {
+      setContextLost(2)
+      console.log('[Context Error]')
+    }
+
     renderer.addEventListener('webglcontextlost', handleContextLost)
     renderer.addEventListener('webglcontextrestored', handleContextRestored)
+    renderer.addEventListener('webglcontextcreationerror', handleContextError)
 
     return () => {
       renderer.removeEventListener('webglcontextlost', handleContextLost)
@@ -36,6 +33,10 @@ export function useContextLostFallback() {
         'webglcontextrestored',
         handleContextRestored
       )
+      renderer.removeEventListener(
+        'webglcontextcreationerror',
+        handleContextError
+      )
     }
   }
 

From 212514ca5001e8a4b31ccac0fdc76ccafb117441 Mon Sep 17 00:00:00 2001
From: ruucm <ruucm.a@gmail.com>
Date: Sat, 25 Nov 2023 19:04:24 -0800
Subject: [PATCH 5/6] WebGLContextLostPlaceholder

---
 .../src-dev/ShaderGradientCanvas.tsx          | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx b/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx
index 7e2771e4..fa8a085a 100644
--- a/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx
+++ b/packages/shadergradient/src-dev/ShaderGradientCanvas.tsx
@@ -11,14 +11,11 @@ export function ShaderGradientCanvas({
 }: any) {
   const [contextLost, handleContextEvents]: any = useContextLostFallback()
 
+  if (contextLost === 1) return <WebGLContextLostPlaceholder />
   return (
     <>
       {/* Disable drag rotations of gradeint (for Framer & Figma) */}
       {/* <style>{`#gradientCanvas canvas { pointer-events: none; }`}</style> */}
-      <div style={{ color: 'green' }}>
-        contextLost: {contextLost}
-        {contextLost === 1 && <div>Restoring graphics...</div>}
-      </div>
       <Canvas
         id='gradientCanvas'
         key={pixelDensity + fov}
@@ -33,3 +30,29 @@ export function ShaderGradientCanvas({
     </>
   )
 }
+
+function WebGLContextLostPlaceholder() {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: 'linear-gradient(to right, #ff7e5f, #feb47b)', // Example gradient
+        color: 'white',
+        fontSize: '20px',
+        textAlign: 'center',
+        padding: '20px',
+        fontFamily: 'Inter',
+        fontWeight: '500',
+      }}
+    >
+      <p>
+        The graphics context has been lost. Please wait while we try to restore
+        it...
+      </p>
+    </div>
+  )
+}

From 3eb5578fecfce4ac759f054e27aefa213910a629 Mon Sep 17 00:00:00 2001
From: ruucm <ruucm.a@gmail.com>
Date: Sat, 25 Nov 2023 19:04:30 -0800
Subject: [PATCH 6/6] restore pp

---
 packages/shadergradient/src-dev/Gradient/ShaderGradient.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shadergradient/src-dev/Gradient/ShaderGradient.tsx b/packages/shadergradient/src-dev/Gradient/ShaderGradient.tsx
index 6d88d48c..1f601d0e 100644
--- a/packages/shadergradient/src-dev/Gradient/ShaderGradient.tsx
+++ b/packages/shadergradient/src-dev/Gradient/ShaderGradient.tsx
@@ -29,7 +29,7 @@ export function ShaderGradient({
   const { lightType, envPreset, brightness, grain, toggleAxis, ...others } =
     controlProps
 
-  // usePostProcessing(grain === 'off')
+  usePostProcessing(grain === 'off')
 
   return (
     <>