Skip to content

Commit

Permalink
feat: imrove perfomance, fix edges
Browse files Browse the repository at this point in the history
  • Loading branch information
Rassl committed Nov 29, 2024
1 parent cf79c86 commit 12b5e5b
Show file tree
Hide file tree
Showing 7 changed files with 70 additions and 65 deletions.
7 changes: 4 additions & 3 deletions src/components/mindset/components/Marker/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type Props = {
type: string
name: string
left: number
img: string
}

type BadgeProps = {
Expand All @@ -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,
}

Expand Down
3 changes: 2 additions & 1 deletion src/components/mindset/components/MediaPlayer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,8 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
}
}

console.log(handleProgress)

Check warning on line 133 in src/components/mindset/components/MediaPlayer/index.tsx

View workflow job for this annotation

GitHub Actions / eslint-run

Unexpected console statement

Check warning on line 133 in src/components/mindset/components/MediaPlayer/index.tsx

View workflow job for this annotation

GitHub Actions / craco-build-run

Unexpected console statement

const handleReady = () => {
if (playerRef) {
setStatus('ready')
Expand Down Expand Up @@ -165,7 +167,6 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
onError={handleError}
onPause={handlePause}
onPlay={handlePlay}
onProgress={handleProgress}
onReady={handleReady}
playing={isPlaying}
url={mediaUrl || ''}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
19 changes: 16 additions & 3 deletions src/components/mindset/components/PlayerContols/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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

Expand All @@ -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
Expand Down Expand Up @@ -72,7 +85,7 @@ export const PlayerControl = ({ markers }: Props) => {
duration={duration}
handleProgressChange={handleProgressChange}
markers={markers}
playingTIme={playingTime}
playingTIme={currentTime}
/>
</Wrapper>
) : null
Expand Down
21 changes: 5 additions & 16 deletions src/components/mindset/components/Scene/Board/Edges/index.tsx
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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 (
Expand All @@ -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>
)}
Expand Down
64 changes: 34 additions & 30 deletions src/components/mindset/components/Scene/Board/Node/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
18 changes: 7 additions & 11 deletions src/components/mindset/components/Scene/Board/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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

Expand All @@ -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
}

Expand Down Expand Up @@ -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,
Expand All @@ -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 */}
Expand All @@ -173,7 +170,6 @@ export const Board = () => {
type={relatedNode.node_type}
url={relatedNode?.properties?.image_url || 'logo.png'}
width={nodeWidth}
zoom={zoomState}
/>
))}
</Fragment>
Expand Down

0 comments on commit 12b5e5b

Please sign in to comment.