diff options
Diffstat (limited to 'src')
5 files changed, 82 insertions, 26 deletions
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index f6027471b..398b02d3f 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -183,6 +183,7 @@ width: 30%; display: flex; flex-direction: row; + margin-right: 5px; .grid-icon { margin-right: 5px; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 5a76a4605..95774adca 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -571,6 +571,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro private clicked: boolean = false; private entered: boolean = false; + private decrementLimitReached: boolean = false; /** * Sets the value of `numCols` on the grid's Document to the value entered. @@ -588,14 +589,14 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro /** * Sets the value of `rowHeight` on the grid's Document to the value entered. */ - @undoBatch - onRowHeightEnter = (e: React.KeyboardEvent<HTMLInputElement>) => { - if (e.key === "Enter" || e.key === "Tab") { - if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { - this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber; - } - } - } + // @undoBatch + // onRowHeightEnter = (e: React.KeyboardEvent<HTMLInputElement>) => { + // if (e.key === "Enter" || e.key === "Tab") { + // if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { + // this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber; + // } + // } + // } /** * Sets whether the grid is flexible or not on the grid's Document. @@ -613,27 +614,44 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro onDecrementButtonClick = () => { this.clicked = true; - this.entered && (this.props.CollectionView.props.Document.numCols as number)++; - undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)--)(); + if (!this.decrementLimitReached) { + this.entered && (this.props.CollectionView.props.Document.numCols as number)++; + undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)--)(); + } this.entered = false; } incrementValue = () => { this.entered = true; - if (!this.clicked) { + if (!this.clicked && !this.decrementLimitReached) { (this.props.CollectionView.props.Document.numCols as number)++; } + this.decrementLimitReached = false; this.clicked = false; } decrementValue = () => { this.entered = true; if (!this.clicked) { - (this.props.CollectionView.props.Document.numCols as number)--; + if (this.props.CollectionView.props.Document.numCols as number !== 1) { + (this.props.CollectionView.props.Document.numCols as number)--; + } + else { + this.decrementLimitReached = true; + } } + this.clicked = false; } + toggleCollisions = () => { + this.props.CollectionView.props.Document.preventCollision = !this.props.CollectionView.props.Document.preventCollision; + } + + changeCompactType = () => { + this.props.CollectionView.props.Document.compactType = this.props.CollectionView.props.Document.compactType === "vertical" ? "horizontal" : this.props.CollectionView.props.Document.compactType === "horizontal" ? "null" : "vertical"; + } + render() { return ( <div className="collectionGridViewChrome-cont" > @@ -645,17 +663,23 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro <input className="columnButton" onClick={this.onIncrementButtonClick} onMouseEnter={this.incrementValue} onMouseLeave={this.decrementValue} type="button" value="↑" /> <input className="columnButton" style={{ marginRight: 5 }} onClick={this.onDecrementButtonClick} onMouseEnter={this.decrementValue} onMouseLeave={this.incrementValue} type="button" value="↓" /> </span> - <span className="grid-control"> + {/* <span className="grid-control"> <span className="grid-icon"> <FontAwesomeIcon icon="text-height" size="1x" /> </span> <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.rowHeight as string} onKeyDown={this.onRowHeightEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> + </span> */} + <span className="grid-control" style={{ width: "20%" }}> + <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleCollisions} defaultChecked={!this.props.CollectionView.props.Document.preventCollision} /> + <label className="flexLabel">Collisions </label> </span> + + <span className="grid-control"> + <input style={{ marginRight: 5 }} type="button" onClick={this.changeCompactType} value={`Compact: ${this.props.CollectionView.props.Document.compactType}`} /> + </span> + <span className="grid-control"> <input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleFlex} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} /> - <span className="grid-icon"> - <FontAwesomeIcon icon="arrow-up" size="1x" /> - </span> <label className="flexLabel">Flexible</label> </span> </div> diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index e06e8dc90..578dae966 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -46,6 +46,14 @@ background: darkgrey; opacity: 1; } + + .rowHeightSlider::-moz-range-thumb { + width: 10px; + height: 10px; + border-radius: 50%; + background: darkgrey; + opacity: 1; + } } .collectionGridView-addDocumentButton { diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index dd4e28e33..e97cb9f0e 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -18,6 +18,7 @@ import { SnappingManager } from '../../../util/SnappingManager'; import { Docs } from '../../../documents/Documents'; import { EditableView, EditableProps } from '../../EditableView'; import "./CollectionGridView.scss"; +import { ContextMenu } from '../../ContextMenu'; type GridSchema = makeInterface<[typeof documentSchema]>; @@ -29,6 +30,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @observable private _scroll: number = 0; private changeListenerDisposer: Opt<Lambda>; private rowHeight: number = 0; + private sliderDragged: boolean = false; constructor(props: Readonly<SubCollectionViewProps>) { super(props); @@ -37,6 +39,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.rowHeight = NumCast(this.props.Document.rowHeight, 100); this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true); + this.props.Document.compactType = StrCast(this.props.Document.compactType, "vertical"); + this.props.Document.preventCollision = BoolCast(this.props.Document.preventCollision, false); + this.setLayout = this.setLayout.bind(this); this.onSliderChange = this.onSliderChange.bind(this); // this.deletePlaceholder = this.deletePlaceholder.bind(this); @@ -44,6 +49,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } componentDidMount() { + this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => { const layouts: Layout[] = this.parsedLayoutList; @@ -61,6 +67,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { if (!oldValue || newValue.length > oldValue.length) { // for each document that was added, add a corresponding grid layout document + newValue.forEach(({ layout }, i) => { const targetId = layout[Id]; if (!layouts.find((gridLayout: Layout) => gridLayout.i === targetId)) { @@ -89,7 +96,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { componentWillUnmount() { this.changeListenerDisposer && this.changeListenerDisposer(); - console.log("unmounted") } // deletePlaceholder(placeholder: Layout, e: MouseEvent) { @@ -222,9 +228,10 @@ 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> + </div > ); } @@ -237,9 +244,17 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ get layoutList(): Layout[] { const layouts: Layout[] = this.parsedLayoutList; + this.unStringifiedLayoutList = layouts; return this.props.Document.flexGrid ? - layouts : layouts.map(({ i }, index) => ({ + layouts.map(({ i, x, y, w, h }) => ({ + i: i, + x: x + w > NumCast(this.props.Document.numCols) ? 0 : x, + y: y, + w: w, + h: h + })) + : 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)), @@ -250,7 +265,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } onSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => { + NumCast(this.props.Document.rowHeight) !== event.currentTarget.valueAsNumber && (this.sliderDragged = true); this.props.Document.rowHeight = event.currentTarget.valueAsNumber; + } onSliderDown = () => { @@ -277,7 +294,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const newEditableViewProps: EditableProps = { GetValue: () => "", SetValue: this.addTextDocument, - contents: "+ ADD TEXT DOCUMENT AT END", + contents: "+ ADD TEXT DOCUMENT", }; const childDocumentViews: JSX.Element[] = this.contents; @@ -287,10 +304,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return ( <div className="collectionGridView-contents" style={{ - // marginLeft: NumCast(this.props.Document._xMargin), marginRight: NumCast(this.props.Document._xMargin), - // marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin), pointerEvents: !this.props.isSelected() && this.props.renderDepth !== 0 && !this.props.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined }} + // onContextMenu={() => ContextMenu.Instance.addItem({ description: "test", event: () => console.log("test"), icon: "rainbow" })} ref={this.createDashEventsTarget} onPointerDown={e => { if (this.props.active(true)) { @@ -301,7 +317,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // is the following section needed? it prevents the slider from being easily used and I'm not sure what it's preventing // if (this.props.isSelected(true)) { - // !((e.target as any)?.className.includes("react-resizable-handle")) && e.preventDefault(); + // !((e.target as any)?.className.includes("react-resizable-handle")) && e.preventDefault(); // } }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond @@ -316,7 +332,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onScroll={action(e => this._scroll = e.currentTarget.scrollTop)} onWheel={e => e.stopPropagation()} > - <input className="rowHeightSlider" type="range" value={NumCast(this.props.Document.rowHeight)} onPointerDown={this.onSliderDown} onPointerUp={this.onSliderUp} onChange={this.onSliderChange} style={{ width: this.props.PanelHeight() - 40 }} min={1} max={this.props.PanelHeight() - 40} onPointerEnter={e => e.currentTarget.focus()} /> + <input className="rowHeightSlider" type="range" value={NumCast(this.props.Document.rowHeight)} onPointerDown={this.onSliderDown} onPointerUp={this.onSliderUp} onChange={this.onSliderChange} style={{ width: this.props.PanelHeight() - 40 }} min={1} max={this.props.PanelHeight() - 40} onClick={() => !this.sliderDragged && console.log("clicking") && (this.sliderDragged = false)} /> <Grid width={this.props.PanelWidth()} nodeList={childDocumentViews.length ? childDocumentViews : null} @@ -326,6 +342,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { rowHeight={NumCast(this.props.Document.rowHeight)} setLayout={this.setLayout} transformScale={this.props.ScreenToLocalTransform().Scale} + compactType={StrCast(this.props.Document.compactType)} + preventCollision={BoolCast(this.props.Document.preventCollision)} + // deletePlaceholder={this.deletePlaceholder} /> diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index df550e3c2..5779bf463 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -20,6 +20,8 @@ interface GridProps { transformScale: number; childrenDraggable: boolean; // deletePlaceholder: Function; + preventCollision: boolean; + compactType: string; } /** @@ -57,19 +59,21 @@ export default class Grid extends React.Component<GridProps> { render() { console.log(this.props.transformScale); + const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null; + return ( <GridLayout className="layout" layout={this.props.layout} cols={this.props.numCols} rowHeight={this.props.rowHeight} width={this.props.width} - compactType={null} + compactType={compactType} isDroppable={true} isDraggable={this.props.childrenDraggable} isResizable={this.props.childrenDraggable} useCSSTransforms={true} onLayoutChange={this.onLayoutChange} - preventCollision={true} + preventCollision={this.props.preventCollision} transformScale={this.props.transformScale} // still doesn't work :( style={{ zIndex: 5 }} > |