move the source files to ./src

src/3dHandler.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var util = require('./util');
+
+/**
+ * Handles 3d image of canvas products.
+ * @param {canvas}
+ */
+function ThreeDHandler(canvas) {
+    var _overlay = new fabric.Group();
+    var _image;
+
+    function init() {
+        _overlay
+            .set({
+                visible: false,
+                left: 0
+            })
+            .addWithUpdate(new fabric.Rect({
+                // Width is made bigger as this works better with resizing the editor
+                width: canvas.width * 2,
+                height: canvas.height,
+                top: 0,
+                left: 0,
+                fill: canvas.backgroundColor,
+            }));
+
+        canvas.add(_overlay);
+    }
+
+    init();
+
+    /**
+     * Disables the 3d image by removing visibility
+     * @return {ThreeDHandler}
+     */
+    this.disable = function () {
+        _overlay.setVisible(false).canvas.resize();
+        return this;
+    };
+
+    /**
+     * Enables the 3d image by setting the width and visibility of the overlay and moving elements which
+     * needs to be visible to the front.
+     * @return {ThreeDHandler}
+     */
+    this.enable = function () {
+        _overlay
+            .set({
+                width: canvas.width,
+                visible: true
+            }).bringToFront();
+
+        canvas.getButtonMenu().bringToFront();
+        canvas.renderAll();
+        return this;
+    };
+
+    /**
+     * Checks if 3d mode is enabled/visible.
+     * @returns {boolean}
+     */
+    this.isEnabled = function () {
+        return _overlay.visible;
+    };
+
+    /**
+     * Refreshes the image. This is mostly done upon resize of the window
+     */
+    this.refreshImage = function() {
+        _overlay.set({
+            width: canvas.width,
+        });
+
+        this.applyImage();
+    };
+
+    /**
+     * (Re)adds the new/existing image with new configuration to the overlay.
+     * @param {img}
+     */
+    this.applyImage = function(img) {
+        img = img || _image;
+
+        _overlay
+            .remove(_image)
+            .add(_image = canvas.getResizedImage(img));
+    };
+
+    /**
+     * Sets the image and enables 3d mode.
+     * @param {img}
+     * @return {ThreeDHandler}
+     */
+    this.setImage = function (img) {
+        img.set({
+            // Image should be about 20px lower than the center (because of the buttons)
+            top: 20,
+            originX: 'center',
+            originY: 'center',
+        });
+
+        this.applyImage(img);
+        return this.enable();
+    };
+
+}
+
+module.exports = ThreeDHandler;