8346: changed border color and width inside image editor (#13)

dist/generated-image-editor.js

@@ -295,8 +295,6 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
       return;
     }
 
-    // hello
-
     this.setHeight(args.height);
     this.setWidth(args.width);
     this.getButtonMenu().render();
@@ -1606,8 +1604,7 @@ var RulerHandler = require('./RulerHandler');
 var util = require('./util');
 
 function Viewport(canvas) {
-  var _beams = [];
-  var _borderWidth = 2;
+  var _borderWidth = 1;
   var _data = null;
   var _rect;
   var _baseImageScale = null; // Store the original image scale to avoid cumulative scaling
@@ -1628,37 +1625,6 @@ function Viewport(canvas) {
     };
   }
 
-  /**
-     * Render the diagonal lines from viewport to edge of the canvas
-     */
-  function drawBeams() {
-    _beams.forEach(function (beam) {
-      canvas.remove(beam);
-    });
-
-    _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
@@ -1690,8 +1656,9 @@ function Viewport(canvas) {
       fill: 'transparent',
       width: _data.width,
       height: _data.height,
-      stroke: canvas.__type === 'canvas' ? 'transparent' : '#fff',
+      stroke: canvas.__type === 'canvas' ? 'transparent' : '#343434',
       strokeWidth: _borderWidth,
+      strokeUniform: true,
     });
 
     _rect.width += _borderWidth;
@@ -1719,9 +1686,7 @@ function Viewport(canvas) {
       canvas.getApertures().disable();
     }
 
-    if (canvas.__type !== 'canvas') {
-      drawBeams();
-    } else {
+    if (canvas.__type === 'canvas') {
       self.setFrame(canvas.__canvasFrameType);
     }
 

package.json

@@ -24,7 +24,8 @@
   },
   "scripts": {
     "lint": "eslint gulpfile.js 'examples/**/*.js' 'test/unit/**/*.js' 'src/**/*.js'",
-    "serve": "live-server --ignore=node_modules --port=50994 ./"
+    "serve": "live-server --ignore=node_modules --port=50994 ./",
+    "watch": "gulp watch"
   },
   "dependencies": {
     "jquery": "^2.2.4"

src/Viewport.js

@@ -7,8 +7,7 @@ var RulerHandler = require('./RulerHandler');
 var util = require('./util');
 
 function Viewport(canvas) {
-  var _beams = [];
-  var _borderWidth = 2;
+  var _borderWidth = 1;
   var _data = null;
   var _rect;
   var _baseImageScale = null; // Store the original image scale to avoid cumulative scaling
@@ -29,37 +28,6 @@ function Viewport(canvas) {
     };
   }
 
-  /**
-     * Render the diagonal lines from viewport to edge of the canvas
-     */
-  function drawBeams() {
-    _beams.forEach(function (beam) {
-      canvas.remove(beam);
-    });
-
-    _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
@@ -91,8 +59,9 @@ function Viewport(canvas) {
       fill: 'transparent',
       width: _data.width,
       height: _data.height,
-      stroke: canvas.__type === 'canvas' ? 'transparent' : '#fff',
+      stroke: canvas.__type === 'canvas' ? 'transparent' : '#343434',
       strokeWidth: _borderWidth,
+      strokeUniform: true,
     });
 
     _rect.width += _borderWidth;
@@ -120,9 +89,7 @@ function Viewport(canvas) {
       canvas.getApertures().disable();
     }
 
-    if (canvas.__type !== 'canvas') {
-      drawBeams();
-    } else {
+    if (canvas.__type === 'canvas') {
       self.setFrame(canvas.__canvasFrameType);
     }