fixed bottom custom image order

src/core/draw/participant/collections.typ

@@ -1,19 +1,47 @@
 #import "/src/cetz.typ": draw
 
-#import "/src/core/utils.typ": normalize-measure
-#import "/src/consts.typ": *
+#import "/src/core/utils.typ": normalize-measure, normalize-units
 
 #let name = "collections"
 
+#let normalize-offset(offset) = {
+  let dx = 0pt
+  let dy = 0pt
+  if type(offset) == array {
+    if offset.len() >= 2 {
+      dx = offset.at(0)
+      dy = offset.at(1)
+    }
+  } else if type(offset) == dictionary {
+    dx = offset.at("dx", default: dx)
+    dy = offset.at("dx", default: dy)
+  } else {
+    dx = offset
+    dy = offset
+  }
+  return (
+    x: normalize-units(dx),
+    y: normalize-units(dy)
+  )
+}
+
 #let render(x, y, p, bottom) = {
-  let m = measure(p.display-name)
   let style = p.resolved-style
-  let w = m.width / 1pt
-  let h = m.height / 1pt
-  let dx = COLLECTIONS-DX
-  let dy = COLLECTIONS-DY
-  let total-w = w + PAR-PAD.last() * 2 / 1pt + calc.abs(dx)
-  let total-h = h + PAR-PAD.first() * 2 / 1pt + calc.abs(dy)
+  let name = box(
+    p.display-name,
+    inset: style.inset,
+    fill: style.fill,
+    stroke: style.stroke
+  )
+  let m = normalize-measure(name)
+  let offset = normalize-offset(style.offset)
+
+  let w = m.width
+  let h = m.height
+  let dx = offset.x
+  let dy = offset.y
+  let total-w = w + calc.abs(dx)
+  let total-h = h + calc.abs(dy)
 
   let x0 = x - total-w / 2
   let x1 = x0 + calc.abs(dx)
@@ -47,29 +75,34 @@
     fill: style.fill,
     stroke: style.stroke
   )
-  draw.rect(
-    (r2.at(0), r2.at(1)),
-    (r2.at(2), r2.at(3)),
-    fill: style.fill,
-    stroke: style.stroke
-  )
   
   draw.content(
-    ((r2.at(0) + r2.at(2)) / 2, (r2.at(1) + r2.at(3)) / 2),
-    p.display-name,
+    (
+      (r2.at(0) + r2.at(2)) / 2,
+      (r2.at(1) + r2.at(3)) / 2
+    ),
+    name,
     anchor: "mid"
   )
 }
 
 #let get-size(par) = {
-  let m = normalize-measure(par.display-name)
+  let m = normalize-measure(box(
+    par.display-name,
+    inset: par.resolved-style.inset
+  ))
   
-  // w + COLLECTIONS-PAD.last() * 2 + calc.abs(COLLECTIONS-DX) * 1pt
-  // h + COLLECTIONS-PAD.first() * 2 + calc.abs(COLLECTIONS-DY) * 1pt
+  let offset = normalize-offset(par.resolved-style.offset)
+  let dx = offset.x
+  let dy = offset.y
 
-  return m
+  return (
+    width: m.width + calc.abs(dx),
+    height: m.height + calc.abs(dy)
+  )
 }
 
 #let default-style = (
-  :
+  inset: (x: 3pt, y: 5pt),
+  offset: (3pt, 3pt)
 )

src/core/draw/participant/custom.typ

@@ -6,13 +6,16 @@
 
 #let render(x, y, p, bottom) = {
   let style = p.resolved-style
+  let elmts = (style.image, p.display-name)
+  if bottom {
+    elmts = elmts.rev()
+  }
   let shape = align(
     center,
     stack(
       dir: ttb,
       spacing: normalize-units(style.spacing) * 1pt,
-      style.image,
-      p.display-name
+      ..elmts
     )
   )
   let anchor = if bottom {"north"} else {"base"}

src/core/draw/participant/database.typ

@@ -1,20 +1,21 @@
 #import "/src/cetz.typ": draw
 
-#import "/src/core/utils.typ": normalize-measure
-#import "/src/consts.typ": *
+#import "/src/core/utils.typ": normalize-measure, normalize-units
 
 #let name = "database"
 
 #let render(x, y, p, bottom) = {
-  let m = measure(p.display-name)
+  let m = normalize-measure(p.display-name)
   let style = p.resolved-style
