forked from HEL/circuiteria
David Stadelmann
d9abaf4a53
Add an optional pentagon shape for block and group ports, configured via the element-level `port-shape`, `port-kind` and `port-size` parameters. Individual ports can override them with `shape`, `kind`, `size`, `stroke` and `fill`. Clock ports with a pentagon shape drop the clock triangle and default to a gray fill. Wires attach to the outer end of the pentagon by default. With the new `shell` parameter on `element.elmt` they attach to the inner tip instead. Each port is exposed as a CeTZ group with a `default` anchor plus the cardinal sub-anchors `.east`, `.west`, `.north` and `.south` on the pentagon's bounding box, so wires can attach to any face. For non-pentagon ports the sub-anchors collapse to the default attach point, and the bare `<elmt-id>-port-<port-id>` anchor resolves as before. Add the `port-shape` and `port-shape-attach` examples and the `gallery/test_port_shape` gallery entry.
118 lines
4.1 KiB
Typst
118 lines
4.1 KiB
Typst
// Demonstrates pentagon-shaped ports.
|
||
//
|
||
// - Element-level defaults: `port-shape`, `port-kind`, `port-size`.
|
||
// - Per-port overrides: `shape`, `kind`, `size`, `stroke`, `fill`.
|
||
// - Wire endpoints connect at the outer end of each pentagon.
|
||
// - Clock ports with pentagon shape drop the clock triangle and default
|
||
// to a gray fill.
|
||
#import "/src/lib.typ": circuit, element, util, wire
|
||
|
||
#set page(width: auto, height: auto, margin: .5cm)
|
||
|
||
#circuit({
|
||
// -----------------------------------------------------------------
|
||
// 1) All four sides × input/output
|
||
// -----------------------------------------------------------------
|
||
element.block(
|
||
id: "grid", w: 4, h: 4, x: 0, y: 0,
|
||
name: "sides × in/out", name-anchor: "center",
|
||
fill: util.colors.yellow.lighten(60%),
|
||
port-shape: "pentagon",
|
||
ports: (
|
||
west: (
|
||
(id: "wi", name: "W-in"),
|
||
(id: "wo", name: "W-out", kind: "out"),
|
||
),
|
||
east: (
|
||
(id: "ei", name: "E-in"),
|
||
(id: "eo", name: "E-out", kind: "out"),
|
||
),
|
||
north: (
|
||
(id: "ni", name: "N-in", vertical: true),
|
||
(id: "no", name: "N-out", kind: "out", vertical: true),
|
||
),
|
||
south: (
|
||
(id: "si", name: "S-in", vertical: true),
|
||
(id: "so", name: "S-out", kind: "out", vertical: true),
|
||
),
|
||
),
|
||
)
|
||
|
||
// -----------------------------------------------------------------
|
||
// 2) Per-port styling: fill and stroke overrides + size override
|
||
// -----------------------------------------------------------------
|
||
element.block(
|
||
id: "styled", w: 3, h: 3, x: 10, y: 0,
|
||
name: "per-port styling", name-anchor: "center",
|
||
fill: util.colors.green.lighten(40%),
|
||
port-shape: "pentagon",
|
||
ports: (
|
||
west: ((id: "a", name: "A", fill: util.colors.blue),),
|
||
east: ((id: "b", name: "B", kind: "out",
|
||
stroke: red + 1.5pt, fill: util.colors.pink),),
|
||
north: ((id: "c", name: "C", size: 1.5em),),
|
||
south: ((id: "d", name: "D", kind: "out",
|
||
fill: util.colors.orange),),
|
||
),
|
||
)
|
||
|
||
// -----------------------------------------------------------------
|
||
// 3) Clock port with pentagon → gray fill, no triangle
|
||
// -----------------------------------------------------------------
|
||
element.block(
|
||
id: "clk", w: 3, h: 2.5, x: 16, y: 0,
|
||
name: "clock + pentagon", name-anchor: "center",
|
||
fill: util.colors.orange.lighten(60%),
|
||
port-shape: "pentagon",
|
||
ports: (
|
||
west: ((id: "d", name: "D"),),
|
||
east: ((id: "q", name: "Q", kind: "out"),),
|
||
north: ((id: "clk", name: "CLK", clock: true),),
|
||
),
|
||
)
|
||
|
||
// -----------------------------------------------------------------
|
||
// 4) Two pentagon-ported blocks connected by a wire
|
||
// (wire terminates at outer edge of each pentagon)
|
||
// -----------------------------------------------------------------
|
||
element.block(
|
||
id: "src", w: 2, h: 1.5, x: 0, y: -5,
|
||
name: "src", name-anchor: "center",
|
||
fill: util.colors.pink,
|
||
port-shape: "pentagon",
|
||
ports: (east: ((id: "q", name: "Q", kind: "out"),)),
|
||
)
|
||
element.block(
|
||
id: "dst", w: 2, h: 1.5, x: 6, y: -5,
|
||
name: "dst", name-anchor: "center",
|
||
fill: util.colors.blue,
|
||
port-shape: "pentagon",
|
||
ports: (west: ((id: "d", name: "D"),)),
|
||
)
|
||
wire.wire("w-sd", ("src-port-q", "dst-port-d"))
|
||
|
||
// -----------------------------------------------------------------
|
||
// 5) Group with pentagon ports enclosing a child block
|
||
// -----------------------------------------------------------------
|
||
element.group(
|
||
id: "g", name: "group w/ pentagon ports", name-anchor: "north",
|
||
stroke: (dash: "dashed"),
|
||
fill: util.colors.purple.lighten(70%),
|
||
padding: 2em,
|
||
port-shape: "pentagon",
|
||
ports: (
|
||
west: ((id: "in", name: "IN"),),
|
||
east: ((id: "out", name: "OUT", kind: "out"),),
|
||
),
|
||
{
|
||
element.block(
|
||
id: "inner", w: 2, h: 1.5, x: 12, y: -5,
|
||
fill: util.colors.green,
|
||
ports: (west: ((id: "d"),), east: ((id: "q"),)),
|
||
)
|
||
},
|
||
)
|
||
wire.wire("wgi", ("g-port-in", "inner-port-d"))
|
||
wire.wire("wgo", ("inner-port-q", "g-port-out"))
|
||
})
|