layout manipulation

Author: kirjavascript

app/components/file/index.js

@@ -2,9 +2,20 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { FileObject } from './file-object';
 import { workspace } from '#store/workspace';
+import { Button } from '#ui';
+import { selectTab } from '#components/layout/model';
 
+// set focused tab
+// selt focused obejct
 export const File = observer(() => {
     return (
-        <FileObject obj={workspace.file} />
+        <>
+            <FileObject obj={workspace.file} />
+            {workspace.project && (
+                <div className="project-copy">
+                    <Button color="blue" large onClick={() => {selectTab('Project')}}>copy to project</Button>
+                </div>
+            )}
+        </>
     );
 });

app/components/layout/index.js

@@ -12,39 +12,41 @@ import { Sprites } from '#components/sprites';
 import { Mappings } from '#components/mappings';
 import { Documentation } from '#components/documentation';
 
-const getPanel = (node) => {
-    const component = node.getComponent();
-    if (!node._visible) return false;
-    if (component === 'file') {
-        return <File node={node}/>;
-    } else if (component === 'project') {
-        return <Project node={node}/>;
-    } else if (component === 'palettes') {
-        return <Palettes node={node}/>;
-    } else if (component === 'art') {
-        return <Art node={node}/>;
-    } else if (component === 'sprites') {
-        return <Sprites node={node}/>;
-    } else if (component === 'mappings') {
-        return <Mappings node={node}/>;
-    } else if (component === 'documentation') {
-        return <Documentation node={node}/>;
-    }
-};
 
 export class Layout extends Component {
-
     factory = (node) => {
-        const maximized = !!node.getModel().getMaximizedTabset();
+        const model = node.getModel();
+        const maximized = !!model.getMaximizedTabset();
         return (
-            <div className={classNames([
-                'flexlayout__panel',
-                maximized && 'flexlayout__panel_maximized',
-            ])}>
-                {getPanel(node)}
+            <div
+                className={classNames([
+                    'flexlayout__panel',
+                    maximized && 'flexlayout__panel_maximized',
+                ])}
+            >
+                {(() => {
+                    const component = node.getComponent();
+                    if (!node._visible) return false;
+                    if (component === 'file') {
+                        return <File node={node} />;
+                    } else if (component === 'project') {
+                        return <Project node={node} />;
+                    } else if (component === 'palettes') {
+                        return <Palettes node={node} />;
+                    } else if (component === 'art') {
+                        return <Art node={node} />;
+                    } else if (component === 'sprites') {
+                        return <Sprites node={node} />;
+                    } else if (component === 'mappings') {
+                        return <Mappings node={node} />;
+                    } else if (component === 'documentation') {
+                        return <Documentation node={node} />;
+                    }
+                    return 'No such tab';
+                })()}
             </div>
         );
-    }
+    };
 
     render() {
         return (
@@ -55,5 +57,4 @@ export class Layout extends Component {
             />
         );
     }
-
 }

app/components/layout/model.js

@@ -1,4 +1,4 @@
-import FlexLayout from 'flexlayout-react';
+import FlexLayout, { Actions } from 'flexlayout-react';
 
 window.resetLayout = () => {
     localStorage.removeItem('layout');
@@ -81,6 +81,18 @@ if (!version) {
     localStorage.setItem('layout-version', 1);
 }
 
+function findNode(name, children) {
+    if (!name) return;
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (child.name === name) return child;
+        if (child.children) {
+            const result = findNode(name, child.children);
+            if (result) return result;
+        }
+    }
+}
+
 export const model = version && savedLayout
     ? FlexLayout.Model.fromJson(JSON.parse(savedLayout))
     : FlexLayout.Model.fromJson(DEFAULT_LAYOUT);
@@ -89,3 +101,11 @@ export const model = version && savedLayout
 export function saveModel(model) {
     localStorage.setItem('layout', JSON.stringify(model.toJson()));
 }
+
+export function selectTab(name) {
+    model.doAction(
+        Actions.selectTab(
+            findNode(name, model.toJson().layout.children).id,
+        ),
+    );
+}

app/components/ui/button/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import SVARS from '!!sass-variables-loader!#styles/variables.scss';
 import { observer } from 'mobx-react';
+import classNames from 'classnames';
 
 export const Button = observer((props) => {
-        const { color, ...otherProps } = props;
+        const { color, large, ...otherProps } = props;
         return <button
-            className='button'
+            className={classNames('button', large && 'large')}
             style={
                 {
                     backgroundColor: SVARS[color || 'white2'],

styles/components/project.scss

@@ -9,6 +9,13 @@
     }
 }
 
+.project-copy {
+    padding: 0 10px;
+    display: flex;
+    margin-top: -10px;
+    justify-content: flex-end;
+}
+
 .project {
     height: 100%;
     display: flex;

styles/components/ui.scss

@@ -69,6 +69,9 @@ input {
 }
 
 .button {
+    &.large {
+        width: 159px;
+    }
     font-family: Hack Bold;
     padding: 2px 5px;
     margin: 2px 0;