AlloyUI 다이어그램 빌더에 사용자 정의 노드 및 특성을 추가하는 방법

Question

AlloyUI의 diagram builder example을 사용하려고했습니다.

추가 사용자 정의 노드 유형과 노드에 대한 몇 가지 추가 특성을 추가해야합니다. 나는 도서관을 수정하고, 그 다음에 짓는 것을 생각했다. 그러나 그것은 그런 작업을위한 과잉과 같게 들린다. 그리고 나는 또한 건물과 더불어 issues를 가지고 있었다.

쉬운 방법이 있나요?

UPDATE

는 내가 직접 빌드 프로세스 없애 빌드 폴더에있는 파일을 수정할 수 깨달았다. 나는 다음과 같이 덧붙이려고했다.

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; 

to /build/aui-diagram-builder-impl/aui-diagram-builder-impl.js.

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(); 
    .. 
    } 
); 

그리고 나는 나의 그림을 사용자 정의 노드를 추가 알 수 있습니다 :

나는 같은 내 주요 자바 스크립트 파일 구조를 가지고있다. 나는 그것을 클릭하고 이름을 바꿀 수는 있지만 불행히도 다이어그램에는 보이지 않습니다. 또한 노드에 새 속성을 추가하는 방법을 찾을 수 없습니다. 어떤 아이디어?

Answer 1

앞에서 설명한 것처럼 지금까지 한 모든 작업이 훌륭하게 들립니다.

노드를 볼 수있는 CSS가없는 것 같습니다. 당신은 here

체크 아웃

.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 */ 
} 

참고 CSS 패널 작업을 볼 수 있습니다 : 합금 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

Answer 2

당신이 한 모든 일이 올바르게 들립니다. 내가 볼 수있는 유일한 것은 파일 aui- 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 
    } 
); 

희망이 있습니다.