-  let height = DATABASE-WIDTH * 4 / 3
-  let rx = DATABASE-WIDTH / 2
+  let width = normalize-units(style.width)
+  let spacing = normalize-units(style.spacing)
+  let height = width * 4 / 3
+  let rx = width / 2
   let ry = rx / 2
   let y0 = if bottom {
-    y - m.height / 1pt - SYM-GAP
+    y - m.height - spacing
   } else {
-    y + m.height / 1pt + height + SYM-GAP
+    y + m.height + height + spacing
   }
   let y1 = y0 - height
 
@@ -47,12 +48,17 @@
 #let get-size(par) = {
   let m = normalize-measure(par.display-name)
 
-  // DATABASE-WIDTH * 1pt
-  // DATABASE-WIDTH * 4pt / 3 + SYM-GAP * 1pt + h
+  let width = normalize-units(par.resolved-style.width)
+  let height = width * 4 / 3
+  let spacing = normalize-units(par.resolved-style.spacing)
 
-  return m
+  return (
+    width: calc.max(m.width, width),
+    height: height + spacing + m.height
+  )
 }
 
 #let default-style = (
-  :
+  width: 24pt,
+  spacing: 5pt
 )

src/core/draw/participant/entity.typ

@@ -1,20 +1,22 @@
 #import "/src/cetz.typ": draw
 
-#import "/src/core/utils.typ": normalize-measure
-#import "/src/consts.typ": *
+#import "/src/core/utils.typ": normalize-measure, normalize-units
 
 #let name = "entity"
 
 #let render(x, y, p, bottom) = {
-  let m = measure(p.display-name)
+  let m = normalize-measure(p.display-name)
   let style = p.resolved-style
-  let r = ENTITY-HEIGHT / 2
+  let size = normalize-units(style.size)
+  let spacing = normalize-units(style.spacing)
+  let gap = normalize-units(style.gap)
+  let r = size / 2
   let y0 = if bottom {
-    y - m.height / 1pt - SYM-GAP
+    y - m.height - spacing
   } else {
-    y + m.height / 1pt + ENTITY-HEIGHT + SYM-GAP
+    y + m.height + size + spacing
   }
-  let y1 = y0 - ENTITY-HEIGHT - 1.5
+  let y1 = y0 - size - gap
 
   draw.circle(
     (x, y0 - r),
@@ -37,12 +39,17 @@
 #let get-size(par) = {
   let m = normalize-measure(par.display-name)
 
-  // ENTITY-HEIGHT * 1pt
-  // ENTITY-HEIGHT * 1pt + 2pt + SYM-GAP * 1pt + h
+  let size = normalize-units(par.resolved-style.size)
+  let spacing = normalize-units(par.resolved-style.spacing)
 
-  return m
+  return (
+    width: calc.max(m.width, size),
+    height: size + spacing + m.height
+  )
 }
 
 #let default-style = (
-  :
+  size: 20pt,
+  gap: 1.5pt,
+  spacing: 5pt
 )

src/core/draw/participant/queue.typ

@@ -1,60 +1,120 @@
 #import "/src/cetz.typ": draw
 
 #import "/src/core/utils.typ": normalize-measure
-#import "/src/consts.typ": *
 
 #let name = "queue"
 
 #let render(x, y, p, bottom) = {
-  let m = measure(p.display-name)
   let style = p.resolved-style
-  let w = (m.width + QUEUE-PAD.last() * 2) / 1pt
-  let h = (m.height + QUEUE-PAD.first() * 2) / 1pt
-  let total-h = h
-  let ry = total-h / 2
-  let rx = ry / 2
-  let total-w = w + 3 + 3 * rx
+  let m = normalize-measure(box(
+    p.display-name,
+    inset: style.inset
+  ))
+  
+  let w = m.width
+  let h = m.height
+  let ry = h / 2
+  let rx = ry / 2
+  let total-w = w + 3 * rx
+
+  let y0 = if bottom {y} else {y + h}
+  let y1 = y0 - h
+  let ym = y0 - ry
+
+  let xll = x - total-w / 2
+  let xrr = x + total-w / 2
+  let xlm = xll + rx
+  let xrm = xrr - rx
+  let xrl = xrm - rx
+  
+  /*
+   /A----------/B\   --- y0
+   Fh          G C   --- ym
+   \E----------\D/   --- y1
+  
+   ||          |||
+   ||          ||\-- xrr
+   ||          |\--- xrm
+   ||          \---- xrl
+   |\--------------- xlm
+   \---------------- xll
+  
+  h <-> G == w
+  F <-> h == rx
+  G <-> C == 2 * rx == ry
+  A <-> E == B <-> D == 2 * ry == h
+  */
 
