feat(Object): fill-parent layout

build.js

@@ -135,6 +135,7 @@ var filesToInclude = [
   'src/util/dom_style.js',
   'src/util/dom_misc.js',
   'src/util/dom_request.js',
+  'src/util/parent_resize_observer.js',
 
   'src/log.js',
 
@@ -196,6 +197,7 @@ var filesToInclude = [
   'src/shapes/polygon.class.js',
   'src/shapes/path.class.js',
   'src/shapes/group.class.js',
+  'src/shapes/layer.class.js',
   ifSpecifiedInclude('interaction', 'src/shapes/active_selection.class.js'),
   'src/shapes/image.class.js',
 

src/mixins/canvas_events.mixin.js

@@ -383,8 +383,9 @@
     /**
      * @private
      */
-    _onResize: function () {
+    _onResize: function (e) {
       this.calcOffset();
+      this.fire('window:resize', { e: e });
     },
 
     /**

src/mixins/object_geometry.mixin.js

@@ -720,6 +720,8 @@
      * @param {Number} [options.scaleY]
      * @param {Number} [options.skewX]
      * @param {Number} [options.skewY]
+     * @param {Number} [options.width]
+     * @param {Number} [options.height]
      * @private
      * @returns {fabric.Point} dimensions
      */

src/mixins/stateful.mixin.js

@@ -6,16 +6,23 @@
   /*
     Depends on `stateProperties`
   */
-  function saveProps(origin, destination, props) {
-    var tmpObj = { }, deep = true;
-    props.forEach(function(prop) {
-      tmpObj[prop] = origin[prop];
-    });
+  function _saveProps(origin, props) {
+    return props.reduce(function (saved, prop) {
+      var value = origin[prop];
+      saved[prop] = value instanceof fabric.Object ?
+        _saveProps(value, value[originalSet]) :
+        value && typeof value.toObject === 'function' ?
+          value.toObject() :
+          value;
+      return saved;
+    }, {});
+  }
 
-    extend(origin[destination], tmpObj, deep);
+  function saveProps(origin, destination, props) {
+    extend(origin[destination], _saveProps(origin, props), true);
   }
 
-  function _isEqual(origValue, currentValue, firstPass) {
+  function _isEqual(origValue, currentValue, skipShallowTest) {
     if (origValue === currentValue) {
       // if the objects are identical, return
       return true;
@@ -35,7 +42,7 @@
       var keys = Object.keys(origValue), key;
       if (!currentValue ||
           typeof currentValue !== 'object' ||
-          (!firstPass && keys.length !== Object.keys(currentValue).length)
+          (!skipShallowTest && keys.length !== Object.keys(currentValue).length)
       ) {
         return false;
       }
@@ -47,7 +54,7 @@
         if (key === 'canvas' || key === 'group') {
           continue;
         }
-        if (!_isEqual(origValue[key], currentValue[key])) {
+        if (!_isEqual(origValue[key], currentValue[key], currentValue[key] instanceof fabric.Object)) {
           return false;
         }
       }

src/shapes/circle.class.js

@@ -66,6 +66,27 @@
       return this;
     },
 
+    /**
+     * Called once instance is added to a parent and when parent resizes
+     * @private
+     * @param {*} context see {@link fabric.ParentResizeObserver}
+     */
+    _onParentResize: function (context) {
+      if (this.layout === 'fill-parent') {
+        var data = this._parentMonitor.extractDataFromResizeEvent(context);
+        var parent = data.parent;
+        var strokeCorrection = this.stroke ? this.strokeWidth : 0;
+        var r = Math.min(parent.width, parent.height) / 2 - strokeCorrection;
+        var resizing = r !== this.radius;
+        if (resizing || !this.getRelativeCenterPoint().eq(data.center)) {
+          this.setRadius(r);
+          this.setPositionByOrigin(data.center, 'center', 'center');
+          parent.interactive && this.setCoords();
+          resizing && this.fire('resize', context);
+        }
+      }
+    },
+
     /**
      * Returns object representation of an instance
      * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output

src/shapes/ellipse.class.js

@@ -77,6 +77,31 @@
       return this;
     },
 
+    /**
+     * Called once instance is added to a parent and when parent resizes
+     * @private
+     * @param {*} context see {@link fabric.ParentResizeObserver}
+     */
+    _onParentResize: function (context) {
+      if (this.layout === 'fill-parent') {
+        var data = this._parentMonitor.extractDataFromResizeEvent(context);
+        var parent = data.parent;
+        var strokeCorrection = this.stroke ? this.strokeWidth : 0;
+        var rx = parent.width / 2 - strokeCorrection;
+        var ry = parent.height / 2 - strokeCorrection;
+        var resizing = rx !== this.rx || ry !== this.ry;
+        if (resizing || !this.getRelativeCenterPoint().eq(data.center)) {
+          this.set({
+            rx: rx,
+            ry: ry
+          });
+          this.setPositionByOrigin(data.center, 'center', 'center');
+          parent.interactive && this.setCoords();
+          resizing && this.fire('resize', context);
+        }
+      }
+    },
+
     /**
      * Returns horizontal radius of an object (according to how an object is scaled)
      * @return {Number}

src/shapes/group.class.js

@@ -96,9 +96,11 @@
       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);
+        object.fire('added:initialized', { target: this });
       }, this);
       this._applyLayoutStrategy({
         type: 'initialization',
@@ -224,6 +226,14 @@
       object[directive]('deselected', this.__objectSelectionDisposer);
     },
 
+    /**
+     * @private
+     * @override consider using {@link fabric.Layer} for `fill-parent` layout
+     */
+    _onParentResize: function () {
+      //  noop
+    },
+
     /**
      * Checks if object can enter group and logs relevant warnings
      * @private
@@ -244,6 +254,11 @@
         /* _DEV_MODE_END_ */
         return false;
       }
+      else if (object.group) {
+        /* _DEV_MODE_START_ */
+        console.warn('fabric.Group: object is about to enter group and leave another');
+        /* _DEV_MODE_END_ */
+      }
       return true;
     },
 
@@ -480,12 +495,22 @@
      * @private
      * @param {fabric.Object} object
      * @param {fabric.Point} diff
+     * @param {boolean} [setCoords] perf enhancement, instead of iterating over objects again
      */
-    _adjustObjectPosition: function (object, diff) {
-      object.set({
-        left: object.left + diff.x,
-        top: object.top + diff.y,
-      });
+    _adjustObjectPosition: function (object, diff, setCoords) {
+      //  layer doesn't need coords so we don't set them
+      if (object instanceof fabric.Layer) {
+        object.forEachObject(function (obj) {
+          this._adjustObjectPosition(obj, diff, setCoords);
+        }.bind(this));
+      }
+      else {
+        object.set({
+          left: object.left + diff.x,
+          top: object.top + diff.y,
+        });
+        setCoords && object.setCoords();
+      }
     },
 
     /**
@@ -502,27 +527,38 @@
         //  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) {
         //  handle positioning
         var newCenter = new fabric.Point(result.centerX, result.centerY);
         var vector = center.subtract(newCenter).add(new fabric.Point(result.correctionX || 0, result.correctionY || 0));
         var diff = transformPoint(vector, invertTransform(this.calcOwnMatrix()), true);
+        var objectsSetCoords = false;
         //  set dimensions
         this.set({ width: result.width, height: result.height });
+        if (!newCenter.eq(center) || initialTransform) {
+          //  set position
+          this.setPositionByOrigin(newCenter, 'center', 'center');
+          initialTransform && this.set(initialTransform);
+          //  perf: avoid iterating over objects twice by setting coords only on instance
+          //  and delegating the task to `_adjustObjectPosition`
+          this.callSuper('setCoords');
+          objectsSetCoords = this.subTargetCheck;
+        }
         //  adjust objects to account for new center
         !context.objectsRelativeToGroup && this.forEachObject(function (object) {
-          this._adjustObjectPosition(object, diff);
+          this._adjustObjectPosition(object, diff, objectsSetCoords);
         }, this);
         //  clip path as well
         !isFirstLayout && this.layout !== 'clip-path' && this.clipPath && !this.clipPath.absolutePositioned
-          && this._adjustObjectPosition(this.clipPath, diff);
-        if (!newCenter.eq(center)) {
-          //  set position
-          this.setPositionByOrigin(newCenter, 'center', 'center');
-          this.setCoords();
-        }
+          && this._adjustObjectPosition(this.clipPath, diff, objectsSetCoords);
       }
       else if (isFirstLayout) {
         //  fill `result` with initial values for the layout hook
@@ -532,6 +568,7 @@
           width: this.width,
           height: this.height,
         };
+        initialTransform && this.set(initialTransform);
       }
       else {
         //  no `result` so we return
@@ -546,7 +583,15 @@
         result: result,
         diff: diff
       });
-      //  recursive up
+      this._bubbleLayout(context);
+    },
+
+
+    /**
+     * bubble layout recursive up
+     * @private
+     */
+    _bubbleLayout: function (context) {
       if (this.group && this.group._applyLayoutStrategy) {
         //  append the path recursion to context
         if (!context.path) {
@@ -558,7 +603,6 @@
       }
     },
 
-
     /**
      * Override this method to customize layout.
      * If you need to run logic once layout completes use `onLayout`
@@ -716,24 +760,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);
@@ -778,23 +804,40 @@
       if (objects.length === 0) {
         return null;
       }
-      var objCenter, sizeVector, min, max, a, b;
-      objects.forEach(function (object, i) {
-        objCenter = object.getRelativeCenterPoint();
-        sizeVector = object._getTransformedDimensions().scalarDivideEquals(2);
+      var objCenter, sizeVector, min = new fabric.Point(0, 0), max = new fabric.Point(0, 0), a, b, first = true;
+      objects.forEach(function (object) {
+        if (object instanceof fabric.Layer) {
+          var bbox = object.getObjectsBoundingBox(object._objects.slice(0));
+          if (!bbox) {
+            return;
+          }
+          sizeVector = object._getTransformedDimensions({
+            width: bbox.width,
+            height: bbox.height
+          }).scalarDivideEquals(2);
+          objCenter = new fabric.Point(bbox.centerX, bbox.centerY);
+        }
+        else if (object.layout === 'fill-parent') {
+          return;
+        }
+        else {
+          sizeVector = object._getTransformedDimensions().scalarDivideEquals(2);
+          objCenter = object.getRelativeCenterPoint();
+        }
         if (object.angle) {
           var rad = degreesToRadians(object.angle),
               sin = Math.abs(fabric.util.sin(rad)),
               cos = Math.abs(fabric.util.cos(rad)),
               rx = sizeVector.x * cos + sizeVector.y * sin,
               ry = sizeVector.x * sin + sizeVector.y * cos;
-          sizeVector = new fabric.Point(rx, ry);
+          sizeVector.setXY(rx, ry);
         }
         a = objCenter.subtract(sizeVector);
         b = objCenter.add(sizeVector);
-        if (i === 0) {
-          min = new fabric.Point(Math.min(a.x, b.x), Math.min(a.y, b.y));
-          max = new fabric.Point(Math.max(a.x, b.x), Math.max(a.y, b.y));
+        if (first) {
+          first = false;
+          min.setXY(Math.min(a.x, b.x), Math.min(a.y, b.y));
+          max.setXY(Math.max(a.x, b.x), Math.max(a.y, b.y));
         }
         else {
           min.setXY(Math.min(min.x, a.x, b.x), Math.min(min.y, a.y, b.y));
@@ -830,6 +873,29 @@
       //  override by subclass
     },
 
+
+    /**
+     * Calculate object dimensions from its properties
+     * @override disregard `strokeWidth`
+     * @private
+     * @returns {fabric.Point} dimensions
+     */
+    _getNonTransformedDimensions: function () {
+      return new fabric.Point(this.width, this.height);
+    },
+
+    /**
+     * @private
+     * @override we want instance to fill parent so we disregard transformations
+     * @param {Object} [options]
+     * @param {Number} [options.width]
+     * @param {Number} [options.height]
+     * @returns {fabric.Point} dimensions
+     */
+    _getTransformedDimensions: function (options) {
+      return this.callSuper('_getTransformedDimensions', Object.assign(options || {}, { strokeWidth: 0 }));
+    },
+
     /**
      *
      * @private