aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionMasonryViewFieldRow.tsx108
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx65
-rw-r--r--src/client/views/nodes/DocumentView.tsx2
3 files changed, 74 insertions, 101 deletions
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 65e05ff28..b1afd09c2 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -20,6 +20,7 @@ import { anchorPoints, Flyout } from "../DocumentDecorations";
import { EditableView } from "../EditableView";
import { CollectionStackingView } from "./CollectionStackingView";
import "./CollectionStackingView.scss";
+import Measure from "react-measure";
library.add(faPalette);
@@ -33,7 +34,7 @@ interface CMVFieldRowProps {
type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined;
createDropTarget: (ele: HTMLDivElement) => void;
screenToLocalTransform: () => Transform;
- addToDocHeight: (thisHeight: number) => void;
+ setDocHeight: (key: string, thisHeight: number) => void;
}
@observer
@@ -51,38 +52,22 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
@observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
createRowDropRef = (ele: HTMLDivElement | null) => {
- console.log("createRowDropRef ran");
this._dropRef = ele;
this.dropDisposer && this.dropDisposer();
if (ele) {
this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.rowDrop.bind(this) } });
}
- // this.getTrueHeight();
}
- getTrueHeight = () => { //handle collapse in here (if collapsed, return #)
- //also, don't need to return anything
- //call this in component did mount or something...
+ getTrueHeight = () => {
if (this.collapsed) {
- this.props.addToDocHeight(20);
- console.log("collapsed");
- } else { //this is calculating the heights correctlty
- let rawHeight = this._contRef.current!.getBoundingClientRect().height + 20;
+ this.props.setDocHeight(this._heading, 20);
+ } else {
+ let rawHeight = this._contRef.current!.getBoundingClientRect().height + 15; //+ 15 accounts for the group header
let transformScale = this.props.screenToLocalTransform().Scale;
let trueHeight = rawHeight * transformScale;
- this.props.addToDocHeight(trueHeight);
- console.log("trueHeight: " + trueHeight);
+ this.props.setDocHeight(this._heading, trueHeight);
}
- this.props.addToDocHeight(20);
- }
-
- // componentDidMount = () => {
- // this.getTrueHeight();
- // }
-
- componentDidUpdate = () => {
- console.log("componentDidUpdate");
- this.getTrueHeight(); //why does this
}
@undoBatch
@@ -284,6 +269,15 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
@observable _headingsHack: number = 1;
+ handleResize = (size: any) => {
+ this.counter += 1;
+ if (this.counter !== 1) {
+ this.getTrueHeight();
+ }
+ }
+
+ private counter: number = 0;
+
render() {
let cols = this.props.rows();
let rows = Math.max(1, Math.min(this.props.docList.length, Math.floor((this.props.parent.props.PanelWidth() - 2 * this.props.parent.xMargin) / (this.props.parent.columnWidth + this.props.parent.gridGap))));
@@ -340,38 +334,46 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
</button>}
</div>
</div > : (null);
+ const background = this._background; //to account for observables in Measure
+ const collapsed = this.collapsed;
return (
- <div className="collectionStackingView-masonrySection"
- key={heading = "empty"}
- style={{ width: this.props.parent.NodeWidth, background: this._background }}
- ref={this.createRowDropRef}
- onPointerEnter={this.pointerEnteredRow}
- onPointerLeave={this.pointerLeaveRow}
- >
- {headingView}
- {this.collapsed ? (null) :
- < div >
- <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
- // ref={this.getTrueHeight}
- ref={this._contRef}
- style={{
- padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`,
- width: this.props.parent.NodeWidth,
- gridGap: this.props.parent.gridGap,
- gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""),
- }}>
- {this.masonryChildren(this.props.docList)}
- {this.props.parent.columnDragger}
- </div>
- {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ?
- <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
- style={{ width: style.columnWidth / style.numGroupColumns }}>
- <EditableView {...newEditableViewProps} />
- </div> : null
- }
- </div>
- }
- </div >
+ <Measure offset onResize={this.handleResize}>
+ {({ measureRef }) => {
+ return <div ref={measureRef}>
+ <div className="collectionStackingView-masonrySection"
+ key={heading = "empty"}
+ style={{ width: this.props.parent.NodeWidth, background }}
+ ref={this.createRowDropRef}
+ onPointerEnter={this.pointerEnteredRow}
+ onPointerLeave={this.pointerLeaveRow}
+ >
+ {headingView}
+ {collapsed ? (null) :
+ < div >
+ <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
+ // ref={this.getTrueHeight}
+ ref={this._contRef}
+ style={{
+ padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`,
+ width: this.props.parent.NodeWidth,
+ gridGap: this.props.parent.gridGap,
+ gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""),
+ }}>
+ {this.masonryChildren(this.props.docList)}
+ {this.props.parent.columnDragger}
+ </div>
+ {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ?
+ <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
+ style={{ width: style.columnWidth / style.numGroupColumns }}>
+ <EditableView {...newEditableViewProps} />
+ </div> : null
+ }
+ </div>
+ }
+ </div >
+ </div>;
+ }}
+ </Measure>
);
}
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 43a7333d0..3cf4f98b7 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -25,20 +25,19 @@ import { ContextMenuProps } from "../ContextMenuItem";
import { ScriptBox } from "../ScriptBox";
import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow";
-let _height: number = 0;
+// let _height: number = 0;
@observer
export class CollectionStackingView extends CollectionSubView(doc => doc) {
_masonryGridRef: HTMLDivElement | null = null;
_draggerRef = React.createRef<HTMLDivElement>();
+ @observable _heightMap = new Map<string, number>();
_heightDisposer?: IReactionDisposer;
_childLayoutDisposer?: IReactionDisposer;
_sectionFilterDisposer?: IReactionDisposer;
_docXfs: any[] = [];
_columnStart: number = 0;
- // _height: number = 0;
@observable private cursor: CursorProperty = "grab";
- // @computed private _height: number = 0;
@computed get sectionHeaders() { return Cast(this.props.Document.sectionHeaders, listSpec(SchemaHeaderField)); }
@computed get sectionFilter() { return StrCast(this.props.Document.sectionFilter); }
@computed get filteredChildren() { return this.childDocs.filter(d => !d.isMinimized); }
@@ -58,12 +57,9 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
childDocHeight(child: Doc) { return this.getDocHeight(Doc.GetLayoutDataDocPair(this.props.Document, this.props.DataDoc, this.props.fieldKey, child).layout); }
- addToDocHeight(sectionHeight: number) {
- // if (_height !== undefined) {
- console.log("indiv height: " + _height);
- _height += sectionHeight;
- // }
- // return _height;
+ @action
+ setDocHeight = (key: string, sectionHeight: number) => {
+ this._heightMap.set(key, sectionHeight);
}
get layoutDoc() {
@@ -103,10 +99,13 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
componentDidMount() {
this._childLayoutDisposer = reaction(() => [this.childDocs, Cast(this.props.Document.childLayout, Doc)],
- async (args) => args[1] instanceof Doc &&
- this.childDocs.map(async doc => !Doc.AreProtosEqual(args[1] as Doc, (await doc).layout as Doc) && Doc.ApplyTemplateTo(args[1] as Doc, (await doc), undefined)));
+ async (args) => {
+ args[1] instanceof Doc &&
+ this.childDocs.map(async doc => !Doc.AreProtosEqual(args[1] as Doc, (await doc).layout as Doc) && Doc.ApplyTemplateTo(args[1] as Doc, (await doc), undefined));
+ })
+
- // is there any reason this needs to exist? -syip. yes, it handles autoHeight for stacking and masonry views -eeng.
+ // is there any reason this needs to exist? -syip. yes, it handles autoHeight for stacking and masonry views -eeng
this._heightDisposer = reaction(() => {
if (BoolCast(this.props.Document.autoHeight)) {
let sectionsList = Array.from(this.Sections.size ? this.Sections.values() : [this.filteredChildren]);
@@ -114,40 +113,12 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
return this.props.ContentScaling() * sectionsList.reduce((maxHght, s) => Math.max(maxHght,
(this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => height + this.childDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap), this.yMargin)), 0);
} else {
- // let rowArray: CollectionMasonryViewFieldRow[] = [];
- for (let i = 0; i < this.Sections.size; i++) {
- // rowArray.push(this._masonryGridRef);
- }
- let sum: number = 0;
- // let counter: number = 0;
- sum += _height; //calculated height of the node from the masonry prop
- // console.log("height: " + _height);
- if (this.sectionHeaders !== undefined) {
- // this.sectionHeaders.forEach(sec => {
- // if (sec.collapsed) {
- // sum += 20;
- // console.log("sec collapsed");
- // } else {
- // // sum += sectionsList[counter].reduce((height, d, i) => height + this.childDocHeight(d) + (i === sectionsList[counter].length - 1 ? this.yMargin : this.gridGap), this.yMargin);
- // // sum += NumCast(document.getElementsByClassName("collectionStackingView-sectionHeader-subCont").offsetHeight);
- // // sum += this.addToDocHeight(this.Sections[counter]);
- // // console.log("section is not collapsed");
- // sum += _height;
- // // this.addToDocHeight(40);
- // // console.log("this._height in componentDidMount: " + _height);
- // }
- // // console.log("IN IF STATEMENT, sum is: " + sum);
- // counter += 1;
- // });
- }
- // return this.props.ContentScaling() * sectionsList.reduce((totalHeight, s) => totalHeight +
- // (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => height + this.childDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap), this.yMargin) + 47, 0);
- sum += 20; //allow space for the "add group" button
- console.log("sum: " + sum);
- _height = 0; //without this the height get HUGE (just keeps adding i think...)
- return this.props.ContentScaling() * (sum + (this.Sections.size ? 50 : 0)); //+47
- // return this.props.ContentScaling() * sectionsList.reduce((totalHeight, s) => totalHeight +
- // (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => height + this.childDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap), this.yMargin) + 47, 0);
+ let sum = Array.from(this._heightMap.values()).reduce((acc: number, curr: number) => acc += curr, 0);
+ // let transformScale = this.props.ScreenToLocalTransform().Scale;
+ // let trueHeight = 30 * transformScale;
+ // sum += trueHeight;
+ sum += 30;
+ return this.props.ContentScaling() * (sum + (this.Sections.size ? 50 : 0));
}
}
return -1;
@@ -357,7 +328,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
type={type}
createDropTarget={this.createDropTarget}
screenToLocalTransform={this.props.ScreenToLocalTransform}
- addToDocHeight={this.addToDocHeight}
+ setDocHeight={this.setDocHeight}
/>;
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6c944c6b2..7cbd96354 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -601,7 +601,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
this.makeBtnClicked();
}, icon: "window-restore"
});
- makes.push({ description: this.props.Document.ignoreClick ? "Selectable" : "Unselectable", event: () => this.props.Document.ignoreClick = !this.props.Document.ignoreClick, icon: this.props.Document.ignoreClick ? "unlock" : "lock" })
+ makes.push({ description: this.props.Document.ignoreClick ? "Selectable" : "Unselectable", event: () => this.props.Document.ignoreClick = !this.props.Document.ignoreClick, icon: this.props.Document.ignoreClick ? "unlock" : "lock" });
!existingMake && cm.addItem({ description: "Make...", subitems: makes, icon: "hand-point-right" });
let existing = ContextMenu.Instance.findByDescription("Layout...");
let layoutItems: ContextMenuProps[] = existing && "subitems" in existing ? existing.subitems : [];
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 14:01:58 +0000