From bb38531b697bbb832cb842983b71324974d46a51 Mon Sep 17 00:00:00 2001
From: YeonV <trusted.yeon@gmail.com>
Date: Sat, 18 Jan 2025 00:45:55 +0100
Subject: [PATCH] SetDefault Pixelgraph variant: canvas

---
 .../PixelGraph/PixelGraphCanvas.tsx           | 113 +++++++++++++++---
 .../Settings/PixelGraphsSettingsCard.tsx      |  21 +++-
 src/store/ui-persist/storeUIpersist.tsx       |   2 +-
 src/utils/helpers.ts                          |   2 +-
 4 files changed, 116 insertions(+), 22 deletions(-)

diff --git a/src/components/PixelGraph/PixelGraphCanvas.tsx b/src/components/PixelGraph/PixelGraphCanvas.tsx
index 31cf7f1c..b6e589df 100644
--- a/src/components/PixelGraph/PixelGraphCanvas.tsx
+++ b/src/components/PixelGraph/PixelGraphCanvas.tsx
@@ -91,27 +91,102 @@ const PixelGraphCanvas = ({
   if (!(graphs || intGraphs)) {
     return null
   }
+  const totalPixels = virtuals[virtId]?.pixel_count || 1
+  const rows = showMatrix ? virtuals[virtId]?.config?.rows || 1 : 1
+  const cols = totalPixels / rows || 1
 
   return (
-    <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 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>
   )
 }
 
diff --git a/src/pages/Settings/PixelGraphsSettingsCard.tsx b/src/pages/Settings/PixelGraphsSettingsCard.tsx
index 79bcd6eb..fbfe726b 100644
--- a/src/pages/Settings/PixelGraphsSettingsCard.tsx
+++ b/src/pages/Settings/PixelGraphsSettingsCard.tsx
@@ -3,6 +3,7 @@ import { Input, Divider, Select, MenuItem } from '@mui/material'
 import { SettingsSlider, SettingsRow } from './SettingsComponents'
 import useStore from '../../store/useStore'
 import useSliderStyles from '../../components/SchemaForm/components/Number/BladeSlider.styles'
+import { PixelGraphVariants } from '../../store/ui-persist/storeUIpersist'
 
 const PixelGraphsSettingsCard = () => {
   const sliderClasses = useSliderStyles()
@@ -15,7 +16,10 @@ const PixelGraphsSettingsCard = () => {
   const virtual2dLimit = useStore((state) => state.ui.virtual2dLimit)
   const setVirtual2dLimit = useStore((state) => state.ui.setVirtual2dLimit)
   const setShowWarning = useStore((state) => state.setWarnings)
-
+  const setPixelGraphSettings = useStore((state) => state.setPixelGraphSettings)
+  const variants = useStore(
+    (state) => state.uiPersist.pixelGraphSettings?.variants
+  )
   const [fps, setFps] = useState(30)
   const [pixelLength, setPixelLength] = useState(50)
   const [uiBrightnessBoost, setUiBrightnessBoost] = useState(0)
@@ -56,6 +60,21 @@ const PixelGraphsSettingsCard = () => {
 
   return (
     <>
+      <SettingsRow title="Graphs" step="zero" beta>
+        <Select
+          sx={{ width: 150 }}
+          disableUnderline
+          multiple
+          value={variants}
+          onChange={(e) => setPixelGraphSettings('variants', e.target.value)}
+        >
+          {PixelGraphVariants.map((variant) => (
+            <MenuItem key={variant} value={variant}>
+              {variant}
+            </MenuItem>
+          ))}
+        </Select>
+      </SettingsRow>
       <SettingsRow title={schemaTransmissionMode?.title} step="zero">
         <Select
           disableUnderline
diff --git a/src/store/ui-persist/storeUIpersist.tsx b/src/store/ui-persist/storeUIpersist.tsx
index 63d42432..4833d5c9 100644
--- 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: ['original'] as PixelGraphVariant[]
+    variants: ['canvas'] as PixelGraphVariant[]
   }
 })
 
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index d709c53a..14a0213f 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -3,7 +3,7 @@
 import { IMCell } from '../pages/Devices/EditVirtuals/EditMatrix/M.utils'
 
 export const drawerWidth = 240
-export const frontendConfig = 15
+export const frontendConfig = 16
 
 export const formatTime = (dura: number) => {
   let seconds: string | number