subject area overview
This commit is contained in:
1ilit
parent
ce92a35c9f
commit
8da14317e5
@ -28,53 +28,61 @@ export default function Area(props) {
|
||||
height={props.areaData.height > 0 ? props.areaData.height : 0}
|
||||
onMouseDown={props.onMouseDown}
|
||||
>
|
||||
<div className="border-2 border-dashed border-blue-600 opacity-70 bg-slate-400 w-fill h-full select-none cursor-move">
|
||||
<div
|
||||
className={`${
|
||||
hovered
|
||||
? "border-4 border-dashed border-[#5891db]"
|
||||
: "border-2 border-slate-400"
|
||||
} w-full h-full cursor-move rounded relative`}
|
||||
>
|
||||
<div
|
||||
className="opacity-40 w-fill p-2 h-full"
|
||||
style={{ backgroundColor: props.areaData.color }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-gray-900 absolute top-2 left-3 select-none">
|
||||
{props.areaData.name}
|
||||
</div>
|
||||
</foreignObject>
|
||||
{hovered && (
|
||||
<>
|
||||
<rect
|
||||
x={props.areaData.x - 5}
|
||||
y={props.areaData.y - 5}
|
||||
width={10}
|
||||
height={10}
|
||||
fill="lightblue"
|
||||
stroke="blue"
|
||||
strokeWidth={1}
|
||||
<circle
|
||||
cx={props.areaData.x}
|
||||
cy={props.areaData.y}
|
||||
r={6}
|
||||
fill="white"
|
||||
stroke="#5891db"
|
||||
strokeWidth={3}
|
||||
cursor="nwse-resize"
|
||||
onMouseDown={(e) => handleMouseDown(e, "tl")}
|
||||
/>
|
||||
<rect
|
||||
x={props.areaData.x + props.areaData.width - 5}
|
||||
y={props.areaData.y - 5}
|
||||
width={10}
|
||||
height={10}
|
||||
fill="lightblue"
|
||||
stroke="blue"
|
||||
strokeWidth={1}
|
||||
<circle
|
||||
cx={props.areaData.x + props.areaData.width}
|
||||
cy={props.areaData.y}
|
||||
r={6}
|
||||
fill="white"
|
||||
stroke="#5891db"
|
||||
strokeWidth={3}
|
||||
cursor="nesw-resize"
|
||||
onMouseDown={(e) => handleMouseDown(e, "tr")}
|
||||
/>
|
||||
<rect
|
||||
x={props.areaData.x - 5}
|
||||
y={props.areaData.y + props.areaData.height - 5}
|
||||
width={10}
|
||||
height={10}
|
||||
fill="lightblue"
|
||||
stroke="blue"
|
||||
strokeWidth={1}
|
||||
<circle
|
||||
cx={props.areaData.x}
|
||||
cy={props.areaData.y + props.areaData.height}
|
||||
r={6}
|
||||
fill="white"
|
||||
stroke="#5891db"
|
||||
strokeWidth={3}
|
||||
cursor="nesw-resize"
|
||||
onMouseDown={(e) => handleMouseDown(e, "bl")}
|
||||
/>
|
||||
<rect
|
||||
x={props.areaData.x + props.areaData.width - 5}
|
||||
y={props.areaData.y + props.areaData.height - 5}
|
||||
width={10}
|
||||
height={10}
|
||||
fill="lightblue"
|
||||
stroke="blue"
|
||||
strokeWidth={1}
|
||||
<circle
|
||||
cx={props.areaData.x + props.areaData.width}
|
||||
cy={props.areaData.y + props.areaData.height}
|
||||
r={6}
|
||||
fill="white"
|
||||
stroke="#5891db"
|
||||
strokeWidth={3}
|
||||
cursor="nwse-resize"
|
||||
onMouseDown={(e) => handleMouseDown(e, "br")}
|
||||
/>
|
||||
|
||||
225
src/components/area_overview.jsx
Normal file
225
src/components/area_overview.jsx
Normal file
@ -0,0 +1,225 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
import {
|
||||
Empty,
|
||||
Row,
|
||||
Col,
|
||||
AutoComplete,
|
||||
Button,
|
||||
Input,
|
||||
Popover,
|
||||
Toast,
|
||||
} from "@douyinfe/semi-ui";
|
||||
import {
|
||||
IllustrationNoContent,
|
||||
IllustrationNoContentDark,
|
||||
} from "@douyinfe/semi-illustrations";
|
||||
import {
|
||||
IconPlus,
|
||||
IconSearch,
|
||||
IconCheckboxTick,
|
||||
IconDeleteStroked,
|
||||
} from "@douyinfe/semi-icons";
|
||||
import { defaultTableTheme, tableThemes } from "../data/data";
|
||||
import { AreaContext } from "../pages/editor";
|
||||
|
||||
export default function AreaOverview(props) {
|
||||
const { areas, setAreas } = useContext(AreaContext);
|
||||
|
||||
const [value, setValue] = useState("");
|
||||
const [filteredResult, setFilteredResult] = useState(
|
||||
areas.map((t) => {
|
||||
return t.name;
|
||||
})
|
||||
);
|
||||
|
||||
const handleStringSearch = (value) => {
|
||||
setFilteredResult(
|
||||
areas
|
||||
.map((t) => {
|
||||
return t.name;
|
||||
})
|
||||
.filter((i) => i.includes(value))
|
||||
);
|
||||
};
|
||||
|
||||
const updateArea = (aid, updatedValues) => {
|
||||
setAreas((prev) =>
|
||||
prev.map((a, i) => {
|
||||
if (aid === i) {
|
||||
return {
|
||||
...a,
|
||||
...updatedValues,
|
||||
};
|
||||
}
|
||||
return a;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={6}>
|
||||
<Col span={16}>
|
||||
<AutoComplete
|
||||
data={filteredResult}
|
||||
value={value}
|
||||
showClear
|
||||
prefix={<IconSearch />}
|
||||
placeholder="Search..."
|
||||
emptyContent={<div className="p-3">No areas found</div>}
|
||||
onSearch={(v) => handleStringSearch(v)}
|
||||
onChange={(v) => setValue(v)}
|
||||
onSelect={(v) => {
|
||||
const { id } = areas.find((t) => t.name === v);
|
||||
document
|
||||
.getElementById(`scroll_area_${id}`)
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
}}
|
||||
className="w-full"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Button
|
||||
icon={<IconPlus />}
|
||||
block
|
||||
onClick={() => {
|
||||
const newArea = {
|
||||
id: areas.length,
|
||||
name: `area_${areas.length}`,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 200,
|
||||
height: 200,
|
||||
color: defaultTableTheme,
|
||||
};
|
||||
setAreas((prev) => [...prev, newArea]);
|
||||
}}
|
||||
>
|
||||
Add area
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
{areas.length <= 0 ? (
|
||||
<div className="select-none">
|
||||
<Empty
|
||||
image={
|
||||
<IllustrationNoContent style={{ width: 160, height: 160 }} />
|
||||
}
|
||||
darkModeImage={
|
||||
<IllustrationNoContentDark style={{ width: 160, height: 160 }} />
|
||||
}
|
||||
title="No subject areas"
|
||||
description="Add subject areas to compartmentalize tables!"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-2">
|
||||
{areas.map((a, i) => (
|
||||
<Row
|
||||
gutter={6}
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
key={i}
|
||||
id={`scroll_area_${a.id}`}
|
||||
className="my-3"
|
||||
>
|
||||
<Col span={18}>
|
||||
<Input
|
||||
value={a.name}
|
||||
onChange={(value, e) => updateArea(a.id, { name: value })}
|
||||
field="name"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Popover
|
||||
content={
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-2">
|
||||
<div className="font-medium">Theme</div>
|
||||
<Button
|
||||
type="tertiary"
|
||||
size="small"
|
||||
onClick={() =>
|
||||
updateArea(i, { 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={() => updateArea(i, { color: c })}
|
||||
>
|
||||
{a.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={() => updateArea(i, { color: c })}
|
||||
>
|
||||
<IconCheckboxTick
|
||||
style={{
|
||||
color: a.color === c ? "white" : c,
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
trigger="click"
|
||||
position="bottomLeft"
|
||||
showArrow
|
||||
>
|
||||
<div
|
||||
className="h-[32px] w-[32px] rounded"
|
||||
style={{ backgroundColor: a.color }}
|
||||
/>
|
||||
</Popover>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Button
|
||||
icon={<IconDeleteStroked />}
|
||||
type="danger"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
Toast.success(`Area deleted!`);
|
||||
setAreas((prev) =>
|
||||
prev
|
||||
.filter((e) => e.id !== i)
|
||||
.map((e, idx) => ({ ...e, id: idx }))
|
||||
);
|
||||
}}
|
||||
// className="delete-button"
|
||||
></Button>
|
||||
</Col>
|
||||
</Row>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -590,6 +590,23 @@ export default function ControlPanel(props) {
|
||||
>
|
||||
Issues
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
layout.areas ? (
|
||||
<IconCheckboxTick />
|
||||
) : (
|
||||
<div className="px-2"></div>
|
||||
)
|
||||
}
|
||||
onClick={() =>
|
||||
setLayout((prev) => ({
|
||||
...prev,
|
||||
areas: !prev.areas,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Subject areas
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item
|
||||
icon={
|
||||
layout.editor ? (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { React, useContext, useState } from "react";
|
||||
import { React, useState } from "react";
|
||||
import CodeMirror from "@uiw/react-codemirror";
|
||||
import { createTheme } from "@uiw/codemirror-themes";
|
||||
import { sql } from "@codemirror/lang-sql";
|
||||
@ -8,8 +8,7 @@ import Shape from "./shape";
|
||||
import { Tabs } from "@douyinfe/semi-ui";
|
||||
import TableOverview from "./table_overview";
|
||||
import ReferenceOverview from "./reference_overview";
|
||||
import { defaultTableTheme } from "../data/data";
|
||||
import { AreaContext } from "../pages/editor";
|
||||
import AreaOverview from "./area_overview";
|
||||
// import { TableContext } from "../pages/editor";
|
||||
|
||||
const myTheme = createTheme({
|
||||
@ -30,13 +29,13 @@ const EditorPanel = (props) => {
|
||||
const [tab, setTab] = useState("1");
|
||||
// const map = useRef(new Map());
|
||||
// const {tables, setTables} = useContext(TableContext);
|
||||
const { areas, setAreas } = useContext(AreaContext);
|
||||
|
||||
const tabList = [
|
||||
{ tab: "Tables", itemKey: "1" },
|
||||
{ tab: "Relationships", itemKey: "2" },
|
||||
{ tab: "Shapes", itemKey: "3" },
|
||||
{ tab: "Editor", itemKey: "4" },
|
||||
{ tab: "Subject Areas", itemKey: "3" },
|
||||
{ tab: "Shapes", itemKey: "4" },
|
||||
{ tab: "Editor", itemKey: "5" },
|
||||
];
|
||||
const contentList = [
|
||||
<TableOverview
|
||||
@ -44,6 +43,7 @@ const EditorPanel = (props) => {
|
||||
setSelectedTable={props.setSelectedTable}
|
||||
/>,
|
||||
<ReferenceOverview />,
|
||||
<AreaOverview/>,
|
||||
<Shape />,
|
||||
<CodeMirror
|
||||
value={props.code}
|
||||
@ -69,25 +69,6 @@ const EditorPanel = (props) => {
|
||||
>
|
||||
<div className="p-2">{contentList[parseInt(tab) - 1]}</div>
|
||||
</Tabs>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newArea = {
|
||||
id: areas.length,
|
||||
name: `area_${areas.length}`,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 200,
|
||||
height: 200,
|
||||
color: defaultTableTheme,
|
||||
};
|
||||
setAreas((prev) => {
|
||||
const updatedTables = [...prev, newArea];
|
||||
return updatedTables;
|
||||
});
|
||||
}}
|
||||
>
|
||||
add area
|
||||
</button>
|
||||
<br />
|
||||
<button
|
||||
onClick={() => {
|
||||
|
||||
@ -132,15 +132,15 @@ export default function Table(props) {
|
||||
<Popover
|
||||
content={
|
||||
<div className="text-slate-600">
|
||||
<p className="mb-2">
|
||||
<div className="mb-2">
|
||||
<strong>Comment :</strong>{" "}
|
||||
{props.tableData.comment === "" ? (
|
||||
"No comment"
|
||||
) : (
|
||||
<div>{props.tableData.comment}</div>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
</div>
|
||||
<div className="text-slate-600">
|
||||
<strong
|
||||
className={`${
|
||||
props.tableData.indices.length === 0 ? "" : "block"
|
||||
@ -169,7 +169,7 @@ export default function Table(props) {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
position="rightTop"
|
||||
|
||||
@ -23,6 +23,7 @@ export default function Editor(props) {
|
||||
sidebar: true,
|
||||
services: true,
|
||||
tables: true,
|
||||
areas: true,
|
||||
relationships: true,
|
||||
issues: true,
|
||||
editor: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user