chore(release): Release v0.2.0, Add resize canvas on rwd

weihanchen · Apr 5, 2017 · 224e780 · 224e780
1 parent 7b79998
commit 224e780
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 12 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-screenshot",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "authors": [
     "weihanchen"
   ],

diff --git a/build/angular-screenshot.css b/build/angular-screenshot.css
@@ -1,4 +1,4 @@
-/*! Angular Screenshot - v0.1.7 - http://weihanchen.github.io/angular-screenshot - (c) 2017 weihanchen - MIT */
+/*! Angular Screenshot - v0.2.0 - http://weihanchen.github.io/angular-screenshot - (c) 2017 weihanchen - MIT */
 /* shared */
 /* components */
 .screenshot-toolbox {

diff --git a/build/angular-screenshot.js b/build/angular-screenshot.js
@@ -1,4 +1,4 @@
-/*! Angular Screenshot - v0.1.7 - http://weihanchen.github.io/angular-screenshot - (c) 2017 weihanchen - MIT */
+/*! Angular Screenshot - v0.2.0 - http://weihanchen.github.io/angular-screenshot - (c) 2017 weihanchen - MIT */
 /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -3416,7 +3416,7 @@ var _domToImage2 = _interopRequireDefault(_domToImage);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var screenshot = function screenshot() {
-   var screenshotController = function screenshotController($scope, $element, $compile, $timeout) {
+   var screenshotController = function screenshotController($scope, $element, $compile, $timeout, $window) {
       var colors = { gray: '#898b89', lightGray: '#e6e3e3' },
           hightLevelZindex = {
          top: 1,
@@ -3556,6 +3556,23 @@ var screenshot = function screenshot() {
             return self.interactiveCanvas = canvas;
          });
       };
+
+      var resizeCanvas = function resizeCanvas() {
+         if (!self.interactiveCanvas) return;
+         var elementSelector = getElementSelector();
+         var boudingClientRect = elementSelector[0].getBoundingClientRect();
+         var width = boudingClientRect.width;
+         var height = boudingClientRect.height;
+         var offset = elementSelector.offset();
+         var left = offset.left;
+         var top = offset.top;
+         self.interactiveCanvas.width = width;
+         self.interactiveCanvas.height = height;
+         _utils.domprocess.setCanvasStyle(self.interactiveCanvas, left, top, colors.gray, hightLevelZindex.second).then(function () {
+            return _utils.domprocess.remove(self.toolboxElement);
+         });
+      };
+
       /**
        *
        * @param {string} template - allow screenshot-toolbox directive setting with
@@ -3602,6 +3619,7 @@ var screenshot = function screenshot() {
          self.downloadText = newVal.downloadText ? newVal.downloadText : self.downloadText;
          self.filename = newVal.filename ? newVal.filename : self.filename;
       });
+      angular.element($window).bind('resize', resizeCanvas);
    };
    return {
       restrict: 'AE',
@@ -3611,7 +3629,7 @@ var screenshot = function screenshot() {
          toolboxOptions: '=?',
          api: '=?'
       },
-      controller: ['$scope', '$element', '$compile', '$timeout', screenshotController],
+      controller: ['$scope', '$element', '$compile', '$timeout', '$window', screenshotController],
       controllerAs: 'screenshotCtrl',
       bindToController: true
    };
@@ -3645,7 +3663,7 @@ exports.default = screenshot;
 Object.defineProperty(exports, "__esModule", {
    value: true
 });
-var DOMURL = window.URL || window.webkitURL || window;
+var DOMURL = window.URL;
 var appendToBody = function appendToBody(element) {
    document.body.appendChild(element);
    return Promise.resolve(element);

diff --git a/build/angular-screenshot.min.css b/build/angular-screenshot.min.css
diff --git a/build/angular-screenshot.min.js b/build/angular-screenshot.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-screenshot",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Angular screenshot in directive for screen capture.",
   "main": "dist/angular-screenshot.js",
   "repository": {

diff --git a/src/directives/screenshot.js b/src/directives/screenshot.js
@@ -4,7 +4,7 @@ import {
 } from '../utils';
 import domtoimage from 'dom-to-image';
 const screenshot = () => {
-   const screenshotController = function ($scope, $element, $compile, $timeout) {
+   const screenshotController = function ($scope, $element, $compile, $timeout, $window) {
       const colors = {gray: '#898b89', lightGray: '#e6e3e3'},
          hightLevelZindex = {
             top: 1,
@@ -145,6 +145,22 @@ const screenshot = () => {
             .then(canvas => domprocess.listenInteractiveCanvas(canvas, colors.lightGray, canvasMouseupListener, canvasMousedownListener, canvasContextmenuListener))
             .then(canvas => self.interactiveCanvas = canvas);
       };
+
+      const resizeCanvas = () => {
+         if (!self.interactiveCanvas) return;
+         const elementSelector = getElementSelector();
+         const boudingClientRect = elementSelector[0].getBoundingClientRect();
+         const width = boudingClientRect.width;
+         const height = boudingClientRect.height;
+         const offset = elementSelector.offset();
+         const left = offset.left;
+         const top = offset.top;
+         self.interactiveCanvas.width = width;
+         self.interactiveCanvas.height = height;
+         domprocess.setCanvasStyle(self.interactiveCanvas, left, top, colors.gray, hightLevelZindex.second)
+            .then(() => domprocess.remove(self.toolboxElement));
+      };
+
       /**
        *
        * @param {string} template - allow screenshot-toolbox directive setting with
@@ -188,6 +204,7 @@ const screenshot = () => {
          self.downloadText = newVal.downloadText ? newVal.downloadText : self.downloadText;
          self.filename = newVal.filename ? newVal.filename : self.filename;
       });
+      angular.element($window).bind('resize', resizeCanvas);
    };
    return {
       restrict: 'AE',
@@ -197,7 +214,7 @@ const screenshot = () => {
          toolboxOptions: '=?',
          api: '=?'
       },
-      controller: ['$scope', '$element', '$compile', '$timeout', screenshotController],
+      controller: ['$scope', '$element', '$compile', '$timeout', '$window', screenshotController],
       controllerAs: 'screenshotCtrl',
       bindToController: true
    };

diff --git a/test/screenshot.spec.js b/test/screenshot.spec.js
@@ -64,6 +64,14 @@ describe('screenshot directive', function () {
 
    const getChildSelector = (element, childName) => element.find(childName);
 
+   const triggerResize = () => {
+       console.log('trigger')
+      const event = document.createEvent('HTMLEvents');
+      event.initEvent('resize', true, false);
+      document.body.dispatchEvent(event);
+      return Promise.resolve();
+   };
+
    const waitFor = (timespan) => new Promise((resolve) => setTimeout(() => resolve(), timespan));
 
    describe('basic features', () => {
@@ -316,6 +324,32 @@ describe('screenshot directive', function () {
                done();
             });
       });
+
+      it('should reset position and size when resize window', (done) => {
+         //Arrange
+         scope.target = '#target';
+         scope.isOpen = true;
+         //Act/Assert
+         scope.$digest();
+         waitFor()
+            .then(() => {
+               const canvasSelector = getChildSelector(body, 'canvas');
+               return dragLeftTopToRightBottom(canvasSelector);
+            })
+            .then(() => $timeout.flush())
+            .then(() => waitFor())
+            .then(() => triggerResize())
+            .then(() => {
+               const toolboxSelector = getChildSelector(body, toolboxClass);
+               const canvasSelector = getChildSelector(body, 'canvas');
+               expect(toolboxSelector.length).toEqual(0);
+               expect(targetSelector.width()).toEqual(canvasSelector.width());
+               expect(targetSelector.height()).toEqual(canvasSelector.height());
+               expect(targetSelector.offset().top).toEqual(canvasSelector.offset().top);
+               expect(targetSelector.offset().left).toEqual(canvasSelector.offset().left);
+               done();
+            });
+      });
    });
 
    describe('custom toolbox template', () => {