@genesislcap/foundation-layout 14.92.1-pa-913.3 → 14.92.2-beta.revert-PA-913.1

Sign up to get free protection for your applications and to get access to all the features.
package/README.md CHANGED
@@ -189,13 +189,11 @@ To enable autosaving the layout see [here](#autosaving-layout).
189
189
 
190
190
  #### [Get Layout](./docs/api/foundation-layout.foundationlayout.getlayout.md)
191
191
 
192
- Get an object describing the current layout so that it can be restored at a later date. This does not save any data internally to the layout. It is up to the client to store this state where appropriate for later recall (browser local storage, persistence layer, etc.). Use the [autosaving layout](#autosaving-layout) feature to get the layout to do this for you with local storage.
193
-
194
- You can store state for an instance of an item, and that will be saved inline. See [managing state](#managing-state).
192
+ Get an object describing the current layout so that it can be restored at a later date. This does not save any data internally to the layout. It is up to the client to store this state where appropriate for later recall (browser local storage, persistence layer, etc.)
195
193
 
196
194
  #### [Load Layout](./docs/api/foundation-layout.foundationlayout.loadlayout.md)
197
195
 
198
- Loads a serialised layout. All items that are described in the config to load must already be registered with the layout system - using either the declarative or JavaScript API. If there are items missing (could be due either to missing items or to a mismatch of registered names) then a `LayoutUsageError` will be thrown containing the names of the missing items. Alternatively, you can request placeholder items to be added.
196
+ Loads a serialised layout. All items that are described in the config to load must already be registered with the layout system - using either the declarative or JavaScript API. If there are items missing (could be due either to missing items or to a mismatch of registered names) then a `LayoutUsageError` will be thrown containing the names of the missing items.
199
197
 
200
198
  ## Events
201
199
 
@@ -302,22 +300,6 @@ Throughout Foundation UI, there is no need to de-register a component that is re
302
300
 
303
301
  - Once the component is actually initialised in the layout on the DOM, then `shouldRunConnect` will be true, and you can then perform all the required initialisation.
304
302
 
305
- ### Managing state
306
-
307
- Items inside of the layout can save and restore state using various methods, but it can become difficult to manage state if you're adding the same item to the layout multiple times (multiple instances of the same web component).
308
-
309
- You can implement the [LayoutComponentWithState](./docs/api/foundation-layout.layoutcomponentwithstate.md) interface which will allow you to save and load state *per instance* of your components. See the linked interface and the associated functions API documentation for examples and explanations of usage.
310
-
311
- Usage of this interface is optional, if you do not need to manage state for your components in this way then simply do not implement the interface.
312
-
313
- :::warning
314
- The layout system is only interacting with the immediately contained items - so if you have components that contain other components, the top level components will need to interact with the contained components to manage their state.
315
- :::
316
-
317
- :::danger
318
- Each layout item can contain multiple components, and most of the time there are no extra considerations when doing this. However, the state of each component in an instance is saved in order of the components on the DOM, so if the serialised state is manually changed to have the items out of order with their state, then the incorrect states will be passed into each item. This should not occur during defined behaviour, but is possible if the end-user is able to change the state passed into `loadLayout()` manually.
319
- :::
320
-
321
303
  ### Element cloning
322
304
 
323
305
  To enable you to add multiple items from the same `registration`, the layout system clones elements to add to the layout.
@@ -45,14 +45,6 @@
45
45
  "module": "./utils"
46
46
  }
47
47
  },
48
- {
49
- "kind": "js",
50
- "name": "LayoutComponentWithState",
51
- "declaration": {
52
- "name": "LayoutComponentWithState",
53
- "module": "./utils"
54
- }
55
- },
56
48
  {
57
49
  "kind": "js",
58
50
  "name": "LayoutEmitEvents",
@@ -1241,10 +1233,10 @@
1241
1233
  "kind": "variable",
1242
1234
  "name": "LayoutReceiveEvents",
1243
1235
  "type": {
1244
- "text": "{\n changeTitle: 'change-title',\n autosave: 'autosave',\n}"
1236
+ "text": "{\n changeTitle: 'change-title',\n}"
1245
1237
  },
1246
- "default": "{\n changeTitle: 'change-title',\n autosave: 'autosave',\n}",
1247
- "description": "Defines events that the layout system listens for\n\n'changeTitle' - emit this from a contained item to update the title of the window that contains it.\n'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See LayoutComponentWithState.",
1238
+ "default": "{\n changeTitle: 'change-title',\n}",
1239
+ "description": "Defines events that the layout system listens for\n\n'changeTitle' - emit this from a contained item to update the title of the window that contains it.",
1248
1240
  "privacy": "public"
1249
1241
  }
1250
1242
  ],
@@ -1,4 +1,4 @@
1
1
  export * from './main';
2
2
  export { LAYOUT_ICONS } from './styles';
3
- export { CustomButton, DEFAULT_RELOAD_BUFFER, LayoutComponentWithState, LayoutEmitEvents, LayoutReceiveEvents, LayoutReceiveEventsDetail, LayoutRegionType, LayoutRegistrationError, LayoutUsageError, Placement, RegisteredElementConfig, RegistrationConfig, SerialisedLayout, } from './utils';
3
+ export { CustomButton, DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, LayoutReceiveEventsDetail, LayoutRegionType, LayoutRegistrationError, LayoutUsageError, Placement, RegisteredElementConfig, RegistrationConfig, SerialisedLayout, } from './utils';
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EACL,YAAY,EACZ,qBAAqB,EACrB,wBAAwB,EACxB,gBAAgB,EAChB,mBAAmB,EACnB,yBAAyB,EACzB,gBAAgB,EAChB,uBAAuB,EACvB,gBAAgB,EAChB,SAAS,EACT,uBAAuB,EACvB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EACL,YAAY,EACZ,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,yBAAyB,EACzB,gBAAgB,EAChB,uBAAuB,EACvB,gBAAgB,EAChB,SAAS,EACT,uBAAuB,EACvB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,SAAS,CAAC"}
@@ -107,8 +107,6 @@ export declare class FoundationLayout extends FoundationElement implements Layou
107
107
  private onPostItemRemoved;
108
108
  /** @internal */
109
109
  private onPostItemResized;
110
- /** @internal */
111
- private onAutosaveRequest;
112
110
  /**
113
111
  * JS API, public
114
112
  */
@@ -137,8 +135,6 @@ export declare class FoundationLayout extends FoundationElement implements Layou
137
135
  /**
138
136
  * @public
139
137
  * Gets a minified string containing the config describing the current layout of the layout object to later restore in {@link FoundationLayout.loadLayout | function}
140
- * @remarks
141
- * Includes any state for a contained component exposed by the {@link LayoutComponentWithState} interface.
142
138
  * @returns - latest version of {@link SerialisedLayout} describing the layout
143
139
  */
