Bug fix print to png (#586)

* add view rerender to extended nodes * update * try to exclude dbl printing * with force reload * update * some updates * final changes * change naming * show hidden nodes on print
graphql-editor · Jan 2, 2024 · 8eef1bd · 8eef1bd
1 parent 28f4dcb
commit 8eef1bd
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 96 deletions.
diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/Draw.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/Draw.tsx
@@ -3,7 +3,6 @@ import { transition } from "@/vars";
 import styled from "@emotion/styled";
 import { FieldType, Options } from "graphql-js-tree";
 import React, { useMemo } from "react";
-// import { RELATION_CONSTANTS } from './constants';
 
 interface Point {
   x: number;
@@ -26,11 +25,13 @@ export const Draw = ({
   to,
   color,
   relationType,
+  isPrintPreviewActive,
 }: {
   from?: { x: number; y: number; id: string };
   to?: { x: number; y: number; id: string };
   color: string;
   relationType: FieldType;
+  isPrintPreviewActive: boolean;
 }) => {
   const stroke = color;
 
@@ -110,6 +111,7 @@ export const Draw = ({
         data-from={from.id}
         data-to={to.id}
         className={`${DOMClassNames.nodeConnection}`}
+        isPrintPreviewActive={isPrintPreviewActive}
       >
         <path
           stroke={stroke}
@@ -132,13 +134,13 @@ const isArrayType = (f: FieldType) =>
     ? f.nest.type === Options.array
     : f.type === Options.array;
 
-const PathG = styled.g`
-  opacity: 0;
+const PathG = styled.g<{ isPrintPreviewActive: boolean }>`
+  opacity: ${({ isPrintPreviewActive }) => (isPrintPreviewActive ? 1 : 0)};
   transition: ${transition};
   &.inViewport {
     opacity: 1;
     &.selection {
-      opacity: 0;
+      opacity: ${({ isPrintPreviewActive }) => (isPrintPreviewActive ? 1 : 0)};
     }
   }
   &.selection {

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/constants.ts b/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/constants.ts
@@ -5,3 +5,5 @@ export const RELATION_CONSTANTS = {
   TOP_HEIGHT: 52,
   SEARCHBAR_HEIGHT: 30,
 };
+
+export const PRINT_PREVIEW_FIELD_HEIGHT = "auto";
diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/index.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/index.tsx
@@ -26,9 +26,13 @@ export interface RelationPath {
 }
 interface LinesProps {
   relations: RelationInterface[] | undefined;
+  isPrintPreviewActive: boolean;
 }
 
-export const Lines: React.FC<LinesProps> = ({ relations }) => {
+export const Lines: React.FC<LinesProps> = ({
+  relations,
+  isPrintPreviewActive,
+}) => {
   const { theme } = useTheme();
 
   return (
@@ -51,6 +55,7 @@ export const Lines: React.FC<LinesProps> = ({ relations }) => {
                   key={`${index}-${rf.index}-${relationNumber}-${rf.field.parserField.name}-${rf.connectingField.name}`}
                   from={rf.field}
                   to={r.to.field}
+                  isPrintPreviewActive={isPrintPreviewActive}
                 />
               );
             })}
@@ -64,6 +69,7 @@ export const Lines: React.FC<LinesProps> = ({ relations }) => {
                 key={`${index}-${refNode.id}-${refNode.parserField.name}-${refNodeNumber}-${r.to.field.id}`}
                 from={refNode}
                 to={r.to.field}
+                isPrintPreviewActive={isPrintPreviewActive}
               />
             ))}
           </>

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/LinesDiagram.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/LinesDiagram.tsx
@@ -24,6 +24,8 @@ import { DOMEvents } from "@/shared/hooks/DOMClassNames";
 import {
   RELATION_NODE_MAX_FIELDS,
   RELATION_NODE_MAX_WIDTH,
+  PRINT_PREVIEW_RELATION_NODE_MAX_FIELDS,
+  PRINT_PREVIEW_RELATION_NODE_MAX_WIDTH,
 } from "@/Relation/shared/nodeLook";
 
 const Main = styled.div`
@@ -81,7 +83,7 @@ type LinesDiagramProps = {
 };
 
 export interface LinesDiagramApi {
-  triggerResimulation: () => void;
+  triggerResimulation: (printingProcessingFlag?: boolean) => void;
 }
 
 export interface RelationInterface {
@@ -114,7 +116,13 @@ export const LinesDiagram = React.forwardRef<
     deselectNodes,
   } = useDomManagerTs(props.parentClass);
   const { setTransform, instance } = useControls();
-  const { editMode } = useRelationsState();
+  const {
+    editMode,
+    printPreviewActive,
+    printPreviewReady,
+    setPrintPreviewReady,
+    setPrintPreviewActive,
+  } = useRelationsState();
   const {
     transformState: { scale },
   } = useTransformContext();
@@ -163,14 +171,22 @@ export const LinesDiagram = React.forwardRef<
   useImperativeHandle(
     ref,
     () => ({
-      triggerResimulation: () => {
+      triggerResimulation: (printingProcessingFlag?: boolean) => {
         setLoading(true);
+        if (printingProcessingFlag !== undefined) {
+          setPrintPreviewActive(printingProcessingFlag);
+        }
+
         GraphQLEditorWorker.simulateSort({
           nodes,
           options: {
             iterations: 200,
-            maxFields: RELATION_NODE_MAX_FIELDS,
-            maxWidth: RELATION_NODE_MAX_WIDTH,
+            maxWidth: printingProcessingFlag
+              ? PRINT_PREVIEW_RELATION_NODE_MAX_WIDTH
+              : RELATION_NODE_MAX_WIDTH,
+            maxFields: printingProcessingFlag
+              ? PRINT_PREVIEW_RELATION_NODE_MAX_FIELDS
+              : RELATION_NODE_MAX_FIELDS,
             ignoreAlphaCalculation: true,
           },
         }).then(({ nodes: positionedNodes, ...positionParams }) => {
@@ -183,7 +199,7 @@ export const LinesDiagram = React.forwardRef<
   );
 
   useEffect(() => {
-    if (!selectedNodeId?.value?.id && simulatedNodes) {
+    if (!selectedNodeId?.value?.id && simulatedNodes && !printPreviewActive) {
       const schemaNode = simulatedNodes?.find(
         (sn) => sn.parserField.name === "Query"
       );
@@ -263,8 +279,12 @@ export const LinesDiagram = React.forwardRef<
       options: {
         existingNumberNodes: simulatedNodes,
         iterations: 200,
-        maxWidth: RELATION_NODE_MAX_WIDTH,
-        maxFields: RELATION_NODE_MAX_FIELDS,
+        maxWidth: printPreviewActive
+          ? PRINT_PREVIEW_RELATION_NODE_MAX_WIDTH
+          : RELATION_NODE_MAX_WIDTH,
+        maxFields: printPreviewActive
+          ? PRINT_PREVIEW_RELATION_NODE_MAX_FIELDS
+          : RELATION_NODE_MAX_FIELDS,
       },
     }).then(({ nodes: positionedNodes, ...positionParams }) => {
       props.setViewportParams(positionParams);
@@ -326,11 +346,20 @@ export const LinesDiagram = React.forwardRef<
             }
         )
     );
-    runAfterFramePaint(() => setLoading(false));
+    runAfterFramePaint(() => {
+      setLoading(false);
+      if (printPreviewActive && !printPreviewReady) {
+        setPrintPreviewReady(true);
+      } else if (!printPreviewActive && printPreviewReady) {
+        setPrintPreviewReady(false);
+      }
+    });
   }, [simulatedNodes]);
 
   const SvgLinesContainer = useMemo(() => {
-    return <Lines relations={relations} />;
+    return (
+      <Lines relations={relations} isPrintPreviewActive={printPreviewActive} />
+    );
   }, [relations]);
 
   const NodesContainer = useMemo(() => {

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/ActiveFieldName.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/ActiveFieldName.tsx
@@ -5,10 +5,12 @@ import { FIELD_NAME_SIZE } from "@/Graf/constants";
 import { ActiveType } from "@/Relation/PanZoom/LinesDiagram/Node/Field/ActiveType";
 import { Stack } from "@aexol-studio/styling-system";
 
-const Main = styled.div`
+const Main = styled.div<{ printPreviewActive: boolean }>`
   display: flex;
-  flex-flow: row nowrap;
-  overflow-x: auto;
+  flex-flow: ${({ printPreviewActive }) =>
+    printPreviewActive ? "row wrap" : "row nowrap"};
+  overflow-x: ${({ printPreviewActive }) =>
+    printPreviewActive ? "unset" : "auto"};
   * {
     text-overflow: ellipsis;
   }
@@ -26,13 +28,14 @@ const Comma = styled.span`
 
 export const ActiveFieldName: React.FC<
   Pick<ParserField, "name" | "args"> & {
+    printPreviewActive: boolean;
     parentTypes?: Record<string, string>;
     onClick?: (n: ParserField) => void;
   }
-> = ({ args, name, parentTypes, onClick }) => {
+> = ({ args, name, parentTypes, onClick, printPreviewActive }) => {
   if (args && args.length > 0) {
     return (
-      <Main>
+      <Main printPreviewActive={printPreviewActive}>
         <Name>{name}</Name>
         {args && (
           <>

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/index.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/index.tsx
@@ -3,23 +3,30 @@ import { useTreesState } from "@/state/containers/trees";
 import { FieldProps as GrafFieldProps } from "@/Graf/Node/models";
 import styled from "@emotion/styled";
 import { ParserField, TypeSystemDefinition } from "graphql-js-tree";
-import { RELATION_CONSTANTS } from "@/Relation/PanZoom/LinesDiagram/Lines/constants";
+import {
+  RELATION_CONSTANTS,
+  PRINT_PREVIEW_FIELD_HEIGHT,
+} from "@/Relation/PanZoom/LinesDiagram/Lines/constants";
 import { ActiveFieldName } from "@/Relation/PanZoom/LinesDiagram/Node/Field/ActiveFieldName";
 import { ActiveType } from "@/Relation/PanZoom/LinesDiagram/Node/Field/ActiveType";
 import { DOMClassNames } from "@/shared/hooks/DOMClassNames";
 import { useRelationsState } from "@/state/containers";
 import { isEditableParentField } from "@/utils";
 import { Link } from "@aexol-studio/styling-system";
 
-const Main = styled.div`
+const Main = styled.div<{ printPreviewActive: boolean }>`
   position: relative;
   display: flex;
   gap: 0.5rem;
   align-items: center;
-  height: ${RELATION_CONSTANTS.FIELD_HEIGHT}px;
+  height: ${({ printPreviewActive }) =>
+    printPreviewActive
+      ? PRINT_PREVIEW_FIELD_HEIGHT
+      : RELATION_CONSTANTS.FIELD_HEIGHT}px;
   padding: 0 12px;
   color: ${({ theme }) => theme.text.disabled};
-  margin: 0 -12px;
+  margin: ${({ printPreviewActive }) =>
+    printPreviewActive ? "5px -12px" : "0 -12px"};
   transition: background-color 0.25s ease-in-out;
   cursor: pointer;
   &:hover {
@@ -33,7 +40,7 @@ type FieldProps = Pick<GrafFieldProps, "node"> & {
 
 export const Field: React.FC<FieldProps> = ({ node }) => {
   const { parentTypes, setSelectedNodeId, getParentOfField } = useTreesState();
-  const { setEditMode } = useRelationsState();
+  const { setEditMode, printPreviewActive } = useRelationsState();
   const nodeClick = (n: ParserField) => {
     const parent = getParentOfField(n);
     if (parent) {
@@ -56,6 +63,7 @@ export const Field: React.FC<FieldProps> = ({ node }) => {
         e.stopPropagation();
         nodeClick(node);
       }}
+      printPreviewActive={printPreviewActive}
     >
       <ActiveFieldName
         name={
@@ -68,6 +76,7 @@ export const Field: React.FC<FieldProps> = ({ node }) => {
         onClick={(n) => {
           nodeClick(n);
         }}
+        printPreviewActive={printPreviewActive}
       />
       <ActiveType
         type={node.type}