From 95740ac2ab350a194949251febe758914072d803 Mon Sep 17 00:00:00 2001
From: Bzero <lolo-b@posteo.net>
Date: Mon, 2 Sep 2024 14:56:08 +0200
Subject: [PATCH] Add a skew function (#4803)

---
 crates/typst/src/layout/mod.rs               |   1 +
 crates/typst/src/layout/transform.rs         | 109 +++++++++++++++++++
 tests/ref/transform-skew-both-axes.png       | Bin 0 -> 1679 bytes
 tests/ref/transform-skew-origin.png          | Bin 0 -> 487 bytes
 tests/ref/transform-skew-relative-sizing.png | Bin 0 -> 819 bytes
 tests/ref/transform-skew.png                 | Bin 0 -> 878 bytes
 tests/suite/layout/transform.typ             |  50 +++++++++
 7 files changed, 160 insertions(+)
 create mode 100644 tests/ref/transform-skew-both-axes.png
 create mode 100644 tests/ref/transform-skew-origin.png
 create mode 100644 tests/ref/transform-skew-relative-sizing.png
 create mode 100644 tests/ref/transform-skew.png

diff --git a/crates/typst/src/layout/mod.rs b/crates/typst/src/layout/mod.rs
index 8f3dc7c56..e75bfc5ed 100644
--- a/crates/typst/src/layout/mod.rs
+++ b/crates/typst/src/layout/mod.rs
@@ -104,6 +104,7 @@ pub fn define(global: &mut Scope) {
     global.define_elem::<MoveElem>();
     global.define_elem::<ScaleElem>();
     global.define_elem::<RotateElem>();
+    global.define_elem::<SkewElem>();
     global.define_elem::<HideElem>();
     global.define_func::<measure>();
     global.define_func::<layout>();
diff --git a/crates/typst/src/layout/transform.rs b/crates/typst/src/layout/transform.rs
index 2c718193f..d4010a9ed 100644
--- a/crates/typst/src/layout/transform.rs
+++ b/crates/typst/src/layout/transform.rs
@@ -335,6 +335,106 @@ cast! {
     length: Length => ScaleAmount::Length(length),
 }
 
+/// Skews content.
+///
+/// Skews an element in horizontal and/or vertical direction. The layout will
+/// act as if the element was not skewed unless you specify `{reflow: true}`.
+///
+/// # Example
+/// ```example
+/// #skew(ax: -12deg)[This is some fake italic text.]
+/// ```
+#[elem(Show)]
+pub struct SkewElem {
+    /// The horizontal skewing angle.
+    ///
+    /// ```example
+    /// #skew(ax: 30deg)[Skewed]
+    /// ```
+    ///
+    #[default(Angle::zero())]
+    pub ax: Angle,
+
+    /// The vertical skewing angle.
+    ///
+    /// ```example
+    /// #skew(ay: 30deg)[Skewed]
+    /// ```
+    ///
+    #[default(Angle::zero())]
+    pub ay: Angle,
+
+    /// The origin of the skew transformation.
+    ///
+    /// The origin will stay fixed during the operation.
+    ///
+    /// ```example
+    /// X #box(skew(ax: -30deg, origin: center + horizon)[X]) X \
+    /// X #box(skew(ax: -30deg, origin: bottom + left)[X]) X \
+    /// X #box(skew(ax: -30deg, origin: top + right)[X]) X
+    /// ```
+    #[fold]
+    #[default(HAlignment::Center + VAlignment::Horizon)]
+    pub origin: Alignment,
+
+    /// Whether the skew transformation impacts the layout.
+    ///
+    /// If set to `{false}`, the skewed content will retain the bounding box of
+    /// the original content. If set to `{true}`, the bounding box will take the
+    /// transformation of the content into account and adjust the layout accordingly.
+    ///
+    /// ```example
+    /// Hello #skew(ay: 30deg, reflow: true, "World")!
+    /// ```
+    #[default(false)]
+    pub reflow: bool,
+
+    /// The content to skew.
+    #[required]
+    pub body: Content,
+}
+
+impl Show for Packed<SkewElem> {
+    fn show(&self, _: &mut Engine, _: StyleChain) -> SourceResult<Content> {
+        Ok(BlockElem::single_layouter(self.clone(), layout_skew)
+            .pack()
+            .spanned(self.span()))
+    }
+}
+
+/// Layout the skewed content.
+#[typst_macros::time(span = elem.span())]
+fn layout_skew(
+    elem: &Packed<SkewElem>,
+    engine: &mut Engine,
+    locator: Locator,
+    styles: StyleChain,
+    region: Region,
+) -> SourceResult<Frame> {
+    let ax = elem.ax(styles);
+    let ay = elem.ay(styles);
+    let align = elem.origin(styles).resolve(styles);
+
+    // Compute the new region's approximate size.
+    let size = if region.size.is_finite() {
+        compute_bounding_box(region.size, Transform::skew(ax, ay)).1
+    } else {
+        Size::splat(Abs::inf())
+    };
+
+    measure_and_layout(
+        engine,
+        locator,
+        region,
+        size,
+        styles,
+        elem.body(),
+        Transform::skew(ax, ay),
+        align,
+        elem.reflow(styles),
+    )
+}
+
 /// A scale-skew-translate transformation.
 #[derive(Debug, Copy, Clone, Eq, PartialEq, Hash)]
 pub struct Transform {
@@ -382,6 +482,15 @@ impl Transform {
         }
     }
 
+    /// A skew transform.
+    pub fn skew(ax: Angle, ay: Angle) -> Self {
+        Self {
+            kx: Ratio::new(ax.tan()),
+            ky: Ratio::new(ay.tan()),
+            ..Self::identity()
+        }
+    }
+
     /// Whether this is the identity transformation.
     pub fn is_identity(self) -> bool {
         self == Self::identity()
diff --git a/tests/ref/transform-skew-both-axes.png b/tests/ref/transform-skew-both-axes.png
new file mode 100644
index 0000000000000000000000000000000000000000..da9cf5ebd3cb27f10a4dc966844ee4ad948d7077
GIT binary patch
literal 1679
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
Z<KOD?Xm-d_aOwa6002ovPDHLkV1k?VLOK8d

literal 0
HcmV?d00001

diff --git a/tests/ref/transform-skew-origin.png b/tests/ref/transform-skew-origin.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f4c4b08c9dc6819624fccc1a823f4b472f58a9e
GIT binary patch
literal 487
zcmV<D0T}*?P)<h;3K|Lk000e1NJLTq003kF001Zm00000EfWBr00055Nkl<Zc-rlj
zze~eF6vzEf{3jI0V)v5Oq4ET`AfBUxa0R<L#8GsJATCn8Zc>-qvW7xHI=!uQDYxGC
zwO66$uBGV^o$_5?`0yT|{J7+@hkwXkBWWa!q>*fj;y;&gM5tB5Ys6eh;yNYfOor&5
zIG3nVaxYrOCz>=ss6#SW!$tb-+n3a5oy(z`D^+GLCoe$A)Le_Ll45M_r1NCQ5j^&J
zXYDv6k6HV6dQkX%E+6fE-YzL{B@GY{P-Y-k<J@CRX_6LxpIaUAK%zpDYS-EIhnH~B
zEi)sfF`@`1&%{OBR7kSO6_I(vh5*xxvl6=|1_TEZ9cdu#qe2oh04@Dt!R`#pEKULB
z5`N#$1CNRd$*AitIr4``Qj<cNaqN!C1QK#Zrd5(CTfPwf@F7XSW8`k9QbAvT0boQ?
zA<@Z0=X|-=r&wih{5tfRPNwg}emm&<I$nUsqesWKNm{*&nOz3IVQT{x0h80auuo3x
z?8ePwt0ZaV*deJlJz+x15{mNb&x*z_G4xElj!BcMZ)X%OwSnq=S>yI=<VKuu^CQtn
d8c8Er<r`^87WESZ6xaX&002ovPDHLkV1m<k-+}-D

literal 0
HcmV?d00001

diff --git a/tests/ref/transform-skew-relative-sizing.png b/tests/ref/transform-skew-relative-sizing.png
new file mode 100644
index 0000000000000000000000000000000000000000..41496d171ce9d36405605925f741811a897c9abe
GIT binary patch
literal 819
zcmV-31I+x1P)<h;3K|Lk000e1NJLTq003kF002A)00000wNyY70008|Nkl<Zc-rmO
zT}V@57{GBa>N4miqR&N8L^no7Bt)lh7WAbhB^5cStPE;V7*eeTejp_knJZRwOrk9@
zmR9Q`!wfTQ(^K}L3-gp_X{kreNE7^b<V>$N^cY0Y`NIS6-49+~UY-d4LJ<aHAO<pa
zr18e5_QIEFJ$(?mPTh#OC?P=6vUQaJ)X#d>y6hSN3~Vu*y`nj)z<ber*gKTCeOod-
zjMIe>T@38HfR@?M!F;sJt_u>1AcCh9hKsyah-;xfWVILA>wvBY^$_F7nh)=b+ko_U
zgNjK)wuAIo21%0S(zx{2^36Jt-PzgMQ4T&PecVtIL|mC4))zr-u4IxCRLP1gNcKaB
zLac?@>$%NGbt1QWdU|#`NZNBg{zMR&(M|O{z*!>+id8YmDl!YiIP6x`qqF+#*se=(
z0~*pluAlA+K*vcW!78hxU^xe|q7tcqJ>%pHeaP~=fF+0I9ni({r|i4J;)euQ0Th+s
znOKTsDn$__<XA)tD5m_Ix{$m%@d1h##8kGd+MHQ;f3Br`$=XkEHlE(!06^*u*S<uT
zD@&cL@ri5VUA71z>*}P*(|_qeMyjhKbgzuR%RmgoK>jyG`N@wihU#n#*79eFn35Wx
zDCKA+0FNe?znSf1C|kxEEn6L7%WN7EVW}I~nuXR1AN%te>g9z<ZC~j-LfB?{bZjdO
zFubkM4*)qnK~+?#<PPCl>K_H-3<LrR4tkF{H#G#2w}&rnZ2<U^A(<rXgVRBnwsnpI
zNp-v3W(R4fe0z=uk*FrTD*-5YA_<DeW0I4dgvq93TZukXQ7&sp|M&sgCjc;DMG`!s
zI)`cr-JMY&F<u}kmrXW+=;s{BV@e%g=L0}lA)W<xRZ2-4`xEw0wRTV&nb2G@?Q&ja
z-E@0nRO0uW>#MEz&`K|>N!w6UQ?T;vJwmqHHzM-7%HKwPmA{#9k3Q2-<!ki&yJ;%<
xLa^SPE5RxV*{eR|gESBWF%SbW5Ci!~kl#s%UmhTRJ|O@A002ovPDHLkV1i^|c1r*N

literal 0
HcmV?d00001

diff --git a/tests/ref/transform-skew.png b/tests/ref/transform-skew.png
new file mode 100644
index 0000000000000000000000000000000000000000..76bee82a0109ce27e04095f83008ef612a8403b8
GIT binary patch
literal 878
zcmV-!1CjiRP)<h;3K|Lk000e1NJLTq003kF002A)00000wNyY70009uNkl<Zc-rmO
zZ)hAv7{~E_VPBTZTmNxKp(1^A2Z|Ud-IX-)h1QKN5{l>sHB}3BL8z3f?4eM!1|}$;
z62(1&=)F*<i5kJSOkTul%%xMoY7SziO;WAeIwVFE0{QCUlIy!{ODTP^KbT#Z=f#Ja
zVTQ-y8pO$v49SoyN9NvNxcJd`te3GWfIebVBJmwP4TiVgKLNl@;p<<wzDFy@6IOen
z!T6H3_z{5U+OnDsp<@Ji{B;0ed!1*7XvI1f90QT2HJP^nrK20tBKM90PgY>@iy7#w
z6Ar;oBNqTb7D44fYRs4ht&Ap&L64QA<;|o;p6KuIZ?AB+@9YD|66C`}XLbw&5QS(r
zXc|$h9b=1O5E~a0YMHY<oErIfd3pJ<3VnM9cD;}ww=Qw=b^u(dWe`h^C$Ww-MGKxX
zt|g4&RW5V8+#2vdvU0-;OB(@jq@*BXL;z8Ur$7eHpK*axX_0N80>K+R{Rk|w?JJ&o
zhdYnb=mJnqjBzBm3hkqOutlTu*e1tJN~F4ZSA&sK=fwH0hYn4Dep@hp*L@48A3VHw
z7C^)xV<74lf`K*<<rR#{iKwVxepB{#Wk`l(NQPWh#Qx1+i=>H7zG;wn|A7X>`=6Tt
z;CS2k=}m)hX++sjE-P$V*w$pu0@~5YFV{!7y9Vrj1px3S**gT6#*HBe!A7(a#Q<>#
zz56bwTVa*8ZiN-r(q^Efu!2@haji8vcsLC**l09*D*SVBaOZ4-{P65syJwTS&O_*6
zBa9GvMO2J(cnT?mBY<~5NrN1y)oR--yj-5#^L&D|&og>YQWpUtb_uL@!54JLpnOD}
zENAo^(r;JCYbVA{(yeS*<>JPq9>l^%k+3#z`EMv6C>rTQw*okICI!;jMEc%j=ZgRx
z-?FdDjnn+LC8-wziyK%(0KJlu0TEG9C_nW*soxa-!H>nBb0=<oyE-v_OElO1=${|#
zI2nFMa>N#zLv-s%nckA+NSh{Cm4yI+mj>2HzMraJU}ma*j^B^}%<R<UT)n=;{IOq>
zy0w4>PztnC)+%Mt8Up|e=d%YgLoy^oG9*JX<a$B=1@`4nlG$AFk^lez07*qoM6N<$
Ef(N0Lc>n+a

literal 0
HcmV?d00001

diff --git a/tests/suite/layout/transform.typ b/tests/suite/layout/transform.typ
index 3604b72f7..fde5edfd9 100644
--- a/tests/suite/layout/transform.typ
+++ b/tests/suite/layout/transform.typ
@@ -115,3 +115,53 @@ Hello #scaled[World]!
 #scale(x: auto, y: 50pt, reflow: true, cylinder)
 #scale(x: 100pt, y: auto, reflow: true, cylinder)
 #scale(x: 150%, y: auto, reflow: true, cylinder)
+
+--- transform-skew ---
+// Test skewing along one axis.
+#set page(width: 100pt, height: 60pt)
+#set text(size: 12pt)
+#let skewed(body) = box(skew(ax: -30deg, body))
+
+#set skew(reflow: false)
+Hello #skewed[World]!
+
+#set skew(reflow: true)
+Hello #skewed[World]!
+
+--- transform-skew-both-axes ---
+// Test skewing along both axes.
+#set page(width: 100pt, height: 250pt)
+#set text(size: 12pt)
+#let skewed(angle) = box(skew(ax: 30deg, ay: angle)[Some Text])
+
+#set skew(reflow: true)
+#for angle in range(-30, 31, step: 10) {
+  skewed(angle * 1deg)
+}
+
+--- transform-skew-origin ---
+// Test setting skewing origin.
+#set page(width: 100pt, height:40pt)
+#set text(spacing: 20pt)
+#let square = square.with(width: 8pt)
+#let skew-square(origin) = box(place(square(stroke: gray))
+  + place(skew(ax: -30deg, ay: -30deg, origin: origin, square())))
+#skew-square(center+horizon)
+#skew-square(bottom+left)
+#skew-square(top+right)
+#skew-square(horizon+right)
+
+--- transform-skew-relative-sizing ---
+// Test relative sizing in skewed boxes.
+#set page(width: 100pt, height: 60pt)
+#set text(size: 12pt)
+#let skewed(body) = box(skew(
+  ax: 30deg,
+  box(stroke: 0.5pt, width: 30%, clip: true, body)
+))
+
+#set skew(reflow: false)
+Hello #skewed[World]!\
+
+#set skew(reflow: true)
+Hello #skewed[World]!