使用 devs.Model 元素导入/导出 JointJS 图形答案

【问题标题】：Importing/Exporting JointJS Graphs with devs.Model Elements使用 devs.Model 元素导入/导出 JointJS 图形
【发布时间】：2019-06-11 19:24:24
【问题描述】：

所以我正在尝试为我的 JointJS 应用程序实现“导入图表”功能。我正在使用的所有元素都继承自 devs.Model，

var myCustomShape = new joint.shapes.devs.Model();

这些形状包括在 devs.Model 之上的自定义属性，其中包括子对象和函数属性。

使用 JSON.parse 导入我的图表会导致错误：

joint.js:13580 Uncaught Error: dia.ElementView: markup required
    at child.renderMarkup (joint.js:13580)
    at child.render (joint.js:13616)
    at child.protoProps.render (joint.js:9692)
    at child.renderView (joint.js:17645)
    at child.resetViews (joint.js:17691)
    at triggerEvents (backbone.js:370)
    at triggerApi (backbone.js:356)
    at eventsApi (backbone.js:155)
    at child.Events.trigger (backbone.js:346)
    at triggerEvents (backbone.js:371)

我阅读了 JointJS 文档：

请记住 JSON 格式的一般限制。 >不支持一些常用的 >native JavaScript 数据类型（包括 Function、Date 和 undefined）。具有这些类型值的变量将不会被持久化。除此之外，这意味着如果持久性在您的应用程序中很重要，您应该选择定义自定义元素/链接子类型，而不是将自定义函数嵌入到默认的joint.dia.Element 和>joint.dia.Link 类型中。

另外，如果你想使用 JSON 对象并将它们直接存储到 MongoDB 中，你应该记住它对以 . （点）或 $（美元符号）符号。这些是保留的 > 供 MongoDB 系统内部使用。这在 >JointJS 的上下文中很重要，因为它排除了在元素和链接的 attrs >array 中使用 CSS 样式选择器。因此，如果持久性对您很重要，并且您希望将数据直接保存到 MongoDB，则应始终在自定义元素的标记中定义 >自定义子元素选择器，而不是 >依赖 CSS 样式的选择器。

我想知道这里是否有任何已知的解决方法可以用来保存我的图表以及我的所有自定义元素。请温柔，这是我的第一个 javascript 应用程序，第一次使用 JSON，第一次使用 JointJS。

【问题讨论】：

标签： javascript json jointjs

【解决方案1】：

我已经回答了我自己的问题。如果您从一个形状继承而不扩展它，则在您的新形状声明中不需要任何标记。这是我使用的声明形状的旧方法：


OLD CODE DON'T USE THIS

var myCustomShape = new joint.shapes.devs.Model({
    position: { x:50, y:50 },
    size: { width: 75, height: 75 },
    inPorts: ['Input'],
    outPorts: ['Output'],
    attrs: {
        '.label': {
             text: 'Source',
             fill: 'black'
         },
         rect: {
             fill: 'springgreen'
         }
    },
    type: 'custom.myCustomShape'
});

所以我切换到扩展 devs.Model 形状，然后像这样新建一个我的类型：


NEW WORKING CODE :)

joint.shapes.custom.myCustomShape = joint.shapes.devs.Model.extend({
            markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><image/><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
            defaults: joint.util.deepSupplement({
                type: 'custom.myCustomShape',
                size: { width: 75, height: 75 },
                rect: {
                    stroke: '#d1d1d1',
                    fill: 'white'
                },
                circle: {
                    stroke: 'gray'
                },
                '.label': {
                    text: 'Base',
                    'ref-y': -20
                },
                '.inPorts circle': {
                    fill: '#c8c8c8'
                },
                '.outPorts circle': {
                    fill: '#262626'
                },
            }, joint.shapes.devs.Model.prototype.defaults)
        });

并且被使用：

var customShape= new joint.shapes.custom.myCustomShape({
            attrs: {
                '.label': {
                    text: 'My Shape',
                    fill: 'black'
                },
                rect: {
                    fill: 'springgreen'
                }
            },
            position: { x: 50, y: 50 },
            size: { width: 75, height: 75 }
        });
graph.addCell(customShape);

当导出和导入具有这样声明的形状的图形时，一切正常。

【讨论】：