sannpeterson / electron-dockable Goto Github PK

View Code? Open in Web Editor NEW

This project forked from electron-utils/electron-dockable

0.0 1.0 0.0 97 KB

dockable panel for electron (work in progress...)

License: MIT License

JavaScript 100.00%

electron-dockable's Introduction

electron-dockable

Work in progress...

Dockable ui framework for Electron. Use the Custom Element v1 & Shadow DOM v1.

Install

npm install --save electron-dockable

Run Examples

npm start ./examples/${name}

Usage

main process

Please check electron-panel to learn how to define a panel-frame.

'use strict';

const {app} = require('electron');
const protocols = require('electron-protocols');
const dockable = require('electron-dockable');

protocols.register('app', protocols.basepath(app.getAppPath()));

app.on('ready', function () {
  dockable.init({
    layout: {
      type: 'dock-area-v',
      children: [
        {
          type: 'panel-group',
          height: 300,
          active: 0,
          children: [
            { id: 'asset', src: 'app://panels/foo.js' } // a panel-frame defined by you
          ],
        },
        {
          type: 'dock-area-h',
          children: [
            {
              type: 'panel-group',
              active: 1,
              children: [
                { id: 'bar', src: 'app://panels/bar.js' } // a panel-frame defined by you
              ],
            },
            {
              type: 'panel-group',
              active: 0,
              children: [
                { id: 'bar-02', src: 'app://panels/bar.js' } // a panel-frame defined by you
              ],
            },
          ],
        },
      ]
    }
  });

  //
  dockable.windows.restore(`file://${__dirname}/index.html`, {
    center: true,
    width: 400,
    height: 600,
  });
});

renderer process

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Workspace</title>
    <style>
      body {
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        display: flex;
        flex-direction: column;
      }
    </style>
  </head>

  <body>
    <ui-workspace style="flex: 1;"></ui-workspace>

    <script>
      require('electron-dockable');
    </script>
  </body>
</html>