layout context
This commit is contained in:
1ilit
parent
f899834401
commit
23e58a0110
@ -1,4 +1,4 @@
|
||||
import { React, useState } from "react";
|
||||
import { React, useContext, useState } from "react";
|
||||
import {
|
||||
IconCaretdown,
|
||||
IconChevronRight,
|
||||
@ -22,6 +22,7 @@ import {
|
||||
import { toPng, toJpeg, toSvg } from "html-to-image";
|
||||
import { saveAs } from "file-saver";
|
||||
import { enterFullscreen, exitFullscreen } from "../utils";
|
||||
import { LayoutContext } from "../pages/editor";
|
||||
|
||||
export default function ControlPanel(props) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
@ -30,6 +31,7 @@ export default function ControlPanel(props) {
|
||||
`diagram_${new Date().toISOString()}`
|
||||
);
|
||||
const [extension, setExtension] = useState("");
|
||||
const {layout, setLayout} = useContext(LayoutContext);
|
||||
|
||||
const menu = {
|
||||
File: {
|
||||
@ -237,7 +239,7 @@ export default function ControlPanel(props) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
{props.layout.header && header()}
|
||||
{layout.header && header()}
|
||||
<div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 sm:mx-1 md:mx-6 text-slate-700 select-none overflow-x-hidden">
|
||||
<div className="flex justify-start items-center">
|
||||
{layoutDropdown()}
|
||||
@ -341,10 +343,10 @@ export default function ControlPanel(props) {
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) =>
|
||||
props.setLayout((prev) => ({ ...prev, header: !prev.header }))
|
||||
setLayout((prev) => ({ ...prev, header: !prev.header }))
|
||||
}
|
||||
>
|
||||
{props.layout.header ? <IconChevronUp /> : <IconChevronDown />}
|
||||
{layout.header ? <IconChevronUp /> : <IconChevronDown />}
|
||||
</button>
|
||||
</div>
|
||||
<Modal
|
||||
@ -511,14 +513,14 @@ export default function ControlPanel(props) {
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
props.layout.header ? (
|
||||
layout.header ? (
|
||||
<IconCheckboxTick />
|
||||
) : (
|
||||
<div className="px-2"></div>
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
props.setLayout((prev) => ({
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
header: !prev.header,
|
||||
}))
|
||||
@ -532,14 +534,14 @@ export default function ControlPanel(props) {
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
props.layout.tables ? (
|
||||
layout.tables ? (
|
||||
<IconCheckboxTick />
|
||||
) : (
|
||||
<div className="px-2"></div>
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
props.setLayout((prev) => ({
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
tables: !prev.tables,
|
||||
}))
|
||||
@ -549,14 +551,14 @@ export default function ControlPanel(props) {
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
props.layout.relationships ? (
|
||||
layout.relationships ? (
|
||||
<IconCheckboxTick />
|
||||
) : (
|
||||
<div className="px-2"></div>
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
props.setLayout((prev) => ({
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
relationships: !prev.relationships,
|
||||
}))
|
||||
@ -566,14 +568,14 @@ export default function ControlPanel(props) {
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
props.layout.issues ? (
|
||||
layout.issues ? (
|
||||
<IconCheckboxTick />
|
||||
) : (
|
||||
<div className="px-2"></div>
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
props.setLayout((prev) => ({
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
issues: !prev.issues,
|
||||
}))
|
||||
@ -583,14 +585,14 @@ export default function ControlPanel(props) {
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
props.layout.editor ? (
|
||||
layout.editor ? (
|
||||
<IconCheckboxTick />
|
||||
) : (
|
||||
<div className="px-2"></div>
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
props.setLayout((prev) => ({
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
editor: !prev.editor,
|
||||
}))
|
||||
@ -600,14 +602,14 @@ export default function ControlPanel(props) {
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
props.layout.shapes ? (
|
||||
layout.shapes ? (
|
||||
<IconCheckboxTick />
|
||||
) : (
|
||||
<div className="px-2"></div>
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
props.setLayout((prev) => ({
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
shapes: !prev.shapes,
|
||||
}))
|
||||
@ -620,14 +622,14 @@ export default function ControlPanel(props) {
|
||||
>
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
props.layout.sidebar ? (
|
||||
layout.sidebar ? (
|
||||
<IconCheckboxTick />
|
||||
) : (
|
||||
<div className="px-2"></div>
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
props.setLayout((prev) => ({
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
sidebar: !prev.sidebar,
|
||||
}))
|
||||
@ -638,14 +640,14 @@ export default function ControlPanel(props) {
|
||||
</Dropdown>
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
props.layout.services ? (
|
||||
layout.services ? (
|
||||
<IconCheckboxTick />
|
||||
) : (
|
||||
<div className="px-2"></div>
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
props.setLayout((prev) => ({
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
services: !prev.services,
|
||||
}))
|
||||
@ -656,19 +658,19 @@ export default function ControlPanel(props) {
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
props.layout.fullscreen ? (
|
||||
layout.fullscreen ? (
|
||||
<IconCheckboxTick />
|
||||
) : (
|
||||
<div className="px-2"></div>
|
||||
)
|
||||
}
|
||||
onClick={() => {
|
||||
if (props.layout.fullscreen) {
|
||||
if (layout.fullscreen) {
|
||||
exitFullscreen();
|
||||
} else {
|
||||
enterFullscreen();
|
||||
}
|
||||
props.setLayout((prev) => ({
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
fullscreen: !prev.fullscreen,
|
||||
}));
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { React, useState } from "react";
|
||||
import { React, useState, useContext } from "react";
|
||||
// import { sqlDataTypes } from "../data/data";
|
||||
import { IconEdit, IconPlus, IconMore, IconMinus } from "@douyinfe/semi-icons";
|
||||
import {
|
||||
@ -10,12 +10,15 @@ import {
|
||||
Popover,
|
||||
Tag,
|
||||
Button,
|
||||
SideSheet,
|
||||
} from "@douyinfe/semi-ui";
|
||||
import { LayoutContext } from "../pages/editor";
|
||||
|
||||
export default function Table(props) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [hoveredField, setHoveredField] = useState(-1);
|
||||
// const [visible, setVisible] = useState(false);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const {layout} = useContext(LayoutContext);
|
||||
// const [editFieldVisible, setEditFieldVisible] = useState(-1);
|
||||
// const [field, setField] = useState({
|
||||
// name: "",
|
||||
@ -73,6 +76,7 @@ export default function Table(props) {
|
||||
opacity: "0.7",
|
||||
marginRight: "6px",
|
||||
}}
|
||||
onClick={() => setVisible(true)}
|
||||
></Button>
|
||||
<Button
|
||||
icon={<IconPlus />}
|
||||
@ -106,11 +110,16 @@ export default function Table(props) {
|
||||
) : (
|
||||
<div>
|
||||
{props.tableData.indices.map((index, k) => (
|
||||
<div className="flex items-center my-1 px-2 py-1 rounded bg-gray-100" key={k}>
|
||||
<div
|
||||
className="flex items-center my-1 px-2 py-1 rounded bg-gray-100"
|
||||
key={k}
|
||||
>
|
||||
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
|
||||
<div>
|
||||
{index.fields.map((f) => (
|
||||
<Tag color="blue" key={f} className="me-1">{f}</Tag>
|
||||
<Tag color="blue" key={f} className="me-1">
|
||||
{f}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@ -250,6 +259,14 @@ export default function Table(props) {
|
||||
})}
|
||||
</div>
|
||||
</foreignObject>
|
||||
<SideSheet
|
||||
title="Sidesheet"
|
||||
visible={visible && !layout.sidebar}
|
||||
onCancel={() => setVisible((prev) => !prev)}
|
||||
>
|
||||
<p>This is the content of a basic sidesheet.</p>
|
||||
<p>Here is more content...</p>
|
||||
</SideSheet>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, createContext } from "react";
|
||||
import Sidebar from "../components/sidebar";
|
||||
import ControlPanel from "../components/control_panel";
|
||||
import { DndProvider } from "react-dnd";
|
||||
@ -6,6 +6,8 @@ import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import Canvas from "../components/canvas";
|
||||
import EditorPanel from "../components/editor_panel";
|
||||
|
||||
export const LayoutContext = createContext();
|
||||
|
||||
export default function Editor(props) {
|
||||
const [code, setCode] = useState("");
|
||||
const [tables, setTables] = useState([]);
|
||||
@ -31,21 +33,38 @@ export default function Editor(props) {
|
||||
if (w > 340) setWidth(w);
|
||||
};
|
||||
|
||||
const value = {layout, setLayout};
|
||||
|
||||
return (
|
||||
<div className="h-[100vh] overflow-hidden">
|
||||
<ControlPanel layout={layout} setLayout={setLayout} />
|
||||
<div
|
||||
className={
|
||||
layout.header
|
||||
? `flex h-[calc(100vh-123.93px)]`
|
||||
: `flex h-[calc(100vh-51.97px)]`
|
||||
}
|
||||
onMouseUp={() => setResize(false)}
|
||||
onMouseMove={dragHandler}
|
||||
>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
{layout.sidebar && (
|
||||
<EditorPanel
|
||||
<LayoutContext.Provider value={value}>
|
||||
<div className="h-[100vh] overflow-hidden">
|
||||
<ControlPanel/>
|
||||
<div
|
||||
className={
|
||||
layout.header
|
||||
? `flex h-[calc(100vh-123.93px)]`
|
||||
: `flex h-[calc(100vh-51.97px)]`
|
||||
}
|
||||
onMouseUp={() => setResize(false)}
|
||||
onMouseMove={dragHandler}
|
||||
>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
{layout.sidebar && (
|
||||
<EditorPanel
|
||||
tables={tables}
|
||||
setTables={setTables}
|
||||
code={code}
|
||||
setCode={setCode}
|
||||
relationships={relationships}
|
||||
setRelationships={setRelationships}
|
||||
areas={areas}
|
||||
setAreas={setAreas}
|
||||
resize={resize}
|
||||
setResize={setResize}
|
||||
width={width}
|
||||
/>
|
||||
)}
|
||||
<Canvas
|
||||
tables={tables}
|
||||
setTables={setTables}
|
||||
code={code}
|
||||
@ -54,24 +73,11 @@ export default function Editor(props) {
|
||||
setRelationships={setRelationships}
|
||||
areas={areas}
|
||||
setAreas={setAreas}
|
||||
resize={resize}
|
||||
setResize={setResize}
|
||||
width={width}
|
||||
/>
|
||||
)}
|
||||
<Canvas
|
||||
tables={tables}
|
||||
setTables={setTables}
|
||||
code={code}
|
||||
setCode={setCode}
|
||||
relationships={relationships}
|
||||
setRelationships={setRelationships}
|
||||
areas={areas}
|
||||
setAreas={setAreas}
|
||||
/>
|
||||
</DndProvider>
|
||||
{layout.services && <Sidebar />}
|
||||
</DndProvider>
|
||||
{layout.services && <Sidebar />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user