11 |
23 | )
24 | }
25 |
26 |
--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps extends React.InputHTMLAttributes
12 | {/* 移除了打印按钮 */}
13 |
17 |
21 |
22 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
21 |
47 |
26 | {/* 左侧元素库 */}
27 |
44 |
45 |
28 | {!leftSidebarCollapsed &&
30 |
31 | {/* 中间画布区域 */}
32 |
33 |
38 |
39 | {/* 右侧属性面板 */}
40 |
34 |
35 |
36 |
41 | {!rightSidebarCollapsed &&
43 |
39 |
41 | )}
42 | {children}
52 |
56 |
74 | )
75 | }
76 |
77 |
--------------------------------------------------------------------------------
/components/ui/input-otp.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { OTPInput, OTPInputContext } from "input-otp"
5 | import { Dot } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const InputOTP = React.forwardRef<
10 | React.ElementRef上传图片
58 | 65 | 73 |
50 | {char}
51 | {hasFakeCaret && (
52 |
57 | )
58 | })
59 | InputOTPSlot.displayName = "InputOTPSlot"
60 |
61 | const InputOTPSeparator = React.forwardRef<
62 | React.ElementRef<"div">,
63 | React.ComponentPropsWithoutRef<"div">
64 | >(({ ...props }, ref) => (
65 |
53 |
54 |
55 | )}
56 |
66 |
68 | ))
69 | InputOTPSeparator.displayName = "InputOTPSeparator"
70 |
71 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
72 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss"
2 |
3 | const config = {
4 | darkMode: ["class"],
5 | content: [
6 | "./pages/**/*.{ts,tsx}",
7 | "./components/**/*.{ts,tsx}",
8 | "./app/**/*.{ts,tsx}",
9 | "./src/**/*.{ts,tsx}",
10 | "*.{js,ts,jsx,tsx,mdx}",
11 | ],
12 | prefix: "",
13 | theme: {
14 | container: {
15 | center: true,
16 | padding: "2rem",
17 | screens: {
18 | "2xl": "1400px",
19 | },
20 | },
21 | extend: {
22 | colors: {
23 | border: "hsl(var(--border))",
24 | input: "hsl(var(--input))",
25 | ring: "hsl(var(--ring))",
26 | background: "hsl(var(--background))",
27 | foreground: "hsl(var(--foreground))",
28 | primary: {
29 | DEFAULT: "hsl(var(--primary))",
30 | foreground: "hsl(var(--primary-foreground))",
31 | },
32 | secondary: {
33 | DEFAULT: "hsl(var(--secondary))",
34 | foreground: "hsl(var(--secondary-foreground))",
35 | },
36 | destructive: {
37 | DEFAULT: "hsl(var(--destructive))",
38 | foreground: "hsl(var(--destructive-foreground))",
39 | },
40 | muted: {
41 | DEFAULT: "hsl(var(--muted))",
42 | foreground: "hsl(var(--muted-foreground))",
43 | },
44 | accent: {
45 | DEFAULT: "hsl(var(--accent))",
46 | foreground: "hsl(var(--accent-foreground))",
47 | },
48 | popover: {
49 | DEFAULT: "hsl(var(--popover))",
50 | foreground: "hsl(var(--popover-foreground))",
51 | },
52 | card: {
53 | DEFAULT: "hsl(var(--card))",
54 | foreground: "hsl(var(--card-foreground))",
55 | },
56 | },
57 | borderRadius: {
58 | lg: "var(--radius)",
59 | md: "calc(var(--radius) - 2px)",
60 | sm: "calc(var(--radius) - 4px)",
61 | },
62 | keyframes: {
63 | "accordion-down": {
64 | from: { height: "0" },
65 | to: { height: "var(--radix-accordion-content-height)" },
66 | },
67 | "accordion-up": {
68 | from: { height: "var(--radix-accordion-content-height)" },
69 | to: { height: "0" },
70 | },
71 | },
72 | animation: {
73 | "accordion-down": "accordion-down 0.2s ease-out",
74 | "accordion-up": "accordion-up 0.2s ease-out",
75 | },
76 | backgroundImage: {
77 | "grid-pattern":
78 | "linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px)",
79 | },
80 | },
81 | },
82 | plugins: [require("tailwindcss-animate")],
83 | } satisfies Config
84 |
85 | export default config
86 |
87 |
--------------------------------------------------------------------------------
/components/editor/elements/barcode-element.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import type React from "react"
4 | import { useEffect, useRef } from "react"
5 | import JsBarcode from "jsbarcode"
6 | import type { Element } from "@/types/editor"
7 |
8 | interface BarcodeElementProps {
9 | element: Element
10 | }
11 |
12 | const BarcodeElement: React.FC
61 |
62 |
63 | )
64 | }
65 |
66 | export default BarcodeElement
67 |
68 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | font-family: Arial, Helvetica, sans-serif;
7 | }
8 |
9 | @layer utilities {
10 | .text-balance {
11 | text-wrap: balance;
12 | }
13 | }
14 |
15 | @layer base {
16 | :root {
17 | --background: 0 0% 100%;
18 | --foreground: 0 0% 3.9%;
19 | --card: 0 0% 100%;
20 | --card-foreground: 0 0% 3.9%;
21 | --popover: 0 0% 100%;
22 | --popover-foreground: 0 0% 3.9%;
23 | --primary: 0 0% 9%;
24 | --primary-foreground: 0 0% 98%;
25 | --secondary: 0 0% 96.1%;
26 | --secondary-foreground: 0 0% 9%;
27 | --muted: 0 0% 96.1%;
28 | --muted-foreground: 0 0% 45.1%;
29 | --accent: 0 0% 96.1%;
30 | --accent-foreground: 0 0% 9%;
31 | --destructive: 0 84.2% 60.2%;
32 | --destructive-foreground: 0 0% 98%;
33 | --border: 0 0% 89.8%;
34 | --input: 0 0% 89.8%;
35 | --ring: 0 0% 3.9%;
36 | --chart-1: 12 76% 61%;
37 | --chart-2: 173 58% 39%;
38 | --chart-3: 197 37% 24%;
39 | --chart-4: 43 74% 66%;
40 | --chart-5: 27 87% 67%;
41 | --radius: 0.5rem;
42 | --sidebar-background: 0 0% 98%;
43 | --sidebar-foreground: 240 5.3% 26.1%;
44 | --sidebar-primary: 240 5.9% 10%;
45 | --sidebar-primary-foreground: 0 0% 98%;
46 | --sidebar-accent: 240 4.8% 95.9%;
47 | --sidebar-accent-foreground: 240 5.9% 10%;
48 | --sidebar-border: 220 13% 91%;
49 | --sidebar-ring: 217.2 91.2% 59.8%;
50 | }
51 | .dark {
52 | --background: 0 0% 3.9%;
53 | --foreground: 0 0% 98%;
54 | --card: 0 0% 3.9%;
55 | --card-foreground: 0 0% 98%;
56 | --popover: 0 0% 3.9%;
57 | --popover-foreground: 0 0% 98%;
58 | --primary: 0 0% 98%;
59 | --primary-foreground: 0 0% 9%;
60 | --secondary: 0 0% 14.9%;
61 | --secondary-foreground: 0 0% 98%;
62 | --muted: 0 0% 14.9%;
63 | --muted-foreground: 0 0% 63.9%;
64 | --accent: 0 0% 14.9%;
65 | --accent-foreground: 0 0% 98%;
66 | --destructive: 0 62.8% 30.6%;
67 | --destructive-foreground: 0 0% 98%;
68 | --border: 0 0% 14.9%;
69 | --input: 0 0% 14.9%;
70 | --ring: 0 0% 83.1%;
71 | --chart-1: 220 70% 50%;
72 | --chart-2: 160 60% 45%;
73 | --chart-3: 30 80% 55%;
74 | --chart-4: 280 65% 60%;
75 | --chart-5: 340 75% 55%;
76 | --sidebar-background: 240 5.9% 10%;
77 | --sidebar-foreground: 240 4.8% 95.9%;
78 | --sidebar-primary: 224.3 76.3% 48%;
79 | --sidebar-primary-foreground: 0 0% 100%;
80 | --sidebar-accent: 240 3.7% 15.9%;
81 | --sidebar-accent-foreground: 240 4.8% 95.9%;
82 | --sidebar-border: 240 3.7% 15.9%;
83 | --sidebar-ring: 217.2 91.2% 59.8%;
84 | }
85 | }
86 |
87 | @layer base {
88 | * {
89 | @apply border-border;
90 | }
91 | body {
92 | @apply bg-background text-foreground;
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { ChevronLeft, ChevronRight } from "lucide-react"
5 | import { DayPicker } from "react-day-picker"
6 |
7 | import { cn } from "@/lib/utils"
8 | import { buttonVariants } from "@/components/ui/button"
9 |
10 | export type CalendarProps = React.ComponentProps
8 |
9 |
10 | ),
11 | )
12 | Table.displayName = "Table"
13 |
14 | const TableHeader = React.forwardRef
98 | {element.content}
99 |
100 | )
101 | }
102 |
103 |
--------------------------------------------------------------------------------
/components/ui/breadcrumb.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { ChevronRight, MoreHorizontal } from "lucide-react"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const Breadcrumb = React.forwardRef<
8 | HTMLElement,
9 | React.ComponentPropsWithoutRef<"nav"> & {
10 | separator?: React.ReactNode
11 | }
12 | >(({ ...props }, ref) => )
13 | Breadcrumb.displayName = "Breadcrumb"
14 |
15 | const BreadcrumbList = React.forwardRef<
16 | HTMLOListElement,
17 | React.ComponentPropsWithoutRef<"ol">
18 | >(({ className, ...props }, ref) => (
19 |
113 |
114 |
115 | )
116 | }
117 |
118 |
--------------------------------------------------------------------------------
/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { Drawer as DrawerPrimitive } from "vaul"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Drawer = ({
9 | shouldScaleBackground = true,
10 | ...props
11 | }: React.ComponentProps加载中...
62 | }
63 |
64 | // 合并样式
65 | const mergedStyle = {
66 | ...tableData.style,
67 | ...elementStyle,
68 | }
69 |
70 | return (
71 |
79 |
87 |
88 |
126 |
127 | )
128 | }
129 |
130 |
--------------------------------------------------------------------------------
/lib/auth-utils.ts:
--------------------------------------------------------------------------------
1 | import type { User } from "@/types/user"
2 |
3 | // 模拟有效的激活码列表
4 | const VALID_ACTIVATION_CODES = ["FLOW2024", "MIX2024", "PRINT2024", "EDITOR2024"]
5 |
6 | // 从本地存储获取用户
7 | export const getStoredUser = (): User | null => {
8 | if (typeof window === "undefined") return null
9 |
10 | const storedUser = localStorage.getItem("flowmix_user")
11 | if (!storedUser) return null
12 |
13 | try {
14 | return JSON.parse(storedUser)
15 | } catch (error) {
16 | console.error("Failed to parse stored user:", error)
17 | return null
18 | }
19 | }
20 |
21 | // 保存用户到本地存储
22 | export const storeUser = (user: User): void => {
23 | if (typeof window === "undefined") return
24 | localStorage.setItem("flowmix_user", JSON.stringify(user))
25 | }
26 |
27 | // 清除存储的用户
28 | export const clearStoredUser = (): void => {
29 | if (typeof window === "undefined") return
30 | localStorage.removeItem("flowmix_user")
31 | }
32 |
33 | // 验证激活码
34 | export const validateActivationCode = (code: string): boolean => {
35 | return VALID_ACTIVATION_CODES.includes(code)
36 | }
37 |
38 | // 模拟用户注册
39 | export const registerUser = (
40 | username: string,
41 | password: string,
42 | activationCode: string,
43 | ): { success: boolean; message: string; user?: User } => {
44 | // 验证激活码
45 | if (!validateActivationCode(activationCode)) {
46 | return { success: false, message: "无效的激活码" }
47 | }
48 |
49 | // 检查用户名是否已存在
50 | const users = getAllUsers()
51 | if (users.some((user) => user.username === username)) {
52 | return { success: false, message: "用户名已存在" }
53 | }
54 |
55 | // 创建新用户
56 | const newUser: User = {
57 | id: Date.now().toString(),
58 | username,
59 | password, // 实际应用中应该哈希处理
60 | activationCode,
61 | createdAt: new Date().toISOString(),
62 | }
63 |
64 | // 保存用户
65 | storeUser(newUser)
66 | saveUserToList(newUser)
67 |
68 | return {
69 | success: true,
70 | message: "注册成功",
71 | user: newUser,
72 | }
73 | }
74 |
75 | // 模拟用户登录
76 | export const loginUser = (username: string, password: string): { success: boolean; message: string; user?: User } => {
77 | const users = getAllUsers()
78 | const user = users.find((u) => u.username === username)
79 |
80 | if (!user) {
81 | return { success: false, message: "用户不存在" }
82 | }
83 |
84 | if (user.password !== password) {
85 | // 实际应用中应该比较哈希值
86 | return { success: false, message: "密码错误" }
87 | }
88 |
89 | // 更新最后登录时间
90 | const updatedUser = {
91 | ...user,
92 | lastLogin: new Date().toISOString(),
93 | }
94 |
95 | // 保存更新后的用户
96 | storeUser(updatedUser)
97 | updateUserInList(updatedUser)
98 |
99 | return {
100 | success: true,
101 | message: "登录成功",
102 | user: updatedUser,
103 | }
104 | }
105 |
106 | // 获取所有用户（从本地存储）
107 | export const getAllUsers = (): User[] => {
108 | if (typeof window === "undefined") return []
109 |
110 | const storedUsers = localStorage.getItem("flowmix_users")
111 | if (!storedUsers) return []
112 |
113 | try {
114 | return JSON.parse(storedUsers)
115 | } catch (error) {
116 | console.error("Failed to parse stored users:", error)
117 | return []
118 | }
119 | }
120 |
121 | // 保存用户到用户列表
122 | export const saveUserToList = (user: User): void => {
123 | if (typeof window === "undefined") return
124 |
125 | const users = getAllUsers()
126 | users.push(user)
127 | localStorage.setItem("flowmix_users", JSON.stringify(users))
128 | }
129 |
130 | // 更新用户列表中的用户
131 | export const updateUserInList = (updatedUser: User): void => {
132 | if (typeof window === "undefined") return
133 |
134 | const users = getAllUsers()
135 | const index = users.findIndex((u) => u.id === updatedUser.id)
136 |
137 | if (index !== -1) {
138 | users[index] = updatedUser
139 | localStorage.setItem("flowmix_users", JSON.stringify(users))
140 | }
141 | }
142 |
143 | // 检查用户是否已认证
144 | export const isAuthenticated = (): boolean => {
145 | return !!getStoredUser()
146 | }
147 |
148 | // 登出用户
149 | export const logoutUser = (): void => {
150 | clearStoredUser()
151 | }
152 |
153 |
--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
5 | import { X } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Dialog = DialogPrimitive.Root
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger
12 |
13 | const DialogPortal = DialogPrimitive.Portal
14 |
15 | const DialogClose = DialogPrimitive.Close
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef| 102 | {cell} 103 | | 104 | ))} 105 |
|---|
| 119 | {cell} 120 | | 121 | ))} 122 |
163 | {body} 164 |
165 | ) 166 | }) 167 | FormMessage.displayName = "FormMessage" 168 | 169 | export { 170 | useFormField, 171 | Form, 172 | FormItem, 173 | FormLabel, 174 | FormControl, 175 | FormDescription, 176 | FormMessage, 177 | FormField, 178 | } 179 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | import html2canvas from "html2canvas" 4 | import { useEditorStore } from "@/lib/editor-store" 5 | 6 | export function cn(...inputs: ClassValue[]) { 7 | return twMerge(clsx(inputs)) 8 | } 9 | 10 | // 修改 printDesign 函数，调整打印预览的比例并移除底部尺寸文本 11 | 12 | export async function printDesign() { 13 | try { 14 | // 创建一个新的打印窗口 15 | const printWindow = window.open("", "_blank") 16 | if (!printWindow) { 17 | alert("请允许弹出窗口以打印设计") 18 | return 19 | } 20 | 21 | // 获取画布元素 22 | const canvas = document.querySelector(".canvas") as HTMLElement 23 | if (!canvas) return 24 | 25 | // 使用html2canvas将画布转换为图像 26 | const canvasImage = await html2canvas(canvas, { 27 | scale: 2, // 提高清晰度 28 | useCORS: true, // 允许跨域图像 29 | allowTaint: true, // 允许污染画布 30 | backgroundColor: null, // 允许透明背景，以便我们可以看到自定义背景 31 | logging: false, 32 | onclone: (clonedDoc) => { 33 | // 在克隆的文档中移除所有控制点和选中样式 34 | const resizeHandles = clonedDoc.querySelectorAll(".resize-handle") 35 | resizeHandles.forEach((handle) => { 36 | handle.remove() 37 | }) 38 | 39 | const selectedElements = clonedDoc.querySelectorAll(".selected") 40 | selectedElements.forEach((element) => { 41 | element.classList.remove("selected") 42 | }) 43 | }, 44 | }) 45 | 46 | // 获取画布尺寸 47 | const canvasSize = useEditorStore.getState().canvasSize 48 | 49 | // 设置打印窗口内容 50 | printWindow.document.write(` 51 | 52 | 53 | 54 |
142 |
143 |
144 |
145 |
146 | 
147 |
148 |
154 |
155 |
156 | `)
157 |
158 | printWindow.document.close()
159 | } catch (error) {
160 | console.error("打印失败:", error)
161 | alert("打印失败，请重试")
162 | }
163 | }
164 |
165 |
--------------------------------------------------------------------------------
/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
5 |
6 | import { cn } from "@/lib/utils"
7 | import { buttonVariants } from "@/components/ui/button"
8 |
9 | const AlertDialog = AlertDialogPrimitive.Root
10 |
11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
12 |
13 | const AlertDialogPortal = AlertDialogPrimitive.Portal
14 |
15 | const AlertDialogOverlay = React.forwardRef<
16 | React.ElementRef
63 |
64 |
65 | 登录
66 | 输入您的用户名和密码登录
67 |
68 |
115 |
116 |
117 | )
118 | }
119 |
120 |
--------------------------------------------------------------------------------
/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ToastPrimitives from "@radix-ui/react-toast"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 | import { X } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const ToastProvider = ToastPrimitives.Provider
11 |
12 | const ToastViewport = React.forwardRef<
13 | React.ElementRef
43 |
53 | ))
54 |
55 | CommandInput.displayName = CommandPrimitive.Input.displayName
56 |
57 | const CommandList = React.forwardRef<
58 | React.ElementRef
87 |
96 | ))
97 | NavigationMenuViewport.displayName =
98 | NavigationMenuPrimitive.Viewport.displayName
99 |
100 | const NavigationMenuIndicator = React.forwardRef<
101 | React.ElementRef
95 | setCurrentPage(Number.parseInt(value))}
141 | className="flex-1"
142 | >
143 |
144 | {pages.map((_, index) => (
145 |
146 | 第 {index + 1} 页
147 |
148 | ))}
149 |
150 |
151 |
152 | )
153 | }
154 |
155 |
--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SelectPrimitive from "@radix-ui/react-select"
5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Select = SelectPrimitive.Root
10 |
11 | const SelectGroup = SelectPrimitive.Group
12 |
13 | const SelectValue = SelectPrimitive.Value
14 |
15 | const SelectTrigger = React.forwardRef<
16 | React.ElementRef
96 |
100 |
101 |
105 |
106 |
110 |
111 |
120 |
121 | {showConfirm && pageToDelete === currentPage ? (
122 |
125 | ) : (
126 |
135 | )}
136 |
137 |
138 |
76 |
77 |
78 | 注册
79 | 创建一个新账户以使用编辑器
80 |
81 |
144 |
145 |
146 | )
147 | }
148 |
149 |
--------------------------------------------------------------------------------
/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import useEmblaCarousel, {
5 | type UseEmblaCarouselType,
6 | } from "embla-carousel-react"
7 | import { ArrowLeft, ArrowRight } from "lucide-react"
8 |
9 | import { cn } from "@/lib/utils"
10 | import { Button } from "@/components/ui/button"
11 |
12 | type CarouselApi = UseEmblaCarouselType[1]
13 | type UseCarouselParameters = Parameters
145 | {children}
146 |
147 |
161 |
170 |
171 | )
172 | })
173 | CarouselContent.displayName = "CarouselContent"
174 |
175 | const CarouselItem = React.forwardRef<
176 | HTMLDivElement,
177 | React.HTMLAttributes未知元素类型
152 | }
153 | }
154 |
155 | // 防止默认拖动行为
156 | useEffect(() => {
157 | const currentElement = elementRef.current
158 | if (currentElement) {
159 | const preventDefaultDrag = (e: DragEvent) => {
160 | if (!isSelected) return
161 | e.preventDefault()
162 | }
163 |
164 | currentElement.addEventListener("dragstart", preventDefaultDrag)
165 |
166 | return () => {
167 | currentElement.removeEventListener("dragstart", preventDefaultDrag)
168 | }
169 | }
170 | }, [isSelected])
171 |
172 | return (
173 |
185 |
215 |
234 |
235 | )
236 | }
237 |
238 |
--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
5 | import { Check, ChevronRight, Circle } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const DropdownMenu = DropdownMenuPrimitive.Root
10 |
11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
12 |
13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
14 |
15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
16 |
17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
18 |
19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
20 |
21 | const DropdownMenuSubTrigger = React.forwardRef<
22 | React.ElementRef {
217 | elementRef.current = node
218 | drag(node)
219 | }}
220 | className={`canvas-element ${isSelected ? "selected" : ""}`}
221 | style={{
222 | width: "100%",
223 | height: "100%",
224 | }}
225 | onClick={(e) => {
226 | e.stopPropagation()
227 | onSelect()
228 | }}
229 | onMouseDown={handleMouseDown}
230 | >
231 | {renderElement()}
232 |
233 |