@genesislcap/foundation-layout 14.92.1 → 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 +2 -20
- package/dist/custom-elements.json +121 -129
- package/dist/dts/index.d.ts +1 -1
- package/dist/dts/index.d.ts.map +1 -1
- package/dist/dts/main/layout-main.d.ts +0 -9
- package/dist/dts/main/layout-main.d.ts.map +1 -1
- package/dist/dts/utils/constants.d.ts +0 -5
- package/dist/dts/utils/constants.d.ts.map +1 -1
- package/dist/dts/utils/events.d.ts +0 -4
- package/dist/dts/utils/events.d.ts.map +1 -1
- package/dist/dts/utils/types.d.ts +2 -74
- package/dist/dts/utils/types.d.ts.map +1 -1
- package/dist/esm/main/layout-main.js +7 -55
- package/dist/esm/utils/constants.js +0 -5
- package/dist/esm/utils/events.js +0 -2
- package/dist/esm/utils/types.js +1 -1
- package/dist/foundation-layout.api.json +5 -109
- package/dist/foundation-layout.d.ts +0 -77
- package/docs/api/foundation-layout.foundationlayout.getlayout.md +0 -4
- package/docs/api/foundation-layout.layoutreceiveevents.md +1 -2
- package/docs/api/foundation-layout.layoutreceiveeventsdetail.md +1 -2
- package/docs/api/foundation-layout.md +2 -3
- package/docs/api-report.md +0 -8
- package/package.json +7 -7
- package/docs/api/foundation-layout.layoutcomponentwithstate.applystate.md +0 -24
- package/docs/api/foundation-layout.layoutcomponentwithstate.getcurrentstate.md +0 -17
- package/docs/api/foundation-layout.layoutcomponentwithstate.md +0 -75
@@ -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,
|
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
|
/**
|
@@ -435,9 +413,6 @@ export class FoundationLayout extends FoundationElement {
|
|
435
413
|
*
|
436
414
|
* This has the effect of allowing us to create multiple instances of the same registered item, and each
|
437
415
|
* created instance is separate allowing it to implement its own serialise and cache of data.
|
438
|
-
*
|
439
|
-
* As part of creating each instance we attach a reference to the instance container which is used
|
440
|
-
* to be able to optionally save state, and any state which has been saved we apply to the component.
|
441
416
|
*/
|
442
417
|
const registrationFunction = (() => {
|
443
418
|
// Use appendChild to consume the elements and save them in the master copy
|
@@ -458,25 +433,11 @@ export class FoundationLayout extends FoundationElement {
|
|
458
433
|
// the key point is "cloneNode" which makes a copy at this point
|
459
434
|
if (!instances.has(state === null || state === void 0 ? void 0 : state['instance'])) {
|
460
435
|
const instanceCopy = document.createDocumentFragment();
|
461
|
-
Array.from(masterCopy.children).forEach((e) =>
|
462
|
-
instanceCopy.appendChild(e.cloneNode(true));
|
463
|
-
});
|
436
|
+
Array.from(masterCopy.children).forEach((e) => instanceCopy.appendChild(e.cloneNode(true)));
|
464
437
|
instances.set(state['instance'], [...instanceCopy.children]);
|
465
438
|
}
|
466
|
-
// provide each component with a reference to the instance container
|
467
|
-
// so they can optionally save and load their own state
|
468
|
-
const componentInstanceContainer = {
|
469
|
-
container,
|
470
|
-
instance: state['instance'],
|
471
|
-
};
|
472
|
-
const instanceOrderedStates = state['orderedStates'] || [];
|
473
439
|
// get the instance from the map and append it to the container
|
474
|
-
instances.get(state['instance']).forEach((
|
475
|
-
var _b, _c;
|
476
|
-
(_b = component.applyState) === null || _b === void 0 ? void 0 : _b.call(component, (_c = instanceOrderedStates[i]) !== null && _c !== void 0 ? _c : null);
|
477
|
-
container.element.appendChild(component);
|
478
|
-
component[instanceContainer] = componentInstanceContainer;
|
479
|
-
});
|
440
|
+
instances.get(state['instance']).forEach((e) => container.element.appendChild(e));
|
480
441
|
this.setupLayoutReceiveEvents(container, state);
|
481
442
|
};
|
482
443
|
})();
|
@@ -591,17 +552,8 @@ export class FoundationLayout extends FoundationElement {
|
|
591
552
|
});
|
592
553
|
});
|
593
554
|
}
|
594
|
-
/**
|
595
|
-
* Return an array of each contained items in the layout.
|
596
|
-
* @internal
|
597
|
-
*/
|
598
|
-
getLayoutComponents() {
|
599
|
-
return [...this.shadowRoot.querySelectorAll('div.lm_content')].map((container) => [
|
600
|
-
...container.children,
|
601
|
-
]);
|
602
|
-
}
|
603
555
|
}
|
604
|
-
_FoundationLayout__boundDragListener = new WeakMap(), _a = componentType;
|
556
|
+
_FoundationLayout__boundPreDeletionListener = new WeakMap(), _FoundationLayout__boundDragListener = new WeakMap(), _a = componentType;
|
605
557
|
__decorate([
|
606
558
|
attr({ attribute: 'reload-buffer' })
|
607
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.
|
package/dist/esm/utils/events.js
CHANGED
@@ -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
|
};
|
package/dist/esm/utils/types.js
CHANGED
@@ -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 * @
|
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
|
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
|
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
|
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
|
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.
|
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.
|
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
|
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
|
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. |
|
package/docs/api-report.md
CHANGED
@@ -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",
|
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",
|
31
|
-
"@genesislcap/genx": "14.92.1",
|
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",
|
37
|
-
"@genesislcap/foundation-logger": "14.92.1",
|
38
|
-
"@genesislcap/foundation-utils": "14.92.1",
|
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": "
|
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) > [@genesislcap/foundation-layout](./foundation-layout.md) > [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md) > [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) > [@genesislcap/foundation-layout](./foundation-layout.md) > [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md) > [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
|
-
|