diff --git a/src/js/components/ImageEditor/ApertureHandler.js b/src/js/components/ImageEditor/ApertureHandler.js index d49fa7a..1a54be3 100644 --- a/src/js/components/ImageEditor/ApertureHandler.js +++ b/src/js/components/ImageEditor/ApertureHandler.js @@ -2,6 +2,7 @@ function ApertureHandler(canvas) { var _items = {x: [], y: []}; + var $document = $(document); function init() { var bounds = canvas; @@ -61,6 +62,7 @@ function ApertureHandler(canvas) { this.getApertures().forEach(function (o) { o.opacity = apply ? 0.7 : 1; }); + canvas.renderAll(); return this; }; diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index 30b379a..fb85195 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/src/js/components/ImageEditor/Canvas.js @@ -22,8 +22,10 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { this.on('mouse:up', function () { if (this.getImage().__moved) { this.getApertures().setTransparent(false); + + // Trigger event to tell the image has been dragged. + $(document).trigger('PIE:dragged'); } - $(this.upperCanvasEl).css('cursor', 'default'); this.renderAll(); }); }, diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js index 7c09e94..d775ccf 100644 --- a/src/js/components/ImageEditor/Viewport.js +++ b/src/js/components/ImageEditor/Viewport.js @@ -129,6 +129,10 @@ function Viewport(canvas) { canvas.getApertures().setTransparent(true); canvas.getImage().__moved = false; canvas.getButtonMenu().bringToFront(); + + // Trigger event to tell the image needs to be dragged. + $(document).trigger('PIE:needs-dragging'); + }; /** diff --git a/src/js/init.js b/src/js/init.js index 82cb1f8..d08fe8c 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -1,6 +1,7 @@ 'use strict'; (function() { + var $document = $(document); // Inputs for the editor var $input = { w: $('#form-control input[name="w"]'), @@ -69,4 +70,10 @@ $input.mirror.on('change', Event.Mirror); $input.noCrop.on('change', Event.NoCrop); $input.border.on('change', Event.SetBorder); + $document.on('PIE:dragged', function() { + console.log('Now you can buy!'); + }); + $document.on('PIE:needs-dragging', function() { + console.log('You need to drag to be able to buy!'); + }); }());