diff options
| author | Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> | 2024-08-25 14:58:05 -0400 |
|---|---|---|
| committer | Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> | 2024-08-25 14:58:05 -0400 |
| commit | 42c07f05a4bb529c6f58b605cd5c98b6965afa49 (patch) | |
| tree | 4973b46a58361df1a6940c17f02b55655c4e6a3d /src | |
| parent | f5c2f5bc8710a965a0b52e2e414f62a2a459a94f (diff) | |
border radius
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 14 |
1 files changed, 11 insertions, 3 deletions
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 3a48ec957..6e3eed42d 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -55,12 +55,12 @@ export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: nu return style; } -export function wavyBorderPath(doc: Doc, pw: number, ph: number, inset: number = 0) { +export function wavyBorderPath(doc: Doc, pw: number, ph: number, rad: number = 0, inset: number = 0) { const layoutDoc = doc ? Doc.Layout(doc) : doc; const width = pw * inset; const height = ph * inset; - const radius = Math.min(Number(StrCast(layoutDoc._layout_borderRounding).replace('px', '')), (pw - 2 * width) / 2, (ph - 2 * height) / 2); + const radius = Math.min(rad, (pw - 2 * width) / 2, (ph - 2 * height) / 2); return ` M ${width + radius} ${height} @@ -205,7 +205,15 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & // !doc?.layout_isSvg && //case StyleProp. case StyleProp.BorderPath: { - const borderPath = doc?.type === 'image' && { path: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), NumCast(layoutDoc?._layout_borderWidth)/2), fill: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), 0.08), width: 3 }; + const docWidth = Number(doc?._width); + const borderWidth = Number(StrCast(layoutDoc?._layout_borderWidth)); + const ratio = borderWidth / docWidth; + const borderRadius = Number(StrCast(layoutDoc?._layout_borderRounding).replace('px', '')); + const radiusRatio = borderRadius / docWidth; + const radius = radiusRatio * borderWidth; + console.log(borderWidth, docWidth, ratio) + + const borderPath = doc?.type === 'image' && { path: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), radius, -ratio/2 ?? 0), fill: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), 0.08), width: 3 }; return !borderPath ? null : { |