gistfile1.txt

import React from 'react';
import throttle from 'lodash/throttle';

import Panel from './Panel.react';
import Input from './Input.react';

import SelectItemAction from '~/actions/SelectItemAction';
import DeselectItemAction from '~/actions/DeselectItemAction';
import TranslateItemAction from '~/actions/TranslateItemAction';
import TransformItemAction from '~/actions/TransformItemAction';
import SetItemBoundsAction from '~/actions/SetItemBoundsAction';
import SetTextContentAction from '~/actions/SetTextContentAction';
import SetTextStyleAction from '~/actions/SetTextStyleAction';

import state from '~/core/state';
import Task from '~/core/Task';
import taskManager from '~/core/taskManager';

import { screenItem } from '~/tools/screen';

const initialState = {
    width: '',
    height: '',
    x: '',
    y: '',
};

const boundNames = ['x', 'y', 'width', 'height'];

export default class LayoutPanel extends React.Component {
    constructor() {
        super();
        this.state = Object.assign({}, initialState);

        this.setItemBoundFuncs = boundNames.reduce((obj, key) => Object.assign(obj, {
            [key]: this.setItemBound.bind(this, key),
        }), {});
    }

    componentDidMount() {
        taskManager.on([
            SelectItemAction,
            DeselectItemAction,
            TransformItemAction,
            TranslateItemAction,
            SetItemBoundsAction,
            SetTextStyleAction,
            SetTextContentAction,
        ], throttle(() => {
            const sel = state.selection.nodes;

            if (!sel.length) return this.setState(Object.assign({}, initialState));

            return this.setState(boundNames.reduce((bounds, key) => {
                const value = sel.every(item => (
                    item.bounds[key] === bounds[key]
                )) ? Math.round(bounds[key]) : '';
                return Object.assign(bounds, {
                    [key]: value,
                });
            }, sel[0].bounds.clone()));
        }, 50));
    }

    onInput = () => {
        const newBounds = boundNames.reduce((bounds, key) => {
            const value = this.refs[key].value;
            return Object.assign(bounds, {
                [key]: (value !== '') ? value : undefined,
            });
        }, {});
        this.setItemBounds(newBounds);
    }

    setItemBound(key, value) {
        taskManager.dispatch([
            new Task(
                new SetItemBoundsAction(state.selection.nodes, {
                    [key]: value,
                })
            ),
        ]);
    }

    render() {
        let { width, height, x, y } = this.state;

        if (state.selection.has([screenItem])) x = y = '';

        return (
            <Panel>
                <div className="padding-s">
                    <div className="cf marginBottom-s">
                        <div className="float-left width-50 paddingRight-xxs">
                            <Input
                                className=""
                                label="Width"
                                value={width}
                                disabled={width === ''}
                                callback={this.setItemBoundFuncs.width}
                            />
                        </div>
                        <div className="float-left width-50 paddingLeft-xxs">
                            <Input
                                className=""
                                label="Height"
                                value={height}
                                disabled={height === ''}
                                callback={this.setItemBoundFuncs.height}
                            />
                        </div>
                    </div>
                    <div className="cf">
                        <div className="float-left width-50 paddingRight-xxs">
                            <Input
                                className=""
                                label="X Position"
                                value={x}
                                disabled={x === ''}
                                callback={this.setItemBoundFuncs.x}

                            />
                        </div>
                        <div className="float-left width-50 paddingLeft-xxs">
                            <Input
                                className=""
                                label="Y Position"
                                value={y}
                                disabled={y === ''}
                                callback={this.setItemBoundFuncs.y}
                            />
                        </div>
                    </div>
                </div>
            </Panel>
        );
    }
}