-  let x0 = x - total-w / 2
-  let y0 = if bottom {y} else {y + total-h}
-  let y1 = y0 - total-h
-  let x-left = x0 + rx
-  let x-right = x-left + w + rx
   draw.merge-path(
     close: true,
     fill: style.fill,
     stroke: style.stroke,
     {
-      draw.bezier((x-right, y0), (x-right + rx, y0 - ry), (x-right + rx/2, y0), (x-right + rx, y0 - ry/2))
-      draw.bezier((), (x-right, y1), (x-right + rx, y1 + ry/2), (x-right + rx/2, y1))
-      draw.line((), (x-left, y1))
-      draw.bezier((), (x-left - rx, y0 - ry), (x-left - rx/2, y1), (x-left - rx, y1 + ry/2))
-      draw.bezier((), (x-left, y0), (x-left - rx, y0 - ry/2), (x-left - rx/2, y0))
+      draw.bezier(
+        (xrm, y0),
+        (xrr, ym),
+        (xrm + rx/2, y0),
+        (xrr, ym + ry/2)
+      )
+      draw.bezier(
+        (),
+        (xrm, y1),
+        (xrr, ym - ry/2),
+        (xrm + rx/2, y1)
+      )
+      draw.line((), (xlm, y1))
+      draw.bezier(
+        (),
+        (xll, ym),
+        (xlm - rx/2, y1),
+        (xll, ym - ry/2)
+      )
+      draw.bezier(
+        (),
+        (xlm, y0),
+        (xll, ym + ry/2),
+        (xlm - rx/2, y0)
+      )
     }
   )
   draw.merge-path(
     stroke: style.stroke,
     {
-      draw.bezier((x-right, y0), (x-right - rx, y0 - ry), (x-right - rx/2, y0), (x-right - rx, y0 - ry/2))
-      draw.bezier((), (x-right, y1), (x-right - rx, y1 + ry/2), (x-right - rx/2, y1))
+      draw.bezier(
+        (xrm, y0),
+        (xrl, ym),
+        (xrm - rx/2, y0),
+        (xrl, ym + ry/2)
+      )
+      draw.bezier(
+        (),
+        (xrm, y1),
+        (xrl, ym - ry/2),
+        (xrm - rx/2, y1)
+      )
     }
   )
   draw.content(
-    ((x-left + x-right - rx) / 2, y0 - ry),
+    ((xlm + xrl) / 2, ym),
     p.display-name,
     anchor: "mid"
   )
 }
 
 #let get-size(par) = {
-  let m = normalize-measure(par.display-name)
+  let m = normalize-measure(box(
+    par.display-name,
+    inset: par.resolved-style.inset
+  ))
 
-  // w + QUEUE-PAD.last() * 2 + 3 * (h + QUEUE-PAD.first() * 2) / 4
-  // h + QUEUE-PAD.first() * 2
+  let rx = m.height / 4
 
-  return m
+  return (
+    width: m.width + 3 * rx,
+    height: m.height
+  )
 }
 
 #let default-style = (
-  :
+  inset: (x: 3pt, y: 5pt)
 )

tests/participant/shapes/test.typ

@@ -15,7 +15,7 @@
   _par("Foo5", display-name: "Database", shape: "database")
   _par("Foo6", display-name: "Collections", shape: "collections")
   _par("Foo7", display-name: "Queue", shape: "queue")
-  _par("Foo8", display-name: "Typst", shape: "custom", custom-image: TYPST)
-  _par("Foo9", display-name: "Ferris", shape: "custom", custom-image: FERRIS)
-  _par("Foo10", display-name: "Baryhobal", shape: "custom", custom-image: ME)
+  _par("Foo8", display-name: "Typst", shape: "custom", image: TYPST)
+  _par("Foo9", display-name: "Ferris", shape: "custom", image: FERRIS)
+  _par("Foo10", display-name: "Baryhobal", shape: "custom", image: ME)
 })