144
140
  getLayout(): SerialisedLayout;
@@ -282,11 +278,6 @@ export declare class FoundationLayout extends FoundationElement implements Layou
282
278
  * @internal
283
279
  */
284
280
  private setupCustomButtons;
285
- /**
286
- * Return an array of each contained items in the layout.
287
- * @internal
288
- */
289
- private getLayoutComponents;
290
281
  }
291
282
  /**
292
283
  * `ViewTemplate` which defines the html for {@link FoundationLayout}.
@@ -1 +1 @@
1
- {"version":3,"file":"layout-main.d.ts","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"layout-main.d.ts","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":"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"}
@@ -3,11 +3,6 @@
3
3
  * @internal
4
4
  */
5
5
  export declare const componentType: unique symbol;
6
- /**
7
- * Used to key a reference to the instance and golden layout container on a layout component.
8
- * @internal
9
- */
10
- export declare const instanceContainer: unique symbol;
11
6
  /**
12
7
  * Default time in milliseconds for the layout to buffer calls to reloading
13
8
  * the layout while the declarative API is loading.
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,aAAa,eAA2B,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,eAA+B,CAAC;AAE9D;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,YAAY,+BAA+B,CAAC"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,aAAa,eAA2B,CAAC;AAEtD;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,YAAY,+BAA+B,CAAC"}
@@ -21,18 +21,15 @@ export declare const LayoutEmitEvents: {
21
21
  * Defines events that the layout system listens for
22
22
  *
23
23
  * 'changeTitle' - emit this from a contained item to update the title of the window that contains it.
24
- * 'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See {@link LayoutComponentWithState}.
25
24
  * @public
26
25
  */
27
26
  export declare const LayoutReceiveEvents: {
28
27
  readonly changeTitle: "change-title";
29
- readonly autosave: "autosave";
30
28
  };
31
29
  /**
32
30
  * Defines the shape of the detail that the layout listens works with for events it listens on
33
31
  *
34
32
  * 'changeTitle' - `title` is the string you want to set. For `mode`: `replace` will set the title to be `title`, `suffix` will append `title` to the end of the existing title.
35
- * 'autosave' - no other parameters.
36
33
  * @public
37
34
  */
38
35
  export type LayoutReceiveEventsDetail = {
@@ -40,6 +37,5 @@ export type LayoutReceiveEventsDetail = {
40
37
  title: string;
41
38
  mode: 'replace' | 'suffix';
42
39
  };
43
- autosave: void;
44
40
  };
45
41
  //# sourceMappingURL=events.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../src/utils/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX;;;;;;GAMG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAA;KAAE,CAAC;IAC3D,QAAQ,EAAE,IAAI,CAAC;CAChB,CAAC"}
1
+ {"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../src/utils/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;CAEtB,CAAC;AAEX;;;;;GAKG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAA;KAAE,CAAC;CAC5D,CAAC"}
@@ -1,5 +1,5 @@
1
- import { ComponentContainer, ResolvedLayoutConfig } from '@genesis-community/golden-layout';
2
- import { componentType, instanceContainer } from './constants';
1
+ import { ResolvedLayoutConfig } from '@genesis-community/golden-layout';
2
+ import { componentType } from './constants';
3
3
  /**
4
4
  * Definition of a custom button which will be added to all layout items.
5
5
  * @remarks
@@ -26,69 +26,6 @@ export type SerialisedLayout = {
26
26
  v: '1';
27
27
  c: ResolvedLayoutConfig;
28
28
  };
29
- /**
30
- * Interface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state.
31
- * @typeParam T - the type of the state object you wish to serialise with the component.
32
- * @remarks
33
- * When the layout is saved either via the autosave functionality or manually calling {@link FoundationLayout.getLayout}, all contained components will be requested to provide state if they wish.
34
- *
35
- * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is reloaded. Before an item is appended onto the layout DOM, the state will be applied to the component via `applyState`. You will likely want to cache this and then use it later in the lifecycle of the component. The state is `null` when the instance is first created.
36
- *
37
- * See the written documentation for some error scenarios to consider about when implementing this interface.
38
- *
39
- * @example
40
- * ```
41
- * type ComponentState = {
42
- * foo: string;
43
- * }
44
- * \@customElement({ name: 'my-component' })
45
- * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
46
- * \@observable foo: string;
47
- * private fooCache: ComponentState | null;
48
- *
49
- * getCurrentState(): ComponentState {
50
- * if (!this.foo) return null;
51
- * return {
52
- * foo: this.foo;
53
- * }
54
- * }
55
- *
56
- * applyState(state: ComponentState | null) {
57
- * this.fooCache = state;
58
- * }
59
- *
60
- * connectedCallback() {
61
- * // do other required setup
62
- * if (this.fooCache) {
63
- * this.foo = this.fooCache.foo;
64
- * }
65
- * }
66
- * }
67
- * ```
68
- *
69
- * @example
70
- * If you are using the autosave functionality you should inform the layout system when you update the state of a component, otherwise the state will only be updated when the user performs an action such as resizing an item. Use the {@link LayoutReceiveEvents} `autosave` event.
71
- * ```
72
- * // Same component as above
73
- * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
74
- * // can use xChanged pattern as `foo` was declared observable
75
- * fooChanged() {
76
- * this.$emit(LayoutReceiveEvents.autosave);
77
- * }
78
- * }
79
- * ```
80
- * @public
81
- * */
82
- export interface LayoutComponentWithState<T> {
83
- /**
84
- * Provide the state you wish to save. It is recommended if the component which implements this interface has not fully initialised at the point this is called that you return `null` as the state, following the pattern of `null` being set as the initial state.
85
- */
86
- getCurrentState(): T;
87
- /**
88
- * Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in `connectedCallback`.
89
- */
90
- applyState(state: T | null): void;
91
- }
92
29
  /**
93
30
  * @public
94
31
  * The parameters that can be set on a new item when being added by the {@link FoundationLayout.addItem} API
@@ -124,15 +61,6 @@ export type Placement = {
124
61
  };
125
62
  };
126
63
  /** @internal */
