Migration zu neueren Versionen

5.0 -> 6.0

Diagram-Editor-Struktur

Die Hauptbestandteile des Diagram Editors wurden umbenannt:

Linkes Panel -> Shapebar
Rechtes Panel -> Editbar ist mit einer flexiblen Konfiguration ausgestattet

Die Standardstruktur der Toolbar wurde geändert. Sie wurde ebenfalls in hohem Maße konfigurierbar, sodass Sie auch benutzerdefinierte Toolbar-Elemente hinzufügen können.

Diagram-Editor-API

Das view-Objekt wurde eingeführt, um die Panels des Diagram Editors zu konfigurieren:

view?: {
    toolbar?: boolean | obj,
    shapebar?: boolean | obj,
    editbar?: boolean | obj
}

Sehen Sie sich die zugehörigen API-Übersichtsleitfäden an, um die neuen Möglichkeiten der Panel-Verwaltung kennenzulernen:

Veraltete Methoden

Die Methode setViewMode() des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Methoden show()/hide() des view-Objekts.

Before v6.0
const editor = new dhx.DiagramEditor("editor_container");
editor.parse(data);

editor.setViewMode("preview"); // "preview" oder "edit"

From v6.0
const editor = new dhx.DiagramEditor("editor_container");
editor.parse(data);

editor.view.hide("shapebar");
editor.view.hide("editbar");

Veraltete Eigenschaften

Die Eigenschaft reservedWidth des Diagram Editors ist veraltet und wird nicht mehr unterstützt.

Before v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    reservedWidth: 150
});

Verwenden Sie stattdessen die folgende Syntax:

From v6.0
editor.diagram.config.margin.x = 40;

Die Eigenschaft editMode des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die entsprechende Eigenschaft des view-Objekts (toolbar, shapebar, editbar).

Before v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    editMode: false
});

From v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    view: {
        toolbar: false,
        shapebar: false, // nur für den Modus "default"
        editbar: false
    }
});

Die Eigenschaft controls des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Eigenschaft items der Konfiguration view.toolbar.

Before v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    controls: {
        // ...
    }
});

From v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    view: {
        toolbar: {
            items: []
        }
    }
});

Die Eigenschaft shapeBarWidth des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Eigenschaft width der Konfiguration view.shapebar.

Before v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    shapeBarWidth: 190
});

From v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            width: 400 // Standardmäßig 300
        }
    }
});

Die Eigenschaft shapeSections des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Eigenschaft sections der Konfiguration view.shapebar.

Before v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    shapeSections: {
        "Swimlane": [{ swimlane: true }],
        "Groups": [{ group: true }],
        "Flowchart shapes": [{ flowShapes: true }],
        "Org shapes, text, topic": [{ org: true }, "text", "topic"]
    }
});

From v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            sections: {
                "Swimlane": [{ swimlane: true }],
                "Groups": [{ group: true }],
                "Flowchart shapes": [{ flowShapes: true }],
                "Org shapes, text, topic": [{ org: true }, "text", "topic"]
            }
        }
    }
});

Die Eigenschaft gapPreview des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Eigenschaft gap des Objekts preview der Konfiguration view.shapebar.

Before v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    gapPreview: 10
});

From v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            preview: {
               scale: 0.65,
               gap: 8
            }
        }
    }
});

Die Eigenschaft scalePreview des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen die Eigenschaft scale des Objekts preview der Konfiguration view.shapebar.

Before v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    gapPreview: 10
});

From v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            preview: {
               scale: 0.65,
               gap: 8
            }
        }
    }
});

Veraltete Events

Die folgenden Events des Diagram Editors sind veraltet und werden nicht mehr unterstützt, da es keine entsprechenden Schaltflächen in der Toolbar gibt: resetButton, applyButton, visibility, exportData, importData, autoLayout. Stattdessen können Sie das click-Event des toolbar-Objekts des Diagram Editors abonnieren:

editor.toolbar.events.on("click", id => console.log(id));

Hinweis

Die IDs der Serviceelemente beginnen mit dem Symbol $.

Das Event changeGridStep des Diagram Editors ist veraltet und wird nicht mehr unterstützt.

Diagram-API

