maxmatching algorithm

5 files changed, 139 insertions, 83 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index aecc79189..a4ba2978c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -237,6 +237,9 @@ export class DocumentOptions {
     dataViz?: string;
     dataViz_savedTemplates?: LISTt;
 
+    borderWidth?: NUMt = new NumInfo('Width of user-added border', false);
+    borderColor?: STRt = new StrInfo('Color of user-added border', false);
+
     layout?: string | Doc; // default layout string or template document
     layout_isSvg?: BOOLt = new BoolInfo('whether document decorations and other selections should handle pointerEvents for svg content or use doc bounding box');
     layout_keyValue?: STRt = new StrInfo('layout definition for showing keyValue view of document', false);
@@ -256,8 +259,6 @@ export class DocumentOptions {
     layout_hideContextMenu?: BOOLt = new BoolInfo('whether the context menu can be shown');
     layout_borderRounding?: string;
     _layout_borderRounding?: STRt = new StrInfo('amount of rounding to document view corners');
-    _layout_borderWidth?: NUMt = new NumInfo('Hey now', false);
-    _layout_borderColor?: STRt = new StrInfo('No no', false);
     _layout_modificationDate?: DATEt = new DateInfo('last modification date of doc layout', false);
     _layout_nativeDimEditable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers', false);
     _layout_reflowVertical?: BOOLt = new BoolInfo('permit vertical resizing with content "reflow"');
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index b80d97e81..f5654446d 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable default-param-last */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { DivHeight, DivWidth, returnFalse, setupMoveUpEvents } from '../../ClientUtils';
@@ -222,7 +222,6 @@ export class ContextMenu extends ObservableReactComponent<{}> {
 
     get colorPicker() {
         const doc = DocumentView.Selected().lastElement().Document;
-        const layoutDoc = doc ? Doc.Layout(doc) : doc;
 
         return (
             <div className='contextMenu-borderMenu' style={{position: 'absolute', left: this.pageX,
@@ -239,15 +238,15 @@ export class ContextMenu extends ObservableReactComponent<{}> {
                 </div>
                 <SketchPicker
                 onChange={undoable(
-                    action((col: ColorResult) => layoutDoc._layout_borderColor = col.hex),
+                    action((col: ColorResult) => doc.borderColor = col.hex),
                     'set stroke color property'
                 )}
                 presetColors={[]}
-                color={StrCast(layoutDoc._layout_borderColor)}
+                color={StrCast(doc.borderColor)}
                 />
                 <div className='bottom-box'>
                     <input className='max-min-selector' defaultValue={this._widthMinMax.min} onChange={e => this._widthMinMax.max = e.target.value}/>
-                    <input className='width-selector' type="range" min={this._widthMinMax.min} max={this._widthMinMax.max} value={this._selectorWidth} id="myRange" onChange={e => {layoutDoc._layout_borderWidth = e.target.value; this._selectorWidth = Number(e.target.value); console.log(layoutDoc._layout_borderWidth)}}/>
+                    <input className='width-selector' type="range" min={this._widthMinMax.min} max={this._widthMinMax.max} value={this._selectorWidth} id="myRange" onChange={e => runInAction(() => {doc.borderWidth = e.target.value; this._selectorWidth = Number(e.target.value)})}/>
                     <input className='max-min-selector' defaultValue={this._widthMinMax.max} onChange={e => this._widthMinMax.max = e.target.value}/>
                 </div>
             </div>
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index b7dbcf7a6..3ecb101f8 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -205,7 +205,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
         //case StyleProp.
         case StyleProp.BorderPath: {
             const docWidth = Number(doc?._width);
-            const borderWidth = Number(StrCast(layoutDoc?._layout_borderWidth));
+            const borderWidth = Number(StrCast(doc?.borderWidth));
             const ratio = borderWidth / docWidth;
             const borderRadius = Number(StrCast(layoutDoc?._layout_borderRounding).replace('px', ''));
             const radiusRatio = borderRadius / docWidth;
@@ -219,7 +219,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                         jsx: (
                             <div key="border2" className="documentView-customBorder" style={{ pointerEvents: 'none' }}>
                                 <svg style={{ overflow: 'visible', height: '100%' }} viewBox={`0 0 ${PanelWidth?.()} ${PanelHeight?.()}`}>
-                                    <path d={borderPath} style={{ stroke: StrCast(layoutDoc?._layout_borderColor), fill: 'transparent', strokeWidth: `${StrCast(layoutDoc?._layout_borderWidth)}px` }} />
+                                    <path d={borderPath} style={{ stroke: StrCast(doc?.borderColor), fill: 'transparent', strokeWidth: `${StrCast(doc?.borderWidth)}px` }} />
                                 </svg>
                             </div>
                         ),
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 7df445b88..ffc4dd0b1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -419,6 +419,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         // mainCollection.addDocument(doc);
         //this._dataViz?.getRandomSample();
+
+        console.log(this.maxMatches(3, Array.from([[2], [1], [2]])));
     }
 
     get templatesPreviewContents(){
@@ -810,6 +812,41 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this.forceUpdate();
     }
 
+    findMatches = () => {
+
+    }
+
+    maxMatches = (fieldsCt: number, matches: number[][]) => {
+        const used: boolean[] = Array(fieldsCt).fill(false);
+        const mt: number[] = Array(fieldsCt).fill(-1);
+
+        const augmentingPath = (v: number): boolean => {
+            if (used[v]) return false;
+            used[v] = true;
+            for (const to of matches[v]) {
+                if (mt[to] === -1 || augmentingPath(mt[to])) {
+                    mt[to] = v;
+                    return true;
+                }
+            }
+            return false;
+        }
+    
+        for (let v = 0; v < fieldsCt; ++v) {
+            console.log(v)
+            used.fill(false);
+            augmentingPath(v);
+        }
+
+        let numMatches: number = 0;
+
+        for (let i = 0; i < fieldsCt; ++i) {
+            if (mt[i] !== -1) ++numMatches;
+        }
+
+        return numMatches;
+    }
+
     get dashboardContents(){
         return (
         <div className='docCreatorMenu-dashboard-view'>
@@ -985,26 +1022,31 @@ enum FieldSize {
     HUGE = 'huge'
 }
 
+type Field = {
+    tl: [number, number], 
+    br: [number, number], 
+    types: FieldType[], 
+    sizes?: FieldSize[], 
+    opts: FieldOpts;
+};
+
 export interface TemplateDocInfos {
     height: number;
     width: number;
-    fields: {tl: [number, number], br: [number, number], types: FieldType[], sizes?: FieldSize[]}[];
-}
-
-export interface TemplateDocField {
-    coordinates: {tl: [number, number], br: [number, number]};
-    getDoc: (parentWidth: number, parentHeight: number, title: string, content: string) => Doc;
+    fields: Field[];
 }
 
 export interface FieldOpts {
     backgroundColor?: string;
-    roundedCorners?: boolean;
-    vertCenteredText?: boolean;
-    horizCenteredText?: boolean;
-    transparency?: number;
+    color?: string;
+    cornerRounding?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    contentXCentering?: 'left' | 'center' | 'right';
+    contentYCentering?: 'top' | 'center' | 'bottom';
+    opacity?: number;
     rotation?: number;
     //animation?: boolean;
-    fontColor?: string;
     fontBold?: boolean;
     fontTransform?: 'toUpper' | 'toLower';
 }
@@ -1023,7 +1065,9 @@ export class FieldFuncs {
     public static TextField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
         const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
-        const doc = Docs.Create.TextDocument(content, {   
+        const bool = true;
+
+        const docWithBasicOpts = (Docs.Create.TextDocument)(content, {   
             _height: height, 
             _width: width, 
             title: title, 
@@ -1031,11 +1075,15 @@ export class FieldFuncs {
             y: coord.y, 
             _text_fontSize: `${height/2}` ,
             backgroundColor: opts.backgroundColor ?? '',
-            
-        
-        })
+            color: opts.color,
+            _layout_borderRounding: `${opts.cornerRounding}`,
+            borderWidth: opts.borderWidth,
+            borderColor: opts.borderColor,
+            opacity: opts.opacity,
+            _layout_centered: opts.contentXCentering === 'center' ? true : false,
+        });
 
-        return doc;
+        return docWithBasicOpts;
     }
 
     public static ImageField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string) => {
@@ -1071,70 +1119,82 @@ export class TemplateLayouts {
             tl: [-.6, -.9], 
             br: [.6, -.8], 
             types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
+            sizes: [FieldSize.TINY],
+            opts: {
+
+            }
         }, {
             tl: [-.9, -.7], 
             br: [.9, .2], 
             types: [FieldType.TEXT, FieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            opts: {
+
+            }
         }, {
             tl: [-.6, .3], 
             br: [.6, .4], 
             types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
+            sizes: [FieldSize.TINY],
+            opts: {
+
+            }
         }, {
             tl: [-.9, .5], 
             br: [.9, .9], 
             types: [FieldType.TEXT, FieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-        }]
-    };
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            opts: {
 
-    public static FourField002: TemplateDocInfos = {
-        width: 450, 
-        height: 600, 
-        fields: [{
-            tl: [-.6, -.9], 
-            br: [.6, -.8], 
-            types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
-        }, {
-            tl: [-.9, -.7], 
-            br: [.9, .2], 
-            types: [FieldType.TEXT, FieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-        }, {
-            tl: [-.9, .3], 
-            br: [-.05, .9], 
-            types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
-        }, {
-            tl: [.05, .3], 
-            br: [.9, .9], 
-            types: [FieldType.TEXT, FieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+            }
         }]
     };
 
-    public static TwoFieldPlusCarousel: TemplateDocInfos = {
-        width: 500, 
-        height: 600, 
-        fields: [{
-            tl: [-.9, -.99], 
-            br: [.9, -.7], 
-            types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
-        }, {
-            tl: [-.9, -.65], 
-            br: [.9, .35], 
-            types: [],
-            sizes: []
-        }, {
-            tl: [-.9, .4], 
-            br: [.9, .95], 
-            types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
-        }]
-    };
+//     public static FourField002: TemplateDocInfos = {
+//         width: 450, 
+//         height: 600, 
+//         fields: [{
+//             tl: [-.6, -.9], 
+//             br: [.6, -.8], 
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }, {
+//             tl: [-.9, -.7], 
+//             br: [.9, .2], 
+//             types: [FieldType.TEXT, FieldType.VISUAL],
+//             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+//         }, {
+//             tl: [-.9, .3], 
+//             br: [-.05, .9], 
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }, {
+//             tl: [.05, .3], 
+//             br: [.9, .9], 
+//             types: [FieldType.TEXT, FieldType.VISUAL],
+//             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+//         }]
+//     };
+
+//     public static TwoFieldPlusCarousel: TemplateDocInfos = {
+//         width: 500, 
+//         height: 600, 
+//         fields: [{
+//             tl: [-.9, -.99], 
+//             br: [.9, -.7], 
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }, {
+//             tl: [-.9, -.65], 
+//             br: [.9, .35], 
+//             types: [],
+//             sizes: []
+//         }, {
+//             tl: [-.9, .4], 
+//             br: [.9, .95], 
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }]
+//     };
 
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3c898dea2..5af6e65de 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -948,12 +948,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
 
         return (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-            // <div style={{position: 'relative'}}>
-            //     <div className='docView-border-top' style={{width: `${this.layoutDoc._width}px`, height: '100px', backgroundColor: 'black'}}/>
-            //     <div className='docView-border-right' style={{position: 'absolute', right: '-10px', width: '10px', height: `${this.layoutDoc._height}px`, backgroundColor: 'black'}}/>
-            //     <div className='docView-border-left' style={{position: 'absolute', left: '-10px', width: '10px', height: `${this.layoutDoc._height}px`, backgroundColor: 'black'}}/>
-            //     <div className='docView-border-bottom' style={{position: 'absolute', bottom: '-10px', height: '100px', width: `${this.layoutDoc._width}px`, backgroundColor: 'black'}}/>
-            <div
+                <div
                     className={`${DocumentView.ROOT_DIV} docView-hack`}
                     ref={this._mainCont}
                     onContextMenu={this.onContextMenu}
@@ -969,7 +964,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     {this._componentView?.isUnstyledView?.() || this.Document.type === DocumentType.CONFIG ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.Document[Animation], this.Document)}
                     {borderPath?.jsx}
                 </div>
-            // </div>
         );
     }
 
@@ -1138,7 +1132,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
         return Math.max(minTextScale, this._props.PanelHeight() / (this.effectiveNativeHeight || 1)); // height-limited or unscaled
     }
     @computed private get panelWidth() {
-        return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this._props.PanelWidth();
+        return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling: this._props.PanelWidth();
     }
     @computed private get panelHeight() {
         if (this.effectiveNativeHeight && (!this.layout_fitWidth || !this.layoutDoc.layout_reflowVertical)) {
@@ -1449,6 +1443,8 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
 
     render() {
         TraceMobx();
+        const borderWidth = 50/*Number(StrCast(this.layoutDoc.layout_borderWidth).replace('px', ''))*/;
+        console.log(this._props.PanelWidth(), borderWidth)
         const xshift = Math.abs(this.Xshift) <= 0.001 ? this._props.PanelWidth() : undefined;
         const yshift = Math.abs(this.Yshift) <= 0.001 ? this._props.PanelHeight() : undefined;
 
@@ -1468,7 +1464,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
                         style={{
                             transform: `translate(${this.centeringX}px, ${this.centeringY}px)`,
                             width: xshift ?? `${this._props.PanelWidth() - this.Xshift * 2}px`,
-                            height: this._props.forceAutoHeight ? undefined : yshift ?? (this.layout_fitWidth ? `${this.panelHeight}px` : `${(this.effectiveNativeHeight / this.effectiveNativeWidth) * this._props.PanelWidth()}px`),
+                            height: this._props.forceAutoHeight ? '1000px' : yshift ?? (this.layout_fitWidth ? `${this.panelHeight + 500}px` : `${(this.effectiveNativeHeight / this.effectiveNativeWidth) * this._props.PanelWidth() + 500}px`),
                         }}>
                         <DocumentViewInternal
                             {...this._props}