@helpscout/artboard
Version:
A tool kit for React UI development and design
85 lines • 4.16 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_redux_1 = require("react-redux");
var Artboard_BoxInspector_1 = require("./Artboard.BoxInspector");
var Artboard_CanvasContent_1 = require("./Artboard.CanvasContent");
var Artboard_Content_1 = require("./Artboard.Content");
var Artboard_GuideProvider_1 = require("./Artboard.GuideProvider");
var Artboard_Guides_1 = require("./Artboard.Guides");
var Artboard_Resizer_1 = require("./Artboard.Resizer");
var Artboard_SizeInspector_1 = require("./Artboard.SizeInspector");
var Artboard_css_1 = require("../Artboard.css");
var index_1 = require("../../utils/index");
var Canvas = /** @class */ (function (_super) {
__extends(Canvas, _super);
function Canvas() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.updateNodeStylesFromProps = function (nextProps) {
var isMoving = nextProps.isMoving, posX = nextProps.posX, posY = nextProps.posY, zoomLevel = nextProps.zoomLevel;
if (!_this.node)
return;
var transition = 'background 200ms linear, transform 200ms ease';
if (isMoving) {
transition = 'none';
}
_this.node.style.transform = "scale(" + zoomLevel + ") translate(" + posX + "px, " + posY + "px)";
_this.node.style.transition = transition;
};
_this.setNodeRef = function (node) { return (_this.node = node); };
return _this;
}
Canvas.prototype.componentDidMount = function () {
this.updateNodeStylesFromProps(this.props);
};
Canvas.prototype.shouldComponentUpdate = function (nextProps) {
// Performantly re-render the UI
this.updateNodeStylesFromProps(nextProps);
if (nextProps.isPerformingAction !== this.props.isPerformingAction) {
return true;
}
if (nextProps.children !== this.props.children) {
return true;
}
return false;
};
Canvas.prototype.render = function () {
var _a = this.props, children = _a.children, isPerformingAction = _a.isPerformingAction;
return (React.createElement(Artboard_GuideProvider_1.default, null,
React.createElement(Artboard_css_1.ArtboardUI, { className: index_1.cx('ArtboardCanvas'), innerRef: this.setNodeRef, isPerformingAction: isPerformingAction },
React.createElement(Artboard_CanvasContent_1.default, null,
React.createElement(Artboard_Resizer_1.default, null,
React.createElement(Artboard_Content_1.default, null,
React.createElement(Artboard_css_1.ArtboardBodyUI, null,
React.createElement(Artboard_BoxInspector_1.default, null,
React.createElement(Artboard_SizeInspector_1.default, null, children))))),
React.createElement(Artboard_Guides_1.default, null)))));
};
return Canvas;
}(React.Component));
exports.Canvas = Canvas;
var mapStateToProps = function (state) {
var isPerformingAction = state.isPerformingAction, isMoving = state.isMoving, posX = state.posX, posY = state.posY, zoomLevel = state.zoomLevel;
return {
isPerformingAction: isPerformingAction,
isMoving: isMoving,
posX: posX,
posY: posY,
zoomLevel: zoomLevel,
};
};
exports.default = react_redux_1.connect(mapStateToProps)(Canvas);
//# sourceMappingURL=Artboard.Canvas.js.map