GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-12 19:02:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix widget view

Browse Source
This commit is contained in:
AykutSarac 2023-04-29 19:05:40 +03:00
parent 701267a5f1
commit 3acd81b63c
No known key found for this signature in database
2 changed files with 96 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Graph/index.tsx
View File

@ -134,7 +134,7 @@ export const Graph = ({ isWidget = false }: GraphProps) => {
return (
<>
<Loading message="Painting graph..." loading={loading} />
<StyledEditorWrapper widget={isWidget}>
<StyledEditorWrapper onContextMenu={e => e.preventDefault()} widget={isWidget}>
<TransformWrapper
maxScale={2}
minScale={0.05}

173
src/containers/Editor/LiveEditor/Tools.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
import { Flex, Menu, Text } from "@mantine/core";
import { Flex, Group, Menu, Text } from "@mantine/core";
import { useHotkeys } from "@mantine/hooks";
import toast from "react-hot-toast";
import { AiOutlineFullscreen, AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
@ -29,7 +29,7 @@ export const StyledTools = styled.div`
gap: 4px;
justify-content: space-between;
height: 36px;
padding: 4px 16px;
padding: 4px 8px;
background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
color: ${({ theme }) => theme.SILVER};
box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY};
@ -152,8 +152,8 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
return (
<StyledTools>
<Section>
<StyledToolElement as="a" title="Herowand" href="https://herowand.com">
{isWidget && (
<StyledToolElement as="a" title="JSON Crack" href="https://herowand.com">
<Flex gap="xs" align="center" justify="center">
<StyledLogo
src="/assets/icon.png"
@ -164,85 +164,102 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
/>
</Flex>
</StyledToolElement>
<StyledToolElement title="Import File" onClick={() => setVisible("import")(true)}>
Import
</StyledToolElement>
<Menu shadow="md" closeOnItemClick={false}>
<Menu.Target>
<StyledToolElement>
<Flex align="center" gap={3}>
View <CgChevronDown />
</Flex>
</StyledToolElement>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
fz={12}
onClick={toggleEditor}
icon={fullscreen ? <VscLayoutSidebarLeft /> : <VscLayoutSidebarLeftOff />}
rightSection={
<Text ml="md" fz={10} color="dimmed">
{CoreKey} Shift E
</Text>
}
>
{fullscreen ? "Show" : "Hide"} Editor
</Menu.Item>
<Menu.Item
fz={12}
onClick={toggleDirection}
icon={<StyledFlowIcon rotate={rotateLayout(direction)} />}
rightSection={
<Text ml="md" fz={10} color="dimmed">
{CoreKey} Shift D
</Text>
}
>
Rotate Layout
</Menu.Item>
<Menu.Item
fz={12}
onClick={toggleFoldNodes}
icon={foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
rightSection={
<Text ml="md" fz={10} color="dimmed">
{CoreKey} Shift F
</Text>
}
>
{foldNodes ? "Unfold" : "Fold"} Nodes
</Menu.Item>
<Menu.Item
fz={12}
onClick={toggleExpandCollapseGraph}
icon={graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
rightSection={
<Text ml="md" fz={10} color="dimmed">
{CoreKey} Shift C
</Text>
}
>
{graphCollapsed ? "Expand" : "Collapse"} Nodes
</Menu.Item>
</Menu.Dropdown>
</Menu>
<StyledToolElement title="Cloud" onClick={() => setVisible("cloud")(true)}>
Cloud
</StyledToolElement>
<StyledToolElement title="Download as File" onClick={handleSave}>
Download
</StyledToolElement>
</Section>
<Section>
)}
{!isWidget && (
<Group spacing="xs" position="left" w="100%">
<StyledToolElement as="a" title="Herowand" href="https://jsoncrack.com">
<Flex gap="xs" align="center" justify="center">
<StyledLogo
src="/assets/icon.png"
width="auto"
height="16"
alt="logo"
invert={lightmode}
/>
</Flex>
</StyledToolElement>
<StyledToolElement title="Import File" onClick={() => setVisible("import")(true)}>
Import
</StyledToolElement>
<Menu shadow="md" closeOnItemClick={false}>
<Menu.Target>
<StyledToolElement>
<Flex align="center" gap={3}>
View <CgChevronDown />
</Flex>
</StyledToolElement>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
fz={12}
onClick={toggleEditor}
icon={fullscreen ? <VscLayoutSidebarLeft /> : <VscLayoutSidebarLeftOff />}
rightSection={
<Text ml="md" fz={10} color="dimmed">
{CoreKey} Shift E
</Text>
}
>
{fullscreen ? "Show" : "Hide"} Editor
</Menu.Item>
<Menu.Item
fz={12}
onClick={toggleDirection}
icon={<StyledFlowIcon rotate={rotateLayout(direction)} />}
rightSection={
<Text ml="md" fz={10} color="dimmed">
{CoreKey} Shift D
</Text>
}
>
Rotate Layout
</Menu.Item>
<Menu.Item
fz={12}
onClick={toggleFoldNodes}
icon={foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
rightSection={
<Text ml="md" fz={10} color="dimmed">
{CoreKey} Shift F
</Text>
}
>
{foldNodes ? "Unfold" : "Fold"} Nodes
</Menu.Item>
<Menu.Item
fz={12}
onClick={toggleExpandCollapseGraph}
icon={graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
rightSection={
<Text ml="md" fz={10} color="dimmed">
{CoreKey} Shift C
</Text>
}
>
{graphCollapsed ? "Expand" : "Collapse"} Nodes
</Menu.Item>
</Menu.Dropdown>
</Menu>
<StyledToolElement title="Cloud" onClick={() => setVisible("cloud")(true)}>
Cloud
</StyledToolElement>
<StyledToolElement title="Download as File" onClick={handleSave}>
Download
</StyledToolElement>
</Group>
)}
<Group spacing="xs" position="right" w="100%">
<StyledToolElement title="Zoom Out" onClick={zoomOut}>
<AiOutlineMinus size="18" />
</StyledToolElement>
<StyledToolElement title="Zoom In" onClick={zoomIn}>
<AiOutlinePlus size="18" />
</StyledToolElement>
<StyledToolElement title="Save as Image" onClick={() => setVisible("download")(true)}>
<FiDownload size="18" />
</StyledToolElement>
{!isWidget && (
<StyledToolElement title="Save as Image" onClick={() => setVisible("download")(true)}>
<FiDownload size="18" />
</StyledToolElement>
)}
<StyledToolElement title="Center Canvas" onClick={centerView}>
<MdCenterFocusWeak size="18" />
</StyledToolElement>
@ -257,7 +274,7 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
>
<VscSettingsGear size="18" />
</StyledToolElement>
</Section>
</Group>
</StyledTools>
);
};