diff options
| author | Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> | 2024-08-25 16:30:24 -0400 |
|---|---|---|
| committer | Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> | 2024-08-25 16:30:24 -0400 |
| commit | 143921c3ecee8dc0b7a91dfe725a3734d63a575e (patch) | |
| tree | 18f7493ccf6bebb95079ac7c7210e4ae199ae2fe /src/client/views/StyleProvider.tsx | |
| parent | 42c07f05a4bb529c6f58b605cd5c98b6965afa49 (diff) | |
border
Diffstat (limited to 'src/client/views/StyleProvider.tsx')
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 12 |
1 files changed, 5 insertions, 7 deletions
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 6e3eed42d..b7dbcf7a6 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -55,8 +55,7 @@ export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: nu return style; } -export function wavyBorderPath(doc: Doc, pw: number, ph: number, rad: number = 0, inset: number = 0) { - const layoutDoc = doc ? Doc.Layout(doc) : doc; +export function border(doc: Doc, pw: number, ph: number, rad: number = 0, inset: number = 0) { const width = pw * inset; const height = ph * inset; @@ -210,18 +209,17 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & 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 radius = radiusRatio * ((2 * borderWidth) + docWidth); - 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 }; + const borderPath = doc && border(doc, NumCast(doc._width), NumCast(doc._height), radius, -ratio/2 ?? 0); return !borderPath ? null : { - clipPath: `path('${borderPath.path}')`, + clipPath: `path('${borderPath}')`, jsx: ( <div key="border2" className="documentView-customBorder" style={{ pointerEvents: 'none' }}> <svg style={{ overflow: 'visible', height: '100%' }} viewBox={`0 0 ${PanelWidth?.()} ${PanelHeight?.()}`}> - <path d={borderPath.path} style={{ stroke: StrCast(layoutDoc?._layout_borderColor), fill: 'transparent', strokeWidth: `${StrCast(layoutDoc?._layout_borderWidth)}px` }} /> + <path d={borderPath} style={{ stroke: StrCast(layoutDoc?._layout_borderColor), fill: 'transparent', strokeWidth: `${StrCast(layoutDoc?._layout_borderWidth)}px` }} /> </svg> </div> ), |