feat: File explorer (#103)

* Fix virtual dir nodes

* Draft: file explorer

* Node selection

* Colors to selected and highlighted nodes

* Refactor use exclusively a tagging system for the FolderState.ts

* Refactor folder explorers

* File colors and animated dots

* Fix bug

* Comment test data

* Commit generated file

web/package.json

@@ -12,6 +12,10 @@
  "generate": "tygo generate # go install github.com/gzuidhof/tygo@latest"
  },
  "dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^6.5.2",
+ "@fortawesome/free-brands-svg-icons": "^6.5.2",
+ "@fortawesome/free-solid-svg-icons": "^6.5.2",
+ "@fortawesome/react-fontawesome": "^0.2.2",
  "leva": "^0.9.35",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",

web/src/@utils/useForceUpdate.ts

@@ -0,0 +1,6 @@
+import React from "react";
+
+export function useForceUpdate() {
+ const [, updateState] = React.useState({});
+ return React.useCallback(() => updateState({}), []);
+}

web/src/App.css

@@ -1,3 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+ .scrollbar-thin {
+ scrollbar-width: thin;
+ }
+
+ .scrollbar-transparent {
+ /* For Webkit browsers like Chrome, Safari */
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: rgba(155, 155, 155, 0.5);
+ border-radius: 20px;
+ border: transparent;
+ }
+
+ /* For Firefox */
+ scrollbar-width: thin;
+ scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
+ }
+}
+
 body {
  margin: 0;
  background-color: #000015;

web/src/App.tsx

@@ -11,6 +11,7 @@ import { Leva, useControls } from "leva";
 import { buildXGraph, XLink, XNode } from "./XGraph.ts";
 import { HSVtoRGB } from "./@utils/HSVtoRGB.ts";
 import { Graph } from "./types.ts";
+import { Explorer } from "./Explorer/Explorer.tsx";
 
 import './App.css'
 
@@ -49,7 +50,7 @@ const DEFAULT_SETTINGS = {
 
 const UNREAL_BLOOM_PASS = new UnrealBloomPass()
 
-const { xGraph: X_GRAPH, nodes: NODES } = buildXGraph(Data.__INLINE_DATA)
+const { xGraph: X_GRAPH, nodes: NODES, fileTree: FILE_TREE } = buildXGraph(Data.__INLINE_DATA)
 
 function App () {
  const [highlightNodes, setHighlightNodes] = useState(new Set<XNode>())
@@ -133,6 +134,11 @@ function App () {
  graph.current?.cameraPosition({ x: x * distRatio, y: y * distRatio, z: z * distRatio }, { x, y, z }, 1000)
  }
 
+ function nodeClick(node: XNode) {
+ selectNode(node)
+ centerOnNode(node)
+ }
+
  useEffect(() => {
  graph.current?.postProcessingComposer().removePass(UNREAL_BLOOM_PASS)
  UNREAL_BLOOM_PASS.strength = settings.BLOOM_PASS_STRENGTH
@@ -189,10 +195,7 @@ function App () {
  nodeVisibility={node => !node.isDir && !node.isPackage}
  nodeColor={colorNode}
  nodeOpacity={1}
- onNodeClick={node => {
- selectNode(node)
- centerOnNode(node)
- }}
+ onNodeClick={nodeClick}
  linkDirectionalArrowLength={4}
  linkDirectionalArrowRelPos={1}
  linkColor={colorLink}
@@ -204,6 +207,13 @@ function App () {
  linkDirectionalParticles={link => highlightLinks.has(link) ? 2 : 0}
  linkDirectionalParticleWidth={settings.LINK_HIGHLIGHT_WIDTH}
  />
+ <Explorer
+ className={'fixed top-0 left-0 max-h-full bg-transparent'}
+ fileTree={FILE_TREE}
+ onSelectNode={nodeClick}
+ selected={selectedNode}
+ highlighted={highlightNodes}
+ />
  <Leva hidden={!X_GRAPH.enableGui}/>
  </>
  )

web/src/Explorer/Explorer.css

@@ -0,0 +1,37 @@
+@keyframes moveLeftRight {
+ 0% {
+ left: 50%;
+ opacity: 0;
+ }
+ 50% {
+ left: 75%;
+ opacity: 1;
+ }
+ 100% {
+ left: 100%;
+ opacity: 0;
+ }
+}
+
+.animate-left-right {
+ animation: moveLeftRight 500ms linear infinite;
+}
+
+@keyframes moveRightLeft {
+ 0% {
+ left: 100%;
+ opacity: 0;
+ }
+ 50% {
+ left: 75%;
+ opacity: 1;
+ }
+ 100% {
+ left: 50%;
+ opacity: 0;
+ }
+}
+
+.animate-right-left {
+ animation: moveRightLeft 500ms linear infinite;
+}