From e97bae0065aaca4ba0148f62f7b85fc27a3c3c99 Mon Sep 17 00:00:00 2001 From: Yeon Vinzenz Varapragasam Date: Thu, 18 Jul 2024 18:13:56 +0200 Subject: [PATCH] Release 2.0.99-b5 --- package.json | 2 +- src/components/Dialogs/AddDeviceDialog.tsx | 2 +- .../Dialogs/AddIntegrationDialog.tsx | 2 +- src/components/Dialogs/AddVirtualDialog.tsx | 2 +- src/components/Dialogs/NoHostDialog.tsx | 2 +- src/components/Tours/Tour2dVirtual.tsx | 13 +- .../EditMatrix/Actions/assignPixels.ts | 9 +- .../Devices/EditVirtuals/EditMatrix/M.tsx | 382 ++++++------- .../EditVirtuals/EditMatrix/MControls.tsx | 522 ++++++++++-------- .../EditVirtuals/EditMatrix/MSlider.tsx | 4 +- .../EditVirtuals/EditMatrix/MWrapper.tsx | 2 +- .../EditVirtuals/EditVirtuals.styles.tsx | 2 +- .../Devices/EditVirtuals/EditVirtuals.tsx | 39 +- .../Devices/EditVirtuals/PixelSlider.tsx | 8 +- src/store/ui/storeUI.tsx | 7 +- 15 files changed, 512 insertions(+), 486 deletions(-) diff --git a/package.json b/package.json index 037cd9a9..04cadfdd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ledfx", - "version": "2.0.99-b4", + "version": "2.0.99-b5", "description": "LedFx v2 - BladeMOD", "author": "YeonV aka Blade", "private": true, diff --git a/src/components/Dialogs/AddDeviceDialog.tsx b/src/components/Dialogs/AddDeviceDialog.tsx index ac7882ab..d20c585f 100644 --- a/src/components/Dialogs/AddDeviceDialog.tsx +++ b/src/components/Dialogs/AddDeviceDialog.tsx @@ -151,7 +151,7 @@ const AddDeviceDialog = () => { } useEffect(() => { handleTypeChange(initial.type, initial.config) - }, [initial.type, initial.config]) + }, [initial.type, JSON.stringify(initial.config)]) return ( { useEffect(() => { handleTypeChange(initial.type, initial.config) - }, [initial.type, initial.config]) + }, [initial.type, JSON.stringify(initial.config)]) return ( { useEffect(() => { handleModelChange(initial.config) // eslint-disable-next-line react-hooks/exhaustive-deps - }, [virtId, initial.config]) + }, [virtId, JSON.stringify(initial.config)]) return ( <> diff --git a/src/components/Dialogs/NoHostDialog.tsx b/src/components/Dialogs/NoHostDialog.tsx index dfa03db0..9b462f9e 100644 --- a/src/components/Dialogs/NoHostDialog.tsx +++ b/src/components/Dialogs/NoHostDialog.tsx @@ -66,7 +66,7 @@ export default function NoHostDialog() { useEffect(() => { if (storedURL) setHostvalue(storedURL) if (storedURLs) setHosts(storedURLs) - }, [storedURL, setHosts, storedURLs]) + }, [storedURL, setHosts, JSON.stringify(storedURLs)]) useEffect(() => { if (!storedURL) { diff --git a/src/components/Tours/Tour2dVirtual.tsx b/src/components/Tours/Tour2dVirtual.tsx index 03f1a027..17407e3a 100644 --- a/src/components/Tours/Tour2dVirtual.tsx +++ b/src/components/Tours/Tour2dVirtual.tsx @@ -1,7 +1,7 @@ import { useState } from 'react' -import { Button, useTheme } from '@mui/material' +import { Button, IconButton, Tooltip, useTheme } from '@mui/material' import Tour from 'reactour' -import { Info } from '@mui/icons-material' +import { Help, Info, QuestionMark, QuestionMarkOutlined, QuestionMarkRounded } from '@mui/icons-material' import useStore from '../../store/useStore' const steps = [ @@ -170,14 +170,15 @@ const Tour2dVirtual = () => { const theme = useTheme() return ( <> - + + + { let updatedM: IMCell[][] = clone(m) const [col, row] = currentCell - console.log('direction', direction) if (typeof selectedPixel === 'number') { updatedM[row][col] = { deviceId: currentDevice, @@ -47,7 +46,7 @@ const assignPixels = ({ group: `${row}-${col}` } if (direction.includes('diagonal-top-right')) { - for (let index = 0; index < Math.abs(selectedPixel[1] - selectedPixel[0]) && row - index >= 0 && col + index < colN; index++) { + for (let index = 0; index <= Math.abs(selectedPixel[1] - selectedPixel[0]) && row - index >= 0 && col + index < colN; index++) { const newM = { deviceId: currentDevice, pixel: Math.min(selectedPixel[0], selectedPixel[1]) + index, @@ -58,7 +57,7 @@ const assignPixels = ({ } else if (direction.includes('diagonal-bottom-right')) { - for (let index = 0; index < Math.abs(selectedPixel[1] - selectedPixel[0]) && row + index < rowN && col + index < colN; index++) { + for (let index = 0; index <= Math.abs(selectedPixel[1] - selectedPixel[0]) && row + index < rowN && col + index < colN; index++) { const newM = { deviceId: currentDevice, pixel: Math.min(selectedPixel[0], selectedPixel[1]) + index, @@ -69,7 +68,7 @@ const assignPixels = ({ } else if (direction.includes('diagonal-bottom-left')) { - for (let index = 0; index < Math.abs(selectedPixel[1] - selectedPixel[0]) && row + index < rowN && col - index >= 0; index++) { + for (let index = 0; index <= Math.abs(selectedPixel[1] - selectedPixel[0]) && row + index < rowN && col - index >= 0; index++) { const newM = { deviceId: currentDevice, pixel: Math.min(selectedPixel[0], selectedPixel[1]) + index, @@ -80,7 +79,7 @@ const assignPixels = ({ } else if (direction.includes('diagonal-top-left')) { - for (let index = 0; index < Math.abs(selectedPixel[1] - selectedPixel[0]) && row - index >= 0 && col - index >= 0; index++) { + for (let index = 0; index <= Math.abs(selectedPixel[1] - selectedPixel[0]) && row - index >= 0 && col - index >= 0; index++) { const newM = { deviceId: currentDevice, pixel: Math.min(selectedPixel[0], selectedPixel[1]) + index, diff --git a/src/pages/Devices/EditVirtuals/EditMatrix/M.tsx b/src/pages/Devices/EditVirtuals/EditMatrix/M.tsx index f8d5d57d..ac24dc78 100644 --- a/src/pages/Devices/EditVirtuals/EditMatrix/M.tsx +++ b/src/pages/Devices/EditVirtuals/EditMatrix/M.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/indent */ import { useEffect, useRef, useState, FC } from 'react' -import { Box, Button, Stack } from '@mui/material' +import { Box, Stack, useTheme } from '@mui/material' import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch' import { DndContext, DragEndEvent } from '@dnd-kit/core' import { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers' @@ -11,7 +11,6 @@ import { getMaxRange, getOpacity } from './M.utils' -import { reverseProcessArray } from './processMatrix' import type { IMCell, IDir } from './M.utils' import useStore from '../../../../store/useStore' import useStyles from './M.styles' @@ -28,12 +27,11 @@ import Tour2dVirtual from '../../../../components/Tours/Tour2dVirtual' const EditMatrix: FC<{ virtual: any }> = ({ virtual }) => { const classes = useStyles() + const theme = useTheme() const deviceRef = useRef(null) - const [showPixelGraph, setShowPixelGraph] = useState(false) - const pixelGraphs = useStore((state) => state.pixelGraphs) + const devices = useStore((state) => state.devices) - const virtuals = useStore((state) => state.virtuals) const mode = useStore((state) => state.config).transmission_mode const addDevice = useStore((state) => state.addDevice) const getDevices = useStore((state) => state.getDevices) @@ -162,24 +160,7 @@ const EditMatrix: FC<{ virtual: any }> = ({ virtual }) => { setIsDragging(false) } - /** - * Update the pixel-graphs when the virtual changes - */ - useEffect(() => { - const handleWebsockets = (e: any) => { - if (e.detail.id === virtual.id) { - setPixels(e.detail.pixels) - } - } - if (showPixelGraph && virtual.id) { - document.addEventListener('visualisation_update', handleWebsockets) - } else { - document.removeEventListener('visualisation_update', handleWebsockets) - } - return () => { - document.removeEventListener('visualisation_update', handleWebsockets) - } - }, [virtuals, pixelGraphs, showPixelGraph, virtual]) + /** * Set the selected pixel when the group changes @@ -284,25 +265,7 @@ const EditMatrix: FC<{ virtual: any }> = ({ virtual }) => { return ( - - - - - - + = ({ virtual }) => { setMove={setMove} selectedGroup={selectedGroup} setError={setError} + setPixels={setPixels} /> - - -
-
- handleDragEnd(e)} - onDragOver={(e) => - setHoveringCell( - (e.over?.id as any)?.split('-').map(Number) || [-1, -1] - ) - } - onDragStart={() => { - // console.log('zy', e.active?.id, hoveringCell, selectedGroup) - setIsDragging(true) - }} - > - {m.map((yzrow, currentRowIndex) => ( -
- {yzrow.map((yzcolumn: IMCell, currentColIndex: number) => { - const bg = getBackgroundColor( - mode, - decodedPixels, - pixels, - currentRowIndex, - colN, - currentColIndex - ) - const op = getOpacity(move, yzcolumn, selectedGroup) - return ( - -1 && hoveringCell[1] > -1 - ? m[hoveringCell[1]][hoveringCell[0]] - : undefined - } - id={`${currentColIndex}-${currentRowIndex}`} - key={`col-${currentColIndex}`} - bg={bg} - opacity={op} - onContextMenu={(e) => - handleContextMenu( - e, - currentColIndex, - currentRowIndex, - yzcolumn - ) - } - > - + + +
+
+ handleDragEnd(e)} + onDragOver={(e) => + setHoveringCell( + (e.over?.id as any)?.split('-').map(Number) || [-1, -1] + ) + } + onDragStart={() => { + // console.log('zy', e.active?.id, hoveringCell, selectedGroup) + setIsDragging(true) + }} + > + {m.map((yzrow, currentRowIndex) => ( +
+ {yzrow.map((yzcolumn: IMCell, currentColIndex: number) => { + const bg = getBackgroundColor( + mode, + decodedPixels, + pixels, + currentRowIndex, + colN, + currentColIndex + ) + const op = getOpacity(move, yzcolumn, selectedGroup) + return ( + -1 && hoveringCell[1] > -1 + ? m[hoveringCell[1]][hoveringCell[0]] + : undefined + } + id={`${currentColIndex}-${currentRowIndex}`} key={`col-${currentColIndex}`} + bg={bg} + opacity={op} onContextMenu={(e) => handleContextMenu( e, @@ -394,110 +348,122 @@ const EditMatrix: FC<{ virtual: any }> = ({ virtual }) => { yzcolumn ) } - sx={{ - backgroundColor: bg, - opacity: op - }} > - {dnd ? ( - m[currentRowIndex][currentColIndex].deviceId !== - '' ? ( - - + handleContextMenu( + e, + currentColIndex, + currentRowIndex, + yzcolumn + ) + } + sx={{ + backgroundColor: bg, + opacity: op + }} + > + {dnd ? ( + m[currentRowIndex][currentColIndex].deviceId !== + '' ? ( + - ) => setAnchorEl(e.currentTarget)} - isDragging={isDragging} - /> - - ) : null - ) : ( - - ) => setAnchorEl(e.currentTarget)} - isDragging={isDragging} - /> - )} - - - ) - })} -
- ))} - + + ) => setAnchorEl(e.currentTarget)} + isDragging={isDragging} + /> + + ) : null + ) : ( + + ) => setAnchorEl(e.currentTarget)} + isDragging={isDragging} + /> + )} + + + ) + })} +
+ ))} + +
+ setAnchorEl(null)} + currentCell={currentCell} + m={m} + setOpen={setOpen} + setMove={setMove} + /> +
- setAnchorEl(null)} - currentCell={currentCell} - m={m} - setOpen={setOpen} - setMove={setMove} - /> - -
- - + + + ) } diff --git a/src/pages/Devices/EditVirtuals/EditMatrix/MControls.tsx b/src/pages/Devices/EditVirtuals/EditMatrix/MControls.tsx index 2ab551ef..a88f9531 100644 --- a/src/pages/Devices/EditVirtuals/EditMatrix/MControls.tsx +++ b/src/pages/Devices/EditVirtuals/EditMatrix/MControls.tsx @@ -5,20 +5,25 @@ import { ArrowUpward, Cancel, ControlCamera, + EmergencyRecording, + Loop, PanTool, + PlayArrow, Rotate90DegreesCw, Save, + Stop, SwapHoriz, - SwapVert + SwapVert, } from '@mui/icons-material' import { Alert, Box, Button, - // Collapse, + Collapse, IconButton, Slider, Stack, + Tooltip, Typography } from '@mui/material' import { useEffect, useState } from 'react' @@ -37,7 +42,7 @@ import moveSelectedGroupRight from './Actions/moveSelectedGroupRight' import moveSelectedGroupDown from './Actions/moveSelectedGroupDown' import useStore from '../../../../store/useStore' import Webcam from '../../../../components/Webcam/Webcam' -// import useStore from '../../../../store/useStore' +import { reverseProcessArray } from './processMatrix' const MControls = ({ rowN, @@ -52,7 +57,8 @@ const MControls = ({ setMove, setDnd, selectedGroup, - setError + setError, + setPixels }: { rowN: number colN: number @@ -67,13 +73,18 @@ const MControls = ({ setDnd: any selectedGroup: string setError: any + setPixels: any }) => { - // const infoAlerts = useStore((state) => state.ui.infoAlerts) - // const setInfoAlerts = useStore((state) => state.ui.setInfoAlerts) const [tab, setTab] = useState('1') + const [camMapper, setCamMapper] = useState(false) const getVirtuals = useStore((state) => state.getVirtuals) const getDevices = useStore((state) => state.getDevices) const features = useStore((state) => state.features) + const [showPixelGraph, setShowPixelGraph] = useState(false) + const pixelGraphs = useStore((state) => state.pixelGraphs) + const virtuals = useStore((state) => state.virtuals) + const infoAlerts = useStore((state) => state.ui.infoAlerts) + const setInfoAlerts = useStore((state) => state.ui.setInfoAlerts) const handleChange = (event: React.SyntheticEvent, newValue: string) => { if (newValue === '1') setDnd(false) @@ -87,275 +98,316 @@ const MControls = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [dnd]) + /** + * Update the pixel-graphs when the virtual changes + */ + useEffect(() => { + const handleWebsockets = (e: any) => { + if (e.detail.id === virtual.id) { + setPixels(e.detail.pixels) + } + } + if (showPixelGraph && virtual.id) { + document.addEventListener('visualisation_update', handleWebsockets) + } else { + document.removeEventListener('visualisation_update', handleWebsockets) + } + return () => { + document.removeEventListener('visualisation_update', handleWebsockets) + } + }, [virtuals, pixelGraphs, showPixelGraph, virtual]) + return ( - {/* {infoAlerts.matrix && ( - - { - setInfoAlerts('matrix', false) - }} - > - Concept Draft -
    -
  • Use Mousewheel to Zoom
    • -
  • Use left-click with drag&drop to move around
    • -
  • Use right-click to assign Pixels
    • -
- - - )} */} - + {!camMapper && <> - - - Rows: - - - - typeof newRowNumber === 'number' && setRowNumber(newRowNumber) - } - /> - - {rowN} + + + + Rows: + + + + typeof newRowNumber === 'number' && setRowNumber(newRowNumber) + } + /> + + {rowN} + + + + Columns: + + + + typeof newColNumber === 'number' && setColNumber(newColNumber) + } + /> + + {colN} + - - - Columns: - - - - typeof newColNumber === 'number' && setColNumber(newColNumber) - } - /> - - {colN} + + + + + + + + + + + + + + + + + + + + + + { + setM(Array(rowN).fill(Array(colN).fill(MCell))) + }} + /> + + + + + + - - - - - - - - { - setM(Array(rowN).fill(Array(colN).fill(MCell))) - }} - /> - - - - - - } - iconPosition="start" - label="Move Group" - value - /> - - {move ? ( - - - - moveSelectedGroupUp({ - m, - rowN, - colN, - selectedGroup, - setError, - setM - }) - } + {move ? ( + + + } + iconPosition="start" + label="Move Group" + value + /> + + - - - - moveSelectedGroupLeft({ + moveSelectedGroupUp({ m, rowN, colN, selectedGroup, + setError, setM }) } > - - - setMove(false)}> - + + + + moveSelectedGroupLeft({ + m, + rowN, + colN, + selectedGroup, + setM + }) + } + > + + + setMove(false)}> + + + + moveSelectedGroupRight({ + m, + rowN, + colN, + selectedGroup, + setM + }) + } + > + + + - moveSelectedGroupRight({ + moveSelectedGroupDown({ m, rowN, colN, selectedGroup, + setError, setM }) } > - + - - moveSelectedGroupDown({ - m, - rowN, - colN, - selectedGroup, - setError, - setM - }) - } - > - - - - - ) : ( - - - Right-Click an element to move a group. -
- Groups can only be moved with the UI buttons - - - )} - - - - } - iconPosition="start" - label="Canvas" - value="1" - /> - } - iconPosition="start" - label="DND" - value="2" - /> - - - - - Canvas Mode -
    -
  • Use Mousewheel to Zoom
    • -
  • Use left-click with drag&drop to move around
    • -
  • Use right-click to:
    • -
      -
    • assign pixel or pixel-group
      • -
    • edit a pixel
      • -
    • clear a pixel
      • -
    • move a pixel-group
      • -
    -
  • Enter DND mode to move pixels individually
    • -
