@tsparticles/shape-cards 4.0.0-alpha.8 → 4.0.0-beta.1

package/esm/index.js

@@ -1,19 +1,28 @@
 export async function loadCardSuitsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { loadClubsSuitShape } = await import("./clubs/index.js"), { loadDiamondsSuitShape } = await import("./diamonds/index.js"), { loadHeartsSuitShape } = await import("./hearts/index.js"), { loadSpadesSuitShape } = await import("./spades/index.js");
-        await loadClubsSuitShape(e);
-        await loadDiamondsSuitShape(e);
-        await loadHeartsSuitShape(e);
-        await loadSpadesSuitShape(e);
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
+        const [{ loadClubsSuitShape }, { loadDiamondsSuitShape }, { loadHeartsSuitShape }, { loadSpadesSuitShape },] = await Promise.all([
+            import("./clubs/index.js"),
+            import("./diamonds/index.js"),
+            import("./hearts/index.js"),
+            import("./spades/index.js"),
+        ]);
+        await Promise.all([
+            loadClubsSuitShape(e),
+            loadDiamondsSuitShape(e),
+            loadHeartsSuitShape(e),
+            loadSpadesSuitShape(e),
+        ]);
     });
 }
 export async function loadCardsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
         const { loadFullCardsShape } = await import("./cards/index.js");
-        await loadFullCardsShape(e);
-        await loadCardSuitsShape(e);
+        await Promise.all([
+            loadFullCardsShape(e),
+            loadCardSuitsShape(e),
+        ]);
     });
 }
 export * from "./cards/index.js";

package/esm/spades/SpadeDrawer.js

@@ -1,9 +1,6 @@
 import { drawPath } from "@tsparticles/path-utils";
 import { paths } from "../paths.js";
 export class SpadeDrawer {
-    constructor() {
-        this.validTypes = ["spade", "spades"];
-    }
     draw(data) {
         const { context, radius } = data;
         drawPath(context, radius, paths.spades);

package/esm/spades/index.js

@@ -1,7 +1,9 @@
 export async function loadSpadesSuitShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { SpadeDrawer } = await import("./SpadeDrawer.js");
-        e.addShape(new SpadeDrawer());
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addShape(["spade", "spades"], async () => {
+            const { SpadeDrawer } = await import("./SpadeDrawer.js");
+            return new SpadeDrawer();
+        });
     });
 }

package/esm/utils.js

@@ -1,39 +1,50 @@
-import { double, doublePI, getStyleFromRgb, half, originPoint, triple } from "@tsparticles/engine";
+import { double, doublePI, getStyleFromRgb, half, originPoint, safeDocument, triple, } from "@tsparticles/engine";
 import { SuitType } from "./SuitType.js";
 import { drawPath } from "@tsparticles/path-utils";
 import { paths } from "./paths.js";
