From f01921e024b77b2c3d9277bf434dfcef8dc65b31 Mon Sep 17 00:00:00 2001
From: Ruslan Getmansky <ruslan.getmansky@gmail.com>
Date: Thu, 30 Nov 2017 14:45:28 +0200
Subject: [PATCH] P5-1451: Add photo-wallpaper type

---
 dist/image-editor.js                    | 38 +++++++++++++++++++------
 examples/repeating-wallpaper/index.html | 36 +++++++++++++++++++++++
 src/ApertureHandler.js                  |  6 ++++
 src/DragHandle.js                       | 11 +++++--
 src/DragbarHandler.js                   | 13 ++++++---
 src/Viewport.js                         |  8 ++++--
 6 files changed, 94 insertions(+), 18 deletions(-)
 create mode 100644 examples/repeating-wallpaper/index.html

diff --git a/dist/image-editor.js b/dist/image-editor.js
index 954a682..b01de18 100644
--- a/dist/image-editor.js
+++ b/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();
diff --git a/examples/repeating-wallpaper/index.html b/examples/repeating-wallpaper/index.html
new file mode 100644
index 0000000..961f4d6
--- /dev/null
+++ b/examples/repeating-wallpaper/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    </head>
+    <body>
+        <label>Width: <input type="text" id="width" name="width" value="500" /></label>
+        <label>Height: <input type="text" id="height" name="height" value="400" /></label>
+        <canvas id="image-editor" width="800" height="600"></canvas>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
+        <script src="../../dist/js/main.js"></script>
+        <script type="text/javascript">
+            var width = document.getElementById('width');
+            var height = document.getElementById('height');
+            var editor = new ImageEditor('image-editor', {
+                type: 'wallpaper',
+                dimensions: {width: 800, height: 600}
+            });
+
+
+            function loadImage() {
+                var image_url = '//images-dev.photowall.com/products/46955.jpg?h=450&repeat[tw]=45&repeat[th]=35&repeat[mw]=' + width.value + '&repeat[mh]=' + height.value;
+                editor.loadImage(image_url, function() {
+                    editor.crop(width.value, height.value, 'cm');
+                });
+            }
+
+            //add event listeners
+            width.addEventListener('keyup', loadImage);
+            height.addEventListener('keyup', loadImage);
+
+            loadImage();
+        </script>
+    </body>
+</html>
diff --git a/src/ApertureHandler.js b/src/ApertureHandler.js
index aed2762..e193230 100644
--- a/src/ApertureHandler.js
+++ b/src/ApertureHandler.js
@@ -88,6 +88,12 @@ function ApertureHandler(canvas) {
         canvas.renderAll();
         return this;
     };
+
+    this.disable = function () {
+        this.getApertures().forEach(function (o) {
+            o.visible = false;
+        });
+    };
 }
 
 module.exports = ApertureHandler;
diff --git a/src/DragHandle.js b/src/DragHandle.js
index e93477c..96036df 100644
--- a/src/DragHandle.js
+++ b/src/DragHandle.js
@@ -7,23 +7,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;
diff --git a/src/DragbarHandler.js b/src/DragbarHandler.js
index 1c281ce..caeae2e 100644
--- a/src/DragbarHandler.js
+++ b/src/DragbarHandler.js
@@ -83,15 +83,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();
@@ -101,9 +104,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();
diff --git a/src/Viewport.js b/src/Viewport.js
index 774eca7..2451acf 100644
--- a/src/Viewport.js
+++ b/src/Viewport.js
@@ -97,8 +97,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();