react-pixi-plot
Version:
A React component rendering a zoomable and draggable PIXI.js scene. Intended to render 2d plots
33 lines • 1.7 kB
JavaScript
import { CustomPIXIComponent } from 'react-pixi-fiber';
import * as PIXI from 'pixi.js';
const TYPE = 'SelectionOverlay';
const background = 0xFFFFFF;
const backgroundAlpha = 0.6;
const lineWidth = 2;
const lineColor = 0xCCCCCC;
const behavior = {
customDisplayObject: () => new PIXI.Container(),
customApplyProps(container, _oldProps, newProps) {
container.removeChildren();
const { selectionRectangle: { left, top, bottom, right, width, height }, viewRectangle, invert, } = newProps;
const selectionOverlay = new PIXI.Graphics(true);
// Fade everything that is not selected.
selectionOverlay.beginFill(background, backgroundAlpha);
if (!invert) {
selectionOverlay.drawRect(viewRectangle.left, viewRectangle.top, viewRectangle.width, top - viewRectangle.top); // top rectangle
selectionOverlay.drawRect(viewRectangle.left, bottom, viewRectangle.width, viewRectangle.height - (bottom - viewRectangle.top)); // bottom rectangle
selectionOverlay.drawRect(viewRectangle.left, top, left - viewRectangle.left, height); // left rectangle
selectionOverlay.drawRect(right, top, viewRectangle.width - (right - viewRectangle.left), height); // right rectangle
}
else {
selectionOverlay.drawRect(left, top, width, height);
}
selectionOverlay.endFill();
selectionOverlay.lineStyle(lineWidth, lineColor);
selectionOverlay.drawRect(left, top, width, height);
container.addChild(selectionOverlay);
},
};
const SelectionOverlay = CustomPIXIComponent(behavior, TYPE);
export default SelectionOverlay;
//# sourceMappingURL=SelectionOverlay.js.map