core-graphics/lib/root-component/root-component.js

A core library for creating shape-based graphic editors

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _historyEvent = require('../history/history-event');

var _editorEvents = require('../editor-state/editor-events');

var _editorAction = require('../editor-state/editor-action');

var _editorStateReducer = require('../editor-state/editor-state-reducer');

var _editorStateReducer2 = _interopRequireDefault(_editorStateReducer);

var _editorState = require('../editor-state/editor-state');

var _editorState2 = require('../helpers/editor-state');

var _renderer = require('../renderer/renderer');

var _renderer2 = _interopRequireDefault(_renderer);

var _export = require('../contrib/export');

var _export2 = _interopRequireDefault(_export);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var RootComponent = function (_React$Component) {
    _inherits(RootComponent, _React$Component);

    function RootComponent(props, context) {
        _classCallCheck(this, RootComponent);

        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(RootComponent).call(this, props, context));

        _this.getEditorState = function () {
            return _this.state && _this.state.editorState;
        };
        _this.onEditorEvent = function (ev) {
            var nextState = (0, _editorStateReducer2.default)(_this.state.editorState, ev);
            if (nextState.viewport !== _this.state.editorState.viewport && _this.props.onViewportPositionChange) {
                _this.props.onViewportPositionChange(nextState.viewport);
            }
            if (nextState !== _this.state.editorState) {
                _this.setState({ editorState: nextState });
                // too fast updates get messed up by setState batching
                _this.state.editorState = nextState;
            }
            if (nextState.editorActionsQueue.length > 0) {
                nextState.editorActionsQueue.forEach(function (action) {
                    return _this.performHistoryAction(action);
                });
            }
        };
        var _this$props = _this.props;
        var author = _this$props.author;
        var history = _this$props.history;
        var shapesDeclarations = _this$props.shapesDeclarations;
        var initialGraphicalContextData = _this$props.initialGraphicalContextData;

        _this.state = {
            editorState: (0, _editorState.getInitialEditorState)({
                grid: { on: true, size: 16 },
                shapesDeclarations: shapesDeclarations, author: author,
                graphicalContextData: initialGraphicalContextData,
                persistedHistory: history
            })
        };
        return _this;
    }

    _createClass(RootComponent, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            // reduce the history snapshot
            var history = this.props.history;
            var nextHistory = nextProps.history;

            if (history !== nextHistory) {
                // remove shapes from being selected if they are no longer on the scene
                this.onEditorEvent((0, _editorEvents.updateHistory)(nextHistory));
            }
        }
    }, {
        key: 'performHistoryAction',
        value: function performHistoryAction(action) {
            if ((0, _editorAction.isPushHistoryEventAction)(action)) {
                var _props = this.props;
                var pushEvent = _props.pushEvent;
                var getNewHistoryEventId = _props.getNewHistoryEventId;
                var author = _props.author;

                var persistedEvent = (0, _historyEvent.getPersistedHistoryEvent)({
                    id: getNewHistoryEventId(),
                    author: author
                }, action.payload.ev);
                return pushEvent(persistedEvent);
            }
            if ((0, _editorAction.isUpdateHistoryEventAction)(action)) {
                var updateEvent = this.props.updateEvent;
                var _action$payload = action.payload;
                var id = _action$payload.id;
                var ev = _action$payload.ev;

                return updateEvent(id, ev);
            }
            if ((0, _editorAction.isDeleteHistoryEventAction)(action)) {
                var deleteEvent = this.props.deleteEvent;
                var _id = action.payload.id;

                return deleteEvent(_id);
            }
        }
    }, {
        key: 'getViewportPosition',
        value: function getViewportPosition() {
            return (0, _editorState2.getViewportPosition)(this.state.editorState);
        }
    }, {
        key: 'getPNGBlob',
        value: function getPNGBlob(cb) {
            var _state$editorState = this.state.editorState;
            var scene = _state$editorState.scene;
            var shapesDeclarations = _state$editorState.shapesDeclarations;
            var grid = _state$editorState.grid;

            (0, _export2.default)({ scene: scene, shapesDeclarations: shapesDeclarations, grid: grid }, cb);
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var contextMenuRenderer = this.props.contextMenuRenderer;
            var editorState = this.state.editorState;

            return React.createElement(
                'div',
                { className: 'coreGraphicsFlexContainer', onContextMenu: function onContextMenu(e) {
                        return e.preventDefault();
                    } },
                React.Children.map(this.props.children, function (child) {
                    return React.cloneElement(child, { editorState: editorState, onEditorEvent: _this2.onEditorEvent });
                }),
                React.createElement(_renderer2.default, { editorState: editorState, contextMenuRenderer: contextMenuRenderer, onEditorEvent: this.onEditorEvent })
            );
        }
    }]);

    return RootComponent;
}(React.Component);

exports.default = RootComponent;