From f48a5210b813bd70291a94c7ab66220b6f135a5c Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Fri, 11 Jul 2025 19:16:16 +0300
Subject: [PATCH] Fix iframe

---
 frontend/src/components/Diagram.jsx | 45 ++++++++++++++++-------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Diagram.jsx b/frontend/src/components/Diagram.jsx
index 4abcf92..f4ced64 100644
--- a/frontend/src/components/Diagram.jsx
+++ b/frontend/src/components/Diagram.jsx
@@ -31,6 +31,7 @@ function Diagram() {
   const [selectedEdge, setSelectedEdge] = useState(null);
   const [diagramName, setDiagramName] = useState(null);
   const [diagramList, setDiagramList] = useState([]);
+  const isIframe = window.self !== window.top;
 
   useEffect(() => {
     let isMounted = true;
@@ -239,29 +240,33 @@ function Diagram() {
           </div>
         </div>
 
-        <button className="btn" style={{ background: '#d28519' }} onClick={() => {
-          const newName = prompt("Enter new diagram name:");
-          if (newName) {
-            if (!diagramList.includes(newName)) {
-              const updatedList = [...diagramList, newName];
-              setDiagramList(updatedList);
-            }
-            setDiagramName(newName);
-            setNodes([]);
-            setEdges([]);
-            setSelectedNode(null);
-            setSelectedEdge(null);
-          }
-        }}>🆕 New Diagram</button>
+        {!isIframe && (
+          <>
+            <button className="btn" style={{ background: '#d28519' }} onClick={() => {
+              const newName = prompt("Enter new diagram name:");
+              if (newName) {
+                if (!diagramList.includes(newName)) {
+                  const updatedList = [...diagramList, newName];
+                  setDiagramList(updatedList);
+                }
+                setDiagramName(newName);
+                setNodes([]);
+                setEdges([]);
+                setSelectedNode(null);
+                setSelectedEdge(null);
+              }
+            }}>🆕 New Diagram</button>
 
-        <button className="btn" onClick={handleSave} style={{ background: 'green' }}>💾 Save</button>
-        <button className="btn" onClick={handleAddNode} style={{ background: 'blue' }}>➕ Add Node</button>
+            <button className="btn" onClick={handleSave} style={{ background: 'green' }}>💾 Save</button>
+            <button className="btn" onClick={handleAddNode} style={{ background: 'blue' }}>➕ Add Node</button>
 
-        <button className="btn" onClick={handleDeleteNode} style={{ background: selectedNode ? '#b81a1a' : '#ccc', color: selectedNode ? 'white' : '#666', cursor: selectedNode ? 'pointer' : 'not-allowed' }} disabled={!selectedNode}>🗑️ Delete Node</button>
+            <button className="btn" onClick={handleDeleteNode} style={{ background: selectedNode ? '#b81a1a' : '#ccc', color: selectedNode ? 'white' : '#666', cursor: selectedNode ? 'pointer' : 'not-allowed' }} disabled={!selectedNode}>🗑️ Delete Node</button>
 
-        <button className="btn" onClick={handleDeleteEdge} style={{ background: selectedEdge ? '#b81a1a' : '#ccc', color: selectedEdge ? 'white' : '#666', cursor: selectedEdge ? 'pointer' : 'not-allowed' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
+            <button className="btn" onClick={handleDeleteEdge} style={{ background: selectedEdge ? '#b81a1a' : '#ccc', color: selectedEdge ? 'white' : '#666', cursor: selectedEdge ? 'pointer' : 'not-allowed' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
 
-        <button className="btn" onClick={handleDeleteDiagram} style={{ background: 'red' }}>🗑️ Delete Diagram</button>
+            <button className="btn" onClick={handleDeleteDiagram} style={{ background: 'red' }}>🗑️ Delete Diagram</button>
+          </>
+        )}
       </div>
 
       {showForm && (
@@ -306,4 +311,4 @@ function Diagram() {
   );
 }
 
-export default Diagram;
+export default Diagram;
\ No newline at end of file