Функция перетаскивания не работает для пользовательского mxtoolbar? - PullRequest
Новая
       4

Функция перетаскивания не работает для пользовательского mxtoolbar?

0 голосов
/ 17 февраля 2020

Я создал mxwindow, который создает окно и добавил к нему панель инструментов. Я хочу сделать элементы этой панели инструментов перетаскиваемыми и выпадающими. 


function (editor, cell)
{
cell = cell || editor.graph.getSelectionCell();
console.log(cell)

if (cell != null)
{
//this.graph.stopEditing(true);

var offset = mxUtils.getOffset(this.graph.container);
var x = offset.x+10;
var y = offset.y;
if (this.properties != null && !this.movePropertiesDialog)
{
x = this.properties.getX();
y = this.properties.getY();
}

// Places the dialog near the cell for which it
// displays the properties
else
{
var bounds = this.graph.getCellBounds(cell);

if (bounds != null)
{
x += bounds.x+Math.min(200, bounds.width);
y += bounds.y;
}
}

var th = document.createElement('div');
th.style = "padding-top:10px"
var wnd = new mxWindow('Context Pad', th, x, y, 150, 100, false);
wnd.setVisible(true);
wnd.setClosable(true)
var tool = new mxToolbar(th)
console.log(tool)

// Matches DnD inside the graph

// Enables new connections in the graph


var addVertex = function(icon, w, h, style)
{
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(false);

addToolbarItem(this.graph, tool, vertex, icon);
};
function addToolbarItem(graph, toolbar, prototype, image)
{
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
// Creates the image which is used as the sidebar icon (drag source)
var funct = function(graph, evt, cell, x, y)
{
if (graph.canImportCell(cell))
{
var parent = graph.getDefaultParent();
var vertex = null;

graph.getModel().beginUpdate();
try
{
vertex = graph.insertVertex(parent, cell, 'Hello', x, y, 80, 30);
}
finally
{
graph.getModel().endUpdate();
}

graph.setSelectionCell(vertex);
}
}
imags = toolbar.addItem(null, image);

console.log(imags)
var img = document.createElement('img');
img.setAttribute('src', image);
img.style.width = '48px';
img.style.height = '48px';
img.title = 'hello';

var dragImage = imags.cloneNode(true);
dragImage.style.width = '32px';
dragImage.style.height = '32px';
var ds = mxUtils.makeDraggable(imags, graph, funct, dragImage);

ds.setGuidesEnabled(true);
console.log(ds)
}

if(mxUtils.isNode(cell.value, 'Script')){
addVertex("images/intermediategif.gif", 120, 160, 'shape=intermediate;');
addVertex("images/endgif.gif", 120, 160, 'shape=end;');
addVertex("images/gatewaygif.gif", 120, 160, 'shape=gateway;');
addVertex("images/taskgif.gif", 100, 160, 'shape=task;');
addVertex("images/usergif.gif", 100, 160, 'shape=usertask;');
addVertex("images/scriptgif.gif", 100, 160, 'shape=scripttask;');
addVertex("images/businessgif.gif", 100, 160, 'shape=businesstask;');
addVertex("images/servicegif.gif", 100, 160, 'shape=servicetask;');
}
if(mxUtils.isNode(cell.value, 'task')){
addVertex("images/intermediategif.gif", 120, 160, 'shape=intermediate;');
addVertex("images/endgif.gif", 120, 160, 'shape=end;');
addVertex("images/gatewaygif.gif", 120, 160, 'shape=gateway;');
addVertex("images/taskgif.gif", 120, 160, 'shape=task;');
addVertex("images/usergif.gif", 120, 160, 'shape=usertask;');
addVertex("images/scriptgif.gif", 120, 160, 'shape=scripttask;');
addVertex("images/businessgif.gif", 120, 160, 'shape=businesstask;');
addVertex("images/servicegif.gif", 120, 160, 'shape=servicetask;');
}
if(mxUtils.isNode(cell.value, 'user')){
addVertex("images/intermediategif.gif", 120, 160, 'template=intermediate;');
addVertex("images/endgif.gif", 120, 160, 'template=end;');
addVertex("images/gatewaygif.gif", 120, 160, 'template=gateway;');
addVertex("images/taskgif.gif", 120, 160, 'template=task;');
addVertex("images/usergif.gif", 120, 160, 'template=usertask;');
addVertex("images/scriptgif.gif", 120, 160, 'template=scripttask;');
addVertex("images/businessgif.gif", 120, 160, 'template=businesstask;');
addVertex("images/servicegif.gif", 120, 160, 'template=servicetask;');
}
if(mxUtils.isNode(cell.value, 'business')){
addVertex("images/intermediategif.gif", 120, 160, 'shape=intermediate;');
addVertex("images/endgif.gif", 120, 160, 'shape=end;');
addVertex("images/gatewaygif.gif", 120, 160, 'shape=gateway;');
addVertex("images/taskgif.gif", 120, 160, 'shape=task;');
addVertex("images/usergif.gif", 120, 160, 'shape=usertask;');
addVertex("images/scriptgif.gif", 120, 160, 'shape=scripttask;');
addVertex("images/businessgif.gif", 120, 160, 'shape=businesstask;');
addVertex("images/servicegif.gif", 120, 160, 'shape=servicetask;');
}
if(mxUtils.isNode(cell.value, 'service')){
addVertex("images/intermediategif.gif", 120, 160, 'shape=intermediate;');
addVertex("images/endgif.gif", 120, 160, 'shape=end;');
addVertex("images/gatewaygif.gif", 120, 160, 'shape=gateway;');
addVertex("images/taskgif.gif", 120, 160, 'shape=task;');
addVertex("images/usergif.gif", 120, 160, 'shape=usertask;');
addVertex("images/scriptgif.gif", 120, 160, 'shape=scripttask;');
addVertex("images/businessgif.gif", 120, 160, 'shape=businesstask;');
addVertex("images/servicegif.gif", 120, 160, 'shape=servicetask;');
}
if(mxUtils.isNode(cell.value, 'start')){
addVertex("images/intermediategif.gif", 120, 160, 'shape=intermediate;');
addVertex("images/endgif.gif", 120, 160, 'shape=end;');
addVertex("images/gatewaygif.gif", 120, 160, 'shape=gateway;');
addVertex("images/taskgif.gif", 120, 160, 'shape=task;');
addVertex("images/usergif.gif", 120, 160, 'shape=usertask;');
addVertex("images/scriptgif.gif", 120, 160, 'shape=scripttask;');
addVertex("images/businessgif.gif", 120, 160, 'shape=businesstask;');
addVertex("images/servicegif.gif", 120, 160, 'shape=servicetask;');
}
if(mxUtils.isNode(cell.value, 'intermediate')){
addVertex("images/intermediategif.gif", 120, 160, 'shape=intermediate;');
addVertex("images/endgif.gif", 120, 160, 'shape=end;');
addVertex("images/gatewaygif.gif", 120, 160, 'shape=gateway;');
addVertex("images/taskgif.gif", 120, 160, 'shape=task;');
addVertex("images/usergif.gif", 120, 160, 'shape=usertask;');
addVertex("images/scriptgif.gif", 120, 160, 'shape=scripttask;');
addVertex("images/businessgif.gif", 120, 160, 'shape=businesstask;');
addVertex("images/servicegif.gif", 120, 160, 'shape=servicetask;');
}
if(mxUtils.isNode(cell.value, 'gateway')){
addVertex("images/intermediategif.gif", 120, 160, 'shape=intermediate;');
addVertex("images/endgif.gif", 120, 160, 'shape=end;');
addVertex("images/gatewaygif.gif", 120, 160, 'shape=gateway;');
addVertex("images/taskgif.gif", 120, 160, 'shape=task;');
addVertex("images/usergif.gif", 120, 160, 'shape=usertask;');
addVertex("images/scriptgif.gif", 120, 160, 'shape=scripttask;');
addVertex("images/businessgif.gif", 120, 160, 'shape=businesstask;');
addVertex("images/servicegif.gif", 120, 160, 'shape=servicetask;');
}
}

}

