React Diagram - customShapes
Use the customShapes property to extend a collection of built-in shapes with custom shapes.
Use the toolbox property to add the custom shapes to the toolbox.
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>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { HttpClient, HttpClientModule } from '@angular/common/http'; import { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild(DxDiagramComponent, { static: false }, { static: false }) diagram: DxDiagramComponent; // Prior to Angular 8 // @ViewChild(DxDiagramComponent, { static: false }) diagram: DxDiagramComponent; constructor(http: HttpClient) { http.get('data/diagram-hardware.json').subscribe(data => { this.diagram.instance.import(JSON.stringify(data)); }, err => { throw 'Data Loading Error' }); } }
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> <script> import { DxDiagram, DxGroup, DxToolbox, DxCustomShape, DxConnectionPoint } from 'devextreme-vue/diagram'; import 'whatwg-fetch'; export default { components: { DxDiagram, DxGroup, DxToolbox, DxCustomShape, DxConnectionPoint }, mounted() { var diagram = this.$refs['diagram'].instance; fetch('data/diagram-hardware.json') .then(function(response) { return response.json(); }) .then(function(json) { diagram.import(JSON.stringify(json)); }) .catch(function() { throw 'Data Loading Error'; }); } }; </script>
React
import React from 'react'; import Diagram, { CustomShape, ConnectionPoint, Group, Toolbox } from 'devextreme-react/diagram'; class App extends React.Component { constructor(props) { super(props); this.diagramRef = React.createRef(); } 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> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().Diagram() .ID("diagram") .CustomShapes(cs => { cs.Add() .Category("hardware") .Type("internet") .Title("Internet") .BackgroundImageUrl("../../Content/Images/shapes/internet.svg") .BackgroundImageLeft(0.15) .BackgroundImageTop(0) .BackgroundImageWidth(0.7) .BackgroundImageHeight(0.7) .DefaultWidth(1.9) .DefaultHeight(1.9) .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")) ) )
backgroundImageHeight
This property specifies a fraction from 0 to 1 that represents the shape background image height in relation to the shape height. If the backgroundImageHeight property is set to 1, the image height is equal to the shape height.
The absolute image height is calculated by multiplying the backgroundImageHeight value by the shape's height.
backgroundImageLeft
This property specifies a fractional left offset of a shape background image toward the shape width. If the backgroundImageLeft property is set to 0, the image's left edge matches the shape's left edge.
The absolute offset is calculated by multiplying the backgroundImageLeft value by the shape's width.
backgroundImageToolboxUrl
If the backgroundImageToolboxUrl property is not set, the toolbox displays an image specified in the backgroundImageUrl property.
backgroundImageTop
This property specifies the top offset (in fractions) of a shape's background image in relation to the shape's height. If the backgroundImageTop property is set to 0, the image's top edge matches the shape's top edge.
The absolute offset is calculated by multiplying the backgroundImageTop value by the shape's height.
backgroundImageUrl
The backgroundImageUrl property is not in effect if the baseType is specified.
See Also
backgroundImageWidth
This property specifies a fraction from 0 to 1 that represents the shape background image width in relation to the shape width. If the backgroundImageWidth property is set to 1, the image width is equal to the shape width.
The absolute image width is calculated by multiplying the backgroundImageWidth value by the shape width.
baseType
Specifies the base shape type for the custom shape. The built-in shape types are shown in the Shape Types section.
When the baseType property is specified, the backgroundImageUrl property is not in effect.
Use the DiagramShapeType
enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Text
, Rectangle
, Ellipse
, Cross
, Triangle
, Diamond
, Heart
, Pentagon
, Octagon
, Star
, ArrowLeft
, ArrowTop
, ArrowRight
, ArrowBottom
, ArrowNorthSouth
, ArrowEastWest
, Process
, Decision
, Terminator
, PredefinedProcess
, Document
, MultipleDocuments
, ManualInput
, Preparation
, Data
, Database
, HardDisk
, InternalStorage
, PaperTape
, ManualOperation
, Delay
, StoredData
, Display
, Merge
, Connector
, Or
, SummingJunction
, VerticalContainer
, HorizontalContainer
, CardWithImageOnLeft
, CardWithImageOnTop
, CardWithImageOnRight
.
component
An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
defaultImageUrl
This property is in effect for shapes with the baseType property set to "cardWithImageOnLeft"
, "cardWithImageOnTop"
, or "cardWithImageOnRight"
.
See Also
imageHeight
This property specifies a fraction from 0 to 1 that represents the shape image height in relation to the shape height. If the imageHeight property is set to 1, the image height is equal to the shape height.
The absolute image height is calculated by multiplying the imageHeight value by the shape's height.
render
An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
template
Name | Type | Description |
---|---|---|
item |
The shapes object. |
The template content must be presented as SVG elements.
Use the customShapeTemplate property to define a common template for all shapes in the Diagram UI component.
See Also
templateHeight
This property specifies a fraction from 0 to 1 that represents the shape template height in relation to the shape height. If the templateHeight property is set to 1, the template height is equal to the shape height.
The absolute template height is calculated by multiplying the templateHeight value by the shape height.
templateWidth
This property specifies a fraction from 0 to 1 that represents the shape template width in relation to the shape width. If the templateWidth property is set to 1, the template width is equal to the shape width.
The absolute template width is calculated by multiplying the templateWidth value by the shape width.
textHeight
This property specifies a fraction from 0 to 1 that represents the height of a shape's text in relation to the shape height. If the textHeight property is set to 1, the text height is equal to the shape height.
The absolute text height is calculated by multiplying the textHeight value by the shape height.
If you have technical questions, please create a support ticket in the DevExpress Support Center.