react-msaview 4.4.2 → 4.4.4

package/dist/components/MSAPanel/MSACanvas.js.map

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

package/dist/components/MSAPanel/MSAMouseoverCanvas.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+declare const MSAMouseoverCanvas: ({ model, }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default MSAMouseoverCanvas;

package/dist/components/MSAPanel/MSAMouseoverCanvas.js

@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from 'react';
+import { observer } from 'mobx-react';
+import { autorun } from 'mobx';
+import { renderMouseover } from './renderMSAMouseover';
+const MSAMouseoverCanvas = observer(function ({ model, }) {
+    const ref = useRef(null);
+    const { height, width } = model;
+    useEffect(() => {
+        const ctx = ref.current?.getContext('2d');
+        return ctx
+            ? autorun(() => {
+                renderMouseover({ ctx, model });
+            })
+            : undefined;
+    }, [model]);
+    return (React.createElement("canvas", { ref: ref, id: "mouseover", width: width, height: height, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width,
+            height,
+            zIndex: 1000,
+            pointerEvents: 'none',
+        } }));
+});
+export default MSAMouseoverCanvas;
+//# sourceMappingURL=MSAMouseoverCanvas.js.map

package/dist/components/MSAPanel/MSAMouseoverCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MSAMouseoverCanvas.js","sourceRoot":"","sources":["../../../src/components/MSAPanel/MSAMouseoverCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAA;AAI9B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,EAC5C,KAAK,GAGN;IACC,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAC3C,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAC/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;QACzC,OAAO,GAAG;YACR,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE;gBACX,eAAe,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAA;YACjC,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS,CAAA;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK;YACL,MAAM;YACN,MAAM,EAAE,IAAI;YACZ,aAAa,EAAE,MAAM;SACtB,GACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,kBAAkB,CAAA"}

package/dist/components/MSAPanel/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+export default function MSAPanel({ model }: {
+    model: MsaViewModel;
+}): React.JSX.Element;

package/dist/components/MSAPanel/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import MSACanvas from './MSACanvas';
+import MSAMouseoverCanvas from './MSAMouseoverCanvas';
+export default function MSAPanel({ model }) {
+    return (React.createElement("div", { style: { position: 'relative' } },
+        React.createElement(MSACanvas, { model: model }),
+        React.createElement(MSAMouseoverCanvas, { model: model })));
+}
+//# sourceMappingURL=index.js.map

package/dist/components/MSAPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MSAPanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AAGrD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAA2B;IACjE,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;QAClC,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI;QAC3B,oBAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI,CAChC,CACP,CAAA;AACH,CAAC"}

package/dist/components/MSAPanel/renderMSABlock.d.ts

@@ -0,0 +1,9 @@
+import { MsaViewModel } from '../../model';
+import { Theme } from '@mui/material';
+import { Application } from 'pixi.js';
+export declare function renderMSABlock({ model, app, contrastScheme, theme, }: {
+    theme: Theme;
+    model: MsaViewModel;
+    contrastScheme: Record<string, string>;
+    app: Application;
+}): void;

package/dist/components/MSAPanel/renderMSABlock.js

@@ -0,0 +1,89 @@
+import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes';
+import { BitmapText } from 'pixi.js';
+export function renderMSABlock({ model, app, contrastScheme, theme, }) {
+    const { hierarchy, msaAreaWidth, scrollX, scrollY, colWidth, blockSize, height, rowHeight, highResScaleFactor, } = model;
+    const offsetX = scrollX;
+    const offsetY = scrollY;
+    const k = highResScaleFactor;
+    const bx = msaAreaWidth;
+    const by = height;
+    const leaves = hierarchy.leaves();
+    const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight));
+    const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight));
+    const xStart = Math.max(0, Math.floor(offsetX / colWidth));
+    const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth));
+    const visibleLeaves = leaves.slice(yStart, yEnd);
+    drawTiles({
+        model,
+        app,
+        theme,
+        offsetX,
+        offsetY,
+        xStart,
+        xEnd,
+        visibleLeaves,
+    });
+    drawText({
+        model,
+        app,
+        offsetX,
+        contrastScheme,
+        theme,
+        xStart,
+        xEnd,
+        visibleLeaves,
+    });
+}
+function drawTiles({ model, offsetX, app, visibleLeaves, theme, xStart, xEnd, }) {
+    const { bgColor, colorSchemeName, colorScheme, colStats, columns, colWidth, rowHeight, } = model;
+    for (const node of visibleLeaves) {
+        const { 
+        // @ts-expect-error
+        x: y, data: { name }, } = node;
+        const str = columns[name]?.slice(xStart, xEnd);
+        for (let i = 0; i < 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) {
+                const x = i * colWidth + offsetX - (offsetX % colWidth);
+                // ctx.fillStyle = color || theme.palette.background.default
+                // ctx.fillRect(x, y - rowHeight, colWidth, rowHeight)
+            }
+        }
+    }
+}
+function drawText({ model, offsetX, contrastScheme, app, visibleLeaves, xStart, xEnd, }) {
+    const { bgColor, colorScheme, columns, colWidth, rowHeight } = model;
+    if (rowHeight >= 5 && colWidth > rowHeight / 2) {
+        for (const node of visibleLeaves) {
+            const { 
+            // @ts-expect-error
+            x: y, data: { name }, } = node;
+            const str = columns[name]?.slice(xStart, xEnd);
+            for (let i = 0; i < 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)
+                const t = new BitmapText({
+                    text: letter,
+                    x,
+                    y,
+                    style: {
+                        fontFamily: 'Arial',
+                        fontSize: 20,
+                    },
+                });
+                app.stage.addChild(t);
+            }
+        }
+    }
+}
+//# sourceMappingURL=renderMSABlock.js.map

