@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
34 lines (33 loc) • 1.64 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
import { Paper } from '@mui/material';
import { observer } from 'mobx-react';
import Gridlines from "./Gridlines.js";
import ScalebarCoordinateLabels from "./ScalebarCoordinateLabels.js";
import ScalebarRefNameLabels from "./ScalebarRefNameLabels.js";
const useStyles = makeStyles()({
container: {
overflow: 'hidden',
position: 'relative',
},
zoomContainer: {
position: 'relative',
},
scalebar: {
position: 'absolute',
display: 'flex',
pointerEvents: 'none',
},
});
const Scalebar = observer(function Scalebar({ model, style, className, ...other }) {
const { classes } = useStyles();
const { scaleFactor, staticBlocks, offsetPx } = model;
const offsetLeft = Math.round(staticBlocks.offsetPx - offsetPx);
return (_jsxs(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", 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: {
transform: `translateX(${offsetLeft - 1}px)`,
width: staticBlocks.totalWidthPx,
}, children: _jsx(ScalebarCoordinateLabels, { model: model }) }) }), _jsx(ScalebarRefNameLabels, { model: model })] }));
});
export default Scalebar;