visual fixes

graphql-editor · Jan 28, 2024 · c346bef · c346bef
1 parent 0119c24
commit c346bef
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 56 deletions.
diff --git a/packages/editor/src/Graf/Node/ActiveNode/TopNodeMenu.tsx b/packages/editor/src/Graf/Node/ActiveNode/TopNodeMenu.tsx
@@ -42,7 +42,8 @@ type PossibleMenus =
   | "operations";
 const NodeIconArea = styled.div<{ opened?: boolean }>`
   cursor: pointer;
-  border-radius: ${(p) => p.theme.radius}px;
+  display: flex;
+  align-items: center;
   transition: ${transition};
   &:hover {
     color: ${({ theme }) => theme.accent.L2};
@@ -98,7 +99,7 @@ export const TopNodeMenu: React.FC<{
   };
 
   return (
-    <Stack direction="row" gap="0.5rem">
+    <Stack direction="row" gap="0.5rem" align="center">
       {!isLibrary && (
         <>
           {node.data.type !== TypeDefinition.ScalarTypeDefinition &&
@@ -115,7 +116,7 @@ export const TopNodeMenu: React.FC<{
                       }}
                       opened={menuOpen === "field"}
                     >
-                      <PlusLarge />
+                      <PlusLarge width={18} height={18} />
                     </NodeIconArea>
                   </Tooltip>
                 )}
@@ -143,7 +144,7 @@ export const TopNodeMenu: React.FC<{
                     }}
                     opened={menuOpen === "directive"}
                   >
-                    <AtSign />
+                    <AtSign width={18} height={18} />
                   </NodeIconArea>{" "}
                 </Tooltip>
               )}
@@ -186,7 +187,7 @@ export const TopNodeMenu: React.FC<{
                 }}
                 opened={menuOpen === "options"}
               >
-                <DotsHorizontal />
+                <DotsHorizontal width={18} height={18} />
               </NodeIconArea>
             </Tooltip>
           )}

diff --git a/packages/editor/src/Graf/Node/ActiveNode/index.tsx b/packages/editor/src/Graf/Node/ActiveNode/index.tsx
@@ -138,7 +138,6 @@ const GapBar = styled.div`
 
 const NodeArea = styled.div`
   min-width: 80%;
-  max-width: 50vw;
   left: 30%;
   position: absolute;
   padding: 3.5rem 2rem;

diff --git a/packages/editor/src/Graf/Node/Field/ActiveField.tsx b/packages/editor/src/Graf/Node/Field/ActiveField.tsx
@@ -170,8 +170,8 @@ export const ActiveField: React.FC<FieldProps> = ({
                     <FieldPort
                       {...triggerProps}
                       icons={{
-                        closed: <BracketsSquare />,
-                        open: <BracketsSquare />,
+                        closed: <BracketsSquare width={18} height={18} />,
+                        open: <BracketsSquare width={18} height={18} />,
                       }}
                       onClick={() => setMenuOpen("options")}
                     />
@@ -222,8 +222,8 @@ export const ActiveField: React.FC<FieldProps> = ({
                 onClick={onInputClick}
                 open={inputOpen}
                 icons={{
-                  closed: <Plus />,
-                  open: <Minus />,
+                  closed: <Plus width={18} height={18} />,
+                  open: <Minus width={18} height={18} />,
                 }}
               />
             </Tooltip>
@@ -238,8 +238,8 @@ export const ActiveField: React.FC<FieldProps> = ({
                   <FieldPort
                     {...triggerProps}
                     icons={{
-                      closed: <DotsVertical />,
-                      open: <DotsVertical />,
+                      closed: <DotsVertical width={18} height={18} />,
+                      open: <DotsVertical width={18} height={18} />,
                     }}
                     onClick={() => setMenuOpen("details")}
                   />
@@ -267,7 +267,7 @@ export const ActiveField: React.FC<FieldProps> = ({
               // }}
               opened={outputOpen}
             >
-              <ChevronLeft />
+              <ChevronLeft width={18} height={18} />
             </OutputArrow>
           </Tooltip>
         )}
@@ -283,22 +283,17 @@ const Actions = styled.div<{ toRight?: boolean }>`
 `;
 const AbsoluteActions = styled.div`
   display: flex;
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2;
-  background-color: ${(p) => p.theme.neutrals.L4};
-  padding: 0.5rem;
-  border-radius: ${(p) => p.theme.radius}px;
+  margin-left: auto;
+  margin-right: -0.5rem;
+  border-radius: ${(p) => p.theme.border.primary.radius}px;
 `;
 const OutputArrow = styled.div<{ opened?: boolean }>`
   pointer-events: all;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem;
