편집 바

각 Diagram 요소별로, 또는 다양한 조건을 고려하여 요소 그룹 단위로 편집 바 컨트롤을 구성할 수 있습니다. 이를 위해 편집 바의 properties 설정을 사용합니다.

개별 도형에 대해 편집 바 컨트롤을 구성하려면 아래 예제와 같이 properties 설정 내에 해당 도형 유형을 지정해야 합니다.

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        editbar: {
            properties: {
                rectangle: [ // "pert" 도형에 대한 편집 바 컨트롤 구성
                    { type: "arrange", $properties: { angle: { hidden: true } }},
                    // ... 기타 편집 바 컨트롤 구성
                ],
                // ... 기타 도형 구성
            }
        }
    }
});

요소 그룹을 구성하려면 properties 설정 내에서 다음 서비스 속성을 사용해야 합니다.

• $default - 요소가 선택되지 않았거나 두 개 이상의 요소가 선택된 경우 편집 바 컨트롤을 구성할 수 있습니다
• $shape - 커스텀 도형을 포함한 모든 도형에 대해 편집 바 컨트롤을 구성할 수 있습니다
• $group - group 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다
• $swimlane - swimlane 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다
• $line - line 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다
• $lineTitle - lineTitle 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다

그리드 영역에 대한 편집 바 구성

$default 서비스 속성을 사용하면 요소가 선택되지 않았거나 두 개 이상의 요소가 선택된 경우 편집 바 컨트롤을 구성할 수 있습니다.

properties: {
    $default: [
        {
            type: "gridStep",
            readOnly: true,
            // ...
        }
    ]
}

관련 복합 컨트롤: 그리드 스텝, 테두리, 배치

도형에 대한 편집 바 구성

$shape 서비스 속성을 사용하면 커스텀 도형을 포함한 모든 도형에 대해 편집 바 컨트롤을 구성할 수 있습니다.

properties: {
    $shape: [
        {
            type: "position",
            $properties: {
                dx: { disabled: true },
                // ...
            },
            // ...
        }
    ]
}

관련 복합 컨트롤: 테두리, 배치, 위치, 크기, 텍스트 정렬, 텍스트 스타일

그룹 요소에 대한 편집 바 구성

$group 서비스 속성을 사용하면 group 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다.

properties: {
    $group: [
        {
            type: "header",
            label: "Group header style",
            // ...
        }
    ]
}

관련 복합 컨트롤: 테두리, 배치, 헤더, 공통 헤더, 헤더 위치, 크기, 텍스트 정렬, 텍스트 스타일

스윔레인에 대한 편집 바 구성

$swimlane 서비스 속성을 사용하면 swimlane 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다.

properties: {
    $swimlane: [
        {
            type: "header",
            label: "Swimlane header style",
            // ...
        }
    ]
}

관련 복합 컨트롤: 테두리, 배치, 헤더, 공통 헤더, 헤더 위치, 크기, 텍스트 정렬, 텍스트 스타일

선에 대한 편집 바 구성

$line 서비스 속성을 사용하면 line 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다.

properties: {
    $line: [
        {
            type: "lineShape",
            label: "Line connection type",
            // ...
        }
    ]
}

관련 복합 컨트롤: 테두리, 선 모양, 포인터 보기

선 제목에 대한 편집 바 구성

$lineTitle 서비스 속성을 사용하면 lineTitle 유형의 모든 요소에 대해 편집 바 컨트롤을 구성할 수 있습니다.

properties: {
    $lineTitles: [
        {
            type: "textAlign",
            label: "Text align",
            // ...
        },
        // ...
    ]
}

관련 복합 컨트롤: 텍스트 정렬, 텍스트 스타일

커스텀 편집 바 컨트롤 생성 및 구성

편집 바 뷰의 controls 속성을 사용하여 기본 컨트롤 및/또는 복합 컨트롤을 기반으로 커스텀 컨트롤을 생성할 수 있습니다.

경고

기본 컨트롤 및/또는 복합 컨트롤에서 사용하는 기본 컨트롤 유형의 이름을 커스텀 컨트롤의 이름으로 사용하지 않는 것이 좋습니다. 오류를 방지하려면 각 커스텀 컨트롤에 고유한 이름을 사용하세요!

커스텀 컨트롤을 생성한 후에는 properties 속성을 통해 필요한 Diagram 요소에 적용해야 합니다.