Merging dev into main #49
@@ -1,13 +1,12 @@
|
|||||||
import './VisProgUI.css'
|
import './VisProgUI.css'
|
||||||
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Background,
|
Background,
|
||||||
Controls,
|
Controls,
|
||||||
|
Panel,
|
||||||
ReactFlow,
|
ReactFlow,
|
||||||
ReactFlowProvider,
|
ReactFlowProvider,
|
||||||
MarkerType,
|
MarkerType,
|
||||||
Panel,
|
|
||||||
} from '@xyflow/react';
|
} from '@xyflow/react';
|
||||||
import '@xyflow/react/dist/style.css';
|
import '@xyflow/react/dist/style.css';
|
||||||
import {
|
import {
|
||||||
@@ -15,17 +14,16 @@ import {
|
|||||||
EndNode,
|
EndNode,
|
||||||
PhaseNode,
|
PhaseNode,
|
||||||
NormNode
|
NormNode
|
||||||
} from "./components/NodeDefinitions.tsx";
|
} from './components/NodeDefinitions.tsx';
|
||||||
|
|
||||||
import { Sidebar } from './components/DragDropSidebar.tsx';
|
import { Sidebar } from './components/DragDropSidebar.tsx';
|
||||||
|
|
||||||
import useFlowStore from "./VisProgStores.tsx";
|
import useFlowStore from './VisProgStores.tsx';
|
||||||
import {useShallow} from "zustand/react/shallow";
|
import {useShallow} from 'zustand/react/shallow';
|
||||||
import type {FlowState} from "./VisProgTypes.tsx";
|
import type {FlowState} from './VisProgTypes.tsx';
|
||||||
|
|
||||||
// --| config starting params for flow |--
|
// --| config starting params for flow |--
|
||||||
|
|
||||||
|
|
||||||
const nodeTypes = {
|
const nodeTypes = {
|
||||||
start: StartNode,
|
start: StartNode,
|
||||||
end: EndNode,
|
end: EndNode,
|
||||||
@@ -67,9 +65,9 @@ const VisProgUI = ()=> {
|
|||||||
nodes={nodes}
|
nodes={nodes}
|
||||||
edges={edges}
|
edges={edges}
|
||||||
defaultEdgeOptions={defaultEdgeOptions}
|
defaultEdgeOptions={defaultEdgeOptions}
|
||||||
|
nodeTypes={nodeTypes}
|
||||||
onNodesChange={onNodesChange}
|
onNodesChange={onNodesChange}
|
||||||
onEdgesChange={onEdgesChange}
|
onEdgesChange={onEdgesChange}
|
||||||
nodeTypes={nodeTypes}
|
|
||||||
onReconnect={onReconnect}
|
onReconnect={onReconnect}
|
||||||
onReconnectStart={onReconnectStart}
|
onReconnectStart={onReconnectStart}
|
||||||
onReconnectEnd={onReconnectEnd}
|
onReconnectEnd={onReconnectEnd}
|
||||||
@@ -85,16 +83,15 @@ const VisProgUI = ()=> {
|
|||||||
<Background />
|
<Background />
|
||||||
</ReactFlow>
|
</ReactFlow>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/* --| Places the VisProgUI component inside a ReactFlowProvider
|
/* --| Places the VisProgUI component inside a ReactFlowProvider
|
||||||
*
|
*
|
||||||
* Wrapping the editor component inside a ReactFlowProvider
|
* Wrapping the editor component inside a ReactFlowProvider
|
||||||
* allows us to access and interact with the components inside the editor,
|
* allows us to access and interact with the components inside the editor, outside the editor definition,
|
||||||
* thus facilitating the addition of node specific functions inside their node definitions
|
* thus facilitating the addition of node specific functions inside their node definitions
|
||||||
*/
|
*/
|
||||||
function VisualProgrammingUI(){
|
function VisualProgrammingUI(){
|
||||||
|
|||||||
Reference in New Issue
Block a user