@gorpacrate/core-graphics
Version:
A core library for creating shape-based graphic editors
95 lines • 5.56 kB
JavaScript
;
exports.__esModule = true;
var tslib_1 = require("tslib");
var React = require("react");
var export_1 = require("../contrib/export");
var editor_action_1 = require("../editor-state/editor-action");
var editor_events_1 = require("../editor-state/editor-events");
var editor_state_1 = require("../editor-state/editor-state");
var editor_state_reducer_1 = require("../editor-state/editor-state-reducer");
var editor_state_2 = require("../helpers/editor-state");
var history_event_1 = require("../history/history-event");
var renderer_1 = require("../renderer/renderer");
var css_1 = require("../utils/css");
var RootComponent = /** @class */ (function (_super) {
tslib_1.__extends(RootComponent, _super);
function RootComponent(props, context) {
var _this = _super.call(this, props, context) || this;
_this.getEditorState = function () { return (_this.state && _this.state.editorState); };
_this.onEditorEvent = function (ev) {
var nextState = editor_state_reducer_1["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); });
}
};
_this.onContextMenu = function (e) {
e.preventDefault();
};
var _a = _this.props, author = _a.author, history = _a.history, shapesDeclarations = _a.shapesDeclarations, initialGraphicalContextData = _a.initialGraphicalContextData;
_this.state = {
editorState: editor_state_1.getInitialEditorState({
grid: { on: true, size: 16 },
shapesDeclarations: shapesDeclarations, author: author,
graphicalContextData: initialGraphicalContextData,
persistedHistory: history
})
};
return _this;
}
RootComponent.prototype.componentWillReceiveProps = function (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(editor_events_1.updateHistory(nextHistory));
}
};
RootComponent.prototype.performHistoryAction = function (action) {
if (editor_action_1.isPushHistoryEventAction(action)) {
var _a = this.props, pushEvent = _a.pushEvent, getNewHistoryEventId = _a.getNewHistoryEventId, author = _a.author;
var persistedEvent = history_event_1.getPersistedHistoryEvent({
id: getNewHistoryEventId(),
author: author
}, action.payload.ev);
return pushEvent(persistedEvent);
}
if (editor_action_1.isUpdateHistoryEventAction(action)) {
var updateEvent = this.props.updateEvent;
var _b = action.payload, id = _b.id, ev = _b.ev;
return updateEvent(id, ev);
}
if (editor_action_1.isDeleteHistoryEventAction(action)) {
var deleteEvent = this.props.deleteEvent;
var id = action.payload.id;
return deleteEvent(id);
}
};
RootComponent.prototype.getViewportPosition = function () {
return editor_state_2.getViewportPosition(this.state.editorState);
};
RootComponent.prototype.getPNGBlob = function (cb) {
var _a = this.state.editorState, scene = _a.scene, shapesDeclarations = _a.shapesDeclarations, grid = _a.grid;
export_1["default"]({ scene: scene, shapesDeclarations: shapesDeclarations, grid: grid }, cb);
};
RootComponent.prototype.render = function () {
var _this = this;
var contextMenuRenderer = this.props.contextMenuRenderer;
var editorState = this.state.editorState;
return (React.createElement("div", { className: css_1.cssName('flexContainer'), onContextMenu: this.onContextMenu },
React.createElement("style", null, "\n ." + css_1.cssName('flexContainer') + " {\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n\n width: 100%;\n height: 100%;\n\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -webkit-flex-shrink: 1;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n }\n "),
React.Children.map(this.props.children, function (child) { return (React.cloneElement(child, { editorState: editorState, onEditorEvent: _this.onEditorEvent })); }),
React.createElement(renderer_1["default"], { editorState: editorState, contextMenuRenderer: contextMenuRenderer, onEditorEvent: this.onEditorEvent })));
};
return RootComponent;
}(React.Component));
exports["default"] = RootComponent;
//# sourceMappingURL=root-component.js.map