Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 8x 8x 8x 5x 5x 3x 3x 8x 2x 2x 1x 1x 1x 1x 4x 4x 1x 1x 4x 4x 1x 4x 4x 1x 4x 4x 1x 4x 4x 1x 4x 4x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x 4x 4x 4x 4x 4x 4x 4x 1x 1x 11x 11x 1x 1x 72x 72x 72x 72x 72x 72x 72x 72x 1x 1x 72x 72x 72x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 22x 17x 17x 17x 17x 17x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 1x 1x 264x 264x 264x 264x 264x 264x 264x 264x 259x 259x | import { isEmpty, max, stripHTML, linkify } from "../../clientUtils/Util"
import { computed } from "mobx"
import { Bounds } from "../../clientUtils/Bounds"
import * as React from "react"
declare type FontSize = number
interface TextWrapProps {
text: string
maxWidth: number
lineHeight?: number
fontSize: FontSize
fontWeight?: number
rawHtml?: boolean
/** Wrap URL-like text in <a> tag. Only works when rendering HTML. */
linkifyText?: boolean
}
interface WrapLine {
text: string
width: number
height: number
}
function startsWithNewline(text: string): boolean {
return /^\n/.test(text)
}
export const shortenForTargetWidth = (
text: string,
targetWidth: number,
fontSettings: {
fontSize?: number
fontWeight?: number
fontFamily?: string
} = {}
): string => {
// use binary search to find the largest substring that fits within the target width
let low = 0
let high = text.length
while (low <= high) {
const mid = (high + low) >> 1
const bounds = Bounds.forText(text.slice(0, mid), fontSettings)
if (bounds.width < targetWidth) {
low = mid + 1
} else {
high = mid - 1
}
}
return text.slice(0, low - 1)
}
export class TextWrap {
props: TextWrapProps
constructor(props: TextWrapProps) {
this.props = props
}
@computed get maxWidth(): number {
return this.props.maxWidth ?? Infinity
}
@computed get lineHeight(): number {
return this.props.lineHeight ?? 1.1
}
@computed get fontSize(): FontSize {
return this.props.fontSize ?? 1
}
@computed get fontWeight(): number | undefined {
return this.props.fontWeight
}
@computed get text(): string {
return this.props.text
}
@computed get lines(): WrapLine[] {
const { text, maxWidth, fontSize, fontWeight } = this
const words = isEmpty(text)
? []
: // We prepend spaces to newlines in order to be able to do a "starts with"
// check to trigger a new line.
text.replace(/\n/g, " \n").split(" ")
const lines: WrapLine[] = []
let line: string[] = []
let lineBounds = Bounds.empty()
words.forEach((word) => {
const nextLine = line.concat([word])
// Strip HTML if a raw string is passed
const text = this.props.rawHtml
? stripHTML(nextLine.join(" "))
: nextLine.join(" ")
const nextBounds = Bounds.forText(text, {
fontSize,
fontWeight,
})
if (
startsWithNewline(word) ||
(nextBounds.width + 10 > maxWidth && line.length >= 1)
) {
lines.push({
text: line.join(" "),
width: lineBounds.width,
height: lineBounds.height,
})
line = [word]
lineBounds = Bounds.forText(word, { fontSize, fontWeight })
} else {
line = nextLine
lineBounds = nextBounds
}
})
if (line.length > 0)
lines.push({
text: line.join(" "),
width: lineBounds.width,
height: lineBounds.height,
})
return lines
}
@computed get height(): number {
if (this.lines.length === 0) return 0
return (
this.lines.reduce((total, line) => total + line.height, 0) +
this.lineHeight * (this.lines.length - 1)
)
}
@computed get width(): number {
return max(this.lines.map((l) => l.width)) ?? 0
}
@computed get htmlStyle(): any {
const { fontSize, fontWeight, lineHeight } = this
return {
fontSize: fontSize.toFixed(2) + "px",
fontWeight: fontWeight,
lineHeight: lineHeight,
overflowY: "visible",
}
}
renderHTML(): JSX.Element | null {
const { props, lines } = this
if (lines.length === 0) return null
// if (props.raw)
// return <p style={{ fontSize: fontSize.toFixed(2) + "px", lineHeight: lineHeight, width: this.width }} {...options} dangerouslySetInnerHTML={{__html: text}}/>
// else
// return <p style={{ fontSize: fontSize.toFixed(2) + "px", lineHeight: lineHeight, width: this.width }} {...options}>{strip(text)}</p>
return (
<span>
{lines.map((line, index) => {
const content = props.rawHtml ? (
<span
dangerouslySetInnerHTML={{
__html: line.text,
}}
/>
) : props.linkifyText ? (
<span
dangerouslySetInnerHTML={{
__html: linkify(line.text),
}}
/>
) : (
<span>{line.text}</span>
)
return (
<React.Fragment key={index}>
{content}
<br />
</React.Fragment>
)
})}
</span>
)
}
render(
x: number,
y: number,
options?: React.SVGProps<SVGTextElement>
): JSX.Element | null {
//React.SVGAttributes<SVGTextElement>) {
const { props, lines, fontSize, fontWeight, lineHeight } = this
if (lines.length === 0) return null
const yOffset = y + lines[0].height - lines[0].height * 0.2
return (
<text
fontSize={fontSize.toFixed(2)}
fontWeight={fontWeight}
x={x.toFixed(1)}
y={yOffset.toFixed(1)}
{...options}
>
{lines.map((line, i) => {
if (props.rawHtml)
return (
<tspan
key={i}
x={x}
y={
yOffset +
(i === 0 ? 0 : lineHeight * fontSize * i)
}
dangerouslySetInnerHTML={{ __html: line.text }}
/>
)
else
return (
<tspan
key={i}
x={x}
y={
yOffset +
(i === 0 ? 0 : lineHeight * fontSize * i)
}
>
{line.text}
</tspan>
)
})}
</text>
)
}
}
|