Добавить пользовательские фигуры на панель инструментов MXGraph

Я пытаюсь добавить пользовательские фигуры на панель инструментов в MXGraph, как показано в примерах для панели инструментов. Для exapmle: что-то вроде этого:

addVertex('assets/displayResources/images/labelIcon.png', 60, 30, 'shape=displayLabel');

Теперь моя собственная форма (в данном случае displayLabel) должна быть в сетке, если вы перетащите ее из панели инструментов. но это всегда только видимая форма "по умолчанию".

Я уже зарегистрировал свою форму, как показано в примере формы: mxCellRenderer.prototype.defaultShapes['displayLabel'] = mxDisplayLabel;

Я также пробовал разные способы назвать его стиль в методе addVertex, но он не будет работать. Даже если я попробую Boxshape, который показан в примере "Shape" из mxgraph, я вижу только форму по умолчанию...

EDIT: Это то, что я пытаюсь на данный момент:

    function BoxShape()
{
    mxCylinder.call(this);
};
mxUtils.extend(BoxShape, mxCylinder);
BoxShape.prototype.extrude = 10;
BoxShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
{
    var dy = this.extrude * this.scale;
    var dx = this.extrude * this.scale;
    if (isForeground)
    {
        path.moveTo(0, dy);
        path.lineTo(w - dx, dy);
        path.lineTo(w, 0);
        path.moveTo(w - dx, dy);
        path.lineTo(w - dx, h);
    }
    else
    {
        path.moveTo(0, dy);
        path.lineTo(dx, 0);
        path.lineTo(w, 0);
        path.lineTo(w, h - dy);
        path.lineTo(w - dx, h);
        path.lineTo(0, h);
        path.lineTo(0, dy);
        path.lineTo(dx, 0);
        path.close();
    }
};
mxCellRenderer.registerShape('box', BoxShape);

function creatingDisplayCreator(){
    if (!mxClient.isBrowserSupported()) {
            mxUtils.error('Browser is not supported!', 200, false);
    }else {
    var container = document.getElementById("graphContainer");

        mxEvent.disableContextMenu(container);

        var model = new mxGraphModel();
        graph = new mxGraph(container, model);

        mxGraphHandler.prototype.scrollOnMove = false;

        graph.dropEnabled = true;
        var parent = graph.getDefaultParent();

        var tbContainer = document.getElementById("tbContainer");

        var toolbar = new mxToolbar(tbContainer);
        toolbar.enabled = false;

        mxDragSource.prototype.getDropTarget = function (graph, x, y) {
            var cell = graph.getCellAt(x, y);

            if (!graph.isValidDropTarget(cell)) {
                 cell = null;
            }

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

            if(style=='shape=displayLabel'){
                vertex.value = 'label';
                graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, 'transparent', [vertex]);
                graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, 'transparent', [vertex]);
                graph.setCellStyles(mxConstants.STYLE_FONTSIZE, 15, [vertex]);
            }
};
            addToolbarItem(graph, toolbar, vertex, icon);
        };
        addVertex('a.png', 60, 30, 'shape=box');
        function addToolbarItem(graph, toolbar, prototype, image) {
        var funct = function (graph, evt, cell) {
        graph.stopEditing(false);

        var pt = graph.getPointForEvent(evt);
        var vertex = graph.getModel().cloneCell(prototype);

        vertex.geometry.x = pt.x;
        vertex.geometry.y = pt.y;

        graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));
    }

    var img = toolbar.addMode(null, image, funct);
    mxUtils.makeDraggable(img, graph, funct);
};

EDIT 2: Теперь я смог зарегистрировать свои собственные фигуры, но в дальнейшем у меня возникла проблема, которая говорит: "shape.initStyles()" не является функцией, если я удаляю вершину в сетке. кто-нибудь знает, откуда это взялось?