package/dist/components/MSAPanel/renderMSABlock.js.map

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

package/dist/components/MSAPanel/renderMSABlock_BACKUP_139826.d.ts

@@ -0,0 +1,9 @@
+import { MsaViewModel } from '../../model';
+import { Theme } from '@mui/material';
+import { Application } from 'pixi.js';
+export declare function renderMSABlock({ model, app, contrastScheme, theme, }: {
+    theme: Theme;
+    model: MsaViewModel;
+    contrastScheme: Record<string, string>;
+    app: Application;
+}): void;

package/dist/components/MSAPanel/renderMSABlock_BACKUP_139826.js

@@ -0,0 +1,89 @@
+import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes';
+import { BitmapText } from 'pixi.js';
+export function renderMSABlock({ model, app, contrastScheme, theme, }) {
+    const { hierarchy, msaAreaWidth, scrollX, scrollY, colWidth, blockSize, height, rowHeight, highResScaleFactor, } = model;
+    const offsetX = scrollX;
+    const offsetY = scrollY;
+    const k = highResScaleFactor;
+    const bx = msaAreaWidth;
+    const by = height;
+    const leaves = hierarchy.leaves();
+    const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight));
+    const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight));
+    const xStart = Math.max(0, Math.floor(offsetX / colWidth));
+    const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth));
+    const visibleLeaves = leaves.slice(yStart, yEnd);
+    drawTiles({
+        model,
+        app,
+        theme,
+        offsetX,
+        offsetY,
+        xStart,
+        xEnd,
+        visibleLeaves,
+    });
+    drawText({
+        model,
+        app,
+        offsetX,
+        contrastScheme,
+        theme,
+        xStart,
+        xEnd,
+        visibleLeaves,
+    });
+}
+function drawTiles({ model, offsetX, app, visibleLeaves, theme, xStart, xEnd, }) {
+    const { bgColor, colorSchemeName, colorScheme, colStats, columns, colWidth, rowHeight, } = model;
+    for (const node of visibleLeaves) {
+        const { 
+        // @ts-expect-error
+        x: y, data: { name }, } = node;
+        const str = columns[name]?.slice(xStart, xEnd);
+        for (let i = 0; i < 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) {
+                const x = i * colWidth + offsetX - (offsetX % colWidth);
+                // ctx.fillStyle = color || theme.palette.background.default
+                // ctx.fillRect(x, y - rowHeight, colWidth, rowHeight)
+            }
+        }
+    }
+}
+function drawText({ model, offsetX, contrastScheme, app, visibleLeaves, xStart, xEnd, }) {
+    const { bgColor, colorScheme, columns, colWidth, rowHeight } = model;
+    if (rowHeight >= 5 && colWidth > rowHeight / 2) {
+        for (const node of visibleLeaves) {
+            const { 
+            // @ts-expect-error
+            x: y, data: { name }, } = node;
+            const str = columns[name]?.slice(xStart, xEnd);
+            for (let i = 0; i < 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)
+                const t = new BitmapText({
+                    text: letter,
+                    x,
+                    y,
+                    style: {
+                        fontFamily: 'Arial',
+                        fontSize: 20,
+                    },
+                });
+                app.stage.addChild(t);
+            }
+        }
+    }
+}
+//# sourceMappingURL=renderMSABlock_BACKUP_139826.js.map

package/dist/components/MSAPanel/renderMSABlock_BACKUP_139826.js.map

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

