Adjustments for canvas frames

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) {
+            frameargs = {
-                o.set({ fill: '#ffffff', strokeWidth: 0, });
+                fill: '#ffffff',
-            });
+                strokeWidth: 0,
+            };
         } else if (frameType === 'black') {
-            getFramesAsArray().forEach(function (o) {
+            frameargs = {
-                o.set({ fill: '#000000', strokeWidth: 0, });
+                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();
         }