Merge branch 'main' of https://github.com/GSEKM/MDD4CPD

jsconfig.json

@@ -34,6 +34,7 @@
     "src/**/*.js",
     "src/**/*.svelte",
     "src/**/*.tsx",
-    "src/components/code/code.ts"
+    "src/components/code/code.ts",
+    "src/components/code/GoClass.ts"
   ],
 }

package.json

@@ -16,7 +16,7 @@
     "@mui/material": "^6.1.2",
     "@xyflow/svelte": "0.0.41",
     "gojs": "^3.0.11",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.26.0",
     "react": "^18.3.1",
     "react-tooltip": "^5.28.0",
     "react-xarrows": "^2.0.2",
@@ -25,11 +25,11 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.4",
     "@types/node": "^20.12.13",
-    "@types/prismjs": "^1.26.4",
+    "@types/prismjs": "^1.26.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "svelte": "^4.2.15",
     "tailwindcss": "^3.4.3",
     "vite": "^4.5.5"
   }
-}
+}

src/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SvelteFlowProvider} from "@xyflow/svelte";
+  import { SvelteFlowProvider } from "@xyflow/svelte";
   import "@xyflow/svelte/dist/style.css";
   import Flow from "./Flow.svelte";
 </script>

src/Flow.svelte

@@ -8,20 +8,28 @@
         BackgroundVariant,
         MiniMap,
         useSvelteFlow,
+        Panel,
+        type ColorMode,
         type Edge,
         type Node,
         type NodeTypes,
     } from "@xyflow/svelte";
+    //@ts-ignore
     import Sidebar from "./components/sidebar/Sidebar.svelte";
     import paletteNodes from "./nodes.json";
     import ModalNode from "./components/nodes/ModalNode.svelte";
+    //@ts-ignore
     import CustomNode from "./components/nodes/CustomNode.svelte";
+    //@ts-ignore
     import ResultNode from "./components/nodes/ResultNode.svelte";
+    //@ts-ignore
     import NodeModal from "./components/nodes/NodeModal.svelte";
+    //@ts-ignore
     import CustomEdge from "./components/edges/CustomEdge.svelte";
     import { edges, nodes } from "./components/code/store";
     import generateCode from "./components/code/code";
-
+    import Code from "./components/code/code";
+    import CodeViewer from "./components/codeViewer/codeViewer.svelte";
     // Initialize SvelteFlow hook
     const { screenToFlowPosition, getNodes, updateNode, toObject } =
         useSvelteFlow();
@@ -82,6 +90,7 @@
         const targetNode = nodesAux.find((node) => node.id === edge.target);
 
         // Find the handle that matches the edge
+        //@ts-ignore
         const handle = sourceNode?.data?.handles.find(
             (h) => h.id === edge.sourceHandle,
         );
@@ -92,6 +101,7 @@
             if (targetNode.data.handles === undefined) {
                 return;
             } else {
+                //@ts-ignore
                 const handleEnd = targetNode.data.handles.find(
                     (h) => h.id === edge.targetHandle,
                 );
@@ -150,65 +160,44 @@
         updateNode(edge.source, { position: sourceNode.position });
     };
 
-    // Node click handler
-    export const createNodeModal = (event: CustomEvent<{ node: Node }>) => {
-        const nodeId = event.detail.node.id;
-        const nodesAux: Node[] = getNodes();
-        const sourceNode = nodesAux.find((node) => node.id === nodeId);
-        if (sourceNode.type === "config" || sourceNode.type === "modal") return;
-        if (!sourceNode) return;
-
-        const newNode: Node = {
-            id: `${modalNodeId++}`,
-            type: "config",
-            data: {
-                //@ts-ignore
-                inputParameterName:
-                    sourceNode.data.extras?.inputParameterName || "",
-                methods: sourceNode.data.handles.map((h) => h.edge),
-                source: sourceNode.id,
-                // extra: {
-                // },
-            },
-            position: {
-                x: sourceNode.position.x - 130,
-                y: sourceNode.position.y - 290,
-            },
-        };
-
-        nodes.update((n) => [...n, newNode]);
-    };
-
     export function getRepresentation() {
         const representation = toObject();
         return { model: JSON.stringify(representation) };
     }
+
+    // Stores reativas para `code` e `problems`
+    export const code = writable("");
+    export const problems = writable([]);
+
+    const onSaveClick = () => {
+        const result = generateCode(getRepresentation());
+        if (result) {
+            code.set(result.code);
+            problems.set(result.problems);
+        }
+    };
+
+    let colorMode: ColorMode = "dark";
 </script>
 
 <main>
-    <button
-        class="save-button"
-        on:click={() => {
-            generateCode(getRepresentation());
-        }}>Salvar</button
-    >
+    <Sidebar nodes={paletteNodes} />
     <SvelteFlow
         {nodes}
         {edges}
         {nodeTypes}
         {edgeTypes}
+        {colorMode}
         defaultEdgeOptions={{ type: "customEdge" }}
         on:dragover={onDragOver}
         on:drop={onDrop}
         on:edgeclick={onEdgeClick}
-        on:nodeclick={(e) => createNodeModal(e)}
     >
         <Controls />
         <Background variant={BackgroundVariant.Dots} />
-
         <MiniMap pannable zoomable />
     </SvelteFlow>
-    <Sidebar nodes={paletteNodes} />
+    <CodeViewer code={$code} problems={$problems} {onSaveClick} />
 </main>
 
 <style>