import { Options } from 'vue-class-component' ; import { ComponentBase , EJComponentDecorator , getProps , allVue , gh } from '@syncfusion/ej2-vue-base' ; import { isNullOrUndefined , getValue } from '@syncfusion/ej2-base' ; import { Diagram } from '@syncfusion/ej2-diagrams' ; import { LayersDirective , LayerDirective , LayersPlugin , LayerPlugin } from './layers.directive' ; import { CustomCursorsDirective , CustomCursorDirective , CustomCursorsPlugin , CustomCursorPlugin } from './customcursor.directive' ; import { ConnectorFixedUserHandlesDirective , ConnectorFixedUserHandleDirective , ConnectorFixedUserHandlesPlugin , ConnectorFixedUserHandlePlugin } from './connector-fixeduserhandle.directive' ; import { ConnectorAnnotationsDirective , ConnectorAnnotationDirective , ConnectorAnnotationsPlugin , ConnectorAnnotationPlugin } from './connector-annotation.directive' ; import { ConnectorsDirective , ConnectorDirective , ConnectorsPlugin , ConnectorPlugin } from './connectors.directive' ; import { NodeFixedUserHandlesDirective , NodeFixedUserHandleDirective , NodeFixedUserHandlesPlugin , NodeFixedUserHandlePlugin } from './node-fixeduserhandle.directive' ; import { NodeAnnotationsDirective , NodeAnnotationDirective , NodeAnnotationsPlugin , NodeAnnotationPlugin } from './node-annotation.directive' ; import { PortsDirective , PortDirective , PortsPlugin , PortPlugin } from './ports.directive' ; import { NodesDirective , NodeDirective , NodesPlugin , NodePlugin } from './nodes.directive' ; export const properties = [ 'isLazyUpdate' , 'addInfo' , 'annotationTemplate' , 'backgroundColor' , 'bridgeDirection' , 'commandManager' , 'connectorDefaults' , 'connectors' , 'constraints' , 'contextMenuSettings' , 'customCursor' , 'dataSourceSettings' , 'diagramSettings' , 'drawingObject' , 'enablePersistence' , 'enableRtl' , 'getConnectorDefaults' , 'getCustomCursor' , 'getCustomProperty' , 'getCustomTool' , 'getDescription' , 'getNodeDefaults' , 'height' , 'historyManager' , 'layers' , 'layout' , 'locale' , 'mode' , 'nodeDefaults' , 'nodeTemplate' , 'nodes' , 'pageSettings' , 'rulerSettings' , 'scrollSettings' , 'selectedItems' , 'serializationSettings' , 'setNodeTemplate' , 'snapSettings' , 'tool' , 'tooltip' , 'updateSelection' , 'userHandleTemplate' , 'width' , 'animationComplete' , 'click' , 'collectionChange' , 'commandExecute' , 'connectionChange' , 'contextMenuBeforeItemRender' , 'contextMenuClick' , 'contextMenuOpen' , 'created' , 'dataLoaded' , 'doubleClick' , 'dragEnter' , 'dragLeave' , 'dragOver' , 'drop' , 'expandStateChange' , 'fixedUserHandleClick' , 'historyChange' , 'historyStateChange' , 'keyDown' , 'keyUp' , 'mouseEnter' , 'mouseLeave' , 'mouseOver' , 'onImageLoad' , 'onUserHandleMouseDown' , 'onUserHandleMouseEnter' , 'onUserHandleMouseLeave' , 'onUserHandleMouseUp' , 'positionChange' , 'propertyChange' , 'rotateChange' , 'scrollChange' , 'segmentCollectionChange' , 'selectionChange' , 'sizeChange' , 'sourcePointChange' , 'targetPointChange' , 'textEdit' ] ; export const modelProps = [ ] ; export const testProp = getProps ( { props : properties } ) ; export const props = testProp [ 0 ] ; export const watch = testProp [ 1 ] ; export const emitProbs = Object . keys ( watch ) ; emitProbs . push ( 'modelchanged' ) ; for ( let props of modelProps ) { emitProbs . push ( 'update:' + props ) ; } export const isExecute = gh ? false : true ; /**
 * Represents vue Diagram Component
 * ```html
 * <ejs-diagram></ejs-diagram>
 * ```
 */ @ EJComponentDecorator ( { props : properties } , isExecute ) export class DiagramComponent extends ComponentBase { public ej2Instances : any ; public propKeys : string [ ] = properties ; public models : string [ ] = modelProps ; public hasChildDirective : boolean = true ; protected hasInjectedModules : boolean = true ; public tagMapper : { [ key ] : Object ; } = { "e-layers" : "e-layer" , "e-cursormaps" : "e-cursormap" , "e-connectors" : { "e-connector" : { "e-connector-fixeduserhandles" : "e-connector-fixeduserhandle" , "e-connector-annotations" : "e-connector-annotation" } } , "e-nodes" : { "e-node" : { "e-node-fixeduserhandles" : "e-node-fixeduserhandle" , "e-node-annotations" : "e-node-annotation" , "e-node-ports" : "e-node-port" } } } ; public tagNameMapper : Object = { "e-cursormaps" : "e-customCursor" , "e-connector-fixeduserhandles" : "e-fixedUserHandles" , "e-connector-annotations" : "e-annotations" , "e-node-fixeduserhandles" : "e-fixedUserHandles" , "e-node-annotations" : "e-annotations" , "e-node-ports" : "e-ports" } ; public isVue3 : boolean ; public templateCollection : any ; constructor ( ) { super ( arguments ) ; this . isVue3 = ! isExecute ; this . ej2Instances = new Diagram ( { } ) ; this . bindProperties ( ) ; this . ej2Instances . _setProperties = this . ej2Instances . setProperties ; this . ej2Instances . setProperties = this . setProperties ; this . ej2Instances . clearTemplate = this . clearTemplate ; } public clearTemplate ( templateNames ? ) { if ( ! templateNames ) { templateNames = Object . keys ( this . templateCollection || { } ) ; } if ( templateNames . length && this . templateCollection ) { for ( let tempName of templateNames ) { let elementCollection = this . templateCollection [ tempName ] ; if ( elementCollection && elementCollection . length ) { for ( let ele of elementCollection ) { let destroy = getValue ( '__vue__.$destroy' , ele ) ; if ( destroy ) { ele . __vue__ . $destroy ( ) ; } if ( ele . innerHTML ) { ele . innerHTML = '' ; } } delete this . templateCollection [ tempName ] ; } } } } public setProperties ( prop , muteOnChange ) { if ( this . isVue3 ) { this . models = ! this . models ? this . ej2Instances . referModels : this . models ; } if ( this . ej2Instances && this . ej2Instances . _setProperties ) { this . ej2Instances . _setProperties ( prop , muteOnChange ) ; } if ( prop && this . models && this . models . length ) { Object . keys ( prop ) . map ( ( key ) : void => { this . models . map ( ( model ) : void => { if ( ( key === model ) && ! ( /datasource/i . test ( key ) ) ) { if ( this . isVue3 ) { this . ej2Instances . vueInstance . $emit ( 'update:' + key , prop [ key ] ) ; } else { ( this as any ) . $emit ( 'update:' + key , prop [ key ] ) ; ( this as any ) . $emit ( 'modelchanged' , prop [ key ] ) ; } } } ) ; } ) ; } } public render ( createElement ) { let h = gh || createElement ; let slots = null ; if ( ! isNullOrUndefined ( ( this as any ) . $slots . default ) ) { slots = gh ? ( this as any ) . $slots . default ( ) : ( this as any ) . $slots . default ; } return h ( 'div' , slots ) ; } public add ( obj , group ? ) { return this . ej2Instances . add ( obj , group ) ; } public addChildToGroup ( group , child ) { return this . ej2Instances . addChildToGroup ( group , child ) ; } public addConnector ( obj ) { return this . ej2Instances . addConnector ( obj ) ; } public addConnectorLabels ( obj , labels ) { return this . ej2Instances . addConnectorLabels ( obj , labels ) ; } public addConstraints ( constraintsType , constraintsValue ) { return this . ej2Instances . addConstraints ( constraintsType , constraintsValue ) ; } public addCustomHistoryEntry ( entry ) { return this . ej2Instances . addCustomHistoryEntry ( entry ) ; } public addHistoryEntry ( entry ) { return this . ej2Instances . addHistoryEntry ( entry ) ; } public addLabels ( obj , labels ) { return this . ej2Instances . addLabels ( obj , labels ) ; } public addLanes ( node , lane , index ? ) { return this . ej2Instances . addLanes ( node , lane , index ) ; } public addLayer ( layer , layerObject ? ) { return this . ej2Instances . addLayer ( layer , layerObject ) ; } public addNode ( obj , group ? ) { return this . ej2Instances . addNode ( obj , group ) ; } public addNodeLabels ( obj , labels ) { return this . ej2Instances . addNodeLabels ( obj , labels ) ; } public addNodeToLane ( node , swimLane , lane ) { return this . ej2Instances . addNodeToLane ( node , swimLane , lane ) ; } public addPhases ( node , phases ) { return this . ej2Instances . addPhases ( node , phases ) ; } public addPorts ( obj , ports ) { return this . ej2Instances . addPorts ( obj , ports ) ; } public addProcess ( process , parentId ) { return this . ej2Instances . addProcess ( process , parentId ) ; } public addTextAnnotation ( annotation , node ) { return this . ej2Instances . addTextAnnotation ( annotation , node ) ; } public align ( option , objects ? , type ? ) { return this . ej2Instances . align ( option , objects , type ) ; } public bringIntoView ( bound ) { return this . ej2Instances . bringIntoView ( bound ) ; } public bringLayerForward ( layerName ) { return this . ej2Instances . bringLayerForward ( layerName ) ; } public bringToCenter ( bound ) { return this . ej2Instances . bringToCenter ( bound ) ; } public bringToFront ( ) { return this . ej2Instances . bringToFront ( ) ; } public clear ( ) { return this . ej2Instances . clear ( ) ; } public clearHistory ( ) { return this . ej2Instances . clearHistory ( ) ; } public clearSelection ( ) { return this . ej2Instances . clearSelection ( ) ; } public cloneLayer ( layerName ) { return this . ej2Instances . cloneLayer ( layerName ) ; } public copy ( ) { return this . ej2Instances . copy ( ) ; } public cut ( ) { return this . ej2Instances . cut ( ) ; } public distribute ( option , objects ? ) { return this . ej2Instances . distribute ( option , objects ) ; } public doLayout ( ) { return this . ej2Instances . doLayout ( ) ; } public drag ( obj , tx , ty ) { return this . ej2Instances . drag ( obj , tx , ty ) ; } public dragSourceEnd ( obj , tx , ty ) { return this . ej2Instances . dragSourceEnd ( obj , tx , ty ) ; } public dragTargetEnd ( obj , tx , ty ) { return this . ej2Instances . dragTargetEnd ( obj , tx , ty ) ; } public endGroupAction ( ) { return this . ej2Instances . endGroupAction ( ) ; } public exportDiagram ( options ) { return this . ej2Instances . exportDiagram ( options ) ; } public exportImage ( image , options ) { return this . ej2Instances . exportImage ( image , options ) ; } public findElementUnderMouse ( obj , position , padding ? ) { return this . ej2Instances . findElementUnderMouse ( obj , position , padding ) ; } public findObjectUnderMouse ( objects , action , inAction ) { return this . ej2Instances . findObjectUnderMouse ( objects , action , inAction ) ; } public findObjectsUnderMouse ( position , source ? ) { return this . ej2Instances . findObjectsUnderMouse ( position , source ) ; } public findTargetObjectUnderMouse ( objects , action , inAction , position , source ? ) { return this . ej2Instances . findTargetObjectUnderMouse ( objects , action , inAction , position , source ) ; } public fitToPage ( options ? ) { return this . ej2Instances . fitToPage ( options ) ; } public getActiveLayer ( ) { return this . ej2Instances . getActiveLayer ( ) ; } public getConnectorObject ( id ) { return this . ej2Instances . getConnectorObject ( id ) ; } public getCursor ( action , active ) { return this . ej2Instances . getCursor ( action , active ) ; } public getDiagramBounds ( ) { return this . ej2Instances . getDiagramBounds ( ) ; } public getDiagramContent ( styleSheets ? ) { return this . ej2Instances . getDiagramContent ( styleSheets ) ; } public getEdges ( args ) { return this . ej2Instances . getEdges ( args ) ; } public getHistoryStack ( isUndoStack ) { return this . ej2Instances . getHistoryStack ( isUndoStack ) ; } public getNodeObject ( id ) { return this . ej2Instances . getNodeObject ( id ) ; } public getObject ( name ) { return this . ej2Instances . getObject ( name ) ; } public getParentId ( id ) { return this . ej2Instances . getParentId ( id ) ; } public getTool ( action ) { return this . ej2Instances . getTool ( action ) ; } public group ( ) { return this . ej2Instances . group ( ) ; } public hideTooltip ( obj ) { return this . ej2Instances . hideTooltip ( obj ) ; } public insertData ( node ? ) { return this . ej2Instances . insertData ( node ) ; } public loadDiagram ( data ) { return this . ej2Instances . loadDiagram ( data ) ; } public moveForward ( ) { return this . ej2Instances . moveForward ( ) ; } public moveObjects ( objects , targetLayer ? ) { return this . ej2Instances . moveObjects ( objects , targetLayer ) ; } public moveObjectsUp ( node , currentLayer ) { return this . ej2Instances . moveObjectsUp ( node , currentLayer ) ; } public nudge ( direction , x ? , y ? ) { return this . ej2Instances . nudge ( direction , x , y ) ; } public pan ( horizontalOffset , verticalOffset , focusedPoint ? ) { return this . ej2Instances . pan ( horizontalOffset , verticalOffset , focusedPoint ) ; } public paste ( obj ? ) { return this . ej2Instances . paste ( obj ) ; } public print ( options ) { return this . ej2Instances . print ( options ) ; } public printImage ( image , options ) { return this . ej2Instances . printImage ( image , options ) ; } public redo ( ) { return this . ej2Instances . redo ( ) ; } public remove ( obj ? ) { return this . ej2Instances . remove ( obj ) ; } public removeConstraints ( constraintsType , constraintsValue ) { return this . ej2Instances . removeConstraints ( constraintsType , constraintsValue ) ; } public removeData ( node ? ) { return this . ej2Instances . removeData ( node ) ; } public removeLabels ( obj , labels ) { return this . ej2Instances . removeLabels ( obj , labels ) ; } public removeLane ( node , lane ) { return this . ej2Instances . removeLane ( node , lane ) ; } public removeLayer ( layerId ) { return this . ej2Instances . removeLayer ( layerId ) ; } public removePhase ( node , phase ) { return this . ej2Instances . removePhase ( node , phase ) ; } public removePorts ( obj , ports ) { return this . ej2Instances . removePorts ( obj , ports ) ; } public removeProcess ( id ) { return this . ej2Instances . removeProcess ( id ) ; } public reset ( ) { return this . ej2Instances . reset ( ) ; } public resetSegments ( ) { return this . ej2Instances . resetSegments ( ) ; } public rotate ( obj , angle , pivot ? ) { return this . ej2Instances . rotate ( obj , angle , pivot ) ; } public sameSize ( option , objects ? ) { return this . ej2Instances . sameSize ( option , objects ) ; } public saveDiagram ( ) { return this . ej2Instances . saveDiagram ( ) ; } public scale ( obj , sx , sy , pivot ) { return this . ej2Instances . scale ( obj , sx , sy , pivot ) ; } public select ( objects , multipleSelection ? ) { return this . ej2Instances . select ( objects , multipleSelection ) ; } public selectAll ( ) { return this . ej2Instances . selectAll ( ) ; } public sendBackward ( ) { return this . ej2Instances . sendBackward ( ) ; } public sendLayerBackward ( layerName ) { return this . ej2Instances . sendLayerBackward ( layerName ) ; } public sendToBack ( ) { return this . ej2Instances . sendToBack ( ) ; } public setActiveLayer ( layerName ) { return this . ej2Instances . setActiveLayer ( layerName ) ; } public setStackLimit ( stackLimit ) { return this . ej2Instances . setStackLimit ( stackLimit ) ; } public showTooltip ( obj ) { return this . ej2Instances . showTooltip ( obj ) ; } public startGroupAction ( ) { return this . ej2Instances . startGroupAction ( ) ; } public startTextEdit ( node ? , id ? ) { return this . ej2Instances . startTextEdit ( node , id ) ; } public unGroup ( ) { return this . ej2Instances . unGroup ( ) ; } public unSelect ( obj ) { return this . ej2Instances . unSelect ( obj ) ; } public undo ( ) { return this . ej2Instances . undo ( ) ; } public updateData ( node ? ) { return this . ej2Instances . updateData ( node ) ; } public updateViewPort ( ) { return this . ej2Instances . updateViewPort ( ) ; } public zoom ( factor , focusedPoint ? ) { return this . ej2Instances . zoom ( factor , focusedPoint ) ; } public zoomTo ( options ) { return this . ej2Instances . zoomTo ( options ) ; } } export const DiagramPlugin = { name : 'ejs-diagram' , install ( Vue ) { Vue . component ( DiagramPlugin . name , DiagramComponent ) ; Vue . component ( LayerPlugin . name , LayerDirective ) ; Vue . component ( LayersPlugin . name , LayersDirective ) ; Vue . component ( CustomCursorPlugin . name , CustomCursorDirective ) ; Vue . component ( CustomCursorsPlugin . name , CustomCursorsDirective ) ; Vue . component ( ConnectorPlugin . name , ConnectorDirective ) ; Vue . component ( ConnectorsPlugin . name , ConnectorsDirective ) ; Vue . component ( ConnectorFixedUserHandlePlugin . name , ConnectorFixedUserHandleDirective ) ; Vue . component ( ConnectorFixedUserHandlesPlugin . name , ConnectorFixedUserHandlesDirective ) ; Vue . component ( ConnectorAnnotationPlugin . name , ConnectorAnnotationDirective ) ; Vue . component ( ConnectorAnnotationsPlugin . name , ConnectorAnnotationsDirective ) ; Vue . component ( NodePlugin . name , NodeDirective ) ; Vue . component ( NodesPlugin . name , NodesDirective ) ; Vue . component ( NodeFixedUserHandlePlugin . name , NodeFixedUserHandleDirective ) ; Vue . component ( NodeFixedUserHandlesPlugin . name , NodeFixedUserHandlesDirective ) ; Vue . component ( NodeAnnotationPlugin . name , NodeAnnotationDirective ) ; Vue . component ( NodeAnnotationsPlugin . name , NodeAnnotationsDirective ) ; Vue . component ( PortPlugin . name , PortDirective ) ; Vue . component ( PortsPlugin . name , PortsDirective ) ; } } ;