wethegit · marlonmarcello · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
@@ -13,12 +13,12 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ main ]
+    branches: [main]
   schedule:
-    - cron: '35 12 * * 2'
+    - cron: "35 12 * * 2"
 
 jobs:
   analyze:
@@ -28,40 +28,40 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ["javascript"]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
+      - name: Checkout repository
+        uses: actions/checkout@v2
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v1
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      #- run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/preact-stickerbook",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Easily create collage apps that are accessible by default.",
   "files": [
     "dist/*"

diff --git a/src/README.md b/src/README.md
@@ -1,3 +1,3 @@
 ## Playground
 
-Files in the root of this directory are not shipped as part of the library, use it as development environment to run and test the package.
+Files in the root of this directory are not shipped as part of the library, use it as development environment to run and test the package.
diff --git a/src/app.tsx b/src/app.tsx
@@ -5,12 +5,12 @@ import { Sticker, Stickerbook } from "./lib"
 import { addSticker, exportStickerbook } from "./lib/helpers"
 import { useStickerbook } from "./lib/use-stickerbook"
 
-import backgroundImage from "./background.jpg"
 import backgroundImage2 from "./background-2.png"
 import frameImage from "./frame.png"
 import foregroundImage from "./foreground.png"
 import foregroundImage2 from "./foreground-2.png"
 import stickerImage from "./sticker.png"
+import patternImage from "./sweet-potato-pattern.jpg"
 
 const CANVAS_SIZE = {
   width: 500,
@@ -50,8 +50,8 @@ export function App() {
     ],
     initialBackgrounds: [
       {
-        image: backgroundImage,
-        type: "scene",
+        image: patternImage,
+        type: "pattern",
       },
       {
         image: backgroundImage2,

diff --git a/src/background.jpg b/src/background.jpg
diff --git a/src/lib/helpers/coverCanvas.ts b/src/lib/helpers/coverCanvas.ts
@@ -1,3 +1,4 @@
+import { OverlayType } from "../types"
 import { loadUrlAsImage } from "./loadUrlAsImage"
 
 interface CoverCanvasOptions {
@@ -7,6 +8,7 @@ interface CoverCanvasOptions {
   height: number
   offsetX?: number
   offsetY?: number
+  type?: OverlayType
 }
 
 export async function coverCanvas({
@@ -16,6 +18,7 @@ export async function coverCanvas({
   height,
   offsetX = 0.5,
   offsetY = 0.5,
+  type = "scene",
 }: CoverCanvasOptions): Promise<void> {
   if (!ctx || !(ctx instanceof CanvasRenderingContext2D))
     throw Error("`ctx` is required and must be a valid canvas context")
@@ -34,29 +37,48 @@ export async function coverCanvas({
   let outputWidth = width
   let outputHeight = height
 
-  if (imageRatio > outputRatio) outputWidth = outputHeight * imageRatio
-  else if (imageRatio < outputRatio)
-    outputHeight = outputWidth * (imageHeight / imageWidth)
-
   // first we our image/source onto a canvas resized
   // to the output size we want and with the correct ratio
   const resizedCanvas = document.createElement("canvas")
   const resizedCanvasCtx = resizedCanvas.getContext("2d")!
 
+  if (type === "scene") {
+    if (imageRatio > outputRatio) outputWidth = outputHeight * imageRatio
+    else if (imageRatio < outputRatio)
+      outputHeight = outputWidth * (imageHeight / imageWidth)
+  } else {
+    // backgrounds should base themselves on the size of the stickerbook
+    // meaning, they should look good with the output size in mind
+    // so we don't alter their dimensions here, just like we don't
+    // on the stickerbook preview itself, see size matching there
+    // https://github.com/wethegit/preact-stickerbook/blob/4f33afc7ac1fb25090d2f799798b104797758229/src/lib/stickerbook.tsx
+    outputWidth = imageWidth
+    outputHeight = imageHeight
+  }
+
   resizedCanvas.width = outputWidth
   resizedCanvas.height = outputHeight
   resizedCanvasCtx.drawImage(loadedImage, 0, 0, outputWidth, outputHeight)
 
-  // now we draw the scaled canvas onto the original context passed
-  ctx.drawImage(
-    resizedCanvas,
-    (outputWidth - width) * offsetX,
-    (outputHeight - height) * offsetY,
-    width,
-    height,
-    0,
-    0,
-    width,
-    height
-  )
+  if (type === "scene") {
+    // now we draw the scaled canvas onto the original context passed
+    ctx.drawImage(
+      resizedCanvas,
+      (outputWidth - width) * offsetX,
+      (outputHeight - height) * offsetY,
+      width,
+      height,
+      0,
+      0,
+      width,
+      height
+    )
+  } else {
+    // create a pattern
+    const pattern = ctx.createPattern(resizedCanvas, "repeat")!
+
+    // fill canvas
+    ctx.fillStyle = pattern
+    ctx.fillRect(0, 0, width, height)
+  }
 }
diff --git a/src/lib/helpers/exportStickerbook.ts b/src/lib/helpers/exportStickerbook.ts
@@ -83,6 +83,7 @@ export async function exportStickerbook<T extends ExportFormat>({
         img: background.image,
         width: outputWidth,
         height: outputHeight,
+        type: background.type,
       })
     }
   }

diff --git a/src/lib/helpers/reorderSticker.ts b/src/lib/helpers/reorderSticker.ts
@@ -43,8 +43,8 @@ export function reorderSticker({
         ? max
         : Math.min(max, currentOrder + 1)
       : extreme
-      ? min
-      : Math.max(min, currentOrder - 1)
+        ? min
+        : Math.max(min, currentOrder - 1)
 
   // if the order didn't change, than we just return
   if (newOrder === currentOrder) return stickers

diff --git a/src/lib/stickerbook.tsx b/src/lib/stickerbook.tsx
@@ -65,6 +65,7 @@ export function Stickerbook({
       const bgSize =
         (backgroundDetails[i].width * dimensions.width) / outputWidth
       return {
+        backgroundPosition: "left top",
         backgroundRepeat: "repeat",
         backgroundSize: `${bgSize}px auto`,
       }

diff --git a/src/sweet-potato-pattern.jpg b/src/sweet-potato-pattern.jpg