Merge branch 'extend-clear-layer' of github.com:folivaresrios/Bazecor…

… into folivaresrios-extend-clear-layer

src/renderer/components/molecules/CustomModal/ClearLayerDialog.tsx

@@ -10,20 +10,25 @@ import { NOKEY_KEY_CODE, TRANS_KEY_CODE } from "../../../../api/keymap/types";
 export interface OnConfirmProps {
   keyCode: number;
   colorIndex: number;
+  chooseYourKeyboardSide: KeyboardSide;
 }
 
+type KeyboardSide = "BOTH" | "LEFT" | "RIGHT";
+
 interface ClearLayerDialogProps {
   open: boolean;
   onCancel: () => void;
   onConfirm: (props: OnConfirmProps) => void;
   colors?: PaletteType[];
   selectedColorIndex?: number;
   fillWithNoKey?: boolean;
+  keyboardSide?: KeyboardSide;
 }
 
 export const ClearLayerDialog = (props: ClearLayerDialogProps): JSX.Element => {
-  const { open, onCancel, onConfirm, colors, selectedColorIndex, fillWithNoKey } = props;
+  const { open, onCancel, onConfirm, colors, selectedColorIndex, fillWithNoKey, keyboardSide } = props;
   const [useNoKey, setUseNoKey] = useState(fillWithNoKey ?? false);
+  const [chooseYourKeyboardSide, setChooseYourKeyboardSide] = useState(keyboardSide ?? "BOTH");
   const [indexOfSelectedColor, setIndexOfSelectedColor] = useState(selectedColorIndex ?? -1);
   const createLabel = (text: string, forId: string) => (
     <label htmlFor={forId} className="grow m-0 font-semibold">
@@ -35,6 +40,10 @@ export const ClearLayerDialog = (props: ClearLayerDialogProps): JSX.Element => {
     setUseNoKey(value);
   };
 
+  const chooseYourKeyboardSideUpdate = (value: KeyboardSide) => {
+    setChooseYourKeyboardSide(value);
+  };
+
   return (
     <Dialog open={open} onOpenChange={onCancel}>
       <DialogContent>
@@ -51,6 +60,22 @@ export const ClearLayerDialog = (props: ClearLayerDialogProps): JSX.Element => {
             onColorSelect={idx => setIndexOfSelectedColor(idx)}
             className="ml-3 mt-2 mb-3"
           />
+          <div className="grid items-center w-full justify-between py-2">
+            <div className="mb-4">
+              {createLabel(i18n.editor.modal.clearLayer.chooseYourKeyboardSide, "chooseYourKeyboardSide")}
+            </div>
+            <ToggleGroup
+              triggerFunction={chooseYourKeyboardSideUpdate}
+              value={chooseYourKeyboardSide}
+              listElements={[
+                { value: "BOTH", name: "Full Keyboard", icon: "", index: 0 },
+                { value: "LEFT", name: "Left Side", icon: "", index: 1 },
+                { value: "RIGHT", name: "Right Side", icon: "", index: 2 },
+              ]}
+              variant="flex"
+              size="sm"
+            />
+          </div>
           <div className="grid items-center w-full justify-between py-2">
             <div className="mb-4">{createLabel(i18n.editor.modal.clearLayer.useNoKey, "useNoKeyInstead")}</div>
             <ToggleGroup
@@ -76,6 +101,7 @@ export const ClearLayerDialog = (props: ClearLayerDialogProps): JSX.Element => {
               onConfirm({
                 keyCode: useNoKey ? NOKEY_KEY_CODE : TRANS_KEY_CODE,
                 colorIndex: indexOfSelectedColor < colors.length ? indexOfSelectedColor : -1,
+                chooseYourKeyboardSide,
               })
             }
           >

src/renderer/i18n/en.ts

@@ -259,6 +259,7 @@ const English = {
         title: "Clear layer",
         resetColors: "Reset underglow and key colors using the selection",
         useNoKey: "Fill layer with NOKEY instead of TRANS key",
+        chooseYourKeyboardSide: "Choose the entire keyboard, left or right side",
       },
     },
     standardView: {

src/renderer/modules/ColorEditor/ColorPalette.tsx

@@ -12,21 +12,25 @@ const Container = Styled.div`
       grid-gap: 4px;
     `;
 
+const Style = Styled.div``;
+
 export const ColorPalette = (props: ColorPaletteProps) => {
   const { colors, onColorSelect, selected, className } = props;
 
   const layerButtons = (colors ?? []).map((data, idx) => {
     const menuKey = `color-${idx.toString()}-${data.rgb.toString()}`;
     if (data.rgb === "transparent") {
       return (
-        <button
-          type="button"
+        <Style
+          tabIndex={-1}
           key={`${menuKey}-key-${data}`}
-          onClick={() => onColorSelect(idx)}
-          className="w-[81px] border border-solid !border-[#7b869e] h-8 m-0 p-1 text-gray-300 hover:text-white focus:outline-none focus:!border-[#6c5ce7] focus:shadow-[0_4px_24px_0px_rgba(108,92,231,0.6)]"
+          onClick={() => {
+            onColorSelect(idx);
+          }}
+          className="text-sm cursor-pointer w-[81px] border border-solid !border-[#7b869e] h-8 m-0 p-1 text-gray-300 hover:text-white focus:outline-none focus:!border-[#6c5ce7] focus:shadow-[0_4px_24px_0px_rgba(108,92,231,0.6)] focus:text-white"
         >
           No change
-        </button>
+        </Style>
       );
     }
     const buttonStyle = {

src/renderer/types/LayerMap.ts

@@ -0,0 +1,21 @@
+type Period = {
+  from: number;
+  to: number;
+};
+
+export type LayerMap = {
+  keys: {
+    position: {
+      right: Period[];
+      left: Period[];
+    };
+    leds: {
+      right: Period;
+      left: Period;
+    };
+  };
+  underglow: {
+    right: Period;
+    left: Period;
+  };
+};

src/renderer/utils/LayersMap.ts

@@ -0,0 +1,229 @@
+import { LayerMap } from "@Types/LayerMap";
+
+const defyLayerMap: LayerMap = {
+  keys: {
+    position: {
+      left: [
+        {
+          from: 0,
+          to: 7,
+        },
+        {
+          from: 16,
+          to: 23,
+        },
+        {
+          from: 32,
+          to: 39,
+        },
+        {
+          from: 48,
+          to: 54,
+        },
+        {
+          from: 64,
+          to: 72,
+        },
+      ],
+      right: [
+        {
+          from: 9,
+          to: 16,
+        },
+        {
+          from: 25,
+          to: 32,
+        },
+        {
+          from: 41,
+          to: 48,
+        },
+        {
+          from: 57,
+          to: 64,
+        },
+        {
+          from: 72,
+          to: 80,
+        },
+      ],
+    },
+    leds: {
+      left: {
+        from: 0,
+        to: 35,
+      },
+      right: {
+        from: 35,
+        to: 70,
+      },
+    },
+  },
+  underglow: {
+    left: {
+      from: 70,
+      to: 123,
+    },
+    right: {
+      from: 123,
+      to: 176,
+    },
+  },
+};
+
+const raiseLayerMap: LayerMap = {
+  keys: {
+    position: {
+      left: [
+        {
+          from: 0,
+          to: 7,
+        },
+        {
+          from: 16,
+          to: 23,
+        },
+        {
+          from: 32,
+          to: 39,
+        },
+        {
+          from: 48,
+          to: 55,
+        },
+        {
+          from: 64,
+          to: 72,
+        },
+      ],
+      right: [
+        {
+          from: 9,
+          to: 16,
+        },
+        {
+          from: 24,
+          to: 32,
+        },
+        {
+          from: 41,
+          to: 48,
+        },
+        {
+          from: 57,
+          to: 64,
+        },
+        {
+          from: 72,
+          to: 80,
+        },
+      ],
+    },
+    leds: {
+      left: {
+        from: 0,
+        to: 33,
+      },
+      right: {
+        from: 33,
+        to: 69,
+      },
+    },
+  },
+  underglow: {
+    left: {
+      from: 69,
+      to: 99,
+    },
+    right: {
+      from: 99,
+      to: 131,
+    },
+  },
+};
+
+const raise2LayerMap: LayerMap = {
+  keys: {
+    position: {
+      left: [
+        {
+          from: 0,
+          to: 7,
+        },
+        {
+          from: 16,
+          to: 23,
+        },
+        {
+          from: 32,
+          to: 39,
+        },
+        {
+          from: 48,
+          to: 55,
+        },
+        {
+          from: 64,
+          to: 72,
+        },
+      ],
+      right: [
+        {
+          from: 9,
+          to: 16,
+        },
+        {
+          from: 24,
+          to: 32,
+        },
+        {
+          from: 41,
+          to: 48,
+        },
+        {
+          from: 57,
+          to: 64,
+        },
+        {
+          from: 72,
+          to: 80,
+        },
+      ],
+    },
+    leds: {
+      left: {
+        from: 0,
+        to: 33,
+      },
+      right: {
+        from: 33,
+        to: 69,
+      },
+    },
+  },
+  underglow: {
+    left: {
+      from: 69,
+      to: 105,
+    },
+    right: {
+      from: 105,
+      to: 144,
+    },
+  },
+};
+
+function getLayerMap(layer: string): LayerMap {
+  switch (layer) {
+    case "defy":
+      return defyLayerMap;
+    case "raise":
+      return raiseLayerMap;
+    case "raise2":
+      return raise2LayerMap;
+    default:
+      return defyLayerMap;
+  }
+}
+
+export default getLayerMap;