kre-form/dist/@kre-form/abc/bundles/kre-form-abc-src-lib-data-flow.umd.min.js

本项目由 Angular8+ 编写的表单设计器和表单应用，所有的配置都是 JSON 结构体组成,PC 端是基于 ANT 组件库封装

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@antv/x6"),require("ng-zorro-antd/message"),require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@kre-form/abc/src/lib/data-flow",["exports","@antv/x6","ng-zorro-antd/message","@angular/core","@angular/common"],e):e((t["kre-form"]=t["kre-form"]||{},t["kre-form"].abc=t["kre-form"].abc||{},t["kre-form"].abc.src=t["kre-form"].abc.src||{},t["kre-form"].abc.src.lib=t["kre-form"].abc.src.lib||{},t["kre-form"].abc.src.lib["data-flow"]={}),t.x6,t.message,t.ng.core,t.ng.common)}(this,function(t,e,r,o,n){"use strict";var l=function(){return(l=Object.assign||function l(t){for(var e,r=1,o=arguments.length;r<o;r++)for(var n in e=arguments[r])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)};function s(t,e){var r="function"==typeof Symbol&&t[Symbol.iterator];if(!r)return t;var o,n,a=r.call(t),i=[];try{for(;(void 0===e||0<e--)&&!(o=a.next()).done;)i.push(o.value)}catch(l){n={error:l}}finally{try{o&&!o.done&&(r=a["return"])&&r.call(a)}finally{if(n)throw n.error}}return i}var a=(i.prototype.ngOnInit=function(){this.graphShape(),this.grahpInit(),this.getHistoryGrahp(),this.graphEvent();for(var t=this.graph.getLeafNodes(),e=0;e<t.length;e++)if("输出"!==t[e].label){this.message.error("界面必须包含输出");break}},i.prototype.grahpInit=function(){var r=this,a=this;this.graph=new e.Graph({container:document.getElementById("graph-container"),grid:!0,history:!0,minimap:{enabled:!0,container:document.getElementById("minimap"),width:198,height:198,padding:10},mousewheel:{enabled:!0,zoomAtMousePosition:!0,modifiers:"ctrl",minScale:.5,maxScale:3},connecting:{router:"manhattan",connector:{name:"rounded",args:{radius:8}},anchor:"center",connectionPoint:"anchor",allowBlank:!1,snap:{radius:20},createEdge:function(){return new e.Shape.Edge({attrs:{line:{stroke:"#A2B1C3",strokeWidth:2,targetMarker:{name:"block",width:12,height:8}}},zIndex:0})},validateConnection:function(t){var e=t.sourceView,r=t.targetView,o=t.sourceMagnet,n=t.targetMagnet,t=(t.sourceCell,t.targetCell);if(n&&t&&(a.graph.getIncomingEdges(t)||[]).length>=r.cell.getData().out)return a.message.error("超出out数量"),!1;return e!==r&&(!(!o||"left"===o.getAttribute("port-group"))&&(!(!n||"right"===n.getAttribute("port-group"))&&!!n))}},highlighting:{magnetAdsorbed:{name:"stroke",args:{attrs:{fill:"#5F95FF",stroke:"#5F95FF"}}}},resizing:!0,rotating:!0,selecting:{enabled:!0,rubberband:!0,showNodeSelectionBox:!0},snapline:!0,keyboard:!0,clipboard:!0}),this.stencil=new e.Addon.Stencil({target:this.graph,stencilGraphWidth:200,stencilGraphHeight:180,collapsable:!0,groups:[{title:"数据处理",name:"group1"},{title:"输入输出",name:"group2"}],layoutOptions:{columns:2,columnWidth:80,rowHeight:55},validateNode:function(t){var e=a.graph.getNodes();if(0<e.length)for(var r=0;r<e.length;r++){var o=e[r];if("输出"===t.label&&"输出"===o.label)return!1}return!0},getDropNode:function(t){var e=t.size();return"输入"===t.label&&a.getModal(t.label),"输出"===t.label&&n.attr("body/fill","#ccc"),t.clone().size(1.1*e.width,1.1*e.height)}}),document.getElementById("stencil").appendChild(this.stencil.container);var o={groups:{right:{position:"right",attrs:{circle:{r:4,magnet:!0,stroke:"#5F95FF",strokeWidth:1,fill:"#fff",style:{visibility:"hidden"}}}},left:{position:"left",attrs:{circle:{r:4,magnet:!0,stroke:"#5F95FF",strokeWidth:1,fill:"#fff",style:{visibility:"hidden"}}}}},items:[{id:"port1",group:"left"},{id:"port2",group:"right"}]},t=this.graph.createNode({shape:"custom-rect",id:"in",label:"输入",ports:l({},{groups:{right:{position:"right",attrs:{circle:{r:4,magnet:!0,stroke:"#5F95FF",strokeWidth:1,fill:"#fff",style:{visibility:"hidden"}}}}},items:[{id:"port2",group:"right"}]}),data:{"in":0,out:3}}),n=this.graph.createNode({shape:"custom-rect",id:"out",label:"输出",ports:l({},{groups:{left:{position:"left",attrs:{circle:{r:4,magnet:!0,stroke:"#5F95FF",strokeWidth:1,fill:"#fff",style:{visibility:"hidden"}}}}},items:[{id:"port1",group:"left"}]}),data:{"in":2,out:2}}),i=[];this.menuList.forEach(function(t,e){i.push(r.graph.createNode({shape:"custom-rect",label:t.title,ports:l({},o),data:t.data}))}),this.stencil.load([t,n],"group1"),this.stencil.load(function(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(s(arguments[e]));return t}(i),"group2")},i.prototype.graphEvent=function(){var e=this;this.graph.bindKey("backspace",function(){var t=e.graph.getSelectedCells();t.length&&e.graph.removeCells(t)});var r=function(t,e){for(var r=0,o=t.length;r<o;r+=1)t[r].style.visibility=e?"visible":"hidden"};this.graph.on("node:mouseenter",function(){var t=document.getElementById("graph-container").querySelectorAll(".x6-port-body");r(t,!0)}),this.graph.on("node:mouseleave",function(){var t=document.getElementById("graph-container").querySelectorAll(".x6-port-body");r(t,!1)}),this.graph.on("node:click",function(t){t.cell;t=t.view.cell;console.log(t.label),"输入"===t.label?e.getModal(t.label):e.getDrawer(t.label)})},i.prototype.getHistoryGrahp=function(){var t=localStorage.getItem("graphJSON");t&&this.graph.fromJSON(JSON.parse(t))},i.prototype.getModal=function(t){this.modalEvent.emit(t)},i.prototype.getDrawer=function(t){this.drawerEvent.emit(t)},i.prototype.graphShape=function(){e.Graph.registerNode("custom-rect",{inherit:"rect",width:66,height:30,attrs:{body:{strokeWidth:1,stroke:"#eee",fill:"#fff"},text:{fontSize:12,color:"#262626"}}},!0)},i.prototype.handleZoomIn=function(){this.graph.zoom(.1),console.log(this.graph.zoom())},i.prototype.handleZoomOut=function(){this.graph.zoom(-.1)},i.prototype.handleUndo=function(){this.graph.history.undo()},i.prototype.handleRedo=function(){this.graph.history.redo()},i.prototype.handleReal=function(){this.graph.scale(1),this.graph.centerContent()},i.prototype.handleFit=function(){this.graph.zoomToFit({padding:12})},i.decorators=[{type:o.Component,args:[{selector:"data-flow",template:'<div class="wrap">\n  <div class="main">\n    <div class="edit-container">\n      <div id="container">\n        <div id="stencil"></div>\n        <div class="graph-wrap">\n          <div class="toolbar-wrap">\n            <span (click)="handleZoomIn()" class="toolbar-btn">+</span>\n            <span class="number">{{ graph.zoom() | percent }}</span>\n            <span (click)="handleZoomOut()" class="toolbar-btn">-</span>\n            <span class="line">|</span>\n            <span\n              (click)="handleUndo()"\n              [ngClass]="{ on: graph.history.canUndo() }"\n              class="toolbar-btn-off"\n              >&lt;</span\n            >\n            <span\n              (click)="handleRedo()"\n              [ngClass]="{ on: graph.history.canRedo() }"\n              class="toolbar-btn-off"\n              >&gt;</span\n            >\n\n            <span (click)="handleReal()">实际尺寸</span>\n            <span (click)="handleFit()">适应画布</span>\n          </div>\n          <div id="graph-container"></div>\n          <div id="minimap"></div>\n        </div>\n      </div>\n    </div>\n    <div class="board"></div>\n  </div>\n</div>\n',styles:[":host #stencil{width:180px;height:100%;position:relative}:host .graph-wrap{width:calc(100% - 180px)}:host .graph-wrap .toolbar-wrap{height:42px;line-height:42px}:host .graph-wrap .toolbar-wrap span{color:#111;margin:0 10px}:host .graph-wrap .toolbar-wrap .number{display:inline-block;width:42px}:host .graph-wrap .toolbar-wrap .line{color:#eee}:host .graph-wrap .toolbar-wrap .toolbar-btn{cursor:pointer;font-weight:700;padding:0 10px}:host .graph-wrap .toolbar-wrap .toolbar-btn-off{font-weight:700;padding:0 10px;cursor:default;color:#eee}:host .graph-wrap .toolbar-wrap .on{cursor:pointer;color:#111}:host .graph-wrap #graph-container{width:100%;height:100%}:host .graph-wrap #minimap{position:absolute;right:1rem;top:1rem;background-color:#bc8f8f}:host #container{display:flex;height:500px}:host ::ng-deep .x6-widget-stencil-title{display:none}:host ::ng-deep .x6-widget-stencil.collapsable>.x6-widget-stencil-content{top:0}"]}]}],i.ctorParameters=function(){return[{type:r.NzMessageService}]},i.propDecorators={menuList:[{type:o.Input}],drawerEvent:[{type:o.Output}],modalEvent:[{type:o.Output}]},i);function i(t){this.message=t,this.drawerEvent=new o.EventEmitter,this.modalEvent=new o.EventEmitter,this.data={nodes:[{id:"node1",x:40,y:40,width:80,height:40,label:"hello"},{id:"node2",x:160,y:180,width:80,height:40,label:"world"}],edges:[{source:"node1",target:"node2"}]},this.title="my-app"}p.decorators=[{type:o.NgModule,args:[{declarations:[a],imports:[n.CommonModule],exports:[a],entryComponents:[a]}]}],n=p;function p(){}t.DataFlowComponent=a,t.DataFlowModule=n,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=kre-form-abc-src-lib-data-flow.umd.min.js.map