Add handling of frames for canvas

src/js/components/ImageEditor/FrameHandler.js

@@ -0,0 +1,131 @@
+'use strict';
+
+function FrameHandler(viewport) {
+    var _frames;
+    var _frameType;
+
+    function init() {
+        initFrames();
+    }
+
+    function getFramesAsArray() {
+        return [
+            _frames.top, _frames.right, _frames.bottom, _frames.left
+        ];
+    }
+
+    /**
+     * Sets the 4 rectangles which are used when current canvas should be framed
+     */
+    function initFrames() {
+        var frame = new fabric.Rect({ fill: '#000', stroke: '#000000', width: 1, height: 1 });
+
+        _frames = {
+            top: frame.clone(),
+            right: frame.clone(),
+            bottom: frame.clone(),
+            left: frame.clone()
+        };
+
+        getFramesAsArray().forEach(function (o) {
+            viewport.canvas.add(o);
+        });
+    }
+
+    init();
+
+    this.setVisible = function (isVisible) {
+        isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
+
+        getFramesAsArray().forEach(function (o) {
+            o.set({
+                visible: isVisible
+            });
+        });
+
+        viewport.canvas.renderAll();
+
+        return this;
+    }
+
+    /**
+     * Sets passed frametype to passed viewwport
+     * @param  {string} frameType none|image|black|white
+     * @return {FrameHandler}
+     */
+    this.setFrames = function (frameType) {
+        if (frameType === 'none') {
+            return this.setVisible(false);
+        }
+
+        _frameType = frameType;
+
+        _frames.top.height =
+        _frames.bottom.height =
+        _frames.right.width =
+        _frames.left.width = viewport.getData().ppmm * 29;
+
+        _frames.top.width = _frames.bottom.width = viewport.getData().width;
+        _frames.right.height = _frames.left.height = viewport.getData().height;
+
+        if (frameType === 'image') {
+            _frames.top.width -= (viewport.getData().ppmm * 29) * 2;
+            _frames.bottom.width = _frames.top.width;
+            _frames.right.height -= (viewport.getData().ppmm * 29) * 2;
+            _frames.left.height = _frames.right.height;
+            getFramesAsArray().forEach(function (o) {
+                o.set({ fill: 'transparent', strokeWidth: 1, });
+            });
+        } else if (frameType === 'white') {
+            getFramesAsArray().forEach(function (o) {
+                o.set({ fill: '#ffffff', strokeWidth: 0, });
+            });
+        } else if (frameType === 'black') {
+            getFramesAsArray().forEach(function (o) {
+                o.set({ fill: '#000000', strokeWidth: 0, });
+            });
+        }
+
+        var bounds = viewport.getBounds();
+
+        if (frameType === 'image') {
+            _frames.top.set({
+                top: bounds.top,
+            }).centerH().setCoords();
+
+            _frames.bottom.set({
+                top: (bounds.top + bounds.height - _frames.bottom.height) - 1
+            }).centerH().setCoords();
+
+            _frames.right.set({
+                left: (bounds.left + bounds.width - _frames.right.width) - 1
+            }).centerV().setCoords();
+
+            _frames.left.set({
+                left: bounds.left
+            }).centerV().setCoords();
+        } else {
+            _frames.top.set({
+                top: bounds.top - _frames.top.height,
+            }).centerH().setCoords();
+
+            _frames.bottom.set({
+                top: (bounds.top + bounds.height)
+            }).centerH().setCoords();
+
+            _frames.right.set({
+                left: (bounds.left + bounds.width)
+            }).centerV().setCoords();
+
+            _frames.left.set({
+                left: bounds.left - _frames.left.width
+            }).centerV().setCoords();
+        }
+
+        viewport.canvas.renderAll();
+
+        return this;
+    };
+}
+
+module.exports = FrameHandler;

src/js/components/ImageEditor/Viewport.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var FrameHandler = require('./FrameHandler');
 var GoreHandler = require('./GoreHandler');
 var RulerHandler = require('./RulerHandler');
 var util = require('../util');
@@ -129,84 +130,24 @@ function Viewport(canvas) {
         canvas.getButtonMenu().bringToFront();
     };
 
-    var _frames = [];
-
-    function getFrame(borderType) {
-        _frames.forEach(function (o) {
-            canvas.remove(o);
-        });
-        _frames = [];
-
-        var frames = {
-            top: new fabric.Rect({
-                fill: 'transparent',
-                width: _data.width - (_data.ppmm * 29) * 2,
-                height: _data.ppmm * 29,
-                stroke: '#000',
-                strokeWidth: 1
-            }),
-            right: new fabric.Rect({
-                fill: 'transparent',
-                width: _data.ppmm * 29,
-                height: _data.height - (_data.ppmm * 29) * 2,
-                stroke: '#000',
-                strokeWidth: 1
-            })
-        };
-
-        frames.bottom = frames.top.clone();
-        frames.left = frames.right.clone();
-    }
-
     /**
      * @param  {string} frameType white|black|image|none
      * @return {Viewport}
      */
     this.setFrame = function (frameType) {
-        /*
-        _rect = new fabric.Rect({
-            evented: false,
-            fill: 'transparent',
-            width: _data.width,
-            height: _data.height,
-            stroke: '#fff',
-            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
-        });
-         */
-console.log(_data.image)
-        var frames = {
-            top: new fabric.Rect({
-                fill: 'transparent',
-                width: _data.width - (_data.ppmm * 29) * 2,
-                height: _data.ppmm * 29,
-                stroke: '#000',
-                strokeWidth: 1,
-                top: _data.image.top - 1
-            }),
-            right: new fabric.Rect({
-                fill: 'transparent',
-                width: _data.ppmm * 29,
-                height: _data.height - (_data.ppmm * 29) * 2,
-                stroke: '#000',
-                strokeWidth: 1
-            })
-        };
-
-        frames.bottom = frames.top.clone().set({
-            top: (_data.image.top + _data.image.height) - frames.top.height
-        });
-
-        frames.left = frames.right.clone();
-
-        frames.top.addTo(canvas).centerH();
-        frames.bottom.addTo(canvas).centerH();
-        canvas.renderAll()
+        this.getFrameHandler().setFrames(frameType);
     }
 
     this.getData = function () {
         return _data;
     };
 
+    var _frameHandler = null;
+
+    this.getFrameHandler = function () {
+        return _frameHandler || (_frameHandler = new FrameHandler(this));
+    };
+
     this.getGores = function () {
         return this.__goreHandler || (this.__goreHandler = new GoreHandler(this));
     };