Release 2.0.88

YeonV · Jan 12, 2024 · d6f2fbc · d6f2fbc
1 parent 1214110
commit d6f2fbc
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ledfx",
-  "version": "2.0.87",
+  "version": "2.0.88",
   "description": "LedFx v2 - BladeMOD",
   "author": "YeonV aka Blade",
   "private": true,
@@ -28,6 +28,7 @@
     "chart.js": "4.4.1",
     "color": "^4.2.3",
     "crypto": "^1.0.1",
+    "deep-object-diff": "^1.1.9",
     "electron-is-dev": "^2.0.0",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^8.1.0",

diff --git a/src/components/Dialogs/EffectTypeDialog.tsx b/src/components/Dialogs/EffectTypeDialog.tsx
@@ -6,9 +6,10 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   Typography
+  // useTheme
 } from '@mui/material'
 import { useMemo, useState } from 'react'
-import { Search } from '@mui/icons-material'
+import { ArrowDropDown, Search } from '@mui/icons-material'
 import useStore from '../../store/useStore'
 import { EffectDropDownProps } from '../SchemaForm/components/DropDown/DropDown.props'
 import useStyles from '../SchemaForm/components/DropDown/DropDown.styles'
@@ -30,6 +31,7 @@ const EffectTypeDialog = ({
   }
 
   const classes = useStyles()
+  // const theme = useTheme()
   const [formats, setFormats] = useState(
     () => groups && Object.keys(groups).map((c) => c || [])
   )
@@ -74,14 +76,37 @@ const EffectTypeDialog = ({
         onClick={() => setDialogOpen(true)}
         style={{
           cursor: 'pointer',
-          marginBottom: 0
+          marginBottom: 0,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: 0
         }}
       >
         <Typography
           variant="body1"
-          sx={{ color: 'text.secondary', paddingBottom: 1 }}
+          sx={{
+            flexGrow: 1,
+            padding: '16px 1.2rem 14px 1.2rem',
+            borderRadius: '10px',
+            border: '1px solid #666666',
+            '&:hover': {
+              border: '1px solid #f9f9fb'
+            }
+          }}
         >
           {yoptAll.find((o) => o.value === value)?.label || ''}
+          <ArrowDropDown
+            sx={{
+              position: 'absolute',
+              right: 10,
+              top: 16,
+              paddingBottom: 1,
+              fontSize: 30,
+              zIndex: 0
+            }}
+          />
         </Typography>
       </BladeFrame>
       <Dialog

diff --git a/src/components/SchemaForm/components/String/BladeSelect.tsx b/src/components/SchemaForm/components/String/BladeSelect.tsx
@@ -7,7 +7,7 @@ import {
   Button,
   Tooltip
 } from '@mui/material'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import BladeIcon from '../../../Icons/BladeIcon/BladeIcon'
 import BladeFrame from '../BladeFrame'
 import { BladeSelectDefaultProps, BladeSelectProps } from './BladeSelect.props'
@@ -44,6 +44,11 @@ const BladeSelect = ({
           (schema.enum && schema.enum[0])
       : ''
   )
+  useEffect(() => {
+    if (model && model_id && model[model_id] && inputRef.current) {
+      inputRef.current.value = model[model_id]
+    }
+  }, [model, model_id])
   // console.log(schema, model)
   return (
     <BladeFrame
@@ -179,10 +184,11 @@ const BladeSelect = ({
             onBlur={(e) => onChange(model_id, e.target.value)}
             onChange={(e) => {
               if (schema.id === 'icon_name') setIcon(e.target.value)
+              inputRef.current.value = e.target.value
             }}
             style={textStyle as any}
           />
-          {schema.id === 'gif at' && (
+          {schema.id === 'gif_at' && (
             <GifPicker
               onChange={(gif: string) => {
                 onChange(model_id, gif)
@@ -191,10 +197,10 @@ const BladeSelect = ({
             />
           )}
           {/* {schema.id === 'beat frames' &&
-            model['gif at'] &&
-            model['gif at'] !== '' && (
+            model['gif_at'] &&
+            model['gif_at'] !== '' && (
               <GifFrameSelector
-                url={model['gif at']}
+                url={model['gif_at']}
                 onChange={(gif: string) => {
                   onChange(model_id, gif)
                   inputRef.current.value = gif

diff --git a/src/pages/Device/Effects.tsx b/src/pages/Device/Effects.tsx
@@ -27,7 +27,7 @@ import PixelGraph from '../../components/PixelGraph'
 import TourEffect from '../../components/Tours/TourEffect'
 import TroubleshootButton from './TroubleshootButton'
 import { Schema } from '../../components/SchemaForm/SchemaForm/SchemaForm.props'
-import { EffectConfig } from '../../store/api/storeVirtuals'
+import { EffectConfig, Virtual } from '../../store/api/storeVirtuals'
 
 const configOrder = ['color', 'number', 'integer', 'string', 'boolean']
 
@@ -87,6 +87,7 @@ const EffectsCard = ({ virtId }: { virtId: string }) => {
   const viewMode = useStore((state) => state.viewMode)
   const updateVirtual = useStore((state) => state.updateVirtual)
   const features = useStore((state) => state.features)
+  const [virtual, setVirtual] = useState<Virtual | undefined>(undefined)
 
   const graphs = useStore((state) => state.graphs)
   const getV = () => {
@@ -96,7 +97,11 @@ const EffectsCard = ({ virtId }: { virtId: string }) => {
       }
     }
   }
-  const virtual = getV()
+
+  useEffect(() => {
+    const v = getV()
+    if (v) setVirtual(v)
+  }, [JSON.stringify(virtuals[virtId])])
 
   const effectType = virtual && virtual.effect.type
   const [theModel, setTheModel] = useState(virtual?.effect?.config)
@@ -148,9 +153,32 @@ const EffectsCard = ({ virtId }: { virtId: string }) => {
   }, [graphs, setPixelGraphs, getVirtuals, getSchemas, effectType])
 
   useEffect(() => {
-    if (virtuals && virtual?.effect?.config) setTheModel(virtual.effect.config)
-  }, [virtuals, virtual, virtual?.effect, virtual?.effect.config, effectType])
+    // if (virtuals && virtual?.effect?.config) {
+    //   setTheModel(virtual.effect.config)
+    // } else
+
+    if (
+      virtuals &&
+      virtuals[virtId]?.effect?.config &&
+      JSON.stringify(theModel) !==
+        JSON.stringify(virtuals[virtId].effect.config)
+    ) {
+      // console.log('virtuals[virtId]', virtuals[virtId].effect?.config)
+
+      setTheModel(virtual?.effect.config)
+    }
+  }, [
+    virtuals,
+    virtuals[virtId],
+    virtuals[virtId]?.effect,
+    JSON.stringify(virtuals[virtId]?.effect?.config),
+    virtual,
+    virtual?.effect,
+    virtual?.effect.config,
+    effectType
+  ])
 
+  // console.log('virtual', virtual?.effect?.config)
   return (
     <>
       <Card
@@ -230,7 +258,9 @@ const EffectsCard = ({ virtId }: { virtId: string }) => {
                   }
             }
             style={{
-              transitionDuration: `${virtual!.config.transition_time * 1000}`
+              transitionDuration: `${
+                (virtual?.config?.transition_time || 1) * 1000
+              }`
             }}
           >
             <PixelGraph

diff --git a/src/pages/Device/Presets.tsx b/src/pages/Device/Presets.tsx
@@ -16,6 +16,7 @@ import {
 } from '@mui/material'
 import { Add, Cloud, Delete, Sync } from '@mui/icons-material'
 import axios from 'axios'
+// import { diff } from 'deep-object-diff'
 import useStore from '../../store/useStore'
 import Popover from '../../components/Popover/Popover'
 import CloudScreen from './Cloud/Cloud'
@@ -194,6 +195,11 @@ const PresetsCard = ({ virtual, effectType, presets, style }: any) => {
     return (
       list &&
       Object.keys(list).map((preset) => {
+        // if (
+        //   Object.keys(diff(virtual.effect.config, list[preset].config)).length >
+        //   0
+        // )
+        //   console.log(preset, diff(virtual.effect.config, list[preset].config))
         return (
           <Grid item key={preset}>
             {CATEGORY !== 'default_presets' ? (

diff --git a/src/store/api/storeVirtuals.tsx b/src/store/api/storeVirtuals.tsx
@@ -52,6 +52,18 @@ export interface EffectConfig {
   fake_beat?: boolean
   rotate?: number
   test?: string
+  speed_x?: number
+  size_x?: number
+  pulse_period?: number
+  pulse_ratio?: number
+  flash_color?: string
+  capture?: boolean
+  cpu_secs?: number
+  v_density?: number
+  twist?: number
+  radius?: number
+  density?: number
+  lower?: number
 }
 
 export interface Effect {