addShape()

Beschreibung

Erstellt eine benutzerdefinierte Form

Die Methode addShape() kann sowohl im Diagramm als auch im Editor verwendet werden. Sehen Sie sich die Beispiele unten an

Verwendung

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

Parameter

• type - (erforderlich) der eindeutige Name für den Typ einer benutzerdefinierten Form. Der Name muss sich von den Namen der Standardformen unterscheiden
• parameters - (erforderlich) ein Objekt mit den zusätzlichen Parametern der Methode addShape(). Hier können Sie die folgenden Attribute angeben:

  • template: function - (erforderlich) die Funktion, die das Konfigurationsobjekt der Form als Parameter erhält und entweder eine HTML- oder SVG-Vorlage zurückgibt

  • defaults: object - (optional) die Standardkonfiguration für eine erstellte Form. Siehe die vollständige Liste der Konfigurationseigenschaften einer Form

  • eventHandlers: object - (optional) fügt HTML-Elementen der Vorlage einer Form benutzerdefinierte Event-Handler hinzu. Das Objekt eventHandlers enthält eine Reihe von key:value-Paaren, wobei:

    • key: string - der Name des Events. Beachten Sie, dass das Präfix „on“ am Anfang des Event-Namens verwendet wird (onclick, onmouseover)
    • value: object - ein Objekt, das ein key:value-Paar enthält, wobei
      • key der Name der CSS-Klasse ist, auf die der Handler angewendet wird
      • value eine Funktion ist, die zwei Parameter erhält:
        • event: object - (erforderlich) ein Event-Objekt
        • shape: object - (erforderlich) das Objekt der Form
    Tipp

    Wir empfehlen, beim Initialisieren benutzerdefinierter Event-Handler für unterschiedliche benutzerdefinierte Formen jeweils unterschiedliche CSS-Klassen zu verwenden.

Beispiel

Hinzufügen einer Form zum Diagramm

const diagram = new dhx.Diagram("diagram_container", {
    type: "org", //  or type: "default", or 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")
        }
    }
});

Verwandtes Beispiel: Diagram mit Editor. Org-Chart-Modus. Anpassung von Karten, Editbar und Toolbar

Das folgende Beispiel zeigt, wie Sie eine benutzerdefinierte Form in den Diagram Editor einfügen und die Panels Shapebar und Editbar des Editors konfigurieren können. Die Konfiguration einer benutzerdefinierten Form in der Editbar des Editors erfolgt über die Eigenschaft properties des Editbar-Panels.

Hinzufügen einer Form zum Diagram Editor

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"
    }
});

Changelog: Das Attribut properties wurde in v6.0 entfernt.

Verwandter Artikel: Benutzerdefinierte Form

Verwandte Beispiele:

• Diagram. Mindmap-Modus. Sitemap- und Benutzerablauf-Beispiel (benutzerdefinierte Vorlage)
• Diagram mit Editor. Org-Chart-Modus. Anpassung von Karten, Editbar und Toolbar
• Verwandtes Beispiel: Diagram Editor. Standardmodus. Basis- und benutzerdefinierte Themes