Updated subdiagram in superblock diagram

4 files changed, 40 insertions, 81 deletions

diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
index 4d760a53..3e33805e 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
@@ -155,12 +155,13 @@ export default function loadGrid (container, sidebar, outline, setMainDiagramBac
 
     graph.addListener(mxEvent.DOUBLE_CLICK, function (sender, evt) {
       const cell = evt.getProperty('cell')
+      console.log("cell1:", cell)
 
       if (cell !== undefined && cell.CellType === 'Component') {
         const blockType = styleToObject(cell.style).default  // Extract block type like 'SUPER_f'
 
         if (blockType === 'SUPER_f') {
-          console.log("CE:", cell.SuperBlockDiagram)
+          console.log("CE:", typeof cell.SuperBlockDiagram, cell.SuperBlockDiagram)
           // Save current diagram
 
           setMainDiagramBackup(getCurrentDiagramXML(graph.getModel()))
@@ -176,6 +177,7 @@ export default function loadGrid (container, sidebar, outline, setMainDiagramBac
           }
 
           // Load subdiagram directly into canvas
+          console.log('subDiagramXML:', subDiagramXML)
           renderGalleryXML(subDiagramXML)
 
           // Show close button
@@ -316,17 +318,17 @@ export default function loadGrid (container, sidebar, outline, setMainDiagramBac
           const styleObject = styleToObject(source.style)
           let style = 'Link'
           switch (styleObject.default) {
-          case 'ExplicitOutputPort': case 'ExplicitInputPort':
-            style = 'ExplicitLink'
-            break
+            case 'ExplicitOutputPort': case 'ExplicitInputPort':
+              style = 'ExplicitLink'
+              break
 
-          case 'ImplicitOutputPort': case 'ImplicitInputPort':
-            style = 'ImplicitLink'
-            break
+            case 'ImplicitOutputPort': case 'ImplicitInputPort':
+              style = 'ImplicitLink'
+              break
 
-          case 'CommandPort': case 'ControlPort':
-            style = 'CommandControlLink'
-            break
+            case 'CommandPort': case 'ControlPort':
+              style = 'CommandControlLink'
+              break
           }
           text = style + '\n' +
             'UID: ' + cell.id + '\n' +
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
index 8fc81568..baee92d1 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
@@ -3,10 +3,11 @@ import 'mxgraph/javascript/src/css/common.css'
 
 import mxGraphFactory from 'mxgraph'
 
-import { getRotationParameters, getPins, getPointXY, getXYPos } from './ToolbarTools'
+import { getRotationParameters, getPins, getPointXY, getXYPos, getSuperblockdiagram } from './ToolbarTools'
 
 const {
-  mxPoint
+  mxPoint,
+  mxUtils
 } = new mxGraphFactory()
 
 // we need to divide the svg width and height by the same number in order to maintain the aspect ratio.
@@ -56,7 +57,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.SuperBlockDiagram = getSuperblockdiagram(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 b5b39558..e2956df0 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
@@ -357,6 +357,12 @@ export function getXYPos (rotationParameters, xPos, yPos) {
   return { xPos, yPos }
 }
 
+export function getSuperblockdiagram (xml) {
+  xml = '<SuperBlockDiagram as="child" background="-1" title="">' + xml + '</SuperBlockDiagram>'
+  const updatedDOM = mxUtils.parseXml(xml)
+  return updatedDOM.getElementsByTagName('SuperBlockDiagram')[0]
+}
+
 function parseXmlToGraph (xmlDoc, graph) {
   const parent = graph.getDefaultParent()
   let v1
@@ -374,11 +380,13 @@ function parseXmlToGraph (xmlDoc, graph) {
   let remainingcells = []
   let portCount
   try {
-    console.log('cellslength=', cellslength)
+    console.log('cellslength1=', cellslength)
     while (cellslength > 0 && cellslength !== oldcellslength) {
       for (let i = 0; i < cellslength; i++) {
         const cell = cells[i]
+
         const cellAttrs = cell.attributes
+        console.log('cellAttrs:', cellAttrs)
         const cellChildren = cell.children
         if (cellAttrs.CellType?.value === 'Component') { // is component
           portCount = {
@@ -454,7 +462,7 @@ function parseXmlToGraph (xmlDoc, graph) {
             implicitOutputPorts: [],
             commandPorts: []
           }
-          const SuperBlockDiagram = cell.querySelector('SuperBlockDiagram')
+          let SuperBlockDiagram = cell.querySelector('SuperBlockDiagram')
           if (SuperBlockDiagram !== null) {
             v1.SuperBlockDiagram = SuperBlockDiagram
           } else {
@@ -465,36 +473,11 @@ function parseXmlToGraph (xmlDoc, graph) {
               const superblock = mxUtils.parseXml(SuperBlockDiagram)
               const superblock2 = superblock.getElementsByTagName('SuperBlockDiagram')[0]
               v1.SuperBlockDiagram = superblock2
-              console.log('V!:', v1)
+              // 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
           const styleObject = styleToObject(style)
@@ -660,5 +643,6 @@ export function renderGalleryXML (xml) {
   graph.removeCells(graph.getChildEdges(parent))
   graph.view.refresh()
   const xmlDoc = mxUtils.parseXml(xml)
+  console.log('xmlDOC:', xmlDoc)
   parseXmlToGraph(xmlDoc, graph)
 }
diff --git a/blocks/eda-frontend/src/pages/SchematicEditor.js b/blocks/eda-frontend/src/pages/SchematicEditor.js
index a920a92c..358d2753 100644
--- a/blocks/eda-frontend/src/pages/SchematicEditor.js
+++ b/blocks/eda-frontend/src/pages/SchematicEditor.js
@@ -14,24 +14,13 @@ import RightSidebar from '../components/SchematicEditor/RightSidebar'
 import PropertiesSidebar from '../components/SchematicEditor/PropertiesSidebar'
 import loadGrid from '../components/SchematicEditor/Helper/ComponentDrag'
 
-import { renderGalleryXML } from '../components/SchematicEditor/Helper/ToolbarTools'
+import { renderGalleryXML, getSuperblockdiagram } 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, getCurrentDiagramXML } from '../components/SchematicEditor/Helper/ComponentDrag'
-import mxGraphFactory from 'mxgraph'
-const {
-  mxPrintPreview,
-  mxConstants,
-  mxRectangle,
-  mxUtils,
-  mxUndoManager,
-  mxEvent,
-  mxCodec,
-  mxPoint
-} = new mxGraphFactory()
 
 const useStyles = makeStyles((_theme) => ({
   root: {
@@ -59,27 +48,18 @@ 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(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
-
+    console.log('updatedXML::', typeof updatedXML, updatedXML)
+    const updatedDOM1 = getSuperblockdiagram(updatedXML)
+    console.log('updatedDOM1:', typeof updatedDOM1, updatedDOM1)
 
     const xpath = "/SuperBlockDiagram/mxGraphModel/root/mxCell[@style]"
     const xpathResult = document.evaluate(
       xpath,
-      activeSuperBlockCell.SuperBlockDiagram,
+      updatedDOM1,
       null,
       XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
       null
@@ -93,27 +73,18 @@ export default function SchematicEditor (props) {
     const styleCounts = {}
 
     allCells.forEach(cell => {
-      console.log("CELL1", cell)
       const cellAttrs = cell.attributes
       const style = cellAttrs.style.value
       const defaultStyle = styleToObject(style).default
-      console.log("CELL2", defaultStyle)
-
       styleCounts[defaultStyle] = (styleCounts[defaultStyle] || 0) + 1
-
     })
-
     console.log('Style counts:', styleCounts)
 
-    console.log('activeSuperBlockCell1:', 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)
+    const blkcell = graph.getModel().getCell(activeSuperBlockCell.id)
+    if (blkcell !== null) {
+      blkcell.SuperBlockDiagram = updatedDOM1
       console.log('bkcell:', blkcell)
       const refreshDisplay = changePorts(
         blkcell,
@@ -125,10 +96,11 @@ export default function SchematicEditor (props) {
         styleCounts['CLKINV_f'] || 0,
         false
       )
+      if (refreshDisplay) {
+        graph.refresh()
+      }
 
-      console.log('blockElem:', activeSuperBlockCell, refreshDisplay)
-
-
+      console.log('blockElem:', refreshDisplay, blkcell)
 
       // Hide the close button
       const closeBtn = document.getElementById('closeButton')