aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/collectionGrid/CollectionGridView.tsx81
1 files changed, 29 insertions, 52 deletions
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 645a89563..aa343c68f 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -47,38 +47,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
@computed get flexGrid() { return BoolCast(this.props.Document.gridFlex, true); } // is grid static/flexible i.e. whether nodes be moved around and resized
componentDidMount() {
- this._changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => {
- const layouts = this.parsedLayoutList;
-
- // if grid view has been opened and then exited and a document has been deleted
- // this deletes the layout of that document from the layouts list
-
- if (!oldValue && newValue.length) {
- layouts.forEach(({ i }, index) => {
- if (!newValue.find(({ layout: preserved }) => preserved[Id] === i)) {
- layouts.splice(index, 1);
- }
- });
- }
-
- if (!oldValue || newValue.length > oldValue.length) {
- // for each document that was added, add a corresponding grid layout object
- newValue.forEach(({ layout }, i) => {
- if (!layouts.find(gridLayout => gridLayout.i === layout[Id])) {
- this.addLayoutItem(layouts, this.makeLayoutItem(layout, this.unflexedPosition(i), !this.flexGrid));
- }
- });
- } else {
- // for each document that was removed, remove its corresponding grid layout object
- oldValue.forEach(({ layout }) => {
- if (!newValue.find(({ layout: preserved }) => preserved[Id] === layout[Id])) {
- const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === layout[Id]);
- index !== -1 && layouts.splice(index, 1);
- }
- });
- }
- this.setLayoutList(layouts);
- }, true);
+ this._changeListenerDisposer = reaction(() => this.childLayoutPairs, (pairs) => {
+ const newLayouts: Layout[] = [];
+ const oldLayouts = this.savedLayoutList;
+ pairs.forEach((pair, i) => {
+ const existing = oldLayouts.find(l => l.i === pair.layout[Id]);
+ if (existing) newLayouts.push(existing);
+ else this.addLayoutItem(newLayouts, this.makeLayoutItem(pair.layout, this.unflexedPosition(i), !this.flexGrid));
+ });
+ this.setLayoutList(newLayouts);
+ }, { fireImmediately: true });
// updates the layouts if the reset button has been clicked
this._resetListenerDisposer = reaction(() => this.props.Document.gridResetLayout, (reset) => {
@@ -125,7 +103,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
* @returns the transform that will correctly place the document decorations box.
*/
private lookupIndividualTransform = (layout: Layout) => {
- const xypos = this.flexGrid ? layout : this.unflexedPosition(this.layoutList.findIndex(l => l.i === layout.i));
+ const xypos = this.flexGrid ? layout : this.unflexedPosition(this.renderedLayoutList.findIndex(l => l.i === layout.i));
const pos = { x: xypos.x * this.colWidthPlusGap + this.margin, y: xypos.y * this.rowHeightPlusGap + this.margin - this._scroll };
return this.props.ScreenToLocalTransform().translate(-pos.x, -pos.y);
@@ -134,7 +112,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
/**
* @returns the layout list converted from JSON
*/
- get parsedLayoutList() {
+ get savedLayoutList() {
return (this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []) as Layout[];
}
@@ -181,13 +159,13 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
// for every child in the collection, check to see if there's a corresponding grid layout object and
// updated layout object. If both exist, which they should, update the grid layout object from the updated object
if (this.flexGrid) {
- const layouts = this.parsedLayoutList;
+ const savedLayouts = this.savedLayoutList;
this.childLayoutPairs.forEach(({ layout: doc }) => {
- let gridLayout = layouts.find(gridLayout => gridLayout.i === doc[Id]);
+ let gridLayout = savedLayouts.find(gridLayout => gridLayout.i === doc[Id]);
gridLayout && Object.assign(gridLayout, layoutArray.find(layout => layout.i === doc[Id]) || gridLayout);
});
- this.setLayoutList(layouts);
+ this.setLayoutList(savedLayouts);
}
}
@@ -198,13 +176,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
@computed
private get contents(): JSX.Element[] {
const collector: JSX.Element[] = [];
- const layouts = this.parsedLayoutList;
- if (layouts.length == this.childLayoutPairs.length) {
- this.layoutList.forEach((l, i) => {
+ if (this.renderedLayoutList.length === this.childLayoutPairs.length) {
+ this.renderedLayoutList.forEach(l => {
const child = this.childLayoutPairs.find(c => c.layout[Id] === l.i);
- const dxf = () => this.lookupIndividualTransform(layouts[i]);
- const width = () => (this.flexGrid ? layouts[i].w : this.defaultW) * this.colWidthPlusGap - this.margin;
- const height = () => (this.flexGrid ? layouts[i].h : this.defaultH) * this.rowHeightPlusGap - this.margin;
+ const dxf = () => this.lookupIndividualTransform(l);
+ const width = () => (this.flexGrid ? l.w : this.defaultW) * this.colWidthPlusGap - this.margin;
+ const height = () => (this.flexGrid ? l.h : this.defaultH) * this.rowHeightPlusGap - this.margin;
child && collector.push(
<div key={child.layout[Id]} className={"document-wrapper" + (this.flexGrid && this.props.isSelected() ? "" : " static")} >
{this.getDisplayDoc(child.layout, dxf, width, height)}
@@ -218,24 +195,24 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
/**
* @returns a list of `Layout` objects with attributes depending on whether the grid is flexible or static
*/
- get layoutList(): Layout[] {
+ @computed get renderedLayoutList(): Layout[] {
return this.flexGrid ?
- this.parsedLayoutList.map(({ i, x, y, w, h }) => ({
+ this.savedLayoutList.map(({ i, x, y, w, h }) => ({
i, y, h,
x: x + w > this.numCols ? 0 : x, // handles wrapping around of nodes when numCols decreases
w: Math.min(w, this.numCols), // reduces width if greater than numCols
static: BoolCast(this.childLayoutPairs.find(({ layout }) => layout[Id] === i)?.layout.lockedPosition, false) // checks if the lock position item has been selected in the context menu
})) :
- this.parsedLayoutList.map((layout, index) => Object.assign(layout, this.unflexedPosition(index)));
+ this.savedLayoutList.map((layout, index) => Object.assign(layout, this.unflexedPosition(index)));
}
@action
onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
- const layouts = this.parsedLayoutList;
+ const savedLayouts = this.savedLayoutList;
const dropped = de.complete.docDragData?.droppedDocuments;
- if (dropped && super.onInternalDrop(e, de) && layouts.length !== this.childDocs.length) {
- dropped.forEach(doc => this.addLayoutItem(layouts, this.makeLayoutItem(doc, this.screenToCell(de.x, de.y)))); // shouldn't place all docs in the same cell;
- this.setLayoutList(layouts);
+ if (dropped && super.onInternalDrop(e, de) && savedLayouts.length !== this.childDocs.length) {
+ dropped.forEach(doc => this.addLayoutItem(savedLayouts, this.makeLayoutItem(doc, this.screenToCell(de.x, de.y)))); // shouldn't place all docs in the same cell;
+ this.setLayoutList(savedLayouts);
return true;
}
return false;
@@ -275,7 +252,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
const text = Docs.Create.TextDocument("", { _width: 150, _height: 50 });
FormattedTextBox.SelectOnLoad = text[Id];// track the new text box so we can give it a prop that tells it to focus itself when it's displayed
Doc.AddDocToList(this.props.Document, this.props.fieldKey, text);
- this.setLayoutList(this.addLayoutItem(this.parsedLayoutList, this.makeLayoutItem(text, this.screenToCell(e.clientX, e.clientY))));
+ this.setLayoutList(this.addLayoutItem(this.savedLayoutList, this.makeLayoutItem(text, this.screenToCell(e.clientX, e.clientY))));
}
}),
false);
@@ -298,7 +275,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
<Grid
width={this.props.PanelWidth()}
nodeList={this.contents.length ? this.contents : null}
- layout={this.contents.length ? this.layoutList : undefined}
+ layout={this.contents.length ? this.renderedLayoutList : undefined}
childrenDraggable={this.props.isSelected() ? true : false}
numCols={this.numCols}
rowHeight={this.rowHeight}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 21:47:03 +0000