diff --git a/package-lock.json b/package-lock.json index 44d9819..a32ea5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,8 @@ "codemirror": "^5.65.13", "jointjs": "^3.7.2", "react": "^18.2.0", + "react-dnd": "^16.0.1", + "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0", "react-resizable": "^3.0.5", "react-scripts": "5.0.1", @@ -3243,6 +3245,21 @@ } } }, + "node_modules/@react-dnd/asap": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz", + "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==" + }, + "node_modules/@react-dnd/invariant": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz", + "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==" + }, + "node_modules/@react-dnd/shallowequal": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz", + "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==" + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -6798,6 +6815,16 @@ "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==" }, + "node_modules/dnd-core": { + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz", + "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==", + "dependencies": { + "@react-dnd/asap": "^5.0.1", + "@react-dnd/invariant": "^4.0.1", + "redux": "^4.2.0" + } + }, "node_modules/dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -8859,6 +8886,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -14505,6 +14545,43 @@ "node": ">=8" } }, + "node_modules/react-dnd": { + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz", + "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==", + "dependencies": { + "@react-dnd/invariant": "^4.0.1", + "@react-dnd/shallowequal": "^4.0.1", + "dnd-core": "^16.0.1", + "fast-deep-equal": "^3.1.3", + "hoist-non-react-statics": "^3.3.2" + }, + "peerDependencies": { + "@types/hoist-non-react-statics": ">= 3.3.1", + "@types/node": ">= 12", + "@types/react": ">= 16", + "react": ">= 16.14" + }, + "peerDependenciesMeta": { + "@types/hoist-non-react-statics": { + "optional": true + }, + "@types/node": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-dnd-html5-backend": { + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz", + "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==", + "dependencies": { + "dnd-core": "^16.0.1" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -14687,6 +14764,14 @@ "node": ">=8" } }, + "node_modules/redux": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", + "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", diff --git a/package.json b/package.json index e7d3aed..c2f9a3d 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "codemirror": "^5.65.13", "jointjs": "^3.7.2", "react": "^18.2.0", + "react-dnd": "^16.0.1", + "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0", "react-resizable": "^3.0.5", "react-scripts": "5.0.1", diff --git a/src/components/diagram/index.jsx b/src/components/diagram/index.jsx index 3f97bb3..3e44fcb 100644 --- a/src/components/diagram/index.jsx +++ b/src/components/diagram/index.jsx @@ -1,18 +1,17 @@ import React, { useEffect, useRef } from "react"; import { dia, shapes } from "jointjs"; -function Diagram() { +function Diagram(props) { const canvas = useRef(null); useEffect(() => { - const graph = new dia.Graph(); new dia.Paper({ el: document.getElementById("canvas"), background: { color: "#aec3b0", }, - model: graph, + model: props.graph, height: "100%", width: "100%", gridSize: 1, @@ -31,8 +30,8 @@ function Diagram() { fill: "white", }, }); - rect.addTo(graph); - }, []); + rect.addTo(props.graph); + }, [props.graph]); return
; } diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx index ad4ce51..52b07e9 100644 --- a/src/components/header/index.jsx +++ b/src/components/header/index.jsx @@ -12,7 +12,7 @@ export default function Header(props) { - profile + profile
); diff --git a/src/editor/index.jsx b/src/editor/index.jsx index 2cdd104..1b34456 100644 --- a/src/editor/index.jsx +++ b/src/editor/index.jsx @@ -1,5 +1,5 @@ -import { React } from "react"; -import Diagram from "../components/diagram"; +import { React, useState, useRef, useEffect, useMemo } from "react"; +// import Diagram from "../components/diagram"; import Header from "../components/header"; import Sidebar from "../components/sidebar"; import { ResizableBox } from "react-resizable"; @@ -9,6 +9,9 @@ import CodeMirror from "@uiw/react-codemirror"; import { createTheme } from "@uiw/codemirror-themes"; import { sql } from "@codemirror/lang-sql"; import { tags as t } from "@lezer/highlight"; +import { DndProvider, useDrag } from "react-dnd"; +import { HTML5Backend } from "react-dnd-html5-backend"; +import { dia, shapes } from "jointjs"; const myTheme = createTheme({ dark: "light", @@ -24,7 +27,104 @@ const myTheme = createTheme({ ], }); +const Shape = () => { + const [{ isDragging }, drag] = useDrag(() => ({ + type: "CARD", + collect: (monitor) => ({ + isDragging: !!monitor.isDragging(), + }), + })); + + // const canvas = useRef(null); + + // useEffect(() => { + // const graph = new dia.Graph(); + // new dia.Paper({ + // el: document.getElementById("canvas"), + // background: { + // color: "#fec3b0", + // }, + // model: graph, + // height: "100%", + // width: "100%", + // gridSize: 1, + // interactive: true, + // }); + + // const rect = new shapes.standard.Rectangle(); + // rect.position(100, 100); + // rect.resize(100, 40); + // rect.attr({ + // body: { + // fill: "#9039FF", + // }, + // label: { + // text: "hi", + // fill: "white", + // }, + // }); + // rect.addTo(graph); + // }); + + return ( + <> +
+ + hi +
+ {/*
*/} +
+ + ); +}; + +function Diagram(props) { + const canvas = useRef(null); + + useEffect(() => { + // const graph = new dia.Graph(); + new dia.Paper({ + el: document.getElementById("canvas"), + background: { + color: "#aec3b0", + }, + model: props.graph, + height: "100%", + width: "100%", + gridSize: 1, + interactive: true, + }); + + const rect = new shapes.standard.Rectangle(); + rect.position(100, 100); + rect.resize(100, 40); + rect.attr({ + body: { + fill: "#7039FF", + }, + label: { + text: "hi", + fill: "white", + }, + }); + rect.addTo(props.graph); + }); + + return
; +} + export default function Editor(props) { + const graph = useMemo(() => new dia.Graph(), []); + const [editor, setEditor] = useState(true); + useEffect(() => {}, [graph]); return ( <>
@@ -39,18 +139,53 @@ export default function Editor(props) { axis="x" >
- { - console.log("value:", value); + + + + {editor ? ( + { + console.log("value:", value); + }} + /> + ) : ( +
+ + + +
+ )}
- +
diff --git a/src/index.css b/src/index.css index 63f73e4..649dc67 100644 --- a/src/index.css +++ b/src/index.css @@ -5,3 +5,7 @@ .cm-focused { outline: none !important; } + +body{ + overflow: hidden; +} \ No newline at end of file