@behance/helicropter - npm Package Compare versions

Comparing version 15.6.0 to 15.6.1

package.json

 {
   "name": "@behance/helicropter",
-  "version": "15.6.0",
+  "version": "15.6.1",
   "description": "My helicropter goes \"whosh whosh whosh\"",
@@ -5,0 +5,0 @@ "main": "src/js/index.js",

src/js/CroppingArea.js

@@ -217,2 +217,7 @@ import View from '@behance/beff/View';
   _createBackground() {
+    if (this._backgroundLayer) {
+      this._backgroundLayer.remove();
+      this._backgroundLayer = null;
+    }
+
     switch (this._model.backgroundType) {
@@ -303,3 +308,3 @@ case 'solid':
       .then((image) => {
-        const backgroundImage = new fabric.Image(image, {
+        this._backgroundLayer = new fabric.Image(image, {
           left: 0,
@@ -314,17 +319,17 @@ top: 0,
 
-        this._backgroundCanvas.add(backgroundImage);
+        this._backgroundCanvas.add(this._backgroundLayer);
 
-        backgroundImage.canvas.contextContainer.filter = 'blur(70px) brightness(.8)';
+        this._backgroundLayer.canvas.contextContainer.filter = 'blur(70px) brightness(.8)';
 
-        const isLandscape = backgroundImage.width > backgroundImage.height;
+        const isLandscape = this._backgroundLayer.width > this._backgroundLayer.height;
 
         if (isLandscape) {
-          backgroundImage.scaleToHeight(this._canvas.height);
+          this._backgroundLayer.scaleToHeight(this._canvas.height);
         }
         else {
-          backgroundImage.scaleToWidth(this._canvas.width);
+          this._backgroundLayer.scaleToWidth(this._canvas.width);
         }
 
-        backgroundImage.sendToBack();
-        backgroundImage.center();
+        this._backgroundLayer.sendToBack();
+        this._backgroundLayer.center();
 
@@ -337,3 +342,3 @@ this._scaleView({ $el: this.$backgroundContainer, scale: this.scale });
     return new Promise(resolve => {
-      const solidRect = new fabric.Rect({
+      this._backgroundLayer = new fabric.Rect({
         left: 0,
@@ -350,4 +355,4 @@ top: 0,
 
-      this._canvas.add(solidRect);
-      solidRect.sendToBack();
+      this._canvas.add(this._backgroundLayer);
+      this._backgroundLayer.sendToBack();
 
@@ -366,3 +371,3 @@ resolve();
 
-        const patternRect = new fabric.Rect({
+        this._backgroundLayer = new fabric.Rect({
           left: 0,
@@ -379,6 +384,6 @@ top: 0,
 
-        this._canvas.add(patternRect);
-        patternRect.sendToBack();
-        patternRect.scale(0.5).setCoords();
-        patternRect.center().setCoords();
+        this._canvas.add(this._backgroundLayer);
+        this._backgroundLayer.sendToBack();
+        this._backgroundLayer.scale(0.5).setCoords();
+        this._backgroundLayer.center().setCoords();
       });
@@ -385,0 +390,0 @@ },

test/specs/CroppingArea.js

@@ -87,112 +87,132 @@ import CroppingArea from 'CroppingArea';
 
-  describe('allowLetterboxing', function() {
-    it('locks vertical pan when it is true and there is no room to pan vertically', function(done) {
-      this.loadImage({ allowLetterboxing: true }).then(() => {
-        spyOn(this.croppingArea._cropArea, 'get').and.callFake((arg) => {
-          return {
-            top: 100,
-          }[arg];
+  describe('events', function() {
+    describe('set-image', function() {
+      it('redraws the background layer when the cropper is loaded with an image', function(done) {
+        const oldLayer = 'bglayer';
+        this.croppingArea._backgroundLayer = {
+          remove: () => {},
+        };
+
+        this.croppingArea.on('background-loaded', () => {
+          expect(this.croppingArea._backgroundLayer).not.toEqual(oldLayer);
+          done();
         });
 
-        this.croppingArea.trigger('scale', .5);
-
-        expect(this.croppingArea._image.lockMovementY).toEqual(true);
-
-        done();
+        this.croppingArea.trigger('set-image', images.flower, {});
       });
     });
+  });
 
-    it('unlocks vertical pan when it is true and there is room to pan vertically', function(done) {
-      this.loadImage({ allowLetterboxing: true }).then(() => {
-        spyOn(this.croppingArea._cropArea, 'get').and.callFake((arg) => {
-          return {
-            top: -100,
-          }[arg];
-        });
+  describe('models', function() {
+    describe('allowLetterboxing', function() {
+      it('locks vertical pan when it is true and there is no room to pan vertically', function(done) {
+        this.loadImage({ allowLetterboxing: true }).then(() => {
+          spyOn(this.croppingArea._cropArea, 'get').and.callFake((arg) => {
+            return {
+              top: 100,
+            }[arg];
+          });
 
-        this.croppingArea.trigger('scale', .5);
+          this.croppingArea.trigger('scale', .5);
 
-        expect(this.croppingArea._image.lockMovementY).toEqual(false);
+          expect(this.croppingArea._image.lockMovementY).toEqual(true);
 
-        done();
+          done();
+        });
       });
-    });
 
-    it('locks horizontal pan when it is true and there is no room to pan horizontally', function(done) {
-      this.loadImage({ allowLetterboxing: true }).then(() => {
-        spyOn(this.croppingArea._cropArea, 'get').and.callFake((arg) => {
-          return {
-            left: 500,
-          }[arg];
-        });
+      it('unlocks vertical pan when it is true and there is room to pan vertically', function(done) {
+        this.loadImage({ allowLetterboxing: true }).then(() => {
+          spyOn(this.croppingArea._cropArea, 'get').and.callFake((arg) => {
+            return {
+              top: -100,
+            }[arg];
+          });
 
-        this.croppingArea.trigger('scale', .5);
+          this.croppingArea.trigger('scale', .5);
 
-        expect(this.croppingArea._image.lockMovementX).toEqual(true);
+          expect(this.croppingArea._image.lockMovementY).toEqual(false);
 
-        done();
+          done();
+        });
       });
-    });
 
-    it('unlocks horizontal pan when it is true and there is room to pan horizontally', function(done) {
-      this.loadImage({ allowLetterboxing: true }).then(() => {
-        spyOn(this.croppingArea._cropArea, 'get').and.callFake((arg) => {
-          return {
-            left: -500,
-          }[arg];
-        });
+      it('locks horizontal pan when it is true and there is no room to pan horizontally', function(done) {
+        this.loadImage({ allowLetterboxing: true }).then(() => {
+          spyOn(this.croppingArea._cropArea, 'get').and.callFake((arg) => {
+            return {
+              left: 500,
+            }[arg];
+          });
 
-        this.croppingArea.trigger('scale', .5);
+          this.croppingArea.trigger('scale', .5);
 
-        expect(this.croppingArea._image.lockMovementX).toEqual(false);
+          expect(this.croppingArea._image.lockMovementX).toEqual(true);
 
-        done();
+          done();
+        });
       });
-    });
-  });
 
-  describe('backgroundType', function() {
-    beforeEach(function() {
-      this.createCroppingAreaWithBackground = (backgroundType, data = {}) => {
-        return new Promise(resolve => {
-          this.croppingArea = createCroppingArea(this.$el, {
-            backgroundType,
-            ...data,
+      it('unlocks horizontal pan when it is true and there is room to pan horizontally', function(done) {
+        this.loadImage({ allowLetterboxing: true }).then(() => {
+          spyOn(this.croppingArea._cropArea, 'get').and.callFake((arg) => {
+            return {
+              left: -500,
+            }[arg];
           });
 
-          spyOn(this.croppingArea, '_createSolidBackground').and.callThrough();
-          spyOn(this.croppingArea, '_createTransparencyBackground').and.callThrough();
+          this.croppingArea.trigger('scale', .5);
 
-          this.croppingArea.trigger('set-image', images.flower, {});
+          expect(this.croppingArea._image.lockMovementX).toEqual(false);
 
-          this.croppingArea.on('background-loaded', resolve);
+          done();
         });
-      };
+      });
     });
 
-    it('generates image background when it is "image"', function(done) {
-      this.createCroppingAreaWithBackground('image').then(() => {
-        expect(this.croppingArea._backgroundCanvas).toExist();
-        expect(this.croppingArea._backgroundCanvas.contextContainer.filter).toEqual('blur(70px) brightness(.8)');
-        done();
+    describe('backgroundType', function() {
+      beforeEach(function() {
+        this.createCroppingAreaWithBackground = (backgroundType, data = {}) => {
+          return new Promise(resolve => {
+            this.croppingArea = createCroppingArea(this.$el, {
+              backgroundType,
+              ...data,
+            });
+
+            spyOn(this.croppingArea, '_createSolidBackground').and.callThrough();
+            spyOn(this.croppingArea, '_createTransparencyBackground').and.callThrough();
+
+            this.croppingArea.trigger('set-image', images.flower, {});
+
+            this.croppingArea.on('background-loaded', resolve);
+          });
+        };
       });
-    });
 
-    it('generates solid color background when it is "solid"', function(done) {
-      const backgroundHex = '#000000';
+      it('generates image background when it is "image"', function(done) {
+        this.createCroppingAreaWithBackground('image').then(() => {
+          expect(this.croppingArea._backgroundCanvas).toExist();
+          expect(this.croppingArea._backgroundCanvas.contextContainer.filter).toEqual('blur(70px) brightness(.8)');
+          done();
+        });
+      });
 
-      this.createCroppingAreaWithBackground('solid', {
-        backgroundHex,
-        canvasWidth: 100,
-        canvasHeight: 100,
-      }).then(() => {
-        expect(this.croppingArea._createSolidBackground).toHaveBeenCalled();
-        done();
+      it('generates solid color background when it is "solid"', function(done) {
+        const backgroundHex = '#000000';
+
+        this.createCroppingAreaWithBackground('solid', {
+          backgroundHex,
+          canvasWidth: 100,
+          canvasHeight: 100,
+        }).then(() => {
+          expect(this.croppingArea._createSolidBackground).toHaveBeenCalled();
+          done();
+        });
       });
-    });
 
-    it('generates transparency background when it is not set', function(done) {
-      this.createCroppingAreaWithBackground(null).then(() => {
-        expect(this.croppingArea._createTransparencyBackground).toHaveBeenCalled();
-        done();
+      it('generates transparency background when it is not set', function(done) {
+        this.createCroppingAreaWithBackground(null).then(() => {
+          expect(this.croppingArea._createTransparencyBackground).toHaveBeenCalled();
+          done();
+        });
       });
@@ -199,0 +219,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

8697395

increased by0.01%

Lines of code

4930

increased by0.43%

No dependency changes