Plumb.js: ошибка: <svg>высота атрибута: ожидаемая длина, "-Infinity" - PullRequest
Новая
       22

Plumb.js: ошибка: <svg>высота атрибута: ожидаемая длина, "-Infinity"

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

У меня есть простой блок с несколькими элементами, я хочу, чтобы пользователь мог соединяться между элементами по своему усмотрению, используя отвес.

Я могу подключиться, как хочу, но когда я перетаскиваю элемент на другойрасположите соединители на одном месте, не двигаясь вместе с элементом connect.

Вот демонстрационная версия Jsplumb demo , откройте ее в режиме инкогнито

визуальная проблема enter image description here

Вот js plunker: plunker plumb js Исходный код демоверсии

Вот HTML 

<!doctype html>

<html>

<head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
     <script src="lib/plumb.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div class="main-container tk-demo-canvas  statemachine-demo
        jtk-surface" id="canvas">

        <div id="context-menu-canvas">
            <ul class="menu-options">
                <li id="btn-add-movie-block" class="menu-option">Add movie block
                </li>
            </ul>

        </div>

        <div id="context-menu-movie-block">
            <ul class="menu-options">
                <li id="btn-add-movie-button" class="menu-option">Add Button</li>
            </ul>
        </div>
    </div>

    <textarea id="jsontextarea"></textarea>

    <script src="https://jsplumbtoolkit.com/community/demo/statemachine/lib/jsplumb.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js"></script>
    <script src="https://js.braintreegateway.com/v2/braintree.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</body>

</html>

Вотjs для тех блоков и кнопок, которые добавляются динамически, является частью кода: 

//function for adding movie block , a blcok which will contain a movie
function addMovieBlock2(id, left, top) {
    var newMovieBlock = $('<div class="movie-block">Block</div>');
    newMovieBlock.attr("movieid", id);
    newMovieBlock.attr("id", "movieblock" + id);
    newMovieBlock.css("left", left + "px");
    newMovieBlock.css("top", top + "px");
    $(".main-container").append(newMovieBlock);

    newMovieBlock.draggable({
        drag: function (event, ui) {
            updateJsonMovieBlockPosition($(event.target).attr("movieid"), ui.position.left, ui.position.top);
        }
    });
    //function to add button to json 
    jsonUpdate();
}

function addMovieButton2(movieid, id, left, top){
    var newMovieBlockButton = $("<div class='movie-button w'>Button<div class='ep' action='begin'></div><div>");

    newMovieBlockButton.attr("buttonid", id);
    newMovieBlockButton.attr("id", "moviebutton" + id);
    newMovieBlockButton.css("left", rightClickPosition.left.left + "px");
    newMovieBlockButton.css("top", rightClickPosition.left.top + "px");

    $("#movieblock" + movieid).append(newMovieBlockButton );

    newMovieBlockButton .draggable({
        containment: "parent",
        drag: function (event, ui) {
            updateJsonMovieBlockPosition($(event.target).attr("buttonid"), ui.position.left, ui.position.top);
        }
    });
}

css, который вы можете найти в plunker.

Когда я проверяю журналы консоли, я получаю следующую ошибку

jsplumb.js: 13896 Ошибка: высота атрибута: ожидаемая длина, "-Infinity".

Что мне нужно изменить, чтобы заставить работать так, как я хочу??Будем благодарны за любые предложения помощи, спасибо

...