jsplumb实现流程图效果-html代码-BFW代码库

代码语言：html

所属分类：其他

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jsplumb&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            jsPlumb.ready(function () {

                var instance = window.jsp = jsPlumb.getInstance({
                    // default drag options
                    DragOptions: {
                        cursor: 'pointer', zIndex: 2000
                    },
                    // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
                    // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
                    ConnectionOverlays: [
                        ["Arrow", {
                            location: 1,
                            visible: true,
                            width: 11,
                            length: 11,
                            id: "ARROW",
                            events: {
                                click: function() {
                                    alert("you clicked on the arrow overlay")}
                            }
                        }],
                        ["Label", {
                            location: 0.1,
                            id: "label",
                            cssClass: "aLabel",
                            events: {
                                tap: function() {
                                    alert("hey");
                                }
                            }
                        }]
                    ],
                    Container: "canvas"
                });

                var basicType = {
                    connector: "StateMachine",
                    paintStyle: {
                        stroke: "red", strokeWidth: 4
                    },
                    hoverPaintStyle: {
                        stroke: "blue"
                    },
                    overlays: [
                        "Arrow"
                    ]
                };
                instance.registerConnectionType("basic", basicType);

                // this is the paint style for the connecting lines..
                var connectorPaintStyle = {
                    strokeWidth: 2,
                    stroke: "#61B7CF",
                    joinstyle: "round",
                    outlineStroke: "white",
                    outlineWidth: 2
                },
                // .. and this is the hover style.
                connectorHoverStyle = {
                    strokeWidth: 3,
                    stroke: "#216477",
                    outlineWidth: 5,
                    outlineStroke: "white"
                },
                endpointHoverStyle = {
                    fill: "#216477",
                    stroke: "#216477"
                },
                // the definition of source endpoints (the small blue ones)
                sourceEndpoint = {
                    endpoint: "Dot",
                    paintStyle: {
                        stroke: "#7AB02C",
                        fill: "transparent",
                        radius: 7,
                        strokeWidth: 1
                    },
                    isSource: true,
                    connector: ["Flowchart", {
                        stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true
                    }],
                    connectorStyle: connectorPaintStyle,
                    hoverPaintStyle: endpointHoverStyle,
                    connectorHoverStyle: connectorHoverStyle,
                    dragOptions: {},
                    overlays: [
                        ["Label", {
                            location: [0.5, 1.5],
                            label: "Drag",
                            cssClass: "endpointSourceLabel",
                            visible: false
                        }]
                    ]
                },
                // the definition of target endpoints (will appear when the user drags a connection)
                targetEndpoint = {
                    endpoint: "Dot",
                    paintStyle: {
                        fill: "#7AB02C", radius: 7
                    },
                    hoverPaintStyle: endpointHoverStyle,
                    maxConnections: -1,
                    dropOptions: {
                        hoverClass: "hover", activeClass: "active"
                    },
                    isTarget: true,
                    overlays: [
                        ["Label", {
                            location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible: false
                        }]
                    ]
                },
                init = function (connection) {
                    connection.getOverlay("label").setLabel(connection.sourceId.substring(15) + "-" + connection.targetId.substring(15));
                };

                var _addEndpoints = function (toId, sourceAnchors, targetAnchors) {
                    for (var i = 0; i < sourceAnchors.length; i++) {
                        var sourceUUID = toId + sourceAnchors[i];
                        instance.addEndpoint("flowchart" + toId, sourceEndpoint, {
                            anchor: sourceAnchors[i], uuid: sourceUUID
                        });
                    }
                    for (var j = 0; j < targetAnchors.length; j++) {
                        var targetUUID = toId + targetAnchors[j];
                        instance.addEndpoint("flowchart" + toId, targetEndpoint, {
                            anchor: targetAnchors[j], uuid: targetUUID
                        });
                    }
                };

                // suspend drawing and initialise.
                instance.batch(function () {

                    _addEndpoints("Window4", ["TopCenter", "BottomCenter"], ["LeftMiddle", "RightMiddle"]);
                    _addEndpoints("Window2", ["LeftMiddle", "BottomCenter"], ["TopCenter", "RightMiddle"]);
                    _addEndpoints("Window3", ["RightMiddle", "BottomCenter"], ["LeftMiddle", "TopCenter"]);
                    _addEndpoints("Window1", ["LeftMiddle", "RightMiddle"], ["TopCenter", "BottomCent.........完整代码请登录后点击上方下载按钮下载查看