You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: API.md
+56
Original file line number
Diff line number
Diff line change
@@ -1304,3 +1304,59 @@ View provider Example:
1304
1304
}
1305
1305
}
1306
1306
```
1307
+
1308
+
## Visibility-Based Rendering in View Providers
1309
+
1310
+
To enhance performance and resource efficiency in OpenMCT, a visibility-based rendering feature has been added. This feature is designed to defer the execution of rendering logic for views that are not currently visible. It ensures that views are only updated when they are in the viewport, similar to how modern browsers handle rendering of inactive tabs but optimized for the OpenMCT tabbed display. It also works when views are scrolled outside the viewport (e.g., in a Display Layout).
1311
+
1312
+
### Overview
1313
+
1314
+
The show function is responsible for the rendering of a view. An [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) is used internally to determine whether the view is visible. This observer drives the visibility-based rendering feature, accessed via the `renderWhenVisible` function provided in the `viewOptions` parameter.
1315
+
1316
+
### Implementing Visibility-Based Rendering
1317
+
1318
+
The `renderWhenVisible` function is passed to the show function as a required part of the `viewOptions` object. This function should be used for all rendering logic that would otherwise be executed within a `requestAnimationFrame` call. When called, `renderWhenVisible` will either execute the provided function immediately (via `requestAnimationFrame`) if the view is currently visible, or defer its execution until the view becomes visible.
1319
+
1320
+
Additionally, `renderWhenVisible` returns a boolean value indicating whether the provided function was executed immediately (`true`) or deferred (`false`).
1321
+
1322
+
Here’s the signature for the show function:
1323
+
1324
+
`show(element, isEditing, viewOptions)`
1325
+
1326
+
* `element` (HTMLElement) - The DOM element where the view should be rendered.
1327
+
* `isEditing` (boolean) - Indicates whether the view is in editing mode.
1328
+
* `viewOptions` (Object) - A required object with configuration options for the view, including:
1329
+
* `renderWhenVisible` (Function) - This function wraps the `requestAnimationFrame` and only triggers the provided render logic when the view is visible in the viewport.
1330
+
1331
+
### Example
1332
+
1333
+
An OpenMCT view provider might implement the show function as follows:
1334
+
1335
+
```js
1336
+
// Define your view provider
1337
+
constmyViewProvider= {
1338
+
// ... other properties and methods ...
1339
+
show:function (element, isEditing, viewOptions) {
1340
+
// Callback for rendering view content
1341
+
constrenderCallback= () => {
1342
+
// Your view rendering logic goes here
1343
+
};
1344
+
1345
+
// Use the renderWhenVisible function to ensure rendering only happens when view is visible
// Optionally handle the immediate rendering return value
1349
+
if (wasRenderedImmediately) {
1350
+
console.debug('🪞 Rendering triggered immediately as the view is visible.');
1351
+
} else {
1352
+
console.debug('🛑 Rendering has been deferred until the view becomes visible.');
1353
+
}
1354
+
}
1355
+
};
1356
+
```
1357
+
1358
+
1359
+
Note that `renderWhenVisible` defers rendering while the view is not visible and caters to the latest execution call. This provides responsiveness for dynamic content while ensuring performance optimizations.
1360
+
1361
+
Ensure your view logic is prepared to handle potentially multiple deferrals if using this API, as only the last call to renderWhenVisible will be queued for execution upon the view becoming visible.
0 commit comments