Skip to content

Commit 705251a

Browse files
1ilit1ilit
committed
Handle thumbnails for templates
1 parent c3f2809 commit 705251a

File tree

4 files changed

+238
-120
lines changed

4 files changed

+238
-120
lines changed

‎src/components/relationship.jsx

+1-81
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,8 @@
11
import { React, useState } from "react";
2+
import { calcPath } from "../utils";
23

34
export default function Relationship(props) {
45
const [hovered, setHovered] = useState(false);
5-
const calcPath = (x1, x2, y1, y2) => {
6-
let r = 16;
7-
const offsetX = 8;
8-
const tableWidth = 200;
9-
const midX = (x2 + x1 + tableWidth) / 2;
10-
const endX = x2 + tableWidth < x1 ? x2 + tableWidth - offsetX * 2 : x2;
11-
12-
if (Math.abs(y1 - y2) <= 36) {
13-
r = Math.abs(y2 - y1) / 3;
14-
if (r <= 2) {
15-
if (x1 + tableWidth <= x2)
16-
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${x2 + 0.1} ${
17-
y2 + 0.1
18-
}`;
19-
else if (x2 + tableWidth < x1)
20-
return `M ${x2 + tableWidth - 2 * offsetX} ${y2} L ${x1 + 0.1} ${
21-
y1 + 0.1
22-
}`;
23-
}
24-
}
25-
26-
if (y1 <= y2) {
27-
if (x1 + tableWidth <= x2) {
28-
return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${
29-
midX - r
30-
} ${y1} A ${r} ${r} 0 0 1 ${midX} ${y1 + r} L ${midX} ${
31-
y2 - r
32-
} A ${r} ${r} 0 0 0 ${midX + r} ${y2} L ${endX} ${y2}`;
33-
} else if (x2 <= x1 + tableWidth && x1 <= x2) {
34-
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
35-
x2 + tableWidth
36-
} ${y1} A ${r} ${r} 0 0 1 ${x2 + tableWidth + r} ${y1 + r} L ${
37-
x2 + tableWidth + r
38-
} ${y2 - r} A ${r} ${r} 0 0 1 ${x2 + tableWidth} ${y2} L ${
39-
x2 + tableWidth - 2 * offsetX
40-
} ${y2}`;
41-
} else if (x2 + tableWidth >= x1 && x2 + tableWidth <= x1 + tableWidth) {
42-
return `M ${x1} ${y1} L ${x2 - r} ${y1} A ${r} ${r} 0 0 ${0} ${
43-
x2 - r - r
44-
} ${y1 + r} L ${x2 - r - r} ${y2 - r} A ${r} ${r} 0 0 0 ${
45-
x2 - r
46-
} ${y2} L ${x2} ${y2}`;
47-
} else {
48-
return `M ${x1} ${y1} L ${midX + r} ${y1} A ${r} ${r} 0 0 0 ${midX} ${
49-
y1 + r
50-
} L ${midX} ${y2 - r} A ${r} ${r} 0 0 1 ${
51-
midX - r
52-
} ${y2} L ${endX} ${y2}`;
53-
}
54-
} else {
55-
if (x1 + tableWidth <= x2) {
56-
return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${
57-
midX - r
58-
} ${y1} A ${r} ${r} 0 0 0 ${midX} ${y1 - r} L ${midX} ${
59-
y2 + r
60-
} A ${r} ${r} 0 0 1 ${midX + r} ${y2} L ${endX} ${y2}`;
61-
} else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) {
62-
return `M ${x1} ${y1} L ${x1 - r} ${y1} A ${r} ${r} 0 0 1 ${
63-
x1 - r - r
64-
} ${y1 - r} L ${x1 - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${
65-
x1 - r
66-
} ${y2} L ${endX} ${y2}`;
67-
} else if (x1 >= x2 && x1 <= x2 + tableWidth) {
68-
return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${
69-
x1 + tableWidth - 2 * offsetX + r
70-
} ${y1} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r + r} ${
71-
y1 - r
72-
} L ${x1 + tableWidth - 2 * offsetX + r + r} ${
73-
y2 + r
74-
} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r} ${y2} L ${
75-
x2 + tableWidth - 2 * offsetX
76-
} ${y2}`;
77-
} else {
78-
return `M ${x1} ${y1} L ${midX + r} ${y1} A ${r} ${r} 0 0 1 ${midX} ${
79-
y1 - r
80-
} L ${midX} ${y2 + r} A ${r} ${r} 0 0 0 ${
81-
midX - r
82-
} ${y2} L ${endX} ${y2}`;
83-
}
84-
}
85-
};
866

877
return (
888
<g>

‎src/data/seeds.js

+67-7
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ const t1 = {
22
tables: [
33
{
44
id: 0,
5-
name: "template_1",
6-
x: 57,
7-
y: 63,
5+
name: "table_0",
6+
x: 73,
7+
y: 69,
88
fields: [
99
{
1010
name: "id",
@@ -21,12 +21,72 @@ const t1 = {
2121
],
2222
comment: "",
2323
indices: [],
24-
color: "#f03c3c",
24+
color: "#175e7a",
25+
},
26+
{
27+
id: 1,
28+
name: "table_1",
29+
x: 366,
30+
y: 117,
31+
fields: [
32+
{
33+
name: "id",
34+
type: "INT",
35+
default: "",
36+
check: "",
37+
primary: true,
38+
unique: true,
39+
notNull: true,
40+
increment: true,
41+
comment: "",
42+
id: 0,
43+
},
44+
],
45+
comment: "",
46+
indices: [],
47+
color: "#175e7a",
48+
},
49+
],
50+
relationships: [
51+
{
52+
startTableId: 0,
53+
startFieldId: 0,
54+
endTableId: 1,
55+
endFieldId: 0,
56+
startX: 88,
57+
startY: 138,
58+
endX: 381,
59+
endY: 186,
60+
name: "table_0_id_fk",
61+
cardinality: "One to one",
62+
updateConstraint: "No action",
63+
deleteConstraint: "No action",
64+
mandatory: false,
65+
id: 0,
66+
},
67+
],
68+
notes: [
69+
{
70+
id: 0,
71+
x: 526,
72+
y: 240,
73+
title: "note_0",
74+
content: "hi",
75+
color: "#fcf7ac",
76+
height: 65,
77+
},
78+
],
79+
subjectAreas: [
80+
{
81+
id: 0,
82+
name: "area_0",
83+
x: 43,
84+
y: 28,
85+
width: 558,
86+
height: 206,
87+
color: "#175e7a",
2588
},
2689
],
27-
relationships: [],
28-
notes: [],
29-
subjectAreas: [],
3090
types: [],
3191
title: "Template 1",
3292
description: "Lorem ipsum",

‎src/pages/Templates.jsx

+83-32
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import { Link } from "react-router-dom";
44
import { Tabs, TabPane } from "@douyinfe/semi-ui";
55
import { useLiveQuery } from "dexie-react-hooks";
66
import { db } from "../data/db";
7+
import { calcPath } from "../utils";
78

8-
function cardCanvas(diagram) {
9+
function Thumbnail({ diagram }) {
10+
const zoom = 0.3;
911
return (
10-
<div className="w-full">
12+
<div className="w-full select-none">
1113
<svg className="bg-white w-full">
1214
<defs>
1315
<pattern
@@ -36,25 +38,35 @@ function cardCanvas(diagram) {
3638
fill="url(#pattern-circles)"
3739
></rect>
3840
<g id="diagram">
39-
{/* {diagram.areas.map((a) => (
40-
<Area
41-
key={a.id}
42-
areaData={a}
43-
onMouseDown={(e) => {}}
44-
setResize={null}
45-
initCoords={null}
46-
setInitCoords={null}
47-
zoom={null}
48-
></Area>
49-
))} */}
50-
{diagram.tables.map((table, i) => {
41+
{diagram.subjectAreas?.map((a) => (
42+
<foreignObject
43+
key={a.id}
44+
x={a.x * zoom}
45+
y={a.y * zoom}
46+
width={a.width > 0 ? a.width * zoom : 0}
47+
height={a.height > 0 ? a.height * zoom : 0}
48+
>
49+
<div
50+
className={`border border-slate-400 w-full h-full rounded-sm relative`}
51+
>
52+
<div
53+
className="opacity-40 w-fill h-full"
54+
style={{ backgroundColor: a.color }}
55+
/>
56+
</div>
57+
<div className="text-color absolute top-[4px] left-[6px] select-none text-[4px]">
58+
{a.name}
59+
</div>
60+
</foreignObject>
61+
))}
62+
{diagram.tables?.map((table, i) => {
5163
const height = table.fields.length * 36 + 50 + 7;
5264
return (
5365
<foreignObject
54-
x={table.x * 0.3}
55-
y={table.y * 0.3}
56-
width={200 * 0.3}
57-
height={height * 0.3}
66+
x={table.x * zoom}
67+
y={table.y * zoom}
68+
width={200 * zoom}
69+
height={height * zoom}
5870
key={i}
5971
>
6072
<div className="border-[1px] rounded-[3px] border-zinc-300 text-[4px] bg-zinc-100">
@@ -85,19 +97,58 @@ function cardCanvas(diagram) {
8597
</foreignObject>
8698
);
8799
})}
88-
{/*
89-
{diagram.relationships.map((e, i) => (
90-
<Relationship key={i} data={e} />
91-
))}
92-
{diagram.notes.map((n) => (
93-
<Note
94-
key={n.id}
95-
data={n}
96-
onMouseDown={(e) =>
97-
{}
98-
}
99-
></Note>
100-
))} */}
100+
{diagram.relationships?.map((e, i) => (
101+
<path
102+
d={calcPath(e.startX, e.endX, e.startY, e.endY, zoom)}
103+
fill="none"
104+
strokeWidth={1}
105+
stroke="gray"
106+
/>
107+
))}
108+
{diagram.notes?.map((n) => {
109+
const x = n.x * zoom;
110+
const y = n.y * zoom;
111+
const w = 180 * zoom;
112+
const r = 3 * zoom;
113+
const fold = 24 * zoom;
114+
const h = n.height * zoom;
115+
return (
116+
<g>
117+
<path
118+
d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${
119+
x + w
120+
} ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${
121+
x + w - r
122+
} ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${
123+
y + h - r
124+
} L${x} ${y + fold}`}
125+
fill={n.color}
126+
stroke="rgb(168 162 158)"
127+
strokeLinejoin="round"
128+
strokeWidth="0.5"
129+
/>
130+
<path
131+
d={`M${x} ${y + fold} L${x + fold - r} ${
132+
y + fold
133+
} A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${
134+
x + fold
135+
} ${y} L${x} ${y + fold} Z`}
136+
fill={n.color}
137+
stroke={"rgb(168 162 158)"}
138+
strokeLinejoin="round"
139+
strokeWidth="0.5"
140+
/>
141+
<foreignObject x={x} y={y} width={w} height={h}>
142+
<div className="text-gray-900 w-full h-full px-[4px] py-[2px] text-[4px]">
143+
<label htmlFor={`note_${n.id}`} className="ms-[6px]">
144+
{n.title}
145+
</label>
146+
<div className="text-[4px] mt-[2px]">{n.content}</div>
147+
</div>
148+
</foreignObject>
149+
</g>
150+
);
151+
})}
101152
</g>
102153
</svg>
103154
</div>
@@ -149,7 +200,7 @@ export default function Templates() {
149200
key={i}
150201
className="p-4 bg-gray-200 hover:translate-y-[-6px] transition-all duration-300"
151202
>
152-
{cardCanvas(t)}
203+
<Thumbnail diagram={t} />
153204
<div>{t.title}</div>
154205
<div>{t.description}</div>
155206
</div>

0 commit comments

Comments
 (0)