import { useState, useRef, useEffect } from "react"; import { Canvas as FabricCanvas, Image as FabricImage, FabricObject } from "fabric"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Upload, Download, Trash2, RotateCcw, Sofa, Lamp, Table, Bed, Armchair } from "lucide-react"; import { toast } from "sonner"; interface FurnitureItem { id: string; name: string; icon: React.ReactNode; imageUrl: string; } const furnitureItems: FurnitureItem[] = [ { id: "sofa", name: "Canapé", icon: , imageUrl: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=200&h=200&fit=crop&auto=format" }, { id: "armchair", name: "Fauteuil", icon: , imageUrl: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=200&h=200&fit=crop&auto=format" }, { id: "table", name: "Table", icon: , imageUrl: "https://images.unsplash.com/photo-1611269154421-4e27233ac5c7?w=200&h=200&fit=crop&auto=format" }, { id: "lamp", name: "Lampe", icon: , imageUrl: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=200&h=200&fit=crop&auto=format" }, { id: "bed", name: "Lit", icon: , imageUrl: "https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=200&h=200&fit=crop&auto=format" }, ]; const VirtualStaging = () => { const canvasRef = useRef(null); const [fabricCanvas, setFabricCanvas] = useState(null); const [hasBackgroundImage, setHasBackgroundImage] = useState(false); const fileInputRef = useRef(null); useEffect(() => { if (!canvasRef.current) return; const canvas = new FabricCanvas(canvasRef.current, { width: 800, height: 600, backgroundColor: "#f3f4f6", }); setFabricCanvas(canvas); return () => { canvas.dispose(); }; }, []); const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file || !fabricCanvas) return; const reader = new FileReader(); reader.onload = (event) => { const imgUrl = event.target?.result as string; FabricImage.fromURL(imgUrl).then((img) => { const canvasWidth = fabricCanvas.width || 800; const canvasHeight = fabricCanvas.height || 600; const scale = Math.min( canvasWidth / (img.width || 1), canvasHeight / (img.height || 1) ); img.scale(scale); img.set({ left: (canvasWidth - (img.width || 0) * scale) / 2, top: (canvasHeight - (img.height || 0) * scale) / 2, }); fabricCanvas.backgroundImage = img; fabricCanvas.renderAll(); setHasBackgroundImage(true); toast.success("Photo importée avec succès !"); }); }; reader.readAsDataURL(file); }; const addFurniture = async (item: FurnitureItem) => { if (!fabricCanvas) return; try { const img = await FabricImage.fromURL(item.imageUrl, { crossOrigin: "anonymous" }); img.scale(0.3); img.set({ left: 100 + Math.random() * 200, top: 100 + Math.random() * 200, cornerColor: "#3b82f6", cornerStyle: "circle", borderColor: "#3b82f6", transparentCorners: false, }); fabricCanvas.add(img); fabricCanvas.setActiveObject(img); fabricCanvas.renderAll(); toast.success(`${item.name} ajouté !`); } catch (error) { toast.error("Erreur lors du chargement du meuble"); } }; const deleteSelected = () => { if (!fabricCanvas) return; const activeObjects = fabricCanvas.getActiveObjects(); if (activeObjects.length === 0) { toast.error("Sélectionnez un élément à supprimer"); return; } activeObjects.forEach((obj) => fabricCanvas.remove(obj)); fabricCanvas.discardActiveObject(); fabricCanvas.renderAll(); toast.success("Élément supprimé !"); }; const clearAll = () => { if (!fabricCanvas) return; fabricCanvas.clear(); fabricCanvas.backgroundColor = "#f3f4f6"; fabricCanvas.renderAll(); setHasBackgroundImage(false); toast.success("Tout a été effacé !"); }; const downloadImage = () => { if (!fabricCanvas) return; const dataURL = fabricCanvas.toDataURL({ format: "png", quality: 1, multiplier: 2, }); const link = document.createElement("a"); link.download = "virtual-staging.png"; link.href = dataURL; link.click(); toast.success("Image téléchargée !"); }; return (

Staging Virtuel

Importez une photo de votre pièce et ajoutez des meubles virtuellement

{/* Sidebar - Furniture Selection */}

Meubles

{furnitureItems.map((item) => ( ))}

Actions

 {/* Main Canvas Area */}
{!hasBackgroundImage && (

Commencez par importer une photo de votre pièce

)}

Astuce : Cliquez sur un meuble pour le sélectionner, puis utilisez les poignées pour le redimensionner ou le faire pivoter.
); }; export default VirtualStaging;
top of page

À propos de R&V

IMG_8111.JPG

   R&V vous propose une collection unique de meubles surcyclés, alliant style et durabilité. Chaque pièce présente des particularités liées à l'usure du temps, apportant ainsi une touche singulière et authentique à votre intérieur.

    Faites le choix d'un mobilier qui a du caractère et qui préserve notre environnement.

​

   N'hésitez pas à nous contacter pour des recherches particulières.

    Nous pouvons aussi intervenir pour améliorer votre mobilier.

​

​

bottom of page