@jbrowse/plugin-canvas 4.0.4 → 4.1.3

package/esm/CanvasFeatureRenderer/drawChevrons.d.ts

@@ -1 +1 @@
-export declare function drawChevrons(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, strand: number, color: string, spacing?: number, size?: number): void;
+export declare function drawChevrons(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, strand: number, color: string, canvasWidth: number, spacing?: number, size?: number): void;

package/esm/CanvasFeatureRenderer/drawChevrons.js

@@ -1,4 +1,4 @@
-export function drawChevrons(ctx, x, y, width, strand, color, spacing = 40, size = 4) {
+export function drawChevrons(ctx, x, y, width, strand, color, canvasWidth, spacing = 40, size = 4) {
     if (strand === 0 || width < spacing) {
         return;
     }
@@ -10,6 +10,9 @@ export function drawChevrons(ctx, x, y, width, strand, color, spacing = 40, size
     const startOffset = (width - numChevrons * spacing) / 2 + spacing / 2;
     for (let i = 0; i < numChevrons; i++) {
         const cx = x + startOffset + i * spacing;
+        if (cx + halfSize < 0 || cx - halfSize > canvasWidth) {
+            continue;
+        }
         if (strand === 1) {
             ctx.moveTo(cx - halfSize, y - halfSize);
             ctx.lineTo(cx + halfSize, y);

package/esm/CanvasFeatureRenderer/glyphs/box.js

@@ -14,9 +14,9 @@ export const boxGlyph = {
     },
     layout(args) {
         const { feature, bpPerPx, reversed, configContext } = args;
-        const { config, displayMode, featureHeight } = configContext;
+        const { config, featureHeight, heightMultiplier } = configContext;
         const height = readCachedConfig(featureHeight, config, 'height', feature);
-        const baseHeight = displayMode === 'compact' ? height / 2 : height;
+        const baseHeight = height * heightMultiplier;
         const width = (feature.get('end') - feature.get('start')) / bpPerPx;
         const isTopLevel = !feature.parent?.();
         const strand = feature.get('strand');

package/esm/CanvasFeatureRenderer/glyphs/cds.js

@@ -12,9 +12,9 @@ export const cdsGlyph = {
     },
     layout(args) {
         const { feature, bpPerPx, configContext } = args;
-        const { config, displayMode, featureHeight } = configContext;
+        const { config, featureHeight, heightMultiplier } = configContext;
         const height = readCachedConfig(featureHeight, config, 'height', feature);
-        const baseHeight = displayMode === 'compact' ? height / 2 : height;
+        const baseHeight = height * heightMultiplier;
         const width = (feature.get('end') - feature.get('start')) / bpPerPx;
         return {
             feature,

package/esm/CanvasFeatureRenderer/glyphs/glyphUtils.js

@@ -14,9 +14,9 @@ export function getStrandArrowPadding(strand, reversed) {
 }
 export function layoutChild(child, parentFeature, args, glyphType = 'Box') {
     const { bpPerPx, reversed, configContext } = args;
-    const { config, displayMode, featureHeight } = configContext;
+    const { config, featureHeight, heightMultiplier } = configContext;
     const heightPx = readCachedConfig(featureHeight, config, 'height', child);
-    const baseHeightPx = displayMode === 'compact' ? heightPx / 2 : heightPx;
+    const baseHeightPx = heightPx * heightMultiplier;
     const childStart = child.get('start');
     const childEnd = child.get('end');
     const parentStart = parentFeature.get('start');
@@ -110,7 +110,7 @@ export function drawSegmentedFeature(ctx, layout, dc, boxGlyph, cdsGlyph) {
         const strand = feature.get('strand');
         if (strand) {
             const effectiveStrand = reversed ? -strand : strand;
-            drawChevrons(ctx, left, top + height / 2, width, effectiveStrand, strokeColor);
+            drawChevrons(ctx, left, top + height / 2, width, effectiveStrand, strokeColor, canvasWidth);
         }
     }
     for (const childLayout of children) {

package/esm/CanvasFeatureRenderer/glyphs/matureProteinRegion.js

@@ -56,11 +56,11 @@ export const matureProteinRegionGlyph = {
     },
     layout(args) {
         const { feature, bpPerPx, configContext } = args;
-        const { config, displayMode, featureHeight, subfeatureLabels } = configContext;
+        const { config, featureHeight, heightMultiplier, subfeatureLabels } = configContext;
         const start = feature.get('start');
         const end = feature.get('end');
         const heightPx = readCachedConfig(featureHeight, config, 'height', feature);
-        const baseHeightPx = displayMode === 'compact' ? heightPx / 2 : heightPx;
+        const baseHeightPx = heightPx * heightMultiplier;
         const widthPx = (end - start) / bpPerPx;
         const matureProteins = getMatureProteinChildren(feature);
         const children = matureProteins.map(child => layoutChild(child, feature, args));

package/esm/CanvasFeatureRenderer/glyphs/processed.js

@@ -20,11 +20,11 @@ export const processedTranscriptGlyph = {
     },
     layout(args) {
         const { feature, bpPerPx, reversed, configContext } = args;
-        const { config, displayMode, featureHeight } = configContext;
+        const { config, featureHeight, heightMultiplier } = configContext;
         const start = feature.get('start');
         const end = feature.get('end');
         const heightPx = readCachedConfig(featureHeight, config, 'height', feature);
-        const baseHeightPx = displayMode === 'compact' ? heightPx / 2 : heightPx;
+        const baseHeightPx = heightPx * heightMultiplier;
         const widthPx = (end - start) / bpPerPx;
         const strand = feature.get('strand');
         const arrowPadding = getStrandArrowPadding(strand, reversed);

package/esm/CanvasFeatureRenderer/glyphs/repeatRegion.js

@@ -33,11 +33,11 @@ export const repeatRegionGlyph = {
     },
     layout(args) {
         const { feature, bpPerPx, reversed, configContext } = args;
-        const { config, displayMode, featureHeight } = configContext;
+        const { config, featureHeight, heightMultiplier } = configContext;
         const start = feature.get('start');
         const end = feature.get('end');
         const heightPx = readCachedConfig(featureHeight, config, 'height', feature);
-        const baseHeightPx = displayMode === 'compact' ? heightPx / 2 : heightPx;
+        const baseHeightPx = heightPx * heightMultiplier;
         const widthPx = (end - start) / bpPerPx;
         const strand = feature.get('strand');
         const arrowPadding = getStrandArrowPadding(strand, reversed);

package/esm/CanvasFeatureRenderer/glyphs/segments.js

@@ -32,11 +32,11 @@ export const segmentsGlyph = {
     },
     layout(args) {
         const { feature, bpPerPx, reversed, configContext } = args;
-        const { config, displayMode, featureHeight } = configContext;
+        const { config, featureHeight, heightMultiplier } = configContext;
         const start = feature.get('start');
         const end = feature.get('end');
         const heightPx = readCachedConfig(featureHeight, config, 'height', feature);
-        const baseHeightPx = displayMode === 'compact' ? heightPx / 2 : heightPx;
+        const baseHeightPx = heightPx * heightMultiplier;
         const widthPx = (end - start) / bpPerPx;
         const strand = feature.get('strand');
         const arrowPadding = getStrandArrowPadding(strand, reversed);

package/esm/CanvasFeatureRenderer/glyphs/subfeatures.js

@@ -41,13 +41,13 @@ export const subfeaturesGlyph = {
     },
     layout(args) {
         const { feature, bpPerPx, reversed, configContext } = args;
-        const { config, displayMode, featureHeight, geneGlyphMode, transcriptTypes, } = configContext;
+        const { config, featureHeight, heightMultiplier, geneGlyphMode, transcriptTypes, } = configContext;
         const featureBp = {
             start: feature.get('start'),
             end: feature.get('end'),
         };
         const heightPx = readCachedConfig(featureHeight, config, 'height', feature);
-        const baseHeightPx = displayMode === 'compact' ? heightPx / 2 : heightPx;
+        const baseHeightPx = heightPx * heightMultiplier;
         const widthPx = (featureBp.end - featureBp.start) / bpPerPx;
         let subfeatures = [...(feature.get('subfeatures') || [])];
         const codingStatus = new Map(subfeatures.map(f => [f.id(), hasCodingSubfeature(f)]));

package/esm/CanvasFeatureRenderer/makeImageData.js

@@ -2,7 +2,7 @@ import { readConfObject } from '@jbrowse/core/configuration';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { bpToPx } from '@jbrowse/core/util';
 import Flatbush from '@jbrowse/core/util/flatbush';
-import { checkStopToken2, createStopTokenChecker, } from '@jbrowse/core/util/stopToken';
+import { checkStopToken2 } from '@jbrowse/core/util/stopToken';
 import { drawFeature } from "./drawFeature.js";
 import { buildChildrenIndex, convertToCanvasCoords, } from "./layout/layoutUtils.js";
 function buildFlatbush(coords, count) {
@@ -19,7 +19,7 @@ function buildFlatbush(coords, count) {
     return fb;
 }
 export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, configContext, }) {
-    const { bpPerPx, regions, theme: configTheme, stopToken, layout, peptideDataMap, colorByCDS, pluginManager, } = renderArgs;
+    const { bpPerPx, regions, theme: configTheme, stopTokenCheck, layout, peptideDataMap, colorByCDS, pluginManager, } = renderArgs;
     const region = regions[0];
     const theme = createJBrowseTheme(configTheme);
     const drawContext = {
@@ -38,7 +38,6 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, con
     ctx.textBaseline = 'top';
     ctx.textAlign = 'left';
     const { subfeatureLabels, transcriptTypes, config } = configContext;
-    const lastCheck = createStopTokenChecker(stopToken);
     for (const record of layoutRecords) {
         const { feature, layout: featureLayout, topPx: recordTopPx, label, description, } = record;
         const featureStartBp = feature.get(region.reversed ? 'end' : 'start');
@@ -78,7 +77,7 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, con
             labelColor: theme.palette.text.primary,
             parentTooltip: tooltip,
         });
-        checkStopToken2(lastCheck);
+        checkStopToken2(stopTokenCheck);
     }
     return {
         flatbush: buildFlatbush(coords, items.length).data,

package/esm/CanvasFeatureRenderer/renderConfig.d.ts

@@ -22,5 +22,6 @@ export interface RenderConfigContext {
     labelAllowed: boolean;
     geneGlyphMode: string;
     displayDirectionalChevrons: boolean;
+    heightMultiplier: number;
 }
 export declare function createRenderConfigContext(config: AnyConfigurationModel): RenderConfigContext;

package/esm/CanvasFeatureRenderer/renderConfig.js

@@ -12,6 +12,12 @@ function createCachedConfig(config, key, defaultValue) {
     const value = isCallback ? defaultValue : readConfObject(config, key);
     return { value, isCallback };
 }
+function getHeightMultiplier(displayMode) {
+    if (displayMode === 'compact') {
+        return 0.5;
+    }
+    return 1;
+}
 export function createRenderConfigContext(config) {
     const displayMode = readConfObject(config, 'displayMode');
     return {
@@ -31,5 +37,6 @@ export function createRenderConfigContext(config) {
         featureHeight: createCachedConfig(config, 'height', 10),
         fontHeight: createCachedConfig(config, ['labels', 'fontSize'], 12),
         labelAllowed: displayMode !== 'collapse',
+        heightMultiplier: getHeightMultiplier(displayMode),
     };
 }

package/esm/CanvasFeatureRenderer/types.d.ts

@@ -1,7 +1,7 @@
 import type { RenderConfigContext } from './renderConfig.ts';
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { Feature, Region } from '@jbrowse/core/util';
+import type { Feature, LastStopTokenCheck, Region } from '@jbrowse/core/util';
 import type { BaseLayout } from '@jbrowse/core/util/layouts';
 import type { Theme } from '@mui/material';
 export interface SequenceData {
@@ -90,6 +90,7 @@ export interface RenderArgs {
     theme: Record<string, any>;
     highResolutionScaling?: number;
     stopToken?: string;
+    stopTokenCheck?: LastStopTokenCheck;
     peptideDataMap?: Map<string, PeptideData>;
     colorByCDS?: boolean;
     pluginManager?: PluginManager;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@jbrowse/plugin-canvas",
-  "version": "4.0.4",
+  "version": "4.1.3",
+  "type": "module",
   "description": "JBrowse 2 plugin for canvas features",
   "keywords": [
     "jbrowse",
@@ -21,13 +22,13 @@
   ],
   "dependencies": {
     "@jbrowse/mobx-state-tree": "^5.5.0",
-    "@mui/material": "^7.3.6",
+    "@mui/material": "^7.3.7",
     "g2p_mapper": "^2.0.0",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
     "rxjs": "^7.8.2",
-    "@jbrowse/core": "^4.0.4",
-    "@jbrowse/plugin-linear-genome-view": "^4.0.4"
+    "@jbrowse/core": "^4.1.3",
+    "@jbrowse/plugin-linear-genome-view": "^4.1.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0"