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

add node positions to element

Browse Source
This commit is contained in:
AykutSarac 2022-04-09 14:22:00 +03:00
parent ffa5b330fe
commit a5d4f4a007
3 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/containers/LiveEditor/CustomNode/ObjectNode.tsx
View File

@ -6,6 +6,8 @@ const ObjectNode: React.FC<CustomNodeProps<[string, unknown][]>> = ({
width,
height,
value,
x,
y
}) => {
return (
<Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
@ -15,7 +17,14 @@ const ObjectNode: React.FC<CustomNodeProps<[string, unknown][]>> = ({
(val, idx) =>
val[1] && (
<Styled.StyledRow key={idx} width={width}>
<Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
<Styled.StyledKey
data-x={x}
data-y={y}
data-key={val[1]}
objectKey
>
{val[0]}:{" "}
</Styled.StyledKey>
{val[1]}
</Styled.StyledRow>
)

4
src/containers/LiveEditor/CustomNode/TextNode.tsx
View File

@ -7,12 +7,14 @@ const TextNode: React.FC<CustomNodeProps<string>> = ({
height,
value,
isParent = false,
x,
y
}) => {
return (
<Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
<Styled.StyledTextWrapper>
<Styled.StyledText width={width} height={height}>
<Styled.StyledKey parent={isParent}>{value}</Styled.StyledKey>
<Styled.StyledKey data-x={x} data-y={y} data-key={value} parent={isParent}>{value}</Styled.StyledKey>
</Styled.StyledText>
</Styled.StyledTextWrapper>
</Styled.StyledForeignObject>

14
src/containers/LiveEditor/CustomNode/index.tsx
View File

@ -8,6 +8,8 @@ export interface CustomNodeProps<T> {
height: number;
value: T;
isParent?: boolean;
x: number;
y: number;
}
const baseLabelStyle = {
@ -34,7 +36,15 @@ export const CustomNode = (nodeProps: NodeProps) => {
if (data.text instanceof Object) {
const entries = Object.entries(data.text);
return <ObjectNode width={width} height={height} value={entries} />;
return (
<ObjectNode
x={nodeProps.x}
y={nodeProps.y}
width={width}
height={height}
value={entries}
/>
);
}
return (
@ -43,6 +53,8 @@ export const CustomNode = (nodeProps: NodeProps) => {
width={width}
height={height}
value={data.text}
x={nodeProps.x}
y={nodeProps.y}
/>
);
}}