@helpscout/artboard
Version:
A tool kit for React UI development and design
176 lines • 7.83 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 __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 fancy_1 = require("@helpscout/fancy");
var Crosshair_Line_1 = require("./Crosshair.Line");
var Base_1 = require("../UI/Base");
var utils_1 = require("../utils");
var Crosshair = /** @class */ (function (_super) {
__extends(Crosshair, _super);
function Crosshair(props) {
var _this = _super.call(this, props) || this;
_this.getCenterCoords = function () {
// @ts-ignore
var _a = document.defaultView, innerHeight = _a.innerHeight, innerWidth = _a.innerWidth;
return {
height: innerHeight,
width: innerWidth,
x: Math.round(innerWidth / 2),
y: Math.round(innerHeight / 2),
};
};
_this.setCenterCoords = function () {
_this.setState({
centerCoords: _this.getCenterCoords(),
});
};
_this.handleOnKeyUp = function (event) {
if (event.keyCode === utils_1.Keys.ESC) {
_this.stopCrosshair();
}
};
_this.setCoordinates = function (event) {
var x = event.x, y = event.y;
_this.setState({
x: x,
y: y,
});
};
_this.addSnapshot = function () {
var _a = _this.props, posX = _a.posX, posY = _a.posY, zoomLevel = _a.zoomLevel;
var _b = _this.state, centerCoords = _b.centerCoords, isActive = _b.isActive, x = _b.x, y = _b.y, snapshots = _b.snapshots;
if (!isActive)
return;
var nextX = Math.round(centerCoords.x + (x - centerCoords.x) / zoomLevel - posX);
var nextY = Math.round(centerCoords.y + (y - centerCoords.y) / zoomLevel - posY);
var snap = {
x: nextX,
y: nextY,
};
if (_this.props.onSnapshot) {
_this.props.onSnapshot(snap);
}
else {
_this.setState({
snapshots: snapshots.concat([snap]),
});
}
};
_this.stopCrosshair = function () {
_this.setState({
isActive: false,
});
};
_this.getLineProps = function () {
var _a = _this.props, color = _a.color, posX = _a.posX, posY = _a.posY, snapshotOpacity = _a.snapshotOpacity, zoomLevel = _a.zoomLevel;
var centerCoords = _this.state.centerCoords;
return {
centerCoords: centerCoords,
color: color,
posX: posX,
posY: posY,
opacity: snapshotOpacity,
snapshotOpacity: snapshotOpacity,
zoomLevel: zoomLevel,
};
};
_this.renderSnapshots = function () {
var showSnapshots = _this.props.showSnapshots;
var snapshots = _this.state.snapshots;
if (!showSnapshots)
return null;
return snapshots.map(function (snap, index) {
var x = snap.x, y = snap.y;
return (React.createElement("div", { key: "snap-" + index },
React.createElement(Crosshair_Line_1.default, __assign({}, __assign({}, _this.getLineProps(), { className: utils_1.cx('CrosshairLineXSnap'), coordinate: 'x', y: y }))),
React.createElement(Crosshair_Line_1.default, __assign({}, __assign({}, _this.getLineProps(), { className: utils_1.cx('CrosshairLineYSnap'), coordinate: 'y', x: x })))));
});
};
_this.state = {
centerCoords: _this.getCenterCoords(),
isActive: props.isActive,
x: 0,
y: 0,
snapshots: props.snapshots,
};
return _this;
}
Crosshair.prototype.componentDidMount = function () {
window.addEventListener('mousemove', this.setCoordinates);
window.addEventListener('click', this.addSnapshot);
window.addEventListener('keyup', this.stopCrosshair);
window.addEventListener('resize', this.setCenterCoords);
};
Crosshair.prototype.componentWillUnmount = function () {
window.removeEventListener('mousemove', this.setCoordinates);
window.removeEventListener('click', this.addSnapshot);
window.removeEventListener('keyup', this.stopCrosshair);
window.removeEventListener('resize', this.setCenterCoords);
};
Crosshair.prototype.componentWillReceiveProps = function (nextProps) {
if (nextProps.isActive !== this.state.isActive) {
this.setState({
isActive: nextProps.isActive,
});
}
if (nextProps.snapshots !== this.state.snapshots) {
this.setState({
snapshots: nextProps.snapshots,
});
}
};
Crosshair.prototype.render = function () {
var style = this.props.style;
var _a = this.state, x = _a.x, y = _a.y, isActive = _a.isActive;
return (React.createElement(CrosshairUI, { className: utils_1.cx('Crosshair'), style: style },
isActive && (React.createElement("div", null,
React.createElement(Crosshair_Line_1.default, __assign({}, __assign({}, this.getLineProps(), { className: utils_1.cx('CrosshairLineX'), coordinate: 'x', isActive: true, y: y, opacity: 1, posY: 0 }))),
React.createElement(Crosshair_Line_1.default, __assign({}, __assign({}, this.getLineProps(), { className: utils_1.cx('CrosshairLineY'), coordinate: 'y', isActive: true, x: x, opacity: 1, posX: 0 }))))),
this.renderSnapshots()));
};
Crosshair.defaultProps = {
color: 'cyan',
isActive: true,
posX: 0,
posY: 0,
snapshots: [],
snapshotOpacity: 0.4,
showSnapshots: true,
style: {},
zoomLevel: 1,
};
return Crosshair;
}(React.PureComponent));
exports.Crosshair = Crosshair;
var CrosshairUI = fancy_1.default(Base_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: none;\n position: fixed;\n z-index: 999999;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n * {\n pointer-events: none;\n }\n"], ["\n pointer-events: none;\n position: fixed;\n z-index: 999999;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n * {\n pointer-events: none;\n }\n"])));
exports.default = Crosshair;
var templateObject_1;
//# sourceMappingURL=Crosshair.js.map