Added initial popups back

OpenCircuits · Jan 29, 2024 · dd7553e · dd7553e
1 parent fd8f6e5
commit dd7553e
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 68 deletions.
diff --git a/src/app/core/public/api/Circuit.ts b/src/app/core/public/api/Circuit.ts
@@ -7,8 +7,8 @@ import {CleanupFunc} from "core/utils/types";
 
 import {FastCircuitDiff} from "core/internal/impl/FastCircuitDiff";
 
-import {RenderHelper}  from "core/internal/view/rendering/RenderHelper";
-import {RenderOptions} from "core/internal/view/rendering/RenderOptions";
+import {RenderHelper}                    from "core/internal/view/rendering/RenderHelper";
+import {RenderOptions as RenderOptionsI} from "core/internal/view/rendering/RenderOptions";
 
 import {Camera}        from "./Camera";
 import {Component}     from "./Component";
@@ -18,6 +18,7 @@ import {Port}          from "./Port";
 import {Wire}          from "./Wire";
 import {Selections}    from "./Selections";
 import {Observable}    from "./Observable";
+import {RenderOptions} from "./RenderOptions";
 
 
 export type {CircuitMetadata} from "core/schema/CircuitMetadata";
@@ -86,9 +87,12 @@ export interface Circuit extends Observable<CircuitEvent> {
 
     forceRedraw(): void;
 
+    setRenderOptions(options: Partial<RenderOptions>): void;
+    readonly renderOptions: RenderOptions;
+
     // TODO[](leon) - Need to make a public-facing RenderHelper/RenderOptions
     addRenderCallback(cb: (data: {
         renderer: RenderHelper;
-        options: RenderOptions;
+        options: RenderOptionsI;
     }) => void): CleanupFunc;
 }
diff --git a/src/app/core/public/api/RenderOptions.ts b/src/app/core/public/api/RenderOptions.ts
@@ -0,0 +1,3 @@
+export interface RenderOptions {
+    useGrid: boolean;
+}
diff --git a/src/app/core/public/api/impl/Circuit.ts b/src/app/core/public/api/impl/Circuit.ts
@@ -6,13 +6,14 @@ import {Rect}   from "math/Rect";
 import {CleanupFunc} from "core/utils/types";
 import {extend}      from "core/utils/Functions";
 
-import {GUID}          from "core/internal";
-import {RenderHelper}  from "core/internal/view/rendering/RenderHelper";
-import {RenderOptions} from "core/internal/view/rendering/RenderOptions";
+import {GUID}                            from "core/internal";
+import {RenderHelper}                    from "core/internal/view/rendering/RenderHelper";
+import {RenderOptions as RenderOptionsI} from "core/internal/view/rendering/RenderOptions";
 
 import {Camera}                from "../Camera";
 import {Circuit, CircuitEvent} from "../Circuit";
 import {Selections}            from "../Selections";
+import {RenderOptions}         from "../RenderOptions";
 import {isObjComponent}        from "../Utilities";
 
 import {CameraImpl}                 from "./Camera";
@@ -245,10 +246,20 @@ export function CircuitImpl<CircuitT extends Circuit, T extends CircuitTypes>(st
             state.view.scheduler.requestRender();
         },
 
