Draw wires from end to end instead of from node to node

Author: jppellet

TODO.md

@@ -125,3 +125,4 @@ Dans les petits plus, mettre en couleur les composants pourrait être intéressa
  * Unify click-and-drag also from left buttons instead of click-and-move
  * Name field for non-input components, done with component anchoring
  * Lock component to some "parent" to move them more intuitively
+ * Draw wires from edge of component to the other edge when connected

simulator/src/components/ALU.ts

@@ -40,7 +40,7 @@ export const ALUDef =
             const top = -bottom
             const topGroupBits = usesExtendedOpcode ? 5 : 3
             // top group is built together
-            const topGroup = groupHorizontal("n", 0, top, topGroupBits)
+            const topGroup = groupHorizontal("n", 0, top, topGroupBits, undefined, { leadLength: 20 })
             const cin = topGroup.pop()!
             // extracted to be mapped correctly when switching between reduced/extended opcodes
             const opMode = topGroup.pop()!
@@ -50,13 +50,13 @@ export const ALUDef =
                     B: groupVertical("w", -outputX, inputCenterY, numBits),
                     Op: topGroup,
                     Mode: opMode,
-                    Cin: [cin[0], cin[1], "n", `Cin (${S.Components.ALU.InputCinDesc})`],
+                    Cin: [cin[0], cin[1], "n", `Cin (${S.Components.ALU.InputCinDesc})`, { leadLength: 10 }],
                 },
                 outs: {
                     S: groupVertical("e", outputX, 0, numBits),
-                    V: [0, bottom, "s", "V (oVerflow)"],
-                    Z: [2, bottom, "s", "Z (Zero)"],
-                    Cout: [-2, bottom, "s", `Cout (${S.Components.ALU.OutputCoutDesc})`],
+                    V: [0, bottom, "s", "V (oVerflow)", { leadLength: 20 }],
+                    Z: [2, bottom, "s", "Z (Zero)", { leadLength: 20 }],
+                    Cout: [-2, bottom, "s", `Cout (${S.Components.ALU.OutputCoutDesc})`, { leadLength: 20 }],
                 },
             }
         },
@@ -169,24 +169,24 @@ export class ALU extends ParametrizedComponentBase<ALURepr> {
 
         // inputs
         for (const input of this.inputs.A) {
-            drawWireLineToComponent(g, input, left, input.posYInParentTransform)
+            drawWireLineToComponent(g, input)
         }
         for (const input of this.inputs.B) {
-            drawWireLineToComponent(g, input, left, input.posYInParentTransform)
+            drawWireLineToComponent(g, input)
         }
         for (const input of this.inputs.Op) {
-            drawWireLineToComponent(g, input, input.posXInParentTransform, lowerTop)
+            drawWireLineToComponent(g, input)
         }
-        drawWireLineToComponent(g, this.inputs.Mode, this.inputs.Mode.posXInParentTransform, lowerTop)
-        drawWireLineToComponent(g, this.inputs.Cin, this.inputs.Cin.posXInParentTransform, lowerTop)
+        drawWireLineToComponent(g, this.inputs.Mode)
+        drawWireLineToComponent(g, this.inputs.Cin)
 
         // outputs
         for (const output of this.outputs.S) {
-            drawWireLineToComponent(g, output, right, output.posYInParentTransform)
+            drawWireLineToComponent(g, output)
         }
-        drawWireLineToComponent(g, this.outputs.Z, this.outputs.Z.posXInParentTransform, bottom - 17)
-        drawWireLineToComponent(g, this.outputs.V, this.outputs.V.posXInParentTransform, bottom - 9)
-        drawWireLineToComponent(g, this.outputs.Cout, this.outputs.Cout.posXInParentTransform, bottom - 3)
+        drawWireLineToComponent(g, this.outputs.Z)
+        drawWireLineToComponent(g, this.outputs.V)
+        drawWireLineToComponent(g, this.outputs.Cout)
 
         // outline
         g.fillStyle = COLOR_BACKGROUND

simulator/src/components/Component.ts

@@ -2,7 +2,7 @@ import * as t from "io-ts"
 import JSON5 from "json5"
 import type { ComponentKey, DefAndParams, LibraryButtonOptions, LibraryButtonProps, LibraryItem } from "../ComponentMenu"
 import { DrawParams, LogicEditor } from "../LogicEditor"
-import { COLOR_BACKGROUND, COLOR_COMPONENT_INNER_LABELS, COLOR_GROUP_SPAN, DrawingRect, GRID_STEP, drawClockInput, drawComponentName, drawLabel, drawWireLineToComponent, isTrivialNodeName, shouldShowNode, useCompact } from "../drawutils"
+import { COLOR_BACKGROUND, COLOR_COMPONENT_INNER_LABELS, COLOR_GROUP_SPAN, DrawingRect, GRID_STEP, drawClockInput, drawComponentName, drawLabel, drawWireLineToComponent, isTrivialNodeName, shouldShowWiresTo, useCompact } from "../drawutils"
 import { IconName, ImageName } from "../images"
 import { S, Template } from "../strings"
 import { ArrayFillUsing, ArrayOrDirect, EdgeTrigger, Expand, FixedArrayMap, HasField, HighImpedance, InteractionResult, LogicValue, LogicValueRepr, Mode, Unknown, brand, deepArrayEquals, isArray, isBoolean, isNumber, isRecord, isString, mergeWhereDefined, toLogicValueRepr, typeOrUndefined, validateJson } from "../utils"
@@ -196,10 +196,19 @@ export const ComponentNameRepr = typeOrUndefined(
     ])
 )
 
