Add initial CompPort

bbycroft · bbycroft · commit 94fe0235cd85 · 2023-09-14T10:52:41.000+12:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useEffect } from 'react';
 import s from './layout.module.scss';
-import '@/styles/main.scss';
+import '@/styles/main.css';
 import { inject } from '@vercel/analytics';
 import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
@@ -26,4 +26,4 @@ export default function RootLayout({
     <link rel="preload" href="/fonts/font-atlas.png" as="image" />
     <link rel="preload" href="/fonts/font-def.json" as="fetch" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Merriweather:ital@0;1" />
-</head> */
+</head> */
diff --git a/src/cpu/CompLibraryView.tsx b/src/cpu/CompLibraryView.tsx
@@ -10,7 +10,7 @@ export const CompLibraryView: React.FC = () => {
 
     let { compLibrary } = editorState;
 
-    let compDefs = [...compLibrary.libraryLookup.values()];
+    let compDefs = [...new Set([...compLibrary.libraryLookup.values()])];
 
     let [, setDragStart] = useGlobalDrag<number>(function handleMove(ev, ds, end) {
         setEditorState(a => {
diff --git a/src/cpu/CpuCanvas.tsx b/src/cpu/CpuCanvas.tsx
@@ -211,7 +211,7 @@ export const CpuCanvas: React.FC = () => {
                     <div className={s.compDomElementsInner} style={{ transform: `matrix(${editorState.mtx.toTransformParams().join(',')})` }}>
                         {compDivs}
                     </div>
-                    {/* {showTransparentComponents && <div className={s.compDomEventMask} />} */}
+                    {editorState.transparentComps && <div className={s.compDomEventMask} />}
                 </div>
             </CanvasEventHandler>}
             <div className={s.toolsLeftTop}>
diff --git a/src/cpu/CpuExecution.tsx b/src/cpu/CpuExecution.tsx
@@ -574,6 +574,7 @@ export function backpropagateUnusedSignals(exeSystem: IExeSystem) {
             }
 
             if (allOutputsUnused) {
+                // console.log('marking net as unused', netToString(net, exeSystem.comps));
                 for (let portRef of net.outputs) {
                     portRef.exePort.dataUsed = false;
                 }
diff --git a/src/cpu/comps/CompPort.tsx b/src/cpu/comps/CompPort.tsx
@@ -0,0 +1,203 @@
+import React, { memo } from "react";
+import { StateSetter, assignImm, hasFlag } from "@/src/utils/data";
+import { Vec3 } from "@/src/utils/vector";
+import { IComp, IEditorState, IExeComp, IExePort, PortType } from "../CpuModel";
+import { ICompBuilderArgs, ICompDef } from "./CompBuilder";
+import { CompRectBase } from "./RenderHelpers";
+import { editCompConfig, useEditorContext } from "../Editor";
+import { HexValueEditor, HexValueInputType, clampToSignedWidth } from "../displayTools/HexValueEditor";
+import { CheckboxMenuTitle, ConfigMenu, MenuRow } from "./InputOutput";
+
+export interface ICompPortConfig {
+    portId: string;
+    name: string;
+    type: PortType;
+    width: number;
+    signed: boolean;
+    inputOverride: boolean;
+    inputValueOverride: number;
+    valueMode: HexValueInputType;
+}
+
+export interface ICompPortData {
+    port: IExePort;
+    value: number;
+}
+
+export function createCompIoComps(args: ICompBuilderArgs) {
+
+    let w = 6;
+    let h = 6;
+    let compPort: ICompDef<ICompPortData, ICompPortConfig> = {
+        defId: 'comp/port',
+        name: "Port",
+        size: new Vec3(w, h),
+        ports: (args, compDef) => {
+
+            let internalPortDir = switchPortDir(args.type);
+
+            return [
+                { id: 'a', name: '', pos: new Vec3(w, 3), type: internalPortDir, width: args.width },
+            ];
+        },
+        initConfig: () => ({
+            portId: '',
+            name: '',
+            type: PortType.Out,
+            width: 1,
+            signed: false,
+            valueMode: HexValueInputType.Dec,
+            inputOverride: false,
+            inputValueOverride: 0,
+        }),
+        applyConfig(comp, args) {
+            // let mat = rotateAboutAffineInt(args.rotate, rotateCenter);
+            // comp.ports = comp.ports.map(p => {
+            //     return { ...p, pos: mat.mulVec3(p.pos) }
+            // });
+        },
+        build: (builder) => {
+            let args = builder.comp.args;
+            let isInput = hasFlag(args.type, PortType.In);
+
+            let data = builder.addData({
+                port: builder.getPort('a'),
+                value: isInput && args.inputOverride ? args.inputValueOverride : 0,
+            });
+
+            if (isInput) {
+                builder.addPhase(({ data }) => {
+                    data.port.value = data.value;
+                    data.port.ioEnabled = true;
+                }, [], [data.port]);
+
+            } else {
+                builder.addPhase(({ data }) => {
+                    data.value = data.port.value;
+                    data.port.ioEnabled = true;
+                }, [data.port], []);
+            }
+
+            return builder.build();
+        },
+        renderAll: true,
+        render: ({ comp, ctx, cvs, exeComp }) => {
+            ctx.save();
+
+            ctx.fillStyle = 'rgb(251, 146, 60)';
+            // let mtx = rotateAboutAffineInt(comp.args.rotate, comp.pos.add(rotateCenter));
+            // ctx.transform(...mtx.toTransformParams());
+
+            ctx.beginPath();
+            // basic structure is a circle
+            let p = comp.pos;
+            let s = comp.size;
+            let center = p.mulAdd(s, 0.5);
+            ctx.moveTo(p.x + s.x, center.y);
+            ctx.arc(center.x, center.y, s.x / 2, 0, 2 * Math.PI);
+
+            ctx.closePath();
+            ctx.fill();
+            ctx.stroke();
+            ctx.restore();
+        },
+        renderDom: ({ comp, exeComp, ctx, styles }) => {
+
+            return <PortEditor comp={comp} exeComp={exeComp} styles={styles} />;
+        },
+    };
+
+    return [compPort];
+}
+
+export function switchPortDir(dir: PortType) {
+    let newDir = dir & ~(PortType.In | PortType.Out);
+
+    if (hasFlag(dir, PortType.In)) {
+        newDir |= PortType.Out;
+    }
+    if (hasFlag(dir, PortType.Out)) {
+        newDir |= PortType.In;
+    }
+
+    return newDir;
+}
+
+function makeEditFunction<T, A>(setEditorState: StateSetter<IEditorState>, comp: IComp<T>, updateFn: (value: A, prev: T) => Partial<T>) {
+    return (end: boolean, value: A) => {
+        setEditorState(editCompConfig(end, comp, a => assignImm(a, updateFn(value, a))));
+    };
+}
+
+const PortEditor: React.FC<{
+    comp: IComp<ICompPortConfig>,
+    exeComp: IExeComp<ICompPortData>, styles: any,
+}> = memo(function PortEditor({ comp, exeComp, styles }) {
+    let { setEditorState } = useEditorContext();
+
+    let editIsOverriden = makeEditFunction(setEditorState, comp, (value: boolean) => ({ inputOverride: value }));
+    let editBitWidth = makeEditFunction(setEditorState, comp, (value: number) => ({ width: value, inputValueOverride: clampToSignedWidth(comp.args.inputValueOverride ?? 0, value, comp.args.signed) }));
+    let editSigned = makeEditFunction(setEditorState, comp, (value: boolean) => ({ signed: value, inputValueOverride: clampToSignedWidth(comp.args.inputValueOverride ?? 0, comp.args.width, value) }));
+    let editPortType = makeEditFunction(setEditorState, comp, (isInputPort: boolean, prev) => {
+            let type = prev.type;
+            if (isInputPort) {
+                type |= PortType.In;
+                type &= ~PortType.Out;
+            } else {
+                type |= PortType.Out;
+                type &= ~PortType.In;
+            }
+            return { type };
+    });
+
+    function editValueOverride(end: boolean, value: number, valueMode: HexValueInputType) {
+        setEditorState(editCompConfig(end, comp, a => assignImm(a, { inputValueOverride: value, valueMode })));
+    }
+
+    let isInput = hasFlag(comp.args.type, PortType.In);
+    let isInputOverride = comp.args.inputOverride;
+
+    return <CompRectBase comp={comp} className={"pr-1"} hideHover={true}>
+        {isInput && <HexValueEditor
+            className="absolute inset-0 px-2"
+            inputType={comp.args.valueMode}
+            value={comp.args.inputValueOverride}
+            update={editValueOverride}
+            minimalBackground
+            inputClassName="text-center"
+            maxBits={comp.args.width}
+            padBits={comp.args.width}
+            signed={comp.args.signed}
+            hidePrefix
+        />}
+        {!isInput && <HexValueEditor
+            className="absolute inset-0 px-2"
+            value={exeComp?.data.value ?? 0}
+            minimalBackground
+            inputClassName="text-center"
+            update={(end, _val, inputType) => editValueOverride(end, comp.args.inputValueOverride, inputType)}
+            inputType={comp.args.valueMode}
+            padBits={comp.args.width}
+            signed={comp.args.signed}
+            readonly
+            hidePrefix
+        />}
+        <ConfigMenu className={"absolute top-[12px] right-[12px]"}>
+            <MenuRow title={<CheckboxMenuTitle title="Input" value={isInput} update={editPortType} />} />
+            <MenuRow title={<CheckboxMenuTitle title="Override Value" value={isInputOverride} update={editIsOverriden} />} disabled={!isInput}>
+                <HexValueEditor
+                    inputType={comp.args.valueMode}
+                    value={comp.args.inputValueOverride}
+                    update={editValueOverride}
+                    maxBits={comp.args.width}
+                    padBits={comp.args.width}
+                    signed={comp.args.signed}
+                />
+            </MenuRow>
+            <MenuRow title={"Bit Width"}>
+                <HexValueEditor inputType={HexValueInputType.Dec} hidePrefix value={comp.args.width} update={editBitWidth} />
+             </MenuRow>
+            <MenuRow title={<CheckboxMenuTitle title="Signed" value={comp.args.signed} update={editSigned} />} />
+        </ConfigMenu>
+    </CompRectBase>;
+});
diff --git a/src/cpu/comps/InputOutput.tsx b/src/cpu/comps/InputOutput.tsx
@@ -121,7 +121,7 @@ export const InputEditor: React.FC<{
 
     return <CompRectBase comp={comp} className={s.inputNumber} hideHover={true}>
         <HexValueEditor inputType={comp.args.valueMode} value={comp.args.value} update={editValue} minimalBackground />
-        <ConfigMenu btnClassName={s.configMenuTopRight}>
+        <ConfigMenu className={s.configMenuTopRight}>
             <MenuRow title={"Value"}>
                 <HexValueEditor inputType={comp.args.valueMode} value={comp.args.value} update={editValue} />
             </MenuRow>
@@ -134,20 +134,33 @@ export const InputEditor: React.FC<{
 
 
 export const MenuRow: React.FC<{
-    title: string,
+    title: React.ReactNode,
     children?: React.ReactNode,
-}> = ({ title, children }) => {
+    disabled?: boolean,
+}> = ({ title, children, disabled }) => {
 
-    return <div className={s.menuRow}>
-        <div className={s.title}>{title}</div>
-        <div className={s.content}>{children}</div>
+    return <div className={clsx("flex flex-col mx-4 my-2", disabled && "opacity-50")}>
+        <div className={"text-sm"}>{title}</div>
+        <div className={""}>{children}</div>
     </div>
 };
 
+export const CheckboxMenuTitle: React.FC<{
+    title: React.ReactNode,
+    value: boolean,
+    update: (end: boolean, value: boolean) => void,
+}> = ({ title, value, update }) => {
+
+    return <label className="text-sm flex items-center group cursor-pointer">
+        <input type="checkbox" className="mr-2 relative group-hover:drop-shadow" checked={value} onChange={e => update(true, e.target.checked)} />
+        {title}
+    </label>;
+};
+
 export const ConfigMenu: React.FC<{
-    btnClassName?: string,
+    className?: string,
     children?: React.ReactNode,
-}> = ({ btnClassName: className, children }) => {
+}> = ({ className, children }) => {
 
     let [btnRef, setBtnRef] = useState<HTMLElement | null>(null);
 
@@ -157,7 +170,13 @@ export const ConfigMenu: React.FC<{
         <button className={clsx(s.configMenuBtn, className)} ref={setBtnRef} onClick={() => setVisible(true)}>
             <FontAwesomeIcon icon={faCog} />
         </button>
-        {visible && <Popup targetEl={btnRef} placement={PopupPos.BottomLeft} className={s.compPopup} onClose={() => setVisible(false)} closeBackdrop={true}>
+        {visible && <Popup
+            targetEl={btnRef}
+            placement={PopupPos.BottomLeft}
+            className={"tex-lg shadow-lg border-gray-700 bg-gray-400 rounded"}
+            onClose={() => setVisible(false)}
+            closeBackdrop={true}>
+
             {children}
         </Popup>}
     </>;
diff --git a/src/cpu/comps/builtins.tsx b/src/cpu/comps/builtins.tsx
@@ -10,6 +10,7 @@ import { createAddressingComps } from "./Addressing";
 import { createInputOutputComps } from "./InputOutput";
 import { createLedOutputComps } from "./peripheral/LedOutputSimple";
 import { createRegFileCtrlComps } from "./riscv/RegisterControl";
+import { createCompIoComps } from "./CompPort";
 
 export function buildCompLibrary() {
     let compLibrary = new CompLibrary();
@@ -28,6 +29,7 @@ export function buildCompLibrary() {
         ...createInputOutputComps(args),
         ...createLedOutputComps(args),
         ...createRegFileCtrlComps(args),
+        ...createCompIoComps(args),
     ];
 
     for (let comp of comps) {
diff --git a/src/cpu/displayTools/BooleanEditor.tsx b/src/cpu/displayTools/BooleanEditor.tsx
@@ -0,0 +1,17 @@
+import clsx from 'clsx';
+import React from 'react';
+
+export const BooleanEditor: React.FC<{
+    className?: string,
+    value: boolean,
+    update: (end: boolean, value: boolean) => void,
+}> = ({ className, value, update }) => {
+
+    function editValue(ev: React.ChangeEvent<HTMLInputElement>) {
+        update(true, ev.target.checked);
+    }
+
+    return <label className={clsx("", className)}>
+        <input type="checkbox" className={clsx()} checked={value} onChange={editValue} />
+    </label>;
+}
diff --git a/src/cpu/displayTools/HexValueEditor.module.scss b/src/cpu/displayTools/HexValueEditor.module.scss
@@ -35,19 +35,26 @@
     pointer-events: auto;
     background-color: #fff3;
 
-    &:hover {
+    &:hover:not(.readonly) {
         background-color: #fff3;
     }
 
+    &.minimal.readonly {
+        background-color: transparent;
+    }
+
     &.minimal:not(:hover):not(:focus) {
         background-color: transparent;
     }
 
     &:focus {
-        background-color: #ffff;
         outline: none;
     }
 
+    &:focus:not(.readonly) {
+        background-color: #ffff;
+    }
+
     &.invalid {
         color: $color-red;
     }
diff --git a/src/cpu/displayTools/HexValueEditor.tsx b/src/cpu/displayTools/HexValueEditor.tsx
diff --git a/src/utils/Portal.module.scss b/src/utils/Portal.module.scss
diff --git a/src/utils/keyboard.ts b/src/utils/keyboard.ts
diff --git a/styles/main.css b/styles/main.css

Original file line number	Diff line number	Diff line change
`@@ -574,6 +574,7 @@ export function backpropagateUnusedSignals(exeSystem: IExeSystem) {`
`574`	`574`	`}`
`575`	`575`
`576`	`576`	`if (allOutputsUnused) {`
	`577`	`+ // console.log('marking net as unused', netToString(net, exeSystem.comps));`
`577`	`578`	`for (let portRef of net.outputs) {`
`578`	`579`	`portRef.exePort.dataUsed = false;`
`579`	`580`	`}`