如何將自定義節點和屬性添加到AlloyUI圖生成器中

我一直試圖使用AlloyUI的diagram builder example。如何將自定義節點和屬性添加到AlloyUI圖生成器中

我需要添加一些額外的自定義節點類型以及節點的一些附加屬性。我想過修改，然後建立圖書館，但這聽起來像是一個矯枉過正的工作，而且我還有issues與建築。

有沒有簡單的方法來做到這一點？

UPDATE

我意識到我可以直接修改build文件夾中的文件擺脫構建過程中。我嘗試添加如下內容：

var Lang = A.Lang, 
.. 
CUSTOM = 'custom', 
.. 

.. 
A.DiagramNodeCustom = A.Component.create({ 
    NAME: DIAGRAM_NODE_NAME, 

    ATTRS: { 
    type: { 
     value: CUSTOM 
    }, 
    }, 

    EXTENDS: A.DiagramNodeTask 
}); 

A.DiagramBuilder.types[CUSTOM] = A.DiagramNodeCustom;

到/build/aui-diagram-builder-impl/aui-diagram-builder-impl.js。

我有我的主要的Javascript文件結構如此：

var Y = YUI().use(
    'aui-diagram-builder', 
    .. 
    function(Y) { 
    var availableFields = [ 
     .. 
     { 
     iconClass: 'aui-diagram-node-task-icon', 
     label: 'Custom', 
     type: 'custom' 
     }, 
     .. 
    ]; 

    diagram = new Y.DiagramBuilder(
     { 
     availableFields: availableFields, 
     boundingBox: '#myDiagramContainer', 
     srcNode: '#myDiagramBuilder' 
     } 
    ).render(); 
    .. 
    } 
);

，我可以知道一個自定義節點添加到我的圖。我可以點擊它並更改名稱等，但不幸的是它在圖中是不可見的。此外，我仍然無法找到如何將新屬性添加到節點。有任何想法嗎？

來源

2013-07-02 none

如上所述，你所做的一切迄今爲止聽起來不錯。

我想你只是錯過了一些CSS才能看到你的節點。你可以看到它的工作here

退房CSS面板

.aui-diagram-node-custom .aui-diagram-node-content { 
    /* Style of your node in the diagram */ 
} 

.aui-diagram-node-custom-icon { 
    /* Style of your node icon in the nodes lists */ 
}

注：從合金2.0.0pr6開始，CSS類不再與aui-前綴，所以記住這當你開始使用一個更新的版本時要記住。我已經把一個例子here

編輯：爲了能夠揭露新的屬性編輯器面板，自定義字段需要延長getPropertyModel方法將新屬性添加到模型。

getPropertyModel: function() { 
    var instance = this; 

    var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments); 

    model.push({ 
     attributeName: 'customAttr', 
     name: 'Custom Attribute' 
    }); 

    return model; 
}

在這裏你可以找到一個updated example

來源

2013-07-07 20:42:50 jbalsas

這太好了，謝謝。你有沒有機會知道如何給節點添加屬性？ – none

對，對不起！我已經更新了一個例子[這裏]（http://jsfiddle.net/wP6PJ/4/）。基本上你需要擴展'getPropertyModel'方法來添加你想要公開的屬性。 – jbalsas

+1，這在我的前端非常適合我。但是，當我去保存圖時，我通過調用'builder.toJSON（）'來發送數據。所有的標準屬性都存在，但是我的自定義屬性（在前端顯示的很好）不會出現在JSON對象中。有任何想法嗎？ –

你所做的一切聽起來都很對。我唯一能看到的是，你說你修改了文件audi-diagram-builder-impl.js，但是在創建YUI沙箱時，你沒有指定原始的過濾器，默認的YUI過濾器是分鐘，所以除非你有一個全局配置別處設置過濾器來生，您的瀏覽器可能加載AUI-圖建設者 - IMPL-min.js的代替AUI-圖建設者，impl.js。

你應該做的是一樣的東西：

YUI({ filter: 'raw' }).use(
'aui-diagram-builder', 
. 
. 
. 
)

但我強烈建議你不要直接更改構建文件。您可以在自定義文件中創建您的DiagramNodeCustom。只要做：

YUI().use(
    'aui-diagram-builder', 
    function(A) { 
     A.DiagramNodeCustom = A.Component.create({ 
     NAME: DIAGRAM_NODE_NAME, 

     ATTRS: { 
      type: { 
      value: CUSTOM 
      }, 
     }, 

     EXTENDS: A.DiagramNodeTask 
     }); 

     A.DiagramBuilder.types[CUSTOM] = A.DiagramNodeCustom; 

     // and then do your thing here 
    } 
);

希望它有幫助。

來源

2013-07-04 17:54:00 user2551403

這是更清潔的自定義文件，感謝定義它，但我仍然有隱蔽性的問題，不知道如何屬性節點，如添加[這裏]（http://jsfiddle.net/tFX8H/）。 – none

如何將自定義節點和屬性添加到AlloyUI圖生成器中

回答

相關問題