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.
- <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>
Shapes with Custom Background Images
Use the backgroundImageUrl property to specify a background image for a shape.
- <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>
If you have technical questions, please create a support ticket in the DevExpress Support Center.