border

3 files changed, 11 insertions, 9 deletions

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 9472fb95c..dca00c2bf 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -223,7 +223,8 @@ export class ContextMenu extends ObservableReactComponent<{}> {
         const layoutDoc = doc ? Doc.Layout(doc) : doc;
 
         return (
-            <div className='contextMenu-borderMenu' style={{position: 'absolute', right: `${this._pageX}`, top: `${this._pageY}`}}>
+            <div className='contextMenu-borderMenu' style={{position: 'absolute', left: this.pageX,
+            ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),}}>
                 <div className='top-bar'>
                     <button className='close-menu' onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction,
                         undoable(clickEv => {
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>
                         ),
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index fe6d529ba..3c898dea2 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -547,6 +547,10 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             return;
         }
 
+        if (!Doc.IsSystem(this.Document)) {
+            cm.addItem({ description: 'Add border', event: () => ContextMenu.Instance.setColorPickerDisplay(true), icon: 'square', colorPicker: true });
+        }
+
         const customScripts = Cast(this.Document.contextMenuScripts, listSpec(ScriptField), []);
         StrListCast(this.Document.contextMenuLabels).forEach((label, i) =>
             cm.addItem({ description: label, event: () => customScripts[i]?.script.run({ documentView: this, this: this.Document, scriptContext: this._props.scriptContext }), icon: 'sticky-note' })
@@ -634,7 +638,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     moreItems.push({ description: 'Make View of Metadata Field', event: () => Doc.MakeMetadataFieldTemplate(this.Document, this._props.TemplateDataDocument), icon: 'concierge-bell' });
                     moreItems.push({ description: `${this.Document._chromeHidden ? 'Show' : 'Hide'} Chrome`, event: () => { this.Document._chromeHidden = !this.Document._chromeHidden; }, icon: 'project-diagram' }); // prettier-ignore
                     moreItems.push({ description: 'Copy ID', event: () => ClientUtils.CopyText(Doc.globalServerPath(this.Document)), icon: 'fingerprint' });
-                    moreItems.push({ description: 'Add border', event: () => ContextMenu.Instance.setColorPickerDisplay(true), icon: 'square', colorPicker: true });
                 }
             }