@jbrowse/core 5.0.0-beta.1 → 5.0.0-beta.10

package/esm/ui/theme.js

@@ -1,6 +1,6 @@
-import { createTheme } from '@mui/material';
+import { createTheme } from '@mui/material/styles';
 import { deepMerge } from '../util/deepMerge.js';
-import { palettePresets, resolvePalette } from './palette.js';
+import { palettePresets, resolvePalette, resolveThemeSelection, } from './palette.js';
 import { DEFAULT_FONT_SIZE, DEFAULT_SPACING } from './styleTheme.js';
 // The colors themselves live in `palette.ts`, which imports no toolkit. This
 // module's job is to hand what `resolvePalette` produces to MUI, so JBrowse's
@@ -9,46 +9,38 @@ import { DEFAULT_FONT_SIZE, DEFAULT_SPACING } from './styleTheme.js';
 // Static domain colors and the theme presets are re-exported from palette.ts so
 // existing `@jbrowse/core/ui` imports are unaffected. Import them from
 // `@jbrowse/core/ui/palette` to get them without pulling in Material UI.
-export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorNeutralRead, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './palette.js';
-// The display names and MUI component overrides layered on top of each palette
-// preset. The colors come from palette.ts, so a preset's palette is stated once
-// and this map is the Material UI half of it.
+export { colorFwdStrand, colorInterchrom, colorLongInsert, colorLongreadInv, colorPairLL, colorPairLR, colorPairLRDark, colorPairRL, colorPairRR, colorRevStrand, colorShortInsert, colorSplitReadInversion, colorSupplementary, colorUnmappedMate, colorUnmappedMateDark, methylated5hmC, methylated5mC, tagColorPalette, unmethylated5mC, } from './palette.js';
+// The display names and MUI component overrides layered on top of each palette.
+// The colors come from palette.ts, so a palette is stated once and this map is
+// the Material UI half of it. Light and dark are not entries here — they are
+// `mode`, which every one of these resolves along.
 export const defaultThemes = {
     default: { palette: palettePresets.default, name: 'Default (from config)' },
-    lightStock: { palette: palettePresets.lightStock, name: 'Light (stock)' },
-    lightMinimal: {
-        name: 'Light (minimal)',
-        palette: palettePresets.lightMinimal,
+    stock: {
+        name: 'Stock',
+        palette: palettePresets.stock,
     },
-    darkMinimal: {
-        name: 'Dark (minimal)',
-        palette: palettePresets.darkMinimal,
-    },
-    darkStock: {
-        name: 'Dark (stock)',
-        palette: palettePresets.darkStock,
-        components: {
-            // enableColorOnDark keeps the AppBar tinted with primary.main in dark
-            // mode (default MUI behavior is to flatten it to the paper color)
-            MuiAppBar: { defaultProps: { enableColorOnDark: true } },
-        },
+    minimal: {
+        name: 'Minimal',
+        palette: palettePresets.minimal,
     },
 };
-// The default primary (midnight) has poor contrast as a text/control color in
-// dark mode, so fall back to a text-like color there. The extra selectors let
-// callers also recolor checked/focused states.
+// The default primary (midnight) has poor contrast as a control color in dark
+// mode, so a control takes `accent` there, the token JBrowse's own non-Material
+// controls read. The extra selectors recolor checked/focused states too.
 // xref https://stackoverflow.com/a/72546130/2129219
-function darkModeContrastOverride(extraSelectors = [], textColor = 'secondary') {
+function darkModeContrastOverride(extraSelectors = [], colorOf = p => p.accent) {
     return {
-        root: ({ theme }) => theme.palette.mode === 'dark'
-            ? {
-                color: theme.palette.text[textColor],
-                ...Object.fromEntries(extraSelectors.map(selector => [
-                    selector,
-                    { color: theme.palette.text[textColor] },
-                ])),
+        root: ({ theme }) => {
+            if (theme.palette.mode !== 'dark') {
+                return undefined;
             }
-            : undefined,
+            const color = colorOf(theme.palette);
+            return {
+                color,
+                ...Object.fromEntries(extraSelectors.map(s => [s, { color }])),
+            };
+        },
     };
 }
 // midnight primary is nearly invisible as an icon color on the dark header/
@@ -68,7 +60,19 @@ const baseThemeOptions = {
         fontSize: DEFAULT_FONT_SIZE,
     },
     spacing: DEFAULT_SPACING,
+    // an animation makes every popover, dialog and hover trail the input
+    motion: {
+        reducedMotion: 'always',
+    },
     components: {
+        MuiAppBar: {
+            // JBrowse's header keeps its brand in dark mode; MUI's default is to
+            // flatten it to the paper colour. A property of the app rather than of
+            // one palette — it used to sit on `darkStock` alone, so the theme a
+            // reader reaches by picking Dark over the default palette lost the
+            // header the old dark theme had. MUI reads this only in dark mode.
+            defaultProps: { enableColorOnDark: true },
+        },
         MuiTooltip: {
             styleOverrides: {
                 tooltip: {
@@ -83,14 +87,13 @@ const baseThemeOptions = {
             // the default button, especially when not using variant=contained, uses
             // theme.palette.primary.main for text which is very bad with dark
             // mode+midnight primary
-            styleOverrides: darkModeContrastOverride([], 'primary'),
+            styleOverrides: darkModeContrastOverride([], p => p.text.primary),
         },
         MuiAccordion: {
             defaultProps: {
                 disableGutters: true,
                 slotProps: {
                     transition: {
-                        timeout: 150,
                         unmountOnExit: true,
                     },
                 },
@@ -166,16 +169,6 @@ const baseThemeOptions = {
                 size: 'small',
             },
         },
-        MuiPopover: {
-            defaultProps: {
-                transitionDuration: 0,
-            },
-        },
-        MuiMenu: {
-            defaultProps: {
-                transitionDuration: 0,
-            },
-        },
         MuiMenuItem: {
             defaultProps: {
                 dense: true,
@@ -209,6 +202,11 @@ const baseThemeOptions = {
         MuiFormLabel: {
             styleOverrides: darkModeContrastOverride(['&.Mui-focused']),
         },
+        // the rail, track and thumb are all `currentColor` off the root, so a
+        // midnight root paints the whole control dark-on-dark
+        MuiSlider: {
+            styleOverrides: darkModeContrastOverride(),
+        },
         MuiAccordionSummary: {
             styleOverrides: {
                 root: ({ theme: t }) => ({
@@ -217,6 +215,10 @@ const baseThemeOptions = {
                 content: ({ theme: t }) => ({
                     color: t.palette.tertiary.contrastText,
                 }),
+                // MUI paints the chevron action.active, which vanishes on tertiary
+                expandIconWrapper: ({ theme: t }) => ({
+                    color: t.palette.tertiary.contrastText,
+                }),
             },
         },
         MuiToggleButtonGroup: {
@@ -224,33 +226,6 @@ const baseThemeOptions = {
                 size: 'small',
             },
         },
-        // Speed up ripple animations for snappier feel (default is 550ms)
-        // See https://mui.com/material-ui/api/button-base/
-        // and https://github.com/mui/material-ui/blob/master/packages/mui-material/src/ButtonBase/TouchRipple.js
-        //
-        // The click ripple only: a *focus* ripple is a different animation on the
-        // same two elements — childPulsate, which runs `infinite` — so a blanket
-        // 50ms turns MUI's 2500ms breath into a 20Hz strobe that never stops. It
-        // shows up on any focus-visible button, and Chrome hands one out unasked:
-        // it re-evaluates :focus-visible on the already-focused element after any
-        // keystroke, and the focus event that a browser-tab switch fires on the way
-        // back is what makes MUI act on it. So these select the enter and leaving
-        // keyframes by name and let the pulsate keep its own duration.
-        //
-        // Both selectors also outrank TouchRipple's own rules on specificity, which
-        // is what `!important` was here for.
-        MuiButtonBase: {
-            styleOverrides: {
-                root: {
-                    '& .MuiTouchRipple-ripple.MuiTouchRipple-rippleVisible:not(.MuiTouchRipple-ripplePulsate)': {
-                        animationDuration: '50ms',
-                    },
-                    '& .MuiTouchRipple-child.MuiTouchRipple-childLeaving': {
-                        animationDuration: '50ms',
-                    },
-                },
-            },
-        },
     },
 };
 export function createJBrowseBaseTheme(theme = {}) {
@@ -262,12 +237,12 @@ export function createJBrowseBaseTheme(theme = {}) {
  * thread and a worker resolve to the same colors.
  */
 export function createJBrowseThemeFromArgs(args = {}) {
-    return createJBrowseTheme(args.configTheme, { ...defaultThemes, ...args.extraThemes }, args.themeName);
+    return createJBrowseTheme(args.configTheme, { ...defaultThemes, ...args.extraThemes }, args.themeName, args.mode);
 }
 // Memoizes the built MUI theme across calls. Bounded in practice: the key space
 // is (config theme x selected preset), a handful of entries.
 const themeCache = new Map();
-function getThemeCacheKey(configTheme, selectedTheme, themeName) {
+function getThemeCacheKey(configTheme, selectedTheme, themeName, mode) {
     // key on the single selected theme definition, not the whole themes map,
     // so configurable extraThemes that reuse a name still bust the cache.
     // configTheme only participates on the 'default' path that reads it
@@ -275,6 +250,7 @@ function getThemeCacheKey(configTheme, selectedTheme, themeName) {
         configTheme: themeName === 'default' ? configTheme : undefined,
         selectedTheme,
         themeName,
+        mode,
     }, 
     // a plugin-supplied theme can carry style-override callbacks, which
     // JSON.stringify drops, so two such themes would otherwise share a key
@@ -289,8 +265,11 @@ function getThemeCacheKey(configTheme, selectedTheme, themeName) {
  * component defaults and style overrides in `baseThemeOptions`, plus whatever
  * non-palette options the selected theme or the config theme declares.
  */
-export function createJBrowseTheme(configTheme = {}, themes = defaultThemes, themeName = 'default') {
-    const cacheKey = getThemeCacheKey(configTheme, themes[themeName], themeName);
+export function createJBrowseTheme(configTheme = {}, themes = defaultThemes, requestedName = 'default', requestedMode) {
+    // one resolver with resolvePalette, so a retired name and an extraThemes
+    // entry shadowing one mean the same thing to the colors and to the chrome
+    const { themeName, mode } = resolveThemeSelection(requestedName, requestedMode, themes);
+    const cacheKey = getThemeCacheKey(configTheme, themes[themeName], themeName, mode);
     const cached = themeCache.get(cacheKey);
     if (cached) {
         return cached;
@@ -301,7 +280,12 @@ export function createJBrowseTheme(configTheme = {}, themes = defaultThemes, the
     const merged = themeName === 'default' ? deepMerge(selected, configTheme) : selected;
     const theme = createTheme(createJBrowseBaseTheme({
         ...merged,
-        palette: resolvePalette({ configTheme, themeName, extraThemes: themes }),
+        palette: resolvePalette({
+            configTheme,
+            themeName,
+            mode,
+            extraThemes: themes,
+        }),
     }));
     themeCache.set(cacheKey, theme);
     return theme;

package/esm/ui/toggleMenuItems.d.ts

@@ -26,11 +26,9 @@ export declare function checkboxItem(label: string, checked: boolean, onToggle:
 export declare function toggleItem(label: string, value: boolean, setValue: (value: boolean) => void, opts?: SettingRowOptions): CheckboxMenuItem;
 /** #menuBuilder radioItem | one radio setting row; the singular of `radioItems` */
 export declare function radioItem(label: string, checked: boolean, onClick: () => void, opts?: SettingRowOptions): RadioMenuItem;
-export interface RadioOption<T extends string> {
+export interface RadioOption<T extends string> extends SettingRowOptions {
     value: T;
     label: string;
-    helpText?: string;
-    keepMenuOpen?: boolean;
 }
 /** #menuBuilder radioItems | a radio group, one row per option */
 export declare function radioItems<T extends string>(options: readonly RadioOption<T>[], current: T | undefined, setMode: (m: T) => void): RadioMenuItem[];

package/esm/ui/toggleMenuItems.js

@@ -1,5 +1,5 @@
 /** #menuBuilder checkboxItem | one checkbox setting row */
-export function checkboxItem(label, checked, onToggle, opts) {
+export function checkboxItem(label, checked, onToggle, opts = {}) {
     return {
         label,
         type: 'checkbox',
@@ -29,11 +29,12 @@ export function toggleItem(label, value, setValue, opts) {
         setValue(!value);
     }, opts);
 }
-// One radio row. The singular of `radioItems`, and what
-// `promotableRadioItem` builds through, so a lone radio row and a member of a
-// group are the same object plus or minus its pin.
+// One radio row. The singular of `radioItems`, for a group the plural form
+// can't express: a row with no single value (the colorBy "Tag..." row before a
+// tag is picked), or a group gated row by row and mixing in a non-uniform peer
+// (the alignments size presets and their "Custom..." row).
 /** #menuBuilder radioItem | one radio setting row; the singular of `radioItems` */
-export function radioItem(label, checked, onClick, opts) {
+export function radioItem(label, checked, onClick, opts = {}) {
     return {
         label,
         type: 'radio',

package/esm/ui/useAssemblySelection.d.ts

@@ -19,7 +19,7 @@ export declare function useAssemblySelection(session: AbstractSessionModel, loca
         error: unknown;
         loadingP: Promise<void> | undefined;
         adapterLoads: import("@jbrowse/quick-lru").default<string, Promise<import("../assemblyManager/refNameMaps.ts").RefNameAliases>>;
-        volatileRegions: import("../assemblyManager/assembly.ts").BasicRegion[] | undefined;
+        regions: import("../assemblyManager/assembly.ts").BasicRegion[] | undefined;
         refNameAliases: import("../assemblyManager/refNameMaps.ts").RefNameAliases | undefined;
         canonicalToSeqAdapterRefNames: Record<string, string> | undefined;
         cytobands: import("../util/simpleFeature.ts").Feature[] | undefined;
@@ -57,7 +57,6 @@ export declare function useAssemblySelection(session: AbstractSessionModel, loca
         afterAttach(): void;
     } & {
         readonly initialized: boolean;
-        readonly regions: import("../assemblyManager/assembly.ts").BasicRegion[] | undefined;
         readonly allRefNames: string[] | undefined;
         readonly namesByCanonicalRefName: Map<string, string[]> | undefined;
         readonly rpcManager: import("../rpc/RpcManager.ts").default;
@@ -75,6 +74,7 @@ export declare function useAssemblySelection(session: AbstractSessionModel, loca
         getCanonicalRefName2(refName: string): string;
         isValidRefName(refName: string): boolean;
     } & {
+        getRefNamePosition(refName: string): number | undefined;
         getAliasesForRefName(refName: string): string[];
         getRefNameMapForAdapter(adapterConf: {
             [x: string]: unknown;
@@ -86,7 +86,7 @@ export declare function useAssemblySelection(session: AbstractSessionModel, loca
         error: unknown;
         loadingP: Promise<void> | undefined;
         adapterLoads: import("@jbrowse/quick-lru").default<string, Promise<import("../assemblyManager/refNameMaps.ts").RefNameAliases>>;
-        volatileRegions: import("../assemblyManager/assembly.ts").BasicRegion[] | undefined;
+        regions: import("../assemblyManager/assembly.ts").BasicRegion[] | undefined;
         refNameAliases: import("../assemblyManager/refNameMaps.ts").RefNameAliases | undefined;
         canonicalToSeqAdapterRefNames: Record<string, string> | undefined;
         cytobands: import("../util/simpleFeature.ts").Feature[] | undefined;
@@ -124,7 +124,6 @@ export declare function useAssemblySelection(session: AbstractSessionModel, loca
         afterAttach(): void;
     } & {
         readonly initialized: boolean;
-        readonly regions: import("../assemblyManager/assembly.ts").BasicRegion[] | undefined;
         readonly allRefNames: string[] | undefined;
         readonly namesByCanonicalRefName: Map<string, string[]> | undefined;
         readonly rpcManager: import("../rpc/RpcManager.ts").default;
@@ -142,6 +141,7 @@ export declare function useAssemblySelection(session: AbstractSessionModel, loca
         getCanonicalRefName2(refName: string): string;
         isValidRefName(refName: string): boolean;
     } & {
+        getRefNamePosition(refName: string): number | undefined;
         getAliasesForRefName(refName: string): string[];
         getRefNameMapForAdapter(adapterConf: {
             [x: string]: unknown;

package/esm/ui/viewHeaderHeight.d.ts

@@ -0,0 +1 @@
+export declare const VIEW_HEADER_HEIGHT = 28;

package/esm/ui/viewHeaderHeight.js

@@ -0,0 +1 @@
+export const VIEW_HEADER_HEIGHT = 28;

package/esm/util/Base1DUtils.d.ts

@@ -43,7 +43,7 @@ export interface ViewLayout {
 export declare function moveTo(self: MoveSnap & {
     zoomTo: (arg: number) => number;
     scrollTo: (arg: number) => void;
-}, start?: BpOffset, end?: BpOffset): void;
+}, start?: BpOffset, end?: BpOffset, minBpPerPx?: number): void;
 /**
  * Pure version of moveTo: returns the {bpPerPx, offsetPx} that moveTo would
  * apply, without mutating any model. Assumes no bpPerPx clamping (i.e.
@@ -121,7 +121,7 @@ export declare function bpToPx({ refName, coord, displayedRegionIndex, self, }:
  * Undefined when no displayed region holds the coord, same as `bpToPx`; a
  * caller that means "as far as the region goes" clamps before asking.
  */
-export declare function bpToOffset({ refName, coord, displayedRegions, }: {
+export declare function bpToOffset({ refName, coord, displayedRegions, displayedRegionIndex, }: {
     refName: string;
     coord: number;
     displayedRegions: {
@@ -130,6 +130,7 @@ export declare function bpToOffset({ refName, coord, displayedRegions, }: {
         end: number;
         reversed?: boolean;
     }[];
+    displayedRegionIndex?: number;
 }): BpOffset | undefined;
 /**
  * Where a 0-based genomic coord sits in the LINEARIZED bp space — the
@@ -145,7 +146,7 @@ export declare function bpToOffset({ refName, coord, displayedRegions, }: {
  * `undefined` when no displayed region holds the coord, exactly as `bpToPx`
  * answers: a refName the view is not showing has no place on its screen.
  */
-export declare function bpToLinearBp({ refName, coord, displayedRegions, }: {
+export declare function bpToLinearBp({ refName, coord, displayedRegions, displayedRegionIndex, }: {
     refName: string;
     coord: number;
     displayedRegions: {
@@ -154,6 +155,7 @@ export declare function bpToLinearBp({ refName, coord, displayedRegions, }: {
         end: number;
         reversed?: boolean;
     }[];
+    displayedRegionIndex?: number;
 }): number | undefined;
 /**
  * Screen order of two {@link BpOffset}s: negative when `a` is to the left of

package/esm/util/Base1DUtils.js

@@ -28,10 +28,10 @@ function computeScrollPos(self, start, bpPerPx, extraBp) {
     return Math.round((cumulativeBp(self.displayedRegions, start.index, start.offset) - extraBp) /
         bpPerPx);
 }
-export function moveTo(self, start, end) {
+export function moveTo(self, start, end, minBpPerPx = 0) {
     if (start && end) {
         const targetBpPerPx = computeTargetBpPerPx(self, start, end);
-        const newBpPerPx = self.zoomTo(targetBpPerPx);
+        const newBpPerPx = self.zoomTo(Math.max(targetBpPerPx, minBpPerPx));
         const extraBp = targetBpPerPx < newBpPerPx
             ? ((newBpPerPx - targetBpPerPx) * self.width) / 2
             : 0;
@@ -187,9 +187,12 @@ export function bpToPx({ refName, coord, displayedRegionIndex, self, }) {
  * Undefined when no displayed region holds the coord, same as `bpToPx`; a
  * caller that means "as far as the region goes" clamps before asking.
  */
-export function bpToOffset({ refName, coord, displayedRegions, }) {
+export function bpToOffset({ refName, coord, displayedRegions, displayedRegionIndex, }) {
     for (const [index, r] of displayedRegions.entries()) {
-        if (refName === r.refName && coord >= r.start && coord <= r.end) {
+        if (refName === r.refName &&
+            coord >= r.start &&
+            coord <= r.end &&
+            (displayedRegionIndex === undefined || displayedRegionIndex === index)) {
             return { refName, index, offset: bpOffsetInRegion(r, coord) };
         }
     }
@@ -209,8 +212,13 @@ export function bpToOffset({ refName, coord, displayedRegions, }) {
  * `undefined` when no displayed region holds the coord, exactly as `bpToPx`
  * answers: a refName the view is not showing has no place on its screen.
  */
-export function bpToLinearBp({ refName, coord, displayedRegions, }) {
-    const at = bpToOffset({ refName, coord, displayedRegions });
+export function bpToLinearBp({ refName, coord, displayedRegions, displayedRegionIndex, }) {
+    const at = bpToOffset({
+        refName,
+        coord,
+        displayedRegions,
+        displayedRegionIndex,
+    });
     return at ? cumulativeBp(displayedRegions, at.index, at.offset) : undefined;
 }
 /**

package/esm/util/Base1DViewModel.d.ts

@@ -130,8 +130,9 @@ declare const Base1DView: import("@jbrowse/mobx-state-tree").IModelType<{
      *
      * @param start - object as `{start, end, offset, index}`
      * @param end - object as `{start, end, offset, index}`
+     * @param minBpPerPx - zoom no further in than this, centering the span
      */
-    moveTo(start?: BpOffset, end?: BpOffset): void;
+    moveTo(start?: BpOffset, end?: BpOffset, minBpPerPx?: number): void;
 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
 export type Base1DViewStateModel = typeof Base1DView;
 export type Base1DViewModel = Instance<Base1DViewStateModel>;

package/esm/util/Base1DViewModel.js

@@ -230,9 +230,10 @@ const Base1DView = types
      *
      * @param start - object as `{start, end, offset, index}`
      * @param end - object as `{start, end, offset, index}`
+     * @param minBpPerPx - zoom no further in than this, centering the span
      */
-    moveTo(start, end) {
-        moveTo(self, start, end);
+    moveTo(start, end, minBpPerPx) {
+        moveTo(self, start, end, minBpPerPx);
     },
 }));
 export default Base1DView;

package/esm/util/SvgCanvas.d.ts

@@ -1,19 +1,21 @@
 /**
- * Restart clip-id numbering for a new export document.
+ * Run `render` as one document's clip-id numbering run, starting at 0, then put
+ * the counter back.
  *
- * Without it the counter runs for the lifetime of the process, so an export is
- * numbered from wherever the previous one stopped and the same view exported
- * twice differs in every clip id. That is the churn `svgNodeId` was written to
- * get rid of, arriving by a second route: diffing two saved SVGs shows changes
- * that aren't real, and `jest -t` on any export test but the first fails its
- * checked-in snapshot with a diff that is nothing but renumbering.
+ * Starting at 0 is what makes the same view export to the same bytes: a counter
+ * left running numbers each export from wherever the previous one stopped, so
+ * diffing two saved SVGs shows changes that aren't real and `jest -t` on any
+ * export test but the first fails its snapshot on renumbering alone.
  *
- * Called by `wrapSvgExport`, and safe there and only there: the
- * `renderToStaticMarkup` it wraps is synchronous, so every `PaintLayer` in the
- * document draws before any other export can begin. Anything that resets on a
- * boundary an `await` can cross would let two exports share a numbering run.
+ * Putting it back is what keeps a file export from renumbering the page: live
+ * figures (`useViewSvgFigure`) mint from the same counter into one DOM, where
+ * ids must not repeat, so a reset that stuck would let the next figure reuse an
+ * id another figure still points at.
+ *
+ * `render` must be synchronous — an `await` inside it would let two documents
+ * share a numbering run.
  */
-export declare function resetSvgClipIds(): void;
+export declare function withFreshSvgClipIds<T>(render: () => T): T;
 export declare class SvgCanvas {
     private parts;
     private pathData;
@@ -36,6 +38,7 @@ export declare class SvgCanvas {
     private e;
     private f;
     private get axisAligned();
+    private get lengthScale();
     private transformPoint;
     private transformSize;
     private originMatrixAttr;
@@ -72,7 +75,6 @@ export declare class SvgCanvas {
     fillText(text: string, x: number, y: number): void;
     strokeText(text: string, x: number, y: number): void;
     drawImage(..._args: unknown[]): void;
-    putImageData(..._args: unknown[]): void;
     clip(..._args: unknown[]): void;
     measureText(text: string): {
         width: number;