@front10/canvas-video-player - npm Package Compare versions

Comparing version 1.3.33 to 1.3.34

package.json

 {
   "name": "@front10/canvas-video-player",
-  "version": "1.3.33",
+  "version": "1.3.34",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

src/common/objects/BasicText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -42,8 +43,8 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
       _internal: {
-        width: width,
+        width: width * scale,
       },
@@ -226,4 +227,4 @@ shadow: style.shadow || null,
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -230,0 +231,0 @@ }

src/common/objects/BoundaryText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale,
     },
@@ -44,5 +45,5 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
@@ -150,3 +151,3 @@ shadow: style.shadow || null,
                 left: 0,
-                top: top + recAux.height / 2,
+                top: top + (recAux.height / 2) * scale,
                 originX: "center",
@@ -161,3 +162,3 @@ originY: "center",
 
-      top += fontStyles.title.fontSize / 4;
+      top += (fontStyles.title.fontSize / 4) * scale;
     }
@@ -187,3 +188,3 @@
                 left: 0,
-                top: top + recAux.height / 2,
+                top: top + (recAux.height / 2) * scale,
                 originX: "center",
@@ -210,3 +211,3 @@ originY: "center",
       width: textG.width,
-      height: textG.height + style.fontSize * 1.2,
+      height: textG.height + style.fontSize * 1.2 * scale,
       fill: "rgba(255,255,255,.0)",
@@ -221,6 +222,6 @@ originX: "left",
       width: textG.width,
-      height: textG.height + style.fontSize * 1.2,
+      height: textG.height + style.fontSize * 1.2 * scale,
       fill: "rgba(255,255,255,.0)",
       stroke: style.backgroundColor,
-      strokeWidth: style.fontSize / 10,
+      strokeWidth: (style.fontSize / 10) * scale,
       originX: "left",
@@ -254,4 +255,4 @@ originY: "center",
       _internal: {
-        width: allWidth.maxWidth + (style.fontSize / 10) * 2,
-        height: me.object.height + (style.fontSize / 10) * 2,
+        width: allWidth.maxWidth + (style.fontSize / 10) * scale * 2,
+        height: me.object.height + (style.fontSize / 10) * scale * 2,
       },
@@ -277,4 +278,4 @@ anime: (canvas, status, time) => {
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -281,0 +282,0 @@ }

src/common/objects/BrushStrokeText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale,
     },
@@ -48,8 +49,8 @@ }) {
         backgroundColor: style.backgroundColor || "transparent",
-        padding: Number(style.padding || 24),
+        padding: Number(style.padding || 24) * scale,
         fill: style.fill || "#fff",
-        fontSize: Number(style.fontSize || 36),
+        fontSize: Number(style.fontSize || 36) * scale,
         fontFamily: style.fontFamily || "Roboto",
         _internal: {
-          width: width,
+          width: width * scale,
         },
@@ -78,7 +79,7 @@ lineHeight: style.lineHeight || null,
         title: {
-          width: fontStyles.title.fontSize * 1.2,
+          width: fontStyles.title.fontSize * 1.2 * scale,
           height: 0,
         },
         info: {
-          width: fontStyles.info.fontSize * 1.2,
+          width: fontStyles.info.fontSize * 1.2 * scale,
           height: 0,
@@ -157,3 +158,3 @@ },
 
-        top += fontStyles.title.fontSize / 4;
+        top += (fontStyles.title.fontSize / 4) * scale;
       }
@@ -220,3 +221,3 @@
               left: 0,
-              top: topBrush + brushStroke.height / 2,
+              top: topBrush + (brushStroke.height / 2) * scale,
               originX: "center",
@@ -235,3 +236,3 @@ originY: "center",
             left: 0,
-            top: topBrush + brushStroke.height / 2,
+            top: topBrush + (brushStroke.height / 2) * scale,
             originX: "center",
@@ -284,4 +285,5 @@ originY: "center",
       if (!newY) {
-        if (y === "top") newY = 172;
-        else if (y === "bottom") newY = _height - me.object.height - 148;
+        if (y === "top") newY = 172 * scale;
+        else if (y === "bottom")
+          newY = _height - me.object.height - 148 * scale;
         else newY = _height / 2 - me.object.height / 2;
@@ -288,0 +290,0 @@ }