Die Eigenschaft properties der Methode addShape ist veraltet und wird nicht mehr verwendet. Die Konfiguration eines benutzerdefinierten Shapes in der Editbar des Editors erfolgt über die Eigenschaft properties des Editbar-Panels:

Before v6.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default"
});
editor.parse(data);

editor.diagram.addShape("network", {
    template: config => (
        `<section className='template'>
            <h3>${config.title}</h3>
            <ul><li>${config.text.join("</li><li>")}</li></ul>
        </section>`
    ),
    properties:[
        { type:"arrange" },
        { type:"size" }
    ]
});

From v6.0
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"
    }
});

Diagram-Selection-API

Die Methode getId() des Selection-Objekts von Diagram ist veraltet und wird nicht mehr unterstützt. Stattdessen können Sie die Methoden getIds() und getItem() des Selection-Objekts verwenden. Sehen Sie sich die folgenden Beispiele an:

Before v6.0
// Das Diagramm muss mit der Option "select:true" erstellt werden
const diagram = new dhx.Diagram("diagram_container", {
    select: true
});
diagram.data.parse(data);

const id = diagram.selection.getId(); // -> "2"

From v6.0
// Ein Diagramm muss mit der Option "select:true" erstellt werden
const diagram = new dhx.Diagram("diagram_container", {
    select: true
});
diagram.data.parse(data);

// Gibt das zuletzt ausgewählte Element zurück
let id = diagram.selection.getIds().at(-1);
id = diagram.selection.getItem().id;

Shape-Eigenschaften

Die Verwendung der Eigenschaft text des Shape-Konfigurationsobjekts ist auf reine String-Werte beschränkt. Die Verwendung als Array von String-Werten bei der Konfiguration eines benutzerdefinierten Shapes ist veraltet und wird nicht mehr unterstützt.

Linientitel

Linientitel werden aus den line-Objekten in die gemeinsame Datenstruktur auf derselben Ebene wie die Linien verschoben und als lineTitles-Objekte definiert.

Vor v6.0 wurden Linientitel innerhalb des line-Objekts wie folgt angegeben:

Before v6.0
const data = [
    // Linienobjekt
    {
        // Eigenschaften des Linienobjekts
        title?: {
            fontSize?: number | string, // Standardmäßig 14
            lineHeight?: number | string, // Standardmäßig 14
            textAlign?: "center" | "left" | "right", // Standardmäßig "center"
            textVerticalAlign?: string,
            fontStyle?: "normal" | "italic" | "oblique", // Standardmäßig "normal"
            fontColor?: string, // Standardmäßig "#4C4C4C"
            fontWeight?: string, // Standardmäßig "500"
            fill?: string,
            editable?: boolean, // Standardmäßig true
            hidden?: boolean,
            draggable?: boolean,
            autoPosition?: boolean,
            text?: [
                {
                    id?: string | number,
                    type?: "$linetext",
                    width?: number,
                    height?: number,
                    distance?: number,
                    autoPosition?: boolean,
                    hidden?: boolean,
                    editable?: boolean, // Standardmäßig true
                    draggable?: boolean,
                    fill?: string,
                    text?: string,
                    fontSize?: number | string, // Standardmäßig 14
                    lineHeight?: number | string, // Standardmäßig 14
                    fontStyle?: "normal" | "italic" | "oblique", // Standardmäßig "normal"
                    fontColor?: string, // Standardmäßig "#4C4C4C"
                    fontWeight?: string, // Standardmäßig "500"
                    textAlign?: "center" | "left" | "right", // Standardmäßig "center"
                    textVerticalAlign?: "center" | "top" | "bottom" // Standardmäßig "center"
                },
                // weitere Objekte für Textelemente einer Linie
            ]
        }
    },
    // weitere Linienobjekte
]

Ab v6.0 werden Linientitel in separaten Objekten mit dem Typ "lineTitle" definiert. Das lineTitle-Objekt verfügt über die folgenden Konfigurationseigenschaften:

