Loading...
Loading...
Compare original and translation side by side
references/*.mdreferences/*.mdimport { Component, Inject } from '@angular/core';
import { DiagramComponent, DiagramModule } from '@syncfusion/ej2-angular-diagrams';
@Component({
selector: 'app-diagram',
template: `
<ejs-diagram #diagram
width="100%"
height="600px"
[nodes]="nodes"
[connectors]="connectors">
</ejs-diagram>
`,
standalone: true,
imports: [DiagramModule]
})
export class DiagramComponent {
nodes = [
{
id: 'start',
width: 80,
height: 80,
offsetX: 150,
offsetY: 150,
shape: { type: 'Flow', shape: 'Terminator' },
annotations: [{ content: 'START' }]
},
{
id: 'process',
width: 100,
height: 80,
offsetX: 350,
offsetY: 150,
shape: { type: 'Flow', shape: 'Process' },
annotations: [{ content: 'Process' }]
},
{
id: 'end',
width: 80,
height: 80,
offsetX: 550,
offsetY: 150,
shape: { type: 'Flow', shape: 'Terminator' },
annotations: [{ content: 'END' }]
}
];
connectors = [
{ id: 'connector1', sourceID: 'start', targetID: 'process' },
{ id: 'connector2', sourceID: 'process', targetID: 'end' }
];
}import { Component, Inject } from '@angular/core';
import { DiagramComponent, DiagramModule } from '@syncfusion/ej2-angular-diagrams';
@Component({
selector: 'app-diagram',
template: `
<ejs-diagram #diagram
width="100%"
height="600px"
[nodes]="nodes"
[connectors]="connectors">
</ejs-diagram>
`,
standalone: true,
imports: [DiagramModule]
})
export class DiagramComponent {
nodes = [
{
id: 'start',
width: 80,
height: 80,
offsetX: 150,
offsetY: 150,
shape: { type: 'Flow', shape: 'Terminator' },
annotations: [{ content: 'START' }]
},
{
id: 'process',
width: 100,
height: 80,
offsetX: 350,
offsetY: 150,
shape: { type: 'Flow', shape: 'Process' },
annotations: [{ content: 'Process' }]
},
{
id: 'end',
width: 80,
height: 80,
offsetX: 550,
offsetY: 150,
shape: { type: 'Flow', shape: 'Terminator' },
annotations: [{ content: 'END' }]
}
];
connectors = [
{ id: 'connector1', sourceID: 'start', targetID: 'process' },
{ id: 'connector2', sourceID: 'process', targetID: 'end' }
];
}import { Component, Inject } from '@angular/core';
import { BpmnDiagrams, Swimlane, SymbolPalette } from '@syncfusion/ej2-angular-diagrams';
Diagram.Inject(BpmnDiagrams, SymbolPalette)import { Component, Inject } from '@angular/core';
import { BpmnDiagrams, Swimlane, SymbolPalette } from '@syncfusion/ej2-angular-diagrams';
Diagram.Inject(BpmnDiagrams, SymbolPalette)getNodeDefaults(node: NodeModel): NodeModel {
return {
shape: { type: 'Flow', shape: 'Process' },
style: { fill: '#90EE90', stroke: '#228B22' }
};
}getNodeDefaults(node: NodeModel): NodeModel {
return {
shape: { type: 'Flow', shape: 'Process' },
style: { fill: '#90EE90', stroke: '#228B22' }
};
}dataSourceSettings: {
id: 'id',
parentId: 'parentId',
dataSource: yourDataArray
}dataSourceSettings: {
id: 'id',
parentId: 'parentId',
dataSource: yourDataArray
}diagram.selectionChange((args) => {
console.log('Selected:', args.newItems);
});diagram.selectionChange((args) => {
console.log('Selected:', args.newItems);
});diagram.exportDiagram({format: 'PNG', fileName: 'diagram'});diagram.exportDiagram({format: 'PNG', fileName: 'diagram'});const diagramData = diagram.saveDiagram();
localStorage.setItem('diagram', JSON.stringify(diagramData));const diagramData = diagram.saveDiagram();
localStorage.setItem('diagram', JSON.stringify(diagramData));// ❌ WRONG - Shape type should be 'Flow', not 'FlowShape'
shape: { type: 'FlowShape', shape: 'Process' }// ✅ CORRECT - Use 'Flow' for flowchart shapes
shape: { type: 'Flow', shape: 'Process' }
// ✅ CORRECT - Use 'Bpmn' for BPMN shapes
shape: { type: 'Bpmn', shape: 'Task' }
// ✅ CORRECT - Use 'Basic' for basic geometries
shape: { type: 'Basic', shape: 'Rectangle' }// ❌ 错误 - 形状类型应为'Flow'，而非'FlowShape'
shape: { type: 'FlowShape', shape: 'Process' }// ✅ 正确 - 流程图形状使用'Flow'
shape: { type: 'Flow', shape: 'Process' }
// ✅ 正确 - BPMN形状使用'Bpmn'
shape: { type: 'Bpmn', shape: 'Task' }
// ✅ 正确 - 基础几何形状使用'Basic'
shape: { type: 'Basic', shape: 'Rectangle' }// ❌ Swimlane is NOT an injectable module
Diagram.Inject(BpmnDiagrams, Swimlane);// ✅ Only inject verified documented modules
Diagram.Inject(BpmnDiagrams);📄 Verify injectable modules in:,references/bpmn-diagrams.mdreferences/swimlanes.md
// ❌ Swimlane不是可注入模块
Diagram.Inject(BpmnDiagrams, Swimlane);// ✅ 仅注入已验证的文档化模块
Diagram.Inject(BpmnDiagrams);📄 请在以下文档中验证可注入模块：,references/bpmn-diagrams.mdreferences/swimlanes.md
whiteSpacewhiteSpace// ❌ whiteSpace is NOT a valid TextStyleModel property
annotations: [{
content: 'Multi\nLine',
style: { fontSize: 11, whiteSpace: 'pre-wrap' } // ❌
}]// ✅ Use \n in content — valid style props:
// fontSize, color, bold, italic, fontFamily,
// opacity, strokeColor, strokeWidth, fill
annotations: [{
content: 'Multi\nLine',
style: { fontSize: 11, color: '#000', bold: true }
}]📄 Verify annotation style properties in:references/labels-and-annotations.md
// ❌ whiteSpace不是TextStyleModel的有效属性
annotations: [{
content: 'Multi\nLine',
style: { fontSize: 11, whiteSpace: 'pre-wrap' } // ❌
}]// ✅ 在content中使用\n换行 — 有效的样式属性包括：
// fontSize, color, bold, italic, fontFamily,
// opacity, strokeColor, strokeWidth, fill
annotations: [{
content: 'Multi\nLine',
style: { fontSize: 11, color: '#000', bold: true }
}]📄 请在以下文档中验证注释样式属性：references/labels-and-annotations.md
updateNode()updateNode()// ❌ updateNode() does not exist in EJ2 Diagram API
this.diagram.updateNode('nodeId', { style: { fill: '#ff0000' } });// ✅ getObject() → mutate property → dataBind()
const node = this.diagram.getObject('nodeId') as NodeModel;
if (node) {
node.style!.fill = '#ff0000';
this.diagram.dataBind(); // ← always required after mutation
}📄 Verify runtime APIs in:references/nodes.md
// ❌ EJ2 Diagram API中不存在updateNode()方法
this.diagram.updateNode('nodeId', { style: { fill: '#ff0000' } });// ✅ 使用getObject() → 修改属性 → dataBind()
const node = this.diagram.getObject('nodeId') as NodeModel;
if (node) {
node.style!.fill = '#ff0000';
this.diagram.dataBind(); // ← 修改后必须调用此方法
}📄 请在以下文档中验证运行时API：references/nodes.md
// ❌ WRONG - Missing proper data source setup
nodes = this.employeeData; // Direct array assignment// ✅ CORRECT - Use dataSourceSettings with proper mapping
dataSourceSettings: {
id: 'EmployeeID',
parentId: 'ReportingManagerID',
dataSource: this.employeeData
}
// Then configure setNodeTemplate for rendering:
setNodeTemplate(obj: NodeModel): void {
// obj contains the data row
obj.width = 100;
obj.height = 60;
obj.annotations = [{
content: obj.data.EmployeeName
}];
}// ❌ 错误 - 缺少正确的数据源设置
nodes = this.employeeData; // 直接赋值数组// ✅ 正确 - 使用dataSourceSettings并配置映射
dataSourceSettings: {
id: 'EmployeeID',
parentId: 'ReportingManagerID',
dataSource: this.employeeData
}
// 然后配置setNodeTemplate用于渲染：
setNodeTemplate(obj: NodeModel): void {
// obj包含数据行
obj.width = 100;
obj.height = 60;
obj.annotations = [{
content: obj.data.EmployeeName
}];
}// ❌ WRONG - Using traditional decorator without standalone
@Component({
selector: 'app-diagram',
templateUrl: './component.html',
imports: [DiagramModule]
// Missing: standalone: true
})// ✅ CORRECT - Mark as standalone component
@Component({
selector: 'app-diagram',
templateUrl: './component.html',
standalone: true, // ← Add this
imports: [CommonModule, DiagramModule],
})// ❌ 错误 - 使用传统装饰器但未设置standalone
@Component({
selector: 'app-diagram',
templateUrl: './component.html',
imports: [DiagramModule]
// 缺失: standalone: true
})// ✅ 正确 - 标记为独立组件
@Component({
selector: 'app-diagram',
templateUrl: './component.html',
standalone: true, // ← 添加此属性
imports: [CommonModule, DiagramModule],
})connectorChangesconnectorChanges