81 lines
2.1 KiB
React
81 lines
2.1 KiB
React
|
import { React, useState } from "react";
|
||
|
|
import { ResizableBox } from "react-resizable";
|
||
|
|
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 { shapes } from "jointjs";
|
||
|
|
import Shape from "./shape";
|
||
|
|
import "react-resizable/css/styles.css";
|
||
|
|
|
||
|
|
const myTheme = createTheme({
|
||
|
|
dark: "light",
|
||
|
|
settings: {},
|
||
|
|
styles: [
|
||
|
|
{ tag: t.comment, color: "#8ab0ed" },
|
||
|
|
{ tag: t.string, color: "#e68e29" },
|
||
|
|
{ tag: t.number, color: "#e68e29" },
|
||
|
|
{ tag: t.keyword, color: "#295be6" },
|
||
|
|
{ tag: t.variableName, color: "#1a00db" },
|
||
|
|
{ tag: t.typeName, color: "#295be6" },
|
||
|
|
{ tag: t.tagName, color: "#008a02" },
|
||
|
|
],
|
||
|
|
});
|
||
|
|
|
||
|
|
export default function EditorPanel(props) {
|
||
|
|
const [editor, setEditor] = useState(true);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ResizableBox
|
||
|
|
width={window.innerWidth * 0.2}
|
||
|
|
height={window.innerHeight}
|
||
|
|
resizeHandles={["e"]}
|
||
|
|
minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
|
||
|
|
maxConstraints={[Infinity, Infinity]}
|
||
|
|
axis="x"
|
||
|
|
>
|
||
|
|
<div className="overflow-auto h-full">
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
setEditor(!editor);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
change view
|
||
|
|
</button>
|
||
|
|
<br />
|
||
|
|
<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(props.graph);
|
||
|
|
props.setCode((prevCode) => `create table hi\n\n${prevCode}`);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
add
|
||
|
|
</button>
|
||
|
|
{editor ? (
|
||
|
|
<CodeMirror
|
||
|
|
value={props.code}
|
||
|
|
height="100%"
|
||
|
|
theme={myTheme}
|
||
|
|
extensions={[sql()]}
|
||
|
|
onChange={() => {}}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<Shape />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</ResizableBox>
|
||
|
|
);
|
||
|
|
}
|