canvas-splash-screen - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/index.d.ts

 type CanvasSplashScreenConfig = {
     canvasElement?: HTMLCanvasElement;
-    svgBase64: string;
+    logoUrl: string;
     animationDuration: number;
     logoSize: number;
     hidden?: boolean;
+    angle?: number;
+    offsetX?: number;
+    offsetY?: number;
 };
@@ -8,0 +11,0 @@ declare function createSplashScreen(configuration?: Partial<CanvasSplashScreenConfig>): {

dist/index.js

@@ -29,8 +29,20 @@ "use strict";
   let defaultConfig = {
-    svgBase64: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTM0IiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDUzNCA4MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjMzMzI1MiAwSDUzMy42NjdWMjY2LjY2N0gyNjdMMC4zMzMyNTIgMFpNMC4zMzMyNTIgMjY2LjY2N0gyNjdMNTMzLjY2NyA1MzMuMzMzSDAuMzMzMjUyVjI2Ni42NjdaTTAuMzMzMjUyIDUzMy4zMzNIMjY3VjgwMEwwLjMzMzI1MiA1MzMuMzMzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==",
+    logoUrl: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTM0IiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDUzNCA4MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjMzMzI1MiAwSDUzMy42NjdWMjY2LjY2N0gyNjdMMC4zMzMyNTIgMFpNMC4zMzMyNTIgMjY2LjY2N0gyNjdMNTMzLjY2NyA1MzMuMzMzSDAuMzMzMjUyVjI2Ni42NjdaTTAuMzMzMjUyIDUzMy4zMzNIMjY3VjgwMEwwLjMzMzI1MiA1MzMuMzMzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==",
     animationDuration: 2.2,
-    logoSize: 50
+    logoSize: 50,
+    angle: 360,
+    hidden: false,
+    offsetX: 0,
+    offsetY: 0
   };
   const config = { ...defaultConfig, ...configuration };
-  let { canvasElement, svgBase64, animationDuration, logoSize: size } = config;
+  let {
+    canvasElement,
+    logoUrl: svgBase64,
+    animationDuration,
+    logoSize: size,
+    angle,
+    offsetX,
+    offsetY
+  } = config;
   if (!canvasElement) {
@@ -61,3 +73,3 @@ const fallbackCanvas = document.createElement("canvas");
   const maxSize = Math.max(canvasElement.width, canvasElement.height) * 20;
-  const animationProps = { size, angle: 0, opacity: 1 };
+  const animationProps = { size, angle: 0, opacity: 1, offsetX: 0, offsetY: 0 };
   const svgImage = new Image();
@@ -78,3 +90,5 @@ svgImage.src = svgBase64;
       size: maxSize,
-      angle: 360,
+      angle,
+      offsetX,
+      offsetY,
       duration: animationDuration,
@@ -108,6 +122,8 @@ ease: import_gsap.Power1.easeIn
     ctx.fillRect(0, 0, canvasElement.width, canvasElement.height);
-    ctx.save();
-    ctx.translate(centerX, centerY);
+    ctx.translate(
+      centerX + animationProps.offsetX,
+      centerY + animationProps.offsetY
+    );
+    let scaleFactor = animationProps.size / svgImage.width;
     ctx.rotate(animationProps.angle * Math.PI / 180);
-    let scaleFactor = animationProps.size / svgImage.width;
     ctx.scale(scaleFactor, scaleFactor);
@@ -118,3 +134,6 @@ ctx.globalCompositeOperation = "destination-out";
     ctx.save();
-    ctx.translate(centerX, centerY);
+    ctx.translate(
+      centerX + animationProps.offsetX,
+      centerY + animationProps.offsetY
+    );
     ctx.rotate(animationProps.angle * Math.PI / 180);
@@ -127,3 +146,3 @@ ctx.scale(scaleFactor, scaleFactor);
   }
-  window.addEventListener("resize", () => {
+  const resize = () => {
     if (!canvasElement)
@@ -135,3 +154,4 @@ return;
     centerY = canvasElement.height / 2;
-  });
+  };
+  window.addEventListener("resize", resize);
   return {
@@ -158,2 +178,3 @@ tl,
         return;
+      window.removeEventListener("resize", resize);
       canvasElement.remove();
@@ -160,0 +181,0 @@ }

package.json

 {
   "name": "canvas-splash-screen",
   "author": "Julio Merisio <[e-mail]>",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A canvas splash screen animation",
@@ -6,0 +6,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

29135

increased by8.01%

Lines of code

351

increased by14.71%

No dependency changes