Импорт / экспорт графиков JointJS с элементами devs.Model - PullRequest
Новая
       31

Импорт / экспорт графиков JointJS с элементами devs.Model

0 голосов
/ 11 июня 2019

Поэтому я пытаюсь реализовать функцию «Импорт графика» в моем приложении 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. Некоторые обычно используемые> собственные типы данных JavaScript (включая Function, Date и undefined)> не поддерживаются. Переменные, имеющие значения этих типов, не будут сохранены. Помимо прочего, это означает, что если постоянство важно в> вашем приложении, вы должны выбрать определение пользовательских подтипов элементов / ссылок> вместо встраивания пользовательских функций в стандартные типы joint.dia.Element и> joint.dia.Link.

Кроме того, если вы хотите использовать объекты JSON и напрямую сохранять их в MongoDB, вы должны помнить о его дополнительном ограничении на ключи объектов>, начинающиеся с. (точка) или $ (знак доллара) символы. Они зарезервированы> для внутреннего использования системы MongoDB. Это важно в контексте> JointJS, поскольку исключает использование селекторов в стиле CSS в массивах attrs> ваших элементов и ссылок. Поэтому, если постоянство важно для вас и вы хотите сохранить данные непосредственно в MongoDB, вы всегда должны определять> пользовательские селекторы субэлементов в разметке ваших пользовательских элементов, а не> полагаться на селекторы в стиле CSS.

Мне интересно, есть ли здесь какие-нибудь известные способы работы, которые я могу использовать, чтобы сохранить свой график вместе со всеми моими пользовательскими элементами. Пожалуйста, будьте осторожны, это мое первое javascript-приложение, впервые работающее с JSON и впервые работающее с JointJS.

1 Ответ

0 голосов
/ 13 июня 2019

Я ответил на свой вопрос.Если вы наследуете форму, не расширяя ее, вам не понадобится какая-либо разметка в объявлении новой формы.Вот старый способ объявления формы, которую я использовал: 


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

При экспорте и импорте графиков с формами, объявленными так, все работает правильно.

...