mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-12 19:02:53 +08:00
feat: styling fixes
This commit is contained in:
parent
a162c1eb82
commit
6ad6deb152
@ -2,7 +2,7 @@ import React from "react";
|
||||
import { CustomNodeProps } from "src/components/CustomNode";
|
||||
import * as Styled from "./styles";
|
||||
|
||||
const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
|
||||
export const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
|
||||
const { text, width, height, data } = node;
|
||||
const ref = React.useRef(null);
|
||||
|
||||
@ -29,9 +29,3 @@ const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
|
||||
</Styled.StyledForeignObject>
|
||||
);
|
||||
};
|
||||
|
||||
function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
|
||||
return String(prev.node.text) === String(next.node.text) && prev.node.width === next.node.width;
|
||||
}
|
||||
|
||||
export default React.memo(ObjectNode, propsAreEqual);
|
||||
|
@ -40,7 +40,7 @@ const StyledImage = styled.img`
|
||||
background: ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
|
||||
`;
|
||||
|
||||
const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
|
||||
export const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
|
||||
const {
|
||||
id,
|
||||
text,
|
||||
@ -105,9 +105,3 @@ const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }
|
||||
</Styled.StyledForeignObject>
|
||||
);
|
||||
};
|
||||
|
||||
function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
|
||||
return prev.node.text === next.node.text && prev.node.width === next.node.width;
|
||||
}
|
||||
|
||||
export default React.memo(TextNode, propsAreEqual);
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { Node, NodeProps } from "reaflow";
|
||||
import ObjectNode from "./ObjectNode";
|
||||
import TextNode from "./TextNode";
|
||||
import { ObjectNode } from "./ObjectNode";
|
||||
import { TextNode } from "./TextNode";
|
||||
|
||||
export interface CustomNodeProps {
|
||||
node: NodeData;
|
||||
@ -17,7 +17,7 @@ const rootProps = {
|
||||
ry: 50,
|
||||
};
|
||||
|
||||
export const CustomNode = (nodeProps: NodeProps) => {
|
||||
const NodeComponent = (nodeProps: NodeProps) => {
|
||||
const { text, data } = nodeProps.properties;
|
||||
|
||||
return (
|
||||
@ -34,3 +34,13 @@ export const CustomNode = (nodeProps: NodeProps) => {
|
||||
</Node>
|
||||
);
|
||||
};
|
||||
|
||||
export const CustomNode = React.memo(NodeComponent, (prev, next) => {
|
||||
return (
|
||||
String(prev.properties.text) === String(next.properties.text) &&
|
||||
prev.properties.width === next.properties.width &&
|
||||
prev.properties.height === next.properties.height &&
|
||||
prev.x === next.x &&
|
||||
prev.y === next.y
|
||||
);
|
||||
});
|
||||
|
@ -38,6 +38,10 @@ const GlobalStyle = createGlobalStyle`
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mantine-Modal-inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
@ -5,11 +5,11 @@ import useGraph from "src/store/useGraph";
|
||||
|
||||
export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
|
||||
const [isNodeModalVisible, setNodeModalVisible] = React.useState(false);
|
||||
const openNodeModal = React.useCallback(() => setNodeModalVisible(true), []);
|
||||
|
||||
const collapsedNodes = useGraph(state => state.collapsedNodes);
|
||||
const collapsedEdges = useGraph(state => state.collapsedEdges);
|
||||
|
||||
const openNodeModal = React.useCallback(() => setNodeModalVisible(true), []);
|
||||
|
||||
React.useEffect(() => {
|
||||
const nodeList = collapsedNodes.map(id => `[id$="node-${id}"]`);
|
||||
|
Loading…
x
Reference in New Issue
Block a user