@helpscout/artboard
Version:
A tool kit for React UI development and design
124 lines • 5.56 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 Line = /** @class */ (function (_super) {
__extends(Line, _super);
function Line() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.isX = function () {
return _this.props.coordinate === 'x';
};
_this.updateNodeStylesFromProps = function (props) {
var values = exports.getValueFromProps(props);
var value;
if (_this.isX()) {
value = values.x;
}
else {
value = values.y;
}
var transform = _this.isX()
? "translateY(" + value + "px)"
: "translateX(" + value + "px)";
_this.node.style.transform = transform;
};
// Disabled for now (For performance reasons)
_this.updateLabelValue = function (value) {
_this.labelNode.innerHTML = value + "px";
};
_this.getComponent = function () {
return _this.isX() ? LineXUI : LineYUI;
};
_this.setNodeRef = function (node) { return (_this.node = node); };
_this.setLabelNodeRef = function (node) { return (_this.labelNode = node); };
return _this;
}
Line.prototype.componentDidMount = function () {
this.updateNodeStylesFromProps(this.props);
};
Line.prototype.shouldComponentUpdate = function (nextProps) {
this.updateNodeStylesFromProps(nextProps);
return false;
};
Line.prototype.render = function () {
var _a = this.props, className = _a.className, color = _a.color, opacity = _a.opacity;
var Component = this.getComponent();
return (React.createElement(Component, __assign({}, { className: className, color: color, opacity: opacity }, { innerRef: this.setNodeRef }),
React.createElement(LabelUI, { innerRef: this.setLabelNodeRef })));
};
Line.defaultProps = {
centerCoords: { x: 0, y: 0 },
color: 'cyan',
coordinate: 'x',
opacity: 1,
isActive: false,
posX: 0,
posY: 0,
x: 0,
y: 0,
};
return Line;
}(React.Component));
exports.Line = Line;
exports.default = Line;
var LineBaseUI = fancy_1.default('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n will-change: transform;\n\n ", ";\n\n ", ";\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n will-change: transform;\n\n ",
";\n\n ",
";\n"])), function (_a) {
var color = _a.color;
return "\n color: " + color + ";\n background-color: currentColor;\n ";
}, function (_a) {
var opacity = _a.opacity;
return "\n opacity: " + opacity + ";\n ";
});
LineBaseUI.defaultProps = {
opacity: 1,
};
var LineXUI = fancy_1.default(LineBaseUI)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n"], ["\n width: 100%;\n height: 1px;\n"])));
var LineYUI = fancy_1.default(LineBaseUI)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 100%;\n width: 1px;\n"], ["\n height: 100%;\n width: 1px;\n"])));
var LabelUI = fancy_1.default('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: currentColor;\n font-size: 11px;\n padding-top: 2px;\n padding-left: 2px;\n will-change: contents;\n"], ["\n color: currentColor;\n font-size: 11px;\n padding-top: 2px;\n padding-left: 2px;\n will-change: contents;\n"])));
exports.getValueFromProps = function (props) {
var isActive = props.isActive, centerCoords = props.centerCoords, x = props.x, y = props.y, posX = props.posX, posY = props.posY, zoomLevel = props.zoomLevel;
var computedX = posY + y;
var computedY = posX + x;
if (!isActive) {
computedX =
(centerCoords.y - y) * zoomLevel * -1 + centerCoords.y + posY * zoomLevel;
computedY =
(centerCoords.x - x) * zoomLevel * -1 + centerCoords.x + posX * zoomLevel;
}
return {
x: computedX,
y: computedY,
};
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=Crosshair.Line.js.map