@helpscout/artboard
Version:
A tool kit for React UI development and design
277 lines • 12.3 kB
JavaScript
"use strict";
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 SIZE_NODE_CLASSNAME = 'SizeInspector__SizeNode';
var SIZE_NODE_SELECTOR = "." + SIZE_NODE_CLASSNAME;
var SizeInspector = /** @class */ (function (_super) {
__extends(SizeInspector, _super);
function SizeInspector() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.bindEvents = function () {
if (!_this.node)
return;
if (!_this.props.showOutlines)
return;
Array.from(_this.node.querySelectorAll(_this.props.targetSelector)).forEach(function (node) {
node.addEventListener('mouseenter', _this.handleOnMouseEnter);
node.addEventListener('mouseleave', _this.handleOnMouseLeave);
});
};
_this.unbindEvents = function () {
if (!_this.node)
return;
Array.from(_this.node.querySelectorAll(_this.props.targetSelector)).forEach(function (node) {
node.removeEventListener('mouseenter', _this.handleOnMouseEnter);
node.removeEventListener('mouseleave', _this.handleOnMouseLeave);
});
};
_this.cleanUp = function () {
Array.from(document.querySelectorAll(SIZE_NODE_SELECTOR)).forEach(function (node) { return node && node.parentNode && node.parentNode.removeChild(node); });
};
_this.handleOnMouseEnter = function (event) {
_this.showSizeNode(event);
};
_this.handleOnMouseLeave = function (event) {
var node = event.target;
_this.removeSizeNode();
_this.currentNode = undefined;
if (node.parentNode) {
if (node.parentNode === _this.node) {
_this.removeSizeNode();
}
else {
_this.showSizeNode({ target: node.parentNode });
}
}
};
_this.showSizeNode = function (event) {
if (!_this.props.showOutlines)
return;
var node = event.target;
_this.addSizeNode(event);
_this.currentNode = node;
};
_this.addSizeNode = function (event) {
_this.removeSizeNode();
var sizeNode = _this.createSizeNode(event.target);
document.body.appendChild(sizeNode);
_this.sizeNode = sizeNode;
};
_this.removeSizeNode = function () {
if (_this.sizeNode && _this.sizeNode.parentNode) {
_this.sizeNode.parentNode.removeChild(_this.sizeNode);
}
};
_this.createSizeNode = function (targetNode) {
var _a = _this.props, color = _a.color, offsetColor = _a.offsetColor, zoomLevel = _a.zoomLevel;
var sizeNode = document.createElement('div');
var parentNode = targetNode.offsetParent;
var rect = targetNode.getBoundingClientRect();
// @ts-ignore
var parentRect = parentNode.getBoundingClientRect();
sizeNode.classList.add(SIZE_NODE_CLASSNAME);
setNodeStyles(sizeNode, {
background: 'rgba(255, 255, 255, 0.7)',
color: color,
outline: '1px solid currentColor',
fontFamily: '"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace',
fontSize: '10px',
lineHeight: '1',
height: rect.height + "px",
width: rect.width + "px",
position: 'fixed',
top: rect.top + "px",
left: rect.left + "px",
zIndex: '999',
pointerEvents: 'none',
});
var zoomOffsetTop = Math.round(targetNode.offsetTop * zoomLevel);
var zoomOffsetLeft = Math.round(targetNode.offsetLeft * zoomLevel);
var offsetRight =
// @ts-ignore
parentRect.width - (zoomOffsetLeft + rect.width);
offsetRight = offsetRight >= 0 ? offsetRight : 0;
var offsetBottom =
// @ts-ignore
parentRect.height - (zoomOffsetTop + rect.height);
offsetBottom = offsetBottom >= 0 ? offsetBottom : 0;
// @ts-ignore
var values = {
width: Math.round(rect.width / zoomLevel),
height: Math.round(rect.height / zoomLevel),
offsetTop: Math.round(zoomOffsetTop / zoomLevel),
offsetLeft: Math.round(zoomOffsetLeft / zoomLevel),
offsetRight: Math.round(offsetRight / zoomLevel),
offsetBottom: Math.round(offsetBottom / zoomLevel),
};
var widthNode = document.createElement('div');
var heightNode = document.createElement('div');
var heightTextNode = document.createElement('div');
var topDistanceNode = document.createElement('div');
var leftDistanceNode = document.createElement('div');
var rightDistanceNode = document.createElement('div');
var bottomDistanceNode = document.createElement('div');
var distanceTopTextNode = document.createElement('div');
var distanceLeftTextNode = document.createElement('div');
var distanceRightTextNode = document.createElement('div');
var distanceBottomTextNode = document.createElement('div');
var alignCenterStyles = {
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
};
setNodeStyles(widthNode, {
boxSizing: 'border-box',
color: 'currentColor',
position: 'absolute',
left: '50%',
lineHeight: 'inherit',
top: '1px',
width: '20px',
textAlign: 'center',
marginLeft: '-10px',
});
setNodeStyles(heightNode, __assign({}, alignCenterStyles, { color: 'currentColor', position: 'absolute', top: '0', lineHeight: 'inherit', height: '100%', left: '0px', display: 'flex' }));
setNodeStyles(heightTextNode, {
boxSizing: 'border-box',
transform: 'rotate(-90deg)',
});
setNodeStyles(topDistanceNode, __assign({}, alignCenterStyles, { color: offsetColor, backgroundColor: 'currentColor', width: '1px', height: values.offsetTop * zoomLevel + "px", position: 'absolute', left: '50%', top: "-" + values.offsetTop * zoomLevel + "px" }));
setNodeStyles(leftDistanceNode, {
boxSizing: 'border-box',
color: offsetColor,
backgroundColor: 'currentColor',
height: '1px',
width: values.offsetLeft * zoomLevel + "px",
position: 'absolute',
top: '50%',
left: "-" + values.offsetLeft * zoomLevel + "px",
});
setNodeStyles(rightDistanceNode, {
boxSizing: 'border-box',
color: offsetColor,
backgroundColor: 'currentColor',
height: '1px',
width: values.offsetRight * zoomLevel + "px",
position: 'absolute',
top: '50%',
right: "-" + values.offsetRight * zoomLevel + "px",
});
setNodeStyles(bottomDistanceNode, __assign({}, alignCenterStyles, { color: offsetColor, backgroundColor: 'currentColor', width: '1px', height: values.offsetBottom * zoomLevel + "px", position: 'absolute', left: '50%', bottom: "-" + values.offsetBottom * zoomLevel + "px" }));
setNodeStyles(distanceTopTextNode, {
boxSizing: 'border-box',
transform: 'translateX(-100%)',
marginRight: '-2px',
});
setNodeStyles(distanceLeftTextNode, {
boxSizing: 'border-box',
transform: 'translateY(-100%)',
width: '100%',
paddingRight: '3px',
textAlign: 'right',
});
setNodeStyles(distanceRightTextNode, {
boxSizing: 'border-box',
transform: 'translateY(-100%)',
width: '100%',
paddingLeft: '3px',
textAlign: 'left',
});
setNodeStyles(distanceBottomTextNode, {
boxSizing: 'border-box',
transform: 'translateX(-100%)',
marginRight: '-2px',
});
widthNode.innerHTML = "" + values.width;
heightTextNode.innerHTML = "" + values.height;
distanceTopTextNode.innerHTML = "" + values.offsetTop;
distanceLeftTextNode.innerHTML = "" + values.offsetLeft;
distanceRightTextNode.innerHTML = "" + values.offsetRight;
distanceBottomTextNode.innerHTML = "" + values.offsetBottom;
heightNode.appendChild(heightTextNode);
topDistanceNode.appendChild(distanceTopTextNode);
leftDistanceNode.appendChild(distanceLeftTextNode);
rightDistanceNode.appendChild(distanceRightTextNode);
bottomDistanceNode.appendChild(distanceBottomTextNode);
if (values.offsetTop > 0) {
sizeNode.appendChild(topDistanceNode);
}
if (values.offsetLeft > 0) {
sizeNode.appendChild(leftDistanceNode);
}
if (values.offsetRight > 0) {
sizeNode.appendChild(rightDistanceNode);
}
if (values.offsetBottom > 0) {
sizeNode.appendChild(bottomDistanceNode);
}
sizeNode.appendChild(heightNode);
sizeNode.appendChild(widthNode);
return sizeNode;
};
_this.setNodeRef = function (node) { return (_this.node = node); };
return _this;
}
SizeInspector.prototype.componentDidMount = function () {
this.bindEvents();
};
SizeInspector.prototype.componentWillUnmount = function () {
this.unbindEvents();
this.cleanUp();
};
SizeInspector.prototype.componentDidUpdate = function () {
this.unbindEvents();
this.bindEvents();
if (!this.props.showOutlines) {
this.cleanUp();
}
};
SizeInspector.prototype.render = function () {
var children = this.props.children;
return React.createElement("div", { ref: this.setNodeRef, children: children });
};
SizeInspector.defaultProps = {
color: 'fuchsia',
offsetColor: 'orange',
targetSelector: '*',
showOutlines: true,
zoomLevel: 1,
};
return SizeInspector;
}(React.PureComponent));
exports.SizeInspector = SizeInspector;
function setNodeStyles(node, styles) {
Object.keys(styles).forEach(function (k) {
node.style[k] = styles[k];
});
return node;
}
exports.setNodeStyles = setNodeStyles;
exports.default = SizeInspector;
//# sourceMappingURL=SizeInspector.js.map