@genesislcap/foundation-layout 14.72.0 → 14.74.0

package/README.md

@@ -240,8 +240,12 @@ This section concerns the behaviour of elements inside the layout. If you are us
 
 ### Element lifecycle
 
-When an item is dragged around the layout, its lifecycle functions `connectedCallback` and `disconnectedCallback` are called.
-It is important that the element accounts for this, including such requirements as caching data, or resizing correctly.
+There are actions that the user can perform with items in the layout which will run the component lifecycle functions (`connectedCallback` and `disconnectedCallback`) at times when you don't want them to run:
+- When an item is dragged around the layout.
+- Potentially, when another item is removed from the layout
+- Potentially, when new items are added to the layout.
+
+For example, if you have a component with a loaded resource on the layout (such as a grid with a `grid-pro-genesis-datasource`) and you add a new item to the layout with the JavaScript API, then the component with the loaded resource will have to reload too. It is important that any such element accounts for this, including such requirements as caching data, or resizing correctly.
 
 In the `@genesislcap/foundation-utils` package, there is a mix-in class `LifecycleMixin` which exposes two protected members:
 
@@ -250,7 +254,7 @@ In the `@genesislcap/foundation-utils` package, there is a mix-in class `Lifecyc
 
 These can be used to gate certain functionality.
 
-For example, if there are parts of `disconnectedCallback` that you don't want to run when the item is being dragged around the layout, you can gate it behind a `(!this.shouldRunDisconnect) return;` early return.
+For example, if there are parts of `disconnectedCallback` that you don't want to run when the item is being dragged around the layout, you can gate it behind a `(!this.shouldRunDisconnect) return;` early return. See [this example](#resource-intensive-component-resetting-in-layout).
 
 :::warning
 At the very least, you must run `super` calls to the lifecycle methods, or else your custom element will not work correctly.
@@ -1033,6 +1037,71 @@ The user of your layout will move things around and this will cache the layout.
 You and the user will only see the first two items like before. This is because the cached layout is being loaded, which does not contain the
 new item. To fix this you must [invalidate the cache](#invalidating-the-cache).
 
+### Resource intensive component resetting in layout
+
+Say you have a component which has to initialise a resource heavy or long awaited asynchronous task, such as the following:
+```typescript
+@customElement({
+  name: 'mock-connected',
+})
+export class MockConnected extends FASTElement {
+  @observable resource = '';
+
+  async connectedCallback(): Promise<void> {
+    super.connectedCallback();
+    // Simulate doing some work with an external service
+  }
+
+  async disconnectedCallback(): Promise<void> {
+    super.disconnectedCallback();
+    // Simulate cleaning an external service
+  }
+}
+```
+
+As explained in the [lifecycle info section](#element-lifecycle), this component may have its `disconnectedCallback` and `connectedCallback` lifecycle at unnecessary times, effectively wasting time re-initialising a potentially heavy resource.
+
+Use the `LifecycleMixin` to be able to access properties on the class which can be used to more thoughtfully run lifecycle functionality. In the following example we split out the resource intensive work and conditionally call them when needed.
+
+```typescript
+@customElement({
+  name: 'mock-connected',
+})
+export class MockConnected extends LifecycleMixin(FASTElement) {
+  @observable resource = '';
+
+  async connectedCallback(): Promise<void> {
+    super.connectedCallback();
+    const shouldRunConnect = this.shouldRunConnect;
+    DOM.queueUpdate(async () => {
+      if (!shouldRunConnect) return;
+      await this.init();
+    });
+  }
+
+  async disconnectedCallback(): Promise<void> {
+    super.disconnectedCallback();
+    const shouldRunDisconnect = this.shouldRunDisconnect;
+    DOM.queueUpdate(async () => {
+      if (!shouldRunDisconnect) return;
+      await this.deInit();
+    });
+  }
+
+  // Simulate doing work with an external service
+  async init(): Promise<void> { }
+
+  // Simulate cleaning an external service
+  async deInit(): Promise<void> { }
+}
+```
+
+The above is quite a comprehensive example, it doesn't necessarily have to be so complicated. You may just want to exit early from the connected callback without using the `DOM.queueUpdate` functionality. However, using it can be useful to properly handle `async` setup process.
+
+:::warning
+The requirement to capture the parameter in the example above (e.g. `const shouldRunDisconnect = shouldRunDisconnect`) is to cache the information at the time of the lifecycle change, for use when the `DOM.queueUpdate` work is performed. This is not required if you run your lifecycle methods synchronously, but if you follow the above pattern you need to consider the `async` functionality being scheduled for after the layout considers the relevant lifecycle-gating functionality (such as dragging) to be over.
+:::
+
 ## Supplementary information
 
 ### Custom components to handle bindings and event listeners

package/dist/custom-elements.json

@@ -491,6 +491,16 @@
               "default": "false",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "lifecycleUpdateToken",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "default": "undefined",
+              "description": "Used to calculate whether a layout item should run its lifecycle methods or not"
+            },
             {
               "kind": "method",
               "name": "layoutRequiredRegistrations",
@@ -613,6 +623,17 @@
               ],
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "updateLifecycleToken",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The `LifecycleMixin` can use the lifecycleUpdateToken to determine if it needs to gate\nlifecycle methods from running when other items have been added or deleted.\nThis key is updated every time one of these actions are performed, so you can check if the key has changed and know you potentially need to gate some of your lifecycle functionality.\nThis method should be called whenever we are about to perform an action which will cause a lifecycle update, should as adding or removing an item from the layout"
+            },
             {
               "kind": "field",
               "name": "_presentation",

package/dist/dts/main/layout-main.d.ts

@@ -61,6 +61,15 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * Set to true when the user is currently dragging the panes inside of the layout
      */
     dragging: boolean;
+    /**
+     * Used to calculate whether a layout item should run its lifecycle methods or not
+     * @remarks
+     * When using the `LifecycleMixin`, the mixin can be used to gate lifecycle methods from
+     * running when other items have been added or deleted.
+     * This key is updated every time one of these actions are performed, so you can check if the key
+     * has changed and know you potentially need to gate some of your lifecycle functionality.
+     */
+    lifecycleUpdateToken: string | undefined;
     /** @internal */
     constructor();
     /** @internal */
@@ -72,11 +81,13 @@ export declare class FoundationLayout extends FoundationElement implements Layou
     /** @internal */
     private onDragStop;
     /** @internal */
-    private onItemAdded;
+    private onPostItemAdded;
     /** @internal */
-    private onItemRemoved;
+    private onPreItemRemoved;
     /** @internal */
-    private onItemResized;
+    private onPostItemRemoved;
+    /** @internal */
+    private onPostItemResized;
     /**
      * JS API, public
      */
@@ -168,6 +179,13 @@ export declare class FoundationLayout extends FoundationElement implements Layou
     /**
      * Internal APIs
      */
+    /**
+     * The `LifecycleMixin` can use the lifecycleUpdateToken to determine if it needs to gate
+     * lifecycle methods from running when other items have been added or deleted.
+     * This key is updated every time one of these actions are performed, so you can check if the key has changed and know you potentially need to gate some of your lifecycle functionality.
+     * This method should be called whenever we are about to perform an action which will cause a lifecycle update, should as adding or removing an item from the layout
+     */
+    private updateLifecycleToken;
     /**
      * Request to reload the layout using the private member config. Debounced using the time set
      * in this.reloadBuffer

package/dist/dts/main/layout-main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-main.d.ts","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout-main.d.ts","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":"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"}

package/dist/esm/main/layout-main.js

@@ -1,4 +1,4 @@
-var _FoundationLayout__boundDragListener, _a;
+var _FoundationLayout__boundPreDeletionListener, _FoundationLayout__boundDragListener, _a;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
 import { GoldenLayout, LayoutConfig, ResolvedLayoutConfig, } from '@genesis-community/golden-layout';
 import { Session } from '@genesislcap/foundation-comms';
@@ -71,17 +71,30 @@ export class FoundationLayout extends FoundationElement {
          * Set to true when the user is currently dragging the panes inside of the layout
          */
         this.dragging = false;
+        /**
+         * Used to calculate whether a layout item should run its lifecycle methods or not
+         * @remarks
+         * When using the `LifecycleMixin`, the mixin can be used to gate lifecycle methods from
+         * running when other items have been added or deleted.
+         * This key is updated every time one of these actions are performed, so you can check if the key
+         * has changed and know you potentially need to gate some of your lifecycle functionality.
+         */
+        this.lifecycleUpdateToken = undefined;
+        /** @internal */
+        _FoundationLayout__boundPreDeletionListener.set(this, undefined);
         /** @internal */
         _FoundationLayout__boundDragListener.set(this, undefined);
         this.onDragStart = this.onDragStart.bind(this);
         this.onDragStop = this.onDragStop.bind(this);
         this.cacheAndSaveLayout = this.cacheAndSaveLayout.bind(this);
-        this.onItemRemoved = this.onItemRemoved.bind(this);
+        this.onPostItemRemoved = this.onPostItemRemoved.bind(this);
+        this.onPreItemRemoved = this.onPreItemRemoved.bind(this);
     }
     /** @internal */
     connectedCallback() {
         super.connectedCallback();
         logger.debug(`FoundationLayout connected to the DOM`);
+        this.updateLifecycleToken();
         this.layout = new GoldenLayout(this.layoutElement);
         this.layout.resizeWithContainerAutomatically = true;
         if (!appliedGlobalStyles) {
@@ -93,13 +106,15 @@ export class FoundationLayout extends FoundationElement {
         }
         this.shadowRoot.addEventListener('dragStart', this.onDragStart, true);
         this.shadowRoot.addEventListener('dragStop', this.onDragStop, true);
-        this.shadowRoot.addEventListener('closeButtonPressed', this.onItemRemoved, true);
+        this.shadowRoot.addEventListener('closeButtonPre', this.onPreItemRemoved, true);
+        this.shadowRoot.addEventListener('closeButtonPressed', this.onPostItemRemoved, true);
     }
     /** @internal */
     disconnectedCallback() {
         this.shadowRoot.removeEventListener('dragStart', this.onDragStart);
         this.shadowRoot.removeEventListener('dragStop', this.onDragStop);
-        this.shadowRoot.removeEventListener('closeButtonPressed', this.onItemRemoved);
+        this.shadowRoot.removeEventListener('closeButtonPre', this.onPreItemRemoved);
+        this.shadowRoot.removeEventListener('closeButtonPressed', this.onPostItemRemoved);
     }
     /** @internal */
     onDragStart() {
@@ -112,17 +127,21 @@ export class FoundationLayout extends FoundationElement {
         this.attatchResizeEvents();
     }
     /** @internal */
-    onItemAdded() {
+    onPostItemAdded() {
         this.$emit(LayoutEmitEvents.itemAdded);
         this.cacheAndSaveLayout();
     }
     /** @internal */
-    onItemRemoved() {
+    onPreItemRemoved() {
+        this.updateLifecycleToken();
+    }
+    /** @internal */
+    onPostItemRemoved() {
         this.$emit(LayoutEmitEvents.itemRemoved);
         this.cacheAndSaveLayout();
     }
     /** @internal */
-    onItemResized() {
+    onPostItemResized() {
         this.$emit(LayoutEmitEvents.itemResized);
         this.cacheAndSaveLayout();
     }
@@ -258,6 +277,7 @@ export class FoundationLayout extends FoundationElement {
             content: childItems,
             size: isSingleItem ? configArray[0].size : (_c = placement === null || placement === void 0 ? void 0 : placement.multiple) === null || _c === void 0 ? void 0 : _c.size,
         };
+        this.updateLifecycleToken();
         /**
          * If no root is added (no items via declerative API) then
          * this new item is the root so set it and return
@@ -267,7 +287,7 @@ export class FoundationLayout extends FoundationElement {
                 root: itemConfig,
             };
             this.loadGLConfigAndSetup(this.layoutConfig);
-            this.onItemAdded();
+            this.onPostItemAdded();
             return;
         }
         // Else we add the item relative to existing items
@@ -282,7 +302,7 @@ export class FoundationLayout extends FoundationElement {
             },
         };
         this.loadGLConfigAndSetup(this.layoutConfig);
-        this.onItemAdded();
+        this.onPostItemAdded();
     }
     /**
      * @public
@@ -312,6 +332,15 @@ export class FoundationLayout extends FoundationElement {
     /**
      * Internal APIs
      */
+    /**
+     * The `LifecycleMixin` can use the lifecycleUpdateToken to determine if it needs to gate
+     * lifecycle methods from running when other items have been added or deleted.
+     * This key is updated every time one of these actions are performed, so you can check if the key has changed and know you potentially need to gate some of your lifecycle functionality.
+     * This method should be called whenever we are about to perform an action which will cause a lifecycle update, should as adding or removing an item from the layout
+     */
+    updateLifecycleToken() {
+        this.lifecycleUpdateToken = this.uuid.createId();
+    }
     /**
      * Request to reload the layout using the private member config. Debounced using the time set
      * in this.reloadBuffer
@@ -488,7 +517,7 @@ export class FoundationLayout extends FoundationElement {
      */
     attatchResizeEvents() {
         if (__classPrivateFieldGet(this, _FoundationLayout__boundDragListener, "f") === undefined) {
-            __classPrivateFieldSet(this, _FoundationLayout__boundDragListener, () => this.onItemResized.bind(this)(), "f");
+            __classPrivateFieldSet(this, _FoundationLayout__boundDragListener, () => this.onPostItemResized.bind(this)(), "f");
         }
         this.shadowRoot.querySelectorAll('div.lm_drag_handle').forEach((h) => {
             h.removeEventListener('click', __classPrivateFieldGet(this, _FoundationLayout__boundDragListener, "f"));
@@ -496,7 +525,7 @@ export class FoundationLayout extends FoundationElement {
         });
     }
 }
-_FoundationLayout__boundDragListener = new WeakMap(), _a = componentType;
+_FoundationLayout__boundPreDeletionListener = new WeakMap(), _FoundationLayout__boundDragListener = new WeakMap(), _a = componentType;
 __decorate([
     attr({ attribute: 'reload-buffer' })
 ], FoundationLayout.prototype, "reloadBuffer", void 0);

package/dist/foundation-layout.api.json

@@ -495,6 +495,36 @@
               "isAbstract": false,
               "name": "layoutRequiredRegistrations"
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-layout!FoundationLayout#lifecycleUpdateToken:member",
+              "docComment": "/**\n * Used to calculate whether a layout item should run its lifecycle methods or not\n *\n * @remarks\n *\n * When using the `LifecycleMixin`, the mixin can be used to gate lifecycle methods from running when other items have been added or deleted. This key is updated every time one of these actions are performed, so you can check if the key has changed and know you potentially need to gate some of your lifecycle functionality.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "lifecycleUpdateToken: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string | undefined"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "lifecycleUpdateToken",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-layout!FoundationLayout#loadLayout:member(1)",

package/dist/foundation-layout.d.ts

@@ -84,6 +84,15 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * Set to true when the user is currently dragging the panes inside of the layout
      */
     dragging: boolean;
+    /**
+     * Used to calculate whether a layout item should run its lifecycle methods or not
+     * @remarks
+     * When using the `LifecycleMixin`, the mixin can be used to gate lifecycle methods from
+     * running when other items have been added or deleted.
+     * This key is updated every time one of these actions are performed, so you can check if the key
+     * has changed and know you potentially need to gate some of your lifecycle functionality.
+     */
+    lifecycleUpdateToken: string | undefined;
     /** @internal */
     constructor();
     /** @internal */
@@ -95,11 +104,13 @@ export declare class FoundationLayout extends FoundationElement implements Layou
     /** @internal */
     private onDragStop;
     /** @internal */
-    private onItemAdded;
+    private onPostItemAdded;
     /** @internal */
-    private onItemRemoved;
+    private onPreItemRemoved;
     /** @internal */
-    private onItemResized;
+    private onPostItemRemoved;
+    /** @internal */
+    private onPostItemResized;
     /**
      * JS API, public
      */
@@ -191,6 +202,13 @@ export declare class FoundationLayout extends FoundationElement implements Layou
     /**
      * Internal APIs
      */
+    /**
+     * The `LifecycleMixin` can use the lifecycleUpdateToken to determine if it needs to gate
+     * lifecycle methods from running when other items have been added or deleted.
+     * This key is updated every time one of these actions are performed, so you can check if the key has changed and know you potentially need to gate some of your lifecycle functionality.
+     * This method should be called whenever we are about to perform an action which will cause a lifecycle update, should as adding or removing an item from the layout
+     */
+    private updateLifecycleToken;
     /**
      * Request to reload the layout using the private member config. Debounced using the time set
      * in this.reloadBuffer

package/docs/api/foundation-layout.foundationlayout.lifecycleupdatetoken.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [lifecycleUpdateToken](./foundation-layout.foundationlayout.lifecycleupdatetoken.md)
+
+## FoundationLayout.lifecycleUpdateToken property
+
+Used to calculate whether a layout item should run its lifecycle methods or not
+
+**Signature:**
+
+```typescript
+lifecycleUpdateToken: string | undefined;
+```
+
+## Remarks
+
+When using the `LifecycleMixin`<!-- -->, the mixin can be used to gate lifecycle methods from running when other items have been added or deleted. This key is updated every time one of these actions are performed, so you can check if the key has changed and know you potentially need to gate some of your lifecycle functionality.
+

package/docs/api/foundation-layout.foundationlayout.md

@@ -28,6 +28,7 @@ The constructor for this class is marked as internal. Third-party code should no
 |  [autoSaveKey?](./foundation-layout.foundationlayout.autosavekey.md) |  | string | _(Optional)_ Attribute which if set will auto save and load the layout as the user changes it. Omit this attribute to disable this feature. Set attribute using <code>auto-save-key</code>. |
 |  [dragging](./foundation-layout.foundationlayout.dragging.md) |  | boolean | Set to true when the user is currently dragging the panes inside of the layout |
 |  [hasFirstLoaded](./foundation-layout.foundationlayout.hasfirstloaded.md) |  | boolean | Boolean signifies whether the layout has loaded for the first time or not. |
+|  [lifecycleUpdateToken](./foundation-layout.foundationlayout.lifecycleupdatetoken.md) |  | string \| undefined | Used to calculate whether a layout item should run its lifecycle methods or not |
 |  [missingItemPlaceholder](./foundation-layout.foundationlayout.missingitemplaceholder.md) |  | (missingItem: string) =&gt; string | Function which is used to generate the placeholder text when a layout is loaded with a missing item. |
 |  [reloadBuffer](./foundation-layout.foundationlayout.reloadbuffer.md) |  | number | Number describing how long to wait in ms before reloading the config when adding items declaratively by the html API. Default 500 (ms). |
 

package/docs/api-report.md

@@ -40,6 +40,7 @@ export class FoundationLayout extends FoundationElement implements LayoutCompone
     // @internal (undocumented)
     layoutElement: HTMLElement;
     static layoutRequiredRegistrations(layout: SerialisedLayout): string[];
+    lifecycleUpdateToken: string | undefined;
     loadLayout(layout: SerialisedLayout, handleMissingItem?: 'placeholder' | 'error'): void;
     missingItemPlaceholder: (missingItem: string) => string;
     registeredItems(): string[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-layout",
   "description": "Genesis Foundation UI App Layout",
-  "version": "14.72.0",
+  "version": "14.74.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-layout.d.ts",
@@ -24,14 +24,14 @@
     "test:debug": "genx test --debug"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.72.0",
-    "@genesislcap/genx": "14.72.0",
+    "@genesislcap/foundation-testing": "14.74.0",
+    "@genesislcap/genx": "14.74.0",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@genesis-community/golden-layout": "^2.9.3",
-    "@genesislcap/foundation-comms": "14.72.0",
-    "@genesislcap/foundation-utils": "14.72.0",
+    "@genesis-community/golden-layout": "^2.10.0",
+    "@genesislcap/foundation-comms": "14.74.0",
+    "@genesislcap/foundation-utils": "14.74.0",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
     "@microsoft/fast-foundation": "^2.33.2",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "c352280fa2af8458c0ab91fa5b97e13e4f1886ad"
+  "gitHead": "744f54392e6e9f73c0cddd55300925aa594020d2"
 }