shapes: Add svg-path function

Author: johannes-wolf

CHANGES.md

@@ -5,6 +5,7 @@
 - Changed the internal path model to support multiple subpaths
 - Braces are now drawn tapered by default (#828)
 - Brace styling changed, see the documention of `decorations.brace`
+- Added a new element `svg-path` that accepts a list of a subset of SVG commands to construct paths
 
 # 0.3.4
 - Fixed a bug with rendering curves with Typst 0.13.1

src/draw.typ

@@ -1,6 +1,6 @@
 #import "draw/grouping.typ": intersections, group, scope, anchor, copy-anchors, set-ctx, get-ctx, for-each-anchor, on-layer, hide, floating
 #import "draw/transformations.typ": set-transform, rotate, translate, scale, set-origin, move-to, set-viewport
 #import "draw/styling.typ": set-style, fill, stroke, register-mark
-#import "draw/shapes.typ": circle, circle-through, arc, arc-through, mark, line, grid, content, rect, bezier, bezier-through, catmull, hobby, merge-path, polygon, multi-path
+#import "draw/shapes.typ": circle, circle-through, arc, arc-through, mark, line, grid, content, rect, bezier, bezier-through, catmull, hobby, merge-path, polygon, multi-path, svg-path
 #import "draw/projection.typ": ortho, on-xy, on-xz, on-yz
 #import "draw/util.typ": assert-version

src/draw/shapes.typ

@@ -1551,6 +1551,82 @@
   },)
 }
 
+/// Create a new path from a SVG-like list of commands.
+///
+/// The following commands are supported (uppercase command names use absolute coordinates, lowercase use relative coordinates)
+/// - `("l", pt)` line to `pt`
+/// - `("m", pt)` Move to `pt`
+/// - `("c", ctrl-1, ctrl-2, pt)` Bezier curve to `pt` with control points `ctrl-1` and `ctrl-2`
+/// - `("z")` Close the current path
+#let svg-path(name: none, ..commands-style) = {
+  let style = commands-style.named()
+  let commands = commands-style.pos().map(cmd => {
+    if type(cmd) == str {
+      (cmd,)
+    } else {
+      cmd
+    }
+  })
+  return (ctx => {
+    let paths = ()
+
+    let origin = (0, 0, 0)
+    let current = ()
+
+    for ((cmd, ..args)) in commands {
+      assert(cmd in ("m", "M", "l", "L", "c", "C", "h", "H", "v", "V", "z", "Z"),
+        message: "Unknown svg-path command: " + repr(cmd))
+
+      let is-relative = cmd in ("m", "l", "c", "h", "v")
+      let wrap-coordinate = if is-relative {
+        x => (rel: x)
+      } else {
+        x => x
+      }
+
+      if cmd in ("h", "H") {
+        let (x, ..rest) = args
+        args = ((x, 0, 0),)
+      } else if cmd in ("v", "V") {
+        let (y, ..rest) = args
+        args = ((0, y, 0),)
+      }
+
+      (ctx, ..args) = coordinate.resolve(ctx, ..args.map(wrap-coordinate))
+
+      if cmd in ("z", "Z") {
+        if current != () {
+          paths.push(path-util.make-subpath(origin, current, closed: cmd == "z"))
+        }
+
+        current = ()
+      }
+
+      if cmd in ("m", "M", "l", "L") {
+        if cmd in ("m", "M") {
+          origin = args.at(0, default: (0, 0, 0))
+          args.pop(0)
+        }
+
+        current += args.map(pt => ("l", pt))
+      } else if cmd in ("c", "C") {
+        let (c1, c2, pt) = args
+        current.push(("c", c1, c2, pt))
+      }
+    }
+
+    let style = styles.resolve(ctx.style, merge: style)
+    let drawables = drawable.path(paths, stroke: style.stroke, fill: style.fill, fill-rule: style.fill-rule)
+
+    return (
+      ctx: ctx,
+      name: name,
+      //anchors: anchors,
+      drawables: drawables,
+    )
+  },)
+}
+
 /// Create a new path with one or more elments used as sub-paths.
 /// This can be used to create paths with holes.
 ///

src/draw/transformations.typ

@@ -150,7 +150,7 @@
 ///
 /// Note that content like text does not scale automatically. See `auto-scale` styling of content for that.
 ///
-/// - ..args (float, ratio): A single value to scale the transformation matrix by or per axis
+/// - ..args (float,ratio,length): A single value to scale the transformation matrix by or per axis
 ///   scaling factors. Accepts a single float or ratio value or any combination of the named arguments
 ///   `x`, `y` and `z` to set per axis scaling factors. A ratio of 100% is the same as the value $1$.
 /// - origin (none,coordinate): Origin to rotate around, or (0, 0, 0) if set to `none`.
@@ -171,14 +171,18 @@
     (factor, factor, factor)
   }
 
-  // Allow scaling using ratio values
-  vec = vec.map(v => if type(v) == ratio {
-    v / 100%
-  } else {
-    v
-  })
-
   (ctx => {
+    let vec = vec.enumerate().map(((i, v)) => {
+      if type(v) == ratio {
+        v / 100%
+      } else if type(v) == length {
+        let s = matrix.mul4x4-vec3(ctx.transform, vector.one(3, i)).at(i)
+        s * v / ctx.length
+      } else {
+        v
+      }
+    })
+
     let mat = matrix.transform-scale(vec)
     ctx.transform = matrix.mul-mat(ctx.transform,
       _transform-around-origin(ctx, mat, origin))