From 15d54ec45a1dbf34d24c98acb23f5b21227f5228 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@weahead.se>
Date: Thu, 18 May 2017 14:20:04 +0200
Subject: [PATCH] Fixed config for frames and added only frames to canvas

---
 src/js/components/ImageEditor/FrameHandler.js | 19 +++++--------
 src/js/components/ImageEditor/ImageEditor.js  |  2 +-
 src/js/components/ImageEditor/Viewport.js     |  3 +--
 src/js/components/config.js                   |  1 +
 src/js/components/config/button-menu.js       |  8 +++---
 src/js/components/config/frames.js            | 27 +++++++++++++++++++
 6 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 src/js/components/config/frames.js

diff --git a/src/js/components/ImageEditor/FrameHandler.js b/src/js/components/ImageEditor/FrameHandler.js
index 572bf61..419f0b1 100644
--- a/src/js/components/ImageEditor/FrameHandler.js
+++ b/src/js/components/ImageEditor/FrameHandler.js
@@ -1,5 +1,7 @@
 'use strict';
 
+var config = require('../config');
+
 function FrameHandler(viewport) {
     var _frames;
     var _frameType;
@@ -18,7 +20,7 @@ function FrameHandler(viewport) {
      * Sets the 4 rectangles which are used when current canvas should be framed
      */
     function initFrames() {
-        var frame = new fabric.Rect({ fill: '#000000', stroke: '#000000', width: 1, height: 1 });
+        var frame = new fabric.Rect(config.frames.default);
 
         _frames = {
             top: frame.clone(),
@@ -90,21 +92,12 @@ function FrameHandler(viewport) {
             _frames.right.height -= (viewport.getData().ppmm * 29) * 2;
             _frames.left.height = _frames.right.height;
 
-            frameargs = {
-                fill: 'rgba(0,0,0,0.2)',
-                strokeWidth: 1,
-            };
+            frameargs = config.frames.image;
 
         } else if (frameType === 'white') {
-            frameargs = {
-                fill: '#ffffff',
-                strokeWidth: 0,
-            };
+            frameargs = config.frames.white;
         } else if (frameType === 'black') {
-            frameargs = {
-                fill: '#000000',
-                strokeWidth: 0,
-            };
+            frameargs = config.frames.black;
         }
 
         getFramesAsArray().forEach(function (o) {
diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js
index 252ccba..b07d5f7 100644
--- a/src/js/components/ImageEditor/ImageEditor.js
+++ b/src/js/components/ImageEditor/ImageEditor.js
@@ -25,8 +25,8 @@ function ImageEditor(canvasId, args) {
      */
     if (_canvas.__type === 'canvas') {
         _canvas.getButtonMenu()
-            .addItem('3D', function () {})
             .addItem('Flat', function () {}, true)
+            .addItem('3D', function () {})
             .render();
     } else {
         _canvas.getButtonMenu()
diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js
index 8d7a76d..b1c26a7 100644
--- a/src/js/components/ImageEditor/Viewport.js
+++ b/src/js/components/ImageEditor/Viewport.js
@@ -39,11 +39,10 @@ function Viewport(canvas) {
         if (canvas.__type !== 'canvas') {
             drawBeams();
         } else {
-            // drawFrames
+            self.setFrame();
         }
 
         canvas.getDragbars().apply();
-        self.setFrame();
         // Apertures sometimes overlaps the viewports bounding rect.
         // Solve this by bringing it to the front after apertures are applied.
         _rect.bringToFront();
diff --git a/src/js/components/config.js b/src/js/components/config.js
index e3d1487..2d6f751 100644
--- a/src/js/components/config.js
+++ b/src/js/components/config.js
@@ -1,6 +1,7 @@
 'use strict';
 
 module.exports = {
+    frames: require('./config/frames'),
     textButton: require('./config/text-button'),
     buttonMenu: require('./config/button-menu'),
     rulerHandle: require('./config/ruler-handle'),
diff --git a/src/js/components/config/button-menu.js b/src/js/components/config/button-menu.js
index 48e849a..aec0020 100644
--- a/src/js/components/config/button-menu.js
+++ b/src/js/components/config/button-menu.js
@@ -3,14 +3,14 @@
 module.exports = {
 
     canvas: {
-        margin: 0,
+        margin: 5,
         text: {
             fill: '#ffffff',
-            activeFill: '#000000',
+            activeFill: '#ffffff',
         },
         rect: {
-            fill: '#444444',
-            activeFill: '#ffffff',
+            fill: '#000000',
+            activeFill: '#444444',
             width: 100,
         },
     },
diff --git a/src/js/components/config/frames.js b/src/js/components/config/frames.js
new file mode 100644
index 0000000..2667838
--- /dev/null
+++ b/src/js/components/config/frames.js
@@ -0,0 +1,27 @@
+'use strict';
+
+module.exports = {
+
+    default: {
+        fill: '#000000',
+        stroke: '#f31fb3',
+        width: 1,
+        height: 1,
+    },
+
+    image: {
+        fill: 'rgba(0,0,0,0.2)',
+        strokeWidth: 1,
+    },
+
+    black: {
+        fill: '#000000',
+        strokeWidth: 0,
+    },
+
+    white: {
+        fill: '#ffffff',
+        strokeWidth: 0,
+    },
+
+};