react-pixi-plot
Version:
A React component rendering a zoomable and draggable PIXI.js scene. Intended to render 2d plots
34 lines • 2.16 kB
JavaScript
import React from 'react';
import { Stage } from 'react-pixi-fiber';
import ContainerDimensions from 'react-container-dimensions';
import Axes from './components/dom/Axes';
import { PlotContextProvider, DomPlotContext, PixiPlotContext } from './PlotContext';
const preventDefault = (e) => {
e.nativeEvent.preventDefault();
return true;
};
const STAGE_OPTIONS = {
antialias: true,
backgroundColor: 0xFFFFFF,
};
const PixiPlot = (props) => {
const { left, right, top, bottom } = props.rendererMargins;
const { leftAxisScale, leftLabel, rightAxisScale, rightLabel, bottomAxisScale, bottomLabel, topAxisScale, topLabel, bottomTicksRotate, } = props;
return (React.createElement("div", { style: { width: '100%', height: '100%' }, onContextMenu: preventDefault },
React.createElement(ContainerDimensions, null, ({ width, height }) => React.createElement(PlotContextProvider, { appHeight: height - top - bottom, appWidth: width - left - right },
React.createElement(React.Fragment, null,
React.createElement(Axes, { marginLeft: left, marginRight: right, marginBottom: bottom, marginTop: top, containerWidth: width, containerHeight: height, leftAxisScale: leftAxisScale, leftLabel: leftLabel, rightAxisScale: rightAxisScale, rightLabel: rightLabel, topAxisScale: topAxisScale, topLabel: topLabel, bottomAxisScale: bottomAxisScale, bottomLabel: bottomLabel, bottomTicksRotate: bottomTicksRotate }),
React.createElement("div", { style: {
marginLeft: left, marginRight: right, marginTop: top, marginBottom: bottom,
position: 'absolute',
} },
React.createElement(DomPlotContext.Consumer, null, value => React.createElement(Stage, { width: width - left - right, height: height - top - bottom, options: STAGE_OPTIONS },
React.createElement(PixiPlotContext.Provider, { value: value }, props.children)))))))));
};
PixiPlot.defaultProps = {
rendererMargins: {
top: 0, bottom: 0, left: 0, right: 0,
},
};
export default PixiPlot;
//# sourceMappingURL=PixiPlot.js.map