From 578c44ebfd3d331e6e04c0f92dc2ac8e1556be9b Mon Sep 17 00:00:00 2001
From: Rikard Bartholf <rikard@bartholf.nu>
Date: Tue, 16 May 2017 11:06:50 +0200
Subject: [PATCH] Adjustments for canvas frames

---
 src/js/components/ImageEditor/FrameHandler.js | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/js/components/ImageEditor/FrameHandler.js b/src/js/components/ImageEditor/FrameHandler.js
index 9637dde..1670b46 100644
--- a/src/js/components/ImageEditor/FrameHandler.js
+++ b/src/js/components/ImageEditor/FrameHandler.js
@@ -68,24 +68,35 @@ function FrameHandler(viewport) {
         _frames.top.width = _frames.bottom.width = viewport.getData().width;
         _frames.right.height = _frames.left.height = viewport.getData().height;
 
+        var frameargs;
+
         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, });
-            });
+
+            frameargs = {
+                fill: 'rgba(0,0,0,0.2)',
+                strokeWidth: 1,
+            };
+
         } else if (frameType === 'white') {
-            getFramesAsArray().forEach(function (o) {
-                o.set({ fill: '#ffffff', strokeWidth: 0, });
-            });
+            frameargs = {
+                fill: '#ffffff',
+                strokeWidth: 0,
+            };
         } else if (frameType === 'black') {
-            getFramesAsArray().forEach(function (o) {
-                o.set({ fill: '#000000', strokeWidth: 0, });
-            });
+            frameargs = {
+                fill: '#000000',
+                strokeWidth: 0,
+            };
         }
 
+        getFramesAsArray().forEach(function (o) {
+            o.set(frameargs);
+        });
+
         var bounds = viewport.getBounds();
 
         if (frameType === 'image') {
@@ -106,19 +117,19 @@ function FrameHandler(viewport) {
             }).centerV().setCoords();
         } else {
             _frames.top.set({
-                top: bounds.top - _frames.top.height,
+                top: (bounds.top - _frames.top.height) + 1,
             }).centerH().setCoords();
 
             _frames.bottom.set({
-                top: (bounds.top + bounds.height)
+                top: (bounds.top + bounds.height) - 1,
             }).centerH().setCoords();
 
             _frames.right.set({
-                left: (bounds.left + bounds.width)
+                left: (bounds.left + bounds.width) - 1
             }).centerV().setCoords();
 
             _frames.left.set({
-                left: bounds.left - _frames.left.width
+                left: (bounds.left - _frames.left.width) + 1
             }).centerV().setCoords();
         }