canvideo - npm Package Compare versions

Comparing version 4.2.2 to 4.3.0

index.d.ts

@@ -20,2 +20,3 @@ import fs = require('fs');
     type nonNegativeNumber = number;
+    type positiveNumber = number;
     type coordinate = [ number, number ];
@@ -38,2 +39,7 @@
     }
+    interface CameraAttributes {
+        x: number;
+        y: number;
+        zoom: positiveNumber;
+    }
     interface ShapeAttributes {
@@ -86,18 +92,19 @@ fillColor: Color;
 
-    export class Animation {
-        constructor(startValue: number, endValue: number);
+    export class Animation<Attributes> {
+        constructor(startValue: Attributes, endValue: Attributes);
 
         reverse(): this;
-        calculate(percentage: number): void;
+        calculate(percentage: number): Attributes;
         last(): this;
     }
 
-    export class Animanager<Attributes>{
-        constructor(defaultValue: object, setVideo: (video: Video) => void);
+    export class Animanager<Attributes extends Object>{
+        constructor(defaultValue: object, setVideo?: (video: Video) => void);
 
         video: Video;
         defaultValue: Attributes;
+        extendUntil: nonNegativeNumber;
 
-        animate(startTime: number, endTime: number, value: (percentage: number) => Attributes | Animation): this;
-        setAt(startTime: number, value: Attributes): this;
+        animate(startTime: nonNegativeNumber, endTime: nonNegativeNumber, value: (percentage: nonNegativeNumber) => Attributes | Animation<Attributes>): this;
+        setAt(startTime: nonNegativeNumber, value: Attributes): this;
         valueAt(frameNumber: number): Attributes;
@@ -120,3 +127,3 @@ }
         inLayer(layer: nonNegativeInteger): this;
-        draw(ctx: canvas.CanvasRenderingContext2D): this;
+        draw(ctx: canvas.CanvasRenderingContext2D, value: Attributes): this;
     }
@@ -131,2 +138,4 @@
         height: number;
+
+        draw(ctx: canvas.CanvasRenderingContext2D, value: RectangleAttributes): this;
     }
@@ -140,2 +149,4 @@
         size: number;
+
+        draw(ctx: canvas.CanvasRenderingContext2D, value: RectangleAttributes): this;
     }
@@ -158,2 +169,4 @@
         points: Array<Point>;
+
+        draw(ctx: canvas.CanvasRenderingContext2D, value: RectangleAttributes): this;
     }
@@ -203,2 +216,4 @@
         fps: number;
+        lastUntil: nonNegativeNumber;
+        camera: Animanager<CameraAttributes>;
 
@@ -205,0 +220,0 @@ get spf(): number;

index.js

@@ -237,3 +237,3 @@ //Main file
     constructor(defaultValue, setVideo) {
-        if (typeof defaultValue === 'object' && typeof setVideo === 'function') {
+        if (typeof defaultValue === 'object') {
             this.defaultValue = defaultValue;
@@ -244,3 +244,12 @@ this.changes = new Map();
             this.currentAnimations = [];
+            if(typeof setVideo === 'function'){
             this.setVideo = setVideo;
+            }
+            else if(typeof setVideo === 'undefined'){
+                this.setVideo = function(value){};
+            }
+            else{
+                throw new TypeError("Invalid constructor.");
+            }
+            this._extendUntil = 0;
         }
@@ -257,2 +266,3 @@ else {
                 var { startTime, endTime, value, isAnimationClass } = this.currentAnimations[i];
+                this.video.extendUntil = endTime;
                 var startFrame = this.video.frameAtTime(startTime), endFrame = this.video.frameAtTime(endTime);
@@ -301,2 +311,13 @@ var animation = {
     }
+    set extendUntil(value){
+        if(typeof value === 'number'){
+            this._extendUntil = Math.max(this._extendUntil, value);
+        }
+        else{
+            throw new TypeError("extendUntil time must be a number (in seconds).");
+        }
+    }
+    get extendUntil(){
+        return this._extendUntil;
+    }
 
@@ -433,9 +454,2 @@ animate(startTime, endTime, value) {
         this.deleteTime = Infinity;
-        this._draw = new helper.ExtendibleFunction();
-        this.draw = function (ctx, frameNumber) {
-            var value = this.valueAt(frameNumber);
-            ctx.fillStyle = value.fillColor.toString();
-            ctx.strokeStyle = value.strokeColor.toString();
-            ctx.strokeWidth = value.strokeWidth;
-        }
     };
@@ -449,8 +463,2 @@
     }
-    set draw(value) {
-        this._draw.action = value.bind(this);
-    }
-    get draw() {
-        return this._draw.action;
-    }
     set fillColor(value) {
@@ -475,2 +483,7 @@ this.defaultValue.fillColor = value;
 
+    draw(ctx, value) {
+        ctx.fillStyle = value.fillColor.toString();
+        ctx.strokeStyle = value.strokeColor.toString();
+        ctx.strokeWidth = value.strokeWidth;
+    }
     setDeleteTime(time) {
@@ -558,10 +571,2 @@ if (typeof time === 'number') {
         this.height = height;
-        this.draw = function (ctx, frameNumber) {
-            var value = this.valueAt(frameNumber);
-            ctx.fillRect(value.x, value.y, value.width, value.height);
-            if (this.strokeWidth > 0) {
-                ctx.strokeRect(value.x, value.y, value.width, value.height);
-            }
-            return this;
-        };
     }
@@ -593,2 +598,11 @@
     }
+
+    draw(ctx, value) {
+        super.draw(ctx, value)
+        ctx.fillRect(value.x, value.y, value.width, value.height);
+        if (this.strokeWidth > 0) {
+            ctx.strokeRect(value.x, value.y, value.width, value.height);
+        }
+        return this;
+    };
 }
@@ -640,10 +654,2 @@
         this.size = size;
-        this.draw = function (ctx, frameNumber) {
-            var value = this.valueAt(frameNumber);
-            ctx.fillRect(value.x, value.y, value.size, value.size);
-            if (this.strokeWidth > 0) {
-                ctx.strokeRect(value.x, value.y, value.size, value.size);
-            }
-            return this;
-        };
     }
@@ -669,2 +675,11 @@
     }
