diff options
Diffstat (limited to 'src')
3 files changed, 73 insertions, 64 deletions
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 01ad44a2d..d68277d32 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,4 +1,4 @@ -import { computed, observable, Lambda, action, autorun } from 'mobx'; +import { computed, observable, Lambda, action, reaction } from 'mobx'; import * as React from "react"; import { Doc, Opt } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; @@ -9,7 +9,7 @@ import { undoBatch } from '../../../util/UndoManager'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; import { CollectionSubView } from '../CollectionSubView'; import { SubCollectionViewProps } from '../CollectionSubView'; -import { returnZero, returnFalse } from '../../../../Utils'; +import { returnZero } from '../../../../Utils'; import Grid, { Layout } from "./Grid"; import { Id } from '../../../../fields/FieldSymbols'; import { observer } from 'mobx-react'; @@ -18,7 +18,8 @@ import { Docs } from '../../../documents/Documents'; import { EditableView, EditableProps } from '../../EditableView'; import "./CollectionGridView.scss"; import { ContextMenu } from '../../ContextMenu'; -import { ScriptField } from '../../../../fields/ScriptField'; +import { List } from '../../../../fields/List'; +import { ContextMenuProps } from '../../ContextMenuItem'; type GridSchema = makeInterface<[typeof documentSchema]>; @@ -48,8 +49,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them this.props.Document.preventCollision = BoolCast(this.props.Document.preventCollision, false); + this.props.Document.defaultW = NumCast(this.props.Document.defaultW, 2); + this.props.Document.defaultH = NumCast(this.props.Document.defaultH, 2); + + this.props.Document.margin = NumCast(this.props.Document.margin, 10); + + this.props.Document.display = StrCast(this.props.Document.display, "contents"); + this.setLayout = this.setLayout.bind(this); this.onSliderChange = this.onSliderChange.bind(this); + this.onContextMenu = this.onContextMenu.bind(this); this.containerRef = React.createRef(); } @@ -65,6 +74,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // 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) => { const targetId = i; @@ -76,16 +86,15 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { if (!oldValue || newValue.length > oldValue.length) { // for each document that was added, add a corresponding grid layout object - newValue.forEach(({ layout }, i) => { const targetId = layout[Id]; if (!layouts.find((gridLayout: Layout) => gridLayout.i === targetId)) { layouts.push({ i: targetId, - w: 2, - h: 2, - x: 2 * (i % Math.floor(NumCast(this.props.Document.numCols) / 2)), - y: 2 * Math.floor(i / Math.floor(NumCast(this.props.Document.numCols) / 2)), + w: this.defaultW, + h: this.defaultH, + x: this.defaultW * (i % Math.floor(NumCast(this.props.Document.numCols) / this.defaultW)), + y: this.defaultH * Math.floor(i / Math.floor(NumCast(this.props.Document.numCols) / this.defaultH)), static: !this.props.Document.flexGrid }); } @@ -104,24 +113,19 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { }, true); // updates the layouts if the reset button has been clicked - this.resetListenerDisposer = autorun(() => { - if (this.props.Document.resetLayout) { - if (this.props.Document.flexGrid) { - console.log("Resetting layout"); - const layouts: Layout[] = this.parsedLayoutList; - - this.setLayout( - layouts.map(({ i }, index) => ({ - i: i, - x: 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2)), - y: 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2)), - w: 2, - h: 2, - }))); - } - - this.props.Document.resetLayout = false; + this.resetListenerDisposer = reaction(() => this.props.Document.resetLayout, () => { + if (this.props.Document.flexGrid) { + const layouts: Layout[] = this.parsedLayoutList; + this.setLayout( + layouts.map(({ i }, index) => ({ + i: i, + x: this.defaultW * (index % Math.floor(NumCast(this.props.Document.numCols) / this.defaultW)), + y: this.defaultH * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / this.defaultH)), + w: this.defaultW, + h: this.defaultH, + }))); } + this.props.Document.resetLayout = false; }); } @@ -142,16 +146,28 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i); // translations depend on whether the grid is flexible or static - const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2))) * this.rowHeightPlusGap + 10 - this._scroll + 30; // 30 is the height of the add text doc bar - const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2))) * this.colWidthPlusGap + 10; + const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : this.defaultW * (index % Math.floor(NumCast(this.props.Document.numCols) / this.defaultW))) * this.colWidthPlusGap + this.margin; + const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : this.defaultH * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / this.defaultH))) * this.rowHeightPlusGap + this.margin - this._scroll + 30; // 30 is the height of the add text doc bar return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); } - // is this needed? it seems to never be called + @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } - @computed get colWidthPlusGap() { return (this.props.PanelWidth() - 10) / NumCast(this.props.Document.numCols); } - @computed get rowHeightPlusGap() { return NumCast(this.props.Document.rowHeight) + 10; } + addDocTab = (doc: Doc, where: string) => { + if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) { + this.dataDoc[this.props.fieldKey] = new List<Doc>([doc]); + return true; + } + return this.props.addDocTab(doc, where); + } + + @computed get colWidthPlusGap() { return (this.props.PanelWidth() - this.margin) / NumCast(this.props.Document.numCols); } + @computed get rowHeightPlusGap() { return NumCast(this.props.Document.rowHeight) + this.margin; } + + @computed get margin() { return NumCast(this.props.Document.margin); } + @computed get defaultW() { return NumCast(this.props.Document.defaultW); } + @computed get defaultH() { return NumCast(this.props.Document.defaultH); } /** * @returns the layout list converted from JSON @@ -169,9 +185,10 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // sometimes there are issues with rendering when you switch from a different view // where the nodes are all squeezed together on the left hand side of the screen // until you click on the screen or close the chrome or interact with it in some way + // the component doesn't rerender when the component mounts // this seems to fix that though it isn't very elegant - console.log("setting unstringified") + console.log("setting unstringified"); this.mounted && (this.props.Document.gridLayoutString = ""); this.props.Document.gridLayoutString = JSON.stringify(layouts); this.mounted = false; @@ -182,31 +199,13 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * Sets the width of the decorating box. * @param layout */ - @observable private width = (layout: Layout) => (this.props.Document.flexGrid ? layout.w : 2) * this.colWidthPlusGap - 10; + @observable private width = (layout: Layout) => (this.props.Document.flexGrid ? layout.w : this.defaultW) * this.colWidthPlusGap - this.margin; /** * Sets the height of the decorating box. * @param layout */ - @observable private height = (layout: Layout) => (this.props.Document.flexGrid ? layout.h : 2) * this.rowHeightPlusGap - 10; - - contextMenuItems = (layoutDoc: Doc) => { - const layouts: Layout[] = this.parsedLayoutList; - const freezeScript = ScriptField.MakeFunction( - // "layouts.find(({ i }) => i === layoutDoc[Id]).static=true;" + - // "this.unStringifiedLayoutList = layouts;" + - "console.log(doc)", { doc: Doc.name } - ); - - // const layouts: Layout[] = this.parsedLayoutList; - - // const layoutToChange = layouts.find(({ i }) => i === layoutDoc[Id]); - // layoutToChange!.static = !layoutToChange!.static; - - // this.unStringifiedLayoutList = layouts; - - return [{ script: freezeScript!, label: "testing" }]; - } + @observable private height = (layout: Layout) => (this.props.Document.flexGrid ? layout.h : this.defaultH) * this.rowHeightPlusGap - this.margin; /** * @@ -223,7 +222,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { DataDoc={layout.resolvedDataDoc as Doc} NativeHeight={returnZero} NativeWidth={returnZero} - addDocTab={returnFalse} + addDocTab={this.addDocTab} backgroundColor={this.props.backgroundColor} ContainingCollectionDoc={this.props.Document} PanelWidth={width} @@ -232,8 +231,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} - display={"contents"} - contextMenuItems={() => this.contextMenuItems(layout)} + display={StrCast(this.props.Document.display)} />; } @@ -292,7 +290,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { collector.push( <div className={this.props.Document.flexGrid && (this.props.isSelected() ? true : false) ? "document-wrapper" : "document-wrapper static"} key={gridLayout.i} - // onContextMenu={() => ContextMenu.Instance.addItem({ description: "test", event: () => console.log("test"), icon: "rainbow" })} > {this.getDisplayDoc(layout, dxf, width, height)} </div > @@ -310,21 +307,22 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { console.log("getting layoutlist"); const layouts: Layout[] = this.parsedLayoutList; + return this.props.Document.flexGrid ? - layouts.map(({ i, x, y, w, h, static: staticVal }) => ({ + layouts.map(({ i, x, y, w, h }) => ({ i: i, x: x + w > NumCast(this.props.Document.numCols) ? 0 : x, // handles wrapping around of nodes when numCols decreases y: y, w: w > NumCast(this.props.Document.numCols) ? NumCast(this.props.Document.numCols) : w, // reduces width if greater than numCols h: h, - static: staticVal // only needed if we implement freeze in place + 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 })) : layouts.map(({ i }, index) => ({ i: i, - x: 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2)), - y: 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2)), - w: 2, - h: 2, + x: this.defaultW * (index % Math.floor(NumCast(this.props.Document.numCols) / this.defaultW)), + y: this.defaultH * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / this.defaultH)), + w: this.defaultW, + h: this.defaultH, static: true })); } @@ -357,6 +355,14 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value })); + onContextMenu = () => { + const displayOptionsMenu: ContextMenuProps[] = []; + displayOptionsMenu.push({ description: "Contents", event: () => this.props.Document.display = "contents", icon: "copy" }); + displayOptionsMenu.push({ description: "Undefined", event: () => this.props.Document.display = undefined, icon: "exclamation" }); + + ContextMenu.Instance.addItem({ description: "Display", subitems: displayOptionsMenu, icon: "tv" }); + } + render() { console.log("and render"); @@ -376,7 +382,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { style={{ pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined }} - // onContextMenu={() => ContextMenu.Instance.addItem({ description: "test", event: () => console.log("test"), icon: "rainbow" })} + onContextMenu={this.onContextMenu} ref={this.createDashEventsTarget} onPointerDown={e => { if (this.props.active(true)) { @@ -417,6 +423,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { transformScale={this.props.ScreenToLocalTransform().Scale} compactType={StrCast(this.props.Document.compactType)} preventCollision={BoolCast(this.props.Document.preventCollision)} + margin={this.margin} /> </div> diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 9192a38d7..529e7762f 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -21,6 +21,7 @@ interface GridProps { childrenDraggable: boolean; preventCollision: boolean; compactType: string; + margin: number; } /** @@ -47,6 +48,7 @@ export default class Grid extends React.Component<GridProps> { preventCollision={this.props.preventCollision} transformScale={1 / this.props.transformScale} // still doesn't work :( style={{ zIndex: 5 }} + margin={[this.props.margin, this.props.margin]} > {this.props.nodeList} </GridLayout> diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 77555061f..d9e7d072f 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -73,8 +73,8 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp @computed get panelHeight() { return this.nativeHeight && !this.props.Document._fitWidth ? this.nativeHeight() * this.contentScaling() : this.props.PanelHeight(); } private getTransform = () => this.props.ScreenToLocalTransform().translate(-this.centeringOffset, -this.centeringYOffset).scale(1 / this.contentScaling()); - private get centeringOffset() { return this.nativeWidth() && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth() * this.contentScaling()) / 2 : 0; } - private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight() * this.contentScaling()) / 2 : 0; } + private get centeringOffset() { return this.nativeWidth() && !this.props.Document._fitWidth && this.props.display !== "contents" ? (this.props.PanelWidth() - this.nativeWidth() * this.contentScaling()) / 2 : 0; } + private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 && this.props.display !== "contents" ? (this.props.PanelHeight() - this.nativeHeight() * this.contentScaling()) / 2 : 0; } @computed get borderRounding() { return StrCast(this.props.Document?.borderRounding); } |