Added Shortcuts to Analog

docs/Other/AnalogAdditions/DC_Analysis.md

@@ -0,0 +1,15 @@
+# DC Analysis
+1. Performing Analysis when DC Sources are Used
+    * DC sources mean all sources should be applying a constant current/voltage.
+    * This Analysis would be similar to running with "DC Operating Point" in LTSpice
+2. This Analysis Can Not be Validly Performed with Time-Varying Signals
+    * Output results should be invalid as it makes no sense to have time-varying signals in a DC Analysis.
+3. Linear (IV-curve) Components Have their Properties Determined According to Simple Linear Equations
+    * These include Resistors whose properties are dictated by Ohm's Law (V = I*R).
+4. Nonlinear Components Could have their DC Steady State Values Reported
+    * These components include Inductors and Capacitors whose voltages/currents will change with time even as a DC signal is applied to them
+    * A DC Analysis essentially take the limit as time goes to infinity in these instances, resulting in reporting the "DC Steady States" of these components. These will be DC values that reflect the values which properties of these components wil always be moving closer towards.
+5. DC Analysis Results can Simply be Output in a new Window or Text Box
+    * Using an Oscilloscope to plot DC values would only result in a bunch of straight lines. Instead of this the output can simply be the calulated values themselves (rounded to a reasonable number of significant digits) with there associated component or node.
+    * The voltages for each node can be reported along with the currents through each component.
+    * If the node was labeled by the user, then this label should show up in in the report as well. This should only be applied to labeled nodes as it allows the user to isolate certain nodes for their analysis.

docs/Other/AnalogAdditions/QualityOfLife.md

@@ -0,0 +1,34 @@
+# Future Quality of Life Improvements
+1. Example Circuits
+    * Updated Example Analog Circuits would help get new users started
+    * These circuits could be loaded in for users to be able to mess around with running the simulation
+    * We included samples of Voltage Divider, Series RC (Resistor-Capacitor), Series RL (Resistor-Inductor), and Series RLC (Resistor-Capacitor-Inductor) circuits.
+
+Circuit 1: Voltage Divider/ Nodal Analysis Example:
+
+<img width="214" alt="image" src="https://user-images.githubusercontent.com/62410569/221334248-90228e65-eeb7-4834-9a55-b96002d1caaf.png">
+Circuit 2: RC(Resistor-Capacitor) Example Circuit (Series)
+
+<img width="217" alt="image" src="https://user-images.githubusercontent.com/62410569/221334297-ad60b34e-ce39-4fb9-86dd-90a81ecd22a0.png">
+Circuit 3: RL(Resistor-Inductor) Example Circuit (Series)
+
+<img width="218" alt="image" src="https://user-images.githubusercontent.com/62410569/221334315-f2560146-a974-47a8-bff1-359fd890e0a8.png">
+Circuit 4: RLC(Resistor-Inductor-Capacitor) Example Circuit (Series)
+
+<img width="219" alt="image" src="https://user-images.githubusercontent.com/62410569/221334332-ac3f7c30-49a7-4453-bd17-b4a8e5588695.png">
+
+2. Implementing Keyboard Shortcuts
+    * Users would be able to quickly and easily bring up commonly used components using keyboard shortcuts
+    * These shortcuts should correspond with their associated components (i.e. "v" for Voltage Source)
+3. Display Component Values Next to Their Models
+    * Resistances, capacitance values, inductance values, and all values for sources should be shown next to or near the associatedd components
+4. Wires and Components Should Automatically Snap into Positions
+    * Wires should naturally snap to 90 degree angles so wirings for more complicated circuits can be less confusing
+5. Deleting the Oscilloscope
+    * Currently, removing the Oscilloscope also deletes all attached wires which should not be the case.
+6. Uploading Your Own Components/Models
+    * Expand functionalities and component libraries by allowing users to uploaded pre-formatted circuit component files that can be parsed into actual usable models.
+    * This can include modeling specific real-world components if the data reflects that components (expected) behaviors.
+7. Component Information Does Not Work
+    * Currently, clicking on the "learn about this component" button does nothing for all of the components. Can fix this by linking a wikipedia page to the button.
+<!-- <img width="149" alt="image" src="https://user-images.githubusercontent.com/62410569/222838727-b0379451-c131-4c4e-ba7e-cc0a6652cf8e.png"> -->

