-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add floating labels to SVG features (#2781)
* Increase min width from 1 to 2px * FeatureLabel observable * Move logic to the feature label itself * Smooth over block boundaries
- Loading branch information
Showing
13 changed files
with
193 additions
and
123 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 70 additions & 35 deletions
105
plugins/svg/src/SvgFeatureRenderer/components/FeatureLabel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,46 +1,81 @@ | ||
import React from 'react' | ||
import { measureText } from '@jbrowse/core/util' | ||
import { observer } from 'mobx-react' | ||
import { isStateTreeNode } from 'mobx-state-tree' | ||
import { measureText, getViewParams, Feature, Region } from '@jbrowse/core/util' | ||
import { DisplayModel } from './util' | ||
|
||
export default function Label(props: { | ||
text: string | ||
x: number | ||
y: number | ||
color?: string | ||
fontHeight?: number | ||
featureWidth?: number | ||
allowedWidthExpansion?: number | ||
reversed?: boolean | ||
fontWidthScaleFactor?: number | ||
}) { | ||
const { | ||
export default observer( | ||
({ | ||
text, | ||
x, | ||
y, | ||
region, | ||
reversed, | ||
bpPerPx, | ||
feature, | ||
viewParams, | ||
color = 'black', | ||
fontHeight = 13, | ||
featureWidth = 0, | ||
reversed, | ||
allowedWidthExpansion, | ||
fontWidthScaleFactor = 0.6, | ||
} = props | ||
allowedWidthExpansion = 0, | ||
displayModel = {}, | ||
}: { | ||
text: string | ||
x: number | ||
y: number | ||
color?: string | ||
fontHeight?: number | ||
featureWidth?: number | ||
bpPerPx: number | ||
allowedWidthExpansion?: number | ||
feature: Feature | ||
reversed?: boolean | ||
displayModel: DisplayModel | ||
region: Region | ||
viewParams: { | ||
start: number | ||
end: number | ||
offsetPx: number | ||
offsetPx1: number | ||
} | ||
}) => { | ||
const totalWidth = featureWidth + allowedWidthExpansion | ||
const measuredTextWidth = measureText(text, fontHeight) | ||
const params = isStateTreeNode(displayModel) | ||
? getViewParams(displayModel) | ||
: viewParams | ||
|
||
const viewLeft = reversed ? params.end : params.start | ||
|
||
const rstart = region.start | ||
const rend = region.end | ||
const fstart = feature.get('start') | ||
const fend = feature.get('end') | ||
|
||
const fontWidth = fontHeight * fontWidthScaleFactor | ||
const totalWidth = | ||
featureWidth && allowedWidthExpansion | ||
? featureWidth + allowedWidthExpansion | ||
: Infinity | ||
const featureWidthBp = measuredTextWidth * bpPerPx | ||
|
||
const measuredTextWidth = measureText(text, fontHeight) | ||
// this tricky bit of code helps smooth over block boundaries | ||
// not supported for reverse mode currently | ||
// reason: reverse mode allocates space for the label in the "normal | ||
// forward orientation" making it hard to slide. The reverse mode should | ||
// allocate the label space in the reverse orientation to slide it | ||
if ( | ||
viewLeft < rend && | ||
viewLeft > rstart && | ||
fstart < viewLeft && | ||
viewLeft + featureWidthBp < fend | ||
) { | ||
x = params.offsetPx | ||
} else if (fstart < viewLeft && viewLeft + featureWidthBp < fend) { | ||
x = params.offsetPx1 | ||
} | ||
|
||
return ( | ||
<text | ||
x={reversed ? x + featureWidth - measuredTextWidth : x} | ||
y={y + fontHeight} | ||
style={{ fontSize: fontHeight, fill: color, cursor: 'default' }} | ||
> | ||
{measuredTextWidth > totalWidth | ||
? `${text.slice(0, totalWidth / fontWidth)}...` | ||
: text} | ||
</text> | ||
) | ||
} | ||
return ( | ||
<text x={x} y={y + fontHeight} fill={color} fontSize={fontHeight}> | ||
{measuredTextWidth > totalWidth | ||
? `${text.slice(0, totalWidth / (fontHeight * 0.6))}...` | ||
: text} | ||
</text> | ||
) | ||
}, | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.