Fix viewport to center

warioddly · May 13, 2024 · 53bfa48 · 53bfa48
1 parent fa87e8f
commit 53bfa48
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 93 deletions.
diff --git a/src/assets/data/data.json b/src/assets/data/data.json
diff --git a/src/components/tree/TreeInteractiveViewer.tsx b/src/components/tree/TreeInteractiveViewer.tsx
@@ -28,17 +28,6 @@ export function TreeInteractiveViewer() {
   const [highlighter, setHighlighter] = useState<CollectionReturnValue | null>(null)
 
 
-  useEffect(() => {
-
-    if (loading) {
-      return;
-    }
-
-    treeStore.cy.fit();
-
-  }, [loading]);
-
-
   useEffect(() => {
 
     fetch('/api/get-nodes', {
@@ -133,7 +122,7 @@ export function TreeInteractiveViewer() {
                   autounselectify={false}
                   boxSelectionEnabled={false}
                   style={{ width: '100vw', height: '100vh' }}
-                  cy={(cy) => {
+                  cy={(cy: cytoscape.Core) => {
                       treeStore.cy = cy;
                       cy.on('tap', handleNodeClick);
                   }}

diff --git a/src/components/tree/TreeViewActions.tsx b/src/components/tree/TreeViewActions.tsx
@@ -0,0 +1,86 @@
+"use client";
+import IconButton from "@/components/other/IconButton";
+import {useTreeStore} from "@/core/stores/tree";
+import {theme} from "@/core/styles/theme";
+import {ECytoscapeLayouts, ETreeHighlight} from "@/core/types/tree";
+
+export function TreeViewActions() {
+
+  const treeStore = useTreeStore();
+
+  return (
+      <div className={`flex flex-col gap-2 z-30 fixed ${treeStore.selected ? "top-1/3" : "top-1/2"} px-4 right-0`} role="group">
+          <TreeViewVariant/>
+          {treeStore.selected && <EdgeHighlightVariant/>}
+      </div>
+  );
+}
+
+function TreeViewVariant() {
+
+    const treeStore = useTreeStore();
+
+    return (
+        <div className="flex flex-col gap-1" >
+
+            <IconButton
+                onClick={() => treeStore.layout !== ECytoscapeLayouts.Cola && treeStore.setLayout(ECytoscapeLayouts.Cola)}
+                className={treeStore.layout === ECytoscapeLayouts.Cola ? `bg-${theme.button.primary}` : ''}
+                icon={
+                (
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
+                         stroke="currentColor" className="w-6 h-6">
+                        <path strokeLinecap="round" strokeLinejoin="round"
+                              d="m21 7.5-2.25-1.313M21 7.5v2.25m0-2.25-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3 2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75 2.25-1.313M12 21.75V19.5m0 2.25-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"/>
+                    </svg>
+                )
+            } />
+
+            <IconButton
+                onClick={() => treeStore.layout !== ECytoscapeLayouts.Dagre && treeStore.setLayout(ECytoscapeLayouts.Dagre)}
+                className={treeStore.layout === ECytoscapeLayouts.Dagre ? theme.button.primary : ''}
+                icon={(
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
+                         stroke="currentColor" className="w-6 h-6">
+                        <path strokeLinecap="round" strokeLinejoin="round"
+                              d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"/>
+                    </svg>
+                )}/>
+
+        </div>
+    )
+}
+
+
+function EdgeHighlightVariant() {
+
+    const treeStore = useTreeStore();
+
+    return (
+        <div className="">
+            {
+                treeStore.highlightType !== ETreeHighlight.Predecessors
+                    ? (<IconButton
+                        onClick={() => treeStore.setHighlightType(ETreeHighlight.Predecessors)}
+                        icon={
+                            (
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                     strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 18.75 7.5-7.5 7.5 7.5"/>
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 7.5-7.5 7.5 7.5"/>
+                                </svg>
+                            )
+                        }/>)
+                    : (<IconButton
+                        onClick={() => treeStore.setHighlightType(ETreeHighlight.Successors)}
+                        icon={(
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
+                                 stroke="currentColor" className="w-6 h-6">
+                                <path strokeLinecap="round" strokeLinejoin="round"
+                                      d="m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5"/>
+                            </svg>
+                        )}/>)
+            }
+        </div>
+    )
+}
diff --git a/src/components/tree/TreeViewToolbar.tsx b/src/components/tree/TreeViewToolbar.tsx
@@ -3,10 +3,9 @@
 import {ChangeEvent, useState} from "react";
 import {TreeNodeDefinition} from "@/core/types/tree-definition";
 import {debounce} from "@/core/utils/utils";
-import IconButton from "@/components/other/IconButton";
 import {useTreeStore} from "@/core/stores/tree";
 import {theme} from "@/core/styles/theme";
-import {ECytoscapeLayouts, ETreeHighlight} from "@/core/types/tree";
+import {TreeViewActions} from "@/components/tree/TreeViewActions";
 
 export function TreeViewToolbar() {
 
@@ -15,9 +14,8 @@ export function TreeViewToolbar() {
   return (
       <>
           <SearchField/>
-          <div className="flex flex-col gap-2 z-30 fixed top-1/2 px-4 right-0" role="group">
-              <TreeViewVariant/>
-              {treeStore.selected && <EdgeHighlightVariant/>}
+          <div className={`flex flex-col gap-2 z-30 fixed ${treeStore.selected ? "top-1/3" : "top-1/2"} px-4 right-0`} role="group">
+              <TreeViewActions />
           </div>
       </>
   );
@@ -121,73 +119,3 @@ function SearchField() {
         </div>
     )
 }
-
-
-function TreeViewVariant() {
-
-    const treeStore = useTreeStore();
-
-    return (
-        <div className="flex flex-col gap-1" >
-
-            <IconButton
-                onClick={() => treeStore.layout !== ECytoscapeLayouts.Cola && treeStore.setLayout(ECytoscapeLayouts.Cola)}
-                className={treeStore.layout === ECytoscapeLayouts.Cola ? `bg-${theme.button.primary}` : ''}
-                icon={
-                (
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
-                         stroke="currentColor" className="w-6 h-6">
-                        <path strokeLinecap="round" strokeLinejoin="round"
-                              d="m21 7.5-2.25-1.313M21 7.5v2.25m0-2.25-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3 2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75 2.25-1.313M12 21.75V19.5m0 2.25-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"/>
-                    </svg>
-                )
-            } />
-
-            <IconButton
-                onClick={() => treeStore.layout !== ECytoscapeLayouts.Dagre && treeStore.setLayout(ECytoscapeLayouts.Dagre)}
-                className={treeStore.layout === ECytoscapeLayouts.Dagre ? theme.button.primary : ''}
-                icon={(
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
-                         stroke="currentColor" className="w-6 h-6">
-                        <path strokeLinecap="round" strokeLinejoin="round"
-                              d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z"/>
-                    </svg>
-                )}/>
-
-        </div>
-    )
-}
-
-
-function EdgeHighlightVariant() {
-
-    const treeStore = useTreeStore();
-
-    return (
-        <div className="">
-            {
-                treeStore.highlightType !== ETreeHighlight.Predecessors
-                    ? (<IconButton
-                        onClick={() => treeStore.setHighlightType(ETreeHighlight.Predecessors)}
-                        icon={
-                            (
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                     strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
-                                    <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 18.75 7.5-7.5 7.5 7.5"/>
-                                    <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 7.5-7.5 7.5 7.5"/>
-                                </svg>
-                            )
-                        }/>)
-                    : (<IconButton
-                        onClick={() => treeStore.setHighlightType(ETreeHighlight.Successors)}
-                        icon={(
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
-                                 stroke="currentColor" className="w-6 h-6">
-                                <path strokeLinecap="round" strokeLinejoin="round"
-                                      d="m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5"/>
-                            </svg>
-                        )}/>)
-            }
-        </div>
-    )
-}
diff --git a/src/core/data/cytoscape-layouts.ts b/src/core/data/cytoscape-layouts.ts
@@ -21,9 +21,9 @@ export const cytoscapeLayouts: { [key in ECytoscapeLayouts]: any; }  = {
         animate: false,
         directed: false,
         avoidOverlap: true,
-        fit: false,
+        fit: true,
         padding: 30,
-        nodeDimensionsIncludeLabels: false,
+        nodeDimensionsIncludeLabels: true,
         randomize: false,
         handleDisconnected: false,
         convergenceThreshold: 0.01,

diff --git a/src/core/stores/tree.ts b/src/core/stores/tree.ts
@@ -1,10 +1,11 @@
 import { create } from 'zustand'
 import {TreeNodeDataDefinition} from "@/core/types/tree-definition";
 import {ECytoscapeLayouts, ETreeHighlight} from "@/core/types/tree";
+import cytoscape from "cytoscape";
 
 
 type TTreeStore = {
-    cy: any;
+    cy: cytoscape.Core | null;
     event: MouseEvent | null;
     selected: TreeNodeDataDefinition | null;
     layout: ECytoscapeLayouts;
@@ -13,7 +14,6 @@ type TTreeStore = {
     setSelected: (selected: TreeNodeDataDefinition | null) => void;
     setHighlightType: (highlightType: ETreeHighlight) => void;
     setEvent: (event: any) => void;
-    setCy: (cy?: any) => void;
 }
 
 export const useTreeStore = create<TTreeStore>((set, get) => ({
@@ -38,5 +38,4 @@ export const useTreeStore = create<TTreeStore>((set, get) => ({
     },
     setHighlightType: (highlightType) => set(() => ({ highlightType })),
     setEvent: (event) => set(() => ({ event })),
-    setCy: (cy?: any) => set(() => ({ cy })),
 }))
diff --git a/src/core/types/tailwind.ts b/src/core/types/tailwind.ts
@@ -48,6 +48,7 @@ export type TailwindBorderRadius =
     | "rounded-3xl"
     | "rounded-full";
 
+
 export type TailwindBlur =
     | 'backdrop-filter backdrop-blur-sm bg-opacity-20'
     | 'backdrop-filter backdrop-blur-md bg-opacity-20'