aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json82
-rw-r--r--package.json3
-rw-r--r--src/client/views/collections/collectionGrid/CollectionGridView.scss4
-rw-r--r--src/client/views/collections/collectionGrid/CollectionGridView.tsx52
-rw-r--r--src/client/views/collections/collectionGrid/Grid.tsx35
5 files changed, 134 insertions, 42 deletions
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(
<div className={"document-wrapper"}
key={"wrapper" + i}
@@ -104,12 +117,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
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];
}
-
render(): JSX.Element {
const contents: JSX.Element[] = this.contents?.[0];
@@ -122,7 +135,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin)
}} ref={this.createDashEventsTarget}>
- <Grid width={this.props.PanelWidth()} nodeList={contents} layout={layout} />
+ <Grid
+ width={this.props.PanelWidth()}
+ nodeList={contents}
+ layout={layout}
+ gridView={this}
+ />
</div>
);
}
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<GridProps, GridLayout.ResponsiveProps> {
+
+ 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 (
- <GridLayout className="layout" layout={this.props.layout} cols={10} rowHeight={100} width={this.props.width}>
+ <GridLayout className="layout"
+ layout={this.props.layout}
+ cols={10}
+ rowHeight={100}
+ width={this.props.width}
+ compactType={null}
+ isDroppable={true}
+ onLayoutChange={layout => this.onLayoutChange(layout)}
+ >
{this.props.nodeList}
- </GridLayout>
+ </GridLayout >
);
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-14 01:41:16 +0000