adapted extender + improved bound anchors

gallery/target_api.typ

@@ -77,7 +77,6 @@
   wire.stub("InstDataMgr.IRWrite")
   wire.stub("InstDataMgr.WD")
 
-  /*
   element.block(
     pos: (
       15, (align: "WD3", with: "InstDataMgr.RD")
@@ -114,7 +113,8 @@
     pos: (15, -3.5),
     size: (3, 1),
     id: "Extender",
-    fill: util.colors.green
+    fill: util.colors.green,
+    debug: (bounds: true, ports: true)
   )
   wire.wire(
     "Extender.north",
@@ -126,6 +126,7 @@
     bus: true
   )
 
+  /*
   let mid = ("InstDataMgr.east", 50%, "RegFile.west")
   wire.wire(
     "InstDataMgr.Instr",

src/elements/element.typ

@@ -209,6 +209,15 @@
   )
   func
 
+  draw.anchor("north", bounds.t)
+  draw.anchor("south", bounds.b)
+  draw.anchor("west", bounds.l)
+  draw.anchor("east", bounds.r)
+  draw.anchor("north-west", bounds.tl)
+  draw.anchor("north-east", bounds.tr)
+  draw.anchor("south-east", bounds.br)
+  draw.anchor("south-west", bounds.bl)
+
   if elmt.name != none {
     draw.content(
       (name: elmt.id, anchor: elmt.name-anchor),
@@ -219,6 +228,14 @@
   }
 
   add-ports(elmt, bounds)
+
+  if elmt.debug.bounds {
+    draw.line(
+      bounds.tl, bounds.tr, bounds.br, bounds.bl,
+      stroke: red,
+      close: true
+    )
+  }
 })
 
 /// Draws an element
@@ -263,6 +280,7 @@
   id: auto,
   ports-pos: auto,
   debug: (
+    bounds: false,
     ports: false
   ),
   extra: (:)
@@ -287,7 +305,6 @@
     ports.at(key) = side-ports
   }
 
-
   return ((
     cls: cls,
     id: id,

src/elements/extender.typ

@@ -1,41 +1,25 @@
 #import "@preview/cetz:0.3.2": draw
 #import "element.typ"
 #import "ports.typ": add-port
+#import "../util.typ"
 
-#let draw-shape(id, tl, tr, br, bl, fill, stroke, h-ratio: 75%, align-out: true) = {
-  let (x, y) = bl
-  let (width, height) = (tr.at(0) - x, tr.at(1) - y)
+#let draw-shape(elmt, bounds) = {
+  let ratio = elmt.l-ratio / 100%
+  let tl2 = util.lerp(bounds.bl, elmt.l-ratio, bounds.tl)
+  let bounds2 = element.complete-bounds(elmt, (
+    tl: tl2,
+    tr: bounds.tr,
+    br: bounds.br,
+    bl: bounds.bl,
+  ))
 
-  let ratio = h-ratio / 100%
-
-  tl = (x, y + height * ratio)
-  let tr2 = (x + width, y + height * ratio)
-  let br = (x + width, y)
-  
-  if align-out {
-    (tr, tr2) = (tr2, tr)
-  } else {
-    (tr, tr2) = (tr, tr)
-  }
-
-  let f = draw.group(name: id, {
-    draw.merge-path(
-      inset: 0.5em,
-      fill: fill,
-      stroke: stroke,
-      close: true,
-      draw.line(tl, tr2, br, bl)
-    )
-    draw.anchor("north", (tl, 50%, tr2))
-    draw.anchor("south", (bl, 50%, br))
-    draw.anchor("west", (tl, 50%, bl))
-    draw.anchor("east", (tr2, 50%, br))
-    draw.anchor("north-west", tl)
-    draw.anchor("north-east", tr2)
-    draw.anchor("south-east", br)
-    draw.anchor("south-west", bl)
-  })
-  return (f, tl, tr, br, bl)
+  let f = draw.line(
+    bounds2.tl, bounds2.tr, bounds2.br, bounds2.bl,
+    fill: elmt.fill,
+    stroke: elmt.stroke,
+    close: true
+  )
+  return (f, bounds2)
 }
 
 /// Draws a bit extender
@@ -45,54 +29,28 @@
 /// - h-ratio (ratio): The height ratio of the left side relative to the full height
 /// - align-out (bool): If true, the output and input ports are aligned, otherwise, the output port is centered on the right side
 #let extender(
-  x: none,
-  y: none,
-  w: none,
-  h: none,
-  name: none,
-  name-anchor: "center",
-  fill: none,
-  stroke: black + 1pt,
-  id: "",
-  h-ratio: 75%,
+  l-ratio: 75%,
   align-out: true,
-  debug: (
-    ports: false
-  )
+  ..args
 ) = {
   let ports = (
-    west: (
-      (id: "in"),
-    ),
-    east: (
-      (id: "out"),
-    )
+    west: ((id: "in"),),
+    east: ((id: "out"),)
   )
-  let out-pct = if align-out {h-ratio / 2} else {50%}
-  let ports-y = (
-    "in": (h) => {h - h * (h-ratio / 200%)},
-    "out": (h) => {h - h * (out-pct / 100%)}
+  let out-pct = if align-out {l-ratio / 2} else {50%}
+  let ports-pos = (
+    "east": (l, i) => {l - l * (out-pct / 100%)}
   )
   
-  element.elmt(
-    draw-shape: draw-shape.with(h-ratio: h-ratio, align-out: align-out),
-    x: x,
-    y: y,
-    w: w,
-    h: h,
-    name: name,
-    name-anchor: name-anchor,
+  return element.elmt(
+    cls: "extender",
+    draw-shape: draw-shape,
     ports: ports,
-    auto-ports: false,
-    ports-y: ports-y,
-    fill: fill,
-    stroke: stroke,
-    id: id,
-    debug: debug
+    ports-pos: ports-pos,
+    extra: (
+      l-ratio: l-ratio,
+      align-out: align-out
+    ),
+    ..args
   )
-
-  let in-pos = (rel: (0, h * (h-ratio / 200%)), to: id+".south-west")
-  let out-pos = (id+".south-east", out-pct, id+".north-east")
-  add-port(id, "west", ports.west.first(), in-pos)
-  add-port(id, "east", ports.east.first(), out-pos)
 }

src/elements/multiplexer.typ

@@ -13,23 +13,12 @@
     tr: tr2,
     br: br2,
   ))
-  let f = {
-    draw.merge-path(
-      inset: 0.5em,
-      fill: elmt.fill,
-      stroke: elmt.stroke,
-      close: true,
-      draw.line(bounds2.tl, bounds2.tr, bounds2.br, bounds2.bl)
-    )
-    draw.anchor("north", bounds2.t)
-    draw.anchor("south", bounds2.b)
-    draw.anchor("west", bounds2.l)
-    draw.anchor("east", bounds2.r)
-    draw.anchor("north-west", bounds2.tl)
-    draw.anchor("north-east", bounds2.tr)
-    draw.anchor("south-east", bounds2.br)
-    draw.anchor("south-west", bounds2.bl)
-  }
+  let f = draw.line(
+    bounds2.tl, bounds2.tr, bounds2.br, bounds2.bl,
+    close: true,
+    fill: elmt.fill,
+    stroke: elmt.stroke
+  )
 
   return (f, bounds2)
 }

src/elements/ports.typ

@@ -125,7 +125,7 @@
   elmt,
   bounds
 ) = {
-  let debug = elmt.debug.ports
+  let debug = elmt.debug.at("ports", default: false)
 
   if type(elmt.ports) != dictionary {
     return