-export type NodeOutDesc = readonly [x: number, y: number, orient: Orientation, fullName?: string, opts?: { hasTriangle?: boolean, labelName?: string }]
-export type NodeInDesc = readonly [x: number, y: number, orient: Orientation, fullName?: string, opts?: { hasTriangle?: boolean, labelName?: string, prefersSpike?: boolean, isClock?: boolean }]
+type NodeOutDescOptions = { hasTriangle?: boolean, labelName?: string, leadLength?: number }
+export type NodeOutDesc =
+    | readonly [x: number, y: number, orient: Orientation, opts?: NodeOutDescOptions]
+    | readonly [x: number, y: number, orient: Orientation, fullName?: string, opts?: NodeOutDescOptions]
+
+
+type NodeInDescOptions = { hasTriangle?: boolean, labelName?: string, leadLength?: number, prefersSpike?: boolean, isClock?: boolean }
+export type NodeInDesc =
+    | readonly [x: number, y: number, orient: Orientation, opts?: NodeInDescOptions]
+    | readonly [x: number, y: number, orient: Orientation, fullName?: string, opts?: NodeInDescOptions]
+
 export type NodeDesc = NodeOutDesc | NodeInDesc
-export type NodeDescInGroup = readonly [x: number, y: number, shortNameOverride?: string]
+export type NodeDescInGroup = readonly [x: number, y: number, shortNameOverride?: string, opts?: NodeInDescOptions]
 export type NodeGroupDesc<D extends NodeDesc> = ReadonlyArray<D>
 export type NodeGroupMultiDesc<D extends NodeDesc> = ReadonlyArray<NodeGroupDesc<D>>
 export type NodeRec<D extends NodeDesc> = Record<string, D | NodeGroupDesc<D> | NodeGroupMultiDesc<D>>
@@ -417,6 +426,7 @@ export abstract class ComponentBase<
             _gridOffsetY: number,
             hasTriangle: boolean,
             orient: Orientation,
