performance

graphql-editor · Jan 30, 2024 · 8fb3fda · 8fb3fda
1 parent afed9f6
commit 8fb3fda
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/editor-worker/package.json b/packages/editor-worker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor-worker",
-  "version": "7.1.4",
+  "version": "7.1.5",
   "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": "7.1.4",
+  "version": "7.1.5",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",
@@ -45,7 +45,7 @@
     "file-saver": "^2.0.5",
     "framer-motion": "^10.12.16",
     "fuzzyjs": "^5.0.1",
-    "graphql-editor-worker": "^7.1.4",
+    "graphql-editor-worker": "^7.1.5",
     "graphql-js-tree": "^1.0.9",
     "graphql-language-service": "3.1.4",
     "html-to-image": "^1.10.8",

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/Draw.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/Draw.tsx
@@ -26,26 +26,27 @@ export const Draw = ({
   color,
   relationType,
   isPrintPreviewActive,
+  optimized,
 }: {
   from?: { x: number; y: number; id: string };
   to?: { x: number; y: number; id: string };
   color: string;
   relationType: FieldType;
   isPrintPreviewActive: boolean;
+  optimized?: boolean;
 }) => {
   const stroke = color;
-
-  const getLineType = useMemo(() => {
+  const fac = useMemo(() => {
     if (
       relationType.type === Options.name &&
       relationType.name === "refInterface"
     ) {
-      return "2 7";
+      return 1;
     }
     if (relationType.type === Options.required) {
-      return undefined;
+      return 2;
     }
-    return "10 5";
+    return 1;
   }, [relationType]);
 
   if (from && to) {
@@ -57,8 +58,6 @@ export const Draw = ({
       x: to.x,
       y: to.y,
     };
-    const isArray = isArrayType(relationType);
-    const fac = isArray ? 5 : 2;
 
     const upDown = f.y > t.y;
     const center = {
@@ -105,9 +104,10 @@ export const Draw = ({
       bezierPoint2,
       bezierWeight
     );
+    const PathComponent = optimized ? OptimizedPathG : PathG;
 
     return (
-      <PathG
+      <PathComponent
         data-from={from.id}
         data-to={to.id}
         className={`${DOMClassNames.nodeConnection} inViewport`}
@@ -116,24 +116,16 @@ export const Draw = ({
         <path
           stroke={stroke}
           strokeWidth={fac}
-          strokeDasharray={getLineType}
           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={4} cx={t.x} cy={t.y} />
-        <circle fill={stroke} stroke={stroke} r={8} cx={f.x} cy={f.y} />
-      </PathG>
+      </PathComponent>
     );
   }
   return <></>;
 };
 
-const isArrayType = (f: FieldType) =>
-  f.type === Options.required
-    ? f.nest.type === Options.array
-    : f.type === Options.array;
-
 const PathG = styled.g<{ isPrintPreviewActive: boolean }>`
   opacity: ${({ isPrintPreviewActive }) => (isPrintPreviewActive ? 1 : 0)};
   transition: ${transition};
@@ -149,3 +141,21 @@ const PathG = styled.g<{ isPrintPreviewActive: boolean }>`
     }
   }
 `;
+
+const OptimizedPathG = styled.g<{ isPrintPreviewActive: boolean }>`
+  visibility: ${({ isPrintPreviewActive }) =>
+    isPrintPreviewActive ? "visible" : "hidden"};
+  transition: ${transition};
+  &.inViewport {
+    visibility: visible;
+    &.selection {
+      visibility: ${({ isPrintPreviewActive }) =>
+        isPrintPreviewActive ? "visible" : "hidden"};
+    }
+  }
+  &.selection {
+    &.${DOMClassNames.active} {
+      visibility: visible;
+    }
+  }
+`;
diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/index.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Lines/index.tsx
@@ -34,7 +34,8 @@ export const Lines: React.FC<LinesProps> = ({
   isPrintPreviewActive,
 }) => {
   const { theme } = useTheme();
-
+  const relationCount = relations?.length || 0;
+  const optimized = relationCount > 200;
   return (
     <RelationsContainer>
       {relations?.map((r, index) => {
@@ -44,6 +45,7 @@ export const Lines: React.FC<LinesProps> = ({
               const relationType = rf.connectingField.type.fieldType;
               return (
                 <Draw
+                  optimized={optimized}
                   relationType={relationType}
                   color={
                     theme.colors[
@@ -61,6 +63,7 @@ export const Lines: React.FC<LinesProps> = ({
             })}
             {r.interfaces.map((refNode, refNodeNumber) => (
               <Draw
+                optimized={optimized}
                 relationType={{
                   name: "refInterface",
                   type: Options.name,

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/LinesDiagram.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/LinesDiagram.tsx
@@ -94,6 +94,8 @@ export interface RelationInterface {
   interfaces: NumberNode[];
 }
 
+let lastTimestamp = 0;
+
 export const LinesDiagram = React.forwardRef<
   LinesDiagramApi,
   LinesDiagramProps
@@ -237,9 +239,15 @@ export const LinesDiagram = React.forwardRef<
   ) => {
     if (simulatedNodes && !props.hide) {
       const size = wrapper.getBoundingClientRect();
-      changeZoomInTopBar(state.scale);
+      changeZoomInTopBar;
+      // changeZoomInTopBar(state.scale);
       if (!size) return;
-      requestAnimationFrame(() => {
+      requestAnimationFrame((timeStamp) => {
+        const delta = timeStamp - lastTimestamp;
+        if (delta < 60) {
+          return;
+        }
+        lastTimestamp = timeStamp;
         cullNodes(simulatedNodes, state, size);
         if (props.fieldsOn) {
           LoDNodes(state.scale);

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/ActiveType.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/Field/ActiveType.tsx
@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import { ParserField } from "graphql-js-tree";
 import { compileScalarTypes, compileTypeOptions } from "@/GraphQL/Compile";
 import styled from "@emotion/styled";
-import { transition } from "@/vars";
 export const ActiveType: React.FC<
   Pick<ParserField, "type"> & {
     parentTypes?: Record<string, string>;
@@ -39,7 +38,6 @@ const AType = styled.a<{ clickable?: boolean; color?: string }>`
         ? theme.colors[color as keyof typeof theme.colors]
         : theme.text.default
       : theme.text.default};
-  transition: ${transition};
   :hover {
     color: ${({ color, theme, clickable }) => {
       if (!clickable) {

diff --git a/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/index.tsx b/packages/editor/src/Relation/PanZoom/LinesDiagram/Node/index.tsx
@@ -133,7 +133,6 @@ const NodeTitle = styled.div`
   font-size: 14px;
   font-weight: 500;
   padding: 12px;
-  transition: ${transition};
   display: flex;
   left: 0;
   top: 0;
@@ -143,7 +142,6 @@ const NodeTitlePlaceholder = styled.div`
   align-items: center;
   font-size: 14px;
   font-weight: 500;
-  transition: ${transition};
   display: flex;
   pointer-events: none;
   visibility: hidden;
@@ -209,6 +207,7 @@ interface NodeProps {
   numberNode: NumberNode;
   isLibrary?: boolean;
   isReadOnly?: boolean;
+  optimized?: boolean;
 }
 
 export const Node: React.FC<NodeProps> = (props) => {

diff --git a/packages/editor/src/shared/hooks/useDomManager.ts b/packages/editor/src/shared/hooks/useDomManager.ts
@@ -53,10 +53,10 @@ export const useDomManagerTs = (parent: "focus" | "all") => {
     DOMGraphConnection.toggleClassByFn("inViewport", (e) => {
       const svgElem = e as SVGGElement;
       return !!(
-        svgElem.dataset["from"] &&
-        nodesInViewport.includes(svgElem.dataset["from"]) &&
-        svgElem.dataset["to"] &&
-        nodesInViewport.includes(svgElem.dataset["to"])
+        (svgElem.dataset["from"] &&
+          nodesInViewport.includes(svgElem.dataset["from"])) ||
+        (svgElem.dataset["to"] &&
+          nodesInViewport.includes(svgElem.dataset["to"]))
       );
     });
     DOMGraphNode.toggleClassByFn("inViewport", (e) => {
@@ -66,7 +66,8 @@ export const useDomManagerTs = (parent: "focus" | "all") => {
   const cullNodes = (
     nodes: NumberNode[],
     state: ReactZoomPanPinchState,
-    size: DOMRect
+    size: DOMRect,
+    extraAreaPercentage = 0.0
   ) => {
     const pan = {
       x: state.positionX / state.scale,
@@ -78,8 +79,8 @@ export const useDomManagerTs = (parent: "focus" | "all") => {
       h: size.height / state.scale,
     };
     const bb = {
-      x: [-pan.x, -pan.x + viewport.w],
-      y: [-pan.y, -pan.y + viewport.h],
+      x: [-pan.x, -pan.x + viewport.w * (1 + extraAreaPercentage)],
+      y: [-pan.y, -pan.y + viewport.h * (1 + extraAreaPercentage)],
     };
     const activeNodes = nodes
       .filter((node) => {

diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sandbox",
-  "version": "7.1.4",
+  "version": "7.1.5",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",
@@ -49,7 +49,7 @@
     "@aexol-studio/styling-system": "^0.0.8",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "graphql-editor": "^7.1.4",
+    "graphql-editor": "^7.1.5",
     "graphql-js-tree": "^0.1.6",
     "socket.io-client": "^4.7.2"
   },

diff --git a/packages/socket-live-test/package.json b/packages/socket-live-test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "socket-live-test",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "testing editor live",
   "main": "index.js",
   "type": "module",

diff --git a/packages/svg-ts-sync/package.json b/packages/svg-ts-sync/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svg-ts-sync",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "private": false,
   "license": "MIT",
   "description": "Sync folders with svg's to react typescript components",