diff options
| -rw-r--r-- | src/client/documents/Documents.ts | 5 | ||||
| -rw-r--r-- | src/client/views/ContextMenu.tsx | 9 | ||||
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 190 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 14 |
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} |