ngx-image-cropper - npm Package Compare versions

Comparing version 0.1.9 to 0.1.11

bundles/ngx-image-cropper.umd.js

@@ -38,2 +38,3 @@ (function (global, factory) {
         };
+        this.imgDataUrl = 'data:image/png;base64,iVBORw0KGg' + 'oAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAU' + 'AAarVyFEAAAAASUVORK5CYII=';
         this.imageVisible = false;
@@ -101,3 +102,3 @@ this.format = 'png';
                     _this.imageVisible = true;
-                }, 0);
+                }, 1);
             }
@@ -175,4 +176,6 @@ else {
     ImageCropperComponent.prototype.moveStop = function () {
-        this.moveStart.active = false;
-        this.crop();
+        if (this.moveStart.active) {
+            this.moveStart.active = false;
+            this.crop();
+        }
     };
@@ -326,3 +329,3 @@ /**
                 selector: 'image-cropper',
-                template: "\n      <div>\n          <img\n              *ngIf=\"imgDataUrl\"\n              [src]=\"imgDataUrl\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n              class=\"source-image\"\n              style=\"width: 100%\"\n          />\n          <div class=\"cropper\"\n              [style.top.px]=\"cropper.y1\"\n              [style.left.px]=\"cropper.x1\"\n              [style.width.px]=\"cropper.x2 - cropper.x1\"\n              [style.height.px]=\"cropper.y2 - cropper.y1\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n          >\n              <div\n                  (mousedown)=\"startMove($event, 'move')\"\n                  class=\"move\"\n              >&nbsp;</div>\n              <span\n                  class=\"resize topleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'topleft')\"\n              ></span>\n              <span\n                  class=\"resize top\"\n              ></span>\n              <span\n                  class=\"resize topright\"\n                  (mousedown)=\"startMove($event, 'resize', 'topright')\"\n              ></span>\n              <span\n                  class=\"resize right\"\n              ></span>\n              <span\n                  class=\"resize bottomright\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomright')\"\n              ></span>\n              <span\n                  class=\"resize bottom\"\n              ></span>\n              <span\n                  class=\"resize bottomleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomleft')\"\n              ></span>\n              <span\n                  class=\"resize left\"\n              ></span>\n              <span\n                  class=\"resize-bar top\"\n                  (mousedown)=\"startMove($event, 'resize', 'top')\"\n              ></span>\n              <span\n                  class=\"resize-bar right\"\n                  (mousedown)=\"startMove($event, 'resize', 'right')\"\n              ></span>\n              <span\n                  class=\"resize-bar bottom\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottom')\"\n              ></span>\n              <span\n                  class=\"resize-bar left\"\n                  (mousedown)=\"startMove($event, 'resize', 'left')\"\n              ></span>\n          </div>\n      </div>\n    ",
+                template: "\n      <div>\n          <img\n              [src]=\"imgDataUrl\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n              class=\"source-image\"\n              style=\"width: 100%\"\n          />\n          <div class=\"cropper\"\n              [style.top.px]=\"cropper.y1\"\n              [style.left.px]=\"cropper.x1\"\n              [style.width.px]=\"cropper.x2 - cropper.x1\"\n              [style.height.px]=\"cropper.y2 - cropper.y1\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n          >\n              <div\n                  (mousedown)=\"startMove($event, 'move')\"\n                  class=\"move\"\n              >&nbsp;</div>\n              <span\n                  class=\"resize topleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'topleft')\"\n              ></span>\n              <span\n                  class=\"resize top\"\n              ></span>\n              <span\n                  class=\"resize topright\"\n                  (mousedown)=\"startMove($event, 'resize', 'topright')\"\n              ></span>\n              <span\n                  class=\"resize right\"\n              ></span>\n              <span\n                  class=\"resize bottomright\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomright')\"\n              ></span>\n              <span\n                  class=\"resize bottom\"\n              ></span>\n              <span\n                  class=\"resize bottomleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomleft')\"\n              ></span>\n              <span\n                  class=\"resize left\"\n              ></span>\n              <span\n                  class=\"resize-bar top\"\n                  (mousedown)=\"startMove($event, 'resize', 'top')\"\n              ></span>\n              <span\n                  class=\"resize-bar right\"\n                  (mousedown)=\"startMove($event, 'resize', 'right')\"\n              ></span>\n              <span\n                  class=\"resize-bar bottom\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottom')\"\n              ></span>\n              <span\n                  class=\"resize-bar left\"\n                  (mousedown)=\"startMove($event, 'resize', 'left')\"\n              ></span>\n          </div>\n      </div>\n    ",
                 styles: ["\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        overflow: hidden;\n        padding: 5px;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none; }\n        :host > div {\n          position: relative; }\n        :host .cropper {\n          position: absolute;\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          color: #53535C !important;\n          background: transparent !important;\n          outline-color: rgba(255, 255, 255, 0.3);\n          outline-width: 1000px;\n          outline-style: solid; }\n          :host .cropper img {\n            width: inherit;\n            height: inherit;\n            cursor: move; }\n          :host .cropper:after {\n            position: absolute;\n            content: '';\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            pointer-events: none;\n            border: dashed 1px;\n            opacity: .75;\n            color: inherit;\n            z-index: 1; }\n          :host .cropper .move {\n            width: 100%;\n            height: 100%;\n            cursor: move;\n            border: 1px solid rgba(255, 255, 255, 0.5); }\n          :host .cropper .resize {\n            position: absolute;\n            background: #53535C; }\n            :host .cropper .resize.topleft {\n              top: -5px;\n              left: -5px;\n              cursor: nw-resize; }\n            :host .cropper .resize.top {\n              top: -5px;\n              left: calc(50% - 5px);\n              cursor: n-resize; }\n            :host .cropper .resize.topright {\n              top: -5px;\n              right: 5px;\n              cursor: ne-resize; }\n            :host .cropper .resize.right {\n              top: calc(50% - 5px);\n              right: 5px;\n              cursor: e-resize; }\n            :host .cropper .resize.bottomright {\n              bottom: 5px;\n              right: 5px;\n              cursor: se-resize; }\n            :host .cropper .resize.bottom {\n              bottom: 5px;\n              left: calc(50% - 5px);\n              cursor: s-resize; }\n            :host .cropper .resize.bottomleft {\n              bottom: 5px;\n              left: -5px;\n              cursor: sw-resize; }\n            :host .cropper .resize.left {\n              top: calc(50% - 5px);\n              left: -5px;\n              cursor: w-resize; }\n            :host .cropper .resize:after {\n              position: absolute;\n              background: inherit;\n              border: 1px solid rgba(255, 255, 255, 0.5);\n              content: '';\n              width: 8px;\n              height: 8px;\n              margin: auto;\n              opacity: .85;\n              z-index: 1; }\n          :host .cropper .resize-bar {\n            position: absolute;\n            z-index: 1; }\n            :host .cropper .resize-bar.top {\n              top: -5px;\n              left: 5px;\n              width: calc(100% - 10px);\n              height: 10px;\n              cursor: n-resize; }\n            :host .cropper .resize-bar.right {\n              top: 5px;\n              right: -5px;\n              height: calc(100% - 10px);\n              width: 10px;\n              cursor: e-resize; }\n            :host .cropper .resize-bar.bottom {\n              bottom: -5px;\n              left: 5px;\n              width: calc(100% - 10px);\n              height: 10px;\n              cursor: s-resize; }\n            :host .cropper .resize-bar.left {\n              top: 5px;\n              left: -5px;\n              height: calc(100% - 10px);\n              width: 10px;\n              cursor: w-resize; }\n    "]
@@ -329,0 +332,0 @@ },] },

ngx-image-cropper.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"ImageCropperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"ImageCropperComponent"}],"exports":[{"__symbolic":"reference","name":"ImageCropperComponent"}]}]}],"members":{}},"ImageCropperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"image-cropper","template":"\n      <div>\n          <img\n              *ngIf=\"imgDataUrl\"\n              [src]=\"imgDataUrl\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n              class=\"source-image\"\n              style=\"width: 100%\"\n          />\n          <div class=\"cropper\"\n              [style.top.px]=\"cropper.y1\"\n              [style.left.px]=\"cropper.x1\"\n              [style.width.px]=\"cropper.x2 - cropper.x1\"\n              [style.height.px]=\"cropper.y2 - cropper.y1\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n          >\n              <div\n                  (mousedown)=\"startMove($event, 'move')\"\n                  class=\"move\"\n              >&nbsp;</div>\n              <span\n                  class=\"resize topleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'topleft')\"\n              ></span>\n              <span\n                  class=\"resize top\"\n              ></span>\n              <span\n                  class=\"resize topright\"\n                  (mousedown)=\"startMove($event, 'resize', 'topright')\"\n              ></span>\n              <span\n                  class=\"resize right\"\n              ></span>\n              <span\n                  class=\"resize bottomright\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomright')\"\n              ></span>\n              <span\n                  class=\"resize bottom\"\n              ></span>\n              <span\n                  class=\"resize bottomleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomleft')\"\n              ></span>\n              <span\n                  class=\"resize left\"\n              ></span>\n              <span\n                  class=\"resize-bar top\"\n                  (mousedown)=\"startMove($event, 'resize', 'top')\"\n              ></span>\n              <span\n                  class=\"resize-bar right\"\n                  (mousedown)=\"startMove($event, 'resize', 'right')\"\n              ></span>\n              <span\n                  class=\"resize-bar bottom\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottom')\"\n              ></span>\n              <span\n                  class=\"resize-bar left\"\n                  (mousedown)=\"startMove($event, 'resize', 'left')\"\n              ></span>\n          </div>\n      </div>\n    ","styles":["\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        overflow: hidden;\n        padding: 5px;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none; }\n        :host > div {\n          position: relative; }\n        :host .cropper {\n          position: absolute;\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          color: #53535C !important;\n          background: transparent !important;\n          outline-color: rgba(255, 255, 255, 0.3);\n          outline-width: 1000px;\n          outline-style: solid; }\n          :host .cropper img {\n            width: inherit;\n            height: inherit;\n            cursor: move; }\n          :host .cropper:after {\n            position: absolute;\n            content: '';\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            pointer-events: none;\n            border: dashed 1px;\n            opacity: .75;\n            color: inherit;\n            z-index: 1; }\n          :host .cropper .move {\n            width: 100%;\n            height: 100%;\n            cursor: move;\n            border: 1px solid rgba(255, 255, 255, 0.5); }\n          :host .cropper .resize {\n            position: absolute;\n            background: #53535C; }\n            :host .cropper .resize.topleft {\n              top: -5px;\n              left: -5px;\n              cursor: nw-resize; }\n            :host .cropper .resize.top {\n              top: -5px;\n              left: calc(50% - 5px);\n              cursor: n-resize; }\n            :host .cropper .resize.topright {\n              top: -5px;\n              right: 5px;\n              cursor: ne-resize; }\n            :host .cropper .resize.right {\n              top: calc(50% - 5px);\n              right: 5px;\n              cursor: e-resize; }\n            :host .cropper .resize.bottomright {\n              bottom: 5px;\n              right: 5px;\n              cursor: se-resize; }\n            :host .cropper .resize.bottom {\n              bottom: 5px;\n              left: calc(50% - 5px);\n              cursor: s-resize; }\n            :host .cropper .resize.bottomleft {\n              bottom: 5px;\n              left: -5px;\n              cursor: sw-resize; }\n            :host .cropper .resize.left {\n              top: calc(50% - 5px);\n              left: -5px;\n              cursor: w-resize; }\n            :host .cropper .resize:after {\n              position: absolute;\n              background: inherit;\n              border: 1px solid rgba(255, 255, 255, 0.5);\n              content: '';\n              width: 8px;\n              height: 8px;\n              margin: auto;\n              opacity: .85;\n              z-index: 1; }\n          :host .cropper .resize-bar {\n            position: absolute;\n            z-index: 1; }\n            :host .cropper .resize-bar.top {\n              top: -5px;\n              left: 5px;\n              width: calc(100% - 10px);\n              height: 10px;\n              cursor: n-resize; }\n            :host .cropper .resize-bar.right {\n              top: 5px;\n              right: -5px;\n              height: calc(100% - 10px);\n              width: 10px;\n              cursor: e-resize; }\n            :host .cropper .resize-bar.bottom {\n              bottom: -5px;\n              left: 5px;\n              width: calc(100% - 10px);\n              height: 10px;\n              cursor: s-resize; }\n            :host .cropper .resize-bar.left {\n              top: 5px;\n              left: -5px;\n              height: calc(100% - 10px);\n              width: 10px;\n              cursor: w-resize; }\n    "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"imageChangedEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maintainAspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resizeToWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageCropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"imageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"loadImageFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"loadImage":[{"__symbolic":"method"}],"startMove":[{"__symbolic":"method"}],"moveImg":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mousemove",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchmove",["$event"]]}]}],"checkCoordinates":[{"__symbolic":"method"}],"moveStop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mouseup",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchend",["$event"]]}]}],"move":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"checkAspectRatio":[{"__symbolic":"method"}],"crop":[{"__symbolic":"method"}]}}},"origins":{"ImageCropperModule":"./src/image-cropper.module","ImageCropperComponent":"./src/image-cropper.component"},"importAs":"ngx-image-cropper"}
+{"__symbolic":"module","version":3,"metadata":{"ImageCropperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"ImageCropperComponent"}],"exports":[{"__symbolic":"reference","name":"ImageCropperComponent"}]}]}],"members":{}},"ImageCropperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"image-cropper","template":"\n      <div>\n          <img\n              [src]=\"imgDataUrl\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n              class=\"source-image\"\n              style=\"width: 100%\"\n          />\n          <div class=\"cropper\"\n              [style.top.px]=\"cropper.y1\"\n              [style.left.px]=\"cropper.x1\"\n              [style.width.px]=\"cropper.x2 - cropper.x1\"\n              [style.height.px]=\"cropper.y2 - cropper.y1\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n          >\n              <div\n                  (mousedown)=\"startMove($event, 'move')\"\n                  class=\"move\"\n              >&nbsp;</div>\n              <span\n                  class=\"resize topleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'topleft')\"\n              ></span>\n              <span\n                  class=\"resize top\"\n              ></span>\n              <span\n                  class=\"resize topright\"\n                  (mousedown)=\"startMove($event, 'resize', 'topright')\"\n              ></span>\n              <span\n                  class=\"resize right\"\n              ></span>\n              <span\n                  class=\"resize bottomright\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomright')\"\n              ></span>\n              <span\n                  class=\"resize bottom\"\n              ></span>\n              <span\n                  class=\"resize bottomleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomleft')\"\n              ></span>\n              <span\n                  class=\"resize left\"\n              ></span>\n              <span\n                  class=\"resize-bar top\"\n                  (mousedown)=\"startMove($event, 'resize', 'top')\"\n              ></span>\n              <span\n                  class=\"resize-bar right\"\n                  (mousedown)=\"startMove($event, 'resize', 'right')\"\n              ></span>\n              <span\n                  class=\"resize-bar bottom\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottom')\"\n              ></span>\n              <span\n                  class=\"resize-bar left\"\n                  (mousedown)=\"startMove($event, 'resize', 'left')\"\n              ></span>\n          </div>\n      </div>\n    ","styles":["\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        overflow: hidden;\n        padding: 5px;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none; }\n        :host > div {\n          position: relative; }\n        :host .cropper {\n          position: absolute;\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          color: #53535C !important;\n          background: transparent !important;\n          outline-color: rgba(255, 255, 255, 0.3);\n          outline-width: 1000px;\n          outline-style: solid; }\n          :host .cropper img {\n            width: inherit;\n            height: inherit;\n            cursor: move; }\n          :host .cropper:after {\n            position: absolute;\n            content: '';\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            pointer-events: none;\n            border: dashed 1px;\n            opacity: .75;\n            color: inherit;\n            z-index: 1; }\n          :host .cropper .move {\n            width: 100%;\n            height: 100%;\n            cursor: move;\n            border: 1px solid rgba(255, 255, 255, 0.5); }\n          :host .cropper .resize {\n            position: absolute;\n            background: #53535C; }\n            :host .cropper .resize.topleft {\n              top: -5px;\n              left: -5px;\n              cursor: nw-resize; }\n            :host .cropper .resize.top {\n              top: -5px;\n              left: calc(50% - 5px);\n              cursor: n-resize; }\n            :host .cropper .resize.topright {\n              top: -5px;\n              right: 5px;\n              cursor: ne-resize; }\n            :host .cropper .resize.right {\n              top: calc(50% - 5px);\n              right: 5px;\n              cursor: e-resize; }\n            :host .cropper .resize.bottomright {\n              bottom: 5px;\n              right: 5px;\n              cursor: se-resize; }\n            :host .cropper .resize.bottom {\n              bottom: 5px;\n              left: calc(50% - 5px);\n              cursor: s-resize; }\n            :host .cropper .resize.bottomleft {\n              bottom: 5px;\n              left: -5px;\n              cursor: sw-resize; }\n            :host .cropper .resize.left {\n              top: calc(50% - 5px);\n              left: -5px;\n              cursor: w-resize; }\n            :host .cropper .resize:after {\n              position: absolute;\n              background: inherit;\n              border: 1px solid rgba(255, 255, 255, 0.5);\n              content: '';\n              width: 8px;\n              height: 8px;\n              margin: auto;\n              opacity: .85;\n              z-index: 1; }\n          :host .cropper .resize-bar {\n            position: absolute;\n            z-index: 1; }\n            :host .cropper .resize-bar.top {\n              top: -5px;\n              left: 5px;\n              width: calc(100% - 10px);\n              height: 10px;\n              cursor: n-resize; }\n            :host .cropper .resize-bar.right {\n              top: 5px;\n              right: -5px;\n              height: calc(100% - 10px);\n              width: 10px;\n              cursor: e-resize; }\n            :host .cropper .resize-bar.bottom {\n              bottom: -5px;\n              left: 5px;\n              width: calc(100% - 10px);\n              height: 10px;\n              cursor: s-resize; }\n            :host .cropper .resize-bar.left {\n              top: 5px;\n              left: -5px;\n              height: calc(100% - 10px);\n              width: 10px;\n              cursor: w-resize; }\n    "]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"imageChangedEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maintainAspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resizeToWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageCropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"imageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"loadImageFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"loadImage":[{"__symbolic":"method"}],"startMove":[{"__symbolic":"method"}],"moveImg":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mousemove",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchmove",["$event"]]}]}],"checkCoordinates":[{"__symbolic":"method"}],"moveStop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mouseup",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchend",["$event"]]}]}],"move":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"checkAspectRatio":[{"__symbolic":"method"}],"crop":[{"__symbolic":"method"}]}}},"origins":{"ImageCropperModule":"./src/image-cropper.module","ImageCropperComponent":"./src/image-cropper.component"},"importAs":"ngx-image-cropper"}

ngx-image-cropper/ngx-image-cropper.es5.js

@@ -34,2 +34,3 @@ import { Component, ElementRef, EventEmitter, HostListener, Input, NgModule, Output } from '@angular/core';
         };
+        this.imgDataUrl = 'data:image/png;base64,iVBORw0KGg' + 'oAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAU' + 'AAarVyFEAAAAASUVORK5CYII=';
         this.imageVisible = false;
@@ -97,3 +98,3 @@ this.format = 'png';
                     _this.imageVisible = true;
-                }, 0);
+                }, 1);
             }
@@ -171,4 +172,6 @@ else {
     ImageCropperComponent.prototype.moveStop = function () {
-        this.moveStart.active = false;
-        this.crop();
+        if (this.moveStart.active) {
+            this.moveStart.active = false;
+            this.crop();
+        }
     };
@@ -322,3 +325,3 @@ /**
                 selector: 'image-cropper',
-                template: "\n      <div>\n          <img\n              *ngIf=\"imgDataUrl\"\n              [src]=\"imgDataUrl\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n              class=\"source-image\"\n              style=\"width: 100%\"\n          />\n          <div class=\"cropper\"\n              [style.top.px]=\"cropper.y1\"\n              [style.left.px]=\"cropper.x1\"\n              [style.width.px]=\"cropper.x2 - cropper.x1\"\n              [style.height.px]=\"cropper.y2 - cropper.y1\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n          >\n              <div\n                  (mousedown)=\"startMove($event, 'move')\"\n                  class=\"move\"\n              >&nbsp;</div>\n              <span\n                  class=\"resize topleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'topleft')\"\n              ></span>\n              <span\n                  class=\"resize top\"\n              ></span>\n              <span\n                  class=\"resize topright\"\n                  (mousedown)=\"startMove($event, 'resize', 'topright')\"\n              ></span>\n              <span\n                  class=\"resize right\"\n              ></span>\n              <span\n                  class=\"resize bottomright\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomright')\"\n              ></span>\n              <span\n                  class=\"resize bottom\"\n              ></span>\n              <span\n                  class=\"resize bottomleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomleft')\"\n              ></span>\n              <span\n                  class=\"resize left\"\n              ></span>\n              <span\n                  class=\"resize-bar top\"\n                  (mousedown)=\"startMove($event, 'resize', 'top')\"\n              ></span>\n              <span\n                  class=\"resize-bar right\"\n                  (mousedown)=\"startMove($event, 'resize', 'right')\"\n              ></span>\n              <span\n                  class=\"resize-bar bottom\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottom')\"\n              ></span>\n              <span\n                  class=\"resize-bar left\"\n                  (mousedown)=\"startMove($event, 'resize', 'left')\"\n              ></span>\n          </div>\n      </div>\n    ",
+                template: "\n      <div>\n          <img\n              [src]=\"imgDataUrl\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n              class=\"source-image\"\n              style=\"width: 100%\"\n          />\n          <div class=\"cropper\"\n              [style.top.px]=\"cropper.y1\"\n              [style.left.px]=\"cropper.x1\"\n              [style.width.px]=\"cropper.x2 - cropper.x1\"\n              [style.height.px]=\"cropper.y2 - cropper.y1\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n          >\n              <div\n                  (mousedown)=\"startMove($event, 'move')\"\n                  class=\"move\"\n              >&nbsp;</div>\n              <span\n                  class=\"resize topleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'topleft')\"\n              ></span>\n              <span\n                  class=\"resize top\"\n              ></span>\n              <span\n                  class=\"resize topright\"\n                  (mousedown)=\"startMove($event, 'resize', 'topright')\"\n              ></span>\n              <span\n                  class=\"resize right\"\n              ></span>\n              <span\n                  class=\"resize bottomright\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomright')\"\n              ></span>\n              <span\n                  class=\"resize bottom\"\n              ></span>\n              <span\n                  class=\"resize bottomleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomleft')\"\n              ></span>\n              <span\n                  class=\"resize left\"\n              ></span>\n              <span\n                  class=\"resize-bar top\"\n                  (mousedown)=\"startMove($event, 'resize', 'top')\"\n              ></span>\n              <span\n                  class=\"resize-bar right\"\n                  (mousedown)=\"startMove($event, 'resize', 'right')\"\n              ></span>\n              <span\n                  class=\"resize-bar bottom\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottom')\"\n              ></span>\n              <span\n                  class=\"resize-bar left\"\n                  (mousedown)=\"startMove($event, 'resize', 'left')\"\n              ></span>\n          </div>\n      </div>\n    ",
                 styles: ["\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        overflow: hidden;\n        padding: 5px;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none; }\n        :host > div {\n          position: relative; }\n        :host .cropper {\n          position: absolute;\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          color: #53535C !important;\n          background: transparent !important;\n          outline-color: rgba(255, 255, 255, 0.3);\n          outline-width: 1000px;\n          outline-style: solid; }\n          :host .cropper img {\n            width: inherit;\n            height: inherit;\n            cursor: move; }\n          :host .cropper:after {\n            position: absolute;\n            content: '';\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            pointer-events: none;\n            border: dashed 1px;\n            opacity: .75;\n            color: inherit;\n            z-index: 1; }\n          :host .cropper .move {\n            width: 100%;\n            height: 100%;\n            cursor: move;\n            border: 1px solid rgba(255, 255, 255, 0.5); }\n          :host .cropper .resize {\n            position: absolute;\n            background: #53535C; }\n            :host .cropper .resize.topleft {\n              top: -5px;\n              left: -5px;\n              cursor: nw-resize; }\n            :host .cropper .resize.top {\n              top: -5px;\n              left: calc(50% - 5px);\n              cursor: n-resize; }\n            :host .cropper .resize.topright {\n              top: -5px;\n              right: 5px;\n              cursor: ne-resize; }\n            :host .cropper .resize.right {\n              top: calc(50% - 5px);\n              right: 5px;\n              cursor: e-resize; }\n            :host .cropper .resize.bottomright {\n              bottom: 5px;\n              right: 5px;\n              cursor: se-resize; }\n            :host .cropper .resize.bottom {\n              bottom: 5px;\n              left: calc(50% - 5px);\n              cursor: s-resize; }\n            :host .cropper .resize.bottomleft {\n              bottom: 5px;\n              left: -5px;\n              cursor: sw-resize; }\n            :host .cropper .resize.left {\n              top: calc(50% - 5px);\n              left: -5px;\n              cursor: w-resize; }\n            :host .cropper .resize:after {\n              position: absolute;\n              background: inherit;\n              border: 1px solid rgba(255, 255, 255, 0.5);\n              content: '';\n              width: 8px;\n              height: 8px;\n              margin: auto;\n              opacity: .85;\n              z-index: 1; }\n          :host .cropper .resize-bar {\n            position: absolute;\n            z-index: 1; }\n            :host .cropper .resize-bar.top {\n              top: -5px;\n              left: 5px;\n              width: calc(100% - 10px);\n              height: 10px;\n              cursor: n-resize; }\n            :host .cropper .resize-bar.right {\n              top: 5px;\n              right: -5px;\n              height: calc(100% - 10px);\n              width: 10px;\n              cursor: e-resize; }\n            :host .cropper .resize-bar.bottom {\n              bottom: -5px;\n              left: 5px;\n              width: calc(100% - 10px);\n              height: 10px;\n              cursor: s-resize; }\n            :host .cropper .resize-bar.left {\n              top: 5px;\n              left: -5px;\n              height: calc(100% - 10px);\n              width: 10px;\n              cursor: w-resize; }\n    "]
@@ -325,0 +328,0 @@ },] },

ngx-image-cropper/ngx-image-cropper.js

@@ -35,2 +35,3 @@ import { Component, ElementRef, EventEmitter, HostListener, Input, NgModule, Output } from '@angular/core';
         };
+        this.imgDataUrl = 'data:image/png;base64,iVBORw0KGg' + 'oAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAU' + 'AAarVyFEAAAAASUVORK5CYII=';
         this.imageVisible = false;
@@ -93,3 +94,3 @@ this.format = 'png';
                     this.imageVisible = true;
-                }, 0);
+                }, 1);
             }
@@ -165,4 +166,6 @@ else {
     moveStop() {
-        this.moveStart.active = false;
-        this.crop();
+        if (this.moveStart.active) {
+            this.moveStart.active = false;
+            this.crop();
+        }
     }
@@ -318,3 +321,2 @@ /**
           <img
-              *ngIf="imgDataUrl"
               [src]="imgDataUrl"
@@ -321,0 +323,0 @@ [style.visibility]="imageVisible ? 'visible' : 'hidden'"

package.json

 {
   "name": "ngx-image-cropper",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "An image cropper for Angular",
@@ -5,0 +5,0 @@ "main": "bundles/ngx-image-cropper.umd.js",

README.md

@@ -69,6 +69,6 @@ # Image cropper for Angular
 - `imageChangedEvent` - The change event from your file input
-- `format` - Output format (png, jpg, gif)
-- `maintainAspectRatio` - Keep width and height of cropped image equal according to the aspectRatio
-- `aspectRatio` - The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...)
-- `resizeToWidth` - Cropped image will be resized to this with (in px) (default 0 = no resizing)
+- `format` - Output format (png, jpg, gif) (default = png)
+- `maintainAspectRatio` - Keep width and height of cropped image equal according to the aspectRatio (default = true)
+- `aspectRatio` - The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...) (default = 1)
+- `resizeToWidth` - Cropped image will be resized to this width (in px) (default = 0 (no resizing))
 
@@ -75,0 +75,0 @@ ### Outputs

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

202569

increased by0.66%

Lines of code

1352

increased by0.6%

No dependency changes