@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
36 lines (35 loc) • 1.68 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { Paper } from '@mui/material';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
import Gridlines from './Gridlines';
import ScalebarCoordinateLabels from './ScalebarCoordinateLabels';
import ScalebarRefNameLabels from './ScalebarRefNameLabels';
const useStyles = makeStyles()({
container: {
overflow: 'hidden',
position: 'relative',
},
zoomContainer: {
position: 'relative',
},
scalebar: {
position: 'absolute',
display: 'flex',
pointerEvents: 'none',
},
});
const Scalebar = observer(forwardRef(function Scalebar2({ model, style, className, ...other }, ref) {
const { classes, cx } = useStyles();
const { staticBlocks, offsetPx, scaleFactor } = model;
const offsetLeft = staticBlocks.offsetPx - offsetPx;
return (_jsxs(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other, children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx("div", { className: classes.zoomContainer, style: {
transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
}, children: _jsx("div", { className: classes.scalebar, style: {
left: offsetLeft - 1,
width: staticBlocks.totalWidthPx,
...style,
}, children: _jsx(ScalebarCoordinateLabels, { model: model }) }) }), _jsx(ScalebarRefNameLabels, { model: model })] }));
}));
export default Scalebar;