fix: fixed exist cropzone bug in toDataUrl image (fix #237 #224) (#300)

* feat: webpack version up

* feat: cssExtract plugin update

* feat: karma.conf update middle commit

* feat: karma.conf update middle commit

* feat: webpack with karma version update middle commit

* update package-lock

* feat: karma version update 4.x.x

* fix: fixed all vulnerabilities at package.json

* fix: added mode property webpack config

* feat: added dist directory for npm istall test

* test complete with delete dist directory

* restore un nessary fix point

* apply code review at webpack config

* fix: fixed fabricjs install guide

* fix: fix karma.conf.js for css-loader webpack config

* fix: fixed exist cropzone bug in toDataUrl image

* apply code review

src/js/component/cropper.js

@@ -132,6 +132,16 @@ class Cropper extends Component {
  fabric.util.removeListener(document, 'keyup', this._listeners.keyup);
  }
 
+ /**
+ * Change cropzone visible
+ * @param {boolean} visible - cropzone visible state
+ */
+ changeVisibility(visible) {
+ if (this._cropzone) {
+ this._cropzone.set({visible});
+ }
+ }
+
  /**
  * onMousedown handler in fabric canvas
  * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event

src/js/extension/cropzone.js

@@ -46,7 +46,7 @@ const Cropzone = fabric.util.createClass(fabric.Rect, /** @lends Cropzone.protot
  });
  },
 
- _renderCropzone() {
+ _renderCropzone(ctx) {
  const cropzoneDashLineWidth = 7;
  const cropzoneDashLineOffset = 7;
 
@@ -57,7 +57,6 @@ const Cropzone = fabric.util.createClass(fabric.Rect, /** @lends Cropzone.protot
  const originalScaleY = originalFlipY / this.scaleY;
 
  // Set original scale
- const ctx = this.canvas.getContext();
  ctx.scale(originalScaleX, originalScaleY);
 
  // Render outer rect
@@ -90,12 +89,10 @@ const Cropzone = fabric.util.createClass(fabric.Rect, /** @lends Cropzone.protot
  * @private
  * @override
  */
- _render() {
- const ctx = this.canvas.getContext();
-
+ _render(ctx) {
  this.callSuper('_render', ctx);
 
- this._renderCropzone();
+ this._renderCropzone(ctx);
  },
 
  /**

src/js/graphics.js

@@ -403,7 +403,13 @@ class Graphics {
  * @returns {string} A DOMString containing the requested data URI.
  */
  toDataURL(options) {
- return this._canvas && this._canvas.toDataURL(options);
+ const cropper = this.getComponent(components.CROPPER);
+ cropper.changeVisibility(false);
+
+ const dataUrl = this._canvas && this._canvas.toDataURL(options);
+ cropper.changeVisibility(true);
+
+ return dataUrl;
  }
 
  /**

test/graphics.spec.js

@@ -138,6 +138,16 @@ describe('Graphics', () => {
  graphics.stopDrawingMode();
  });
 
+ it('Cropzone must be hidden initially and then redisplayed after completion at toDataURL is executed with a cropzone present', () => {
+ const cropper = graphics.getComponent(components.CROPPER);
+ spyOn(cropper, 'changeVisibility');
+
+ graphics.startDrawingMode(drawingModes.CROPPER);
+ graphics.toDataURL();
+
+ expect(cropper.changeVisibility.calls.allArgs()).toEqual([[false], [true]]);
+ });
+
  it('can set brush setting into LINE_DRAWING, FREE_DRAWING', () => {
  graphics.startDrawingMode(drawingModes.LINE_DRAWING);
  graphics.setBrush({