react-msaview 1.3.2 → 2.0.0

package/dist/components/MSACanvas.js

@@ -1,20 +1,19 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
-import { Typography, CircularProgress, useTheme } from '@material-ui/core';
+import { Typography, CircularProgress, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import normalizeWheel from 'normalize-wheel';
 import { colorContrast } from '../util';
 import { getClustalXColor, getPercentIdentityColor } from '../colorSchemes';
-var MSABlock = observer(function (_a) {
-    var model = _a.model, offsetX = _a.offsetX, offsetY = _a.offsetY;
-    var MSA = model.MSA, colWidth = model.colWidth, bgColor = model.bgColor, columns = model.columns, rowHeight = model.rowHeight, scrollY = model.scrollY, scrollX = model.scrollX, hierarchy = model.hierarchy, colorScheme = model.colorScheme, colorSchemeName = model.colorSchemeName, blockSize = model.blockSize, highResScaleFactor = model.highResScaleFactor, colStats = model.colStats;
-    var theme = useTheme();
-    var contrastScheme = useMemo(function () { return colorContrast(colorScheme, theme); }, [colorScheme, theme]);
-    var ref = useRef(null);
-    useEffect(function () {
+const MSABlock = observer(function ({ model, offsetX, offsetY, }) {
+    const { MSA, colWidth, bgColor, columns, rowHeight, scrollY, scrollX, hierarchy, colorScheme, colorSchemeName, blockSize, highResScaleFactor, colStats, } = model;
+    const theme = useTheme();
+    const contrastScheme = useMemo(() => colorContrast(colorScheme, theme), [colorScheme, theme]);
+    const ref = useRef(null);
+    useEffect(() => {
         if (!ref.current) {
             return;
         }
-        var ctx = ref.current.getContext('2d');
+        const ctx = ref.current.getContext('2d');
         if (!ctx) {
             return;
         }
@@ -23,54 +22,55 @@ var MSABlock = observer(function (_a) {
         ctx.clearRect(0, 0, blockSize, blockSize);
         ctx.translate(-offsetX, rowHeight / 2 - offsetY);
         ctx.textAlign = 'center';
-        ctx.font = ctx.font.replace(/\d+px/, "".concat(Math.max(8, rowHeight - 8), "px"));
-        var leaves = hierarchy.leaves();
-        var b = blockSize;
+        ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`);
+        const leaves = hierarchy.leaves();
+        const b = blockSize;
         // slice vertical rows, e.g. tree leaves, avoid negative slice
-        var yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight));
-        var yEnd = Math.max(0, Math.ceil((offsetY + b + rowHeight) / rowHeight));
+        const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight));
+        const yEnd = Math.max(0, Math.ceil((offsetY + b + rowHeight) / rowHeight));
         // slice horizontal visible letters, avoid negative slice
-        var xStart = Math.max(0, Math.floor(offsetX / colWidth));
-        var xEnd = Math.max(0, Math.ceil((offsetX + b) / colWidth));
-        var visibleLeaves = leaves.slice(yStart, yEnd);
-        visibleLeaves.forEach(function (node) {
+        const xStart = Math.max(0, Math.floor(offsetX / colWidth));
+        const xEnd = Math.max(0, Math.ceil((offsetX + b) / colWidth));
+        const visibleLeaves = leaves.slice(yStart, yEnd);
+        visibleLeaves.forEach(node => {
             var _a;
-            var 
-            //@ts-ignore
-            y = node.x, name = node.data.name;
-            var str = (_a = columns[name]) === null || _a === void 0 ? void 0 : _a.slice(xStart, xEnd);
-            for (var i = 0; i < (str === null || str === void 0 ? void 0 : str.length); i++) {
-                var letter = str[i];
-                var color = colorSchemeName === 'clustalx_protein_dynamic'
+            const { 
+            // @ts-expect-error
+            x: y, data: { name }, } = node;
+            const str = (_a = columns[name]) === null || _a === void 0 ? void 0 : _a.slice(xStart, xEnd);
+            for (let i = 0; i < (str === null || str === void 0 ? void 0 : str.length); i++) {
+                const letter = str[i];
+                const color = colorSchemeName === 'clustalx_protein_dynamic'
                     ? getClustalXColor(colStats[xStart + i], model, name, xStart + i)
                     : colorSchemeName === 'percent_identity_dynamic'
                         ? getPercentIdentityColor(colStats[xStart + i], model, name, xStart + i)
                         : colorScheme[letter.toUpperCase()];
                 if (bgColor) {
-                    var x = i * colWidth + offsetX - (offsetX % colWidth);
+                    const x = i * colWidth + offsetX - (offsetX % colWidth);
                     ctx.fillStyle = color || 'white';
                     ctx.fillRect(x, y - rowHeight, colWidth, rowHeight);
                 }
             }
         });
         if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
-            visibleLeaves.forEach(function (node) {
+            visibleLeaves.forEach(node => {
                 var _a;
-                var 
-                //@ts-ignore
-                y = node.x, name = node.data.name;
-                var str = (_a = columns[name]) === null || _a === void 0 ? void 0 : _a.slice(xStart, xEnd);
-                for (var i = 0; i < (str === null || str === void 0 ? void 0 : str.length); i++) {
-                    var letter = str[i];
-                    var color = colorScheme[letter.toUpperCase()];
-                    var contrast = contrastScheme[letter.toUpperCase()] || 'black';
-                    var x = i * colWidth + offsetX - (offsetX % colWidth);
-                    //note: -rowHeight/4 matches +rowHeight/4 in tree
+                const { 
+                // @ts-expect-error
+                x: y, data: { name }, } = node;
+                const str = (_a = columns[name]) === null || _a === void 0 ? void 0 : _a.slice(xStart, xEnd);
+                for (let i = 0; i < (str === null || str === void 0 ? void 0 : str.length); i++) {
+                    const letter = str[i];
+                    const color = colorScheme[letter.toUpperCase()];
+                    const contrast = contrastScheme[letter.toUpperCase()] || 'black';
+                    const x = i * colWidth + offsetX - (offsetX % colWidth);
+                    // note: -rowHeight/4 matches +rowHeight/4 in tree
                     ctx.fillStyle = bgColor ? contrast : color || 'black';
                     ctx.fillText(letter, x + colWidth / 2, y - rowHeight / 4);
                 }
             });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         MSA,
         highResScaleFactor,
@@ -85,15 +85,15 @@ var MSABlock = observer(function (_a) {
         offsetY,
         blockSize,
     ]);
-    return (React.createElement("canvas", { ref: ref, onMouseMove: function (event) {
+    return (React.createElement("canvas", { ref: ref, onMouseMove: event => {
             if (!ref.current) {
                 return;
             }
-            var _a = ref.current.getBoundingClientRect(), left = _a.left, top = _a.top;
-            var mouseX = event.clientX - left;
-            var mouseY = event.clientY - top;
+            const { left, top } = ref.current.getBoundingClientRect();
+            const mouseX = event.clientX - left;
+            const mouseY = event.clientY - top;
             model.setMousePos(Math.floor((mouseX + offsetX) / colWidth) + 1, Math.floor((mouseY + offsetY) / rowHeight));
-        }, onMouseLeave: function () { return model.setMousePos(); }, width: blockSize * highResScaleFactor, height: blockSize * highResScaleFactor, style: {
+        }, onMouseLeave: () => model.setMousePos(), width: blockSize * highResScaleFactor, height: blockSize * highResScaleFactor, style: {
             position: 'absolute',
             top: scrollY + offsetY,
             left: scrollX + offsetX,
@@ -101,30 +101,29 @@ var MSABlock = observer(function (_a) {
             height: blockSize,
         } }));
 });
-var MSACanvas = observer(function (_a) {
-    var model = _a.model;
-    var MSA = model.MSA, msaFilehandle = model.msaFilehandle, height = model.height, msaAreaWidth = model.msaAreaWidth, blocks2d = model.blocks2d;
-    var ref = useRef(null);
+const MSACanvas = observer(function ({ model }) {
+    const { MSA, msaFilehandle, height, msaAreaWidth, blocks2d } = model;
+    const ref = useRef(null);
     // wheel
-    var scheduled = useRef(false);
-    var deltaX = useRef(0);
-    var deltaY = useRef(0);
+    const scheduled = useRef(false);
+    const deltaX = useRef(0);
+    const deltaY = useRef(0);
     // mouse click-and-drag scrolling
-    var prevX = useRef(0);
-    var prevY = useRef(0);
-    var _b = useState(false), mouseDragging = _b[0], setMouseDragging = _b[1];
-    useEffect(function () {
-        var curr = ref.current;
+    const prevX = useRef(0);
+    const prevY = useRef(0);
+    const [mouseDragging, setMouseDragging] = useState(false);
+    useEffect(() => {
+        const curr = ref.current;
         if (!curr) {
             return;
         }
         function onWheel(origEvent) {
-            var event = normalizeWheel(origEvent);
+            const event = normalizeWheel(origEvent);
             deltaX.current += event.pixelX;
             deltaY.current += event.pixelY;
             if (!scheduled.current) {
                 scheduled.current = true;
-                requestAnimationFrame(function () {
+                requestAnimationFrame(() => {
                     model.doScrollX(-deltaX.current);
                     model.doScrollY(-deltaY.current);
                     deltaX.current = 0;
@@ -135,24 +134,24 @@ var MSACanvas = observer(function (_a) {
             origEvent.preventDefault();
         }
         curr.addEventListener('wheel', onWheel);
-        return function () {
+        return () => {
             curr.removeEventListener('wheel', onWheel);
         };
     }, [model]);
-    useEffect(function () {
-        var cleanup = function () { };
+    useEffect(() => {
+        let cleanup = () => { };
         function globalMouseMove(event) {
             event.preventDefault();
-            var currX = event.clientX;
-            var currY = event.clientY;
-            var distanceX = currX - prevX.current;
-            var distanceY = currY - prevY.current;
+            const currX = event.clientX;
+            const currY = event.clientY;
+            const distanceX = currX - prevX.current;
+            const distanceY = currY - prevY.current;
             if (distanceX || distanceY) {
                 // use rAF to make it so multiple event handlers aren't fired per-frame
                 // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
                 if (!scheduled.current) {
                     scheduled.current = true;
-                    window.requestAnimationFrame(function () {
+                    window.requestAnimationFrame(() => {
                         model.doScrollX(distanceX);
                         model.doScrollY(distanceY);
                         scheduled.current = false;
@@ -171,16 +170,16 @@ var MSACanvas = observer(function (_a) {
         if (mouseDragging) {
             window.addEventListener('mousemove', globalMouseMove, true);
             window.addEventListener('mouseup', globalMouseUp, true);
-            cleanup = function () {
+            cleanup = () => {
                 window.removeEventListener('mousemove', globalMouseMove, true);
                 window.removeEventListener('mouseup', globalMouseUp, true);
             };
         }
         return cleanup;
     }, [model, mouseDragging]);
-    return (React.createElement("div", { ref: ref, onMouseDown: function (event) {
+    return (React.createElement("div", { ref: ref, onMouseDown: event => {
             // check if clicking a draggable element or a resize handle
-            var target = event.target;
+            const target = event.target;
             if (target.draggable || target.dataset.resizer) {
                 return;
             }
@@ -190,21 +189,19 @@ var MSACanvas = observer(function (_a) {
                 prevY.current = event.clientY;
                 setMouseDragging(true);
             }
-        }, onMouseUp: function (event) {
+        }, onMouseUp: event => {
             event.preventDefault();
             setMouseDragging(false);
-        }, onMouseLeave: function (event) {
+        }, onMouseLeave: event => {
             event.preventDefault();
         }, style: {
             position: 'relative',
-            height: height,
+            height,
             width: msaAreaWidth,
             overflow: 'hidden',
         } }, !MSA && !msaFilehandle ? null : !MSA ? (React.createElement("div", { style: { position: 'absolute', left: '50%', top: '50%' } },
         React.createElement(CircularProgress, null),
-        React.createElement(Typography, null, "Loading..."))) : (blocks2d.map(function (_a) {
-        var bx = _a[0], by = _a[1];
-        return (React.createElement(MSABlock, { key: "".concat(bx, "_").concat(by), model: model, offsetX: bx, offsetY: by }));
-    }))));
+        React.createElement(Typography, null, "Loading..."))) : (blocks2d.map(([bx, by]) => (React.createElement(MSABlock, { key: `${bx}_${by}`, model: model, offsetX: bx, offsetY: by }))))));
 });
 export default MSACanvas;
+//# sourceMappingURL=MSACanvas.js.map

package/dist/components/MSACanvas.js.map

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

package/dist/components/MSAView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MsaViewModel } from '../model';
 declare const _default: ({ model }: {
     model: MsaViewModel;

package/dist/components/MSAView.js

@@ -1,17 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React, { useRef, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
+// locals
 import ImportForm from './ImportForm';
 import Rubberband from './Rubberband';
 import TreeCanvas from './TreeCanvas';
@@ -22,50 +12,40 @@ import Header from './Header';
 import Track from './Track';
 import AnnotationDialog from './AnnotationDlg';
 import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles';
-var MouseoverCanvas = observer(function (_a) {
-    var model = _a.model;
-    var ref = useRef(null);
-    var height = model.height, width = model.width, treeAreaWidth = model.treeAreaWidth, resizeHandleWidth = model.resizeHandleWidth, scrollX = model.scrollX, mouseCol = model.mouseCol, colWidth = model.colWidth;
-    useEffect(function () {
+const MouseoverCanvas = observer(function ({ model }) {
+    const ref = useRef(null);
+    const { height, width, treeAreaWidth, resizeHandleWidth, scrollX, mouseCol, colWidth, } = model;
+    useEffect(() => {
         if (!ref.current) {
             return;
         }
-        var ctx = ref.current.getContext('2d');
+        const ctx = ref.current.getContext('2d');
         if (!ctx) {
             return;
         }
         ctx.resetTransform();
         ctx.clearRect(0, 0, width, height);
         if (mouseCol !== undefined) {
-            var x = (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth;
+            const x = (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth;
             ctx.fillStyle = 'rgba(100,100,100,0.5)';
             ctx.fillRect(x, 0, colWidth, height);
         }
-    }, [
-        mouseCol,
-        colWidth,
-        scrollX,
-        height,
-        resizeHandleWidth,
-        treeAreaWidth,
-        width,
-    ]);
+    }, [mouseCol, colWidth, scrollX, height, resizeHandleWidth, treeAreaWidth, width]);
     return (React.createElement("canvas", { ref: ref, width: width, height: height, style: {
             position: 'absolute',
             top: 0,
             left: 0,
-            width: width,
-            height: height,
+            width,
+            height,
             zIndex: 1000,
             pointerEvents: 'none',
         } }));
 });
-export default observer(function (_a) {
-    var model = _a.model;
-    var done = model.done, initialized = model.initialized, treeAreaWidth = model.treeAreaWidth, height = model.height, resizeHandleWidth = model.resizeHandleWidth, turnedOnTracks = model.turnedOnTracks;
+export default observer(function ({ model }) {
+    const { done, initialized, treeAreaWidth, height, turnedOnTracks } = model;
     return (React.createElement("div", null,
         !initialized ? (React.createElement(ImportForm, { model: model })) : !done ? (React.createElement(Typography, { variant: "h4" }, "Loading...")) : (React.createElement("div", null,
-            React.createElement("div", { style: { height: height, overflow: 'hidden' } },
+            React.createElement("div", { style: { height, overflow: 'hidden' } },
                 React.createElement(Header, { model: model }),
                 React.createElement("div", null,
                     React.createElement("div", { style: { position: 'relative' } },
@@ -73,7 +53,7 @@ export default observer(function (_a) {
                             React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } },
                                 React.createElement(TreeRuler, { model: model })),
                             React.createElement(Rubberband, { model: model, ControlComponent: React.createElement(Ruler, { model: model }) })), turnedOnTracks === null || turnedOnTracks === void 0 ? void 0 :
-                        turnedOnTracks.map(function (track) { return (React.createElement(Track, { key: track.model.id, model: model, track: track })); }),
+                        turnedOnTracks.map(track => (React.createElement(Track, { key: track.model.id, model: model, track: track }))),
                         React.createElement("div", { style: { display: 'flex' } },
                             React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } },
                                 React.createElement(TreeCanvas, { model: model })),
@@ -81,8 +61,9 @@ export default observer(function (_a) {
                             React.createElement(MSACanvas, { model: model }),
                             React.createElement(MouseoverCanvas, { model: model }))))),
             React.createElement(HorizontalResizeHandle, { model: model }))),
-        model.DialogComponent ? (React.createElement(model.DialogComponent, __assign({}, (model.DialogProps || {}), { onClose: function () {
+        model.DialogComponent ? (React.createElement(model.DialogComponent, { ...(model.DialogProps || {}), onClose: () => {
                 model.setDialogComponent(undefined, undefined);
-            } }))) : null,
-        model.annotPos ? (React.createElement(AnnotationDialog, { data: model.annotPos, model: model, onClose: function () { return model.clearAnnotPos(); } })) : null));
+            } })) : null,
+        model.annotPos ? (React.createElement(AnnotationDialog, { data: model.annotPos, model: model, onClose: () => model.clearAnnotPos() })) : null));
 });
+//# sourceMappingURL=MSAView.js.map

package/dist/components/MSAView.js.map

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

package/dist/components/MoreInfoDlg.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-declare const _default: ({ info, onClose }: {
-    info: any;
+declare const _default: ({ info, onClose, }: {
+    info: Record<string, unknown>;
     onClose: () => void;
 }) => JSX.Element;
 export default _default;

package/dist/components/MoreInfoDlg.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';
+import { Dialog } from '@jbrowse/core/ui';
+import { DialogContent } from '@mui/material';
 import { observer } from 'mobx-react';
 import { Attributes } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
-export default observer(function (_a) {
-    var info = _a.info, onClose = _a.onClose;
-    return (React.createElement(Dialog, { onClose: function () { return onClose(); }, open: true },
-        React.createElement(DialogTitle, null, "Metadata"),
+export default observer(function ({ info, onClose, }) {
+    return (React.createElement(Dialog, { onClose: () => onClose(), open: true, title: "Metadata" },
         React.createElement(DialogContent, null,
             React.createElement(Attributes, { attributes: info }))));
 });
+//# sourceMappingURL=MoreInfoDlg.js.map

package/dist/components/MoreInfoDlg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoreInfoDlg.js","sourceRoot":"","sources":["../../src/components/MoreInfoDlg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,mDAAmD,CAAA;AAE9E,eAAe,QAAQ,CAAC,UAAU,EAChC,IAAI,EACJ,OAAO,GAIR;IACC,OAAO,CACL,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,IAAI,QAAC,KAAK,EAAC,UAAU;QACrD,oBAAC,aAAa;YACZ,oBAAC,UAAU,IAAC,UAAU,EAAE,IAAI,GAAI,CAClB,CACT,CACV,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/components/ResizeHandles.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { MsaViewModel } from '../model';
-export declare const VerticalResizeHandle: ({ model }: {
+export declare const VerticalResizeHandle: ({ model, }: {
     model: MsaViewModel;
 }) => JSX.Element;
-export declare const HorizontalResizeHandle: ({ model }: {
+export declare const HorizontalResizeHandle: ({ model, }: {
     model: MsaViewModel;
 }) => JSX.Element;

package/dist/components/ResizeHandles.js

@@ -1,27 +1,26 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { observer } from 'mobx-react';
-export var VerticalResizeHandle = observer(function (_a) {
-    var model = _a.model;
-    var resizeHandleWidth = model.resizeHandleWidth;
-    var _b = useState(false), mouseDragging = _b[0], setMouseDragging = _b[1];
-    var scheduled = useRef(false);
-    var prevX = useRef(0);
-    useEffect(function () {
+export const VerticalResizeHandle = observer(function ({ model, }) {
+    const { resizeHandleWidth } = model;
+    const [mouseDragging, setMouseDragging] = useState(false);
+    const scheduled = useRef(false);
+    const prevX = useRef(0);
+    useEffect(() => {
         function globalMouseMove(event) {
             event.preventDefault();
-            var currX = event.clientX;
+            const currX = event.clientX;
             if (prevX.current === 0) {
                 prevX.current = event.clientX;
             }
             else {
-                var distance_1 = currX - prevX.current;
-                if (distance_1) {
+                const distance = currX - prevX.current;
+                if (distance) {
                     // use rAF to make it so multiple event handlers aren't fired per-frame
                     // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
                     if (!scheduled.current) {
                         scheduled.current = true;
-                        window.requestAnimationFrame(function () {
-                            model.setTreeAreaWidth(model.treeAreaWidth + distance_1);
+                        window.requestAnimationFrame(() => {
+                            model.setTreeAreaWidth(model.treeAreaWidth + distance);
                             scheduled.current = false;
                             prevX.current = event.clientX;
                         });
@@ -38,44 +37,43 @@ export var VerticalResizeHandle = observer(function (_a) {
         if (mouseDragging) {
             document.addEventListener('mousemove', globalMouseMove, true);
             document.addEventListener('mouseup', globalMouseUp, true);
-            return function () {
+            return () => {
                 document.removeEventListener('mousemove', globalMouseMove, true);
                 document.removeEventListener('mouseup', globalMouseUp, true);
             };
         }
-        return function () { };
+        return () => { };
     }, [mouseDragging, model]);
     return (React.createElement("div", null,
-        React.createElement("div", { onMouseDown: function () { return setMouseDragging(true); }, style: {
+        React.createElement("div", { onMouseDown: () => setMouseDragging(true), style: {
                 cursor: 'ew-resize',
                 height: '100%',
                 width: resizeHandleWidth,
-                background: "rgba(200,200,200)",
+                background: `rgba(200,200,200)`,
                 position: 'relative',
             } })));
 });
-export var HorizontalResizeHandle = observer(function (_a) {
-    var model = _a.model;
-    var resizeHandleWidth = model.resizeHandleWidth;
-    var _b = useState(false), mouseDragging = _b[0], setMouseDragging = _b[1];
-    var scheduled = useRef(false);
-    var prevY = useRef(0);
-    useEffect(function () {
+export const HorizontalResizeHandle = observer(function ({ model, }) {
+    const { resizeHandleWidth } = model;
+    const [mouseDragging, setMouseDragging] = useState(false);
+    const scheduled = useRef(false);
+    const prevY = useRef(0);
+    useEffect(() => {
         function globalMouseMove(event) {
             event.preventDefault();
-            var currY = event.clientY;
+            const currY = event.clientY;
             if (prevY.current === 0) {
                 prevY.current = event.clientY;
             }
             else {
-                var distance_2 = currY - prevY.current;
-                if (distance_2) {
+                const distance = currY - prevY.current;
+                if (distance) {
                     // use rAF to make it so multiple event handlers aren't fired per-frame
                     // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
                     if (!scheduled.current) {
                         scheduled.current = true;
-                        window.requestAnimationFrame(function () {
-                            model.setHeight(model.height + distance_2);
+                        window.requestAnimationFrame(() => {
+                            model.setHeight(model.height + distance);
                             scheduled.current = false;
                             prevY.current = event.clientY;
                         });
@@ -92,19 +90,20 @@ export var HorizontalResizeHandle = observer(function (_a) {
         if (mouseDragging) {
             document.addEventListener('mousemove', globalMouseMove, true);
             document.addEventListener('mouseup', globalMouseUp, true);
-            return function () {
+            return () => {
                 document.removeEventListener('mousemove', globalMouseMove, true);
                 document.removeEventListener('mouseup', globalMouseUp, true);
             };
         }
-        return function () { };
+        return () => { };
     }, [mouseDragging, model]);
     return (React.createElement("div", null,
-        React.createElement("div", { onMouseDown: function () { return setMouseDragging(true); }, style: {
+        React.createElement("div", { onMouseDown: () => setMouseDragging(true), style: {
                 cursor: 'ns-resize',
                 width: '100%',
                 height: resizeHandleWidth,
-                background: "rgba(200,200,200)",
+                background: `rgba(200,200,200)`,
                 position: 'relative',
             } })));
 });
+//# sourceMappingURL=ResizeHandles.js.map

package/dist/components/ResizeHandles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandles.js","sourceRoot":"","sources":["../../src/components/ResizeHandles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAKrC,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,UAAU,EACrD,KAAK,GAGN;IACC,MAAM,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAA;IACnC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzD,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC/B,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,eAAe,CAAC,KAAiB;YACxC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;YAC3B,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC,EAAE;gBACvB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;aAC9B;iBAAM;gBACL,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;gBACtC,IAAI,QAAQ,EAAE;oBACZ,uEAAuE;oBACvE,8EAA8E;oBAC9E,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;wBACtB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;wBACxB,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;4BAChC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAA;4BACtD,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;4BACzB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;wBAC/B,CAAC,CAAC,CAAA;qBACH;iBACF;aACF;QACH,CAAC;QAED,SAAS,aAAa;YACpB,KAAK,CAAC,OAAO,GAAG,CAAC,CAAA;YACjB,IAAI,aAAa,EAAE;gBACjB,gBAAgB,CAAC,KAAK,CAAC,CAAA;aACxB;QACH,CAAC;QACD,IAAI,aAAa,EAAE;YACjB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAA;YAC7D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,CAAA;YACzD,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAA;gBAChE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,CAAA;YAC9D,CAAC,CAAA;SACF;QACD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IAE1B,OAAO,CACL;QACE,6BACE,WAAW,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EACzC,KAAK,EAAE;gBACL,MAAM,EAAE,WAAW;gBACnB,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,iBAAiB;gBACxB,UAAU,EAAE,mBAAmB;gBAC/B,QAAQ,EAAE,UAAU;aACrB,GACD,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,QAAQ,CAAC,UAAU,EACvD,KAAK,GAGN;IACC,MAAM,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAA;IACnC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzD,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC/B,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,eAAe,CAAC,KAAiB;YACxC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;YAC3B,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC,EAAE;gBACvB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;aAC9B;iBAAM;gBACL,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;gBACtC,IAAI,QAAQ,EAAE;oBACZ,uEAAuE;oBACvE,8EAA8E;oBAC9E,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;wBACtB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;wBACxB,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;4BAChC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAA;4BACxC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;4BACzB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;wBAC/B,CAAC,CAAC,CAAA;qBACH;iBACF;aACF;QACH,CAAC;QAED,SAAS,aAAa;YACpB,KAAK,CAAC,OAAO,GAAG,CAAC,CAAA;YACjB,IAAI,aAAa,EAAE;gBACjB,gBAAgB,CAAC,KAAK,CAAC,CAAA;aACxB;QACH,CAAC;QACD,IAAI,aAAa,EAAE;YACjB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAA;YAC7D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,CAAA;YACzD,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAA;gBAChE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,CAAA;YAC9D,CAAC,CAAA;SACF;QACD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IAE1B,OAAO,CACL;QACE,6BACE,WAAW,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EACzC,KAAK,EAAE;gBACL,MAAM,EAAE,WAAW;gBACnB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,iBAAiB;gBACzB,UAAU,EAAE,mBAAmB;gBAC/B,QAAQ,EAAE,UAAU;aACrB,GACD,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/components/Rubberband.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { MsaViewModel } from '../model';
 declare function Rubberband({ model, ControlComponent, }: {
-    model: any;
+    model: MsaViewModel;
     ControlComponent?: React.ReactElement;
 }): JSX.Element;
 declare const _default: typeof Rubberband;