@jbrowse/plugin-linear-genome-view 2.2.1 → 2.3.0

package/esm/LinearGenomeView/components/RubberBand.js

@@ -1,196 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
-import { Popover, Tooltip, Typography, alpha } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import { stringify } from '@jbrowse/core/util';
-import { Menu } from '@jbrowse/core/ui';
-const useStyles = makeStyles()(theme => {
-    const { primary, tertiary } = theme.palette;
-    const background = tertiary
-        ? alpha(tertiary.main, 0.7)
-        : alpha(primary.main, 0.7);
-    return {
-        rubberBand: {
-            height: '100%',
-            background,
-            position: 'absolute',
-            zIndex: 10,
-            textAlign: 'center',
-            overflow: 'hidden',
-        },
-        rubberBandControl: {
-            cursor: 'crosshair',
-            width: '100%',
-            minHeight: 8,
-        },
-        rubberBandText: {
-            color: tertiary ? tertiary.contrastText : primary.contrastText,
-        },
-        popover: {
-            mouseEvents: 'none',
-            cursor: 'crosshair',
-        },
-        paper: {
-            paddingLeft: theme.spacing(1),
-            paddingRight: theme.spacing(1),
-        },
-        guide: {
-            pointerEvents: 'none',
-            height: '100%',
-            width: 1,
-            position: 'absolute',
-            zIndex: 10,
-        },
-    };
-});
-const VerticalGuide = observer(({ model, coordX }) => {
-    const { classes } = useStyles();
-    return (React.createElement(Tooltip, { open: true, placement: "top", title: stringify(model.pxToBp(coordX)), arrow: true },
-        React.createElement("div", { className: classes.guide, style: {
-                left: coordX,
-                background: 'red',
-            } })));
-});
-function RubberBand({ model, ControlComponent = React.createElement("div", null), }) {
-    const [startX, setStartX] = useState();
-    const [currentX, setCurrentX] = useState();
-    // clientX and clientY used for anchorPosition for menu
-    // offsetX used for calculations about width of selection
-    const [anchorPosition, setAnchorPosition] = useState();
-    const [guideX, setGuideX] = useState();
-    const controlsRef = useRef(null);
-    const rubberBandRef = useRef(null);
-    const { classes } = useStyles();
-    const mouseDragging = startX !== undefined && anchorPosition === undefined;
-    const { setOffsets, pxToBp } = model;
-    useEffect(() => {
-        function computeOffsets(offsetX) {
-            if (startX === undefined) {
-                return;
-            }
-            let leftPx = startX;
-            let rightPx = offsetX;
-            if (rightPx < leftPx) {
-                ;
-                [leftPx, rightPx] = [rightPx, leftPx];
-            }
-            const leftOffset = pxToBp(leftPx);
-            const rightOffset = pxToBp(rightPx);
-            return { leftOffset, rightOffset };
-        }
-        function globalMouseMove(event) {
-            if (controlsRef.current && mouseDragging) {
-                const relativeX = event.clientX - controlsRef.current.getBoundingClientRect().left;
-                setCurrentX(relativeX);
-            }
-        }
-        function globalMouseUp(event) {
-            if (startX !== undefined && controlsRef.current) {
-                const { clientX, clientY } = event;
-                const ref = controlsRef.current;
-                const offsetX = clientX - ref.getBoundingClientRect().left;
-                // as stated above, store both clientX/Y and offsetX for different
-                // purposes
-                setAnchorPosition({
-                    offsetX,
-                    clientX,
-                    clientY,
-                });
-                const args = computeOffsets(offsetX);
-                if (args) {
-                    const { leftOffset, rightOffset } = args;
-                    setOffsets(leftOffset, rightOffset);
-                }
-                setGuideX(undefined);
-            }
-        }
-        if (mouseDragging) {
-            window.addEventListener('mousemove', globalMouseMove);
-            window.addEventListener('mouseup', globalMouseUp);
-            return () => {
-                window.removeEventListener('mousemove', globalMouseMove);
-                window.removeEventListener('mouseup', globalMouseUp);
-            };
-        }
-        return () => { };
-    }, [startX, mouseDragging, anchorPosition, setOffsets, pxToBp]);
-    useEffect(() => {
-        if (!mouseDragging &&
-            currentX !== undefined &&
-            startX !== undefined &&
-            Math.abs(currentX - startX) <= 3) {
-            handleClose();
-        }
-    }, [mouseDragging, currentX, startX, model.bpPerPx]);
-    function mouseDown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const relativeX = event.clientX -
-            event.target.getBoundingClientRect().left;
-        setStartX(relativeX);
-        setCurrentX(relativeX);
-    }
-    function mouseMove(event) {
-        const target = event.target;
-        setGuideX(event.clientX - target.getBoundingClientRect().left);
-    }
-    function mouseOut() {
-        setGuideX(undefined);
-        model.setOffsets(undefined, undefined);
-    }
-    function handleClose() {
-        setAnchorPosition(undefined);
-        setStartX(undefined);
-        setCurrentX(undefined);
-    }
-    const open = Boolean(anchorPosition);
-    function handleMenuItemClick(_, callback) {
-        callback();
-        handleClose();
-    }
-    if (startX === undefined) {
-        return (React.createElement(React.Fragment, null,
-            guideX !== undefined ? (React.createElement(VerticalGuide, { model: model, coordX: guideX })) : null,
-            React.createElement("div", { "data-testid": "rubberBand_controls", className: classes.rubberBandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
-    }
-    /* Calculating Pixels for Mouse Dragging */
-    const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
-    const left = right < startX ? right : startX;
-    const width = Math.abs(right - startX);
-    const leftBpOffset = model.pxToBp(left);
-    const rightBpOffset = model.pxToBp(left + width);
-    const numOfBpSelected = Math.ceil(width * model.bpPerPx);
-    return (React.createElement(React.Fragment, null,
-        rubberBandRef.current ? (React.createElement(React.Fragment, null,
-            React.createElement(Popover, { className: classes.popover, classes: {
-                    paper: classes.paper,
-                }, open: true, anchorEl: rubberBandRef.current, anchorOrigin: {
-                    vertical: 'top',
-                    horizontal: 'left',
-                }, transformOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                }, keepMounted: true, disableRestoreFocus: true },
-                React.createElement(Typography, null, stringify(leftBpOffset))),
-            React.createElement(Popover, { className: classes.popover, classes: {
-                    paper: classes.paper,
-                }, open: true, anchorEl: rubberBandRef.current, anchorOrigin: {
-                    vertical: 'top',
-                    horizontal: 'right',
-                }, transformOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                }, keepMounted: true, disableRestoreFocus: true },
-                React.createElement(Typography, null, stringify(rightBpOffset))))) : null,
-        React.createElement("div", { ref: rubberBandRef, className: classes.rubberBand, style: { left, width } },
-            React.createElement(Typography, { variant: "h6", className: classes.rubberBandText },
-                numOfBpSelected.toLocaleString('en-US'),
-                " bp")),
-        React.createElement("div", { "data-testid": "rubberBand_controls", className: classes.rubberBandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent),
-        anchorPosition ? (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-                left: anchorPosition.clientX,
-                top: anchorPosition.clientY,
-            }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null));
-}
-export default observer(RubberBand);
-//# sourceMappingURL=RubberBand.js.map

package/esm/LinearGenomeView/components/RubberBand.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RubberBand.js","sourceRoot":"","sources":["../../../src/LinearGenomeView/components/RubberBand.tsx"],"names":[],"mappings":"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"}

package/src/LinearGenomeView/components/RubberBand.tsx

@@ -1,308 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react'
-import { observer } from 'mobx-react'
-import { Popover, Tooltip, Typography, alpha } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { stringify } from '@jbrowse/core/util'
-import { Menu } from '@jbrowse/core/ui'
-import { LinearGenomeViewModel } from '..'
-
-type LGV = LinearGenomeViewModel
-
-const useStyles = makeStyles()(theme => {
-  const { primary, tertiary } = theme.palette
-  const background = tertiary
-    ? alpha(tertiary.main, 0.7)
-    : alpha(primary.main, 0.7)
-  return {
-    rubberBand: {
-      height: '100%',
-      background,
-      position: 'absolute',
-      zIndex: 10,
-      textAlign: 'center',
-      overflow: 'hidden',
-    },
-    rubberBandControl: {
-      cursor: 'crosshair',
-      width: '100%',
-      minHeight: 8,
-    },
-    rubberBandText: {
-      color: tertiary ? tertiary.contrastText : primary.contrastText,
-    },
-    popover: {
-      mouseEvents: 'none',
-      cursor: 'crosshair',
-    },
-    paper: {
-      paddingLeft: theme.spacing(1),
-      paddingRight: theme.spacing(1),
-    },
-    guide: {
-      pointerEvents: 'none',
-      height: '100%',
-      width: 1,
-      position: 'absolute',
-      zIndex: 10,
-    },
-  }
-})
-
-const VerticalGuide = observer(
-  ({ model, coordX }: { model: LGV; coordX: number }) => {
-    const { classes } = useStyles()
-    return (
-      <Tooltip
-        open
-        placement="top"
-        title={stringify(model.pxToBp(coordX))}
-        arrow
-      >
-        <div
-          className={classes.guide}
-          style={{
-            left: coordX,
-            background: 'red',
-          }}
-        />
-      </Tooltip>
-    )
-  },
-)
-
-function RubberBand({
-  model,
-  ControlComponent = <div />,
-}: {
-  model: LGV
-  ControlComponent?: React.ReactElement
-}) {
-  const [startX, setStartX] = useState<number>()
-  const [currentX, setCurrentX] = useState<number>()
-
-  // clientX and clientY used for anchorPosition for menu
-  // offsetX used for calculations about width of selection
-  const [anchorPosition, setAnchorPosition] = useState<{
-    offsetX: number
-    clientX: number
-    clientY: number
-  }>()
-  const [guideX, setGuideX] = useState<number>()
-  const controlsRef = useRef<HTMLDivElement>(null)
-  const rubberBandRef = useRef(null)
-  const { classes } = useStyles()
-  const mouseDragging = startX !== undefined && anchorPosition === undefined
-
-  const { setOffsets, pxToBp } = model
-
-  useEffect(() => {
-    function computeOffsets(offsetX: number) {
-      if (startX === undefined) {
-        return
-      }
-      let leftPx = startX
-      let rightPx = offsetX
-      if (rightPx < leftPx) {
-        ;[leftPx, rightPx] = [rightPx, leftPx]
-      }
-      const leftOffset = pxToBp(leftPx)
-      const rightOffset = pxToBp(rightPx)
-
-      return { leftOffset, rightOffset }
-    }
-
-    function globalMouseMove(event: MouseEvent) {
-      if (controlsRef.current && mouseDragging) {
-        const relativeX =
-          event.clientX - controlsRef.current.getBoundingClientRect().left
-        setCurrentX(relativeX)
-      }
-    }
-
-    function globalMouseUp(event: MouseEvent) {
-      if (startX !== undefined && controlsRef.current) {
-        const { clientX, clientY } = event
-        const ref = controlsRef.current
-        const offsetX = clientX - ref.getBoundingClientRect().left
-        // as stated above, store both clientX/Y and offsetX for different
-        // purposes
-        setAnchorPosition({
-          offsetX,
-          clientX,
-          clientY,
-        })
-        const args = computeOffsets(offsetX)
-        if (args) {
-          const { leftOffset, rightOffset } = args
-          setOffsets(leftOffset, rightOffset)
-        }
-        setGuideX(undefined)
-      }
-    }
-    if (mouseDragging) {
-      window.addEventListener('mousemove', globalMouseMove)
-      window.addEventListener('mouseup', globalMouseUp)
-      return () => {
-        window.removeEventListener('mousemove', globalMouseMove)
-        window.removeEventListener('mouseup', globalMouseUp)
-      }
-    }
-    return () => {}
-  }, [startX, mouseDragging, anchorPosition, setOffsets, pxToBp])
-
-  useEffect(() => {
-    if (
-      !mouseDragging &&
-      currentX !== undefined &&
-      startX !== undefined &&
-      Math.abs(currentX - startX) <= 3
-    ) {
-      handleClose()
-    }
-  }, [mouseDragging, currentX, startX, model.bpPerPx])
-
-  function mouseDown(event: React.MouseEvent<HTMLDivElement>) {
-    event.preventDefault()
-    event.stopPropagation()
-    const relativeX =
-      event.clientX -
-      (event.target as HTMLDivElement).getBoundingClientRect().left
-    setStartX(relativeX)
-    setCurrentX(relativeX)
-  }
-
-  function mouseMove(event: React.MouseEvent<HTMLDivElement>) {
-    const target = event.target as HTMLDivElement
-    setGuideX(event.clientX - target.getBoundingClientRect().left)
-  }
-
-  function mouseOut() {
-    setGuideX(undefined)
-    model.setOffsets(undefined, undefined)
-  }
-
-  function handleClose() {
-    setAnchorPosition(undefined)
-    setStartX(undefined)
-    setCurrentX(undefined)
-  }
-
-  const open = Boolean(anchorPosition)
-
-  function handleMenuItemClick(_: unknown, callback: Function) {
-    callback()
-    handleClose()
-  }
-
-  if (startX === undefined) {
-    return (
-      <>
-        {guideX !== undefined ? (
-          <VerticalGuide model={model} coordX={guideX} />
-        ) : null}
-        <div
-          data-testid="rubberBand_controls"
-          className={classes.rubberBandControl}
-          role="presentation"
-          ref={controlsRef}
-          onMouseDown={mouseDown}
-          onMouseOut={mouseOut}
-          onMouseMove={mouseMove}
-        >
-          {ControlComponent}
-        </div>
-      </>
-    )
-  }
-
-  /* Calculating Pixels for Mouse Dragging */
-  const right = anchorPosition ? anchorPosition.offsetX : currentX || 0
-  const left = right < startX ? right : startX
-  const width = Math.abs(right - startX)
-  const leftBpOffset = model.pxToBp(left)
-  const rightBpOffset = model.pxToBp(left + width)
-  const numOfBpSelected = Math.ceil(width * model.bpPerPx)
-  return (
-    <>
-      {rubberBandRef.current ? (
-        <>
-          <Popover
-            className={classes.popover}
-            classes={{
-              paper: classes.paper,
-            }}
-            open
-            anchorEl={rubberBandRef.current}
-            anchorOrigin={{
-              vertical: 'top',
-              horizontal: 'left',
-            }}
-            transformOrigin={{
-              vertical: 'bottom',
-              horizontal: 'right',
-            }}
-            keepMounted
-            disableRestoreFocus
-          >
-            <Typography>{stringify(leftBpOffset)}</Typography>
-          </Popover>
-          <Popover
-            className={classes.popover}
-            classes={{
-              paper: classes.paper,
-            }}
-            open
-            anchorEl={rubberBandRef.current}
-            anchorOrigin={{
-              vertical: 'top',
-              horizontal: 'right',
-            }}
-            transformOrigin={{
-              vertical: 'bottom',
-              horizontal: 'left',
-            }}
-            keepMounted
-            disableRestoreFocus
-          >
-            <Typography>{stringify(rightBpOffset)}</Typography>
-          </Popover>
-        </>
-      ) : null}
-      <div
-        ref={rubberBandRef}
-        className={classes.rubberBand}
-        style={{ left, width }}
-      >
-        <Typography variant="h6" className={classes.rubberBandText}>
-          {numOfBpSelected.toLocaleString('en-US')} bp
-        </Typography>
-      </div>
-      <div
-        data-testid="rubberBand_controls"
-        className={classes.rubberBandControl}
-        role="presentation"
-        ref={controlsRef}
-        onMouseDown={mouseDown}
-        onMouseOut={mouseOut}
-        onMouseMove={mouseMove}
-      >
-        {ControlComponent}
-      </div>
-      {anchorPosition ? (
-        <Menu
-          anchorReference="anchorPosition"
-          anchorPosition={{
-            left: anchorPosition.clientX,
-            top: anchorPosition.clientY,
-          }}
-          onMenuItemClick={handleMenuItemClick}
-          open={open}
-          onClose={handleClose}
-          menuItems={model.rubberBandMenuItems()}
-        />
-      ) : null}
-    </>
-  )
-}
-
-export default observer(RubberBand)