mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 07:09:07 +03:00
remove canvas
This commit is contained in:
Saxon Fletcher committed
1 parent
20032d5534
commit
808129e0ee
4 files changed
+1
-216
No files matched your search
@@ -7,7 +7,6 @@ import { suffixWithLimit } from 'components/interfaces/SQLEditor/SQLEditor.utils
|
||||
import Results from 'components/interfaces/SQLEditor/UtilityPanel/Results'
|
||||
import { BarChart, Bar, XAxis, CartesianGrid } from 'recharts'
|
||||
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
|
||||
import { Rnd } from 'react-rnd'
|
||||
import { Admonition } from 'ui-patterns'
|
||||
import useNewQuery from 'components/interfaces/SQLEditor/hooks'
|
||||
|
||||
@@ -75,31 +74,8 @@ const SqlSnippetWrapper = ({ sql, isLoading, readOnly = false }: SqlSnippetWrapp
|
||||
formatted = formatted.replace(/--\s*props:\s*\{[^}]+\}/, '').trim()
|
||||
console.log('props:', propsMatch, title, propsMatch)
|
||||
|
||||
const handleDragStart = useCallback(
|
||||
(e: React.DragEvent) => {
|
||||
e.dataTransfer.setData(
|
||||
'text/plain',
|
||||
JSON.stringify({
|
||||
props: {
|
||||
id: `sql-snippet-${Math.random().toString(36).substr(2, 9)}`,
|
||||
title,
|
||||
sql: formatted,
|
||||
isChart: props.isChart,
|
||||
xAxis: props.xAxis,
|
||||
yAxis: props.yAxis,
|
||||
},
|
||||
})
|
||||
)
|
||||
},
|
||||
[title, formatted, props.isChart, props.xAxis, props.yAxis]
|
||||
)
|
||||
|
||||
return (
|
||||
<div
|
||||
draggable
|
||||
onDragStart={handleDragStart}
|
||||
className="-mx-8 my-3 mt-2 border-b overflow-hidden"
|
||||
>
|
||||
<div className="-mx-8 my-3 mt-2 border-b overflow-hidden">
|
||||
<SqlCard
|
||||
sql={formatted}
|
||||
isChart={props.isChart}
|
||||
|
||||
@@ -104,7 +104,6 @@
|
||||
"react-inlinesvg": "^4.0.4",
|
||||
"react-intersection-observer": "^9.5.3",
|
||||
"react-markdown": "^8.0.3",
|
||||
"react-rnd": "^10.4.13",
|
||||
"react-simple-maps": "4.0.0-beta.6",
|
||||
"react-tracked": "^1.7.11",
|
||||
"react-use": "^17.5.0",
|
||||
|
||||
@@ -1,164 +0,0 @@
|
||||
import React, { useEffect, useCallback, useRef } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { create } from 'zustand'
|
||||
import { Rnd } from 'react-rnd'
|
||||
import { Button } from 'ui'
|
||||
import { ProjectLayoutWithAuth } from 'components/layouts/ProjectLayout/ProjectLayout'
|
||||
import { SqlCard } from 'components/ui/AIAssistantPanel/SqlSnippet'
|
||||
import type { NextPageWithLayout } from 'types'
|
||||
|
||||
const CanvasPage: NextPageWithLayout = () => {
|
||||
return <Component />
|
||||
}
|
||||
|
||||
CanvasPage.getLayout = (page) => <ProjectLayoutWithAuth>{page}</ProjectLayoutWithAuth>
|
||||
|
||||
export default CanvasPage
|
||||
|
||||
interface DraggedItem {
|
||||
id: number
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
props: Record<string, any>
|
||||
}
|
||||
|
||||
interface CanvasStore {
|
||||
items: DraggedItem[]
|
||||
addItem: (item: DraggedItem) => void
|
||||
updateItemPosition: (id: number, x: number, y: number) => void
|
||||
updateItemSize: (id: number, width: number, height: number) => void
|
||||
setItems: (items: DraggedItem[]) => void
|
||||
}
|
||||
|
||||
const useCanvasStore = create<CanvasStore>((set) => ({
|
||||
items: [],
|
||||
addItem: (item) => set((state) => ({ items: [...state.items, item] })),
|
||||
updateItemPosition: (id, x, y) =>
|
||||
set((state) => ({
|
||||
items: state.items.map((item) => (item.props.id === id ? { ...item, x, y } : item)),
|
||||
})),
|
||||
updateItemSize: (id, width, height) =>
|
||||
set((state) => ({
|
||||
items: state.items.map((item) => (item.props.id === id ? { ...item, width, height } : item)),
|
||||
})),
|
||||
setItems: (items) => set({ items }),
|
||||
}))
|
||||
|
||||
const DraggableItem: React.FC<{ id: number; props: Record<string, any> }> = ({ id, props }) => {
|
||||
const handleDragStart = (e: React.DragEvent) => {
|
||||
e.dataTransfer.setData('text/plain', JSON.stringify({ id, props }))
|
||||
}
|
||||
|
||||
return (
|
||||
<div draggable onDragStart={handleDragStart} className="cursor-move">
|
||||
<Button type="outline">Drag Me (ID: {id})</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Canvas: React.FC = () => {
|
||||
const router = useRouter()
|
||||
const items = useCanvasStore((state) => state.items)
|
||||
const addItem = useCanvasStore((state) => state.addItem)
|
||||
const updateItemPosition = useCanvasStore((state) => state.updateItemPosition)
|
||||
const updateItemSize = useCanvasStore((state) => state.updateItemSize)
|
||||
const setItems = useCanvasStore((state) => state.setItems)
|
||||
|
||||
const debounceTimer = useRef<NodeJS.Timeout>()
|
||||
|
||||
useEffect(() => {
|
||||
const queryItems = router.query.items
|
||||
if (queryItems && typeof queryItems === 'string') {
|
||||
try {
|
||||
const parsedItems = JSON.parse(decodeURIComponent(queryItems))
|
||||
setItems(parsedItems)
|
||||
} catch (error) {
|
||||
console.error('Failed to parse items from URL:', error)
|
||||
}
|
||||
}
|
||||
}, [router.query.items, setItems])
|
||||
|
||||
useEffect(() => {
|
||||
if (items.length > 0) {
|
||||
if (debounceTimer.current) {
|
||||
clearTimeout(debounceTimer.current)
|
||||
}
|
||||
|
||||
debounceTimer.current = setTimeout(() => {
|
||||
const queryString = encodeURIComponent(
|
||||
JSON.stringify(
|
||||
items.map((item) => ({
|
||||
id: item.id,
|
||||
x: item.x,
|
||||
y: item.y,
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
}))
|
||||
)
|
||||
)
|
||||
router.replace(
|
||||
{
|
||||
query: { ...router.query, items: queryString },
|
||||
},
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
)
|
||||
}, 500) // 500ms debounce delay
|
||||
|
||||
return () => {
|
||||
if (debounceTimer.current) {
|
||||
clearTimeout(debounceTimer.current)
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [items, router])
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
const data = JSON.parse(e.dataTransfer.getData('text/plain'))
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
const x = e.clientX - rect.left
|
||||
const y = e.clientY - rect.top
|
||||
addItem({ ...data, x, y, width: 400, height: 150 })
|
||||
}
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
className="w-full h-full border-2 border-dashed border-gray-300 relative overflow-hidden"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Rnd
|
||||
className="bg shadow rounded-lg overflow-hidden"
|
||||
key={item.props.id}
|
||||
position={{ x: item.x, y: item.y }}
|
||||
size={{ width: item.width, height: item.height }}
|
||||
onDragStop={(e, d) => {
|
||||
updateItemPosition(item.props.id, d.x, d.y)
|
||||
}}
|
||||
onResizeStop={(e, direction, ref, delta, position) => {
|
||||
updateItemSize(item.props.id, parseFloat(ref.style.width), parseFloat(ref.style.height))
|
||||
updateItemPosition(item.props.id, position.x, position.y)
|
||||
}}
|
||||
>
|
||||
<SqlCard {...item.props} />
|
||||
</Rnd>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Component() {
|
||||
return (
|
||||
<div className="p-4 space-y-4 h-full w-full">
|
||||
<Canvas />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Generated
-26
@@ -1864,7 +1864,6 @@
|
||||
"react-inlinesvg": "^4.0.4",
|
||||
"react-intersection-observer": "^9.5.3",
|
||||
"react-markdown": "^8.0.3",
|
||||
"react-rnd": "^10.4.13",
|
||||
"react-simple-maps": "4.0.0-beta.6",
|
||||
"react-tracked": "^1.7.11",
|
||||
"react-use": "^17.5.0",
|
||||
@@ -36474,16 +36473,6 @@
|
||||
"safe-buffer": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/re-resizable": {
|
||||
"version": "6.10.0",
|
||||
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.0.tgz",
|
||||
"integrity": "sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
@@ -36998,21 +36987,6 @@
|
||||
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-rnd": {
|
||||
"version": "10.4.13",
|
||||
"resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.4.13.tgz",
|
||||
"integrity": "sha512-Vgbf0iihspcQ6nkaFhpOGWfmnuVbhkhoB0hBbYl8aRDA4horsQHESc4E1z7O/P27kFFjK2aqM0u5CGzfr9gEZA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"re-resizable": "6.10.0",
|
||||
"react-draggable": "4.4.6",
|
||||
"tslib": "2.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.3.0",
|
||||
"react-dom": ">=16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-simple-maps": {
|
||||
"version": "4.0.0-beta.6",
|
||||
"resolved": "https://registry.npmjs.org/react-simple-maps/-/react-simple-maps-4.0.0-beta.6.tgz",
|
||||
|
||||
Reference in new issue
Block a user