@jbrowse/plugin-linear-genome-view 2.6.3 → 2.7.1

package/esm/LinearGenomeView/components/SequenceSearchDialog.js

@@ -4,13 +4,13 @@ import { Dialog } from '@jbrowse/core/ui';
 import { getSnapshot } from 'mobx-state-tree';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
-import { getSession } from '@jbrowse/core/util';
+import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '40em',
     },
 });
-function SequenceDialog({ model, handleClose, }) {
+const SequenceSearchDialog = observer(function ({ model, handleClose, }) {
     const { classes } = useStyles();
     const [value, setValue] = useState('');
     const [searchForward, setSearchForward] = useState(true);
@@ -40,24 +40,26 @@ function SequenceDialog({ model, handleClose, }) {
                         const session = getSession(model);
                         const { assemblyManager } = session;
                         const assemblyName = model.assemblyNames[0];
-                        session.addTrackConf({
-                            trackId,
-                            name: `Sequence search ${value}`,
-                            assemblyNames: [assemblyName],
-                            type: 'FeatureTrack',
-                            adapter: {
-                                type: 'SequenceSearchAdapter',
-                                search: value,
-                                searchForward,
-                                searchReverse,
-                                caseInsensitive,
-                                sequenceAdapter: getSnapshot((_a = assemblyManager.get(assemblyName)) === null || _a === void 0 ? void 0 : _a.configuration.sequence.adapter),
-                            },
-                        });
-                        model.toggleTrack(trackId);
+                        if (isSessionWithAddTracks(session)) {
+                            session.addTrackConf({
+                                trackId,
+                                name: `Sequence search ${value}`,
+                                assemblyNames: [assemblyName],
+                                type: 'FeatureTrack',
+                                adapter: {
+                                    type: 'SequenceSearchAdapter',
+                                    search: value,
+                                    searchForward,
+                                    searchReverse,
+                                    caseInsensitive,
+                                    sequenceAdapter: getSnapshot((_a = assemblyManager.get(assemblyName)) === null || _a === void 0 ? void 0 : _a.configuration.sequence.adapter),
+                                },
+                            });
+                            model.showTrack(trackId);
+                        }
                     }
                     handleClose();
                 }, variant: "contained", color: "primary" }, "Submit"),
             React.createElement(Button, { onClick: () => handleClose(), variant: "contained", color: "secondary" }, "Close"))));
-}
-export default observer(SequenceDialog);
+});
+export default SequenceSearchDialog;

package/esm/LinearGenomeView/components/TrackContainer.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model, track, }: {
+declare const TrackContainer: ({ model, track, }: {
     model: LGV;
     track: BaseTrackModel;
 }) => React.JSX.Element;
-export default _default;
+export default TrackContainer;

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -27,7 +27,7 @@ const useStyles = makeStyles()({
         zIndex: 3,
     },
 });
-export default observer(function TrackContainer({ model, track, }) {
+const TrackContainer = observer(function ({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { draggingTrackId } = model;
@@ -54,3 +54,4 @@ export default observer(function TrackContainer({ model, track, }) {
             }, onDragEnter: debouncedOnDragEnter }),
         React.createElement(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })));
 });
+export default TrackContainer;

package/esm/LinearGenomeView/components/TrackLabel.d.ts

@@ -4,5 +4,5 @@ interface Props {
     track: BaseTrackModel;
     className?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare const TrackLabel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default TrackLabel;

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -9,10 +9,10 @@ import { SanitizedHTML } from '@jbrowse/core/ui';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 // icons
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import DragIcon from '@mui/icons-material/DragIndicator';
 import CloseIcon from '@mui/icons-material/Close';
 import MinimizeIcon from '@mui/icons-material/Minimize';
 import AddIcon from '@mui/icons-material/Add';
+import TrackLabelDragHandle from './TrackLabelDragHandle';
 const useStyles = makeStyles()(theme => ({
     root: {
         background: alpha(theme.palette.background.paper, 0.8),
@@ -29,19 +29,11 @@ const useStyles = makeStyles()(theme => ({
         fontSize: '0.8rem',
         pointerEvents: 'none',
     },
-    dragHandle: {
-        cursor: 'grab',
-    },
-    dragHandleIcon: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        pointerEvents: 'none',
-    },
     iconButton: {
         padding: theme.spacing(1),
     },
 }));
-const TrackLabel = React.forwardRef(function ({ track, className }, ref) {
+const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, className }, ref) {
     var _a;
     const { classes, cx } = useStyles();
     const view = getContainingView(track);
@@ -60,15 +52,7 @@ const TrackLabel = React.forwardRef(function ({ track, className }, ref) {
         ...track.trackMenuItems(),
     ].sort((a, b) => ((b === null || b === void 0 ? void 0 : b.priority) || 0) - ((a === null || a === void 0 ? void 0 : a.priority) || 0));
     return (React.createElement(Paper, { ref: ref, className: cx(className, classes.root) },
-        React.createElement("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
-                const target = event.currentTarget;
-                if (target.parentNode) {
-                    const parent = target.parentNode;
-                    event.dataTransfer.setDragImage(parent, 20, 20);
-                    view.setDraggingTrackId(track.id);
-                }
-            }, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
-            React.createElement(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" })),
+        React.createElement(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }),
         React.createElement(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
             React.createElement(CloseIcon, { fontSize: "small" })),
         React.createElement(Typography, { variant: "body1", component: "span", className: classes.trackName },
@@ -77,5 +61,5 @@ const TrackLabel = React.forwardRef(function ({ track, className }, ref) {
                     .join(' ') })),
         React.createElement(CascadingMenuButton, { menuItems: items, "data-testid": "track_menu_icon" },
             React.createElement(MoreVertIcon, { fontSize: "small" }))));
-});
-export default observer(TrackLabel);
+}));
+export default TrackLabel;

