Allow control bits at the bottom of components

Author: jppellet

TODO.md

@@ -43,6 +43,7 @@ Dans les petits plus, mettre en couleur les composants pourrait être intéressa
 
 ### DONE
 
+ * Control bits for most "controlled" components can be put at the bottom
  * Proper mouseover for bezier curves
  * Fix drawing of gates with many inputs
  * Waypoint positioning when embedded right-click

samples/test-draw-controlled-comps.json

@@ -0,0 +1,56 @@
+{ // JSON5
+  v: 6,
+  opts: {name: 'test-draw-controlled-comps', wireStyle: 'hv'},
+  components: {
+    tristate0: {type: 'tristate', pos: [230, 85], in: [0, 1], out: 2},
+    cnot0: {type: 'cnot-array', pos: [135, 390], in: '9-13', out: '14-17'},
+    tristate5: {type: 'tristate', pos: [365, 105], orient: 's', in: [33, 34], out: 35},
+    tristate6: {type: 'tristate', pos: [445, 75], orient: 'w', in: [36, 37], out: 38},
+    tristate7: {type: 'tristate', pos: [580, 85], orient: 'n', in: [39, 40], out: 41},
+    cnot1: {type: 'cnot-array', pos: [260, 395], orient: 's', in: '42-46', out: '47-50'},
+    cnot2: {type: 'cnot-array', pos: [395, 390], orient: 'w', in: '51-55', out: '56-59'},
+    cnot3: {type: 'cnot-array', pos: [520, 395], orient: 'n', in: '60-64', out: '65-68'},
+    tristate8: {type: 'tristate-array', pos: [145, 680], in: '117-121', out: '122-125'},
+    tristate9: {type: 'tristate-array', pos: [275, 680], orient: 's', in: '126-130', out: '131-134'},
+    tristate10: {type: 'tristate-array', pos: [390, 680], orient: 'w', in: '135-139', out: '140-143'},
+    tristate11: {type: 'tristate-array', pos: [540, 685], orient: 'n', in: '144-148', out: '149-152'},
+    tristate16: {type: 'tristate', pos: [230, 185], in: [3, 4], out: 5, bottom: true},
+    tristate1: {type: 'tristate', pos: [340, 205], orient: 's', in: [6, 7], out: 8, bottom: true},
+    tristate2: {type: 'tristate', pos: [465, 205], orient: 'w', in: [18, 19], out: 20, bottom: true},
+    tristate3: {type: 'tristate', pos: [575, 205], orient: 'n', in: [21, 22], out: 23, bottom: true},
+    tristate4: {type: 'tristate-array', pos: [145, 800], in: '24-28', out: '29-32', bottom: true},
+    tristate12: {type: 'tristate-array', pos: [275, 785], orient: 's', in: '105-109', out: '110-113', bottom: true},
+    tristate13: {type: 'tristate-array', pos: [450, 805], orient: 'w', in: ['114-116', 153, 154], out: '155-158', bottom: true},
+    tristate14: {type: 'tristate-array', pos: [555, 785], orient: 'n', in: '159-163', out: '164-167', bottom: true},
+    in0: {type: 'in', pos: [100, 30], id: 168, name: 'E'},
+    in1: {type: 'in', pos: [90, 90], id: 171, name: 'I'},
+    in2: {type: 'in', pos: [55, 320], id: 172, name: 'E'},
+    in3: {type: 'in', pos: [60, 610], id: 173, name: 'E'},
+    cnot8: {type: 'cnot-array', pos: [135, 515], in: [169, 170, '174-176'], out: '177-180', bottom: true},
+    cnot4: {type: 'cnot-array', pos: [260, 505], orient: 's', in: '181-185', out: '186-189', bottom: true},
+    cnot5: {type: 'cnot-array', pos: [440, 520], orient: 'w', in: '190-194', out: '195-198', bottom: true},
+    cnot6: {type: 'cnot-array', pos: [535, 505], orient: 'n', in: '199-203', out: '204-207', bottom: true},
+    mux0: {type: 'mux', pos: [710, 245], in: '437-446', out: [447, 448], from: 8, to: 2},
+    demux1: {type: 'demux', pos: [715, 660], in: '449-452', out: '453-460', from: 2, to: 8},
+    mux1: {type: 'mux', pos: [985, 200], orient: 's', in: '461-470', out: [471, 472], from: 8, to: 2},
+    mux2: {type: 'mux', pos: [1135, 240], orient: 'w', in: '473-482', out: [483, 484], from: 8, to: 2},
+    mux3: {type: 'mux', pos: [1425, 200], orient: 'n', in: '485-494', out: [495, 496], from: 8, to: 2},
+    mux8: {type: 'mux', pos: [800, 240], in: '545-554', out: [555, 556], from: 8, to: 2, bottom: true},
+    mux4: {type: 'mux', pos: [980, 300], orient: 's', in: '557-566', out: [567, 568], from: 8, to: 2, bottom: true},
+    mux5: {type: 'mux', pos: [1225, 245], orient: 'w', in: '569-578', out: [579, 580], from: 8, to: 2, bottom: true},
+    mux6: {type: 'mux', pos: [1415, 310], orient: 'n', in: '581-590', out: [591, 592], from: 8, to: 2, bottom: true},
+    demux2: {type: 'demux', pos: [1035, 610], orient: 's', in: '605-608', out: '609-616', from: 2, to: 8},
+    demux4: {type: 'demux', pos: [1220, 660], orient: 'w', in: '629-632', out: '633-640', from: 2, to: 8},
+    demux8: {type: 'demux', pos: [825, 675], in: '677-680', out: '681-688', from: 2, to: 8, bottom: true},
+    demux0: {type: 'demux', pos: [1030, 710], orient: 's', in: '689-692', out: '693-700', from: 2, to: 8, bottom: true},
+    demux3: {type: 'demux', pos: [1300, 655], orient: 'w', in: '701-704', out: '705-712', from: 2, to: 8, bottom: true},
+    demux5: {type: 'demux', pos: [1470, 595], orient: 'n', in: '713-716', out: '717-724', from: 2, to: 8, bottom: true},
+    demux6: {type: 'demux', pos: [1475, 705], orient: 'n', in: '725-728', out: '729-736', from: 2, to: 8, bottom: true},
+    label0: {type: 'label', pos: [1070, 495], text: 'Demuxes'},
+    label1: {type: 'label', pos: [1055, 70], text: 'Muxes'},
+    label2: {type: 'label', pos: [65, 155], text: 'TristateBuf'},
+    label3: {type: 'label', pos: [80, 740], text: 'TristateBufArray'},
+    label4: {type: 'label', pos: [85, 450], text: 'ControlledInvs'},
+  },
+  wires: [[168, 1], [168, 34], [168, 37, {via: [[495, 115, 's', 'in0']]}], [168, 40], [168, 4, {via: [[130, 215, 's', 'in0']]}], [168, 7, {via: [[130, 290, 's', 'in0']]}], [168, 19, {via: [[130, 290, 's', 'in0'], [400, 155, 'n', 'in0']]}], [168, 22, {via: [[130, 290, 's', 'in0']]}], [171, 0], [171, 3], [171, 33, {via: [[190, 140, 'e', 'in1'], [305, 65, 'e', 'in1']]}], [171, 6, {via: [[190, 140, 'e', 'in1']]}], [172, 13], [172, 46], [172, 55, {via: [[440, 445, 's', 'in2']]}], [172, 64], [172, 176, {via: [[185, 575, 's', 'in2']]}], [172, 185], [172, 194], [172, 203], [173, 121], [173, 130], [173, 139, {via: [[450, 730, 's', 'in3']]}], [173, 148], [173, 28, {via: [[195, 855, 's', 'in3']]}], [173, 109], [173, 154], [173, 163]]
+}

