#3580 - Macro: fix issue with not re-rendering svg

epam · Nov 30, 2023 · 8f77d3b · 8f77d3b
1 parent 0e46abc
commit 8f77d3b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 4 deletions.
diff --git a/...etcher-polymer-editor-react/src/components/modal/monomerConnection/MonomerConnections.tsx b/...etcher-polymer-editor-react/src/components/modal/monomerConnection/MonomerConnections.tsx
@@ -43,6 +43,7 @@ export const StyledStructRender = styled(StructRender)(({ theme }) => ({
   '& svg': {
     maxWidth: 'fit-content',
     margin: 'auto',
+    padding: '4px',
   },
 }));
 
@@ -87,6 +88,7 @@ const MonomerConnection = ({
     useState<string | null>(getDefaultAttachmentPoint(firstMonomer));
   const [secondSelectedAttachmentPoint, setSecondSelectedAttachmentPoint] =
     useState<string | null>(getDefaultAttachmentPoint(secondMonomer));
+  const [modalExpanded, setModalExpanded] = useState(false);
 
   const cancelBondCreationAndClose = () => {
     editor.events.cancelBondCreationViaModal.dispatch(secondMonomer);
@@ -114,6 +116,9 @@ const MonomerConnection = ({
       isOpen={isModalOpen}
       onClose={cancelBondCreationAndClose}
       showExpandButton
+      modalWidth="350px"
+      expanded={modalExpanded}
+      setExpanded={setModalExpanded}
     >
       <Modal.Content>
         <ModalContent>
@@ -123,6 +128,7 @@ const MonomerConnection = ({
               monomer={firstMonomer}
               selectedAttachmentPoint={firstSelectedAttachmentPoint}
               onSelectAttachmentPoint={setFirstSelectedAttachmentPoint}
+              expanded={modalExpanded}
             />
             <span />
             <ConnectionSymbol />
@@ -133,6 +139,7 @@ const MonomerConnection = ({
               monomer={secondMonomer}
               selectedAttachmentPoint={secondSelectedAttachmentPoint}
               onSelectAttachmentPoint={setSecondSelectedAttachmentPoint}
+              expanded={modalExpanded}
             />
           </AttachmentPointsRow>
         </ModalContent>
@@ -160,12 +167,14 @@ interface AttachmentPointSelectionPanelProps {
   monomer: BaseMonomer;
   selectedAttachmentPoint: string | null;
   onSelectAttachmentPoint: (attachmentPoint: string) => void;
+  expanded?: boolean;
 }
 
 function AttachmentPointSelectionPanel({
   monomer,
   selectedAttachmentPoint,
   onSelectAttachmentPoint,
+  expanded = false,
 }: AttachmentPointSelectionPanelProps): React.ReactElement {
   const bonds = monomer.attachmentPointsToBonds;
 
@@ -192,7 +201,9 @@ function AttachmentPointSelectionPanel({
           currentlySelectedMonomerAttachmentPoint:
             selectedAttachmentPoint ?? undefined,
           labelInMonomerConnectionsModal: true,
+          needCache: false,
         }}
+        update={expanded}
       />
       <AttachmentPointList>
         {monomer.listOfAttachmentPoints.map((attachmentPoint, i) => {

diff --git a/...s/ketcher-polymer-editor-react/src/components/modal/monomerConnection/styledComponents.ts b/...s/ketcher-polymer-editor-react/src/components/modal/monomerConnection/styledComponents.ts
@@ -50,7 +50,6 @@ export const MonomerName = styled.div(({ theme }) => ({
   font: theme.ketcher.font.family.inter,
   fontSize: theme.ketcher.font.size.regular,
   fontWeight: theme.ketcher.font.weight.regular,
-  width: '150px',
   flexBasis: '200px',
 }));
 

diff --git a/packages/ketcher-polymer-editor-react/src/components/shared/modal/Modal.tsx b/packages/ketcher-polymer-editor-react/src/components/shared/modal/Modal.tsx
@@ -10,6 +10,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Icon } from 'ketcher-react';
 import { scrollbarThin } from 'theming/mixins';
+import { EmptyFunction } from 'helpers/emptyFunction';
 
 interface ModalProps {
   children: JSX.Element | Array<JSX.Element>;
@@ -20,6 +21,8 @@ interface ModalProps {
   onClose: VoidFunction;
   className?: string;
   modalWidth?: string;
+  expanded?: boolean;
+  setExpanded?: (boolean) => void;
 }
 const StyledDialog = styled(Dialog)`
   .MuiPaper-root {
@@ -86,9 +89,10 @@ export const Modal = ({
   onClose,
   className,
   modalWidth,
+  expanded = false,
+  setExpanded = EmptyFunction,
 }: ModalProps) => {
   const theme = useTheme();
-  const [expanded, setExpanded] = React.useState(false);
 
   const paperProps = useMemo(
     () => ({
@@ -97,6 +101,7 @@ export const Modal = ({
         borderRadius: '8px',
         color: theme.ketcher.color.text.primary,
         ...(showExpandButton && {
+          margin: 'auto',
           width: expanded ? '100%' : modalWidth,
           height: expanded ? '100%' : undefined,
           maxWidth: 'calc(min(1280px, 100%))',

diff --git a/packages/ketcher-react/src/components/StructRender/StructRender.tsx b/packages/ketcher-react/src/components/StructRender/StructRender.tsx
@@ -37,7 +37,12 @@ const normalizeStruct = (molV2000StringOrStruct: string | Struct) => {
   }
 };
 
-const StructRender = ({ struct, options, className }: IStructRenderProps) => {
+const StructRender = ({
+  struct,
+  options,
+  className,
+  update,
+}: IStructRenderProps) => {
   const renderRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     const container = renderRef.current;
@@ -47,7 +52,7 @@ const StructRender = ({ struct, options, className }: IStructRenderProps) => {
       const normalizedStruct = normalizeStruct(struct);
       RenderStruct.render(container, normalizedStruct, options);
     }
-  }, [struct, options]);
+  }, [struct, options, update]);
 
   return <Container ref={renderRef} className={className}></Container>;
 };

diff --git a/packages/ketcher-react/src/components/StructRender/types.ts b/packages/ketcher-react/src/components/StructRender/types.ts
@@ -21,4 +21,5 @@ export interface IStructRenderProps {
   struct: Struct;
   options?: RenderOptions & { cachePrefix?: string; needCache?: boolean };
   className?: string;
+  update?: boolean;
 }