addShape()

설명

사용자 지정 도형을 생성합니다

addShape() 메서드는 다이어그램과 에디터 모두에서 사용할 수 있습니다. 아래 예제를 확인하세요

사용법

addShape(
    type: string,
    parameters: object
): void;

매개변수

type - (필수) 사용자 지정 도형 유형의 고유한 이름입니다. 이 이름은 기본 도형의 이름과 달라야 합니다
parameters - (필수) addShape() 메서드의 추가 매개변수가 담긴 객체입니다. 여기에서 다음 속성을 지정할 수 있습니다:
- template: function - (필수) 도형의 구성 객체를 매개변수로 받아 HTML 또는 SVG 템플릿을 반환하는 함수입니다
- defaults: object - (선택 사항) 생성된 도형의 기본 구성입니다. 도형의 전체 구성 속성 목록을 참조하세요
- eventHandlers: object - (선택 사항) 도형 템플릿의 HTML 요소에 사용자 지정 이벤트 핸들러를 추가합니다. eventHandlers 객체는 다음과 같은 key:value 쌍의 집합을 포함합니다:
  - key: string - 이벤트의 이름입니다. 이벤트 이름 앞에는 'on' 접두사가 사용된다는 점에 유의하세요(onclick, onmouseover)
  - value: object - 다음과 같은 key:value 쌍을 포함하는 객체입니다:
    - key는 핸들러가 적용될 CSS 클래스 이름입니다
    - value는 두 개의 매개변수를 받는 함수입니다:
      - event: object - (필수) 이벤트 객체입니다
      - shape: object - (필수) 도형 객체입니다
  팁
  사용자 지정 이벤트 핸들러를 초기화할 때는 서로 다른 사용자 지정 도형에 대해 서로 다른 CSS 클래스를 사용하는 것이 좋습니다.

예제

다이어그램에 도형 추가하기
const diagram = new dhx.Diagram("diagram_container", {
    type: "org", //  또는 type: "default", 또는 type: "mindmap"
    defaultShapeType: "personal",
});

diagram.data.parse(data);

diagram.addShape("personal", {
    template: ({ name, photo, post }) => (`
        <div className="dhx_diagram_template_a_box dhx_diagram_template_a">
            <div className="dhx_diagram_template_a__inside">
                <div className="dhx_diagram_template_a__picture" style={{backgroundImage: 'url(${photo})'}}></div>
                <div className="dhx_diagram_template_a__body">
                    <div className="dhx_diagram_template_a__title">${name}</div>
                    <div className="dhx_diagram_template_a__row">
                        <span className="dhx_diagram_template_a__text">${post}</span>
                    </div>
                </div>
                <div className="toggle--open-menu">
                    <span className="dhx_diagram_template_a__icon mdi mdi-dots-vertical"></span>
                </div>
            </div>
        </div>
    `),
    defaults: {
        height: 115, width: 330,
        name: "Name and First name",
        post: "Resident",
        photo: "",
    },
    eventHandlers: {
        onclick: {
            "toggle--open-menu": () => console.log("open menu")
        }
    }
});

아래 예제는 Diagram Editor에 사용자 지정 도형을 추가하는 방법과 함께, 에디터의 Shapebar 및 Editbar 패널을 구성하는 방법을 보여줍니다. Editor의 editbar에서 사용자 지정 도형을 구성하는 것은 Editbar 패널의 properties 속성을 통해 구현됩니다.

다이어그램 에디터에 도형 추가하기
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            sections: {
                "Network shapes": [
                    { type: "network", text: "Core", img: src + "core.svg" },
                    { type: "network", text: "Server", img: src + "server.svg" }
                ],
                "Flow shapes": [{ flowShapes: true }]
            }
        },
        editbar: {
            properties: {
                network: [
                    { type: "arrange" },
                    {
                        type: "fieldset",
                        label: "Network information",
                        rows: [
                            { type: "avatar", key: "img", circle: true, readOnly: true },
                            { type: "textarea", key: "text", label: "Description" },
                            { type: "input", key: "ip", label: "IP" }
                        ]
                    }
                ]
            }
        }
    }
});

editor.parse(data);

editor.diagram.addShape("network", {
    template: ({ img, text, ip }) => {
        return `
            <section className="dhx_diagram_template_d">
                <img className="dhx_diagram_template_d__image" src="${img}" alt="${text}"/></img>
                <span className="dhx_diagram_template_d__title">${text}</span>
                <span className="dhx_diagram_template_d__text">${ip}</span>
            </section>
        `;
    },
    defaults: {
        width: 160, height: 160,
        preview: { scale: 0.7 },
        ip: "127.0.0.1"
    }
});

Change log: properties 속성은 v6.0에서 제거되었습니다.

Related article: 사용자 지정 도형

Related samples:

설명​

사용법​

매개변수​

예제​

설명

사용법

매개변수

예제