simulator/src/ComponentMenu.ts

@@ -107,7 +107,7 @@ const componentsMenu: Array<Section> = [{
     items: [
         Gate1Def.button({ type: "not" }, "not"),
         Gate1Def.button({ type: "buf" }, "buf", { visible: withButton }),
-        TristateBufferDef.button("tri", { compat: "tri", visible: withButton }),
+        TristateBufferDef.button({ bottom: false }, "tri", { compat: "tri", visible: withButton }),
 
         GateNDef.button({ type: "and", bits: 2 }, "and"),
         GateNDef.button({ type: "or", bits: 2 }, "or"),
@@ -134,9 +134,9 @@ const componentsMenu: Array<Section> = [{
         GateNDef.button({ type: "nor", bits: 4 }, "nor4", { compat: "nor4", visible: ifShowOnly }),
         GateNDef.button({ type: "xnor", bits: 4 }, "xnor4", { compat: "xnor4", visible: ifShowOnly }),
 
-        ControlledInverterDef.button({ bits: 4 }, "ControlledInverter", { compat: "switched-inverter", visible: withButton }),
+        ControlledInverterDef.button({ bits: 4, bottom: false }, "ControlledInverter", { compat: "switched-inverter", visible: withButton }),
         GateArrayDef.button({ type: "and", bits: 4 }, "GateArray", { compat: "quad-gate", visible: withButton }),
-        TristateBufferArrayDef.button({ bits: 4 }, "TristateBufferArray", { visible: withButton }),
+        TristateBufferArrayDef.button({ bits: 4, bottom: false }, "TristateBufferArray", { visible: withButton }),
 
     ],
 }, {

simulator/src/LogicEditor.ts

@@ -1952,6 +1952,20 @@ export class LogicEditor extends HTMLElement implements DrawableParent {
 
     private doDrawWithContext(g: GraphicsRendering, width: number, height: number, baseTransform: DOMMatrixReadOnly, contentTransform: DOMMatrixReadOnly, skipBorder: boolean, transparentBackground: boolean, __redrawMask: boolean) {
 
+        // Draw order:
+        // * Clear
+        // * Highlight rectangles
+        // * Grid
+        // * Guidelines
+        // * Border
+        // * Components - background
+        // * Wires
+        // * Components - normal
+        // * Anchors
+        // * Components - overlays
+        // * Refs
+        // * Selection rect
+
         // TODO handle redrawMask
         // if (redrawMask) {
         //     console.log("would redraw mask")

simulator/src/UIEventManager.ts

@@ -203,6 +203,13 @@ export class UIEventManager {
     }
 
     public updateMouseOver([x, y]: [number, number], pullingWire: boolean, settingAnchor: boolean) {
+
+        // Mouseover search order:
+        // * Components - overlays
+        // * Components - normal, and nodes, sometimes
+        // * Wires, sometimes
+        // * Components - background
+
         const findMouseOver: () => Drawable | null = () => {
             // easy optimization: maybe we're still over the
             // same component as before, so quickly check this

simulator/src/components/ControlledInverter.ts

@@ -3,34 +3,40 @@ import { COLOR_COMPONENT_BORDER, COLOR_UNKNOWN, circle, colorForLogicValue } fro
 import { div, mods, tooltipContent } from "../htmlgen"
 import { S } from "../strings"
 import { ArrayFillWith, LogicValue, Unknown, isHighImpedance, isUnknown, typeOrUndefined } from "../utils"
-import { ParametrizedComponentBase, Repr, ResolvedParams, defineParametrizedComponent, groupVertical, param } from "./Component"
+import { ParametrizedComponentBase, Repr, ResolvedParams, defineParametrizedComponent, groupVertical, param, paramBool } from "./Component"
 import { DrawContext, DrawableParent, GraphicsRendering, MenuItems } from "./Drawable"
 
 
 export const ControlledInverterDef =
     defineParametrizedComponent("cnot-array", true, true, {
-        variantName: ({ bits }) => `cnot-array-${bits}`,
+        variantName: ({ bits, bottom }) => `cnot-array-${bits}${bottom ? "b" : ""}`,
         idPrefix: "cnot",
         button: { imgWidth: 50 },
         repr: {
             bits: typeOrUndefined(t.number),
+            bottom: typeOrUndefined(t.boolean),
         },
         valueDefaults: {},
         params: {
             bits: param(4, [2, 4, 8, 16]),
+            bottom: paramBool(),
         },
-        validateParams: ({ bits }) => ({
+        validateParams: ({ bits, bottom }) => ({
             numBits: bits,
+            controlPinsAtBottom: bottom,
         }),
 
         size: ({ numBits }) => ({
             gridWidth: 4,
             gridHeight: 8 + Math.max(0, numBits - 8),
         }),
-        makeNodes: ({ numBits, gridHeight }) => ({
+        makeNodes: ({ numBits, controlPinsAtBottom, gridHeight }) => ({
             ins: {
                 In: groupVertical("w", -3, 0, numBits),
-                S: [0, -(gridHeight / 2 + 1), "n"],
+                S: [0,
+                    -(gridHeight / 2 + 1) * (controlPinsAtBottom ? -1 : 1),
+                    controlPinsAtBottom ? "s" : "n",
+                ],
             },
             outs: {
                 Out: groupVertical("e", +3, 0, numBits),
@@ -47,16 +53,19 @@ export type ControlledInverterParams = ResolvedParams<typeof ControlledInverterD
 export class ControlledInverter extends ParametrizedComponentBase<ControlledInverterRepr> {
 
     public readonly numBits: number
+    public readonly controlPinsAtBottom: boolean
 
     public constructor(parent: DrawableParent, params: ControlledInverterParams, saved?: ControlledInverterRepr) {
         super(parent, ControlledInverterDef.with(params), saved)
         this.numBits = params.numBits
+        this.controlPinsAtBottom = params.controlPinsAtBottom
     }
 
     public toJSON() {
         return {
             ...this.toJSONBase(),
             bits: this.numBits === ControlledInverterDef.aults.bits ? undefined : this.numBits,
+            bottom: this.controlPinsAtBottom === ControlledInverterDef.aults.bottom ? undefined : this.controlPinsAtBottom,
         }
     }
 
@@ -89,14 +98,19 @@ export class ControlledInverter extends ParametrizedComponentBase<ControlledInve
     protected override doDraw(g: GraphicsRendering, ctx: DrawContext) {
         this.doDrawDefault(g, ctx, {
             skipLabels: true,
-            drawInside: ({ top, left, right }) => {
+            drawInside: ({ top, bottom, left, right }) => {
                 const invert = this.inputs.S.value
 
                 g.lineWidth = 2
                 g.strokeStyle = colorForLogicValue(invert)
                 g.beginPath()
-                g.moveTo(this.posX, top)
-                g.lineTo(this.posX, this.posY - 4)
+                if (this.controlPinsAtBottom) {
+                    g.moveTo(this.posX, bottom)
+                    g.lineTo(this.posX, this.posY + 4)
+                } else {
+                    g.moveTo(this.posX, top)
+                    g.lineTo(this.posX, this.posY - 4)
+                }
                 g.stroke()
 
                 g.strokeStyle = invert === true ? COLOR_COMPONENT_BORDER : COLOR_UNKNOWN
@@ -114,8 +128,10 @@ export class ControlledInverter extends ParametrizedComponentBase<ControlledInve
     }
 
     protected override makeComponentSpecificContextMenuItems(): MenuItems {
+        const s = S.Components.Generic.contextMenu
         return [
-            this.makeChangeParamsContextMenuItem("inputs", S.Components.Generic.contextMenu.ParamNumBits, this.numBits, "bits"),
+            this.makeChangeParamsContextMenuItem("inputs", s.ParamNumBits, this.numBits, "bits"),
+            this.makeChangeBooleanParamsContextMenuItem(s.ParamControlBitAtBottom, this.controlPinsAtBottom, "bottom"),
             ...this.makeForceOutputsContextMenuItem(true),
         ]
     }

simulator/src/components/Demux.ts

@@ -242,7 +242,7 @@ export class Demux extends ParametrizedComponentBase<DemuxRepr> {
             this.makeChangeParamsContextMenuItem("inputs", s.ParamNumFrom, this.numFrom, "from"),
             this.makeChangeParamsContextMenuItem("outputs", s.ParamNumTo, this.numTo, "to", [2, 4, 8, 16].map(x => x * this.numFrom)),
             ["mid", MenuData.sep()],
-            this.makeChangeBooleanParamsContextMenuItem(s.ParamControlAtBottom, this.controlPinsAtBottom, "bottom"),
+            this.makeChangeBooleanParamsContextMenuItem(this.numSel === 1 ? S.Components.Generic.contextMenu.ParamControlBitAtBottom : S.Components.Generic.contextMenu.ParamControlBitsAtBottom, this.controlPinsAtBottom, "bottom"),
             ["mid", toggleShowWiringItem],
             ["mid", toggleUseHighZItem],
             ...this.makeForceOutputsContextMenuItem(true),

simulator/src/components/Mux.ts

@@ -209,7 +209,7 @@ export class Mux extends ParametrizedComponentBase<MuxRepr> {
             this.makeChangeParamsContextMenuItem("outputs", s.ParamNumTo, this.numTo, "to"),
             this.makeChangeParamsContextMenuItem("inputs", s.ParamNumFrom, this.numFrom, "from", [2, 4, 8, 16].map(x => x * this.numTo)),
             ["mid", MenuData.sep()],
-            this.makeChangeBooleanParamsContextMenuItem(s.ParamControlAtBottom, this.controlPinsAtBottom, "bottom"),
+            this.makeChangeBooleanParamsContextMenuItem(this.numSel === 1 ? S.Components.Generic.contextMenu.ParamControlBitAtBottom : S.Components.Generic.contextMenu.ParamControlBitsAtBottom, this.controlPinsAtBottom, "bottom"),
             ["mid", toggleShowWiringItem],
             ...this.makeForceOutputsContextMenuItem(true),
         ]

simulator/src/components/TristateBuffer.ts

@@ -1,20 +1,35 @@
-import { COLOR_BACKGROUND, COLOR_COMPONENT_BORDER, drawWireLineToComponent, GRID_STEP } from "../drawutils"
+import * as t from "io-ts"
+import { COLOR_BACKGROUND, COLOR_COMPONENT_BORDER, COLOR_MOUSE_OVER, drawWireLineToComponent, GRID_STEP } from "../drawutils"
 import { div, mods, tooltipContent } from "../htmlgen"
 import { S } from "../strings"
-import { HighImpedance, isHighImpedance, isUnknown, LogicValue, Unknown } from "../utils"
-import { ComponentBase, defineComponent, Repr } from "./Component"
-import { DrawableParent, DrawContext, GraphicsRendering } from "./Drawable"
+import { HighImpedance, isHighImpedance, isUnknown, LogicValue, typeOrUndefined, Unknown } from "../utils"
+import { defineParametrizedComponent, paramBool, ParametrizedComponentBase, Repr, ResolvedParams } from "./Component"
+import { DrawableParent, DrawContext, GraphicsRendering, MenuItems } from "./Drawable"
 
 export const TristateBufferDef =
-    defineComponent("tristate", {
+    defineParametrizedComponent("tristate", true, true, {
+        variantName: ({ bottom }) => `tristate${bottom ? "b" : ""}`,
         idPrefix: "tristate",
         button: { imgWidth: 50 },
+        repr: {
+            bottom: typeOrUndefined(t.boolean),
+        },
         valueDefaults: {},
-        size: { gridWidth: 7, gridHeight: 4 },
-        makeNodes: () => ({
+        params: {
+            bottom: paramBool(),
+        },
+        validateParams: ({ bottom }) => {
+            return { controlPinsAtBottom: bottom }
+        },
+        size: () => ({ gridWidth: 4, gridHeight: 4 }),
+        makeNodes: ({ controlPinsAtBottom }) => ({
             ins: {
                 In: [-4, 0, "w", { leadLength: 20 }],
-                E: [0, -3, "n", "E (Enable)", { leadLength: 20 }],
+                E: [0,
+                    controlPinsAtBottom ? 3 : -3,
+                    controlPinsAtBottom ? "s" : "n",
+                    "E (Enable)", { leadLength: 20 },
+                ],
             },
             outs: {
                 Out: [+4, 0, "e", { leadLength: 20 }],
@@ -24,15 +39,23 @@ export const TristateBufferDef =
     })
 
 type TristateBufferRepr = Repr<typeof TristateBufferDef>
+type TristateBufferParams = ResolvedParams<typeof TristateBufferDef>
 
-export class TristateBuffer extends ComponentBase<TristateBufferRepr> {
+export class TristateBuffer extends ParametrizedComponentBase<TristateBufferRepr> {
 
-    public constructor(parent: DrawableParent, saved?: TristateBufferRepr) {
-        super(parent, TristateBufferDef, saved)
+    public readonly controlPinsAtBottom: boolean
+
+    public constructor(parent: DrawableParent, params: TristateBufferParams, saved?: TristateBufferRepr) {
+        super(parent, TristateBufferDef.with(params), saved)
+
+        this.controlPinsAtBottom = params.controlPinsAtBottom
     }
 
     public toJSON() {
-        return this.toJSONBase()
+        return {
+            ... this.toJSONBase(),
+            bottom: this.controlPinsAtBottom === TristateBufferDef.aults.bottom ? undefined : this.controlPinsAtBottom,
+        }
     }
 
     public override makeTooltip() {
@@ -62,37 +85,16 @@ export class TristateBuffer extends ComponentBase<TristateBufferRepr> {
 
     protected override doDraw(g: GraphicsRendering, ctx: DrawContext) {
 
-        const width = this.unrotatedWidth
-        const height = this.unrotatedHeight
-        const left = this.posX - width / 2
-        // const right = left + width
-        const top = this.posY - height / 2
-        const bottom = top + height
-
-        if (ctx.isMouseOver) {
-            const frameWidth = 2
-            const frameMargin = 2
-            g.lineWidth = frameWidth
-            g.strokeStyle = ctx.borderColor
-            g.beginPath()
-            g.rect(
-                left - frameWidth - frameMargin,
-                top - frameWidth - frameMargin,
-                width + 2 * (frameWidth + frameMargin),
-                height + 2 * (frameWidth + frameMargin)
-            )
-            g.stroke()
-        }
-
         drawWireLineToComponent(g, this.inputs.In)
         drawWireLineToComponent(g, this.inputs.E)
         drawWireLineToComponent(g, this.outputs.Out)
 
+        const { top, bottom } = this.bounds()
         const gateWidth = (2 * Math.max(2, this.inputs._all.length)) * GRID_STEP
         const gateLeft = this.posX - gateWidth / 2
         const gateRight = this.posX + gateWidth / 2
         g.fillStyle = COLOR_BACKGROUND
-        g.strokeStyle = COLOR_COMPONENT_BORDER
+        g.strokeStyle = ctx.isMouseOver ? COLOR_MOUSE_OVER : COLOR_COMPONENT_BORDER
         g.lineWidth = 3
 
         g.beginPath()
@@ -103,5 +105,11 @@ export class TristateBuffer extends ComponentBase<TristateBufferRepr> {
         g.stroke()
     }
 
+    protected override makeComponentSpecificContextMenuItems(): MenuItems {
+        return [
+            this.makeChangeBooleanParamsContextMenuItem(S.Components.Generic.contextMenu.ParamControlBitAtBottom, this.controlPinsAtBottom, "bottom"),
+        ]
+    }
+
 }
 TristateBufferDef.impl = TristateBuffer