@helpscout/artboard
Version:
A tool kit for React UI development and design
314 lines • 12.8 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 __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_redux_1 = require("react-redux");
var actions = require("./Artboard.actions");
var fancy_1 = require("@helpscout/fancy");
var Artboard_store_1 = require("./Artboard.store");
var Artboard_utils_1 = require("./Artboard.utils");
var utils_1 = require("../utils");
var Artboard_utils_2 = require("./Artboard.utils");
var Artboard_css_1 = require("./Artboard.css");
var Artboard_Canvas_1 = require("./components/Artboard.Canvas");
var Artboard_Crosshair_1 = require("./components/Artboard.Crosshair");
var Artboard_Eyedropper_1 = require("./components/Artboard.Eyedropper");
var Artboard_KeyboardHints_1 = require("./Artboard.KeyboardHints");
var Toolbar_1 = require("./components/Toolbar");
var Artboard_Wrapper_1 = require("./components/Artboard.Wrapper");
var Artboard_Zoom_1 = require("./components/Artboard.Zoom");
var Artboard = /** @class */ (function (_super) {
__extends(Artboard, _super);
function Artboard(props) {
var _this = _super.call(this, props) || this;
_this.__bodyBackGroundColor = null;
_this.getArtboardNameFromProps = function (props) {
return props.id || props.name;
};
_this.saveState = function () {
var artboardName = _this.getArtboardNameFromProps(_this.props);
if (!artboardName)
return;
Artboard_utils_2.saveSessionState(artboardName, _this.state);
};
_this.setBackgroundColor = function () {
_this.__bodyBackGroundColor = document.body.style.backgroundColor;
document.body.style.backgroundColor = Artboard_css_1.config.backgroundColor;
};
_this.unsetBackgroundColor = function () {
document.body.style.backgroundColor = _this.__bodyBackGroundColor;
};
_this.handleOnKeyDown = function (event) {
if (utils_1.isInputNode(event.target))
return;
switch (event.keyCode) {
case utils_1.Keys.D:
if (event.altKey) {
_this.toggleDarkMode();
}
break;
case utils_1.Keys.Z:
_this.stopCrosshair();
if (event.altKey) {
_this.prepareZoomOut();
}
else {
_this.prepareZoomIn();
}
break;
case utils_1.Keys.B:
_this.toggleBoxInspector();
break;
case utils_1.Keys.G:
_this.toggleGuides();
break;
case utils_1.Keys.S:
_this.toggleSizeInspector();
break;
case utils_1.Keys.SPACE:
_this.stopCrosshair();
_this.prepareMove();
break;
case utils_1.Keys.PERIOD:
if (event.metaKey || event.ctrlKey) {
_this.toggleInterface();
}
break;
default:
break;
}
};
_this.handleOnKeyUp = function (event) {
switch (event.keyCode) {
case utils_1.Keys.Z:
_this.props.zoomReset();
break;
case utils_1.Keys.X:
if (!utils_1.isInputNode(event.target)) {
_this.toggleCrosshair();
}
break;
case utils_1.Keys.SPACE:
_this.props.moveEnd();
break;
case utils_1.Keys.ESC:
_this.stopCrosshair();
break;
case utils_1.Keys.BACKSPACE:
if (!utils_1.isInputNode(event.target)) {
_this.clearSnapshots();
}
break;
default:
break;
}
_this.props.performActionEnd();
};
_this.handleOnClick = function () {
var isZooming = _this.props.isZooming;
if (isZooming) {
if (isZooming === 'in') {
_this.zoomIn();
}
else {
_this.zoomOut();
}
}
};
_this.handleOnMouseDown = function () {
var isMoving = _this.props.isMoving;
if (isMoving && isMoving !== 'dragging') {
_this.props.moveDragStart();
}
};
_this.handleOnMouseUp = function () {
var isMoving = _this.props.isMoving;
if (isMoving && isMoving === 'dragging') {
_this.props.moveDragEnd();
}
};
_this.handleOnMouseMove = function (event) {
var isMoving = _this.props.isMoving;
if (isMoving && isMoving === 'dragging') {
var movementX = event.movementX, movementY = event.movementY;
_this.props.moveDrag({
posX: movementX,
posY: movementY,
});
}
};
_this.toggleDarkMode = function () {
_this.props.toggleDarkMode();
};
_this.toggleInterface = function () {
_this.props.toggleInterface();
};
_this.prepareZoomIn = function () {
if (_this.props.isKeyDown && _this.props.isZooming === 'in')
return;
_this.props.zoomInStart();
};
_this.prepareZoomOut = function () {
if (_this.props.isKeyDown && _this.props.isZooming === 'out')
return;
_this.props.zoomOutStart();
};
_this.prepareMove = function () {
if (_this.props.isKeyDown && _this.props.isMoving)
return;
_this.props.moveStart();
};
_this.zoomIn = function (event) {
if (event) {
event.stopPropagation();
}
_this.props.zoomIn();
};
_this.zoomOut = function (event) {
if (event) {
event.stopPropagation();
}
_this.props.zoomOut();
};
_this.toggleGuides = function () {
_this.props.toggleGuides();
};
_this.toggleBoxInspector = function () {
_this.props.toggleBoxInspector();
};
_this.toggleSizeInspector = function () {
_this.props.toggleSizeInspector();
};
_this.startEyeDropper = function () {
_this.props.startEyeDropper();
};
_this.readyEyeDropper = function () {
_this.props.readyEyeDropper();
};
_this.stopEyeDropper = function () {
_this.props.stopEyeDropper();
};
_this.toggleCrosshair = function () {
_this.props.toggleCrosshair();
};
_this.stopCrosshair = function () {
_this.props.stopCrosshair();
};
_this.clearSnapshots = function () {
_this.props.clearCrosshairSnapshots();
};
props.onReady(props.__initialProps);
props.loadLocalState(props.__initialProps);
return _this;
}
Artboard.prototype.componentDidMount = function () {
window.addEventListener('keydown', this.handleOnKeyDown);
window.addEventListener('keyup', this.handleOnKeyUp);
window.addEventListener('click', this.handleOnClick);
window.addEventListener('mousedown', this.handleOnMouseDown);
window.addEventListener('mouseup', this.handleOnMouseUp);
window.addEventListener('mousemove', this.handleOnMouseMove);
this.setBackgroundColor();
};
Artboard.prototype.componentWillUnmount = function () {
window.removeEventListener('keydown', this.handleOnKeyDown);
window.removeEventListener('keyup', this.handleOnKeyUp);
window.removeEventListener('click', this.handleOnClick);
window.removeEventListener('mousedown', this.handleOnMouseDown);
window.removeEventListener('mouseup', this.handleOnMouseUp);
window.removeEventListener('mousemove', this.handleOnMouseMove);
this.unsetBackgroundColor();
this.props.saveLocalState();
};
Artboard.prototype.shouldComponentUpdate = function (nextProps) {
if (nextProps !== this.props) {
this.props.saveLocalState();
}
return true;
};
Artboard.prototype.render = function () {
var _a = this.props, darkMode = _a.darkMode, children = _a.children, showInterface = _a.showInterface;
return (React.createElement(fancy_1.ThemeProvider, { theme: { darkMode: darkMode } },
React.createElement(Artboard_Wrapper_1.default, null,
React.createElement(Artboard_Crosshair_1.default, null),
React.createElement(Artboard_Eyedropper_1.default, null),
showInterface && React.createElement(Toolbar_1.default, null),
React.createElement(Artboard_Canvas_1.default, null, children),
React.createElement(Artboard_css_1.ZoomWrapperUI, null, showInterface && React.createElement(Artboard_Zoom_1.default, null)),
React.createElement(Artboard_css_1.KeyboardHintsWrapperUI, null,
React.createElement(Artboard_KeyboardHints_1.default, null)))));
};
Artboard.defaultProps = Artboard_utils_1.defaultProps;
return Artboard;
}(React.Component));
exports.Artboard = Artboard;
var mapStateToProps = function (state, ownProps) {
var darkMode = state.darkMode, isKeyDown = state.isKeyDown, isMoving = state.isMoving, isZooming = state.isZooming, showInterface = state.showInterface;
var artboardName = ownProps.id || ownProps.name || '';
return {
__initialProps: __assign({}, ownProps, { artboardName: artboardName }),
artboardName: artboardName,
darkMode: darkMode,
isKeyDown: isKeyDown,
isMoving: isMoving,
isZooming: isZooming,
showInterface: showInterface,
};
};
var mapDispatchToProps = {
loadLocalState: actions.loadLocalState,
saveLocalState: actions.saveLocalState,
onReady: actions.onReady,
clearCrosshairSnapshots: actions.clearCrosshairSnapshots,
moveStart: actions.moveStart,
moveEnd: actions.moveEnd,
moveDragStart: actions.moveDragStart,
moveDrag: actions.moveDrag,
moveDragEnd: actions.moveDragEnd,
performActionStart: actions.performActionStart,
performActionEnd: actions.performActionEnd,
startEyeDropper: actions.startEyeDropper,
readyEyeDropper: actions.readyEyeDropper,
stopEyeDropper: actions.stopEyeDropper,
stopCrosshair: actions.stopCrosshair,
toggleCrosshair: actions.toggleCrosshair,
toggleBoxInspector: actions.toggleBoxInspector,
toggleDarkMode: actions.toggleDarkMode,
toggleInterface: actions.toggleInterface,
toggleGuides: actions.toggleGuides,
toggleSizeInspector: actions.toggleSizeInspector,
zoomIn: actions.zoomIn,
zoomOut: actions.zoomOut,
zoomInStart: actions.zoomInStart,
zoomOutStart: actions.zoomOutStart,
zoomReset: actions.zoomReset,
};
exports.ConnectedArtboard = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(Artboard);
exports.default = (function (props) {
return (React.createElement(react_redux_1.Provider, { store: Artboard_store_1.default },
React.createElement(exports.ConnectedArtboard, __assign({}, props))));
});
//# sourceMappingURL=Artboard.js.map