@antv/f-react
Version:
FEngine for React
192 lines (190 loc) • 6.88 kB
JavaScript
"use strict";
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createCanvas = void 0;
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _fEngine = require("@antv/f-engine");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// 对 f-engine 只有类型引用
function pickElement(children) {
if (!children) return children;
var result = _fEngine.Children.map(children, function (item) {
if (!item) return item;
var key = item.key,
ref = item.ref,
type = item.type,
props = item.props;
return {
key: key,
ref: ref,
type: type,
props: (0, _tslib.__assign)((0, _tslib.__assign)({}, props), {
children: pickElement(props.children)
})
};
});
return result;
}
var createCanvas = exports.createCanvas = function createCanvas(CanvasClass) {
var FCanvas = /** @class */function (_super) {
(0, _tslib.__extends)(FCanvas, _super);
function FCanvas() {
return _super !== null && _super.apply(this, arguments) || this;
}
// override
FCanvas.prototype.toRawChildren = function (children) {
return pickElement(children);
};
return FCanvas;
}(CanvasClass);
return /** @class */function (_super) {
(0, _tslib.__extends)(ReactCanvas, _super);
function ReactCanvas(props) {
var _this = _super.call(this, props) || this;
_this.getProps = function () {
var _a = _this,
canvasRef = _a.canvasRef,
props = _a.props;
var canvasEl = canvasRef.current;
var context = canvasEl.getContext('2d');
// 去掉 react 生成的 element 中无用属性
var children = pickElement(props.children);
return (0, _tslib.__assign)((0, _tslib.__assign)({
// 已经有高清方案，这里默认用1
pixelRatio: 1
}, props), {
children: children,
// context 内部创建，不能被覆盖
context: context
});
};
var canvasRef = props.canvasRef;
_this.canvasRef = canvasRef || /*#__PURE__*/(0, _react.createRef)();
_this.state = {
error: null
};
return _this;
}
ReactCanvas.prototype.catchError = function (error) {
var onError = this.props.onError;
this.setState({
error: error
});
console.error('图表渲染失败: ', error);
if (typeof onError === 'function') {
onError(error);
}
// 重新抛出，为了让 window.onerror 捕获
setTimeout(function () {
throw error;
}, 0);
};
ReactCanvas.prototype.componentDidMount = function () {
var _this = this;
var _a;
var pickProps = this.getProps();
var canvas = new FCanvas(pickProps);
this.canvas = canvas;
canvas.render().catch(function (error) {
_this.catchError(error);
});
var targetNode = (_a = this.canvasRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
if (!targetNode) return;
var _b = targetNode.getBoundingClientRect(),
width = _b.width,
height = _b.height;
this.parentNode = {
width: Math.round(width),
height: Math.round(height)
};
this.observeElement();
};
ReactCanvas.prototype.observeElement = function () {
var _this = this;
var _a, _b;
if (!((_a = this.props) === null || _a === void 0 ? void 0 : _a.autoFit)) return;
var targetNode = (_b = this.canvasRef.current) === null || _b === void 0 ? void 0 : _b.parentElement;
window === null || window === void 0 ? void 0 : window.addEventListener('resize', function () {
_this.resize();
});
if (typeof ResizeObserver !== 'undefined') {
this.observer = new ResizeObserver(function () {
_this.resize();
});
this.observer.observe(targetNode);
}
};
ReactCanvas.prototype.resize = function () {
var _a;
var targetNode = (_a = this.canvasRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
if (!targetNode) return;
var _b = targetNode.getBoundingClientRect(),
width = _b.width,
height = _b.height;
var lastWidth = Math.round(width);
var lastHeight = Math.round(height);
if (lastWidth === this.parentNode.width && lastHeight === this.parentNode.height || !lastWidth || !lastHeight) return;
this.parentNode = {
width: lastWidth,
height: lastHeight
};
this.canvas.resize(lastWidth, lastHeight);
};
ReactCanvas.prototype.componentDidUpdate = function () {
var _this = this;
var _a = this,
state = _a.state,
canvas = _a.canvas;
var error = state.error;
if (error) {
return;
}
var pickProps = this.getProps();
canvas.update(pickProps).catch(function (error) {
_this.catchError(error);
});
};
ReactCanvas.prototype.render = function () {
var _a = this,
props = _a.props,
state = _a.state;
var _b = props.className,
className = _b === void 0 ? '' : _b,
fallback = props.fallback;
var error = state.error;
if (error) {
// 直接销毁
this.destroy();
return fallback || null;
}
return /*#__PURE__*/_react.default.createElement('canvas', {
className: "f-chart ".concat(className),
ref: this.canvasRef,
style: {
width: '100%',
height: '100%',
display: 'block',
padding: 0,
margin: 0
}
});
};
ReactCanvas.prototype.componentWillUnmount = function () {
this.destroy();
};
ReactCanvas.prototype.destroy = function () {
var canvas = this.canvas;
if (!canvas) return;
canvas.destroy();
this.canvas = null;
if (!this.observer) return;
this.observer.disconnect();
this.observer = null;
};
return ReactCanvas;
}(_react.Component);
};