From 2bb5667b10a8c402f8ec75c632ca3fdabe642419 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 15 Dec 2019 18:25:03 -0500 Subject: added LOD detail switching for collection free form views --- .../views/collections/collectionFreeForm/CollectionFreeFormView.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 070d4aa65..f8a9e49d8 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -52,6 +52,8 @@ left: 0; width: 100%; height: 100%; + align-items: center; + display: flex; } // selection border...? -- cgit v1.2.3-70-g09d2 From e703ad6350a65403b0693542069199aa3a777dfd Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 16 Dec 2019 10:46:32 -0500 Subject: fixed styling of freeformview placeholder --- .../collections/collectionFreeForm/CollectionFreeFormView.scss | 8 ++++++++ .../collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index f8a9e49d8..45eefe6d3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -28,6 +28,14 @@ // touch action none means that the browser will handle none of the touch actions. this allows us to implement our own actions. touch-action: none; + .collectionfreeformview-placeholderSpan { + font-size: 32; + background: gray; + margin: auto; + display: flex; + text-align: center; + } + .collectionfreeformview>.jsx-parser { position: inherit; height: 100%; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index fc507bf5e..67f7dd602 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -884,7 +884,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { } @computed get placeholder() { return
- {this.props.Document.title}>
; + {this.props.Document.title}; } @computed get marqueeView() { return Date: Mon, 16 Dec 2019 10:52:34 -0500 Subject: from last --- .../collectionFreeForm/CollectionFreeFormView.scss | 14 ++++++++++---- .../collectionFreeForm/CollectionFreeFormView.tsx | 5 +++-- 2 files changed, 13 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 45eefe6d3..2e98dbc13 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -28,12 +28,18 @@ // touch action none means that the browser will handle none of the touch actions. this allows us to implement our own actions. touch-action: none; - .collectionfreeformview-placeholderSpan { - font-size: 32; + .collectionfreeformview-placeholder { background: gray; - margin: auto; + width: 100%; + height: 100%; display: flex; - text-align: center; + align-items: center; + .collectionfreeformview-placeholderSpan { + font-size: 32; + display: flex; + text-align: center; + background: #80808069; + } } .collectionfreeformview>.jsx-parser { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 67f7dd602..e9c3f6b0f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -883,8 +883,9 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { return eles; } @computed get placeholder() { - return
- {this.props.Document.title}
; + return
+ {this.props.Document.title} +
; } @computed get marqueeView() { return Date: Mon, 16 Dec 2019 13:42:44 -0500 Subject: from last --- .../views/collections/collectionFreeForm/CollectionFreeFormView.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 2e98dbc13..58fb81453 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -38,6 +38,7 @@ font-size: 32; display: flex; text-align: center; + margin: auto; background: #80808069; } } -- cgit v1.2.3-70-g09d2 From 0c9c2b9fef0b735e4d8398e2a137feb5a6db203a Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 31 Jan 2020 12:39:59 -0500 Subject: improved labeling for pivot viewer --- src/Utils.ts | 4 +-- .../CollectionFreeFormLayoutEngines.tsx | 38 ++++++++++------------ .../collectionFreeForm/CollectionFreeFormView.scss | 2 ++ .../collectionFreeForm/CollectionFreeFormView.tsx | 6 ++-- .../collections/collectionFreeForm/MarqueeView.tsx | 4 +-- 5 files changed, 27 insertions(+), 27 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss') diff --git a/src/Utils.ts b/src/Utils.ts index 4deac9035..13bdb990d 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -328,10 +328,10 @@ export function timenow() { return now.toLocaleDateString() + ' ' + h + ':' + m + ' ' + ampm; } -export function aggregateBounds(boundsList: { x: number, y: number, width: number, height: number }[], xpad: number, ypad: number) { +export function aggregateBounds(boundsList: { x: number, y: number, width: number, height?: number }[], xpad: number, ypad: number) { const bounds = boundsList.reduce((bounds, b) => { const [sptX, sptY] = [b.x, b.y]; - const [bptX, bptY] = [sptX + b.width, sptY + b.height]; + const [bptX, bptY] = [sptX + b.width, sptY + (b.height || 0)]; return { x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y), r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b) diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx index 18ca71c2a..2069cf832 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx @@ -17,7 +17,7 @@ interface PivotData { x: number; y: number; width: number; - height: number; + height?: number; fontSize: number; } @@ -26,7 +26,7 @@ export interface ViewDefBounds { y: number; z?: number; width: number; - height: number; + height?: number; transition?: string; } @@ -45,7 +45,6 @@ function toLabel(target: FieldResult) { export function computePivotLayout( poolData: ObservableMap, pivotDoc: Doc, - pwidth: number, pheight: number, childDocs: Doc[], childPairs: { layout: Doc, data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: any) => ViewDefResult[] ) { @@ -77,10 +76,9 @@ export function computePivotLayout( type: "text", text: toLabel(key), x, - y: pivotAxisWidth + 50, + y: pivotAxisWidth, width: pivotAxisWidth * expander * numCols, - height: NumCast(pivotDoc.pivotFontSize, 10), - fontSize: NumCast(pivotDoc.pivotFontSize, 10) + fontSize: NumCast(pivotDoc.pivotFontSize, 20) }); for (const doc of val) { const layoutDoc = Doc.Layout(doc); @@ -105,20 +103,16 @@ export function computePivotLayout( x += pivotAxisWidth * (numCols * expander + gap); }); - const grpEles = groupNames.map(gn => { return { x: gn.x, y: gn.y, width: gn.width, height: gn.height }; }); - const docEles = childPairs.map(pair => { - const newPos = docMap.get(pair.layout) || { x: NumCast(pair.layout.x), y: NumCast(pair.layout.y) }; // new pos is computed pos, or pos written to the document's fields - return { - x: newPos.x, - y: newPos.y, - width: NumCast(pair.layout._width), - height: NumCast(pair.layout._height) - }; - } + const grpEles = groupNames.map(gn => { return { x: gn.x, y: gn.y, width: gn.width, height: undefined } as PivotData; }); + const docEles = childPairs.map(pair => + docMap.get(pair.layout) || { x: NumCast(pair.layout.x), y: NumCast(pair.layout.y), width: NumCast(pair.layout._width), height: NumCast(pair.layout._height) } // new pos is computed pos, or pos written to the document's fields ); + const minLabelHeight = 56; const aggBounds = aggregateBounds(docEles.concat(grpEles), 0, 0); - - const scale = Math.min(pheight / (aggBounds.b - aggBounds.y), pwidth / (aggBounds.r - aggBounds.x)); + const wscale = panelDim[0] / (aggBounds.r - aggBounds.x); + const scale = wscale * (aggBounds.b - aggBounds.y) > panelDim[1] - (2 * minLabelHeight) ? (panelDim[1] - (2 * minLabelHeight)) / (aggBounds.b - aggBounds.y) : wscale; + const centerY = ((panelDim[1] - 2 * minLabelHeight) - (aggBounds.b - aggBounds.y) * scale) / 2; + const centerX = (panelDim[0] - (aggBounds.r - aggBounds.x) * scale) / 2; childPairs.map(pair => { const fallbackPos = { @@ -129,13 +123,17 @@ export function computePivotLayout( height: NumCast(pair.layout._height) }; const newPosRaw = docMap.get(pair.layout) || fallbackPos; // new pos is computed pos, or pos written to the document's fields - const newPos = { x: newPosRaw.x * scale, y: newPosRaw.y * scale, z: newPosRaw.z, width: newPosRaw.width * scale, height: newPosRaw.height * scale }; + const newPos = { x: newPosRaw.x * scale + centerX, y: (newPosRaw.y - aggBounds.y) * scale + centerY, z: newPosRaw.z, width: newPosRaw.width * scale, height: newPosRaw.height! * scale }; const lastPos = poolData.get(pair.layout[Id]); // last computed pos if (!lastPos || newPos.x !== lastPos.x || newPos.y !== lastPos.y || newPos.z !== lastPos.z || newPos.width !== lastPos.width || newPos.height !== lastPos.height) { runInAction(() => poolData.set(pair.layout[Id], { transition: "transform 1s", ...newPos })); } }); - return { elements: viewDefsToJSX(groupNames.map(gname => { return { type: gname.type, text: gname.text, x: gname.x * scale, y: gname.y * scale, width: gname.width * scale, height: gname.height, fontSize: gname.fontSize } })) }; + return { + elements: viewDefsToJSX([{ type: "text", text: "", x: 0, y: -aggBounds.y * scale - minLabelHeight, width: panelDim[0], height: panelDim[1], fontSize: 1 }].concat(groupNames.map(gname => { + return { type: gname.type, text: gname.text, x: gname.x * scale + centerX, y: (gname.y - aggBounds.y) * scale + centerY, width: gname.width * scale, height: Math.max(minLabelHeight, centerY), fontSize: gname.fontSize }; + }))) + }; } export function AddCustomFreeFormLayout(doc: Doc, dataKey: string): () => void { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 58fb81453..0b5e44ccb 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -22,6 +22,8 @@ .collectionFreeform-customText { position: absolute; text-align: center; + overflow-y: auto; + overflow-x: hidden; } .collectionfreeformview-container { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 90bed2899..21826ecc5 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -758,12 +758,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { const width = Cast(viewDef.width, "number"); const height = Cast(viewDef.height, "number"); const fontSize = Cast(viewDef.fontSize, "number"); - return [text, x, y, width, height].some(val => val === undefined) ? undefined : + return [text, x, y, width].some(val => val === undefined) ? undefined : { ele:
{text}
, - bounds: { x: x!, y: y!, z: z, width: width!, height: height! } + bounds: { x: x!, y: y!, z: z, width: width!, height: height } }; } } @@ -776,7 +776,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { }.bind(this)); doPivotLayout(poolData: ObservableMap) { - return computePivotLayout(poolData, this.props.Document, this.props.PanelWidth(), this.props.PanelHeight(), this.childDocs, + return computePivotLayout(poolData, this.props.Document, this.childDocs, this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)), [this.props.PanelWidth(), this.props.PanelHeight()], this.viewDefsToJSX); } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index ef2fc2ad1..1b54a92eb 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -354,7 +354,7 @@ export class MarqueeView extends React.Component { const bounds = this.Bounds; const selected = this.marqueeSelect(false); - const newCollection = this.getCollection(selected); + const newCollection = this.getCollection(selected, false); selected.map(d => { this.props.removeDocument(d); -- cgit v1.2.3-70-g09d2