From 34a982cbf38793af535f495ed3b05981e629fc49 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Thu, 23 Jan 2025 11:52:31 +0300 Subject: [PATCH] update defaultJson --- .../views/GraphView/CustomNode/TextNode.tsx | 10 +++- .../GraphView/lib/utils/calculateNodeSize.ts | 2 +- src/store/useFile.ts | 57 +++++++++++-------- 3 files changed, 42 insertions(+), 27 deletions(-) diff --git a/src/features/editor/views/GraphView/CustomNode/TextNode.tsx b/src/features/editor/views/GraphView/CustomNode/TextNode.tsx index dc23dc6..48d0972 100644 --- a/src/features/editor/views/GraphView/CustomNode/TextNode.tsx +++ b/src/features/editor/views/GraphView/CustomNode/TextNode.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import styled from "styled-components"; import { MdLink, MdLinkOff } from "react-icons/md"; import type { CustomNodeProps } from "src/features/editor/views/GraphView/CustomNode"; @@ -72,6 +72,12 @@ const Node = ({ node, x, y, hasCollapse = false }: CustomNodeProps) => { validateHiddenNodes(); }; + const childrenCountText = useMemo(() => { + if (type === "object") return `{${childrenCount}}`; + if (type === "array") return `[${childrenCount}]`; + return ""; + }, [childrenCount, type]); + return ( {isImage ? ( @@ -90,7 +96,7 @@ const Node = ({ node, x, y, hasCollapse = false }: CustomNodeProps) => { {value} {isParent && childrenCount > 0 && childrenCountVisible && ( - [{childrenCount}] + {childrenCountText} )} {isParent && hasCollapse && collapseButtonVisible && ( diff --git a/src/features/editor/views/GraphView/lib/utils/calculateNodeSize.ts b/src/features/editor/views/GraphView/lib/utils/calculateNodeSize.ts index 0a516ea..b0dd876 100644 --- a/src/features/editor/views/GraphView/lib/utils/calculateNodeSize.ts +++ b/src/features/editor/views/GraphView/lib/utils/calculateNodeSize.ts @@ -7,7 +7,7 @@ type Size = { width: number; height: number }; export const isContentImage = (value: Text) => { if (typeof value !== "string") return false; - const isImageURL = /(https?:\/\/.*\.(?:png|jpg|gif))/i.test(value); + const isImageURL = /(https?:\/\/.*\.(?:png|jpg|gif|svg))/i.test(value); const isBase64 = value.startsWith("data:image/") && value.includes("base64"); return isImageURL || isBase64; diff --git a/src/store/useFile.ts b/src/store/useFile.ts index 188a124..a64cc60 100644 --- a/src/store/useFile.ts +++ b/src/store/useFile.ts @@ -11,37 +11,46 @@ import useJson from "./useJson"; const defaultJson = JSON.stringify( { - squadName: "Super hero squad", - homeTown: "Metro City", - formed: 2016, - secretBase: "Super tower", - active: true, - members: [ + appName: "JSON Crack", + author: "Aykut SaraƧ", + launched: 2022, + openSource: true, + stars: 34633, + alternative: { + appName: "ToDiagram", + detail: "New powerful JSON editor.", + website: "https://todiagram.com", + brandColor: "#fe5e49", + paid: true, + }, + milestones: [ { - name: "Molecule Man", - age: 29, - secretIdentity: "Dan Jukes", - powers: ["Radiation resistance", "Turning tiny", "Radiation blast"], + title: "Launch", + year: 2022, + detail: "Released the first version.", }, { - name: "Madame Uppercut", - age: 39, - secretIdentity: "Jane Wilson", - powers: ["Million tonne punch", "Damage resistance", "Superhuman reflexes"], + title: "10K Stars", + date: 2022, + detail: "Achieved 10,000 stars on GitHub.", }, { - name: "Eternal Flame", - age: 1000000, - secretIdentity: "Unknown", - powers: [ - "Immortality", - "Heat Immunity", - "Inferno", - "Teleportation", - "Interdimensional travel", - ], + title: "20K Stars", + date: 2023, + detail: "Achieved 20,000 stars on GitHub.", + }, + { + title: "30K Stars", + date: 2024, + detail: "Achieved 30,000 stars on GitHub.", }, ], + social: { + github: "https://github.com/AykutSarac/jsoncrack.com", + twitter: "https://x.com/jsoncrack", + linkedin: "https://www.linkedin.com/company/todiagram", + }, + images: ["http://localhost:3000/assets/logo.svg"], }, null, 2