From 3fe16c7e49111a5ecddf1d8a12f9059a59812892 Mon Sep 17 00:00:00 2001
From: Jeremy Penner <jeremy@sporktania.com>
Date: Sat, 23 Dec 2023 14:21:24 -0500
Subject: [PATCH] Implement xRel / yRel cel-positioning logic when compositing

---
 index.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/index.js b/index.js
index da476f1..b3135a8 100644
--- a/index.js
+++ b/index.js
@@ -307,20 +307,28 @@ const compositeCels = (cels) => {
     let minY = Number.POSITIVE_INFINITY
     let maxX = Number.NEGATIVE_INFINITY
     let maxY = Number.NEGATIVE_INFINITY
+    let xRel = 0
+    let yRel = 0
     for (let cel of cels) {
-        minX = Math.min(minX, cel.xOffset)
-        minY = Math.min(minY, -cel.yOffset)
-        maxX = Math.max(maxX, cel.width + cel.xOffset)
-        maxY = Math.max(maxY, cel.height - cel.yOffset)
-    }    const container = document.getElementById("cels")
+        minX = Math.min(minX, cel.xOffset + xRel)
+        minY = Math.min(minY, -(cel.yOffset + yRel))
+        maxX = Math.max(maxX, cel.width + cel.xOffset + xRel)
+        maxY = Math.max(maxY, cel.height - (cel.yOffset + yRel))
+        xRel += cel.xRel 
+        yRel += cel.yRel
+    }
 
     const w = (maxX - minX) * 8
     const h = maxY - minY
 
     const canvas = makeCanvas(w, h)
     const ctx = canvas.getContext("2d")
+    xRel = 0
+    yRel = 0
     for (let cel of cels) {
-        ctx.drawImage(cel.canvas, (cel.xOffset - minX) * 8, -cel.yOffset - minY)
+        ctx.drawImage(cel.canvas, (cel.xOffset + xRel - minX) * 8, -(cel.yOffset + yRel) - minY)
+        xRel += cel.xRel 
+        yRel += cel.yRel
     }
     return { canvas: canvas, xOffset: minX * 8, yOffset: minY }
 }