From 810f6b9b2737f3617910e498f577499fcbf3ffab Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 17 Jan 2020 10:33:05 -0500 Subject: moved multilcolumnview into collections directory --- .../collections/CollectionMulticolumnView.tsx | 232 +++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 src/client/views/collections/CollectionMulticolumnView.tsx (limited to 'src/client/views/collections/CollectionMulticolumnView.tsx') diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx new file mode 100644 index 000000000..19a7b1123 --- /dev/null +++ b/src/client/views/collections/CollectionMulticolumnView.tsx @@ -0,0 +1,232 @@ +import { observer } from 'mobx-react'; +import { makeInterface } from '../../../new_fields/Schema'; +import { documentSchema } from '../../../new_fields/documentSchemas'; +import { CollectionSubView } from './CollectionSubView'; +import * as React from "react"; +import { Doc } from '../../../new_fields/Doc'; +import { NumCast, StrCast } from '../../../new_fields/Types'; +import { ContentFittingDocumentView } from './../nodes/ContentFittingDocumentView'; +import { Utils } from '../../../Utils'; +import "./collectionMulticolumnView.scss"; +import { computed } from 'mobx'; + +type MulticolumnDocument = makeInterface<[typeof documentSchema]>; +const MulticolumnDocument = makeInterface(documentSchema); + +interface Unresolved { + target: Doc; + magnitude: number; + unit: string; +} + +interface Resolved { + target: Doc; + pixels: number; +} + +interface LayoutData { + unresolved: Unresolved[]; + numFixed: number; + numRatio: number; + starSum: number; +} + +const resolvedUnits = ["*", "px"]; +const resizerWidth = 2; + +@observer +export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocument) { + @computed + private get resolvedLayoutInformation(): LayoutData { + const unresolved: Unresolved[] = []; + let starSum = 0, numFixed = 0, numRatio = 0; + for (const target of this.childDocs) { + const unit = StrCast(target.widthUnit); + const magnitude = NumCast(target.widthMagnitude); + if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) { + if (unit === "*") { + starSum += magnitude; + numRatio++; + } else { + numFixed++; + } + unresolved.push({ target, magnitude, unit }); + } + // otherwise, the particular configuration entry is ignored and the remaining + // space is allocated as if the document were absent from the configuration list + } + return { unresolved, numRatio, numFixed, starSum }; + } + + /** + * This returns the total quantity, in pixels, that this + * view needs to reserve for child documents that have + * (with higher priority) requested a fixed pixel width. + * + * If the underlying resolvedLayoutInformation returns null + * because we're waiting on promises to resolve, this value will be undefined as well. + */ + @computed + private get totalFixedAllocation(): number | undefined { + return this.resolvedLayoutInformation?.unresolved.reduce( + (sum, { magnitude, unit }) => sum + (unit === "px" ? magnitude : 0), 0); + } + + /** + * This returns the total quantity, in pixels, that this + * view needs to reserve for child documents that have + * (with lower priority) requested a certain relative proportion of the + * remaining pixel width not allocated for fixed widths. + * + * If the underlying totalFixedAllocation returns undefined + * because we're waiting indirectly on promises to resolve, this value will be undefined as well. + */ + @computed + private get totalRatioAllocation(): number | undefined { + const layoutInfoLen = this.resolvedLayoutInformation?.unresolved.length; + if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) + return this.props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1)); + } + + /** + * This returns the total quantity, in pixels, that + * 1* (relative / star unit) is worth. For example, + * if the configuration has three documents, with, respectively, + * widths of 2*, 2* and 1*, and the panel width returns 1000px, + * this accessor returns 1000 / (2 + 2 + 1), or 200px. + * Elsewhere, this is then multiplied by each relative-width + * document's (potentially decimal) * count to compute its actual width (400px, 400px and 200px). + * + * If the underlying totalRatioAllocation or this.resolveLayoutInformation return undefined + * because we're waiting indirectly on promises to resolve, this value will be undefined as well. + */ + @computed + private get columnUnitLength(): number | undefined { + if (this.resolvedLayoutInformation && this.totalRatioAllocation !== undefined) { + return this.totalRatioAllocation / this.resolvedLayoutInformation.starSum; + } + } + + @computed + private get contents(): JSX.Element[] | null { + const layout = this.resolvedLayoutInformation; + const columnUnitLength = this.columnUnitLength; + if (layout === null || columnUnitLength === undefined) { + return (null); // we're still waiting on promises to resolve + } + const resolved: Resolved[] = []; + layout.unresolved.forEach(item => { + const { unit, magnitude, ...remaining } = item; + let width = magnitude; + if (unit === "*") { + width = magnitude * columnUnitLength; + } + resolved.push({ pixels: width, ...remaining }); + }); + const collector: JSX.Element[] = []; + for (let i = 0; i < resolved.length; i++) { + const { target, pixels } = resolved[i]; + collector.push( +
+ pixels} + getTransform={this.props.ScreenToLocalTransform} + /> + {NumCast(target.widthMagnitude).toFixed(3)} {StrCast(target.widthUnit)} +
, + + ); + } + collector.pop(); // removes the final extraneous resize bar + return collector; + } + + render(): JSX.Element { + return ( +
+ {this.contents} +
+ ); + } + +} + +interface SpacerProps { + width: number; + columnUnitLength: number; + toLeft?: Doc; + toRight?: Doc; +} + +class ResizeBar extends React.Component { + + private registerResizing = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + window.removeEventListener("pointermove", this.onPointerMove); + window.removeEventListener("pointerup", this.onPointerUp); + window.addEventListener("pointermove", this.onPointerMove); + window.addEventListener("pointerup", this.onPointerUp); + } + + private onPointerMove = ({ movementX }: PointerEvent) => { + const { toLeft, toRight, columnUnitLength } = this.props; + const target = movementX > 0 ? toRight : toLeft; + if (target) { + const { widthUnit, widthMagnitude } = target; + if (widthUnit === "*") { + target.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / columnUnitLength; + } + } + } + + private get opacity() { + const { toLeft, toRight } = this.props; + if (toLeft && toRight) { + if (StrCast(toLeft.widthUnit) === "px" && StrCast(toRight.widthUnit) === "px") { + return 0; + } + return 0.4; + } else if (toLeft) { + if (StrCast(toLeft.widthUnit) === "px") { + return 0; + } + return 0.4; + } else if (toRight) { + if (StrCast(toRight.widthUnit) === "px") { + return 0; + } + return 0.4; + } + return 0; + } + + private onPointerUp = () => { + window.removeEventListener("pointermove", this.onPointerMove); + window.removeEventListener("pointerup", this.onPointerUp); + } + + render() { + return ( +
+ ); + } + +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From fc4dd8c7d361bc848b6b27c67d5da26b8aab408e Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 17 Jan 2020 10:58:19 -0500 Subject: adjustments to multiColumnView to support templates --- src/client/views/collections/CollectionMulticolumnView.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/CollectionMulticolumnView.tsx') diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx index 19a7b1123..157c5e367 100644 --- a/src/client/views/collections/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/CollectionMulticolumnView.tsx @@ -40,9 +40,9 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu private get resolvedLayoutInformation(): LayoutData { const unresolved: Unresolved[] = []; let starSum = 0, numFixed = 0, numRatio = 0; - for (const target of this.childDocs) { - const unit = StrCast(target.widthUnit); - const magnitude = NumCast(target.widthMagnitude); + for (const pair of this.childLayoutPairs) { + const unit = StrCast(pair.layout.widthUnit); + const magnitude = NumCast(pair.layout.widthMagnitude); if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) { if (unit === "*") { starSum += magnitude; @@ -50,7 +50,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu } else { numFixed++; } - unresolved.push({ target, magnitude, unit }); + unresolved.push({ target: pair.layout, magnitude, unit }); } // otherwise, the particular configuration entry is ignored and the remaining // space is allocated as if the document were absent from the configuration list @@ -132,7 +132,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu {...this.props} key={Utils.GenerateGuid()} Document={target} - DataDocument={undefined} + DataDocument={target.resolvedDataDoc as Doc} PanelWidth={() => pixels} getTransform={this.props.ScreenToLocalTransform} /> -- cgit v1.2.3-70-g09d2 From 9af3c5967e45b98186a2862a1f23e2494630ddb3 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 17 Jan 2020 11:32:56 -0500 Subject: fixed placement of documentdecorations for multicolumnview --- src/client/views/collections/CollectionMulticolumnView.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/CollectionMulticolumnView.tsx') diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx index 157c5e367..a04df171a 100644 --- a/src/client/views/collections/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/CollectionMulticolumnView.tsx @@ -124,8 +124,10 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu resolved.push({ pixels: width, ...remaining }); }); const collector: JSX.Element[] = []; + let offset = 0; for (let i = 0; i < resolved.length; i++) { const { target, pixels } = resolved[i]; + const shiftX = offset; collector.push(
pixels} - getTransform={this.props.ScreenToLocalTransform} + getTransform={() => this.props.ScreenToLocalTransform().translate(-shiftX, 0)} /> {NumCast(target.widthMagnitude).toFixed(3)} {StrCast(target.widthUnit)}
, @@ -146,6 +148,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu toRight={resolved[i + 1]?.target} /> ); + offset += pixels + resizerWidth; } collector.pop(); // removes the final extraneous resize bar return collector; -- cgit v1.2.3-70-g09d2 From f783e6cd66d4a7e303bd327d028076e3d76815bc Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Fri, 17 Jan 2020 11:45:49 -0500 Subject: drop target added to mc view --- src/client/views/collections/CollectionMulticolumnView.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/CollectionMulticolumnView.tsx') diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx index 157c5e367..4744de34c 100644 --- a/src/client/views/collections/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/CollectionMulticolumnView.tsx @@ -36,6 +36,7 @@ const resizerWidth = 2; @observer export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocument) { + @computed private get resolvedLayoutInformation(): LayoutData { const unresolved: Unresolved[] = []; @@ -84,8 +85,9 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu @computed private get totalRatioAllocation(): number | undefined { const layoutInfoLen = this.resolvedLayoutInformation?.unresolved.length; - if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) + if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) { return this.props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1)); + } } /** @@ -153,7 +155,10 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu render(): JSX.Element { return ( -
+
{this.contents}
); -- cgit v1.2.3-70-g09d2 From 203ec5b3570c96f22b1d9517770e36c695677f5e Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Fri, 17 Jan 2020 13:14:22 -0500 Subject: multicolumn performance improvements and refactor --- .../collections/CollectionMulticolumnView.scss | 2 +- .../collections/CollectionMulticolumnView.tsx | 149 ++++++++++++++------- 2 files changed, 105 insertions(+), 46 deletions(-) (limited to 'src/client/views/collections/CollectionMulticolumnView.tsx') diff --git a/src/client/views/collections/CollectionMulticolumnView.scss b/src/client/views/collections/CollectionMulticolumnView.scss index 120603a0b..a54af748b 100644 --- a/src/client/views/collections/CollectionMulticolumnView.scss +++ b/src/client/views/collections/CollectionMulticolumnView.scss @@ -4,7 +4,7 @@ height: 100%; overflow: hidden; - .fish { + .document-wrapper { display: flex; flex-direction: column; diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx index 51064d5c3..2cb91f239 100644 --- a/src/client/views/collections/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/CollectionMulticolumnView.tsx @@ -4,11 +4,12 @@ import { documentSchema } from '../../../new_fields/documentSchemas'; import { CollectionSubView } from './CollectionSubView'; import * as React from "react"; import { Doc } from '../../../new_fields/Doc'; -import { NumCast, StrCast } from '../../../new_fields/Types'; +import { NumCast, StrCast, BoolCast } from '../../../new_fields/Types'; import { ContentFittingDocumentView } from './../nodes/ContentFittingDocumentView'; import { Utils } from '../../../Utils'; import "./collectionMulticolumnView.scss"; -import { computed } from 'mobx'; +import { computed, trace } from 'mobx'; +import { Transform } from '../../util/Transform'; type MulticolumnDocument = makeInterface<[typeof documentSchema]>; const MulticolumnDocument = makeInterface(documentSchema); @@ -33,17 +34,24 @@ interface LayoutData { const resolvedUnits = ["*", "px"]; const resizerWidth = 2; +const resizerOpacity = 0.4; @observer export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocument) { + @computed + private get ratioDefinedDocs() { + return this.childLayoutPairs.map(({ layout }) => layout).filter(({ widthUnit }) => StrCast(widthUnit) === "*"); + } + @computed private get resolvedLayoutInformation(): LayoutData { const unresolved: Unresolved[] = []; let starSum = 0, numFixed = 0, numRatio = 0; - for (const pair of this.childLayoutPairs) { - const unit = StrCast(pair.layout.widthUnit); - const magnitude = NumCast(pair.layout.widthMagnitude); + + for (const { layout } of this.childLayoutPairs) { + const unit = StrCast(layout.widthUnit); + const magnitude = NumCast(layout.widthMagnitude); if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) { if (unit === "*") { starSum += magnitude; @@ -51,11 +59,17 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu } else { numFixed++; } - unresolved.push({ target: pair.layout, magnitude, unit }); + unresolved.push({ target: layout, magnitude, unit }); } // otherwise, the particular configuration entry is ignored and the remaining // space is allocated as if the document were absent from the configuration list } + + setTimeout(() => { + const minimum = Math.min(...this.ratioDefinedDocs.map(({ widthMagnitude }) => NumCast(widthMagnitude))); + this.ratioDefinedDocs.forEach(layout => layout.widthMagnitude = NumCast(layout.widthMagnitude) / minimum); + }); + return { unresolved, numRatio, numFixed, starSum }; } @@ -109,48 +123,68 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu } } - @computed - private get contents(): JSX.Element[] | null { - const layout = this.resolvedLayoutInformation; + private getColumnUnitLength = () => this.columnUnitLength; + + private lookupPixels = (layout: Doc): number => { const columnUnitLength = this.columnUnitLength; - if (layout === null || columnUnitLength === undefined) { - return (null); // we're still waiting on promises to resolve + if (columnUnitLength === undefined) { + return 0; // we're still waiting on promises to resolve } - const resolved: Resolved[] = []; - layout.unresolved.forEach(item => { - const { unit, magnitude, ...remaining } = item; - let width = magnitude; - if (unit === "*") { - width = magnitude * columnUnitLength; + let width = NumCast(layout.widthMagnitude); + if (StrCast(layout.widthUnit) === "*") { + width *= columnUnitLength; + } + return width; + } + + private lookupIndividualTransform = (layout: Doc) => { + const columnUnitLength = this.columnUnitLength; + if (columnUnitLength === undefined) { + return Transform.Identity(); // we're still waiting on promises to resolve + } + let offset = 0; + for (const { layout: candidate } of this.childLayoutPairs) { + if (candidate === layout) { + const shift = offset; + return this.props.ScreenToLocalTransform().translate(-shift, 0); } - resolved.push({ pixels: width, ...remaining }); - }); + offset += this.lookupPixels(candidate) + resizerWidth; + } + return Transform.Identity(); // type coersion, this case should never be hit + } + + @computed + private get contents(): JSX.Element[] | null { + trace(); + const { childLayoutPairs } = this; + const { Document, PanelHeight } = this.props; const collector: JSX.Element[] = []; - let offset = 0; - for (let i = 0; i < resolved.length; i++) { - const { target, pixels } = resolved[i]; - const shiftX = offset; + for (let i = 0; i < childLayoutPairs.length; i++) { + const { layout } = childLayoutPairs[i]; collector.push( -
+
pixels} - getTransform={() => this.props.ScreenToLocalTransform().translate(-shiftX, 0)} + Document={layout} + DataDocument={layout.resolvedDataDoc as Doc} + PanelWidth={() => this.lookupPixels(layout)} + PanelHeight={() => PanelHeight() - (BoolCast(Document.showWidthLabels) ? 20 : 0)} + getTransform={() => this.lookupIndividualTransform(layout)} + /> + - {NumCast(target.widthMagnitude).toFixed(3)} {StrCast(target.widthUnit)}
, ); - offset += pixels + resizerWidth; } collector.pop(); // removes the final extraneous resize bar return collector; @@ -171,11 +205,35 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu interface SpacerProps { width: number; - columnUnitLength: number; + columnUnitLength(): number | undefined; toLeft?: Doc; toRight?: Doc; } +interface WidthLabelProps { + layout: Doc; + collectionDoc: Doc; + decimals?: number; +} + +@observer +class WidthLabel extends React.Component { + + @computed + private get contents() { + const { layout, decimals } = this.props; + const magnitude = NumCast(layout.widthMagnitude).toFixed(decimals ?? 3); + const unit = StrCast(layout.widthUnit); + return {magnitude} {unit}; + } + + render() { + return BoolCast(this.props.collectionDoc.showWidthLabels) ? this.contents : (null); + } + +} + +@observer class ResizeBar extends React.Component { private registerResizing = (e: React.PointerEvent) => { @@ -190,33 +248,34 @@ class ResizeBar extends React.Component { private onPointerMove = ({ movementX }: PointerEvent) => { const { toLeft, toRight, columnUnitLength } = this.props; const target = movementX > 0 ? toRight : toLeft; - if (target) { + const unitLength = columnUnitLength(); + if (target && unitLength) { const { widthUnit, widthMagnitude } = target; if (widthUnit === "*") { - target.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / columnUnitLength; + target.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / unitLength; } } } - private get opacity() { + private get isActivated() { const { toLeft, toRight } = this.props; if (toLeft && toRight) { if (StrCast(toLeft.widthUnit) === "px" && StrCast(toRight.widthUnit) === "px") { - return 0; + return false; } - return 0.4; + return true; } else if (toLeft) { if (StrCast(toLeft.widthUnit) === "px") { - return 0; + return false; } - return 0.4; + return true; } else if (toRight) { if (StrCast(toRight.widthUnit) === "px") { - return 0; + return false; } - return 0.4; + return true; } - return 0; + return false; } private onPointerUp = () => { @@ -230,7 +289,7 @@ class ResizeBar extends React.Component { className={"resizer"} style={{ width: this.props.width, - opacity: this.opacity + opacity: this.isActivated ? resizerOpacity : 0 }} onPointerDown={this.registerResizing} /> -- cgit v1.2.3-70-g09d2 From 9620d149a2051bc9b42a037b1c65b61deebd11fa Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Fri, 17 Jan 2020 15:27:39 -0500 Subject: scale mc view --- src/client/views/collections/CollectionMulticolumnView.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/CollectionMulticolumnView.tsx') diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx index 2cb91f239..955e87f13 100644 --- a/src/client/views/collections/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/CollectionMulticolumnView.tsx @@ -248,12 +248,11 @@ class ResizeBar extends React.Component { private onPointerMove = ({ movementX }: PointerEvent) => { const { toLeft, toRight, columnUnitLength } = this.props; const target = movementX > 0 ? toRight : toLeft; - const unitLength = columnUnitLength(); - if (target && unitLength) { + let scale = columnUnitLength(); + if (target && scale) { const { widthUnit, widthMagnitude } = target; - if (widthUnit === "*") { - target.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / unitLength; - } + scale = widthUnit === "*" ? scale : 1; + target.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / scale; } } -- cgit v1.2.3-70-g09d2