diff --git a/src/main/ipc/invokes/getFileTypes.ts b/src/main/ipc/invokes/getFileTypes.ts index fc500df..b8d2bd7 100644 --- a/src/main/ipc/invokes/getFileTypes.ts +++ b/src/main/ipc/invokes/getFileTypes.ts @@ -1,10 +1,7 @@ import { IpcMainInvokeEvent } from 'electron'; -import { PluginConfig } from 'shared/types/plugin'; +import { FileTypeMap } from 'shared/types'; import project from 'main/project'; -// TODO move it to shared types with a better name, Replace similar types with shared one -type FileTypeMap = { [name: string]: PluginConfig }; - export default async function getFileTypes( // eslint-disable-next-line @typescript-eslint/no-unused-vars event: IpcMainInvokeEvent, diff --git a/src/renderer/components/Tab/TabView.tsx b/src/renderer/components/Tab/TabView.tsx index 6d1c378..82b3ff9 100644 --- a/src/renderer/components/Tab/TabView.tsx +++ b/src/renderer/components/Tab/TabView.tsx @@ -3,7 +3,7 @@ import React from 'react'; import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; -import { ChannelsMain } from 'shared/types'; +import { ChannelsMain, FileTypeMap } from 'shared/types'; import { useAppSelector, useAppDispatch } from 'renderer/state/store/index'; import { @@ -23,11 +23,11 @@ export interface TabViewProps { export default function TabView({ tabId }: TabViewProps) { const dispatch = useAppDispatch(); // TODO use shard type for the state - const [fileTypes, setFileTypes] = React.useState(null); + const [fileTypes, setFileTypes] = React.useState(null); React.useEffect(() => { async function getFileTypes() { - const result: string[] = await window.electron.ipcRenderer.invoke( + const result: FileTypeMap = await window.electron.ipcRenderer.invoke( ChannelsMain.getFileTypes ); setFileTypes(result); @@ -49,10 +49,18 @@ export default function TabView({ tabId }: TabViewProps) { if (fileTypes) { const fileTypePlugin = fileTypes[tabData.extension]; if (fileTypePlugin) { - return ; + return ( + + ); } else { return ; } + } else { + return undefined; } }; diff --git a/src/renderer/components/Tab/TabViews/FlowView.tsx b/src/renderer/components/Tab/TabViews/FlowView.tsx index 09371f9..d78d661 100644 --- a/src/renderer/components/Tab/TabViews/FlowView.tsx +++ b/src/renderer/components/Tab/TabViews/FlowView.tsx @@ -18,6 +18,7 @@ import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import { ChannelsMain } from 'shared/types'; +import { FlowViewConfig } from 'shared/types/plugin'; import { useAppSelector } from 'renderer/state/store/index'; import { FileTabData } from 'renderer/state/types'; @@ -39,48 +40,10 @@ import ConversationNode from 'renderer/components/Nodes/ConversationNode'; import 'reactflow/dist/style.css'; -const initialNodes = [ - { - id: '1', - type: 'Plot', - data: { label: 'Node 1' }, - position: { x: 0, y: 0 }, - }, - { - id: '2', - type: 'Plot', - data: { label: 'Node 2' }, - position: { x: 400, y: 0 }, - }, -]; - const edgeSharedSettings = { markerEnd: { type: MarkerType.ArrowClosed, width: 6 }, }; -const initialEdges = [ - { - id: 'e1', - source: '1', - target: '2', - ...edgeSharedSettings, - }, -]; - -const nodeConfigs = [ - { - type: 'Plot', - connections: [1, 1], - }, - { - type: 'Note', - }, - { - type: 'Conversation', - connections: [1, 1], - }, -]; - const nodeTypes = { Plot: PlotNode, Note: NoteNode, @@ -131,9 +94,11 @@ type SetIsDirtyCallbackType = (isDirty: boolean) => void; export interface FlowProps { tabId: string; setTabIsDirty: SetIsDirtyCallbackType; + config: FlowViewConfig; } -function Flow({ tabId, setTabIsDirty }: FlowProps) { +function Flow({ tabId, setTabIsDirty, config }: FlowProps) { + const nodeConfigs = config.nodes; const tabState = useAppSelector((state) => state.tabsState.tabs.find((tab) => tab.id === tabId) ); @@ -150,8 +115,9 @@ function Flow({ tabId, setTabIsDirty }: FlowProps) { setIsDirty: setTabIsDirty, maxHistorySize: 100, }); - const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); - const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + + const [nodes, setNodes, onNodesChange] = useNodesState([]); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); const [splash, setSplash] = React.useState(true); const [contextMenu, setContextMenu] = React.useState<{ @@ -278,6 +244,7 @@ function Flow({ tabId, setTabIsDirty }: FlowProps) { } }, [ + nodeConfigs, nodes, setNodes, setEdges, @@ -392,6 +359,7 @@ function Flow({ tabId, setTabIsDirty }: FlowProps) { if (!rclick) centerOnNode(newNode.id); }, [ + nodeConfigs, contextMenu, nodes, setNodes, @@ -473,12 +441,17 @@ function Flow({ tabId, setTabIsDirty }: FlowProps) { export interface FlowViewProps { tabId: string; setTabIsDirty: SetIsDirtyCallbackType; + config: FlowViewConfig; } -export default function FlowView({ tabId, setTabIsDirty }: FlowViewProps) { +export default function FlowView({ + tabId, + setTabIsDirty, + config, +}: FlowViewProps) { return ( - + ); } diff --git a/src/shared/types/fileTypeMap.ts b/src/shared/types/fileTypeMap.ts new file mode 100644 index 0000000..e8b6d68 --- /dev/null +++ b/src/shared/types/fileTypeMap.ts @@ -0,0 +1,3 @@ +import { PluginConfig } from './plugin'; + +export type FileTypeMap = { [name: string]: PluginConfig }; diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index 6f4a4f8..b142f04 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -10,6 +10,7 @@ import { CreateNewProjectResult } from './createNewProjectResult'; import { BrowseFileSystemResult } from './browseFileSystemResult'; import { OpenProjectResult } from './openProjectResult'; import { ProjectTreeNode, ProjectTree } from './projectTree'; +import { FileTypeMap } from './fileTypeMap'; import Logger from './logger'; import LogLevel from './logLevel'; import LogMessage, { formatLog } from './logMessage'; @@ -35,6 +36,7 @@ export type { OpenProjectResult, ProjectTreeNode, ProjectTree, + FileTypeMap, Logger, LogMessage, }; diff --git a/src/shared/types/plugin/pluginConfig.ts b/src/shared/types/plugin/pluginConfig.ts index 3c18e8d..e0066ac 100644 --- a/src/shared/types/plugin/pluginConfig.ts +++ b/src/shared/types/plugin/pluginConfig.ts @@ -5,7 +5,7 @@ export type ConnectionInfo = { export type NodeInfo = { type: string; - connection: ConnectionInfo; + connections: ConnectionInfo; }; export type FlowViewConfig = {