Question

因此，我正在尝试为我的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>数组中使用CSS样式选择器。因此，如果持久性对您来说很重要，并且您想直接将数据保存到MongoDB，则应始终在自定义元素的标记中定义> custom子元素选择器，而不要依赖CSS样式选择器。

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

Answer 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);

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

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

1 个答案: