aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/collectionGrid
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2024-01-02 13:26:53 -0500
committerbobzel <zzzman@gmail.com>2024-01-02 13:26:53 -0500
commitfdc0bf7c54af252178f587709630d36726484b91 (patch)
tree9633a76e9bb386254f40894a13553dcba867cb37 /src/client/views/collections/collectionGrid
parent9b9f54a43793ca6ffb26c56f962d11ba8325abd2 (diff)
fixing more .props => ._props refernces.
Diffstat (limited to 'src/client/views/collections/collectionGrid')
-rw-r--r--src/client/views/collections/collectionGrid/CollectionGridView.tsx72
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}
/>