From 49921a26a9a4052f30fa82a4fa6472826ab88098 Mon Sep 17 00:00:00 2001
From: Frank John Begornia <frank.begornia@yahoo.com>
Date: Thu, 2 Apr 2026 03:33:19 +0800
Subject: [PATCH] Add centering guidelines script and update script references
 in designer view

---
 public/designer/js/centering_guidelines.js  | 90 +++++++++++++++++++++
 resources/views/designer/designer.blade.php |  4 +-
 2 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 public/designer/js/centering_guidelines.js

diff --git a/public/designer/js/centering_guidelines.js b/public/designer/js/centering_guidelines.js
new file mode 100644
index 0000000..761e781
--- /dev/null
+++ b/public/designer/js/centering_guidelines.js
@@ -0,0 +1,90 @@
+/**
+ * Augments canvas by assigning to `onObjectMove` and `onAfterRender`.
+ * This kind of sucks because other code using those methods will stop functioning.
+ * Need to fix it by replacing callbacks with pub/sub kind of subscription model.
+ * (or maybe use existing fabric.util.fire/observe (if it won't be too slow))
+ */
+function initCenteringGuidelines(canvas) {
+
+  var canvasWidth = canvas.getWidth(),
+      canvasHeight = canvas.getHeight(),
+      canvasWidthCenter = canvasWidth / 2,
+      canvasHeightCenter = canvasHeight / 2,
+      canvasWidthCenterMap = { },
+      canvasHeightCenterMap = { },
+      centerLineMargin = 4,
+      centerLineColor = 'rgba(255,0,241,0.5)',
+      centerLineWidth = 1,
+      ctx = canvas.getSelectionContext(),
+      viewportTransform;
+
+  for (var i = canvasWidthCenter - centerLineMargin, len = canvasWidthCenter + centerLineMargin; i <= len; i++) {
+    canvasWidthCenterMap[Math.round(i)] = true;
+  }
+  for (var i = canvasHeightCenter - centerLineMargin, len = canvasHeightCenter + centerLineMargin; i <= len; i++) {
+    canvasHeightCenterMap[Math.round(i)] = true;
+  }
+
+  function showVerticalCenterLine() {
+    showCenterLine(canvasWidthCenter + 0.5, 0, canvasWidthCenter + 0.5, canvasHeight);
+  }
+
+  function showHorizontalCenterLine() {
+    showCenterLine(0, canvasHeightCenter + 0.5, canvasWidth, canvasHeightCenter + 0.5);
+  }
+
+  function showCenterLine(x1, y1, x2, y2) {
+    ctx.save();
+    ctx.strokeStyle = centerLineColor;
+    ctx.lineWidth = centerLineWidth;
+    ctx.beginPath();
+    ctx.moveTo(x1 * viewportTransform[0], y1 * viewportTransform[3]);
+    ctx.lineTo(x2 * viewportTransform[0], y2 * viewportTransform[3]);
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  var afterRenderActions = [],
+      isInVerticalCenter,
+      isInHorizontalCenter;
+
+  canvas.on('mouse:down', function () {
+    viewportTransform = canvas.viewportTransform;
+  });
+
+  canvas.on('object:moving', function(e) {
+    var object = e.target,
+        objectCenter = object.getCenterPoint(),
+        transform = canvas._currentTransform;
+
+    if (!transform) return;
+
+    isInVerticalCenter = Math.round(objectCenter.x) in canvasWidthCenterMap,
+    isInHorizontalCenter = Math.round(objectCenter.y) in canvasHeightCenterMap;
+
+    if (isInHorizontalCenter || isInVerticalCenter) {
+      object.setPositionByOrigin(new fabric.Point((isInVerticalCenter ? canvasWidthCenter : objectCenter.x), (isInHorizontalCenter ? canvasHeightCenter : objectCenter.y)), 'center', 'center');
+    }
+  });
+
+  canvas.on('before:render', function() {
+    if (canvas.contextTop) {
+      canvas.clearContext(canvas.contextTop);
+    }
+  });
+
+  canvas.on('after:render', function() {
+    if (isInVerticalCenter) {
+      showVerticalCenterLine();
+    }
+    if (isInHorizontalCenter) {
+      showHorizontalCenterLine();
+    }
+  });
+
+  canvas.on('mouse:up', function() {
+    // clear these values, to stop drawing guidelines once mouse is up
+    isInVerticalCenter = isInHorizontalCenter = null;
+    canvas.renderAll();
+  });
+}
diff --git a/resources/views/designer/designer.blade.php b/resources/views/designer/designer.blade.php
index b6b7a59..ac670ee 100644
--- a/resources/views/designer/designer.blade.php
+++ b/resources/views/designer/designer.blade.php
@@ -886,8 +886,8 @@
         <script src="{{asset('/designer/js/custom-script.js')}}"></script>
         <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
         <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
-        <script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
-        <script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
+        <script src="{{asset('/designer/js/centering_guidelines.js')}}"></script>
+        <script src="{{asset('/designer/js/aligning_guidelines.js')}}"></script>
         <script>
             
             $(document).ready(function() {