127
- export type InstanceContainer = {
128
- container: ComponentContainer;
129
- instance: string;
130
- };
131
- /** @internal */
132
- export type LayoutComponentItem<T> = Element & Partial<LayoutComponentWithState<T>> & {
133
- [instanceContainer]?: InstanceContainer;
134
- };
135
- /** @internal */
136
64
  export interface RegistrationConfig {
137
65
  elements: Element[];
138
66
  id?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,oBAAoB,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDK;AACL,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC;;OAEG;IACH,eAAe,IAAI,CAAC,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;CACnC;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,gBAAgB,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,OAAO,GAC1C,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrC,CAAC,iBAAiB,CAAC,CAAC,EAAE,iBAAiB,CAAC;CACzC,CAAC;AAEJ,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,6CAA8C,CAAC;AAC7E;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,gBAAgB;AAChB,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC;IAChC,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAAC;IAC7D,mBAAmB,IAAI,IAAI,CAAC;CAC7B;AAED,gBAAgB;AAChB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,oBAAoB,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,gBAAgB,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,6CAA8C,CAAC;AAC7E;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,gBAAgB;AAChB,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC;IAChC,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAAC;IAC7D,mBAAmB,IAAI,IAAI,CAAC;CAC7B;AAED,gBAAgB;AAChB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,CAAC"}
@@ -1,4 +1,4 @@
1
- var _FoundationLayout__boundDragListener, _a;
1
+ var _FoundationLayout__boundPreDeletionListener, _FoundationLayout__boundDragListener, _a;
2
2
  import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
3
3
  import { GoldenLayout, LayoutConfig, ResolvedLayoutConfig, } from '@genesis-community/golden-layout';
4
4
  import { Session } from '@genesislcap/foundation-comms';
@@ -6,7 +6,7 @@ import { layoutCacheDocument, UUID } from '@genesislcap/foundation-utils';
6
6
  import { html, attr, observable, when, ref } from '@microsoft/fast-element';
7
7
  import { FoundationElement } from '@microsoft/fast-foundation';
8
8
  import { globalDraggingStyles, glVisualConfig, layoutStyles } from '../styles';
9
- import { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, componentType, AUTOSAVE_KEY, regionConveter, instanceContainer, } from '../utils/';
9
+ import { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, componentType, AUTOSAVE_KEY, regionConveter, } from '../utils/';
10
10
  import { getMissingArrayItems } from '../utils/';
11
11
  import { LayoutRegistrationError, LayoutUsageError } from '../utils/error';
12
12
  import { logger } from '../utils/logger';
@@ -88,13 +88,14 @@ export class FoundationLayout extends FoundationElement {
88
88
  */
89
89
  this.lifecycleUpdateToken = undefined;
90
90
  /** @internal */
91
+ _FoundationLayout__boundPreDeletionListener.set(this, undefined);
92
+ /** @internal */
91
93
  _FoundationLayout__boundDragListener.set(this, undefined);
92
94
  this.onDragStart = this.onDragStart.bind(this);
93
95
  this.onDragStop = this.onDragStop.bind(this);
94
96
  this.cacheAndSaveLayout = this.cacheAndSaveLayout.bind(this);
95
97
  this.onPostItemRemoved = this.onPostItemRemoved.bind(this);
96
98
  this.onPreItemRemoved = this.onPreItemRemoved.bind(this);
97
- this.onAutosaveRequest = this.onAutosaveRequest.bind(this);
98
99
  }
99
100
  /** @internal */
100
101
  connectedCallback() {
@@ -110,24 +111,18 @@ export class FoundationLayout extends FoundationElement {
110
111
  .catch((e) => console.error('Failed to replace styles:', e));
111
112
  appliedGlobalStyles = true;
112
113
  }
113
- // golden layout events
114
114
  this.shadowRoot.addEventListener('dragStart', this.onDragStart, true);
115
115
  this.shadowRoot.addEventListener('dragStop', this.onDragStop, true);
116
116
  this.shadowRoot.addEventListener('closeButtonPre', this.onPreItemRemoved, true);
117
117
  this.shadowRoot.addEventListener('closeButtonPressed', this.onPostItemRemoved, true);
118
- // events.ts events
119
- this.shadowRoot.addEventListener(LayoutReceiveEvents.autosave, this.onAutosaveRequest, true);
120
118
  this.setupCustomButtons();
121
119
  }
122
120
  /** @internal */
123
121
  disconnectedCallback() {
124
- // golden layout events
125
122
  this.shadowRoot.removeEventListener('dragStart', this.onDragStart);
126
123
  this.shadowRoot.removeEventListener('dragStop', this.onDragStop);
127
124
  this.shadowRoot.removeEventListener('closeButtonPre', this.onPreItemRemoved);
128
125
  this.shadowRoot.removeEventListener('closeButtonPressed', this.onPostItemRemoved);
129
- // events.ts events
130
- this.shadowRoot.addEventListener(LayoutReceiveEvents.autosave, this.onAutosaveRequest);
131
126
  }
132
127
  /** @internal */
133
128
  onDragStart() {
@@ -158,10 +153,6 @@ export class FoundationLayout extends FoundationElement {
158
153
  this.$emit(LayoutEmitEvents.itemResized);
159
154
  this.cacheAndSaveLayout();
160
155
  }
161
- /** @internal */
162
- onAutosaveRequest() {
163
- this.cacheAndSaveLayout();
164
- }
165
156
  /**
166
157
  * JS API, public
167
158
  */
@@ -203,22 +194,9 @@ export class FoundationLayout extends FoundationElement {
203
194
  /**
204
195
  * @public
205
196
  * Gets a minified string containing the config describing the current layout of the layout object to later restore in {@link FoundationLayout.loadLayout | function}
206
- * @remarks
207
- * Includes any state for a contained component exposed by the {@link LayoutComponentWithState} interface.
208
197
  * @returns - latest version of {@link SerialisedLayout} describing the layout
209
198
  */
210
199
  getLayout() {
211
- const componentCollection = this.getLayoutComponents();
212
- componentCollection.forEach((items) => {
213
- if (!items.length)
214
- return;
215
- const orderedStates = [...items].map((item) => { var _b; return (_b = item.getCurrentState) === null || _b === void 0 ? void 0 : _b.call(item); });
216
- const componentInstanceContainer = items[0][instanceContainer];
217
- componentInstanceContainer.container.setState({
218
- instance: componentInstanceContainer.instance,
219
- orderedStates,
220
- });
221
- });
222
200
  return { v: '1', c: ResolvedLayoutConfig.minifyConfig(this.layout.saveLayout()) };
223
201
  }
224
202
  /**
@@ -270,14 +248,6 @@ export class FoundationLayout extends FoundationElement {
270
248
  this.registerPlaceholdersAndSetClosable(layoutConfig, missingRegisteredItems);
271
249
  }
272
250
  this.loadGLConfigAndSetup(layoutConfig);
273
- const componentCollection = this.getLayoutComponents();
274
- componentCollection.forEach((items) => {
275
- if (!items.length)
276
- return;
277
- const componentInstanceContainer = items[0][instanceContainer];
278
- const orderedStates = componentInstanceContainer.container.getState()['orderedStates'];
279
- [...items].map((item, i) => { var _b, _c; return (_b = item.applyState) === null || _b === void 0 ? void 0 : _b.call(item, (_c = orderedStates[i]) !== null && _c !== void 0 ? _c : null); });
280
- });
281
251
  this.cacheAndSaveLayout();
282
252
  }
283
253
  /**
@@ -443,9 +413,6 @@ export class FoundationLayout extends FoundationElement {
443
413
  *
444
414
  * This has the effect of allowing us to create multiple instances of the same registered item, and each
445
415
  * created instance is separate allowing it to implement its own serialise and cache of data.
446
- *
447
- * As part of creating each instance we attach a reference to the instance container which is used
448
- * to be able to optionally save state, and any state which has been saved we apply to the component.
449
416
  */
450
417
  const registrationFunction = (() => {
451
418
  // Use appendChild to consume the elements and save them in the master copy
@@ -466,25 +433,11 @@ export class FoundationLayout extends FoundationElement {
466
433
  // the key point is "cloneNode" which makes a copy at this point
467
434
  if (!instances.has(state === null || state === void 0 ? void 0 : state['instance'])) {
468
435
  const instanceCopy = document.createDocumentFragment();
469
- Array.from(masterCopy.children).forEach((e) => {
470
- instanceCopy.appendChild(e.cloneNode(true));
471
- });
436
+ Array.from(masterCopy.children).forEach((e) => instanceCopy.appendChild(e.cloneNode(true)));
472
437
  instances.set(state['instance'], [...instanceCopy.children]);
473
438
  }
474
- // provide each component with a reference to the instance container
475
- // so they can optionally save and load their own state
476
- const componentInstanceContainer = {
477
- container,
478
- instance: state['instance'],
479
- };
480
- const instanceOrderedStates = state['orderedStates'] || [];
481
439
  // get the instance from the map and append it to the container
482
- instances.get(state['instance']).forEach((component, i) => {
483
- console.log('mw - trying to apply state');
484
- // component.applyState?.(instanceOrderedStates[i] ?? null);
485
- container.element.appendChild(component);
486
- component[instanceContainer] = componentInstanceContainer;
487
- });
440
+ instances.get(state['instance']).forEach((e) => container.element.appendChild(e));
488
441
  this.setupLayoutReceiveEvents(container, state);
489
442
  };
490
443
  })();
@@ -560,9 +513,7 @@ export class FoundationLayout extends FoundationElement {
560
513
  */
561
514
  loadGLConfigAndSetup(config) {
562
515
  this.hasFirstLoaded = true;
563
- console.log('mw - loadGLConfigAndSetup before loadLayout');
564
516
  this.layout.loadLayout(Object.assign(Object.assign(Object.assign({}, config), glVisualConfig), { dimensions: Object.assign(Object.assign({}, glVisualConfig.dimensions), this.dimensionsConfig) }));
565
- console.log('mw - loadGLConfigAndSetup after loadLayout');
566
517
  this.attatchResizeEvents();
567
518
  }
568
519
  /**
@@ -601,17 +552,8 @@ export class FoundationLayout extends FoundationElement {
601
552
  });
602
553
  });
603
554
  }
604
- /**
605
- * Return an array of each contained items in the layout.
606
- * @internal
607
- */
608
- getLayoutComponents() {
609
- return [...this.shadowRoot.querySelectorAll('div.lm_content')].map((container) => [
610
- ...container.children,
611
- ]);
612
- }
613
555
  }
614
- _FoundationLayout__boundDragListener = new WeakMap(), _a = componentType;
556
+ _FoundationLayout__boundPreDeletionListener = new WeakMap(), _FoundationLayout__boundDragListener = new WeakMap(), _a = componentType;
615
557
  __decorate([
616
558
  attr({ attribute: 'reload-buffer' })
617
559
  ], FoundationLayout.prototype, "reloadBuffer", void 0);
@@ -3,11 +3,6 @@
3
3
  * @internal
4
4
  */
5
5
  export const componentType = Symbol('component-type');
6
- /**
7
- * Used to key a reference to the instance and golden layout container on a layout component.
8
- * @internal
9
- */
10
- export const instanceContainer = Symbol('component-instance');
11
6
  /**
12
7
  * Default time in milliseconds for the layout to buffer calls to reloading
13
8
  * the layout while the declarative API is loading.
@@ -21,10 +21,8 @@ export const LayoutEmitEvents = {
21
21
  * Defines events that the layout system listens for
22
22
  *
23
23
  * 'changeTitle' - emit this from a contained item to update the title of the window that contains it.
24
- * 'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See {@link LayoutComponentWithState}.
25
24
  * @public
26
25
  */
27
26
  export const LayoutReceiveEvents = {
28
27
  changeTitle: 'change-title',
29
- autosave: 'autosave',
30
28
  };
@@ -1,3 +1,3 @@
1
- import { componentType, instanceContainer } from './constants';
1
+ import { componentType } from './constants';
2
2
  /** @internal */
3
3
  export const layoutRegionValue = ['horizontal', 'vertical', 'tabs'];
@@ -527,7 +527,7 @@
527
527
  {
528
528
  "kind": "Method",
529
529
  "canonicalReference": "@genesislcap/foundation-layout!FoundationLayout#getLayout:member(1)",
530
- "docComment": "/**\n * Gets a minified string containing the config describing the current layout of the layout object to later restore in {@link FoundationLayout.loadLayout | function}\n *\n * @remarks\n *\n * Includes any state for a contained component exposed by the {@link LayoutComponentWithState} interface.\n *\n * @returns - latest version of {@link SerialisedLayout} describing the layout\n *\n * @public\n */\n",
530
+ "docComment": "/**\n * Gets a minified string containing the config describing the current layout of the layout object to later restore in {@link FoundationLayout.loadLayout | function}\n *\n * @returns - latest version of {@link SerialisedLayout} describing the layout\n *\n * @public\n */\n",
531
531
  "excerptTokens": [
532
532
  {
533
533
  "kind": "Content",
@@ -1432,110 +1432,6 @@
1432
1432
  "endIndex": 2
1433
1433
  }
1434
1434
  },
1435
- {
1436
- "kind": "Interface",
1437
- "canonicalReference": "@genesislcap/foundation-layout!LayoutComponentWithState:interface",
1438
- "docComment": "/**\n * Interface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state.\n *\n * @remarks\n *\n * When the layout is saved either via the autosave functionality or manually calling {@link FoundationLayout.getLayout}, all contained components will be requested to provide state if they wish.\n *\n * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is reloaded. Before an item is appended onto the layout DOM, the state will be applied to the component via `applyState`. You will likely want to cache this and then use it later in the lifecycle of the component. The state is `null` when the instance is first created.\n *\n * See the written documentation for some error scenarios to consider about when implementing this interface.\n *\n * @typeParam T - the type of the state object you wish to serialise with the component.\n *\n * @example\n * ```\n * type ComponentState = {\n * foo: string;\n * }\n * \\@customElement({ name: 'my-component' })\n * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {\n * \\@observable foo: string;\n * private fooCache: ComponentState | null;\n *\n * getCurrentState(): ComponentState {\n * if (!this.foo) return null;\n * return {\n * foo: this.foo;\n * }\n * }\n *\n * applyState(state: ComponentState | null) {\n * this.fooCache = state;\n * }\n *\n * connectedCallback() {\n * // do other required setup\n * if (this.fooCache) {\n * this.foo = this.fooCache.foo;\n * }\n * }\n * }\n * ```\n *\n * @example\n *\n * If you are using the autosave functionality you should inform the layout system when you update the state of a component, otherwise the state will only be updated when the user performs an action such as resizing an item. Use the {@link LayoutReceiveEvents} `autosave` event.\n * ```\n * // Same component as above\n * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {\n * // can use xChanged pattern as `foo` was declared observable\n * fooChanged() {\n * this.$emit(LayoutReceiveEvents.autosave);\n * }\n * }\n * ```\n *\n * @public\n */\n",
1439
- "excerptTokens": [
1440
- {
1441
- "kind": "Content",
1442
- "text": "export interface LayoutComponentWithState<T> "
1443
- }
1444
- ],
1445
- "fileUrlPath": "src/utils/types.ts",
1446
- "releaseTag": "Public",
1447
- "typeParameters": [
1448
- {
1449
- "typeParameterName": "T",
1450
- "constraintTokenRange": {
1451
- "startIndex": 0,
1452
- "endIndex": 0
1453
- },
1454
- "defaultTypeTokenRange": {
1455
- "startIndex": 0,
1456
- "endIndex": 0
1457
- }
1458
- }
1459
- ],
1460
- "name": "LayoutComponentWithState",
1461
- "preserveMemberOrder": false,
1462
- "members": [
1463
- {
1464
- "kind": "MethodSignature",
1465
- "canonicalReference": "@genesislcap/foundation-layout!LayoutComponentWithState#applyState:member(1)",
1466
- "docComment": "/**\n * Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in `connectedCallback`.\n */\n",
1467
- "excerptTokens": [
1468
- {
1469
- "kind": "Content",
1470
- "text": "applyState(state: "
1471
- },
1472
- {
1473
- "kind": "Content",
1474
- "text": "T | null"
1475
- },
1476
- {
1477
- "kind": "Content",
1478
- "text": "): "
1479
- },
1480
- {
1481
- "kind": "Content",
1482
- "text": "void"
1483
- },
1484
- {
1485
- "kind": "Content",
1486
- "text": ";"
1487
- }
1488
- ],
1489
- "isOptional": false,
1490
- "returnTypeTokenRange": {
1491
- "startIndex": 3,
1492
- "endIndex": 4
1493
- },
1494
- "releaseTag": "Public",
1495
- "overloadIndex": 1,
1496
- "parameters": [
1497
- {
1498
- "parameterName": "state",
1499
- "parameterTypeTokenRange": {
1500
- "startIndex": 1,
1501
- "endIndex": 2
1502
- },
1503
- "isOptional": false
1504
- }
1505
- ],
1506
- "name": "applyState"
1507
- },
1508
- {
1509
- "kind": "MethodSignature",
1510
- "canonicalReference": "@genesislcap/foundation-layout!LayoutComponentWithState#getCurrentState:member(1)",
1511
- "docComment": "/**\n * Provide the state you wish to save. It is recommended if the component which implements this interface has not fully initialised at the point this is called that you return `null` as the state, following the pattern of `null` being set as the initial state.\n */\n",
1512
- "excerptTokens": [
1513
- {
1514
- "kind": "Content",
1515
- "text": "getCurrentState(): "
1516
- },
1517
- {
1518
- "kind": "Content",
1519
- "text": "T"
1520
- },
1521
- {
1522
- "kind": "Content",
1523
- "text": ";"
1524
- }
1525
- ],
1526
- "isOptional": false,
1527
- "returnTypeTokenRange": {
1528
- "startIndex": 1,
1529
- "endIndex": 2
1530
- },
1531
- "releaseTag": "Public",
1532
- "overloadIndex": 1,
1533
- "parameters": [],
1534
- "name": "getCurrentState"
1535
- }
1536
- ],
1537
- "extendsTokenRanges": []
1538
- },
1539
1435
  {
1540
1436
  "kind": "Variable",
1541
1437
  "canonicalReference": "@genesislcap/foundation-layout!LayoutEmitEvents:var",
@@ -1562,7 +1458,7 @@
1562
1458
  {
1563
1459
  "kind": "Variable",
1564
1460
  "canonicalReference": "@genesislcap/foundation-layout!LayoutReceiveEvents:var",
1565
- "docComment": "/**\n * Defines events that the layout system listens for\n *\n * 'changeTitle' - emit this from a contained item to update the title of the window that contains it. 'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See {@link LayoutComponentWithState}.\n *\n * @public\n */\n",
1461
+ "docComment": "/**\n * Defines events that the layout system listens for\n *\n * 'changeTitle' - emit this from a contained item to update the title of the window that contains it.\n *\n * @public\n */\n",
1566
1462
  "excerptTokens": [
1567
1463
  {
1568
1464
  "kind": "Content",
@@ -1570,7 +1466,7 @@
1570
1466
  },
1571
1467
  {
1572
1468
  "kind": "Content",
1573
- "text": "{\n readonly changeTitle: \"change-title\";\n readonly autosave: \"autosave\";\n}"
1469
+ "text": "{\n readonly changeTitle: \"change-title\";\n}"
1574
1470
  }
1575
1471
  ],
1576
1472
  "fileUrlPath": "src/utils/events.ts",
@@ -1585,7 +1481,7 @@
1585
1481
  {
1586
1482
  "kind": "TypeAlias",
1587
1483
  "canonicalReference": "@genesislcap/foundation-layout!LayoutReceiveEventsDetail:type",
1588
- "docComment": "/**\n * Defines the shape of the detail that the layout listens works with for events it listens on\n *\n * 'changeTitle' - `title` is the string you want to set. For `mode`: `replace` will set the title to be `title`, `suffix` will append `title` to the end of the existing title. 'autosave' - no other parameters.\n *\n * @public\n */\n",
1484
+ "docComment": "/**\n * Defines the shape of the detail that the layout listens works with for events it listens on\n *\n * 'changeTitle' - `title` is the string you want to set. For `mode`: `replace` will set the title to be `title`, `suffix` will append `title` to the end of the existing title.\n *\n * @public\n */\n",
1589
1485
  "excerptTokens": [
1590
1486
  {
1591
1487
  "kind": "Content",
@@ -1593,7 +1489,7 @@
1593
1489
  },
1594
1490
  {
1595
1491
  "kind": "Content",
1596
- "text": "{\n changeTitle: {\n title: string;\n mode: 'replace' | 'suffix';\n };\n autosave: void;\n}"
1492
+ "text": "{\n changeTitle: {\n title: string;\n mode: 'replace' | 'suffix';\n };\n}"
1597
1493
  },
1598
1494
  {
1599
1495
  "kind": "Content",
@@ -143,8 +143,6 @@ export declare class FoundationLayout extends FoundationElement implements Layou
143
143
  private onPostItemRemoved;
144
144
  /** @internal */
145
145
  private onPostItemResized;
146
- /** @internal */
147
- private onAutosaveRequest;
148
146
  /**
149
147
  * JS API, public
150
148
  */
@@ -173,8 +171,6 @@ export declare class FoundationLayout extends FoundationElement implements Layou
173
171
  /**
174
172
  * @public
175
173
  * Gets a minified string containing the config describing the current layout of the layout object to later restore in {@link FoundationLayout.loadLayout | function}
176
- * @remarks
177
- * Includes any state for a contained component exposed by the {@link LayoutComponentWithState} interface.
178
174
  * @returns - latest version of {@link SerialisedLayout} describing the layout
179
175
  */
180
176
  getLayout(): SerialisedLayout;
@@ -318,11 +314,6 @@ export declare class FoundationLayout extends FoundationElement implements Layou
318
314
  * @internal
319
315
  */
320
316
  private setupCustomButtons;
321
- /**
322
- * Return an array of each contained items in the layout.
323
- * @internal
324
- */
325
- private getLayoutComponents;
326
317
  }
327
318
 
328
319
  /**
@@ -497,70 +488,6 @@ declare interface LayoutComponent {
497
488
  requestLayoutReload(): void;
498
489
  }
499
490
 
500
- /**
501
- * Interface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state.
502
- * @typeParam T - the type of the state object you wish to serialise with the component.
503
- * @remarks
504
- * When the layout is saved either via the autosave functionality or manually calling {@link FoundationLayout.getLayout}, all contained components will be requested to provide state if they wish.
505
- *
506
- * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is reloaded. Before an item is appended onto the layout DOM, the state will be applied to the component via `applyState`. You will likely want to cache this and then use it later in the lifecycle of the component. The state is `null` when the instance is first created.
507
- *
508
- * See the written documentation for some error scenarios to consider about when implementing this interface.
509
- *
510
- * @example
511
- * ```
512
- * type ComponentState = {
513
- * foo: string;
514
- * }
515
- * \@customElement({ name: 'my-component' })
516
- * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
517
- * \@observable foo: string;
518
- * private fooCache: ComponentState | null;
519
- *
520
- * getCurrentState(): ComponentState {
521
- * if (!this.foo) return null;
522
- * return {
523
- * foo: this.foo;
524
- * }
525
- * }
526
- *
527
- * applyState(state: ComponentState | null) {
528
- * this.fooCache = state;
529
- * }
530
- *
531
- * connectedCallback() {
532
- * // do other required setup
533
- * if (this.fooCache) {
534
- * this.foo = this.fooCache.foo;
535
- * }
536
- * }
537
- * }
538
- * ```
539
- *
540
- * @example
541
- * If you are using the autosave functionality you should inform the layout system when you update the state of a component, otherwise the state will only be updated when the user performs an action such as resizing an item. Use the {@link LayoutReceiveEvents} `autosave` event.
542
- * ```
543
- * // Same component as above
544
- * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
545
- * // can use xChanged pattern as `foo` was declared observable
546
- * fooChanged() {
547
- * this.$emit(LayoutReceiveEvents.autosave);
548
- * }
549
- * }
550
- * ```
551
- * @public
552
- * */
553
- export declare interface LayoutComponentWithState<T> {
554
- /**
555
- * Provide the state you wish to save. It is recommended if the component which implements this interface has not fully initialised at the point this is called that you return `null` as the state, following the pattern of `null` being set as the initial state.
556
- */
557
- getCurrentState(): T;
558
- /**
559
- * Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in `connectedCallback`.
560
- */
561
- applyState(state: T | null): void;
562
- }
563
-
564
491
  /**
565
492
  * Defines events that the layout system emits
566
493
  *
@@ -585,19 +512,16 @@ export declare const LayoutEmitEvents: {
585
512
  * Defines events that the layout system listens for
586
513
  *
587
514
  * 'changeTitle' - emit this from a contained item to update the title of the window that contains it.
588
- * 'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See {@link LayoutComponentWithState}.
589
515
  * @public
590
516
  */
591
517
  export declare const LayoutReceiveEvents: {
592
518
  readonly changeTitle: "change-title";
593
- readonly autosave: "autosave";
594
519
  };
595
520
 
596
521
  /**
597
522
  * Defines the shape of the detail that the layout listens works with for events it listens on
598
523
  *
599
524
  * 'changeTitle' - `title` is the string you want to set. For `mode`: `replace` will set the title to be `title`, `suffix` will append `title` to the end of the existing title.
600
- * 'autosave' - no other parameters.
601
525
  * @public
602
526
  */
603
527
  export declare type LayoutReceiveEventsDetail = {
@@ -605,7 +529,6 @@ export declare type LayoutReceiveEventsDetail = {
605
529
  title: string;
606
530
  mode: 'replace' | 'suffix';
607
531
  };
608
- autosave: void;
609
532
  };
610
533
 
611
534
  /**
@@ -17,7 +17,3 @@ getLayout(): SerialisedLayout;
17
17
 
18
18
  - latest version of [SerialisedLayout](./foundation-layout.serialisedlayout.md) describing the layout
19
19
 
20
- ## Remarks
21
-
22
- Includes any state for a contained component exposed by the [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md) interface.
23
-
@@ -6,13 +6,12 @@
6
6
 
7
7
  Defines events that the layout system listens for
8
8
 
9
- 'changeTitle' - emit this from a contained item to update the title of the window that contains it. 'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md)<!-- -->.
9
+ 'changeTitle' - emit this from a contained item to update the title of the window that contains it.
10
10
 
11
11
  **Signature:**
12
12
 
13
13
  ```typescript
14
14
  LayoutReceiveEvents: {
15
15
  readonly changeTitle: "change-title";
16
- readonly autosave: "autosave";
17
16
  }
18
17
  ```
@@ -6,7 +6,7 @@
6
6
 
7
7
  Defines the shape of the detail that the layout listens works with for events it listens on
8
8
 
9
- 'changeTitle' - `title` is the string you want to set. For `mode`<!-- -->: `replace` will set the title to be `title`<!-- -->, `suffix` will append `title` to the end of the existing title. 'autosave' - no other parameters.
9
+ 'changeTitle' - `title` is the string you want to set. For `mode`<!-- -->: `replace` will set the title to be `title`<!-- -->, `suffix` will append `title` to the end of the existing title.
10
10
 
11
11
  **Signature:**
12
12
 
@@ -16,6 +16,5 @@ export type LayoutReceiveEventsDetail = {
16
16
  title: string;
17
17
  mode: 'replace' | 'suffix';
18
18
  };
19
- autosave: void;
20
19
  };
21
20
  ```
@@ -18,7 +18,6 @@
18
18
 
19
19
  | Interface | Description |
20
20
  | --- | --- |
21
- | [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md) | Interface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state. |
22
21
  | [RegisteredElementConfig](./foundation-layout.registeredelementconfig.md) | The parameters that can be set on a new item when being added by the [FoundationLayout.addItem()](./foundation-layout.foundationlayout.additem.md) API |
23
22
 
24
23
  ## Variables
@@ -29,7 +28,7 @@
29
28
  | [foundationLayoutComponents](./foundation-layout.foundationlayoutcomponents.md) | Registration object to register the layout with your design system. |
30
29
  | [LAYOUT\_ICONS](./foundation-layout.layout_icons.md) | A collection of SVG icons in base64 format. |
31
30
  | [LayoutEmitEvents](./foundation-layout.layoutemitevents.md) | <p>Defines events that the layout system emits</p><p>'firstLoaded' - emitted when the layout has finished loading the first time using the declarative API after [DEFAULT\_RELOAD\_BUFFER](./foundation-layout.default_reload_buffer.md) ms. <br/> 'itemAdded' - emitted when an item is added to the layout' <br/> 'itemRemoved' - emitted when an item is removed from the layout' <br/> 'itemResized' - emitted when the user drags the divider to resize elements</p> |
32
- | [LayoutReceiveEvents](./foundation-layout.layoutreceiveevents.md) | <p>Defines events that the layout system listens for</p><p>'changeTitle' - emit this from a contained item to update the title of the window that contains it. 'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md)<!-- -->.</p> |
31
+ | [LayoutReceiveEvents](./foundation-layout.layoutreceiveevents.md) | <p>Defines events that the layout system listens for</p><p>'changeTitle' - emit this from a contained item to update the title of the window that contains it.</p> |
33
32
  | [layoutStyles](./foundation-layout.layoutstyles.md) | <code>ElementStyles</code> which defines the css for [FoundationLayout](./foundation-layout.foundationlayout.md)<!-- -->. |
34
33
  | [layoutTemplate](./foundation-layout.layouttemplate.md) | <code>ViewTemplate</code> which defines the html for [FoundationLayout](./foundation-layout.foundationlayout.md)<!-- -->. |
35
34
 
@@ -38,7 +37,7 @@
38
37
  | Type Alias | Description |
39
38
  | --- | --- |
40
39
  | [CustomButton](./foundation-layout.custombutton.md) | Definition of a custom button which will be added to all layout items. |
41
- | [LayoutReceiveEventsDetail](./foundation-layout.layoutreceiveeventsdetail.md) | <p>Defines the shape of the detail that the layout listens works with for events it listens on</p><p>'changeTitle' - <code>title</code> is the string you want to set. For <code>mode</code>: <code>replace</code> will set the title to be <code>title</code>, <code>suffix</code> will append <code>title</code> to the end of the existing title. 'autosave' - no other parameters.</p> |
40
+ | [LayoutReceiveEventsDetail](./foundation-layout.layoutreceiveeventsdetail.md) | <p>Defines the shape of the detail that the layout listens works with for events it listens on</p><p>'changeTitle' - <code>title</code> is the string you want to set. For <code>mode</code>: <code>replace</code> will set the title to be <code>title</code>, <code>suffix</code> will append <code>title</code> to the end of the existing title.</p> |
42
41
  | [LayoutRegionType](./foundation-layout.layoutregiontype.md) | Union type describing the three different types of region splits. Set on the <code>type</code> attribute on [FoundationLayoutRegion](./foundation-layout.foundationlayoutregion.md)<!-- -->. |
43
42
  | [Placement](./foundation-layout.placement.md) | Where to and how to add the new item(s) into the layout when using the [FoundationLayout.addItem()](./foundation-layout.foundationlayout.additem.md) API. |
44
43
  | [SerialisedLayout](./foundation-layout.serialisedlayout.md) | Versioned layout config objects. <code>v</code> is the version and <code>c</code> contains the layout config. |
@@ -132,12 +132,6 @@ export const LAYOUT_ICONS: {
132
132
  readonly tabDropdownSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNC4yNTEgMTgxLjFDNy4zOTIgMTc3LjcgMTEuNjkgMTc1LjEgMTYgMTc1LjFjMy44OTEgMCA3Ljc4MSAxLjQwNiAxMC44NiA0LjI1bDE5Ny4xIDE4MS4xbDE5Ny4xLTE4MS4xYzYuNS02IDE2LjY0LTUuNjI1IDIyLjYxIC45MDYyYzYgNi41IDUuNTk0IDE2LjU5LS44OTA2IDIyLjU5bC0yMDggMTkyYy02LjE1NiA1LjY4OC0xNS41NiA1LjY4OC0yMS43MiAwbC0yMDgtMTkyQy0xLjM0MyAxOTcuNy0xLjc0OSAxODcuNiA0LjI1MSAxODEuMXoiIGZpbGw9IiM4NzliYTYiLz48L3N2Zz4=";
133
133
  };
134
134
 
135
- // @public
136
- export interface LayoutComponentWithState<T> {
137
- applyState(state: T | null): void;
138
- getCurrentState(): T;
139
- }
140
-
141
135
  // @public
142
136
  export const LayoutEmitEvents: {
143
137
  readonly firstLoaded: "first-loaded";
@@ -149,7 +143,6 @@ export const LayoutEmitEvents: {
149
143
  // @public
150
144
  export const LayoutReceiveEvents: {
151
145
  readonly changeTitle: "change-title";
152
- readonly autosave: "autosave";
153
146
  };
154
147
 
155
148
  // @public
@@ -158,7 +151,6 @@ export type LayoutReceiveEventsDetail = {
158
151
  title: string;
159
152
  mode: 'replace' | 'suffix';
160
153
  };
161
- autosave: void;
162
154
  };
163
155
 
164
156
  // Warning: (ae-forgotten-export) The symbol "layoutRegionValue" needs to be exported by the entry point index.d.ts
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-layout",
3
3
  "description": "Genesis Foundation UI App Layout",
4
- "version": "14.92.1-pa-913.3",
4
+ "version": "14.92.2-beta.revert-PA-913.1",
5
5
  "license": "SEE LICENSE IN license.txt",
6
6
  "main": "dist/esm/index.js",
7
7
  "types": "dist/foundation-layout.d.ts",
@@ -27,15 +27,15 @@
27
27
  "test:debug": "genx test --debug"
28
28
  },
29
29
  "devDependencies": {
30
- "@genesislcap/foundation-testing": "14.92.1-pa-913.3",
31
- "@genesislcap/genx": "14.92.1-pa-913.3",
30
+ "@genesislcap/foundation-testing": "14.92.2-beta.revert-PA-913.1",
31
+ "@genesislcap/genx": "14.92.2-beta.revert-PA-913.1",
32
32
  "rimraf": "^3.0.2"
33
33
  },
34
34
  "dependencies": {
35
35
  "@genesis-community/golden-layout": "^2.10.1",
36
- "@genesislcap/foundation-comms": "14.92.1-pa-913.3",
37
- "@genesislcap/foundation-logger": "14.92.1-pa-913.3",
38
- "@genesislcap/foundation-utils": "14.92.1-pa-913.3",
36
+ "@genesislcap/foundation-comms": "14.92.2-beta.revert-PA-913.1",
37
+ "@genesislcap/foundation-logger": "14.92.2-beta.revert-PA-913.1",
38
+ "@genesislcap/foundation-utils": "14.92.2-beta.revert-PA-913.1",
39
39
  "@microsoft/fast-components": "^2.21.3",
40
40
  "@microsoft/fast-element": "^1.7.0",
41
41
  "@microsoft/fast-foundation": "^2.33.2",
@@ -50,5 +50,5 @@
50
50
  "access": "public"
51
51
  },
52
52
  "customElements": "dist/custom-elements.json",
53
- "gitHead": "5a527587221254714112b71d7c7735f10fdfe26b"
53
+ "gitHead": "965e315b84fb239583003cf8db21c0208e862601"
54
54
  }
@@ -1,24 +0,0 @@
1
- <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
-
3
- [Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md) &gt; [applyState](./foundation-layout.layoutcomponentwithstate.applystate.md)
4
-
5
- ## LayoutComponentWithState.applyState() method
6
-
7
- Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in `connectedCallback`<!-- -->.
8
-
9
- **Signature:**
10
-
11
- ```typescript
12
- applyState(state: T | null): void;
13
- ```
14
-
15
- ## Parameters
16
-
17
- | Parameter | Type | Description |
18
- | --- | --- | --- |
19
- | state | T \| null | |
20
-
21
- **Returns:**
22
-
23
- void
24
-
@@ -1,17 +0,0 @@
1
- <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
-
3
- [Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md) &gt; [getCurrentState](./foundation-layout.layoutcomponentwithstate.getcurrentstate.md)
4
-
5
- ## LayoutComponentWithState.getCurrentState() method
6
-
7
- Provide the state you wish to save. It is recommended if the component which implements this interface has not fully initialised at the point this is called that you return `null` as the state, following the pattern of `null` being set as the initial state.
8
-
9
- **Signature:**
10
-
11
- ```typescript
12
- getCurrentState(): T;
13
- ```
14
- **Returns:**
15
-
16
- T
17
-
@@ -1,75 +0,0 @@
1
- <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
-
3
- [Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md)
4
-
5
- ## LayoutComponentWithState interface
6
-
7
- Interface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state.
8
-
9
- **Signature:**
10
-
11
- ```typescript
12
- export interface LayoutComponentWithState<T>
13
- ```
14
-
15
- ## Remarks
16
-
17
- When the layout is saved either via the autosave functionality or manually calling [FoundationLayout.getLayout()](./foundation-layout.foundationlayout.getlayout.md)<!-- -->, all contained components will be requested to provide state if they wish.
18
-
19
- Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is reloaded. Before an item is appended onto the layout DOM, the state will be applied to the component via `applyState`<!-- -->. You will likely want to cache this and then use it later in the lifecycle of the component. The state is `null` when the instance is first created.
20
-
21
- See the written documentation for some error scenarios to consider about when implementing this interface.
22
-
23
- ## Example 1
24
-
25
-
26
- ```
27
- type ComponentState = {
28
- foo: string;
29
- }
30
- \@customElement({ name: 'my-component' })
31
- export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
32
- \@observable foo: string;
33
- private fooCache: ComponentState | null;
34
-
35
- getCurrentState(): ComponentState {
36
- if (!this.foo) return null;
37
- return {
38
- foo: this.foo;
39
- }
40
- }
41
-
42
- applyState(state: ComponentState | null) {
43
- this.fooCache = state;
44
- }
45
-
46
- connectedCallback() {
47
- // do other required setup
48
- if (this.fooCache) {
49
- this.foo = this.fooCache.foo;
50
- }
51
- }
52
- }
53
- ```
54
-
55
- ## Example 2
56
-
57
- If you are using the autosave functionality you should inform the layout system when you update the state of a component, otherwise the state will only be updated when the user performs an action such as resizing an item. Use the [LayoutReceiveEvents](./foundation-layout.layoutreceiveevents.md) `autosave` event.
58
-
59
- ```
60
- // Same component as above
61
- export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
62
- // can use xChanged pattern as `foo` was declared observable
63
- fooChanged() {
64
- this.$emit(LayoutReceiveEvents.autosave);
65
- }
66
- }
67
- ```
68
-
69
- ## Methods
70
-
71
- | Method | Description |
72
- | --- | --- |
73
- | [applyState(state)](./foundation-layout.layoutcomponentwithstate.applystate.md) | Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in <code>connectedCallback</code>. |
74
- | [getCurrentState()](./foundation-layout.layoutcomponentwithstate.getcurrentstate.md) | Provide the state you wish to save. It is recommended if the component which implements this interface has not fully initialised at the point this is called that you return <code>null</code> as the state, following the pattern of <code>null</code> being set as the initial state. |
75
-