feat: fullscreen for data node
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import React, { useCallback, useMemo, useRef, useState } from 'react'
|
import React, { useCallback, useContext, useMemo, useRef, useState } from 'react'
|
||||||
import {
|
import {
|
||||||
AbstractNodeProps,
|
AbstractNodeProps,
|
||||||
createAbstractNodeComponent,
|
createAbstractNodeComponent,
|
||||||
@@ -13,6 +13,8 @@ import {
|
|||||||
import { NodeFooterEdgeIndicators } from '../base/NodeFooterEdgeIndicators'
|
import { NodeFooterEdgeIndicators } from '../base/NodeFooterEdgeIndicators'
|
||||||
import { NodeHeaderTitle } from '../base/NodeHeaderTitle'
|
import { NodeHeaderTitle } from '../base/NodeHeaderTitle'
|
||||||
import { NodeMenubar } from '../base/NodeMenubar'
|
import { NodeMenubar } from '../base/NodeMenubar'
|
||||||
|
import FlowContext from '../../lib/flowContext'
|
||||||
|
import { getNodeType } from '../../lib/nodeRegistry'
|
||||||
import { OutputHandle } from '../base/NodeHandles'
|
import { OutputHandle } from '../base/NodeHandles'
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table'
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table'
|
||||||
import { parseCsvToRows } from '../../lib/csvParse'
|
import { parseCsvToRows } from '../../lib/csvParse'
|
||||||
@@ -50,6 +52,9 @@ export type DataNodeData = {
|
|||||||
type Props = AbstractNodeProps<DataNodeData>
|
type Props = AbstractNodeProps<DataNodeData>
|
||||||
|
|
||||||
function DataNodeComponent({ id, data, width, height, selected }: Props) {
|
function DataNodeComponent({ id, data, width, height, selected }: Props) {
|
||||||
|
const flowContext = useContext(FlowContext)
|
||||||
|
const setFullscreenNodeId = flowContext?.setFullscreenNodeId
|
||||||
|
const supportsFullscreen = getNodeType('data')?.supportsFullscreen
|
||||||
const { updateData } = useAbstractNode<DataNodeData>(id, data ?? {})
|
const { updateData } = useAbstractNode<DataNodeData>(id, data ?? {})
|
||||||
const rows = data?.rows ?? []
|
const rows = data?.rows ?? []
|
||||||
const columns = data?.columns ?? []
|
const columns = data?.columns ?? []
|
||||||
@@ -248,7 +253,11 @@ function DataNodeComponent({ id, data, width, height, selected }: Props) {
|
|||||||
className="sr-only"
|
className="sr-only"
|
||||||
aria-label="Upload CSV file"
|
aria-label="Upload CSV file"
|
||||||
/>
|
/>
|
||||||
<BaseNodeHeaderRow icon={<Database className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
|
<BaseNodeHeaderRow
|
||||||
|
icon={<Database className="size-4" />}
|
||||||
|
title={<NodeHeaderTitle nodeId={id} displayTitle={id} />}
|
||||||
|
onHeaderDoubleClick={supportsFullscreen && setFullscreenNodeId ? () => setFullscreenNodeId(id) : undefined}
|
||||||
|
/>
|
||||||
|
|
||||||
<BaseNodeContent>
|
<BaseNodeContent>
|
||||||
<div className="shrink-0 w-full">
|
<div className="shrink-0 w-full">
|
||||||
|
|||||||
@@ -109,6 +109,7 @@ export function registerBuiltinNodes(): void {
|
|||||||
menuLabel: 'Data',
|
menuLabel: 'Data',
|
||||||
menuIcon: <Database className={ICON_CLASS} />,
|
menuIcon: <Database className={ICON_CLASS} />,
|
||||||
connectionLabel: 'data source',
|
connectionLabel: 'data source',
|
||||||
|
supportsFullscreen: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
registerNodeType({
|
registerNodeType({
|
||||||
|
|||||||
Reference in New Issue
Block a user