@syncfusion/ej2-diagrams
Version:
Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.
331 lines (282 loc) • 9.06 kB
TypeScript
import { Component, Property, Complex, CollectionFactory, ChildProperty, Event, L10n, initializeCSPTemplate } from '@syncfusion/ej2-base';import { isBlazor, BlazorDragEventArgs } from '@syncfusion/ej2-base';import { Browser, EventHandler, Draggable, INotifyPropertyChanged, Collection, ModuleDeclaration } from '@syncfusion/ej2-base';import { remove, EmitType } from '@syncfusion/ej2-base';import { Accordion, AccordionItemModel, ExpandMode, ExpandEventArgs } from '@syncfusion/ej2-navigations';import { NodeModel, ConnectorModel, Node, Connector, Shape, Size, TextDecoration, ConnectorConstraints, NodeConstraints, DiagramTooltipModel, UmlClassifierShapeModel, RelationShipModel, Container } from '../diagram/index';import { Transform, SwimLane, PathModel, IPaletteExpandArgs } from '../diagram/index';import { DiagramRenderer, GroupableView, StackPanel, Margin, BpmnDiagrams, ShapeStyleModel, TextStyleModel } from '../diagram/index';import { DiagramElement, TextElement, MarginModel, Canvas, PointModel, IElement } from '../diagram/index';import { TextWrap, TextOverflow, IPaletteSelectionChangeArgs, HeaderModel, SwimLaneModel } from '../diagram/index';import { SvgRenderer } from '../diagram/rendering/svg-renderer';import { parentsUntil, createSvgElement, createHtmlElement, createMeasureElements } from '../diagram/utility/dom-util';import { removeElementsByClass, applyStyleAgainstCsp } from '../diagram/utility/dom-util';import { scaleElement, arrangeChild, groupHasType, setUMLActivityDefaults, updateDefaultValues } from '../diagram/utility/diagram-util';import { getFunction, randomId, cloneObject } from '../diagram/utility/base-util';import { getOuterBounds } from '../diagram/utility/connector';import { Point } from '../diagram/primitives/point';import { CanvasRenderer } from '../diagram/rendering/canvas-renderer';import { Rect } from '../diagram/primitives/rect';import { SymbolSizeModel, SymbolPaletteInfoModel } from '../diagram/objects/preview-model';import { Tooltip, TooltipModel } from '@syncfusion/ej2-popups';import { DiagramHtmlElement } from '../diagram/core/elements/html-element';
import {SymbolInfo} from "./symbol-palette";
import {ComponentModel} from '@syncfusion/ej2-base';
/**
* Interface for a class Palette
*/
export interface PaletteModel {
/**
* Defines the unique id of a symbol group
*
* @default ''
*/
id?: string;
/**
* Sets the height of the symbol group
*
* @aspDefaultValueIgnore
* @default undefined
*/
height?: number;
/**
* Sets whether the palette items to be expanded or not
*
* @default true
*/
expanded?: boolean;
/**
* Defines the content of the symbol group
*
* @default ''
*/
iconCss?: string;
/**
* Defines the title of the symbol group
*
* @default ''
*/
title?: string;
/**
* Defines the collection of predefined symbols
*
* @aspType object
*/
symbols?: (NodeModel | ConnectorModel)[];
}
/**
* Interface for a class SymbolDragSize
*/
export interface SymbolDragSizeModel {
/**
* Sets the drag width of the symbols
*
* @aspDefaultValueIgnore
* @default undefined
*/
width?: number;
/**
* Sets the drag height of the symbols
*
* @aspDefaultValueIgnore
* @default undefined
*/
height?: number;
}
/**
* Interface for a class SymbolPreview
*/
export interface SymbolPreviewModel {
/**
* Sets the preview width of the symbols
*
* @aspDefaultValueIgnore
* @default undefined
*/
width?: number;
/**
* Sets the preview height of the symbols
*
* @aspDefaultValueIgnore
* @default undefined
*/
height?: number;
/**
* Defines the distance to be left between the cursor and symbol
*
* @default {}
*/
offset?: PointModel;
}
/**
* Interface for a class SymbolPalette
*/
export interface SymbolPaletteModel extends ComponentModel{
/**
* Configures the key, when it pressed the symbol palette will be focused
*
* @default 'S'
*/
accessKey?: string;
/**
* Defines the width of the symbol palette
*
* @default '100%'
*/
width?: string | number;
/**
* Defines the height of the symbol palette
*
* @default '100%'
*/
height?: string | number;
/**
* Defines the collection of symbol groups
*
* @default []
*/
palettes?: PaletteModel[];
/**
* ```html
* <div id="symbolpalette"></div>
* ```
* ```typescript
* let palette: SymbolPalette = new SymbolPalette({
* expandMode: 'Multiple',
* palettes: [
* { id: 'flow', expanded: false, symbols: getFlowShapes(), title: 'Flow Shapes' },
* ],
* width: '100%', height: '100%', symbolHeight: 50, symbolWidth: 50,
* symbolPreview: { height: 100, width: 100 },
* enableSearch: true,
* getNodeDefaults: setPaletteNodeDefaults,
* symbolMargin: { left: 12, right: 12, top: 12, bottom: 12 },
* getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
* return { fit: true };
* }
* });
* palette.appendTo('#symbolpalette');
* export function getFlowShapes(): NodeModel[] {
* let flowShapes: NodeModel[] = [
* { id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' }, style: { strokeWidth: 2 } },
* { id: 'Process', shape: { type: 'Flow', shape: 'Process' }, style: { strokeWidth: 2 } },
* { id: 'Decision', shape: { type: 'Flow', shape: 'Decision' }, style: { strokeWidth: 2 } }
* ];
* return flowShapes;
* }
* function setPaletteNodeDefaults(node: NodeModel): void {
* if (node.id === 'Terminator' || node.id === 'Process') {
* node.width = 130;
* node.height = 65;
* } else {
* node.width = 50;
* node.height = 50;
* }
* node.style.strokeColor = '#3A3A3A';
* }
* ```
*
*/
getSymbolInfo?: Function | string;
/**
* Defines the size, appearance and description of a symbol
*
*/
symbolInfo?: SymbolInfo;
/**
* Defines the symbols to be added in search palette
*
* @aspDefaultValueIgnore
* @default undefined
*/
filterSymbols?: Function | string;
/**
* Defines the symbols to be added in search palette
*
*/
ignoreSymbolsOnSearch?: string[];
/**
* Defines the content of a symbol
*
* @aspDefaultValueIgnore
* @default undefined
*/
getSymbolTemplate?: Function | string;
/**
* Defines the width of the symbol
*
* @aspDefaultValueIgnore
* @default undefined
*/
symbolWidth?: number;
/**
* Defines the height of the symbol
*
* @aspDefaultValueIgnore
* @default undefined
*/
symbolHeight?: number;
/**
* Defines the space to be left around a symbol
*
* @default {left:10,right:10,top:10,bottom:10}
*/
symbolMargin?: MarginModel;
/**
* Defines whether the symbols can be dragged from palette or not
*
* @default true
*/
allowDrag?: boolean;
/**
* Defines the size and position of the symbol preview
*
* @aspDefaultValueIgnore
* @default undefined
*/
symbolPreview?: SymbolPreviewModel;
/**
* Defines the size of a drop symbol
*
* @aspDefaultValueIgnore
* @default undefined
*/
symbolDragSize?: SymbolDragSizeModel;
/**
* Enables/Disables search option in symbol palette
*
* @default false
*/
enableSearch?: boolean;
/**
* Enables/Disables animation when the palette header is expanded/collapsed
*
*/
enableAnimation?: boolean;
/**
* Defines how many palettes can be at expanded mode at a time
*
* @default 'Multiple'
* @aspDefaultValueIgnore
* @isEnumeration true
*/
expandMode?: ExpandMode;
/**
* Triggers after the selection changes in the symbol palette
*
* @event
*/
paletteSelectionChange?: EmitType<IPaletteSelectionChangeArgs>;
/**
* Triggers when the icon is expanded
*
* @event
*/
paletteExpanding?: EmitType<IPaletteExpandArgs>;
/**
* Helps to return the default properties of node
*
*/
getNodeDefaults?: Function | string;
/**
* Helps to return the default properties of node
*
*/
nodeDefaults?: NodeModel;
/**
* Helps to return the default properties of connector
*
*/
getConnectorDefaults?: Function | string;
/**
* Helps to return the default properties of connectors
*
*/
connectorDefaults?: ConnectorModel;
/**
* Helps to Customizes the node template
*
* @default undefined
* @aspType string
*/
nodeTemplate?: string | Function;
}