From v6.0
const data = [
    // Linientitelobjekt
    {
        type: "lineTitle",
        id?: string | number,
        text: string,
        parent: string | number,

        distance?: number, // Standardmäßig 50
        autoPosition?: boolean, // Standardmäßig true
        editable?: boolean, // Standardmäßig true
        fixed?: boolean, // Standardmäßig false
        hidden?: boolean, // Standardmäßig false

        fill?: string,
        fontSize?: string | number, // Standardmäßig 14
        lineHeight?: string | number, // Standardmäßig 14
        fontStyle?: "normal" | "italic" | "oblique", // Standardmäßig "normal"
        fontColor?: string, // Standardmäßig "#4C4C4C"
        fontWeight?: string, // Standardmäßig "500"
        textAlign?: "center" | "left" | "right" // Standardmäßig "center"
    },
    // weitere Objekte
];

Weitere Details finden Sie in der API und den Leitfäden von LineTitles.

Lokalisierung

Aufgrund der Änderungen an der Oberfläche des Diagram Editors wurden die Spracheinstellungen aktualisiert. Weitere Details finden Sie in den Leitfäden zur Lokalisierung.

4.2 -> 5.0

Diagram-API

Die Eigenschaft lineGap von Diagram ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen den Parameter lineGap der Eigenschaft lineConfig.

Before v5.0
const diagram = new dhx.Diagram("diagram_container", {
    type: "default",
    lineGap: 30
});

From v5.0
const diagram = new dhx.Diagram("diagram_container", {
    type: "default",
    lineConfig: {
        lineGap: 30
    },
    // weitere Konfigurationsparameter
});

Editor-API

Die Eigenschaft lineGap des Diagram Editors ist veraltet und wird nicht mehr unterstützt. Verwenden Sie stattdessen den Parameter lineGap innerhalb der Eigenschaft lineConfig.

Before v5.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    lineGap: 30
});

From v5.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    lineConfig: {
        lineGap: 30
    },
    // weitere Konfigurationsparameter
});

4.1 -> 4.2

Diagram-API

In v4.2 ist die Eigenschaft defaultLinkType veraltet.

Ab v4.2 müssen Sie die neue Eigenschaft lineConfig verwenden, um den Standardtyp für Verbindungslinien festzulegen.

Before v4.2
const diagram = new dhx.Diagram("diagram_container", {
    defaultLinkType: "dash"
});

From v4.2
const diagram = new dhx.Diagram("diagram_container", {
    lineConfig: {
        lineType: "dash",
    },
    // weitere Konfigurationsparameter
});

Editor-API

Die Syntax zum Festlegen grundlegender Sets von Elementen für Abschnitte im linken Panel des Editors wurde geändert.

Vor v4.2 konnten Sie dem Array der Elemente eines Abschnitts den booleschen Wert true zuweisen, um alle verfügbaren Flowchart-Shapes im Abschnitt anzuzeigen:

Before v4.2
const editor = new dhx.DiagramEditor("editor_container", {
    shapeSections: {
        "flowchart shapes": [true],
        "text": ["text"],
        "mind map shape": ["topic"]
    },
});

Ab v4.2 müssen Sie dafür eine andere Syntax verwenden:

From v4.2
const editor = new dhx.DiagramEditor("editor_container", {
    shapeSections: {
        "flowchart shapes": [{ flowShapes: true }],
        "text": ["text"],
        "mind map shape": ["topic"]
    },
});

Außerdem ist es nun möglich, andere grundlegende Sets von Elementen über die entsprechenden key:value-Paare festzulegen. Weitere Details finden Sie im Artikel zu shapeSections.

3.1 -> 4.0

API

Das Event shapeHover wurde in v4.0 als veraltet markiert. Verwenden Sie ab v4.0 stattdessen das neue Event itemMouseOver.

Before v4.0
diagram.events.on("shapeHover", (id,e) => {
    console.log("An item"+ diagram.data.getItem(id).text +"has been hovered over");
});

From v4.0
diagram.events.on("itemMouseOver", (id, event) => {
    console.log(id, event);
});
// Für den Diagram Editor
editor.diagram.events.on("itemMouseOver", (id, event) => {
    console.log(id, event);
});

3.0 -> 3.1

Editor-API

Das Event shapeMove des Editor-Objekts wurde in v3.1 als veraltet markiert. Verwenden Sie ab v3.1 stattdessen die neuen Events BeforeShapeMove und AfterShapeMove.

