@progress/kendo-angular-diagrams
Version:
Kendo UI Angular diagrams component
949 lines (944 loc) • 36.2 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, } from '@angular/core';
import { Diagram, convertToDiagramModel, placeTooltip } from '@progress/kendo-diagram-common';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from './package-metadata';
import { hasObservers, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
import { PopupService } from '@progress/kendo-angular-popup';
import { NgTemplateOutlet } from '@angular/common';
import { events, loadTheme } from '@progress/kendo-diagram-common';
import { DEFAULT_NAVIGABLE_OPTIONS } from './utils';
import { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
import { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-popup";
/**
* Represents the [Kendo UI Diagram component for Angular](slug:overview_diagram).
*
* The Diagram component is used to create organizational charts, and other types of diagrams.
*
* @example
* ```html
* <kendo-diagram [shapes]="shapesData"></kendo-diagram>
* ```
*/
export class DiagramComponent {
wrapperElement;
renderer;
zone;
popupService;
viewContainer;
diagramClass = true;
/**
* Defines the default configuration options applicable to all connections.
*
*/
connectionDefaults;
/**
* Defines the connections that render between the shapes in the `Diagram` (see [Connections article](slug:diagram_connections)).
* Accepts either an array of `ConnectionOptions` or an array of any objects
* that will be mapped using the `connectionModelFields` configuration.
*
*/
connections = [];
/**
* Defines the field mapping configuration for connections data binding ([see example](slug:diagram_data_binding#field-mapping)).
* Maps source object properties to `Diagram` connection properties.
* Only used when `connections` is an array of custom objects instead of `ConnectionOptions`.
*/
connectionModelFields;
/**
* A set of settings to configure the `Diagram` behavior when the user attempts to drag, resize, or remove shapes.
* Changing the property value dynamically triggers a reinitialization of the `Diagram`.
*
* @default true
*/
editable = true;
/**
* Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](slug:diagram_layouts)).
*
*/
layout;
/**
* Defines the pannable options. Use this setting to disable `Diagram` pan or change the key that activates the pan behavior.
*
* @default true
*/
pannable = true;
/**
* Defines the `Diagram` selection options.
*
* By default, you can select shapes in the `Diagram` in one of two ways:
* - Clicking a single shape to select it and deselect any previously selected shapes.
* - Holding the `Ctrl/Cmd on MacOS` key while clicking multiple shapes to select them and any other shapes between them.
*
* Use the `selectable` configuration to allow single selection only, enable selection by drawing a rectangular area with the mouse around shapes in the canvas, or disable selection altogether.
*
* @default true
*/
selectable = true;
/**
* Defines the default configuration options applicable to all shapes.
*/
shapeDefaults;
/**
* Defines the shapes that render in the `Diagram` (see [Shapes article](slug:diagram_shapes)).
* Accepts either an array of `ShapeOptions` or an array of any objects
* that will be mapped using the `shapeModelFields` configuration.
*
*/
shapes = [];
/**
* Defines the field mapping configuration for shapes data binding ([see example](slug:diagram_data_binding#field-mapping)).
* Maps source object properties to `Diagram` shape properties.
* Only used when `shapes` is an array of custom objects instead of `ShapeOptions`.
*/
shapeModelFields;
/**
* Defines the zoom level of the `Diagram`.
*
* @default 1
*/
zoom = 1;
/**
* Defines the maximum zoom level of the `Diagram`.
*
* @default 2
*/
zoomMax = 2;
/**
* Defines the minimum zoom level of the `Diagram`.
*
* @default 0.1
*/
zoomMin = 0.1;
/**
* Defines the zoom rate of the `Diagram`.
*
* @default 0.1
*/
zoomRate = 0.1;
/**
* Enables keyboard navigation in the `Diagram`.
* When set to `true`, navigate between shapes using arrow keys.
* Alternatively, pass a `DiagramNavigationOptions` object to customize navigation behavior.
*
* @default true
*/
set navigable(_navigable) {
if (typeof _navigable === 'boolean') {
this._navigable = _navigable ? DEFAULT_NAVIGABLE_OPTIONS : { ...DEFAULT_NAVIGABLE_OPTIONS, enabled: false };
}
else {
this._navigable = _navigable;
this._navigable.enabled = isPresent(this._navigable.enabled) ? this._navigable.enabled : true;
}
this.options = { ...this.options, navigation: this.getNormalizedNavigationOptions() };
this.diagramWidget?.setOptions(this.options);
}
get navigable() {
return this._navigable;
}
/**
* Fires when a shape or connection is created or removed.
*/
change = new EventEmitter();
/**
* Fires when the user clicks on a shape or a connection.
*/
diagramClick = new EventEmitter();
/**
* Fires when the user drags an item.
*/
drag = new EventEmitter();
/**
* Fires when the user stops dragging an item.
*/
dragEnd = new EventEmitter();
/**
* Fires when the user starts dragging an item.
*/
dragStart = new EventEmitter();
/**
* Fires when the location or size of an item are changed.
*/
shapeBoundsChange = new EventEmitter();
/**
* Fires when the mouse pointer enters a shape or connection.
*/
mouseEnter = new EventEmitter();
/**
* Fires when the mouse pointer leaves a shape or connection.
*/
mouseLeave = new EventEmitter();
/**
* Fires when the user pans the `Diagram`.
*/
onPan = new EventEmitter();
/**
* Fires when the user selects one or more items.
*/
onSelect = new EventEmitter();
/**
* Fires when the `Diagram` has finished zooming out.
*/
zoomEnd = new EventEmitter();
/**
* Fires when the `Diagram` starts zooming in or out.
*/
zoomStart = new EventEmitter();
/**
* Fires when a tooltip should shown for a shape or connection.
*/
tooltipShow = new EventEmitter();
/**
* Fires when a tooltip should be hidden.
*/
tooltipHide = new EventEmitter();
/**
* @hidden
* Represents the Diagram instance, holding the core functionality of the Diagram.
*/
diagramWidget;
/**
* The currently selected items in the `Diagram`.
*/
get selection() {
return this.diagramWidget?.select();
}
/**
* The actual shapes created by the `Diagram`.
*/
get diagramShapes() {
return this.diagramWidget?.shapes;
}
/**
* The actual connections created by the `Diagram`.
*/
get diagramConnections() {
return this.diagramWidget?.connections;
}
/**
* @hidden
*/
showLicenseWatermark = false;
/**
* @hidden
*/
licenseMessage;
/**
* @hidden
*/
customTemplate;
_navigable = DEFAULT_NAVIGABLE_OPTIONS;
options = {
shapes: this.shapes,
connections: this.connections,
selectable: this.selectable,
editable: this.editable,
zoom: this.zoom,
zoomMax: this.zoomMax,
zoomMin: this.zoomMin,
zoomRate: this.zoomRate,
shapeDefaults: this.shapeDefaults,
connectionDefaults: this.connectionDefaults,
navigation: this.getNormalizedNavigationOptions()
};
/**
* Stores the converted shapes from user data.
*/
convertedShapes = [];
/**
* Stores the converted connections from user data.
*/
convertedConnections = [];
/**
* Current popup instance for tooltip.
*/
tooltipPopup;
defaultTooltipTemplate;
customTooltipTemplate;
shapeTooltipTemplate;
connectionTooltipTemplate;
/**
* @hidden
* The original data item provided by the user. Passed in the tooltip template context.
*/
dataItem;
constructor(wrapperElement, renderer, zone, popupService, viewContainer) {
this.wrapperElement = wrapperElement;
this.renderer = renderer;
this.zone = zone;
this.popupService = popupService;
this.viewContainer = viewContainer;
const isValid = validatePackage(packageMetadata);
this.licenseMessage = getLicenseMessage(packageMetadata);
this.showLicenseWatermark = shouldShowValidationUI(isValid);
}
ngOnChanges(changes) {
if (changes['shapes'] || changes['connections'] || changes['shapeModelFields'] || changes['connectionModelFields']) {
this.convertUserData();
this.options = {
...this.options,
shapes: this.convertedShapes,
connections: this.convertedConnections
};
this.loadOptions(this.options);
}
if (changes['connectionDefaults']) {
this.options.connectionDefaults = { ...this.options.connectionDefaults, ...this.connectionDefaults };
this.loadOptions(this.options);
}
if (changes['shapeDefaults']) {
this.options.shapeDefaults = { ...this.options.shapeDefaults, ...this.shapeDefaults };
this.loadOptions(this.options);
}
if (changes['editable']) {
this.options = { ...this.options, editable: this.editable };
if (this.diagramWidget) {
this.diagramWidget.destroy();
this.init();
this.bindDiagramEvents();
}
}
if (changes['zoomMax']) {
this.updateOptions('zoomMax');
}
if (changes['zoomMin']) {
this.updateOptions('zoomMin');
}
if (changes['zoomRate']) {
this.updateOptions('zoomRate');
}
if (changes['selectable']) {
this.updateOptions('selectable');
}
if (changes['layout']) {
this.updateOptions('layout');
this.diagramWidget?.layout(this.options.layout);
}
if (changes['pannable']) {
this.updateOptions('pannable');
}
if (changes['zoom']) {
this.updateOptions('zoom');
this.diagramWidget?.zoom(this.diagramWidget.options.zoom);
}
}
ngAfterViewInit() {
this.convertUserData();
this.options.shapes = this.convertedShapes;
this.options.connections = this.convertedConnections;
this.renderer.setStyle(this.wrapperElement.nativeElement, 'display', 'block');
this.init();
this.bindDiagramEvents();
}
ngOnDestroy() {
this.hideTooltip();
this.diagramWidget?.destroy();
}
/**
* Provides the current `Diagram`'s shapes and connections that can be used to create a new `Diagram` when needed.
* @returns {DiagramState} Object containing shapes and connections arrays.
*/
getState() {
return this.diagramWidget?.save();
}
/**
* Focuses the `Diagram`.
* @returns {boolean} true if focus was set successfully.
*/
focus() {
return this.diagramWidget?.focus();
}
/**
* Clears the `Diagram`.
*/
clear() {
this.diagramWidget?.clear();
}
/**
* Determines whether two shapes are connected.
* @param {Shape} Shape.
* @param {Shape} Shape.
* @returns {boolean} true if the two shapes are connected.
*/
connected(source, target) {
return this.diagramWidget?.connected(source, target);
}
/**
* Adds connection to the `Diagram`.
* @param {Connection} Connection.
* @param {boolean} Boolean.
* @returns {Connection} The newly created connection.
*/
addConnection(connection, undoable) {
const newConnection = this.diagramWidget?.addConnection(connection, undoable);
return newConnection;
}
/**
* Adds shape to the `Diagram`.
* @param {ShapeOptions | Shape | Point} If you pass a `Point`, a new Shape with default options will be created and positioned at that point.
* @param {boolean} Boolean indicating if the action should be undoable.
* @returns {Shape} The newly created shape.
*/
addShape(item, undoable) {
const newShape = this.diagramWidget?.addShape(item, undoable);
return newShape;
}
/**
* Removes shape(s) and/or connection(s) from the `Diagram`.
* @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
* @param {Boolean} Boolean indicating if the action should be undoable.
*/
remove(items, undoable) {
this.diagramWidget?.remove(items, undoable);
}
/**
* Connects two items in the `Diagram`.
* @param {Shape | Connector | Point} Shape, Shape's Connector or Point.
* @param {Shape | Connector | Point} Shape, Shape's Connector or Point.
* @param {ConnectionOptions} Connection options.
* @returns {Connection} The created connection.
*/
connect(source, target, options) {
return this.diagramWidget?.connect(source, target, options);
}
/**
* Executes the next undoable action on top of the undo stack if any.
*/
undo() {
this.diagramWidget?.undo();
}
/**
* Executes the previous undoable action on top of the redo stack if any.
*/
redo() {
this.diagramWidget?.redo();
}
/**
* Selects items on the basis of the given input.
* @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
* @param Selection options.
* @returns {(Shape | Connection)[]} Array of selected items.
*/
select(items, options) {
return this.diagramWidget?.select(items, options);
}
/**
* Selects all items in the `Diagram`.
*/
selectAll() {
this.diagramWidget?.selectAll();
}
/**
* Selects items in the specified area.
* @param {Rect} rect Rectangle area to select.
*/
selectArea(rect) {
this.diagramWidget?.selectArea(rect);
}
/**
* Deselects the specified items or all items if no item is specified.
* @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
*/
deselect(items) {
this.diagramWidget?.deselect(items);
}
/**
* Brings to front the passed items.
* @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
* @param {boolean} By default the action is undoable.
*/
bringToFront(items, undoable) {
this.diagramWidget?.toFront(items, undoable);
}
/**
* Sends to back the passed items.
* @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
* @param {boolean} By default the action is undoable.
*/
bringToBack(items, undoable) {
this.diagramWidget?.toBack(items, undoable);
}
/**
* Bring into view the passed item(s) or rectangle.
* @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
* @param {DiagramAlignOptions} controls the position of the calculated rectangle relative to the viewport.
* "Center middle" will position the items in the center. animate - controls if the pan should be animated.
*/
bringIntoView(item, options) {
this.diagramWidget?.bringIntoView(item, options);
}
/**
* Aligns shapes in the specified direction.
* @param {Direction} Direction to align shapes.
*/
alignShapes(direction) {
this.diagramWidget?.alignShapes(direction);
}
/**
* @hidden
* Pans the Diagram.
* @param {Point} Pan coordinates.
* @param {boolean} Whether to animate the pan.
* @returns {Point} Current pan position.
*/
pan(pan, animate) {
return this.diagramWidget?.pan(pan, animate);
}
/**
* Gets the current `Diagram` viewport rectangle.
* @returns {Rect} Viewport rectangle.
*/
viewport() {
return this.diagramWidget?.viewport();
}
/**
* Copies selected items to clipboard.
*/
copy() {
this.diagramWidget?.copy();
}
/**
* @hidden
* Cuts selected items to clipboard.
*/
cut() {
this.diagramWidget?.cut();
}
/**
* Pastes items from clipboard.
*/
paste() {
this.diagramWidget?.paste();
}
/**
* Gets the bounding rectangle of the given items.
* @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
* @param {boolean} Pass 'true' if you need to get the bounding box of the shapes without their rotation offset.
* @returns {Rect} Bounding rectangle.
*/
boundingBox(items, origin) {
return this.diagramWidget?.boundingBox(items, origin);
}
/**
* Converts document coordinates to view coordinates.
* @param {Point} Point in document coordinates.
* @returns {Point} Point in view coordinates.
*/
documentToView(point) {
return this.diagramWidget?.documentToView(point);
}
/**
* Converts view coordinates to document coordinates.
* @param {Point} Point in view coordinates.
* @returns {Point} Point in document coordinates.
*/
viewToDocument(point) {
return this.diagramWidget?.viewToDocument(point);
}
/**
* Converts view coordinates to model coordinates.
* @param {Point} Point in view coordinates.
* @returns {Point} Point in model coordinates.
*/
viewToModel(point) {
return this.diagramWidget?.viewToModel(point);
}
/**
* Converts model coordinates to view coordinates.
* @param {Point} Point in model coordinates.
* @returns {Point} Point in view coordinates.
*/
modelToView(point) {
return this.diagramWidget?.modelToView(point);
}
/**
* Converts model coordinates to layer coordinates.
* @param {Point} Point in model coordinates.
* @returns {Point} Point in layer coordinates.
*/
modelToLayer(point) {
return this.diagramWidget?.modelToLayer(point);
}
/**
* Converts layer coordinates to model coordinates.
* @param {Point} Point in layer coordinates.
* @returns {Point} Point in model coordinates.
*/
layerToModel(point) {
return this.diagramWidget?.layerToModel(point);
}
/**
* Converts document coordinates to model coordinates.
* @param {Point} Point in document coordinates.
* @returns {Point} Point in model coordinates.
*/
documentToModel(point) {
return this.diagramWidget?.documentToModel(point);
}
/**
* Converts model coordinates to document coordinates.
* @param {Point} Point in model coordinates.
* @returns {Point} Point in document coordinates.
*/
modelToDocument(point) {
return this.diagramWidget?.modelToDocument(point);
}
/**
* Gets a shape on the basis of its identifier.
* @param {string} The identifier of a shape.
* @returns {Shape} The shape with the specified ID.
*/
getShapeById(id) {
return this.diagramWidget?.getShapeById(id);
}
/**
* Exports the diagram's DOM visual representation for rendering or export purposes.
* Creates a clipped group containing the canvas content with proper transformations.
* @returns {Group} A drawing Group element containing the exported DOM visual
*/
exportDOMVisual() {
return this.diagramWidget?.exportDOMVisual();
}
/**
* Exports the diagram's visual representation with proper scaling based on zoom level.
* Creates a scaled group containing the main layer content.
* @returns {Group} A drawing Group element containing the exported visual with inverse zoom scaling
*/
exportVisual() {
return this.diagramWidget?.exportVisual();
}
/**
* Handles the tooltipShow event from the diagram widget.
*/
handleTooltipShow(event) {
this.hideTooltip();
const dataItem = event.item.dataItem;
const isShape = event.item.name === "Shape";
const isConnection = event.item.name === "Connection";
this.setCustomTemplate(isShape, isConnection);
const defaultsEnabled = isShape
? this.options.shapeDefaults?.tooltip?.visible
: this.options.connectionDefaults?.tooltip?.visible;
const itemTooltipEnabled = dataItem.tooltip?.visible;
const optionsArray = isShape ? this.options.shapes : this.options.connections;
const optionsItem = optionsArray?.find((item) => item.id === event.item.id);
const hasTooltipText = !!dataItem.tooltipText || !!optionsItem?.tooltipText;
if (!dataItem.tooltipText && optionsItem?.tooltipText) {
dataItem.tooltipText = optionsItem.tooltipText;
}
const shouldShowTooltip = itemTooltipEnabled !== false && hasTooltipText && (defaultsEnabled || itemTooltipEnabled);
if (shouldShowTooltip) {
this.dataItem = dataItem;
let popupContent = this.defaultTooltipTemplate;
const showCustomTemplate = Boolean((isShape && this.shapeTooltipTemplate) || (isConnection && this.connectionTooltipTemplate));
if (showCustomTemplate) {
popupContent = this.customTooltipTemplate;
}
const popupClass = this.popupClass(isShape, dataItem);
this.showTooltip(event, popupContent, popupClass);
}
}
showTooltip(event, content, popupClass) {
this.tooltipPopup = this.popupService.open({
content: content,
appendTo: this.viewContainer,
popupClass,
animate: false
});
const contentElement = this.tooltipPopup.popupElement.querySelector('.k-popup');
if (content === this.defaultTooltipTemplate) {
this.renderer.addClass(contentElement, 'k-tooltip');
}
const popupElementRect = contentElement.getBoundingClientRect();
const zoom = event.item.diagram.zoom();
const pan = event.item.diagram.pan();
const diagramRect = this.diagramWidget.element.getBoundingClientRect();
const win = this.diagramWidget.element.ownerDocument.defaultView;
const lines = this.diagramWidget.connections.map(con => con.allPoints());
const shapes = this.diagramWidget.shapes.map(shp => shp.bounds());
const pos = placeTooltip({
hovered: event.item,
mouse: event.point,
shapes: shapes,
connections: lines,
diagramRect: diagramRect,
zoom: zoom,
pan: pan,
tooltipSize: { width: popupElementRect.width, height: popupElementRect.height },
viewportBounds: new DOMRect(0, 0, win.innerWidth, win.innerHeight)
});
this.tooltipPopup.popup.instance.offset = { left: pos.left + win.scrollX, top: pos.top + win.scrollY };
this.tooltipShow.emit({ ...this.dataItem });
}
popupClass(isShape, dataItem) {
const defaultCssClass = isShape
? this.options.shapeDefaults?.tooltip?.cssClass
: this.options.connectionDefaults?.tooltip?.cssClass;
const itemCssClass = dataItem.tooltip?.cssClass;
const popupClass = defaultCssClass || itemCssClass;
return popupClass;
}
setCustomTemplate(isShape, isConnection) {
this.customTemplate = null;
if (isShape && this.shapeTooltipTemplate) {
this.customTemplate = this.shapeTooltipTemplate.templateRef;
}
if (isConnection && this.connectionTooltipTemplate) {
this.customTemplate = this.connectionTooltipTemplate.templateRef;
}
}
/**
* Handles the tooltipHide event from the diagram widget.
*/
handleTooltipHide() {
this.hideTooltip();
this.tooltipHide.emit({ ...this.dataItem });
}
/**
* Hides the current tooltip and cleans up resources.
*/
hideTooltip() {
if (this.tooltipPopup) {
this.tooltipPopup.close();
this.tooltipPopup = undefined;
}
}
activeEmitter(name) {
const emitter = this[name];
if (emitter?.emit && hasObservers(emitter)) {
return emitter;
}
}
/**
* Binds event handlers to the diagram widget.
*/
bindDiagramEvents() {
events.forEach((eventName) => {
this.diagramWidget.bind(eventName, (e) => {
if (eventName === 'click') {
eventName = 'diagramClick';
}
if (eventName === 'select') {
eventName = 'onSelect';
}
if (eventName === 'pan') {
eventName = 'onPan';
}
if (eventName === 'itemBoundsChange') {
eventName = 'shapeBoundsChange';
}
if (eventName === 'tooltipShow') {
this.zone.run(() => {
this.handleTooltipShow(e);
});
return;
}
if (eventName === 'tooltipHide') {
this.zone.run(() => {
this.handleTooltipHide();
});
return;
}
const emitter = this.activeEmitter(eventName);
if (emitter) {
this.zone.run(() => {
emitter.emit(e);
});
}
});
});
}
/**
* Converts user data to Diagram model format using field mappings.
*/
convertUserData() {
if (this.shapeModelFields || this.connectionModelFields) {
const mapping = {
shapes: {
source: () => this.shapes || [],
map: this.createFieldMapping(this.shapeModelFields)
},
connections: {
source: () => this.connections || [],
map: this.createFieldMapping(this.connectionModelFields)
}
};
const result = convertToDiagramModel({ shapes: this.shapes, connections: this.options.connections }, mapping);
this.convertedShapes = this.addDataItemProperty(result.shapes, this.shapes);
this.convertedConnections = this.addDataItemProperty(result.connections, this.connections);
}
else {
this.convertedShapes = this.addDataItemProperty(this.shapes, this.shapes);
this.convertedConnections = this.addDataItemProperty(this.connections, this.connections);
}
}
addDataItemProperty(array, sourceArray) {
if (!array || !Array.isArray(array) || array.length === 0) {
return [];
}
if (!sourceArray || !Array.isArray(sourceArray)) {
return array;
}
return array.map((item, index) => ({
...item,
dataItem: sourceArray[index]
}));
}
/**
* Creates field mapping configuration from model fields.
*/
createFieldMapping(modelFields) {
if (!modelFields) {
return {};
}
const mapping = {};
Object.keys(modelFields).forEach(key => {
const fieldName = modelFields[key];
if (fieldName) {
mapping[key] = fieldName;
}
});
return mapping;
}
init() {
if (!isDocumentAvailable()) {
return;
}
this.zone.runOutsideAngular(() => {
const theme = loadTheme(this.wrapperElement.nativeElement);
this.diagramWidget = new Diagram(this.wrapperElement.nativeElement, this.options, theme);
this.diagramWidget._createOptionElements();
this.diagramWidget.zoom(this.diagramWidget.options.zoom);
this.diagramWidget.canvas.draw();
});
}
updateOptions(prop) {
this.options[prop] = this[prop];
this.diagramWidget?.setOptions(this.options);
}
loadOptions(options) {
this.diagramWidget?.load(options);
this.diagramWidget?.layout(options);
}
getNormalizedNavigationOptions() {
return {
disabled: !this._navigable.enabled,
smallStep: this._navigable.smallStep,
largeStep: this._navigable.largeStep
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate", navigable: "navigable" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
(showLicenseWatermark) {
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
}
<ng-template #customTooltipTemplate>
<ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: dataItem }"></ng-container>
</ng-template>
<ng-template #defaultTemplate>
{{dataItem?.tooltipText}}
</ng-template>
`, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, decorators: [{
type: Component,
args: [{
standalone: true,
exportAs: 'kendoDiagram',
selector: 'kendo-diagram',
template: `
(showLicenseWatermark) {
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
}
<ng-template #customTooltipTemplate>
<ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: dataItem }"></ng-container>
</ng-template>
<ng-template #defaultTemplate>
{{dataItem?.tooltipText}}
</ng-template>
`,
imports: [WatermarkOverlayComponent, NgTemplateOutlet],
providers: [PopupService]
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.PopupService }, { type: i0.ViewContainerRef }], propDecorators: { diagramClass: [{
type: HostBinding,
args: ['class.k-diagram']
}], connectionDefaults: [{
type: Input
}], connections: [{
type: Input
}], connectionModelFields: [{
type: Input
}], editable: [{
type: Input
}], layout: [{
type: Input
}], pannable: [{
type: Input
}], selectable: [{
type: Input
}], shapeDefaults: [{
type: Input
}], shapes: [{
type: Input
}], shapeModelFields: [{
type: Input
}], zoom: [{
type: Input
}], zoomMax: [{
type: Input
}], zoomMin: [{
type: Input
}], zoomRate: [{
type: Input
}], navigable: [{
type: Input
}], change: [{
type: Output
}], diagramClick: [{
type: Output
}], drag: [{
type: Output
}], dragEnd: [{
type: Output
}], dragStart: [{
type: Output
}], shapeBoundsChange: [{
type: Output
}], mouseEnter: [{
type: Output
}], mouseLeave: [{
type: Output
}], onPan: [{
type: Output,
args: ['pan']
}], onSelect: [{
type: Output,
args: ['select']
}], zoomEnd: [{
type: Output
}], zoomStart: [{
type: Output
}], tooltipShow: [{
type: Output
}], tooltipHide: [{
type: Output
}], defaultTooltipTemplate: [{
type: ViewChild,
args: ['defaultTemplate']
}], customTooltipTemplate: [{
type: ViewChild,
args: ['customTooltipTemplate']
}], shapeTooltipTemplate: [{
type: ContentChild,
args: [ShapeTooltipTemplateDirective]
}], connectionTooltipTemplate: [{
type: ContentChild,
args: [ConnectionTooltipTemplateDirective]
}] } });