-const cardWidthRatio = (double * double) / triple, cardHeightRatio = double, cornerRadiusRatio = 0.2, cornerFontRatio = 0.4, cornerSuitRatio = 0.3, centerSuitRatio = 0.9, cornerPaddingRatio = 0.2, textHorizontalOffsetRatio = 0.25, minRadius = 0, minAngle = 0, suitEdgeBufferFactor = 0.1, fixedCacheKey = 2, cardsCache = new Map();
-export function drawRoundedCard(ctx, radius, cardData, hdr, flipped) {
+const cardWidthRatio = (double * double) / triple, cardHeightRatio = double, cornerRadiusRatio = 0.2, cornerFontRatio = 0.4, cornerSuitRatio = 0.3, centerSuitRatio = 0.7, cornerPaddingRatio = 0.2, textHorizontalOffsetRatio = 0.25, minRadius = 0, minAngle = 0, suitEdgeBufferFactor = 0.1, fixedCacheKey = 2, cardsCache = new Map(), redSuitColor = { r: 215, g: 20, b: 20 }, blackSuitColor = { r: 18, g: 18, b: 18 };
+export function drawRoundedCard(ctx, radius, cardData, hdr, flipped, canvasSettings) {
     if (flipped) {
         drawRoundedCardBack(ctx, radius);
     }
     else {
-        const cacheKey = getCacheKey(radius, cardData), cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half, halfHeight = cardHeight * half;
-        if (!cardsCache.has(cacheKey)) {
-            const canvas = new OffscreenCanvas(cardWidth, cardHeight), offCtx = canvas.getContext("2d");
-            if (offCtx) {
-                offCtx.translate(halfWidth, halfHeight);
-                drawRoundedCardFront(offCtx, radius, cardData, hdr);
-                cardsCache.set(cacheKey, canvas);
+        const cacheKey = getCacheKey(radius, hdr, cardData), cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half, halfHeight = cardHeight * half;
+        let cachedData = cardsCache.get(cacheKey);
+        if (!cachedData) {
+            let cacheCanvas, cacheCtx;
+            if (typeof OffscreenCanvas === "undefined") {
+                cacheCanvas = safeDocument().createElement("canvas");
+                cacheCanvas.width = cardWidth;
+                cacheCanvas.height = cardHeight;
+                cacheCtx = cacheCanvas.getContext("2d", canvasSettings);
+            }
+            else {
+                cacheCanvas = new OffscreenCanvas(cardWidth, cardHeight);
+                cacheCtx = cacheCanvas.getContext("2d", canvasSettings);
+            }
+            if (cacheCtx) {
+                cacheCtx.translate(halfWidth, halfHeight);
+                drawRoundedCardFront(cacheCtx, radius, cardData, hdr);
+                cachedData = cacheCanvas instanceof HTMLCanvasElement ? cacheCanvas : cacheCanvas.transferToImageBitmap();
+                cardsCache.set(cacheKey, cachedData);
             }
         }
-        const cachedCanvas = cardsCache.get(cacheKey);
-        if (cachedCanvas) {
-            ctx.drawImage(cachedCanvas, -halfWidth, -halfHeight, cardWidth, cardHeight);
+        if (cachedData) {
+            ctx.drawImage(cachedData, -halfWidth, -halfHeight, cardWidth, cardHeight);
         }
         else {
             drawRoundedCardFront(ctx, radius, cardData, hdr);
         }
     }
 }
-function getCacheKey(radius, cardData) {
-    return `${radius.toFixed(fixedCacheKey)}-${cardData.suit}-${cardData.value}`;
+function getCacheKey(radius, hdr, cardData) {
+    return `${radius.toFixed(fixedCacheKey)}-${hdr ? "hdr" : "sdr"}-${cardData.suit}-${cardData.value}`;
 }
 function drawRoundedCardBack(ctx, radius) {
     drawCardBody(ctx, radius);
 }
 function drawRoundedCardFront(ctx, radius, cardData, hdr) {
-    const { suit, value } = cardData, cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half, halfHeight = cardHeight * half, cornerPadding = radius * cornerPaddingRatio, cornerFontSize = radius * cornerFontRatio, cornerSuitSize = radius * cornerSuitRatio, centerSuitSize = radius * centerSuitRatio, textOffset = radius * textHorizontalOffsetRatio, suitEdgeBuffer = radius * suitEdgeBufferFactor, isRed = suit === SuitType.hearts || suit === SuitType.diamonds, color = isRed ? getStyleFromRgb({ r: 255, g: 0, b: 0 }, hdr) : getStyleFromRgb({ r: 0, g: 0, b: 0 }, hdr);
+    const { suit, value } = cardData, cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half, halfHeight = cardHeight * half, cornerPadding = radius * cornerPaddingRatio, cornerFontSize = radius * cornerFontRatio, cornerSuitSize = radius * cornerSuitRatio, centerSuitSize = radius * centerSuitRatio, textOffset = radius * textHorizontalOffsetRatio, suitEdgeBuffer = radius * suitEdgeBufferFactor, isRed = suit === SuitType.hearts || suit === SuitType.diamonds, color = isRed ? getStyleFromRgb(redSuitColor, hdr) : getStyleFromRgb(blackSuitColor, hdr);
     ctx.save();
     drawCardBody(ctx, radius);
     ctx.fillStyle = getStyleFromRgb({ r: 255, g: 255, b: 255 }, hdr);
@@ -44,8 +55,7 @@ function drawRoundedCardFront(ctx, radius, cardData, hdr) {
     ctx.font = `bold ${cornerFontSize.toString()}px Arial, serif`;
     ctx.textAlign = "left";
     ctx.textBaseline = "middle";
-    const topLeftX = -halfWidth + cornerPadding + suitEdgeBuffer;
-    const topLeftY = -halfHeight + cornerPadding + cornerFontSize * half;
+    const topLeftX = -halfWidth + cornerPadding + suitEdgeBuffer, topLeftY = -halfHeight + cornerPadding + cornerFontSize * half;
     ctx.save();
     ctx.translate(topLeftX, topLeftY);
     ctx.beginPath();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/shape-cards",
-  "version": "4.0.0-alpha.8",
+  "version": "4.0.0-beta.1",
   "description": "tsParticles cards shape",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -100,8 +100,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.8",
-    "@tsparticles/path-utils": "4.0.0-alpha.8"
+    "@tsparticles/engine": "4.0.0-beta.1",
+    "@tsparticles/path-utils": "4.0.0-beta.1"
   },
   "publishConfig": {
     "access": "public"