From 94137cb3a771ec6afd803f3cff97da86a14dd54f Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Fri, 26 Jun 2020 01:46:52 +0530 Subject: background colour + comments --- .../collectionGrid/CollectionGridView.scss | 3 +- .../collectionGrid/CollectionGridView.tsx | 41 +++++++++++++++++++++- 2 files changed, 41 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 9c2d5cbff..4d8473be9 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -8,7 +8,6 @@ .collectionGridView-gridContainer { height: 100%; overflow-y: auto; - background-color: white; overflow-x: hidden; display: flex; @@ -22,7 +21,7 @@ } .react-grid-layout { - width : 100%; + width: 100%; } .react-grid-item>.react-resizable-handle { diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 2015ca930..72577e921 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -47,6 +47,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @computed get flexGrid() { return BoolCast(this.props.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")); } // is grid static/flexible i.e. whether nodes be moved around and resized + /** + * Sets up the listeners for the list of documents and the reset button. + */ componentDidMount() { this._changeListenerDisposer = reaction(() => this.childLayoutPairs, (pairs) => { const newLayouts: Layout[] = []; @@ -68,11 +71,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { }); } + /** + * Disposes the listeners. + */ componentWillUnmount() { this._changeListenerDisposer?.(); this._resetListenerDisposer?.(); } + /** + * @returns the default location of the grid node (i.e. when the grid is static) + * @param index + */ unflexedPosition(index: number): Omit { return { x: (index % Math.floor(this.numCols / this.defaultW)) * this.defaultW, @@ -83,6 +93,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { }; } + /** + * 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 x = Math.floor(pt[0] / this.colWidthPlusGap); @@ -90,10 +103,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return { x, y }; } + /** + * Creates a layout object for a grid item + */ makeLayoutItem = (doc: Doc, pos: { x: number, y: number }, Static: boolean = false, w: number = this.defaultW, h: number = this.defaultH) => { return ({ i: doc[Id], w, h, x: pos.x, y: pos.y, static: Static }); } + /** + * Adds a layout to the list of layouts. + */ addLayoutItem = (layouts: Layout[], layout: Layout) => { const f = layouts.findIndex(l => l.i === layout.i); f !== -1 && layouts.splice(f, 1); @@ -215,6 +234,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.savedLayoutList.map((layout, index) => Object.assign(layout, this.unflexedPosition(index))); } + /** + * Handles internal drop of Dash documents. + */ @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { const savedLayouts = this.savedLayoutList; @@ -227,6 +249,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return false; } + /** + * Handles external drop of images/PDFs etc from outside Dash. + */ + @action + onExternalDrop = async (e: React.DragEvent): Promise => { + const where = this.screenToCell(e.clientX, e.clientY); + super.onExternalDrop(e, { x: where.x, y: where.y }); + + } + /** * Handles the change in the value of the rowHeight slider. */ @@ -234,6 +266,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onSliderChange = (event: React.ChangeEvent) => { this._rowHeight = event.currentTarget.valueAsNumber; } + /** + * Handles the user clicking on the slider. + */ @action onSliderDown = (e: React.PointerEvent) => { this._rowHeight = this.rowHeight; // uses _rowHeight during dragging and sets doc's rowHeight when finished so that operation is undoable @@ -253,6 +288,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ContextMenu.Instance.addItem({ description: "Display", subitems: displayOptionsMenu, icon: "tv" }); } + /** + * Handles text document creation on double click. + */ onPointerDown = (e: React.PointerEvent) => { if (this.props.active(true)) { setupMoveUpEvents(this, e, returnFalse, returnFalse, @@ -276,8 +314,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
this.onPointerDown(e)} > + onPointerDown={e => this.onPointerDown(e)}>
e.stopPropagation()} onScroll={action(e => { if (!this.props.isSelected()) e.currentTarget.scrollTop = this._scroll; -- cgit v1.2.3-70-g09d2 From 72bdb86c98323ebb40f391fbdd439ccac58e9ef0 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 16 Jul 2020 17:44:28 +0530 Subject: fixed onExternalDrop --- .../collectionGrid/CollectionGridView.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index bf6958c68..110025313 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -30,6 +30,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { private _resetListenerDisposer: Opt; // listens for when the reset button is clicked @observable private _rowHeight: Opt; // 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 = {}; onChildClickHandler = () => ScriptCast(this.Document.onChildClick); @@ -57,7 +58,15 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { pairs.forEach((pair, i) => { const existing = oldLayouts.find(l => l.i === pair.layout[Id]); if (existing) newLayouts.push(existing); - else this.addLayoutItem(newLayouts, this.makeLayoutItem(pair.layout, this.unflexedPosition(i), !this.flexGrid)); + else { + if (Object.keys(this.dropLocation).length) { + this.addLayoutItem(newLayouts, this.makeLayoutItem(pair.layout, this.dropLocation as { x: number, y: number }, !this.flexGrid)); + this.dropLocation = {}; + } + else { + this.addLayoutItem(newLayouts, this.makeLayoutItem(pair.layout, this.unflexedPosition(i), !this.flexGrid)); + } + } }); pairs?.length && this.setLayoutList(newLayouts); }, { fireImmediately: true }); @@ -254,9 +263,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ @action onExternalDrop = async (e: React.DragEvent): Promise => { - const where = this.screenToCell(e.clientX, e.clientY); - super.onExternalDrop(e, { x: where.x, y: where.y }); - + this.dropLocation = this.screenToCell(e.clientX, e.clientY); + super.onExternalDrop(e, {}); } /** @@ -313,7 +321,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
this.onPointerDown(e)}> + onPointerDown={this.onPointerDown} + onDrop={this.onExternalDrop} + >
e.stopPropagation()} -- cgit v1.2.3-70-g09d2 From cd6ff8067b2b07f32d2a3f5dccc1b35f96263f89 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 16 Jul 2020 18:35:47 +0530 Subject: comments --- src/client/views/collections/collectionGrid/CollectionGridView.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 110025313..21f77e47b 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -30,7 +30,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { private _resetListenerDisposer: Opt; // listens for when the reset button is clicked @observable private _rowHeight: Opt; // 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 = {}; + private dropLocation: object = {}; // sets the drop location for external drops onChildClickHandler = () => ScriptCast(this.Document.onChildClick); @@ -59,11 +59,11 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const existing = oldLayouts.find(l => l.i === pair.layout[Id]); if (existing) newLayouts.push(existing); else { - if (Object.keys(this.dropLocation).length) { + if (Object.keys(this.dropLocation).length) { // external drop this.addLayoutItem(newLayouts, this.makeLayoutItem(pair.layout, this.dropLocation as { x: number, y: number }, !this.flexGrid)); this.dropLocation = {}; } - else { + else { // internal drop this.addLayoutItem(newLayouts, this.makeLayoutItem(pair.layout, this.unflexedPosition(i), !this.flexGrid)); } } -- cgit v1.2.3-70-g09d2