fixed bottom custom image order

src/core/draw/participant/actor.typ

@@ -1,32 +1,54 @@
 #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 = "actor"
 
 #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 w2 = ACTOR-WIDTH / 2
-  let head-r = ACTOR-WIDTH / 4
-  let height = ACTOR-WIDTH * 2
+  let spacing = normalize-units(style.spacing)
+  let width = normalize-units(style.width)
+  let height = width * 2
+  let w2 = width / 2
+  let head-r = width / 4
   let arms-y = height * 0.375
 
   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
   }
+
+  // Head
   draw.circle(
     (x, y0 - head-r),
     radius: head-r,
     fill: style.fill,
     stroke: style.stroke
   )
-  draw.line((x, y0 - head-r * 2), (x, y0 - height + w2), stroke: black + .5pt)
-  draw.line((x - w2, y0 - arms-y), (x + w2, y0 - arms-y), stroke: black + .5pt)
-  draw.line((x - w2, y0 - height), (x, y0 - height + w2), (x + w2, y0 - height), stroke: black + .5pt)
+
+  // Body
+  draw.line(
+    (x, y0 - head-r * 2),
+    (x, y0 - height + w2),
+    stroke: style.stroke
+  )
+  
+  // Arms
+  draw.line(
+    (x - w2, y0 - arms-y),
+    (x + w2, y0 - arms-y),
+    stroke: style.stroke
+  )
+
+  // Legs
+  draw.line(
+    (x - w2, y0 - height),
+    (x, y0 - height + w2),
+    (x + w2, y0 - height),
+    stroke: style.stroke
+  )
   draw.content(
     (x, y),
     p.display-name,
@@ -37,12 +59,17 @@
 #let get-size(par) = {
   let m = normalize-measure(par.display-name)
 
-  //ACTOR-WIDTH * 1pt
-  //ACTOR-WIDTH * 2pt + SYM-GAP * 1pt + h
+  let width = normalize-units(par.resolved-style.width)
+  let height = width * 2
+  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: 20pt,
+  spacing: 5pt
 )

src/core/draw/participant/boundary.typ

@@ -1,22 +1,23 @@
 #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 = "boundary"
 
 #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 circle-r = BOUNDARY-HEIGHT / 2
+  let height = normalize-units(style.height)
+  let spacing = normalize-units(style.spacing)
+  let circle-r = height / 2
   let y0 = if bottom {
-    y - m.height / 1pt - SYM-GAP
+    y - m.height - spacing
   } else {
-    y + m.height / 1pt + BOUNDARY-HEIGHT + SYM-GAP
+    y + m.height + height + spacing
   }
-  let x0 = x - BOUNDARY-HEIGHT
+  let x0 = x - height
   let y1 = y0 - circle-r
-  let y2 = y0 - BOUNDARY-HEIGHT
+  let y2 = y0 - height
 
   draw.circle(
     (x + circle-r, y1),
@@ -42,12 +43,17 @@
 #let get-size(par) = {
   let m = normalize-measure(par.display-name)
 
-  // BOUNDARY-HEIGHT * 2pt
-  // BOUNDARY-HEIGHT * 1pt + SYM-GAP * 1pt + h
+  let height = normalize-units(par.resolved-style.height)
+  let width = height * 2
+  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 = (
-  :
+  height: 20pt,
+  spacing: 5pt
 )

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
+  ))
+  
+  let offset = normalize-offset(par.resolved-style.offset)
+  let dx = offset.x
+  let dy = offset.y
 
-  // w + COLLECTIONS-PAD.last() * 2 + calc.abs(COLLECTIONS-DX) * 1pt
-  // h + COLLECTIONS-PAD.first() * 2 + calc.abs(COLLECTIONS-DY) * 1pt
-
-  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/control.typ

@@ -1,18 +1,19 @@
 #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 = "control"
 
 #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 = CONTROL-HEIGHT / 2
+  let size = normalize-units(style.size)
+  let spacing = normalize-units(style.spacing)
+  let r = size / 2
   let y0 = if bottom {
-    y - m.height / 1pt - SYM-GAP
+    y - m.height - spacing
   } else {
-    y + m.height / 1pt + CONTROL-HEIGHT + SYM-GAP
+    y + m.height + size + spacing
   }
 
   draw.circle(
@@ -22,7 +23,12 @@
     stroke: style.stroke
   )
   let s = stroke(style.stroke)
-  draw.mark((x, y0), (x - r / 2, y0), symbol: "stealth", fill: s.paint)
+  draw.mark(
+    (x, y0), (x - r / 2, y0),
+    symbol: "stealth",
+    fill: s.paint,
+    stroke: s.paint
+  )
   draw.content(
     (x, y),
     p.display-name,
@@ -33,12 +39,16 @@
 #let get-size(par) = {
   let m = normalize-measure(par.display-name)
 
-  // CONTROL-HEIGHT * 1pt
-  // CONTROL-HEIGHT * 1pt + 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,
+  spacing: 5pt
 )

src/core/draw/participant/custom.typ

@@ -1,32 +1,43 @@
 #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 = "custom"
 
 #let render(x, y, p, bottom) = {
-  let m = measure(p.display-name)
   let style = p.resolved-style
-  let image-m = measure(style.custom-image)
-  let y0 = if bottom {y - m.height / 1pt - SYM-GAP} else {y + m.height / 1pt + image-m.height / 1pt + SYM-GAP}
-  draw.content((x - image-m.width / 2pt, y0), style.custom-image, anchor: "north-west")
+  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,
+      ..elmts
+    )
+  )
+  let anchor = if bottom {"north"} else {"base"}
   draw.content(
     (x, y),
-    p.display-name,
-    anchor: if bottom {"north"} else {"base"}
+    shape,
+    anchor: anchor
   )
 }
 
 #let get-size(par) = {
-  let m = normalize-measure(par.display-name)
+  let name-m = normalize-measure(par.display-name)
+  let img-m = normalize-measure(par.resolved-style.image)
+  let spacing = normalize-units(par.resolved-style.spacing)
 
-  // measure(style.custom-image).width
-  // measure(style.custom-image).height + SYM-GAP * 1pt + h
-
-  return m
+  return (
+    width: calc.max(name-m.width, img-m.width),
+    height: name-m.height + spacing + img-m.height
+  )
 }
 
 #let default-style = (
-  :
+  image: none,
+  spacing: 5pt
 )

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/default.typ

@@ -13,11 +13,7 @@
     fill: style.fill,
     stroke: style.stroke
   )
-  let anchor = if bottom {
-    "north"
-  } else {
-    "base"
-  }
+  let anchor = if bottom {"north"} else {"base"}
   draw.content(
     (x, y),
     name,

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 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 + 3 * rx
+  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)
 })