We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<ejs-symbolpalette id="symbolpalette" [palettes]='palettes' width="100%" height="200px" [getSymbolInfo]="getSymbolInfo" [symbolHeight]=80 [symbolWidth]=120>
</ejs-symbolpalette>
public getSymbolInfo(symbol: NodeModel): SymbolInfo {
// display text for palette item
return { description: { text: symbol.id }, fit: true };
} |
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent } from '@syncfusion/ej2-angular-diagrams';
import {
Diagram, NodeModel, UndoRedo, ConnectorModel, GradientModel, LinearGradientModel, PaletteModel, SymbolInfo
} from '@syncfusion/ej2-diagrams';
Diagram.Inject(UndoRedo);
@Component({
selector: 'app-customshape',
templateUrl: './customshape.component.html',
styleUrls: ['./customshape.component.css'],
encapsulation: ViewEncapsulation.None
})
export class CustomshapeComponent {
@ViewChild('diagram')
public diagram: DiagramComponent;
// define nodes
public nodes: NodeModel[] = [
{
// id: 'ProcessOverview',
id: 'WhatisJAVA',
width: 150,
height: 60,
offsetX: 300,
offsetY: 100,
annotations: [
{
content: 'What is JAVA'
}
],
shape: {
type: 'Path',
data: 'M70 689 c0 -5 25 -76 55 -157 l56 -147 -56 -145 c-30 -79 -55 -150 -55 -157 0 -11 118 ' +
'-13 612 -11 l612 3 59 155 58 155 -58 155 -59 155 -612 3 c-430 1 -612 -1 -612 -9z'
}
},
{
id: 'ExplainOOPS',
width: 150,
height: 60,
offsetX: 300,
offsetY: 200,
annotations: [
{
content: 'Explain OOPS'
}
],
shape: {
type: 'Path',
data: 'M157 653 c-3 -5 -23 -70 -45 -146 l-40 -139 38 -133 c21 -74 41 -139 45 -145' +
' 4 -7 179 -10 529 -10 l523 0 41 144 41 143 -38 136 c-22 75 -42 141 -46 147 -7 12 -1041 15 -1048 3z'
}
},
{
id: 'Constructor',
width: 150,
height: 80,
offsetX: 300,
offsetY: 300,
annotations: [
{
content: 'What is Constructor'
}
],
shape: {
type: 'Path',
data: 'M67 653 c-4 -3 -7 -116 -7 -250 l0 -243 70 0 69 0 12 -40 12 -40 488 0 487 0' +
' 41 123 41 123 -42 124 -43 125 -37 3 c-35 3 -37 5 -40 40 l-3 37 -521 3 c-286 1 -524 -1 ' +
'-527 -5z m1033 -243 l0 -230 -510 0 -510 0 0 230 0 230 510 0 510 0 0 -230z m123 35 l38 -115 -38 -115' +
' -37 -115 -478 0 c-263 0 -478 3 -478 8 0 4 -3 17 -6 30 l-6 22 451 0 451 0 0 200 0 200 33 0 33 0 37 -115z'
}
},
];
public connectors: ConnectorModel[] = [
{
id: 'connector',
sourceID: 'WhatisJAVA',
targetID: 'ExplainOOPS'
}
];
// Initialize the flowshapes for the symbol palatte
private flowshapes: NodeModel[] = [
{
id: 'WhatisJAVA',
annotations: [
{
content: 'What is JAVA'
}
],
shape: {
type: 'Path',
data: 'M70 689 c0 -5 25 -76 55 -157 l56 -147 -56 -145 c-30 -79 -55 -150 -55 -157 0 ' +
'-11 118 -13 612 -11 l612 3 59 155 58 155 -58 155 -59 155 -612 3 c-430 1 -612 -1 -612 -9z'
}
},
{
id: 'ExplainOOPS',
annotations: [
{
content: 'Explain OOPS'
}
],
shape: {
type: 'Path',
data: 'M157 653 c-3 -5 -23 -70 -45 -146 l-40 -139 38 -133 c21 -74 41 -139 45 -145 4 -7 179' +
' -10 529 -10 l523 0 41 144 41 143 -38 136 c-22 75 -42 141 -46 147 -7 12 -1041 15 -1048 3z'
}
},
{
id: 'Constructor',
annotations: [
{
content: 'What is Constructor'
}
],
shape: {
type: 'Path',
data: 'M67 653 c-4 -3 -7 -116 -7 -250 l0 -243 70 0 69 0 12 -40 12 -40 488 0 487 0 41 123' +
' 41 123 -42 124 -43 125 -37 3 c-35 3 -37 5 -40 40 l-3 37 -521 3 c-286 1 -524 -1 -527 ' +
'-5z m1033 -243 l0 -230 -510 0 -510 0 0 230 0 230 510 0 510 0 0 -230z m123 35 l38 -115 -38 -115 -37 -115' +
' -478 0 c-263 0 -478 3 -478 8 0 4 -3 17 -6 30 l-6 22 451 0 451 0 0 200 0 200 33 0 33 0 37 -115z'
}
},
];
public palettes: PaletteModel[] = [
{
id: 'flow',
expanded: true,
symbols: this.flowshapes,
iconCss: 'shapes',
title: 'Flow Shapes'
},
];
public dragEnter(args: any): void {
args.element.width = 150;
args.element.height = 60;
}
public getSymbolInfo(symbol: NodeModel): SymbolInfo {
// display text for palette item
return { description: { text: symbol.id }, fit: true };
}
}