+            leadLength: number | undefined,
         ) => TNode) {
 
         const nodes: Record<string, TNode | ReadonlyArray<TNode> | ReadonlyArray<ReadonlyArray<TNode>>> = {}
@@ -426,10 +436,20 @@ export abstract class ComponentBase<
         if (nodeRec !== undefined) {
             const makeNode = (group: NodeGroup<TNode> | undefined, shortName: string, desc: TDesc) => {
                 const spec = specs[nextSpecIndex++]
-                const [offsetX, offsetY, orient, nameOverride, options_] = desc
-                const options = options_ as NodeInDesc[4] // bleh
+                const [offsetX, offsetY, orient, nameOrOptions, options_] = desc
+                let nameOverride: string | undefined = undefined
+                let options: NodeInDescOptions | undefined = undefined
+                if (isString(nameOrOptions)) {
+                    nameOverride = nameOrOptions
+                } else if (nameOrOptions !== undefined) {
+                    options = nameOrOptions
+                }
+                if (options_ !== undefined) {
+                    options = options_
+                }
                 const isClock = options?.isClock ?? false
                 const prefersSpike = options?.prefersSpike ?? false
+                const leadLength = options?.leadLength
                 const hasTriangle = options?.hasTriangle ?? false
                 if (group !== undefined && nameOverride !== undefined) {
                     // names in groups are considered short names to be used as labels
@@ -449,6 +469,7 @@ export abstract class ComponentBase<
                     offsetY,
                     hasTriangle,
                     orient,
+                    leadLength,
                 )
                 if (prefersSpike || isClock) {
                     if (newNode instanceof NodeIn) {
@@ -874,12 +895,11 @@ export abstract class ComponentBase<
             return
         }
 
-        const offset = node.hasTriangle ? 3 : 0
-        drawWireLineToComponent(g, node, ...this.anchorFor(node, bounds, offset), node.hasTriangle)
+        drawWireLineToComponent(g, node)
     }
 
     protected drawGroupBox(g: GraphicsRendering, group: NodeGroup<Node>, bounds: DrawingRect) {
-        if (!shouldShowNode(group.nodes)) {
+        if (!shouldShowWiresTo(group.nodes)) {
             return
         }
 
@@ -1459,15 +1479,15 @@ export abstract class ParametrizedComponentBase<
 //
 
 export function group<const TDescArr extends readonly NodeDescInGroup[]>(orient: Orientation, nodes: TDescArr) {
-    return FixedArrayMap(nodes, ([x, y, name]) => [x, y, orient, name] as const)
+    return FixedArrayMap(nodes, ([x, y, name, opts]) => [x, y, orient, name, opts] as const)
 }
 
-export function groupVertical(orient: "e" | "w", x: number, yCenter: number, num: number, spacing?: number) {
+export function groupVertical(orient: "e" | "w", x: number, yCenter: number, num: number, spacing?: number, opts?: NodeInDescOptions) {
     const spacing_ = spacing ?? (useCompact(num) ? 1 : 2)
     const span = (num - 1) * spacing_
     const yTop = yCenter - span / 2
     return group(orient,
-        ArrayFillUsing(i => [x, yTop + i * spacing_], num)
+        ArrayFillUsing(i => [x, yTop + i * spacing_, undefined, opts], num)
     )
 }
 
@@ -1482,12 +1502,12 @@ export function groupVerticalMulti(orient: "e" | "w", x: number, yCenter: number
     ), numOuter)
 }
 
-export function groupHorizontal(orient: "n" | "s", xCenter: number, y: number, num: number, spacing?: number) {
+export function groupHorizontal(orient: "n" | "s", xCenter: number, y: number, num: number, spacing?: number, opts?: NodeInDescOptions) {
     const spacing_ = spacing ?? (useCompact(num) ? 1 : 2)
     const span = (num - 1) * spacing_
     const xRight = xCenter + span / 2
     return group(orient,
-        ArrayFillUsing(i => [xRight - i * spacing_, y], num)
+        ArrayFillUsing(i => [xRight - i * spacing_, y, undefined, opts], num)
     )
 }
 

simulator/src/components/Demux.ts

@@ -58,7 +58,7 @@ export const DemuxDef =
             return {
                 ins: {
                     In: groupVertical("w", inX, 0, numFrom),
-                    S: groupHorizontal(controlPinsAtBottom ? "s" : "n", 0, selY, numSel),
+                    S: groupHorizontal(controlPinsAtBottom ? "s" : "n", 0, selY, numSel, undefined, { leadLength: 35 }),
                 },
                 outs: {
                     Z: groupOfOutputs,
@@ -148,19 +148,19 @@ export class Demux extends ParametrizedComponentBase<DemuxRepr> {
 
         // inputs
         for (const input of this.inputs.In) {
-            drawWireLineToComponent(g, input, left, input.posYInParentTransform)
+            drawWireLineToComponent(g, input)
         }
 
         // selectors
         for (const sel of this.inputs.S) {
-            drawWireLineToComponent(g, sel, sel.posXInParentTransform, top + dy)
+            drawWireLineToComponent(g, sel)
         }
 
 
         // outputs
         for (const outputGroup of this.outputs.Z) {
             for (const output of outputGroup) {
-                drawWireLineToComponent(g, output, right, output.posYInParentTransform)
+                drawWireLineToComponent(g, output)
             }
         }
 

simulator/src/components/DisplayBar.ts

@@ -211,7 +211,7 @@ export class DisplayBar extends DisplayBarBase<DisplayBarRepr, LogicValue> {
     public getWidthAndHeight() {
         const w = 10
         const h = 2
-        switch (this._display) {
+        switch (this._display ?? DisplayBarDef.aults.display) {
             case "h":
                 return [w * GRID_STEP, h * GRID_STEP] as const
             case "v":
@@ -251,7 +251,9 @@ export class DisplayBar extends DisplayBarBase<DisplayBarRepr, LogicValue> {
 
     private updateInputOffsetX() {
         const width = this.getWidthAndHeight()[0]
-        this.inputs.I.gridOffsetX = -pxToGrid(width / 2) - 2
+        const input = this.inputs.I
+        input.gridOffsetX = -pxToGrid(width / 2) - 1
+        input.updateLeadLength()
     }
 
     protected override makeComponentSpecificContextMenuItems(): MenuItems {