Skip to content

Commit 4f949a5

Browse files
AykutSaracAykutSarac
committed
refactor: remove image handling logic and associated styles from TextNode and calculateNodeSize
1 parent 1d6a958 commit 4f949a5

5 files changed

Lines changed: 19 additions & 97 deletions

File tree

‎apps/www/src/features/editor/views/GraphView/CustomNode/TextNode.tsx‎

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import styled from "styled-components";
33
import type { CustomNodeProps } from ".";
4-
import { isContentImage } from "../lib/utils/calculateNodeSize";
54
import { TextRenderer } from "./TextRenderer";
65
import * as Styled from "./styles";
76

@@ -15,19 +14,8 @@ const StyledTextNodeWrapper = styled.span<{ $isParent: boolean }>`
1514
padding: 0 10px;
1615
`;
1716

18-
const StyledImageWrapper = styled.div`
19-
padding: 5px;
20-
`;
21-
22-
const StyledImage = styled.img`
23-
border-radius: 2px;
24-
object-fit: contain;
25-
background: ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
26-
`;
27-
2817
const Node = ({ node, x, y }: CustomNodeProps) => {
2918
const { text, width, height } = node;
30-
const isImage = isContentImage(JSON.stringify(text[0].value));
3119
const value = text[0].value;
3220

3321
return (
@@ -38,22 +26,16 @@ const Node = ({ node, x, y }: CustomNodeProps) => {
3826
x={0}
3927
y={0}
4028
>
41-
{isImage ? (
42-
<StyledImageWrapper>
43-
<StyledImage src={JSON.stringify(text[0].value)} width="70" height="70" loading="lazy" />
44-
</StyledImageWrapper>
45-
) : (
46-
<StyledTextNodeWrapper
47-
data-x={x}
48-
data-y={y}
49-
data-key={JSON.stringify(text)}
50-
$isParent={false}
51-
>
52-
<Styled.StyledKey $value={value} $type={typeof text[0].value}>
53-
<TextRenderer>{value}</TextRenderer>
54-
</Styled.StyledKey>
55-
</StyledTextNodeWrapper>
56-
)}
29+
<StyledTextNodeWrapper
30+
data-x={x}
31+
data-y={y}
32+
data-key={JSON.stringify(text)}
33+
$isParent={false}
34+
>
35+
<Styled.StyledKey $value={value} $type={typeof text[0].value}>
36+
<TextRenderer>{value}</TextRenderer>
37+
</Styled.StyledKey>
38+
</StyledTextNodeWrapper>
5739
</Styled.StyledForeignObject>
5840
);
5941
};

‎apps/www/src/features/editor/views/GraphView/lib/utils/calculateNodeSize.ts‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,6 @@ import { NODE_DIMENSIONS } from "../../../../../../constants/graph";
33
type Text = number | string | [string, string][];
44
type Size = { width: number; height: number };
55

6-
export const isContentImage = (value: Text) => {
7-
if (typeof value !== "string") return false;
8-
9-
const isImageURL = /(https?:\/\/.*\.(?:png|jpg|gif|svg))/i.test(value);
10-
const isBase64 = value.startsWith("data:image/") && value.includes("base64");
11-
12-
return isImageURL || isBase64;
13-
};
14-
156
const calculateLines = (text: Text): string => {
167
if (Array.isArray(text)) {
178
return text.map(([k, v]) => `${k}: ${JSON.stringify(v).slice(0, 80)}`).join("\n");
@@ -50,8 +41,6 @@ const sizeCache = new Map<Text, Size>();
5041
setInterval(() => sizeCache.clear(), 120_000);
5142

5243
export const calculateNodeSize = (text: Text, isParent = false) => {
53-
const isImage = isContentImage(text);
54-
5544
const cacheKey = [text, isParent].toString();
5645

5746
// check cache if data already exists
@@ -63,11 +52,6 @@ export const calculateNodeSize = (text: Text, isParent = false) => {
6352
const lines = calculateLines(text);
6453
const sizes = calculateWidthAndHeight(lines, typeof text === "string");
6554

66-
if (isImage) {
67-
sizes.width = 80;
68-
sizes.height = 80;
69-
}
70-
7155
if (isParent) sizes.width += 80;
7256
if (sizes.width > 700) sizes.width = 700;
7357

‎packages/jsoncrack-react/src/components/Node.module.css‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,6 @@
4747
padding: 0 10px;
4848
}
4949

50-
.imageWrapper {
51-
padding: 5px;
52-
}
53-
54-
.image {
55-
border-radius: 2px;
56-
object-fit: contain;
57-
}
58-
5950
.foreignObject:global(.searched) {
6051
background: rgba(27, 255, 0, 0.1);
6152
border: 1px solid var(--text-positive);

‎packages/jsoncrack-react/src/components/TextNode.tsx‎

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react";
22
import type { NodeData } from "../types";
3-
import { isContentImage } from "../utils/calculateNodeSize";
43
import styles from "./Node.module.css";
54
import { TextRenderer } from "./TextRenderer";
65
import { getTextColor } from "./nodeStyles";
@@ -18,8 +17,6 @@ const TextNodeBase = ({ node, x, y }: TextNodeProps) => {
1817
if (!firstRow) return null;
1918

2019
const value = firstRow.value;
21-
const normalizedValue = typeof value === "string" ? value : `${value}`;
22-
const isImage = isContentImage(normalizedValue);
2320

2421
return (
2522
<foreignObject
@@ -30,33 +27,16 @@ const TextNodeBase = ({ node, x, y }: TextNodeProps) => {
3027
x={0}
3128
y={0}
3229
>
33-
{isImage ? (
34-
<div className={styles.imageWrapper}>
35-
<img
36-
className={styles.image}
37-
style={{ background: "var(--background-modifier-accent)" }}
38-
src={normalizedValue}
39-
alt=""
40-
width="70"
41-
height="70"
42-
loading="lazy"
43-
/>
44-
</div>
45-
) : (
46-
<span
47-
className={styles.textNodeWrapper}
48-
data-x={x}
49-
data-y={y}
50-
data-key={JSON.stringify(text)}
51-
>
52-
<span
53-
className={styles.key}
54-
style={{ color: getTextColor({ value, type: typeof value }) }}
55-
>
56-
<TextRenderer>{value}</TextRenderer>
57-
</span>
30+
<span
31+
className={styles.textNodeWrapper}
32+
data-x={x}
33+
data-y={y}
34+
data-key={JSON.stringify(text)}
35+
>
36+
<span className={styles.key} style={{ color: getTextColor({ value, type: typeof value }) }}>
37+
<TextRenderer>{value}</TextRenderer>
5838
</span>
59-
)}
39+
</span>
6040
</foreignObject>
6141
);
6242
};

‎packages/jsoncrack-react/src/utils/calculateNodeSize.ts‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,6 @@ const CACHE_TTL_MS = 120_000;
1010
const sizeCache = new Map<string, Size>();
1111
let lastCacheClearAt = Date.now();
1212

13-
export const isContentImage = (value: Text) => {
14-
if (typeof value !== "string") return false;
15-
16-
const isImageURL = /(https?:\/\/.*\.(?:png|jpg|jpeg|gif|svg|webp))/i.test(value);
17-
const isBase64 = value.startsWith("data:image/") && value.includes("base64");
18-
19-
return isImageURL || isBase64;
20-
};
21-
2213
const calculateLines = (text: Text): string => {
2314
if (Array.isArray(text)) {
2415
return text.map(([k, v]) => `${k}: ${JSON.stringify(v).slice(0, 80)}`).join("\n");
@@ -76,7 +67,6 @@ const maybeClearCache = () => {
7667
export const calculateNodeSize = (text: Text, isParent = false) => {
7768
maybeClearCache();
7869

79-
const isImage = isContentImage(text);
8070
const cacheKey = `${JSON.stringify(text)}-${isParent}`;
8171

8272
const cached = sizeCache.get(cacheKey);
@@ -85,11 +75,6 @@ export const calculateNodeSize = (text: Text, isParent = false) => {
8575
const lines = calculateLines(text);
8676
const sizes = calculateWidthAndHeight(lines, typeof text === "string");
8777

88-
if (isImage) {
89-
sizes.width = 80;
90-
sizes.height = 80;
91-
}
92-
9378
if (isParent) sizes.width += 80;
9479
if (sizes.width > 700) sizes.width = 700;
9580

0 commit comments

Comments
 (0)