-  margin: -0.5rem 0;
+  padding: 0.25rem;
   svg {
     stroke: ${({ theme }) => theme.text.default};
     rotate: ${({ opened }) => (opened ? "270deg" : "180deg")};

diff --git a/packages/editor/src/Graf/Node/Field/NodeFieldContainer/index.tsx b/packages/editor/src/Graf/Node/Field/NodeFieldContainer/index.tsx
@@ -10,7 +10,7 @@ export const NodeFieldContainer = styled.div<{
   gap: 0.25rem;
   color: ${({ theme }) => theme.text.default};
   margin: 0;
-  padding: 0.5rem 1rem;
+  padding: 0.25rem 1rem;
   transition: border-color 0.25s ease-in-out;
   position: relative;
   border: 1px solid

diff --git a/packages/editor/src/Graf/Node/components/DirectivePlacement/index.tsx b/packages/editor/src/Graf/Node/components/DirectivePlacement/index.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-import styled from '@emotion/styled';
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 import {
   ContextMenu,
   NodeDirectiveOptionsMenu,
-} from '@/shared/components/ContextMenu';
-import { ParserField } from 'graphql-js-tree';
-import { transition } from '@/vars';
+} from "@/shared/components/ContextMenu";
+import { ParserField } from "graphql-js-tree";
+import { transition } from "@/vars";
 
 interface NodeDirectiveProps {
   onDelete: () => void;
@@ -19,12 +19,11 @@ const NodeDirectiveBlock = styled.div<{ isLocked?: boolean }>`
   font-size: 12px;
   border-radius: ${(p) => p.theme.radius}px;
   position: relative;
-  cursor: pointer;
   transition: ${transition};
   cursor: pointer;
   border: 1px solid currentColor;
   &:hover {
-    border: 1px ${({ isLocked }) => (isLocked ? 'solid' : 'dashed')}
+    border: 1px ${({ isLocked }) => (isLocked ? "solid" : "dashed")}
       currentColor;
   }
 `;

diff --git a/packages/editor/src/Graf/Node/components/FieldPort/index.tsx b/packages/editor/src/Graf/Node/components/FieldPort/index.tsx
@@ -13,8 +13,7 @@ interface FieldPortProps {
 
 const Main = styled.div`
   position: relative;
-  padding: 0.5rem;
-  margin: -0.5rem 0;
+  padding: 0.25rem;
   align-items: center;
   justify-content: center;
   cursor: pointer;

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/Draw.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/Draw.tsx
@@ -110,7 +110,7 @@ export const Draw = ({
       <PathG
         data-from={from.id}
         data-to={to.id}
-        className={`${DOMClassNames.nodeConnection}`}
+        className={`${DOMClassNames.nodeConnection} inViewport`}
         isPrintPreviewActive={isPrintPreviewActive}
       >
         <path

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/LinesDiagram.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/LinesDiagram.tsx
@@ -78,6 +78,7 @@ type LinesDiagramProps = {
   loading?: boolean;
   fieldsOn?: boolean;
   hide?: boolean;
+  isReadOnly?: boolean;
   parentClass: "focus" | "all";
   setViewportParams: (props: ViewportParams) => void;
 };
@@ -97,7 +98,7 @@ export const LinesDiagram = React.forwardRef<
   LinesDiagramApi,
   LinesDiagramProps
 >((props, ref) => {
-  const { nodes, setLoading, mainRef, nodesWithoutFilter } = props;
+  const { nodes, setLoading, mainRef, nodesWithoutFilter, isReadOnly } = props;
   const {
     isLibrary,
     setSelectedNodeId,
@@ -110,6 +111,7 @@ export const LinesDiagram = React.forwardRef<
   const {
     cullNodes,
     LoDNodes,
+    lodCache,
     changeZoomInTopBar,
     markRelated,
     selectNode,
@@ -127,7 +129,6 @@ export const LinesDiagram = React.forwardRef<
     transformState: { scale },
   } = useTransformContext();
   const [simulatedNodes, setSimulatedNodes] = useState<NumberNode[]>();
-
   const zoomToNode = (nodeX: number, nodeY: number) => {
     const wrapper = instance.wrapperComponent;
     if (wrapper) {
@@ -349,8 +350,10 @@ export const LinesDiagram = React.forwardRef<
     runAfterFramePaint(() => {
       setLoading(false);
       if (printPreviewActive && !printPreviewReady) {
+        lodCache.current = undefined;
         setPrintPreviewReady(true);
       } else if (!printPreviewActive && printPreviewReady) {
+        lodCache.current = undefined;
         setPrintPreviewReady(false);
       }
     });
@@ -367,7 +370,11 @@ export const LinesDiagram = React.forwardRef<
       <>
         {simulatedNodes?.map((n) => (
           <NodePane x={n.x} id={`${n.id}`} y={n.y} key={n.parserField.id}>
-            <Node isLibrary={isLibrary(n.parserField)} numberNode={n} />
+            <Node
+              isReadOnly={isReadOnly}
+              isLibrary={isLibrary(n.parserField)}
+              numberNode={n}
+            />
           </NodePane>
         ))}
       </>

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/index.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/index.tsx
@@ -201,10 +201,11 @@ const EditToSeeWhole = styled(Stack)`
 interface NodeProps {
   numberNode: NumberNode;
   isLibrary?: boolean;
+  isReadOnly?: boolean;
 }
 
 export const Node: React.FC<NodeProps> = (props) => {
-  const { numberNode, isLibrary } = props;
+  const { numberNode, isLibrary, isReadOnly } = props;
   const { parserField: field } = numberNode;
   const { setSelectedNodeId, focusNode, focusMode, exitFocus } =
     useTreesState();
@@ -275,8 +276,12 @@ export const Node: React.FC<NodeProps> = (props) => {
                 setEditMode(field.id);
               }}
             >
-              <span>Edit</span>
-              <PenLine width={16} height={16} />
+              <span>{isReadOnly ? "Expand" : "Edit"}</span>
+              {isReadOnly ? (
+                <ChevronRightDouble width={16} height={16} />
+              ) : (
+                <PenLine width={16} height={16} />
+              )}
             </EditNodeClickableButton>
           </EditNodeContainer>
         )}

diff --git a/packages/editor/src/Relation/PanZoom/PanZoom.tsx b/packages/editor/src/Relation/PanZoom/PanZoom.tsx
@@ -37,7 +37,7 @@ export const PanZoom: React.FC<{
   const mainRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const linesRef = useRef<LinesDiagramApi>(null);
-  const { setSelectedNodeId } = useTreesState();
+  const { setSelectedNodeId, readonly: isReadOnly } = useTreesState();
   const { isClick, mouseDown } = useClickDetector();
   const { createToast } = useToasts();
   const { setTransform } = useControls();
@@ -211,23 +211,39 @@ export const PanZoom: React.FC<{
       if (zoomingMode === "zoom" || !ctrlToZoom) {
         return;
       }
-
       const factor =
         (e.detail
           ? -e.detail / 3
           : "wheelDelta" in e
           ? (e as unknown as { wheelDelta: number }).wheelDelta
           : 0) * 2;
       const transformState = getContext().instance.transformState;
-      const newX = e.deltaX
-        ? (transformState.positionX || 0) + factor
-        : transformState.positionX || 0;
-
-      const newY = e.deltaY
-        ? (transformState.positionY || 0) + factor
-        : transformState.positionY || 0;
-
-      setTransform(newX, newY, transformState.scale, 300, "easeOutCubic");
+      if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+        // horizontal pan
+        const newX = e.deltaX
+          ? (transformState.positionX || 0) + factor
+          : transformState.positionX || 0;
+        setTransform(
+          newX,
+          transformState.positionY,
+          transformState.scale,
+          300,
+          "easeOutCubic"
+        );
+        return;
+      } else {
+        // vertical pan
+        const newY = e.deltaY
+          ? (transformState.positionY || 0) + factor
+          : transformState.positionY || 0;
+        setTransform(
+          transformState.positionX,
+          newY,
+          transformState.scale,
+          300,
+          "easeOutCubic"
+        );
+      }
     };
     wrapperRef.current?.addEventListener("wheel", scrollListener);
     document.addEventListener("wheel", scrollListenerZoom);
@@ -246,6 +262,7 @@ export const PanZoom: React.FC<{
       <LinesDiagram
         ref={linesRef}
         hide={hide}
+        isReadOnly={isReadOnly}
         nodes={filteredNodes}
         setViewportParams={(p) => setViewportParams(p)}
         fieldsOn={fieldsOn}

diff --git a/packages/editor/src/editor/code/guild/editor/EnrichedLanguageService.ts b/packages/editor/src/editor/code/guild/editor/EnrichedLanguageService.ts
@@ -23,6 +23,9 @@ import {
 } from "./utils";
 import { mergeSDLs } from "graphql-js-tree";
 
+// TODO: cache decorations and diagnostics
+// const lastHandledForDocument = "";
+
 export class EnrichedLanguageService extends LanguageService {
   async getNodeAtPosition(
     schema: GraphQLSchema,
@@ -173,12 +176,11 @@ export class EnrichedLanguageService extends LanguageService {
       ...rawDiagnosticsSources,
       coreDiagnosticsSource,
     ];
-
     const nestedArrays = (
       await Promise.all(
         diagnosticsSources.map(async (source) => {
+          let c = model.getValue().toString();
           try {
-            let c = model.getValue().toString();
             if (libraries) {
               const result = mergeSDLs(model.getValue().toString(), libraries);
               if (result.__typename === "error") {

diff --git a/packages/editor/src/shared/components/ContextMenu/NodeTypeOptionsMenu/index.tsx b/packages/editor/src/shared/components/ContextMenu/NodeTypeOptionsMenu/index.tsx
@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react';
-import { OptionsMenu } from '@/Graf/Node/components';
+import React, { useState, useEffect } from "react";
+import { OptionsMenu } from "@/Graf/Node/components";
 import {
   ParserField,
   compileType,
   getTypeName,
   decompileType,
   FieldType,
-} from 'graphql-js-tree';
+} from "graphql-js-tree";
 interface NodeTypeOptionsMenuProps {
   node: ParserField;
   hideMenu: () => void;
@@ -38,7 +38,7 @@ export const NodeTypeOptionsMenu = React.forwardRef<
     <OptionsMenu
       {...props}
       ref={ref}
-      menuName={'Node kind'}
+      menuName={"Node kind"}
       hideMenu={hideMenu}
       options={opts}
       onCheck={(o) => {

diff --git a/packages/editor/src/shared/hooks/useDomManager.ts b/packages/editor/src/shared/hooks/useDomManager.ts
@@ -126,6 +126,7 @@ export const useDomManagerTs = (parent: "focus" | "all") => {
     }
   };
   return {
+    lodCache,
     selectNode,
     deselectNodes,
     markRelated,