src/common/objects/CenterLineText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -44,5 +45,5 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
@@ -83,7 +84,7 @@ _internal: {
       title: {
-        width: fontStyles.title.fontSize * 1.2,
+        width: fontStyles.title.fontSize * 1.2 * scale,
         height: 0,
       },
       info: {
-        width: fontStyles.info.fontSize * 1.2,
+        width: fontStyles.info.fontSize * 1.2 * scale,
         height: 0,
@@ -166,3 +167,3 @@ },
       width: allWidth.maxWidth,
-      height: style.fontSize / 10,
+      height: (style.fontSize * scale) / 10,
       fill: style.backgroundColor,
@@ -172,6 +173,6 @@ originX: "center",
       left: allWidth.maxWidth / 2,
-      top: top + style.fontSize / 10,
+      top: top + (style.fontSize / 10) * scale,
     });
 
-    top += style.fontSize / 10 + fontStyles.title.fontSize / 4;
+    top += (style.fontSize * scale) / 10 + fontStyles.title.fontSize / 4;
 
@@ -252,4 +253,4 @@ if (infoBox) {
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -256,0 +257,0 @@ }

src/common/objects/CrissCrossText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -44,8 +45,8 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
       _internal: {
-        width: width,
+        width: width * scale,
       },
@@ -74,7 +75,7 @@ lineHeight: style.lineHeight || null,
       title: {
-        width: fontStyles.title.fontSize * 1.2,
+        width: fontStyles.title.fontSize * 1.2 * scale,
         height: 24,
       },
       info: {
-        width: fontStyles.info.fontSize * 1.2,
+        width: fontStyles.info.fontSize * 1.2 * scale,
         height: 24,
@@ -227,4 +228,4 @@ },
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -231,0 +232,0 @@ }

src/common/objects/DreamMemeText.js

@@ -28,2 +28,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -40,8 +41,8 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
       _internal: {
-        width: width,
+        width: width * scale,
       },
@@ -70,7 +71,7 @@ lineHeight: style.lineHeight || null,
       title: {
-        width: fontStyles.title.fontSize * 1.2,
+        width: fontStyles.title.fontSize * 1.2 * scale,
         height: 0,
       },
       info: {
-        width: fontStyles.info.fontSize * 1.2,
+        width: fontStyles.info.fontSize * 1.2 * scale,
         height: 0,
@@ -154,3 +155,3 @@ },
         width: _width,
-        height: titleG.height + 80,
+        height: titleG.height + 80 * scale,
         fill: titleBox[0] !== null ? style.backgroundColor : "",
@@ -217,3 +218,3 @@ });
         width: _width,
-        height: infoG.height + 80,
+        height: infoG.height + 80 * scale,
         fill: infoBox[0] !== null ? style.backgroundColor : "",
@@ -220,0 +221,0 @@ });

src/common/objects/HonorText.js

@@ -29,2 +29,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -41,8 +42,8 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
       _internal: {
-        width: width,
+        width: width * scale,
       },
