diff options
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 20 | ||||
| -rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 7 |
2 files changed, 20 insertions, 7 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 2df053c50..85187c347 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1144,7 +1144,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P isContentActive = () => this.props.isSelected() || this.props.isContentActive(); - getChildDocView(entry: PoolData) { + getChildDocView(entry: PoolData, renderIndex: number) { const childLayout = entry.pair.layout; const childData = entry.pair.data; const engine = this.props.layoutEngine?.() || StrCast(this.props.Document._layoutEngine); @@ -1153,6 +1153,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P Document={childLayout} renderDepth={this.props.renderDepth + 1} replica={entry.replica} + renderIndex={renderIndex} + renderCutoff={this.NumLoaded} ContainingCollectionView={this.props.CollectionView} ContainingCollectionDoc={this.props.Document} CollectionFreeFormView={this} @@ -1300,7 +1302,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P return { newPool, computedElementData: this.doFreeformLayout(newPool) }; } - @observable numLoaded = 0; + @observable _numLoaded = 0; + NumLoaded = () => this._numLoaded; get doLayoutComputation() { const { newPool, computedElementData } = this.doInternalLayoutComputation; const array = Array.from(newPool.entries()); @@ -1319,9 +1322,9 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P this._cachedPool.clear(); Array.from(newPool.entries()).forEach(k => this._cachedPool.set(k[0], k[1])); const elements = computedElementData.slice(); - Array.from(newPool.entries()).filter(entry => this.isCurrent(entry[1].pair.layout)).forEach(entry => + Array.from(newPool.entries()).filter(entry => this.isCurrent(entry[1].pair.layout)).forEach((entry, i) => elements.push({ - ele: this.getChildDocView(entry[1]), + ele: this.getChildDocView(entry[1], i), bounds: this.childDataProvider(entry[1].pair.layout, entry[1].replica) })); @@ -1558,12 +1561,17 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P e.stopPropagation(); } + incrementalRender = action(() => { + this._numLoaded++; + this._numLoaded < this.views.length && setTimeout(this.incrementalRender, 25); + }) + children = () => { - this.numLoaded < this.views.length && setTimeout(action(() => this.numLoaded += 10), 500); + this.incrementalRender(); const children = typeof this.props.children === "function" ? (this.props.children as any)() as JSX.Element[] : []; return [ ...children, - ...this.views.slice(0, Math.min(this.views.length, this.numLoaded + 10)), + ...this.views, <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" /> ]; } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index d8ba88c02..460982c8a 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -28,6 +28,8 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { jitterRotation: number; dataTransition?: string; replica: string; + renderCutoff: () => number; + renderIndex: number; CollectionFreeFormView: CollectionFreeFormView; } @@ -176,7 +178,10 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF mixBlendMode, display: this.ZInd === -99 ? "none" : undefined }} > - <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} /> + {this.props.renderCutoff() >= this.props.renderIndex ? + <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} /> + : + <div style={{ position: "absolute", width: this.panelWidth(), height: this.panelHeight(), background: "lightGreen" }}></div>} </div>; } } |