Skip to content

Commit

Permalink
feat: update blocks metadata on paused visualizer
Browse files Browse the repository at this point in the history
  • Loading branch information
VmMad committed Feb 12, 2024
1 parent d1bb492 commit 308bab2
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 61 deletions.
71 changes: 34 additions & 37 deletions client/src/features/visualizer-threejs/VisualizerInstance.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,13 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
useEffect(() => {
const handleVisibilityChange = async () => {
if (document.hidden) {
await feedSubscriptionStop();
await feedSubscriptionFinalize();
setIsPlaying(false);
}
};

const handleBlur = async () => {
await feedSubscriptionStop();
await feedSubscriptionFinalize();
setIsPlaying(false);
};

Expand Down Expand Up @@ -118,13 +118,9 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
return;
}

if (isPlaying) {
feedSubscriptionStart();
} else {
await feedSubscriptionStop();
}
feedSubscriptionStart();
})();
}, [feedService, isPlaying, runListeners]);
}, [feedService, runListeners]);

/**
* Control width and height of canvas
Expand Down Expand Up @@ -157,18 +153,46 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
setRunListeners(false);
setIsPlaying(false);
resetConfigState();
await feedSubscriptionStop();
await feedSubscriptionFinalize();
setFeedService(ServiceFactory.get<NovaFeedClient>(`feed-${network}`));
})();
}, [network]);

useEffect(() => {
if (!runListeners) {
return;
}
setIsPlaying(true);

return () => {
bpsCounter.stop();
};
}, [runListeners]);

const feedSubscriptionStart = () => {
if (!feedService) {
return;
}
feedService.subscribeBlocks(onNewBlock, onBlockMetadataUpdate);

bpsCounter.start();
};

const feedSubscriptionFinalize = async () => {
if (!feedService) {
return;
}
await feedService.unsubscribeBlocks();
bpsCounter.reset();
};

/**
* Subscribe to updates
* @param blockData The new block data
*/
const onNewBlock = (blockData: IFeedBlockData) => {
const emitterObj = emitterRef.current;
if (emitterObj && blockData) {
if (emitterObj && blockData && isPlaying) {
const emitterBox = new Box3().setFromObject(emitterObj);

const emitterCenter = new THREE.Vector3();
Expand Down Expand Up @@ -220,33 +244,6 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
}
}

useEffect(() => {
if (!runListeners) {
return;
}
setIsPlaying(true);

return () => {
bpsCounter.stop();
};
}, [runListeners]);

const feedSubscriptionStart = () => {
if (!feedService) {
return;
}
feedService.subscribeBlocks(onNewBlock, onBlockMetadataUpdate);
bpsCounter.start();
};

const feedSubscriptionStop = async () => {
if (!feedService) {
return;
}
await feedService.unsubscribeBlocks();
bpsCounter.reset();
};

return (
<Wrapper
key={network}
Expand Down
14 changes: 8 additions & 6 deletions client/src/features/visualizer-threejs/store/tangle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ interface TangleState {

colorQueue: Pick<BlockState, "id" | "color">[];
addToColorQueue: (blockId: string, color: Color) => void;
removeFromColorQueue: (blockId: string) => void;
removeFromColorQueue: (blockIds: string[]) => void;

// Map of blockId to index in Tangle 'InstancedMesh'
blockIdToIndex: Map<string, number>;
Expand Down Expand Up @@ -155,11 +155,13 @@ export const useTangleStore = create<TangleState>()(
colorQueue: [...state.colorQueue, { id, color }],
}));
},
removeFromColorQueue: (blockId: string) => {
set((state) => ({
...state,
colorQueue: state.colorQueue.filter((block) => block.id !== blockId),
}));
removeFromColorQueue: (blockIds) => {
if (blockIds.length > 0) {
set((state) => ({
...state,
colorQueue: state.colorQueue.filter((block) => !blockIds.includes(block.id)),
}));
}
},
updateBlockIdToIndex: (blockId: string, index: number) => {
set((state) => {
Expand Down
35 changes: 17 additions & 18 deletions client/src/features/visualizer-threejs/useRenderTangle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,6 @@ export const useRenderTangle = () => {
const blockIdToPosition = useTangleStore((s) => s.blockIdToPosition);
const blockIdToAnimationPosition = useTangleStore((s) => s.blockIdToAnimationPosition);

const updateBlockColor = (blockId: string, color: THREE.Color): void => {
const indexToUpdate = blockIdToIndex.get(blockId);

if (indexToUpdate) {
tangleMeshRef.current.setColorAt(indexToUpdate, color);
if (tangleMeshRef.current.instanceColor) {
tangleMeshRef.current.instanceColor.needsUpdate = true;
}
removeFromColorQueue(blockId);
}
};

function updateInstancedMeshPosition(
instancedMesh: THREE.InstancedMesh<THREE.SphereGeometry, THREE.MeshPhongMaterial>,
index: number,
Expand Down Expand Up @@ -175,12 +163,23 @@ export const useRenderTangle = () => {
}, [blockQueue, blockIdToAnimationPosition]);

useEffect(() => {
if (colorQueue.length === 0) {
return;
}
if (colorQueue.length > 0) {
const removeIds: string[] = [];
for (const { id, color } of colorQueue) {
const indexToUpdate = blockIdToIndex.get(id);

if (indexToUpdate) {
tangleMeshRef.current.setColorAt(indexToUpdate, color);

if (tangleMeshRef.current.instanceColor) {
tangleMeshRef.current.instanceColor.needsUpdate = true;
}

removeIds.push(id);
}
}

for (const { id, color } of colorQueue) {
updateBlockColor(id, color);
removeFromColorQueue(removeIds);
}
}, [colorQueue]);
}, [colorQueue, blockIdToIndex]);
};

0 comments on commit 308bab2

Please sign in to comment.