@@ -80,7 +81,7 @@ shadow: style.shadow || null,
       title: {
-        width: fontStyles.title.fontSize * 1.2,
+        width: fontStyles.title.fontSize * 1.2 * scale,
         height: 0,
       },
       info: {
-        width: fontStyles.info.fontSize * 1.2,
+        width: fontStyles.info.fontSize * 1.2 * scale,
         height: 0,
@@ -134,4 +135,4 @@ },
     const figTop = new fabric.Rect({
-      width: sizeQuote,
-      height: sizeQuote * 2,
+      width: sizeQuote * scale,
+      height: sizeQuote * 2 * scale,
       fill: "",
@@ -145,3 +146,3 @@ originX: "left",
     const quote1 = new fabric.Path(figQuote, {
-      left: sizeQuote,
+      left: 0,
       top: 0,
@@ -151,6 +152,8 @@ fill: style.backgroundColor,
       originY: "center",
+      scaleX: scale,
+      scaleY: scale,
     });
 
     const quote2 = new fabric.Path(figQuote, {
-      left: sizeQuote * 2 + 5,
+      left: (sizeQuote + 5) * scale,
       top: 0,
@@ -160,11 +163,13 @@ fill: style.backgroundColor,
       originY: "center",
+      scaleX: scale,
+      scaleY: scale,
     });
 
     const lineTop = new fabric.Rect({
-      width: allWidth.maxWidth - (sizeQuote * 3 + 20),
-      height: style.fontSize / 10,
+      width: allWidth.maxWidth - (sizeQuote * 3 + 20) * scale,
+      height: (style.fontSize / 10) * scale,
       fill: style.fill,
       originX: "left",
       originY: "center",
-      left: sizeQuote * 3 + 20,
+      left: (sizeQuote * 2 + 20) * scale,
       top: 0,
@@ -253,3 +258,3 @@ });
 
-    top += quote1.height;
+    top += quote1.height * scale;
 
@@ -267,3 +272,3 @@ const figBot = new fabric.Rect({
     const quote3 = new fabric.Path(figQuote, {
-      left: allWidth.maxWidth - sizeQuote,
+      left: allWidth.maxWidth - 5 * scale,
       top: 0,
@@ -273,8 +278,8 @@ fill: style.backgroundColor,
       originY: "center",
-      scaleX: -1,
-      scaleY: -1,
+      scaleX: -1 * scale,
+      scaleY: -1 * scale,
     });
 
     const quote4 = new fabric.Path(figQuote, {
-      left: allWidth.maxWidth - (sizeQuote * 2 + 5),
+      left: allWidth.maxWidth - (sizeQuote + 5) * scale,
       top: 0,
@@ -284,13 +289,13 @@ fill: style.backgroundColor,
       originY: "center",
-      scaleX: -1,
-      scaleY: -1,
+      scaleX: -1 * scale,
+      scaleY: -1 * scale,
     });
 
     const lineBot = new fabric.Rect({
-      width: allWidth.maxWidth - (sizeQuote * 3 + 20),
-      height: style.fontSize / 10,
+      width: allWidth.maxWidth - (sizeQuote * 3 + 20) * scale,
+      height: (style.fontSize / 10) * scale,
       fill: style.fill,
       originX: "right",
       originY: "center",
-      left: allWidth.maxWidth - (sizeQuote * 3 + 20),
+      left: allWidth.maxWidth - (sizeQuote * 2 + 20) * scale,
       top: 0,
@@ -337,4 +342,4 @@ });
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -341,0 +346,0 @@ }

src/common/objects/Image.js

 import { corners, cropping } from "../../helpers/fabric";
 import { isFunction } from "../../helpers/javascript";
-import * as AMIMATIONS from '../animations/index.js'
-import ObjectBase from './Object';
+import * as AMIMATIONS from "../animations/index.js";
+import ObjectBase from "./Object";
 
 class FabricImage extends ObjectBase {
-
   constructor(params) {
@@ -27,4 +26,5 @@ super(params);
       showSelection,
-      zIndex
-    }
+      zIndex,
+      scale = 1,
+    },
   }) {
@@ -34,6 +34,6 @@ try {
 
-      if (x === "left") x = 24;
-      else if (x === "right") x = _width - image.width - 24;
-      if (y === "top") y = 24;
-      else if (y === "bottom") y = _height - image.height - 24;
+      if (x === "left") x = 24 * scale;
+      else if (x === "right") x = _width - image.width * scale - 24 * scale;
+      if (y === "top") y = 24 * scale;
+      else if (y === "bottom") y = _height - image.height * scale - 24 * scale;
 
@@ -49,5 +49,11 @@ image.set({
         strokeWidth: style.borderSize || 0,
+        scaleX: scale,
+        scaleY: scale,
         anime: (canvas, status, time) => {
           try {
-            if (animation && animation.name && isFunction(AMIMATIONS[animation.name]))
+            if (
+              animation &&
+              animation.name &&
+              isFunction(AMIMATIONS[animation.name])
+            )
               AMIMATIONS[animation.name]({
@@ -59,18 +65,25 @@ duration: animation.duration || 1000,
                 status,
-                time
+                time,
               });
-            if (me.object && me.object._animation && me.object._animation.status === "created") {
+            if (
+              me.object &&
+              me.object._animation &&
+              me.object._animation.status === "created"
+            ) {
               if (status === "playing")
-                me.object && me.object._animation && me.object._animation.timeline && me.object._animation.timeline.play();
-
+                me.object &&
+                  me.object._animation &&
+                  me.object._animation.timeline &&
+                  me.object._animation.timeline.play();
             }
-          } catch (error) { }
-        }
+          } catch (error) {}
+        },
       });
 
       if (style.crop) cropping({ ...(style.crop || {}), object: image });
-      if (style.borderRadius) corners({ borderRadius: style.borderRadius, object: image, fabric });
+      if (style.borderRadius)
+        corners({ borderRadius: style.borderRadius, object: image, fabric });
 
-      if (width) image.set({ scaleX: width / image.width })
-      if (height) image.set({ scaleY: height / image.height })
+      if (width) image.set({ scaleX: width / image.width });
+      if (height) image.set({ scaleY: height / image.height });
 
@@ -90,4 +103,3 @@ const filters = style.filters || {};
         );
-      if (filters.sepia)
-        image.filters.push(new fabric.Image.filters.Sepia());
+      if (filters.sepia) image.filters.push(new fabric.Image.filters.Sepia());
       if (filters.grayscale)
@@ -98,3 +110,3 @@ image.filters.push(new fabric.Image.filters.Grayscale());
       me.object = image;
-    } catch (e) { }
+    } catch (e) {}
   }
