Merge branch 'dev' into comp/electrical

Reviewed-on: #5

README.md

@@ -1,3 +1,64 @@
 # circuiteria
 
-Drawing block circuits with Typst made easy, using CeTZ
+Circuiteria is a [Typst](https://typst.app) package for drawing block circuit diagrams using the [CeTZ](https://typst.app/universe/package/cetz) package.
+
+<p align="center">
+  <img src="./gallery/platypus.png" alt="Perry the platypus">
+</p>
+
+## Examples
+<table>
+  <tr>
+    <td colspan="2">
+      <a href="./gallery/test.typ">
+        <img src="./gallery/test.png" width="500px">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td colspan="2">A bit of eveything</td>
+  </tr>
+  <tr>
+    <td colspan="2">
+      <a href="./gallery/test5.typ">
+        <img src="./gallery/test5.png" width="500px">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td colspan="2">Wires everywhere</td>
+  </tr>
+  <tr>
+    <td>
+      <a href="./gallery/test4.typ">
+        <img src="./gallery/test4.png" width="250px">
+      </a>
+    </td>
+    <td>
+      <a href="./gallery/test6.typ">
+        <img src="./gallery/test6.png" width="250px">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td>Groups</td>
+    <td>Rotated</td>
+  </tr>
+</table>
+
+> **Note**\
+> These circuit layouts were copied from a digital design course given by prof. S. Zahno and recreated using this package
+
+*Click on the example image to jump to the code.*
+
+## Usage
+For more information, see the [manual](manual.pdf)
+
+To use this package, simply import [circuiteria](https://typst.app/universe/package/circuiteria) and call the `circuit` function:
+```typ
+#import "@preview/circuiteria:0.2.0"
+#circuiteria.circuit({
+  import circuiteria: *
+  ...
+})
+```

doc/example.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "../src/circuit.typ": circuit
 #import "../src/util.typ"
 

doc/examples.typ

@@ -140,4 +140,29 @@ element.block(id: "b3", w: 2, h: 3,
 wire.wire("w1", ("b1-port-out", "b3-port-in1"))
 wire.wire("w2", ("b2-port-out", "b3-port-in2"),
           style: "zigzag")
-```)
+```)
+
+#let intersection = example(```
+wire.wire("w1", ((0, 0), (1, 1)), style: "zigzag")
+wire.wire("w2", ((0, 0), (1, -.5)),
+          style: "zigzag", zigzag-ratio: 80%)
+wire.intersection("w1.zig")
+```)
+
+#let capacitor = example(```
+electrical.capacitor(
+  x: 0, y: 0, w: 2, h: 1, id: "a",
+  scales: (100%, 80%), gap: 0.3
+)
+
+electrical.capacitor(
+  x: 4, y: -0.5, w: 1, h: 2, id: "b",
+  vertical: true, symbols: ([+], none)
+)
+```, vertical: true)
+
+#let resistor = example(```
+electrical.resistor(x: 0, y: 0, w: 2, h: 0.5, id: "a", zigzags: 8)
+electrical.resistor(x: 4, y: -0.5, w: 0.5, h: 2, id: "b", vertical: true)
+electrical.resistor(x: 6.5, y: 0, w: 2, h: 0.5, id: "c", zigzags: none)
+```, vertical: true)

gallery/platypus.typ

@@ -0,0 +1,77 @@
+#import "../src/lib.typ": *
+
+#set page(width: auto, height: auto, margin: .5cm)
+
+#let teal = rgb(37, 155, 166)
+#let orange = rgb(254, 160, 93)
+#let brown = rgb(97, 54, 60)
+
+#circuit({
+  element.group(id: "platypus", name: "A platypus", {
+    element.block(
+      x: 0, y: 0, w: 2, h: 3, id: "body",
+      fill: teal,
+      ports: (
+        east: (
+          (id: "out"),
+        )
+      ),
+      ports-margins: (
+        east: (50%, 10%)
+      )
+    )
+
+    element.block(
+      x: 2.5, y: 1.5, w: 1.5, h: 1, id: "beak",
+      fill: orange,
+      ports: (
+        south: (
+          (id: "in"),
+        )
+      )
+    )
+
+    wire.wire("w1", ("body-port-out", "beak-port-in"), style: "zigzag", zigzag-ratio: 100%)
+  })
+
+  let O = (rel: (2, 0), to: "platypus.south-east")
+  
+  element.group(id: "perry", name: "Perry the platypus", {
+    element.block(
+      x: (rel: 0, to: O), y: 0, w: 2, h: 3, id: "body",
+      fill: teal,
+      ports: (
+        east: (
+          (id: "out"),
+        )
+      ),
+      ports-margins: (
+        east: (50%, 10%)
+      )
+    )
+
+    element.block(
+      x: (rel: 2.5, to: O), y: 1.5, w: 1.5, h: 1, id: "beak",
+      fill: orange,
+      ports: (
+        south: (
+          (id: "in"),
+        )
+      )
+    )
+
+    element.block(
+      x: (rel: 0.25, to: O), y: 3.2, w: 1.5, h: 0.5, id: "hat",
+      fill: brown
+    )
+
+    wire.wire("w2", ("body-port-out", "beak-port-in"), style: "zigzag", zigzag-ratio: 100%)
+  })
+
+  wire.wire(
+    "w3",
+    ("platypus.east", (horizontal: "perry.west", vertical: ())),
+    directed: true,
+    bus: true
+  )
+})

gallery/test.typ

@@ -1,6 +1,6 @@
 #import "../src/lib.typ": circuit, element, util, wire
 
-#set page(flipped: true)
+#set page(width: auto, height: auto, margin: .5cm)
 
 #circuit({
   element.block(
@@ -294,6 +294,6 @@
     bus: true
   )
 
-  wire.intersection("wResMP-RegFile.dodge-end")
-  wire.intersection("wResMP-AdrSrc.dodge-end")
+  wire.intersection("wResMP-RegFile.dodge-end", radius: .2)
+  wire.intersection("wResMP-AdrSrc.dodge-end", radius: .2)
 })

gallery/test2.typ

@@ -1,6 +1,6 @@
 #import "../src/lib.typ": circuit, element, util, wire
 
-#set page(flipped: true)
+#set page(width: auto, height: auto, margin: .5cm)
 
 #circuit({
   element.block(
@@ -307,6 +307,6 @@
     bus: true
   )
   
-  wire.intersection("wResMP-RegFile.dodge-end")
-  wire.intersection("wResMP-AdrSrc.dodge-end")
+  wire.intersection("wResMP-RegFile.dodge-end", radius: .2)
+  wire.intersection("wResMP-AdrSrc.dodge-end", radius: .2)
 })

gallery/test3.typ

@@ -1,8 +1,7 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "../src/lib.typ": circuit, element, util, wire
 
-#set page(flipped: true)
-#let debug = false
+#set page(width: auto, height: auto, margin: .5cm)
 
 #circuit({
   element.block(
@@ -14,18 +13,14 @@
         (id: "out1"),
         (id: "out2"),
       )
-    ),
-    debug: (
-      ports: debug 
-
     )
   )
   element.gate-and(
-    x: 4, y: 0, w: 2, h: 2, id: "and1", debug: (ports: debug),
+    x: 4, y: 0, w: 2, h: 2, id: "and1",
     inverted: ("in1")
   )
   element.gate-or(
-    x: 7, y: 0, w: 2, h: 2, id: "or1", debug: (ports: debug),
+    x: 7, y: 0, w: 2, h: 2, id: "or1",
     inverted: ("in0", "out")
   )
 
@@ -47,7 +42,7 @@
   )
 
   element.gate-and(
-    x: 11, y: 0, w: 2, h: 2, id: "and2", inputs: 3, debug: (ports: debug),
+    x: 11, y: 0, w: 2, h: 2, id: "and2", inputs: 3,
     inverted: ("in0", "in2")
   )
   for i in range(3) {
@@ -55,35 +50,88 @@
   }
 
   element.gate-xor(
-    x: 14, y: 0, w: 2, h: 2, id: "xor", debug: (ports: debug),
+    x: 14, y: 0, w: 2, h: 2, id: "xor",
     inverted: ("in1")
   )
   
   element.gate-buf(
-    x: 0, y: -3, w: 2, h: 2, id: "buf", debug: (ports: debug)
+    x: 0, y: -3, w: 2, h: 2, id: "buf"
   )
   element.gate-not(
-    x: 0, y: -6, w: 2, h: 2, id: "not", debug: (ports: debug)
+    x: 0, y: -6, w: 2, h: 2, id: "not"
   )
   
   element.gate-and(
-    x: 3, y: -3, w: 2, h: 2, id: "and", debug: (ports: debug)
+    x: 3, y: -3, w: 2, h: 2, id: "and"
   )
   element.gate-nand(
-    x: 3, y: -6, w: 2, h: 2, id: "nand", debug: (ports: debug)
+    x: 3, y: -6, w: 2, h: 2, id: "nand"
   )
   
   element.gate-or(
-    x: 6, y: -3, w: 2, h: 2, id: "or", debug: (ports: debug)
+    x: 6, y: -3, w: 2, h: 2, id: "or"
   )
   element.gate-nor(
-    x: 6, y: -6, w: 2, h: 2, id: "nor", debug: (ports: debug)
+    x: 6, y: -6, w: 2, h: 2, id: "nor"
   )
   
   element.gate-xor(
-    x: 9, y: -3, w: 2, h: 2, id: "xor", debug: (ports: debug)
+    x: 9, y: -3, w: 2, h: 2, id: "xor"
   )
   element.gate-xnor(
-    x: 9, y: -6, w: 2, h: 2, id: "xnor", debug: (ports: debug)
+    x: 9, y: -6, w: 2, h: 2, id: "xnor"
   )
+
+  element.resistor(
+    x: 0, y: -8, w: 2, h: 0.5, id: "res1"
+  )
+
+  element.capacitor(
+    x: 3, y: (from: "res1-port-1", to: "0"),
+    w: 2, h: 0.6,
+    id: "cap1",
+    scales: (100%, 80%),
+    symbols: ([+], [-])
+  )
+
+  element.resistor(
+    x: (rel: 1, to: "cap1-port-1"),
+    y: (from: "cap1-port-1", to: "0"),
+    w: 0.5, h: 2,
+    id: "res2",
+    vertical: true,
+    zigzags: 8
+  )
+
+  element.capacitor(
+    x: (rel: 1, to: "res2.east"),
+    y: (from: "res2-port-1", to: "1"),
+    w: 0.5, h: 2,
+    id: "cap2",
+    vertical: true,
+    symbols: ([a], [b])
+  )
+
+  element.resistor(
+    x: (rel: 1, to: "cap2-port-0"),
+    y: (from: "cap2-port-0", to: "0"),
+    w: 2, h: 0.5,
+    id: "res3",
+    zigzags: none
+  )
+
+  element.resistor(
+    x: (rel: 1, to: "res3-port-1"),
+    y: (from: "res3-port-1", to: "0"),
+    w: 0.5, h: 2,
+    id: "res4",
+    zigzags: none,
+    vertical: true
+  )
+
+  wire.wire("w4", ("res1-port-1", "cap1-port-0"))
+  wire.wire("w5", ("cap1-port-1", "res2-port-0"))
+  wire.wire("w6", ("res2-port-1", "cap2-port-1"))
+  wire.wire("w7", ("cap2-port-0", "res3-port-0"))
+  wire.wire("w8", ("res3-port-1", "res4-port-0"))
 })

gallery/test4.typ

@@ -1,7 +1,7 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "../src/lib.typ": *
 
-#set page(flipped: true)
+#set page(width: auto, height: auto, margin: .5cm)
 
 #circuit({
   element.group(id: "toplvl", name: "Toplevel", {
@@ -18,7 +18,7 @@
         name: "Datapath",
         ports: (
           north: (
-            (id: "clk", clock: true),
+            (id: "clk", clock: true, small: true),
             (id: "Zero"),
             (id: "Regsrc"),
             (id: "PCSrc"),
@@ -104,7 +104,7 @@
       name: "Data\n Memory",
       ports: (
         north: (
-          (id: "clk", clock: true),
+          (id: "clk", clock: true, small: true),
           (id: "WE", name: "WE")
         ),
         west: (
@@ -200,18 +200,22 @@
     draw.content("dmem.south-west", [*External Memories*], anchor: "north", padding: 10pt)
   })
 
-  wire.wire(
-    "w-dp-clk",
-    ("dp-port-clk", (-1, 4.2)),
-    style: "zigzag",
-    zigzag-dir: "horizontal",
-    zigzag-ratio: 100%
+  draw.line(name: "w-dp-clk",
+    "dp-port-clk",
+    (rel: (0, .5), to: ()),
+    (
+      rel: (-.5, 0),
+      to: (horizontal: "toplvl.west", vertical: ())
+    )
   )
   draw.content("w-dp-clk.end", "clk", anchor: "east", padding: 3pt)
   
-  wire.wire(
-    "w-dp-rst",
-    ("dp-port-rst", (horizontal: (-1, 0), vertical: ()))
+  draw.line(name: "w-dp-rst",
+    "dp-port-rst",
+    (
+      rel: (-.5, 0),
+      to: (horizontal: "toplvl.west", vertical: ())
+    )
   )
   draw.content("w-dp-rst.end", "rst", anchor: "east", padding: 3pt)
 })

gallery/test5.typ

@@ -1,7 +1,7 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "../src/lib.typ": *
 
-#set page(flipped: true, paper: "a3")
+#set page(width: auto, height: auto, margin: .5cm)
 
 #circuit({
   element.multiplexer(
@@ -202,8 +202,8 @@
     style: "zigzag",
     zigzag-ratio: 1
   )
-  wire.intersection("wPC2.zig", radius: 2pt)
-  wire.intersection("wPC2.zag", radius: 2pt)
+  wire.intersection("wPC2.zig")
+  wire.intersection("wPC2.zag")
   wire.stub("PCAdd-port-in2", "west", name: "4", length: 1.5)
   wire.wire(
     "wPC+4", ("PCAdd-port-out", "PCMux-port-in0"),
@@ -278,11 +278,11 @@
     reverse: true,
     slice: (31, 7)
   )
-  wire.intersection("wF3.end", radius: 2pt)
-  wire.intersection("wF7.end", radius: 2pt)
-  wire.intersection("wA1.end", radius: 2pt)
-  wire.intersection("wA2.end", radius: 2pt)
-  wire.intersection("wA3.end", radius: 2pt)
+  wire.intersection("wF3.end")
+  wire.intersection("wF7.end")
+  wire.intersection("wA1.end")
+  wire.intersection("wA2.end")
+  wire.intersection("wA3.end")
 
   wire.stub("RegFile-port-clk", "north", name: "clk", length: 0.25)
   wire.wire("wRD2", ("RegFile-port-RD2", "SrcBMux-port-in0"))
@@ -293,7 +293,7 @@
     name: "WriteData",
     name-pos: "end"
   )
-  wire.intersection("wWD.zig", radius: 2pt)
+  wire.intersection("wWD.zig")
 
   wire.wire(
     "wImmALU", ("Ext-port-out", "SrcBMux-port-in1"),
@@ -305,7 +305,7 @@
   wire.wire(
     "wImmJump", ("Ext-port-out", "JumpAdd-port-in2")
   )
-  wire.intersection("wImmALU.zig", radius: 2pt)
+  wire.intersection("wImmALU.zig")
   wire.wire(
     "wJumpPC", ("JumpAdd-port-out", "PCMux-port-in1"),
     style: "dodge",
@@ -351,7 +351,7 @@
     dodge-y: 2,
     dodge-margins: (3, 2)
   )
-  wire.intersection("wALURes2.start2", radius: 2pt)
+  wire.intersection("wALURes2.start2")
 
   wire.stub("DMem-port-clk", "north", name: "clk", length: 0.25)
   wire.wire(

gallery/test6.typ

@@ -0,0 +1,194 @@
+#import "@preview/cetz:0.3.2": draw, vector
+#import "../src/lib.typ": *
+
+#set page(width: auto, height: auto, margin: .5cm)
+
+#circuit({
+  element.multiplexer(
+    x: 10, y: 0, w: 1, h: 6, id: "ResMux",
+    entries: ("000", "001", "010", "011", "101"),
+    h-ratio: 90%,
+    fill: util.colors.blue
+  )
+  element.extender(
+    x: (rel: -3, to: "ResMux.west"),
+    y: (from: "ResMux-port-in4", to: "out"),
+    w: 2, h: 1, id: "Ext",
+    name: "Zero Ext",
+    name-anchor: "south",
+    fill: util.colors.green
+  )
+  gates.gate-or(
+    x: (rel: -2, to: "ResMux.west"),
+    y: (from: "ResMux-port-in3", to: "out"),
+    w: 1, h: 1, id: "Or"
+  )
+  gates.gate-and(
+    x: (rel: -2, to: "ResMux.west"),
+    y: (from: "ResMux-port-in2", to: "out"),
+    w: 1, h: 1, id: "And"
+  )
+  element.alu(
+    x: (rel: -2.5, to: "Ext.west"),
+    y: (from: "ResMux-port-in0", to: "out"),
+    w: 1.5, h: 3, id: "Add",
+    name: text("+", size: 1.5em),
+    name-anchor: "name",
+    fill: util.colors.pink
+  )
+  element.multiplexer(
+    x: (rel: -1.5, to: "Add.west"),
+    y: (from: "Add-port-in1", to: "out"),
+    w: 0.5, h: 1.5, id: "NotMux",
+    h-ratio: 80%,
+    fill: util.colors.blue
+  )
+  gates.gate-not(
+    x: (rel: -2, to: "NotMux.west"),
+    y: (from: "NotMux-port-in1", to: "out"),
+    w: 1, h: 1, id: "Not"
+  )
+  
+  draw.hide(
+    draw.line(name: "l1",
+      "Not-port-in0",
+      (rel: (-2, 0), to: ()),
+      (horizontal: (), vertical: "NotMux-port-in0")
+    )
+  )
+  let b = "l1.end"
+  draw.hide(
+    draw.line(name: "l2",
+      b,
+      (horizontal: (), vertical: "Add-port-in2")
+    )
+  )
+  let a = "l2.end"
+
+  wire.wire("wB0", (b, "NotMux-port-in0"), bus: true)
+  wire.wire(
+    "wB1", (b, "Not-port-in0"),
+    style: "zigzag",
+    zigzag-ratio: 1.5,
+    bus: true
+  )
+  wire.wire(
+    "wB2", (b, "And-port-in0"),
+    style: "zigzag",
+    zigzag-ratio: 1,
+    bus: true
+  )
+  wire.wire(
+    "wB3", (b, "Or-port-in0"),
+    style: "zigzag",
+    zigzag-ratio: 1,
+    bus: true
+  )
+  wire.intersection("wB1.zig")
+  wire.intersection("wB2.zig")
+  wire.intersection("wB2.zag")
+
+  wire.wire("wNot", ("Not-port-out", "NotMux-port-in1"), bus: true)
+  wire.wire("wAddA", ("NotMux-port-out", "Add-port-in1"), bus: true)
+
+  wire.wire("wA0", (a, "Add-port-in2"), bus: true)
+  wire.wire(
+    "wA1", (a, "And-port-in1"),
+    style: "zigzag",
+    zigzag-ratio: 0.5,
+    bus: true
+  )
+  wire.wire(
+    "wA2", (a, "Or-port-in1"),
+    style: "zigzag",
+    zigzag-ratio: 0.5,
+    bus: true
+  )
+  wire.intersection("wA1.zig")
+  wire.intersection("wA1.zag")
+
+  wire.wire("wMux0", ("Add-port-out", "ResMux-port-in0"), bus: true)
+  wire.wire(
+    "wMux1", ("Add-port-out", "ResMux-port-in1"),
+    style: "zigzag",
+    zigzag-ratio: 2,
+    bus: true
+  )
+  wire.wire("wMux2", ("And-port-out", "ResMux-port-in2"), bus: true)
+  wire.wire("wMux3", ("Or-port-out", "ResMux-port-in3"), bus: true)
+  wire.wire("wMux4", ("Ext-port-out", "ResMux-port-in4"), bus: true)
+
+  wire.wire(
+    "wAdd", ("Add-port-out", "Ext-port-in"),
+    style: "zigzag",
+    zigzag-ratio: 0.5,
+    bus: true
+  )
+
+  wire.intersection("wMux1.zig")
+  wire.intersection("wAdd.zig")
+
+  let c = (rel: (0, 2), to: "ResMux.north")
+  wire.wire("wResCtrl", (c, "ResMux.north"), bus: true)
+  wire.wire(
+    "wAddCtrl", (c, "Add.north"),
+    style: "zigzag",
+    zigzag-dir: "horizontal"
+  )
+
+  let d = (rel: (1, 0), to: "ResMux-port-out")
+  wire.wire("wRes", ("ResMux-port-out", d), bus: true)
+
+  draw.content(
+    "wAddCtrl.zag",
+    [ALUControl#sub("[1]")],
+    anchor: "south-west",
+    padding: 3pt
+  )
+  
+  wire.wire(
+    "wCout", ("Add.south", (horizontal: (), vertical: "Ext.north-east"))
+  )
+  draw.content(
+    "wCout.end",
+    [C#sub("out")],
+    angle: 90deg,
+    anchor: "east",
+    padding: 3pt
+  )
+  draw.content(
+    a,
+    [A],
+    angle: 90deg,
+    anchor: "south",
+    padding: 3pt
+  )
+  draw.content(
+    b,
+    [B],
+    angle: 90deg,
+    anchor: "south",
+    padding: 3pt
+  )
+  draw.content(
+    c,
+    [ALUControl#sub("[2:0]")],
+    angle: 90deg,
+    anchor: "west",
+    padding: 3pt
+  )
+  draw.content(
+    d,
+    [Result],
+    angle: 90deg,
+    anchor: "north",
+    padding: 3pt
+  )
+  draw.content(
+    ("wAdd.zig", 0.2, "wAdd.zag"),
+    text("[N-1]", size: 0.8em),
+    angle: 90deg,
+    anchor: "north-east",
+    padding: 3pt
+  )
+})

justfile

@@ -0,0 +1,11 @@
+# Local Variables:
+# mode: makefile
+# End:
+gallery_dir := "./gallery"
+set shell := ["bash", "-uc"]
+
+manual:
+  typst c manual.typ manual.pdf
+
+gallery:
+  for f in "{{gallery_dir}}"/*.typ; do typst c --root . "$f" "${f%typ}png"; done

manual.typ

@@ -1,9 +1,10 @@
-#import "@preview/tidy:0.3.0"
-#import "@preview/cetz:0.2.2": draw, canvas
+#import "@preview/tidy:0.4.1"
+#import "@preview/cetz:0.3.2": draw, canvas
 #import "src/lib.typ"
 #import "doc/examples.typ"
 #import "src/circuit.typ": circuit
 #import "src/element.typ"
+#import "src/electrical.typ"
 #import "src/gates.typ"
 #import "src/util.typ"
 #import "src/wire.typ"
@@ -12,7 +13,7 @@
   numbering("1.1", ..num)
 })
 #{
-  outline(indent: true, depth: 3)
+  outline(indent: auto, depth: 3)
 }
 
 #show link: set text(blue)
@@ -47,7 +48,7 @@
 
 #set page(numbering: "1/1", header: align(right)[circuiteria #sym.dash.em v#lib.version])
 #set page(
-  header: locate(loc => {
+  header: context {
     let txt = [circuiteria #sym.dash.em v#lib.version]
     let cnt = counter(heading)
     let cnt-val = cnt.get()
@@ -65,8 +66,8 @@
         #rect(width: 100%, height: .5em, radius: .25em, stroke: none, fill: util.colors.values().at(i))
       ]
     )
-  }),
-  footer: locate(loc => {
+  },
+  footer: context {
     let cnt = counter(heading)
     let cnt-val = cnt.get()
     if cnt-val.len() < 2 { return }
@@ -80,12 +81,12 @@
       ],
       counter(page).display("1/1", both: true)
     )
-  })
+  }
 )
 
 #let doc-ref(target, full: false, var: false) = {
   let (module, func) = target.split(".")
-  let label-name = module + func
+  let label-name = module + "-" + func
   let display-name = func
   if full {
     display-name = target
@@ -94,7 +95,7 @@
     label-name += "()"
     display-name += "()"
   }
-  link(label(label-name))[#display-name]
+  link(label(label-name), raw(display-name))
 }
 
 = Introduction
@@ -103,11 +104,21 @@ This package provides a way to make beautiful block circuit diagrams using the C
 
 = Usage
 
-Simply import #link("src/lib.typ") and call the `circuit` function:
+Simply import Circuiteria and call the `circuit` function:
 #pad(left: 1em)[```typ
-#import "src/lib.typ"
-#lib.circuit({
-  import lib: *
+#import "@preview/circuiteria:0.2.0"
+#circuiteria.circuit({
+  import circuiteria: *
+  ...
+})
+```]
+
+== Project installation
+If you have installed Circuiteria directly in your project, import #link("src/lib.typ") and call the `circuit` function:
+#pad(left: 1em)[```typ
+#import "src/lib.typ" as circuiteria
+#circuiteria.circuit({
+  import circuiteria: *
   ...
 })
 ```]
@@ -117,6 +128,7 @@ Simply import #link("src/lib.typ") and call the `circuit` function:
 #let circuit-docs = tidy.parse-module(
   read("src/circuit.typ"),
   name: "circuit",
+  old-syntax: true,
   require-all-parameters: true
 )
 #tidy.show-module(circuit-docs)
@@ -126,6 +138,7 @@ Simply import #link("src/lib.typ") and call the `circuit` function:
 #let util-docs = tidy.parse-module(
   read("src/util.typ"),
   name: "util",
+  old-syntax: true,
   require-all-parameters: true,
   scope: (
     util: util,
@@ -140,6 +153,7 @@ Simply import #link("src/lib.typ") and call the `circuit` function:
 #let wire-docs = tidy.parse-module(
   read("src/wire.typ"),
   name: "wire",
+  old-syntax: true,
   require-all-parameters: true,
   scope: (
     wire: wire,
@@ -161,6 +175,7 @@ Simply import #link("src/lib.typ") and call the `circuit` function:
   read("src/elements/multiplexer.typ") + "\n" +
   read("src/elements/group.typ"),
   name: "element",
+  old-syntax: true,
   scope: (
     element: element,
     circuit: circuit,
@@ -183,6 +198,7 @@ Simply import #link("src/lib.typ") and call the `circuit` function:
   read("src/elements/logic/or.typ") + "\n" +
   read("src/elements/logic/xor.typ"),
   name: "gates",
+  old-syntax: true,
   scope: (
     element: element,
     circuit: circuit,
@@ -195,4 +211,24 @@ Simply import #link("src/lib.typ") and call the `circuit` function:
   )
 )
 
-#tidy.show-module(gates-docs, sort-functions: false)
+#tidy.show-module(gates-docs, sort-functions: false)
+
+#pagebreak()
+
+#let electrical-docs = tidy.parse-module(
+  read("src/elements/electrical/capacitor.typ") + "\n" +
+  read("src/elements/electrical/resistor.typ") + "\n",
+  name: "electrical",
+  scope: (
+    element: element,
+    circuit: circuit,
+    electrical: electrical,
+    draw: draw,
+    wire: wire,
+    tidy: tidy,
+    examples: examples,
+    doc-ref: doc-ref
+  )
+)
+
+#tidy.show-module(electrical-docs, sort-functions: false)

src/circuit.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": canvas
+#import "@preview/cetz:0.3.2": canvas
 #import "@preview/tidy:0.3.0"
 
 /// Draws a block circuit diagram

src/electrical.typ

@@ -0,0 +1,2 @@
+#import "elements/electrical/capacitor.typ": capacitor
+#import "elements/electrical/resistor.typ": resistor

src/element.typ

@@ -12,4 +12,7 @@
 #import "elements/logic/xor.typ": gate-xor, gate-xnor
 #import "elements/logic/buf.typ": gate-buf, gate-not
 
+#import "elements/electrical/resistor.typ": resistor
+#import "elements/electrical/capacitor.typ": capacitor
+
 #import "elements/group.typ": group

src/elements/alu.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "element.typ"
 #import "ports.typ": add-port
 
@@ -86,6 +86,7 @@
     ports-y: (
       in1: (h) => {h * 0.225},
       in2: (h) => {h * 0.775},
+      out: (h) => {h * 0.5}
     ),
     debug: debug
   )

src/elements/block.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "element.typ"
 
 #let draw-shape(id, tl, tr, br, bl, fill, stroke) = {

src/elements/electrical/capacitor.typ

@@ -0,0 +1,138 @@
+#import "@preview/cetz:0.2.2": draw
+#import "../element.typ"
+#import "../ports.typ": add-port
+
+#let draw-shape(
+  id, tl, tr, br, bl,
+  fill, stroke,
+  vertical: false,
+  gap: 0.2,
+  scales: (100%, 100%),
+  symbols: (none, none)
+) = {
+  let (x0, y0) = tl
+  let (x1, y1) = br
+
+  let w = x1 - x0
+  let h = y1 - y0
+
+  let (o0, s0) = if vertical {(y0, h)} else {(x0, w)}
+  let (o1, s1) = if vertical {(x0, w)} else {(y0, h)}
+  let m1 = o1 + s1 / 2
+
+  let pt(i, j) = if vertical {
+    (j, i)
+  } else {
+    (i, j)
+  }
+
+  let size0 = s1 * scales.first() / 100%
+  let size1 = s1 * scales.last() / 100%
+
+  if type(gap) == ratio {
+    gap = gap / 100%
+  } else {
+    gap = gap / calc.abs(s0)
+  }
+  let r0 = 0.5 - gap / 2
+  let r1 = 0.5 + gap / 2
+
+  // Coordinates in (main axis, secondary axis) format
+  let p0 = pt(o0, m1)
+  let p1 = pt(o0 + r0 * s0, m1)
+  let p2 = pt(o0 + r1 * s0, m1)
+  let p3 = pt(o0 + s0, m1)
+  
+  let p4 = pt(o0 + r0 * s0, m1 - size0 / 2)
+  let p5 = pt(o0 + r0 * s0, m1 + size0 / 2)
+  
+  let p6 = pt(o0 + r1 * s0, m1 - size1 / 2)
+  let p7 = pt(o0 + r1 * s0, m1 + size1 / 2)
+
+  let line = draw.line.with(stroke: stroke)
+  let f = draw.group(name: id, {
+    line(p0, p1)
+    line(p2, p3)
+    line(p4, p5)
+    line(p6, p7)
+
+    if symbols.first() != none {
+      draw.content(
+        p1,
+        symbols.first(),
+        anchor: if vertical {"south-west"} else {"south-east"},
+        padding: 2pt
+      )
+    }
+
+    if symbols.last() != none {
+      draw.content(
+        p2,
+        symbols.last(),
+        anchor: if vertical {"north-west"} else {"south-west"},
+        padding: 2pt
+      )
+    }
+  })
+
+  return (f, tl, tr, br, bl)
+}
+
+/// Draws a capacitor
+///
+/// #examples.capacitor
+/// For other parameters description, see #doc-ref("element.elmt")
+/// - vertical (bool): Whether the element is vertical or horizontal.
+///   - If false, port 0 is placed on the west side and port 1 on the east.\
+///   - If true, they are on the north, respectively the south sides
+/// - gap (number, ratio): The gap between both sides
+///   - if it is a number (int or float), it is interpreted as an absolute canvas-unit length
+///   - if it is a ratio, it is interpreted as proportional to the capacitor's length (width if horizontal, height if vertical)
+/// - scales (array): A pair of ratios, the sizes of the sides relative to the capacitor's height (width if vertical).
+/// - symbols (array): A pair of content or strings (or none values) to attach on the sides of the capacitor
+#let capacitor(
+  x: none,
+  y: none,
+  w: none,
+  h: none,
+  name: none,
+  name-anchor: "center",
+  vertical: false,
+  gap: 0.2,
+  scales: (100%, 100%),
+  symbols: (none, none),
+  fill: none,
+  stroke: black + 1pt,
+  id: "",
+  debug: (
+    ports: false
+  )
+) = {
+  let ports = if vertical {(
+    north: ((id: "0"),),
+    south: ((id: "1"),)
+  )} else {(
+    west: ((id: "0"),),
+    east: ((id: "1"),)
+  )}
+  
+  element.elmt(
+    draw-shape: draw-shape.with(
+      vertical: vertical,
+      gap: gap,
+      scales: scales,
+      symbols: symbols
+    ),
+    x: x,
+    y: y,
+    w: w,
+    h: h,
+    name: name,
+    name-anchor: name-anchor,
+    ports: ports,
+    fill: fill,
+    stroke: stroke,
+    id: id,
+    debug: debug
+  )
+}

src/elements/electrical/resistor.typ

@@ -0,0 +1,106 @@
+#import "@preview/cetz:0.2.2": draw
+#import "../element.typ"
+#import "../ports.typ": add-port
+
+#let draw-shape(
+  id, tl, tr, br, bl,
+  fill, stroke,
+  zigzags: 6,
+  vertical: false
+) = {
+  let (x0, y0) = tl
+  let (x1, y1) = br
+
+  let w = x1 - x0
+  let h = y1 - y0
+
+  let (o0, s0) = if vertical {(y0, h)} else {(x0, w)}
+  let (o1, s1) = if vertical {(x0, w)} else {(y0, h)}
+  let m1 = o1 + s1 / 2
+
+  let pt(i, j) = if vertical {
+    (j, i)
+  } else {
+    (i, j)
+  }
+
+  let p0 = pt(o0, m1)
+  let p1 = pt(o0 + 0.2 * s0, m1)
+  let p2 = pt(o0 + 0.8 * s0, m1)
+  let p3 = pt(o0 + s0, m1)
+
+  if zigzags == none {
+    let p4 = pt(o0 + 0.2 * s0, o1)
+    let p5 = pt(o0 + 0.8 * s0, o1 + s1)
+    let f = draw.group(name: id, {
+      draw.line(p0, p1)
+      draw.line(p2, p3)
+      draw.rect(p4, p5, stroke: stroke, fill: fill)
+    })
+    return (f, tl, tr, br, bl)
+  }
+  
+  let pts = (p0, p1)
+  
+  for i in range(zigzags) {
+    let r = ((i+0.5) / zigzags * 0.6 + 0.2)
+    let pos = pt(o0 + r * s0, o1 + s1 * calc.rem(i, 2))
+    pts.push(pos)
+  }
+
+  pts += (p2, p3)
+
+  let f = draw.group(name: id, {
+    draw.line(..pts, stroke: stroke)
+  })
+  return (f, tl, tr, br, bl)
+}
+
+/// Draws a resistor
+///
+/// #examples.resistor
+/// For other parameters description, see #doc-ref("element.elmt")
+/// - vertical (bool): Whether the element is vertical or horizontal. If false, port 0 is placed on the west side and port 1 on the east. If true, they are on the north, respectively the south sides
+/// - zigzags (number, none): Number of zigzags to draw. If none, a rectangle is drawn
+#let resistor(
+  x: none,
+  y: none,
+  w: none,
+  h: none,
+  name: none,
+  name-anchor: "center",
+  vertical: false,
+  zigzags: 6,
+  fill: none,
+  stroke: black + 1pt,
+  id: "",
+  debug: (
+    ports: false
+  )
+) = {
+  let ports = if vertical {(
+    north: ((id: "0"),),
+    south: ((id: "1"),)
+  )} else {(
+    west: ((id: "0"),),
+    east: ((id: "1"),)
+  )}
+
+  element.elmt(
+    draw-shape: draw-shape.with(
+      vertical: vertical,
+      zigzags: zigzags
+    ),
+    x: x,
+    y: y,
+    w: w,
+    h: h,
+    name: name,
+    name-anchor: name-anchor,
+    ports: ports,
+    fill: fill,
+    stroke: stroke,
+    id: id,
+    debug: debug
+  )
+}

src/elements/element.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw, coordinate
+#import "@preview/cetz:0.3.2": draw, coordinate
 #import "ports.typ": add-ports, add-port
 #import "../util.typ"
 
@@ -52,13 +52,13 @@
   h: none,
   name: none,
   name-anchor: "center",
-  ports: (),
-  ports-margins: (),
+  ports: (:),
+  ports-margins: (:),
   fill: none,
   stroke: black + 1pt,
   id: "",
   auto-ports: true,
-  ports-y: (),
+  ports-y: (:),
   debug: (
     ports: false
   )
@@ -88,15 +88,26 @@
     if to-side in ports-margins {
       margins = ports-margins.at(to-side)
     }
-    let used-pct = 100% - margins.at(0) - margins.at(1)
-    let used-height = height * used-pct / 100%
-    let top-margin = height * margins.at(0) / 100%
-    
-    let dy = used-height * (i + 1) / (ports.at(to-side).len() + 1)
 
-    if not auto-ports {
+    let dy
+    let top-margin
+    if to-side in ("east", "west") {
+      let used-pct = 100% - margins.at(0) - margins.at(1)
+      let used-height = height * used-pct / 100%
+      top-margin = height * margins.at(0) / 100%
+      
+      dy = used-height * (i + 1) / (ports.at(to-side).len() + 1)
+
+      if not auto-ports {
+        top-margin = 0
+        dy = ports-y.at(to)(height)
+      }
+    } else if to-side == "north" {
+      dy = 0
+      top-margin = 0
+    } else if to-side == "south" {
+      dy = height
       top-margin = 0
-      dy = ports-y.at(to)(height)
     }
     
     let (ctx, from-pos) = coordinate.resolve(ctx, from)

src/elements/extender.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "element.typ"
 #import "ports.typ": add-port
 
@@ -71,7 +71,7 @@
   let out-pct = if align-out {h-ratio / 2} else {50%}
   let ports-y = (
     "in": (h) => {h - h * (h-ratio / 200%)},
-    "out": (h) => {h * (out-pct / 100%)}
+    "out": (h) => {h - h * (out-pct / 100%)}
   )
   
   element.elmt(

src/elements/group.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw, coordinate
+#import "@preview/cetz:0.3.2": draw, coordinate
 #import "../util.typ"
 
 /// Draws a group of elements

src/elements/logic/and.typ

@@ -1,12 +1,12 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "gate.typ"
 
 #let draw-shape(id, tl, tr, br, bl, fill, stroke) = {
   let (x, y) = bl
   let (width, height) = (tr.at(0) - x, tr.at(1) - y)
 
-  let t = (x + width / 4, y + height)
-  let b = (x + width / 4, y)
+  let t = (x + width / 2, y + height)
+  let b = (x + width / 2, y)
 
   let f = draw.group(name: id, {
     draw.merge-path(
@@ -16,7 +16,7 @@
       name: id + "-path",
       close: true, {
         draw.line(bl, tl, t)
-        draw.bezier((), b, tr, br)
+        draw.arc-through((), (tr , 50%, br), b)
         draw.line((), b)
       }
     )

src/elements/logic/buf.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "gate.typ"
 
 #let draw-shape(id, tl, tr, br, bl, fill, stroke) = {
@@ -33,7 +33,7 @@
   y: none,
   w: none,
   h: none,
-  inputs: 2,
+  inputs: 1,
   fill: none,
   stroke: black + 1pt,
   id: "",
@@ -65,7 +65,7 @@
   y: none,
   w: none,
   h: none,
-  inputs: 2,
+  inputs: 1,
   fill: none,
   stroke: black + 1pt,
   id: "",

src/elements/logic/gate.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw, coordinate
+#import "@preview/cetz:0.3.2": draw, coordinate
 #import "../ports.typ": add-ports, add-port
 #import "../element.typ"
 
@@ -33,7 +33,7 @@
   stroke: black + 1pt,
   id: "",
   inverted: (),
-  inverted-radius: 0.2,
+  inverted-radius: 0.1,
   debug: (
     ports: false
   )
@@ -58,19 +58,16 @@
   if (type(y) == dictionary) {
     let from = y.from
     let to = y.to
-    let (to-side, i) = find-port(ports, to)
-    let margins = (0%, 0%)
-    if to-side in ports-margins {
-      margins = ports-margins.at(to-side)
-    }
-    let used-pct = 100% - margins.at(0) - margins.at(1)
-    let used-height = height * used-pct / 100%
-    let top-margin = height * margins.at(0) / 100%
     
-    let dy = used-height * (i + 1) / (ports.at(to-side).len() + 1)
+    let dy
+    if to == "out" {
+      dy = height / 2
+    } else {
+      dy = height * (i + 0.5) / inputs
+    }
     
     let (ctx, from-pos) = coordinate.resolve(ctx, from)
-    y = from-pos.at(1) + dy - height + top-margin
+    y = from-pos.at(1) + dy - height
   }
 
   let tl = (x, y + height)

src/elements/logic/or.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "gate.typ"
 
 #let draw-shape(id, tl, tr, br, bl, fill, stroke) = {

src/elements/logic/xor.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "gate.typ"
 
 #let space = 10%

src/elements/multiplexer.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "../util.typ"
 #import "element.typ"
 #import "ports.typ": add-port

src/elements/ports.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw
+#import "@preview/cetz:0.3.2": draw
 #import "../util.typ": rotate-anchor
 
 #let add-port(

src/lib.typ

@@ -1,6 +1,7 @@
-#let version = version((0,0,2))
+#let version = version(0, 2, 0)
 
 #import "circuit.typ": circuit
+#import "electrical.typ"
 #import "element.typ"
 #import "gates.typ"
 #import "util.typ"

src/wire.typ

@@ -1,4 +1,4 @@
-#import "@preview/cetz:0.2.2": draw, coordinate
+#import "@preview/cetz:0.3.2": draw, coordinate
 #import "util.typ": opposite-anchor
 
 /// List of valid wire styles
@@ -7,7 +7,12 @@
 #let signal-width = 1pt
 #let bus-width = 1.5pt
 
-#let intersection(pt, radius: .2, fill: black) = {
+/// Draws a wire intersection at the given anchor
+/// #examples.intersection
+/// - pt (point): A CeTZ compatible point / anchor
+/// - radius (number): The radius of the intersection
+/// - fill (color): The fill color
+#let intersection(pt, radius: .1, fill: black) = {
   draw.circle(pt, radius: radius, stroke: none, fill: fill)
 }
 
@@ -192,15 +197,18 @@
   let second-pos = points.at(1)
   if reverse {
     (first-pt, last-pt) = (last-pt, first-pt)
-    (first-pos, second-pos) = (second-pos, first-pos)
   }
   
   let angle = 0deg
   if rotate-name {
     (ctx, first-pos) = coordinate.resolve(ctx, first-pos)
     (ctx, second-pos) = coordinate.resolve(ctx, second-pos)
-    let (x1, y1, _) = first-pos
-    let (x2, y2, _) = second-pos
+    
+    if reverse {
+      (first-pos, second-pos) = (second-pos, first-pos)
+    }
+    let (x1, y1, ..) = first-pos
+    let (x2, y2, ..) = second-pos
     angle = calc.atan2(x2 - x1, y2 - y1)
   }
   

typst.toml

@@ -1,7 +1,7 @@
 [package]
 name = "circuiteria"
-version = "0.0.2"
-compiler = "0.11.0"
+version = "0.2.0"
+compiler = "0.13.0"
 repository = "https://git.kb28.ch/HEL/circuiteria"
 entrypoint = "src/lib.typ"
 authors = [
@@ -11,4 +11,4 @@ categories = [ "visualization" ]
 license = "Apache-2.0"
 description = "Drawing block circuits with Typst made easy, using CeTZ"
 keywords = [ "circuit", "block", "draw" ]
-exclude = [ "/gallery/*" ]
+exclude = [ "gallery", "justfile", "doc" ]