diff --git a/src/components/mindset/components/Marker/index.tsx b/src/components/mindset/components/Marker/index.tsx index 812359cbd..2685a39a3 100644 --- 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 = { - 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 index 0df0a6f10..46e373678 100644 --- 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 index 3e1e8a045..e0527b3da 100644 --- 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 + return })} ) diff --git a/src/components/mindset/components/PlayerContols/index.tsx b/src/components/mindset/components/PlayerContols/index.tsx index a78ab57c9..d24561524 100644 --- 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} /> ) : null diff --git a/src/components/mindset/components/Scene/Board/Edges/index.tsx b/src/components/mindset/components/Scene/Board/Edges/index.tsx index aedea3f1b..2f3e8432f 100644 --- 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 {label && ( - + {label} )} diff --git a/src/components/mindset/components/Scene/Board/Node/index.tsx b/src/components/mindset/components/Scene/Board/Node/index.tsx index 0021754ba..7392d8bfe 100644 --- 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) => ( - - {/* Background Rectangle */} - - {false && } +export const Node = memo(({ width, height, position, url, onButtonClick, name, type, color }: Props) => { + const { camera } = useThree() - {/* Html */} - {true && ( - - 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 - }} - > - - - - )} - -)) + return ( + + {/* Background Rectangle */} + + {false && } + + {/* Html */} + {true && ( + + 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 + }} + > + + + + )} + + ) +}) Node.displayName = 'Node' diff --git a/src/components/mindset/components/Scene/Board/index.tsx b/src/components/mindset/components/Scene/Board/index.tsx index 7794968c7..903c89049 100644 --- 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) // 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} /> ))}