Skip to content

Commit 001bacb

Browse files
AykutSaracAykutSarac
authored
feat: update diagram layout (#490)
* feat: update diagram architecture * chore: remove console.log * feat: editor layout update * feat: update external mode
1 parent 637edb8 commit 001bacb

35 files changed

+679
-1062
lines changed

‎.env

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
NEXT_PUBLIC_NODE_LIMIT=600
1+
NEXT_PUBLIC_NODE_LIMIT=800
22
NEXT_TELEMETRY_DISABLED=1

‎.env.development

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
NEXT_PUBLIC_NODE_LIMIT=1000
1+
NEXT_PUBLIC_DISABLE_EXTERNAL_MODE=false

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,10 @@ docker compose up
127127
# Go to http://localhost:8888
128128
```
129129

130+
## Configuration
131+
132+
The supported node limit can be changed by editing the `NEXT_PUBLIC_NODE_LIMIT` value in the `.env` file at the project root.
133+
130134
<!-- LICENSE -->
131135

132136
## License

‎public/assets/editor.webp

3.55 KB
Binary file not shown.

‎src/data/example.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"fruits": [
3+
{
4+
"name": "Apple",
5+
"color": "#FF0000",
6+
"details": {
7+
"type": "Pome",
8+
"season": "Fall"
9+
},
10+
"nutrients": {
11+
"calories": 52,
12+
"fiber": "2.4g",
13+
"vitaminC": "4.6mg"
14+
}
15+
},
16+
{
17+
"name": "Banana",
18+
"color": "#FFFF00",
19+
"details": {
20+
"type": "Berry",
21+
"season": "Year-round"
22+
},
23+
"nutrients": {
24+
"calories": 89,
25+
"fiber": "2.6g",
26+
"potassium": "358mg"
27+
}
28+
},
29+
{
30+
"name": "Orange",
31+
"color": "#FFA500",
32+
"details": {
33+
"type": "Citrus",
34+
"season": "Winter"
35+
},
36+
"nutrients": {
37+
"calories": 47,
38+
"fiber": "2.4g",
39+
"vitaminC": "53.2mg"
40+
}
41+
}
42+
]
43+
}

‎src/features/editor/BottomBar.tsx

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React from "react";
2-
import Link from "next/link";
3-
import { Flex, Popover, Text } from "@mantine/core";
2+
import { Flex, Menu, Popover, Text } from "@mantine/core";
43
import styled from "styled-components";
54
import { event as gaEvent } from "nextjs-google-analytics";
65
import { BiSolidDockLeft } from "react-icons/bi";
7-
import {
8-
VscCheck,
9-
VscError,
10-
VscFeedback,
11-
VscRunAll,
12-
VscSync,
13-
VscSyncIgnored,
14-
} from "react-icons/vsc";
6+
import { FaCrown } from "react-icons/fa6";
7+
import { IoMdCheckmark } from "react-icons/io";
8+
import { MdArrowUpward } from "react-icons/md";
9+
import { VscCheck, VscError, VscRunAll, VscSync, VscSyncIgnored } from "react-icons/vsc";
10+
import { formats } from "../../enums/file.enum";
1511
import useConfig from "../../store/useConfig";
1612
import useFile from "../../store/useFile";
1713
import useGraph from "./views/GraphView/stores/useGraph";
@@ -85,9 +81,10 @@ export const BottomBar = () => {
8581
const liveTransformEnabled = useConfig(state => state.liveTransformEnabled);
8682
const error = useFile(state => state.error);
8783
const setContents = useFile(state => state.setContents);
88-
const nodeCount = useGraph(state => state.nodes.length);
8984
const toggleFullscreen = useGraph(state => state.toggleFullscreen);
9085
const fullscreen = useGraph(state => state.fullscreen);
86+
const setFormat = useFile(state => state.setFormat);
87+
const currentFormat = useFile(state => state.format);
9188

9289
const toggleEditor = () => {
9390
toggleFullscreen(!fullscreen);
@@ -144,17 +141,40 @@ export const BottomBar = () => {
144141
</StyledLeft>
145142

146143
<StyledRight>
147-
<StyledBottomBarItem>Nodes: {nodeCount}</StyledBottomBarItem>
148-
<Link
149-
href="https://github.com/AykutSarac/jsoncrack.com/discussions"
150-
target="_blank"
151-
rel="noopener"
152-
>
153-
<StyledBottomBarItem>
154-
<VscFeedback />
155-
Feedback
156-
</StyledBottomBarItem>
157-
</Link>
144+
<Menu offset={8}>
145+
<Menu.Target>
146+
<StyledBottomBarItem>
147+
<Flex align="center" gap={2}>
148+
<MdArrowUpward />
149+
<Text size="xs">{currentFormat?.toUpperCase()}</Text>
150+
</Flex>
151+
</StyledBottomBarItem>
152+
</Menu.Target>
153+
<Menu.Dropdown>
154+
{formats.map(format => (
155+
<Menu.Item
156+
key={format.value}
157+
fz={12}
158+
onClick={() => setFormat(format.value)}
159+
rightSection={currentFormat === format.value && <IoMdCheckmark />}
160+
>
161+
{format.label}
162+
</Menu.Item>
163+
))}
164+
<Menu.Item
165+
fz={12}
166+
onClick={() =>
167+
window.open(
168+
"https://todiagram.com/blog/how-to-create-custom-diagrams-in-todiagram?utm_source=jsoncrack&utm_medium=bottom-bar&utm_campaign=custom-diagram",
169+
"_blank"
170+
)
171+
}
172+
rightSection={<FaCrown color="gray" />}
173+
>
174+
Custom
175+
</Menu.Item>
176+
</Menu.Dropdown>
177+
</Menu>
158178
</StyledRight>
159179
</StyledBottomBar>
160180
);

‎src/features/editor/ExternalMode.tsx

Lines changed: 139 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,154 @@
11
import React from "react";
2-
import { Anchor, Button, Group, Modal, Text } from "@mantine/core";
3-
import styled from "styled-components";
4-
import { VscCode } from "react-icons/vsc";
5-
import { VscArrowRight } from "react-icons/vsc";
6-
7-
const StyledAlert = styled.div`
8-
position: fixed;
9-
bottom: 36px;
10-
right: 10px;
11-
background: rgba(255, 255, 255, 0.2);
12-
border-radius: 16px;
13-
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
14-
backdrop-filter: blur(5px);
15-
-webkit-backdrop-filter: blur(5px);
16-
border: 1px solid rgba(255, 255, 255, 0.3);
17-
font-weight: 500;
18-
overflow: hidden;
19-
`;
20-
21-
const StyledTitle = styled.div`
22-
display: flex;
23-
align-items: center;
24-
color: ${({ theme }) => theme.TEXT_POSITIVE};
25-
flex: 1;
26-
font-weight: 700;
27-
28-
&::after {
29-
background: ${({ theme }) => theme.TEXT_POSITIVE};
30-
height: 1px;
31-
32-
content: "";
33-
-webkit-box-flex: 1;
34-
-ms-flex: 1 1 auto;
35-
flex: 1 1 auto;
36-
margin-left: 4px;
37-
opacity: 0.6;
38-
}
39-
`;
2+
import { Accordion, Anchor, Code, Flex, FocusTrap, Group, Modal, Text } from "@mantine/core";
403

414
const ExternalMode = () => {
425
const [isExternal, setExternal] = React.useState(false);
43-
const [isOpen, setOpen] = React.useState(false);
446

457
React.useEffect(() => {
46-
if (typeof window !== "undefined") {
47-
if (window.location.pathname.includes("widget")) return setExternal(false);
48-
if (window.location.host !== "jsoncrack.com") return setExternal(true);
49-
return setExternal(false);
8+
if (process.env.NEXT_PUBLIC_DISABLE_EXTERNAL_MODE === "false") {
9+
if (typeof window !== "undefined") {
10+
if (window.location.pathname.includes("widget")) return setExternal(false);
11+
if (window.location.host !== "jsoncrack.com") return setExternal(true);
12+
return setExternal(false);
13+
}
5014
}
5115
}, []);
5216

53-
const closeModal = () => setOpen(false);
54-
5517
if (!isExternal) return null;
5618

5719
return (
58-
<StyledAlert>
59-
<Button
60-
onClick={() => setOpen(true)}
61-
color="red"
62-
variant="subtle"
63-
leftSection={<VscCode size="1.2rem" />}
64-
>
65-
External Host
66-
</Button>
67-
<Modal title="External Host of JSON Crack" opened={isOpen} onClose={closeModal} centered>
68-
<Group>
69-
<StyledTitle>Dear valued user,</StyledTitle>
70-
<Text>
71-
We would like to inform you that you are presently utilizing the external release of the{" "}
72-
<Anchor href="https://jsoncrack.com">JSON Crack</Anchor>. Your continued support is
73-
crucial in sustaining and improving our services.
74-
<br />
75-
<br />
76-
We kindly encourage you to consider upgrading to the premium version, which not only
77-
enhances your experience but also contributes to the ongoing development of JSON Crack.
78-
</Text>
79-
</Group>
80-
<Group pt="lg" justify="right">
81-
<Button
82-
onClick={closeModal}
83-
component="a"
84-
href="https://jsoncrack.com"
85-
target="_blank"
86-
variant="outline"
87-
color="red"
88-
rightSection={<VscArrowRight />}
89-
>
90-
JSON Crack
91-
</Button>
92-
</Group>
93-
</Modal>
94-
</StyledAlert>
20+
<Modal
21+
title="Thanks for using JSON Crack"
22+
opened={isExternal}
23+
onClose={() => setExternal(false)}
24+
centered
25+
size="lg"
26+
>
27+
<FocusTrap.InitialFocus />
28+
<Group>
29+
<Accordion variant="separated" w="100%">
30+
<Accordion.Item value="1">
31+
<Accordion.Control>How can I change the file size limit?</Accordion.Control>
32+
<Accordion.Panel>
33+
The main reason for the file size limit is to prevent performance issues, not to push
34+
you to upgrade. You can increase the limit by setting{" "}
35+
<Code>NEXT_PUBLIC_NODE_LIMIT</Code> in your <Code>.env</Code> file.
36+
<br />
37+
<br />
38+
If you&apos;d like to work with even larger files and unlock additional features, you
39+
can upgrade to the{" "}
40+
<Anchor
41+
href="https://todiagram.com?utm_source=jsoncrack&utm_medium=external-mode"
42+
rel="noopener"
43+
target="_blank"
44+
>
45+
Pro
46+
</Anchor>{" "}
47+
version.
48+
</Accordion.Panel>
49+
</Accordion.Item>
50+
<Accordion.Item value="2">
51+
<Accordion.Control>How can I stop this dialog from appearing?</Accordion.Control>
52+
<Accordion.Panel>
53+
You can disable this dialog by setting <Code>NEXT_PUBLIC_DISABLE_EXTERNAL_MODE</Code>{" "}
54+
to <Code>true</Code> in your <Code>.env.development</Code> file.
55+
<br />
56+
<br />
57+
If you want to re-enable it, simply remove or set the value to <Code>false</Code>.
58+
</Accordion.Panel>
59+
</Accordion.Item>
60+
<Accordion.Item value="3">
61+
<Accordion.Control>What are the license terms?</Accordion.Control>
62+
<Accordion.Panel>
63+
Read the full license terms on{" "}
64+
<Anchor
65+
href="https://github.com/AykutSarac/jsoncrack.com/blob/main/LICENSE.md"
66+
rel="noopener"
67+
target="_blank"
68+
>
69+
GitHub
70+
</Anchor>
71+
.
72+
</Accordion.Panel>
73+
</Accordion.Item>
74+
<Accordion.Item value="4">
75+
<Accordion.Control>How do I report a bug or request a feature?</Accordion.Control>
76+
<Accordion.Panel>
77+
You can report bugs or request features by opening an issue on our{" "}
78+
<Anchor
79+
href="https://github.com/AykutSarac/jsoncrack.com/issues"
80+
rel="noopener"
81+
target="_blank"
82+
>
83+
GitHub Issues page
84+
</Anchor>
85+
.
86+
<br />
87+
<br />
88+
Please provide as much detail as possible to help us address your feedback quickly.
89+
</Accordion.Panel>
90+
</Accordion.Item>
91+
<Accordion.Item value="5">
92+
<Accordion.Control>How do I contribute to the project?</Accordion.Control>
93+
<Accordion.Panel>
94+
We welcome contributions! Visit our{" "}
95+
<Anchor
96+
href="https://github.com/AykutSarac/jsoncrack.com"
97+
rel="noopener"
98+
target="_blank"
99+
>
100+
GitHub repository
101+
</Anchor>{" "}
102+
and read the{" "}
103+
<Anchor
104+
href="https://github.com/AykutSarac/jsoncrack.com/blob/main/CONTRIBUTING.md"
105+
rel="noopener"
106+
target="_blank"
107+
>
108+
contributing guide
109+
</Anchor>{" "}
110+
to get started.
111+
</Accordion.Panel>
112+
</Accordion.Item>
113+
<Accordion.Item value="6">
114+
<Accordion.Control>
115+
What is the difference between JSON Crack and ToDiagram?
116+
</Accordion.Control>
117+
<Accordion.Panel>
118+
JSON Crack is a free and open-source tool for visualizing JSON data. ToDiagram is the
119+
professional version that offers advanced features, higher limits, and the ability to
120+
edit data directly from diagrams. You can learn more or upgrade at{" "}
121+
<Anchor
122+
href="https://todiagram.com?utm_source=jsoncrack&utm_medium=external-mode"
123+
rel="noopener"
124+
target="_blank"
125+
>
126+
todiagram.com
127+
</Anchor>
128+
.
129+
</Accordion.Panel>
130+
</Accordion.Item>
131+
</Accordion>
132+
</Group>
133+
<Flex justify="center" align="center" gap="sm" mt="md">
134+
<Anchor
135+
href="https://github.com/AykutSarac/jsoncrack.com"
136+
rel="noopener"
137+
target="_blank"
138+
fz="sm"
139+
>
140+
GitHub
141+
</Anchor>
142+
<Text c="dimmed">•</Text>
143+
<Anchor href="https://todiagram.com" rel="noopener" target="_blank" fz="sm">
144+
ToDiagram
145+
</Anchor>
146+
<Text c="dimmed">•</Text>
147+
<Anchor href="https://x.com/aykutsarach" rel="noopener" target="_blank" fz="sm">
148+
Aykut Saraç (@aykutsarach)
149+
</Anchor>
150+
</Flex>
151+
</Modal>
95152
);
96153
};
97154

0 commit comments

Comments
 (0)