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 node path not working

Browse Source
This commit is contained in:
AykutSarac 2023-02-12 22:48:46 +03:00
parent 9216180019
commit 3061ee05a7
No known key found for this signature in database
4 changed files with 64 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/FileInput/index.tsx
View File

@ -53,7 +53,13 @@ export interface InputProps {
onChange?: React.ChangeEventHandler<HTMLInputElement>;
setExtension: (value: number) => void;
}
export const FileInput: React.FC<InputProps> = ({ setExtension, activeExtension, onChange, extensions, value }) => {
export const FileInput: React.FC<InputProps> = ({
setExtension,
activeExtension,
onChange,
extensions,
value,
}) => {
return (
<StyledInputWrapper>
<StyledForm>

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

@ -1,9 +1,10 @@
import React from "react";
import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
import { Canvas, Edge, ElkRoot, getParentsForNodeId } from "reaflow";
import { Canvas, Edge, ElkRoot } from "reaflow";
import { CustomNode } from "src/components/CustomNode";
import useGraph from "src/store/useGraph";
import useUser from "src/store/useUser";
import { getNodePath } from "src/utils/getNodePath";
import styled from "styled-components";
import { Loading } from "../Loading";
import { ErrorView } from "./ErrorView";
@ -66,53 +67,8 @@ const GraphComponent = ({ isWidget = false, openNodeModal }: GraphProps) => {
const handleNodeClick = React.useCallback(
(_: React.MouseEvent<SVGElement>, data: NodeData) => {
let resolvedPath = "";
const parentIds = getParentsForNodeId(nodes, edges, data.id).map(n => n.id);
const path = parentIds.reverse().concat(data.id);
const rootArrayElementIds = ["1"];
const edgesMap = new Map();
for (const edge of edges) {
if (!edgesMap.has(edge.from!)) {
edgesMap.set(edge.from!, []);
}
edgesMap.get(edge.from!).push(edge.to);
}
for (let i = 1; i < edges.length; i++) {
const curNodeId = edges[i].from!;
if (rootArrayElementIds.includes(curNodeId)) continue;
if (!edgesMap.has(curNodeId)) {
rootArrayElementIds.push(curNodeId);
}
}
if (rootArrayElementIds.length > 1) {
resolvedPath += `Root[${rootArrayElementIds.findIndex(id => id === path[0])}]`;
} else {
resolvedPath += "{Root}";
}
for (let i = 1; i < path.length; i++) {
const curId = path[i];
const curNode = nodes[+curId - 1];
if (!curNode) break;
if (curNode.data.parent === "array") {
resolvedPath += `.${curNode.text}`;
if (i !== path.length - 1) {
const toNodeId = path[i + 1];
const idx = edgesMap.get(curId).indexOf(toNodeId);
resolvedPath += `[${idx}]`;
}
}
if (curNode.data.parent === "object") {
resolvedPath += `.${curNode.text}`;
}
}
if (setSelectedNode) setSelectedNode({ node: data.text, path: resolvedPath });
if (setSelectedNode)
setSelectedNode({ node: data.text, path: getNodePath(nodes, edges, data.id) });
if (openNodeModal) openNodeModal();
},
[edges, nodes, openNodeModal, setSelectedNode]

2
src/store/useGraph.tsx
View File

@ -38,7 +38,7 @@ interface GraphActions {
zoomIn: () => void;
zoomOut: () => void;
centerView: () => void;
setSelectedNode: ({ node, path }: { node?: string | string[]; path?: string }) => void;
setSelectedNode: ({ node, path }: { node: string | string[]; path: string }) => void;
}
const useGraph = create<Graph & GraphActions>((set, get) => ({

52
src/utils/getNodePath.ts Normal file
View File

@ -0,0 +1,52 @@
export function getNodePath(nodes: NodeData[], edges: EdgeData[], nodeId: string) {
const { getParentsForNodeId } = require("reaflow");
let resolvedPath = "";
const parentIds = getParentsForNodeId(nodes, edges, nodeId).map(n => n.id);
const path = parentIds.reverse().concat(nodeId);
const rootArrayElementIds = ["1"];
const edgesMap = new Map();
for (const edge of edges) {
if (!edgesMap.has(edge.from!)) {
edgesMap.set(edge.from!, []);
}
edgesMap.get(edge.from!).push(edge.to);
}
for (let i = 1; i < edges.length; i++) {
const curNodeId = edges[i].from!;
if (rootArrayElementIds.includes(curNodeId)) continue;
if (!edgesMap.has(curNodeId)) {
rootArrayElementIds.push(curNodeId);
}
}
if (rootArrayElementIds.length > 1) {
resolvedPath += `Root[${rootArrayElementIds.findIndex(id => id === path[0])}]`;
} else {
resolvedPath += "{Root}";
}
for (let i = 1; i < path.length; i++) {
const curId = path[i];
const curNode = nodes[+curId - 1];
if (!curNode) break;
if (curNode.data.type === "array") {
resolvedPath += `.${curNode.text}`;
if (i !== path.length - 1) {
const toNodeId = path[i + 1];
const idx = edgesMap.get(curId).indexOf(toNodeId);
resolvedPath += `[${idx}]`;
}
}
if (curNode.data.type === "object") {
resolvedPath += `.${curNode.text}`;
}
}
return resolvedPath;
}