package/dist/components/MSAPanel/renderMSABlock_BASE_139826.d.ts

@@ -0,0 +1,13 @@
+import { MsaViewModel } from '../../model';
+import { Theme } from '@mui/material';
+export declare function renderMSABlock({ model, offsetX, offsetY, contrastScheme, ctx, theme, highResScaleFactorOverride, blockSizeXOverride, blockSizeYOverride, }: {
+    offsetX: number;
+    offsetY: number;
+    theme: Theme;
+    model: MsaViewModel;
+    contrastScheme: Record<string, string>;
+    ctx: CanvasRenderingContext2D;
+    highResScaleFactorOverride?: number;
+    blockSizeXOverride?: number;
+    blockSizeYOverride?: number;
+}): void;

package/dist/components/MSAPanel/renderMSABlock_BASE_139826.js

@@ -0,0 +1,82 @@
+import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes';
+export function renderMSABlock({ model, offsetX, offsetY, contrastScheme, ctx, theme, highResScaleFactorOverride, blockSizeXOverride, blockSizeYOverride, }) {
+    const { hierarchy, colWidth, blockSize, rowHeight, fontSize, highResScaleFactor, } = model;
+    const k = highResScaleFactorOverride || highResScaleFactor;
+    const bx = blockSizeXOverride || blockSize;
+    const by = blockSizeYOverride || blockSize;
+    ctx.resetTransform();
+    ctx.scale(k, k);
+    ctx.clearRect(0, 0, bx, by);
+    ctx.translate(-offsetX, rowHeight / 2 - offsetY);
+    ctx.textAlign = 'center';
+    ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`);
+    const leaves = hierarchy.leaves();
+    const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight));
+    const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight));
+    const xStart = Math.max(0, Math.floor(offsetX / colWidth));
+    const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth));
+    const visibleLeaves = leaves.slice(yStart, yEnd);
+    drawTiles({
+        model,
+        ctx,
+        theme,
+        offsetX,
+        offsetY,
+        xStart,
+        xEnd,
+        visibleLeaves,
+    });
+    drawText({
+        model,
+        ctx,
+        offsetX,
+        contrastScheme,
+        theme,
+        xStart,
+        xEnd,
+        visibleLeaves,
+    });
+}
+function drawTiles({ model, offsetX, ctx, visibleLeaves, theme, xStart, xEnd, }) {
+    const { bgColor, colorSchemeName, colorScheme, colStats, columns, colWidth, rowHeight, } = model;
+    for (const node of visibleLeaves) {
+        const { 
+        // @ts-expect-error
+        x: y, data: { name }, } = node;
+        const str = columns[name]?.slice(xStart, xEnd);
+        for (let i = 0; i < 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) {
+                const x = i * colWidth + offsetX - (offsetX % colWidth);
+                ctx.fillStyle = color || theme.palette.background.default;
+                ctx.fillRect(x, y - rowHeight, colWidth, rowHeight);
+            }
+        }
+    }
+}
+function drawText({ model, offsetX, contrastScheme, ctx, visibleLeaves, xStart, xEnd, }) {
+    const { bgColor, colorScheme, columns, colWidth, rowHeight } = model;
+    if (rowHeight >= 5 && colWidth > rowHeight / 2) {
+        for (const node of visibleLeaves) {
+            const { 
+            // @ts-expect-error
+            x: y, data: { name }, } = node;
+            const str = columns[name]?.slice(xStart, xEnd);
+            for (let i = 0; i < 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);
+            }
+        }
+    }
+}
+//# sourceMappingURL=renderMSABlock_BASE_139826.js.map

package/dist/components/MSAPanel/renderMSABlock_BASE_139826.js.map

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

package/dist/components/MSAPanel/renderMSABlock_LOCAL_139826.d.ts

@@ -0,0 +1,9 @@
+import { MsaViewModel } from '../../model';
+import { Theme } from '@mui/material';
+import { Application } from 'pixi.js';
+export declare function renderMSABlock({ model, app, contrastScheme, theme, }: {
+    theme: Theme;
+    model: MsaViewModel;
+    contrastScheme: Record<string, string>;
+    app: Application;
+}): void;

package/dist/components/MSAPanel/renderMSABlock_LOCAL_139826.js

@@ -0,0 +1,89 @@
+import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes';
+import { BitmapText } from 'pixi.js';
+export function renderMSABlock({ model, app, contrastScheme, theme, }) {
+    const { hierarchy, msaAreaWidth, scrollX, scrollY, colWidth, blockSize, height, rowHeight, highResScaleFactor, } = model;
+    const offsetX = scrollX;
+    const offsetY = scrollY;
+    const k = highResScaleFactor;
+    const bx = msaAreaWidth;
+    const by = height;
+    const leaves = hierarchy.leaves();
+    const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight));
+    const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight));
+    const xStart = Math.max(0, Math.floor(offsetX / colWidth));
+    const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth));
+    const visibleLeaves = leaves.slice(yStart, yEnd);
+    drawTiles({
+        model,
+        app,
+        theme,
+        offsetX,
+        offsetY,
+        xStart,
+        xEnd,
+        visibleLeaves,
+    });
+    drawText({
+        model,
+        app,
+        offsetX,
+        contrastScheme,
+        theme,
+        xStart,
+        xEnd,
+        visibleLeaves,
+    });
+}
+function drawTiles({ model, offsetX, app, visibleLeaves, theme, xStart, xEnd, }) {
+    const { bgColor, colorSchemeName, colorScheme, colStats, columns, colWidth, rowHeight, } = model;
+    for (const node of visibleLeaves) {
+        const { 
+        // @ts-expect-error
+        x: y, data: { name }, } = node;
+        const str = columns[name]?.slice(xStart, xEnd);
+        for (let i = 0; i < 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) {
+                const x = i * colWidth + offsetX - (offsetX % colWidth);
+                // ctx.fillStyle = color || theme.palette.background.default
+                // ctx.fillRect(x, y - rowHeight, colWidth, rowHeight)
+            }
+        }
+    }
+}
+function drawText({ model, offsetX, contrastScheme, app, visibleLeaves, xStart, xEnd, }) {
+    const { bgColor, colorScheme, columns, colWidth, rowHeight } = model;
+    if (rowHeight >= 5 && colWidth > rowHeight / 2) {
+        for (const node of visibleLeaves) {
+            const { 
+            // @ts-expect-error
+            x: y, data: { name }, } = node;
+            const str = columns[name]?.slice(xStart, xEnd);
+            for (let i = 0; i < 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)
+                const t = new BitmapText({
+                    text: letter,
+                    x,
+                    y,
+                    style: {
+                        fontFamily: 'Arial',
+                        fontSize: 20,
+                    },
+                });
+                app.stage.addChild(t);
+            }
+        }
+    }
+}
+//# sourceMappingURL=renderMSABlock_LOCAL_139826.js.map

package/dist/components/MSAPanel/renderMSABlock_LOCAL_139826.js.map

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

package/dist/components/MSAPanel/renderMSABlock_REMOTE_139826.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=renderMSABlock_REMOTE_139826.js.map

package/dist/components/MSAPanel/renderMSABlock_REMOTE_139826.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderMSABlock_REMOTE_139826.js","sourceRoot":"","sources":["../../../src/components/MSAPanel/renderMSABlock_REMOTE_139826.ts"],"names":[],"mappings":""}

package/dist/components/MSAPanel/renderMSAMouseover.d.ts

@@ -0,0 +1,5 @@
+import { MsaViewModel } from '../../model';
+export declare function renderMouseover({ ctx, model, }: {
+    ctx: CanvasRenderingContext2D;
+    model: MsaViewModel;
+}): void;

package/dist/components/MSAPanel/renderMSAMouseover.js

@@ -0,0 +1,30 @@
+const hoverColor = 'rgba(0,0,0,0.15)';
+const highlightColor = 'rgba(128,128,0,0.2)';
+export function renderMouseover({ ctx, model, }) {
+    const { mouseCol, colWidth, width, height, rowHeight, scrollX, scrollY, mouseRow, 
+    // @ts-expect-error
+    mouseCol2, mouseClickRow, mouseClickCol, } = model;
+    ctx.resetTransform();
+    ctx.clearRect(0, 0, width, height);
+    if (mouseCol !== undefined) {
+        ctx.fillStyle = hoverColor;
+        ctx.fillRect((mouseCol - 1) * colWidth + scrollX, 0, colWidth, height);
+    }
+    if (mouseRow !== undefined) {
+        ctx.fillStyle = hoverColor;
+        ctx.fillRect(0, mouseRow * rowHeight + scrollY, width, rowHeight);
+    }
+    if (mouseClickCol !== undefined) {
+        ctx.fillStyle = highlightColor;
+        ctx.fillRect((mouseClickCol - 1) * colWidth + scrollX, 0, colWidth, height);
+    }
+    if (mouseClickRow !== undefined) {
+        ctx.fillStyle = highlightColor;
+        ctx.fillRect(0, mouseClickRow * rowHeight + scrollY, width, rowHeight);
+    }
+    if (mouseCol2 !== undefined) {
+        ctx.fillStyle = highlightColor;
+        ctx.fillRect((mouseCol2 - 1) * colWidth + scrollX, 0, colWidth, height);
+    }
+}
+//# sourceMappingURL=renderMSAMouseover.js.map

package/dist/components/MSAPanel/renderMSAMouseover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderMSAMouseover.js","sourceRoot":"","sources":["../../../src/components/MSAPanel/renderMSAMouseover.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,GAAG,kBAAkB,CAAA;AACrC,MAAM,cAAc,GAAG,qBAAqB,CAAA;AAE5C,MAAM,UAAU,eAAe,CAAC,EAC9B,GAAG,EACH,KAAK,GAIN;IACC,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,EACT,OAAO,EACP,OAAO,EACP,QAAQ;IACR,mBAAmB;IACnB,SAAS,EACT,aAAa,EACb,aAAa,GACd,GAAG,KAAK,CAAA;IACT,GAAG,CAAC,cAAc,EAAE,CAAA;IACpB,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;IAClC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,GAAG,CAAC,SAAS,GAAG,UAAU,CAAA;QAC1B,GAAG,CAAC,QAAQ,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;IACxE,CAAC;IACD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,GAAG,CAAC,SAAS,GAAG,UAAU,CAAA;QAC1B,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC,CAAA;IACnE,CAAC;IACD,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;QAChC,GAAG,CAAC,SAAS,GAAG,cAAc,CAAA;QAC9B,GAAG,CAAC,QAAQ,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC7E,CAAC;IACD,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;QAChC,GAAG,CAAC,SAAS,GAAG,cAAc,CAAA;QAC9B,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC,CAAA;IACxE,CAAC;IACD,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC5B,GAAG,CAAC,SAAS,GAAG,cAAc,CAAA;QAC9B,GAAG,CAAC,QAAQ,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;IACzE,CAAC;AACH,CAAC"}

package/dist/components/Minimap.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../model';
+declare const Minimap: ({ model }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default Minimap;

package/dist/components/Minimap.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { observer } from 'mobx-react';
+const Minimap = observer(function ({ model }) {
+    const [mouseDown, setMouseDown] = useState();
+    const scheduled = useRef(false);
+    const [hovered, setHovered] = useState(false);
+    const { scrollX, msaAreaWidth: W, minimapHeight: H, colWidth, numColumns, } = model;
+    const unit = W / numColumns / colWidth;
+    const left = -scrollX;
+    const right = left + W;
+    const s = left * unit;
+    const e = right * unit;
+    const fill = 'rgba(66, 119, 127, 0.3)';
+    useEffect(() => {
+        function fn(event) {
+            if (mouseDown !== undefined) {
+                if (!scheduled.current) {
+                    scheduled.current = true;
+                    window.requestAnimationFrame(() => {
+                        model.setScrollX(mouseDown.scrollX - (event.clientX - mouseDown.clientX) / unit);
+                        scheduled.current = false;
+                    });
+                }
+            }
+        }
+        function fn2() {
+            setMouseDown(undefined);
+        }
+        if (mouseDown !== undefined) {
+            document.addEventListener('mousemove', fn);
+            document.addEventListener('mouseup', fn2);
+            return () => {
+                document.removeEventListener('mousemove', fn);
+                document.removeEventListener('mousemove', fn2);
+            };
+        }
+    }, [model, unit, mouseDown]);
+    const BAR_HEIGHT = 12;
+    const H2 = H - 12;
+    return (React.createElement("div", { style: { position: 'relative', height: H, width: '100%' } },
+        React.createElement("div", { style: {
+                boxSizing: 'border-box',
+                height: BAR_HEIGHT,
+                border: '1px solid #555',
+            } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                top: 0,
+                left: Math.max(0, s),
+                background: hovered ? 'rgba(66,119,127,0.6)' : fill,
+                cursor: 'pointer',
+                border: '1px solid #555',
+                boxSizing: 'border-box',
+                height: BAR_HEIGHT,
+                width: e - s,
+                zIndex: 100,
+            }, onMouseOver: () => setHovered(true), onMouseOut: () => setHovered(false), onMouseDown: event => {
+                setMouseDown({
+                    clientX: event.clientX,
+                    scrollX: model.scrollX,
+                });
+            } }),
+        React.createElement("svg", { height: H2, style: { width: '100%' } },
+            React.createElement("polygon", { fill: fill, points: [
+                    [e, 0],
+                    [s, 0],
+                    [0, H2],
+                    [W, H2],
+                ].toString() }))));
+});
+export default Minimap;
+//# sourceMappingURL=Minimap.js.map