Merge pull request #940 from Dygmalab/featMacrosDelaysModifiable

Feat macros delays modifiable

src/api/flash/defyFlasher/sideFlasher.ts

@@ -119,7 +119,7 @@ export default class SideFlaser {
       const seal = recoverSeal(this.firmwareSides.slice(0, 28));
       // log.info("This is the seal from the FW file");
       // eslint-disable-next-line no-console
-      console.info("This is the seal from the Neuron");
+      console.info("This is the seal from the FW File");
       // eslint-disable-next-line no-console
       console.table(seal);
 
@@ -152,6 +152,7 @@ export default class SideFlaser {
       }
       if (selectedDev === undefined) throw new Error("Flashable device not found");
       log.info("Found this device:", selectedDev);
+      await delay(1000);
 
       this.serialport = new SerialPort({
         path: selectedDev?.path,

src/renderer/components/atoms/icons/IconCheckmark.tsx

@@ -1,12 +1,19 @@
 import * as React from "react";
 
 interface IconProps {
-  size?: "sm";
+  size?: "sm" | "md";
 }
 
 function IconCheckmark({ size = "sm" }: IconProps) {
   return (
     <>
+      {size === "md" ? (
+        <svg width={28} height={28} fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3.333 10l4.583 4.583 8.75-8.75" stroke="currentColor" strokeWidth={1.2} />
+        </svg>
+      ) : (
+        ""
+      )}
       {size === "sm" ? (
         <svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M3.333 10l4.583 4.583 8.75-8.75" stroke="currentColor" strokeWidth={1.2} />

src/renderer/controller/FlashingProcedure/actions.ts

@@ -76,7 +76,9 @@ const restoreSettings = async (
   try {
     let device: Device | undefined;
     const list = (await DeviceTools.list()) as Device[];
-    log.info(list);
+    log.info("Found these devices", list);
+    await delay(1000);
+
     const selected = list.find(x => parseInt(x.productId, 16) === context.originalDevice?.device?.usb.productId);
     if (selected !== undefined) device = await DeviceTools.connect(selected);
     for (let i = 0; i < backup.backup.length; i += 1) {

src/renderer/i18n/en.ts

@@ -497,7 +497,7 @@ const English = {
     pasteSuccess: "Pasted!",
     importSuccessCurrentLayerTitle: "Imported successfully!",
     importSuccessCurrentLayer: "Imported to current Layer successfully",
-    importSuccessCurrentMacro: "Imported to current Macro successfully",
+    importSuccessCurrentMacro: "The imported macro has been added as a new macro",
     importSuccessAllLayers: "Imported all Layers successfully",
     exportSuccessCurrentLayer: "Ready to share!",
     exportSuccessCurrentLayerContent: "Your layer has been successfully exported.",

src/renderer/modules/Macros/KeyMacro.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback, useState } from "react";
 import { withTheme, DefaultTheme } from "styled-components";
 import { Popover, PopoverContent, PopoverTrigger } from "@Renderer/components/atoms/Popover";
 import { i18n } from "@Renderer/i18n";
@@ -11,6 +11,8 @@ import {
   IconStopWatch,
   IconDragAndDrop,
   IconDelete,
+  IconPen,
+  IconCheckmark,
 } from "@Renderer/components/atoms/icons";
 import Heading from "@Renderer/components/atoms/Heading";
 import { Button } from "@Renderer/components/atoms/Button";
@@ -36,6 +38,7 @@ interface KeyMacroProps {
   updateAction: (id: number, actionType: number) => void;
   onDeleteRow: (id: number) => void;
   onCloneRow: (id: number) => void;
+  editDelay: (id: number, delay: number | number[]) => void;
   theme: DefaultTheme;
 }
 
@@ -49,6 +52,7 @@ const KeyMacro: React.FC<KeyMacroProps> = ({
   updateAction,
   onDeleteRow,
   onCloneRow,
+  editDelay,
   theme,
 }) => {
   const getItemStyle = useCallback(
@@ -64,8 +68,35 @@ const KeyMacro: React.FC<KeyMacroProps> = ({
     }),
     [theme.styles.macroKey],
   );
-
   const isModifier = useMemo(() => (item.keyCode as number) > 223 && (item.keyCode as number) < 232 && item.type !== 2, [item]);
+  const [delay, setDelay] = useState<number | number[]>(item.keyCode);
+  const [enableEdit, setEnableEdit] = useState(false);
+
+  const setDelayHandler = (value: string) => {
+    const randomDelay = Array.isArray(item.keyCode);
+    const allNumbers = randomDelay ? value.split("-").filter(v => v !== "").length === 2 : value !== "";
+
+    if (allNumbers) {
+      if (randomDelay) {
+        const newDelay = value
+          .trim()
+          .split("-")
+          .map(s => parseInt(s, 10));
+        setDelay(newDelay);
+      } else {
+        setDelay(parseInt(value, 10));
+      }
+    } else {
+      setDelay(randomDelay ? [0, 0] : 0);
+    }
+  };
+
+  const finishDelayEdit = () => {
+    editDelay(item.id, delay);
+    setEnableEdit(false);
+  };
+
+  const visualKeycode = Array.isArray(item.keyCode) ? item.keyCode.join("-") : item.keyCode;
 
   return (
     <div>
@@ -108,9 +139,34 @@ const KeyMacro: React.FC<KeyMacroProps> = ({
                         >
                           {item.type === 1 || item.type === 2 ? i18n.editor.macros.delay : i18n.general.key}
                         </Heading>
-                        <p className="keyValue text-2xl">
-                          {item.symbol} {item.type === 1 || item.type === 2 ? <small>ms</small> : ""}
-                        </p>
+                        <div className="keyValue text-2xl">
+                          {(item.type === 1 || item.type === 2) && enableEdit ? (
+                            <input
+                              id="changeDelay"
+                              type="text"
+                              value={Array.isArray(delay) ? `${delay[0]}-${delay[1]}` : `${delay}`}
+                              onChange={event => setDelayHandler(event.target.value)}
+                              className="form-input form-input-lg p-3 align-top"
+                            />
+                          ) : (
+                            visualKeycode
+                          )}
+                          {(item.type === 1 || item.type === 2) && !enableEdit ? <small>ms</small> : ""}
+                          {(item.type === 1 || item.type === 2) && !enableEdit ? (
+                            <Button variant="ghost" onClick={() => setEnableEdit(true)}>
+                              <IconPen />{" "}
+                            </Button>
+                          ) : (
+                            ""
+                          )}
+                          {(item.type === 1 || item.type === 2) && enableEdit ? (
+                            <Button variant="ghost" onClick={() => finishDelayEdit()} className="pl-3">
+                              <IconCheckmark size="md" />{" "}
+                            </Button>
+                          ) : (
+                            ""
+                          )}
+                        </div>
                       </div>
                       <div className="keyFunctions py-[12px] px-[12px] bg-gray-50/40 dark:bg-gray-800 border-t-[1px] border-gray-50 dark:border-gray-700">
                         <Heading

src/renderer/modules/Macros/TimelineEditorMacroTable.tsx

@@ -213,6 +213,13 @@ const TimelineEditorMacroTable = (props: Props) => {
     updateRows(aux);
   };
 
+  const editDelay = (id: number, delay: number | number[]) => {
+    log.info("Delay launched", id, delay);
+    const aux = rows;
+    aux[id].keyCode = delay;
+    updateRows(aux);
+  };
+
   const addModifier = (rowID: number, modifierID: number) => {
     log.info("Called addModifier", rowID, modifierID);
     const { name, keyCode, color } = modifiers[modifierID];
@@ -275,6 +282,7 @@ const TimelineEditorMacroTable = (props: Props) => {
                         onDeleteRow={onDeleteRow}
                         onCloneRow={onCloneRow}
                         addModifier={addModifier}
+                        editDelay={editDelay}
                       />
                     )}
                   </Draggable>

src/renderer/views/MacroEditor.tsx

@@ -524,8 +524,8 @@ function MacroEditor(props: MacroEditorProps) {
 
   const importMacro = async () => {
     const options = {
-      title: "Load Macro file",
-      buttonLabel: "Load Macro",
+      title: "Import Macro",
+      buttonLabel: "Import Macro",
       filters: [
         { name: "Json", extensions: ["json"] },
         { name: "All Files", extensions: ["*"] },
@@ -572,9 +572,9 @@ function MacroEditor(props: MacroEditorProps) {
     const { macros, selectedMacro } = state;
     const data = JSON.stringify(macros[selectedMacro]);
     const options = {
-      title: "Save Macro file",
-      defaultPath: `Macro${selectedMacro}-${macros[selectedMacro].name}.json`,
-      buttonLabel: "Save Macro",
+      title: "Export Macro",
+      defaultPath: `Macro${selectedMacro + 1}-${macros[selectedMacro].name}.json`,
+      buttonLabel: "Export Macro",
       filters: [
         { name: "Json", extensions: ["json"] },
         { name: "All Files", extensions: ["*"] },