107 lines
2.8 KiB
JavaScript
107 lines
2.8 KiB
JavaScript
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 { saveAs } from "file-saver";
|
|
import html2canvas from "html2canvas";
|
|
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>
|
|
<br />
|
|
<button
|
|
onClick={() => {
|
|
const blob = new Blob([props.code], {
|
|
type: "text/plain;charset=utf-8",
|
|
});
|
|
|
|
saveAs(blob, "src.txt");
|
|
}}
|
|
>
|
|
export src
|
|
</button>
|
|
<br />
|
|
<button
|
|
onClick={() => {
|
|
html2canvas(document.getElementById("canvas")).then((canvas) => {
|
|
canvas.toBlob((blob) => {
|
|
saveAs(blob, "image.png");
|
|
});
|
|
});
|
|
}}
|
|
>
|
|
export img
|
|
</button>
|
|
{editor ? (
|
|
<CodeMirror
|
|
value={props.code}
|
|
height="100%"
|
|
theme={myTheme}
|
|
extensions={[sql()]}
|
|
onChange={() => {}}
|
|
/>
|
|
) : (
|
|
<Shape />
|
|
)}
|
|
</div>
|
|
</ResizableBox>
|
|
);
|
|
}
|