diff options
6 files changed, 56 insertions, 45 deletions
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss index a5d5617bc..0c74b8ddb 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss @@ -18,13 +18,13 @@ } - .resizer { + .multiColumnResizer { cursor: ew-resize; transition: 0.5s opacity ease; display: flex; flex-direction: column; - .internal { + .multiColumnResizer-hdl { width: 100%; height: 100%; transition: 0.5s background-color ease; diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 56f777f43..92b908ab6 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -34,7 +34,7 @@ export const DimUnit = { }; const resolvedUnits = Object.values(DimUnit); -const resizerWidth = 4; +const resizerWidth = 8; @observer export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocument) { @@ -203,6 +203,19 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } + getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { + return <ContentFittingDocumentView + {...this.props} + Document={layout} + DataDocument={layout.resolvedDataDoc as Doc} + CollectionDoc={this.props.Document} + PanelWidth={width} + PanelHeight={height} + getTransform={dxf} + onClick={this.onChildClickHandler} + renderDepth={this.props.renderDepth + 1} + /> + } /** * @returns the resolved list of rendered child documents, displayed * at their resolved pixel widths, each separated by a resizer. @@ -214,22 +227,14 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu const collector: JSX.Element[] = []; for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; + const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); + const width = () => this.lookupPixels(layout) - 2 * NumCast(Document._xMargin); + const height = () => PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); collector.push( - <div - className={"document-wrapper"} - key={Utils.GenerateGuid()} - > - <ContentFittingDocumentView - {...this.props} - Document={layout} - DataDocument={layout.resolvedDataDoc as Doc} - CollectionDoc={this.props.Document} - PanelWidth={() => this.lookupPixels(layout) - 2 * NumCast(Document._xMargin)} - PanelHeight={() => PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0)} - getTransform={() => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin))} - onClick={this.onChildClickHandler} - renderDepth={this.props.renderDepth + 1} - /> + <div className={"document-wrapper"} + key={"wrapper" + i} + style={{ width: width() }} > + {this.getDisplayDoc(layout, dxf, width, height)} <WidthLabel layout={layout} collectionDoc={Document} @@ -237,7 +242,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu </div>, <ResizeBar width={resizerWidth} - key={Utils.GenerateGuid()} + key={"resizer" + i} columnUnitLength={this.getColumnUnitLength} toLeft={layout} toRight={childLayoutPairs[i + 1]?.layout} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss index ed737ea59..64f607680 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss @@ -19,13 +19,13 @@ } - .resizer { + .multiRowResizer { cursor: ew-resize; transition: 0.5s opacity ease; display: flex; flex-direction: row; - .internal { + .multiRowResizer-hdl { width: 100%; height: 100%; transition: 0.5s background-color ease; diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 8a2498458..d92ba9a9f 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -34,7 +34,7 @@ export const DimUnit = { }; const resolvedUnits = Object.values(DimUnit); -const resizerHeight = 10; +const resizerHeight = 8; @observer export class CollectionMultirowView extends CollectionSubView(MultirowDocument) { @@ -203,6 +203,19 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } + getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { + return <ContentFittingDocumentView + {...this.props} + Document={layout} + DataDocument={layout.resolvedDataDoc as Doc} + CollectionDoc={this.props.Document} + PanelWidth={width} + PanelHeight={height} + getTransform={dxf} + onClick={this.onChildClickHandler} + renderDepth={this.props.renderDepth + 1} + /> + } /** * @returns the resolved list of rendered child documents, displayed * at their resolved pixel widths, each separated by a resizer. @@ -214,22 +227,15 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) const collector: JSX.Element[] = []; for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; + const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); + const height = () => this.lookupPixels(layout) - 2 * NumCast(Document._yMargin); + const width = () => PanelWidth() - 2 * NumCast(Document._xMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); collector.push( <div className={"document-wrapper"} - key={Utils.GenerateGuid()} + key={"wrapper" + i} > - <ContentFittingDocumentView - {...this.props} - Document={layout} - DataDocument={layout.resolvedDataDoc as Doc} - CollectionDoc={this.props.Document} - PanelHeight={() => this.lookupPixels(layout) - 2 * NumCast(Document._yMargin)} - PanelWidth={() => PanelWidth() - 2 * NumCast(Document._xMargin) - (BoolCast(Document.showHeightLabels) ? 20 : 0)} - getTransform={() => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin))} - onClick={this.onChildClickHandler} - renderDepth={this.props.renderDepth + 1} - /> + {this.getDisplayDoc(layout, dxf, width, height)} <HeightLabel layout={layout} collectionDoc={Document} @@ -237,7 +243,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) </div>, <ResizeBar height={resizerHeight} - key={Utils.GenerateGuid()} + key={"resizer" + i} columnUnitLength={this.getRowUnitLength} toTop={layout} toBottom={childLayoutPairs[i + 1]?.layout} diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx index 51fd8b820..6b89402e6 100644 --- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx @@ -47,11 +47,11 @@ export default class ResizeBar extends React.Component<ResizerProps> { if (unitLength) { if (toNarrow) { const scale = StrCast(toNarrow.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1; - toNarrow.dimMagnitude = NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementX) / scale; + toNarrow.dimMagnitude = Math.max(0.05, NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementX) / scale); } if (this.resizeMode === ResizeMode.Pinned && toWiden) { const scale = StrCast(toWiden.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1; - toWiden.dimMagnitude = NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementX) / scale; + toWiden.dimMagnitude = Math.max(0.05, NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementX) / scale); } } } @@ -89,7 +89,7 @@ export default class ResizeBar extends React.Component<ResizerProps> { render() { return ( <div - className={"resizer"} + className={"multiColumnResizer"} style={{ width: this.props.width, opacity: this.isActivated && this.isHoverActive ? resizerOpacity : 0 @@ -98,12 +98,12 @@ export default class ResizeBar extends React.Component<ResizerProps> { onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} > <div - className={"internal"} + className={"multiColumnResizer-hdl"} onPointerDown={e => this.registerResizing(e, ResizeMode.Pinned)} style={{ backgroundColor: this.resizeMode }} /> <div - className={"internal"} + className={"multiColumnResizer-hdl"} onPointerDown={e => this.registerResizing(e, ResizeMode.Global)} style={{ backgroundColor: this.resizeMode }} /> diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx index 4b05a0a29..d00939b26 100644 --- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx +++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx @@ -47,11 +47,11 @@ export default class ResizeBar extends React.Component<ResizerProps> { if (unitLength) { if (toNarrow) { const scale = StrCast(toNarrow.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1; - toNarrow.dimMagnitude = NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementY) / scale; + toNarrow.dimMagnitude = Math.max(0.05, NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementY) / scale); } if (this.resizeMode === ResizeMode.Pinned && toWiden) { const scale = StrCast(toWiden.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1; - toWiden.dimMagnitude = NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementY) / scale; + toWiden.dimMagnitude = Math.max(0.05, NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementY) / scale); } } } @@ -89,7 +89,7 @@ export default class ResizeBar extends React.Component<ResizerProps> { render() { return ( <div - className={"resizer"} + className={"multiRowResizer"} style={{ height: this.props.height, opacity: this.isActivated && this.isHoverActive ? resizerOpacity : 0 @@ -98,12 +98,12 @@ export default class ResizeBar extends React.Component<ResizerProps> { onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} > <div - className={"internal"} + className={"multiRowResizer-hdl"} onPointerDown={e => this.registerResizing(e, ResizeMode.Pinned)} style={{ backgroundColor: this.resizeMode }} /> <div - className={"internal"} + className={"multiRowResizer-hdl"} onPointerDown={e => this.registerResizing(e, ResizeMode.Global)} style={{ backgroundColor: this.resizeMode }} /> |