The decode function in MxCodec is failing to properly parse XML data

Currently, I am working on a project using javascript with Angular7 and MxGraph library. I have successfully managed to save the MxGraph model into an XML file with the following code snippet:

var enc = new mx.mxCodec(mx.mxUtils.createXmlDocument());
var node = enc.encode(editor.graph.getModel());
this.xml = mx.mxUtils.getPrettyXml(node);

However, I am facing difficulties when trying to decode the saved XML according to the documentation. Despite attempting various methods, even directly pasting the XML for decoding as shown below, I haven't been successful:

// Usually I would do this:
// var doc = mx.mxUtils.parseXml(this.xml);

// Just for testing purposes I did this
var doc = mx.mxUtils.parseXml(
           '<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>'+
           '<Node0 label="Input" style="container" id="input"><mxCell style="container" vertex="1" connectable="0" parent="1">'+
           '<mxGeometry y="20" width="100" height="580" as="geometry"/></mxCell></Node0>'+
           '</root></mxGraphModel>');

var dec = new mx.mxCodec(doc);
dec.decode(doc.documentElement, graph.getModel());
console.log(graph.getModel());

Upon further investigation, I noticed that the returned model does not include Node0, which is puzzling.

javascriptangulartypescriptmxgraph

Answer №1

Upon further investigation, I stumbled upon a helpful clue in this post: Issue with Editor creation when using mxGraph as npm module

To resolve the issue, I added the following lines of code to my script:

// Workaround for undefined window['mxGraphModel']
window['mxEditor'] = mx.mxEditor;
window['mxGeometry'] = mx.mxGeometry;
window['mxDefaultKeyHandler'] = mx.mxDefaultKeyHandler;
window['mxDefaultPopupMenu'] = mx.mxDefaultPopupMenu;
window['mxGraph'] = mx.mxGraph;
window['mxCell'] = mx.mxCell;
window['mxCellPath'] = mx.mxCellPath;
window['mxGraph'] = mx.mxGraph;
window['mxStylesheet'] = mx.mxStylesheet;
window['mxDefaultToolbar'] = mx.mxDefaultToolbar;
window['mxGraphModel'] = mx.mxGraphModel;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate an additional column into a table using AngularJS

I attempted to insert a new column upon clicking a button, but unfortunately, I was unsuccessful. I have created a JSFiddle demo to illustrate my issue. Any assistance in resolving this problem would be greatly appreciated. Below is my attempt: $scope.a ...

javascriptangularjsloops

Unable to retrieve fields once an array has been added to another array

I am facing an issue with accessing specific fields in an array of sections. The sections are added to the array when a user clicks on a checkbox, and the structure is defined as follows: $scope.print = { sections:[] }; Once all the selected sections ...

javascriptangularjsarrays

Postman failing to display incomplete data in Mongoose Schema

// Schema for organizing data received from front end import mongoose from 'mongoose'; const postSchema = mongoose.Schema({ title: String, message: String, creator: String, tags: [String], selectedFile: String, likeCount ...

javascriptnode.jsmongodbexpressmongoose

Patience is key as we anticipate the parent component/module loading the data

