Skip to content

Files

Latest commit

 

History

History
60 lines (54 loc) · 2.06 KB

README.md

File metadata and controls

60 lines (54 loc) · 2.06 KB

It's a React and Flux based workspace manager aiming to implement all the feature that you got use to in modern graphics editors. (like Adobe or Autodesk products) Work is in progress but the API will look something like this:

import {Spaceman, SpacemanStore} from 'spaceman'
import defaultWorkspace from './defaultWorkspace'

var workspace = localStoreage.lastWorkspace || defaultWorkspace
Workspace = new SpacemanStore(workspace)

Workspace.setTabContent('view', <Viewport/>)
Workspace.setTabContent('tree', <TreeView/>)
Workspace.setTabContent('style', <StyleView/>)
...
Workspace.selectTab('tree')

Workspace.on('change', () => {//on change tabs, resize, etc.
  localStoreage.lastWorkspace = Workspace.model.getSource()
})

React.render(<Spaceman store={Workspace}/>, mountNode)

defaultWorkspace.js

export default
{type: 'divider', direction: 'row', children: [
  {type: 'divider', direction: 'column', size: 7, children: [
    //Status bar
    {type: 'block', size: 34, sizeMode: 'fix', resizeable: false, children: [
      {type: 'tab', id: 'statusBar', hideableHead: true},
    ]},
    {type: 'divider', children: [
      {type: 'divider', direction: 'row', children: [
        //left Toolbar
        {type: 'divider', size: 1, direction: 'column', collapsed: true, children: [
          {type: 'block', children: [
            {type: 'tab', id: 'assets', icon: 'cloud-upload', label: 'Assets'},
            {type: 'tab', id: 'catalogue', icon: 'cubes', label: 'Catalogue'},
            {type: 'tab', id: 'config', icon: 'cog', label: 'Config'},
          ]},
        ]},
        //Viewport
        {type: 'block', size: 4, children: [
          {type: 'tab', id: 'view', label: 'View', hideableHead: true},
        ]},
      ]}
    ]},
  ]},
  {type: 'divider', size: 1.89, direction: 'column', children: [
    {type: 'block', currTabIdx: 1, children: [
      {type: 'tab', id: 'props', label: 'Props'},
      {type: 'tab', id: 'style', label: 'Style'},
    ]},
    {type: 'block', children: [
      {type: 'tab', id: 'tree', label: 'Navigator'},
    ]},
  ]}
]}