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

feat: colorize text nodes

Browse Source
This commit is contained in:
AykutSarac 2023-09-09 22:26:16 +03:00
parent 7940d45510
commit b8ae69f79b
No known key found for this signature in database
3 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Graph/CustomNode/ObjectNode.tsx
View File

@ -13,17 +13,14 @@ type RowProps = {
};
const Row = ({ val, x, y, index }: RowProps) => {
const key = JSON.stringify(val);
const rowKey = JSON.stringify(val[0]).replaceAll('"', "");
const rowValue = JSON.stringify(val[1]);
return (
<Styled.StyledRow
data-key={JSON.stringify(val)}
data-x={x}
data-y={y + index * 17.8}
$type={JSON.stringify(val[1])}
>
<Styled.StyledKey $type="object">
{JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
</Styled.StyledKey>
<TextRenderer>{JSON.stringify(val[1])}</TextRenderer>
<Styled.StyledRow $value={rowValue} data-key={key} data-x={x} data-y={y + index * 17.8}>
<Styled.StyledKey $type="object">{rowKey}: </Styled.StyledKey>
<TextRenderer>{rowValue}</TextRenderer>
</Styled.StyledRow>
);
};

5
src/components/Graph/CustomNode/TextNode.tsx
View File

@ -59,6 +59,7 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) =>
const collapseNodes = useGraph(state => state.collapseNodes);
const isExpanded = useGraph(state => state.collapsedParents.includes(id));
const isImage = imagePreview && isContentImage(text as string);
const value = JSON.stringify(text).replaceAll('"', "");
const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
@ -81,8 +82,8 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) =>
data-key={JSON.stringify(text)}
$hasCollapse={isParent && hideCollapse}
>
<Styled.StyledKey $parent={isParent} $type={type}>
<TextRenderer>{JSON.stringify(text).replaceAll('"', "")}</TextRenderer>
<Styled.StyledKey $value={value} $parent={isParent} $type={type}>
<TextRenderer>{value}</TextRenderer>
</Styled.StyledKey>
{isParent && childrenCount > 0 && showChildrenCount && (
<Styled.StyledChildrenCount>({childrenCount})</Styled.StyledChildrenCount>

45
src/components/Graph/CustomNode/styles.tsx
View File

@ -1,23 +1,29 @@
import styled, { DefaultTheme } from "styled-components";
import { NodeType } from "jsonc-parser";
import { LinkItUrl } from "react-linkify-it";
import { firaMono } from "src/constants/fonts";
function getTypeColor(value: string, theme: DefaultTheme) {
if (!Number.isNaN(+value)) return theme.NODE_COLORS.INTEGER;
if (value === "true") return theme.NODE_COLORS.BOOL.TRUE;
if (value === "false") return theme.NODE_COLORS.BOOL.FALSE;
if (value === "null") return theme.NODE_COLORS.NULL;
return theme.NODE_COLORS.NODE_VALUE;
}
type TextColorFn = {
theme: DefaultTheme;
$type?: string;
$value?: string;
$parent?: boolean;
};
function getKeyColor(theme: DefaultTheme, parent: boolean, type: NodeType) {
if (parent) {
if (type === "array") return theme.NODE_COLORS.PARENT_ARR;
return theme.NODE_COLORS.PARENT_OBJ;
}
if (type === "object") return theme.NODE_COLORS.NODE_KEY;
return theme.NODE_COLORS.TEXT;
function getTextColor({ $value, $type, $parent, theme }: TextColorFn) {
// per type
if ($parent && $type === "array") return theme.NODE_COLORS.PARENT_ARR;
if ($parent && $type === "object") return theme.NODE_COLORS.PARENT_OBJ;
if ($type === "object") return theme.NODE_COLORS.NODE_KEY;
if ($type === "array") return theme.NODE_COLORS.NODE_VALUE;
// per value
if ($value && !Number.isNaN(+$value)) return theme.NODE_COLORS.INTEGER;
if ($value === "true") return theme.NODE_COLORS.BOOL.TRUE;
if ($value === "false") return theme.NODE_COLORS.BOOL.FALSE;
if ($value === "null") return theme.NODE_COLORS.NULL;
// default
return theme.NODE_COLORS.NODE_VALUE;
}
export const StyledLinkItUrl = styled(LinkItUrl)`
@ -57,10 +63,11 @@ export const StyledForeignObject = styled.foreignObject<{ $isObject?: boolean }>
}
`;
export const StyledKey = styled.span<{ $parent?: boolean; $type?: NodeType }>`
export const StyledKey = styled.span<{ $parent?: boolean; $type: string; $value?: string }>`
display: inline;
flex: 1;
color: ${({ theme, $type = "null", $parent = false }) => getKeyColor(theme, $parent, $type)};
color: ${({ theme, $type, $parent = false, $value = "" }) =>
getTextColor({ $parent, $type, $value, theme })};
font-size: ${({ $parent }) => $parent && "14px"};
overflow: hidden;
text-overflow: ellipsis;
@ -68,9 +75,9 @@ export const StyledKey = styled.span<{ $parent?: boolean; $type?: NodeType }>`
white-space: nowrap;
`;
export const StyledRow = styled.span<{ $type: string }>`
export const StyledRow = styled.span<{ $value: string }>`
padding: 0 10px;
color: ${({ theme, $type }) => getTypeColor($type, theme)};
color: ${({ theme, $value }) => getTextColor({ $value, theme })};
display: block;
overflow: hidden;
text-overflow: ellipsis;