JoinJS - fromJSON 方法错误：“dia.ElementView：需要标记”

Posted 2023-02-22

【中文标题】JoinJS - fromJSON 方法错误：“dia.ElementView：需要标记”

【英文标题】：JoinJS - fromJSON method error: "dia.ElementView: markup required"

【发布时间】：2019-12-02 08:14:12

【问题描述】：

我有一个无法解决的问题。我想使用 JointJS fromJSON 函数从 JSON 重构流程图（之前使用 JoinJS 的 toJSON 函数导出。 问题是对fromJSON函数的调用总是返回如下错误：

无论我在 hookmounted () 内调用它还是通过单击按钮调用它。 为了完整起见，我还想说我正在使用 Vue.js。 我使用的代码如下：

<template>
    <div class="wrapper">
        <button v-on:click="getGraphJSON">Get graph JSON</button>
        <button v-on:click="resetGraphJSON">Restore graph from JSON</button>
        <div id="myholder"></div>
    </div>
</template>

<script>
    const _ = require('lodash')
    const joint = require('jointjs')
    const g = require('../../node_modules/jointjs/dist/geometry.js')
    const backbone = require('../../node_modules/backbone/backbone.js')
    const $ = require('../../node_modules/jquery/dist/jquery.js')
    import '../../node_modules/jointjs/dist/joint.css';

    var CustomRectangle = joint.shapes.standard.Rectangle.define('CustomRectangle', 
                type: 'CustomRectangle',
                attrs: 
                    body: 
                        rx: 10, // add a corner radius
                        ry: 10,
                        strokeWidth: 1,
                        fill: 'cornflowerblue'
                    ,
                    label: 
                        textAnchor: 'left', // align text to left
                        refX: 10, // offset text from right edge of model bbox
                        fill: 'white',
                        fontSize: 18
                    
                
            , 
                    markup: [
                        tagName: 'rect',
                        selector: 'body',
                    , 
                        tagName: 'text',
                        selector: 'label'
                    ]
            , 
                createRandom: function() 

                    var rectangle = new this();

                    var fill = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
                    var stroke = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
                    var strokeWidth = Math.floor(Math.random() * 6);
                    var strokeDasharray = Math.floor(Math.random() * 6) + ' ' + Math.floor(Math.random() * 6);
                    var radius = Math.floor(Math.random() * 21);

                    rectangle.attr(
                        body: 
                            fill: fill,
                            stroke: stroke,
                            strokeWidth: strokeWidth,
                            strokeDasharray: strokeDasharray,
                            rx: radius,
                            ry: radius
                        ,
                        label:  // ensure visibility on dark backgrounds
                            fill: 'black',
                            stroke: 'white',
                            strokeWidth: 1,
                            fontWeight: 'bold'
                        
                    );

                    return rectangle;
                
            );

    export default 
        name: 'JointChartRestorable',
        data() 
            return 
                graph: null,
                paper: null,
                // graphJSON: JSON.parse('"cells":["type":"standard.Rectangle","position":"x":100,"y":30,"size":"width":100,"height":40,"angle":0,"id":"049776c9-7b6d-4aaa-8b02-1edc3bea9852","z":1,"attrs":"body":"fill":"blue","label":"fill":"white","text":"Rect #1","type":"standard.Rectangle","position":"x":400,"y":30,"size":"width":100,"height":40,"angle":0,"id":"b6e77973-1195-4749-99e1-728549329b11","z":2,"attrs":"body":"fill":"#2C3E50","rx":5,"ry":5,"label":"fontSize":18,"fill":"#3498DB","text":"Rect #2","fontWeight":"bold","fontVariant":"small-caps","type":"standard.Link","source":"id":"049776c9-7b6d-4aaa-8b02-1edc3bea9852","target":"id":"b6e77973-1195-4749-99e1-728549329b11","id":"4ed8e3b3-55de-4ad2-b79e-d4848adc4a58","labels":["attrs":"text":"text":"Hello, World!"],"z":3,"attrs":"line":"stroke":"blue","strokeWidth":1,"targetMarker":"d":"M 10 -5 0 0 10 5 Z","stroke":"black","fill":"yellow","sourceMarker":"type":"path","stroke":"black","fill":"red","d":"M 10 -5 0 0 10 5 Z"],"graphCustomProperty":true,"graphExportTime":1563951791966')
                // graphJSON: JSON.parse('"cells":["type":"examples.CustomRectangle","position":"x":90,"y":30,"size":"width":100,"height":40,"angle":0,"id":"faa7f957-4691-4bb2-b907-b2054f7e07de","z":1,"attrs":"body":"fill":"blue","label":"text":"Rect #1"]')
                graphJSON: JSON.parse('"cells":["type":"CustomRectangle","position":"x":100,"y":30,"size":"width":100,"height":40,"angle":0,"id":"f02da591-c03c-479f-88cf-55c291064ca8","z":1,"attrs":"body":"fill":"blue","label":"text":"Rect #1"]')
            ;
        ,
        methods: 
            getGraphJSON: function() 
                this.graphJSON = this.graph.toJSON();
                console.log(JSON.stringify(this.graphJSON));

                this.graph.get('graphCustomProperty'); // true
                this.graph.get('graphExportTime');
            ,
            resetGraphJSON: function() 
                if(this.graphJSON !== undefined && this.graphJSON !== null && this.graphJSON !== '') 
                    this.graph.fromJSON(this.graphJSON);
                    // this.paper.model.set(this.graphJSON);
                 else 
                    alert('Devi prima cliccare sul tasto "Get graph JSON" almeno una volta');
                
            
        ,
        mounted() 
            this.graph = new joint.dia.Graph();
            this.graph.fromJSON(this.graphJSON);

            // this.graph.set('graphCustomProperty', true);
            // this.graph.set('graphExportTime', Date.now());

            this.paper = new joint.dia.Paper(
                el: document.getElementById('myholder'),
                model: this.graph,
                width: '100%',
                height: 600,
                gridSize: 10,
                drawGrid: true,
                background: 
                    color: 'rgba(0, 255, 0, 0.3)'
                ,
                // interactive: false, // disable default interaction (e.g. dragging)
                /*elementView: joint.dia.ElementView.extend(
                    pointerdblclick: function(evt, x, y) 
                        joint.dia.CellView.prototype.pointerdblclick.apply(this, arguments);
                        this.notify('element:pointerdblclick', evt, x, y);

                        this.model.remove();
                    
                ),
                linkView: joint.dia.LinkView.extend(
                    pointerdblclick: function(evt, x, y) 
                        joint.dia.CellView.prototype.pointerdblclick.apply(this, arguments);
                        this.notify('link:pointerdblclick', evt, x, y);

                        this.model.remove();
                    
                )*/
            );
            /*this.paper.on('cell:pointerdblclick', function(cellView) 
                var isElement = cellView.model.isElement();
                var message = (isElement ? 'Element' : 'Link') + ' removed';
                eventOutputLink.attr('label/text', message);

                eventOutputLink.attr('body/visibility', 'visible');
                eventOutputLink.attr('label/visibility', 'visible');
            );*/





            /***************************************************/
            /************** GRAPH ELEMENT SAMPLE ***************/
            /***************************************************/




            // var rect = new joint.shapes.standard.Rectangle();
            // var rect = new CustomRectangle();
            // rect.position(100, 30);
            // rect.resize(100, 40);
            // rect.attr(
            //     body: 
            //         fill: 'blue'
            //     ,
            //     label: 
            //         text: 'Rect #1',
            //         fill: 'white'
            //     
            // );
            // rect.addTo(this.graph);

            /***************************************************/
            /************** GRAPH ELEMENT SAMPLE ***************/
            /***************************************************/





        

    
</script>

现在我正在使用之前定义的自定义元素，但我也使用 JointJS 的标准 Rectangle 元素进行了测试。 谁能告诉我我做错了什么？ 非常感谢。

【问题讨论】：

NameSpace Issue in JointJS version 3的可能重复

【参考方案1】：

在元素中找不到标记对象，这就是出现此错误的原因。通过jointjs或rabbit依赖将jointjs导入vueJS项目后；

import * as joint from 'jointjs' or import * as joint from 'rabbit'

window.joint = joint; 

关节应在环境中使用窗口调整为全局。