Built on 21st
Community

Dependencies

Tags

Delaunay Triangulation

Delaunay Triangulation

Delaunay Triangulation

Default preview
// DemoOne.tsx
import React, { useState, useEffect } from "react";
import { Component } from "@/components/ui/delaunay-triangulation";
import { cn } from "@/lib/utils"; 
const DemoOne = () => {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const updateDimensions = () => {
      setDimensions({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    updateDimensions();
    window.addEventListener("resize", updateDimensions);
    return () => window.removeEventListener("resize", updateDimensions);
  }, []);

  const chartWidth = dimensions.width;
  const chartHeight = dimensions.height;

  if (chartWidth === 0 || chartHeight === 0) {
    return (
      <div className={cn("flex w-screen h-screen justify-center items-center bg-gray-900 text-white")}>
        Загрузка...
      </div>
    );
  }

  
  const displayWidth = chartWidth * 0.9;
  const displayHeight = chartHeight * 0.9;

  return (
    <div className={cn("w-screen h-screen overflow-hidden bg-gray-800 flex justify-center items-center")}>
      <Component
        width={displayWidth}
        height={displayHeight}
      />
    </div>
  );
};

export { DemoOne };

Dependencies

@visx/event@visx/group@visx/delaunay@visx/gradient@visx/clip-path@visx/mock-data

Source

airbnb.io/visx/delaunay-triangulation

Published

5/22/2025