WIP animations and fixes and direction of relations

graphql-editor · Jun 3, 2023 · 3a3369a · 3a3369a
1 parent be7584b
commit 3a3369a
Show file tree

Hide file tree

Showing 14 changed files with 215 additions and 55 deletions.
diff --git a/declarations.d.ts b/declarations.d.ts
@@ -0,0 +1,3 @@
+// NOTE: The declaration below was injected by `"framer"`
+// see https://www.framer.com/docs/guides/handshake for more information.
+declare module "https://framer.com/m/*";
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "color2k": "^1.2.4",
+    "framer-motion": "^10.12.16",
     "fuzzyjs": "^5.0.1",
     "graphql-language-service": "3.1.4",
     "js-graph-algorithms": "^1.0.18",
@@ -87,4 +88,4 @@
       "./packages/sandbox"
     ]
   }
-}
+}
diff --git a/packages/editor-worker/package.json b/packages/editor-worker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor-worker",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",
@@ -44,6 +44,7 @@
     "d3": "^7.8.4",
     "diff": "^5.1.0",
     "file-saver": "^2.0.5",
+    "framer": "^2.3.0",
     "fuzzyjs": "^5.0.1",
     "graphql-editor-worker": "^6.5.0",
     "graphql-js-tree": "^0.3.1",

diff --git a/packages/editor/src/Graf/Graf.tsx b/packages/editor/src/Graf/Graf.tsx
@@ -16,6 +16,7 @@ import { KeyboardActions, useIO } from "@/shared/hooks/io";
 import { DraggableProvider } from "@/Graf/state/draggable";
 import { useRelationsState } from "@/state/containers";
 import { Button, Stack, useToasts } from "@aexol-studio/styling-system";
+import { motion } from "framer-motion";
 
 const SubNodeContainer = styled.div`
   font-family: ${fontFamilySans};
@@ -29,7 +30,7 @@ const SubNodeContainer = styled.div`
   height: 100%;
 `;
 
-const SubNodeWrapper = styled.div`
+const SubNodeWrapper = styled(motion.div)`
   width: 100%;
   bottom: 0;
   left: 0;
@@ -99,6 +100,10 @@ export const Graf: React.FC<{ node: ParserField }> = ({ node }) => {
         if (selectedNodeId?.justCreated) return;
         exit();
       }}
+      transition={{ duration: 0.2 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
     >
       <SubNodeContainer>
         <DraggableProvider>

diff --git a/packages/editor/src/Graf/Node/components/Menu/Menu.tsx b/packages/editor/src/Graf/Node/components/Menu/Menu.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
+import React from "react";
 
-import styled from '@emotion/styled';
-import { fontFamilySans } from '@/vars';
+import styled from "@emotion/styled";
+import { fontFamilySans } from "@/vars";
+import { motion } from "framer-motion";
 
-const Wrapper = styled.div`
+const Wrapper = styled(motion.div)`
   width: 220px;
   border-radius: ${(p) => p.theme.radius}px;
   font-family: ${fontFamilySans};
-  z-index: 22;
+  z-index: 2;
 `;
 
 const Content = styled.div`
@@ -39,12 +40,20 @@ interface MenuProps
 export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(
   ({ children, hideMenu, menuName, ...props }, ref) => {
     return (
-      <Wrapper {...props} ref={ref}>
+      <Wrapper
+        {...(props as any)}
+        ref={ref}
+        transition={{ duration: 0.2 }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+      >
         <Content>
           {menuName && <Title>{menuName}</Title>}
           {children}
         </Content>
       </Wrapper>
     );
-  },
+  }
 );
+Menu.displayName = "Menu";
diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/Draw.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/Draw.tsx
@@ -101,14 +101,14 @@ export const Draw = ({
           stroke={stroke}
           strokeWidth={fac}
           strokeDasharray={
-            relationType.type === Options.required ? undefined : "5 10"
+            relationType.type === Options.required ? undefined : "10 5"
           }
           d={`M ${t.x} ${t.y}
            Q ${bezier1.x} ${bezier1.y} ${center.x} ${center.y}
            Q ${bezier2.x} ${bezier2.y} ${f.x} ${f.y}`}
         />
-        <circle fill={stroke} stroke={stroke} r={7} cx={t.x + 2} cy={t.y + 2} />
-        <circle fill={stroke} stroke={stroke} r={7} cx={f.x + 2} cy={f.y + 2} />
+        <circle fill={stroke} stroke={stroke} r={4} cx={t.x} cy={t.y} />
+        <circle fill={stroke} stroke={stroke} r={8} cx={f.x} cy={f.y} />
       </PathG>
     );
   }