feat: onLayout hook triggered on items being added/remove (#703)

When implementing some custom, automatic layout that needs to
recalculate positions and/or sizes on items being added or removed
dynamically a hook like this one might be useful.

README.md

@@ -214,6 +214,11 @@ We divide tiles (cells) into groups on every page. Group object can have the fol
    * (optional)
    */
   groupMarginCss: '20px 40px',
+  /* custom function called on initial layout and when the items are added or removed dynamically.
+   * Can be used to adjust items size/position if implementing some dynamic layouts, for example.
+   * (optional)
+   */
+  onLayout: function(page, group) {},
 
   /* hidden: hide group (optional)
    * can be boolean or function that return boolean

scripts/controllers/main.js

@@ -67,6 +67,16 @@ App.controller('Main', function ($scope, $timeout, $location, Api, tmhDynamicLoc
    let activePage = null;
    let cameraList = null;
 
+   for (const page of $scope.pages) {
+      for (const group of page.groups) {
+         if (group.onLayout) {
+            $scope.$watchCollection(
+               () => group.items,
+               () => group.onLayout(page, group));
+         }
+      }
+   }
+
    const ghostCoordinates = [];
    document.addEventListener('click', preventGhostClick, true);