From 808129e0ee4c7dc5cb864fedd73082a935ffc30f Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Thu, 14 Nov 2024 14:01:01 +1000 Subject: [PATCH] remove canvas --- .../ui/AIAssistantPanel/SqlSnippet.tsx | 26 +-- apps/studio/package.json | 1 - .../pages/project/[ref]/canvas/index.tsx | 164 ------------------ package-lock.json | 26 --- 4 files changed, 1 insertion(+), 216 deletions(-) delete mode 100644 apps/studio/pages/project/[ref]/canvas/index.tsx diff --git a/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx b/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx index 87826b32d38..05e8d1e788f 100644 --- a/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx +++ b/apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx @@ -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 ( -
+
{ - return -} - -CanvasPage.getLayout = (page) => {page} - -export default CanvasPage - -interface DraggedItem { - id: number - x: number - y: number - width: number - height: number - props: Record -} - -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((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 }> = ({ id, props }) => { - const handleDragStart = (e: React.DragEvent) => { - e.dataTransfer.setData('text/plain', JSON.stringify({ id, props })) - } - - return ( -
- -
- ) -} - -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() - - 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 ( -
- {items.map((item) => ( - { - 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) - }} - > - - - ))} -
- ) -} - -function Component() { - return ( -
- -
- ) -} diff --git a/package-lock.json b/package-lock.json index eb9735d9ac8..23d92343932 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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",