uicore-web/packages/components/Workflow/settings.js

web ui core

/*
* date: 2021-06-02
* desc:流程组件数据控制
* edit:deleteelf
*/
const groups={
  flow:"flow",//流程起点和终点
  action:"action",//流程里程碑节点
  condition:"condition",//流程条件节点
  temp:"temp"//临时节点
}

const types= {
  startNode: 'start',//开始节点
  endNode: 'end',//结束节点
  waitNode: 'wait',//等待节点
  tempNode: 'temp',//临时节点
  nodeNode: 'node',//节点
  switchNode: 'switch',//条件节点
  mergeNode:"merge",//合并节点
  expandNode: 'expand',//多条件节点
  listNode: 'list'//列表
}

const typeNames={
  start:"开始",
  end: "结束",
  temp:"临时"
}

const enterDefault={code:"in",anchors:"Top",isTarget:true,maxConnections:-1};
const outDefault={code:"out",anchors:"Bottom",isSource:true,maxConnections:1};
const outSwitchDefault0={code:"out-0",anchors:"Left",isSource:true,maxConnections:1,
    overlays:[["Label",{location: 0.75,id: "text",cssClass: "node-item-label",visible: true,
        label:"<span class=\"node-item-title\" title=\"是\">是</span>"}]]};
const outSwitchDefault1={code:"out-1",anchors:"Right",isSource:true,maxConnections:1,
    overlays:[["Label",{location: 0.75,id: "text",cssClass: "node-item-label",visible: true,
        label:"<span class=\"node-item-title\" title=\"否\">否</span>"}]]};
const outListDefault={code:"out",anchors:"Bottom",isSource:true,maxConnections:-1};
const lineColor="#13ce66";
const selectedColor="#ffb841";
// interface Defaults {
//     Endpoint?: EndpointSpec
//     Endpoints?: [ EndpointSpec, EndpointSpec ]
//     Anchor?: AnchorSpec
//     Anchors?: [ AnchorSpec, AnchorSpec ]
//     PaintStyle?: PaintStyle
//     HoverPaintStyle?: PaintStyle
//     EndpointStyle?: PaintStyle
//     EndpointHoverStyle?: PaintStyle
//     ConnectionsDetachable?: boolean
//     ReattachConnections?: boolean
//     ConnectionOverlays?: Array<OverlaySpec>
//     Container?: any // string(selector or id) or element
//     DragOptions?: DragOptions
//     Connector?:ConnectorSpec
// }

const options= {
    LogEnabled: true,Container:"campaignCanvas",
    // ConnectionsDetachable:false,//是否允许断开连线
    Endpoint: ['Dot', {radius: 5}],//太小不太好连线
    EndpointStyle:{fill:lineColor,stroke: "transparent",strokeWidth: 2},//连接点样式
    EndpointHoverStyle: {fill:selectedColor}, //连接点悬停样式
    PaintStyle: {stroke: lineColor, strokeWidth: 2}, // 线的样式
    HoverPaintStyle:{stroke: selectedColor},//鼠标悬停时线的样式
    Connector: ["Flowchart",{stub: [20, 40],gap: 1,cornerRadius: 5,alwaysRespectStubs: true}], //stub 多长才会转弯
    ConnectionOverlays:[// 遮罩层-设置箭头
        ["Arrow",{width:10,length:10,location:0.5}],
        // ["Custom",{location: 0.5,id: "nodeTempSmall",create:(e,t)=> {  //中间插入的临时点
        //         console.log("创建自定义遮罩");
        //         e.target.dataset.target=e.targetId;
        //         e.target.dataset.source=e.sourceId;
        //         return e.target;
        //     },visible: false}],
        // ["Arrow",{width:10,length:10,location:0.75}],
        // ["Label",{location: 0.75,id: "text",cssClass: "node-item-label",visible: true}]
    ]
};

const pointStyle={

}

// interface ConnectParams {
//     uuids?: [UUID, UUID]
//     source?: ElementRef | Endpoint
//     target?: ElementRef | Endpoint
//     detachable?: boolean
//     deleteEndpointsOnDetach?: boolean
//     endpoint?: EndpointSpec
//     anchor?: AnchorSpec
//     anchors?: [AnchorSpec, AnchorSpec]
//     label?: string
//     connector?: ConnectorSpec
//     overlays?:Array<OverlaySpec>
//     cssClass?: string
//     parameters?: Record<string, any>
// }

const lineStyle={

}


const defaults= {
  groups:groups,types:types,typeNames:typeNames, options: options,lineStyle:lineStyle,pointStyle:pointStyle,
  items: [
    {nodeId: 'startNode',type: types.startNode,className: 'iconfont icon-start',nodeName: typeNames[types.startNode],
        name:"开始",id:"start",out:[outDefault],groupType: groups.flow,hidden: true},
    {nodeId: 'nodeNode', type: types.nodeNode, className: 'iconfont icon-node', nodeName: '节点',
        isSource:true,isTarget:true,maxConnections:1,
      enter:enterDefault,out:[outDefault],groupType:groups.action,bgClassName:"node"},
    // {nodeId: 'waitNode',type: types.waitNode,className: 'iconfont icon-wait',nodeName: '等待',
    //   enter:enterDefault,out:[outDefault],
    //   groupType:groups.action,hidden: true,bgClassName:"node"},
    // {nodeId: 'mergeNode',type: types.mergeNode,className: 'iconfont icon-merge',nodeName: '合并',isTarget:true,isSource:true,
    //   enter:enterDefault,out:[outDefault],
    //   groupType: groups.action,hidden: true,bgClassName:"node"},
    {nodeId: 'switchNode', type: types.switchNode, className: 'iconfont icon-bool', nodeName: '判定节点',
        isTarget:true,isSource:true,maxConnections:2,
      enter:enterDefault,out:[outSwitchDefault0,outSwitchDefault1],
      groupType:groups.condition,bgClassName:"node-square"},
    {nodeId: 'listNode', type: types.listNode, className: 'iconfont icon-expand', nodeName: '并行分支',
        isTarget:true,isSource:true,maxConnections:-1,
      enter:enterDefault,out:[outListDefault],
      groupType: groups.condition,bgClassName:"node-square"},
    {nodeId: 'endNode', type: types.endNode, className: 'iconfont icon-end', nodeName:  typeNames[types.endNode],
        name:"结束",id:"end",enter:enterDefault,groupType: groups.flow,bgClassName:"node node-circle",hidden: true},
    {nodeId: 'tempNode', type: types.tempNode, className: 'iconfont step-temp', nodeName:  typeNames[types.tempNode],
      groupType:groups.temp,hidden: true}
   ]
}
export default defaults;