Editor Framework

Documentation | Downloads | Install | Features

Editor Framework gives you power to easily write professional multi-panel desktop software in HTML5 and node.js.

The framework is based on top of Electron ~~and Polymer~~(Polymer will be removed soon, and editor-framework will be unlimited for any gui framework). It is designed conforming to Electron’s main and renderer process architecture. To make multiple windows communicate easily, Editor Framework extends Electron’s IPC message API, making it easier to send and receive callbacks between the main and renderer processes.

It is designed for full extensibility. In the main process, we achieve this by introducing a package management module and several registration APIs. The user can load or unload packages on the fly without closing or restarting the app. In the renderer process, we use HTML5 Web Component standards. The user can extend the widgets and panels, then refresh the page to apply the changes.

Install

npm install --save editor-framework

Usage

package.json

{
  "name": "your app name",
  "version": "0.0.1",
  "description": "A simple app based on editor-framework.",
  "dependencies": {},
  "main": "main.js"
}

main.js

const Editor = require('editor-framework');

Editor.App.extend({
  init ( opts, cb ) {
    Editor.init({
      'package-search-path': [
        Editor.url('app://packages/'),
      ],
    });

    if ( cb ) {
      cb ();
    }
  },

  run () {
    // create main window
    let mainWin = new Editor.Window('main', {
      title: 'Editor Framework',
      width: 900,
      height: 700,
      minWidth: 900,
      minHeight: 700,
      show: false,
      resizable: true,
    });
    Editor.Window.main = mainWin;

    // restore window size and position
    mainWin.restorePositionAndSize();

    // load and show main window
    mainWin.load( 'app://index.html' );
    mainWin.show();

    // open dev tools if needed
    if ( Editor.argv.showDevtools ) {
      // NOTE: open dev-tools before did-finish-load will make it insert an unused <style> in page-level
      mainWin.nativeWin.webContents.once('did-finish-load', function () {
        mainWin.openDevTools({
          detach: true
        });
      });
    }
    mainWin.focus();
  },
});

index.html

<html>
  <head>
    <title>Main Window</title>
    <meta charset="utf-8">

    <style>
      #mainDock {
        position: relative;
      }
    </style>
  </head>

  <body class="layout vertical">
    <main-dock class="flex-1"></main-dock>
  </body>
</html>

Features

Package Management
- Dynamically load and unload packages
- Can use any web language (Less, Sass, CoffeeScript, TypeScript, …) for your package; editor-framework will build it first before loading the package.
- Watch package changes and reload or notify changes immediately
- Manage your packages in package manager
Panel Management
- Freely docks panel anywhere in multiple windows
- Dynamically load user define panels from package
- Easily register and respond to ipc messages for your panel
- Easily register shortcuts (hotkeys) for your panel
- Save and load layout in json
- Save and load panel profiles
Menu Extends
- Dynamically add and remove menu item
- Dynamically change menu item state (enabled, checked, visible, …)
- Load user menu from packages
Commands (under development)
- Register and customize commands for your App
- A powerful command window (CmdP) for searching and executing your commands
Profiles
- Allow user to register different types of profile to their need (global, local, project, …)
- Load and save profiles through unified API
Logs
- Use Winston for low level logs
- Log to file
- Integrate with console for display and query your logs
Global Selection
- Selection cached and synced among windows
- User can register his own selection type
- Automatically filtering selections
Global Undo and Redo
Enhance the native Dialog (under development)
- Remember dialog last edit position
Enhance IPC Programming Experience
- Add more ipc methods to help sending and recieving ipc messages in different level
- Allow sending ipc message to specific panel
- Allow sending ipc message to specific window
- Allow sending ipc request and waiting for the reply in callback function
- Integrate with ipc-debugger to help you writing better ipc code
An Auto-Test Workflow
- Detect your package changes and automatically run tests under it in tester
- Integrate Mocha, Chai and Sinon to our test framework
- A ghost-tester to simulate UI events and behaviours for testing
- Automatically recreate your test target (widgets, panels) after each test case

Develop

Getting Start

Clone the repo:

git clone https://github.com/cocos-creator/editor-framework

Run npm install in it:

npm install

Install & Run Editor-Framework Demo

Editor Framework provide a demo project to help user developing packages. To use the demo project, first we need to install it. Go to the demo folder and run the following command:

cd ./demo
npm install
bower install
gulp update

After you success to install it, you can run the demo in editor-framework root directory through the command:

npm start ./demo

Test Environment

Mocha
Chai
Sinon

Note: We need to install Mocha, Chai in both core and page; that’s why we put them in both Bower and npm dependencies. The core-level tests only run during the development phase, and will not go into the final product. The page-level test environment has integrated with the tester package and every developer can use it to test your panels.

To test the editor-framework itself, just run:

npm test

You can also run a single test or a bunch of tests in one directory by:

npm start ./test -- test ${your/test/path}

You can also force to run tests in renderer by --renderer option:

npm start ./test -- test --renderer ${your/test/path}

You can load specific package and run its tests by --package option:

npm start ./test -- test --package ${your/test/path}

To debug a test, use the --detail option:

npm start ./test -- test --detail ${your/test/path}

Generate Documentation

To generate the document, just run:

npm run api

It will generate the API document in ./apidocs, you can browse it by open ./apidocs/index.html.

License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bright-spark / editor-framework Goto Github PK