Issue with toJSON() in JointJS 4.0 Not Reflecting All attrs

[goyaljai1]

Introduction

I am using the toJSON() function in version 4.0 of JointJS, but some attrs properties are not being reflected in the generated JSON. Here's what I am experiencing:

I have implemented the official Pool, Swimlane, and Phase demo, and when I convert the graph to JSON, the output of the cells array is as follows:

[
    {
        "type": "Pool",
        "padding": {
            "top": 40,
            "left": 0,
            "right": 0,
            "bottom": 0
        },
        "size": {
            "width": 400,
            "height": 120
        },
        "position": {
            "x": 120,
            "y": 384
        },
        "angle": 0,
        "name": "Pool",
        "id": "999843a1-2cac-4cff-bb86-5ec1bcf6f0ba",
        "z": 1,
        "embeds": [
            "a30b2f41-a917-4007-9dde-e2ad336390e7"
        ],
        "attrs": {
            "label": {
                "text": ""
            }
        }
    },
    {
        "type": "Swimlane",
        "padding": {
            "top": 0,
            "left": 30,
            "right": 0,
            "bottom": 0
        },
        "size": {
            "width": 400,
            "height": 80
        },
        "headerSize": 30,
        "lanes": null,
        "milestones": null,
        "milestonesSize": 20,
        "position": {
            "x": 120,
            "y": 424
        },
        "angle": 0,
        "id": "a30b2f41-a917-4007-9dde-e2ad336390e7",
        "z": 2,
        "parent": "999843a1-2cac-4cff-bb86-5ec1bcf6f0ba",
        "attrs": {}
    }
]

However, the graph itself correctly displays all the attrs properties when logged in the console:

{
    "type": "Pool",
    "padding": {
        "top": 40,
        "left": 0,
        "right": 0,
        "bottom": 0
    },
    "size": {
        "width": 400,
        "height": 120
    },
    "attrs": {
        "header": {
            "fill": "lightgray",
            "height": 40,
            "class": "pool-header",
            "width": "calc(w)",
            "strokeWidth": 2,
            "stroke": "#000000"
        },
        "headerText": {
            "fontFamily": "sans-serif",
            "text": "Pool",
            "y": 20,
            "cursor": "text",
            "class": "pool-header-label",
            "textVerticalAnchor": "middle",
            "textAnchor": "middle",
            "x": "calc(w/2)",
            "fontSize": 16,
            "fill": "#333333"
        },
        "root": {
            "cursor": "move"
        },
        "body": {
            "width": "calc(w)",
            "height": "calc(h)",
            "strokeWidth": 2,
            "stroke": "#000000",
            "fill": "#FFFFFF"
        },
        "bodyText": {
            "textVerticalAnchor": "middle",
            "textAnchor": "middle",
            "x": "calc(w/2)",
            "y": "calc(h/2+15)",
            "fontSize": 14,
            "fill": "#333333"
        },
        "label": {
            "text": ""
        }
    },
    "position": {
        "x": 120,
        "y": 384
    },
    "angle": 0,
    "embeds": [
        "a30b2f41-a917-4007-9dde-e2ad336390e7"
    ],
    "id": "999843a1-2cac-4cff-bb86-5ec1bcf6f0ba",
    "name": "Pool",
    "z": 1
}

How can I ensure that all attributes are included in the JSON representation? Any insights or solutions would be greatly appreciated!

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

You need version 4.1 and call:

const json = graph.toJSON({ cellAttributes: { ignoreDefaults: false }});

See docs.

[goyaljai1]

Is there a way to achieve this in version 4.0? I would appreciate any suggestions.

[kumilingus]

Please see #1355 (comment).

[goyaljai1]

Thanks a lot!