From f86a5e2ad2d0a57e77bd5f43d109faff5cc50bda Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Tue, 21 Apr 2020 16:26:31 +0530 Subject: re-setup of grid view --- .../views/collections/collectionGrid/Grid.tsx | 34 ++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/client/views/collections/collectionGrid/Grid.tsx (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx new file mode 100644 index 000000000..550459299 --- /dev/null +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { observer } from "mobx-react"; +import { observable, action } from "mobx"; + + +interface Props { + +} + +import "../../../../../node_modules/react-grid-layout/css/styles.css"; +import "../../../../../node_modules/react-resizable/css/styles.css"; + +import * as GridLayout from 'react-grid-layout'; + +@observer +export default class Grid extends React.Component { + render() { + // layout is an array of objects, see the demo for more complete usage + const layout = [ + { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true }, + { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }, + { i: 'c', x: 4, y: 0, w: 1, h: 2 } + ]; + return ( + //
+ +
a
+
b
+
c
+ + ); + } +} -- cgit v1.2.3-70-g09d2 From 36eefd94f5f5d3bc08f1f1dea31d0b752a2070c3 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Fri, 24 Apr 2020 00:34:25 +0530 Subject: developing grid --- .../collectionGrid/CollectionGridView.scss | 1 + .../collectionGrid/CollectionGridView.tsx | 104 +++++++++++++++++++-- .../views/collections/collectionGrid/Grid.tsx | 33 ++++--- 3 files changed, 113 insertions(+), 25 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index c089585a0..0f1b64fa6 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -3,6 +3,7 @@ overflow: hidden; width: 100%; height: 100%; + flex-direction: column; .document-wrapper { display: flex; diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 2e496fe7f..70e0d41b9 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -18,13 +18,103 @@ import Grid from "./Grid"; type GridSchema = makeInterface<[typeof documentSchema]>; const GridSchema = makeInterface(documentSchema); +interface Layout { + i: string; + x: number; + y: number; + w: number; + h: number; +} + + + export class CollectionGridView extends CollectionSubView(GridSchema) { + + /** + * @returns the transform that will correctly place + * the document decorations box, shifted to the right by + * the sum of all the resolved column widths of the + * documents before the target. + */ + private lookupIndividualTransform = (layout: Doc) => { + // const columnUnitLength = this.columnUnitLength; + // if (columnUnitLength === undefined) { + // return Transform.Identity(); // we're still waiting on promises to resolve + // } + let offset = 0; + for (const { layout: candidate } of this.childLayoutPairs) { + if (candidate === layout) { + return this.props.ScreenToLocalTransform().translate(-offset, 0); + } + //offset += this.lookupPixels(candidate) + resizerWidth; + } + return Transform.Identity(); // type coersion, this case should never be hit + } + + + @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } + + addDocTab = (doc: Doc, where: string) => { + if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) { + this.dataDoc[this.props.fieldKey] = new List([doc]); + return true; + } + return this.props.addDocTab(doc, where); + } + + getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { + return ; + } + + @computed + private get contents(): [JSX.Element[], Layout[]] { + const { childLayoutPairs } = this; + const { Document } = this.props; + const collector: JSX.Element[] = []; + const layoutArray = []; + for (let i = 0; i < childLayoutPairs.length; i++) { + const { layout } = childLayoutPairs[i]; + const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); + const width = () => this.props.PanelWidth() / 5 - 20; //this.lookupPixels(layout); + const height = () => 200;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); + collector.push( +
+ {this.getDisplayDoc(layout, dxf, width, height)} +
+ ); + + layoutArray.push( + { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 } + ); + } + return [collector, layoutArray]; + } + + render(): JSX.Element { - const layout = [ - { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true }, - { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }, - { i: 'c', x: 4, y: 0, w: 1, h: 2 } - ]; + + const contents: JSX.Element[] = this.contents?.[0]; + const layout: Layout[] = this.contents?.[1]; + return (
- - - +
); } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 550459299..7b8dcefb5 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -1,33 +1,32 @@ import * as React from 'react'; import { observer } from "mobx-react"; -import { observable, action } from "mobx"; -interface Props { - -} - import "../../../../../node_modules/react-grid-layout/css/styles.css"; import "../../../../../node_modules/react-resizable/css/styles.css"; import * as GridLayout from 'react-grid-layout'; +interface GridProps { + width: number; + nodeList: JSX.Element[] | null; + layout: any; +} + @observer -export default class Grid extends React.Component { +export default class Grid extends React.Component { render() { // layout is an array of objects, see the demo for more complete usage - const layout = [ - { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true }, - { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }, - { i: 'c', x: 4, y: 0, w: 1, h: 2 } - ]; + // const layout = [ + // { i: 'wrapper0', x: 0, y: 0, w: 2, h: 2 },//, static: true }, + // { i: 'wrapper1', x: 2, y: 0, w: 2, h: 2 },// minW: 2, maxW: 4 }, + // { i: 'wrapper2', x: 4, y: 0, w: 2, h: 2 }, + // { i: 'wrapper3', x: 6, y: 0, w: 2, h: 2 },// minW: 2, maxW: 4 }, + // { i: 'wrapper4', x: 8, y: 0, w: 2, h: 2 } + // ]; return ( - //
- -
a
-
b
-
c
+ + {this.props.nodeList} ); } -- cgit v1.2.3-70-g09d2 From 20beef06518bfa08db60b8c5a06c637dab0f2b92 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 27 Apr 2020 18:18:21 +0530 Subject: update to pull from master --- package-lock.json | 82 ++++++++++++++++++---- package.json | 3 + .../collectionGrid/CollectionGridView.scss | 4 +- .../collectionGrid/CollectionGridView.tsx | 52 +++++++++----- .../views/collections/collectionGrid/Grid.tsx | 35 ++++++--- 5 files changed, 134 insertions(+), 42 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/package-lock.json b/package-lock.json index 176d1f27e..a59e419c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -973,6 +973,14 @@ "@types/react": "*" } }, + "@types/react-grid-layout": { + "version": "0.17.1", + "resolved": "https://registry.npmjs.org/@types/react-grid-layout/-/react-grid-layout-0.17.1.tgz", + "integrity": "sha512-1ssQjX3X2A89jx94jECJ0Ze2EHFRYlBHjRh2pnlwjJj1WaEijXUNvwKnUzKwgNFnyZ91Pzqu9Z3V7Atzi9ge7A==", + "requires": { + "@types/react": "*" + } + }, "@types/react-measure": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/react-measure/-/react-measure-2.0.6.tgz", @@ -5551,7 +5559,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5569,7 +5578,8 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "bindings": { "version": "1.5.0", @@ -5583,6 +5593,7 @@ "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5595,15 +5606,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5706,7 +5720,8 @@ }, "inherits": { "version": "2.0.4", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5716,6 +5731,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5728,17 +5744,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5755,6 +5774,7 @@ "mkdirp": { "version": "0.5.3", "bundled": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -5810,7 +5830,8 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -5835,7 +5856,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5845,6 +5867,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5913,7 +5936,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5943,6 +5967,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5960,6 +5985,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5998,11 +6024,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -13946,6 +13974,15 @@ "scheduler": "^0.19.1" } }, + "react-draggable": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.3.1.tgz", + "integrity": "sha512-m8QeV+eIi7LhD5mXoLqDzLbokc6Ncwa0T34fF6uJzWSs4vc4fdZI/XGqHYoEn91T8S6qO+BSXslONh7Jz9VPQQ==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.6.0" + } + }, "react-golden-layout": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-golden-layout/-/react-golden-layout-1.0.6.tgz", @@ -13956,6 +13993,18 @@ "react-dom": "^16.3.0" } }, + "react-grid-layout": { + "version": "0.18.3", + "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-0.18.3.tgz", + "integrity": "sha512-lHkrk941Tk5nTwZPa9uj6ttHBT0VehSHwEhWbINBJKvM1GRaFNOefvjcuxSyuCI5JWjVUP+Qm3ARt2470AlxMA==", + "requires": { + "classnames": "2.x", + "lodash.isequal": "^4.0.0", + "prop-types": "^15.0.0", + "react-draggable": "^4.0.0", + "react-resizable": "^1.9.0" + } + }, "react-image-lightbox-with-rotate": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/react-image-lightbox-with-rotate/-/react-image-lightbox-with-rotate-5.1.1.tgz", @@ -14066,6 +14115,15 @@ } } }, + "react-resizable": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-1.10.1.tgz", + "integrity": "sha512-Jd/bKOKx6+19NwC4/aMLRu/J9/krfxlDnElP41Oc+oLiUWs/zwV1S9yBfBZRnqAwQb6vQ/HRSk3bsSWGSgVbpw==", + "requires": { + "prop-types": "15.x", + "react-draggable": "^4.0.3" + } + }, "react-simple-dropdown": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/react-simple-dropdown/-/react-simple-dropdown-3.2.3.tgz", diff --git a/package.json b/package.json index f1b4be520..9c2d4602c 100644 --- a/package.json +++ b/package.json @@ -114,6 +114,7 @@ "@types/react": "^16.9.19", "@types/react-autosuggest": "^9.3.13", "@types/react-color": "^2.17.3", + "@types/react-grid-layout": "^0.17.1", "@types/react-measure": "^2.0.6", "@types/react-table": "^6.8.6", "@types/request": "^2.48.4", @@ -230,10 +231,12 @@ "react-dimensions": "^1.3.1", "react-dom": "^16.12.0", "react-golden-layout": "^1.0.6", + "react-grid-layout": "^0.18.3", "react-image-lightbox-with-rotate": "^5.1.1", "react-jsx-parser": "^1.21.0", "react-measure": "^2.2.4", "react-mosaic": "0.0.20", + "react-resizable": "^1.10.1", "react-simple-dropdown": "^3.2.3", "react-split-pane": "^0.1.89", "react-table": "^6.11.5", diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 0f1b64fa6..8f12c1a24 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -8,7 +8,7 @@ .document-wrapper { display: flex; flex-direction: column; - width: 100px; - height: 100px; + width: 100%; + height: 100%; } } \ No newline at end of file diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 70e0d41b9..b94bd02a1 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from 'mobx'; +import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from "react"; import { Doc } from '../../../../new_fields/Doc'; @@ -13,23 +13,16 @@ import { CollectionSubView } from '../CollectionSubView'; import { List } from '../../../../new_fields/List'; import { returnZero } from '../../../../Utils'; import Grid from "./Grid"; +import { Layout } from "./Grid"; type GridSchema = makeInterface<[typeof documentSchema]>; const GridSchema = makeInterface(documentSchema); -interface Layout { - i: string; - x: number; - y: number; - w: number; - h: number; -} - - - export class CollectionGridView extends CollectionSubView(GridSchema) { + @observable private layouts: Layout[] | undefined; + /** * @returns the transform that will correctly place * the document decorations box, shifted to the right by @@ -46,7 +39,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { if (candidate === layout) { return this.props.ScreenToLocalTransform().translate(-offset, 0); } - //offset += this.lookupPixels(candidate) + resizerWidth; + offset += 194 + 10; } return Transform.Identity(); // type coersion, this case should never be hit } @@ -82,17 +75,37 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { />; } + //@action + set layout(layouts: Layout[]) { + this.layouts = layouts; + console.log(this.layouts[0]); + } + + @computed + get layout() { + if (this.layouts === undefined) { + this.layouts = []; + console.log("empty"); + for (let i = 0; i < this.childLayoutPairs.length; i++) { + this.layouts.push( + { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 } + ); + } + } + return this.layouts; + } + @computed private get contents(): [JSX.Element[], Layout[]] { const { childLayoutPairs } = this; const { Document } = this.props; const collector: JSX.Element[] = []; - const layoutArray = []; + const layoutArray: Layout[] = []; for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); - const width = () => this.props.PanelWidth() / 5 - 20; //this.lookupPixels(layout); - const height = () => 200;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); + const width = () => 300; //this.lookupPixels(layout); + const height = () => 300;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); collector.push(
- +
); } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 7b8dcefb5..a9e906488 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -6,28 +6,41 @@ import "../../../../../node_modules/react-grid-layout/css/styles.css"; import "../../../../../node_modules/react-resizable/css/styles.css"; import * as GridLayout from 'react-grid-layout'; +import { Layout } from 'react-grid-layout'; +import { CollectionGridView } from './CollectionGridView'; +export { Layout } from 'react-grid-layout'; + interface GridProps { width: number; nodeList: JSX.Element[] | null; - layout: any; + layout: Layout[]; + gridView: CollectionGridView; } @observer export default class Grid extends React.Component { + + onLayoutChange(layout: Layout[]) { + // for (let i = 0; i < this.props.nodeList!.length; i++) { + // this.props.layout[i] = layout[i]; + // } + console.log("REACHED"); + this.props.gridView.layout = layout; + } render() { - // layout is an array of objects, see the demo for more complete usage - // const layout = [ - // { i: 'wrapper0', x: 0, y: 0, w: 2, h: 2 },//, static: true }, - // { i: 'wrapper1', x: 2, y: 0, w: 2, h: 2 },// minW: 2, maxW: 4 }, - // { i: 'wrapper2', x: 4, y: 0, w: 2, h: 2 }, - // { i: 'wrapper3', x: 6, y: 0, w: 2, h: 2 },// minW: 2, maxW: 4 }, - // { i: 'wrapper4', x: 8, y: 0, w: 2, h: 2 } - // ]; return ( - + this.onLayoutChange(layout)} + > {this.props.nodeList} - + ); } } -- cgit v1.2.3-70-g09d2 From a2eb8ba283ce4a8fb7f423a9198e2a5778eba886 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 4 May 2020 12:18:11 +0530 Subject: updating from master --- .../collectionGrid/CollectionGridView.tsx | 143 ++++++++++++++++----- .../views/collections/collectionGrid/Grid.tsx | 11 +- .../views/nodes/ContentFittingDocumentView.tsx | 4 +- 3 files changed, 117 insertions(+), 41 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index b94bd02a1..f7d6f481a 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,7 +1,7 @@ import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from "react"; -import { Doc } from '../../../../new_fields/Doc'; +import { Doc, DataSym, DocListCast } from '../../../../new_fields/Doc'; import { documentSchema } from '../../../../new_fields/documentSchemas'; import { makeInterface } from '../../../../new_fields/Schema'; import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../new_fields/Types'; @@ -21,7 +21,20 @@ const GridSchema = makeInterface(documentSchema); export class CollectionGridView extends CollectionSubView(GridSchema) { - @observable private layouts: Layout[] | undefined; + private layouts: Layout[] = []; + private layoutDocs: Doc[] = []; + @observable private numCols: number = 10; + @observable private rowHeight: number = 100; + @observable private isMounted: boolean = false; + + componentDidMount() { + this.isMounted = true; + } + + componentWillUnmount() { + this.isMounted = false; + console.log("hola"); + } /** * @returns the transform that will correctly place @@ -29,24 +42,19 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * the sum of all the resolved column widths of the * documents before the target. */ - private lookupIndividualTransform = (layout: Doc) => { - // const columnUnitLength = this.columnUnitLength; - // if (columnUnitLength === undefined) { - // return Transform.Identity(); // we're still waiting on promises to resolve - // } - let offset = 0; - for (const { layout: candidate } of this.childLayoutPairs) { - if (candidate === layout) { - return this.props.ScreenToLocalTransform().translate(-offset, 0); - } - offset += 194 + 10; - } - return Transform.Identity(); // type coersion, this case should never be hit + private lookupIndividualTransform = (layout: Layout) => { + + const yTranslation = this.rowHeight * layout.y;// + 15 * (layout.y - 1); + console.log(yTranslation); + return this.props.ScreenToLocalTransform().translate(-this.props.PanelWidth() / this.numCols * layout.x, -yTranslation); } @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } + @observable private width = (layout: Layout) => layout.w * this.props.PanelWidth() / this.numCols; + @observable private height = (layout: Layout) => layout.h * this.rowHeight; + addDocTab = (doc: Doc, where: string) => { if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) { this.dataDoc[this.props.fieldKey] = new List([doc]); @@ -72,26 +80,76 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { getTransform={dxf} onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} + Display={"contents"} />; } + //@action set layout(layouts: Layout[]) { this.layouts = layouts; - console.log(this.layouts[0]); + this.props.Document.gridLayouts = new List(); + for (const layout of layouts) { + const layoutDoc = new Doc(); + layoutDoc.i = layout.i; + layoutDoc.x = layout.x; + layoutDoc.y = layout.y; + layoutDoc.w = layout.w; + layoutDoc.h = layout.h; + + (this.props.Document.gridLayouts as List).push(layoutDoc); + console.log("gazoinks"); + + } + this.forceUpdate(); // better way to do this? } - @computed get layout() { - if (this.layouts === undefined) { - this.layouts = []; - console.log("empty"); - for (let i = 0; i < this.childLayoutPairs.length; i++) { - this.layouts.push( - { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 } - ); + //console.log(this.layouts.length === 0); + if (this.layouts.length === 0) { + if (this.props.Document.gridLayouts) { + //console.log(this.props.Document.gridLayouts); + // for (const layout of (this.props.Document.gridLayouts as List)) { + // if (layout instanceof Doc) { + // this.layouts.push( + // { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } + // ); + // } + // else { + // layout.then((layout: Doc) => { + // this.layouts.push( + // { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } + // ); + // console.log(layout.i); + // }); + // } + // } + // } + for (const layout of DocListCast(this.props.Document.gridLayouts)) { + this.layouts.push( + { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } + ); + } + } + else { + for (let i = 0; i < this.childLayoutPairs.length; i++) { + this.layouts.push( + { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 } + ); + + const layoutDoc: Doc = new Doc(); + layoutDoc.i = "wrapper" + i; + layoutDoc.x = 2 * (i % 5); + layoutDoc.y = 2 * Math.floor(i / 5); + layoutDoc.w = 2; + layoutDoc.h = 2; + + this.layoutDocs.push(layoutDoc); + } + this.props.Document.gridLayouts = new List(this.layoutDocs); } } + return this.layouts; } @@ -101,25 +159,39 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const { Document } = this.props; const collector: JSX.Element[] = []; const layoutArray: Layout[] = []; + + + const previousLength = this.layout.length; + layoutArray.push(...this.layout); + + if (!layoutArray.length) { + return [[], []]; + } + + if (this.childLayoutPairs.length > previousLength) { + layoutArray.push( + { i: 'wrapper' + previousLength, x: 2 * (previousLength % 5), y: 2 * Math.floor(previousLength / 5), w: 2, h: 2 } + // add values to document + ); + // this.layout.push( + // { i: 'wrapper' + previousLength, x: 2 * (previousLength % 5), y: 2 * Math.floor(previousLength / 5), w: 2, h: 2 } + // ); + } + for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; - const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); - const width = () => 300; //this.lookupPixels(layout); - const height = () => 300;//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); + const dxf = () => this.lookupIndividualTransform(layoutArray[i]);//.translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); + const width = () => this.width(layoutArray[i]); //this.lookupPixels(layout); + const height = () => this.height(layoutArray[i]);//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); collector.push(
{this.getDisplayDoc(layout, dxf, width, height)}
); - - layoutArray.push( - { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 } - // add values to document - ); } + return [collector, layoutArray]; } @@ -127,7 +199,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const contents: JSX.Element[] = this.contents?.[0]; const layout: Layout[] = this.contents?.[1]; - + // if (this.isMounted) { return (
); + // } } } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index a9e906488..ce0173e94 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -16,24 +16,23 @@ interface GridProps { nodeList: JSX.Element[] | null; layout: Layout[]; gridView: CollectionGridView; + numCols: number; + rowHeight: number; } @observer export default class Grid extends React.Component { onLayoutChange(layout: Layout[]) { - // for (let i = 0; i < this.props.nodeList!.length; i++) { - // this.props.layout[i] = layout[i]; - // } - console.log("REACHED"); this.props.gridView.layout = layout; } + render() { return ( void; dontRegisterView?: boolean; rootSelected: (outsideReaction?: boolean) => boolean; + Display?: string; } @observer @@ -77,7 +78,8 @@ export class ContentFittingDocumentView extends React.Component 0.001 ? "auto" : this.props.PanelWidth(), - height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight() + height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(), + display: this.props.Display /* just added for grid */ }}> {!this.props.Document || !this.props.PanelWidth ? (null) : (
Date: Sun, 24 May 2020 10:36:31 +0530 Subject: Added chrome to grid view and modified grid mechanism --- src/client/views/collections/CollectionView.tsx | 1 + .../views/collections/CollectionViewChromes.scss | 30 ++- .../views/collections/CollectionViewChromes.tsx | 57 ++++- .../collectionGrid/CollectionGridView.tsx | 248 ++++++++++++--------- .../views/collections/collectionGrid/Grid.tsx | 8 + .../views/nodes/ContentFittingDocumentView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 1 + 7 files changed, 225 insertions(+), 122 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 5b344813d..311e8d3a1 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -227,6 +227,7 @@ export class CollectionView extends Touchable func(CollectionViewType.Carousel), icon: "columns" }); subItems.push({ description: "Pivot/Time", event: () => func(CollectionViewType.Time), icon: "columns" }); subItems.push({ description: "Map", event: () => func(CollectionViewType.Map), icon: "globe-americas" }); + subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "border-all" }); if (addExtras && this.props.Document._viewType === CollectionViewType.Freeform) { subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) }); } diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index e4581eb46..9795a3a22 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -3,7 +3,7 @@ .collectionViewChrome-cont { position: absolute; - width:100%; + width: 100%; opacity: 0.9; z-index: 9001; transition: top .5s; @@ -33,7 +33,7 @@ outline-color: black; } - .collectionViewBaseChrome-button{ + .collectionViewBaseChrome-button { font-size: 75%; text-transform: uppercase; letter-spacing: 2px; @@ -44,6 +44,7 @@ padding: 12px 10px 11px 10px; margin-left: 10px; } + .collectionViewBaseChrome-cmdPicker { margin-left: 3px; margin-right: 0px; @@ -51,14 +52,16 @@ border: none; color: grey; } + .commandEntry-outerDiv { pointer-events: all; background-color: gray; display: flex; flex-direction: row; + .commandEntry-drop { - color:white; - width:25px; + color: white; + width: 25px; margin-top: auto; margin-bottom: auto; } @@ -72,15 +75,17 @@ pointer-events: all; // margin-top: 10px; } + .collectionViewBaseChrome-template, .collectionViewBaseChrome-viewModes { display: grid; background: rgb(238, 238, 238); - color:grey; - margin-top:auto; - margin-bottom:auto; + color: grey; + margin-top: auto; + margin-bottom: auto; margin-left: 5px; } + .collectionViewBaseChrome-viewModes { margin-left: 25px; } @@ -88,7 +93,7 @@ .collectionViewBaseChrome-viewSpecs { margin-left: 5px; display: grid; - + .collectionViewBaseChrome-filterIcon { position: relative; display: flex; @@ -202,7 +207,7 @@ .collectionStackingViewChrome-pivotField, .collectionTreeViewChrome-pivotField { color: white; - width:100%; + width: 100%; min-width: 100px; text-align: center; background: rgb(238, 238, 238); @@ -232,6 +237,10 @@ .collectionTreeViewChrome-pivotField:hover { cursor: text; } + + .collectionGridViewChrome-entryBox { + width: 50%; + } } } @@ -292,8 +301,9 @@ flex-direction: column; height: 40px; } + .commandEntry-inputArea { - display:flex; + display: flex; flex-direction: row; width: 150px; margin: auto auto auto auto; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 5dc0b09ac..def20ae9b 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import * as React from "react"; -import { Doc, DocListCast } from "../../../fields/Doc"; +import { Doc, DocListCast, HeightSym } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; @@ -15,6 +15,8 @@ import { COLLECTION_BORDER_WIDTH } from "../globalCssVariables.scss"; import { CollectionViewType } from "./CollectionView"; import { CollectionView } from "./CollectionView"; import "./CollectionViewChromes.scss"; +import { CollectionGridView } from "./collectionGrid/CollectionGridView"; +import HeightLabel from "./collectionMulticolumn/MultirowHeightLabel"; const datepicker = require('js-datepicker'); interface CollectionViewChromeProps { @@ -205,6 +207,7 @@ export class CollectionViewBaseChrome extends React.Component); case CollectionViewType.Tree: return (); case CollectionViewType.Masonry: return (); + case CollectionViewType.Grid: return (); default: return null; } } @@ -504,3 +507,55 @@ export class CollectionTreeViewChrome extends React.Component { + + /** + * Sets the value of `numCols` on the grid's Document to the value entered. + */ + @action + onNumColsEnter = (e: React.KeyboardEvent) => { + if (e.key === "Enter" || e.key === "Tab") { + if (this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { + this.props.CollectionView.props.Document.numCols = e.currentTarget.valueAsNumber; + //this.props.CollectionView.forceUpdate(); // to be used if CollectionGridView is not an observer + } + + } + } + + /** + * Sets the value of `rowHeight` on the grid's Document to the value entered. + */ + @action + onRowHeightEnter = (e: React.KeyboardEvent) => { + if (e.key === "Enter" || e.key === "Tab") { + if (this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { + this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber; + //this.props.CollectionView.forceUpdate(); + } + } + } + + render() { + return ( +
+ + + + + + + + + + + + +
+ ); + } +} \ No newline at end of file diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index cd1e0f7f0..ebb710af6 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,39 +1,58 @@ -import { action, computed, observable } from 'mobx'; -import { observer } from 'mobx-react'; +import { computed, observable, action } from 'mobx'; import * as React from "react"; -import { Doc, DataSym, DocListCast } from '../../../../new_fields/Doc'; -import { documentSchema } from '../../../../new_fields/documentSchemas'; -import { makeInterface } from '../../../../new_fields/Schema'; -import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../new_fields/Types'; +import { Doc, DocListCast } from '../../../../fields/Doc'; +import { documentSchema } from '../../../../fields/documentSchemas'; +import { makeInterface, createSchema } from '../../../../fields/Schema'; +import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../fields/Types'; import { DragManager } from '../../../util/DragManager'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; import { CollectionSubView } from '../CollectionSubView'; -import { List } from '../../../../new_fields/List'; +import { SubCollectionViewProps } from '../CollectionSubView'; +import { List } from '../../../../fields/List'; import { returnZero } from '../../../../Utils'; -import Grid from "./Grid"; -import { Layout } from "./Grid"; +import Grid, { Layout } from "./Grid"; +import { Id } from '../../../../fields/FieldSymbols'; +import { observer } from 'mobx-react'; type GridSchema = makeInterface<[typeof documentSchema]>; const GridSchema = makeInterface(documentSchema); +@observer export class CollectionGridView extends CollectionSubView(GridSchema) { - private layouts: Layout[] = []; - private layoutDocs: Doc[] = []; - @observable private numCols: number = 10; - @observable private rowHeight: number = 100; - @observable private isMounted: boolean = false; + constructor(props: Readonly) { + super(props); - componentDidMount() { - this.isMounted = true; + this.props.Document.numCols = this.props.Document.numCols ? this.props.Document.numCols : 10; + this.props.Document.rowHeight = this.props.Document.rowHeight ? this.props.Document.rowHeight : 100; } - componentWillUnmount() { - this.isMounted = false; - console.log("hola"); + componentDidMount() { + if (!(this.props.Document.gridLayouts as List)?.length) { + + console.log("no layouts stored on doc"); + + this.props.Document.gridLayouts = new List(); + + for (let i = 0; i < this.childLayoutPairs.length; i++) { + + const layoutDoc: Doc = new Doc(); + layoutDoc.i = layoutDoc[Id]; + layoutDoc.x = 2 * (i % 5); + layoutDoc.y = 2 * Math.floor(i / 5); + layoutDoc.w = 2; + layoutDoc.h = 2; + + (this.props.Document.gridLayouts as List).push(layoutDoc); + + // use childlayoutpairs length instead + } + + } + } /** @@ -42,18 +61,26 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * the sum of all the resolved column widths of the * documents before the target. */ - private lookupIndividualTransform = (layout: Layout) => { + private lookupIndividualTransform = (doc: Doc) => { - const yTranslation = this.rowHeight * layout.y;// + 15 * (layout.y - 1); - console.log(yTranslation); - return this.props.ScreenToLocalTransform().translate(-this.props.PanelWidth() / this.numCols * layout.x, -yTranslation); + const yTranslation = (this.props.Document.rowHeight as number) * (doc.y as number) + 10 * (doc.y as number); + return this.props.ScreenToLocalTransform().translate(-this.props.PanelWidth() / (this.props.Document.numCols as number) * (doc.x as number), -yTranslation); } @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } - @observable private width = (layout: Layout) => layout.w * this.props.PanelWidth() / this.numCols; - @observable private height = (layout: Layout) => layout.h * this.rowHeight; + /** + * Sets the width of the decorating box. + * @param Doc doc + */ + @observable private width = (doc: Doc) => doc.w as number * this.props.PanelWidth() / (this.props.Document.numCols as number); + + /** + * Sets the height of the decorating box. + * @param doc `Doc` + */ + @observable private height = (doc: Doc) => doc.h as number * (this.props.Document.rowHeight as number); addDocTab = (doc: Doc, where: string) => { if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) { @@ -81,15 +108,23 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} - //Display={"contents"} + display={"contents"} />; } - //@action + /** + * Saves the layouts received from the Grid to the Document. + * @param layouts `Layout[]` + */ set layout(layouts: Layout[]) { - this.layouts = layouts; - this.props.Document.gridLayouts = new List(); + + console.log("setting layout in CollectionGridView"); + console.log(layouts?.[0].w); + //this.props.Document.gridLayouts = new List(); + + const docList: Doc[] = []; + for (const layout of layouts) { const layoutDoc = new Doc(); layoutDoc.i = layout.i; @@ -98,126 +133,119 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { layoutDoc.w = layout.w; layoutDoc.h = layout.h; - (this.props.Document.gridLayouts as List).push(layoutDoc); - console.log("gazoinks"); - + docList.push(layoutDoc); } - this.forceUpdate(); // better way to do this? + + this.props.Document.gridLayouts = new List(docList); } - get layout() { - //console.log(this.layouts.length === 0); - if (this.layouts.length === 0) { - if (this.props.Document.gridLayouts) { - //console.log(this.props.Document.gridLayouts); - // for (const layout of (this.props.Document.gridLayouts as List)) { - // if (layout instanceof Doc) { - // this.layouts.push( - // { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } - // ); - // } - // else { - // layout.then((layout: Doc) => { - // this.layouts.push( - // { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } - // ); - // console.log(layout.i); - // }); - // } - // } - // } - for (const layout of DocListCast(this.props.Document.gridLayouts)) { - this.layouts.push( - { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } - ); - } - } - else { - for (let i = 0; i < this.childLayoutPairs.length; i++) { - this.layouts.push( - { i: 'wrapper' + i, x: 2 * (i % 5), y: 2 * Math.floor(i / 5), w: 2, h: 2 } - ); - - const layoutDoc: Doc = new Doc(); - layoutDoc.i = "wrapper" + i; - layoutDoc.x = 2 * (i % 5); - layoutDoc.y = 2 * Math.floor(i / 5); - layoutDoc.w = 2; - layoutDoc.h = 2; - - this.layoutDocs.push(layoutDoc); - this.props.Document.highest = i; - } - this.props.Document.gridLayouts = new List(this.layoutDocs); - } - } + // _.reject() on item removal? - return this.layouts; - } + /** + * @returns a list of `ContentFittingDocumentView`s inside wrapper divs. + * The key of the wrapper div must be the same as the `i` value of the corresponding layout. + */ @computed - private get contents(): [JSX.Element[], Layout[]] { + private get contents(): JSX.Element[] { const { childLayoutPairs } = this; const collector: JSX.Element[] = []; - const layoutArray: Layout[] = []; + //const layoutArray: Layout[] = []; + const docList: Doc[] = DocListCast(this.props.Document.gridLayouts); - const previousLength = this.layout.length; - layoutArray.push(...this.layout); + const previousLength = docList.length; + // layoutArray.push(...this.layout); - if (!layoutArray.length) { - return [[], []]; - } - - if (this.childLayoutPairs.length > previousLength) { - layoutArray.push( - { i: 'wrapper' + previousLength, x: 2 * (previousLength % 5), y: 2 * Math.floor(previousLength / 5), w: 2, h: 2 } - // add values to document - ); - // this.layout.push( - // { i: 'wrapper' + previousLength, x: 2 * (previousLength % 5), y: 2 * Math.floor(previousLength / 5), w: 2, h: 2 } - // ); + if (!previousLength) { + // console.log("early return"); + return []; } for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; - const dxf = () => this.lookupIndividualTransform(layoutArray[i]);//.translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); - const width = () => this.width(layoutArray[i]); //this.lookupPixels(layout); - const height = () => this.height(layoutArray[i]);//PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0); + const dxf = () => this.lookupIndividualTransform(docList?.[i]); + const width = () => this.width(docList?.[i]); + const height = () => this.height(docList?.[i]); collector.push(
{this.getDisplayDoc(layout, dxf, width, height)}
); } - return [collector, layoutArray]; + return collector; + } + + /** + * @returns a list of Layouts from a list of Docs + * @param docLayoutList `Doc[]` + */ + toLayoutList(docLayoutList: Doc[]): Layout[] { + + const layouts: Layout[] = []; + for (const layout of docLayoutList) { + layouts.push( + { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } + ); + } + return layouts; + } + + /** + * Checks whether a new node has been added to the grid and updates the Document accordingly. + */ + checkUpdate() { + const previousLength = (this.props.Document.gridLayouts as List)?.length; + if (this.childLayoutPairs.length > previousLength) { + console.log("adding doc"); + const layoutDoc: Doc = new Doc(); + layoutDoc.i = layoutDoc[Id]; + layoutDoc.x = 2 * (previousLength % 5); + layoutDoc.y = 2 * Math.floor(previousLength / 5); + layoutDoc.w = 2; + layoutDoc.h = 2; + + (this.props.Document.gridLayouts as List).push(layoutDoc); + } } render(): JSX.Element { - const contents: JSX.Element[] = this.contents?.[0]; - const layout: Layout[] = this.contents?.[1]; - // if (this.isMounted) { + this.checkUpdate(); + + const contents: JSX.Element[] = this.contents; + const layout: Layout[] = this.toLayoutList(DocListCast(this.props.Document.gridLayouts)); + + if (layout.length === 0) { + console.log("layouts not loaded"); + } + else { + console.log("rendering with this"); + console.log(layout[0].w); + } + + return (
- + }} + ref={this.createDashEventsTarget} + onPointerDown={(e: React.PointerEvent) => e.stopPropagation()} + >
); - // } } } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index ce0173e94..d400f2810 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -20,9 +20,16 @@ interface GridProps { rowHeight: number; } +/** + * Wrapper around the actual GridLayout of `react-grid-layout`. + */ @observer export default class Grid extends React.Component { + /** + * If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document. + * @param layout `Layout[]` + */ onLayoutChange(layout: Layout[]) { this.props.gridView.layout = layout; } @@ -36,6 +43,7 @@ export default class Grid extends React.Component this.onLayoutChange(layout)} > {this.props.nodeList} diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 39097865a..77555061f 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -83,7 +83,7 @@ export class ContentFittingDocumentView extends React.Component 0.001 ? "auto" : this.props.PanelWidth(), height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(), - display: this.props.Display /* just added for grid */ + display: this.props.display /* just added for grid */ }}> {!this.props.Document || !this.props.PanelWidth ? (null) : (
Date: Sun, 24 May 2020 20:26:57 +0530 Subject: passing callback instead of CollectionGridView (this) --- .../collectionGrid/CollectionGridView.tsx | 28 ++++++++++++---------- .../views/collections/collectionGrid/Grid.tsx | 8 ++++--- 2 files changed, 21 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index ebb710af6..d06bb3192 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -112,12 +112,13 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { />; } - //@action + /** * Saves the layouts received from the Grid to the Document. * @param layouts `Layout[]` */ - set layout(layouts: Layout[]) { + @undoBatch + setLayout(layouts: Layout[]) { console.log("setting layout in CollectionGridView"); console.log(layouts?.[0].w); @@ -197,6 +198,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { /** * Checks whether a new node has been added to the grid and updates the Document accordingly. */ + @undoBatch checkUpdate() { const previousLength = (this.props.Document.gridLayouts as List)?.length; if (this.childLayoutPairs.length > previousLength) { @@ -216,16 +218,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.checkUpdate(); + const docList: Doc[] = DocListCast(this.props.Document.gridLayouts); + const contents: JSX.Element[] = this.contents; - const layout: Layout[] = this.toLayoutList(DocListCast(this.props.Document.gridLayouts)); + const layout: Layout[] = this.toLayoutList(docList); - if (layout.length === 0) { - console.log("layouts not loaded"); - } - else { - console.log("rendering with this"); - console.log(layout[0].w); - } + // if (layout.length === 0) { + // console.log("layouts not loaded"); + // } + // else { + // console.log("rendering with this"); + // console.log(layout[0].w); + // } return ( @@ -235,15 +239,15 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin) }} ref={this.createDashEventsTarget} - onPointerDown={(e: React.PointerEvent) => e.stopPropagation()} + //onPointerDown={(e: React.PointerEvent) => e.stopPropagation()} > this.setLayout(layout)} />
); diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index d400f2810..a5f5c724a 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -15,26 +15,28 @@ interface GridProps { width: number; nodeList: JSX.Element[] | null; layout: Layout[]; - gridView: CollectionGridView; numCols: number; rowHeight: number; + setLayout: Function; } /** * Wrapper around the actual GridLayout of `react-grid-layout`. */ @observer -export default class Grid extends React.Component { +export default class Grid extends React.Component { /** * If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document. * @param layout `Layout[]` */ onLayoutChange(layout: Layout[]) { - this.props.gridView.layout = layout; + console.log("setting in grid component" + layout[0].w); + this.props.setLayout(layout); } render() { + console.log("In grid layout prop received value= " + this.props.layout?.[0]?.w); return ( Date: Tue, 26 May 2020 15:48:46 +0530 Subject: modified delete --- .../views/collections/CollectionViewChromes.tsx | 9 ++ .../collectionGrid/CollectionGridView.tsx | 155 +++++++++++++++------ .../views/collections/collectionGrid/Grid.tsx | 13 +- 3 files changed, 132 insertions(+), 45 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index def20ae9b..7e86995ac 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -540,6 +540,8 @@ export class CollectionGridViewChrome extends React.Component) => this.props.CollectionView.props.Document.flexGrid = event.target.checked; + render() { return (
@@ -555,6 +557,13 @@ export class CollectionGridViewChrome extends React.Component + + + + + + +
); } diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index d06bb3192..468665ee5 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,10 +1,9 @@ -import { computed, observable, action } from 'mobx'; +import { computed, observable } from 'mobx'; import * as React from "react"; import { Doc, DocListCast } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; -import { makeInterface, createSchema } from '../../../../fields/Schema'; -import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../fields/Types'; -import { DragManager } from '../../../util/DragManager'; +import { makeInterface } from '../../../../fields/Schema'; +import { BoolCast, NumCast, ScriptCast } from '../../../../fields/Types'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; @@ -16,7 +15,6 @@ import Grid, { Layout } from "./Grid"; import { Id } from '../../../../fields/FieldSymbols'; import { observer } from 'mobx-react'; - type GridSchema = makeInterface<[typeof documentSchema]>; const GridSchema = makeInterface(documentSchema); @@ -28,6 +26,10 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.numCols = this.props.Document.numCols ? this.props.Document.numCols : 10; this.props.Document.rowHeight = this.props.Document.rowHeight ? this.props.Document.rowHeight : 100; + this.props.Document.flexGrid = (this.props.Document.flexGrid !== undefined) ? this.props.Document.flexGrid : true; + + this.setLayout = this.setLayout.bind(this); + this.deleteInContext = this.deleteInContext.bind(this); } componentDidMount() { @@ -40,9 +42,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { for (let i = 0; i < this.childLayoutPairs.length; i++) { const layoutDoc: Doc = new Doc(); - layoutDoc.i = layoutDoc[Id]; - layoutDoc.x = 2 * (i % 5); - layoutDoc.y = 2 * Math.floor(i / 5); + layoutDoc.i = this.childLayoutPairs[i].layout[Id]; + layoutDoc.x = 2 * (i % Math.floor(this.props.Document.numCols as number / 2)); + layoutDoc.y = 2 * Math.floor(i / Math.floor(this.props.Document.numCols as number / 2)); layoutDoc.w = 2; layoutDoc.h = 2; @@ -52,7 +54,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } } - } /** @@ -63,8 +64,17 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ private lookupIndividualTransform = (doc: Doc) => { - const yTranslation = (this.props.Document.rowHeight as number) * (doc.y as number) + 10 * (doc.y as number); - return this.props.ScreenToLocalTransform().translate(-this.props.PanelWidth() / (this.props.Document.numCols as number) * (doc.x as number), -yTranslation); + const yTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().top; + const xTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().left;// - 250; + + //console.log(xTranslation); + + if (xTranslation === undefined || yTranslation === undefined) { + return Transform.Identity(); + } + + return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); + } @@ -74,13 +84,27 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * Sets the width of the decorating box. * @param Doc doc */ - @observable private width = (doc: Doc) => doc.w as number * this.props.PanelWidth() / (this.props.Document.numCols as number); - + private width = (doc: Doc) => { + // const left = document.getElementById(doc.i as string)?.getBoundingClientRect().left; + // const right = document.getElementById(doc.i as string)?.getBoundingClientRect().right; + // //console.log(left - right); + // return Math.abs(right - left); + return doc.w as number * (this.props.PanelWidth() - (this.props.Document.numCols as number - 1) * 10) / (this.props.Document.numCols as number); + } /** * Sets the height of the decorating box. * @param doc `Doc` */ - @observable private height = (doc: Doc) => doc.h as number * (this.props.Document.rowHeight as number); + private height = (doc: Doc) => { + + // const top = document.getElementById(doc.i as string)?.getBoundingClientRect().top; + // const bottom = document.getElementById(doc.i as string)?.getBoundingClientRect().bottom; + // //console.log(Math.abs(top - bottom)); + // return Math.abs(top - bottom); + + + return (doc.h as number) * (this.props.Document.rowHeight as number); + } addDocTab = (doc: Doc, where: string) => { if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) { @@ -91,6 +115,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { + console.log(layout[Id]); return ; } + @undoBatch + deleteInContext(doc: Doc | Doc[]): boolean { + + if (!(this.props.Document.flexGrid as boolean)) { + this.props.removeDocument(doc); + } + else { + const docList: Doc[] = DocListCast(this.props.Document.gridLayouts); + const newDocList: Doc[] = []; + if (doc instanceof Doc) { + for (const savedDoc of docList) { + if (savedDoc.i !== doc[Id]) { + console.log("compare"); + console.log(savedDoc.i); + console.log(doc[Id]); + newDocList.push(savedDoc); + } + } + this.props.Document.gridLayouts = new List(newDocList); + this.props.removeDocument(doc); + } + // else { + // console.log("doc is list"); + // this.props.removeDocument(doc); + // } + } + console.log("here???? in deletei n conte"); + return true; + } + /** * Saves the layouts received from the Grid to the Document. @@ -120,29 +176,25 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @undoBatch setLayout(layouts: Layout[]) { - console.log("setting layout in CollectionGridView"); - console.log(layouts?.[0].w); - //this.props.Document.gridLayouts = new List(); + if (this.props.Document.flexGrid) { - const docList: Doc[] = []; + const docList: Doc[] = []; + for (const layout of layouts) { - for (const layout of layouts) { - const layoutDoc = new Doc(); - layoutDoc.i = layout.i; - layoutDoc.x = layout.x; - layoutDoc.y = layout.y; - layoutDoc.w = layout.w; - layoutDoc.h = layout.h; + const layoutDoc = new Doc(); + layoutDoc.i = layout.i; + layoutDoc.x = layout.x; + layoutDoc.y = layout.y; + layoutDoc.w = layout.w; + layoutDoc.h = layout.h; - docList.push(layoutDoc); - } + docList.push(layoutDoc); + } - this.props.Document.gridLayouts = new List(docList); + this.props.Document.gridLayouts = new List(docList); + } } - // _.reject() on item removal? - - /** * @returns a list of `ContentFittingDocumentView`s inside wrapper divs. * The key of the wrapper div must be the same as the `i` value of the corresponding layout. @@ -165,12 +217,13 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; - const dxf = () => this.lookupIndividualTransform(docList?.[i]); - const width = () => this.width(docList?.[i]); - const height = () => this.height(docList?.[i]); + const dxf = () => this.lookupIndividualTransform(docList[i]); + const width = () => this.width(docList[i]); + const height = () => this.height(docList[i]); collector.push(
{this.getDisplayDoc(layout, dxf, width, height)}
@@ -187,10 +240,20 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { toLayoutList(docLayoutList: Doc[]): Layout[] { const layouts: Layout[] = []; - for (const layout of docLayoutList) { - layouts.push( - { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number } - ); + + if (this.props.Document.flexGrid) { + for (const layout of docLayoutList) { + layouts.push( + { i: layout.i as string, x: layout.x as number, y: layout.y as number, w: layout.w as number, h: layout.h as number, static: !(this.props.Document.flexGrid as boolean) } + ); + } + } + else { + for (let i = 0; i < docLayoutList.length; i++) { + layouts.push( + { i: docLayoutList[i].i as string, x: 2 * (i % Math.floor(this.props.Document.numCols as number / 2)), y: 2 * Math.floor(i / Math.floor(this.props.Document.numCols as number / 2)), w: 2, h: 2, static: true } + ); + } } return layouts; } @@ -204,9 +267,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { if (this.childLayoutPairs.length > previousLength) { console.log("adding doc"); const layoutDoc: Doc = new Doc(); - layoutDoc.i = layoutDoc[Id]; - layoutDoc.x = 2 * (previousLength % 5); - layoutDoc.y = 2 * Math.floor(previousLength / 5); + layoutDoc.i = this.childLayoutPairs[this.childLayoutPairs.length - 1].layout[Id]; + layoutDoc.x = 2 * (previousLength % Math.floor(this.props.Document.numCols as number / 2)); + layoutDoc.y = 2 * Math.floor(previousLength / Math.floor(this.props.Document.numCols as number / 2)); layoutDoc.w = 2; layoutDoc.h = 2; @@ -218,11 +281,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.checkUpdate(); + //console.log("here first?"); + const docList: Doc[] = DocListCast(this.props.Document.gridLayouts); + //console.log("doclist length:::" + docList.length); const contents: JSX.Element[] = this.contents; const layout: Layout[] = this.toLayoutList(docList); + // for (const doc of docList) { + // console.log(doc.i); + // } + // if (layout.length === 0) { // console.log("layouts not loaded"); // } @@ -247,7 +317,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { layout={layout} numCols={this.props.Document.numCols as number} rowHeight={this.props.Document.rowHeight as number} - setLayout={(layout: Layout[]) => this.setLayout(layout)} + setLayout={this.setLayout} + flex={this.props.Document.flexGrid as boolean} />
); diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index a5f5c724a..49179aaa8 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -7,7 +7,6 @@ import "../../../../../node_modules/react-resizable/css/styles.css"; import * as GridLayout from 'react-grid-layout'; import { Layout } from 'react-grid-layout'; -import { CollectionGridView } from './CollectionGridView'; export { Layout } from 'react-grid-layout'; @@ -18,6 +17,7 @@ interface GridProps { numCols: number; rowHeight: number; setLayout: Function; + flex: boolean; } /** @@ -26,13 +26,20 @@ interface GridProps { @observer export default class Grid extends React.Component { + constructor(props: Readonly) { + super(props); + + this.onLayoutChange = this.onLayoutChange.bind(this); + } /** * If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document. * @param layout `Layout[]` */ onLayoutChange(layout: Layout[]) { - console.log("setting in grid component" + layout[0].w); + console.log("setting in grid component" + layout[0]?.w); + // if (this.props.flex) { this.props.setLayout(layout); + // } } render() { @@ -46,7 +53,7 @@ export default class Grid extends React.Component { compactType={null} isDroppable={true} margin={[10, 10]} - onLayoutChange={layout => this.onLayoutChange(layout)} + onLayoutChange={this.onLayoutChange} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2 From fb23850659dd6cc0b75d208168e25033096e07df Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Wed, 27 May 2020 20:11:06 +0530 Subject: changes --- .../views/collections/CollectionViewChromes.tsx | 4 +-- .../collectionGrid/CollectionGridView.scss | 19 ++++------- .../collectionGrid/CollectionGridView.tsx | 39 +++++++++++++--------- .../views/collections/collectionGrid/Grid.tsx | 1 + 4 files changed, 33 insertions(+), 30 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 7e86995ac..2bffbdf7d 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -557,9 +557,9 @@ export class CollectionGridViewChrome extends React.Component - + - + diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 8f12c1a24..4ad3d7015 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -1,14 +1,9 @@ -.collectionGridView_contents { - display: flex; - overflow: hidden; - width: 100%; - height: 100%; - flex-direction: column; +// .react-grid-layout.layout { + // // max-height: 100%;// min-height: 100%; + // overflow-y: auto; + // } - .document-wrapper { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - } +.collectionView { + background-color: white; + overflow-y: scroll; } \ No newline at end of file diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 468665ee5..a887cf98b 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -14,6 +14,7 @@ import { returnZero } from '../../../../Utils'; import Grid, { Layout } from "./Grid"; import { Id } from '../../../../fields/FieldSymbols'; import { observer } from 'mobx-react'; +import "./CollectionGridView.scss"; type GridSchema = makeInterface<[typeof documentSchema]>; const GridSchema = makeInterface(documentSchema); @@ -64,16 +65,24 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ private lookupIndividualTransform = (doc: Doc) => { - const yTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().top; - const xTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().left;// - 250; + // const yTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().top; + // const xTranslation = document.getElementById(doc.i as string)?.getBoundingClientRect().left;// - 250; //console.log(xTranslation); + //console.log(`width: ${doc.w} height: ${doc.h} x: ${doc.x} y:${doc.y}`); + + const xTranslation = doc.x as number * this.props.PanelWidth() / (this.props.Document.numCols as number) + 10; + const yTranslation = doc.y as number * (this.props.Document.rowHeight as number + 10) + 10; + if (xTranslation === undefined || yTranslation === undefined) { + console.log("undefined babey"); return Transform.Identity(); } - return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); + console.log(`xtrans: ${xTranslation} ytrans:${yTranslation}`); + + return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);//.translate(-NumCast(this.props.Document._xMargin), -NumCast(this.props.Document._yMargin)); } @@ -85,25 +94,23 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * @param Doc doc */ private width = (doc: Doc) => { - // const left = document.getElementById(doc.i as string)?.getBoundingClientRect().left; - // const right = document.getElementById(doc.i as string)?.getBoundingClientRect().right; - // //console.log(left - right); - // return Math.abs(right - left); - return doc.w as number * (this.props.PanelWidth() - (this.props.Document.numCols as number - 1) * 10) / (this.props.Document.numCols as number); + + // return document.getElementById(doc.i as string)?.getBoundingClientRect().width; + const xTranslation = doc.w as number * (this.props.PanelWidth() - 10 * (this.props.Document.numCols as number + 1)) / (this.props.Document.numCols as number); + return (this.props.PanelWidth() - 10 * (this.props.Document.numCols as number + 1)) / (this.props.Document.numCols as number) * + (this.props.Document.flexGrid as boolean ? doc.w as number : 2) + 10 * (doc.w as number - 1);// doc.w or 2 } /** * Sets the height of the decorating box. * @param doc `Doc` */ private height = (doc: Doc) => { + //console.log(document.getElementById(doc.i as string)?.getBoundingClientRect()); - // const top = document.getElementById(doc.i as string)?.getBoundingClientRect().top; - // const bottom = document.getElementById(doc.i as string)?.getBoundingClientRect().bottom; - // //console.log(Math.abs(top - bottom)); - // return Math.abs(top - bottom); - - - return (doc.h as number) * (this.props.Document.rowHeight as number); + // return document.getElementById(doc.i as string)?.getBoundingClientRect().height; + return this.props.Document.rowHeight as number * + (this.props.Document.flexGrid as boolean ? doc.h as number : 2) + + 10 * (doc.h as number - 1);// + 10; } addDocTab = (doc: Doc, where: string) => { @@ -303,7 +310,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return ( -
{ isDroppable={true} margin={[10, 10]} onLayoutChange={this.onLayoutChange} + preventCollision={true} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2 From ae552bf33e197bf18989a821f726f2d5670f6647 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 27 May 2020 13:53:18 -0400 Subject: fixed ineracting with documents selected in GridView --- src/client/views/collections/collectionGrid/CollectionGridView.tsx | 3 ++- src/client/views/collections/collectionGrid/Grid.tsx | 3 +++ src/client/views/nodes/DocumentView.tsx | 3 ++- 3 files changed, 7 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index bc554e2c2..a55d5a8ac 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -240,7 +240,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { 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.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined + pointerEvents: !this.props.isSelected() && this.props.renderDepth !== 0 && !this.props.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined }} ref={this.createDashEventsTarget} onPointerDown={e => e.stopPropagation()} @@ -249,6 +249,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { width={this.props.PanelWidth()} nodeList={contents} layout={layout} + transformScale={this.props.ScreenToLocalTransform().Scale} numCols={this.props.Document.numCols as number} rowHeight={this.props.Document.rowHeight as number} setLayout={(layout: Layout[]) => this.setLayout(layout)} diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index a5f5c724a..9c66d1e33 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -18,6 +18,7 @@ interface GridProps { numCols: number; rowHeight: number; setLayout: Function; + transformScale: number; } /** @@ -35,6 +36,7 @@ export default class Grid extends React.Component { this.props.setLayout(layout); } + Scale = 2 render() { console.log("In grid layout prop received value= " + this.props.layout?.[0]?.w); return ( @@ -45,6 +47,7 @@ export default class Grid extends React.Component { width={this.props.width} compactType={null} isDroppable={true} + useCSSTransforms={true} margin={[10, 10]} onLayoutChange={layout => this.onLayoutChange(layout)} > diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index b5de0af12..79b560118 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -517,6 +517,7 @@ export class DocumentView extends DocComponent(Docu if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) { if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) { e.stopPropagation(); + e.preventDefault(); // TODO: check here for panning/inking } return; @@ -531,7 +532,7 @@ export class DocumentView extends DocComponent(Docu (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) && !this.Document.inOverlay) { e.stopPropagation(); // events stop at the lowest document that is active. if right dragging, we let it go through though to allow for context menu clicks. PointerMove callbacks should remove themselves if the move event gets stopPropagated by a lower-level handler (e.g, marquee drag); - + e.preventDefault(); } document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); -- cgit v1.2.3-70-g09d2 From 560ca031c14d4b6524d2bb38b76c26ce2a8adff2 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 28 May 2020 12:44:16 +0530 Subject: minor --- src/client/views/collections/collectionGrid/CollectionGridView.tsx | 2 ++ src/client/views/collections/collectionGrid/Grid.tsx | 2 ++ 2 files changed, 4 insertions(+) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index a887cf98b..cece6368a 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -318,6 +318,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ref={this.createDashEventsTarget} //onPointerDown={(e: React.PointerEvent) => e.stopPropagation()} > + DIV HERE with ref to access scroll of and adjust in getting position
); diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 9520532b8..d29a123f1 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -18,6 +18,7 @@ interface GridProps { rowHeight: number; setLayout: Function; flex: boolean; + scale: number; } /** @@ -55,6 +56,7 @@ export default class Grid extends React.Component { margin={[10, 10]} onLayoutChange={this.onLayoutChange} preventCollision={true} + transformScale={this.props.scale} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2 From 28388e57564accf6ba3758b475144a78c2774458 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 28 May 2020 15:38:32 +0530 Subject: css --- .../collectionGrid/CollectionGridView.scss | 25 +++++++++++++++++++--- .../collectionGrid/CollectionGridView.tsx | 4 +--- .../views/collections/collectionGrid/Grid.tsx | 12 +++++------ 3 files changed, 28 insertions(+), 13 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 3e139ac97..b88721b4d 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -3,7 +3,26 @@ // overflow-y: auto; // } -.collectionView { - background-color: white; - overflow-y: scroll; +// .collectionView {// background-color: white; +// overflow-y: scroll; +// } + + +.collectionGridView_contents { + display: flex; + overflow: hidden; + width: 100%; + height: 100%; + flex-direction: column; +} + +.collectionGridView_contents .document-wrapper { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} + +.react-grid-layout.layout { + height: 100% } \ No newline at end of file diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index fdd25558c..111ce4beb 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -281,7 +281,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // console.log(layout[0].w); // } - return (
); diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 423268d40..673f670a6 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -37,15 +37,11 @@ export default class Grid extends React.Component { * @param layout `Layout[]` */ onLayoutChange(layout: Layout[]) { - console.log("setting in grid component" + layout[0]?.w); - // if (this.props.flex) { this.props.setLayout(layout); - // } } - Scale = 2 render() { - console.log("In grid layout prop received value= " + this.props.layout?.[0]?.w); + console.log(this.props.scale); return ( { useCSSTransforms={true} margin={[10, 10]} onLayoutChange={this.onLayoutChange} - preventCollision={true} - transformScale={this.props.scale} + preventCollision={false} // change this to true later + transformScale={0.8} // 1.2/scale + style={{ height: "100%", overflowY: "scroll" }} + // draggableHandle={".documentDecorations-resizer"} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2 From 61b99fb1c667daeb06437d62c00d87a02c4f8479 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 28 May 2020 11:59:16 -0400 Subject: should be working, but seems like there's a bug in grid packages interaction events. --- package-lock.json | 84 +++++++++------------- .../collectionGrid/CollectionGridView.tsx | 14 +++- .../views/collections/collectionGrid/Grid.tsx | 6 +- 3 files changed, 46 insertions(+), 58 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/package-lock.json b/package-lock.json index 2e70478d3..ec8ca3694 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2809,8 +2809,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -2828,13 +2827,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2847,18 +2844,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -2961,8 +2955,7 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -2972,7 +2965,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2985,20 +2977,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3015,7 +3004,6 @@ "mkdirp": { "version": "0.5.3", "bundled": true, - "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3071,8 +3059,7 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "npm-packlist": { "version": "1.4.8", @@ -3097,8 +3084,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -3108,7 +3094,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3177,8 +3162,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -3208,7 +3192,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3226,7 +3209,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3265,13 +3247,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } } @@ -9470,7 +9450,7 @@ }, "chownr": { "version": "1.1.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, "ci-info": { @@ -9776,7 +9756,7 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" }, "defaults": { @@ -10275,7 +10255,7 @@ }, "glob": { "version": "7.1.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "requires": { "fs.realpath": "^1.0.0", @@ -10363,7 +10343,7 @@ }, "hosted-git-info": { "version": "2.8.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==" }, "http-cache-semantics": { @@ -10499,7 +10479,7 @@ }, "is-ci": { "version": "1.2.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz", "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==", "requires": { "ci-info": "^1.5.0" @@ -10575,7 +10555,7 @@ }, "is-retry-allowed": { "version": "1.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz", "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==" }, "is-stream": { @@ -11084,7 +11064,7 @@ }, "mkdirp": { "version": "0.5.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", "requires": { "minimist": "^1.2.5" @@ -11092,7 +11072,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11144,7 +11124,7 @@ }, "node-gyp": { "version": "5.1.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz", "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==", "requires": { "env-paths": "^2.2.0", @@ -11258,7 +11238,7 @@ }, "npm-packlist": { "version": "1.4.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz", "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==", "requires": { "ignore-walk": "^3.0.1", @@ -11278,7 +11258,7 @@ }, "npm-profile": { "version": "4.0.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz", "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==", "requires": { "aproba": "^1.1.2 || 2", @@ -11288,7 +11268,7 @@ }, "npm-registry-fetch": { "version": "4.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz", "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==", "requires": { "JSONStream": "^1.3.4", @@ -11723,7 +11703,7 @@ }, "rc": { "version": "1.2.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "requires": { "deep-extend": "^0.6.0", @@ -11734,7 +11714,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11793,7 +11773,7 @@ }, "readable-stream": { "version": "3.6.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", "requires": { "inherits": "^2.0.3", @@ -11814,7 +11794,7 @@ }, "registry-auth-token": { "version": "3.4.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz", "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==", "requires": { "rc": "^1.1.6", @@ -11878,7 +11858,7 @@ }, "rimraf": { "version": "2.7.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "requires": { "glob": "^7.1.3" @@ -12177,7 +12157,7 @@ }, "string_decoder": { "version": "1.3.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", "requires": { "safe-buffer": "~5.2.0" @@ -12185,7 +12165,7 @@ "dependencies": { "safe-buffer": { "version": "5.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==" } } @@ -12497,7 +12477,7 @@ }, "widest-line": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==", "requires": { "string-width": "^2.1.1" diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 9b24f1961..c56a894dc 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -231,7 +231,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // console.log(layout[0].w); // } - + console.log(this.props.Document.title + " " + this.props.isSelected() + " " + (!this.props.isSelected() && this.props.renderDepth !== 0 && !this.props.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined)); return (
{ ((e.target as any)?.className.includes("react-resizable-handle")) && e.stopPropagation(); }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond + onPointerDown={e => { + if (this.props.active(true)) { + if (this.props.isSelected(true)) { + e.stopPropagation(); + } + } + if (this.props.isSelected(true)) { + !((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 > { * @param layout `Layout[]` */ onLayoutChange(layout: Layout[]) { - console.log("setting in grid component" + layout[0].w); this.props.setLayout(layout); } - Scale = 2 render() { - console.log("In grid layout prop received value= " + this.props.layout?.[0]?.w); return ( { width={this.props.width} compactType={null} isDroppable={true} + isDraggable={this.props.childrenDraggable} useCSSTransforms={true} margin={[10, 10]} onLayoutChange={layout => this.onLayoutChange(layout)} -- cgit v1.2.3-70-g09d2 From 85553878a01877efb9e9d3b748064db66a6d8e30 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 1 Jun 2020 10:06:31 +0530 Subject: added grid ref and fixed css --- .../views/collections/CollectionViewChromes.scss | 23 ++++++++++-- .../views/collections/CollectionViewChromes.tsx | 41 +++++++++++---------- .../collectionGrid/CollectionGridView.scss | 43 +++++++++++++--------- .../collectionGrid/CollectionGridView.tsx | 37 ++++++++++++------- .../views/collections/collectionGrid/Grid.tsx | 9 +++-- 5 files changed, 95 insertions(+), 58 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 9795a3a22..910c14060 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -164,13 +164,31 @@ } } - .collectionStackingViewChrome-cont, .collectionTreeViewChrome-cont { display: flex; justify-content: space-between; } + .collectionGridViewChrome-cont { + display: flex; + margin-left: 10; + + .grid-control { + align-self: center; + width: 30%; + + .grid-icon { + margin-right: 5px; + } + } + + .collectionGridViewChrome-entryBox { + width: 50%; + } + } + + .collectionStackingViewChrome-sort, .collectionTreeViewChrome-sort { display: flex; @@ -238,9 +256,6 @@ cursor: text; } - .collectionGridViewChrome-entryBox { - width: 50%; - } } } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 2bffbdf7d..9423e417d 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -15,8 +15,6 @@ import { COLLECTION_BORDER_WIDTH } from "../globalCssVariables.scss"; import { CollectionViewType } from "./CollectionView"; import { CollectionView } from "./CollectionView"; import "./CollectionViewChromes.scss"; -import { CollectionGridView } from "./collectionGrid/CollectionGridView"; -import HeightLabel from "./collectionMulticolumn/MultirowHeightLabel"; const datepicker = require('js-datepicker'); interface CollectionViewChromeProps { @@ -516,10 +514,10 @@ export class CollectionGridViewChrome extends React.Component) => { if (e.key === "Enter" || e.key === "Tab") { - if (this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { + if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { this.props.CollectionView.props.Document.numCols = e.currentTarget.valueAsNumber; //this.props.CollectionView.forceUpdate(); // to be used if CollectionGridView is not an observer } @@ -530,39 +528,44 @@ export class CollectionGridViewChrome extends React.Component) => { if (e.key === "Enter" || e.key === "Tab") { - if (this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { + 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; - //this.props.CollectionView.forceUpdate(); } } } - onCheck = (event: React.ChangeEvent) => this.props.CollectionView.props.Document.flexGrid = event.target.checked; + /** + * Sets whether the grid is flexible or not on the grid's Document. + */ + @undoBatch + toggleFlex = () => { + this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid; + } render() { return ( -
- - +
+ + - + ) => e.currentTarget.focus()} /> - - + + - + ) => e.currentTarget.focus()} /> - - + + + - - +
); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index b88721b4d..49d463441 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -1,14 +1,4 @@ -// .react-grid-layout.layout { -// // max-height: 100%;// min-height: 100%; -// overflow-y: auto; -// } - -// .collectionView {// background-color: white; -// overflow-y: scroll; -// } - - -.collectionGridView_contents { +.collectionGridView-contents { display: flex; overflow: hidden; width: 100%; @@ -16,13 +6,32 @@ flex-direction: column; } -.collectionGridView_contents .document-wrapper { - display: flex; - flex-direction: column; - width: 100%; +.collectionGridView-contents .collectionGridView-gridContainer { height: 100%; + overflow-y: auto; + background-color: white; +} + +.documentDecorations-container .documentDecorations-resizer { + pointer-events: none; + +} + +#documentDecorations-bottomRightResizer, +#documentDecorations-bottomLeftResizer, +#documentDecorations-topRightResizer, +#documentDecorations-topLeftResizer { + visibility: collapse; +} + +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; } -.react-grid-layout.layout { - height: 100% +/* Firefox */ +input[type=number] { + -moz-appearance: textfield; } \ No newline at end of file diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 111ce4beb..5eeaa9b0d 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,4 +1,4 @@ -import { computed, observable } from 'mobx'; +import { computed, observable, action } from 'mobx'; import * as React from "react"; import { Doc, DocListCast } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; @@ -23,6 +23,8 @@ const GridSchema = makeInterface(documentSchema); @observer export class CollectionGridView extends CollectionSubView(GridSchema) { + private containerRef: React.RefObject; + @observable private _scroll: number = 0; constructor(props: Readonly) { super(props); @@ -33,6 +35,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.setLayout = this.setLayout.bind(this); this.deleteInContext = this.deleteInContext.bind(this); + + this.containerRef = React.createRef(); } componentDidMount() { @@ -66,7 +70,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * documents before the target. */ private lookupIndividualTransform = (doc: Doc) => { - const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10; + const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10 - this._scroll; + console.log("CollectionGridView -> privatelookupIndividualTransform -> this.containerRef.current!.scrollTop", this.containerRef.current!.scrollTop) const xTranslation = this.colWidthPlusGap * NumCast(doc.x) + 10; return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); } @@ -113,7 +118,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} - display={"contents"} + display={"contents"} // this causes an issue- this is the reason the decorations box is weird with images and web boxes removeDocument={this.deleteInContext} />; } @@ -291,17 +296,21 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ref={this.createDashEventsTarget} onPointerDown={e => { ((e.target as any)?.className.includes("react-resizable-handle")) && e.stopPropagation(); }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond > - DIV HERE with ref to access scroll of and adjust in getting position - +
) => this._scroll = e.currentTarget.scrollTop)} + > + +
); } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 673f670a6..be6c4343a 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -26,9 +26,11 @@ interface GridProps { */ @observer export default class Grid extends React.Component { + gridRef: React.RefObject; constructor(props: Readonly) { super(props); + this.gridRef = React.createRef(); this.onLayoutChange = this.onLayoutChange.bind(this); } @@ -50,13 +52,12 @@ export default class Grid extends React.Component { width={this.props.width} compactType={null} isDroppable={true} - useCSSTransforms={true} + // useCSSTransforms={true} margin={[10, 10]} onLayoutChange={this.onLayoutChange} preventCollision={false} // change this to true later - transformScale={0.8} // 1.2/scale - style={{ height: "100%", overflowY: "scroll" }} - // draggableHandle={".documentDecorations-resizer"} + // transformScale={2} // 1.2/scale + onDrop={({ x, y, e }) => { console.log("Grid -> render -> x, y, e", x, y, e) }} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2 From 9f64b56310c0345e97014f418129c9883ab56e89 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 1 Jun 2020 11:34:00 +0530 Subject: cleanup --- .../collectionGrid/CollectionGridView.scss | 22 ++++++++++++---------- .../collectionGrid/CollectionGridView.tsx | 1 - .../views/collections/collectionGrid/Grid.tsx | 5 +---- 3 files changed, 13 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 49d463441..fb30fe4c1 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -4,25 +4,27 @@ width: 100%; height: 100%; flex-direction: column; + } +// .documentDecorations-container .documentDecorations-resizer { +// pointer-events: none; +// } + +// #documentDecorations-bottomRightResizer, +// #documentDecorations-bottomLeftResizer, +// #documentDecorations-topRightResizer, +// #documentDecorations-topLeftResizer { +// visibility: collapse; +// } + .collectionGridView-contents .collectionGridView-gridContainer { height: 100%; overflow-y: auto; background-color: white; } -.documentDecorations-container .documentDecorations-resizer { - pointer-events: none; -} - -#documentDecorations-bottomRightResizer, -#documentDecorations-bottomLeftResizer, -#documentDecorations-topRightResizer, -#documentDecorations-topLeftResizer { - visibility: collapse; -} /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index f503c38d1..dd355ef47 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -71,7 +71,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ private lookupIndividualTransform = (doc: Doc) => { const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10 - this._scroll; - console.log("CollectionGridView -> privatelookupIndividualTransform -> this.containerRef.current!.scrollTop", this.containerRef.current!.scrollTop) const xTranslation = this.colWidthPlusGap * NumCast(doc.x) + 10; return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 542edb1cd..0e9e8bbca 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -26,12 +26,9 @@ interface GridProps { */ @observer export default class Grid extends React.Component { - gridRef: React.RefObject; constructor(props: Readonly) { super(props); - this.gridRef = React.createRef(); - this.onLayoutChange = this.onLayoutChange.bind(this); } /** @@ -52,7 +49,7 @@ export default class Grid extends React.Component { width={this.props.width} compactType={null} isDroppable={true} - isDraggable={this.props.childrenDraggable} + // isDraggable={this.props.childrenDraggable} // useCSSTransforms={true} margin={[10, 10]} onLayoutChange={this.onLayoutChange} -- cgit v1.2.3-70-g09d2 From eafb8ddc3bf65c828e7fc15fd9df1e64fa7a27f8 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 1 Jun 2020 20:45:42 +0530 Subject: jsonified doc layout list --- .../views/collections/CollectionViewChromes.tsx | 1 - .../collectionGrid/CollectionGridView.tsx | 140 ++++++++++----------- .../views/collections/collectionGrid/Grid.tsx | 8 +- 3 files changed, 73 insertions(+), 76 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 9b8a24d4a..3d712e4f5 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -598,7 +598,6 @@ export class CollectionGridViewChrome extends React.Component { this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid; } diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 0583caa55..63a679f7e 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -27,53 +27,65 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @observable private _scroll: number = 0; private changeListenerDisposer: Opt; + // private undoChangeListenerDisposer: Opt; + + // @observable private _layouts: Layout[] = []; + constructor(props: Readonly) { super(props); this.props.Document.numCols = NumCast(this.props.Document.numCols, 10); this.props.Document.rowHeight = NumCast(this.props.Document.rowHeight, 100); - this.props.Document.flexGrid = (this.props.Document.flexGrid !== undefined) ? this.props.Document.flexGrid : true; + this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true); this.setLayout = this.setLayout.bind(this); - this.deleteInContext = this.deleteInContext.bind(this); this.containerRef = React.createRef(); } componentDidMount() { - if (!this.props.Document.gridLayouts) { - this.props.Document.gridLayouts = new List(); - } + + // this.undoChangeListenerDisposer = computed(() => this.props.Document.gridLayoutString).observe(({ newValue }) => { + // action(() => this._layouts = JSON.parse(newValue as string))(); + // }); + this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => { - const gridLayouts = DocListCast(this.props.Document.gridLayouts); if (!oldValue || newValue.length > oldValue.length) { + const layouts: Layout[] = this.parsedLayoutList; // for each document that was added, add a corresponding grid layout document newValue.forEach(({ layout }, i) => { const targetId = layout[Id]; - if (!gridLayouts.find((gridLayout: Doc) => StrCast(gridLayout.i) === targetId)) { - const layoutDoc: Doc = new Doc(); - layoutDoc.i = targetId; - layoutDoc.w = layoutDoc.h = 2; - this.findNextLayout(layoutDoc, i); - Doc.AddDocToList(this.props.Document, "gridLayouts", layoutDoc); + if (!layouts.find((gridLayout: Layout) => gridLayout.i === targetId)) { + layouts.push({ + i: targetId, + w: 2, + h: 2, + x: 2 * (i % Math.floor(this.props.Document.numCols as number / 2)), + y: 2 * Math.floor(i / Math.floor(this.props.Document.numCols as number / 2)) + }); } }); + this.props.Document.gridLayoutString = JSON.stringify(layouts); } else { + const layouts: Layout[] = this.parsedLayoutList; // for each document that was removed, remove its corresponding grid layout document oldValue.forEach(({ layout }) => { const targetId = layout[Id]; if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) { - const gridLayoutDoc = gridLayouts.find((gridLayout: Doc) => StrCast(gridLayout.i) === targetId); - gridLayoutDoc && Doc.RemoveDocFromList(this.props.Document, "gridLayouts", gridLayoutDoc); + const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === targetId); + index !== -1 && action(() => layouts.splice(index, 1))(); } }); + this.props.Document.gridLayoutString = JSON.stringify(layouts); } + }, true); } componentWillUnmount() { this.changeListenerDisposer && this.changeListenerDisposer(); + this.undoChangeListenerDisposer && this.undoChangeListenerDisposer(); } /** @@ -89,8 +101,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * as big as the ratio height of the document you're trying to insert. */ private findNextLayout(layoutDoc: Doc, previousLength: number) { - layoutDoc.x = 2 * (previousLength % 5); // does this assume that there are 5 columns? - layoutDoc.y = 2 * Math.floor(previousLength / 5); + layoutDoc.x = 2 * (previousLength % Math.floor(this.props.Document.numCols as number / 2)); + layoutDoc.y = 2 * Math.floor(previousLength / Math.floor(this.props.Document.numCols as number / 2)); } /** @@ -99,9 +111,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * the sum of all the resolved column widths of the * documents before the target. */ - private lookupIndividualTransform = (doc: Doc) => { - const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10 - this._scroll; - const xTranslation = this.colWidthPlusGap * NumCast(doc.x) + 10; + private lookupIndividualTransform = (layout: Layout) => { + + const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i); + const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2))) * this.rowHeightPlusGap + 10 - this._scroll; + const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : 2 * (index % Math.floor(this.props.Document.numCols as number / 2))) * this.colWidthPlusGap + 10; + return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); } @@ -110,17 +125,20 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } + @computed get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(this.props.Document.gridLayoutString as string) : []; } + @undoBatch @action set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); } + /** * Sets the width of the decorating box. * @param Doc doc */ - @observable private width = (doc: Doc) => NumCast(doc.w) * this.colWidthPlusGap - 10; + @observable private width = (layout: Layout) => (this.props.Document.flexGrid ? layout.w : 2) * this.colWidthPlusGap - 10; /** * Sets the height of the decorating box. * @param doc `Doc` */ - @observable private height = (doc: Doc) => NumCast(doc.h) * this.rowHeightPlusGap - 10; + @observable private height = (layout: Layout) => (this.props.Document.flexGrid ? layout.h : 2) * this.rowHeightPlusGap - 10; addDocTab = (doc: Doc, where: string) => { if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) { @@ -148,60 +166,33 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} display={"contents"} // this causes an issue- this is the reason the decorations box is weird with images and web boxes - removeDocument={this.deleteInContext} />; } - @undoBatch - deleteInContext(doc: Doc | Doc[]): boolean { - - if (!(this.props.Document.flexGrid as boolean)) { - this.props.removeDocument(doc); - } - else { - const docList: Doc[] = DocListCast(this.props.Document.gridLayouts); - const newDocList: Doc[] = []; - if (doc instanceof Doc) { - for (const savedDoc of docList) { - if (savedDoc.i !== doc[Id]) { - console.log("compare"); - console.log(savedDoc.i); - console.log(doc[Id]); - newDocList.push(savedDoc); - } - } - this.props.Document.gridLayouts = new List(newDocList); - this.props.removeDocument(doc); - } - // else { - // console.log("doc is list"); - // this.props.removeDocument(doc); - // } - } - console.log("here???? in deletei n conte"); - return true; - } - - /** * Saves the layouts received from the Grid to the Document. * @param layouts `Layout[]` */ @undoBatch - setLayout(layouts: Layout[]) { + @action + setLayout(layoutArray: Layout[]) { // for every child in the collection, check to see if there's a corresponding grid layout document and // updated layout object. If both exist, which they should, update the grid layout document from the updated object + const layouts: Layout[] = this.parsedLayoutList; this.childLayoutPairs.forEach(({ layout: doc }) => { let update: Opt; const targetId = doc[Id]; - const gridLayout = DocListCast(this.props.Document.gridLayouts).find(gridLayout => StrCast(gridLayout.i) === targetId); - if (gridLayout && (update = layouts.find(layout => layout.i === targetId))) { + const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId); + // const gridLayout = DocListCast(this.props.Document.gridLayouts).find(gridLayout => StrCast(gridLayout.i) === targetId); + if (this.props.Document.flexGrid && gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) { gridLayout.x = update.x; gridLayout.y = update.y; gridLayout.w = update.w; gridLayout.h = update.h; } }); + + this.props.Document.gridLayoutString = JSON.stringify(layouts); } /** @@ -212,20 +203,20 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { private get contents(): JSX.Element[] { const { childLayoutPairs } = this; const collector: JSX.Element[] = []; - const docList: Doc[] = DocListCast(this.props.Document.gridLayouts); - if (!docList.length || docList.length !== childLayoutPairs.length) { + const layouts: Layout[] = this.parsedLayoutList; + if (!layouts || !layouts.length || layouts.length !== childLayoutPairs.length) { return []; } for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; - const gridLayout = docList[i]; + const gridLayout = layouts[i]; const dxf = () => this.lookupIndividualTransform(gridLayout); const width = () => this.width(gridLayout); const height = () => this.height(gridLayout); collector.push(
{this.getDisplayDoc(layout, dxf, width, height)}
@@ -239,20 +230,21 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * @returns a list of Layouts from a list of Docs * @param docLayoutList `Doc[]` */ - toLayoutList(docLayoutList: Doc[]): Layout[] { - + get layoutList(): Layout[] { + const layouts: Layout[] = this.parsedLayoutList; if (this.props.Document.flexGrid) { - return docLayoutList.map(({ i, x, y, w, h }) => ({ - i: i as string, - x: x as number, - y: y as number, - w: w as number, - h: h as number + return layouts.map(({ i, x, y, w, h }) => ({ + i: i, + x: x, + y: y, + w: w, + h: h, + static: false })); } else { - return docLayoutList.map(({ i }, index) => ({ - i: i as string, + return layouts.map(({ i }, index) => ({ + i: i, x: 2 * (index % Math.floor(this.props.Document.numCols as number / 2)), y: 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2)), w: 2, @@ -271,9 +263,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * the setLayout event, which makes these unintended changes permanent by writing them to the likely now resolved documents. */ render() { - const layoutDocList: Doc[] = DocListCast(this.props.Document.gridLayouts); const childDocumentViews: JSX.Element[] = this.contents; - if (!(childDocumentViews.length && layoutDocList.length)) { + const layouts: Layout[] = this.parsedLayoutList; + if (!childDocumentViews.length || !layouts.length) { return null; } return ( @@ -299,16 +291,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ref={this.containerRef} onScroll={action((e: React.UIEvent) => this._scroll = e.currentTarget.scrollTop)} > + {/* {console.log(this.toLayoutList(layoutDocList))} */} this.setLayout(layout)} transformScale={this.props.ScreenToLocalTransform().Scale} + // flex={this.props.Document.flexGrid as boolean} />
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 0e9e8bbca..8f9bc9f46 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -19,6 +19,7 @@ interface GridProps { setLayout: Function; transformScale: number; childrenDraggable: boolean; + // flex: boolean; } /** @@ -49,12 +50,15 @@ export default class Grid extends React.Component { width={this.props.width} compactType={null} isDroppable={true} + // isDraggable={this.props.flex} + // isResizable={this.props.flex} // isDraggable={this.props.childrenDraggable} - // useCSSTransforms={true} + useCSSTransforms={true} margin={[10, 10]} onLayoutChange={this.onLayoutChange} preventCollision={false} // change this to true later - // transformScale={2} // 1.2/scale + // transformScale={2} // 1.2/scale + style={{ zIndex: 5 }} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2 From 656fdf999b92e8579e303cc08e865427674c51c6 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Tue, 2 Jun 2020 16:55:39 +0530 Subject: added text doc creation functionality + css + handled some bugs in json layouts --- .../collectionGrid/CollectionGridView.scss | 75 +++++++++++++++++-- .../collectionGrid/CollectionGridView.tsx | 84 +++++++++++----------- .../views/collections/collectionGrid/Grid.tsx | 6 +- 3 files changed, 111 insertions(+), 54 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index fb30fe4c1..94b0d958c 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -5,8 +5,75 @@ height: 100%; flex-direction: column; + .collectionGridView-gridContainer { + height: 100%; + overflow-y: auto; + background-color: white; + } + + .collectionGridView-addDocumentButton { + display: flex; + overflow: hidden; + margin: auto; + width: 90%; + cursor: text; + + font-size: 75%; + letter-spacing: 2px; + + .editableView-input { + outline-color: black; + letter-spacing: 2px; + color: grey; + border: 0px; + padding: 12px 10px 11px 10px; + } + + .editableView-container-editing, + .editableView-container-editing-oneLine { + min-height: 20px; + display: flex; + align-items: center; + flex-direction: row; + height: auto; + + color: grey; + padding: 10px; + width: 100%; + + span::before, + span::after { + content: ""; + width: 50%; + position: relative; + display: inline-block; + } + + span::before { + margin-right: 10px; + } + + span::after { + margin-left: 10px; + } + + span { + position: relative; + text-align: center; + white-space: nowrap; + overflow: visible; + display: flex; + color: gray; + align-items: center; + } + } + + + } + } + // .documentDecorations-container .documentDecorations-resizer { // pointer-events: none; // } @@ -18,13 +85,7 @@ // visibility: collapse; // } -.collectionGridView-contents .collectionGridView-gridContainer { - height: 100%; - overflow-y: auto; - background-color: white; -} - - +// .collectionGridView-contents /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 63a679f7e..09cf66d5a 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,9 +1,9 @@ import { computed, observable, Lambda, action } from 'mobx'; import * as React from "react"; -import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; +import { Doc, Opt } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { makeInterface } from '../../../../fields/Schema'; -import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; +import { BoolCast, NumCast, ScriptCast } from '../../../../fields/Types'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; @@ -14,8 +14,10 @@ import { returnZero } from '../../../../Utils'; import Grid, { Layout } from "./Grid"; import { Id } from '../../../../fields/FieldSymbols'; import { observer } from 'mobx-react'; -import "./CollectionGridView.scss"; import { SnappingManager } from '../../../util/SnappingManager'; +import "./CollectionGridView.scss"; +import { Docs } from '../../../documents/Documents'; +import { EditableView, EditableProps } from '../../EditableView'; type GridSchema = makeInterface<[typeof documentSchema]>; @@ -27,10 +29,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @observable private _scroll: number = 0; private changeListenerDisposer: Opt; - // private undoChangeListenerDisposer: Opt; - - // @observable private _layouts: Layout[] = []; - constructor(props: Readonly) { super(props); @@ -39,24 +37,22 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true); this.setLayout = this.setLayout.bind(this); + // this.addTextDoc = this.addTextDoc.bind(this); this.containerRef = React.createRef(); } componentDidMount() { - // this.undoChangeListenerDisposer = computed(() => this.props.Document.gridLayoutString).observe(({ newValue }) => { - // action(() => this._layouts = JSON.parse(newValue as string))(); - // }); - this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => { + const layouts: Layout[] = this.parsedLayoutList; if (!oldValue || newValue.length > oldValue.length) { - const layouts: Layout[] = this.parsedLayoutList; // 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)) { + console.log("pushing") layouts.push({ i: targetId, w: 2, @@ -66,26 +62,24 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { }); } }); - this.props.Document.gridLayoutString = JSON.stringify(layouts); } else { - const layouts: Layout[] = this.parsedLayoutList; // for each document that was removed, remove its corresponding grid layout document oldValue.forEach(({ layout }) => { const targetId = layout[Id]; if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) { const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === targetId); - index !== -1 && action(() => layouts.splice(index, 1))(); + index !== -1 && layouts.splice(index, 1); } }); - this.props.Document.gridLayoutString = JSON.stringify(layouts); } + this.unStringifiedLayoutList = layouts; + // this.props.Document.gridLayoutString = JSON.stringify(layouts); }, true); } componentWillUnmount() { this.changeListenerDisposer && this.changeListenerDisposer(); - this.undoChangeListenerDisposer && this.undoChangeListenerDisposer(); } /** @@ -125,8 +119,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } - @computed get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(this.props.Document.gridLayoutString as string) : []; } - @undoBatch @action set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); } + get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(this.props.Document.gridLayoutString as string) : []; } + set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); } + /** * Sets the width of the decorating box. @@ -149,7 +144,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { - console.log(layout[Id]); return ({ - i: i, - x: x, - y: y, - w: w, - h: h, - static: false - })); - } - else { - return layouts.map(({ i }, index) => ({ + + return this.props.Document.flexGrid ? + layouts : layouts.map(({ i }, index) => ({ i: i, x: 2 * (index % Math.floor(this.props.Document.numCols as number / 2)), y: 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2)), @@ -251,9 +237,10 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { h: 2, static: true })); - } } + @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value })); + /** * DocListCast only includes *resolved* documents, i.e. filters out promises. So even if we have a nonzero * number of documents in either of these Dash lists on the document, the DocListCast version may evaluate to empty @@ -263,11 +250,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * the setLayout event, which makes these unintended changes permanent by writing them to the likely now resolved documents. */ render() { + + const newEditableViewProps: EditableProps = { + GetValue: () => "", + SetValue: this.addTextDocument, + contents: "+ NEW", + }; + const childDocumentViews: JSX.Element[] = this.contents; - const layouts: Layout[] = this.parsedLayoutList; - if (!childDocumentViews.length || !layouts.length) { - return null; - } + const chromeStatus = this.props.Document._chromeStatus; + const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled'); + + return (
+ {showChrome ? +
+ +
: null + }
) => this._scroll = e.currentTarget.scrollTop)} > - {/* {console.log(this.toLayoutList(layoutDocList))} */}
-
+
); } } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 8f9bc9f46..cae06c4e7 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -13,13 +13,12 @@ export { Layout } from 'react-grid-layout'; interface GridProps { width: number; nodeList: JSX.Element[] | null; - layout: Layout[]; + layout: Layout[] | undefined; numCols: number; rowHeight: number; setLayout: Function; transformScale: number; childrenDraggable: boolean; - // flex: boolean; } /** @@ -37,6 +36,7 @@ export default class Grid extends React.Component { * @param layout `Layout[]` */ onLayoutChange(layout: Layout[]) { + console.log("layout changed"); this.props.setLayout(layout); } @@ -50,8 +50,6 @@ export default class Grid extends React.Component { width={this.props.width} compactType={null} isDroppable={true} - // isDraggable={this.props.flex} - // isResizable={this.props.flex} // isDraggable={this.props.childrenDraggable} useCSSTransforms={true} margin={[10, 10]} -- cgit v1.2.3-70-g09d2 From 4cdd53c1208cd17593e0ecdb34e89265760a6512 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 4 Jun 2020 12:46:51 +0530 Subject: added numcols buttons to chrome + fixed some chrome css + added rowheight slider + rowheight slider css + fixed bug on document delete in freeform and reenter grid --- package-lock.json | 84 +++++++++++++--------- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewChromes.scss | 7 ++ .../views/collections/CollectionViewChromes.tsx | 52 +++++++++++--- .../collectionGrid/CollectionGridView.scss | 47 ++++++++++-- .../collectionGrid/CollectionGridView.tsx | 72 +++++++++---------- .../views/collections/collectionGrid/Grid.tsx | 9 ++- 7 files changed, 180 insertions(+), 93 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/package-lock.json b/package-lock.json index adf71ee58..14b279ef6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2836,7 +2836,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2854,11 +2855,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2871,15 +2874,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2982,7 +2988,8 @@ }, "inherits": { "version": "2.0.4", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2992,6 +2999,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3004,17 +3012,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3031,6 +3042,7 @@ "mkdirp": { "version": "0.5.3", "bundled": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3086,7 +3098,8 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -3111,7 +3124,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3121,6 +3135,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3189,7 +3204,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3219,6 +3235,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3236,6 +3253,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3274,11 +3292,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true + "bundled": true, + "optional": true } } } @@ -9500,7 +9520,7 @@ }, "chownr": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", + "resolved": false, "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, "ci-info": { @@ -9806,7 +9826,7 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "resolved": false, "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" }, "defaults": { @@ -10305,7 +10325,7 @@ }, "glob": { "version": "7.1.6", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "resolved": false, "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "requires": { "fs.realpath": "^1.0.0", @@ -10393,7 +10413,7 @@ }, "hosted-git-info": { "version": "2.8.8", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "resolved": false, "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==" }, "http-cache-semantics": { @@ -10529,7 +10549,7 @@ }, "is-ci": { "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz", + "resolved": false, "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==", "requires": { "ci-info": "^1.5.0" @@ -10605,7 +10625,7 @@ }, "is-retry-allowed": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz", + "resolved": false, "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==" }, "is-stream": { @@ -11114,7 +11134,7 @@ }, "mkdirp": { "version": "0.5.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", + "resolved": false, "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", "requires": { "minimist": "^1.2.5" @@ -11122,7 +11142,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "resolved": false, "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11174,7 +11194,7 @@ }, "node-gyp": { "version": "5.1.0", - "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz", + "resolved": false, "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==", "requires": { "env-paths": "^2.2.0", @@ -11288,7 +11308,7 @@ }, "npm-packlist": { "version": "1.4.8", - "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz", + "resolved": false, "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==", "requires": { "ignore-walk": "^3.0.1", @@ -11308,7 +11328,7 @@ }, "npm-profile": { "version": "4.0.4", - "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz", + "resolved": false, "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==", "requires": { "aproba": "^1.1.2 || 2", @@ -11318,7 +11338,7 @@ }, "npm-registry-fetch": { "version": "4.0.3", - "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz", + "resolved": false, "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==", "requires": { "JSONStream": "^1.3.4", @@ -11753,7 +11773,7 @@ }, "rc": { "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "requires": { "deep-extend": "^0.6.0", @@ -11764,7 +11784,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "resolved": false, "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11823,7 +11843,7 @@ }, "readable-stream": { "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "resolved": false, "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", "requires": { "inherits": "^2.0.3", @@ -11844,7 +11864,7 @@ }, "registry-auth-token": { "version": "3.4.0", - "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz", + "resolved": false, "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==", "requires": { "rc": "^1.1.6", @@ -11908,7 +11928,7 @@ }, "rimraf": { "version": "2.7.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "resolved": false, "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "requires": { "glob": "^7.1.3" @@ -12207,7 +12227,7 @@ }, "string_decoder": { "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "resolved": false, "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", "requires": { "safe-buffer": "~5.2.0" @@ -12215,7 +12235,7 @@ "dependencies": { "safe-buffer": { "version": "5.2.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", + "resolved": false, "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==" } } @@ -12527,7 +12547,7 @@ }, "widest-line": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", + "resolved": false, "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==", "requires": { "string-width": "^2.1.1" diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index bcb190de4..df84cab56 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -232,7 +232,7 @@ export class CollectionView extends Touchable func(CollectionViewType.Carousel), icon: "columns" }); subItems.push({ description: "Pivot/Time", event: () => func(CollectionViewType.Time), icon: "columns" }); subItems.push({ description: "Map", event: () => func(CollectionViewType.Map), icon: "globe-americas" }); - subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "border-all" }); + subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "th-list" }); if (addExtras && this.props.Document._viewType === CollectionViewType.Freeform) { subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) }); } diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 42ec35853..f6027471b 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -181,9 +181,16 @@ .grid-control { align-self: center; width: 30%; + display: flex; + flex-direction: row; .grid-icon { margin-right: 5px; + align-self: center; + } + + .flexLabel { + margin-bottom: 0; } } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 3d712e4f5..5a76a4605 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -93,7 +93,7 @@ export class CollectionViewBaseChrome extends React.Component { @@ -569,6 +569,9 @@ export class CollectionTreeViewChrome extends React.Component { + private clicked: boolean = false; + private entered: boolean = false; + /** * Sets the value of `numCols` on the grid's Document to the value entered. */ @@ -577,7 +580,6 @@ export class CollectionGridViewChrome extends React.Component 0 && this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { this.props.CollectionView.props.Document.numCols = e.currentTarget.valueAsNumber; - //this.props.CollectionView.forceUpdate(); // to be used if CollectionGridView is not an observer } } @@ -602,27 +604,59 @@ export class CollectionGridViewChrome extends React.Component { + this.clicked = true; + this.entered && (this.props.CollectionView.props.Document.numCols as number)--; + undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)++)(); + this.entered = false; + } + + onDecrementButtonClick = () => { + this.clicked = true; + 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) { + (this.props.CollectionView.props.Document.numCols as number)++; + } + this.clicked = false; + } + + decrementValue = () => { + this.entered = true; + if (!this.clicked) { + (this.props.CollectionView.props.Document.numCols as number)--; + } + this.clicked = false; + } + render() { return ( -
- +
+ - ) => e.currentTarget.focus()} /> + ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> + + - + - ) => e.currentTarget.focus()} /> + ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> - + - +
); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 94b0d958c..e06e8dc90 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -9,6 +9,43 @@ height: 100%; overflow-y: auto; background-color: white; + overflow-x: hidden; + + display: flex; + flex-direction: row; + + .rowHeightSlider { + + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 15px; + background: #d3d3d3; + // border-radius: 5px; + + position: absolute; + height: 3; + left: 5; + top: 40; + transform-origin: left; + transform: rotate(90deg); + outline: none; + opacity: 0.7; + } + + .rowHeightSlider:hover { + opacity: 1; + } + + .rowHeightSlider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 10px; + height: 10px; + border-radius: 50%; + background: darkgrey; + opacity: 1; + } } .collectionGridView-addDocumentButton { @@ -17,7 +54,8 @@ margin: auto; width: 90%; cursor: text; - + min-height: 30px; + max-height: 30px; font-size: 75%; letter-spacing: 2px; @@ -31,15 +69,14 @@ .editableView-container-editing, .editableView-container-editing-oneLine { - min-height: 20px; display: flex; align-items: center; flex-direction: row; - height: auto; + height: 20px; + width: 100%; color: grey; padding: 10px; - width: 100%; span::before, span::after { @@ -67,8 +104,6 @@ align-items: center; } } - - } } diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index c56d6ee53..68612c9dc 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { Doc, Opt } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { makeInterface } from '../../../../fields/Schema'; -import { BoolCast, NumCast, ScriptCast } from '../../../../fields/Types'; +import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; @@ -15,9 +15,9 @@ import Grid, { Layout } from "./Grid"; import { Id } from '../../../../fields/FieldSymbols'; import { observer } from 'mobx-react'; import { SnappingManager } from '../../../util/SnappingManager'; -import "./CollectionGridView.scss"; import { Docs } from '../../../documents/Documents'; import { EditableView, EditableProps } from '../../EditableView'; +import "./CollectionGridView.scss"; type GridSchema = makeInterface<[typeof documentSchema]>; @@ -37,28 +37,38 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true); this.setLayout = this.setLayout.bind(this); - // this.addTextDoc = this.addTextDoc.bind(this); + this.onSliderChange = this.onSliderChange.bind(this); this.containerRef = React.createRef(); } componentDidMount() { - this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => { const layouts: Layout[] = this.parsedLayoutList; + + // 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) { + layouts.forEach(({ i }, index) => { + const targetId = i; + if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) { + layouts.splice(index, 1); + } + }); + } + 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)) { - console.log("pushing") layouts.push({ i: targetId, w: 2, h: 2, - x: 2 * (i % Math.floor(this.props.Document.numCols as number / 2)), - y: 2 * Math.floor(i / Math.floor(this.props.Document.numCols as number / 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)) }); } }); @@ -72,9 +82,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } }); } - this.unStringifiedLayoutList = layouts; - // this.props.Document.gridLayoutString = JSON.stringify(layouts); }, true); } @@ -82,23 +90,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.changeListenerDisposer && this.changeListenerDisposer(); } - /** - * Establishes the x and y properties of the @param layoutDoc, currently - * using the @param previousLength for the computations. - * - * However, this could also be more of a first fit algorithm, iterating through - * this.toLayoutList(DocListCast(this.props.Document.gridLayouts)) and finding the - * first gap in the layout structure that suits the width and height. It would be - * easiest to see that a column is free (for a given row, if two documents' x are separated - * by a value greater than the ratio width of the document you're trying to insert), - * but you would then have to ensure that the next row at that column has a y at least - * as big as the ratio height of the document you're trying to insert. - */ - private findNextLayout(layoutDoc: Doc, previousLength: number) { - layoutDoc.x = 2 * (previousLength % Math.floor(this.props.Document.numCols as number / 2)); - layoutDoc.y = 2 * Math.floor(previousLength / Math.floor(this.props.Document.numCols as number / 2)); - } - /** * @returns the transform that will correctly place * the document decorations box, shifted to the right by @@ -108,8 +99,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { private lookupIndividualTransform = (layout: Layout) => { const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i); - const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2))) * this.rowHeightPlusGap + 10 - this._scroll; - const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : 2 * (index % Math.floor(this.props.Document.numCols as number / 2))) * this.colWidthPlusGap + 10; + 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; return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); } @@ -119,7 +110,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } - get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(this.props.Document.gridLayoutString as string) : []; } + get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []; } set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); } @@ -177,7 +168,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { let update: Opt; const targetId = doc[Id]; const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId); - // const gridLayout = DocListCast(this.props.Document.gridLayouts).find(gridLayout => StrCast(gridLayout.i) === targetId); if (this.props.Document.flexGrid && gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) { gridLayout.x = update.x; gridLayout.y = update.y; @@ -186,7 +176,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } }); - // this.props.Document.gridLayoutString = JSON.stringify(layouts); this.unStringifiedLayoutList = layouts; } @@ -210,7 +199,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const width = () => this.width(gridLayout); const height = () => this.height(gridLayout); collector.push( -
{this.getDisplayDoc(layout, dxf, width, height)} @@ -231,14 +220,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return this.props.Document.flexGrid ? layouts : layouts.map(({ i }, index) => ({ i: i, - x: 2 * (index % Math.floor(this.props.Document.numCols as number / 2)), - y: 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2)), + 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, static: true })); } + onSliderChange = (event: React.ChangeEvent) => { + this.props.Document.rowHeight = event.currentTarget.valueAsNumber; + } + @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value })); /** @@ -254,14 +247,13 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const newEditableViewProps: EditableProps = { GetValue: () => "", SetValue: this.addTextDocument, - contents: "+ NEW", + contents: "+ ADD TEXT DOCUMENT AT END", }; const childDocumentViews: JSX.Element[] = this.contents; const chromeStatus = this.props.Document._chromeStatus; const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled'); - return (
) => this._scroll = e.currentTarget.scrollTop)} > + e.currentTarget.focus()} /> this.setLayout(layout)} transformScale={this.props.ScreenToLocalTransform().Scale} - // flex={this.props.Document.flexGrid as boolean} /> +
); diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index cae06c4e7..29bafda9b 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -36,7 +36,6 @@ export default class Grid extends React.Component { * @param layout `Layout[]` */ onLayoutChange(layout: Layout[]) { - console.log("layout changed"); this.props.setLayout(layout); } @@ -50,12 +49,12 @@ export default class Grid extends React.Component { width={this.props.width} compactType={null} isDroppable={true} - // isDraggable={this.props.childrenDraggable} + isDraggable={this.props.childrenDraggable} + isResizable={this.props.childrenDraggable} useCSSTransforms={true} - margin={[10, 10]} onLayoutChange={this.onLayoutChange} - preventCollision={false} // change this to true later - // transformScale={2} // 1.2/scale + preventCollision={true} + transformScale={this.props.transformScale} style={{ zIndex: 5 }} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2 From 78f70dbd2136aa8b7b05bacafc71a8a714462d29 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 4 Jun 2020 20:03:19 +0530 Subject: slider added + wheel propagation prevented + fixed bug in changeListenerDisposer --- src/client/views/collections/CollectionView.tsx | 2 +- .../collectionGrid/CollectionGridView.tsx | 55 ++++++++++++++++++---- .../views/collections/collectionGrid/Grid.tsx | 18 ++++++- 3 files changed, 63 insertions(+), 12 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index df84cab56..d6f729598 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -264,7 +264,7 @@ export class CollectionView extends Touchable this.props.Document._viewType = CollectionViewType.Carousel, icon: "columns" }); subItems.push({ description: "Pivot/Time", event: () => this.props.Document._viewType = CollectionViewType.Time, icon: "columns" }); subItems.push({ description: "Map", event: () => this.props.Document._viewType = CollectionViewType.Map, icon: "globe-americas" }); - subItems.push({ description: "Grid", event: () => this.props.Document._viewType = CollectionViewType.Grid, icon: "rainbow" }); + subItems.push({ description: "Grid", event: () => this.props.Document._viewType = CollectionViewType.Grid, icon: "th-list" }); switch (this.props.Document._viewType) { case CollectionViewType.Freeform: { subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) }); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 68612c9dc..dd4e28e33 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -28,6 +28,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { private containerRef: React.RefObject; @observable private _scroll: number = 0; private changeListenerDisposer: Opt; + private rowHeight: number = 0; constructor(props: Readonly) { super(props); @@ -38,7 +39,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.setLayout = this.setLayout.bind(this); this.onSliderChange = this.onSliderChange.bind(this); - + // this.deletePlaceholder = this.deletePlaceholder.bind(this); this.containerRef = React.createRef(); } @@ -49,7 +50,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) { + if (!oldValue && newValue.length) { layouts.forEach(({ i }, index) => { const targetId = i; if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) { @@ -88,8 +89,28 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { componentWillUnmount() { this.changeListenerDisposer && this.changeListenerDisposer(); + console.log("unmounted") } + // deletePlaceholder(placeholder: Layout, e: MouseEvent) { + + // const { left, right, top, bottom } = this.containerRef.current!.getBoundingClientRect(); + // if (e.clientX > right || e.clientX < left || e.clientY < top || e.clientY > bottom) { + // const layouts: Layout[] = this.parsedLayoutList; + // const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === placeholder.i); + // index !== -1 && layouts.splice(index, 1); + + // const i = this.childLayoutPairs.findIndex(({ layout }) => placeholder.i === layout.i); + // i !== -1 && this.childLayoutPairs.splice(i, 1); + + // console.log("deleting"); + + // this.unStringifiedLayoutList = layouts; + // } + + // } + + /** * @returns the transform that will correctly place * the document decorations box, shifted to the right by @@ -232,6 +253,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.rowHeight = event.currentTarget.valueAsNumber; } + onSliderDown = () => { + this.rowHeight = NumCast(this.props.Document.rowHeight); + } + + onSliderUp = () => { + const tempVal = this.props.Document.rowHeight; + this.props.Document.rowHeight = this.rowHeight; + undoBatch(() => this.props.Document.rowHeight = tempVal)(); + } + @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value })); /** @@ -243,7 +274,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * the setLayout event, which makes these unintended changes permanent by writing them to the likely now resolved documents. */ render() { - const newEditableViewProps: EditableProps = { GetValue: () => "", SetValue: this.addTextDocument, @@ -257,8 +287,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return (
{showChrome ? @@ -280,9 +313,10 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { }
) => this._scroll = e.currentTarget.scrollTop)} + onScroll={action(e => this._scroll = e.currentTarget.scrollTop)} + onWheel={e => e.stopPropagation()} > - e.currentTarget.focus()} /> + e.currentTarget.focus()} />
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 29bafda9b..df550e3c2 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -19,6 +19,7 @@ interface GridProps { setLayout: Function; transformScale: number; childrenDraggable: boolean; + // deletePlaceholder: Function; } /** @@ -27,9 +28,12 @@ interface GridProps { @observer export default class Grid extends React.Component { + // private dragging: boolean = false; + constructor(props: Readonly) { super(props); this.onLayoutChange = this.onLayoutChange.bind(this); + // this.onDrag = this.onDrag.bind(this); } /** * If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document. @@ -39,8 +43,20 @@ export default class Grid extends React.Component { this.props.setLayout(layout); } + // onDrag(layout: Layout[], + // oldItem: Layout, + // newItem: Layout, + // placeholder: Layout, + // event: MouseEvent, + // element: HTMLElement) { + // this.props.deletePlaceholder(placeholder, event); + // console.log("Grid -> event", event.clientX) + + // } + render() { console.log(this.props.transformScale); + return ( { useCSSTransforms={true} onLayoutChange={this.onLayoutChange} preventCollision={true} - transformScale={this.props.transformScale} + transformScale={this.props.transformScale} // still doesn't work :( style={{ zIndex: 5 }} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2 From e30e5e4139be5312c46868f17de4dee5d516fd23 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Sat, 6 Jun 2020 14:30:48 +0530 Subject: added choice to compact, prevent collisions + fixed document repositioning on reducing columns + removed row height input --- package-lock.json | 101 +++++++++++++++++++++ package.json | 3 +- .../views/collections/CollectionViewChromes.scss | 1 + .../views/collections/CollectionViewChromes.tsx | 56 ++++++++---- .../collectionGrid/CollectionGridView.scss | 8 ++ .../collectionGrid/CollectionGridView.tsx | 35 +++++-- .../views/collections/collectionGrid/Grid.tsx | 8 +- 7 files changed, 185 insertions(+), 27 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/package-lock.json b/package-lock.json index 14b279ef6..d1db185a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3532,6 +3532,11 @@ "delayed-stream": "~1.0.0" } }, + "command-exists": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.6.tgz", + "integrity": "sha512-Qst/zUUNmS/z3WziPxyqjrcz09pm+2Knbs5mAZL4VAE0sSrNY1/w8+/YxeHcoBTsO6iojA6BW7eFf27Eg2MRuw==" + }, "command-line-usage": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-4.1.0.tgz", @@ -12948,6 +12953,11 @@ "os-tmpdir": "^1.0.0" } }, + "p-debounce": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-debounce/-/p-debounce-1.0.0.tgz", + "integrity": "sha1-y38svu/YegnrqGHhErZ1J+Yh4v0=" + }, "p-defer": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz", @@ -15983,6 +15993,20 @@ "readable-stream": "^3.1.1" } }, + "temp-dir": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz", + "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=" + }, + "tempy": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.2.1.tgz", + "integrity": "sha512-LB83o9bfZGrntdqPuRdanIVCPReam9SOZKW0fOy5I9X3A854GGWi0tjCqoXEk84XIEYBc/x9Hq3EFop/H5wJaw==", + "requires": { + "temp-dir": "^1.0.0", + "unique-string": "^1.0.0" + } + }, "term-size": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz", @@ -16558,6 +16582,40 @@ "resolved": "https://registry.npmjs.org/typescript-collections/-/typescript-collections-1.3.3.tgz", "integrity": "sha512-7sI4e/bZijOzyURng88oOFZCISQPTHozfE2sUu5AviFYk5QV7fYGb6YiDl+vKjF/pICA354JImBImL9XJWUvdQ==" }, + "typescript-language-server": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/typescript-language-server/-/typescript-language-server-0.4.0.tgz", + "integrity": "sha512-K8jNOmDFn+QfrCh8ujby2pGDs5rpjYZQn+zvQnf42rxG4IHbfw5CHoMvbGkWPK/J5Gw8/l5K3i03kVZC2IBElg==", + "requires": { + "command-exists": "1.2.6", + "commander": "^2.11.0", + "fs-extra": "^7.0.0", + "p-debounce": "^1.0.0", + "tempy": "^0.2.1", + "vscode-languageserver": "^5.3.0-next", + "vscode-uri": "^1.0.5" + }, + "dependencies": { + "fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "requires": { + "graceful-fs": "^4.1.6" + } + } + } + }, "typical": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/typical/-/typical-2.6.1.tgz", @@ -16712,6 +16770,11 @@ "crypto-random-string": "^1.0.0" } }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" + }, "unpack-string": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/unpack-string/-/unpack-string-0.0.2.tgz", @@ -16954,6 +17017,44 @@ "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=" }, + "vscode-jsonrpc": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-5.0.1.tgz", + "integrity": "sha512-JvONPptw3GAQGXlVV2utDcHx0BiY34FupW/kI6mZ5x06ER5DdPG/tXWMVHjTNULF5uKPOUUD0SaXg5QaubJL0A==" + }, + "vscode-languageserver": { + "version": "5.3.0-next.10", + "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-5.3.0-next.10.tgz", + "integrity": "sha512-QL7Fe1FT6PdLtVzwJeZ78pTic4eZbzLRy7yAQgPb9xalqqgZESR0+yDZPwJrM3E7PzOmwHBceYcJR54eQZ7Kng==", + "requires": { + "vscode-languageserver-protocol": "^3.15.0-next.8", + "vscode-textbuffer": "^1.0.0" + } + }, + "vscode-languageserver-protocol": { + "version": "3.15.3", + "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.15.3.tgz", + "integrity": "sha512-zrMuwHOAQRhjDSnflWdJG+O2ztMWss8GqUUB8dXLR/FPenwkiBNkMIJJYfSN6sgskvsF0rHAoBowNQfbyZnnvw==", + "requires": { + "vscode-jsonrpc": "^5.0.1", + "vscode-languageserver-types": "3.15.1" + } + }, + "vscode-languageserver-types": { + "version": "3.15.1", + "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.15.1.tgz", + "integrity": "sha512-+a9MPUQrNGRrGU630OGbYVQ+11iOIovjCkqxajPa9w57Sd5ruK8WQNsslzpa0x/QJqC8kRc2DUxWjIFwoNm4ZQ==" + }, + "vscode-textbuffer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/vscode-textbuffer/-/vscode-textbuffer-1.0.0.tgz", + "integrity": "sha512-zPaHo4urgpwsm+PrJWfNakolRpryNja18SUip/qIIsfhuEqEIPEXMxHOlFPjvDC4JgTaimkncNW7UMXRJTY6ow==" + }, + "vscode-uri": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-1.0.8.tgz", + "integrity": "sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ==" + }, "vue-template-compiler": { "version": "2.6.11", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz", diff --git a/package.json b/package.json index 74b7bf9d1..a8ff42c91 100644 --- a/package.json +++ b/package.json @@ -206,10 +206,10 @@ "react-compound-slider": "^2.5.0", "react-dom": "^16.12.0", "react-grid-layout": "^0.18.3", - "react-resizable": "^1.10.1", "react-image-lightbox-with-rotate": "^5.1.1", "react-jsx-parser": "^1.21.0", "react-measure": "^2.2.4", + "react-resizable": "^1.10.1", "react-table": "^6.11.5", "readline": "^1.3.0", "request": "^2.88.0", @@ -223,6 +223,7 @@ "solr-node": "^1.2.1", "standard-http-error": "^2.0.1", "typescript-collections": "^1.3.3", + "typescript-language-server": "^0.4.0", "url-loader": "^1.1.2", "uuid": "^3.4.0", "valid-url": "^1.0.9", 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) => { - 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) => { + // 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 { 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 (
@@ -645,17 +663,23 @@ export class CollectionGridViewChrome extends React.Component - + {/* ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> + */} + + + + + + + + - - -
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; private rowHeight: number = 0; + private sliderDragged: boolean = false; constructor(props: Readonly) { 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(
ContextMenu.Instance.addItem({ description: "test", event: () => console.log("test"), icon: "rainbow" })} > {this.getDisplayDoc(layout, dxf, width, height)} -
+
); } @@ -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) => { + 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 (
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()} > - e.currentTarget.focus()} /> + !this.sliderDragged && console.log("clicking") && (this.sliderDragged = false)} /> 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 { render() { console.log(this.props.transformScale); + const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null; + return ( -- cgit v1.2.3-70-g09d2 From 403993e0b91fc1be71f6ddef42e1141367ecb715 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 8 Jun 2020 23:03:05 +0530 Subject: cleanup + comments + changed compact type selector from button to dropdown menu --- .../views/collections/CollectionViewChromes.tsx | 23 ++++++++++-- .../collectionGrid/CollectionGridView.tsx | 42 +++------------------- .../views/collections/collectionGrid/Grid.tsx | 34 ++---------------- 3 files changed, 28 insertions(+), 71 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 6fb517940..c824c2f33 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -605,6 +605,9 @@ export class CollectionGridViewChrome extends React.Component { this.clicked = true; this.entered && (this.props.CollectionView.props.Document.numCols as number)--; @@ -612,6 +615,9 @@ export class CollectionGridViewChrome extends React.Component { this.clicked = true; if (!this.decrementLimitReached) { @@ -621,6 +627,9 @@ export class CollectionGridViewChrome extends React.Component { this.entered = true; if (!this.clicked && !this.decrementLimitReached) { @@ -630,6 +639,9 @@ export class CollectionGridViewChrome extends React.Component { this.entered = true; if (!this.clicked) { @@ -644,10 +656,16 @@ export class CollectionGridViewChrome extends React.Component { this.props.CollectionView.props.Document.preventCollision = !this.props.CollectionView.props.Document.preventCollision; } + /** + * Changes the value of the compactType + */ changeCompactType = (e: React.ChangeEvent) => { this.props.CollectionView.props.Document.compactType = e.target.selectedOptions[0].value; } @@ -670,7 +688,7 @@ export class CollectionGridViewChrome extends React.Component) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> */} - + @@ -678,7 +696,8 @@ export class CollectionGridViewChrome extends React.Component + value={StrCast(this.props.CollectionView.props.Document.compactType)}> + > {["vertical", "horizontal", "null"].map(type =>
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 5779bf463..058002722 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -16,10 +16,9 @@ interface GridProps { layout: Layout[] | undefined; numCols: number; rowHeight: number; - setLayout: Function; + setLayout: (layout: Layout[]) => void; transformScale: number; childrenDraggable: boolean; - // deletePlaceholder: Function; preventCollision: boolean; compactType: string; } @@ -30,37 +29,8 @@ interface GridProps { @observer export default class Grid extends React.Component { - // private dragging: boolean = false; - - constructor(props: Readonly) { - super(props); - this.onLayoutChange = this.onLayoutChange.bind(this); - // this.onDrag = this.onDrag.bind(this); - } - /** - * If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document. - * @param layout `Layout[]` - */ - onLayoutChange(layout: Layout[]) { - this.props.setLayout(layout); - } - - // onDrag(layout: Layout[], - // oldItem: Layout, - // newItem: Layout, - // placeholder: Layout, - // event: MouseEvent, - // element: HTMLElement) { - // this.props.deletePlaceholder(placeholder, event); - // console.log("Grid -> event", event.clientX) - - // } - render() { - console.log(this.props.transformScale); - const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null; - return ( { isDraggable={this.props.childrenDraggable} isResizable={this.props.childrenDraggable} useCSSTransforms={true} - onLayoutChange={this.onLayoutChange} + onLayoutChange={this.props.setLayout} preventCollision={this.props.preventCollision} transformScale={this.props.transformScale} // still doesn't work :( style={{ zIndex: 5 }} -- cgit v1.2.3-70-g09d2 From ca2757e137e287f3d6d711c97e2b8a212dd28021 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Wed, 10 Jun 2020 13:41:28 +0530 Subject: added reset button + resizable handle css + fixed rendering bug --- package-lock.json | 90 +++++++++------- .../views/collections/CollectionViewChromes.tsx | 5 +- .../collectionGrid/CollectionGridView.scss | 14 ++- .../collectionGrid/CollectionGridView.tsx | 115 +++++++++++++++------ .../views/collections/collectionGrid/Grid.tsx | 5 +- 5 files changed, 157 insertions(+), 72 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/package-lock.json b/package-lock.json index 48847f1fb..131a154c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2836,7 +2836,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2854,11 +2855,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2871,15 +2874,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2982,7 +2988,8 @@ }, "inherits": { "version": "2.0.4", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2992,6 +2999,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3004,17 +3012,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3031,6 +3042,7 @@ "mkdirp": { "version": "0.5.3", "bundled": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3086,7 +3098,8 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -3111,7 +3124,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3121,6 +3135,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3189,7 +3204,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3219,6 +3235,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3236,6 +3253,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3274,11 +3292,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true + "bundled": true, + "optional": true } } } @@ -9505,7 +9525,7 @@ }, "chownr": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", + "resolved": false, "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, "ci-info": { @@ -9811,7 +9831,7 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "resolved": false, "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" }, "defaults": { @@ -10310,7 +10330,7 @@ }, "glob": { "version": "7.1.6", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "resolved": false, "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "requires": { "fs.realpath": "^1.0.0", @@ -10398,7 +10418,7 @@ }, "hosted-git-info": { "version": "2.8.8", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "resolved": false, "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==" }, "http-cache-semantics": { @@ -10534,7 +10554,7 @@ }, "is-ci": { "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz", + "resolved": false, "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==", "requires": { "ci-info": "^1.5.0" @@ -10610,7 +10630,7 @@ }, "is-retry-allowed": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz", + "resolved": false, "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==" }, "is-stream": { @@ -11119,7 +11139,7 @@ }, "mkdirp": { "version": "0.5.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", + "resolved": false, "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", "requires": { "minimist": "^1.2.5" @@ -11127,7 +11147,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "resolved": false, "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11179,7 +11199,7 @@ }, "node-gyp": { "version": "5.1.0", - "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz", + "resolved": false, "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==", "requires": { "env-paths": "^2.2.0", @@ -11293,7 +11313,7 @@ }, "npm-packlist": { "version": "1.4.8", - "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz", + "resolved": false, "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==", "requires": { "ignore-walk": "^3.0.1", @@ -11313,7 +11333,7 @@ }, "npm-profile": { "version": "4.0.4", - "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz", + "resolved": false, "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==", "requires": { "aproba": "^1.1.2 || 2", @@ -11323,7 +11343,7 @@ }, "npm-registry-fetch": { "version": "4.0.3", - "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz", + "resolved": false, "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==", "requires": { "JSONStream": "^1.3.4", @@ -11758,7 +11778,7 @@ }, "rc": { "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "requires": { "deep-extend": "^0.6.0", @@ -11769,7 +11789,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "resolved": false, "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11828,7 +11848,7 @@ }, "readable-stream": { "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "resolved": false, "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", "requires": { "inherits": "^2.0.3", @@ -11849,7 +11869,7 @@ }, "registry-auth-token": { "version": "3.4.0", - "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz", + "resolved": false, "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==", "requires": { "rc": "^1.1.6", @@ -11913,7 +11933,7 @@ }, "rimraf": { "version": "2.7.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "resolved": false, "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "requires": { "glob": "^7.1.3" @@ -12212,7 +12232,7 @@ }, "string_decoder": { "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "resolved": false, "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", "requires": { "safe-buffer": "~5.2.0" @@ -12220,7 +12240,7 @@ "dependencies": { "safe-buffer": { "version": "5.2.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", + "resolved": false, "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==" } } @@ -12532,7 +12552,7 @@ }, "widest-line": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", + "resolved": false, "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==", "requires": { "string-width": "^2.1.1" @@ -14071,9 +14091,9 @@ } }, "react-draggable": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.3.1.tgz", - "integrity": "sha512-m8QeV+eIi7LhD5mXoLqDzLbokc6Ncwa0T34fF6uJzWSs4vc4fdZI/XGqHYoEn91T8S6qO+BSXslONh7Jz9VPQQ==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz", + "integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==", "requires": { "classnames": "^2.2.5", "prop-types": "^15.6.0" diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index c824c2f33..7654c9d9e 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -688,7 +688,7 @@ export class CollectionGridViewChrome extends React.Component) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> */} - + @@ -711,6 +711,9 @@ export class CollectionGridViewChrome extends React.Component + + +
); } diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 578dae966..8b19542f7 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -14,14 +14,22 @@ display: flex; flex-direction: row; - .rowHeightSlider { + .react-grid-item>.react-resizable-handle { + z-index: 4; // doesn't work on prezi otherwise + } + + .react-grid-item>.react-resizable-handle::after { + // grey so it can be seen on the audiobox + border-right: 2px solid slategrey; + border-bottom: 2px solid slategrey; + } + .rowHeightSlider { -webkit-appearance: none; appearance: none; width: 100%; height: 15px; background: #d3d3d3; - // border-radius: 5px; position: absolute; height: 3; @@ -116,7 +124,6 @@ } - // .documentDecorations-container .documentDecorations-resizer { // pointer-events: none; // } @@ -128,7 +135,6 @@ // visibility: collapse; // } -// .collectionGridView-contents /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index eab3fd79e..01ad44a2d 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,15 +1,14 @@ -import { computed, observable, Lambda, action } from 'mobx'; +import { computed, observable, Lambda, action, autorun } from 'mobx'; import * as React from "react"; import { Doc, Opt } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { makeInterface } from '../../../../fields/Schema'; -import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; +import { BoolCast, NumCast, StrCast, ScriptCast } from '../../../../fields/Types'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; import { CollectionSubView } from '../CollectionSubView'; import { SubCollectionViewProps } from '../CollectionSubView'; -import { List } from '../../../../fields/List'; import { returnZero, returnFalse } from '../../../../Utils'; import Grid, { Layout } from "./Grid"; import { Id } from '../../../../fields/FieldSymbols'; @@ -29,8 +28,10 @@ const GridSchema = makeInterface(documentSchema); export class CollectionGridView extends CollectionSubView(GridSchema) { private containerRef: React.RefObject; @observable private _scroll: number = 0; // required to make sure the decorations box container updates on scroll - private changeListenerDisposer: Opt; - private rowHeight: number = 0; + private changeListenerDisposer: Opt; // listens for changes in this.childLayoutPairs + private rowHeight: number = 0; // temporary store of row height to make change undoable + private mounted: boolean = false; // hack to fix the issue of not rerendering when mounting + private resetListenerDisposer: Opt; // listens for when the reset button is clicked constructor(props: Readonly) { super(props); @@ -38,7 +39,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.numCols = NumCast(this.props.Document.numCols, 10); this.props.Document.rowHeight = NumCast(this.props.Document.rowHeight, 100); - // determines whether the grid is static/flexible i.e. can nodes be moved around and resized or not + // determines whether the grid is static/flexible i.e. whether can nodes be moved around and resized or not this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true); // determines whether nodes should remain in position, be bound to the top, or to the left @@ -49,12 +50,15 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.setLayout = this.setLayout.bind(this); this.onSliderChange = this.onSliderChange.bind(this); - // this.deletePlaceholder = this.deletePlaceholder.bind(this); + this.containerRef = React.createRef(); } componentDidMount() { + console.log("mounting"); + this.mounted = true; + this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => { const layouts: Layout[] = this.parsedLayoutList; @@ -71,7 +75,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 + // for each document that was added, add a corresponding grid layout object newValue.forEach(({ layout }, i) => { const targetId = layout[Id]; @@ -87,7 +91,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } }); } else { - // for each document that was removed, remove its corresponding grid layout document + // for each document that was removed, remove its corresponding grid layout object oldValue.forEach(({ layout }) => { const targetId = layout[Id]; if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) { @@ -98,10 +102,34 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } this.unStringifiedLayoutList = layouts; }, 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; + } + }); } componentWillUnmount() { + console.clear(); + this.mounted = false; this.changeListenerDisposer && this.changeListenerDisposer(); + this.resetListenerDisposer?.(); } /** @@ -109,6 +137,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ private lookupIndividualTransform = (layout: Layout) => { + console.log("lookup"); + const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i); // translations depend on whether the grid is flexible or static @@ -117,6 +147,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { 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; } @@ -124,12 +156,26 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { /** * @returns the layout list converted from JSON */ - get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []; } + get parsedLayoutList() { + console.log("parsedlayoutlist"); + return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []; + } /** * Stores the layout list on the Document as JSON */ - set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); } + set unStringifiedLayoutList(layouts: Layout[]) { + + // 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 + // this seems to fix that though it isn't very elegant + + console.log("setting unstringified") + this.mounted && (this.props.Document.gridLayoutString = ""); + this.props.Document.gridLayoutString = JSON.stringify(layouts); + this.mounted = false; + } /** @@ -183,6 +229,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { PanelWidth={width} PanelHeight={height} ScreenToLocalTransform={dxf} + onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} display={"contents"} @@ -199,20 +246,25 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { setLayout(layoutArray: Layout[]) { // for every child in the collection, check to see if there's a corresponding grid layout object and // updated layout object. If both exist, which they should, update the grid layout object from the updated object - const layouts: Layout[] = this.parsedLayoutList; - this.childLayoutPairs.forEach(({ layout: doc }) => { - let update: Opt; - const targetId = doc[Id]; - const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId); - if (this.props.Document.flexGrid && gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) { - gridLayout.x = update.x; - gridLayout.y = update.y; - gridLayout.w = update.w; - gridLayout.h = update.h; - } - }); - this.unStringifiedLayoutList = layouts; + console.log("settinglayout"); + + if (this.props.Document.flexGrid) { + const layouts: Layout[] = this.parsedLayoutList; + this.childLayoutPairs.forEach(({ layout: doc }) => { + let update: Opt; + const targetId = doc[Id]; + const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId); + if (gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) { + gridLayout.x = update.x; + gridLayout.y = update.y; + gridLayout.w = update.w; + gridLayout.h = update.h; + } + }); + + this.unStringifiedLayoutList = layouts; + } } /** @@ -221,6 +273,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ @computed private get contents(): JSX.Element[] { + + console.log("getting contents"); + const { childLayoutPairs } = this; const collector: JSX.Element[] = []; const layouts: Layout[] = this.parsedLayoutList; @@ -251,17 +306,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * @returns a list of `Layout` objects with attributes depending on whether the grid is flexible or static */ get layoutList(): Layout[] { + + console.log("getting layoutlist"); const layouts: Layout[] = this.parsedLayoutList; - // this.unStringifiedLayoutList = layouts; return this.props.Document.flexGrid ? - layouts.map(({ i, x, y, w, h, static: stat }) => ({ + layouts.map(({ i, x, y, w, h, static: staticVal }) => ({ i: i, x: x + w > NumCast(this.props.Document.numCols) ? 0 : x, // handles wrapping around of nodes when numCols decreases y: y, - w: w, + w: w > NumCast(this.props.Document.numCols) ? NumCast(this.props.Document.numCols) : w, // reduces width if greater than numCols h: h, - static: stat + static: staticVal // only needed if we implement freeze in place })) : layouts.map(({ i }, index) => ({ i: i, @@ -277,9 +333,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * Handles the change in the value of the rowHeight slider. */ onSliderChange = (event: React.ChangeEvent) => { - NumCast(this.props.Document.rowHeight) !== event.currentTarget.valueAsNumber; this.props.Document.rowHeight = event.currentTarget.valueAsNumber; - } /** @@ -305,6 +359,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { render() { + console.log("and render"); // for the add text document EditableView const newEditableViewProps: EditableProps = { GetValue: () => "", diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 058002722..9192a38d7 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -30,6 +30,7 @@ interface GridProps { export default class Grid extends React.Component { render() { + console.log(this.props.transformScale); const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null; return ( { useCSSTransforms={true} onLayoutChange={this.props.setLayout} preventCollision={this.props.preventCollision} - transformScale={this.props.transformScale} // still doesn't work :( + transformScale={1 / this.props.transformScale} // still doesn't work :( style={{ zIndex: 5 }} > {this.props.nodeList} - + ); } } -- cgit v1.2.3-70-g09d2 From fbc767726b368c089f0e596368cb694859e93914 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 11 Jun 2020 00:10:31 +0530 Subject: added customisability for default W, H, margin + added context menu display option + added lock in position functionality --- .../collectionGrid/CollectionGridView.tsx | 131 +++++++++++---------- .../views/collections/collectionGrid/Grid.tsx | 2 + .../views/nodes/ContentFittingDocumentView.tsx | 4 +- 3 files changed, 73 insertions(+), 64 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') 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]); + 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(
ContextMenu.Instance.addItem({ description: "test", event: () => console.log("test"), icon: "rainbow" })} > {this.getDisplayDoc(layout, dxf, width, height)}
@@ -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} /> 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 { 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} 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 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); } -- cgit v1.2.3-70-g09d2 From e4585532840eab1f486024a994d640c16a0e1f7d Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 11 Jun 2020 12:02:58 +0530 Subject: fixed image aspect ratio + cleanup --- .../collectionGrid/CollectionGridView.scss | 7 +++++++ .../collectionGrid/CollectionGridView.tsx | 22 ++++++---------------- .../views/collections/collectionGrid/Grid.tsx | 1 - 3 files changed, 13 insertions(+), 17 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 8b19542f7..de7d62475 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -14,6 +14,13 @@ display: flex; flex-direction: row; + .imageBox-cont img { + height: auto; + width: auto; + max-height: 100%; + max-width: 100%; + } + .react-grid-item>.react-resizable-handle { z-index: 4; // doesn't work on prezi otherwise } diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index d68277d32..a820b7e0e 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -49,11 +49,14 @@ 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); + // sets the default width and height of the grid nodes this.props.Document.defaultW = NumCast(this.props.Document.defaultW, 2); this.props.Document.defaultH = NumCast(this.props.Document.defaultH, 2); + // sets the margin between grid nodes this.props.Document.margin = NumCast(this.props.Document.margin, 10); + // sets the css display type of the ContentFittingDocumentView component this.props.Document.display = StrCast(this.props.Document.display, "contents"); this.setLayout = this.setLayout.bind(this); @@ -64,8 +67,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } componentDidMount() { - - console.log("mounting"); this.mounted = true; this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => { @@ -130,7 +131,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } componentWillUnmount() { - console.clear(); this.mounted = false; this.changeListenerDisposer && this.changeListenerDisposer(); this.resetListenerDisposer?.(); @@ -140,9 +140,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * @returns the transform that will correctly place the document decorations box. */ private lookupIndividualTransform = (layout: Layout) => { - - console.log("lookup"); - const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i); // translations depend on whether the grid is flexible or static @@ -173,7 +170,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * @returns the layout list converted from JSON */ get parsedLayoutList() { - console.log("parsedlayoutlist"); return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []; } @@ -188,7 +184,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // the component doesn't rerender when the component mounts // this seems to fix that though it isn't very elegant - console.log("setting unstringified"); this.mounted && (this.props.Document.gridLayoutString = ""); this.props.Document.gridLayoutString = JSON.stringify(layouts); this.mounted = false; @@ -245,8 +240,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // for every child in the collection, check to see if there's a corresponding grid layout object and // updated layout object. If both exist, which they should, update the grid layout object from the updated object - console.log("settinglayout"); - if (this.props.Document.flexGrid) { const layouts: Layout[] = this.parsedLayoutList; this.childLayoutPairs.forEach(({ layout: doc }) => { @@ -272,8 +265,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @computed private get contents(): JSX.Element[] { - console.log("getting contents"); - const { childLayoutPairs } = this; const collector: JSX.Element[] = []; const layouts: Layout[] = this.parsedLayoutList; @@ -295,7 +286,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ); } - return collector; } @@ -304,10 +294,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ get layoutList(): Layout[] { - console.log("getting layoutlist"); const layouts: Layout[] = this.parsedLayoutList; - return this.props.Document.flexGrid ? layouts.map(({ i, x, y, w, h }) => ({ i: i, @@ -355,6 +343,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value })); + /** + * Adds the display option to change the css display attribute of the `ContentFittingDocumentView`s + */ onContextMenu = () => { const displayOptionsMenu: ContextMenuProps[] = []; displayOptionsMenu.push({ description: "Contents", event: () => this.props.Document.display = "contents", icon: "copy" }); @@ -365,7 +356,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { render() { - console.log("and render"); // for the add text document EditableView const newEditableViewProps: EditableProps = { GetValue: () => "", diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 529e7762f..6232fca7c 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -31,7 +31,6 @@ interface GridProps { export default class Grid extends React.Component { render() { - console.log(this.props.transformScale); const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null; return ( Date: Thu, 11 Jun 2020 22:25:13 -0400 Subject: code cleanup for CollectionGridView. added double click to create text. --- package-lock.json | 84 ++--- src/client/views/collections/CollectionView.tsx | 32 -- .../views/collections/CollectionViewChromes.tsx | 39 +- .../collectionGrid/CollectionGridView.scss | 6 +- .../collectionGrid/CollectionGridView.tsx | 407 ++++++++------------- .../views/collections/collectionGrid/Grid.tsx | 2 - 6 files changed, 207 insertions(+), 363 deletions(-) (limited to 'src/client/views/collections/collectionGrid/Grid.tsx') diff --git a/package-lock.json b/package-lock.json index e692b266d..457104c8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2841,8 +2841,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -2860,13 +2859,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2879,18 +2876,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -2993,8 +2987,7 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -3004,7 +2997,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3017,20 +3009,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3047,7 +3036,6 @@ "mkdirp": { "version": "0.5.3", "bundled": true, - "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3103,8 +3091,7 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "npm-packlist": { "version": "1.4.8", @@ -3129,8 +3116,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -3140,7 +3126,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3209,8 +3194,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -3240,7 +3224,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3258,7 +3241,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3297,13 +3279,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } } @@ -9535,7 +9515,7 @@ }, "chownr": { "version": "1.1.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, "ci-info": { @@ -9841,7 +9821,7 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" }, "defaults": { @@ -10340,7 +10320,7 @@ }, "glob": { "version": "7.1.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "requires": { "fs.realpath": "^1.0.0", @@ -10428,7 +10408,7 @@ }, "hosted-git-info": { "version": "2.8.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==" }, "http-cache-semantics": { @@ -10564,7 +10544,7 @@ }, "is-ci": { "version": "1.2.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz", "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==", "requires": { "ci-info": "^1.5.0" @@ -10640,7 +10620,7 @@ }, "is-retry-allowed": { "version": "1.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz", "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==" }, "is-stream": { @@ -11149,7 +11129,7 @@ }, "mkdirp": { "version": "0.5.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", "requires": { "minimist": "^1.2.5" @@ -11157,7 +11137,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11209,7 +11189,7 @@ }, "node-gyp": { "version": "5.1.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz", "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==", "requires": { "env-paths": "^2.2.0", @@ -11323,7 +11303,7 @@ }, "npm-packlist": { "version": "1.4.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz", "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==", "requires": { "ignore-walk": "^3.0.1", @@ -11343,7 +11323,7 @@ }, "npm-profile": { "version": "4.0.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz", "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==", "requires": { "aproba": "^1.1.2 || 2", @@ -11353,7 +11333,7 @@ }, "npm-registry-fetch": { "version": "4.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz", "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==", "requires": { "JSONStream": "^1.3.4", @@ -11788,7 +11768,7 @@ }, "rc": { "version": "1.2.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "requires": { "deep-extend": "^0.6.0", @@ -11799,7 +11779,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11858,7 +11838,7 @@ }, "readable-stream": { "version": "3.6.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", "requires": { "inherits": "^2.0.3", @@ -11879,7 +11859,7 @@ }, "registry-auth-token": { "version": "3.4.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz", "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==", "requires": { "rc": "^1.1.6", @@ -11943,7 +11923,7 @@ }, "rimraf": { "version": "2.7.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "requires": { "glob": "^7.1.3" @@ -12242,7 +12222,7 @@ }, "string_decoder": { "version": "1.3.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", "requires": { "safe-buffer": "~5.2.0" @@ -12250,7 +12230,7 @@ "dependencies": { "safe-buffer": { "version": "5.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==" } } @@ -12562,7 +12542,7 @@ }, "widest-line": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==", "requires": { "string-width": "^2.1.1" diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 524997d20..215b5bce8 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -244,38 +244,6 @@ export class CollectionView extends Touchable { if (!e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 - const existingVm = ContextMenu.Instance.findByDescription("View Modes..."); - const subItems = existingVm && "subitems" in existingVm ? existingVm.subitems : []; - subItems.push({ description: "Freeform", event: () => { this.props.Document._viewType = CollectionViewType.Freeform; }, icon: "signature" }); - if (CollectionView._safeMode) { - ContextMenu.Instance.addItem({ description: "Test Freeform", event: () => this.props.Document._viewType = CollectionViewType.Invalid, icon: "project-diagram" }); - } - subItems.push({ description: "Schema", event: () => this.props.Document._viewType = CollectionViewType.Schema, icon: "th-list" }); - subItems.push({ description: "Treeview", event: () => this.props.Document._viewType = CollectionViewType.Tree, icon: "tree" }); - subItems.push({ description: "Stacking", event: () => this.props.Document._viewType = CollectionViewType.Stacking, icon: "ellipsis-v" }); - subItems.push({ - description: "Stacking (AutoHeight)", event: () => { - this.props.Document._viewType = CollectionViewType.Stacking; - this.props.Document._autoHeight = true; - }, icon: "ellipsis-v" - }); - subItems.push({ description: "Staff", event: () => this.props.Document._viewType = CollectionViewType.Staff, icon: "music" }); - subItems.push({ description: "Multicolumn", event: () => this.props.Document._viewType = CollectionViewType.Multicolumn, icon: "columns" }); - subItems.push({ description: "Multirow", event: () => this.props.Document._viewType = CollectionViewType.Multirow, icon: "columns" }); - subItems.push({ description: "Masonry", event: () => this.props.Document._viewType = CollectionViewType.Masonry, icon: "columns" }); - subItems.push({ description: "Carousel", event: () => this.props.Document._viewType = CollectionViewType.Carousel, icon: "columns" }); - subItems.push({ description: "Pivot/Time", event: () => this.props.Document._viewType = CollectionViewType.Time, icon: "columns" }); - subItems.push({ description: "Map", event: () => this.props.Document._viewType = CollectionViewType.Map, icon: "globe-americas" }); - subItems.push({ description: "Grid", event: () => this.props.Document._viewType = CollectionViewType.Grid, icon: "th-list" }); - switch (this.props.Document._viewType) { - case CollectionViewType.Freeform: { - subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) }); - break; - } - } - subItems.push({ description: "lightbox", event: action(() => this._isLightboxOpen = true), icon: "eye" }); - !existingVm && ContextMenu.Instance.addItem({ description: "View Modes...", subitems: subItems, icon: "eye" }); - this.setupViewTypes("Add a Perspective...", vtype => { const newRendition = Doc.MakeAlias(this.props.Document); newRendition._viewType = vtype; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 63080d2e6..53bff0fe5 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -16,6 +16,7 @@ import { CollectionViewType } from "./CollectionView"; import { CollectionView } from "./CollectionView"; import "./CollectionViewChromes.scss"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; +import { undo } from "prosemirror-history"; const datepicker = require('js-datepicker'); interface CollectionViewChromeProps { @@ -589,14 +590,16 @@ export class CollectionGridViewChrome extends React.Component) => { if (e.key === "Enter" || e.key === "Tab") { - if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { - this.props.CollectionView.props.Document.numCols = e.currentTarget.valueAsNumber; + if (e.currentTarget.valueAsNumber > 0) { + this.props.CollectionView.props.Document.gridNumCols = e.currentTarget.valueAsNumber; } } @@ -617,8 +620,9 @@ export class CollectionGridViewChrome extends React.Component { - this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid; + this.props.CollectionView.props.Document.gridFlex = !this.props.CollectionView.props.Document.gridFlex; } /** @@ -626,8 +630,8 @@ export class CollectionGridViewChrome extends React.Component { this.clicked = true; - this.entered && (this.props.CollectionView.props.Document.numCols as number)--; - undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)++)(); + this.entered && (this.props.CollectionView.props.Document.gridNumCols as number)--; + undoBatch(() => this.props.CollectionView.props.Document.gridNumCols = this.numCols + 1)(); this.entered = false; } @@ -637,8 +641,8 @@ export class CollectionGridViewChrome extends React.Component { this.clicked = true; if (!this.decrementLimitReached) { - this.entered && (this.props.CollectionView.props.Document.numCols as number)++; - undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)--)(); + this.entered && (this.props.CollectionView.props.Document.gridNumCols as number)++; + undoBatch(() => this.props.CollectionView.props.Document.gridNumCols = this.numCols - 1)(); } this.entered = false; } @@ -649,7 +653,7 @@ export class CollectionGridViewChrome extends React.Component { this.entered = true; if (!this.clicked && !this.decrementLimitReached) { - (this.props.CollectionView.props.Document.numCols as number)++; + this.props.CollectionView.props.Document.gridNumCols = this.numCols + 1; } this.decrementLimitReached = false; this.clicked = false; @@ -661,8 +665,8 @@ export class CollectionGridViewChrome extends React.Component { this.entered = true; if (!this.clicked) { - if (this.props.CollectionView.props.Document.numCols as number !== 1) { - (this.props.CollectionView.props.Document.numCols as number)--; + if (this.numCols !== 1) { + this.props.CollectionView.props.Document.gridNumCols = this.numCols - 1; } else { this.decrementLimitReached = true; @@ -676,14 +680,15 @@ export class CollectionGridViewChrome extends React.Component { - this.props.CollectionView.props.Document.preventCollision = !this.props.CollectionView.props.Document.preventCollision; + this.props.CollectionView.props.Document.gridPreventCollision = !this.props.CollectionView.props.Document.gridPreventCollision; } /** * Changes the value of the compactType */ + @undoBatch changeCompactType = (e: React.ChangeEvent) => { - this.props.CollectionView.props.Document.compactType = e.target.selectedOptions[0].value; + this.props.CollectionView.props.Document.gridCompaction = e.target.selectedOptions[0].value; } render() { @@ -693,7 +698,7 @@ export class CollectionGridViewChrome extends React.Component - ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> + ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> @@ -704,7 +709,7 @@ export class CollectionGridViewChrome extends React.Component) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> */} - + @@ -712,7 +717,7 @@ export class CollectionGridViewChrome extends React.Component + value={StrCast(this.props.CollectionView.props.Document.gridCompaction)}> > {["vertical", "horizontal", "null"].map(type =>