Эта функция вызывается по щелчку кнопка, где я создал окно, которое состоит из панели инструментов. Ниже представлена ​​функция, которая добавляет изображения на панель инструментов и создает их перетаскивание. 

function addToolbarItem(graph, toolbar, prototype, image)
{
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
// Creates the image which is used as the sidebar icon (drag source)
var funct = function(graph, evt, cell, x, y)
{
if (graph.canImportCell(cell))
{
var parent = graph.getDefaultParent();
var vertex = null;

graph.getModel().beginUpdate();
try
{
vertex = graph.insertVertex(parent, cell, 'Hello', x, y, 80, 30);
}
finally
{
graph.getModel().endUpdate();
}

graph.setSelectionCell(vertex);
}
}
imags = toolbar.addItem(null, image);

console.log(imags)
var img = document.createElement('img');
img.setAttribute('src', image);
img.style.width = '48px';
img.style.height = '48px';
img.title = 'hello';

var dragImage = imags.cloneNode(true);
dragImage.style.width = '32px';
dragImage.style.height = '32px';
var ds = mxUtils.makeDraggable(imags, graph, funct, dragImage);

ds.setGuidesEnabled(true);
console.log(ds)
}

Я получаю сообщение об ошибке: - 

>Uncaught TypeError: Cannot read property 'ownerDocument' of undefined
>at Object.getOffset (mxUtils.js:2645)
>at mxDragSource.graphContainsEvent (mxDragSource.js:416)
>at mxDragSource.mouseMove (mxDragSource.js:446)
>at HTMLDocument.<anonymous> (mxUtils.js:208)

Моя проблема в том, что упомянутая выше функция перетаскивания не работает. Пожалуйста, помогите.

...