Before v3.1
editor.events.on("shapeMove", () => {
    console.log("The shape is moved");
});

From v3.1
// BeforeShapeMove-Event
editor.events.on("BeforeShapeMove", (e) => {
    console.log("Before the shape is moved:", e);
    return true;
});

// AfterShapeMove-Event
editor.events.on("AfterShapeMove", (e) => {
    console.log("After the shape is moved:", e);
});

2.2 -> 3.0

Erstellen benutzerdefinierter Shapes

Die Art und Weise, wie benutzerdefinierte Shapes erstellt werden, wurde geändert, vereinfacht und verbessert.

Ab v3.0 sollten Sie zum Erstellen eigener Shape-Typen die neue Methode addShape anstelle des Objekts diagram.flowShapes verwenden. Die Methode ermöglicht es Ihnen, HTML-Templates zu erstellen, die in verschiedenen Browsern funktionieren. Außerdem können Sie mit dieser Methode benutzerdefinierte Shapes im Diagram Editor erstellen und bearbeiten.

Obwohl das Objekt diagram.flowShapes veraltet ist, funktioniert es weiterhin.

Vor Version 3.0 konnten Sie Toolbar-Schaltflächen im Diagram Editor über die zugehörigen Konfigurationseigenschaften showApply, showReset, showExport des Editors ein-/ausblenden.

In Version 3.0 sind diese Eigenschaften veraltet und wurden entfernt. Stattdessen wurde die Konfigurationseigenschaft controls hinzugefügt, die eine Reihe von control_name:value-Paaren enthält. Somit werden die Eigenschaften ersetzt durch:

showApply -> controls.apply
showReset -> controls.reset
showExport -> controls.export

const editor = new dhx.DiagramEditor("editor_container", {
    controls: {
        apply: false,
        reset: false,
        export: true
    }
});

Um eine Toolbar-Schaltfläche zu aktivieren/deaktivieren, müssen Sie den Wert des Controls auf true (Standard) oder false setzen.

Die vollständige Liste der verfügbaren Controls finden Sie im Artikel Toolbar.

1.1 -> 2.0

Entfernte API

diagram.eachChild

Geänderte API

diagram.addItem -> diagram.data.add
diagram.attachEvent -> diagram.events.on
diagram.callEvent -> diagram.events.fire
diagram.clearAll -> diagram.data.removeAll
diagram.deleteItem -> diagram.data.remove
diagram.detachEvent -> diagram.events.detach
diagram.eachItem -> diagram.data.map
diagram.getItem -> diagram.data.getItem
diagram.getSelectedId -> diagram.selection.getId
diagram.load -> diagram.data.load
diagram.parse -> diagram.data.parse
diagram.selectItem -> diagram.selection.add
diagram.serialize -> diagram.data.serialize
diagram.unselectItem -> diagram.selection.remove
diagram.updateItem -> diagram.data.update

5.0 -> 6.0​

Diagram-Editor-Struktur​

Diagram-Editor-API​

Veraltete Methoden​

Veraltete Eigenschaften​

Veraltete Events​

Diagram-API​

Diagram-Selection-API​

Shape-Eigenschaften​

Linientitel​

Lokalisierung​

4.2 -> 5.0​

Diagram-API​

Editor-API​

4.1 -> 4.2​

Diagram-API​

Editor-API​

3.1 -> 4.0​

API​

3.0 -> 3.1​

Editor-API​

2.2 -> 3.0​

Erstellen benutzerdefinierter Shapes​

Toolbar-Schaltflächen im Editor​

1.1 -> 2.0​

Entfernte API​

Geänderte API​

5.0 -> 6.0

Diagram-Editor-Struktur

Diagram-Editor-API

Veraltete Methoden

Veraltete Eigenschaften

Veraltete Events

Diagram-API

Diagram-Selection-API

Shape-Eigenschaften

Linientitel

Lokalisierung

4.2 -> 5.0

Diagram-API

Editor-API

4.1 -> 4.2

Diagram-API

Editor-API

3.1 -> 4.0

API

3.0 -> 3.1

Editor-API

2.2 -> 3.0

Erstellen benutzerdefinierter Shapes

Toolbar-Schaltflächen im Editor

1.1 -> 2.0

Entfernte API

Geänderte API