Вставленный в пример JointJS трафарет Rappid не отображает трафарет - PullRequest
Новая
       41

Вставленный в пример JointJS трафарет Rappid не отображает трафарет

0 голосов
/ 26 сентября 2019

Я новичок в JointJs и Rappid.Я скопировал трафарет из документа Rappid Stencil и вставил его с небольшими изменениями в демонстрационный код «Спецификация дискретного события». Никаких ошибок не отображается, а также трафарет. Я приложил копию своего дерева каталогов. Мой добавленный код имеет префикс

Большое спасибо, если вы можете мне помочь. Леон 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.min.css" />
    <!-- LL -->
    <link href="/Users/leonlevy/Projects/rappid-2/dist/joint.ui.stencil.min.css" rel="stylesheet" type="text/css">
    <link rel="/Users/leonlevy/Projects/rappid-2/dist/joint.ui.selectButtonGroup.min.css">
</head>
<body>
    <!-- content -->
    <div id="paper"></div>

    <!-- dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.0.4/joint.min.js"></script>
    <!-- LL -->
    <script src="/Users/leonlevy/Projects/rappid-2/dist/joint.ui.stencil.min.js"></script>
    <script src="/Users/leonlevy/Projects/rappid-2/dist/joint.ui.selectButtonGroup.min.js"></script>
    <script src="/Users/leonlevy/Projects/rappid-2/dist/joint.layout.GridLayout.min.js"></script>

    <!-- code -->
    <script type="text/javascript">
    var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({

    el: document.getElementById('paper'),
    width: 800+500,
    height: 400+300,
    gridSize: 1,
    model: graph,
    snapLinks: true,
    linkPinning: false,
    embeddingMode: true,
    highlighting: {
        'default': {
            name: 'stroke',
            options: {
                padding: 6
            }
        },
        'embedding': {
            name: 'addClass',
            options: {
                className: 'highlighted-parent'
            }
        }
    },

    validateEmbedding: function(childView, parentView) {

        return parentView.model instanceof joint.shapes.devs.Coupled;
    },

    validateConnection: function(sourceView, sourceMagnet, targetView, targetMagnet) {

        return sourceMagnet != targetMagnet;
    }
});
<!--LL-->
var stencil = new joint.ui.Stencil({
    paper: paper,
    width: 150,
    height: 300
});

$('#stencil-holder').append(stencil.render().el);

var r = new joint.shapes.basic.Rect({
    position: { x: 10, y: 10 }, size: { width: 50, height: 30 }
});
var c = new joint.shapes.basic.Circle({
    position: { x: 70, y: 10 }, size: { width: 50, height: 30 }
});

// Stencil is rendered in the DOM now.

// load the elements into the default group
stencil.load([r, c]);
groups: {
  group1: [{ type: 'basic.Rect'},{ type: 'basic.Circle' }];
//
}

// load the elements into multiple groups
stencil.load({ group1: [r]}); //, group2: [c] });

// load the elements into the `group2` group
stencil.loadGroup([r, c]); //, 'group2');


var connect = function(source, sourcePort, target, targetPort) {

    var link = new joint.shapes.devs.Link({
        source: {
            id: source.id,
            port: sourcePort
        },
        target: {
            id: target.id,
            port: targetPort
        }
    });

    link.addTo(graph).reparent();
    link.set('smooth', true);
};

var c1 = new joint.shapes.devs.Coupled({

    position: {
        x: 230+150,
        y: 50+150
    },
    size: {
        width: 300,
        height: 300
    }
});

c1.set('inPorts', ['in']);
c1.set('outPorts', ['out 1', 'out 2','orders']);

var a1 = new joint.shapes.devs.Atomic({

    position: {
        x: 360+150,
        y: 260+150
    },
    inPorts: ['xy'],
    outPorts: ['x', 'y']
});

var a2 = new joint.shapes.devs.Atomic({

    position: {
        x: 50+150,
        y: 160+150
    },
    outPorts: ['out']
});

var a3 = new joint.shapes.devs.Atomic({

    position: {
        x: 650+100,
        y: 50+150
    },
    size: {
        width: 100,
        height: 300
    },
    inPorts: ['a', 'b']
});

graph.addCells([c1, a1, a2, a3]);

c1.embed(a1);

connect(a2, 'out', c1, 'in');
connect(c1, 'in', a1, 'xy');
connect(a1, 'x', c1, 'out 1');
connect(a1, 'y', c1, 'out 2');
connect(c1, 'out 1', a3, 'a');
connect(c1, 'out 2', a3, 'b');

/* rounded corners */

_.findIndex([1,2,3], 1);

_.each([c1, a1, a2, a3], function(element) {

    element.attr({
        '.body': {
            'rx': 6,
            'ry': 6
        }
    });
    });

    </script>
</body>
</html>
...