- - - - - DND Mode -
    -
  • move pixels individually with your mouse
    • -
- - - - {features.matrix_cam && } + + ) : ( + + { + setInfoAlerts('matrixGroups', false) + }}> + + Right-Click an element to move a group. +
+ Groups can only be moved with the UI buttons + + + + )} + + + + } + iconPosition="start" + label="DND-Canvas" + value="1" + /> + } + iconPosition="start" + label="DND-Pixels" + value="2" + /> + + + + + { + setInfoAlerts('camera', false) + }}> + DND-Canvas Mode +
    +
  • Use Mousewheel to Zoom
    • +
  • Use left-click with drag&drop to move around
    • +
  • Use right-click to:
    • +
      +
    • assign pixel or pixel-group
      • +
    • edit a pixel
      • +
    • clear a pixel
      • +
    • move a pixel-group
      • +
    +
  • Enter DND-Pixels mode to move pixels individually
    • +
+ + + + + + setInfoAlerts('pixelMode', false)}> + DND-Pixels Mode +
    +
  • move pixels individually with your mouse
    • +
+ + + + + + } + {features.matrix_cam && + <> + + {camMapper && } + } ) } diff --git a/src/pages/Devices/EditVirtuals/EditMatrix/MSlider.tsx b/src/pages/Devices/EditVirtuals/EditMatrix/MSlider.tsx index f7eea12b..9755599f 100644 --- a/src/pages/Devices/EditVirtuals/EditMatrix/MSlider.tsx +++ b/src/pages/Devices/EditVirtuals/EditMatrix/MSlider.tsx @@ -39,8 +39,8 @@ const MSlider = ({ typeof selectedPixel === 'number' ? handleSliderChange(e, parseInt(e.target.value))} /> : - handleSliderChange(e,[parseInt(e.target.value), selectedPixel[1]], 0)} /> - handleSliderChange(e,[selectedPixel[0], parseInt(e.target.value)], 1)} /> + handleSliderChange(e,[parseInt(e.target.value), selectedPixel[1]], 0)} /> + handleSliderChange(e,[selectedPixel[0], parseInt(e.target.value)], 1)} /> } diff --git a/src/pages/Devices/EditVirtuals/EditMatrix/MWrapper.tsx b/src/pages/Devices/EditVirtuals/EditMatrix/MWrapper.tsx index f076cef1..3a1771ca 100644 --- a/src/pages/Devices/EditVirtuals/EditMatrix/MWrapper.tsx +++ b/src/pages/Devices/EditVirtuals/EditMatrix/MWrapper.tsx @@ -11,7 +11,7 @@ const MWrapper = ({ children, move }: any) => { window.screen.orientation.type.split('-')[0] === 'landscape' ? 'row' : 'column', - maxHeight: '90vh', + maxHeight: 'calc(100vh - 64px)', '& .react-transform-wrapper': { // flexGrow: 1, overflow: move ? 'auto' : 'hidden' diff --git a/src/pages/Devices/EditVirtuals/EditVirtuals.styles.tsx b/src/pages/Devices/EditVirtuals/EditVirtuals.styles.tsx index e85547b0..7bc34ebc 100644 --- a/src/pages/Devices/EditVirtuals/EditVirtuals.styles.tsx +++ b/src/pages/Devices/EditVirtuals/EditVirtuals.styles.tsx @@ -3,7 +3,7 @@ import { makeStyles } from '@mui/styles' const useEditVirtualsStyles = makeStyles(() => ({ appBar: { position: 'relative', - marginBottom: '1rem' + // marginBottom: '1rem' // background: theme.palette.background.default, // color: theme.palette.text.primary, }, diff --git a/src/pages/Devices/EditVirtuals/EditVirtuals.tsx b/src/pages/Devices/EditVirtuals/EditVirtuals.tsx index d602061b..d3f5b950 100644 --- a/src/pages/Devices/EditVirtuals/EditVirtuals.tsx +++ b/src/pages/Devices/EditVirtuals/EditVirtuals.tsx @@ -12,7 +12,8 @@ import { Slide, IconButton, ToggleButtonGroup, - ToggleButton + ToggleButton, + Tooltip } from '@mui/material' import { GridOn, @@ -30,6 +31,7 @@ import Segment from './Segment' import useEditVirtualsStyles from './EditVirtuals.styles' import EditMatrix from './EditMatrix/M' import BladeIcon from '../../../components/Icons/BladeIcon/BladeIcon' +import Tour2dVirtual from '../../../components/Tours/Tour2dVirtual' const Transition = React.forwardRef( function Transition(props, ref) { @@ -206,22 +208,25 @@ export default function EditVirtuals({ {virtual.config.name}{' '} - { - calibrationMode(virtual?.id, calib ? 'off' : 'on') - if (!calib && virtual.segments[activeSegment]) - highlightSegment( - virtual.id, - virtual.segments[activeSegment][0], - virtual.segments[activeSegment][1], - virtual.segments[activeSegment][2], - virtual.segments[activeSegment][3] - ) - setCalib(!calib) - }} - > - {calib ? : } - + + + { + calibrationMode(virtual?.id, calib ? 'off' : 'on') + if (!calib && virtual.segments[activeSegment]) + highlightSegment( + virtual.id, + virtual.segments[activeSegment][0], + virtual.segments[activeSegment][1], + virtual.segments[activeSegment][2], + virtual.segments[activeSegment][3] + ) + setCalib(!calib) + }} + > + {calib ? : } + + {matrix ? ( diff --git a/src/pages/Devices/EditVirtuals/PixelSlider.tsx b/src/pages/Devices/EditVirtuals/PixelSlider.tsx index 0da9ab30..92e564fd 100644 --- a/src/pages/Devices/EditVirtuals/PixelSlider.tsx +++ b/src/pages/Devices/EditVirtuals/PixelSlider.tsx @@ -18,14 +18,14 @@ const PixelSlider = ({ s, handleRangeSegment }: any) => { const throttled = useThrottledCallback(handleChange, 100) - useEffect(() => { - getDevices() - }, [getDevices]) - useEffect(() => { setRange([s[1], s[2]]) }, [s]) + useEffect(() => { + getDevices() + }, []) + if (!devices[s[0]]) { return null } diff --git a/src/store/ui/storeUI.tsx b/src/store/ui/storeUI.tsx index 3e0fa7de..bf129f61 100644 --- a/src/store/ui/storeUI.tsx +++ b/src/store/ui/storeUI.tsx @@ -55,10 +55,13 @@ const storeUI = (set: any) => ({ devices: true, user: true, gamepad: true, - matrix: true + matrix: true, + camera: true, + matrixGroups: true, + pixelMode: true }, setInfoAlerts: ( - key: 'scenes' | 'devices' | 'user' | 'gamepad' | 'matrix', + key: 'scenes' | 'devices' | 'user' | 'gamepad' | 'matrix' | 'camera' | 'matrixGroups' | 'pixelMode', val: boolean ): void => set(