WedX - журнал о программировании и компьютерных науках

Есть ли способ заставить всплывающие окна Golden Layout работать вместе с окнами Electron?

Я работаю над приложением JHipster, которое пытаюсь заставить работать в Electron. У меня есть Golden Layout для управления окнами / панелями и межпанельного взаимодействия. У меня есть несколько проблем с комбинацией технологий, в том числе:

  1. Я не могу одновременно открывать более одной панели в их собственных окнах Electron. Вместо этого я получаю сообщение об ошибке Uncaught Error: Can't create config, layout not yet initialised в консоли.
  2. Две трети панелей ничего не отображают, когда они открываются в окнах Electron, и я не уверен, в чем причина. Есть идеи или предложения по этому поводу? Одним из примеров содержимого является карта-буклет, другим - «предварительный просмотр PowerPoint», который на самом деле представляет собой просто блоки, имитирующие внешний вид слайдов.
  3. Я еще не дошел до этого, но предполагаю, что у меня возникнут проблемы с обменом данными между всплывающими окнами Electron, когда у меня открыто более одного окна. Прямо сейчас панели обмениваются данными друг с другом, используя выбросы glEventHub Golden Layout. Когда я перехожу через этот мост, у меня есть возможность исследовать, а именно Electron ipcRenderer.

Здесь есть заимствованный код (большей частью я не могу поделиться, потому что это конфиденциальная информация компании):

electronic.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 ? 'https://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, патч для Golden Layout:

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;

Мы будем благодарны за любую помощь или понимание этих проблем. Заранее спасибо!


Ответы:


1

Если вы все еще ищете решения, 1 и 2 я решил, если вы хотите увидеть мое решение, вы можете увидеть его в это репозиторий.

Но в основном это было так:

1: Путь к всплывающему окну отличается от пути к главному окну, поэтому мне просто нужно было поставить пробную ловушку в мои требования, и вы должны установить

nativeWindowOpen = true

при создании окна браузера.

2: Решает сам после 1, я думаю

27.08.2020
  • Хотя теоретически это может дать ответ на вопрос, было бы предпочтительнее включить сюда основные части ответа и предоставить ссылку для справки. . 28.08.2020
  • Привет, @ArghyaSadhu, спасибо за ответ. Мы давно не используем Golden Layout в разработке в нашей компании. Но я ценю, что ты вернулся ко мне! 15.09.2020
  • Новые материалы

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..


    Для любых предложений по сайту: [email protected]