+        setRenderOptions(options: Partial<RenderOptions>): void {
+            state.view.options.showGrid = options.useGrid ?? state.view.options.showGrid;
+            state.view.scheduler.requestRender();
+        },
+        get renderOptions(): RenderOptions {
+            return {
+                useGrid: state.view.options.showGrid,
+            };
+        },
+
         // TODO[](leon) - Need to make a public-facing RenderHelper/RenderOptions
         addRenderCallback(cb: (data: {
             renderer: RenderHelper;
-            options: RenderOptions;
+            options: RenderOptionsI;
         }) => void): CleanupFunc {
             return state.view.subscribe(({ renderer }) => cb({
                 renderer,

diff --git a/src/site/pages/digital/src/containers/App/index.tsx b/src/site/pages/digital/src/containers/App/index.tsx
@@ -2,12 +2,12 @@ import {CircuitMetadata} from "core/public";
 
 import {useWindowSize} from "shared/utils/hooks/useWindowSize";
 
-import {ContextMenu} from "shared/containers/ContextMenu";
+import {ContextMenu}        from "shared/containers/ContextMenu";
 // import {HistoryBox}  from "shared/containers/HistoryBox";
-// import {ImageExporterPopup} from "shared/containers/ImageExporterPopup";
-// import {LoginPopup} from "shared/containers/LoginPopup";
-import {SelectionPopup} from "shared/containers/SelectionPopup";
-import {SideNav}        from "shared/containers/SideNav";
+import {ImageExporterPopup} from "shared/containers/ImageExporterPopup";
+import {LoginPopup}         from "shared/containers/LoginPopup";
+import {SelectionPopup}     from "shared/containers/SelectionPopup";
+import {SideNav}            from "shared/containers/SideNav";
 
 import {PropertyModule} from "shared/containers/SelectionPopup/modules/PropertyModule";
 
@@ -17,8 +17,9 @@ import {DigitalHeader}       from "site/digital/containers/DigitalHeader";
 import {DigitalItemNav}      from "site/digital/containers/DigitalItemNav";
 import {DigitalMainDesigner} from "site/digital/containers/DigitalMainDesigner";
 
-// import {KeyboardShortcutsPopup} from "site/digital/containers/KeyboardShortcutsPopup";
-// import {QuickStartPopup}        from "site/digital/containers/QuickStartPopup";
+import {KeyboardShortcutsPopup} from "site/digital/containers/KeyboardShortcutsPopup";
+import {QuickStartPopup}        from "site/digital/containers/QuickStartPopup";
+
 import {DigitalPropInfo} from "site/digital/containers/SelectionPopup/propinfo";
 
 // import {BusButtonModule}                from "site/digital/containers/SelectionPopup/modules/BusButtonModule";
@@ -35,7 +36,6 @@ import exampleConfig from "site/digital/data/examples.json";
 import "./index.scss";
 
 
-
 const exampleCircuits = exampleConfig.examples.map((example) => ({
     id:      example.file,
     name:    example.name,
@@ -79,13 +79,13 @@ export const App = () => {
             {/* <ICDesigner />
             <ICViewer /> */}
 
-            {/* <QuickStartPopup />
-            <KeyboardShortcutsPopup /> */}
-            {/* <ImageExporterPopup circuit={circuit} /> */}
+            <QuickStartPopup />
+            <KeyboardShortcutsPopup />
+            <ImageExporterPopup designer={designer} />
 
             {/* <ExprToCircuitPopup /> */}
 
-            {/* <LoginPopup /> */}
+            <LoginPopup />
         </div>
     );
 };
diff --git a/src/site/pages/digital/src/containers/KeyboardShortcutsPopup/index.scss b/src/site/pages/digital/src/containers/KeyboardShortcutsPopup/index.scss
@@ -46,19 +46,6 @@
             white-space: nowrap;
 
             & > tr {
-                & > td:nth-child(2) {
-                    & > #key {
-                        margin-right: 3px;
-                        padding: 3px 5px;
-
-                        white-space: nowrap;
-
-                        color: black;
-                        border: 1px solid #bbb;
-                        border-radius: 3px;
-                    }
-                }
-
                 &:hover {
                     background-color: #f5f5f5;
                 }

diff --git a/src/site/pages/digital/src/containers/KeyboardShortcutsPopup/index.tsx b/src/site/pages/digital/src/containers/KeyboardShortcutsPopup/index.tsx
@@ -6,7 +6,8 @@ import {useSharedDispatch, useSharedSelector} from "shared/utils/hooks/useShared
 
 import {CloseHeaderPopups} from "shared/state/Header";
 
-import {Popup} from "shared/components/Popup";
+import {Popup}       from "shared/components/Popup";
+import {ShortcutKey} from "shared/components/ShortcutKey";
 
 import "./index.scss";
 
@@ -23,11 +24,11 @@ const Shortcut = ({ os, label, pre, keys, mod }: ShortcutProps) => (
         <td>{label}</td>
         <td>
             {pre}
-            {mod && <span id="key">{os === "mac" ? "CMD" : "CTRL"}</span>}
+            {mod && <ShortcutKey>{os === "mac" ? "CMD" : "CTRL"}</ShortcutKey>}
             {keys.map((key, i) => (
                 <React.Fragment key={`keyboardshortcuts__popup__${label}-${key}-${i}`}>
                     {(i > 0 || mod) && <span>+ </span>}
-                    <span id="key">{key}</span>
+                    <ShortcutKey>{key}</ShortcutKey>
                 </React.Fragment>
             ))}
         </td>

diff --git a/src/site/pages/digital/src/containers/QuickStartPopup/index.tsx b/src/site/pages/digital/src/containers/QuickStartPopup/index.tsx
@@ -2,7 +2,8 @@ import {useSharedDispatch, useSharedSelector} from "shared/utils/hooks/useShared
 
 import {CloseHeaderPopups} from "shared/state/Header";
 
-import {Popup} from "shared/components/Popup";
+import {Popup}       from "shared/components/Popup";
+import {ShortcutKey} from "shared/components/ShortcutKey";
 
 
 export const QuickStartPopup = () => {
@@ -19,26 +20,28 @@ export const QuickStartPopup = () => {
             <ul>
                 <li><b>Placement</b>: Click or drag an item from the ItemNav to place it into the circuit.</li>
                 <li><b>Wiring</b>: Click on or drag two ports to wire them together.</li>
-                <li><b>Pan</b>: Hold the ALT/OPTION key or Middle Mouse and click to pan the camera.</li>
+                <li><b>Pan</b>: Hold the <ShortcutKey>ALT</ShortcutKey>/<ShortcutKey>OPTION</ShortcutKey>key or Middle
+                    Mouse and click to pan the camera.</li>
                 <li><b>Translate</b>: Click and drag on an object in the circuit to move it around.</li>
                 <li><b>Rotate</b>: Select some objects and click the red circle to rotate them.</li>
                 <li><b>Splitting wires</b>: Click and drag on an existing wire to split it at that point.</li>
-                <li><b>Multi-select</b>: Hold the SHIFT key and click on items or drag mouse across area to select
-                    multiple objects.</li>
-                <li><b>Removing wire split</b>: Select wire node(s) and press the X key to snip and remove split.</li>
+                <li><b>Multi-select</b>: Hold the <ShortcutKey>SHIFT</ShortcutKey>key and click on items or drag mouse
+                    across area to select multiple objects.</li>
+                <li><b>Removing wire split</b>: Select wire node(s) and press the <ShortcutKey>X</ShortcutKey>key to
+                    snip and remove split.</li>
             </ul>
             <h2>Advanced Interactions</h2>
             <ul>
                 <li><b>Snap Objects to Grid</b>: While translating objects, holding down shift will snap the objects to
                     the grid.</li>
                 <li><b>Snap Objects to Rotations</b>: While rotating objects, holding down shift will snap the objects
-                    to 45&#176; rotations.</li>
+                    to <ShortcutKey>45&#176;</ShortcutKey>rotations.</li>
                 <li><b>Snap Wires</b>: When splitting a wire, you can move the WirePort to positions aligned with the
                     outgoing and incoming ports to snap the wire.</li>
                 <li><b>Bus</b>: To bus a group of ports together, simply select an equal number of input/output ports
-                    and then press the &apos;Bus&apos; button.</li>
+                    and then press the <ShortcutKey>Bus</ShortcutKey>button.</li>
                 <li><b>Quick Duplicate Group</b>: To quickly duplicate a group of selected objects, begin Translating
-                    them and then press the Spacebar.</li>
+                    them and then press the <ShortcutKey>Spacebar</ShortcutKey></li>
                 <li><b>Quick Change Gate Input Count</b>: To quickly change the input count of alike gates, select
                     them together and change the input count for all.</li>
             </ul>

diff --git a/src/site/shared/components/ShortcutKey/index.scss b/src/site/shared/components/ShortcutKey/index.scss
@@ -0,0 +1,10 @@
+.shortcut_key {
+    margin-right: 3px;
+    padding: 3px 5px;
+
+    white-space: nowrap;
+
+    color: black;
+    border: 1px solid #bbb;
+    border-radius: 3px;
+}
diff --git a/src/site/shared/components/ShortcutKey/index.tsx b/src/site/shared/components/ShortcutKey/index.tsx
@@ -0,0 +1,9 @@
+import "./index.scss";
+
+
+type Props = {
+    children: React.ReactNode;
+}
+export const ShortcutKey = ({ children }: Props) => (
+    <span className="shortcut_key">{children}</span>
+);
diff --git a/src/site/shared/containers/ImageExporterPopup/index.scss b/src/site/shared/containers/ImageExporterPopup/index.scss
@@ -163,3 +163,28 @@
         }
     }
 }
+
+.image-exporter-preview__button {
+    position: absolute;
+
+    top: 15px;
+    right: 15px;
+
+    width: 30px;
+    height: 30px;
+
+    padding: 10px;
+
+    background-color: transparentize($background-color, 0.6);
+
+    border: 2px solid $secondary-color;
+    border-radius: 30px;
+
+    &:hover {
+        cursor: pointer;
+        background-color: transparentize($background-color, 0.5);
+    }
+    &:active {
+        background-color: transparentize($background-color, 0.4);
+    }
+}