Merge branch 'master' into website-submodule

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -54,6 +54,7 @@ body:
         - 6.0.0-beta5
         - 6.0.0-beta4
         - 6.0.0-beta3
+        - 6.0.0-beta12
         - 6.0.0-beta11
         - 6.0.0-beta10
         - 6.0.0-beta1
@@ -95,6 +96,7 @@ body:
       label: Node Version (if applicable)
       description: Provide the version if the bug occurs in Node.js
       options:
+        - 20.5.1
         - 20.5.0
         - 20.4.0
         - 20.3.1
@@ -114,6 +116,7 @@ body:
         - 19.1.0
         - 19.0.1
         - 19.0.0
+        - 18.17.1
         - 18.17.0
         - 18.16.1
         - 18.16.0
@@ -150,6 +153,7 @@ body:
         - 17.1.0
         - 17.0.1
         - 17.0.0
+        - 16.20.2
         - 16.20.1
         - 16.20.0
         - 16.19.1

CHANGELOG.md

@@ -4,6 +4,12 @@
 
 - CD(): website submodule [#9165](https://github.com/fabricjs/fabric.js/pull/9165)
 
+## [6.0.0-beta12]
+
+- fix(Object): border rendering with padding under group [#9161](https://github.com/fabricjs/fabric.js/pull/9161)
+- fix(MultiSelection): add target from behind active selection [#8744](https://github.com/fabricjs/fabric.js/issues/8744)
+- test(): fix snapshots by removing version [#9164](https://github.com/fabricjs/fabric.js/pull/9164)
+
 ## [6.0.0-beta11]
 
 - patch(): Avoid unwanted mutation to passed objects array to Group constructor [#9151](https://github.com/fabricjs/fabric.js/pull/9151)

package.json

@@ -2,7 +2,7 @@
   "name": "fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
   "homepage": "http://fabricjs.com/",
-  "version": "6.0.0-beta11",
+  "version": "6.0.0-beta12",
   "author": "Juriy Zaytsev <kangax@gmail.com>",
   "contributors": [
     {

src/canvas/Canvas.ts

@@ -1481,11 +1481,13 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
         const prevActiveObjects =
           activeSelection.getObjects() as FabricObject[];
         if (target === activeSelection) {
-          // find target from active objects
-          target = this.searchPossibleTargets(
-            prevActiveObjects,
-            this.getPointer(e, true)
-          );
+          const pointer = this.getPointer(e, true);
+          target =
+            // first search active objects for a target to remove
+            this.searchPossibleTargets(prevActiveObjects, pointer) ||
+            //  if not found, search under active selection for a target to add
+            // `prevActiveObjects` will be searched but we already know they will not be found
+            this.searchPossibleTargets(this._objects, pointer);
           // if nothing is found bail out
           if (!target || !target.selectable) {
             return false;

src/shapes/IText/__snapshots__/ITextBehavior.test.ts.snap

@@ -136,7 +136,6 @@ exports[`text imperative changes insertChars 2`] = `
   "text": "tabest",
   "top": 0,
   "type": "IText",
-  "version": "6.0.0-beta10",
   "width": 58,
 }
 `;
@@ -258,7 +257,6 @@ exports[`text imperative changes insertChars and removes chars 2`] = `
   "text": "tabst",
   "top": 0,
   "type": "IText",
-  "version": "6.0.0-beta10",
   "width": 47,
 }
 `;
@@ -342,7 +340,6 @@ exports[`text imperative changes insertChars and removes chars 4`] = `
   "text": "tab",
   "top": 0,
   "type": "IText",
-  "version": "6.0.0-beta10",
   "width": 31,
 }
 `;
@@ -550,7 +547,6 @@ exports[`text imperative changes insertChars can accept some style for the new t
 aest",
   "top": 0,
   "type": "IText",
-  "version": "6.0.0-beta10",
   "width": 39,
 }
 `;
@@ -725,7 +721,6 @@ exports[`text imperative changes insertChars handles new lines correctly 2`] = `
 est",
   "top": 0,
   "type": "IText",
-  "version": "6.0.0-beta10",
   "width": 31,
 }
 `;
@@ -804,7 +799,6 @@ exports[`text imperative changes removeChars 2`] = `
   "text": "tt",
   "top": 0,
   "type": "IText",
-  "version": "6.0.0-beta10",
   "width": 14,
 }
 `;

src/shapes/Object/InteractiveObject.ts

@@ -462,7 +462,10 @@ export class InteractiveFabricObject<
               // and is the qrDecompose of a matrix that takes in account zoom too
               new Point(options.scaleX, options.scaleY)
         ).scalarMultiply(this.strokeWidth);
-      size = bbox.add(stroke).scalarAdd(this.borderScaleFactor);
+      size = bbox
+        .add(stroke)
+        .scalarAdd(this.borderScaleFactor)
+        .scalarAdd(this.padding * 2);
     } else {
       size = this._calculateCurrentDimensions().scalarAdd(
         this.borderScaleFactor

src/shapes/Text/__snapshots__/Text.spec.ts.snap

@@ -193,7 +193,6 @@ exports[`Text toObject 1`] = `
   "top": 0,
   "type": "Text",
   "underline": false,
-  "version": "6.0.0-beta10",
   "visible": true,
   "width": 60,
 }

src/shapes/__snapshots__/Textbox.spec.ts.snap

@@ -51,7 +51,6 @@ fox",
   "top": 0,
   "type": "Textbox",
   "underline": false,
-  "version": "6.0.0-beta10",
   "visible": true,
   "width": 102,
 }
@@ -67,7 +66,6 @@ brown
 fox",
   "top": 0,
   "type": "Textbox",
-  "version": "6.0.0-beta10",
   "width": 102,
 }
 `;
@@ -157,7 +155,6 @@ fox",
   "top": 0,
   "type": "Textbox",
   "underline": false,
-  "version": "6.0.0-beta10",
   "visible": true,
   "width": 120,
 }

test/unit/canvas.js

@@ -392,7 +392,7 @@
     assert.equal(activeSelection[1], rect1, 'then rect1');
   });
 
-  QUnit.test('start multiselection: preserve', function (assert) {
+  QUnit.test('start multiselection: canvas-stacking', function (assert) {
     var rect1 = new fabric.Rect();
     var rect2 = new fabric.Rect();
     canvas.add(rect1, rect2);
@@ -435,7 +435,6 @@
     assert.equal(isFired, true, 'selected on rect3 fired');
   });
 
-
   QUnit.test('continuing multiselection respects order of objects', function (assert) {
     const rect1 = new fabric.Rect();
     const rect2 = new fabric.Rect();
@@ -520,6 +519,19 @@
     assert.ok(canvas.getActiveSelection() === canvas.getActiveObject(), 'still selected');
   });
 
+  QUnit.test('multiselection: selecting a target behind active selection', assert => {
+    const rect1 = new fabric.Rect({ left: 10, width: 10, height: 10 });
+    const rect2 = new fabric.Rect({ width: 10, height: 10 });
+    const rect3 = new fabric.Rect({ top: 10, width: 10, height: 10 });
+    canvas.add(rect1, rect2, rect3);
+    initActiveSelection(canvas, rect1, rect3);
+    assert.ok(canvas.getActiveSelection() === canvas.getActiveObject(), 'selected');
+    assert.deepEqual(canvas.getActiveObjects(), [rect1, rect3], 'created');
+    canvas.__onMouseDown({ clientX: 7, clientY: 7, [canvas.selectionKey]: true });
+    assert.deepEqual(canvas.getActiveObjects(), [rect1, rect2, rect3], 'added from behind active selection');
+    assert.ok(canvas.getActiveSelection() === canvas.getActiveObject(), 'still selected');
+  });
+
   QUnit.test('setActiveObject fires deselected', function(assert) {
     var isFired = false;
     var rect1 = new fabric.Rect();

test/visual/control_rendering.js

@@ -60,20 +60,35 @@
     fabricClass: 'Canvas',
   });
 
-  function paddingControlsRendering(canvas, callback) {
-    var rect = new fabric.Rect({
+  function paddingControlsRendering(group, canvas, callback) {
+    const rect = new fabric.Rect({
       width: 90, height: 90, strokeWidth: 2, padding: 8,
       fill: 'orange', stroke: 'green', top: 55, left: 55,
     });
-    canvas.add(rect);
+    const target = group ? new fabric.Group([rect]) : rect;
+    if (group) {
+      target.set({ scaleX: 2 });
+      rect.set({ scaleX: 0.5 });
+    }
+    canvas.add(target);
     canvas.setActiveObject(rect);
     canvas.renderAll();
     callback(canvas.lowerCanvasEl);
   }
 
   tests.push({
     test: 'Rect with padding',
-    code: paddingControlsRendering,
+    code: paddingControlsRendering.bind(null, false),
+    golden: 'controls2.png',
+    percentage: 0.02,
+    width: 200,
+    height: 200,
+    fabricClass: 'Canvas',
+  });
+
+  tests.push({
+    test: 'Rect with padding under group',
+    code: paddingControlsRendering.bind(null, true),
     golden: 'controls2.png',
     percentage: 0.02,
     width: 200,
@@ -321,11 +336,12 @@
     fabricClass: 'Canvas',
   });
 
-  function controlBoxes2(canvas, callback) {
+  function controlBoxes2(padding, canvas, callback) {
     canvas.loadFromJSON('{"version":"5.2.0","objects":[{"type":"Rect","version":"5.2.0","left":38,"top":201,"width":150,"height":150,"fill":"red","skewX":0.15,"skewY":36},{"type":"Rect","version":"5.2.0","left":20,"top":2,"width":150,"height":150,"fill":"#020aed","scaleX":1.24,"scaleY":0.81,"angle":35.95,"skewX":25.46},{"type":"Group","version":"5.2.0","left":152.65,"top":21,"width":320.4,"height":335.5,"scaleX":0.75,"skewY":24.57, "objects":[{"type":"Rect","version":"5.2.0","left":-29.85,"top":-167.75,"width":150,"height":150,"fill":"green","angle":30,"skewX":14.71,"skewY":36, "flipX": true, "flipY": true},{"type":"Rect","version":"5.2.0","left":-29.85,"top":-167.75,"width":150,"height":150,"fill":"yellow","angle":45,"skewX":14.71}]},{"type":"Group","version":"5.2.0","left":329.65,"top":65,"width":320.4,"height":335.5,"scaleX":1.29,"scaleY":1.29, "flipX": true,"objects":[{"type":"Rect","version":"5.2.0","left":-29.85,"top":-167.75,"width":150,"height":150,"fill":"purple","angle":30,"skewX":14.71,"skewY":36},{"type":"Rect","version":"5.2.0","left":-29.85,"top":-167.75,"width":150,"height":150,"fill":"pink","angle":45,"skewX":14.71}]}]}')
       .then(function() {
         canvas.renderAll();
-        canvas.getObjects().forEach(function(object) {
+        canvas.getObjects().forEach(function (object) {
+          object.padding = padding;
           object.borderScaleFactor = 3;
           object.transparentCorners = false;
           object._renderControls(canvas.contextContainer, {
@@ -349,13 +365,23 @@
 
   tests.push({
     test: 'controlboxes with skewY and flipX',
-    code: controlBoxes2,
+    code: controlBoxes2.bind(null, 0),
     golden: 'controls13.png',
     percentage: 0.002,
     width: 700,
     height: 600,
     fabricClass: 'Canvas',
   });
 
+    tests.push({
+    test: 'controlboxes with skewY and flipX and padding',
+    code: controlBoxes2.bind(null, 10),
+    golden: 'controls14.png',
+    percentage: 0.002,
+    width: 700,
+    height: 600,
+    fabricClass: 'Canvas',
+  });
+
   tests.forEach(visualTestLoop(QUnit));
 })();

toMatchRoundedSnapshot.ts

@@ -16,7 +16,7 @@ function roundDeep(received: any, key: string | number) {
 
 expect.extend({
   toMatchRoundedSnapshot(
-    received: Record<string, unknown>,
+    { version, ...received }: Record<string, unknown>,
     keys?: string[],
     ...propertiesOrHint
   ) {