React Diagram - Custom Shapes
The Diagram UI component provides a collection of built-in shapes. Use the customShapes property to extend this collection with custom shapes.
The toolbox property allows you to add the custom shapes to the toolbox.
A custom shape can be created based on a default shape type or with a custom background image. The type property identifies custom shapes and should be unique.
Shapes with Base Type
Shapes with Base Type
Use the baseType property to specify a base type for a shape. The built-in shape types are shown in the Shape Types section.
jQuery
$(function() {
var diagram = $("#diagram").dxDiagram({
customShapes: employees.map(
function(emp) {
return {
category: "employees",
type: "employee" + emp.ID,
baseType: "rectangle",
defaultText: emp.Full_Name,
allowEditText: false
}
}
),
toolbox: {
groups: [{ category: "employees", title: "Employees", displayMode: "texts" }]
}
}).dxDiagram("instance");
});Angular
<dx-diagram #diagram id="diagram">
<dxi-custom-shape *ngFor="let emp of employees"
category="employees"
[type]='"employee" + emp.ID'
baseType="rectangle"
[defaultText]="emp.Full_Name"
[allowEditText]="false">
</dxi-custom-shape>
<dxo-toolbox>
<dxi-group category="employees" title="Employees" displayMode="texts"></dxi-group>
</dxo-toolbox>
</dx-diagram>Vue
<template>
<DxDiagram
id="diagram"
ref="diagram"
>
<DxCustomShape
v-for="employee in employees"
:category="'employees'"
:type="'employee' + employee.ID"
:base-type="'rectangle'"
:default-text="employee.Full_Name"
:allow-edit-text="false"
:key="employee.ID"
/>
<DxToolbox :visible="true">
<DxGroup
:category="'employees'"
:title="'Employees'"
:display-mode="'texts'"
/>
</DxToolbox>
</DxDiagram>
</template>
<script>
/ ...
data() {
return {
employees: service.getEmployees()
};
},
</script>React
class App extends React.Component {
// ...
render() {
return (
<Diagram id="diagram" ref={this.diagramRef}>
{this.employees.map(function(employee, index) {
return <CustomShape category="employees" type={`employee${employee.ID}`} baseType="rectangle"
defaultText={employee.Full_Name} allowEditText={false} key={index} />;
})}
<Toolbox>
<Group category="employees" title="Employees" displayMode="texts" />
</Toolbox>
</Diagram>
);
}
}ASP.NET Core Controls
@(Html.DevExtreme().Diagram()
.ID("diagram")
.CustomShapes(cs => {
foreach(var employee in Model) {
cs.Add().Category("employees").Type("employee" + employee.ID).BaseType("rectangle").DefaultText(employee.FullName).AllowEditText(false);
}
})
.Toolbox(tb => tb
.Groups(g => g.Add().Category("employees").Title("Employees").DisplayMode(DiagramToolboxDisplayMode.Texts))
)
)ASP.NET MVC Controls
@(Html.DevExtreme().Diagram()
.ID("diagram")
.CustomShapes(cs => {
foreach(var employee in Model) {
cs.Add().Category("employees").Type("employee" + employee.ID).BaseType("rectangle").DefaultText(employee.FullName).AllowEditText(false);
}
})
.Toolbox(tb => tb
.Groups(g => g.Add().Category("employees").Title("Employees").DisplayMode(DiagramToolboxDisplayMode.Texts))
)
)Shapes with Custom Background Images
Use the backgroundImageUrl property to specify a background image for a shape.
jQuery
$(function() {
var diagram = $("#diagram").dxDiagram({
customShapes: [{
category: "hardware",
type: "internet",
title: "Internet",
backgroundImageUrl: "images/shapes/internet.svg",
backgroundImageLeft: 0.15,
backgroundImageTop: 0,
backgroundImageWidth: 0.7,
backgroundImageHeight: 0.7,
defaultWidth: 0.75,
defaultHeight: 0.75,
defaultText: "Internet",
allowEditText: true,
textLeft: 0,
textTop: 0.7,
textWidth: 1,
textHeight: 0.3,
connectionPoints: [
{ x: 0.5, y: 0 },
{ x: 0.9, y: 0.5 },
{ x: 0.5, y: 1 },
{ x: 0.1, y: 0.5 }
]
},
// ...
],
toolbox: {
groups: [{ category: "hardware", title: "Hardware" }]
}
}).dxDiagram("instance");Angular
<dx-diagram #diagram id="diagram">
<dxi-custom-shape
category="hardware"
type="internet"
title="Internet"
backgroundImageUrl="images/shapes/internet.svg"
[backgroundImageLeft]="0.15"
[backgroundImageTop]="0"
[backgroundImageWidth]="0.7"
[backgroundImageHeight]="0.7"
[defaultWidth]="0.75"
[defaultHeight]="0.75"
defaultText="Internet"
[allowEditText]="false"
[textLeft]="0"
[textTop]="0.7"
[textWidth]="1"
[textHeight]="0.3">
<dxi-connection-point [x]="0.5" [y]="0"></dxi-connection-point>
<dxi-connection-point [x]="0.9" [y]="0.5"></dxi-connection-point>
<dxi-connection-point [x]="0.5" [y]="1"></dxi-connection-point>
<dxi-connection-point [x]="0.1" [y]="0.5"></dxi-connection-point>
</dxi-custom-shape>
// ...
<dxo-toolbox>
<dxi-group category="hardware" title="Hardware"></dxi-group>
</dxo-toolbox>
</dx-diagram>Vue
<template>
<DxDiagram
id="diagram"
ref="diagram"
>
<DxCustomShape
:category="'hardware'"
:type="'internet'"
:title="'Internet'"
:background-image-url="'images/shapes/internet.svg'"
:background-image-left="0.15"
:background-image-top="0"
:background-image-width="0.7"
:background-image-height="0.7"
:default-width="0.75"
:default-height="0.75"
:default-text="'Internet'"
:allow-edit-text="true"
:text-left="0"
:text-top="0.7"
:text-width="1"
:text-height="0.3"
>
<DxConnectionPoint
:x="0.5"
:y="0"
/>
<DxConnectionPoint
:x="0.9"
:y="0.5"
/>
<DxConnectionPoint
:x="0.5"
:y="1"
/>
<DxConnectionPoint
:x="0.1"
:y="0.5"
/>
</DxCustomShape>
// ...
<DxToolbox :visible="true">
<DxGroup
:category="'hardware'"
:title="'Hardware'"
/>
</DxToolbox>
</DxDiagram>
</template>React
class App extends React.Component {
// ...
render() {
return (
<Diagram id="diagram" ref={this.diagramRef}>
<CustomShape
category="hardware"
type="internet"
title="Internet"
backgroundImageUrl="images/shapes/internet.svg"
backgroundImageLeft={0.15}
backgroundImageTop={0}
backgroundImageWidth={0.7}
backgroundImageHeight={0.7}
defaultWidth={0.75}
defaultHeight={0.75}
defaultText="Internet"
allowEditText={true}
textLeft={0}
textTop={0.7}
textWidth={1}
textHeight={0.3}>
<ConnectionPoint x={0.5} y={0} />
<ConnectionPoint x={0.9} y={0.5} />
<ConnectionPoint x={0.5} y={1} />
<ConnectionPoint x={0.1} y={0.5} />
</CustomShape>
// ...
<Toolbox>
<Group category="hardware" title="Hardware" />
</Toolbox>
</Diagram>
);
}
}ASP.NET Core Controls
tab: Diagram.cshtml
@(Html.DevExtreme().Diagram() .ID("diagram") .CustomShapes(cs => { cs.Add() .Category("hardware") .Type("internet") .Title("Internet") .BackgroundImageUrl(Url.Content("/images/shapes/internet.svg")) .BackgroundImageLeft(0.15) .BackgroundImageTop(0) .BackgroundImageWidth(0.7) .BackgroundImageHeight(0.7) .DefaultWidth(0.75) .DefaultHeight(0.75) .DefaultText("Internet") .AllowEditText(true) .TextLeft(0) .TextTop(0.7) .TextWidth(1) .TextHeight(0.3) .ConnectionPoints(cp => { cp.Add().X(0.5).Y(0); cp.Add().X(0.9).Y(0.5); cp.Add().X(0.5).Y(1); cp.Add().X(0.1).Y(0.5); }); // ... }) .Toolbox(tb => tb .Groups(g => g.Add().Category("hardware").Title("Hardware")) ) )
ASP.NET MVC Controls
@(Html.DevExtreme().Diagram()
.ID("diagram")
.CustomShapes(cs => {
cs.Add()
.Category("hardware")
.Type("internet")
.Title("Internet")
.BackgroundImageUrl(Url.Content("~/Content/Images/shapes/internet.svg"))
.BackgroundImageLeft(0.15)
.BackgroundImageTop(0)
.BackgroundImageWidth(0.7)
.BackgroundImageHeight(0.7)
.DefaultWidth(0.75)
.DefaultHeight(0.75)
.DefaultText("Internet")
.AllowEditText(true)
.TextLeft(0)
.TextTop(0.7)
.TextWidth(1)
.TextHeight(0.3)
.ConnectionPoints(cp => {
cp.Add().X(0.5).Y(0);
cp.Add().X(0.9).Y(0.5);
cp.Add().X(0.5).Y(1);
cp.Add().X(0.1).Y(0.5);
});
// ...
})
.Toolbox(tb => tb
.Groups(g => g.Add().Category("hardware").Title("Hardware"))
)
)If you have technical questions, please create a support ticket in the DevExpress Support Center.