@lynker-desktop/electron-window-manager/README.md

electron-window-manager

# @lynker-desktop/electron-window-manager

electron 窗口管理

## Install

`npm i @lynker-desktop/electron-window-manager`

## 使用

### 1. 在 [主进程](https://electronjs.org/docs/glossary#main-process) 实例化

```javascript
const {initialize} = require('@lynker-desktop/electron-window-manager/main');
const windowsManager = initialize({
  preload: path.join(__dirname, '../preload/index.js')
});

win = windowsManager.create({
  name: 'demo',
  url: 'http://localhost:8000',
  loadingView: {
    url: 'http://localhost:8000/loading'
  },
})

```

### 2. 在 [preload](https://www.electronjs.org/docs/latest/tutorial/tutorial-preload) 引入

```javascript
import '@lynker-desktop/electron-window-manager/preload'
```

### 3. 在 [渲染进程](https://electronjs.org/docs/glossary#renderer-process) 实例化

```javascript
import ewm from '@lynker-desktop/electron-window-manager/renderer'
ewm.create({
  name: 'test',
  url: 'https://baidu.com',
  browserWindow: {
    resizable: false,
    alwaysOnTop: true,
    focusable: false,
    frame: false,
    show: true,
    hasShadow: false,
    transparent: true,
    width: 100,
    height:100,
    webPreferences: {
      plugins: true,
      nodeIntegration: true,
      contextIsolation: false,
      backgroundThrottling: false,
      webSecurity: false,
    }
  }
})
```

完整的控制接口实现参见[example](./example)。

### BrowserView 排序功能

当创建BrowserView时，可以通过`zIndex`参数来控制BrowserView的显示顺序。数值越小，BrowserView越靠前显示。

```javascript
// 创建具有不同zIndex层级的BrowserView
windowsManager.create({
  type: 'BV',
  name: 'background-view',
  url: 'http://localhost:8000/background',
  zIndex: 10, // zIndex较大，显示在后面
  browserWindow: {
    parent: mainWindowId
  }
});

windowsManager.create({
  type: 'BV',
  name: 'foreground-view',
  url: 'http://localhost:8000/foreground',
  zIndex: 1, // zIndex较小，显示在前面
  browserWindow: {
    parent: mainWindowId
  }
});
```

#### 排序优化选项

为了避免频繁排序导致的闪烁问题，提供了以下选项：

1. **禁用自动排序**：在创建时设置 `disableAutoSort: true`
```javascript
windowsManager.create({
  type: 'BV',
  name: 'manual-sort-view',
  url: 'http://localhost:8000/view',
  zIndex: 5,
  disableAutoSort: true, // 禁用自动排序
  browserWindow: {
    parent: mainWindowId
  }
});
```

2. **手动排序**：使用 `sortBrowserViews` 方法手动触发排序
```javascript
// 在渲染进程中
ewm.sortBrowserViews(windowId); // 手动排序指定窗口的BrowserView
```

### 运行 Example

- yarn install && cd example/renderer && yarn
- yarn dev