feature: Add port shape
This commit is contained in:
David Stadelmann committed
1 parent
563bb7b1d2
commit
a51e8bb93b
9 files changed
+8271
-7050
No files matched your search
@@ -230,6 +230,38 @@ wire.stub("g2-port-in", "west")
|
||||
wire.stub("g2-port-out", "east")
|
||||
```, vertical: true)
|
||||
|
||||
#let port-shape = example(```
|
||||
// Block with pentagon-shaped ports.
|
||||
// - port-shape / port-kind / port-size are element-level defaults.
|
||||
// - Any port field (shape, kind, size, stroke, fill) overrides per port.
|
||||
// - kind: "in" → tip points into the block (default)
|
||||
// kind: "out" → tip points away from the block
|
||||
// - clock ports with shape: "pentagon" drop their triangle and default
|
||||
// to a gray fill.
|
||||
element.block(
|
||||
id: "b", w: 3, h: 3, x: 0, y: 0,
|
||||
fill: util.colors.yellow.lighten(60%),
|
||||
port-shape: "pentagon",
|
||||
port-size: 1em,
|
||||
ports: (
|
||||
// west: default input
|
||||
west: ((id: "in", name: "D"),),
|
||||
// east: output — tip points away
|
||||
east: ((id: "out", name: "Q", kind: "out"),),
|
||||
// north: clock port — pentagon replaces the triangle, gray fill
|
||||
north: ((id: "clk", name: "CLK", clock: true),),
|
||||
// south: styled output with per-port fill and stroke
|
||||
south: ((id: "rdy", name: "RDY", kind: "out",
|
||||
fill: util.colors.blue, stroke: red + 1.5pt),),
|
||||
),
|
||||
)
|
||||
// Wires connect at the outer end of each pentagon.
|
||||
wire.stub("b-port-in", "west")
|
||||
wire.stub("b-port-out", "east")
|
||||
wire.stub("b-port-clk", "north")
|
||||
wire.stub("b-port-rdy", "south")
|
||||
```)
|
||||
|
||||
#let intersection = example(```
|
||||
wire.wire("w1", ((0, 0), (1, 1)), style: "zigzag")
|
||||
wire.wire("w2", ((0, 0), (1, -.5)),
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
@@ -0,0 +1,117 @@
|
||||
// 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"))
|
||||
})
|
||||
+7980
-7038
File diff suppressed because it is too large.
Load diff
@@ -16,6 +16,10 @@
|
||||
/// Draws a block element
|
||||
///
|
||||
/// #examples.block
|
||||
///
|
||||
/// Ports can be given a pentagon shape (with configurable direction, size,
|
||||
/// stroke and fill) via `port-shape` and per-port overrides:
|
||||
/// #examples.port-shape
|
||||
/// For other parameters description, see #doc-ref("element.elmt")
|
||||
/// - radius (number, length, ratio, dictionary): The corner radius of the block. See CeTZ documentation for more information
|
||||
#let block(
|
||||
@@ -28,6 +32,9 @@
|
||||
ports: (),
|
||||
ports-margins: (),
|
||||
port-name-padding: 2pt,
|
||||
port-shape: none,
|
||||
port-kind: "in",
|
||||
port-size: 1em,
|
||||
fill: none,
|
||||
radius: 0.5em,
|
||||
stroke: black + 1pt,
|
||||
@@ -46,6 +53,9 @@
|
||||
ports: ports,
|
||||
ports-margins: ports-margins,
|
||||
port-name-padding: port-name-padding,
|
||||
port-shape: port-shape,
|
||||
port-kind: port-kind,
|
||||
port-size: port-size,
|
||||
fill: fill,
|
||||
stroke: stroke,
|
||||
id: id,
|
||||
|
||||
@@ -38,6 +38,9 @@
|
||||
/// - `vertical` (`bool`): Whether the name should be drawn vertically
|
||||
/// - ports-margins (dictionary): Dictionary of ports margins (used with automatic port placement). They keys are cardinal directions ("north", "east", "south", "west"). The values are tuples of (`<start>`, `<end>`) margins (numbers)
|
||||
/// - port-name-padding (number, length): Padding between the port name label and the port anchor point (default `2pt`)
|
||||
/// - port-shape (none, str): Default port shape for all ports of this element. Set to `"pentagon"` to draw pentagon-shaped ports. Overridable per port via the port's `shape` field. See #examples.port-shape
|
||||
/// - port-kind (str): Default direction of ports (`"in"` or `"out"`). Overridable per port via the port's `kind` field
|
||||
/// - port-size (length): Default unit size of pentagon-shaped ports (default `1em`). Overridable per port via the port's `size` field
|
||||
/// - fill (none, color): Fill color
|
||||
/// - stroke (stroke): Border stroke
|
||||
/// - id (str): The block id (for future reference)
|
||||
@@ -58,6 +61,9 @@
|
||||
ports: (:),
|
||||
ports-margins: (:),
|
||||
port-name-padding: 2pt,
|
||||
port-shape: none,
|
||||
port-kind: "in",
|
||||
port-size: 1em,
|
||||
fill: none,
|
||||
stroke: black + 1pt,
|
||||
id: "",
|
||||
@@ -144,6 +150,11 @@
|
||||
ports-margins,
|
||||
debug: debug.ports,
|
||||
name-padding: port-name-padding,
|
||||
port-shape: port-shape,
|
||||
port-kind: port-kind,
|
||||
port-size: port-size,
|
||||
elmt-stroke: stroke,
|
||||
elmt-fill: fill,
|
||||
)
|
||||
}
|
||||
})
|
||||
@@ -26,6 +26,9 @@
|
||||
/// - ports-margins (dictionary): see #doc-ref("element.elmt")
|
||||
/// - outside-port-names (bool): If `true` (default), port name labels are drawn outside the group border so they do not overlap child elements. Set to `false` to draw labels inside, matching the block behaviour
|
||||
/// - port-name-padding (number, length): Padding between the port name label and the group border (default `2pt`). Accepts anything CeTZ accepts as `padding` (number or length)
|
||||
/// - port-shape (none, str): see #doc-ref("element.elmt")
|
||||
/// - port-kind (str): see #doc-ref("element.elmt")
|
||||
/// - port-size (length): see #doc-ref("element.elmt")
|
||||
/// - debug (dictionary): see #doc-ref("element.elmt")
|
||||
#let group(
|
||||
body,
|
||||
@@ -40,6 +43,9 @@
|
||||
ports-margins: (:),
|
||||
outside-port-names: true,
|
||||
port-name-padding: 2pt,
|
||||
port-shape: none,
|
||||
port-kind: "in",
|
||||
port-size: 1em,
|
||||
debug: (
|
||||
ports: false
|
||||
)
|
||||
@@ -98,6 +104,11 @@
|
||||
debug: debug.ports,
|
||||
outside-name: outside-port-names,
|
||||
name-padding: port-name-padding,
|
||||
port-shape: port-shape,
|
||||
port-kind: port-kind,
|
||||
port-size: port-size,
|
||||
elmt-stroke: stroke,
|
||||
elmt-fill: fill,
|
||||
)
|
||||
|
||||
if name != none {
|
||||
|
||||
+61
-12
@@ -1,5 +1,5 @@
|
||||
#import "/src/cetz.typ": draw
|
||||
#import "../util.typ": rotate-anchor, opposite-anchor
|
||||
#import "../util.typ": rotate-anchor, opposite-anchor, port-shape-vertices
|
||||
|
||||
#let add-port(
|
||||
elmt-id, side, port, pos,
|
||||
@@ -8,21 +8,55 @@
|
||||
debug: false,
|
||||
outside-name: false,
|
||||
name-padding: 2pt,
|
||||
port-shape: none,
|
||||
port-kind: "in",
|
||||
port-size: 1em,
|
||||
elmt-stroke: black + 1pt,
|
||||
elmt-fill: none,
|
||||
) = {
|
||||
let name = port.at("name", default: "")
|
||||
let name-rotate = port.at("vertical", default: false)
|
||||
let is-clock = port.at("clock", default: false)
|
||||
|
||||
if (port.at("clock", default: false)) {
|
||||
// Per-port overrides fall back to element-level defaults.
|
||||
let shape = port.at("shape", default: port-shape)
|
||||
let kind = port.at("kind", default: port-kind)
|
||||
let size = port.at("size", default: port-size)
|
||||
let shape-stroke = port.at("stroke", default: elmt-stroke)
|
||||
// Pentagon fill defaults to the element's fill (so the pentagon covers the
|
||||
// block-border segment it crosses). Clock ports default to gray. Per-port
|
||||
// `fill` overrides both.
|
||||
let shape-fill = port.at("fill",
|
||||
default: if is-clock and shape == "pentagon" { gray } else { elmt-fill })
|
||||
|
||||
// When shape is enabled, wire-connection anchor moves outside the block, and
|
||||
// inside-name labels reference the inner tip/base; otherwise both collapse to
|
||||
// the boundary point (unchanged behaviour).
|
||||
let outer-pos = pos
|
||||
let inner-pos = pos
|
||||
|
||||
if shape == "pentagon" {
|
||||
let sh = port-shape-vertices(side, kind, size)
|
||||
let v = sh.vertices.map(off => (rel: off, to: pos))
|
||||
draw.line(
|
||||
v.at(0), v.at(1), v.at(2), v.at(3), v.at(4),
|
||||
close: true,
|
||||
stroke: shape-stroke,
|
||||
fill: shape-fill,
|
||||
)
|
||||
outer-pos = (rel: sh.outer, to: pos)
|
||||
inner-pos = (rel: sh.inner, to: pos)
|
||||
} else if is-clock {
|
||||
if prev == none or next == none {
|
||||
panic("Clock port must have previous and next positions")
|
||||
}
|
||||
|
||||
let size = if port.at("small", default: false) {8pt} else {1em}
|
||||
|
||||
let csize = if port.at("small", default: false) {8pt} else {1em}
|
||||
let offset
|
||||
if (side == "north") { offset = ( 0, -size) }
|
||||
else if (side == "east") { offset = (-size, 0) }
|
||||
else if (side == "south") { offset = ( 0, size) }
|
||||
else if (side == "west") { offset = ( size, 0) }
|
||||
if (side == "north") { offset = ( 0, -csize) }
|
||||
else if (side == "east") { offset = (-csize, 0) }
|
||||
else if (side == "south") { offset = ( 0, csize) }
|
||||
else if (side == "west") { offset = ( csize, 0) }
|
||||
|
||||
let pos1 = (rel: offset, to: pos)
|
||||
|
||||
@@ -41,8 +75,13 @@
|
||||
if name-rotate { rotate-anchor(side) } else { side }
|
||||
}
|
||||
|
||||
// Label sits at the outer edge of the shape for outside-name, inner edge for
|
||||
// inside-name. `name-padding` is thus naturally measured from the shape edge
|
||||
// (or from the boundary when shape is disabled).
|
||||
let label-pos = if outside-name { outer-pos } else { inner-pos }
|
||||
|
||||
draw.content(
|
||||
pos,
|
||||
label-pos,
|
||||
anchor: name-anchor,
|
||||
padding: name-padding,
|
||||
angle: if name-rotate {90deg} else {0deg},
|
||||
@@ -52,7 +91,7 @@
|
||||
|
||||
if debug {
|
||||
draw.circle(
|
||||
pos,
|
||||
outer-pos,
|
||||
name: id,
|
||||
radius: .1,
|
||||
stroke: none,
|
||||
@@ -61,7 +100,7 @@
|
||||
|
||||
} else {
|
||||
draw.hide(draw.circle(
|
||||
pos,
|
||||
outer-pos,
|
||||
radius: 0,
|
||||
stroke: none,
|
||||
name: id
|
||||
@@ -77,6 +116,11 @@
|
||||
debug: false,
|
||||
outside-name: false,
|
||||
name-padding: 2pt,
|
||||
port-shape: none,
|
||||
port-kind: "in",
|
||||
port-size: 1em,
|
||||
elmt-stroke: black + 1pt,
|
||||
elmt-fill: none,
|
||||
) = {
|
||||
let sides = (
|
||||
"north": (tl, tr),
|
||||
@@ -128,7 +172,12 @@
|
||||
debug: debug,
|
||||
outside-name: outside-name,
|
||||
name-padding: name-padding,
|
||||
port-shape: port-shape,
|
||||
port-kind: port-kind,
|
||||
port-size: port-size,
|
||||
elmt-stroke: elmt-stroke,
|
||||
elmt-fill: elmt-fill,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -90,6 +90,55 @@
|
||||
).at(anchor)
|
||||
}
|
||||
|
||||
/// Returns the pentagon port shape vertices and the outer/inner anchor
|
||||
/// offsets for the given side and direction.
|
||||
///
|
||||
/// The pentagon straddles the block boundary: 1 unit outside, 1 unit inside;
|
||||
/// height ±0.5 units. For `kind: "in"` the tip points into the block; for
|
||||
/// `kind: "out"` it points away.
|
||||
///
|
||||
/// - side (str): One of `"north"`, `"east"`, `"south"`, `"west"`
|
||||
/// - kind (str): `"in"` or `"out"`
|
||||
/// - u (length,number): The pentagon unit size
|
||||
/// -> dictionary: `(vertices: (..5 pairs..), outer: (dx, dy), inner: (dx, dy))`
|
||||
#let port-shape-vertices(side, kind, u) = {
|
||||
// Base case: west port, input (tip east / into block).
|
||||
// Vertices as (dx, dy) offsets relative to the boundary anchor.
|
||||
let base-vertices = (
|
||||
(-u, -u/2),
|
||||
(-u, +u/2),
|
||||
(u/2, +u/2),
|
||||
(u, 0), // tip east (inner side)
|
||||
(u/2, -u/2),
|
||||
)
|
||||
// For output, mirror horizontally so the tip points west (outside).
|
||||
if kind == "out" {
|
||||
base-vertices = base-vertices.map(p => (-p.at(0), p.at(1)))
|
||||
}
|
||||
// Outer (wire-connection) and inner (inside-label) anchors for a west port.
|
||||
// Outer is always 1u outside the boundary along the port normal; inner is 1u
|
||||
// inside. Independent of `kind` (only the pentagon fill/tip direction change).
|
||||
let base-outer = (-u, 0)
|
||||
let base-inner = (u, 0)
|
||||
|
||||
// Rotation from west's frame to target side:
|
||||
// west: identity (x, y)
|
||||
// north: (x, y) → (y, -x)
|
||||
// east: (x, y) → (-x, -y)
|
||||
// south: (x, y) → (-y, x)
|
||||
let rot = if side == "west" { p => p }
|
||||
else if side == "north" { p => (p.at(1), -p.at(0)) }
|
||||
else if side == "east" { p => (-p.at(0), -p.at(1)) }
|
||||
else if side == "south" { p => (-p.at(1), p.at(0)) }
|
||||
else { panic("Unknown side: " + side) }
|
||||
|
||||
return (
|
||||
vertices: base-vertices.map(rot),
|
||||
outer: rot(base-outer),
|
||||
inner: rot(base-inner),
|
||||
)
|
||||
}
|
||||
|
||||
#let valid-anchors = (
|
||||
"center", "north", "east", "west", "south",
|
||||
"north-east", "north-west", "south-east", "south-west"
|
||||
|
||||
Reference in new issue
Block a user