Merge pull request #2484 from stakwork/feature/edges-improvement

feat: imrove perfomance, fix edges
stakwork · Nov 29, 2024 · 74f75f5 · 74f75f5
2 parents cf79c86 + 12b5e5b
commit 74f75f5
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 65 deletions.
diff --git a/src/components/mindset/components/Marker/index.tsx b/src/components/mindset/components/Marker/index.tsx
@@ -9,6 +9,7 @@ type Props = {
   type: string
   name: string
   left: number
+  img: string
 }
 
 type BadgeProps = {
@@ -17,16 +18,16 @@ type BadgeProps = {
   label: string
 }
 
-export const Marker = memo(({ type, name, left }: Props) => {
+export const Marker = memo(({ type, name, left, img }: Props) => {
   const [normalizedSchemasByType] = useSchemaStore((s) => [s.normalizedSchemasByType])
 
   const primaryColor = normalizedSchemasByType[type]?.primary_color
   const primaryIcon = normalizedSchemasByType[type]?.icon
 
-  const icon = primaryIcon ? `svg-icons/${primaryIcon}.svg` : null
+  const icon = primaryIcon ? `svg-icons/${primaryIcon}.svg` : 'thing_badge.svg'
 
   const badgeProps: Omit<BadgeProps, 'label'> = {
-    iconStart: icon ?? 'thing_badge.svg',
+    iconStart: img ?? icon,
     color: primaryColor ?? colors.THING,
   }
 

diff --git a/src/components/mindset/components/MediaPlayer/index.tsx b/src/components/mindset/components/MediaPlayer/index.tsx
@@ -130,6 +130,8 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
     }
   }
 
+  console.log(handleProgress)
+
   const handleReady = () => {
     if (playerRef) {
       setStatus('ready')
@@ -165,7 +167,6 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
           onError={handleError}
           onPause={handlePause}
           onPlay={handlePlay}
-          onProgress={handleProgress}
           onReady={handleReady}
           playing={isPlaying}
           url={mediaUrl || ''}

diff --git a/src/components/mindset/components/PlayerContols/ProgressBar/index.tsx b/src/components/mindset/components/PlayerContols/ProgressBar/index.tsx
@@ -19,8 +19,9 @@ export const ProgressBar = ({ duration, markers, handleProgressChange, playingTI
       const position = ((node?.start || 0) / duration) * 100
       const type = node?.node_type || ''
       const name = node?.properties?.name || ''
+      const img = node?.properties?.image_url || ''
 
-      return <Marker key={node.ref_id} left={position} name={name} type={type} />
+      return <Marker key={node.ref_id} img={img} left={position} name={name} type={type} />
     })}
   </ProgressWrapper>
 )

diff --git a/src/components/mindset/components/PlayerContols/index.tsx b/src/components/mindset/components/PlayerContols/index.tsx
@@ -1,5 +1,5 @@
 import { IconButton } from '@mui/material'
-import { useCallback } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import PauseIcon from '~/components/Icons/PauseIcon'
 import PlayIcon from '~/components/Icons/PlayIcon'
@@ -14,7 +14,8 @@ type Props = {
 }
 
 export const PlayerControl = ({ markers }: Props) => {
-  const { isPlaying, setIsPlaying, playingTime, playingNode, playerRef } = usePlayerStore((s) => s)
+  const { isPlaying, setIsPlaying, playingNode, playerRef } = usePlayerStore((s) => s)
+  const [currentTime, setCurrentTime] = useState(0)
 
   const showPlayer = playingNode
 
@@ -29,6 +30,18 @@ export const PlayerControl = ({ markers }: Props) => {
     [playerRef],
   )
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (playerRef && setCurrentTime) {
+        const time = playerRef.getCurrentTime()
+
+        setCurrentTime(time)
+      }
+    }, 100)
+
+    return () => clearInterval(interval)
+  }, [playerRef, setCurrentTime])
+
   const handleRewind = () => {
     if (playerRef) {
       const newTime = playerRef.getCurrentTime() - 15
@@ -72,7 +85,7 @@ export const PlayerControl = ({ markers }: Props) => {
         duration={duration}
         handleProgressChange={handleProgressChange}
         markers={markers}
-        playingTIme={playingTime}
+        playingTIme={currentTime}
       />
     </Wrapper>
   ) : null

diff --git a/src/components/mindset/components/Scene/Board/Edges/index.tsx b/src/components/mindset/components/Scene/Board/Edges/index.tsx
@@ -1,28 +1,24 @@
 import { Text } from '@react-three/drei'
 import { useMemo } from 'react'
 import { Vector3 } from 'three'
+import { fontProps } from '~/components/Universe/Graph/Cubes/Text/constants'
 
 type Props = {
   sourcePosition: { x: number; y: number; z: number }
   targetPosition: { x: number; y: number; z: number }
   color?: string
   arrowSize?: number
-  label?: string // Добавляем текстовую метку
+  label?: string
 }
 
 export const Edge = ({ sourcePosition, targetPosition, color = 'white', arrowSize = 1, label = 'label' }: Props) => {
-  const { points, textPosition, textRotation } = useMemo(() => {
+  const { points, textPosition } = useMemo(() => {
     const start = new Vector3(sourcePosition.x, sourcePosition.y, sourcePosition.z)
     const end = new Vector3(targetPosition.x, targetPosition.y, targetPosition.z)
 
-    // Вычисляем направление и середину линии
     const direction = new Vector3().subVectors(end, start).normalize()
     const midpoint = new Vector3().addVectors(start, end).multiplyScalar(0.5)
 
-    // Угол поворота текста относительно оси Z
-    const angle = Math.atan2(direction.y, direction.x)
-
-    // Вычисляем точки для линии и стрелок
     const arrowLeft = new Vector3()
       .copy(direction)
       .multiplyScalar(-arrowSize)
@@ -35,7 +31,7 @@ export const Edge = ({ sourcePosition, targetPosition, color = 'white', arrowSiz
 
     const pointsFinal = [start, end, end.clone(), end.clone().add(arrowLeft), end.clone(), end.clone().add(arrowRight)]
 
-    return { points: pointsFinal, textPosition: midpoint, textRotation: angle }
+    return { points: pointsFinal, textPosition: midpoint }
   }, [sourcePosition, targetPosition, arrowSize])
 
   return (
@@ -52,14 +48,7 @@ export const Edge = ({ sourcePosition, targetPosition, color = 'white', arrowSiz
         <lineBasicMaterial color={color} />
       </line>
       {label && (
-        <Text
-          anchorX="center"
-          anchorY="middle"
-          color={color}
-          fontSize={1}
-          position={textPosition}
-          rotation={[0, 0, textRotation]} // Поворот текста
-        >
+        <Text anchorX="center" anchorY="middle" color={color} {...fontProps} position={textPosition}>
           {label}
         </Text>
       )}

diff --git a/src/components/mindset/components/Scene/Board/Node/index.tsx b/src/components/mindset/components/Scene/Board/Node/index.tsx
@@ -1,4 +1,5 @@
 import { Html } from '@react-three/drei'
+import { useThree } from '@react-three/fiber'
 import { memo } from 'react'
 import { Flex } from '~/components/common/Flex'
 import { RoundedRectangle } from '../RoundedRectangle'
@@ -14,38 +15,41 @@ type Props = {
   name: string
   type: string
   color: string
-  zoom: number
 }
 
-export const Node = memo(({ width, height, position, url, onButtonClick, name, type, color, zoom }: Props) => (
-  <group position={position}>
-    {/* Background Rectangle */}
-    <RoundedRectangle color={color} height={height} radius={1.5} width={width} />
-    {false && <Image height={height} url={url} width={width} />}
+export const Node = memo(({ width, height, position, url, onButtonClick, name, type, color }: Props) => {
+  const { camera } = useThree()
 
-    {/* Html */}
-    {true && (
-      <Html position={[-width / 2, height / 2, 0]}>
-        <Flex
-          onClick={() => onButtonClick()}
-          style={{
-            fontSize: '12px',
-            color: 'white',
-            fontWeight: 600,
-            width: `${width * zoom}px`,
-            height: `${height * zoom}px`,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            borderRadius: '8px',
-            pointerEvents: 'auto', // Allow interaction with the HTML element
-          }}
-        >
-          <Content name={`${name}`} type={type || ''} url={url} />
-        </Flex>
-      </Html>
-    )}
-  </group>
-))
+  return (
+    <group position={position}>
+      {/* Background Rectangle */}
+      <RoundedRectangle color={color} height={height} radius={1.5} width={width} />
+      {false && <Image height={height} url={url} width={width} />}
+
+      {/* Html */}
+      {true && (
+        <Html position={[-width / 2, height / 2, 0]}>
+          <Flex
+            onClick={() => onButtonClick()}
+            style={{
+              fontSize: '12px',
+              color: 'white',
+              fontWeight: 600,
+              width: `${width * camera.zoom}px`,
+              height: `${height * camera.zoom}px`,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderRadius: '8px',
+              pointerEvents: 'auto', // Allow interaction with the HTML element
+            }}
+          >
+            <Content name={`${name}`} type={type || ''} url={url} />
+          </Flex>
+        </Html>
+      )}
+    </group>
+  )
+})
 
 Node.displayName = 'Node'
diff --git a/src/components/mindset/components/Scene/Board/index.tsx b/src/components/mindset/components/Scene/Board/index.tsx
@@ -1,5 +1,5 @@
 import { useThree } from '@react-three/fiber'
-import { Fragment, useEffect, useMemo, useState } from 'react'
+import { Fragment, useEffect, useMemo } from 'react'
 import { Vector3 } from 'three'
 import { useDataStore } from '~/stores/useDataStore'
 import { Link } from '~/types'
@@ -27,8 +27,6 @@ export const Board = () => {
   const { dataInitial } = useDataStore((s) => s)
   const { camera, viewport } = state
 
-  const [zoomState, setZoomState] = useState(camera.zoom)
-
   useEffect(() => {
     const orthoCamera = camera as THREE.OrthographicCamera
 
@@ -39,13 +37,11 @@ export const Board = () => {
         // Zoom the camera when ctrlKey is pressed
         orthoCamera.zoom += event.deltaY * -0.1 // Adjust zoom level
         orthoCamera.zoom = Math.max(2, Math.min(orthoCamera.zoom, 20)) // Clamp zoom
-
-        setZoomState(orthoCamera.zoom)
-      } else {
-        // Move the camera left/right when ctrlKey is NOT pressed
-        orthoCamera.position.x += event.deltaX * 0.1 // Horizontal movement
       }
 
+      // Move the camera left/right when ctrlKey is NOT pressed
+      orthoCamera.position.x += event.deltaX * 0.1 // Horizontal movement
+
       orthoCamera.updateProjectionMatrix() // Update projection matrix
     }
 
@@ -135,7 +131,9 @@ export const Board = () => {
     }, {} as Record<string, { nodes: typeof dataInitial.nodes; edges: LinkExtended[] }>)
 
     // Combine all edges from relatedNodesWithEdges
-    const allEdgesWithPositions = Object.values(relatedNodesWithEdges).flatMap((group) => group.edges)
+    const allEdgesWithPositions = Object.values(relatedNodesWithEdges)
+      .flatMap((group) => group.edges)
+      .filter((i) => i?.sourcePositions?.x)
 
     return {
       nodes: nodesWithPositions,
@@ -158,7 +156,6 @@ export const Board = () => {
             type={node.node_type}
             url={node?.properties?.image_url || 'logo.png'}
             width={nodeWidth}
-            zoom={zoomState}
           />
 
           {/* Render Related Nodes */}
@@ -173,7 +170,6 @@ export const Board = () => {
               type={relatedNode.node_type}
               url={relatedNode?.properties?.image_url || 'logo.png'}
               width={nodeWidth}
-              zoom={zoomState}
             />
           ))}
         </Fragment>