@@ -101,0 +113,0 @@ }

src/common/objects/LineUpText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -42,5 +43,5 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
@@ -128,3 +129,3 @@ _internal: {
       width: allWidth.maxWidth,
-      height: style.fontSize / 10,
+      height: (style.fontSize / 10) * scale,
       fill: style.backgroundColor,
@@ -137,3 +138,3 @@ originX: "center",
 
-    top += style.fontSize / 10 + fontStyles.title.fontSize / 4;
+    top += (style.fontSize * scale) / 10 + fontStyles.title.fontSize / 4;
 
@@ -243,4 +244,4 @@ if (titleBox) {
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -247,0 +248,0 @@ }

src/common/objects/PopOutText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -42,8 +43,8 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
       _internal: {
-        width: width,
+        width: width * scale,
       },
@@ -189,3 +190,3 @@ lineHeight: style.lineHeight || null,
       width: allWidth.maxWidth,
-      height: textG.height + (style.fontSize / 2) * 2,
+      height: textG.height + (style.fontSize / 2) * 2 * scale,
       fill: style.backgroundColor,
@@ -204,3 +205,3 @@ originX: "left",
       width: allWidth.maxWidth,
-      height: textG.height + (style.fontSize / 2) * 2,
+      height: textG.height + (style.fontSize / 2) * 2 * scale,
       fill: style.fill,
@@ -220,8 +221,8 @@ originX: "left",
     textIG.set({
-      top: textIG.top - 15,
-      left: textIG.left + 15,
+      top: textIG.top - 15 * scale,
+      left: textIG.left + 15 * scale,
     });
     rectBg.set({
-      top: rectBg.top + 15,
-      left: rectBg.left - 15,
+      top: rectBg.top + 15 * scale,
+      left: rectBg.left - 15 * scale,
     });
@@ -237,4 +238,4 @@
       _internal: {
-        width: allWidth.maxWidth + 30,
-        height: me.object.height + 30,
+        width: allWidth.maxWidth + 30 * scale,
+        height: me.object.height + 30 * scale,
       },
@@ -259,4 +260,4 @@ anime: (canvas, status, time) => {
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -263,0 +264,0 @@ }

src/common/objects/RollOutText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -42,5 +43,5 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
@@ -169,3 +170,3 @@ _internal: {
             width: infoAux.width + rectPadding.info.width,
-            height: infoAux.height + 40,
+            height: infoAux.height + 40 * scale,
           });
@@ -233,4 +234,4 @@ infoGroup.push(
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -237,0 +238,0 @@ }

src/common/objects/SimpleCleanText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -42,5 +43,5 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
@@ -216,3 +217,3 @@ _internal: {
     const rectBg = new fabric.Rect({
-      width: (style.fontSize / 10) * 3,
+      width: (style.fontSize / 10) * 3 * scale,
       height: textG.height,
@@ -280,4 +281,4 @@ fill: style.backgroundColor,
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -284,0 +285,0 @@ }

src/common/objects/SolidText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -42,8 +43,8 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
       _internal: {
-        width: width,
+        width: width * scale,
       },
@@ -193,3 +194,3 @@ lineHeight: style.lineHeight || null,
       width: allWidth.maxWidth,
-      height: textG.height + (style.fontSize / 2) * 2,
+      height: textG.height + (style.fontSize / 2) * 2 * scale,
       fill: style.backgroundColor,
@@ -234,4 +235,4 @@ originX: "center",
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -238,0 +239,0 @@ }

src/common/objects/StepCenterText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -42,8 +43,8 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
       _internal: {
-        width: width,
+        width: width * scale,
       },
@@ -167,3 +168,3 @@ shadow: style.shadow || null,
             width: infoAux.width + rectPadding.info.width,
-            height: infoAux.height + 40,
+            height: infoAux.height + 40 * scale,
           });
