Skill Diagram

[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescript:file="lib/types.ts" isMerged="true" export interface Person { id: string name: string color: string values: number[] } export interface Axis { id: string label: string } export interface DiagramConfig { size: number center: number maxRadius: number strokeWidth: { boundary: number; axis: number; polygon: number } fontSize: { axis: number; label: number } dotRadius: { normal: number; selected: number } labelOffset: number lineHeight: number } export interface LabelBounds { x: number y: number width: number height: number } export interface TextBounds { [id: string]: { width: number; height: number } } export interface LabelPosition { textX: number textY: number textWidth: number textHeight: number } export interface LabelPositions { [id: string]: LabelPosition } [V0_FILE]typescript:file="lib/constants.ts" isMerged="true" import type { Axis, Person } from "./types" export const defaultAxes: Axis[] = [ { id: "1", label: "Product Leadership" }, { id: "2", label: "Technical Leadership" }, { id: "3", label: "Shipping Leadership" }, { id: "4", label: "People Leadership" }, ] export const defaultPeople: Person[] = [ { id: "1", name: "Alex", color: "#22d3d3", values: [30, 20, 40, 70] }, { id: "2", name: "Jordan", color: "#60a5fa", values: [80, 50, 30, 40] }, { id: "3", name: "Sam", color: "#f59e0b", values: [50, 70, 40, 30] }, { id: "4", name: "Taylor", color: "#f87171", values: [60, 95, 50, 20] }, ] export const colorOptions = [ "#f87171", "#fb923c", "#facc15", "#4ade80", "#60a5fa", "#a78bfa", "#f472b6", "#22d3d3", "#a3e635", "#e879f9", ] export const colorPickerColors = [ "#22d3d3", "#f97316", "#a855f7", "#22c55e", "#f43f5e", "#3b82f6", "#eab308", "#e879f9", ] [V0_FILE]typescript:file="lib/geometry.ts" isMerged="true" import type { DiagramConfig, Axis, Person } from "./types" export const createGeometryHelpers = (config: DiagramConfig, axes: Axis[]) => { const { center, maxRadius } = config const totalAxes = axes.length const getPointPosition = (axisIndex: number, value: number) => { const angle = (axisIndex * 2 * Math.PI) / totalAxes - Math.PI / 2 const radius = (value / 100) * maxRadius return { x: center + radius * Math.cos(angle), y: center + radius * Math.sin(angle), } } const getAxisEndpoint = (axisIndex: number) => { const angle = (axisIndex * 2 * Math.PI) / totalAxes - Math.PI / 2 return { x: center + maxRadius * Math.cos(angle), y: center + maxRadius * Math.sin(angle), labelX: center + (maxRadius + config.labelOffset) * Math.cos(angle), labelY: center + (maxRadius + config.labelOffset) * Math.sin(angle), angle, } } const getPolygonPoints = (person: Person) => { return person.values .map((value, i) => { const pos = getPointPosition(i, value) return `${pos.x},${pos.y}` }) .join(" ") } const getBoundaryPoints = () => { return axes .map((_, i) => { const pos = getAxisEndpoint(i) return `${pos.x},${pos.y}` }) .join(" ") } return { getPointPosition, getAxisEndpoint, getPolygonPoints, getBoundaryPoints } } export type GeometryHelpers = ReturnType [V0_FILE]png:file="public/og-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/CleanShot%202025-11-29%20at%2012.33.55%402x-I5fVQiY9BgDbhbGDWewwffieR9B0Z2.png" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Skill Diagram Builder", description: "Create and share interactive skill diagrams with drag-and-drop editing", generator: "v0.app", openGraph: { title: "Skill Diagram Builder", description: "Create and share interactive skill diagrams with drag-and-drop editing", images: [ { url: "/og-image.png", width: 1200, height: 630, }, ], }, twitter: { card: "summary_large_image", title: "Skill Diagram Builder", description: "Create and share interactive skill diagrams with drag-and-drop editing", images: ["/og-image.png"], }, icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export const viewport: Viewport = { width: "device-width", initialScale: 1, maximumScale: 1, userScalable: false, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* force black background on html/body */ html, body { background-color: black; } /* Magenta text selection throughout the app */ ::selection { background-color: #d946ef; color: white; } /* Enhanced mobile touch handling to prevent iOS gestures */ @media (max-width: 767px) { body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* Re-enable selection for inputs */ input, textarea, [contenteditable="true"] { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; } /* Prevent all default touch behaviors on SVG */ svg { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; } } /* Add fadeInOut animation for the drag hint */ @keyframes fadeInOut { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/panel-content.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Plus, Trash2, Edit2, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import type { Person, Axis } from "@/lib/types" import { colorPickerColors } from "@/lib/constants" interface PanelContentProps { isMobile: boolean people: Person[] axes: Axis[] selectedPerson: string | null editingPerson: string | null editingAxis: string | null showFill: boolean onSelectPerson: (id: string | null) => void onAddPerson: () => void onDeletePerson: (id: string) => void onUpdatePersonName: (id: string, name: string) => void onUpdatePersonColor: (id: string, color: string) => void onSetEditingPerson: (id: string | null) => void onAddAxis: () => void onDeleteAxis: (id: string) => void onUpdateAxisLabel: (id: string, label: string) => void onSetEditingAxis: (id: string | null) => void onToggleFill: () => void } export function PanelContent({ isMobile, people, axes, selectedPerson, editingPerson, editingAxis, showFill, onSelectPerson, onAddPerson, onDeletePerson, onUpdatePersonName, onUpdatePersonColor, onSetEditingPerson, onAddAxis, onDeleteAxis, onUpdateAxisLabel, onSetEditingAxis, onToggleFill, }: PanelContentProps) { return (

{/* Items */}

Items

{people.map((person) => (

onSelectPerson(selectedPerson === person.id ? null : person.id)} >

{editingPerson === person.id ? (

onUpdatePersonName(person.id, e.target.value)} className="h-6 bg-black border-neutral-700 text-sm" autoFocus onKeyDown={(e) => e.key === "Enter" && onSetEditingPerson(null)} />

) : ( <> {person.name} )}

{selectedPerson === person.id && editingPerson !== person.id && (

{colorPickerColors.map((color) => (

)}

))}

{showFill && }

Show fill

{/* Axes */}

Axes

{axes.map((axis) => (

{editingAxis === axis.id ? (

onUpdateAxisLabel(axis.id, e.target.value)} className="h-6 bg-black border-neutral-700 text-sm" autoFocus onKeyDown={(e) => e.key === "Enter" && onSetEditingAxis(null)} />

) : ( <> {axis.label} {axes.length > 3 && ( )} )}

))}

) } [V0_FILE]typescriptreact:file="components/diagram-renderer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import type { DiagramConfig, Axis, Person, LabelPositions, TextBounds } from "@/lib/types" import type { GeometryHelpers } from "@/lib/geometry" interface DiagramRendererProps { config: DiagramConfig helpers: GeometryHelpers axes: Axis[] people: Person[] labelPositions: LabelPositions textBounds: TextBounds textRefs: React.MutableRefObject<{ [id: string]: SVGTextElement | null }> axisTextRefs?: React.MutableRefObject<{ [index: number]: SVGTextElement | null }> showFill: boolean selectedPerson?: string | null isMobile?: boolean interactive?: boolean onMouseDown?: (personId: string, axisIndex: number, e: React.MouseEvent) => void onTouchStart?: (personId: string, axisIndex: number, e: React.TouchEvent) => void } export function DiagramRenderer({ config, helpers, axes, people, labelPositions, textBounds, textRefs, axisTextRefs, showFill, selectedPerson, isMobile = false, interactive = false, onMouseDown, onTouchStart, }: DiagramRendererProps) { return ( <> {/* Boundary polygon */} {/* Axes */} {axes.map((axis, i) => { const endpoint = helpers.getAxisEndpoint(i) return ( (axisTextRefs.current[i] = el) : undefined} x={endpoint.labelX} y={endpoint.labelY} fill="#ffffff" fontSize={config.fontSize.axis} fontWeight={interactive ? "400" : "500"} textAnchor="middle" dominantBaseline="middle" className={interactive ? "select-none tracking-wider" : undefined} style={{ letterSpacing: "0.05em" }} > {axis.label .toUpperCase() .split(" ") .map((word, wi) => ( {word} ))} ) })} {/* Person polygons */} {people.map((person) => ( ))} {people.map((person) => person.values.map((value, axisIndex) => { const pos = helpers.getPointPosition(axisIndex, value) const isSelected = selectedPerson === person.id const canInteract = interactive && (!isMobile || !selectedPerson || isSelected) const touchRadius = isMobile && isSelected ? 24 : isSelected ? config.dotRadius.selected : config.dotRadius.normal return ( { e.preventDefault() e.stopPropagation() onMouseDown(person.id, axisIndex, e) } : undefined } onTouchStart={ canInteract && onTouchStart ? (e) => { e.preventDefault() e.stopPropagation() onTouchStart(person.id, axisIndex, e) } : undefined } className={canInteract ? "cursor-grab active:cursor-grabbing" : undefined} style={{ touchAction: canInteract ? "none" : undefined, WebkitTouchCallout: "none", pointerEvents: canInteract ? "auto" : interactive ? "none" : undefined, }} /> ) }), )} {isMobile && people.map((person) => person.values.map((value, axisIndex) => { const pos = helpers.getPointPosition(axisIndex, value) const isSelected = selectedPerson === person.id return ( ) }), )} {/* Person labels */} {people.map((person) => { const pos = labelPositions[person.id] if (!pos) return null const { textX, textY } = pos const measured = textBounds[person.id] const rectWidth = measured ? measured.width + 6 : 0 const rectHeight = measured ? measured.height + 2 : 0 return ( {measured && ( )} { textRefs.current[person.id] = el }} x={textX} y={textY} fill={person.color} fontSize={config.fontSize.label} fontWeight={interactive ? "500" : "600"} dominantBaseline="central" className={interactive ? "select-none uppercase tracking-wide" : undefined} style={!interactive ? { letterSpacing: "0.05em", textTransform: "uppercase" } : undefined} > {person.name} ) })} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from "react" import { useSearchParams, useRouter } from "next/navigation" import { PanelRightClose, PanelRight, Copy, Download, Pencil, X, Check } from "lucide-react" import { Button } from "@/components/ui/button" import type { Person, Axis, DiagramConfig, TextBounds, LabelBounds } from "@/lib/types" import { defaultAxes, defaultPeople, colorOptions } from "@/lib/constants" import { createGeometryHelpers } from "@/lib/geometry" import { calculateLabelPositions, calculateAxisLabelBounds } from "@/lib/labels" import { DiagramRenderer } from "@/components/diagram-renderer" import { PanelContent } from "@/components/panel-content" export default function SkillDiagramBuilder() { const router = useRouter() const searchParams = useSearchParams() // State from URL params const [axes, setAxes] = useState(() => { const axesParam = searchParams.get("axes") if (axesParam) { try { return JSON.parse(decodeURIComponent(axesParam)) } catch { return defaultAxes } } return defaultAxes }) const [people, setPeople] = useState(() => { const peopleParam = searchParams.get("items") if (peopleParam) { try { return JSON.parse(decodeURIComponent(peopleParam)) } catch { return defaultPeople } } return defaultPeople }) const [showFill, setShowFill] = useState(() => { const fillParam = searchParams.get("fill") return fillParam === null ? true : fillParam === "1" }) // UI state const [selectedPerson, setSelectedPerson] = useState(null) const [draggingPoint, setDraggingPoint] = useState<{ personId: string; axisIndex: number } | null>(null) const [editingAxis, setEditingAxis] = useState(null) const [editingPerson, setEditingPerson] = useState(null) const [sidebarOpen, setSidebarOpen] = useState(true) const [mobileEditOpen, setMobileEditOpen] = useState(false) const [isMobile, setIsMobile] = useState(false) const [diagramSize, setDiagramSize] = useState(0) const [isDragging, setIsDragging] = useState(false) const [pendingSelection, setPendingSelection] = useState(null) const [hasAutoSelected, setHasAutoSelected] = useState(false) const [copySuccess, setCopySuccess] = useState(false) const [showHint, setShowHint] = useState(false) const [touchDragging, setTouchDragging] = useState<{ personId: string; axisIndex: number } | null>(null) const [showDownloadButton, setShowDownloadButton] = useState(false) // Refs const svgRef = useRef(null) const exportSvgRef = useRef(null) const containerRef = useRef(null) const textRefs = useRef<{ [id: string]: SVGTextElement | null }>({}) const exportTextRefs = useRef<{ [id: string]: SVGTextElement | null }>({}) const exportAxisTextRefs = useRef<{ [index: number]: SVGTextElement | null }>({}) const mainAxisTextRefs = useRef<{ [index: number]: SVGTextElement | null }>({}) // Measured bounds const [textBounds, setTextBounds] = useState({}) const [exportTextBounds, setExportTextBounds] = useState({}) const [exportAxisMeasuredBounds, setExportAxisMeasuredBounds] = useState([]) const [mainAxisMeasuredBounds, setMainAxisMeasuredBounds] = useState([]) // Configs const mainConfig: DiagramConfig = useMemo( () => ({ size: diagramSize, center: diagramSize / 2, maxRadius: diagramSize * (isMobile ? 0.26 : 0.36), strokeWidth: { boundary: 1, axis: 1, polygon: 2 }, fontSize: { axis: 12, label: 11 }, dotRadius: { normal: 4, selected: 8 }, labelOffset: 50, lineHeight: 14, }), [diagramSize, isMobile], ) const exportConfig: DiagramConfig = useMemo( () => ({ size: 800, center: 400, maxRadius: 800 * 0.32, strokeWidth: { boundary: 2, axis: 2, polygon: 3 }, fontSize: { axis: 16, label: 16 }, dotRadius: { normal: 6, selected: 6 }, labelOffset: 60, lineHeight: 18, }), [], ) // Geometry helpers const mainHelpers = useMemo(() => createGeometryHelpers(mainConfig, axes), [mainConfig, axes]) const exportHelpers = useMemo(() => createGeometryHelpers(exportConfig, axes), [exportConfig, axes]) // Label calculations const mainAxisLabelBounds = useMemo( () => calculateAxisLabelBounds(axes, mainConfig, mainAxisMeasuredBounds), [axes, mainConfig, mainAxisMeasuredBounds], ) const exportAxisLabelBounds = useMemo( () => calculateAxisLabelBounds(axes, exportConfig, exportAxisMeasuredBounds), [axes, exportConfig, exportAxisMeasuredBounds], ) const mainLabelPositions = useMemo( () => calculateLabelPositions(people, axes, mainConfig, textBounds, mainAxisLabelBounds), [people, axes, mainConfig, textBounds, mainAxisLabelBounds], ) const exportLabelPositions = useMemo( () => calculateLabelPositions(people, axes, exportConfig, exportTextBounds, exportAxisLabelBounds), [people, axes, exportConfig, exportTextBounds, exportAxisLabelBounds], ) // Effects useEffect(() => { const checkMobile = () => setIsMobile(window.innerWidth < 768) checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) useEffect(() => { if (!navigator.userAgent.includes("Twitter for iPhone")) { setShowDownloadButton(true) } }, []) useEffect(() => { if (isMobile && mobileEditOpen && people.length > 0 && !hasAutoSelected) { setSelectedPerson(people[0].id) setHasAutoSelected(true) } if (!mobileEditOpen && isMobile) { setHasAutoSelected(false) setSelectedPerson(null) } }, [isMobile, mobileEditOpen, people, hasAutoSelected]) useEffect(() => { const params = new URLSearchParams() params.set("axes", encodeURIComponent(JSON.stringify(axes))) params.set("items", encodeURIComponent(JSON.stringify(people))) if (showFill) params.set("fill", "1") router.replace(`?${params.toString()}`, { scroll: false }) }, [axes, people, showFill, router]) useLayoutEffect(() => { const updateSize = () => { if (containerRef.current) { const container = containerRef.current const availableWidth = container.clientWidth const availableHeight = container.clientHeight const size = Math.min(availableWidth, availableHeight) - 40 setDiagramSize(Math.max(250, size)) } } requestAnimationFrame(updateSize) window.addEventListener("resize", updateSize) return () => window.removeEventListener("resize", updateSize) }, [sidebarOpen, isMobile]) useLayoutEffect(() => { const bounds: TextBounds = {} for (const person of people) { const textEl = textRefs.current[person.id] if (textEl) { const bbox = textEl.getBBox() bounds[person.id] = { width: bbox.width, height: bbox.height } } } if (Object.keys(bounds).length > 0) setTextBounds(bounds) }, [people, diagramSize]) useLayoutEffect(() => { const bounds: TextBounds = {} for (const person of people) { const textEl = exportTextRefs.current[person.id] if (textEl) { const bbox = textEl.getBBox() bounds[person.id] = { width: bbox.width, height: bbox.height } } } if (Object.keys(bounds).length > 0) setExportTextBounds(bounds) }, [people]) useLayoutEffect(() => { const bounds: LabelBounds[] = [] for (let i = 0; i < axes.length; i++) { const textEl = exportAxisTextRefs.current[i] if (textEl) { const bbox = textEl.getBBox() bounds.push({ x: bbox.x, y: bbox.y, width: bbox.width, height: bbox.height }) } } if (bounds.length === axes.length) setExportAxisMeasuredBounds(bounds) }, [axes]) useLayoutEffect(() => { const bounds: LabelBounds[] = [] for (let i = 0; i < axes.length; i++) { const textEl = mainAxisTextRefs.current[i] if (textEl) { const bbox = textEl.getBBox() bounds.push({ x: bbox.x, y: bbox.y, width: bbox.width, height: bbox.height }) } } if (bounds.length === axes.length) setMainAxisMeasuredBounds(bounds) }, [axes, diagramSize]) // Mouse handlers const handleMouseDown = (personId: string, axisIndex: number) => { if (isMobile && !mobileEditOpen) return setDraggingPoint({ personId, axisIndex }) setPendingSelection(personId) setIsDragging(false) } const handleMouseMove = useCallback( (e: React.MouseEvent) => { if (!draggingPoint || !svgRef.current) return setIsDragging(true) const rect = svgRef.current.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const dx = x - mainConfig.center const dy = y - mainConfig.center const axisAngle = (draggingPoint.axisIndex / axes.length) * 2 * Math.PI - Math.PI / 2 const axisX = Math.cos(axisAngle) const axisY = Math.sin(axisAngle) // Dot product gives signed distance along axis const projectedDistance = dx * axisX + dy * axisY // Only allow positive values (away from center in axis direction) const clampedDistance = Math.max(0, projectedDistance) const value = Math.min(100, (clampedDistance / mainConfig.maxRadius) * 100) setPeople((prev) => prev.map((p) => { if (p.id === draggingPoint.personId) { const newValues = [...p.values] newValues[draggingPoint.axisIndex] = value return { ...p, values: newValues } } return p }), ) }, [draggingPoint, mainConfig.center, mainConfig.maxRadius, axes.length], ) const handleMouseUp = () => { if (!isMobile && pendingSelection && !isDragging) setSelectedPerson(pendingSelection) setDraggingPoint(null) setPendingSelection(null) setIsDragging(false) } // Touch handlers const handleTouchStart = (personId: string, axisIndex: number, e: React.TouchEvent) => { if (isMobile && !mobileEditOpen) return if (isMobile && (!selectedPerson || selectedPerson !== personId)) return e.preventDefault() e.stopPropagation() setTouchDragging({ personId, axisIndex }) if (!isMobile && !selectedPerson) setSelectedPerson(personId) } const handleTouchMove = useCallback( (e: React.TouchEvent) => { if (!touchDragging || !svgRef.current) return e.preventDefault() const touch = e.touches[0] const rect = svgRef.current.getBoundingClientRect() const x = touch.clientX - rect.left const y = touch.clientY - rect.top const dx = x - mainConfig.center const dy = y - mainConfig.center const axisAngle = (touchDragging.axisIndex / axes.length) * 2 * Math.PI - Math.PI / 2 const axisX = Math.cos(axisAngle) const axisY = Math.sin(axisAngle) // Dot product gives signed distance along axis const projectedDistance = dx * axisX + dy * axisY // Only allow positive values (away from center in axis direction) const clampedDistance = Math.max(0, projectedDistance) const value = Math.min(100, (clampedDistance / mainConfig.maxRadius) * 100) setPeople((prev) => prev.map((p) => { if (p.id === touchDragging.personId) { const newValues = [...p.values] newValues[touchDragging.axisIndex] = value return { ...p, values: newValues } } return p }), ) }, [touchDragging, mainConfig.center, mainConfig.maxRadius, axes.length], ) const handleTouchEnd = () => setTouchDragging(null) // Click handlers const handleSvgClick = (e: React.MouseEvent) => { if (isMobile) return if (e.target === svgRef.current) setSelectedPerson(null) } const handleContainerClick = (e: React.MouseEvent) => { if (e.target === e.currentTarget) { setSelectedPerson(null) } } // CRUD operations const addPerson = () => { const newPerson: Person = { id: Date.now().toString(), name: "New Person", color: colorOptions[people.length % colorOptions.length], values: axes.map(() => 50), } setPeople([...people, newPerson]) setSelectedPerson(newPerson.id) setEditingPerson(newPerson.id) } const deletePerson = (id: string) => { setPeople(people.filter((p) => p.id !== id)) if (selectedPerson === id) setSelectedPerson(null) } const updatePersonName = (id: string, name: string) => { setPeople(people.map((p) => (p.id === id ? { ...p, name } : p))) } const updatePersonColor = (id: string, color: string) => { setPeople(people.map((p) => (p.id === id ? { ...p, color } : p))) } const addAxis = () => { const newAxis: Axis = { id: Date.now().toString(), label: "New Skill" } setAxes([...axes, newAxis]) setPeople(people.map((p) => ({ ...p, values: [...p.values, 50] }))) setEditingAxis(newAxis.id) } const deleteAxis = (id: string) => { const index = axes.findIndex((a) => a.id === id) if (index === -1 || axes.length <= 3) return setAxes(axes.filter((a) => a.id !== id)) setPeople(people.map((p) => ({ ...p, values: p.values.filter((_, i) => i !== index) }))) } const updateAxisLabel = (id: string, label: string) => { setAxes(axes.map((a) => (a.id === id ? { ...a, label } : a))) } // Export functions const generateExportCanvas = useCallback((): Promise => { return new Promise((resolve) => { const svgElement = exportSvgRef.current if (!svgElement) { resolve(document.createElement("canvas")) return } const exportSize = 1200 const scaleFactor = 2 const canvasSize = exportSize * scaleFactor const svgClone = svgElement.cloneNode(true) as SVGSVGElement svgClone.setAttribute("width", String(canvasSize)) svgClone.setAttribute("height", String(canvasSize)) const svgString = new XMLSerializer().serializeToString(svgClone) const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" }) const url = URL.createObjectURL(svgBlob) const canvas = document.createElement("canvas") canvas.width = canvasSize canvas.height = canvasSize const ctx = canvas.getContext("2d") const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { if (ctx) { ctx.fillStyle = "black" ctx.fillRect(0, 0, canvasSize, canvasSize) ctx.drawImage(img, 0, 0, canvasSize, canvasSize) ctx.fillStyle = "#666666" ctx.font = "32px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" ctx.textAlign = "end" ctx.fillText("v0-skill-diagram.vercel.app", canvasSize - 80, canvasSize - 80) } URL.revokeObjectURL(url) resolve(canvas) } img.onerror = () => { URL.revokeObjectURL(url) resolve(canvas) } img.src = url }) }, []) const copyToClipboard = () => { try { navigator.clipboard .write([ new ClipboardItem({ "image/png": generateExportCanvas().then( (canvas) => new Promise((resolve, reject) => { canvas.toBlob( (blob) => (blob ? resolve(blob) : reject(new Error("Failed to create blob"))), "image/png", 1.0, ) }), ), }), ]) .then(() => { setCopySuccess(true) setTimeout(() => setCopySuccess(false), 2000) }) .catch((err) => console.error("[v0] Failed to copy:", err)) } catch (err) { console.error("[v0] Failed to copy:", err) } } const downloadPng = () => { const newWindow = window.open("", "_blank") if (newWindow) { newWindow.document.write( 'Skill Diagram

