From f00a5326fa331859db131bb1d8988db93602830b Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Tue, 27 Aug 2024 19:16:28 -0400 Subject: maxmatching algorithm --- src/client/documents/Documents.ts | 5 +- src/client/views/ContextMenu.tsx | 9 +- src/client/views/StyleProvider.tsx | 4 +- .../views/nodes/DataVizBox/DocCreatorMenu.tsx | 190 ++++++++++++++------- src/client/views/nodes/DocumentView.tsx | 14 +- 5 files changed, 139 insertions(+), 83 deletions(-) (limited to 'src') 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 (
{
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)} />
this._widthMinMax.max = e.target.value}/> - {layoutDoc._layout_borderWidth = e.target.value; this._selectorWidth = Number(e.target.value); console.log(layoutDoc._layout_borderWidth)}}/> + runInAction(() => {doc.borderWidth = e.target.value; this._selectorWidth = Number(e.target.value)})}/> this._widthMinMax.max = e.target.value}/>
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, props: Opt, props: Opt - + ), 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 { + + } + + 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 (
@@ -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 - //
- //
- //
- //
-
- //
); } @@ -1138,7 +1132,7 @@ export class DocumentView extends DocComponent() { 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() { 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() { 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`), }}>