Updated pins code

4 files changed, 138 insertions, 122 deletions

diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
index 66371cee..4d760a53 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
@@ -82,9 +82,9 @@ export function getPortType (cell, isSplit = false) {
   return { type1, type2 }
 }
 
-export function getCurrentDiagramXML () {
+export function getCurrentDiagramXML (model) {
   const encoder = new mxCodec()
-  const node = encoder.encode(graph.getModel())
+  const node = encoder.encode(model)
   return mxUtils.getXml(node)
 }
 
@@ -162,13 +162,18 @@ export default function loadGrid (container, sidebar, outline, setMainDiagramBac
         if (blockType === 'SUPER_f') {
           console.log("CE:", cell.SuperBlockDiagram)
           // Save current diagram
-          setMainDiagramBackup(getCurrentDiagramXML())
+
+          setMainDiagramBackup(getCurrentDiagramXML(graph.getModel()))
           setActiveSuperBlockCell(cell)
 
           //update cell.SuperBlockDiagram whenever new block is added in editor manually
           // Parse the subdiagram
-          const serializer = new XMLSerializer()
-          const subDiagramXML = serializer.serializeToString(cell.SuperBlockDiagram)
+          let subDiagramXML = ''
+          if (typeof cell.SuperBlockDiagram === 'string') {
+            subDiagramXML = cell.SuperBlockDiagram
+          } else if (cell.SuperBlockDiagram instanceof Node) {
+            subDiagramXML = new XMLSerializer().serializeToString(cell.SuperBlockDiagram)
+          }
 
           // Load subdiagram directly into canvas
           renderGalleryXML(subDiagramXML)
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
index f15036be..8fc81568 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
@@ -56,6 +56,7 @@ export function getSvgMetadata (graph, parent, evt, target, x, y, component) {
   v1.controlPorts = 0
   v1.commandPorts = 0
   v1.simulationFunction = component.simulation_function
+  v1.SuperBlockDiagram = component.super_block
   v1.pins = {
     explicitInputPorts: [],
     implicitInputPorts: [],
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
index 2d3e017b..b5b39558 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
@@ -270,33 +270,33 @@ export function getRotationParameters (stylename, rotation) {
 export function getPins (portOrientation, v1) {
   let pins
   switch (portOrientation) {
-  case 'ExplicitInputPort':
-    v1.explicitInputPorts += 1
-    pins = v1.pins?.explicitInputPorts
-    break
-  case 'ImplicitInputPort':
-    v1.implicitInputPorts += 1
-    pins = v1.pins?.implicitInputPorts
-    break
-  case 'ControlPort':
-    v1.controlPorts += 1
-    pins = v1.pins?.controlPorts
-    break
-  case 'ExplicitOutputPort':
-    v1.explicitOutputPorts += 1
-    pins = v1.pins?.explicitOutputPorts
-    break
-  case 'ImplicitOutputPort':
-    v1.implicitOutputPorts += 1
-    pins = v1.pins?.implicitOutputPorts
-    break
-  case 'CommandPort':
-    v1.commandPorts += 1
-    pins = v1.pins?.commandPorts
-    break
-  default:
-    pins = null
-    break
+    case 'ExplicitInputPort':
+      v1.explicitInputPorts += 1
+      pins = v1.pins?.explicitInputPorts
+      break
+    case 'ImplicitInputPort':
+      v1.implicitInputPorts += 1
+      pins = v1.pins?.implicitInputPorts
+      break
+    case 'ControlPort':
+      v1.controlPorts += 1
+      pins = v1.pins?.controlPorts
+      break
+    case 'ExplicitOutputPort':
+      v1.explicitOutputPorts += 1
+      pins = v1.pins?.explicitOutputPorts
+      break
+    case 'ImplicitOutputPort':
+      v1.implicitOutputPorts += 1
+      pins = v1.pins?.implicitOutputPorts
+      break
+    case 'CommandPort':
+      v1.commandPorts += 1
+      pins = v1.pins?.commandPorts
+      break
+    default:
+      pins = null
+      break
   }
   return pins
 }
@@ -305,26 +305,26 @@ export function getPointXY (rotationParameters) {
   let pointX
   let pointY
   switch (rotationParameters.rotatename) {
-  case 'ExplicitInputPort':
-    pointX = -portSize
-    pointY = -portSize / 2
-    break
-  case 'ControlPort':
-    pointX = -portSize / 2
-    pointY = -portSize
-    break
-  case 'ExplicitOutputPort':
-    pointX = 0
-    pointY = -portSize / 2
-    break
-  case 'CommandPort':
-    pointX = -portSize / 2
-    pointY = 0
-    break
-  default:
-    pointX = -portSize / 2
-    pointY = -portSize / 2
-    break
+    case 'ExplicitInputPort':
+      pointX = -portSize
+      pointY = -portSize / 2
+      break
+    case 'ControlPort':
+      pointX = -portSize / 2
+      pointY = -portSize
+      break
+    case 'ExplicitOutputPort':
+      pointX = 0
+      pointY = -portSize / 2
+      break
+    case 'CommandPort':
+      pointX = -portSize / 2
+      pointY = 0
+      break
+    default:
+      pointX = -portSize / 2
+      pointY = -portSize / 2
+      break
   }
   return { pointX, pointY }
 }
@@ -332,27 +332,27 @@ export function getPointXY (rotationParameters) {
 export function getXYPos (rotationParameters, xPos, yPos) {
   const xPosOld = xPos
   switch (rotationParameters.portdirection) {
-  case PORTDIRECTIONS.L2T:
-  case PORTDIRECTIONS.T2L:
-    xPos = yPos
-    yPos = xPosOld
-    break
-  case PORTDIRECTIONS.L2R:
-    xPos = 1 - xPosOld
-    /* same yPos */
-    break
-  case PORTDIRECTIONS.L2B:
-    xPos = yPos
-    yPos = 1 - xPosOld
-    break
-  case PORTDIRECTIONS.T2R:
-    xPos = 1 - yPos
-    yPos = xPosOld
-    break
-  case PORTDIRECTIONS.T2B:
-    /* same xPos */
-    yPos = 1 - yPos
-    break
+    case PORTDIRECTIONS.L2T:
+    case PORTDIRECTIONS.T2L:
+      xPos = yPos
+      yPos = xPosOld
+      break
+    case PORTDIRECTIONS.L2R:
+      xPos = 1 - xPosOld
+      /* same yPos */
+      break
+    case PORTDIRECTIONS.L2B:
+      xPos = yPos
+      yPos = 1 - xPosOld
+      break
+    case PORTDIRECTIONS.T2R:
+      xPos = 1 - yPos
+      yPos = xPosOld
+      break
+    case PORTDIRECTIONS.T2B:
+      /* same xPos */
+      yPos = 1 - yPos
+      break
   }
   return { xPos, yPos }
 }
@@ -457,6 +457,43 @@ function parseXmlToGraph (xmlDoc, graph) {
           const SuperBlockDiagram = cell.querySelector('SuperBlockDiagram')
           if (SuperBlockDiagram !== null) {
             v1.SuperBlockDiagram = SuperBlockDiagram
+          } else {
+            SuperBlockDiagram = cellAttrs.SuperBlockDiagram?.value
+            if (SuperBlockDiagram !== null) {
+              console.log('SuperBlockDiagram2:', SuperBlockDiagram)
+              SuperBlockDiagram = '<SuperBlockDiagram as="child" background="-1" title="">' + SuperBlockDiagram + '</SuperBlockDiagram>'
+              const superblock = mxUtils.parseXml(SuperBlockDiagram)
+              const superblock2 = superblock.getElementsByTagName('SuperBlockDiagram')[0]
+              v1.SuperBlockDiagram = superblock2
+              console.log('V!:', v1)
+            }
+
+          }
+          let pins = cell.querySelector('Object[as="pins"]')
+          if (pins !== null) {
+            const portTypes = [
+              'explicitInputPorts',
+              'implicitInputPorts',
+              'controlPorts',
+              'explicitOutputPorts',
+              'implicitOutputPorts'
+            ]
+            const pinData = {}
+
+
+            portTypes.forEach(type => {
+              const arrayElement = pins.querySelector(`Array[as="${type}"]`)
+              pinData[type] = []
+
+              if (arrayElement) {
+                const mxCells = arrayElement.querySelectorAll('mxCell')
+                mxCells.forEach(mxCell => {
+                  pinData[type].push(mxCell)
+                })
+
+              }
+            })
+            v1.pins = pinData
           }
         } else if (cellAttrs.CellType?.value === 'Pin') {
           const style = cellAttrs.style.value
diff --git a/blocks/eda-frontend/src/pages/SchematicEditor.js b/blocks/eda-frontend/src/pages/SchematicEditor.js
index ba187844..a920a92c 100644
--- a/blocks/eda-frontend/src/pages/SchematicEditor.js
+++ b/blocks/eda-frontend/src/pages/SchematicEditor.js
@@ -13,14 +13,14 @@ import SchematicToolbar from '../components/SchematicEditor/SchematicToolbar'
 import RightSidebar from '../components/SchematicEditor/RightSidebar'
 import PropertiesSidebar from '../components/SchematicEditor/PropertiesSidebar'
 import loadGrid from '../components/SchematicEditor/Helper/ComponentDrag'
-import { getCurrentDiagramXML } from '../components/SchematicEditor/Helper/ComponentDrag'
+
 import { renderGalleryXML } from '../components/SchematicEditor/Helper/ToolbarTools'
 import '../components/SchematicEditor/Helper/SchematicEditor.css'
 import { fetchDiagram, fetchSchematic } from '../redux/saveSchematicSlice'
 import { useDispatch, useSelector } from 'react-redux'
 import { styleToObject } from '../utils/GalleryUtils'
 import { changePorts } from '../components/SchematicEditor/ComponentProperties'
-import { graph } from '../components/SchematicEditor/Helper/ComponentDrag'
+import { graph, getCurrentDiagramXML } from '../components/SchematicEditor/Helper/ComponentDrag'
 import mxGraphFactory from 'mxgraph'
 const {
   mxPrintPreview,
@@ -59,26 +59,22 @@ export default function SchematicEditor (props) {
     setMobileOpen(!mobileOpen)
   }
 
+  // function getCurrentDiagramXML (model) {
+  //   const encoder = new mxCodec()
+  //   const node = encoder.encode(model)
+  //   return mxUtils.getXml(node)
+  // }
 
   function handleCloseClick () {
     if (!activeSuperBlockCell) return
 
-    const updatedXML = getCurrentDiagramXML()
-    // console.log('updatedXML::', updatedXML)
+    const updatedXML = getCurrentDiagramXML(graph.getModel())
+    console.log('updatedXML::', updatedXML)
     const xml = '<SuperBlockDiagram as="child" background="-1" title="">' + updatedXML + '</SuperBlockDiagram>'
     const updatedDOM = mxUtils.parseXml(xml)
     const updatedDOM1 = updatedDOM.getElementsByTagName('SuperBlockDiagram')[0]
     activeSuperBlockCell.SuperBlockDiagram = updatedDOM1
 
-    // Mapping block styles to port count fields
-    const portMapping = {
-      'IN_f': 'explicitInputPorts',
-      'INIMPL_f': 'implicitInputPorts',
-      'CLKINV_f': 'commandPorts',
-      'OUT_f': 'explicitOutputPorts',
-      'OUTIMPL_f': 'implicitOutputPorts',
-      'CLKOUTV_f': 'controlPorts'
-    }
 
     const xpath = "/SuperBlockDiagram/mxGraphModel/root/mxCell[@style]"
     const xpathResult = document.evaluate(
@@ -99,7 +95,6 @@ export default function SchematicEditor (props) {
     allCells.forEach(cell => {
       console.log("CELL1", cell)
       const cellAttrs = cell.attributes
-      console.log('cellAttrs:', cellAttrs)
       const style = cellAttrs.style.value
       const defaultStyle = styleToObject(style).default
       console.log("CELL2", defaultStyle)
@@ -110,19 +105,18 @@ export default function SchematicEditor (props) {
 
     console.log('Style counts:', styleCounts)
 
-    // Object.entries(styleCounts).forEach(([blockStyle, count]) => {
-    //   const mapping = portMapping[blockStyle]
-    //   console.log('mapping:', mapping)
-    //   if (mapping) {
-    //     activeSuperBlockCell[mapping] = count
-    //   }
-
-    // })
     console.log('activeSuperBlockCell1:', activeSuperBlockCell)
 
-    if (activeSuperBlockCell) {
+    const maindiagram = mainDiagramBackup
+    console.log('main:', maindiagram)
+    renderGalleryXML(maindiagram)
+    console.log('after render main:', graph.getModel(), activeSuperBlockCell.id)
+
+    if (graph.getModel().getCell(activeSuperBlockCell.id) !== null) {
+      const blkcell = graph.getModel().getCell(activeSuperBlockCell.id)
+      console.log('bkcell:', blkcell)
       const refreshDisplay = changePorts(
-        activeSuperBlockCell,
+        blkcell,
         styleCounts['OUT_f'] || 0,
         styleCounts['OUTIMPL_f'] || 0,
         styleCounts['CLKOUTV_f'] || 0,
@@ -133,34 +127,13 @@ export default function SchematicEditor (props) {
       )
 
       console.log('blockElem:', activeSuperBlockCell, refreshDisplay)
-      if (refreshDisplay) {
-        graph.refresh()
-      }
 
-      // Remove existing <SuperBlockDiagram> child if present
-      const existing = activeSuperBlockCell.getElementsByTagName?.('SuperBlockDiagram')?.[0]
-      if (existing && existing.parentNode) {
-        existing.parentNode.removeChild(existing)
-      }
-      if (existing) {
-        activeSuperBlockCell.removeChild(existing)
-      }
 
-      // Create and append the new SuperBlockDiagram element
-      const newDiagramElement = updatedDOM.documentElement // this is <SuperBlockDiagram>
-      const importedElement = mainDOM.importNode(newDiagramElement, true)
-      activeSuperBlockCell.appendChild(importedElement)
-    }
 
-    // Update the XML string and reflect it
-    const updatedMainXML = new XMLSerializer().serializeToString(mainDOM)
-    setMainDiagramBackup(updatedMainXML)
-    console.log('updatedMainXML:', updatedMainXML)
-    renderGalleryXML(updatedMainXML)
-
-    // Hide the close button
-    const closeBtn = document.getElementById('closeButton')
-    if (closeBtn) closeBtn.style.display = 'none'
+      // Hide the close button
+      const closeBtn = document.getElementById('closeButton')
+      if (closeBtn) closeBtn.style.display = 'none'
+    }
   }