Initial commit

2017-05-09 12:18:29 +02:00
commit c73e1ed9b4
29 changed files with 1481 additions and 0 deletions
@@ -0,0 +1,148 @@
+'use strict';
+
+var GoreHandler = require('./GoreHandler');
+var RulerHandler = require('./RulerHandler');
+var util = require('./Util');
+
+function Viewport(canvas) {
+    var _beams = [];
+    var _borderWidth = 2;
+    var _data = null;
+    var _rect;
+
+    /**
+     * Applies viewport to page
+     */
+    function apply() {
+        canvas.remove(_rect);
+
+        _rect = new fabric.Rect({
+            evented: false,
+            fill: 'transparent',
+            width: _data.width,
+            height: _data.height,
+            stroke: '#fff',
+            strokeWidth: _borderWidth,
+        });
+
+        _rect.width += _borderWidth;
+        _rect.height += _borderWidth;
+        _rect.addTo(canvas).center().setCoords();
+
+        canvas.image
+            .center()
+            .drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.image));
+        canvas.aperture.apply(_data.axis, _rect.getBoundingRect());
+
+        drawBeams();
+        canvas.dragbars.apply();
+
+        // Apertures sometimes overlaps the viewports bounding rect.
+        // Solve this by bringing it to the front after apertures are applied.
+        _rect.bringToFront();
+    }
+
+
+    /**
+     * Render the diagonal lines from viewport to edge of the canvas
+     */
+    function drawBeams() {
+        _beams.forEach(function (o) {
+            canvas.remove(o);
+        });
+
+        _beams = [];
+
+        // TOP LEFT
+        _beams.push(new fabric.Line(
+            [_rect.left, _rect.top, _rect.left - _rect.top, -1], {
+                stroke: '#fff',
+                strokeWidth: 2,
+            }
+        ));
+
+        // TOP RIGHT
+        _beams.push(_beams[0].clone().set({ flipX: true, left: _rect.left + _rect.width }));
+        // BOTTOM RIGHT
+        _beams.push(_beams[1].clone().set({ flipY: true, top: _rect.top + _rect.height }));
+        // BOTTOM LEFT
+        _beams.push(_beams[0].clone().set({ flipY: true, top: _rect.top + _rect.height }));
+
+        _beams.forEach(function (o) {
+            canvas.add(o);
+            o.bringToFront();
+        });
+    }
+
+    /**
+     * Gets an object with min / max values for each axis, based on the bounds
+     * of passed fabric.Rect
+     * @param  {fabric.Rect} rect
+     * @return {Object}
+     */
+    function calcMinMaxBoundsForRect(rect, img) {
+        return {
+            left: {
+                min: rect.left + rect.width - img.width,
+                max: rect.left
+            },
+            top: {
+                min: rect.top + rect.height - img.height,
+                max: rect.top
+            }
+        };
+    }
+
+    this.canvas = canvas;
+
+    this.getBounds = function () {
+        return _rect.getInsideBoundingRect();
+    };
+
+    /**
+     * @return {Viewport}
+     */
+    this.reset = function () {
+        if (_data) {
+            return this.set(_data.dim.width, _data.dim.height);
+        }
+        return this;
+    };
+
+    /**
+     * @param  {Number} width
+     * @param  {Number} height
+     * @return {Viewport}
+     */
+    this.set = function (width, height) {
+        _data = util.calcCrop(canvas.image, width, height);
+        apply();
+        this.gores.reset();
+        this.rulers.reset();
+        canvas.aperture.setTransparent(true);
+        canvas.image.__moved = false;
+        canvas.topMenu.bringToFront();
+    };
+
+    util.setProperties(this, {
+        data: {
+            get: function () {
+                return _data;
+            }
+        },
+        gores: {
+          get: function () {
+              return this.__goreHandler ||
+                (this.__goreHandler = new GoreHandler(this));
+          }
+        },
+        rulers: {
+          get: function () {
+              return this.__rulerHandler ||
+                (this.__rulerHandler = new RulerHandler(this));
+          }
+        }
+    });
+}
+
+module.exports = Viewport;