Неожиданное поведение SVG Draggable / Panzoom - PullRequest
Новая
       50

Неожиданное поведение SVG Draggable / Panzoom

0 голосов
/ 29 апреля 2020

Мне нужно использовать SVG. js 3 с плагинами dragggable и panzoom. Что мне нужно сделать, это создать несколько фигур и сгруппировать их вместе, а затем прикрепить перетаскиваемый для всей группы Это код, которым я управлял до сих пор: 

var canvas = SVG()
    .addTo('#svg-canvas')
    .size($(window).width(), $(window).height())
    .viewbox('0 0 ' + $(window).width() + ' ' + $(window).height())
    .panZoom({
        zoomFactor: 0.1,
        wheelZoom: true,
        zoomMin: 0.25,
        zoomMax: 4
    })
    .zoom(2);


const headerHeight = 40;
const rowHeight = 24;
const radius = 4;
const borderTop = 1
const margin = 2;

const table = canvas.group();

const tableWrapper = canvas.rect(200, headerHeight).fill("#fff");
tableWrapper.radius(radius);
table.add(tableWrapper);

const headerWrapper = canvas.rect(200, headerHeight - radius).fill("transparent");
headerWrapper.move(0, radius);
table.add(headerWrapper);

const headerContent = canvas.foreignObject(200, headerHeight - radius);
headerContent.move(0, radius);

headerContent.add($('\
    <div style="display:flex;justify-content:space-between;display:flex;padding:8px;margin-top:-1px;">\
        <div>Header</div>\
        <div>PK</div>\
    </div>\
')[0]);
table.add(headerContent);

tableWrapper.height(44);

table.move(180, 150);

table.draggable();

Вот jsfiddle для проверки: https://jsfiddle.net/grayter/uhde3ykw/29/

Проблема заключается в том, что при попытке перетащить группу содержание группы течет. Я полагаю, что причиной такого поведения является плагин Panzoom (кажется, что перетаскиваемое событие PanZoom drag мешает).

Чего мне не хватает? Есть ли способ исправить эту проблему?

...