feat: styling fixes

This commit is contained in:
AykutSarac 2023-03-11 18:21:45 +03:00
parent a162c1eb82
commit 6ad6deb152
No known key found for this signature in database
5 changed files with 21 additions and 19 deletions

View File

@ -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);

View File

@ -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);

View File

@ -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
);
});

View File

@ -38,6 +38,10 @@ const GlobalStyle = createGlobalStyle`
display: none;
}
.mantine-Modal-inner {
padding: 0;
}
svg {
vertical-align: text-top;
}

View File

@ -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}"]`);