parse sql into gui yaaayy
This commit is contained in:
1ilit
parent
4cfc2edc81
commit
62ad20fb1d
59
package-lock.json
generated
59
package-lock.json
generated
@ -19,11 +19,13 @@
|
||||
"file-saver": "^2.0.5",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jointjs": "^3.7.2",
|
||||
"node-sql-parser": "^4.7.0",
|
||||
"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-router-dom": "^6.11.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
@ -3262,6 +3264,14 @@
|
||||
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
|
||||
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz",
|
||||
"integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -5546,6 +5556,14 @@
|
||||
"node": ">= 8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/big-integer": {
|
||||
"version": "1.6.51",
|
||||
"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
|
||||
"integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/big.js": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||
@ -12444,6 +12462,17 @@
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz",
|
||||
"integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ=="
|
||||
},
|
||||
"node_modules/node-sql-parser": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/node-sql-parser/-/node-sql-parser-4.7.0.tgz",
|
||||
"integrity": "sha512-6pKgpQ15gwzDdIZVSDYH/5rVOOEWXzIrVOcq7FLCtoo+AVXTFIDmJjgRZOhTW+mDjj9trSHELXv+2AOK4C2dlQ==",
|
||||
"dependencies": {
|
||||
"big-integer": "^1.6.48"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
@ -14672,6 +14701,36 @@
|
||||
"react": ">= 16.3"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.11.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz",
|
||||
"integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.11.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz",
|
||||
"integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.6.2",
|
||||
"react-router": "6.11.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
|
||||
@ -14,11 +14,13 @@
|
||||
"file-saver": "^2.0.5",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jointjs": "^3.7.2",
|
||||
"node-sql-parser": "^4.7.0",
|
||||
"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-router-dom": "^6.11.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
|
||||
10
src/App.js
10
src/App.js
@ -1,9 +1,17 @@
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import Editor from "./pages/editor";
|
||||
import LandingPage from "./pages/landing_page";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<Editor name="Untitled"/>
|
||||
<Router>
|
||||
<Routes>
|
||||
|
||||
<Route path="/" element={<LandingPage />} />
|
||||
<Route path="/editor" element={<Editor name="Untitled" />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { React, useState } from "react";
|
||||
import { React, useState, useRef } from "react";
|
||||
import { ResizableBox } from "react-resizable";
|
||||
import CodeMirror from "@uiw/react-codemirror";
|
||||
import { createTheme } from "@uiw/codemirror-themes";
|
||||
@ -8,6 +8,7 @@ import { shapes } from "jointjs";
|
||||
import Shape from "./shape";
|
||||
import { saveAs } from "file-saver";
|
||||
import html2canvas from "html2canvas";
|
||||
import { Parser } from "node-sql-parser";
|
||||
import "react-resizable/css/styles.css";
|
||||
|
||||
const myTheme = createTheme({
|
||||
@ -26,6 +27,7 @@ const myTheme = createTheme({
|
||||
|
||||
export default function EditorPanel(props) {
|
||||
const [editor, setEditor] = useState(true);
|
||||
const map = useRef(new Map());
|
||||
|
||||
return (
|
||||
<ResizableBox
|
||||
@ -78,6 +80,41 @@ export default function EditorPanel(props) {
|
||||
export src
|
||||
</button>
|
||||
<br />
|
||||
<button
|
||||
onClick={() => {
|
||||
try {
|
||||
const parser = new Parser();
|
||||
const ast = parser.astify(props.code);
|
||||
console.log(ast);
|
||||
ast.forEach((e) => {
|
||||
e.table.forEach((t) => {
|
||||
if (map.current.has(t.table)) {
|
||||
return;
|
||||
}
|
||||
map.current.set(t.table, t);
|
||||
const rect = new shapes.standard.Rectangle();
|
||||
rect.position(100, 100);
|
||||
rect.resize(100, 40);
|
||||
rect.attr({
|
||||
body: {
|
||||
fill: "#7039FF",
|
||||
},
|
||||
label: {
|
||||
text: t.table,
|
||||
fill: "white",
|
||||
},
|
||||
});
|
||||
rect.addTo(props.graph);
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
alert("parsing error");
|
||||
}
|
||||
}}
|
||||
>
|
||||
parse
|
||||
</button>
|
||||
<br />
|
||||
<button
|
||||
onClick={() => {
|
||||
html2canvas(document.getElementById("canvas")).then((canvas) => {
|
||||
@ -95,7 +132,9 @@ export default function EditorPanel(props) {
|
||||
height="100%"
|
||||
theme={myTheme}
|
||||
extensions={[sql()]}
|
||||
onChange={() => {}}
|
||||
onChange={(e) => {
|
||||
props.setCode(e);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Shape />
|
||||
|
||||
11
src/pages/landing_page.jsx
Normal file
11
src/pages/landing_page.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div>
|
||||
<Link to="/editor">editor</Link>
|
||||
LandingPage
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user