diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index b78c724d6db..436854fb4da 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -95,7 +95,8 @@ this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(this, true); this.__objectSelectionDisposer = this.__objectSelectionMonitor.bind(this, false); this._firstLayoutDone = false; - this.callSuper('initialize', options); + // setting angle, skewX, skewY must occur after initial layout + this.callSuper('initialize', Object.assign({}, options, { angle: 0, skewX: 0, skewY: 0 })); this.forEachObject(function (object) { this.enterGroup(object, false); }, this); @@ -501,6 +502,12 @@ // reject layout requests before initialization layout return; } + var options = isFirstLayout && context.options; + var initialTransform = options && { + angle: options.angle || 0, + skewX: options.skewX || 0, + skewY: options.skewY || 0, + }; var center = this.getRelativeCenterPoint(); var result = this.getLayoutStrategyResult(this.layout, this._objects.concat(), context); if (result) { @@ -517,9 +524,10 @@ // clip path as well !isFirstLayout && this.layout !== 'clip-path' && this.clipPath && !this.clipPath.absolutePositioned && this._adjustObjectPosition(this.clipPath, diff); - if (!newCenter.eq(center)) { + if (!newCenter.eq(center) || initialTransform) { // set position this.setPositionByOrigin(newCenter, 'center', 'center'); + initialTransform && this.set(initialTransform); this.setCoords(); } } @@ -531,6 +539,7 @@ width: this.width, height: this.height, }; + initialTransform && this.set(initialTransform); } else { // no `result` so we return @@ -715,24 +724,6 @@ }), rotationCorrection = new fabric.Point(0, 0); - if (this.angle) { - var rad = degreesToRadians(this.angle), - sin = Math.abs(fabric.util.sin(rad)), - cos = Math.abs(fabric.util.cos(rad)); - sizeAfter.setXY( - sizeAfter.x * cos + sizeAfter.y * sin, - sizeAfter.x * sin + sizeAfter.y * cos - ); - bboxSizeAfter.setXY( - bboxSizeAfter.x * cos + bboxSizeAfter.y * sin, - bboxSizeAfter.x * sin + bboxSizeAfter.y * cos - ); - strokeWidthVector = fabric.util.rotateVector(strokeWidthVector, rad); - // correct center after rotating - var strokeCorrection = strokeWidthVector.multiply(origin.scalarAdd(-0.5).scalarDivide(-2)); - rotationCorrection = sizeAfter.subtract(size).scalarDivide(2).add(strokeCorrection); - calculatedCenter.addEquals(rotationCorrection); - } // calculate center and correction var originT = origin.scalarAdd(0.5); var originCorrection = sizeAfter.multiply(originT); diff --git a/test/visual/golden/group-layout/fit-content-skewX.png b/test/visual/golden/group-layout/fit-content-skewX.png new file mode 100644 index 00000000000..ddd314091d1 Binary files /dev/null and b/test/visual/golden/group-layout/fit-content-skewX.png differ diff --git a/test/visual/golden/group-layout/fit-content-skewY.png b/test/visual/golden/group-layout/fit-content-skewY.png new file mode 100644 index 00000000000..b5ef5ada5e0 Binary files /dev/null and b/test/visual/golden/group-layout/fit-content-skewY.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-0deg.png b/test/visual/golden/group-layout/origin-center-bottom-0deg.png new file mode 100644 index 00000000000..3eb6909e35e Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-0deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-120deg.png b/test/visual/golden/group-layout/origin-center-bottom-120deg.png new file mode 100644 index 00000000000..18eab5c2bb5 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-120deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-150deg.png b/test/visual/golden/group-layout/origin-center-bottom-150deg.png new file mode 100644 index 00000000000..d8644cf36e2 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-150deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-180deg.png b/test/visual/golden/group-layout/origin-center-bottom-180deg.png new file mode 100644 index 00000000000..285ffcce158 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-180deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-210deg.png b/test/visual/golden/group-layout/origin-center-bottom-210deg.png new file mode 100644 index 00000000000..2370898e68e Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-210deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-240deg.png b/test/visual/golden/group-layout/origin-center-bottom-240deg.png new file mode 100644 index 00000000000..6ae1753e279 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-240deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-270deg.png b/test/visual/golden/group-layout/origin-center-bottom-270deg.png new file mode 100644 index 00000000000..34cdbcf7421 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-270deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-300deg.png b/test/visual/golden/group-layout/origin-center-bottom-300deg.png new file mode 100644 index 00000000000..12e119859b4 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-300deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-30deg.png b/test/visual/golden/group-layout/origin-center-bottom-30deg.png new file mode 100644 index 00000000000..18465939588 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-30deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-330deg.png b/test/visual/golden/group-layout/origin-center-bottom-330deg.png new file mode 100644 index 00000000000..a432d2df320 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-330deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-60deg.png b/test/visual/golden/group-layout/origin-center-bottom-60deg.png new file mode 100644 index 00000000000..ea25a6bd674 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-60deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-bottom-90deg.png b/test/visual/golden/group-layout/origin-center-bottom-90deg.png new file mode 100644 index 00000000000..cc37ec6da7f Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-bottom-90deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-0deg.png b/test/visual/golden/group-layout/origin-center-center-0deg.png new file mode 100644 index 00000000000..bccbcf73619 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-0deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-120deg.png b/test/visual/golden/group-layout/origin-center-center-120deg.png new file mode 100644 index 00000000000..3cea36839cb Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-120deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-150deg.png b/test/visual/golden/group-layout/origin-center-center-150deg.png new file mode 100644 index 00000000000..f5851f49f89 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-150deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-180deg.png b/test/visual/golden/group-layout/origin-center-center-180deg.png new file mode 100644 index 00000000000..2f50cd0cc29 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-180deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-210deg.png b/test/visual/golden/group-layout/origin-center-center-210deg.png new file mode 100644 index 00000000000..e6d37ec6e48 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-210deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-240deg.png b/test/visual/golden/group-layout/origin-center-center-240deg.png new file mode 100644 index 00000000000..3604af1c326 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-240deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-270deg.png b/test/visual/golden/group-layout/origin-center-center-270deg.png new file mode 100644 index 00000000000..9c69678a770 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-270deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-300deg.png b/test/visual/golden/group-layout/origin-center-center-300deg.png new file mode 100644 index 00000000000..96a76fa5f05 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-300deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-30deg.png b/test/visual/golden/group-layout/origin-center-center-30deg.png new file mode 100644 index 00000000000..8db82fec225 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-30deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-330deg.png b/test/visual/golden/group-layout/origin-center-center-330deg.png new file mode 100644 index 00000000000..5134ed209fd Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-330deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-60deg.png b/test/visual/golden/group-layout/origin-center-center-60deg.png new file mode 100644 index 00000000000..8a736fb7030 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-60deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-center-90deg.png b/test/visual/golden/group-layout/origin-center-center-90deg.png new file mode 100644 index 00000000000..c26f08ece1b Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-center-90deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-0deg.png b/test/visual/golden/group-layout/origin-center-top-0deg.png new file mode 100644 index 00000000000..e7ccba3a774 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-0deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-120deg.png b/test/visual/golden/group-layout/origin-center-top-120deg.png new file mode 100644 index 00000000000..731ebb6a405 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-120deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-150deg.png b/test/visual/golden/group-layout/origin-center-top-150deg.png new file mode 100644 index 00000000000..41454709ac5 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-150deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-180deg.png b/test/visual/golden/group-layout/origin-center-top-180deg.png new file mode 100644 index 00000000000..6e14aedabfd Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-180deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-210deg.png b/test/visual/golden/group-layout/origin-center-top-210deg.png new file mode 100644 index 00000000000..9e8c3b6284e Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-210deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-240deg.png b/test/visual/golden/group-layout/origin-center-top-240deg.png new file mode 100644 index 00000000000..c612b1775b0 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-240deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-270deg.png b/test/visual/golden/group-layout/origin-center-top-270deg.png new file mode 100644 index 00000000000..6bb1fad5e8e Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-270deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-300deg.png b/test/visual/golden/group-layout/origin-center-top-300deg.png new file mode 100644 index 00000000000..3752a743d6b Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-300deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-30deg.png b/test/visual/golden/group-layout/origin-center-top-30deg.png new file mode 100644 index 00000000000..ff450cca39d Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-30deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-330deg.png b/test/visual/golden/group-layout/origin-center-top-330deg.png new file mode 100644 index 00000000000..8e4161d8894 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-330deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-60deg.png b/test/visual/golden/group-layout/origin-center-top-60deg.png new file mode 100644 index 00000000000..284c2296330 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-60deg.png differ diff --git a/test/visual/golden/group-layout/origin-center-top-90deg.png b/test/visual/golden/group-layout/origin-center-top-90deg.png new file mode 100644 index 00000000000..40fe0721fe1 Binary files /dev/null and b/test/visual/golden/group-layout/origin-center-top-90deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-0deg.png b/test/visual/golden/group-layout/origin-left-bottom-0deg.png new file mode 100644 index 00000000000..013cde4eebc Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-0deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-120deg.png b/test/visual/golden/group-layout/origin-left-bottom-120deg.png new file mode 100644 index 00000000000..b5656863223 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-120deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-150deg.png b/test/visual/golden/group-layout/origin-left-bottom-150deg.png new file mode 100644 index 00000000000..915f5972a00 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-150deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-180deg.png b/test/visual/golden/group-layout/origin-left-bottom-180deg.png new file mode 100644 index 00000000000..b2ecb022c2d Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-180deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-210deg.png b/test/visual/golden/group-layout/origin-left-bottom-210deg.png new file mode 100644 index 00000000000..6033fe5a58f Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-210deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-240deg.png b/test/visual/golden/group-layout/origin-left-bottom-240deg.png new file mode 100644 index 00000000000..14db0f7ce4e Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-240deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-270deg.png b/test/visual/golden/group-layout/origin-left-bottom-270deg.png new file mode 100644 index 00000000000..838b6c9ce1d Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-270deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-300deg.png b/test/visual/golden/group-layout/origin-left-bottom-300deg.png new file mode 100644 index 00000000000..bb3e24fae44 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-300deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-30deg.png b/test/visual/golden/group-layout/origin-left-bottom-30deg.png new file mode 100644 index 00000000000..1e4ba6e1438 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-30deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-330deg.png b/test/visual/golden/group-layout/origin-left-bottom-330deg.png new file mode 100644 index 00000000000..e390407779e Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-330deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-60deg.png b/test/visual/golden/group-layout/origin-left-bottom-60deg.png new file mode 100644 index 00000000000..8c307305e6c Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-60deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-bottom-90deg.png b/test/visual/golden/group-layout/origin-left-bottom-90deg.png new file mode 100644 index 00000000000..b7caa8bb9b8 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-bottom-90deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-0deg.png b/test/visual/golden/group-layout/origin-left-center-0deg.png new file mode 100644 index 00000000000..395cec2e53d Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-0deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-120deg.png b/test/visual/golden/group-layout/origin-left-center-120deg.png new file mode 100644 index 00000000000..b9d9286c246 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-120deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-150deg.png b/test/visual/golden/group-layout/origin-left-center-150deg.png new file mode 100644 index 00000000000..cf90e262fbd Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-150deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-180deg.png b/test/visual/golden/group-layout/origin-left-center-180deg.png new file mode 100644 index 00000000000..d84a37c7725 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-180deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-210deg.png b/test/visual/golden/group-layout/origin-left-center-210deg.png new file mode 100644 index 00000000000..c8156c2afd0 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-210deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-240deg.png b/test/visual/golden/group-layout/origin-left-center-240deg.png new file mode 100644 index 00000000000..67e4ea4aa11 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-240deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-270deg.png b/test/visual/golden/group-layout/origin-left-center-270deg.png new file mode 100644 index 00000000000..a9c1566086a Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-270deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-300deg.png b/test/visual/golden/group-layout/origin-left-center-300deg.png new file mode 100644 index 00000000000..c1e83f5cdb6 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-300deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-30deg.png b/test/visual/golden/group-layout/origin-left-center-30deg.png new file mode 100644 index 00000000000..72fd99bc6ba Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-30deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-330deg.png b/test/visual/golden/group-layout/origin-left-center-330deg.png new file mode 100644 index 00000000000..5ab165853ed Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-330deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-60deg.png b/test/visual/golden/group-layout/origin-left-center-60deg.png new file mode 100644 index 00000000000..8cc880af55d Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-60deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-center-90deg.png b/test/visual/golden/group-layout/origin-left-center-90deg.png new file mode 100644 index 00000000000..17fc3480a17 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-center-90deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-0deg.png b/test/visual/golden/group-layout/origin-left-top-0deg.png new file mode 100644 index 00000000000..cd7cefccce2 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-0deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-120deg.png b/test/visual/golden/group-layout/origin-left-top-120deg.png new file mode 100644 index 00000000000..f6c16f8384e Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-120deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-150deg.png b/test/visual/golden/group-layout/origin-left-top-150deg.png new file mode 100644 index 00000000000..fc944fede75 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-150deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-180deg.png b/test/visual/golden/group-layout/origin-left-top-180deg.png new file mode 100644 index 00000000000..076c8cf6b80 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-180deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-210deg.png b/test/visual/golden/group-layout/origin-left-top-210deg.png new file mode 100644 index 00000000000..926bd7246b0 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-210deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-240deg.png b/test/visual/golden/group-layout/origin-left-top-240deg.png new file mode 100644 index 00000000000..4258ac86e74 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-240deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-270deg.png b/test/visual/golden/group-layout/origin-left-top-270deg.png new file mode 100644 index 00000000000..0082d58bdd8 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-270deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-300deg.png b/test/visual/golden/group-layout/origin-left-top-300deg.png new file mode 100644 index 00000000000..f5ae760d0c3 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-300deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-30deg.png b/test/visual/golden/group-layout/origin-left-top-30deg.png new file mode 100644 index 00000000000..0f7a29bcabb Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-30deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-330deg.png b/test/visual/golden/group-layout/origin-left-top-330deg.png new file mode 100644 index 00000000000..b6e21da7780 Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-330deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-60deg.png b/test/visual/golden/group-layout/origin-left-top-60deg.png new file mode 100644 index 00000000000..9693eacb5cc Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-60deg.png differ diff --git a/test/visual/golden/group-layout/origin-left-top-90deg.png b/test/visual/golden/group-layout/origin-left-top-90deg.png new file mode 100644 index 00000000000..6c870c96e9f Binary files /dev/null and b/test/visual/golden/group-layout/origin-left-top-90deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-0deg.png b/test/visual/golden/group-layout/origin-right-bottom-0deg.png new file mode 100644 index 00000000000..f3d3be599d1 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-0deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-120deg.png b/test/visual/golden/group-layout/origin-right-bottom-120deg.png new file mode 100644 index 00000000000..5aca6f2c82b Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-120deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-150deg.png b/test/visual/golden/group-layout/origin-right-bottom-150deg.png new file mode 100644 index 00000000000..fb1ed810616 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-150deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-180deg.png b/test/visual/golden/group-layout/origin-right-bottom-180deg.png new file mode 100644 index 00000000000..dafed5fc24f Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-180deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-210deg.png b/test/visual/golden/group-layout/origin-right-bottom-210deg.png new file mode 100644 index 00000000000..20190ef2098 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-210deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-240deg.png b/test/visual/golden/group-layout/origin-right-bottom-240deg.png new file mode 100644 index 00000000000..aab7e909f2a Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-240deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-270deg.png b/test/visual/golden/group-layout/origin-right-bottom-270deg.png new file mode 100644 index 00000000000..23ea7dd0116 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-270deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-300deg.png b/test/visual/golden/group-layout/origin-right-bottom-300deg.png new file mode 100644 index 00000000000..6925210d935 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-300deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-30deg.png b/test/visual/golden/group-layout/origin-right-bottom-30deg.png new file mode 100644 index 00000000000..c322daea3af Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-30deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-330deg.png b/test/visual/golden/group-layout/origin-right-bottom-330deg.png new file mode 100644 index 00000000000..8049b35bafa Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-330deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-60deg.png b/test/visual/golden/group-layout/origin-right-bottom-60deg.png new file mode 100644 index 00000000000..88b820a108e Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-60deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-bottom-90deg.png b/test/visual/golden/group-layout/origin-right-bottom-90deg.png new file mode 100644 index 00000000000..ba0cc7c4f87 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-bottom-90deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-0deg.png b/test/visual/golden/group-layout/origin-right-center-0deg.png new file mode 100644 index 00000000000..a4ead957249 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-0deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-120deg.png b/test/visual/golden/group-layout/origin-right-center-120deg.png new file mode 100644 index 00000000000..62893d709eb Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-120deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-150deg.png b/test/visual/golden/group-layout/origin-right-center-150deg.png new file mode 100644 index 00000000000..f83c52596f3 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-150deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-180deg.png b/test/visual/golden/group-layout/origin-right-center-180deg.png new file mode 100644 index 00000000000..383d36f9cf4 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-180deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-210deg.png b/test/visual/golden/group-layout/origin-right-center-210deg.png new file mode 100644 index 00000000000..3d6149eb7e5 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-210deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-240deg.png b/test/visual/golden/group-layout/origin-right-center-240deg.png new file mode 100644 index 00000000000..ab297b072f8 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-240deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-270deg.png b/test/visual/golden/group-layout/origin-right-center-270deg.png new file mode 100644 index 00000000000..63a1f23e9ea Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-270deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-300deg.png b/test/visual/golden/group-layout/origin-right-center-300deg.png new file mode 100644 index 00000000000..0cd016b0955 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-300deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-30deg.png b/test/visual/golden/group-layout/origin-right-center-30deg.png new file mode 100644 index 00000000000..c20a0c01078 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-30deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-330deg.png b/test/visual/golden/group-layout/origin-right-center-330deg.png new file mode 100644 index 00000000000..f4a0c37a5ad Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-330deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-60deg.png b/test/visual/golden/group-layout/origin-right-center-60deg.png new file mode 100644 index 00000000000..137ef09729f Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-60deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-center-90deg.png b/test/visual/golden/group-layout/origin-right-center-90deg.png new file mode 100644 index 00000000000..95c48d7c91c Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-center-90deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-0deg.png b/test/visual/golden/group-layout/origin-right-top-0deg.png new file mode 100644 index 00000000000..1d11053ef29 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-0deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-120deg.png b/test/visual/golden/group-layout/origin-right-top-120deg.png new file mode 100644 index 00000000000..0f4d2d0d111 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-120deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-150deg.png b/test/visual/golden/group-layout/origin-right-top-150deg.png new file mode 100644 index 00000000000..d02c586acd4 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-150deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-180deg.png b/test/visual/golden/group-layout/origin-right-top-180deg.png new file mode 100644 index 00000000000..443d927cb9b Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-180deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-210deg.png b/test/visual/golden/group-layout/origin-right-top-210deg.png new file mode 100644 index 00000000000..ccf21dd93c3 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-210deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-240deg.png b/test/visual/golden/group-layout/origin-right-top-240deg.png new file mode 100644 index 00000000000..ceda9613feb Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-240deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-270deg.png b/test/visual/golden/group-layout/origin-right-top-270deg.png new file mode 100644 index 00000000000..cda83108672 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-270deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-300deg.png b/test/visual/golden/group-layout/origin-right-top-300deg.png new file mode 100644 index 00000000000..fa8d522401f Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-300deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-30deg.png b/test/visual/golden/group-layout/origin-right-top-30deg.png new file mode 100644 index 00000000000..b88ee15da92 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-30deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-330deg.png b/test/visual/golden/group-layout/origin-right-top-330deg.png new file mode 100644 index 00000000000..b530b521a0b Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-330deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-60deg.png b/test/visual/golden/group-layout/origin-right-top-60deg.png new file mode 100644 index 00000000000..4f043f9fd16 Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-60deg.png differ diff --git a/test/visual/golden/group-layout/origin-right-top-90deg.png b/test/visual/golden/group-layout/origin-right-top-90deg.png new file mode 100644 index 00000000000..50d05cd769b Binary files /dev/null and b/test/visual/golden/group-layout/origin-right-top-90deg.png differ diff --git a/test/visual/group_layout.js b/test/visual/group_layout.js index f546b71acc8..c5dee9f2931 100644 --- a/test/visual/group_layout.js +++ b/test/visual/group_layout.js @@ -91,7 +91,6 @@ test: 'fit-content layout', code: fitContentLayoutRelative, golden: 'group-layout/fit-content.png', - newModule: 'Group Layout', percentage: 0.06, width: 400, height: 300 @@ -118,6 +117,44 @@ height: 300 }); + function fitContentLayoutWithSkewX(canvas, callback) { + var g = createGroupForLayoutTests('fit-content layout', { + backgroundColor: 'blue', + skewX: 45 + }); + canvas.add(g); + canvas.renderAll(); + callback(canvas.lowerCanvasEl); + } + + tests.push({ + test: 'fit-content layout', + code: fitContentLayoutWithSkewX, + golden: 'group-layout/fit-content-skewX.png', + percentage: 0.06, + width: 400 + Math.ceil(300 / Math.SQRT2), + height: 300 + }); + + function fitContentLayoutWithSkewY(canvas, callback) { + var g = createGroupForLayoutTests('fit-content layout', { + backgroundColor: 'blue', + skewY: 45 + }); + canvas.add(g); + canvas.renderAll(); + callback(canvas.lowerCanvasEl); + } + + tests.push({ + test: 'fit-content layout', + code: fitContentLayoutWithSkewY, + golden: 'group-layout/fit-content-skewY.png', + percentage: 0.06, + width: 400, + height: 400 + Math.ceil(400 / Math.SQRT2) + }); + function nestedLayout(canvas, callback) { var rect3 = new fabric.Rect({ width: 100, @@ -214,7 +251,6 @@ test: 'fit-content layout add object', code: fitContentLayoutAdd, golden: 'group-layout/fit-content3.png', - newModule: 'Group Layout', percentage: 0.06, width: 400, height: 300 @@ -323,37 +359,39 @@ }); function createObjectsForOriginTests(originX, originY, options) { - var rect1 = new fabric.Rect({ top: 100, left: 150, width: 30, height: 10, strokeWidth: 0 }), - rect2 = new fabric.Rect({ top: 120, left: 200, width: 10, height: 40, strokeWidth: 0 }), - controlPoint = new fabric.Circle({ radius: 5, fill: 'blue', left: 150, top: 100, originX: 'center', originY: 'center' }); + var rect1 = new fabric.Rect({ left: 150, top: 100, width: 30, height: 10, strokeWidth: 0 }), + rect2 = new fabric.Rect({ left: 200, top: 120, width: 10, height: 40, strokeWidth: 0 }), + controlPoint = new fabric.Circle({ radius: 5, fill: 'blue', left: 150, top: 100, originX: 'center', originY: 'center' }), + tlControlPoint = new fabric.Circle({ radius: 5, fill: 'red', left: 150, top: 100, strokeWidth: 0 }); - var g = new fabric.Group([rect1, rect2], Object.assign({}, options, { - originX, originY, strokeWidth: 1, stroke: 'blue' + var g = new fabric.Group([rect1, rect2, tlControlPoint], Object.assign({}, options, { + originX, originY, backgroundColor: 'pink' })); - return [controlPoint, g]; + return [g, controlPoint]; } var originX = ['left', 'center', 'right']; var originY = ['top', 'center', 'bottom']; -/* + for (let angle = 0; angle < 360; angle += 30) { originX.forEach(ox => { originY.forEach(oy => { tests.push({ - test: `layout with originX=${ox}, originY=${oy} and angle=${angle} values - angle is WRONG`, + test: `layout with originX=${ox}, originY=${oy} and angle=${angle} values`, code: function (canvas, callback) { - canvas.add(...createObjectsForOriginTests(ox, oy, { angle })); + canvas.add.apply(canvas, createObjectsForOriginTests(ox, oy, { angle })); + canvas.setViewportTransform([1, 0, 0, 1, -50, 0]); canvas.renderAll(); callback(canvas.lowerCanvasEl); }, golden: `group-layout/origin-${ox}-${oy}-${angle}deg.png`, - percentage: 0.06, - width: 300, - height: 300 + percentage: 0.001, + width: 200, + height: 200 }); }); }); } -*/ + tests.forEach(visualTestLoop(QUnit)); })();