fancy-canvas - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

canvas-element-bitmap-size.d.ts

@@ -1,3 +0,3 @@
-import Disposable from './disposable';
-import { Size } from './size';
+import Disposable from './disposable.js';
+import { Size } from './size.js';
 export declare type BitmapSizeChangedListener = (this: Binding, oldSize: Size, newSize: Size) => void;
@@ -8,2 +8,3 @@ export declare type BitmapSizeTransformer = (bitmapSize: Size, canvasElementClientSize: Size) => {
 };
+export declare type SuggestedBitmapSizeChangedListener = (this: Binding, oldSize: Size | null, newSize: Size | null) => void;
 export interface Binding extends Disposable {
@@ -22,2 +23,6 @@ readonly canvasElement: HTMLCanvasElement;
     unsubscribeBitmapSizeChanged(listener: BitmapSizeChangedListener): void;
+    readonly suggestedBitmapSize: Size | null;
+    subscribeSuggestedBitmapSizeChanged(listener: SuggestedBitmapSizeChangedListener): void;
+    unsubscribeSuggestedBitmapSizeChanged(listener: SuggestedBitmapSizeChangedListener): void;
+    applySuggestedBitmapSize(): void;
 }
@@ -24,0 +29,0 @@ export interface DevicePixelContentBoxBindingTargetOptions {

canvas-element-bitmap-size.js

@@ -1,3 +0,3 @@
-import { equalSizes, size } from './size';
-import { createObservable as createDevicePixelRatioObservable } from './device-pixel-ratio';
+import { equalSizes, size } from './size.js';
+import { createObservable as createDevicePixelRatioObservable } from './device-pixel-ratio.js';
 var DevicePixelContentBoxBinding = /** @class */ (function () {
@@ -8,5 +8,6 @@ function DevicePixelContentBoxBinding(canvasElement, transformBitmapSize, options) {
         this._bitmapSizeChangedListeners = [];
+        this._suggestedBitmapSize = null;
+        this._suggestedBitmapSizeChangedListeners = [];
         // devicePixelRatio approach
         this._devicePixelRatioObservable = null;
-        this._pendingAnimationFrameRequestId = 0;
         // ResizeObserver approach
@@ -25,3 +26,3 @@ this._canvasElementResizeObserver = null;
     DevicePixelContentBoxBinding.prototype.dispose = function () {
-        var _a, _b, _c;
+        var _a, _b;
         if (this._canvasElement === null) {
@@ -32,7 +33,5 @@ throw new Error("Object is disposed");
         this._canvasElementResizeObserver = null;
-        if (this._pendingAnimationFrameRequestId > 0) {
-            (_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();
+        (_b = this._devicePixelRatioObservable) === null || _b === void 0 ? void 0 : _b.dispose();
         this._devicePixelRatioObservable = null;
+        this._suggestedBitmapSizeChangedListeners.length = 0;
         this._bitmapSizeChangedListeners.length = 0;
@@ -87,5 +86,25 @@ this._canvasElement = null;
     };
-    DevicePixelContentBoxBinding.prototype._applyNewBitmapSize = function (newSize) {
-        this._resizeBitmap(size(this._transformBitmapSize(newSize, this._canvasElementClientSize)));
+    Object.defineProperty(DevicePixelContentBoxBinding.prototype, "suggestedBitmapSize", {
+        get: function () {
+            return this._suggestedBitmapSize;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DevicePixelContentBoxBinding.prototype.subscribeSuggestedBitmapSizeChanged = function (listener) {
+        this._suggestedBitmapSizeChangedListeners.push(listener);
     };
+    DevicePixelContentBoxBinding.prototype.unsubscribeSuggestedBitmapSizeChanged = function (listener) {
+        this._suggestedBitmapSizeChangedListeners = this._suggestedBitmapSizeChangedListeners.filter(function (l) { return l != listener; });
+    };
+    DevicePixelContentBoxBinding.prototype.applySuggestedBitmapSize = function () {
+        if (this._suggestedBitmapSize === null) {
+            // nothing to apply
+            return;
+        }
+        var oldSuggestedSize = this._suggestedBitmapSize;
+        this._suggestedBitmapSize = null;
+        this._resizeBitmap(oldSuggestedSize);
+        this._emitSuggestedBitmapSizeChanged(oldSuggestedSize, this._suggestedBitmapSize);
+    };
     DevicePixelContentBoxBinding.prototype._resizeBitmap = function (newSize) {
@@ -104,2 +123,20 @@ var oldSize = this.bitmapSize;
     };
+    DevicePixelContentBoxBinding.prototype._suggestNewBitmapSize = function (newSize) {
+        var oldSuggestedSize = this._suggestedBitmapSize;
+        var finalNewSize = size(this._transformBitmapSize(newSize, this._canvasElementClientSize));
+        var newSuggestedSize = equalSizes(this.bitmapSize, finalNewSize) ? null : finalNewSize;
+        if (oldSuggestedSize === null && newSuggestedSize === null) {
+            return;
+        }
+        if (oldSuggestedSize !== null && newSuggestedSize !== null
+            && equalSizes(oldSuggestedSize, newSuggestedSize)) {
+            return;
+        }
+        this._suggestedBitmapSize = newSuggestedSize;
+        this._emitSuggestedBitmapSizeChanged(oldSuggestedSize, newSuggestedSize);
+    };
+    DevicePixelContentBoxBinding.prototype._emitSuggestedBitmapSizeChanged = function (oldSize, newSize) {
+        var _this = this;
+        this._suggestedBitmapSizeChangedListeners.forEach(function (listener) { return listener.call(_this, oldSize, newSize); });
+    };
     DevicePixelContentBoxBinding.prototype._chooseAndInitObserver = function () {
@@ -134,3 +171,2 @@ var _this = this;
     DevicePixelContentBoxBinding.prototype._invalidateBitmapSize = function () {
-        var _this = this;
         if (this._canvasElement === null) {
@@ -144,29 +180,22 @@ // it looks like we are already dead
         }
-        this._pendingAnimationFrameRequestId = win.requestAnimationFrame(function () {
-            _this._pendingAnimationFrameRequestId = 0;
-            // we should use this logic only with devicePixelRatio approach
-            if (_this._devicePixelRatioObservable === null) {
-                return;
-            }
-            var ratio = _this._devicePixelRatioObservable.value;
-            if (_this._canvasElement === null) {
-                // it looks like we are already dead
-                return;
-            }
-            var canvasRects = _this._canvasElement.getClientRects();
-            if (canvasRects.length === 0) {
-                return;
-            }
-            var newSize = size({
-                width: 
-                // "guessed" size
-                Math.round(canvasRects[0].left * ratio + _this._canvasElementClientSize.width * ratio) -
-                    Math.round(canvasRects[0].left * ratio),
-                height: 
-                // "guessed" size
-                Math.round(canvasRects[0].top * ratio + _this._canvasElementClientSize.height * ratio) -
-                    Math.round(canvasRects[0].top * ratio),
-            });
-            _this._applyNewBitmapSize(newSize);
+        // we should use this logic only with devicePixelRatio approach
+        if (this._devicePixelRatioObservable === null) {
+            return;
+        }
+        var ratio = this._devicePixelRatioObservable.value;
+        var canvasRects = this._canvasElement.getClientRects();
+        if (canvasRects.length === 0) {
+            return;
+        }
+        var newSize = size({
+            width: 
+            // "guessed" size
+            Math.round(canvasRects[0].left * ratio + this._canvasElementClientSize.width * ratio) -
+                Math.round(canvasRects[0].left * ratio),
+            height: 
+            // "guessed" size
+            Math.round(canvasRects[0].top * ratio + this._canvasElementClientSize.height * ratio) -
+                Math.round(canvasRects[0].top * ratio),
         });
+        this._suggestNewBitmapSize(newSize);
     };
@@ -190,3 +219,3 @@ // ResizeObserver approach
             });
-            _this._applyNewBitmapSize(newSize);
+            _this._suggestNewBitmapSize(newSize);
         });
@@ -193,0 +222,0 @@ this._canvasElementResizeObserver.observe(this._canvasElement, { box: 'device-pixel-content-box' });

device-pixel-ratio.d.ts

@@ -1,3 +0,3 @@
-import Disposable from './disposable';
-import { BehaviorSubject } from './rx';
+import Disposable from './disposable.js';
+import { BehaviorSubject } from './rx.js';
 export declare function createObservable(win: Window): BehaviorSubject<number> & Disposable;

device-pixel-ratio.js

@@ -0,0 +0,0 @@ var Observable = /** @class */ (function () {

disposable.d.ts

 export default interface Disposable {
     dispose(): void;
 }

disposable.js

 export {};

index.d.ts

@@ -1,3 +0,3 @@
-export { default as Disposable } from './disposable';
-export { Size, size, equalSizes } from './size';
-export { Binding as CanvasElementBitmapSizeBinding, BindingTarget as CanvasElementBitmapSizeBindingTarget, BitmapSizeChangedListener, bindTo as bindCanvasElementBitmapSizeTo } from './canvas-element-bitmap-size';
+export { default as Disposable } from './disposable.js';
+export { Size, size, equalSizes } from './size.js';
+export { Binding as CanvasElementBitmapSizeBinding, BindingTarget as CanvasElementBitmapSizeBindingTarget, BitmapSizeChangedListener, bindTo as bindCanvasElementBitmapSizeTo } from './canvas-element-bitmap-size.js';

index.js

@@ -1,2 +0,2 @@
-export { size, equalSizes } from './size';
-export { bindTo as bindCanvasElementBitmapSizeTo } from './canvas-element-bitmap-size';
+export { size, equalSizes } from './size.js';
+export { bindTo as bindCanvasElementBitmapSizeTo } from './canvas-element-bitmap-size.js';

package.json

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

rx.d.ts

@@ -0,0 +0,0 @@ export interface NextObserver<T> {

rx.js

 export {};

size.d.ts

@@ -0,0 +0,0 @@ export declare type Size = Readonly<{

size.js

@@ -0,0 +0,0 @@ export function size(_a) {

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

17924

increased by14.2%

Lines of code

388

increased by9.6%

No dependency changes