import { Edge } from "cwlts/models" ; import { PluginBase } from "../plugin-base" ; import { Workflow } from "../../graph/workflow" ; export class SVGValidatePlugin extends PluginBase { private modelDisposers = [ ] ; /** Map of CSS classes attached by this plugin */ private css = { plugin : "__plugin-validate" , invalid : "__validate-invalid" } ; registerWorkflow ( workflow ) { super . registerWorkflow ( workflow ) ; this . workflow . svgRoot . classList . add ( this . css . plugin ) ; } afterModelChange ( ) { this . disposeModelListeners ( ) ; const update = this . workflow . model . on ( "connections.updated" , this . renderEdgeValidation . bind ( this ) ) ; const create = this . workflow . model . on ( "connection.create" , this . renderEdgeValidation . bind ( this ) ) ; this . modelDisposers . concat ( [ update . dispose , create . dispose ] ) ; } destroy ( ) { this . disposeModelListeners ( ) ; } afterRender ( ) { this . renderEdgeValidation ( ) ; } onEditableStateChange ( enabled ) { if ( enabled ) { this . renderEdgeValidation ( ) ; } else { this . removeClasses ( this . workflow . workflow . querySelectorAll ( ".edge" ) ) ; } } private disposeModelListeners ( ) { for ( let disposeListener of this . modelDisposers ) { disposeListener ( ) ; } this . modelDisposers = [ ] ; } private removeClasses ( edges ) { for ( const e of edges ) { e . classList . remove ( this . css . invalid ) ; } } private renderEdgeValidation ( ) { const graphEdges = this . workflow . workflow . querySelectorAll ( ".edge" ) as NodeListOf < Element > ; this . removeClasses ( graphEdges ) ; this . workflow . model . connections . forEach ( ( e ) => { if ( ! e . isValid ) { for ( const ge of graphEdges ) { const sourceNodeID = ge . getAttribute ( "data-source-connection" ) ; const destinationNodeID = ge . getAttribute ( "data-destination-connection" ) ; if ( e . source . id === sourceNodeID && e . destination . id === destinationNodeID ) { ge . classList . add ( this . css . invalid ) ; break ; } } } } ) ; } }