Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
149193 | Nov 18,2019 11:06 AM UTC | Nov 21,2019 06:28 AM UTC | Angular - EJ 2 | 5 |
![]() |
Tags: Diagram |
<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 };
}
}
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.