package/esm/LinearGenomeView/components/TrackLabelDragHandle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import { LinearGenomeViewModel } from '..';
+declare function TrackLabelDragHandle({ trackId, view, track, }: {
+    trackId: string;
+    track: BaseTrackModel;
+    view: LinearGenomeViewModel;
+}): React.JSX.Element;
+export default TrackLabelDragHandle;

package/esm/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+// icons
+import DragIcon from '@mui/icons-material/DragIndicator';
+const useStyles = makeStyles()({
+    dragHandle: {
+        cursor: 'grab',
+    },
+    dragHandleIcon: {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        pointerEvents: 'none',
+    },
+});
+function TrackLabelDragHandle({ trackId, view, track, }) {
+    const { classes } = useStyles();
+    return (React.createElement("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
+            const target = event.currentTarget;
+            if (target.parentNode) {
+                const parent = target.parentNode;
+                event.dataTransfer.setDragImage(parent, 20, 20);
+                view.setDraggingTrackId(track.id);
+            }
+        }, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
+        React.createElement(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" })));
+}
+export default TrackLabelDragHandle;

package/esm/LinearGenomeView/components/TrackRenderingContainer.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model, track, onDragEnter, }: {
+declare const TrackRenderingContainer: ({ model, track, onDragEnter, }: {
     model: LGV;
     track: BaseTrackModel;
     onDragEnter: () => void;
 }) => React.JSX.Element;
-export default _default;
+export default TrackRenderingContainer;

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -22,7 +22,7 @@ const useStyles = makeStyles()({
         zIndex: 2,
     },
 });
-export default observer(function TrackRenderingContainer({ model, track, onDragEnter, }) {
+const TrackRenderingContainer = observer(function ({ model, track, onDragEnter, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { height, RenderingComponent, DisplayBlurb } = display;
@@ -48,3 +48,4 @@ export default observer(function TrackRenderingContainer({ model, track, onDragE
             } },
             React.createElement(DisplayBlurb, { model: display }))) : null)) : null));
 });
+export default TrackRenderingContainer;

package/esm/LinearGenomeView/components/TracksContainer.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ children, model, }: {
+declare const TracksContainer: ({ children, model, }: {
     children: React.ReactNode;
     model: LGV;
 }) => React.JSX.Element;
-export default _default;
+export default TracksContainer;

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -19,7 +19,7 @@ const useStyles = makeStyles()({
         overflow: 'hidden',
     },
 });
-export default observer(function TracksContainer({ children, model, }) {
+const TracksContainer = observer(function TracksContainer({ children, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
     const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model);
@@ -42,3 +42,4 @@ export default observer(function TracksContainer({ children, model, }) {
         additional,
         children));
 });
+export default TracksContainer;

package/esm/LinearGenomeView/components/VerticalGuide.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare function VerticalGuide({ model, coordX }: {
+declare const VerticalGuide: ({ model, coordX, }: {
     model: LGV;
     coordX: number;
-}): React.JSX.Element;
-declare const _default: typeof VerticalGuide;
-export default _default;
+}) => React.JSX.Element;
+export default VerticalGuide;

package/esm/LinearGenomeView/components/VerticalGuide.js

@@ -12,12 +12,12 @@ const useStyles = makeStyles()({
         zIndex: 10,
     },
 });
-function VerticalGuide({ model, coordX }) {
+const VerticalGuide = observer(function VerticalGuide({ 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',
             } })));
-}
-export default observer(VerticalGuide);
+});
+export default VerticalGuide;

