aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/collectionGrid
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections/collectionGrid')
-rw-r--r--src/client/views/collections/collectionGrid/CollectionGridView.tsx97
-rw-r--r--src/client/views/collections/collectionGrid/Grid.tsx2
2 files changed, 50 insertions, 49 deletions
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index cd8b7a0cc..f25872c2b 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, Lambda, observable, reaction } from 'mobx';
+import { action, computed, Lambda, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, Opt } from '../../../../fields/Doc';
@@ -7,7 +7,6 @@ import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types
import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents } from '../../../../Utils';
import { Docs } from '../../../documents/Documents';
import { DragManager } from '../../../util/DragManager';
-import { SnappingManager } from '../../../util/SnappingManager';
import { Transform } from '../../../util/Transform';
import { undoBatch } from '../../../util/UndoManager';
import { ContextMenu } from '../../ContextMenu';
@@ -17,48 +16,52 @@ import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
import { CollectionSubView } from '../CollectionSubView';
import './CollectionGridView.scss';
import Grid, { Layout } from './Grid';
-
@observer
export class CollectionGridView extends CollectionSubView() {
private _containerRef: React.RefObject<HTMLDivElement> = React.createRef();
private _changeListenerDisposer: Opt<Lambda>; // listens for changes in this.childLayoutPairs
private _resetListenerDisposer: Opt<Lambda>; // listens for when the reset button is clicked
- @observable private _rowHeight: Opt<number>; // temporary store of row height to make change undoable
+ @observable private _rowHeight: Opt<number> = undefined; // temporary store of row height to make change undoable
@observable private _scroll: number = 0; // required to make sure the decorations box container updates on scroll
private dropLocation: object = {}; // sets the drop location for external drops
+ constructor(props: any) {
+ super(props);
+ makeObservable(this);
+ }
+
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
/**
@@ -91,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;
}
);
}
@@ -127,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.ScreenToLocalBoxXf().transformPoint(sx, sy);
const x = Math.floor(pt[0] / this.colWidthPlusGap);
const y = Math.floor((pt[1] + this._scroll) / this.rowHeight);
return { x, y };
@@ -156,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.ScreenToLocalBoxXf().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.rootDoc.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
@@ -186,20 +189,20 @@ export class CollectionGridView extends CollectionSubView() {
getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) {
return (
<DocumentView
- {...this.props}
+ {...this._props}
NativeWidth={returnZero}
NativeHeight={returnZero}
- setContentView={emptyFunction}
+ setContentViewBox={emptyFunction}
Document={layout}
- DataDoc={layout.resolvedDataDoc as Doc}
+ TemplateDataDocument={layout.resolvedDataDoc as Doc}
isContentActive={this.isChildContentActive}
PanelWidth={width}
PanelHeight={height}
ScreenToLocalTransform={dxf}
- whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
- onClick={this.onChildClickHandler}
- renderDepth={this.props.renderDepth + 1}
- dontCenter={this.props.Document.centerY ? undefined : 'y'}
+ whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
+ onClickScript={this.onChildClickHandler}
+ renderDepth={this._props.renderDepth + 1}
+ dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy'
/>
);
}
@@ -219,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))();
}
@@ -246,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>
);
@@ -277,7 +280,6 @@ export class CollectionGridView extends CollectionSubView() {
/**
* Handles internal drop of Dash documents.
*/
- @action
onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
const savedLayouts = this.savedLayoutList;
const dropped = de.complete.docDragData?.droppedDocuments;
@@ -292,7 +294,6 @@ export class CollectionGridView extends CollectionSubView() {
/**
* Handles external drop of images/PDFs etc from outside Dash.
*/
- @action
onExternalDrop = async (e: React.DragEvent): Promise<void> => {
this.dropLocation = this.screenToCell(e.clientX, e.clientY);
super.onExternalDrop(e, {});
@@ -316,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,
@@ -330,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' });
};
@@ -339,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()) {
setupMoveUpEvents(
this,
e,
@@ -350,8 +351,8 @@ export class CollectionGridView extends CollectionSubView() {
undoBatch(
action(() => {
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);
+ 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.Document, this._props.fieldKey, text);
this.setLayoutList(this.addLayoutItem(this.savedLayoutList, this.makeLayoutItem(text, this.screenToCell(e.clientX, e.clientY))));
})
)();
@@ -359,7 +360,7 @@ export class CollectionGridView extends CollectionSubView() {
},
false
);
- if (this.props.isSelected(true)) e.stopPropagation();
+ if (this._props.isSelected()) e.stopPropagation();
}
};
@@ -368,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}>
@@ -378,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.ScreenToLocalBoxXf().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}
/>
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 3d1d87aa0..9145d7ef1 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
import { observer } from 'mobx-react';
+import * as React from 'react';
import '../../../../../node_modules/react-grid-layout/css/styles.css';
import '../../../../../node_modules/react-resizable/css/styles.css';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-03-20 05:19:00 +0000