@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
41 lines (40 loc) • 2.15 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const Gridlines_1 = __importDefault(require("./Gridlines"));
const ScalebarCoordinateLabels_1 = __importDefault(require("./ScalebarCoordinateLabels"));
const ScalebarRefNameLabels_1 = __importDefault(require("./ScalebarRefNameLabels"));
const useStyles = (0, mui_1.makeStyles)()({
container: {
overflow: 'hidden',
position: 'relative',
},
zoomContainer: {
position: 'relative',
},
scalebar: {
position: 'absolute',
display: 'flex',
pointerEvents: 'none',
},
});
const Scalebar = (0, mobx_react_1.observer)((0, react_1.forwardRef)(function Scalebar2({ model, style, className, ...other }, ref) {
const { classes, cx } = useStyles();
const { staticBlocks, offsetPx, scaleFactor } = model;
const offsetLeft = staticBlocks.offsetPx - offsetPx;
return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other, children: [(0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model, offset: 1 }), (0, jsx_runtime_1.jsx)("div", { className: classes.zoomContainer, style: {
transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
}, children: (0, jsx_runtime_1.jsx)("div", { className: classes.scalebar, style: {
left: offsetLeft - 1,
width: staticBlocks.totalWidthPx,
...style,
}, children: (0, jsx_runtime_1.jsx)(ScalebarCoordinateLabels_1.default, { model: model }) }) }), (0, jsx_runtime_1.jsx)(ScalebarRefNameLabels_1.default, { model: model })] }));
}));
exports.default = Scalebar;