@jupyterlab/imageviewer - npm Package Compare versions

Comparing version 0.16.3 to 0.17.0-0

lib/index.d.ts

 import { IInstanceTracker } from '@jupyterlab/apputils';
+import { IDocumentWidget } from '@jupyterlab/docregistry';
 import { Token } from '@phosphor/coreutils';
@@ -9,3 +10,3 @@ import { ImageViewer } from './widget';
  */
-export interface IImageTracker extends IInstanceTracker<ImageViewer> {
+export interface IImageTracker extends IInstanceTracker<IDocumentWidget<ImageViewer>> {
 }
@@ -12,0 +13,0 @@ /**

lib/index.js

@@ -8,3 +8,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var coreutils_1 = require("@phosphor/coreutils");
+const coreutils_1 = require("@phosphor/coreutils");
 require("../style/index.css");
@@ -11,0 +11,0 @@ __export(require("./widget"));

lib/widget.d.ts

@@ -1,2 +0,2 @@
-import { ABCWidgetFactory, DocumentRegistry } from '@jupyterlab/docregistry';
+import { ABCWidgetFactory, DocumentRegistry, IDocumentWidget } from '@jupyterlab/docregistry';
 import { Message } from '@phosphor/messaging';
@@ -7,3 +7,3 @@ import { Widget } from '@phosphor/widgets';
  */
-export declare class ImageViewer extends Widget implements DocumentRegistry.IReadyWidget {
+export declare class ImageViewer extends Widget {
     /**
@@ -60,11 +60,13 @@ * Construct a new image widget.
      */
-    private _onTitleChanged();
+    private _onTitleChanged;
     /**
      * Render the widget content.
      */
-    private _render();
+    private _render;
     /**
      * Update the image CSS style, including the transform and filter.
      */
-    private _updateStyle();
+    private _updateStyle;
+    private _format;
+    private _mimeType;
     private _scale;
@@ -79,7 +81,7 @@ private _matrix;
  */
-export declare class ImageViewerFactory extends ABCWidgetFactory<ImageViewer, DocumentRegistry.IModel> {
+export declare class ImageViewerFactory extends ABCWidgetFactory<IDocumentWidget<ImageViewer>> {
     /**
      * Create a new widget given a context.
      */
-    protected createNewWidget(context: DocumentRegistry.IContext<DocumentRegistry.IModel>): ImageViewer;
+    protected createNewWidget(context: DocumentRegistry.IContext<DocumentRegistry.IModel>): IDocumentWidget<ImageViewer>;
 }

lib/widget.js

 "use strict";
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var coreutils_1 = require("@jupyterlab/coreutils");
-var docregistry_1 = require("@jupyterlab/docregistry");
-var coreutils_2 = require("@phosphor/coreutils");
-var widgets_1 = require("@phosphor/widgets");
+const coreutils_1 = require("@jupyterlab/coreutils");
+const docregistry_1 = require("@jupyterlab/docregistry");
+const coreutils_2 = require("@phosphor/coreutils");
+const widgets_1 = require("@phosphor/widgets");
 /**
  * The class name added to a imageviewer.
  */
-var IMAGE_CLASS = 'jp-ImageViewer';
+const IMAGE_CLASS = 'jp-ImageViewer';
 /**
  * A widget for images.
  */
-var ImageViewer = /** @class */ (function (_super) {
-    __extends(ImageViewer, _super);
+class ImageViewer extends widgets_1.Widget {
     /**
      * Construct a new image widget.
      */
-    function ImageViewer(context) {
-        var _this = _super.call(this) || this;
-        _this._scale = 1;
-        _this._matrix = [1, 0, 0, 1];
-        _this._colorinversion = 0;
-        _this._ready = new coreutils_2.PromiseDelegate();
-        _this.context = context;
-        _this.node.tabIndex = -1;
-        _this.addClass(IMAGE_CLASS);
-        _this._img = document.createElement('img');
-        _this.node.appendChild(_this._img);
-        _this._onTitleChanged();
-        context.pathChanged.connect(_this._onTitleChanged, _this);
-        context.ready.then(function () {
-            if (_this.isDisposed) {
+    constructor(context) {
+        super();
+        this._scale = 1;
+        this._matrix = [1, 0, 0, 1];
+        this._colorinversion = 0;
+        this._ready = new coreutils_2.PromiseDelegate();
+        this.context = context;
+        this.node.tabIndex = -1;
+        this.addClass(IMAGE_CLASS);
+        this._img = document.createElement('img');
+        this.node.appendChild(this._img);
+        this._onTitleChanged();
+        context.pathChanged.connect(this._onTitleChanged, this);
+        context.ready.then(() => {
+            if (this.isDisposed) {
                 return;
             }
-            _this._render();
-            context.model.contentChanged.connect(_this.update, _this);
-            context.fileChanged.connect(_this.update, _this);
-            _this._ready.resolve(void 0);
+            const contents = context.contentsModel;
+            this._format = contents.format === 'base64' ? ';base64' : '';
+            this._mimeType = contents.mimetype;
+            this._render();
+            context.model.contentChanged.connect(this.update, this);
+            context.fileChanged.connect(this.update, this);
+            this._ready.resolve(void 0);
         });
-        return _this;
     }
-    Object.defineProperty(ImageViewer.prototype, "ready", {
-        /**
-         * A promise that resolves when the image viewer is ready.
-         */
-        get: function () {
-            return this._ready.promise;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ImageViewer.prototype, "scale", {
-        /**
-         * The scale factor for the image.
-         */
-        get: function () {
-            return this._scale;
-        },
-        set: function (value) {
-            if (value === this._scale) {
-                return;
-            }
-            this._scale = value;
-            this._updateStyle();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ImageViewer.prototype, "colorinversion", {
-        /**
-         * The color inversion of the image.
-         */
-        get: function () {
-            return this._colorinversion;
-        },
-        set: function (value) {
-            if (value === this._colorinversion) {
-                return;
-            }
-            this._colorinversion = value;
-            this._updateStyle();
-        },
-        enumerable: true,
-        configurable: true
-    });
     /**
+     * A promise that resolves when the image viewer is ready.
+     */
+    get ready() {
+        return this._ready.promise;
+    }
+    /**
+     * The scale factor for the image.
+     */
+    get scale() {
+        return this._scale;
+    }
+    set scale(value) {
+        if (value === this._scale) {
+            return;
+        }
+        this._scale = value;
+        this._updateStyle();
+    }
+    /**
+     * The color inversion of the image.
+     */
+    get colorinversion() {
+        return this._colorinversion;
+    }
+    set colorinversion(value) {
+        if (value === this._colorinversion) {
+            return;
+        }
+        this._colorinversion = value;
+        this._updateStyle();
+    }
+    /**
      * Reset rotation and flip transformations.
      */
-    ImageViewer.prototype.resetRotationFlip = function () {
+    resetRotationFlip() {
         this._matrix = [1, 0, 0, 1];
         this._updateStyle();
-    };
+    }
     /**
      * Rotate the image counter-clockwise (left).
      */
-    ImageViewer.prototype.rotateCounterclockwise = function () {
+    rotateCounterclockwise() {
         this._matrix = Private.prod(this._matrix, Private.rotateCounterclockwiseMatrix);
         this._updateStyle();
-    };
+    }
     /**
      * Rotate the image clockwise (right).
      */
-    ImageViewer.prototype.rotateClockwise = function () {
+    rotateClockwise() {
         this._matrix = Private.prod(this._matrix, Private.rotateClockwiseMatrix);
         this._updateStyle();
-    };
+    }
     /**
      * Flip the image horizontally.
      */
-    ImageViewer.prototype.flipHorizontal = function () {
+    flipHorizontal() {
         this._matrix = Private.prod(this._matrix, Private.flipHMatrix);
         this._updateStyle();
-    };
+    }
     /**
      * Flip the image vertically.
      */
-    ImageViewer.prototype.flipVertical = function () {
+    flipVertical() {
         this._matrix = Private.prod(this._matrix, Private.flipVMatrix);
         this._updateStyle();
-    };
+    }
     /**
      * Handle `update-request` messages for the widget.
      */
-    ImageViewer.prototype.onUpdateRequest = function (msg) {
+    onUpdateRequest(msg) {
         if (this.isDisposed || !this.context.isReady) {
@@ -142,39 +121,38 @@ return;
         this._render();
-    };
+    }
     /**
      * Handle `'activate-request'` messages.
      */
-    ImageViewer.prototype.onActivateRequest = function (msg) {
+    onActivateRequest(msg) {
         this.node.focus();
-    };
+    }
     /**
      * Handle a change to the title.
      */
-    ImageViewer.prototype._onTitleChanged = function () {
+    _onTitleChanged() {
         this.title.label = coreutils_1.PathExt.basename(this.context.localPath);
-    };
+    }
     /**
      * Render the widget content.
      */
-    ImageViewer.prototype._render = function () {
-        var context = this.context;
-        var cm = context.contentsModel;
+    _render() {
+        let context = this.context;
+        let cm = context.contentsModel;
         if (!cm) {
             return;
         }
-        var content = context.model.toString();
-        this._img.src = "data:" + cm.mimetype + ";" + cm.format + "," + content;
-    };
+        let content = context.model.toString();
+        this._img.src = `data:${this._mimeType}${this._format},${content}`;
+    }
     /**
      * Update the image CSS style, including the transform and filter.
      */
-    ImageViewer.prototype._updateStyle = function () {
-        var _a = this._matrix, a = _a[0], b = _a[1], c = _a[2], d = _a[3];
-        var _b = Private.prodVec(this._matrix, [1, 1]), tX = _b[0], tY = _b[1];
-        var transform = "matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0) translate(" + (tX < 0 ? -100 : 0) + "%, " + (tY < 0 ? -100 : 0) + "%) ";
-        this._img.style.transform = "scale(" + this._scale + ") " + transform;
-        this._img.style.filter = "invert(" + this._colorinversion + ")";
-    };
-    return ImageViewer;
-}(widgets_1.Widget));
+    _updateStyle() {
+        let [a, b, c, d] = this._matrix;
+        let [tX, tY] = Private.prodVec(this._matrix, [1, 1]);
+        let transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0) translate(${tX < 0 ? -100 : 0}%, ${tY < 0 ? -100 : 0}%) `;
+        this._img.style.transform = `scale(${this._scale}) ${transform}`;
+        this._img.style.filter = `invert(${this._colorinversion})`;
+    }
+}
 exports.ImageViewer = ImageViewer;
@@ -184,15 +162,12 @@ /**
  */
-var ImageViewerFactory = /** @class */ (function (_super) {
-    __extends(ImageViewerFactory, _super);
-    function ImageViewerFactory() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
+class ImageViewerFactory extends docregistry_1.ABCWidgetFactory {
     /**
      * Create a new widget given a context.
      */
-    ImageViewerFactory.prototype.createNewWidget = function (context) {
-        return new ImageViewer(context);
-    };
-    return ImageViewerFactory;
-}(docregistry_1.ABCWidgetFactory));
+    createNewWidget(context) {
+        const content = new ImageViewer(context);
+        const widget = new docregistry_1.DocumentWidget({ content, context });
+        return widget;
+    }
+}
 exports.ImageViewerFactory = ImageViewerFactory;
@@ -207,5 +182,3 @@ /**
      */
-    function prod(_a, _b) {
-        var a11 = _a[0], a12 = _a[1], a21 = _a[2], a22 = _a[3];
-        var b11 = _b[0], b12 = _b[1], b21 = _b[2], b22 = _b[3];
+    function prod([a11, a12, a21, a22], [b11, b12, b21, b22]) {
         return [a11 * b11 + a12 * b21, a11 * b12 + a12 * b22,
@@ -218,5 +191,3 @@ a21 * b11 + a22 * b21, a21 * b12 + a22 * b22];
      */
-    function prodVec(_a, _b) {
-        var a11 = _a[0], a12 = _a[1], a21 = _a[2], a22 = _a[3];
-        var b1 = _b[0], b2 = _b[1];
+    function prodVec([a11, a12, a21, a22], [b1, b2]) {
         return [a11 * b1 + a12 * b2, a21 * b1 + a22 * b2];
@@ -223,0 +194,0 @@ }

package.json

 {
   "name": "@jupyterlab/imageviewer",
-  "version": "0.16.3",
+  "version": "0.17.0-0",
   "description": "JupyterLab - Image Widget",
@@ -30,16 +30,16 @@ "homepage": "https://github.com/jupyterlab/jupyterlab",
     "prepublishOnly": "npm run build",
-    "watch": "tsc -w"
+    "watch": "tsc -w --listEmittedFiles"
   },
   "dependencies": {
-    "@jupyterlab/apputils": "^0.16.4",
-    "@jupyterlab/coreutils": "^1.1.3",
-    "@jupyterlab/docregistry": "^0.16.3",
+    "@jupyterlab/apputils": "^0.17.0-0",
+    "@jupyterlab/coreutils": "^2.0.0-0",
+    "@jupyterlab/docregistry": "^0.17.0-0",
     "@phosphor/coreutils": "^1.3.0",
     "@phosphor/messaging": "^1.2.2",
-    "@phosphor/widgets": "^1.5.0"
+    "@phosphor/widgets": "^1.6.0"
   },
   "devDependencies": {
     "rimraf": "~2.6.2",
-    "typescript": "~2.6.2"
+    "typescript": "~2.9.2"
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

23244

decreased by-6.09%

Lines of code

334

decreased by-9.49%

Dependency changes

• + Added@jupyterlab/apputils@0.17.2(transitive)

• + Added@jupyterlab/codeeditor@0.17.2(transitive)

• + Added@jupyterlab/codemirror@0.17.3(transitive)

• + Added@jupyterlab/coreutils@2.2.1(transitive)

• + Added@jupyterlab/docregistry@0.17.2(transitive)

• + Added@jupyterlab/observables@2.4.0(transitive)

• + Added@jupyterlab/rendermime@0.17.3(transitive)

• + Added@jupyterlab/services@3.2.1(transitive)

• + Addedcodemirror@5.39.2(transitive)

• + Addedmarked@0.4.0(transitive)

• + Addedquerystringify@2.2.0(transitive)

• + Addedreact@16.4.2(transitive)

• + Addedreact-dom@16.4.2(transitive)

• + Addedurl-parse@1.4.7(transitive)

• - Removed@jupyterlab/apputils@0.16.4(transitive)

• - Removed@jupyterlab/codeeditor@0.16.2(transitive)

• - Removed@jupyterlab/codemirror@0.16.3(transitive)

• - Removed@jupyterlab/coreutils@1.1.3(transitive)

• - Removed@jupyterlab/docregistry@0.16.3(transitive)

• - Removed@jupyterlab/observables@1.0.10(transitive)

• - Removed@jupyterlab/rendermime@0.16.3(transitive)

• - Removed@jupyterlab/services@2.0.3(transitive)

• - Removedcodemirror@5.35.0(transitive)

• - Removedmarked@0.3.19(transitive)

• - Removedoptions@0.0.6(transitive)

• - Removedquerystringify@1.0.0(transitive)

• - Removedreact@16.2.0(transitive)

• - Removedreact-dom@16.2.1(transitive)

• - Removedultron@1.0.2(transitive)

• - Removedurl-parse@1.1.9(transitive)

• - Removedws@1.1.5(transitive)

• Updated@jupyterlab/apputils@^0.17.0-0

• Updated@jupyterlab/coreutils@^2.0.0-0

• Updated@jupyterlab/docregistry@^0.17.0-0

• Updated@phosphor/widgets@^1.6.0