@@ -231,4 +232,4 @@ infoGroup.push(
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -235,0 +236,0 @@ }

src/common/objects/StepUpText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -44,5 +45,5 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
@@ -53,3 +54,3 @@ shadow: style.shadow || null,
       _internal: {
-        width: width,
+        width: width * scale,
       },
@@ -263,4 +264,4 @@ lineHeight: style.lineHeight || null,
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -267,0 +268,0 @@ }

src/common/objects/TradeMarkText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -42,8 +43,8 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
       _internal: {
-        width: width,
+        width: width * scale,
       },
@@ -167,4 +168,4 @@ lineHeight: style.lineHeight || null,
         g.item(0).set({
-          top: 12,
-          left: 12,
+          top: 12 * scale,
+          left: 12 * scale,
         });
@@ -226,4 +227,4 @@ });
         g.item(0).set({
-          top: 12,
-          left: 12,
+          top: 12 * scale,
+          left: 12 * scale,
         });
@@ -267,4 +268,4 @@ });
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -271,0 +272,0 @@ }

src/common/objects/UnderLineText.js

@@ -30,2 +30,3 @@ import { canvasText } from "../../helpers/fabric.js";
       highlightCharacter,
+      scale = 1,
     },
@@ -46,5 +47,5 @@ }) {
       backgroundColor: style.backgroundColor || "transparent",
-      padding: Number(style.padding || 24),
+      padding: Number(style.padding || 24) * scale,
       fill: style.fill || "#fff",
-      fontSize: Number(style.fontSize || 36),
+      fontSize: Number(style.fontSize || 36) * scale,
       fontFamily: style.fontFamily || "Roboto",
@@ -55,3 +56,3 @@ shadow: style.shadow || null,
       _internal: {
-        width: width,
+        width: width * scale,
       },
@@ -303,4 +304,4 @@ lineHeight: style.lineHeight || null,
     if (!newY) {
-      if (y === "top") newY = 172;
-      else if (y === "bottom") newY = _height - me.object.height - 148;
+      if (y === "top") newY = 172 * scale;
+      else if (y === "bottom") newY = _height - me.object.height - 148 * scale;
       else newY = _height / 2 - me.object.height / 2;
@@ -307,0 +308,0 @@ }

src/server/fabric/Image.js

@@ -5,48 +5,49 @@ import { v4 } from "uuid";
 const load = (path, fabric) =>
-    new Promise(resolve => {
-        fabric.Image.fromURL(path, img => resolve(img));
-    });
+  new Promise((resolve) => {
+    fabric.Image.fromURL(path, (img) => resolve(img));
+  });
 
 const drawImage = async ({
+  width: _width,
+  height: _height,
+  fabric,
+  config: { path, x, y, width, height, style, animation, scale },
+}) => {
+  const preloadImage = await load(path, fabric);
+  const image = new ImageCommon({
     width: _width,
     height: _height,
     fabric,
-    config: { path, x, y, width, height, style, animation }
-}) => {
-    const preloadImage = await load(path, fabric)
-    const image = new ImageCommon({
-        width: _width,
-        height: _height,
-        fabric,
-        config: {
-            id: v4(),
-            image: preloadImage,
-            style,
-            width,
-            height,
-            animation,
-            x,
-            y,
-        }
-    });
+    config: {
+      id: v4(),
+      image: preloadImage,
+      style,
+      width,
+      height,
+      animation,
+      x,
+      y,
+      scale,
+    },
+  });
 
-    async function onRender(progress, canvas) {
-        if (image !== null) {
-            image.addToCanvas(canvas);
-            image.animeOnce(canvas, "playing", 0);
-        }
+  async function onRender(progress, canvas) {
+    if (image !== null) {
+      image.addToCanvas(canvas);
+      image.animeOnce(canvas, "playing", 0);
     }
+  }
 
-    function onClose() { }
+  function onClose() {}
 
-    return { onRender, onClose };
+  return { onRender, onClose };
 };
 
 export default ({ start, stop, ...config }) => {
-    return {
-        type: "fabric",
-        start,
-        stop,
-        func: params => drawImage(Object.assign({}, params, { config }))
-    };
+  return {
+    type: "fabric",
+    start,
+    stop,
+    func: (params) => drawImage(Object.assign({}, params, { config })),
+  };
 };

src/server/fabric/TextStyled.js

@@ -1,22 +0,94 @@
-import BasicText from '../../common/objects/BasicText.js';
-import BoundaryText from '../../common/objects/BoundaryText.js';
-import BrushStrokeText from '../../common/objects/BrushStrokeText.js';
-import CenterLineText from '../../common/objects/CenterLineText.js';
-import CrissCrossText from '../../common/objects/CrissCrossText.js';
-import DreamMemeText from '../../common/objects/DreamMemeText.js';
-import HonorText from '../../common/objects/HonorText.js';
-import LineUpText from '../../common/objects/LineUpText.js';
-import PopOutText from '../../common/objects/PopOutText.js';
-import RollOutText from '../../common/objects/RollOutText.js';
-import SimpleCleanText from '../../common/objects/SimpleCleanText.js';
-import SolidText from '../../common/objects/SolidText.js';
-import StepCenterText from '../../common/objects/StepCenterText.js';
-import StepUpText from '../../common/objects/StepUpText.js';
-import UnderLineText from '../../common/objects/UnderLineText.js';
-import TradeMarkText from '../../common/objects/TradeMarkText.js';
-import { loadEmojis } from '../../helpers/fabric';
+import BasicText from "../../common/objects/BasicText.js";
+import BoundaryText from "../../common/objects/BoundaryText.js";
+import BrushStrokeText from "../../common/objects/BrushStrokeText.js";
+import CenterLineText from "../../common/objects/CenterLineText.js";
+import CrissCrossText from "../../common/objects/CrissCrossText.js";
+import DreamMemeText from "../../common/objects/DreamMemeText.js";
+import HonorText from "../../common/objects/HonorText.js";
+import LineUpText from "../../common/objects/LineUpText.js";
+import PopOutText from "../../common/objects/PopOutText.js";
+import RollOutText from "../../common/objects/RollOutText.js";
+import SimpleCleanText from "../../common/objects/SimpleCleanText.js";
+import SolidText from "../../common/objects/SolidText.js";
+import StepCenterText from "../../common/objects/StepCenterText.js";
+import StepUpText from "../../common/objects/StepUpText.js";
+import UnderLineText from "../../common/objects/UnderLineText.js";
+import TradeMarkText from "../../common/objects/TradeMarkText.js";
+import { loadEmojis } from "../../helpers/fabric";
 
-import { v4 } from 'uuid';
+import { v4 } from "uuid";
 
 const drawStepCenter = async ({
+  width: _width,
+  height: _height,
+  fabric,
+  config: {
+    text,
+    style,
+    width,
+    animation,
+    x,
+    y,
+    animatedByLetter,
+    type,
+    duration,
+    highlightCharacter,
+    scale,
+  },
+}) => {
+  const emojis = {};
+  const texts = text.split("\n");
+  emojis.title = await loadEmojis(fabric, texts[0] || "");
+  emojis.text = await loadEmojis(fabric, texts[1] || "");
+
+  let Type = BasicText;
+  switch (type) {
+    case "woxo-boundary":
+      Type = BoundaryText;
+      break;
+    case "woxo-brushStroke":
+      Type = BrushStrokeText;
+      break;
+    case "woxo-centerLine":
+      Type = CenterLineText;
+      break;
+    case "woxo-crissCross":
+      Type = CrissCrossText;
+      break;
+    case "woxo-dreamMeme":
+      Type = DreamMemeText;
+      break;
+    case "woxo-honor":
+      Type = HonorText;
+      break;
+    case "woxo-lineUp":
+      Type = LineUpText;
+      break;
+    case "woxo-popOut":
+      Type = PopOutText;
+      break;
+    case "woxo-rollOut":
+      Type = RollOutText;
+      break;
+    case "woxo-simpleClean":
+      Type = SimpleCleanText;
+      break;
+    case "woxo-solid":
+      Type = SolidText;
+      break;
+    case "woxo-stepCenter":
+      Type = StepCenterText;
+      break;
+    case "woxo-stepUp":
+      Type = StepUpText;
+      break;
+    case "woxo-underLine":
+      Type = UnderLineText;
+      break;
+    case "woxo-tradeMark":
+      Type = TradeMarkText;
+      break;
+  }
+
+  const textBox = new Type({
     width: _width,
@@ -26,118 +98,47 @@ height: _height,
     config: {
-        text,
-        style,
-        width,
-        animation,
-        x,
-        y,
-        animatedByLetter,
-        type,
-        duration,
-        highlightCharacter,
+      id: v4(),
+      text,
+      style,
+      width,
+      animation,
+      x,
+      y,
+      animatedByLetter,
+      emojis,
+      preloadEmoji: true,
+      highlightCharacter,
+      scale,
     },
-}) => {
-    const emojis = {};
-    const texts = text.split("\n");
-    emojis.title = await loadEmojis(fabric, texts[0] || "");
-    emojis.text = await loadEmojis(fabric, texts[1] || "");
+  });
 
-    let Type = BasicText;
-    switch (type) {
-        case 'woxo-boundary':
-            Type = BoundaryText;
-            break;
-        case 'woxo-brushStroke':
-            Type = BrushStrokeText;
-            break;
-        case 'woxo-centerLine':
-            Type = CenterLineText;
-            break;
-        case 'woxo-crissCross':
-            Type = CrissCrossText;
-            break;
-        case 'woxo-dreamMeme':
-            Type = DreamMemeText;
-            break;
-        case 'woxo-honor':
-            Type = HonorText;
-            break;
-        case 'woxo-lineUp':
-            Type = LineUpText;
-            break;
-        case 'woxo-popOut':
-            Type = PopOutText;
-            break;
-        case 'woxo-rollOut':
-            Type = RollOutText;
-            break;
-        case 'woxo-simpleClean':
-            Type = SimpleCleanText;
-            break;
-        case 'woxo-solid':
-            Type = SolidText;
-            break;
-        case 'woxo-stepCenter':
-            Type = StepCenterText;
-            break;
-        case 'woxo-stepUp':
-            Type = StepUpText;
-            break;
-        case 'woxo-underLine':
-            Type = UnderLineText;
-            break;
-        case 'woxo-tradeMark':
-            Type = TradeMarkText;
-            break;
+  async function onRender(progress, canvas) {
+    if (textBox !== null) {
+      textBox.addToCanvas(canvas);
+      textBox.animeOnce(canvas, "playing", 0);
+      textBox.progress(progress * duration);
     }
+  }
 
-    const textBox = new Type({
-        width: _width,
-        height: _height,
-        fabric,
-        config: {
-            id: v4(),
-            text,
-            style,
-            width,
-            animation,
-            x,
-            y,
-            animatedByLetter,
-            emojis,
-            preloadEmoji: true,
-            highlightCharacter
-        }
-    });
+  function onClose() {
+    // Cleanup if you initialized anything
+  }
 
-    async function onRender(progress, canvas) {
-        if (textBox !== null) {
-            textBox.addToCanvas(canvas);
-            textBox.animeOnce(canvas, "playing", 0);
-            textBox.progress(progress * duration)
-        }
-    }
-
-    function onClose() {
-        // Cleanup if you initialized anything
-    }
-
-    return {
-        onRender,
-        onClose
-    };
+  return {
+    onRender,
+    onClose,
+  };
 };
 
-export default ({
+export default ({ start, stop, ...config }) => {
+  return {
+    type: "fabric",
     start,
     stop,
-    ...config
-}) => {
-    return {
-        type: "fabric",
-        start,
-        stop,
-        func: (params) => drawStepCenter(Object.assign({}, params, {
-            config
-        })),
-    };
-};
+    func: (params) =>
+      drawStepCenter(
+        Object.assign({}, params, {
+          config,
+        })
+      ),
+  };
+};

src/ui/fabric/Image.js

@@ -53,2 +53,3 @@ import ObjectBase from "./Object";
               zIndex: me.zIndex,
+              scale: me.scale,
             },
@@ -55,0 +56,0 @@ });

src/ui/fabric/TextStyled.js

@@ -148,2 +148,3 @@ /* eslint-disable react/no-this-in-sfc */
           highlightCharacter: me.highlightCharacter,
+          scale: me.scale,
         },
@@ -150,0 +151,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

513435

increased by0.24%

Lines of code

16026

increased by0.25%

No dependency changes