From 42c07f05a4bb529c6f58b605cd5c98b6965afa49 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 25 Aug 2024 14:58:05 -0400
Subject: border radius

---
 src/client/views/StyleProvider.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'src')

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
                     : {
-- 
cgit v1.2.3-70-g09d2