Deserialization of yEd Live palette styles

The default palettes of yEd Live contain styles which are derived from the yFiles for HTML source code package. Therefore, to support compatiblity with yEd Live you need to to make the GraphMLIOHandler aware of those styles.

However, due to the different requirements for the styles in yEd Live (e.g. interactively changing the color), you cannot use the same styles that are included in the yFiles for HTML source code package. The serialized GraphMLs from yEd Live will contain additional information which cannot be deserialized by the demo styles of the source code package.

Obtaining the modified styles

First you need to download the styles that are attached to this article:

• yed-live-asset-node-style.js: Provides support for the asset palettes which are 'Network Nodes' and 'People'.
• yed-live-demo-styles.js: Provides support for the demo group node style in 'Groups'.
• yed-live-flat-table-styles.js: Provides support for the flat table node style in 'Table Nodes'.
• yed-live-erd-styles.js: Provides support for the styles in 'Entity Relationship'.
• yed-live-uml-note-style.js: Provides support fot the note node style in 'UML'.
• yed-live-colored-icon-node-style.js: Provides support for the 'Font Awesome' icon palettes.
• yed-live-cropping-image-node-style.js: Provides support for the 'AWS' icon palettes.

Add GraphML mappings to the GraphMLIOHandler

At first you need to load the attached styles in your application. Import them using ES6 module imports. Please see the attached GraphEditorDemo.js for a code example.

Then you can make the GraphMLIOHandler aware of those styles by adding appropriate mappings:

function enableGraphML(graphComponent) {
  const gs = new GraphMLSupport({
    graphComponent,
    storageLocation: StorageLocation.FILE_SYSTEM
  })

  const graphmlHandler = new GraphMLIOHandler()

  // BPMN styles with backwards compatibility for older style versions
  graphmlHandler.addXamlNamespaceMapping('http://www.yworks.com/xml/yfiles-bpmn/1.0', BpmnView)
  graphmlHandler.addXamlNamespaceMapping(
    'http://www.yworks.com/xml/yfiles-for-html/bpmn/2.0',
    LegacyBpmnExtensions
  )
  graphmlHandler.addNamespace('http://www.yworks.com/xml/yfiles-for-html/bpmn/2.0', 'bpmn')
  graphmlHandler.addXamlNamespaceMapping(YFILES_BPMN_NS, BpmnView)
  graphmlHandler.addNamespace(YFILES_BPMN_NS, YFILES_BPMN_PREFIX)
  graphmlHandler.addHandleSerializationListener(BpmnHandleSerializationListener)

  // UML styles
  graphmlHandler.addXamlNamespaceMapping(
    'http://www.yworks.com/yFilesHTML/demos/UMLDemoStyle/1.0',
    {
      UMLNodeStyleExtension,
      UMLClassModelExtension,
      UMLNoteStyleExtension
    }
  )
  graphmlHandler.addNamespace('http://www.yworks.com/yFilesHTML/demos/UMLDemoStyle/1.0', 'uml')
  graphmlHandler.addHandleSerializationListener(UMLNodeStyleSerializationListener)
  graphmlHandler.addHandleSerializationListener(UMLClassModelSerializationListener)
  graphmlHandler.addHandleSerializationListener(UMLNoteStyleSerializationListener)

  // ERD styles
  graphmlHandler.addXamlNamespaceMapping(
    'http://www.yworks.com/yFilesHTML/demos/EntityRelationship/1.0',
    {
      CrowsFootArrowExtension,
      EntityNodeStyleExtension,
      EntityRelationshipModelExtension,
      ErdNodeStyleExtension
    }
  )
  graphmlHandler.addHandleSerializationListener(ErdNodeStyleSerializationListener)
  graphmlHandler.addHandleSerializationListener(EntityNodeStyleSerializationListener)
  graphmlHandler.addHandleSerializationListener(EntityRelationshipModelSerializationListener)
  graphmlHandler.addHandleSerializationListener(CrowsFootSerializationListener)

  // demo styles
  graphmlHandler.addNamespace(
    'http://www.yworks.com/yFilesHTML/demos/FlatDemoStyle/2.0',
    'demostyle2'
  )
  graphmlHandler.addXamlNamespaceMapping(
    'http://www.yworks.com/yFilesHTML/demos/FlatDemoStyle/2.0',
    {
      DemoGroupStyle,
      DemoGroupStyleExtension,
      DemoEdgeStyle,
      DemoEdgeStyleExtension,
      DemoNodeStyle,
      DemoNodeStyleExtension,
      DemoArrow,
      DemoArrowExtension
    }
  )
  graphmlHandler.addHandleSerializationListener(DemoSerializationListener)
  graphmlHandler.addXamlNamespaceMapping(
    'http://www.yworks.com/yFilesHTML/demos/FlatDemoStyle/1.0',
    {
      AssetNodeStyle,
      FlowchartNodeStyleExtension
    }
  )
  graphmlHandler.addHandleSerializationListener(FlowchartSerializationListener)

  // table styles
  graphmlHandler.addXamlNamespaceMapping(
    'http://www.yworks.com/yFilesHTML/demos/FlatDemoTableStyle/1.0',
    {
      DemoTableStyle,
      DemoTableStyleRenderer,
      TableBackgroundStyle,
      DemoStripeStyle
    }
  )

  // icon styles
  graphmlHandler.addNamespace('http://www.yworks.com/yed-live/icon-style/1.0', 'icon-style')
  graphmlHandler.addXamlNamespaceMapping('http://www.yworks.com/yed-live/icon-style/1.0', {
    CroppingImageNodeStyle,
    CroppingImageNodeStyleExtension,
    ColoredIconNodeStyle,
    ColoredIconNodeStyleExtension
  })
  graphmlHandler.addHandleSerializationListener(CroppingImageSerializationListener)
  graphmlHandler.addHandleSerializationListener(ColoredIconSerializationListener)

  gs.graphMLIOHandler = graphmlHandler
}

With the above changes your application should be ready to deserialize the default yEd Live palette styles.