GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +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 ( return (
<> <>
<Loading message="Painting graph..." loading={loading} /> <Loading message="Painting graph..." loading={loading} />
<StyledEditorWrapper widget={isWidget}> <StyledEditorWrapper onContextMenu={e => e.preventDefault()} widget={isWidget}>
<TransformWrapper <TransformWrapper
maxScale={2} maxScale={2}
minScale={0.05} minScale={0.05}

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

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import styled from "styled-components"; 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 { useHotkeys } from "@mantine/hooks";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { AiOutlineFullscreen, AiOutlineMinus, AiOutlinePlus } from "react-icons/ai"; import { AiOutlineFullscreen, AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
@ -29,7 +29,7 @@ export const StyledTools = styled.div`
gap: 4px; gap: 4px;
justify-content: space-between; justify-content: space-between;
height: 36px; height: 36px;
padding: 4px 16px; padding: 4px 8px;
background: ${({ theme }) => theme.BACKGROUND_SECONDARY}; background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
color: ${({ theme }) => theme.SILVER}; color: ${({ theme }) => theme.SILVER};
box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY}; box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY};
@ -152,8 +152,22 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
return ( return (
<StyledTools> <StyledTools>
<Section> {isWidget && (
<StyledToolElement as="a" title="Herowand" href="https://herowand.com"> <StyledToolElement as="a" title="JSON Crack" href="https://herowand.com">
<Flex gap="xs" align="center" justify="center">
<StyledLogo
src="/assets/icon.png"
width="auto"
height="16"
alt="logo"
invert={lightmode}
/>
</Flex>
</StyledToolElement>
)}
{!isWidget && (
<Group spacing="xs" position="left" w="100%">
<StyledToolElement as="a" title="Herowand" href="https://jsoncrack.com">
<Flex gap="xs" align="center" justify="center"> <Flex gap="xs" align="center" justify="center">
<StyledLogo <StyledLogo
src="/assets/icon.png" src="/assets/icon.png"
@ -232,17 +246,20 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
<StyledToolElement title="Download as File" onClick={handleSave}> <StyledToolElement title="Download as File" onClick={handleSave}>
Download Download
</StyledToolElement> </StyledToolElement>
</Section> </Group>
<Section> )}
<Group spacing="xs" position="right" w="100%">
<StyledToolElement title="Zoom Out" onClick={zoomOut}> <StyledToolElement title="Zoom Out" onClick={zoomOut}>
<AiOutlineMinus size="18" /> <AiOutlineMinus size="18" />
</StyledToolElement> </StyledToolElement>
<StyledToolElement title="Zoom In" onClick={zoomIn}> <StyledToolElement title="Zoom In" onClick={zoomIn}>
<AiOutlinePlus size="18" /> <AiOutlinePlus size="18" />
</StyledToolElement> </StyledToolElement>
{!isWidget && (
<StyledToolElement title="Save as Image" onClick={() => setVisible("download")(true)}> <StyledToolElement title="Save as Image" onClick={() => setVisible("download")(true)}>
<FiDownload size="18" /> <FiDownload size="18" />
</StyledToolElement> </StyledToolElement>
)}
<StyledToolElement title="Center Canvas" onClick={centerView}> <StyledToolElement title="Center Canvas" onClick={centerView}>
<MdCenterFocusWeak size="18" /> <MdCenterFocusWeak size="18" />
</StyledToolElement> </StyledToolElement>
@ -257,7 +274,7 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
> >
<VscSettingsGear size="18" /> <VscSettingsGear size="18" />
</StyledToolElement> </StyledToolElement>
</Section> </Group>
</StyledTools> </StyledTools>
); );
}; };