有办法让黄金布局弹出与电子窗口一起工作吗？

Question

我正在开发一个JHipster应用程序，我正在努力使它在电子方面发挥作用。我有黄金布局窗口/窗格管理和跨窗格通信。我在技术组合方面有几个问题，包括：

1. 我不能同时弹出一个以上的窗格到他们自己的电子窗口。相反，我在控制台中得到一个Uncaught Error: Can't create config, layout not yet initialised错误。
2. 当弹出电子窗口时，三分之二的窗格不显示任何东西，我不知道原因是什么。对此有什么想法或建议吗？内容的一个例子是传单地图，另一个是"PowerPoint预览“，它实际上只是一个模拟幻灯片外观的div。
3. 我还没有做到这一点，但我认为，当我得到多个打开的弹出式电子窗口之间的通信将有困难。现在，这些窗格使用金色布局的glEventHub排放在彼此之间通信。当我跨过那座桥时，我有一条路要探索，那就是电子ipcRenderer。

有些借来的代码在这里(大部分代码我无法共享，因为它是公司机密)：

electron.js：

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({width: 900, height: 680});
  mainWindow.loadURL(isDev ? 'http://localhost:9000' : `file://${path.join(__dirname, '../build/index.html')}`);
  if (isDev) {
    // Open the DevTools.
    //BrowserWindow.addDevToolsExtension('<location to your react chrome extension>');
    mainWindow.webContents.openDevTools();
  }
  mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

goldenLayoutComponent.tsx，用于黄金布局的修补程序：

import React from "react";
import ReactDOM from "react-dom";
// import "./goldenLayout-dependencies";
import GoldenLayout from "golden-layout";
import "golden-layout/src/css/goldenlayout-base.css";
import "golden-layout/src/css/goldenlayout-dark-theme.css";
import $ from "jquery";

interface IGoldenLayoutProps {
  htmlAttrs: {},
  config: any,
  registerComponents: Function
}

interface IGoldenLayoutState {
  renderPanels: Set<any>
}

interface IContainerRef {
  current: any
}

export class GoldenLayoutComponent extends React.Component <IGoldenLayoutProps, IGoldenLayoutState> {
  goldenLayoutInstance = undefined;
  state = {
    renderPanels: new Set<any>()
  };
  containerRef: IContainerRef = React.createRef();

  render() {
    const panels = Array.from(this.state.renderPanels || []);
    return (
      <div ref={this.containerRef as any} {...this.props.htmlAttrs}>
        {panels.map((panel, index) => {
          return ReactDOM.createPortal(
            panel._getReactComponent(),
            panel._container.getElement()[0]
          );
        })}
      </div>
    );
  }

  componentRender(reactComponentHandler) {
    this.setState(state => {
      const newRenderPanels = new Set(state.renderPanels);
      newRenderPanels.add(reactComponentHandler);
      return { renderPanels: newRenderPanels };
    });
  }
  componentDestroy(reactComponentHandler) {
    this.setState(state => {
      const newRenderPanels = new Set(state.renderPanels);
      newRenderPanels.delete(reactComponentHandler);
      return { renderPanels: newRenderPanels };
    });
  }

  componentDidMount() {
    this.goldenLayoutInstance = new GoldenLayout(
      this.props.config || {},
      this.containerRef.current
    );
    if (this.props.registerComponents instanceof Function)
      this.props.registerComponents(this.goldenLayoutInstance);
    this.goldenLayoutInstance.reactContainer = this;
    this.goldenLayoutInstance.init();
  }
}


// Patching internal GoldenLayout.__lm.utils.ReactComponentHandler:

const ReactComponentHandler = GoldenLayout["__lm"].utils.ReactComponentHandler;

class ReactComponentHandlerPatched extends ReactComponentHandler {
  _container: any;
  _reactClass: any;
  _render() {
    const reactContainer = this._container.layoutManager.reactContainer; // Instance of GoldenLayoutComponent class
    if (reactContainer && reactContainer.componentRender)
      reactContainer.componentRender(this);
  }
  _destroy() {
    // ReactDOM.unmountComponentAtNode( this._container.getElement()[ 0 ] );
    this._container.off("open", this._render, this);
    this._container.off("destroy", this._destroy, this);
  }

  _getReactComponent() {
    // the following method is absolute copy of the original, provided to prevent depenency on window.React
    const defaultProps = {
      glEventHub: this._container.layoutManager.eventHub,
      glContainer: this._container
    };
    const props = $.extend(defaultProps, this._container._config.props);
    return React.createElement(this._reactClass, props);
  }
}

GoldenLayout["__lm"].utils.ReactComponentHandler = ReactComponentHandlerPatched;

如对这些问题有任何帮助或见解，将不胜感激。提前感谢！

Answer 1

如果您仍然在寻找解决方案，我已经解决了1和2，如果您想看到我的解决方案，您可以在这存储库中看到。

但基本上是这样：

1:弹出窗口与主窗口有不同的路径，所以我只需在我的要求中添加一个尝试捕获，您就必须设置

nativeWindowOpen = true

创建浏览器窗口时。

2:我想1点以后解决它的自我