src/site/pages/analog/src/containers/AnalogItemNav/index.tsx

@@ -31,6 +31,12 @@ export const AnalogItemNav = ({ info }: Props) => {
         <ItemNav
             info={info}
             config={itemNavConfig}
-            getImgSrc={getImgSrc} />
+            getImgSrc={getImgSrc}
+            shortcuts={[["r", "Resistor"],
+                        ["c", "Capacitor"],
+                        ["g", "Ground"],
+                        ["l", "Inductor"],
+                        ["v", "VoltageSource"],
+                        ["i", "CurrentSource"]]} />
     );
 }

src/site/pages/analog/src/containers/KeyboardShortcutsPopup/index.tsx

@@ -65,7 +65,7 @@ export const KeyboardShortcutsPopup = () => {
                 </thead>
                 <tbody>
                     <Shortcut os={os} label="Undo"          keys={["Z"]}          mod />
-                    <Shortcut os={os} label="Redo"          keys={["Shift", "Z"]} mod />
+                    <Shortcut os={os} label="Redo"          keys={["Y"]} mod />
                     <Shortcut os={os} label="Cut"           keys={["X"]}          mod />
                     <Shortcut os={os} label="Copy"          keys={["C"]}          mod />
                     <Shortcut os={os} label="Paste"         keys={["V"]}          mod />
@@ -76,6 +76,12 @@ export const KeyboardShortcutsPopup = () => {
                     <Shortcut os={os} label="Snapping"      keys={["Shift"]} pre="Hold " />
                     <Shortcut os={os} label="Duplicate"     keys={["D"]}          mod />
                     <Shortcut os={os} label="Fit to Screen" keys={["F"]}              />
+                    <Shortcut os={os} label="Voltage Source" keys={["V"]}              />
+                    <Shortcut os={os} label="Current Source" keys={["I"]}              />
+                    <Shortcut os={os} label="Resistor" keys={["R"]}              />
+                    <Shortcut os={os} label="Capacitor" keys={["C"]}              />
+                    <Shortcut os={os} label="Inductor" keys={["L"]}              />
+                    <Shortcut os={os} label="Ground" keys={["G"]}              />
                 </tbody>
             </table>
         </Popup>

src/site/pages/analog/src/data/examples.json

@@ -2,21 +2,29 @@
     "examples": [
         {
             "id": "0",
-            "name": "Basic AND Gate Setup",
-            "file": "example1.circuit",
-            "thumbnail": "img/thumbnails/example1.png"
+            "name": "Voltage Divider/ Nodal Analysis Circuit Example",
+            "file": "example1new.circuit",
+            "thumbnail": "img/thumbnails/example1new.png"
         },
         {
             "id": "1",
-            "name": "SR-Latch Gate Implementation",
-            "file": "example2.circuit",
-            "thumbnail": "img/thumbnails/example2.png"
+            "name": "Series RC Cicuit",
+            "file": "Example_RC.circuit",
+            "thumbnail": "img/thumbnails/RC.png"
         },
         {
             "id": "2",
-            "name": "Full Adder Circuit",
-            "file": "example3.circuit",
-            "thumbnail": "img/thumbnails/example3.png"
+            "name": "RL(Resistor-Inductor) Example Circuit (Series)",
+            "file": "example3new.circuit",
+            "thumbnail": "img/thumbnails/example3new.png"
+
+        },
+        {
+            "id": "3",
+            "name": "Series RLC Circuit",
+            "file": "Example_RLC.circuit",
+            "thumbnail": "img/thumbnails/RLC.png"
+
         }
     ]
 }

src/site/pages/digital/src/containers/DigitalItemNav/index.tsx

@@ -186,6 +186,20 @@ export const DigitalItemNav = ({ info }: Props) => {
             additionalData={smartPlace}
             additionalPreview={additionalPreview}
             getImgSrc={getImgSrc}
+            shortcuts={[["b", "Button"],
+                        ["s", "Switch"],
+                        ["l", "ConstantLow"],
+                        ["h", "ConstantHigh"],
+                        ["n", "ConstantNumber"],
+                        ["c", "Clock"],
+                        ["1", "BUFGate"],
+                        ["2", "NOTGate"],
+                        ["3", "ANDGate"],
+                        ["4", "NANDGate"],
+                        ["5", "ORGate"],
+                        ["6", "NORGate"],
+                        ["7", "XORGate"],
+                        ["8", "XNORGate"]]}
             onStart={onSmartPlaceOff}
             onFinish={onSmartPlaceOff}
             onDelete={onDelete} />

src/site/shared/containers/ItemNav/index.tsx

@@ -53,13 +53,16 @@ type Props<D> = {
     info: CircuitInfo;
     config: ItemNavConfig;
     additionalData?: D;
+    shortcuts: string[][];
     getImgSrc: (c: Component) => string;
     onStart?: () => void;
     onFinish?: (cancelled: boolean) => void;
     onDelete?: (section: ItemNavSection, item: ItemNavItem) => boolean;
     additionalPreview?: (data: D, curItemID: string) => React.ReactNode;
 }
-export const ItemNav = <D,>({ info, config, additionalData, getImgSrc, onDelete,
+// let shortcut_flag:boolean = false
+
+export const ItemNav = <D,>({ info, config, additionalData, getImgSrc, shortcuts,  onDelete,
                               onStart, onFinish, additionalPreview }: Props<D>) => {
     const { isOpen, isEnabled, isHistoryBoxOpen, curItemID } = useSharedSelector(
         (state) => ({ ...state.itemNav })
@@ -86,6 +89,10 @@ export const ItemNav = <D,>({ info, config, additionalData, getImgSrc, onDelete,
     // State to keep track of drag'n'drop preview current image
     const [curItemImg, setCurItemImg] = useState("");
 
+    const [shortcutFlag, setShortcutFlag] = useState(false);
+
+    const [shortItem, setShortItem] = useState("");
+
     // Keep track of a separate 'currentlyPressedObj' in tandem with `info.currentlyPressedObj` so that
     //  we can use it to potentially delete the object if its dragged over to the ItemNav (issue #478)
     const [currentlyPressedObj, setCurPressedObj] = useState(undefined as (Selectable | undefined));
@@ -94,6 +101,30 @@ export const ItemNav = <D,>({ info, config, additionalData, getImgSrc, onDelete,
         if (info.currentlyPressedObject)
             setCurPressedObj(info.currentlyPressedObject);
     });
+    // Loops through the shorcuts 2d array in AnalogItemNav to see if any shortcuts
+    useDocEvent("keydown", (ev) => {
+        // Loop through each of the input shortcuts
+        for (const short of shortcuts) {
+            if (ev.key === short[0]) {
+                // Detect second keypress to exit shortcut
+                if (curItemID === short[1] && shortcutFlag) {
+                    reset(true);
+                    setShortcutFlag(false);
+                    break;
+                }
+                const id = short[1];
+                const section = config.sections.find((s) => (s.items.find((i) => i.id === id)));
+                dispatch(SetCurItem(id));
+                setNumClicks(id.toLowerCase() === curItemID ? numClicks+1 : 1);
+                setCurItemImg(`/${config.imgRoot}/${section?.id}/${[...id.toLowerCase(),...".svg"].join("")}`)
+                onStart && onStart();
+                ev.stopPropagation();
+                // Update shortcut paramters to verify later
+                setShortcutFlag(true);
+                setShortItem(id);
+            }
+        }
+    }, [shortcutFlag, shortItem, curItemID]);
     useDocEvent("mouseup",    () => setCurPressedObj(undefined));
     useDocEvent("mouseleave", () => setCurPressedObj(undefined));
     function handleItemNavDrag() { // Issue #478
@@ -108,7 +139,7 @@ export const ItemNav = <D,>({ info, config, additionalData, getImgSrc, onDelete,
         info.history.add(DeleteGroup(info.designer, [currentlyPressedObj]));
     }
 
-    // Resets the curItemID and numClicks
+    // Resets the curItemID, numClicks, and shortcutFlag
     const reset = useCallback((cancelled = false) => {
         dispatch(SetCurItem(""));
         setNumClicks(1);
@@ -118,6 +149,18 @@ export const ItemNav = <D,>({ info, config, additionalData, getImgSrc, onDelete,
 
     // Drop the current item on click (or on touch end)
     useDocEvent("click", (ev) => {
+        // If keyboard shortcut used to bring up component then allow to drop until "Esc" pressed
+        // Check to make sure shortcut is valid by checking flag and item ID
+        if (shortcutFlag && curItemID === shortItem){
+            DragDropHandlers.drop(V(ev.x, ev.y), curItemID, 1, additionalData);
+            const section = config.sections.find((s) => (s.items.find((i) => i.id === curItemID)));
+            dispatch(SetCurItem(curItemID));
+            setNumClicks(1);
+            setCurItemImg(`/${config.imgRoot}/${section?.id}/${[...curItemID.toLowerCase(),...".svg"].join("")}`)
+            onStart && onStart();
+            return;
+        }
+
         // If holding shift then drop only a single item (issue #1043)
         if (isShiftDown && numClicks > 1) {
             DragDropHandlers.drop(V(ev.x, ev.y), curItemID, 1, additionalData);
@@ -127,7 +170,7 @@ export const ItemNav = <D,>({ info, config, additionalData, getImgSrc, onDelete,
         // Otherwise drop all and reset
         DragDropHandlers.drop(V(ev.x, ev.y), curItemID, numClicks, additionalData);
         reset();
-    }, [curItemID, numClicks, isShiftDown, additionalData, setNumClicks, reset]);
+    }, [curItemID, numClicks, isShiftDown, additionalData, setNumClicks, reset, shortcutFlag, shortItem]);
     useDocEvent("touchend", (ev) => {
         const touch = ev.changedTouches.item(0);
         if (!touch)
@@ -160,9 +203,10 @@ export const ItemNav = <D,>({ info, config, additionalData, getImgSrc, onDelete,
         );
     }, [info.camera, isOpen, side]);
 
-    // Cancel placing when pressing escape
+    // Cancel placing when pressing escape and reset shortcut state flag
     useWindowKeyDownEvent("Escape", () => {
         reset(true);
+        setShortcutFlag(false);
     });
 
     // Also cancel on Right Click
@@ -328,7 +372,13 @@ export const ItemNav = <D,>({ info, config, additionalData, getImgSrc, onDelete,
                                         data={[item.id, Math.max(numClicks,1), additionalData]}
                                         onClick={(ev) => {
                                             dispatch(SetCurItem(item.id));
-                                            setNumClicks(item.id === curItemID ? numClicks+1 : 1);
+                                            // Force exit shotcut state when using ItemNav panel
+                                            if (shortcutFlag) {
+                                                setNumClicks(1);
+                                            } else {
+                                                setNumClicks(item.id === curItemID ? numClicks+1 : 1);
+                                            }
+                                            setShortcutFlag(false);
                                             setCurItemImg(`/${config.imgRoot}/${section.id}/${item.icon}`);
                                             onStart && onStart();