package/esm/LinearGenomeView/components/ZoomControls.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
-declare function ZoomControls({ model }: {
+declare const ZoomControls: ({ model, }: {
     model: LinearGenomeViewModel;
-}): React.JSX.Element;
-declare const _default: typeof ZoomControls;
-export default _default;
+}) => React.JSX.Element;
+export default ZoomControls;

package/esm/LinearGenomeView/components/ZoomControls.js

@@ -15,7 +15,7 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.text.secondary,
     },
 }));
-function ZoomControls({ model }) {
+const ZoomControls = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { maxBpPerPx, minBpPerPx, bpPerPx, scaleFactor } = model;
     const [value, setValue] = useState(-Math.log2(bpPerPx) * 100);
@@ -28,5 +28,5 @@ function ZoomControls({ model }) {
         React.createElement(Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChange: (_, val) => setValue(val), onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)), disabled: scaleFactor !== 1 }),
         React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, size: "large" },
             React.createElement(ZoomIn, null))));
-}
-export default observer(ZoomControls);
+});
+export default ZoomControls;

package/esm/LinearGenomeView/components/util.d.ts

@@ -20,5 +20,5 @@ export declare function getCytobands(assembly: Assembly | undefined, refName: st
     refName: string;
     start: number;
     end: number;
-    type: any;
+    type: string;
 }[];

package/esm/LinearGenomeView/index.d.ts

@@ -1,4 +1,3 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LinearGenomeViewF(pluginManager: PluginManager): void;
 export * from './model';

package/esm/LinearGenomeView/index.js

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 import { ViewType } from '@jbrowse/core/pluggableElementTypes';
 import { stateModelFactory } from './model';
-export default (pluginManager) => {
+export default function LinearGenomeViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({
             name: 'LinearGenomeView',
@@ -10,5 +10,5 @@ export default (pluginManager) => {
             ReactComponent: lazy(() => import('./components/LinearGenomeView')),
         });
     });
-};
+}
 export * from './model';

package/esm/LinearGenomeView/model.d.ts

@@ -87,12 +87,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     volatileWidth: number | undefined;
     minimumBlockWidth: number;
     draggingTrackId: string | undefined;
-    volatileError: Error | undefined;
+    volatileError: unknown;
     afterDisplayedRegionsSetCallbacks: Function[];
     scaleFactor: number;
-    trackRefs: {
-        [key: string]: HTMLDivElement;
-    };
+    trackRefs: Record<string, HTMLDivElement>;
     coarseDynamicBlocks: BaseBlock[];
     coarseTotalBp: number;
     leftOffset: BpOffset | undefined;
@@ -170,7 +168,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #getter
      */
-    readonly error: string | Error;
+    readonly error: {};
     /**
      * #getter
      */
@@ -224,7 +222,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    setError(error: Error | undefined): void;
+    setError(error: unknown): void;
     /**
      * #action
      */
@@ -545,6 +543,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         end: number;
         reversed: boolean;
     } | undefined;
+} & {
+    afterCreate(): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;

package/esm/LinearGenomeView/model.js

@@ -1227,6 +1227,39 @@ export function stateModelFactory(pluginManager) {
                 ? this.pxToBp(self.width / 2)
                 : undefined;
         },
+    }))
+        .actions(self => ({
+        afterCreate() {
+            function handler(e) {
+                const session = getSession(self);
+                if (session.focusedViewId === self.id && (e.ctrlKey || e.metaKey)) {
+                    if (e.code === 'ArrowLeft') {
+                        e.preventDefault();
+                        // pan left
+                        self.slide(-0.9);
+                    }
+                    if (e.code === 'ArrowRight') {
+                        e.preventDefault();
+                        // pan right
+                        self.slide(0.9);
+                    }
+                    if (e.code === 'ArrowUp' && self.scaleFactor === 1) {
+                        e.preventDefault();
+                        // zoom in
+                        self.zoom(self.bpPerPx / 2);
+                    }
+                    if (e.code === 'ArrowDown' && self.scaleFactor === 1) {
+                        e.preventDefault();
+                        // zoom out
+                        self.zoom(self.bpPerPx * 2);
+                    }
+                }
+            }
+            document.addEventListener('keydown', handler);
+            addDisposer(self, () => {
+                document.removeEventListener('keydown', handler);
+            });
+        },
     }));
 }
 export { default as ReactComponent, default as LinearGenomeView, } from './components/LinearGenomeView';

