Fix PixelGraph scaling

YeonV · Jan 20, 2025 · 855119d · 855119d
1 parent 8bdcc66
commit 855119d
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 113 deletions.
diff --git a/src/components/PixelGraph/PixelGraph.tsx b/src/components/PixelGraph/PixelGraph.tsx
@@ -29,9 +29,10 @@ const PixelGraph = ({
   const variants = useStore(
     (state) => state.uiPersist.pixelGraphSettings?.variants
   )
+  console.log('variants', variants, typeof variants, variants[0])
   return (
     <>
-      {variants.includes('original') && (
+      {variants === 'original' && (
         <PixelGraphBase
           virtId={virtId}
           dummy={dummy}
@@ -44,7 +45,7 @@ const PixelGraph = ({
           onDoubleClick={onDoubleClick}
         />
       )}
-      {variants.includes('canvas') && (
+      {variants === 'canvas' && (
         <PixelGraphCanvas
           virtId={virtId}
           dummy={dummy}
@@ -57,7 +58,7 @@ const PixelGraph = ({
           onDoubleClick={onDoubleClick}
         />
       )}
-      {variants.includes('canvasOffscreen') && (
+      {variants === 'canvasOffscreen' && (
         <PixelGraphCanvasOffscreen
           virtId={virtId}
           dummy={dummy}
@@ -70,7 +71,7 @@ const PixelGraph = ({
           onDoubleClick={onDoubleClick}
         />
       )}
-      {variants.includes('canvasOffscreenWebGL') && (
+      {variants === 'canvasOffscreenWebGL' && (
         <PixelGraphCanvasOffscreenWebGL
           virtId={virtId}
           dummy={dummy}
@@ -83,7 +84,7 @@ const PixelGraph = ({
           onDoubleClick={onDoubleClick}
         />
       )}
-      {variants.includes('canvasOffscreenWebGLSync') && (
+      {variants === 'canvasOffscreenWebGLSync' && (
         <PixelGraphCanvasOffscreenWebGLSync
           virtId={virtId}
           dummy={dummy}

diff --git a/src/components/PixelGraph/PixelGraphBase.tsx b/src/components/PixelGraph/PixelGraphBase.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import useStore from '../../store/useStore'
 import { useShallow } from 'zustand/shallow'
 import hexColor from '../../pages/Devices/EditVirtuals/EditMatrix/Actions/hexColor'
+import ws from '../../utils/Websocket'
 
 const PixelGraphBase = ({
   virtId,
@@ -33,6 +34,7 @@ const PixelGraphBase = ({
   const showWarning = useStore((state) => state.uiPersist.warnings.lessPixels)
   const round = useStore((state) => state.uiPersist.pixelGraphSettings?.round)
   const space = useStore((state) => state.uiPersist.pixelGraphSettings?.space)
+  const features = useStore((state) => state.features)
   const stretch = useStore(
     (state) => state.uiPersist.pixelGraphSettings?.stretch
   )
@@ -65,6 +67,18 @@ const PixelGraphBase = ({
         setPixels(e.detail.pixels)
         if (e.detail.shape[0] !== shape[0] && e.detail.shape[1] !== shape[1])
           setShape(e.detail.shape)
+        if (features.websocket_debug) {
+          if (ws && typeof ws !== 'string' && e.detail.timestamp) {
+            const request = {
+              type: 'event',
+              event_type: 'visualisation_updated',
+              id: e.detail.rid,
+              vis_id: virtId,
+              timestamp: e.detail.timestamp
+            }
+            ws.send(JSON.stringify(request))
+          }
+        }
       }
     }
     document.addEventListener('visualisation_update', handleWebsockets)

diff --git a/src/components/PixelGraph/PixelGraphCanvas.tsx b/src/components/PixelGraph/PixelGraphCanvas.tsx
@@ -90,7 +90,7 @@ const PixelGraphCanvas = ({
         ctx.putImageData(imageData, 0, 0)
 
         if (features.websocket_debug) {
-          if (ws && typeof ws !== 'string') {
+          if (ws && typeof ws !== 'string' && e.detail.timestamp) {
             const request = {
               type: 'event',
               event_type: 'visualisation_updated',
@@ -131,97 +131,25 @@ const PixelGraphCanvas = ({
   // const cols = totalPixels / rows || 1
 
   return (
-    <div style={{ position: 'relative' }}>
-      <canvas
-        ref={canvasRef}
-        className={`${className} ${active ? 'active' : ''}`}
-        style={{
-          maxWidth: fullScreen ? '100vw' : '520px',
-          maxHeight: fullScreen ? '100vh' : 'unset',
-          height:
-            !render || virtuals[virtId]?.config?.rows < 2 || !showMatrix
-              ? '20px'
-              : 'auto',
-          width: '100%',
-          borderRadius: '10px',
-          overflow: 'hidden',
-          margin: db ? 0 : '0.5rem 0 0 0',
-          imageRendering: smoothing ? 'unset' : 'pixelated',
-          objectFit: stretch ? 'fill' : 'contain'
-        }}
-        onDoubleClick={onDoubleClick}
-      />
-      {/* <div
-        onDoubleClick={() => {
-          onDoubleClick()
-        }}
-        style={{
-          maxWidth: fullScreen ? '100vw' : '520px',
-          maxHeight: fullScreen ? '100vh' : 'unset',
-          display: 'flex',
-          flexDirection:
-            virtuals[virtId].id === 'launchpad-x' ||
-            virtuals[virtId].id === 'launchpad-x-matrix'
-              ? 'column-reverse'
-              : 'column',
-          width: '100%',
-          height: '100%',
-          borderRadius: '10px',
-          overflow: 'hidden',
-          margin: db ? 0 : '0.5rem 0 0 0',
-          objectFit: stretch ? 'fill' : 'contain',
-          position: 'absolute',
-          top: 0,
-          left: 0
-          // right: 0,
-          // bottom: 0
-        }}
-        className={`${className} ${active ? 'active' : ''}`}
-      >
-        {Array.from(Array(rows).keys()).map((row) => (
-          <div
-            key={`row-${row}`}
-            style={{
-              maxWidth: fullScreen ? '100vw' : '520px',
-              maxHeight: fullScreen ? 'calc(100vh - 200px)' : 'unset',
-              display: 'flex',
-              width: '100%',
-              borderRadius: '0',
-              overflow: 'hidden',
-              margin: '0',
-              background: 'red'
-            }}
-            className={`${className} ${active ? 'active' : ''}`}
-          >
-            {Array.from(Array(cols).keys())
-              .slice(row * cols, (row + 1) * cols)
-              .map((_p: any, i: number) => (
-                <div
-                  key={i}
-                  style={{
-                    flex: 1,
-                    margin: `${db || (totalPixels > 100 && rows > 7) ? 1 : 2}px`,
-                    borderRadius:
-                      db || (totalPixels > 100 && rows > 7) ? '50%' : '5px',
-                    position: 'relative',
-                    overflow: 'hidden',
-                    maxWidth: db ? 3.6 : `${100 / cols}%`,
-                    maxHeight: db ? 3.6 : `${100 / cols}%`
-                  }}
-                >
-                  <div
-                    style={{
-                      width: '100%',
-                      paddingBottom: '100%',
-                      backgroundColor: 'green'
-                    }}
-                  />
-                </div>
-              ))}
-          </div>
-        ))}
-      </div> */}
-    </div>
+    <canvas
+      ref={canvasRef}
+      className={`${className} ${active ? 'active' : ''}`}
+      style={{
+        maxWidth: fullScreen ? '100vw' : '520px',
+        maxHeight: fullScreen ? '100vh' : 'unset',
+        height:
+          !render || virtuals[virtId]?.config?.rows < 2 || !showMatrix
+            ? '20px'
+            : 'auto',
+        width: '100%',
+        borderRadius: '10px',
+        overflow: 'hidden',
+        margin: db ? 0 : '0.5rem 0 0 0',
+        imageRendering: smoothing ? 'unset' : 'pixelated',
+        objectFit: stretch && fullScreen ? 'contain' : 'fill'
+      }}
+      onDoubleClick={onDoubleClick}
+    />
   )
 }
 

diff --git a/src/components/PixelGraph/PixelGraphCanvasOffscreen.tsx b/src/components/PixelGraph/PixelGraphCanvasOffscreen.tsx
@@ -104,7 +104,7 @@ const PixelGraphCanvasOffscreen = ({
         overflow: 'hidden',
         margin: db ? 0 : '0.5rem 0 0 0',
         imageRendering: smoothing ? 'unset' : 'pixelated',
-        objectFit: stretch ? 'fill' : 'contain'
+        objectFit: stretch && fullScreen ? 'contain' : 'fill'
       }}
       onDoubleClick={onDoubleClick}
     />

diff --git a/src/components/PixelGraph/PixelGraphCanvasOffscreenWebGL.tsx b/src/components/PixelGraph/PixelGraphCanvasOffscreenWebGL.tsx
@@ -104,7 +104,7 @@ const PixelGraphCanvasOffscreenWebGL = ({
         overflow: 'hidden',
         margin: db ? 0 : '0.5rem 0 0 0',
         imageRendering: smoothing ? 'unset' : 'pixelated',
-        objectFit: stretch ? 'fill' : 'contain'
+        objectFit: stretch && fullScreen ? 'contain' : 'fill'
       }}
       onDoubleClick={onDoubleClick}
     />

diff --git a/src/components/PixelGraph/PixelGraphCanvasOffscreenWebGLSync.tsx b/src/components/PixelGraph/PixelGraphCanvasOffscreenWebGLSync.tsx
@@ -120,7 +120,7 @@ const PixelGraphCanvasOffscreenWebGLSync = ({
         overflow: 'hidden',
         margin: db ? 0 : '0.5rem 0 0 0',
         imageRendering: smoothing ? 'unset' : 'pixelated',
-        objectFit: stretch ? 'fill' : 'contain'
+        objectFit: stretch && fullScreen ? 'contain' : 'fill'
       }}
       onDoubleClick={onDoubleClick}
     />

diff --git a/src/store/ui-persist/storeUIpersist.tsx b/src/store/ui-persist/storeUIpersist.tsx
@@ -32,7 +32,7 @@ const storeUIPersist = (set: any) => ({
     round: true,
     space: true,
     stretch: true,
-    variants: ['canvas'] as PixelGraphVariant[]
+    variants: 'canvas' as PixelGraphVariant
   }
 })
 

diff --git a/src/store/ui-persist/storeUIpersistActions.tsx b/src/store/ui-persist/storeUIpersistActions.tsx
@@ -51,7 +51,7 @@ const storeUIPersistActions = (set: any) => ({
   ): void =>
     set(
       produce((state: IStore) => {
-        state.uiPersist.pixelGraphSettings[key] = val
+        ;(state.uiPersist.pixelGraphSettings as any)[key] = val
       }),
       false,
       'uiPersist/setPixelGraphSettings'

diff --git a/src/utils/Websocket.ts b/src/utils/Websocket.ts
@@ -97,17 +97,29 @@ function createSocket() {
           return
         }
         if (data.event_type === 'visualisation_update') {
-          document.dispatchEvent(
-            new CustomEvent('visualisation_update', {
-              detail: {
-                id: data.vis_id,
-                pixels: data.pixels,
-                shape: data.shape,
-                rid: data.id,
-                timestamp: data.timestamp
-              }
-            })
-          )
+          if (data.timestamp) {
+            document.dispatchEvent(
+              new CustomEvent('visualisation_update', {
+                detail: {
+                  id: data.vis_id,
+                  pixels: data.pixels,
+                  shape: data.shape,
+                  rid: data.id,
+                  timestamp: data.timestamp
+                }
+              })
+            )
+          } else {
+            document.dispatchEvent(
+              new CustomEvent('visualisation_update', {
+                detail: {
+                  id: data.vis_id,
+                  pixels: data.pixels,
+                  shape: data.shape
+                }
+              })
+            )
+          }
         }
         if (data.event_type === 'devices_updated') {
           document.dispatchEvent(