Just a note: I am aware of the existence of APP_INITIALIZER, but it appears to only work in the top-level module (app.module.ts) of the application. I have a parent component that loads some data: In admin-area.component.ts: ngOnInit(): void { forkJo ...

angulartypescript

Trapping an anchor tag event in asp.net

I am currently working on a menu bar using HTML code (I am unable to use asp link buttons). <ul> <li><a href="#"><span>Reconciliation</span></a> <ul> ...

c#javascriptjqueryasp.net

Angular Material Datepicker Input Field Without Icon

Is there a way to eliminate the icon from a datepicker input field? https://i.sstatic.net/BYPZl.png If you need an example, check out: https://material.angular.io/components/datepicker/overview I've only been able to find information on changing the ...

angularangular-material

Using Typescript with Angular: passing a generic Type to a function

When using Typescript for Angular 5 unit tests, I have created a function that can query the DOM and return an instance of the MyComponent class if it exists: function getMyComponent(hostFixture: ComponentFixture<any>): MyComponent { const debugEl ...

angulartypescriptgenerics

What is the best way to utilize a single AngularJS 1.5 component multiple times within a single view?

While working on a project using AngularJS 1.5's new components, I encountered an issue with widget isolation. It seems that when I use the same widget multiple times, they end up sharing their controller or scope. I was under the impression that comp ...

javascriptangularjs

Node.js and SQL: Verify if a specific value exists in the column

In the process of developing a Discord bot using Node.js (discord.js), I have created a command named !add that requires 2 or more arguments. For example, !add Name This is the reply, where Name corresponds to args[0]. As part of my code, I check whether t ...

javascriptmysqlsqlnode.js

Adding dynamic color changes to points using three.js

I'm trying to change the colors of these points by randomly turning some of them white every 0.5 seconds. this.geom = new THREE.SphereBufferGeometry(6, 350, 90); this.colors = []; this.color = new THREE.Color(); this.colorList = ['red&a ...

javascriptthree.js

Avoiding the ESLint error of missing return type in a React TypeScript function

My JavaScript function looks like this: export default () => ({ root: css` background-color: hotpink; margin-bottom: 1.45rem; `, }); However, ESLint is raising a complaint: Missing return type on function.eslint@typescript-eslint/explicit-m ...

reactjstypescripteslint

Creating a PHP script that retrieves data from JavaScript and stores it in MySQL can be accomplished by using AJAX to send the

Hello, I am attempting to create a PHP script that can extract coordinates from this JavaScript code (or from this link ) and store them in a MySQL database. Can someone please provide me with a tutorial on how to accomplish this? <script> var ...

javascriptphpmysql

What is the best way to differentiate between the content in the 'stories' and '.storybook' directories?

Overview Upon integrating Storybook.js with my existing Create-React-App project, I found that two new directories were created by default: .storybook src/stories This integration seemed to blur the lines between different aspects of my project, which g ...

reactjstypescriptwebpackstorybookreact-typescript

What is the reason for the filter not displaying the IFRAME?

I have a filter set up to automatically embed YouTube videos for user-generated content by searching for links and verifying if they are valid YouTube videos. If they are, the video should be embedded using standard iframe code; otherwise, it remains just ...

javascriptangularjsangularjs-filter

Adding a fresh element to an object array in TypeScript

How can we add a specific value to an array of objects using TypeScript? I am looking to insert the value 1993 into each "annualRentCurrent" property in the sample object. Any suggestions on how to achieve this in TypeScript or Angular? Thank you! #Data ...

javascriptangularangularjstypescript

Keeping the user logged in even after closing the app in an Ionic/Angular project: Best practices to retain user sessions

As a newcomer to angular/ionic, I have been given a project where the user needs to remain logged in even after closing the application unless they explicitly log out. Can anyone provide suggestions on how to modify the code below? login.page.ts import { ...

androidangulartypescriptionic-framework

How to convert the $eval method from AngularJS to Angular 2?

Looking to transform my AngularJS code into Angular2. Here is the specific piece of code I need to rewrite: $rootScope.$eval(expressionToInterpolate, allowedSetOfParameters) I am wondering if there are alternative methods or npm packages available to brid ...

angularangularjsevaluation

Using multiple MaterialUI components in a JavaScript page with React can pose challenges

Incorporating multiple MaterialUI Cards in my project, I encountered an issue where all the cards would expand or the select values would change simultaneously. Despite using unique key values and mapped components with distinct keys, the problem persisted ...

javascriptreactjstypescriptmaterial-uifrontend

Utilizing Javascript's every() method to verify if all elements in an array are integers

I am currently working on a function that needs to return true if an array contains all integers, and false if it does not. I am incorporating the every method for this purpose, which is documented on MDN here. For example, if the input is '1234&apos ...

javascriptarrays

What type of response does XHR provide when there is no connection available?

Imagine I launched Google Chrome and its corresponding extension. The extension relies on the XmlHttpRequest object for functionality. However, upon starting the browser, I realized there is no internet connection available. In this scenario, what will t ...

javascriptajaxgoogle-chrome-extension