edit table sidesheet
This commit is contained in:
1ilit
parent
2a04f651d3
commit
ce92a35c9f
@ -365,6 +365,8 @@ export default function Canvas(props) {
|
||||
onMouseDown={(e) =>
|
||||
handleMouseDownRect(e, table.id, ObjectType.TABLE)
|
||||
}
|
||||
selectedTable={props.selectedTable}
|
||||
setSelectedTable={props.setSelectedTable}
|
||||
/>
|
||||
))}
|
||||
{linking && (
|
||||
|
||||
@ -18,6 +18,7 @@ import {
|
||||
Form,
|
||||
Image,
|
||||
Modal,
|
||||
Spin,
|
||||
} from "@douyinfe/semi-ui";
|
||||
import { toPng, toJpeg, toSvg } from "html-to-image";
|
||||
import { saveAs } from "file-saver";
|
||||
@ -31,7 +32,7 @@ export default function ControlPanel(props) {
|
||||
`diagram_${new Date().toISOString()}`
|
||||
);
|
||||
const [extension, setExtension] = useState("");
|
||||
const {layout, setLayout} = useContext(LayoutContext);
|
||||
const { layout, setLayout } = useContext(LayoutContext);
|
||||
|
||||
const menu = {
|
||||
File: {
|
||||
@ -364,7 +365,13 @@ export default function ControlPanel(props) {
|
||||
cancelText="Cancel"
|
||||
width={470}
|
||||
>
|
||||
{dataUrl !== "" || dataUrl ? (
|
||||
<Image src={dataUrl} alt="Diagram" width={420}></Image>
|
||||
) : (
|
||||
<div className="text-center my-3">
|
||||
<Spin tip="Loading..." size="large"></Spin>
|
||||
</div>
|
||||
)}
|
||||
<Form
|
||||
labelPosition="left"
|
||||
labelAlign="right"
|
||||
|
||||
@ -30,7 +30,7 @@ const EditorPanel = (props) => {
|
||||
const [tab, setTab] = useState("1");
|
||||
// const map = useRef(new Map());
|
||||
// const {tables, setTables} = useContext(TableContext);
|
||||
const {areas, setAreas} = useContext(AreaContext);
|
||||
const { areas, setAreas } = useContext(AreaContext);
|
||||
|
||||
const tabList = [
|
||||
{ tab: "Tables", itemKey: "1" },
|
||||
@ -39,8 +39,11 @@ const EditorPanel = (props) => {
|
||||
{ tab: "Editor", itemKey: "4" },
|
||||
];
|
||||
const contentList = [
|
||||
<TableOverview />,
|
||||
<ReferenceOverview/>,
|
||||
<TableOverview
|
||||
selectedTable={props.selectedTable}
|
||||
setSelectedTable={props.setSelectedTable}
|
||||
/>,
|
||||
<ReferenceOverview />,
|
||||
<Shape />,
|
||||
<CodeMirror
|
||||
value={props.code}
|
||||
|
||||
@ -1,16 +1,28 @@
|
||||
import { React, useState, useContext } from "react";
|
||||
// import { sqlDataTypes } from "../data/data";
|
||||
import { IconEdit, IconPlus, IconMore, IconMinus } from "@douyinfe/semi-icons";
|
||||
import { sqlDataTypes, tableThemes, defaultTableTheme } from "../data/data";
|
||||
import {
|
||||
IconEdit,
|
||||
IconPlus,
|
||||
IconMore,
|
||||
IconMinus,
|
||||
IconDeleteStroked,
|
||||
IconKeyStroked,
|
||||
IconCheckboxTick,
|
||||
IconColorPalette,
|
||||
} from "@douyinfe/semi-icons";
|
||||
import {
|
||||
// Modal,
|
||||
// Form,
|
||||
// Checkbox,
|
||||
// Row,
|
||||
// Col,
|
||||
Select,
|
||||
Card,
|
||||
Form,
|
||||
Checkbox,
|
||||
Row,
|
||||
Col,
|
||||
Popover,
|
||||
Tag,
|
||||
Button,
|
||||
SideSheet,
|
||||
Toast,
|
||||
} from "@douyinfe/semi-ui";
|
||||
import { LayoutContext, TableContext } from "../pages/editor";
|
||||
|
||||
@ -18,22 +30,41 @@ export default function Table(props) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [hoveredField, setHoveredField] = useState(-1);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const {layout} = useContext(LayoutContext);
|
||||
const {setTables} = useContext(TableContext);
|
||||
// const [editFieldVisible, setEditFieldVisible] = useState(-1);
|
||||
// const [field, setField] = useState({
|
||||
// name: "",
|
||||
// type: "",
|
||||
// default: "",
|
||||
// primary: false,
|
||||
// unique: false,
|
||||
// notNull: false,
|
||||
// increment: false,
|
||||
// comment: "",
|
||||
// });
|
||||
const { layout } = useContext(LayoutContext);
|
||||
const { setTables } = useContext(TableContext);
|
||||
|
||||
const height = props.tableData.fields.length * 36 + 50 + 3;
|
||||
|
||||
const updatedField = (tid, fid, updatedValues) => {
|
||||
setTables((prev) =>
|
||||
prev.map((table, i) => {
|
||||
if (tid === i) {
|
||||
return {
|
||||
...table,
|
||||
fields: table.fields.map((field, j) =>
|
||||
fid === j ? { ...field, ...updatedValues } : field
|
||||
),
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const updateTable = (tid, updatedValues) => {
|
||||
setTables((prev) =>
|
||||
prev.map((table, i) => {
|
||||
if (tid === i) {
|
||||
return {
|
||||
...table,
|
||||
...updatedValues,
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<g>
|
||||
<foreignObject
|
||||
@ -77,7 +108,16 @@ export default function Table(props) {
|
||||
opacity: "0.7",
|
||||
marginRight: "6px",
|
||||
}}
|
||||
onClick={() => setVisible(true)}
|
||||
onClick={() => {
|
||||
if (!layout.sidebar) {
|
||||
setVisible(true);
|
||||
} else {
|
||||
props.setSelectedTable(`${props.tableData.id}`);
|
||||
document
|
||||
.getElementById(`scroll_table_${props.tableData.id}`)
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}}
|
||||
></Button>
|
||||
<Button
|
||||
icon={<IconPlus />}
|
||||
@ -94,9 +134,11 @@ export default function Table(props) {
|
||||
<div className="text-slate-600">
|
||||
<p className="mb-2">
|
||||
<strong>Comment :</strong>{" "}
|
||||
{props.tableData.comment === ""
|
||||
? "No comment"
|
||||
: <div>{props.tableData.comment}</div>}
|
||||
{props.tableData.comment === "" ? (
|
||||
"No comment"
|
||||
) : (
|
||||
<div>{props.tableData.comment}</div>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
<strong
|
||||
@ -133,7 +175,7 @@ export default function Table(props) {
|
||||
position="rightTop"
|
||||
showArrow
|
||||
trigger="click"
|
||||
style={{width: "200px"}}
|
||||
style={{ width: "200px" }}
|
||||
>
|
||||
<Button
|
||||
icon={<IconMore />}
|
||||
@ -245,7 +287,9 @@ export default function Table(props) {
|
||||
...updatedTables[props.tableData.id].fields,
|
||||
];
|
||||
updatedFields.splice(i, 1);
|
||||
updatedTables[props.tableData.id].fields = [...updatedFields];
|
||||
updatedTables[props.tableData.id].fields = [
|
||||
...updatedFields,
|
||||
];
|
||||
return updatedTables;
|
||||
});
|
||||
}}
|
||||
@ -262,12 +306,437 @@ export default function Table(props) {
|
||||
</div>
|
||||
</foreignObject>
|
||||
<SideSheet
|
||||
title="Sidesheet"
|
||||
visible={visible && !layout.sidebar}
|
||||
title="Edit table"
|
||||
visible={visible}
|
||||
onCancel={() => setVisible((prev) => !prev)}
|
||||
style={{ paddingBottom: "16px" }}
|
||||
>
|
||||
<p>This is the content of a basic sidesheet.</p>
|
||||
<p>Here is more content...</p>
|
||||
<Form
|
||||
labelPosition="left"
|
||||
onChange={(value) => updateTable(props.tableData.id, value.values)}
|
||||
>
|
||||
<Form.Input
|
||||
initValue={props.tableData.name}
|
||||
field="name"
|
||||
label="Name"
|
||||
/>
|
||||
</Form>
|
||||
<div>
|
||||
{props.tableData.fields.map((f, j) => (
|
||||
<Form
|
||||
key={j}
|
||||
onChange={(value) =>
|
||||
updatedField(props.tableData.id, j, value.values)
|
||||
}
|
||||
initValues={f}
|
||||
>
|
||||
<Row
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
gutter={6}
|
||||
className="hover:bg-slate-100"
|
||||
>
|
||||
<Col span={8}>
|
||||
<Form.Input
|
||||
field="name"
|
||||
noLabel={true}
|
||||
className="m-0"
|
||||
placeholder="Name"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Select
|
||||
className="w-full"
|
||||
field="type"
|
||||
noLabel={true}
|
||||
optionList={sqlDataTypes.map((value, index) => {
|
||||
return {
|
||||
label: value,
|
||||
value: value,
|
||||
};
|
||||
})}
|
||||
filter
|
||||
placeholder="Type"
|
||||
></Form.Select>
|
||||
</Col>
|
||||
<Col
|
||||
span={8}
|
||||
style={{ display: "flex", justifyContent: "space-around" }}
|
||||
>
|
||||
<Button
|
||||
type={f.notNull ? "primary" : "tertiary"}
|
||||
title="Nullable"
|
||||
theme={f.notNull ? "solid" : "light"}
|
||||
onClick={() =>
|
||||
updatedField(props.tableData.id, j, {
|
||||
notNull: !f.notNull,
|
||||
})
|
||||
}
|
||||
>
|
||||
?
|
||||
</Button>
|
||||
<Button
|
||||
type={f.primary ? "primary" : "tertiary"}
|
||||
title="Primary"
|
||||
theme={f.primary ? "solid" : "light"}
|
||||
onClick={() =>
|
||||
updatedField(props.tableData.id, j, {
|
||||
primary: !f.primary,
|
||||
})
|
||||
}
|
||||
icon={<IconKeyStroked />}
|
||||
></Button>
|
||||
<Popover
|
||||
content={
|
||||
<div className="px-1">
|
||||
<Form
|
||||
onChange={(value) =>
|
||||
updatedField(props.tableData.id, j, value.values)
|
||||
}
|
||||
>
|
||||
<Form.Input
|
||||
field="default"
|
||||
label="Default"
|
||||
initValue={f.default}
|
||||
trigger="blur"
|
||||
placeholder="Set default"
|
||||
/>
|
||||
<Form.Input
|
||||
field="check"
|
||||
label="Check Expression"
|
||||
trigger="blur"
|
||||
placeholder="Set constraint"
|
||||
initValue={f.check}
|
||||
/>
|
||||
<div className="flex justify-between items-center my-3">
|
||||
<label htmlFor="unique" className="font-medium">
|
||||
Unique
|
||||
</label>
|
||||
<Checkbox
|
||||
value="unique"
|
||||
defaultChecked={f.unique}
|
||||
onChange={(checkedValues) =>
|
||||
updatedField(props.tableData.id, j, {
|
||||
[checkedValues.target.value]:
|
||||
checkedValues.target.checked,
|
||||
})
|
||||
}
|
||||
></Checkbox>
|
||||
</div>
|
||||
<div className="flex justify-between items-center my-3">
|
||||
<label htmlFor="increment" className="font-medium">
|
||||
Autoincrement
|
||||
</label>
|
||||
<Checkbox
|
||||
value="increment"
|
||||
defaultChecked={f.increment}
|
||||
onChange={(checkedValues) =>
|
||||
updatedField(props.tableData.id, j, {
|
||||
[checkedValues.target.value]:
|
||||
checkedValues.target.checked,
|
||||
})
|
||||
}
|
||||
></Checkbox>
|
||||
</div>
|
||||
<Form.TextArea
|
||||
field="comment"
|
||||
label="Comment"
|
||||
placeholder="Add comment"
|
||||
initValue={f.comment}
|
||||
autosize
|
||||
rows={2}
|
||||
/>
|
||||
</Form>
|
||||
<Button
|
||||
icon={<IconDeleteStroked />}
|
||||
type="danger"
|
||||
block
|
||||
onClick={(ev) => {
|
||||
setTables((prev) => {
|
||||
const updatedTables = [...prev];
|
||||
const updatedFields = [
|
||||
...updatedTables[props.tableData.id].fields,
|
||||
];
|
||||
updatedFields.splice(j, 1);
|
||||
updatedTables[props.tableData.id].fields = [
|
||||
...updatedFields,
|
||||
];
|
||||
return updatedTables;
|
||||
});
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
trigger="click"
|
||||
position="rightTop"
|
||||
showArrow
|
||||
>
|
||||
<Button type="tertiary" icon={<IconMore />}></Button>
|
||||
</Popover>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
))}
|
||||
{props.tableData.indices.length > 0 && (
|
||||
<Card
|
||||
bodyStyle={{ padding: "14px" }}
|
||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||
headerLine={false}
|
||||
>
|
||||
<div className="font-medium ms-1 mb-1">Indices</div>
|
||||
{props.tableData.indices.map((idx, k) => (
|
||||
<div className="flex justify-between items-center mb-2" key={k}>
|
||||
<Select
|
||||
placeholder="Select fields"
|
||||
multiple
|
||||
optionList={props.tableData.fields.map((e) => ({
|
||||
value: e.name,
|
||||
label: e.name,
|
||||
}))}
|
||||
className="w-full"
|
||||
defaultValue={idx.fields}
|
||||
onChange={(value) => {
|
||||
setTables((prev) =>
|
||||
prev.map((t, i) => {
|
||||
if (t.id === props.tableData.id) {
|
||||
return {
|
||||
...t,
|
||||
indices: t.indices.map((index, j) => {
|
||||
if (j === k)
|
||||
return {
|
||||
name: `${value.join("_")}_index`,
|
||||
fields: [...value],
|
||||
};
|
||||
return index;
|
||||
}),
|
||||
};
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<div className="px-1">
|
||||
<Form>
|
||||
<Form.Input
|
||||
field="name"
|
||||
label="Name"
|
||||
initValue={idx.name}
|
||||
trigger="blur"
|
||||
placeholder="Index name"
|
||||
/>
|
||||
</Form>
|
||||
<Button
|
||||
icon={<IconDeleteStroked />}
|
||||
type="danger"
|
||||
block
|
||||
onClick={() => {
|
||||
setTables((prev) =>
|
||||
prev.map((t, i) => {
|
||||
if (t.id === props.tableData.id) {
|
||||
const updatedIndices = [...t.indices];
|
||||
updatedIndices.splice(k, 1);
|
||||
return {
|
||||
...t,
|
||||
indices: updatedIndices,
|
||||
};
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
trigger="click"
|
||||
position="rightTop"
|
||||
showArrow
|
||||
>
|
||||
<Button
|
||||
icon={<IconMore />}
|
||||
type="tertiary"
|
||||
style={{ marginLeft: "12px" }}
|
||||
></Button>
|
||||
</Popover>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
)}
|
||||
<Card
|
||||
bodyStyle={{ padding: "14px" }}
|
||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||
headerLine={false}
|
||||
>
|
||||
<div className="font-medium ms-1">Comment</div>
|
||||
<Form
|
||||
onChange={(value) =>
|
||||
updateTable(props.tableData.id, value.values)
|
||||
}
|
||||
>
|
||||
<Form.TextArea
|
||||
field="comment"
|
||||
noLabel={true}
|
||||
showClear
|
||||
onClear={() => updateTable(props.tableData.id, { comment: "" })}
|
||||
initValue={props.tableData.comment}
|
||||
autosize
|
||||
placeholder="Add comment"
|
||||
rows={1}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
<Row gutter={6} className="mt-2">
|
||||
<Col span={8}>
|
||||
<Popover
|
||||
content={
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-2">
|
||||
<div className="font-medium">Theme</div>
|
||||
<Button
|
||||
type="tertiary"
|
||||
size="small"
|
||||
onClick={() =>
|
||||
updateTable(props.tableData.id, {
|
||||
color: defaultTableTheme,
|
||||
})
|
||||
}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="py-3">
|
||||
<div>
|
||||
{tableThemes
|
||||
.slice(0, Math.ceil(tableThemes.length / 2))
|
||||
.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
style={{ backgroundColor: c }}
|
||||
className="p-3 rounded-full mx-1"
|
||||
onClick={() =>
|
||||
updateTable(props.tableData.id, { color: c })
|
||||
}
|
||||
>
|
||||
{props.tableData.color === c ? (
|
||||
<IconCheckboxTick style={{ color: "white" }} />
|
||||
) : (
|
||||
<IconCheckboxTick style={{ color: c }} />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
{tableThemes
|
||||
.slice(Math.ceil(tableThemes.length / 2))
|
||||
.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
style={{ backgroundColor: c }}
|
||||
className="p-3 rounded-full mx-1"
|
||||
onClick={() =>
|
||||
updateTable(props.tableData.id, { color: c })
|
||||
}
|
||||
>
|
||||
<IconCheckboxTick
|
||||
style={{
|
||||
color:
|
||||
props.tableData.color === c ? "white" : c,
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
trigger="click"
|
||||
position="bottomLeft"
|
||||
showArrow
|
||||
>
|
||||
<Button type="tertiary" icon={<IconColorPalette />}></Button>
|
||||
</Popover>
|
||||
</Col>
|
||||
<Col span={7}>
|
||||
<Button
|
||||
block
|
||||
onClick={() => {
|
||||
setTables((prev) =>
|
||||
prev.map((t, i) => {
|
||||
if (t.id === props.tableData.id) {
|
||||
return {
|
||||
...t,
|
||||
indices: [
|
||||
...t.indices,
|
||||
{ name: `index_${t.indices.length}`, fields: [] },
|
||||
],
|
||||
};
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
}}
|
||||
>
|
||||
Add index
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setTables((prev) =>
|
||||
prev.map((t, i) => {
|
||||
if (t.id === props.tableData.id) {
|
||||
return {
|
||||
...t,
|
||||
fields: [
|
||||
...t.fields,
|
||||
{
|
||||
name: "",
|
||||
type: "",
|
||||
default: "",
|
||||
primary: false,
|
||||
unique: false,
|
||||
notNull: false,
|
||||
increment: false,
|
||||
comment: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
}}
|
||||
block
|
||||
>
|
||||
Add field
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Button
|
||||
icon={<IconDeleteStroked />}
|
||||
type="danger"
|
||||
onClick={() => {
|
||||
Toast.success(`Table deleted!`);
|
||||
setTables((prev) =>
|
||||
prev
|
||||
.filter((e) => e.id !== props.tableData.id)
|
||||
.map((e, idx) => ({ ...e, id: idx }))
|
||||
);
|
||||
props.setSelectedTable("");
|
||||
setVisible(false);
|
||||
}}
|
||||
></Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</SideSheet>
|
||||
</g>
|
||||
);
|
||||
|
||||
@ -31,7 +31,6 @@ import { TableContext } from "../pages/editor";
|
||||
|
||||
export default function TableOverview(props) {
|
||||
const [indexActiveKey, setIndexActiveKey] = useState("");
|
||||
const [tableActiveKey, setTableActiveKey] = useState("");
|
||||
const [value, setValue] = useState("");
|
||||
const { tables, setTables } = useContext(TableContext);
|
||||
const [filteredResult, setFilteredResult] = useState(
|
||||
@ -95,7 +94,7 @@ export default function TableOverview(props) {
|
||||
onChange={(v) => setValue(v)}
|
||||
onSelect={(v) => {
|
||||
const { id } = tables.find((t) => t.name === v);
|
||||
setTableActiveKey(`${id}`);
|
||||
props.setSelectedTable(`${id}`);
|
||||
document
|
||||
.getElementById(`scroll_table_${id}`)
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
@ -140,8 +139,8 @@ export default function TableOverview(props) {
|
||||
</Col>
|
||||
</Row>
|
||||
<Collapse
|
||||
activeKey={tableActiveKey}
|
||||
onChange={(k) => setTableActiveKey(k)}
|
||||
activeKey={props.selectedTable}
|
||||
onChange={(k) => props.setSelectedTable(k)}
|
||||
accordion
|
||||
>
|
||||
{tables.length <= 0 ? (
|
||||
@ -332,8 +331,9 @@ export default function TableOverview(props) {
|
||||
<Collapse
|
||||
activeKey={indexActiveKey}
|
||||
onChange={(itemKey) => setIndexActiveKey(itemKey)}
|
||||
accordion
|
||||
>
|
||||
<Collapse.Panel header="Indices" itemKey="1" accordion>
|
||||
<Collapse.Panel header="Indices" itemKey="1">
|
||||
{t.indices.map((idx, k) => (
|
||||
<div
|
||||
className="flex justify-between items-center mb-2"
|
||||
@ -555,7 +555,7 @@ export default function TableOverview(props) {
|
||||
.filter((e) => e.id !== i)
|
||||
.map((e, idx) => ({ ...e, id: idx }))
|
||||
);
|
||||
setTableActiveKey("");
|
||||
props.setSelectedTable("");
|
||||
}}
|
||||
></Button>
|
||||
</Col>
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.cm-focused {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background-color: #124559;
|
||||
}
|
||||
|
||||
.semi-form-vertical .semi-form-field {
|
||||
margin: 0;
|
||||
padding-top: 8px !important;
|
||||
padding-bottom: 8px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.semi-card .semi-collapse-item{
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c5c5c5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #b9b9b9;
|
||||
}
|
||||
@ -17,6 +17,7 @@ export default function Editor(props) {
|
||||
const [areas, setAreas] = useState([]);
|
||||
const [resize, setResize] = useState(false);
|
||||
const [width, setWidth] = useState(340);
|
||||
const [selectedTable, setSelectedTable] = useState("");
|
||||
const [layout, setLayout] = useState({
|
||||
header: true,
|
||||
sidebar: true,
|
||||
@ -37,7 +38,6 @@ export default function Editor(props) {
|
||||
|
||||
useEffect(()=>{
|
||||
document.title = "Editor";
|
||||
console.log("hey");
|
||||
}, [])
|
||||
|
||||
return (
|
||||
@ -65,11 +65,15 @@ export default function Editor(props) {
|
||||
resize={resize}
|
||||
setResize={setResize}
|
||||
width={width}
|
||||
selectedTable={selectedTable}
|
||||
setSelectedTable={setSelectedTable}
|
||||
/>
|
||||
)}
|
||||
<Canvas
|
||||
code={code}
|
||||
setCode={setCode}
|
||||
selectedTable={selectedTable}
|
||||
setSelectedTable={setSelectedTable}
|
||||
/>
|
||||
</DndProvider>
|
||||
{layout.services && <Sidebar />}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user