diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index 2c9fa87af26..2a912855eb6 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -96,7 +96,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); @@ -500,6 +501,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) { @@ -516,9 +523,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(); } } @@ -530,6 +538,7 @@ width: this.width, height: this.height, }; + initialTransform && this.set(initialTransform); } else { // no `result` so we return @@ -714,24 +723,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..265f51a69b1 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..f6da1bf1e79 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..1fa1786add0 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..20de9145b0b 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..33ef0a5c821 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..14e0cd4c818 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..e5946e323a5 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..0a427d32657 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..24e3fc897d8 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..9863700c917 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..deaaa358681 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..3fc59acb4ac 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..d53d262e010 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..db7c2c9c03b 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..2d0ac8e4d2b 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..164537631bd 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..ad9347edc25 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..02b9c3bfd11 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..1c13d35bfee 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..8014d3d2158 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..bd07b203934 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..6d89a899a88 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..c565b5754ec 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..c3730441f5d 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..5f993a92a5a 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..5ede8644e0d 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..438d5594691 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..328be916317 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..25f1ce24bdd 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..4f1caac5fa2 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..7c8a890db37 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..6bd1f1325af 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..ca7d2a34a52 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..a72551cd656 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..97ee250eb49 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..0fb510c14a8 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..6b6bbf6cce0 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..996f10d3dcb 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..04d8c7dcb13 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..515ca5a564e 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..f755ca7a1c9 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..99f59a5fad5 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..21b45cccec4 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..2271f7b5b32 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..2e9d839bb93 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..e91b9083ad5 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..eaddbe6bdad 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..ecad59efbdc 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..e0b063a5a01 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..cb17fe2d572 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..b61b9a3ea4c 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..d09180fd141 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..4214c5cea37 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..fdaa182597d 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..ee9e2578d23 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..618a2df8d7a 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..f62b06a97f7 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..d26c3b49249 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..127ff4fa024 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..f1f515ad4d0 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..7b6b253d09c 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..a90cb56f4cf 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..0779934636b 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..b9d6b1502e1 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..430790394d2 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..224acd1d7f1 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..3ec7584b08b 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..bb97fc28e43 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..5a6a1a60af3 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..1ef3cc1caa5 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..2f3084bd655 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..c871b0f0ced 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..2e71b0e0f5e 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..c4ff89c0d00 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..a801cc2a33f 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..ec534fb3fe0 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..45190a5afa5 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..4e6f66ac00d 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..baa259b329b 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..4dfb3308890 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..332e5afd4f7 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..f0ddca51509 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..6ad35123b23 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..db727e0eece 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..9decfbb82f9 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..d1da39841a1 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..e6e13125ea5 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..6f6174c63f1 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..5445c9c6c82 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..5c7f89a26c6 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..e8344c872d6 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..f68f7edbf0b 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..771d9a8118f 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..897191af621 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..d4aec1b3905 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..3a941801972 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..2249ca9e0b5 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..e11efc2bb08 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..703df02c215 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..59361abcfd1 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..4632cf1f37f 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..5b4fccdb1e1 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..ca24ae770e9 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..cfdda2e451f 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..e41071a5dfd 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..af6f200c4d6 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..7426610c318 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..cdda0cfa348 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 94db9052bc0..d83fd0d889e 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,38 @@ }); 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.renderAll(); callback(canvas.lowerCanvasEl); }, golden: `group-layout/origin-${ox}-${oy}-${angle}deg.png`, - percentage: 0.06, + percentage: 0.001, width: 300, - height: 300 + height: 200 }); }); }); } -*/ + tests.forEach(visualTestLoop(QUnit)); })();