Generating image...

', ) } generateExportCanvas().then((canvas) => { canvas.toBlob( (blob) => { if (blob && newWindow) { const url = URL.createObjectURL(blob) newWindow.location.href = url } else if (!newWindow) { // Fallback if popup was still blocked canvas.toBlob( (b) => { if (b) { const url = URL.createObjectURL(b) const link = document.createElement("a") link.href = url link.download = "skill-diagram.png" link.click() } }, "image/png", 1.0, ) } }, "image/png", 1.0, ) }) } return (

{/* Main diagram area */}

{diagramSize > 0 && ( )}

{/* Action buttons */}

{showDownloadButton && ( )}

{/* Desktop sidebar */}

setShowFill(!showFill)} />

{/* Mobile hint */} {isMobile && mobileEditOpen && showHint && selectedPerson && (

drag to adjust

)} {/* Mobile edit panel */} {mobileEditOpen && isMobile && (

setShowFill(!showFill)} />

)} {/* Hidden export SVG */}

) } [V0_FILE]typescript:file="lib/labels.ts" isEdit="true" isMerged="true" import type { DiagramConfig, Axis, Person, LabelBounds, TextBounds, LabelPositions } from "./types" import { createGeometryHelpers } from "./geometry" export const checkCollision = (rect1: LabelBounds, rect2: LabelBounds, padding = 4) => { return !( rect1.x + rect1.width + padding < rect2.x || rect2.x + rect2.width + padding < rect1.x || rect1.y + rect1.height + padding < rect2.y || rect2.y + rect2.height + padding < rect1.y ) } export const calculateAxisLabelBounds = ( axes: Axis[], config: DiagramConfig, measuredBounds?: LabelBounds[], ): LabelBounds[] => { if (measuredBounds && measuredBounds.length === axes.length) { return measuredBounds } const helpers = createGeometryHelpers(config, axes) const charWidth = config.fontSize.axis * 0.7 return axes.map((axis, i) => { const endpoint = helpers.getAxisEndpoint(i) const words = axis.label.toUpperCase().split(" ") const width = Math.max(...words.map((w) => w.length * charWidth)) + 20 const height = words.length * config.lineHeight + 10 return { x: endpoint.labelX - width / 2, y: endpoint.labelY - height / 2, width, height, } }) } export const calculateLabelPositions = ( people: Person[], axes: Axis[], config: DiagramConfig, textBounds: TextBounds, axisLabelBounds: LabelBounds[], ): LabelPositions => { const helpers = createGeometryHelpers(config, axes) const positions: LabelPositions = {} const placedLabels: LabelBounds[] = [] const charWidth = config.fontSize.label * 0.65 const defaultHeight = config.fontSize.label * 1.4 const allBullets: LabelBounds[] = [] const bulletRadius = config.dotRadius?.normal || 4 for (const person of people) { for (let i = 0; i < axes.length; i++) { const pos = helpers.getPointPosition(i, person.values[i]) allBullets.push({ x: pos.x - bulletRadius - 2, y: pos.y - bulletRadius - 2, width: (bulletRadius + 2) * 2, height: (bulletRadius + 2) * 2, }) } } const offsets = [ { dx: 14, dy: 0 }, { dx: -14, dy: 0, alignRight: true }, { dx: 14, dy: -20 }, { dx: 14, dy: 20 }, { dx: -14, dy: -20, alignRight: true }, { dx: -14, dy: 20, alignRight: true }, { dx: 0, dy: -28 }, { dx: 0, dy: 28 }, { dx: 28, dy: 0 }, { dx: -28, dy: 0, alignRight: true }, { dx: 28, dy: -20 }, { dx: 28, dy: 20 }, { dx: -28, dy: -20, alignRight: true }, { dx: -28, dy: 20, alignRight: true }, { dx: 0, dy: -42 }, { dx: 0, dy: 42 }, { dx: 42, dy: 0 }, { dx: -42, dy: 0, alignRight: true }, { dx: 42, dy: -28 }, { dx: 42, dy: 28 }, { dx: -42, dy: -28, alignRight: true }, { dx: -42, dy: 28, alignRight: true }, { dx: 0, dy: -56 }, { dx: 0, dy: 56 }, { dx: 56, dy: 0 }, { dx: -56, dy: 0, alignRight: true }, ] for (const person of people) { // Find highest value axis for label anchor point let maxIdx = 0 let maxVal = 0 person.values.forEach((v, i) => { if (v > maxVal) { maxVal = v maxIdx = i } }) const basePos = helpers.getPointPosition(maxIdx, person.values[maxIdx]) const measured = textBounds[person.id] const textWidth = measured ? measured.width : person.name.length * charWidth + 4 const textHeight = measured ? measured.height : defaultHeight let finalPos = { textX: basePos.x + 14, textY: basePos.y, textWidth, textHeight } let foundPosition = false for (const offset of offsets) { const textX = offset.alignRight ? basePos.x + offset.dx - textWidth : basePos.x + offset.dx const textY = basePos.y + offset.dy const labelRect = { x: textX - 4, y: textY - textHeight / 2 - 2, width: textWidth + 8, height: textHeight + 4 } const axisCollision = axisLabelBounds.some((rect) => checkCollision(labelRect, rect, 6)) const labelCollision = placedLabels.some((rect) => checkCollision(labelRect, rect, 2)) const bulletCollision = allBullets.some((rect) => checkCollision(labelRect, rect, 0)) if (!axisCollision && !labelCollision && !bulletCollision) { finalPos = { textX, textY, textWidth, textHeight } foundPosition = true break } } positions[person.id] = finalPos placedLabels.push({ x: finalPos.textX - 4, y: finalPos.textY - finalPos.textHeight / 2 - 2, width: finalPos.textWidth + 8, height: finalPos.textHeight + 4, }) } return positions }

About

Tags

Share

About

Tags

Share

More from rauchg

More Templates Like This

About

Tags

Share

About

Tags

Share

More from rauchg

More Templates Like This