From 84ed7d8c23abad388a6bf9d8670eb9d148a0bf6b Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@photowall.com>
Date: Thu, 16 Apr 2026 13:48:40 +0200
Subject: [PATCH] 8346: changed border color and width inside image editor
 (#13)

---
 dist/generated-image-editor.js | 43 ++++------------------------------
 package.json                   |  3 ++-
 src/Viewport.js                | 41 ++++----------------------------
 3 files changed, 10 insertions(+), 77 deletions(-)

diff --git a/dist/generated-image-editor.js b/dist/generated-image-editor.js
index 593b126..78cbd37 100644
--- a/dist/generated-image-editor.js
+++ b/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);
     }
 
diff --git a/package.json b/package.json
index 1e22db3..4639510 100644
--- a/package.json
+++ b/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"
diff --git a/src/Viewport.js b/src/Viewport.js
index 024a6f2..5986166 100644
--- a/src/Viewport.js
+++ b/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);
     }