package/esm/LinearGenomeView/svgcomponents/SVGBackground.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTheme } from '@mui/material';
-import Color from 'color';
+import { stripAlpha } from '@jbrowse/core/util';
 export default function SVGBackground({ width, height, shift, }) {
     const theme = useTheme();
-    return (React.createElement("rect", { width: width + shift * 2, height: height, fill: Color(theme.palette.background.default).hex() }));
+    return (React.createElement("rect", { width: width + shift * 2, height: height, fill: stripAlpha(theme.palette.background.default) }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { getSession } from '@jbrowse/core/util';
+import { getSession, stripAlpha } from '@jbrowse/core/util';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import { useTheme } from '@mui/material';
-import Color from 'color';
 // locals
 import { HEADER_OVERVIEW_HEIGHT } from '..';
 import Cytobands from '../components/Cytobands';
@@ -15,7 +14,7 @@ export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight
     const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0];
     const assembly = assemblyManager.get(assemblyName);
     const theme = useTheme();
-    const c = Color(theme.palette.text.primary).hex();
+    const c = stripAlpha(theme.palette.text.primary);
     const overview = Base1DView.create({
         displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
         interRegionPaddingWidth: 0,
@@ -28,9 +27,7 @@ export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight
     overview.setVolatileWidth(width);
     overview.showAllRegions();
     const block = overview.dynamicBlocks.contentBlocks[0];
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const first = visibleRegions.at(0);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const last = visibleRegions.at(-1);
     const firstOverviewPx = overview.bpToPx({
         ...first,

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { when } from 'mobx';

package/esm/LinearGenomeView/svgcomponents/SVGRuler.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import { getTickDisplayStr } from '@jbrowse/core/util';
+import { getTickDisplayStr, stripAlpha } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
 // locals
 import { makeTicks } from '../util';
 import SVGRegionSeparators from './SVGRegionSeparators';
-import Color from 'color';
 function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = true, hideText = false, }) {
     const ticks = makeTicks(start, end, bpPerPx, major, minor);
     const theme = useTheme();
-    const c = Color(theme.palette.text.secondary).hex();
+    const c = stripAlpha(theme.palette.text.secondary);
     return (React.createElement(React.Fragment, null,
         ticks.map(tick => {
             const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
@@ -27,7 +26,7 @@ export default function SVGRuler({ model, fontSize, }) {
     const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
     const renderRuler = contentBlocks.length < 5;
     const theme = useTheme();
-    const c = Color(theme.palette.text.primary).hex();
+    const c = stripAlpha(theme.palette.text.primary);
     return (React.createElement(React.Fragment, null,
         React.createElement(SVGRegionSeparators, { model: model, height: 30 }),
         contentBlocks.map(block => {

package/esm/LinearGenomeView/svgcomponents/SVGScalebar.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import { getBpDisplayStr } from '@jbrowse/core/util';
+import { getBpDisplayStr, stripAlpha } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
-import Color from 'color';
 export default function SVGScalebar({ model, fontSize, }) {
     const { offsetPx, dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp }, } = model;
     const theme = useTheme();
     const displayBp = getBpDisplayStr(totalBp);
     const x0 = Math.max(-offsetPx, 0);
     const x1 = x0 + totalWidthPx;
-    const c = Color(theme.palette.text.secondary).hex();
+    const c = stripAlpha(theme.palette.text.secondary);
     const x = x0 + (x1 - x0) / 2;
     const y = fontSize;
     return (React.createElement(React.Fragment, null,

package/esm/LinearGenomeView/svgcomponents/SVGTrackLabel.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useTheme } from '@mui/material';
+import { coarseStripHTML } from '@jbrowse/core/util';
 export default function SVGTrackLabel({ trackLabels, trackName, fontSize, trackLabelOffset, x, }) {
     const theme = useTheme();
     const fill = theme.palette.text.primary;
     const xoff = trackLabels === 'overlay' ? 5 : 0;
     const yoff = trackLabels === 'offset' ? 5 : 0;
-    return trackLabels !== 'none' ? (React.createElement("g", null, trackLabels === 'left' ? (React.createElement("text", { x: trackLabelOffset - 40, y: 20, fill: fill, fontSize: fontSize, dominantBaseline: "hanging", textAnchor: "end" }, trackName)) : (React.createElement("text", { x: x + xoff, y: yoff, fill: fill, fontSize: fontSize, dominantBaseline: "hanging" }, trackName)))) : null;
+    const name = coarseStripHTML(trackName);
+    return trackLabels !== 'none' ? (React.createElement("g", null, trackLabels === 'left' ? (React.createElement("text", { x: trackLabelOffset - 40, y: 20, fill: fill, fontSize: fontSize, dominantBaseline: "hanging", textAnchor: "end" }, name)) : (React.createElement("text", { x: x + xoff, y: yoff, fill: fill, fontSize: fontSize, dominantBaseline: "hanging" }, name)))) : null;
 }