Skip to content

Commit 86d4244

Browse files
authored
cherry-pick(#7262): Update API documentation for Visibility-Based Rendering (#7267)
Update API documentation for Visibility-Based Rendering (#7262) update API with documentation for Visibility-Based Rendering
1 parent da299e9 commit 86d4244

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed

API.md

+56
Original file line numberDiff line numberDiff line change
@@ -1304,3 +1304,59 @@ View provider Example:
13041304
}
13051305
}
13061306
```
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+
const myViewProvider = {
1338+
// ... other properties and methods ...
1339+
show: function (element, isEditing, viewOptions) {
1340+
// Callback for rendering view content
1341+
const renderCallback = () => {
1342+
// Your view rendering logic goes here
1343+
};
1344+
1345+
// Use the renderWhenVisible function to ensure rendering only happens when view is visible
1346+
const wasRenderedImmediately = viewOptions.renderWhenVisible(renderCallback);
1347+
1348+
// 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.
1362+

0 commit comments

Comments
 (0)