react-msaview 1.3.2 → 2.1.0

package/dist/components/TreeBranchMenu.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MsaViewModel } from '../model';
+interface Node {
+    x: number;
+    y: number;
+    name: string;
+    id: string;
+}
+declare const TreeBranchMenu: ({ node, model, onClose, }: {
+    node: Node;
+    model: MsaViewModel;
+    onClose: () => void;
+}) => React.JSX.Element;
+export default TreeBranchMenu;

package/dist/components/TreeBranchMenu.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Menu, MenuItem } from '@mui/material';
+import { observer } from 'mobx-react';
+const TreeBranchMenu = observer(function ({ node, model, onClose, }) {
+    return (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+            left: node.x,
+            top: node.y,
+        }, transitionDuration: 0, keepMounted: true, open: Boolean(node), onClose: onClose },
+        React.createElement(MenuItem, { dense: true, disabled: true }, node.name),
+        React.createElement(MenuItem, { dense: true, onClick: () => {
+                model.toggleCollapsed(node.id);
+                onClose();
+            } }, model.collapsed.includes(node.id)
+            ? 'Expand this node'
+            : 'Collapse this node'),
+        React.createElement(MenuItem, { dense: true, onClick: () => {
+                model.showOnly === node.id
+                    ? model.setShowOnly(undefined)
+                    : model.setShowOnly(node.id);
+                onClose();
+            } }, model.showOnly === node.id
+            ? 'Disable show only this node'
+            : 'Show only this node')));
+});
+export default TreeBranchMenu;
+//# sourceMappingURL=TreeBranchMenu.js.map

package/dist/components/TreeBranchMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeBranchMenu.js","sourceRoot":"","sources":["../../src/components/TreeBranchMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAYrC,MAAM,cAAc,GAAG,QAAQ,CAAC,UAAU,EACxC,IAAI,EACJ,KAAK,EACL,OAAO,GAKR;IACC,OAAO,CACL,oBAAC,IAAI,IACH,eAAe,EAAC,gBAAgB,EAChC,cAAc,EAAE;YACd,IAAI,EAAE,IAAI,CAAC,CAAC;YACZ,GAAG,EAAE,IAAI,CAAC,CAAC;SACZ,EACD,kBAAkB,EAAE,CAAC,EACrB,WAAW,QACX,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,EACnB,OAAO,EAAE,OAAO;QAEhB,oBAAC,QAAQ,IAAC,KAAK,QAAC,QAAQ,UACrB,IAAI,CAAC,IAAI,CACD;QACX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;gBAC9B,OAAO,EAAE,CAAA;YACX,CAAC,IAEA,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,CAAC,CAAC,kBAAkB;YACpB,CAAC,CAAC,oBAAoB,CACf;QACX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,EAAE;oBACxB,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC;oBAC9B,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;gBAC9B,OAAO,EAAE,CAAA;YACX,CAAC,IAEA,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,EAAE;YACzB,CAAC,CAAC,6BAA6B;YAC/B,CAAC,CAAC,qBAAqB,CAChB,CACN,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,cAAc,CAAA"}

package/dist/components/TreeCanvas.d.ts

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

package/dist/components/TreeCanvas.js

@@ -1,359 +1,26 @@
-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, { useEffect, useRef, useState } from 'react';
-import { Menu, MenuItem } from '@material-ui/core';
 import normalizeWheel from 'normalize-wheel';
 import { observer } from 'mobx-react';
