fancy-canvas - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

canvas-element-bitmap-size.d.ts

 import Disposable from './disposable';
 import { Size } from './size';
 export declare type BitmapSizeChangedListener = (this: Binding, oldSize: Size, newSize: Size) => void;
-export declare type BitmapSizeTransformer = (bitmapSize: Size, canvasElementClientSize: Size) => Size;
+export declare type BitmapSizeTransformer = (bitmapSize: Size, canvasElementClientSize: Size) => {
+    width: number;
+    height: number;
+};
 export interface Binding extends Disposable {
@@ -11,3 +14,6 @@ readonly canvasElement: HTMLCanvasElement;
     readonly canvasElementClientSize: Size;
-    resizeCanvasElement(clientSize: Size): void;
+    resizeCanvasElement(clientSize: {
+        width: number;
+        height: number;
+    }): void;
     readonly bitmapSize: Size;
@@ -14,0 +20,0 @@ subscribeBitmapSizeChanged(listener: BitmapSizeChangedListener): void;

canvas-element-bitmap-size.js

@@ -1,2 +0,1 @@
-import { __awaiter, __generator } from "tslib";
 import { equalSizes, size } from './size';
@@ -6,3 +5,4 @@ import { createObservable as createDevicePixelRatioObservable } from './device-pixel-ratio';
     function DevicePixelContentBoxBinding(canvasElement, transformBitmapSize, options) {
-        var _a, _b;
+        var _a;
+        this._canvasElement = null;
         this._bitmapSizeChangedListeners = [];
@@ -14,9 +14,9 @@ // devicePixelRatio approach
         this._canvasElementResizeObserver = null;
-        this.canvasElement = canvasElement;
+        this._canvasElement = canvasElement;
         this._canvasElementClientSize = size({
-            width: this.canvasElement.clientWidth,
-            height: this.canvasElement.clientHeight,
+            width: this._canvasElement.clientWidth,
+            height: this._canvasElement.clientHeight,
         });
-        this._transformBitmapSize = (transformBitmapSize !== null && transformBitmapSize !== void 0 ? transformBitmapSize : (function (size) { return size; }));
-        this._allowResizeObserver = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.allowResizeObserver, (_b !== null && _b !== void 0 ? _b : true));
+        this._transformBitmapSize = transformBitmapSize !== null && transformBitmapSize !== void 0 ? transformBitmapSize : (function (size) { return size; });
+        this._allowResizeObserver = (_a = options === null || options === void 0 ? void 0 : options.allowResizeObserver) !== null && _a !== void 0 ? _a : true;
         this._chooseAndInitObserver();
@@ -27,10 +27,25 @@ // we MAY leave the constuctor without any bitmap size observation mechanics initialized
         var _a, _b, _c;
+        if (this._canvasElement === null) {
+            throw new Error("Object is disposed");
+        }
         (_a = this._canvasElementResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._canvasElementResizeObserver = null;
         if (this._pendingAnimationFrameRequestId > 0) {
-            (_b = this._canvasElementWindow()) === null || _b === void 0 ? void 0 : _b.cancelAnimationFrame(this._pendingAnimationFrameRequestId);
+            (_b = canvasElementWindow(this._canvasElement)) === null || _b === void 0 ? void 0 : _b.cancelAnimationFrame(this._pendingAnimationFrameRequestId);
         }
         (_c = this._devicePixelRatioObservable) === null || _c === void 0 ? void 0 : _c.dispose();
+        this._devicePixelRatioObservable = null;
         this._bitmapSizeChangedListeners.length = 0;
-        this.canvasElement = null;
+        this._canvasElement = null;
     };
+    Object.defineProperty(DevicePixelContentBoxBinding.prototype, "canvasElement", {
+        get: function () {
+            if (this._canvasElement === null) {
+                throw new Error("Object is disposed");
+            }
+            return this._canvasElement;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DevicePixelContentBoxBinding.prototype, "canvasElementClientSize", {
@@ -40,3 +55,3 @@ get: function () {
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -51,3 +66,3 @@ });
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -60,5 +75,5 @@ });
     DevicePixelContentBoxBinding.prototype.resizeCanvasElement = function (clientSize) {
-        this._canvasElementClientSize = clientSize;
-        this.canvasElement.style.width = this._canvasElementClientSize.width + "px";
-        this.canvasElement.style.height = this._canvasElementClientSize.height + "px";
+        this._canvasElementClientSize = size(clientSize);
+        this.canvasElement.style.width = "".concat(this._canvasElementClientSize.width, "px");
+        this.canvasElement.style.height = "".concat(this._canvasElementClientSize.height, "px");
         // we should use this logic only with devicePixelRatio approach
@@ -76,3 +91,3 @@ if (this._devicePixelRatioObservable !== null) {
     DevicePixelContentBoxBinding.prototype._applyNewBitmapSize = function (newSize) {
-        this._resizeBitmap(this._transformBitmapSize(newSize, this._canvasElementClientSize));
+        this._resizeBitmap(size(this._transformBitmapSize(newSize, this._canvasElementClientSize)));
     };
@@ -93,23 +108,12 @@ DevicePixelContentBoxBinding.prototype._resizeBitmap = function (newSize) {
     DevicePixelContentBoxBinding.prototype._chooseAndInitObserver = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _a = this._allowResizeObserver;
-                        if (!_a) return [3 /*break*/, 2];
-                        return [4 /*yield*/, isDevicePixelContentBoxSupported()];
-                    case 1:
-                        _a = (_b.sent());
-                        _b.label = 2;
-                    case 2:
-                        if (_a) {
-                            this._initResizeObserver();
-                        }
-                        else {
-                            this._initDevicePixelRatioObservable();
-                        }
-                        return [2 /*return*/];
-                }
-            });
+        var _this = this;
+        if (!this._allowResizeObserver) {
+            this._initDevicePixelRatioObservable();
+            return;
+        }
+        isDevicePixelContentBoxSupported()
+            .then(function (isSupported) {
+            return isSupported ?
+                _this._initResizeObserver() :
+                _this._initDevicePixelRatioObservable();
         });
@@ -120,3 +124,7 @@ };
         var _this = this;
-        var win = this._canvasElementWindow();
+        if (this._canvasElement === null) {
+            // it looks like we are already dead
+            return;
+        }
+        var win = canvasElementWindow(this._canvasElement);
         if (win == null) {
@@ -131,3 +139,7 @@ throw new Error('No window is associated with the canvas');
         var _this = this;
-        var win = this._canvasElementWindow();
+        if (this._canvasElement === null) {
+            // it looks like we are already dead
+            return;
+        }
+        var win = canvasElementWindow(this._canvasElement);
         if (win == null) {
@@ -143,3 +155,7 @@ return;
             var ratio = _this._devicePixelRatioObservable.value;
-            var canvasRects = _this.canvasElement.getClientRects();
+            if (_this._canvasElement === null) {
+                // it looks like we are already dead
+                return;
+            }
+            var canvasRects = _this._canvasElement.getClientRects();
             if (canvasRects.length === 0) {
@@ -161,13 +177,11 @@ return;
     };
-    DevicePixelContentBoxBinding.prototype._canvasElementWindow = function () {
-        // According to DOM Level 2 Core specification, ownerDocument should never be null for HTMLCanvasElement
-        // see https://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#node-ownerDoc
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return this.canvasElement.ownerDocument.defaultView;
-    };
     // ResizeObserver approach
     DevicePixelContentBoxBinding.prototype._initResizeObserver = function () {
         var _this = this;
+        if (this._canvasElement === null) {
+            // it looks like we are already dead
+            return;
+        }
         this._canvasElementResizeObserver = new ResizeObserver(function (entries) {
-            var entry = entries.find(function (entry) { return entry.target === _this.canvasElement; });
+            var entry = entries.find(function (entry) { return entry.target === _this._canvasElement; });
             if (!entry || !entry.devicePixelContentBoxSize) {
@@ -183,3 +197,3 @@ return;
         });
-        this._canvasElementResizeObserver.observe(this.canvasElement, { box: 'device-pixel-content-box' });
+        this._canvasElementResizeObserver.observe(this._canvasElement, { box: 'device-pixel-content-box' });
     };
@@ -196,2 +210,8 @@ return DevicePixelContentBoxBinding;
 }
+function canvasElementWindow(canvasElement) {
+    // According to DOM Level 2 Core specification, ownerDocument should never be null for HTMLCanvasElement
+    // see https://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#node-ownerDoc
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return canvasElement.ownerDocument.defaultView;
+}
 function isDevicePixelContentBoxSupported() {
@@ -198,0 +218,0 @@ return new Promise(function (resolve) {

device-pixel-ratio.js

@@ -18,3 +18,3 @@ var Observable = /** @class */ (function () {
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -33,3 +33,3 @@ });
         var dppx = this._window.devicePixelRatio;
-        this._resolutionMediaQueryList = this._window.matchMedia("all and (resolution: " + dppx + "dppx)");
+        this._resolutionMediaQueryList = this._window.matchMedia("all and (resolution: ".concat(dppx, "dppx)"));
         // IE and some versions of Edge do not support addEventListener/removeEventListener, and we are going to use the deprecated addListener/removeListener
@@ -36,0 +36,0 @@ this._resolutionMediaQueryList.addListener(this._resolutionListener);

package.json

 {
   "name": "fancy-canvas",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "[e-mail]",
@@ -5,0 +5,0 @@ "description": "Functionality on top of HTML canvas element, including support for HiDPI and pixel-perfect rendering",

size.d.ts

@@ -11,2 +11,8 @@ export declare type Size = Readonly<{
 }): Size;
-export declare function equalSizes(first: Size, second: Size): boolean;
+export declare function equalSizes(first: {
+    width: number;
+    height: number;
+}, second: {
+    width: number;
+    height: number;
+}): boolean;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15695

increased by5.13%

Lines of code

354

increased by10.63%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes