P5-1451: Add photo-wallpaper type

dist/image-editor.js

@@ -199,6 +199,12 @@ function ApertureHandler(canvas) {
         canvas.renderAll();
         return this;
     };
+
+    this.disable = function () {
+        this.getApertures().forEach(function (o) {
+            o.visible = false;
+        });
+    };
 }
 
 module.exports = ApertureHandler;
@@ -623,23 +629,28 @@ var util = require('./util');
 var DragHandle = function (handler) {
     var _currentAxis;
     var _dragHandle;
+    var _clickHandle = false;
     var _movedHandle;
 
     // Event declarations
     var events = {
         mouseDown: function () {
-            _dragHandle = true;
+            if(handler.canvas.__type !== 'wallpaper') {
+                _dragHandle = true;
+            }
 
+            _clickHandle = true;
             _currentAxis = this.axis;
             handler.canvas.getImage().trigger('mousedown');
         },
         mouseUp: function () {
-            if (!_dragHandle) {
+            if (!_dragHandle && !_clickHandle) {
                 return;
             }
 
-            if (!_movedHandle) {
+            if (_clickHandle) {
                 $(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
+                _clickHandle = false;
             }
 
             _dragHandle = false;
@@ -824,15 +835,18 @@ function DragbarHandler(canvas) {
      */
     this.init = function () {
         this.clear();
+        var typeIsWallpaper = canvas.__type === 'wallpaper';
 
         _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
             axis: 'x',
             width: canvas.getImage().width * canvas.getImage().scaleY,
             height: config.dragBar.size,
             lockMovementY: true,
+            // Movement should also be disabled when the user is on wallpaper (repeating paterns)
+            lockMovementX: typeIsWallpaper,
             selectable: true,
-            hoverCursor: 'ew-resize',
-            moveCursor: 'ew-resize',
+            hoverCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
+            moveCursor: typeIsWallpaper ? 'pointer' : 'ew-resize',
         }))
             .addTo(canvas)
             .centerH().set({ top: canvas.height - 30 }).setCoords();
@@ -842,9 +856,11 @@ function DragbarHandler(canvas) {
             width: config.dragBar.size,
             height: canvas.getImage().height * canvas.getImage().scaleY,
             lockMovementX: true,
+            // Movement should also be disabled when the user is on wallpaper (repeating paterns)
+            lockMovementY: typeIsWallpaper,
             selectable: true,
-            hoverCursor: 'ns-resize',
-            moveCursor: 'ns-resize',
+            hoverCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
+            moveCursor: typeIsWallpaper ? 'pointer': 'ns-resize',
         }))
             .addTo(canvas)
             .set({ left: canvas.width - 30 }).setCoords();
@@ -1746,8 +1762,12 @@ function Viewport(canvas) {
             canvas.getImageData().setCropData();
         }
 
-        canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
-        canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
+        if(canvas.__type !== 'wallpaper') {
+            canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
+            canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
+        } else {
+            canvas.getApertures().disable();
+        }
 
         if (canvas.__type !== 'canvas') {
             drawBeams();