diff options
| author | bobzel <zzzman@gmail.com> | 2024-01-02 13:26:53 -0500 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2024-01-02 13:26:53 -0500 |
| commit | fdc0bf7c54af252178f587709630d36726484b91 (patch) | |
| tree | 9633a76e9bb386254f40894a13553dcba867cb37 /src/client/views/collections/collectionGrid | |
| parent | 9b9f54a43793ca6ffb26c56f962d11ba8325abd2 (diff) | |
fixing more .props => ._props refernces.
Diffstat (limited to 'src/client/views/collections/collectionGrid')
| -rw-r--r-- | src/client/views/collections/collectionGrid/CollectionGridView.tsx | 72 |
1 files changed, 36 insertions, 36 deletions
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 3e75257e5..0f750c4f8 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -33,35 +33,35 @@ export class CollectionGridView extends CollectionSubView() { onChildClickHandler = () => ScriptCast(this.Document.onChildClick); @computed get numCols() { - return NumCast(this.props.Document.gridNumCols, 10); + return NumCast(this.Document.gridNumCols, 10); } @computed get rowHeight() { - return this._rowHeight === undefined ? NumCast(this.props.Document.gridRowHeight, 100) : this._rowHeight; + return this._rowHeight === undefined ? NumCast(this.Document.gridRowHeight, 100) : this._rowHeight; } // sets the default width and height of the grid nodes @computed get defaultW() { - return NumCast(this.props.Document.gridDefaultW, 2); + return NumCast(this.Document.gridDefaultW, 2); } @computed get defaultH() { - return NumCast(this.props.Document.gridDefaultH, 2); + return NumCast(this.Document.gridDefaultH, 2); } @computed get colWidthPlusGap() { - return (this.props.PanelWidth() - this.margin) / this.numCols; + return (this._props.PanelWidth() - this.margin) / this.numCols; } @computed get rowHeightPlusGap() { return this.rowHeight + this.margin; } @computed get margin() { - return NumCast(this.props.Document.margin, 10); + return NumCast(this.Document.margin, 10); } // sets the margin between grid nodes @computed get flexGrid() { - return BoolCast(this.props.Document.gridFlex, true); + return BoolCast(this.Document.gridFlex, true); } // is grid static/flexible i.e. whether nodes be moved around and resized @computed get compaction() { - return StrCast(this.props.Document.gridStartCompaction, StrCast(this.props.Document.gridCompaction, 'vertical')); + return StrCast(this.Document.gridStartCompaction, StrCast(this.Document.gridCompaction, 'vertical')); } // is grid static/flexible i.e. whether nodes be moved around and resized /** @@ -94,12 +94,12 @@ export class CollectionGridView extends CollectionSubView() { // updates the layouts if the reset button has been clicked this._resetListenerDisposer = reaction( - () => this.props.Document.gridResetLayout, + () => this.Document.gridResetLayout, reset => { if (reset && this.flexGrid) { this.setLayout(this.childLayoutPairs.map((pair, index) => this.makeLayoutItem(pair.layout, this.unflexedPosition(index)))); } - this.props.Document.gridResetLayout = false; + this.Document.gridResetLayout = false; } ); } @@ -130,7 +130,7 @@ export class CollectionGridView extends CollectionSubView() { * Maps the x- and y- coordinates of the event to a grid cell. */ screenToCell(sx: number, sy: number) { - const pt = this.props.ScreenToLocalTransform().transformPoint(sx, sy); + const pt = this._props.ScreenToLocalTransform().transformPoint(sx, sy); const x = Math.floor(pt[0] / this.colWidthPlusGap); const y = Math.floor((pt[1] + this._scroll) / this.rowHeight); return { x, y }; @@ -159,25 +159,25 @@ export class CollectionGridView extends CollectionSubView() { 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); + return this._props.ScreenToLocalTransform().translate(-pos.x, -pos.y); }; /** * @returns the layout list converted from JSON */ get savedLayoutList() { - return (this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []) as Layout[]; + return (this.Document.gridLayoutString ? JSON.parse(StrCast(this.Document.gridLayoutString)) : []) as Layout[]; } /** * Stores the layout list on the Document as JSON */ setLayoutList(layouts: Layout[]) { - this.props.Document.gridLayoutString = JSON.stringify(layouts); + this.Document.gridLayoutString = JSON.stringify(layouts); } - isContentActive = () => this.props.isSelected() || this.props.isContentActive(); - isChildContentActive = () => (this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) ? true : undefined); + isContentActive = () => this._props.isSelected() || this._props.isContentActive(); + isChildContentActive = () => (this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) ? true : undefined); /** * * @param layout @@ -199,9 +199,9 @@ export class CollectionGridView extends CollectionSubView() { PanelWidth={width} PanelHeight={height} ScreenToLocalTransform={dxf} - whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged} + whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} onClick={this.onChildClickHandler} - renderDepth={this.props.renderDepth + 1} + renderDepth={this._props.renderDepth + 1} dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy' /> ); @@ -222,12 +222,12 @@ export class CollectionGridView extends CollectionSubView() { if (gridLayout) Object.assign(gridLayout, layoutArray.find(layout => layout.i === doc[Id]) || gridLayout); }); - if (this.props.Document.gridStartCompaction) { + if (this.Document.gridStartCompaction) { undoBatch(() => { - this.props.Document.gridCompaction = this.props.Document.gridStartCompaction; + this.Document.gridCompaction = this.Document.gridStartCompaction; this.setLayoutList(savedLayouts); })(); - this.props.Document.gridStartCompaction = undefined; + this.Document.gridStartCompaction = undefined; } else { undoBatch(() => this.setLayoutList(savedLayouts))(); } @@ -249,7 +249,7 @@ export class CollectionGridView extends CollectionSubView() { 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')}> + <div key={child.layout[Id]} className={'document-wrapper' + (this.flexGrid && this._props.isSelected() ? '' : ' static')}> {this.getDisplayDoc(child.layout, dxf, width, height)} </div> ); @@ -317,7 +317,7 @@ export class CollectionGridView extends CollectionSubView() { e, returnFalse, action(() => { - undoBatch(() => (this.props.Document.gridRowHeight = this._rowHeight))(); + undoBatch(() => (this.Document.gridRowHeight = this._rowHeight))(); this._rowHeight = undefined; }), emptyFunction, @@ -331,8 +331,8 @@ export class CollectionGridView extends CollectionSubView() { */ onContextMenu = () => { const displayOptionsMenu: ContextMenuProps[] = []; - displayOptionsMenu.push({ description: 'Toggle Content Display Style', event: () => (this.props.Document.display = this.props.Document.display ? undefined : 'contents'), icon: 'copy' }); - displayOptionsMenu.push({ description: 'Toggle Vertical Centering', event: () => (this.props.Document.centerY = !this.props.Document.centerY), icon: 'copy' }); + displayOptionsMenu.push({ description: 'Toggle Content Display Style', event: () => (this.Document.display = this.Document.display ? undefined : 'contents'), icon: 'copy' }); + displayOptionsMenu.push({ description: 'Toggle Vertical Centering', event: () => (this.Document.centerY = !this.Document.centerY), icon: 'copy' }); ContextMenu.Instance.addItem({ description: 'Display', subitems: displayOptionsMenu, icon: 'tv' }); }; @@ -340,7 +340,7 @@ export class CollectionGridView extends CollectionSubView() { * Handles text document creation on double click. */ onPointerDown = (e: React.PointerEvent) => { - if (this.props.isContentActive(true)) { + if (this._props.isContentActive(true)) { setupMoveUpEvents( this, e, @@ -352,7 +352,7 @@ export class CollectionGridView extends CollectionSubView() { action(() => { const text = Docs.Create.TextDocument('', { _width: 150, _height: 50 }); FormattedTextBox.SetSelectOnLoad(text); // 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); + Doc.AddDocToList(this.Document, this._props.fieldKey, text); this.setLayoutList(this.addLayoutItem(this.savedLayoutList, this.makeLayoutItem(text, this.screenToCell(e.clientX, e.clientY)))); }) )(); @@ -360,7 +360,7 @@ export class CollectionGridView extends CollectionSubView() { }, false ); - if (this.props.isSelected()) e.stopPropagation(); + if (this._props.isSelected()) e.stopPropagation(); } }; @@ -369,7 +369,7 @@ export class CollectionGridView extends CollectionSubView() { <div className="collectionGridView-contents" ref={this.createDashEventsTarget} - style={{ pointerEvents: !this.props.isContentActive() ? 'none' : undefined }} + style={{ pointerEvents: !this._props.isContentActive() ? 'none' : undefined }} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onDrop={this.onExternalDrop}> @@ -379,29 +379,29 @@ export class CollectionGridView extends CollectionSubView() { style={{ backgroundColor: StrCast(this.layoutDoc._backgroundColor, 'white') }} onWheel={e => e.stopPropagation()} onScroll={action(e => { - if (!this.props.isSelected()) e.currentTarget.scrollTop = this._scroll; + if (!this._props.isSelected()) e.currentTarget.scrollTop = this._scroll; else this._scroll = e.currentTarget.scrollTop; })}> <Grid - width={this.props.PanelWidth()} + width={this._props.PanelWidth()} nodeList={this.contents.length ? this.contents : null} layout={this.contents.length ? this.renderedLayoutList : undefined} - childrenDraggable={this.props.isSelected() ? true : false} + childrenDraggable={this._props.isSelected() ? true : false} numCols={this.numCols} rowHeight={this.rowHeight} setLayout={this.setLayout} - transformScale={this.props.ScreenToLocalTransform().Scale} + transformScale={this._props.ScreenToLocalTransform().Scale} compactType={this.compaction} // determines whether nodes should remain in position, be bound to the top, or to the left - preventCollision={BoolCast(this.props.Document.gridPreventCollision)} // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them + preventCollision={BoolCast(this.Document.gridPreventCollision)} // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them margin={this.margin} /> <input className="rowHeightSlider" type="range" - style={{ width: this.props.PanelHeight() - 30 }} + style={{ width: this._props.PanelHeight() - 30 }} min={1} value={this.rowHeight} - max={this.props.PanelHeight() - 30} + max={this._props.PanelHeight() - 30} onPointerDown={this.onSliderDown} onChange={this.onSliderChange} /> |