+
+    draw(ctx, value) {
+        super.draw(ctx, value);
+        ctx.fillRect(value.x, value.y, value.size, value.size);
+        if (this.strokeWidth > 0) {
+            ctx.strokeRect(value.x, value.y, value.size, value.size);
+        }
+        return this;
+    };
 }
@@ -799,13 +814,2 @@
         this.points = points;
-        this.draw = function (ctx, frameNumber) {
-            var value = this.valueAt(frameNumber);
-            ctx.beginPath();
-            ctx.moveTo(value.points[0].x, value.points[0].y);
-            for (var i = 1; i < value.points.length; i++) {
-                ctx.lineTo(value.points[i].x, value.points[i].y);
-            }
-            ctx.closePath();
-            ctx.fill();
-            ctx.stroke();
-        }
     }
@@ -819,2 +823,14 @@
     }
+
+    draw(ctx, value) {
+        super.draw(ctx, value);
+        ctx.beginPath();
+        ctx.moveTo(value.points[0].x, value.points[0].y);
+        for (var i = 1; i < value.points.length; i++) {
+            ctx.lineTo(value.points[i].x, value.points[i].y);
+        }
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+    }
 }
@@ -832,2 +848,3 @@
         this.shapes = [];
+        this._extendUntil = 0;
     }
@@ -859,2 +876,13 @@ set video(value) {
     }
+    set extendUntil(value){
+        if(typeof value === 'number'){
+            this._extendUntil = Math.max(this._extendUntil, value);
+        }
+        else{
+            throw new TypeError("extendUntil time must be a number (in seconds).");
+        }
+    }
+    get extendUntil(){
+        return this._extendUntil;
+    }
 
@@ -892,3 +920,2 @@ addShape(shape) {
                     else {
-                        console.log(shapes, this.frameNumber)
                         throw new TypeError(`shapes[${i}] is not a Shape.`);
@@ -907,4 +934,8 @@ }
             var ctx = canvas.getContext('2d');
+            //Set stuff based on camera
+            var camera = this.video.camera.valueAt(this.frameNumber);
+            ctx.translate(-camera.x, -camera.y);
+            ctx.scale(camera.zoom, camera.zoom);
             for (var i = 0; i < shapesToRender.length; i++) {
-                shapesToRender[i].draw(ctx, this.frameNumber);
+                shapesToRender[i].draw(ctx, shapesToRender[i].valueAt(this.frameNumber), camera);
             }
@@ -990,3 +1021,2 @@ var framePath = this.video.tempPath + "/frame" + this.frameNumber + ".jpg";
             else {
-                console.log("none")
                 return false;
@@ -1014,2 +1044,41 @@ }
         this.exported = false;
+        this._extendUntil = 0;
+        this.camera = new canvideo.Animanager({
+            _x: 0,
+            set x(value){
+                if(typeof value === 'number'){
+                    this._x = value;
+                }
+                else{
+                    throw new TypeError("x must be a numbe");
+                }
+            },
+            get x(){
+                return this._x;
+            },
+            _y: 0,
+            set y(value){
+                if(typeof value === 'number'){
+                    this._y = value;
+                }
+                else{
+                    throw new TypeError("y must be a numbe");
+                }
+            },
+            get y(){
+                return this._y;
+            },
+            _zoom: 1,
+            set zoom(value){
+                if(typeof value === 'number' && value > 0){
+                    this._zoom = value;
+                }
+                else{
+                    throw new TypeError("zoom must be a number greater than 0.");
+                }
+            },
+            get zoom(){
+                return this._zoom;
+            }
+        });
 
@@ -1048,2 +1117,13 @@ this.command = ffmpeg();
     }
+    set extendUntil(value){
+        if(typeof value === 'number'){
+            this._extendUntil = Math.max(this._extendUntil, value);
+        }
+        else{
+            throw new TypeError("extendUntil time must be a number (in seconds).");
+        }
+    }
+    get extendUntil(){
+        return this._extendUntil;
+    }
 
@@ -1087,2 +1167,5 @@ addKeyframe(keyframe) {
 
+        //Set camera's video
+        this.camera.video = this;
+
         //Make sure there is a keyframe at 0 seconds
@@ -1100,2 +1183,7 @@ if (!(this.keyframes[0] instanceof canvideo.Keyframe)) {
 
+        //Extend video further than last keyframe to render animations
+        while(this.keyframes.length < this.extendUntil * this.fps){
+            this.addKeyframe(new canvideo.Keyframe(this.keyframes.length * this.spf));
+        }
+
         //Render the first frame
@@ -1102,0 +1190,0 @@ this.keyframes[0].render();

package.json

 {
   "name": "canvideo",
-  "version": "4.2.2",
+  "version": "4.3.0",
   "description": "\u0016\u0016An open-source tool for Node.js that can make animations and generate videos.",
@@ -5,0 +5,0 @@ "main": "index.js",

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 2 instances 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

2538170

increased by15.76%

Number of package files

199

increased by34.46%

Lines of code

1735

increased by7.16%

Worsened metrics

Number of medium supply chain risk alerts

9

increased by28.57%

No dependency changes