Updates Aligning Guidelines extension to support excluding certain ob…

.codesandbox/templates/vanilla/src/index.ts

@@ -1,6 +1,6 @@
 import * as fabric from 'fabric';
 import './styles.css';
-import { testCase } from './testcases/clipPathSelection';
+import { testCase } from './testcases/guidelines';
 
 const el = document.getElementById('canvas');
 const canvas = (window.canvas = new fabric.Canvas(el, {

.codesandbox/templates/vanilla/src/testcases/guidelines.ts

@@ -2,13 +2,45 @@ import * as fabric from 'fabric';
 import { initAligningGuidelines } from 'fabric/extensions';
 
 export async function testCase(canvas: fabric.Canvas) {
-  initAligningGuidelines(canvas, {
-    width: 2,
-    margin: 60,
-  });
+  initAligningGuidelines(
+    canvas,
+    {
+      width: 2,
+      margin: 60,
+    },
+    // Filter predicate to exclude red filled objects from snapping
+    (potentialSnappingTarget: fabric.FabricObject) =>
+      potentialSnappingTarget.fill === 'red',
+  );
 
-  const rect = new fabric.Rect({ width: 50, height: 50, fill: 'blue' });
-  const rect2 = new fabric.Rect({ width: 50, height: 50, fill: 'blue' });
+  const rect = new fabric.Rect({
+    width: 50,
+    height: 50,
+    fill: 'blue',
+    top: 10,
+    left: 10,
+  });
+  const rect2 = new fabric.Rect({
+    width: 50,
+    height: 50,
+    top: 100,
+    left: 100,
+    fill: 'blue',
+  });
+  const rect3 = new fabric.Rect({
+    width: 50,
+    height: 50,
+    top: 175,
+    left: 75,
+    fill: 'red',
+  });
+  const rect4 = new fabric.Rect({
+    width: 50,
+    height: 50,
+    top: 75,
+    left: 350,
+    fill: 'red',
+  });
 
-  canvas.add(rect, rect2);
+  canvas.add(rect, rect2, rect3, rect4);
 }