JavaScript/jQuery Diagram - customShapes
Provide access to an array of custom shapes.
Use the customShapes option to extend a collection of built-in shapes with custom shapes.
Use the toolbox option 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
Specifies the shape background image's fractional height.
This option specifies a fraction from 0 to 1 that represents the shape background image height in relation to the shape height. If the backgroundImageHeight option 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
Specifies the shape background image's left offset.
This option specifies a fractional left offset of a shape background image toward the shape width. If the backgroundImageLeft option 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.
backgroundImageTop
Specifies the shape background image's top offset.
This option specifies the top offset (in fractions) of a shape's background image in relation to the shape's height. If the backgroundImageTop option 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
Specifies the shape background image's URL.
The backgroundImageUrl option is not in effect if the baseType is specified.
See Also
backgroundImageWidth
Specifies the shape background image's fractional width.
This option specifies a fraction from 0 to 1 that represents the shape background image width in relation to the shape width. If the backgroundImageWidth option 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.
When the baseType option is specified, the backgroundImageUrl option is not in effect.
defaultHeight
Specifies the initial height of the shape.
The units option specifies the measurement unit.
defaultImageUrl
Specifies the shape image's URL.
This option is in effect for shapes with the baseType option set to "cardWithImageOnLeft"
, "cardWithImageOnTop"
, or "cardWithImageOnRight"
.
See Also
defaultWidth
Specifies the initial width of the shape.
The units option specifies the measurement unit.
imageHeight
Specifies the shape image's fractional height.
This option specifies a fraction from 0 to 1 that represents the shape image height in relation to the shape height. If the imageHeight option 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.
imageLeft
Specifies the shape image's left offset.
This option specifies a fractional left offset of a shape image toward the shape width. If the imageLeft option is set to 0, the image's left edge matches the shape's left edge.
The absolute offset is calculated by multiplying the imageLeft value by the shape's width.
imageTop
Specifies the shape image's top offset.
This option specifies the top offset (in fractions) of a shape's image in relation to the shape's height. If the imageTop option is set to 0, the image's top edge matches the shape's top edge.
The absolute offset is calculated by multiplying the imageTop value by the shape's height.
imageWidth
Specifies the shape image's fractional width.
This option specifies a fraction from 0 to 1 that represents the shape image width in relation to the shape width. If the imageWidth option is set to 1, the image width is equal to the shape width.
The absolute image width is calculated by multiplying the imageWidth value by the shape width.
textHeight
Specifies the shape text container's height.
This option 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 option 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.
textLeft
Specifies the shape text's left offset.
This option specifies the shape text's left offset (in fractions) in relation to the shape width. If the textLeft option is set to 0, the text's left edge matches the shape's left edge.
The absolute offset is calculated by multiplying the textLeft value by the shape width.
textTop
Specifies the shape text's top offset.
This option specifies the shape text's top offset (in fractions) in relation to the shape height. If the textTop option is set to 0, the text's top edge matches the shape's top edge.
The absolute offset is calculated by multiplying the textTop value by the shape height.
textWidth
Specifies the shape text container's width.
This option specifies a fraction from 0 to 1 that represents the shape text's width in relation to the shape width. If the textWidth option is set to 1, the text width is equal to the shape width.
The absolute text width is calculated by multiplying the textWidth value by the shape width.
If you have technical questions, please create a support ticket in the DevExpress Support Center.