diff --git a/extension.js b/extension.js index 44e4a4c..fe5541b 100644 --- a/extension.js +++ b/extension.js @@ -22,7 +22,7 @@ function activate(context) { const tree = new Parser(fileArray[0].path); tree.parse(); const data = tree.getTree(); - // console.log('Data sent back: ', data); + console.log('Data sent back: \n', data); createPanel(context, data); }); context.subscriptions.push(disposable, result); diff --git a/src/panel.js b/src/panel.js index 3be17d1..2328f6c 100644 --- a/src/panel.js +++ b/src/panel.js @@ -34,12 +34,14 @@ function createPanel(context, data) { switch (msg.type) { case 'onData': if (!msg.value) break; - // context.workspaceState.update('reactLabyrinth', msg.value); + context.workspaceState = context.workspaceState || {}; + context.workspaceState.update('reactLabyrinth', msg.value); + // console.log('msg.value from panel.js: ', msg.value); panel.webview.postMessage( { type: 'parsed-data', value: msg.value, // tree object - // settings: await vscode.workspace.getConfiguration('reactLabyrinth') + settings: await vscode.workspace.getConfiguration('reactLabyrinth') }); break; diff --git a/src/webview/Flow.jsx b/src/webview/Flow.jsx index d56ecde..02002df 100644 --- a/src/webview/Flow.jsx +++ b/src/webview/Flow.jsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import ReactFlow, { addEdge, MiniMap, @@ -9,20 +9,21 @@ import ReactFlow, { } from "reactflow"; import "reactflow/dist/style.css" -import { - nodes as initialNodes, - edges as initialEdges -} from "./initial"; +import FlowBuilder from './flowBuilder.js'; const onInit = (reactFlowInstance) => console.log("flow loaded:", reactFlowInstance); const OverviewFlow = () => { + const initialNodes = []; + const initialEdges = []; + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); + const onConnect = useCallback( - (params) => setEdges((eds) => addEdge(params, eds)), - [setEdges] + (params) => setEdges((eds) => addEdge({ ...params, type: ConnectionLineType.Bezier, animated: true }, eds)), + [] ); useEffect(() => { @@ -30,9 +31,13 @@ const OverviewFlow = () => { const msg = e.data; // object containing type prop and value prop switch (msg.type) { case 'parsed-data': { - // this is where we would set state of msg for tree data, root file, and other info - console.log('msg.value: ', msg.value); - console.log('testing from flow.jsx'); + const results = new FlowBuilder(msg.value); + results.build(msg.settings) + console.log('results: ', results); + console.log('results.initialNodes: ', results.initialNodes); + console.log('results.initialEdges: ', results.initialEdges); + setNodes(results.initialNodes); + setEdges(results.initialEdges); break; } } diff --git a/src/webview/flowBuilder.js b/src/webview/flowBuilder.js new file mode 100644 index 0000000..6647f44 --- /dev/null +++ b/src/webview/flowBuilder.js @@ -0,0 +1,109 @@ +import React from 'react'; +// will create a build func and then call the helper funcs to return an object +// make a new instance of this class in flow, call the build method, and pass this as state +class FlowBuilder { + constructor(data) { + this.parsedData = [data]; + this.id = 0; + this.initialNodes = []; + this.viewData; + this.edgeId = 0; + this.initialEdges = []; + } + + buildNodesArray(parsedData) { + if (!parsedData) return; + + parsedData.forEach((item) => { + const node = { + id: (++this.id).toString(), + data: { + label: ( +
+ +
+ ) + }, + type: item.depth === 0 ? 'input' : '', + position: { x: 0, y: 0 }, + style: { + backgroundColor: "var(--vscode-dropdown-background)", + borderRadius: "15px", + width: '265px', + boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', + border: 'none', + padding: '10px 10px 3px 10px' + }, + }; + this.initialNodes.push(node); + if (item.children) { + this.buildNodesArray(item.children); + } + }); + // console.log('initialNodes', this.initialNodes); + }; + + buildEdgesArray(parsedData, parentID) { + if (!parsedData) return; + + parsedData.forEach((item) => { + const nodeID = ++this.edgeId; + if (parentID) { + const edge = { + id: `e${parentID}-${nodeID}`, + source: parentID.toString(), + target: nodeID.toString(), + type: 'bezier', + animated: false, + }; + this.initialEdges.push(edge); + } + if (item.children) { + this.buildEdgesArray(item.children, nodeID); + } + }); + // console.log('initialEdges', this.initialEdges); + } + + build(settings) { + const treeParsed = JSON.parse(JSON.stringify(this.parsedData[0])); + console.log('settings: ', settings); + const traverse = (node) => { + let validChildren = []; + + for (let i = 0; i < node.children.length; i++) { + if ( + node.children[i].thirdParty && + settings.thirdParty && + !node.children[i].reactRouter + ) { + validChildren.push(node.children[i]); + } else if (node.children[i].reactRouter && settings.reactRouter) { + validChildren.push(node.children[i]); + } else if ( + !node.children[i].thirdParty && + !node.children[i].reactRouter + ) { + validChildren.push(node.children[i]); + } + } + + // Update children with only valid nodes, and recurse through each node + node.children = validChildren; + node.children.forEach((child) => { + traverse(child); + }); + } + traverse(treeParsed); + // Update the vewData state + this.viewData = ([treeParsed]); + console.log('viewData:', this.viewData); + this.buildNodesArray(this.viewData); + this.buildEdgesArray(this.viewData); + } +} + +export default FlowBuilder; \ No newline at end of file diff --git a/src/webview/initial.js b/src/webview/initial.js deleted file mode 100644 index 1a76d5c..0000000 --- a/src/webview/initial.js +++ /dev/null @@ -1,115 +0,0 @@ -import React from "react"; -import { MarkerType } from "reactflow"; - -export const nodes = [ - { - id: "1", - type: "input", - data: { - label: ( - <> - Welcome to React Flow! - - ) - }, - position: { x: 250, y: 0 } - }, - { - id: "2", - data: { - label: ( - <> - This is a default node - - ) - }, - position: { x: 100, y: 100 } - }, - { - id: "3", - data: { - label: ( - <> - This one has a custom style - - ) - }, - position: { x: 400, y: 100 }, - style: { - background: "#D6D5E6", - color: "#333", - border: "1px solid #222138", - width: 180 - } - }, - { - id: "4", - position: { x: 250, y: 200 }, - data: { - label: "Another default node" - } - }, - { - id: "5", - data: { - label: "Node id: 5" - }, - position: { x: 250, y: 325 } - }, - { - id: "6", - type: "output", - data: { - label: ( - <> - An output node - - ) - }, - position: { x: 100, y: 480 } - }, - { - id: "7", - type: "output", - data: { label: "Another output node" }, - position: { x: 400, y: 450 } - } -]; - -export const edges = [ - { id: "e1-2", source: "1", target: "2", label: "this is an edge label" }, - { id: "e1-3", source: "1", target: "3" }, - { - id: "e3-4", - source: "3", - target: "4", - animated: true, - label: "animated edge" - }, - { - id: "e4-5", - source: "4", - target: "5", - label: "edge with arrow head", - markerEnd: { - type: MarkerType.ArrowClosed - } - }, - { - id: "e5-6", - source: "5", - target: "6", - type: "smoothstep", - label: "smooth step edge" - }, - { - id: "e5-7", - source: "5", - target: "7", - type: "step", - style: { stroke: "#f6ab6c" }, - label: "a step edge", - animated: true, - labelStyle: { fill: "#f6ab6c", fontWeight: 700 } - } -];