✨ hideable fields

graphql-editor · Apr 25, 2023 · f70690c · f70690c
1 parent f256754
commit f70690c
Show file tree

Hide file tree

Showing 32 changed files with 612 additions and 556 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,8 +36,8 @@
     "@types/jest": "^27.0.1",
     "@types/node": "^16.9.2",
     "@types/query-string": "^6.2.0",
-    "@types/react": "^17.0.21",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.38",
+    "@types/react-dom": "^18.0.11",
     "@types/remarkable": "^2.0.3",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
@@ -53,8 +53,8 @@
     "mocha": "^9.1.1",
     "monaco-editor": "^0.34.1",
     "prettier": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "treelang": "0.0.4",
     "ts-jest": "^27.0.5",
     "ttypescript": "^1.5.12",

diff --git a/packages/editor-worker/package.json b/packages/editor-worker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor-worker",
-  "version": "6.3.4",
+  "version": "6.3.5",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

diff --git a/packages/editor-worker/src/tsAlgo.ts b/packages/editor-worker/src/tsAlgo.ts
@@ -35,7 +35,7 @@ export function storeCoordinates(
       }),
     )
     .force('x', d3.forceX().strength(0.1))
-    .force('y', d3.forceY().strength(0.1))
+    .force('y', d3.forceY().strength(0.3))
     .force('collide', () => createCollisionForce(nodes)(1, 2))
     .stop();
   for (let i = 0; i < iterations; i++) {
@@ -47,7 +47,7 @@ export function storeCoordinates(
 
 export const sortNodesTs = ({
   nodes,
-  options: { existingNumberNodes },
+  options: { existingNumberNodes, ignoreAlphaCalculation, alpha },
 }: WorkerEvents['simulateSort']['args']) => {
   let exisitingNodes = 0;
   let modifiedNodes = 0;
@@ -76,6 +76,7 @@ export const sortNodesTs = ({
           fieldArgumentCumulated
         );
       }),
+      n.name.length + getTypeName(n.type.fieldType).length,
     );
     const nodeWidth = fieldLengths * 9;
     return {
@@ -124,7 +125,7 @@ export const sortNodesTs = ({
   const removedAdded = Math.abs(
     (existingNumberNodes?.length || 0) - numberNodes.length,
   );
-  const alpha =
+  const retAlpha =
     sameNodes > 0.9
       ? modified
         ? Math.max(Math.min(modifiedNodes * 0.01, 0.5), 0.08)
@@ -134,7 +135,7 @@ export const sortNodesTs = ({
   return {
     numberNodes,
     connections,
-    alpha,
+    alpha: ignoreAlphaCalculation ? (alpha ? alpha : retAlpha) : retAlpha,
   };
 };
 export function createCollisionForce(nodes: NumberNode[]) {

diff --git a/packages/editor-worker/src/worker/validation.worker.ts b/packages/editor-worker/src/worker/validation.worker.ts
@@ -43,6 +43,7 @@ export type WorkerEvents = {
       options: {
         existingNumberNodes?: NumberNode[];
         iterations?: number;
+        ignoreAlphaCalculation?: boolean;
         alpha?: number;
       };
     };

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor",
-  "version": "6.3.4",
+  "version": "6.3.5",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

diff --git a/packages/editor/src/Graf/Node/Field/ActiveGrafType.tsx b/packages/editor/src/Graf/Node/Field/ActiveGrafType.tsx
@@ -8,6 +8,7 @@ export const ActiveGrafType = React.forwardRef<
   Pick<ParserField, 'type'> & {
     parentTypes?: Record<string, string>;
     onClick?: () => void;
+    children?: React.ReactNode;
   }
 >(({ type, parentTypes, onClick, children }, ref) => {
   let compiledType = useMemo(

diff --git a/packages/editor/src/Graf/Node/components/DirectivePlacement/index.tsx b/packages/editor/src/Graf/Node/components/DirectivePlacement/index.tsx
@@ -10,6 +10,7 @@ import { transition } from '@/vars';
 interface NodeDirectiveProps {
   onDelete: () => void;
   isLocked?: boolean;
+  children?: React.ReactNode;
 }
 
 const NodeDirectiveBlock = styled.div<{ isLocked?: boolean }>`

diff --git a/packages/editor/src/Graf/Node/components/FieldPort/index.tsx b/packages/editor/src/Graf/Node/components/FieldPort/index.tsx
@@ -8,6 +8,7 @@ interface FieldPortProps {
     closed: React.ReactNode;
     open: React.ReactNode;
   };
+  children?: React.ReactNode;
   info?: {
     message: string;
     placement: 'top' | 'bottom' | 'left' | 'right';

diff --git a/packages/editor/src/Graf/Node/components/Menu/DetailMenuItem.tsx b/packages/editor/src/Graf/Node/components/Menu/DetailMenuItem.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 interface MenuItemProps {
   onClick: () => void;
+  children?: React.ReactNode;
 }
 
 const Main = styled.div`

diff --git a/packages/editor/src/Graf/Node/components/NodeInterface/index.tsx b/packages/editor/src/Graf/Node/components/NodeInterface/index.tsx
@@ -15,6 +15,7 @@ import {
 interface NodeInterfaceProps {
   onDelete: () => void;
   onDetach: () => void;
+  children?: React.ReactNode;
   isLocked?: boolean;
 }
 

diff --git a/packages/editor/src/Relation/Field/index.tsx b/packages/editor/src/Relation/Field/index.tsx
@@ -35,19 +35,23 @@ export const Field: React.FC<FieldProps> = ({ node, active }) => {
   return (
     <Main
       isActive={active}
-      onClick={(e) => {
-        const parent = getParentOfField(node);
-        if (active && parent) {
-          e.stopPropagation();
-          setSelectedNodeId({
-            source: 'relation',
-            value: {
-              id: parent.id,
-              name: parent.name,
-            },
-          });
-        }
-      }}
+      onClick={
+        active
+          ? (e) => {
+              const parent = getParentOfField(node);
+              if (active && parent) {
+                e.stopPropagation();
+                setSelectedNodeId({
+                  source: 'relation',
+                  value: {
+                    id: parent.id,
+                    name: parent.name,
+                  },
+                });
+              }
+            }
+          : undefined
+      }
     >
       <ActiveFieldName
         name={

diff --git a/packages/editor/src/Relation/Lines/Draw.tsx b/packages/editor/src/Relation/Lines/Draw.tsx
@@ -1,4 +1,3 @@
-import { NumberNode } from 'graphql-editor-worker';
 import { FieldType, Options } from 'graphql-js-tree';
 import React from 'react';
 // import { RELATION_CONSTANTS } from './constants';
@@ -23,27 +22,15 @@ export const Draw = ({
   from,
   to,
   color,
-  PortNumber,
-  maxIndex,
-  relationNumber,
   relationType,
-  network,
 }: {
-  from?: NumberNode;
-  to?: NumberNode;
+  from?: { x: number; y: number };
+  to?: { x: number; y: number };
   color: string;
-  PortNumber: number;
-  maxIndex: number;
-  relationNumber: number;
   relationType: FieldType;
-  network?: boolean;
 }) => {
   const stroke = color;
   if (from && to) {
-    // let pos =
-    //   RELATION_CONSTANTS.TOP_HEIGHT +
-    //   PortNumber * RELATION_CONSTANTS.FIELD_HEIGHT +
-    //   RELATION_CONSTANTS.FIELD_HEIGHT / 2;
     const f = {
       x: from.x,
       y: from.y,
@@ -55,38 +42,6 @@ export const Draw = ({
     const isArray = isArrayType(relationType);
     const fac = isArray ? 5 : 2;
 
-    if (network) {
-      const f = {
-        x: from.x,
-        y: from.y,
-      };
-      const t = {
-        x: to.x,
-        y: to.y,
-      };
-      return (
-        <>
-          <g>
-            <path
-              stroke={stroke}
-              strokeWidth={fac}
-              strokeDasharray={
-                relationType.type === Options.required ? undefined : '5,5'
-              }
-              d={`M ${t.x} ${t.y} L ${f.x} ${f.y}`}
-            />
-            <circle
-              fill={stroke}
-              stroke={stroke}
-              r={7}
-              cx={f.x + 2}
-              cy={f.y + 2}
-            />
-          </g>
-        </>
-      );
-    }
-
     const upDown = f.y > t.y;
     const center = {
       x: (t.x + f.x) / 2.0,

diff --git a/packages/editor/src/Relation/Lines/DrawsOld.tsx b/packages/editor/src/Relation/Lines/DrawsOld.tsx