-import RBush from 'rbush';
-import MoreInfoDlg from './MoreInfoDlg';
-var extendBounds = 5;
-var radius = 3.5;
-var d = radius * 2;
-var padding = 600;
-var TreeMenu = observer(function (_a) {
-    var _b, _c;
-    var node = _a.node, onClose = _a.onClose, model = _a.model;
-    var structures = model.structures;
-    var nodeDetails = node ? model.getRowDetails(node.name) : undefined;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-                top: node.y,
-                left: node.x,
-            }, transitionDuration: 0, keepMounted: true, open: Boolean(node), onClose: onClose },
-            React.createElement(MenuItem, { dense: true, disabled: true }, node.name),
-            React.createElement(MenuItem, { dense: true, onClick: function () {
-                    model.setDialogComponent(MoreInfoDlg, {
-                        info: model.getRowDetails(node.name),
-                    });
-                    onClose();
-                } }, "More info..."), (_b = structures[node.name]) === null || _b === void 0 ? void 0 :
-            _b.map(function (entry) {
-                return !model.selectedStructures.find(function (n) { return n.id === node.name; }) ? (React.createElement(MenuItem, { key: JSON.stringify(entry), dense: true, onClick: function () {
-                        model.addStructureToSelection({
-                            structure: entry,
-                            id: node.name,
-                        });
-                        onClose();
-                    } },
-                    "Add PDB to selection (",
-                    entry.pdb,
-                    ")")) : (React.createElement(MenuItem, { key: JSON.stringify(entry), dense: true, onClick: function () {
-                        model.removeStructureFromSelection({
-                            structure: entry,
-                            id: node.name,
-                        });
-                        onClose();
-                    } },
-                    "Remove PDB from selection (",
-                    entry.pdb,
-                    ")"));
-            }), (_c = nodeDetails.accession) === null || _c === void 0 ? void 0 :
-            _c.map(function (accession) { return (React.createElement(MenuItem, { dense: true, key: accession, onClick: function () {
-                    model.addUniprotTrack({ name: nodeDetails.name, accession: accession });
-                    onClose();
-                } },
-                "Open UniProt track (",
-                accession,
-                ")")); }))));
-});
-var TreeBranchMenu = observer(function (_a) {
-    var node = _a.node, model = _a.model, onClose = _a.onClose;
-    return (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-            left: node.x,
-            top: node.y,
-        }, transitionDuration: 0, keepMounted: true, open: Boolean(node), onClose: onClose },
-        React.createElement(MenuItem, { dense: true, disabled: true }, node.name),
-        React.createElement(MenuItem, { dense: true, onClick: function () {
-                model.toggleCollapsed(node.id);
-                onClose();
-            } }, model.collapsed.includes(node.id)
-            ? 'Expand this node'
-            : 'Collapse this node'),
-        React.createElement(MenuItem, { dense: true, onClick: function () {
-                model.showOnly === node.id
-                    ? model.setShowOnly(undefined)
-                    : model.setShowOnly(node.id);
-                onClose();
-            } }, model.showOnly === node.id
-            ? 'Disable show only this node'
-            : 'Show only this node')));
-});
-var TreeBlock = observer(function (_a) {
-    var model = _a.model, offsetY = _a.offsetY;
-    var ref = useRef(null);
-    var clickMap = useRef(new RBush());
-    var mouseoverRef = useRef(null);
-    var _b = useState(), branchMenu = _b[0], setBranchMenu = _b[1];
-    var _c = useState(), toggleNodeMenu = _c[0], setToggleNodeMenu = _c[1];
-    var _d = useState(), hoverElt = _d[0], setHoverElt = _d[1];
-    var hierarchy = model.hierarchy, rowHeight = model.rowHeight, scrollY = model.scrollY, treeWidth = model.treeWidth, showBranchLen = model.showBranchLen, collapsed = model.collapsed, margin = model.margin, labelsAlignRight = model.labelsAlignRight, noTree = model.noTree, blockSize = model.blockSize, drawNodeBubbles = model.drawNodeBubbles, drawTree = model.drawTree, treeAreaWidth = model.treeAreaWidth, structures = model.structures, highResScaleFactor = model.highResScaleFactor;
-    useEffect(function () {
-        clickMap.current.clear();
-        if (!ref.current) {
-            return;
-        }
-        var ctx = ref.current.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        ctx.resetTransform();
-        ctx.scale(highResScaleFactor, highResScaleFactor);
-        ctx.clearRect(0, 0, treeWidth + padding, blockSize);
-        ctx.translate(margin.left, -offsetY);
-        var font = ctx.font;
-        ctx.font = font.replace(/\d+px/, "".concat(Math.max(8, rowHeight - 8), "px"));
-        if (!noTree && drawTree) {
-            hierarchy.links().forEach(function (_a) {
-                var source = _a.source, target = _a.target;
-                var y = showBranchLen ? 'len' : 'y';
-                //@ts-ignore
-                var _b = source, sy = _b.x, _c = y, sx = _b[_c];
-                //@ts-ignore
-                var _d = target, ty = _d.x, _e = y, tx = _d[_e];
-                var y1 = Math.min(sy, ty);
-                var y2 = Math.max(sy, ty);
-                //1d line intersection to check if line crosses block at all, this is
-                //an optimization that allows us to skip drawing most tree links
-                //outside the block
-                if (offsetY + blockSize >= y1 && y2 >= offsetY) {
-                    ctx.beginPath();
-                    ctx.moveTo(sx, sy);
-                    ctx.lineTo(sx, ty);
-                    ctx.lineTo(tx, ty);
-                    ctx.stroke();
-                }
-            });
-            if (drawNodeBubbles) {
-                hierarchy.descendants().forEach(function (node) {
-                    var val = showBranchLen ? 'len' : 'y';
-                    var _a = node, 
-                    //@ts-ignore
-                    y = _a.x, 
-                    //@ts-ignore
-                    _b = val, 
-                    //@ts-ignore
-                    x = _a[_b], data = _a.data;
-                    var _c = data.id, id = _c === void 0 ? '' : _c, _d = data.name, name = _d === void 0 ? '' : _d;
-                    if (y > offsetY - extendBounds &&
-                        y < offsetY + blockSize + extendBounds) {
-                        ctx.strokeStyle = 'black';
-                        ctx.fillStyle = collapsed.includes(id) ? 'black' : 'white';
-                        ctx.beginPath();
-                        ctx.arc(x, y, radius, 0, 2 * Math.PI);
-                        ctx.fill();
-                        ctx.stroke();
-                        clickMap.current.insert({
-                            minX: x - radius,
-                            maxX: x - radius + d,
-                            minY: y - radius,
-                            maxY: y - radius + d,
-                            branch: true,
-                            id: id,
-                            name: name,
-                        });
-                    }
-                });
-            }
-        }
-        if (rowHeight >= 10) {
-            if (labelsAlignRight) {
-                ctx.textAlign = 'right';
-                ctx.setLineDash([1, 3]);
-            }
-            else {
-                ctx.textAlign = 'start';
-            }
-            hierarchy.leaves().forEach(function (node) {
-                var 
-                //@ts-ignore
-                y = node.x, 
-                //@ts-ignore
-                x = node.y, _a = node.data, name = _a.name, id = _a.id, 
-                //@ts-ignore
-                len = node.len;
-                if (y > offsetY - extendBounds &&
-                    y < offsetY + blockSize + extendBounds) {
-                    //note: +rowHeight/4 matches with -rowHeight/4 in msa
-                    var yp = y + rowHeight / 4;
-                    var xp = showBranchLen ? len : x;
-                    var width = ctx.measureText(name).width;
-                    var height = ctx.measureText('M').width; // use an 'em' for height
-                    var hasStructure = structures[name];
-                    ctx.fillStyle = hasStructure ? 'blue' : 'black';
-                    if (!drawTree && !labelsAlignRight) {
-                        ctx.fillText(name, 0, yp);
-                        clickMap.current.insert({
-                            minX: 0,
-                            maxX: width,
-                            minY: yp - height,
-                            maxY: yp,
-                            name: name,
-                            id: id,
-                        });
-                    }
-                    else if (labelsAlignRight) {
-                        var smallPadding = 2;
-                        var offset = treeAreaWidth - smallPadding - margin.left;
-                        if (drawTree && !noTree) {
-                            var width_1 = ctx.measureText(name).width;
-                            ctx.moveTo(xp + radius + 2, y);
-                            ctx.lineTo(offset - smallPadding - width_1, y);
-                            ctx.stroke();
-                        }
-                        ctx.fillText(name, offset, yp);
-                        clickMap.current.insert({
-                            minX: treeAreaWidth - margin.left - width,
-                            maxX: treeAreaWidth - margin.left,
-                            minY: yp - height,
-                            maxY: yp,
-                            name: name,
-                            id: id,
-                        });
-                    }
-                    else {
-                        ctx.fillText(name, xp + d, yp);
-                        clickMap.current.insert({
-                            minX: xp + d,
-                            maxX: xp + d + width,
-                            minY: yp - height,
-                            maxY: yp,
-                            name: name,
-                            id: id,
-                        });
-                    }
-                }
-            });
-            ctx.setLineDash([]);
-        }
-    }, [
-        collapsed,
-        rowHeight,
-        margin.left,
-        hierarchy,
-        offsetY,
-        treeWidth,
-        showBranchLen,
-        noTree,
-        blockSize,
-        drawNodeBubbles,
-        drawTree,
-        labelsAlignRight,
-        treeAreaWidth,
-        structures,
-        highResScaleFactor,
-    ]);
-    useEffect(function () {
-        var canvas = mouseoverRef.current;
-        if (!canvas) {
-            return;
-        }
-        var ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        ctx.resetTransform();
-        ctx.clearRect(0, 0, treeWidth + padding, blockSize);
-        ctx.translate(margin.left, -offsetY);
-        if (hoverElt) {
-            var minX = hoverElt.minX, maxX = hoverElt.maxX, minY = hoverElt.minY, maxY = hoverElt.maxY;
-            ctx.fillStyle = 'rgba(0,0,0,0.1)';
-            ctx.fillRect(minX, minY, maxX - minX, maxY - minY);
-        }
-    }, [hoverElt, margin.left, offsetY, blockSize, treeWidth]);
-    function hoverBranchClickMap(event) {
-        var x = event.nativeEvent.offsetX - margin.left;
-        var y = event.nativeEvent.offsetY;
-        var entry = clickMap.current.search({
-            minX: x,
-            maxX: x + 1,
-            minY: y + offsetY,
-            maxY: y + 1 + offsetY,
-        })[0];
-        return entry && entry.branch
-            ? __assign(__assign({}, entry), { x: event.clientX, y: event.clientY }) : undefined;
-    }
-    function hoverNameClickMap(event) {
-        var x = event.nativeEvent.offsetX - margin.left;
-        var y = event.nativeEvent.offsetY;
-        var entry = clickMap.current.search({
-            minX: x,
-            maxX: x + 1,
-            minY: y + offsetY,
-            maxY: y + 1 + offsetY,
-        })[0];
-        return entry && !entry.branch
-            ? __assign(__assign({}, entry), { x: event.clientX, y: event.clientY }) : undefined;
-    }
-    return (React.createElement(React.Fragment, null,
-        (branchMenu === null || branchMenu === void 0 ? void 0 : branchMenu.id) ? (React.createElement(TreeBranchMenu, { node: branchMenu, model: model, onClose: function () { return setBranchMenu(undefined); } })) : null,
-        (toggleNodeMenu === null || toggleNodeMenu === void 0 ? void 0 : toggleNodeMenu.id) ? (React.createElement(TreeMenu, { node: toggleNodeMenu, model: model, onClose: function () { return setToggleNodeMenu(undefined); } })) : null,
-        React.createElement("canvas", { width: (treeWidth + padding) * highResScaleFactor, height: blockSize * highResScaleFactor, style: {
-                width: treeWidth + padding,
-                height: blockSize,
-                top: scrollY + offsetY,
-                left: 0,
-                position: 'absolute',
-            }, onMouseMove: function (event) {
-                if (!ref.current) {
-                    return;
-                }
-                var ret = hoverNameClickMap(event) || hoverBranchClickMap(event);
-                if (ret) {
-                    ref.current.style.cursor = 'pointer';
-                }
-                else {
-                    ref.current.style.cursor = 'default';
-                }
-                setHoverElt(hoverNameClickMap(event));
-            }, onClick: function (event) {
-                var x = event.clientX, y = event.clientY;
-                var data = hoverBranchClickMap(event);
-                if (data === null || data === void 0 ? void 0 : data.id) {
-                    setBranchMenu(__assign(__assign({}, data), { x: x, y: y }));
-                }
-                var data2 = hoverNameClickMap(event);
-                if (data2 === null || data2 === void 0 ? void 0 : data2.id) {
-                    setToggleNodeMenu(__assign(__assign({}, data2), { x: x, y: y }));
-                }
-            }, ref: ref }),
-        React.createElement("canvas", { style: {
-                width: treeWidth + padding,
-                height: blockSize,
-                top: scrollY + offsetY,
-                left: 0,
-                position: 'absolute',
-                pointerEvents: 'none',
-                zIndex: 100,
-            }, width: treeWidth + padding, height: blockSize, ref: mouseoverRef })));
-});
-var TreeCanvas = observer(function (_a) {
-    var model = _a.model;
-    var ref = useRef(null);
-    var scheduled = useRef(false);
-    var deltaY = useRef(0);
-    var prevY = useRef(0);
-    var treeWidth = model.treeWidth, height = model.height, blocksY = model.blocksY;
-    var _b = useState(false), mouseDragging = _b[0], setMouseDragging = _b[1];
-    useEffect(function () {
-        var curr = ref.current;
+import TreeCanvasBlock from './TreeCanvasBlock';
+const padding = 600;
+const TreeCanvas = observer(function ({ model }) {
+    const ref = useRef(null);
+    const scheduled = useRef(false);
+    const deltaY = useRef(0);
+    const prevY = useRef(0);
+    const { treeWidth, height, blocksY } = model;
+    const [mouseDragging, setMouseDragging] = useState(false);
+    useEffect(() => {
+        const curr = ref.current;
         if (!curr) {
             return;
         }
         function onWheel(origEvent) {
-            var event = normalizeWheel(origEvent);
+            const event = normalizeWheel(origEvent);
             deltaY.current += event.pixelY;
             if (!scheduled.current) {
                 scheduled.current = true;
-                requestAnimationFrame(function () {
+                requestAnimationFrame(() => {
                     model.doScrollY(-deltaY.current);
                     deltaY.current = 0;
                     scheduled.current = false;
@@ -362,22 +29,22 @@ var TreeCanvas = 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 currY = event.clientY;
-            var distanceY = currY - prevY.current;
+            const currY = event.clientY;
+            const distanceY = currY - prevY.current;
             if (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.doScrollY(distanceY);
                         scheduled.current = false;
                         prevY.current = event.clientY;
@@ -394,7 +61,7 @@ var TreeCanvas = 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);
             };
@@ -403,7 +70,7 @@ var TreeCanvas = observer(function (_a) {
     }, [model, mouseDragging]);
     function mouseDown(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;
         }
@@ -423,10 +90,11 @@ var TreeCanvas = observer(function (_a) {
         event.preventDefault();
     }
     return (React.createElement("div", { ref: ref, onMouseDown: mouseDown, onMouseUp: mouseUp, onMouseLeave: mouseLeave, style: {
-            height: height,
+            height,
             position: 'relative',
             overflow: 'hidden',
             width: treeWidth + padding,
-        } }, blocksY.map(function (block) { return (React.createElement(TreeBlock, { key: block, model: model, offsetY: block })); })));
+        } }, blocksY.map(block => (React.createElement(TreeCanvasBlock, { key: block, model: model, offsetY: block })))));
 });
 export default TreeCanvas;
+//# sourceMappingURL=TreeCanvas.js.map

package/dist/components/TreeCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeCanvas.js","sourceRoot":"","sources":["../../src/components/TreeCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,cAAc,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAE/C,MAAM,OAAO,GAAG,GAAG,CAAA;AAEnB,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACtE,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IACxB,MAAM,KAAK,GAAG,MAAM,CAAS,CAAC,CAAC,CAAA;IAC/B,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAC5C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAA;QACxB,IAAI,CAAC,IAAI,EAAE;YACT,OAAM;SACP;QACD,SAAS,OAAO,CAAC,SAAqB;YACpC,MAAM,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;YACvC,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAA;YAE9B,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;gBACtB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;gBACxB,qBAAqB,CAAC,GAAG,EAAE;oBACzB,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;oBAChC,MAAM,CAAC,OAAO,GAAG,CAAC,CAAA;oBAClB,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;gBAC3B,CAAC,CAAC,CAAA;aACH;YACD,SAAS,CAAC,cAAc,EAAE,CAAA;QAC5B,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QACvC,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAC5C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;QAEtB,SAAS,eAAe,CAAC,KAAiB;YACxC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;YAC3B,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;YACvC,IAAI,SAAS,EAAE;gBACb,uEAAuE;gBACvE,8EAA8E;gBAC9E,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;oBACtB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;oBACxB,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;wBAChC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;wBAC1B,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;wBACzB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;oBAC/B,CAAC,CAAC,CAAA;iBACH;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;QAED,IAAI,aAAa,EAAE;YACjB,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAA;YAC3D,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,CAAA;YACvD,OAAO,GAAG,GAAG,EAAE;gBACb,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAA;gBAC9D,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,CAAA;YAC5D,CAAC,CAAA;SACF;QACD,OAAO,OAAO,CAAA;IAChB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAA;IAE1B,SAAS,SAAS,CAAC,KAAuB;QACxC,2DAA2D;QAC3D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAA;QAC1C,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE;YAC9C,OAAM;SACP;QAED,qCAAqC;QACrC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACtB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;YAC7B,gBAAgB,CAAC,IAAI,CAAC,CAAA;SACvB;IACH,CAAC;IAED,yEAAyE;IACzE,wEAAwE;IACxE,SAAS,OAAO,CAAC,KAAuB;QACtC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,gBAAgB,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,SAAS,UAAU,CAAC,KAAuB;QACzC,KAAK,CAAC,cAAc,EAAE,CAAA;IACxB,CAAC;IAED,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,UAAU,EACxB,KAAK,EAAE;YACL,MAAM;YACN,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,SAAS,GAAG,OAAO;SAC3B,IAEA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpB,oBAAC,eAAe,IAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,GAAI,CAC9D,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/components/TreeCanvasBlock.d.ts

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