electron-view-layer-manager
v1.0.1
Published
一个更方便进行view层级管理的npm包
Readme
ElectronViewLayerManager is primarily used for layer management of Electron WebContentsView: Problems that existed before this:
- All layer usage was controlled by calling window.contentview.addChildView(view) for layer control (calling addChildView would progressively stack, with the last called addChildView view covering the top, which led to scenarios where certain layers that were intended to always stay on top would be covered by some unexpected views)
- In some scenarios, when wanting to put a certain view on top while also needing to keep other window views at higher layers, it was necessary to call addChildView multiple times on multiple views simultaneously, resulting in very poor readability
ElectronViewLayerManager Overview:
- Each window has a viewLayerManager, and all viewLayerManagers are stored in windowManager. You can get the corresponding viewLayerManager by calling windowManager.getViewLayerManager(window.id)
- Through viewLayerManager, you can uniformly manage all views in the current window, including adding, removing, layer control and other operations
- For all subsequent view additions, deletions, and layer control, please use this API and do not use methods like window.contentview.addChildView and window.contentview.removeChildView anymore
ElectronViewLayerManager Usage:
- Call viewLayer's addView method to add a view to the current window and place the currently added view on the top layer
- Call viewLayer's removeView method to remove a view from the current window
- Call viewLayer's setZIndex(view, zIndex) method to adjust the view's layer. The larger the zIndex, the more forward it is, but it only adjusts the view's layer and will not immediately reorder. When the third parameter is passed as true, it will immediately reorder. This is suitable for when you need to adjust multiple view layers simultaneously - you can set incrementally increasing zIndex values for multiple views at once, then manually call the reload() method to immediately reorder layers according to zIndex
- You can call the getMaxZIndex() method to get the maximum zIndex of all views in the current window, so you know what zIndex value to set when you need a certain view to stay at a certain layer
- Call viewLayer's toBottom() method to move a view to the bottom layer (can only be used for views that have already been added, i.e., the view must have previously called addView)
- Call viewLayer's toTop() method to move a view to the top layer (can only be used for views that have already been added, i.e., the view must have previously called addView)
- Call viewLayer's setKeepFrontView method to keep a view always on top, unaffected by previous addView, toTop, setZIndex and other methods. This method will keep the view always on the top layer and will not be covered by any operations of other views. It is suitable for scenarios where you need to always keep a certain view at the top layer, such as pop-ups, tooltips, etc. However, note that after calling this method, the view's layer is fixed at the top layer and will no longer be affected by other methods. You need to manually call the cancelKeepFront method to cancel staying on top, so be sure to remember to call cancelKeepFront at the appropriate time (setKeepFrontView will not change the view's zIndex value, it just temporarily adjusts to the top layer, and after cancellation, it will still return to the original layer)
- Call viewLayer's cancelKeepFront method to cancel the view's stay on top. After calling, it will return to the layer position where the original zIndex value is located
API
| Method Name | Description | Type | |------|------|------| | addView | Add view and place the view on the top layer (cannot override keepFront views) | (view: WebContentsView, zIndex?: number) => void | | removeView | Remove view | (view: WebContentsView) => void | | setZIndex | Set view layer | (view: WebContentsView, zIndex: number, needLoad: boolean = false) => void | | toTop | Move view to the top layer and change zIndex to maximum value | (view: WebContentsView) => void | | toBottom | Move view to the bottom layer and change zIndex to minimum value | (view: WebContentsView) => void | | reload | Reorder views (reorder from largest to smallest zIndex) | () => void | | getMaxZIndex | Get the maximum layer zIndex | () => number | | getMinZIndex | Get the minimum layer zIndex | () => number | | getTopView | Get the highest layer view | () => WebContentsView | | getAllLayers | Get all views | () => WebContentsView[] | | setKeepFrontView | Temporarily set a view to the highest layer (does not change view zIndex) | (view: WebContentsView) => void | | cancelKeepFrontView | Cancel a temporary view's highest layer (restore to original zIndex position) | (view: WebContentsView) => void |
