stinky poopy working code to add shapes
This commit is contained in:
1ilit
parent
fb96932379
commit
09c84e0379
85
package-lock.json
generated
85
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 <div id="canvas" ref={canvas} />;
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ export default function Header(props) {
|
||||
<button className="me-6 border px-4 py-1 rounded-xl">
|
||||
<i className="fa-solid fa-lock me-2"></i>Share
|
||||
</button>
|
||||
<img src={blank_pfp} alt="profile" className="rounded-full h-10 w-10" />
|
||||
<img src={blank_pfp} alt="profile" className="rounded-full h-8 w-8" />
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<div
|
||||
ref={drag}
|
||||
style={{
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
fontSize: 25,
|
||||
fontWeight: "bold",
|
||||
cursor: "move",
|
||||
}}
|
||||
>
|
||||
<table>
|
||||
<tr>hi</tr>
|
||||
</table>
|
||||
{/* <div id="canvas" ref={canvas} /> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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 <div id="canvas" ref={canvas} />;
|
||||
}
|
||||
|
||||
export default function Editor(props) {
|
||||
const graph = useMemo(() => new dia.Graph(), []);
|
||||
const [editor, setEditor] = useState(true);
|
||||
useEffect(() => {}, [graph]);
|
||||
return (
|
||||
<>
|
||||
<Header name={props.name} />
|
||||
@ -39,6 +139,34 @@ export default function Editor(props) {
|
||||
axis="x"
|
||||
>
|
||||
<div className="overflow-auto h-full">
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditor(!editor);
|
||||
}}
|
||||
>
|
||||
change view
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
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(graph);
|
||||
}}
|
||||
>
|
||||
add
|
||||
</button>
|
||||
{editor ? (
|
||||
<CodeMirror
|
||||
height="100%"
|
||||
theme={myTheme}
|
||||
@ -47,10 +175,17 @@ export default function Editor(props) {
|
||||
console.log("value:", value);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<Shape />
|
||||
</DndProvider>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ResizableBox>
|
||||
<div className="flex-grow">
|
||||
<Diagram />
|
||||
<Diagram graph={graph} />
|
||||
</div>
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
@ -5,3 +5,7 @@
|
||||
.cm-focused {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user