rev:流程引擎
This commit is contained in:
@@ -1,7 +0,0 @@
|
||||
|
||||
[
|
||||
java:S2184N"@Cast one of the operands of this addition operation to a "long".(<28><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||||
N
|
||||
java:S1117="8Rename "page" which hides the field declared at line 33.(Ҿ<><D2BE>
|
||||
S
|
||||
java:S1117N"8Rename "page" which hides the field declared at line 33.(<28><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||||
@@ -1,3 +0,0 @@
|
||||
|
||||
?
|
||||
java:S1948 ")Make "content" transient or serializable.(ޑ<><DE91>
|
||||
26
wms_pro/hd/.idea/sonarlint/issuestore/index.pb
generated
26
wms_pro/hd/.idea/sonarlint/issuestore/index.pb
generated
@@ -29,10 +29,6 @@ gnladmin-system/src/main/java/org/nl/wms/system_manage/service/coderule/impl/Sys
|
||||
lnladmin-system/src/main/java/org/nl/wms/system_manage/controller/permission/SysDataPermissionController.java,1/1/11978d8ffa97bb119d9c27e2ba034b73db067e4b
|
||||
p
|
||||
@nladmin-system/src/main/java/org/nl/common/enums/QueryTEnum.java,f/b/fb1fedd5a3547392fa64608ed6291c9931a5ae3d
|
||||
m
|
||||
=nladmin-system/src/main/java/org/nl/common/TableDataInfo.java,a/8/a85494925056ae5a2edbd2ec7eee55976b36080f
|
||||
w
|
||||
Gnladmin-system/src/main/java/org/nl/common/domain/entity/PageQuery.java,4/c/4c2e7c33185348f635f5a9dbcc6943e1266cd690
|
||||
_
|
||||
/nladmin-system/src/main/java/org/nl/AppRun.java,1/0/10e40d67bd7d0818c5483704f020703d1bef8378
|
||||
<EFBFBD>
|
||||
@@ -113,25 +109,5 @@ Hnladmin-system/src/main/java/org/nl/config/satoken/SaTokenConfigure.java,9/e/9
|
||||
^nladmin-system/src/main/java/org/nl/wms/system_manage/controller/param/SysParamController.java,7/b/7b8bf4a0135d0713328837025e2a155860cb8beb
|
||||
<EFBFBD>
|
||||
cnladmin-system/src/main/java/org/nl/wms/system_manage/controller/login/AuthorizationController.java,3/c/3c48d8ac2d509e895a423ffda0e2e802719133e1
|
||||
<EFBFBD>
|
||||
Znladmin-system/src/main/java/org/nl/wms/flow_manage/flow/service/model/dto/ModelQuery.java,9/1/91fd50fd8729292d9e298d85ba01a6b5af8593fa
|
||||
<EFBFBD>
|
||||
lnladmin-system/src/main/java/org/nl/wms/base_manage/class_standard/controller/BmClassStandardController.java,1/6/1682613e5ad252f692c7fe9869e05ba6e993ec0b
|
||||
<EFBFBD>
|
||||
fnladmin-system/src/main/java/org/nl/wms/flow_manage/flow/service/model/impl/ActDeModelServiceImpl.java,5/c/5c10ac01b36058f8bd7ded010f6280af0a23920f
|
||||
<EFBFBD>
|
||||
^nladmin-system/src/main/java/org/nl/wms/flow_manage/flow/service/model/IActDeModelService.java,8/e/8e8e6084896058ef5d6e32aeaa325a4d807bd299
|
||||
<EFBFBD>
|
||||
fnladmin-system/src/main/java/org/nl/wms/config_manage/form_struc/controller/BmFormStrucController.java,0/4/04a9b66d50a0df59977636c2584c0b33c3c80690
|
||||
<EFBFBD>
|
||||
Znladmin-system/src/main/java/org/nl/wms/flow_manage/flow/service/model/dao/ActDeModel.java,3/e/3eca87912d8f4d89cb48ed4d3a065400c26eb414
|
||||
<EFBFBD>
|
||||
cnladmin-system/src/main/java/org/nl/wms/flow_manage/flow/controller/model/ActDeModelController.java,f/6/f6b31b91b229f78f8ac36ece953db50bf6d81854
|
||||
<EFBFBD>
|
||||
fnladmin-system/src/main/java/org/nl/wms/flow_manage/flow/controller/execution/ExecutionController.java,0/e/0e30069a5751c50d7cf828ec3c27e091f8565818
|
||||
<EFBFBD>
|
||||
Xnladmin-system/src/main/java/org/nl/wms/flow_manage/flow/service/enums/TaskTypeEnum.java,9/a/9a80ba3c6d691004cb168b6bef614f1678af32d6
|
||||
<EFBFBD>
|
||||
bnladmin-system/src/main/java/org/nl/wms/flow_manage/flow/service/execution/dao/ActRuExecution.java,1/d/1d97c53dde4069e95a2a9b5e87f1839ef118d3b2
|
||||
<EFBFBD>
|
||||
wnladmin-system/src/main/java/org/nl/wms/flow_manage/flow/framework/engine/behavior/impl/StartEventActivityBehavior.java,6/2/62bba69557651d0ef8689854cf0192b608958ca8
|
||||
lnladmin-system/src/main/java/org/nl/wms/base_manage/class_standard/controller/BmClassStandardController.java,1/6/1682613e5ad252f692c7fe9869e05ba6e993ec0b
|
||||
@@ -1,15 +1,28 @@
|
||||
package org.nl.wms.flow_manage.flow.controller.execution;
|
||||
|
||||
import cn.dev33.satoken.annotation.SaIgnore;
|
||||
import cn.hutool.core.date.DateUtil;
|
||||
import com.alibaba.fastjson.JSONObject;
|
||||
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
|
||||
import org.nl.common.TableDataInfo;
|
||||
import org.nl.common.domain.entity.PageQuery;
|
||||
import org.nl.common.utils.IdUtil;
|
||||
import org.nl.common.utils.SecurityUtils;
|
||||
import org.nl.wms.flow_manage.flow.service.deployment.IActReProcdefService;
|
||||
import org.nl.wms.flow_manage.flow.service.deployment.dao.ActReProcdef;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.IActRuExecutionService;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.IFlowOperationService;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.dao.ActRuExecution;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.dto.ExecutionQuery;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.dto.StartProcessInstanceVo;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.http.HttpStatus;
|
||||
import org.springframework.http.ResponseEntity;
|
||||
import org.springframework.validation.annotation.Validated;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
import java.io.File;
|
||||
import java.util.Arrays;
|
||||
|
||||
/*
|
||||
* @author ZZQ
|
||||
@@ -23,14 +36,61 @@ public class ExecutionController {
|
||||
|
||||
@Autowired
|
||||
IFlowOperationService flowOperationService;
|
||||
@Autowired
|
||||
private IActRuExecutionService executionService;
|
||||
@Autowired
|
||||
private IActReProcdefService procdefService;
|
||||
|
||||
@GetMapping
|
||||
public ResponseEntity<Object> getAll(ExecutionQuery query, PageQuery page) {
|
||||
return new ResponseEntity<>(executionService.getAll(query, page), HttpStatus.OK);
|
||||
}
|
||||
|
||||
@PostMapping
|
||||
public ResponseEntity<Object> add(@Validated @RequestBody ActRuExecution dto) {
|
||||
dto.setCreate_id(SecurityUtils.getCurrentUserId());
|
||||
dto.setCreate_time(DateUtil.now());
|
||||
dto.setProc_inst_id(IdUtil.getStringId());
|
||||
executionService.save(dto);
|
||||
return new ResponseEntity<>(HttpStatus.OK);
|
||||
}
|
||||
|
||||
@PutMapping
|
||||
public ResponseEntity<Object> update(@Validated @RequestBody ActRuExecution dto) {
|
||||
dto.setStatus("30");
|
||||
dto.setUpdate_time(DateUtil.now());
|
||||
executionService.updateById(dto);
|
||||
return new ResponseEntity<>(HttpStatus.OK);
|
||||
}
|
||||
|
||||
@DeleteMapping
|
||||
public ResponseEntity<Object> delete(@RequestBody String[] ids) {
|
||||
if (ids.length > 0) {
|
||||
executionService.removeByIds(Arrays.asList(ids));
|
||||
}
|
||||
return new ResponseEntity<>(HttpStatus.OK);
|
||||
}
|
||||
|
||||
@PostMapping(value = "/open")
|
||||
public ResponseEntity<Object> getBpmnByModelId(JSONObject form){
|
||||
public ResponseEntity<Object> getBpmnByModelId(JSONObject form) {
|
||||
StartProcessInstanceVo startProcessInstanceVo = form.toJavaObject(StartProcessInstanceVo.class);
|
||||
return new ResponseEntity<>(flowOperationService.startFormFlow(startProcessInstanceVo), HttpStatus.OK);
|
||||
}
|
||||
|
||||
@GetMapping(value = "/confirm")
|
||||
public ResponseEntity<Object> flowConfirm(String inst_id){
|
||||
public ResponseEntity<Object> flowConfirm(String inst_id) {
|
||||
return new ResponseEntity<>(flowOperationService.flowConfirm(inst_id), HttpStatus.OK);
|
||||
}
|
||||
|
||||
@GetMapping(value = "/queryByParentId/{id}")
|
||||
public ResponseEntity<Object> queryByParentId(@PathVariable String id) {
|
||||
LambdaQueryWrapper<ActRuExecution> lqw = new LambdaQueryWrapper<>();
|
||||
lqw.eq(ActRuExecution::getParent_id, id);
|
||||
return new ResponseEntity<>(executionService.list(lqw), HttpStatus.OK);
|
||||
}
|
||||
|
||||
@GetMapping(value = "/getDeploymentById/{id}")
|
||||
public ResponseEntity<Object> getDeploymentById(@PathVariable String id) {
|
||||
return new ResponseEntity<>(procdefService.getById(id), HttpStatus.OK);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@ import org.nl.common.TableDataInfo;
|
||||
import org.nl.common.domain.entity.PageQuery;
|
||||
import org.nl.common.utils.FileUtil;
|
||||
import org.nl.common.utils.IdUtil;
|
||||
import org.nl.common.utils.MapOf;
|
||||
import org.nl.common.utils.SecurityUtils;
|
||||
import org.nl.wms.flow_manage.flow.framework.engine.cmd.CommandExecutor;
|
||||
import org.nl.wms.flow_manage.flow.framework.engine.cmd.unify.impl.StartInstanceCmd;
|
||||
@@ -70,6 +69,7 @@ public class ActDeModelController {
|
||||
|
||||
@PutMapping
|
||||
public ResponseEntity<Object> update(@Validated @RequestBody ActDeModel dto) {
|
||||
dto.setStatus("30");
|
||||
dto.setUpdated_id(SecurityUtils.getCurrentUserId());
|
||||
dto.setUpdate_time(DateUtil.now());
|
||||
modelService.updateById(dto);
|
||||
@@ -129,6 +129,12 @@ public class ActDeModelController {
|
||||
return new ResponseEntity<>(null, HttpStatus.OK);
|
||||
}
|
||||
|
||||
@PostMapping("/publish")
|
||||
public ResponseEntity<Object> publish(@Validated @RequestBody ActDeModel dto) {
|
||||
modelService.publish(dto);
|
||||
return new ResponseEntity<>(HttpStatus.OK);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
package org.nl.wms.flow_manage.flow.service.execution;
|
||||
|
||||
import org.nl.common.domain.entity.PageQuery;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.dao.ActRuExecution;
|
||||
import com.baomidou.mybatisplus.extension.service.IService;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.dto.ExecutionQuery;
|
||||
|
||||
/**
|
||||
* <p>
|
||||
@@ -13,4 +15,5 @@ import com.baomidou.mybatisplus.extension.service.IService;
|
||||
*/
|
||||
public interface IActRuExecutionService extends IService<ActRuExecution> {
|
||||
|
||||
Object getAll(ExecutionQuery query, PageQuery page);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,10 @@ import com.alibaba.fastjson.JSONObject;
|
||||
import com.baomidou.mybatisplus.annotation.TableField;
|
||||
import com.baomidou.mybatisplus.annotation.TableId;
|
||||
import com.baomidou.mybatisplus.annotation.TableName;
|
||||
|
||||
import java.io.Serializable;
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
|
||||
import com.baomidou.mybatisplus.extension.handlers.FastjsonTypeHandler;
|
||||
import lombok.Data;
|
||||
@@ -21,7 +24,7 @@ import lombok.EqualsAndHashCode;
|
||||
*/
|
||||
@Data
|
||||
@EqualsAndHashCode(callSuper = false)
|
||||
@TableName(value = "act_ru_execution",autoResultMap = true)
|
||||
@TableName(value = "act_ru_execution", autoResultMap = true)
|
||||
public class ActRuExecution implements Serializable {
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
@@ -97,5 +100,11 @@ public class ActRuExecution implements Serializable {
|
||||
@TableField(typeHandler = FastjsonTypeHandler.class)
|
||||
private JSONObject form_data;
|
||||
|
||||
@TableField(exist = false)
|
||||
private List<ActRuExecution> children = new ArrayList<>();
|
||||
|
||||
@TableField(exist = false)
|
||||
private Boolean hasChildren = false;
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
package org.nl.wms.flow_manage.flow.service.execution.dto;
|
||||
|
||||
import lombok.Data;
|
||||
import org.nl.common.domain.entity.BaseQuery;
|
||||
import org.nl.common.domain.entity.QParam;
|
||||
import org.nl.common.enums.QueryTEnum;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.dao.ActRuExecution;
|
||||
import org.nl.wms.flow_manage.flow.service.model.dao.ActDeModel;
|
||||
|
||||
/*
|
||||
* @author ZZQ
|
||||
* @Date 2023/5/4 19:49
|
||||
*/
|
||||
@Data
|
||||
public class ExecutionQuery extends BaseQuery<ActRuExecution> {
|
||||
|
||||
|
||||
private String search;
|
||||
|
||||
@Override
|
||||
public void paramMapping() {
|
||||
super.doP.put("name", QParam.builder().k(new String[]{"name"}).type(QueryTEnum.LK).build());
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,11 +1,21 @@
|
||||
package org.nl.wms.flow_manage.flow.service.execution.impl;
|
||||
|
||||
import cn.hutool.core.collection.CollectionUtil;
|
||||
import com.baomidou.mybatisplus.core.conditions.Wrapper;
|
||||
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
|
||||
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
|
||||
import org.nl.common.TableDataInfo;
|
||||
import org.nl.common.domain.entity.PageQuery;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.dao.ActRuExecution;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.dao.mapper.ActRuExecutionMapper;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.IActRuExecutionService;
|
||||
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
|
||||
import org.nl.wms.flow_manage.flow.service.execution.dto.ExecutionQuery;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* <p>
|
||||
* 流程实例表 服务实现类
|
||||
@@ -17,4 +27,22 @@ import org.springframework.stereotype.Service;
|
||||
@Service
|
||||
public class ActRuExecutionServiceImpl extends ServiceImpl<ActRuExecutionMapper, ActRuExecution> implements IActRuExecutionService {
|
||||
|
||||
@Override
|
||||
public Object getAll(ExecutionQuery query, PageQuery page) {
|
||||
//判断是否存在子实例
|
||||
LambdaQueryWrapper<ActRuExecution> lqw = new LambdaQueryWrapper<>();
|
||||
lqw.isNull(ActRuExecution::getParent_id);
|
||||
Page<ActRuExecution> executionPage = this.page(page.build(), lqw);
|
||||
List<ActRuExecution> records = executionPage.getRecords();
|
||||
for (ActRuExecution record : records) {
|
||||
LambdaQueryWrapper<ActRuExecution> lambdaQueryWrapper = new LambdaQueryWrapper<>();
|
||||
lambdaQueryWrapper.eq(ActRuExecution::getParent_id, record.getProc_inst_id());
|
||||
List<ActRuExecution> list = this.list(lambdaQueryWrapper);
|
||||
if (CollectionUtil.isNotEmpty(list)) {
|
||||
record.setHasChildren(true);
|
||||
record.setChildren(list);
|
||||
}
|
||||
}
|
||||
return TableDataInfo.build(executionPage);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,4 +14,5 @@ import com.baomidou.mybatisplus.extension.service.IService;
|
||||
public interface IActDeModelService extends IService<ActDeModel> {
|
||||
|
||||
|
||||
void publish(ActDeModel dto);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,18 @@
|
||||
package org.nl.wms.flow_manage.flow.service.model.impl;
|
||||
|
||||
import cn.hutool.core.date.DateUtil;
|
||||
import cn.hutool.core.lang.Assert;
|
||||
import org.nl.common.utils.IdUtil;
|
||||
import org.nl.common.utils.SecurityUtils;
|
||||
import org.nl.wms.flow_manage.flow.service.deployment.dao.ActReProcdef;
|
||||
import org.nl.wms.flow_manage.flow.service.deployment.dao.mapper.ActReProcdefMapper;
|
||||
import org.nl.wms.flow_manage.flow.service.model.dao.ActDeModel;
|
||||
import org.nl.wms.flow_manage.flow.service.model.dao.mapper.ActDeModelMapper;
|
||||
import org.nl.wms.flow_manage.flow.service.model.IActDeModelService;
|
||||
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
import org.springframework.transaction.annotation.Transactional;
|
||||
|
||||
/**
|
||||
* <p>
|
||||
@@ -18,4 +24,32 @@ import org.springframework.stereotype.Service;
|
||||
*/
|
||||
@Service
|
||||
public class ActDeModelServiceImpl extends ServiceImpl<ActDeModelMapper, ActDeModel> implements IActDeModelService {
|
||||
|
||||
|
||||
@Autowired(required = false)
|
||||
private ActDeModelMapper modelMapper;
|
||||
@Autowired(required = false)
|
||||
private ActReProcdefMapper procdefMapper;
|
||||
|
||||
@Transactional(rollbackFor = Exception.class)
|
||||
@Override
|
||||
public void publish(ActDeModel dto) {
|
||||
Assert.notNull(dto, "参数不能为空!");
|
||||
//往实例表中添加数据
|
||||
dto.setStatus("10");
|
||||
dto.setVersion(dto.getVersion() + 1);
|
||||
dto.setUpdated_id(SecurityUtils.getCurrentUserId());
|
||||
dto.setUpdate_time(DateUtil.now());
|
||||
modelMapper.updateById(dto);
|
||||
|
||||
ActReProcdef procdef = new ActReProcdef();
|
||||
procdef.setDeployment_id(IdUtil.getStringId());
|
||||
procdef.setName(dto.getName());
|
||||
procdef.setModel_key(dto.getModel_key());
|
||||
procdef.setVersion(String.valueOf(dto.getVersion()));
|
||||
procdef.setDescription(dto.getDescription());
|
||||
procdef.setModel_editor_json(dto.getModel_editor_json());
|
||||
procdef.setStatus("1");
|
||||
procdefMapper.insert(procdef);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="logicFlowVisible"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
:height="'100%'"
|
||||
title="流程预览"
|
||||
:width="'100%'"
|
||||
:before-close="handleClose">
|
||||
<div class="logic-flow-view">
|
||||
<!-- 画布 -->
|
||||
<div id="LF-view3" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LogicFlow from '@logicflow/core'
|
||||
import '@logicflow/core/dist/style/index.css'
|
||||
import '@logicflow/extension/lib/style/index.css'
|
||||
import {
|
||||
registerStart,
|
||||
registerEnd,
|
||||
registerServerTask,
|
||||
registerScriptTask,
|
||||
registerSendTask,
|
||||
registerFormTask,
|
||||
registerGatewayTask,
|
||||
registerstorInvTask,
|
||||
registerExecuteFlow,
|
||||
sequence,
|
||||
registerSubProcess,
|
||||
} from '../../view_flow/registerNode'
|
||||
|
||||
//const demoData = require('./data.json')
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
logicFlowVisible: false, // 控制流程设计器对话框的可见性
|
||||
lf: null, // LogicFlow实例
|
||||
showAddPanel: false,
|
||||
addPanelStyle: {
|
||||
top: 0,
|
||||
left: 0
|
||||
},
|
||||
id: null,
|
||||
initNodes: {"nodes": [], "edges": []},
|
||||
nodeData: null,
|
||||
addClickNode: null,
|
||||
clickNode: null,
|
||||
dialogVisible: false,
|
||||
graphData: null,
|
||||
dataVisible: false,
|
||||
config: {
|
||||
background: {
|
||||
color: '#f7f9ff'
|
||||
},
|
||||
grid: {
|
||||
size: 10,
|
||||
visible: false
|
||||
},
|
||||
keyboard: {
|
||||
enabled: true
|
||||
},
|
||||
style: {
|
||||
rect: {
|
||||
radius: 6,
|
||||
},
|
||||
edgeText: { // 边文本样式
|
||||
background: {
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
edgeTextDraggable: true,
|
||||
guards: {
|
||||
beforeClone(data) {
|
||||
console.log('beforeClone', data)
|
||||
return true
|
||||
},
|
||||
beforeDelete(data) {
|
||||
// 可以根据data数据判断是否允许删除，允许返回true,不允许返回false
|
||||
// 文档： http://logic-flow.org/guide/basic/keyboard.html#%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E5%88%A0%E9%99%A4%E6%88%96%E8%80%85%E6%8B%B7%E8%B4%9D%E8%A1%8C%E4%B8%BA
|
||||
console.log('beforeDelete', data)
|
||||
// _this.$message('不允许删除', 'error')
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
moveData: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化并显示流程设计
|
||||
showLogicFlowDesigner(json, row) {
|
||||
this.logicFlowVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$_initLf(json, row)
|
||||
});
|
||||
},
|
||||
$_initLf(json, row) {
|
||||
// LogicFlow.use(Menu)
|
||||
// LogicFlow.use(Snapshot)
|
||||
const lf = new LogicFlow({container: document.querySelector('#LF-view3'), editable: false,})
|
||||
this.lf = lf
|
||||
// 设置主题
|
||||
lf.setTheme({
|
||||
circle: {
|
||||
r: 20,
|
||||
stroke: '#000000',
|
||||
outlineColor: '#88f',
|
||||
strokeWidth: 1
|
||||
},
|
||||
rect: {
|
||||
outlineColor: '#88f',
|
||||
strokeWidth: 1
|
||||
},
|
||||
polygon: {
|
||||
strokeWidth: 1
|
||||
},
|
||||
polyline: {
|
||||
stroke: '#000000',
|
||||
hoverStroke: '#000000',
|
||||
selectedStroke: '#000000',
|
||||
outlineColor: '#88f',
|
||||
strokeWidth: 1
|
||||
},
|
||||
nodeText: {
|
||||
color: '#000000'
|
||||
},
|
||||
edgeText: {
|
||||
color: '#000000',
|
||||
background: {
|
||||
fill: '#f7f9ff'
|
||||
}
|
||||
}
|
||||
})
|
||||
this.$_registerNode(json, row)
|
||||
},
|
||||
// 自定义
|
||||
$_registerNode(json, row) {
|
||||
this.lf.register(registerStart)
|
||||
this.lf.register(registerEnd)
|
||||
this.lf.register(registerServerTask)
|
||||
this.lf.register(registerScriptTask)
|
||||
this.lf.register(registerSendTask)
|
||||
this.lf.register(registerstorInvTask)
|
||||
this.lf.register(registerFormTask)
|
||||
this.lf.register(registerExecuteFlow)
|
||||
this.lf.register(registerGatewayTask)
|
||||
this.lf.register(registerSubProcess)
|
||||
this.lf.register(sequence)
|
||||
this.lf.setDefaultEdgeType("sequenceFlow");
|
||||
this.$_render(json, row)
|
||||
},
|
||||
/**
|
||||
*这个是加载中间面板数据
|
||||
* 其中 demoData中的nodes是节点信息
|
||||
* edges是连接线信息
|
||||
*/
|
||||
$_render(json, row) {
|
||||
// this.id = row.id
|
||||
if (!json) {
|
||||
this.lf.render(this.initNodes)
|
||||
} else {
|
||||
this.lf.render(JSON.parse(json))
|
||||
}
|
||||
const nodeModel = this.lf.getNodeModelById(row.activity_id);
|
||||
nodeModel.setStyle("stroke", "red")
|
||||
},
|
||||
closeDialog() {
|
||||
this.$data.dialogVisible = false
|
||||
},
|
||||
handleClose() {
|
||||
this.logicFlowVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logic-flow-view {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#LF-view3 {
|
||||
outline: none;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function add(data) {
|
||||
return request({
|
||||
url: 'api/flow',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function del(ids) {
|
||||
return request({
|
||||
url: 'api/flow',
|
||||
method: 'delete',
|
||||
data: ids
|
||||
})
|
||||
}
|
||||
|
||||
export function edit(data) {
|
||||
return request({
|
||||
url: 'api/flow',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function getTypes(data) {
|
||||
return request({
|
||||
url: '/api/bmFormStruc/getTypes',
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function getTaskTypes() {
|
||||
return request({
|
||||
url: '/api/flow/getTaskTypes',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getStrategyList() {
|
||||
return request({
|
||||
url: '/api/strategy/decisionColumns',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function publish(data) {
|
||||
return request({
|
||||
url: 'api/flow/publish',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function queryByParentId(id) {
|
||||
return request({
|
||||
url: '/api/bpmnExecution/queryByParentId/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getDeploymentById(id) {
|
||||
return request({
|
||||
url: '/api/bpmnExecution/getDeploymentById/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default {add, edit, del, getTypes, getTaskTypes, getStrategyList, publish, queryByParentId, getDeploymentById}
|
||||
188
wms_pro/qd/src/views/wms/flow_manage/act/execution/index.vue
Normal file
188
wms_pro/qd/src/views/wms/flow_manage/act/execution/index.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="query.search"
|
||||
clearable
|
||||
style="width: 300px"
|
||||
size="mini"
|
||||
placeholder="输入模型名称"
|
||||
prefix-icon="el-icon-search"
|
||||
class="filter-item"
|
||||
/>
|
||||
<rrOperation/>
|
||||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
|
||||
<crudOperation :permission="permission"/>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
|
||||
<el-form-item label="父流程id" prop="parent_id">
|
||||
<el-input v-model="form.parent_id" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前实例对应版本" prop="deployment_id">
|
||||
<el-input v-model="form.deployment_id" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前实例执行节点" prop="activity_id">
|
||||
<el-input v-model="form.activity_id" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="实例状态" prop="status">
|
||||
<el-input v-model="form.status" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务类型" prop="form_type">
|
||||
<el-input v-model="form.form_type" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务数据" prop="form_data">
|
||||
<el-input v-model="form.form_data" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:load="load"
|
||||
lazy
|
||||
:data="crud.data"
|
||||
row-key="proc_inst_id"
|
||||
border
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
size="small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="proc_inst_id" label="当前流程"/>
|
||||
<el-table-column prop="parent_id" label="父流程"/>
|
||||
<el-table-column prop="deployment_id" label="当前实例版本"/>
|
||||
<el-table-column prop="activity_id" label="当前实例节点"/>
|
||||
<el-table-column prop="activity_name" label="当前实例节点名称"/>
|
||||
<el-table-column prop="is_active" label="启用"/>
|
||||
<el-table-column prop="status" label="实例状态"/>
|
||||
<el-table-column prop="remark" show-overflow-tooltip show-tooltip-when-overflow label="备注"/>
|
||||
<el-table-column prop="form_id" label="业务主键"/>
|
||||
<el-table-column prop="form_type" label="业务类型"/>
|
||||
<el-table-column prop="form_data" show-overflow-tooltip show-tooltip-when-overflow label="业务数据"/>
|
||||
<el-table-column prop="create_id" label="创建人" width="135"/>
|
||||
<el-table-column prop="create_time" label="创建时间" width="135"/>
|
||||
<el-table-column prop="update_time" label="修改时间" width="135"/>
|
||||
<el-table-column
|
||||
v-permission="['admin','actDeModel:edit','actDeModel:del']"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="300px"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="viewClick(scope.row)" type="text" icon="el-icon-thumb" size="small">预览</el-button>
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination/>
|
||||
</div>
|
||||
<ViewCurrentFlowDesigner ref="viewCurrentFlowDesigner"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import curdExecution from './curdExecution'
|
||||
import CRUD, {presenter, header, form, crud} from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import ViewCurrentFlowDesigner from './ViewCurrentFlowDesigner';
|
||||
|
||||
const defaultForm = {
|
||||
proc_inst_id: null,
|
||||
parent_id: null,
|
||||
deployment_id: null,
|
||||
activity_id: null,
|
||||
activity_name: null,
|
||||
is_active: null,
|
||||
status: null,
|
||||
remark: null,
|
||||
create_id: null,
|
||||
create_time: null,
|
||||
update_time: null,
|
||||
form_id: null,
|
||||
form_type: null,
|
||||
form_data: null
|
||||
}
|
||||
export default {
|
||||
dicts: [],
|
||||
name: 'Execution',
|
||||
components: {pagination, crudOperation, rrOperation, udOperation, ViewCurrentFlowDesigner},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
cruds() {
|
||||
return CRUD({
|
||||
title: '流程实例',
|
||||
url: 'api/bpmnExecution',
|
||||
optShow: {
|
||||
add: true,
|
||||
reset: true
|
||||
},
|
||||
idField: 'proc_inst_id',
|
||||
sort: 'proc_inst_id,desc',
|
||||
crudMethod: {...curdExecution}
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formTypes: [],
|
||||
permission: {},
|
||||
modelJson: '',
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '不能为空', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
return true
|
||||
},
|
||||
viewClick(row) {
|
||||
curdExecution.getDeploymentById(row.deployment_id).then(res => {
|
||||
this.$refs.viewCurrentFlowDesigner.showLogicFlowDesigner(res.model_editor_json,row);
|
||||
})
|
||||
},
|
||||
//logicflow怎么设置当前节点的颜色
|
||||
load(tree, treeNode, resolve) {
|
||||
console.log(tree)
|
||||
console.log(treeNode)
|
||||
setTimeout(() => {
|
||||
curdExecution.queryByParentId(tree.proc_inst_id).then(res => {
|
||||
console.log(res)
|
||||
resolve(res)
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -46,4 +46,12 @@ export function getStrategyList() {
|
||||
})
|
||||
}
|
||||
|
||||
export default {add, edit, del, getTypes, getTaskTypes, getStrategyList}
|
||||
export function publish(data) {
|
||||
return request({
|
||||
url: 'api/flow/publish',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export default {add, edit, del, getTypes, getTaskTypes, getStrategyList, publish}
|
||||
|
||||
@@ -77,6 +77,18 @@
|
||||
<el-table-column prop="model_key" label="模型KEY" width="150"/>
|
||||
<el-table-column prop="description" label="模型描述"/>
|
||||
<el-table-column prop="model_comment" label="模型注释"/>
|
||||
<el-table-column prop="status" label="发布状态">
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
v-for="(item, index) in publishStatusList"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
v-if="scope.row.status == item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="version" label="版本号"/>
|
||||
<el-table-column prop="model_editor_json" label="模型数据" width="300" show-overflow-tooltip
|
||||
show-tooltip-when-overflow/>
|
||||
@@ -94,8 +106,11 @@
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button :disabled="publishDisabled(scope.row)" @click="publishClick(scope.row)" type="text"
|
||||
icon="el-icon-arrow-up" size="small">发布
|
||||
</el-button>
|
||||
<el-button @click="viewClick(scope.row)" type="text" icon="el-icon-thumb" size="small">预览</el-button>
|
||||
<el-button @click="handleClick(scope.row)" type="text" icon="el-icon-thumb" size="small">设计</el-button>
|
||||
<el-button @click="handleClick(scope.row)" type="text" icon="el-icon-set-up" size="small">设计</el-button>
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
@@ -131,6 +146,7 @@ const defaultForm = {
|
||||
create_time: null,
|
||||
update_id: null,
|
||||
update_time: null,
|
||||
status: null,
|
||||
version: null,
|
||||
thumbnail: null,
|
||||
model_editor_json: null,
|
||||
@@ -160,6 +176,16 @@ export default {
|
||||
return {
|
||||
formTypes: [],
|
||||
permission: {},
|
||||
publishStatusList: [
|
||||
{
|
||||
value: "30",
|
||||
label: "未发布"
|
||||
},
|
||||
{
|
||||
value: "10",
|
||||
label: "发布"
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '不能为空', trigger: 'blur'}
|
||||
@@ -182,10 +208,22 @@ export default {
|
||||
viewClick(row) {
|
||||
this.$refs.viewFlowDesigner.showLogicFlowDesigner(row);
|
||||
},
|
||||
publishClick(row) {
|
||||
curdActDeModel.publish(row).then(res => {
|
||||
this.crud.notify('发布成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
this.crud.toQuery()
|
||||
})
|
||||
},
|
||||
getTypes() {
|
||||
curdActDeModel.getTypes().then(res => {
|
||||
this.formTypes = res
|
||||
})
|
||||
},
|
||||
publishDisabled(row) {
|
||||
if (row.status !== '30') {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -248,13 +248,13 @@ export default {
|
||||
console.log(JSON.stringify(data))
|
||||
},
|
||||
$_LfEvent() {
|
||||
this.lf.on('node:click', ({data}) => {
|
||||
console.log('node:click', data)
|
||||
this.lf.on('node:dbclick', ({data}) => {
|
||||
console.log('node:dbclick', data)
|
||||
this.$data.clickNode = data
|
||||
this.$data.dialogVisible = true
|
||||
})
|
||||
this.lf.on('edge:click', ({data}) => {
|
||||
console.log('edge:click', data)
|
||||
this.lf.on('edge:dbclick', ({data}) => {
|
||||
console.log('edge:dbclick', data)
|
||||
this.$data.clickNode = data
|
||||
this.$data.dialogVisible = true
|
||||
})
|
||||
|
||||
@@ -36,6 +36,19 @@
|
||||
</el-select>
|
||||
<el-input v-else v-model="formData.skipExpression"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单据类型" prop="form_type">
|
||||
<el-select clearable v-model="formData.form_type" placeholder="请选择" style="width: 370px;">
|
||||
<el-option
|
||||
v-for="item in formTypes"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.category === 'class'" label="配置参数" prop="auxParam">
|
||||
<el-input v-model="formData.auxParam"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="documentation">
|
||||
<el-input v-model="formData.documentation"></el-input>
|
||||
</el-form-item>
|
||||
@@ -70,11 +83,13 @@ export default {
|
||||
}
|
||||
this.getTaskTypes()
|
||||
this.getStrategyList()
|
||||
this.getTypes()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
taskTypes: [],
|
||||
formTypes: [],
|
||||
strategyList: [],
|
||||
formData: {
|
||||
id: '',
|
||||
@@ -82,7 +97,9 @@ export default {
|
||||
category: '',
|
||||
skipExpression: null,
|
||||
passNode: true,
|
||||
documentation: ''
|
||||
form_type: '',
|
||||
documentation: '',
|
||||
auxParam: ''
|
||||
},
|
||||
rules: {
|
||||
id: [
|
||||
@@ -97,6 +114,9 @@ export default {
|
||||
passNode: [
|
||||
{required: true, message: '自动执行不能为空', trigger: 'blur'}
|
||||
],
|
||||
auxParam: [
|
||||
{required: true, message: 'auxParam不能为空', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -132,7 +152,12 @@ export default {
|
||||
curdActDeModel.getStrategyList().then(res => {
|
||||
this.strategyList = res
|
||||
})
|
||||
}
|
||||
},
|
||||
getTypes() {
|
||||
curdActDeModel.getTypes().then(res => {
|
||||
this.formTypes = res
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -30,7 +30,7 @@ import {
|
||||
registerExecuteFlow,
|
||||
sequence,
|
||||
registerSubProcess,
|
||||
} from './registerNode'
|
||||
} from '../view_flow/registerNode'
|
||||
|
||||
//const demoData = require('./data.json')
|
||||
|
||||
|
||||
@@ -26,6 +26,7 @@ class ResizableEllipseModel extends EllipseResize.model {
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.text.draggable = true;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -19,6 +19,7 @@ class ResizableRectModel extends RectResize.model {
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.text.draggable = true;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -19,6 +19,8 @@ class ResizableRectModel extends RectResize.model {
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.text.draggable = true;
|
||||
this.text.editable = false
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -19,6 +19,8 @@ class ResizableDiamondModel extends DiamondResize.model {
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.text.draggable = true;
|
||||
this.text.editable = false
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -19,6 +19,8 @@ class ResizableRectModel extends RectResize.model {
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.text.draggable = true;
|
||||
this.text.editable = false
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -19,6 +19,8 @@ class ResizableRectModel extends RectResize.model {
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.text.draggable = true;
|
||||
this.text.editable = false
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -19,6 +19,8 @@ class ResizableRectModel extends RectResize.model {
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.text.draggable = true;
|
||||
this.text.editable = false
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -26,6 +26,8 @@ class ResizableEllipseModel extends EllipseResize.model {
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.text.draggable = true;
|
||||
this.text.editable = false
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10,12 +10,14 @@ class MyGroupModel extends GroupNode.model {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 50
|
||||
x: data.x + 10,
|
||||
y: data.y + 10
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.isRestrict = false;
|
||||
this.isRestrict = true;
|
||||
this.text.editable = false
|
||||
this.text.draggable = true
|
||||
this.resizable = true;
|
||||
this.foldable = true;
|
||||
this.width = 500;
|
||||
@@ -23,12 +25,14 @@ class MyGroupModel extends GroupNode.model {
|
||||
this.foldedWidth = 50;
|
||||
this.foldedHeight = 50;
|
||||
}
|
||||
|
||||
getAddableOutlineStyle() {
|
||||
const style = super.getAddableOutlineStyle();
|
||||
style.stroke = "#AEAFAE";
|
||||
style.strokeDasharray = "3 3";
|
||||
return style;
|
||||
}
|
||||
|
||||
getNodeStyle() {
|
||||
const style = super.getNodeStyle();
|
||||
style.stroke = "black";
|
||||
|
||||
@@ -19,6 +19,8 @@ class ResizableRectModel extends RectResize.model {
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.text.draggable = true;
|
||||
this.text.editable = false
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
|
||||
|
||||
class SequenceModel extends PolylineEdgeModel {
|
||||
constructor(data, graphModel) {
|
||||
super(data, graphModel);
|
||||
this.text.editable = false
|
||||
}
|
||||
setAttributes() {
|
||||
this.offset = 20;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="connect">
|
||||
<p>{{name}}</p>
|
||||
<p>您好，请问需要买保险吗？</p>
|
||||
<div class="button-list">
|
||||
<button @mousedown.stop="done(1)">有保险了</button>
|
||||
<button @mousedown.stop="done(2)">不需要</button>
|
||||
<button @mousedown.stop="done(3)">需要</button>
|
||||
<button @mousedown.stop="done(4)">特殊</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: String
|
||||
},
|
||||
methods: {
|
||||
done(type) {
|
||||
this.$emit('select-button', type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.connect {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #FFF;
|
||||
border: 1px solid #9a9a9b;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
.connect p {
|
||||
margin: 0;
|
||||
}
|
||||
.button-list {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
import registerStart from './registerStart'
|
||||
import registerEnd from './registerEnd'
|
||||
import registerSubProcess from './registerSubProcess'
|
||||
import registerConnect from './registerConnect'
|
||||
import registerServerTask from './registerServerTask'
|
||||
import registerScriptTask from './registerScriptTask'
|
||||
import registerSendTask from './registerSendTask'
|
||||
import registerFormTask from './registerFormTask'
|
||||
import registerGatewayTask from './registerGatewayTask'
|
||||
import registerstorInvTask from './registerstorInvTask'
|
||||
import sequence from './sequence'
|
||||
import registerExecuteFlow from './registerExecuteFlow'
|
||||
|
||||
export {
|
||||
registerStart,
|
||||
registerEnd,
|
||||
registerSubProcess,
|
||||
registerConnect,
|
||||
registerServerTask,
|
||||
registerScriptTask,
|
||||
registerSendTask,
|
||||
registerFormTask,
|
||||
registerGatewayTask,
|
||||
registerstorInvTask,
|
||||
registerExecuteFlow,
|
||||
sequence
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import Vue from 'vue'
|
||||
import Connect from './Connect.vue'
|
||||
|
||||
export default function registerConnect (lf) {
|
||||
lf.register('connect', ({ HtmlNode, HtmlNodeModel }) => {
|
||||
class ConnectNode extends HtmlNode {
|
||||
shouldUpdate() {
|
||||
const { properties } = this.getAttributes();
|
||||
if (this.currrentProperties && this.currrentProperties === JSON.stringify(properties)) return false;
|
||||
this.currrentProperties = JSON.stringify(properties)
|
||||
return true;
|
||||
}
|
||||
setHtml(rootEl) {
|
||||
// todo: 和react不一样，还没有找到合适的利用vue内置的diff算法来计算节点是否需要更新。
|
||||
if (!this.shouldUpdate()) return;
|
||||
const { properties } = this.getAttributes();
|
||||
const el = document.createElement('div');
|
||||
rootEl.innerHTML = '';
|
||||
rootEl.appendChild(el);
|
||||
const Profile = Vue.extend({
|
||||
render: function (h) {
|
||||
return h(Connect, {
|
||||
props: {
|
||||
name: properties.name
|
||||
},
|
||||
on: {
|
||||
'select-button': (type) => {
|
||||
console.log('select-button', type)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
new Profile().$mount(el)
|
||||
}
|
||||
}
|
||||
class ConnectNodeModel extends HtmlNodeModel {
|
||||
setAttributes() {
|
||||
this.text.editable = false;
|
||||
const width = 300;
|
||||
const height = 150;
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
|
||||
this.anchorsOffset = [
|
||||
[width / 2, 0],
|
||||
[0, height / 2],
|
||||
[-width / 2, 0],
|
||||
[0, -height/2],
|
||||
]
|
||||
}
|
||||
}
|
||||
return {
|
||||
view: ConnectNode,
|
||||
model: ConnectNodeModel
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
const NODE_COLOR = '#9932CC'
|
||||
export default function registerDownload(lf) {
|
||||
lf.register('download', ({ PolygonNode, PolygonNodeModel, h }) => {
|
||||
class Node extends PolygonNode {
|
||||
getIconShape () {
|
||||
return h(
|
||||
'svg',
|
||||
{
|
||||
x: 14,
|
||||
y: 13,
|
||||
width: 23,
|
||||
height: 23,
|
||||
viewBox: '0 0 1024 1024'
|
||||
},
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: NODE_COLOR,
|
||||
d: 'M831.513034 319.863005h-95.945189c-17.662265 0-31.980365 14.3181-31.980365 31.980365 0 17.662265 14.3181 31.980365 31.980365 31.980366h64.218604c17.520025 0 31.722492 14.202467 31.722492 31.722492V863.786065c0 17.520025-14.202467 31.722492-31.722492 31.722492H159.66442c-17.520025 0-31.722492-14.202467-31.722493-31.722492V415.546228c0-17.520025 14.202467-31.722492 31.722493-31.722492h64.218603c17.662265 0 31.980365-14.3181 31.980366-31.980366 0-17.662265-14.3181-31.980365-31.980366-31.980365H127.937834c-35.322483 0-63.956637 28.634154-63.956637 63.956637v511.693008c0 35.322483 28.634154 63.956637 63.956637 63.956638h703.5752c35.322483 0 63.956637-28.634154 63.956638-63.956638V383.819642c0-35.32146-28.634154-63.956637-63.956638-63.956637z'
|
||||
}
|
||||
),
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: NODE_COLOR,
|
||||
d: 'M310.382073 521.036817c-12.388145-12.388145-32.473599-12.388145-44.862767 0l-0.364297 0.364297c-12.388145 12.388145-12.388145 32.473599 0 44.862767l190.186573 190.186574c5.818519 6.813173 14.465456 11.137665 24.126491 11.137664h0.515746c9.662057 0 18.307971-4.324492 24.12649-11.137664L694.296883 566.263881c12.388145-12.388145 12.388145-32.473599 0-44.862767l-0.364297-0.364297c-12.388145-12.388145-32.473599-12.388145-44.862767 0L511.706311 658.400325V95.743598c0-17.520025-14.202467-31.722492-31.722492-31.722492h-0.515746c-17.520025 0-31.722492 14.202467-31.722493 31.722492v562.656727L310.382073 521.036817z'
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
getShape () {
|
||||
const attributes = this.getAttributes()
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
x,
|
||||
y,
|
||||
fill,
|
||||
fillOpacity,
|
||||
strokeWidth,
|
||||
stroke,
|
||||
strokeOpacity,
|
||||
points
|
||||
} = attributes
|
||||
const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
|
||||
const pointsPath = points.map(point => point.join(',')).join(' ')
|
||||
return h(
|
||||
'g',
|
||||
{
|
||||
transform
|
||||
},
|
||||
[
|
||||
h(
|
||||
'polygon',
|
||||
{
|
||||
points: pointsPath,
|
||||
fill,
|
||||
stroke,
|
||||
strokeWidth,
|
||||
strokeOpacity,
|
||||
fillOpacity
|
||||
}
|
||||
),
|
||||
this.getIconShape()
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
class Model extends PolygonNodeModel {
|
||||
constructor (data, graphModel) {
|
||||
data.text = {
|
||||
value: (data.text && data.text.value) || '',
|
||||
x: data.x,
|
||||
y: data.y + 50
|
||||
}
|
||||
super(data, graphModel)
|
||||
const lenght = 25
|
||||
this.points = [
|
||||
[lenght, 0],
|
||||
[lenght * 2, lenght],
|
||||
[lenght, lenght * 2],
|
||||
[0, lenght]
|
||||
]
|
||||
this.stroke = NODE_COLOR
|
||||
}
|
||||
}
|
||||
return {
|
||||
view: Node,
|
||||
model: Model
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
import {EllipseResize} from "@logicflow/extension";
|
||||
import {h} from '@logicflow/core'
|
||||
|
||||
class ResizableEllipseModel extends EllipseResize.model {
|
||||
getNodeStyle() {
|
||||
const style = super.getNodeStyle();
|
||||
style.fill = "#f1a131";
|
||||
style.strokeWidth = 1;
|
||||
return style;
|
||||
}
|
||||
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
const width = super.width;
|
||||
style.fontSize = width / 10;
|
||||
return style;
|
||||
}
|
||||
|
||||
initNodeData(data) {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 10,
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.draggable = false;
|
||||
this.isShowAnchor = false;
|
||||
this.isHitable = false;
|
||||
this.text.draggable = false;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
class ResizableEllipseView extends EllipseResize.view {
|
||||
/**
|
||||
* 此方法替代自定义节点的getShape方法。
|
||||
*/
|
||||
getResizeShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, rx, ry, r} = model;
|
||||
const style = model.getNodeStyle();
|
||||
return h(
|
||||
'g',
|
||||
{},
|
||||
[
|
||||
h("ellipse", {
|
||||
...style,
|
||||
cx: x,
|
||||
cy: y,
|
||||
r,
|
||||
rx,
|
||||
ry,
|
||||
fill: 'none',
|
||||
stroke: 'black',
|
||||
}),
|
||||
this.getIconShape()
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
getIconShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, r, rx, ry} = model;
|
||||
const style = model.getNodeStyle();
|
||||
const {stroke} = style;
|
||||
const iconWidth = rx / 1.5; // 图标宽度
|
||||
const iconHeight = ry / 1.5; // 图标高度
|
||||
const iconX = x - iconWidth; // 调整图标位置的X坐标
|
||||
const iconY = y - iconHeight; // 调整图标位置的Y坐标
|
||||
return h(
|
||||
'svg',
|
||||
{
|
||||
x: iconX,
|
||||
y: iconY,
|
||||
width: iconWidth,
|
||||
height: iconHeight,
|
||||
viewBox: '0 0 1024 1024'
|
||||
},
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: stroke,
|
||||
d: 'M950.185159 4.342049H71.402591C33.892108 4.342049 3.135925 35.098233 3.135925 72.608716v878.661955c0 37.631095 30.756184 68.387279 68.387279 68.38728h878.661955c37.631095 0 68.387279-30.756184 68.387279-68.38728V72.608716c-0.120612-37.510483-30.876796-68.266667-68.387279-68.266667z m5.668787 921.358775c0 17.247585-14.111661 31.359246-31.359246 31.359247h-827.401649c-17.247585 0-31.359246-14.111661-31.359247-31.359247v-827.401648c0-17.247585 14.111661-31.359246 31.359247-31.359247h827.401649c17.247585 0 31.359246 14.111661 31.359246 31.359247v827.401648z'
|
||||
}
|
||||
),
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: stroke,
|
||||
d: 'M594.98139 450.608245h95.283863v56.808481h-95.283863zM316.969611 555.058657h127.487397v69.110954H316.969611zM725.484099 450.608245h96.731213v56.808481h-96.731213z'
|
||||
}
|
||||
),
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: stroke,
|
||||
d: 'M924.4947 88.650177h-827.401649c-5.306949 0-9.648999 4.342049-9.648999 9.648999v827.401648c0 5.306949 4.342049 9.648999 9.648999 9.648999h827.401649c5.306949 0 9.648999-4.342049 9.648998-9.648999v-827.401648c0-5.306949-4.342049-9.648999-9.648998-9.648999zM258.593168 631.768198c-30.756184 3.015312-72.246879 9.769611-124.351472 20.021672l-6.151237-32.203533c10.252061-2.050412 27.137809-4.583274 50.657244-7.719199 36.90742-6.151237 63.924617-10.734511 81.413428-13.870436-1.085512 7.236749-1.567962 18.45371-1.567963 33.771496z m-76.830153-96.731213l75.262191-10.734512c-1.085512 11.337574-1.567962 21.469022-1.567962 30.756184-52.225206 5.186337-89.132627 10.252061-110.601649 15.317786L132.673734 541.188221c9.166549-6.151237 16.885748-13.267373 23.036984-21.469022 2.050412-3.015312 6.151237-8.684099 12.302474-16.885748 12.302473-16.403298 21.469022-29.670671 27.620259-39.922733-21.469022 0-41.008245 1.085512-58.376443 3.015313l-9.166549-29.188222c7.116137-7.116137 12.784923-13.870436 16.885748-20.021672 23.519435-40.887633 42.455595-77.312603 56.808481-109.033687l33.771496 10.734511c-20.504122 37.87232-42.455595 76.347703-66.095642 115.184924 6.151237 0 13.870436-0.48245 23.036985-1.567963h21.469022c9.166549-14.352886 16.885748-27.620259 23.036985-39.922732l30.756183 13.870435c-19.41861 32.806596-48.124382 75.865253-85.996702 129.05536z m298.033451 141.357832h-35.339458v-23.036984H316.969611v23.036984h-33.771496V524.302473h196.598351v152.092344zM498.129564 393.679152h-99.867138v55.240518h87.564665v30.756184H277.046879v-30.756184H363.043581v-55.240518h-96.731214v-32.203534H363.043581v-52.225206h35.339458v52.225206H498.129564v32.203534z m376.310954 265.709305c-68.628504-25.569847-118.320848-57.290931-148.956419-95.283863v112.169611h-35.339458V565.672556c-33.771496 41.008245-83.46384 74.779741-148.95642 101.314488l-20.021672-33.771496c61.391755-19.41861 113.616961-50.657244 156.675618-93.715901h-118.200235V419.731449h130.502709v-41.490695H525.870436V346.157833h164.394817v-38.354771h35.339458V346.157833h164.394818v32.203533H725.484099v41.490695H857.55477v119.768198h-118.200235c37.87232 37.87232 89.132627 67.542992 153.539694 89.132627-8.201649 12.302473-14.352886 22.433922-18.453711 30.635571z'
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "endEvent",
|
||||
view: ResizableEllipseView,
|
||||
model: ResizableEllipseModel,
|
||||
};
|
||||
// export default function registerEnd(lf) {
|
||||
// lf.register('endEvent', ({CircleNode, CircleNodeModel, h}) => {
|
||||
// class EndNode extends CircleNode {
|
||||
// getIconShape() {
|
||||
// const {model} = this.props;
|
||||
// const {x, y, width, height} = model;
|
||||
// const style = model.getNodeStyle();
|
||||
// const {stroke} = style;
|
||||
// const iconWidth = 5; // 图标宽度
|
||||
// const iconHeight = 5; // 图标高度
|
||||
// const iconX = x - iconWidth; // 调整图标位置的X坐标
|
||||
// const iconY = y - iconHeight; // 调整图标位置的Y坐标
|
||||
// return h(
|
||||
// 'svg',
|
||||
// {
|
||||
// x: iconX - 35,
|
||||
// y: iconY - 20,
|
||||
// width: 40,
|
||||
// height: 40,
|
||||
// viewBox: '0 0 1024 1024'
|
||||
// },
|
||||
// h(
|
||||
// 'path',
|
||||
// {
|
||||
// fill: stroke,
|
||||
// d: 'M212.992 526.336 212.992 526.336 212.992 526.336 215.04 526.336 212.992 526.336Z'
|
||||
// }
|
||||
// ),
|
||||
// h(
|
||||
// 'path',
|
||||
// {
|
||||
// fill: stroke,
|
||||
// d: 'M724.992 296.96 724.992 296.96 296.96 296.96 296.96 724.992 724.992 724.992 724.992 296.96Z'
|
||||
// }
|
||||
// )
|
||||
// )
|
||||
// }
|
||||
//
|
||||
// getShape() {
|
||||
// const {model} = this.props;
|
||||
// const {
|
||||
// x,
|
||||
// y,
|
||||
// r,
|
||||
// fill,
|
||||
// stroke,
|
||||
// strokeWidth
|
||||
// } = model
|
||||
// return h(
|
||||
// 'g',
|
||||
// {},
|
||||
// [
|
||||
// h(
|
||||
// 'circle',
|
||||
// {
|
||||
// cx: x,
|
||||
// cy: y,
|
||||
// r,
|
||||
// fill: 'none',
|
||||
// stroke: 'black',
|
||||
// strokeWidth
|
||||
// }
|
||||
// ),
|
||||
// this.getIconShape()
|
||||
// ]
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// class EndModel extends CircleNodeModel {
|
||||
// constructor(data, graphModel) {
|
||||
// data.text = {
|
||||
// value: (data.text && data.text.value) || '',
|
||||
// x: data.x,
|
||||
// y: data.y + 20
|
||||
// }
|
||||
// super(data, graphModel)
|
||||
// }
|
||||
//
|
||||
// getConnectedSourceRules() {
|
||||
// const rules = super.getConnectedSourceRules()
|
||||
// const notAsTarget = {
|
||||
// message: '终止节点不能作为连线的起点',
|
||||
// validate: () => false
|
||||
// }
|
||||
// rules.push(notAsTarget)
|
||||
// return rules
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// return {
|
||||
// type: 'EndEvent',
|
||||
// view: EndNode,
|
||||
// model: EndModel
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
@@ -0,0 +1,78 @@
|
||||
import {RectResize} from "@logicflow/extension";
|
||||
import {h} from '@logicflow/core'
|
||||
|
||||
class ResizableRectModel extends RectResize.model {
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
const width = super.width;
|
||||
style.fontSize = width / 10;
|
||||
return style;
|
||||
}
|
||||
|
||||
initNodeData(data) {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 10,
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.draggable = false;
|
||||
this.isShowAnchor = false;
|
||||
this.isHitable = false;
|
||||
this.text.draggable = false;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
class ResizableRectView extends RectResize.view {
|
||||
getResizeShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height, radius, properties} = model;
|
||||
const style = model.getNodeStyle();
|
||||
console.log(model);
|
||||
return h("g", {}, [
|
||||
h("rect", {
|
||||
...style,
|
||||
x: x - width / 2,
|
||||
y: y - height / 2,
|
||||
fill: 'none',
|
||||
rx: radius,
|
||||
ry: radius,
|
||||
width,
|
||||
height
|
||||
}),
|
||||
this.getIconShape()
|
||||
]);
|
||||
}
|
||||
|
||||
getIconShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height} = model;
|
||||
const style = model.getNodeStyle();
|
||||
return h(
|
||||
"svg",
|
||||
{
|
||||
x: x - width / 2 + 5,
|
||||
y: y - height / 2 + 5,
|
||||
width: 25,
|
||||
height: 25,
|
||||
viewBox: "0 0 1274 1024"
|
||||
},
|
||||
[
|
||||
h("path", {
|
||||
fill: style.stroke,
|
||||
d: 'M196.56 0c-212.096 0-212.096 1024 0 1024 160.896 0 789.952-343.744 789.952-512S350.16 0 196.56 0zM818.32 555.904c-109.696 109.696-373.056 256-533.952 321.856a54.144 54.144 0 0 1-73.152-43.904 1589.12 1589.12 0 0 1 0-643.648 58.752 58.752 0 0 1 73.152-43.904A2253.184 2253.184 0 0 1 818.32 468.16a54.848 54.848 0 0 1 0 87.744z',
|
||||
})
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "executeFlow",
|
||||
view: ResizableRectView,
|
||||
model: ResizableRectModel,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import {RectResize} from "@logicflow/extension";
|
||||
import {h} from '@logicflow/core'
|
||||
|
||||
class ResizableRectModel extends RectResize.model {
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
const width = super.width;
|
||||
style.fontSize = width / 10;
|
||||
return style;
|
||||
}
|
||||
|
||||
initNodeData(data) {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 10,
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.draggable = false;
|
||||
this.isShowAnchor = false;
|
||||
this.isHitable = false;
|
||||
this.text.draggable = false;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
class ResizableRectView extends RectResize.view {
|
||||
getResizeShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height, radius, properties} = model;
|
||||
const style = model.getNodeStyle();
|
||||
console.log(model);
|
||||
return h("g", {}, [
|
||||
h("rect", {
|
||||
...style,
|
||||
x: x - width / 2,
|
||||
y: y - height / 2,
|
||||
rx: radius,
|
||||
ry: radius,
|
||||
fill: 'none',
|
||||
width,
|
||||
height
|
||||
}),
|
||||
this.getIconShape()
|
||||
]);
|
||||
}
|
||||
|
||||
getIconShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height} = model;
|
||||
const style = model.getNodeStyle();
|
||||
return h(
|
||||
"svg",
|
||||
{
|
||||
x: x - width / 2 + 5,
|
||||
y: y - height / 2 + 5,
|
||||
width: 25,
|
||||
height: 25,
|
||||
viewBox: "0 0 1274 1024"
|
||||
},
|
||||
[
|
||||
h("path", {
|
||||
fill: style.stroke,
|
||||
d: 'M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 208H676V232h212v136z m0 224H676V432h212v160zM412 432h200v160H412V432z m200-64H412V232h200v136z m-476 64h212v160H136V432z m0-200h212v136H136V232z m0 424h212v136H136V656z m276 0h200v136H412V656z m476 136H676V656h212v136z'
|
||||
})
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "form",
|
||||
view: ResizableRectView,
|
||||
model: ResizableRectModel,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
import {DiamondResize} from "@logicflow/extension";
|
||||
import {h} from '@logicflow/core'
|
||||
|
||||
class ResizableDiamondModel extends DiamondResize.model {
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
const height = super.height;
|
||||
style.fontSize = height / 10;
|
||||
return style;
|
||||
}
|
||||
|
||||
initNodeData(data) {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 10,
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.draggable = false;
|
||||
this.isShowAnchor = false;
|
||||
this.isHitable = false;
|
||||
this.text.draggable = false;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
class ResizableDiamondView extends DiamondResize.view {
|
||||
/**
|
||||
* 此方法替代自定义节点的getShape方法。
|
||||
*/
|
||||
getResizeShape() {
|
||||
const {model} = this.props;
|
||||
const {width, height, x, y, points} = model
|
||||
const pointsPath = points.map(point => point.join(',')).join(' ')
|
||||
return h(
|
||||
'g',
|
||||
{},
|
||||
[
|
||||
h(
|
||||
'polygon',
|
||||
{
|
||||
x: x - width / 2,
|
||||
y: y - height / 2,
|
||||
points: pointsPath,
|
||||
fill: 'none',
|
||||
stroke: 'black', // 边框颜色
|
||||
strokeWidth: 1, // 边框宽度
|
||||
strokeOpacity: 1, // 边框透明度
|
||||
fillOpacity: 0.5, // 填充透明度
|
||||
}
|
||||
),
|
||||
this.getIconShape()
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
getIconShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height} = model;
|
||||
const style = model.getNodeStyle();
|
||||
const {stroke} = style;
|
||||
const iconWidth = width / 3; // 图标宽度
|
||||
const iconHeight = height / 3; // 图标高度
|
||||
const iconX = x - iconWidth; // 调整图标位置的X坐标
|
||||
const iconY = y - iconHeight; // 调整图标位置的Y坐标
|
||||
return h(
|
||||
'svg',
|
||||
{
|
||||
x: iconX,
|
||||
y: iconY,
|
||||
width: iconWidth,
|
||||
height: iconHeight,
|
||||
viewBox: '0 0 1126 1024'
|
||||
},
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: stroke,
|
||||
d: 'M315.076923 295.384615l146.294154 191.291077L315.076923 678.006154h67.524923l112.521846-147.003077 112.521846 147.003077h67.524924l-146.294154-191.310769L675.170462 295.384615h-67.524924l-112.521846 146.983385L382.601846 295.384615H315.076923z'
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "gateWay",
|
||||
view: ResizableDiamondView,
|
||||
model: ResizableDiamondModel,
|
||||
};
|
||||
// export default function registerUser(lf) {
|
||||
// lf.register('gatewayTask', ({PolygonNode, PolygonNodeModel, h}) => {
|
||||
// class Node extends PolygonNode {
|
||||
// getIconShape() {
|
||||
// const {model} = this.props;
|
||||
// const style = model.getNodeStyle()
|
||||
// const {x, y, width, height} = model;
|
||||
// const {stroke} = style
|
||||
// const iconWidth = 50; // 图标宽度
|
||||
// const iconHeight = 30; // 图标高度
|
||||
// const iconX = x - iconWidth; // 调整图标位置的X坐标
|
||||
// const iconY = y - iconHeight; // 调整图标位置的Y坐标
|
||||
// return h(
|
||||
// 'svg',
|
||||
// {
|
||||
// x: -1,
|
||||
// y: 7,
|
||||
// width: 50,
|
||||
// height: 55,
|
||||
// viewBox: '0 0 1126 1024'
|
||||
// },
|
||||
// h(
|
||||
// 'path',
|
||||
// {
|
||||
// fill: stroke,
|
||||
// d: 'M315.076923 295.384615l146.294154 191.291077L315.076923 678.006154h67.524923l112.521846-147.003077 112.521846 147.003077h67.524924l-146.294154-191.310769L675.170462 295.384615h-67.524924l-112.521846 146.983385L382.601846 295.384615H315.076923z'
|
||||
// }
|
||||
// )
|
||||
// )
|
||||
// }
|
||||
//
|
||||
// getShape() {
|
||||
// const {model} = this.props;
|
||||
// const {width, height, x, y, fill, fillOpacity, strokeWidth, stroke, strokeOpacity, points} = model
|
||||
// const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
|
||||
// const pointsPath = points.map(point => point.join(',')).join(' ')
|
||||
// return h(
|
||||
// 'g',
|
||||
// {
|
||||
// transform
|
||||
// },
|
||||
// [
|
||||
// h(
|
||||
// 'polygon',
|
||||
// {
|
||||
// x: x - width / 2,
|
||||
// y: y - height / 2,
|
||||
// points: pointsPath,
|
||||
// fill: 'none',
|
||||
// stroke: 'black', // 边框颜色
|
||||
// strokeWidth: 1, // 边框宽度
|
||||
// strokeOpacity: 1, // 边框透明度
|
||||
// fillOpacity: 0.5, // 填充透明度
|
||||
// }
|
||||
// ),
|
||||
// this.getIconShape()
|
||||
// ]
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// class Model extends PolygonNodeModel {
|
||||
//
|
||||
// constructor(data, graphModel) {
|
||||
// data.text = {
|
||||
// value: (data.text && data.text.value) || '',
|
||||
// x: data.x + 15,
|
||||
// y: data.y + 5
|
||||
// }
|
||||
// super(data, graphModel)
|
||||
// const lenght = 35
|
||||
// this.points = [
|
||||
// [lenght, 0],
|
||||
// [lenght * 2, lenght],
|
||||
// [lenght, lenght * 2],
|
||||
// [0, lenght]
|
||||
// ]
|
||||
// // 右键菜单自由配置，也可以通过边的properties或者其他属性条件更换不同菜单
|
||||
// this.menu = [
|
||||
// {
|
||||
// className: 'lf-menu-delete',
|
||||
// text: 'delete',
|
||||
// callback(node) {
|
||||
// // const comfirm = window.confirm('你确定要删除吗？')
|
||||
// lf.deleteNode(node.id)
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// text: 'edit',
|
||||
// className: 'lf-menu-item',
|
||||
// callback(node) {
|
||||
// lf.editNodeText(node.id)
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// text: 'copy',
|
||||
// className: 'lf-menu-item',
|
||||
// callback(node) {
|
||||
// lf.cloneNode(node.id)
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// return {
|
||||
// type: 'gatewayTask',
|
||||
// view: Node,
|
||||
// model: Model
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
@@ -0,0 +1,13 @@
|
||||
export default function registerPolyline (lf) {
|
||||
lf.register('polyline', ({ PolylineEdge, PolylineEdgeModel }) => {
|
||||
class ConnnectionModel extends PolylineEdgeModel {
|
||||
constructor (data, graphModel) {
|
||||
super(data, graphModel)
|
||||
}
|
||||
}
|
||||
return {
|
||||
view: PolylineEdge,
|
||||
model: ConnnectionModel
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
export default function registerPush (lf, clickPlus, mouseDownPlus) {
|
||||
lf.register('push', ({ PolygonNode, PolygonNodeModel, h }) => {
|
||||
class Node extends PolygonNode {
|
||||
getIconShape () {
|
||||
const attributes = this.getAttributes()
|
||||
const {
|
||||
stroke
|
||||
} = attributes
|
||||
return h(
|
||||
'svg',
|
||||
{
|
||||
x: 18,
|
||||
y: 18,
|
||||
width: 30,
|
||||
height: 30,
|
||||
viewBox: '0 0 1024 1024'
|
||||
},
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: stroke,
|
||||
d: 'M866.461538 39.384615H393.846154c-43.323077 0-78.769231 35.446154-78.769231 78.769231v1.969231c0 13.784615 7.876923 27.569231 19.692308 35.446154 5.907692 3.938462 80.738462 78.769231 80.738461 78.769231 5.907692 5.907692 15.753846 0 15.753846-7.876924 0-15.753846 13.784615-31.507692 29.538462-31.507692h334.769231c15.753846 0 31.507692 15.753846 31.507692 31.507692v531.692308c0 15.753846-15.753846 27.569231-31.507692 27.569231h-334.769231c-15.753846 0-27.569231-11.815385-27.569231-27.569231v-1.969231c0-7.876923-9.846154-11.815385-15.753846-5.907692 0 0-74.830769 74.830769-82.707692 78.769231-11.815385 7.876923-19.692308 19.692308-19.692308 35.446154v39.384615c0 43.323077 33.476923 78.769231 76.8 78.769231h472.615385c43.323077 0 80.738462-35.446154 80.738461-78.769231V118.153846c0-43.323077-35.446154-78.769231-78.769231-78.769231zM630.153846 945.230769c-33.476923 0-59.076923-25.6-59.076923-59.076923s25.6-59.076923 59.076923-59.076923 59.076923 25.6 59.076923 59.076923-25.6 59.076923-59.076923 59.076923z m-86.646154-474.584615L297.353846 224.492308c-11.815385-11.815385-29.538462-11.815385-41.353846 0l-41.353846 41.353846c-11.815385 11.815385-11.815385 29.538462 0 41.353846l90.584615 90.584615c11.815385 11.815385 3.938462 33.476923-13.784615 33.476923H29.538462c-15.753846 1.969231-29.538462 15.753846-29.538462 31.507693v59.076923c0 15.753846 13.784615 29.538462 29.538462 29.538461h259.938461c17.723077 0 25.6 21.661538 13.784615 33.476923l-90.584615 90.584616c-11.815385 11.815385-11.815385 29.538462 0 41.353846l41.353846 41.353846c11.815385 11.815385 29.538462 11.815385 41.353846 0L543.507692 512c9.846154-9.846154 9.846154-29.538462 0-41.353846z'
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
getPulsShape () {
|
||||
const attributes = this.getAttributes()
|
||||
// 判断当前节点是否子节点
|
||||
const graphData = lf.getGraphData()
|
||||
const edges = graphData.edges
|
||||
let hasChildNode = false
|
||||
edges.some(item => {
|
||||
if (item.sourceNodeId === attributes.id) {
|
||||
hasChildNode = true
|
||||
return true
|
||||
}
|
||||
})
|
||||
if (hasChildNode) {
|
||||
return
|
||||
}
|
||||
return h(
|
||||
'svg',
|
||||
{
|
||||
x: 70,
|
||||
y: 20,
|
||||
width: 30,
|
||||
height: 30,
|
||||
viewBox: '0 0 1024 1024',
|
||||
class: 'time-plus',
|
||||
onClick: (e) => clickPlus(e, attributes),
|
||||
onMousedown: (e) => mouseDownPlus(e, attributes),
|
||||
onMouseUp: (e) => mouseDownPlus(e, attributes)
|
||||
},
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: '#f17611',
|
||||
d: 'M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z'
|
||||
}
|
||||
),
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: '#ffffff',
|
||||
d: 'M448 298.666667h128v426.666666h-128z'
|
||||
}
|
||||
),
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: '#ffffff',
|
||||
d: 'M298.666667 448h426.666666v128H298.666667z'
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
getShape () {
|
||||
const attributes = this.getAttributes()
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
x,
|
||||
y,
|
||||
fill,
|
||||
fillOpacity,
|
||||
strokeWidth,
|
||||
stroke,
|
||||
strokeOpacity,
|
||||
points
|
||||
} = attributes
|
||||
const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
|
||||
const pointsPath = points.map(point => point.join(',')).join(' ')
|
||||
return h(
|
||||
'g',
|
||||
{
|
||||
transform
|
||||
},
|
||||
[
|
||||
h(
|
||||
'polygon',
|
||||
{
|
||||
points: pointsPath,
|
||||
fill,
|
||||
stroke,
|
||||
strokeWidth,
|
||||
strokeOpacity,
|
||||
fillOpacity
|
||||
}
|
||||
),
|
||||
this.getIconShape(),
|
||||
this.getPulsShape()
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
class Model extends PolygonNodeModel {
|
||||
constructor (data, graphModel) {
|
||||
data.text = {
|
||||
value: (data.text && data.text.value) || '',
|
||||
x: data.x,
|
||||
y: data.y + 50
|
||||
}
|
||||
super(data, graphModel)
|
||||
const lenght = 35
|
||||
this.points = [
|
||||
[lenght, 0],
|
||||
[lenght * 2, lenght],
|
||||
[lenght, lenght * 2],
|
||||
[0, lenght]
|
||||
]
|
||||
}
|
||||
}
|
||||
return {
|
||||
view: Node,
|
||||
model: Model
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import {RectResize} from "@logicflow/extension";
|
||||
import {h} from '@logicflow/core'
|
||||
|
||||
class ResizableRectModel extends RectResize.model {
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
const width = super.width;
|
||||
style.fontSize = width / 10;
|
||||
return style;
|
||||
}
|
||||
|
||||
initNodeData(data) {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 10,
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.draggable = false;
|
||||
this.isShowAnchor = false;
|
||||
this.isHitable = false;
|
||||
this.text.draggable = false;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
class ResizableRectView extends RectResize.view {
|
||||
getResizeShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height, radius, properties} = model;
|
||||
const style = model.getNodeStyle();
|
||||
console.log(model);
|
||||
return h("g", {}, [
|
||||
h("rect", {
|
||||
...style,
|
||||
x: x - width / 2,
|
||||
y: y - height / 2,
|
||||
rx: radius,
|
||||
ry: radius,
|
||||
fill: 'none',
|
||||
width,
|
||||
height
|
||||
}),
|
||||
this.getIconShape()
|
||||
]);
|
||||
}
|
||||
|
||||
getIconShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height} = model;
|
||||
const style = model.getNodeStyle();
|
||||
return h(
|
||||
"svg",
|
||||
{
|
||||
x: x - width / 2 + 5,
|
||||
y: y - height / 2 + 5,
|
||||
width: 25,
|
||||
height: 25,
|
||||
viewBox: "0 0 1274 1024"
|
||||
},
|
||||
[
|
||||
h("path", {
|
||||
fill: style.stroke,
|
||||
d: 'M388.81792 193.536l-4.230144 2.510848-1.381888 0.821248C323.408896 232.30464 282.257408 264.79872 255.09376 296.52992c-27.20256 31.77472-40.354304 63.768576-40.728064 94.610944-0.744448 61.37856 44.529664 107.376128 84.6976 148.514304 40.137728 41.106432 75.941376 79.873024 79.31136 111.955968 1.717248 16.352256-2.14784 32.777728-19.97824 55.266816-17.755136 22.39488-49.979392 49.217536-101.49888 79.24992L180.834816 830.464h469.429248l5.5552-3.232256 0.005632-0.00512c54.597632-31.82592 91.380224-61.23008 114.818048-90.79296 23.507968-29.64992 33.072128-60.671488 30.01344-89.793536-6.061056-57.703424-53.066752-99.751424-92.584448-140.222976-39.548416-40.503296-71.604224-78.705152-71.168-114.700288 0.22016-18.17088 7.204864-38.443008 29.296128-64.247808 22.053376-25.760768 59.236352-55.900672 116.239872-89.680896v-0.001024L857.11104 193.536H388.81792z m13.231104 47.574016h289.097216c-25.46176 18.983936-45.593088 37.323776-61.085184 55.419904-27.20256 31.77472-40.354304 63.768576-40.728064 94.610944-0.743936 61.379584 44.532224 107.37664 84.70016 148.514304 40.137216 41.106432 75.937792 79.872 79.307776 111.955968 1.71776 16.352256-2.146816 32.777728-19.976704 55.266816-17.099264 21.566976-47.849472 47.301632-96.14848 76.012032h-289.83808c20.10624-15.681024 36.080128-31.04512 48.29696-46.454784 23.507968-29.650432 33.072128-60.672 30.01344-89.79456-6.061056-57.702912-53.06624-99.750912-92.583936-140.222464-39.548416-40.503296-71.6032-78.705152-71.166976-114.700288 0.22016-18.17088 7.20384-38.443008 29.294592-64.247808 21.313024-24.895488 56.9728-53.937152 110.81728-86.360064zM334.40256 322.249216v21.97504h225.995776v-21.97504H334.403072z m-8.397824 118.3616v21.974016h233.668608v-21.974016H326.00576z m105.878528 118.35904v21.974016h226.298368v-21.974016H431.883776z m32.357376 118.361088v21.974016h234.488832v-21.974016H464.241152z'
|
||||
})
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "scriptTask",
|
||||
view: ResizableRectView,
|
||||
model: ResizableRectModel,
|
||||
};
|
||||
@@ -0,0 +1,77 @@
|
||||
import {RectResize} from "@logicflow/extension";
|
||||
import {h} from '@logicflow/core'
|
||||
|
||||
class ResizableRectModel extends RectResize.model {
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
const width = super.width;
|
||||
style.fontSize = width / 10;
|
||||
return style;
|
||||
}
|
||||
|
||||
initNodeData(data) {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 10,
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.draggable = false;
|
||||
this.isShowAnchor = false;
|
||||
this.isHitable = false;
|
||||
this.text.draggable = false;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
class ResizableRectView extends RectResize.view {
|
||||
getResizeShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height, radius, properties} = model;
|
||||
const style = model.getNodeStyle();
|
||||
console.log(model);
|
||||
return h("g", {}, [
|
||||
h("rect", {
|
||||
...style,
|
||||
x: x - width / 2,
|
||||
y: y - height / 2,
|
||||
rx: radius,
|
||||
ry: radius,
|
||||
fill: 'none',
|
||||
width,
|
||||
height
|
||||
}),
|
||||
this.getIconShape()
|
||||
]);
|
||||
}
|
||||
|
||||
getIconShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height} = model;
|
||||
const style = model.getNodeStyle();
|
||||
return h(
|
||||
"svg",
|
||||
{
|
||||
x: x - width / 2 + 5,
|
||||
y: y - height / 2 + 5,
|
||||
width: 25,
|
||||
height: 25,
|
||||
viewBox: "0 0 1274 1024"
|
||||
},
|
||||
[
|
||||
h("path", {
|
||||
fill: style.stroke,
|
||||
d: 'M1173.851 0c55.178 0 99.905 44.727 99.905 99.905v824.19c0 55.178-44.727 99.905-99.905 99.905H99.905C44.727 1024 0 979.273 0 924.095V99.905C0 44.727 44.727 0 99.905 0H1173.85z m-24.97 37.464h-1024c-48.272 0-87.41 39.139-87.41 87.41V899.12c0 48.278 39.138 87.417 87.41 87.417h1024c48.279 0 87.417-39.139 87.417-87.417V124.88c0-48.278-39.138-87.417-87.417-87.417zM992.94 305.52v474.363c0.433 15.767-11.903 28.471-27.764 28.471H308.257a28.031 28.031 0 0 1-28.197-28.031V305.52l302.68 243.53c14.984 14.456 34.371 21.463 53.753 21.463a76.96 76.96 0 0 0 53.752-21.462L992.926 305.52z m-31.825-50.92L655.645 501.339a5.34 5.34 0 0 0-2.221 2.215 19.547 19.547 0 0 1-27.484 0l-2.222-2.215-305.468-246.74h642.864z'
|
||||
})
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "sendMsg",
|
||||
view: ResizableRectView,
|
||||
model: ResizableRectModel,
|
||||
};
|
||||
@@ -0,0 +1,89 @@
|
||||
import {RectResize} from "@logicflow/extension";
|
||||
import {h} from '@logicflow/core'
|
||||
|
||||
class ResizableRectModel extends RectResize.model {
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
const width = super.width;
|
||||
style.fontSize = width / 10;
|
||||
return style;
|
||||
}
|
||||
|
||||
initNodeData(data) {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 10,
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.draggable = false;
|
||||
this.isShowAnchor = false;
|
||||
this.isHitable = false;
|
||||
this.text.draggable = false;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
class ResizableRectView extends RectResize.view {
|
||||
getResizeShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height, radius, properties} = model;
|
||||
const style = model.getNodeStyle();
|
||||
console.log(model);
|
||||
return h("g", {}, [
|
||||
h("rect", {
|
||||
...style,
|
||||
x: x - width / 2,
|
||||
y: y - height / 2,
|
||||
rx: radius,
|
||||
ry: radius,
|
||||
fill: 'none',
|
||||
width,
|
||||
height
|
||||
}),
|
||||
this.getIconShape()
|
||||
]);
|
||||
}
|
||||
|
||||
getIconShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height} = model;
|
||||
const style = model.getNodeStyle();
|
||||
return h(
|
||||
"svg",
|
||||
{
|
||||
x: x - width / 2 + 5,
|
||||
y: y - height / 2 + 5,
|
||||
width: 25,
|
||||
height: 25,
|
||||
viewBox: "0 0 1274 1024"
|
||||
},
|
||||
[
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: style.stroke,
|
||||
d: 'M912.8 612.3c-16.3 1.8-40 3.2-55.6 8.1-53.3 16.6-92.9 66.4-92.9 133.3 0 24.8 7.7 51.9 18.6 74-28.1 22.5-107.5 67.8-141 81.3-31.1-45.3-73.1-73.1-130.6-73.1s-91.5 28.8-122.6 74.1c-33.5-13.6-151.9-78.8-149.1-89.3 9.7-35.7 24-41.7 19.6-87-8.1-85.6-62.2-116.2-147.2-125.4-4.7-35.6-0.2-156.9-0.2-156.9C197 431 233.3 415.6 258.9 329c9.8-33.3-10.5-77.9-17.9-96.8 26.6-20.6 103-64.5 134.4-77.2 31 45.6 79.1 80.6 136.9 80.6 57.8 0 99.9-36 131-81.6 31.4 12.7 111.8 60.6 138.4 81.2-7.5 18.9-27.3 34.4-20.3 71.2 14.7 77.1 65.8 126.6 149.4 137m34.3-18.4c-4.4-17.7-21.4-29.7-40-28.2-2.3 0.2-4.5 0.4-6.7 0.8-51.5-0.1-93.2-40.9-93.3-91.2 0-17 5.1-33.8 14.7-48.6 10-15.4 7.2-35.5-6.5-47.8-49.3-44.1-105.9-76.2-168-95.2-19.3-5.9-40 3.9-47.3 22.3-14 35.5-48 58.4-86.7 58.4-38.6 0-72.7-23-86.7-58.4-7.3-18.5-28-28.2-47.3-22.3-62.2 19.1-118.8 51.1-168 95.2-13.7 12.3-16.5 32.4-6.5 47.8 9.5 14.5 14.6 31.4 14.7 48.6 0 50.3-42.8 91.4-93.6 91.1-2.1-0.3-4.2-0.5-6.3-0.7-18.6-1.5-35.5 10.5-40 28.2-9.3 35.3-14 71.5-14.2 108 0 30.2 3.3 60.8 9.8 91 4 18.8 22 31.6 41.5 29.6l5.6-0.7c1.3-0.2 2.6-0.4 4-0.5 51.5 0.1 93.2 40.9 93.3 91.2 0 19.8-6.9 39-19.8 55.3-12 15.2-10.3 36.8 3.8 50.1 49.9 46.9 110.1 81.8 176 102.2 19.2 5.9 39.9-3.8 47.2-22.2 14.1-35.3 48.1-58.1 86.6-58.1s72.5 22.8 86.6 58.1c7.3 18.4 27.9 28 47.2 22.2 65.9-20.4 126.2-55.4 176-102.2 14.2-13.3 15.8-34.9 3.8-50.1-12.7-15.8-19.7-35.2-19.8-55.3 0-36.8 22.3-69.8 57-84.1 12.7-5.3 26.8-8.5 40.3-6.7l5.6 0.7c19.6 2 37.5-10.8 41.5-29.6 6.5-30.1 9.8-60.7 9.8-91-0.2-36.4-5-72.6-14.3-107.9z'
|
||||
}
|
||||
),
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: style.stroke,
|
||||
d: 'M520.3 360.6c-23.8 0-46.8 4.9-68.3 14.6a23.72 23.72 0 0 0-14.2 19.3c-0.9 8.5 2.9 16.9 9.8 21.9 7 5 16.1 5.8 23.9 2.2 36.9-16.5 79.5-13.2 113.4 8.8 33.9 21.9 54.4 59.5 54.4 99.9 0 65.7-53.4 119.1-119.1 119.1-65.7 0-119.1-53.4-119.1-119.1 0-8.5-4.5-16.4-11.9-20.6-7.4-4.3-16.4-4.3-23.8 0-7.4 4.3-11.9 12.1-11.9 20.6 0 91.9 74.8 166.7 166.7 166.7 91.9 0 166.7-74.8 166.7-166.7 0.1-91.9-74.7-166.7-166.6-166.7z'
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "serverTask",
|
||||
view: ResizableRectView,
|
||||
model: ResizableRectModel,
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
import {EllipseResize} from "@logicflow/extension";
|
||||
import {h} from '@logicflow/core'
|
||||
|
||||
class ResizableEllipseModel extends EllipseResize.model {
|
||||
getNodeStyle() {
|
||||
const style = super.getNodeStyle();
|
||||
style.fill = "#f1a131";
|
||||
style.strokeWidth = 1;
|
||||
return style;
|
||||
}
|
||||
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
const width = super.width;
|
||||
style.fontSize = width / 10;
|
||||
return style;
|
||||
}
|
||||
|
||||
initNodeData(data) {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 10,
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.draggable = false;
|
||||
this.isShowAnchor = false;
|
||||
this.isHitable = false;
|
||||
this.text.draggable = false;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
class ResizableEllipseView extends EllipseResize.view {
|
||||
getResizeShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, rx, ry, r} = model;
|
||||
const style = model.getNodeStyle();
|
||||
return h(
|
||||
'g',
|
||||
{},
|
||||
[
|
||||
h("ellipse", {
|
||||
...style,
|
||||
cx: x,
|
||||
cy: y,
|
||||
r,
|
||||
rx,
|
||||
ry,
|
||||
fill: 'none',
|
||||
stroke: 'black',
|
||||
}),
|
||||
this.getIconShape()
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
getIconShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, r, rx, ry} = model;
|
||||
const style = model.getNodeStyle();
|
||||
const iconWidth = rx / 1.5; // 图标宽度
|
||||
const iconHeight = ry / 1.5; // 图标高度
|
||||
const iconX = x - iconWidth; // 调整图标位置的X坐标
|
||||
const iconY = y - iconHeight; // 调整图标位置的Y坐标
|
||||
return h(
|
||||
'svg',
|
||||
{
|
||||
x: iconX,
|
||||
y: iconY,
|
||||
width: iconWidth,
|
||||
height: iconHeight,
|
||||
viewBox: '0 0 1024 1024'
|
||||
},
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: style.stroke,
|
||||
d: 'M723.916137 539.620259h110.601649v84.42874h-110.601649zM590.277503 416.716137c-6.151237 39.922733-13.267373 75.262191-21.469022 106.018374 12.302473 9.166549 24.604947 19.41861 36.90742 30.756184 13.267373-25.569847 23.036985-71.161366 29.188221-136.653946h-44.626619zM263.176443 367.626855h115.184923v106.018375h-115.184923z'
|
||||
}
|
||||
),
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: style.stroke,
|
||||
d: 'M925.700824 88.650177h-827.401648c-5.306949 0-9.648999 4.342049-9.648999 9.648999v827.401648c0 5.306949 4.342049 9.648999 9.648999 9.648999h827.401648c5.306949 0 9.648999-4.342049 9.648999-9.648999v-827.401648c0-5.306949-4.342049-9.648999-9.648999-9.648999zM502.833451 508.984688h-87.564664v164.394817h-36.907421V508.984688h-115.184923c3.135925 75.744641-29.188221 132.070671-96.731213 168.857479-3.015312-3.015312-7.719199-8.201649-13.870436-15.317785-6.151237-7.116137-10.734511-12.302473-13.870436-15.317786 60.426855-29.670671 89.615077-75.744641 87.564664-138.221908H132.673734v-35.339458h93.715901v-106.018375h-75.262191v-33.771496h334.820259v33.771496h-70.678916v106.018375h87.564664V508.984688z m150.524382 130.502709c-4.100824-4.100824-10.734511-9.769611-20.021673-16.885748-8.201649-8.201649-14.835336-14.352886-20.021672-18.45371-14.352886 20.504122-37.87232 43.541107-70.678917 69.110954l-23.036984-26.052297c28.705771-20.504122 51.742756-42.455595 69.110954-66.095642-6.151237-6.151237-15.317786-14.352886-27.620259-24.604947-12.302473-11.216961-21.469022-19.41861-27.62026-24.604947 11.216961-49.209894 18.93616-87.564664 23.036985-115.184923h-33.771496v-32.203534h39.922733c0.9649-8.201649 2.532862-20.986572 4.583274-38.35477 2.050412-16.403298 3.618375-28.705771 4.583275-36.907421l35.339458 3.015312c-1.085512 10.252061-3.015312 24.122497-6.151237 41.490695-2.050412 14.352886-3.618375 24.604947-4.583274 30.756184h70.678916v32.203534c-5.186337 71.643816-16.885748 124.351472-35.339458 158.24358 3.015312 3.015312 8.201649 7.719199 15.317786 13.870436 14.352886 12.302473 24.604947 21.469022 30.756183 27.620259l-24.484334 23.036985z m216.499411 36.90742h-35.339458v-24.604947h-110.601649v24.604947h-33.771496V508.984688h179.712603v167.410129z m-4.583275-188.999764l-15.317785-27.620259c-63.442167 2.050412-106.500824 4.100824-129.05536 6.151237-13.267373 0-25.087397 1.567962-35.339458 4.583274l-15.317785-33.771496c9.166549-5.065724 18.45371-13.870436 27.620259-26.052297 23.519435-34.857008 43.541107-69.110954 59.944405-102.88245l36.90742 13.870436c-4.100824 5.186337-9.769611 13.870436-16.885747 26.052297-25.569847 39.922733-45.109069 68.628504-58.376443 85.996702 22.554535-0.9649 60.426855-2.532862 113.616961-4.583274-9.166549-17.368198-19.41861-34.857008-30.756184-52.225207l29.188221-15.317785c23.519435 37.87232 44.988457 74.297291 64.52768 109.033687l-30.756184 16.765135z'
|
||||
}
|
||||
),
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: style.stroke,
|
||||
d: 'M951.391284 4.342049H72.608716C35.098233 4.342049 4.342049 35.098233 4.342049 72.608716v878.661955c0 37.631095 30.756184 68.387279 68.38728 68.38728h878.661955c37.631095 0 68.387279-30.756184 68.387279-68.38728V72.608716c-0.120612-37.510483-30.876796-68.266667-68.387279-68.266667z m5.668787 921.358775c0 17.247585-14.111661 31.359246-31.359247 31.359247h-827.401648c-17.247585 0-31.359246-14.111661-31.359247-31.359247v-827.401648c0-17.247585 14.111661-31.359246 31.359247-31.359247h827.401648c17.247585 0 31.359246 14.111661 31.359247 31.359247v827.401648z'
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "startEvent",
|
||||
view: ResizableEllipseView,
|
||||
model: ResizableEllipseModel,
|
||||
};
|
||||
// export default function registerStart(lf) {
|
||||
// lf.register('startEvent', ({CircleNode, CircleNodeModel, h}) => {
|
||||
// class StartNode extends CircleNode {
|
||||
// getLabelShape() {
|
||||
// const {model} = this.props;
|
||||
// const {x, y, width, height} = model;
|
||||
// const style = model.getNodeStyle();
|
||||
// const {stroke} = style;
|
||||
// const iconWidth = 5; // 图标宽度
|
||||
// const iconHeight = 5; // 图标高度
|
||||
// const iconX = x - iconWidth; // 调整图标位置的X坐标
|
||||
// const iconY = y - iconHeight; // 调整图标位置的Y坐标
|
||||
// return h(
|
||||
// 'text',
|
||||
// {
|
||||
// fill: '#000000',
|
||||
// fontSize: 12,
|
||||
// x: x -25,
|
||||
// y: y - 15,
|
||||
// width: 50,
|
||||
// height: 25
|
||||
// },
|
||||
// 'Start'
|
||||
// )
|
||||
// }
|
||||
//
|
||||
// getShape() {
|
||||
// const {model} = this.props;
|
||||
// const {
|
||||
// x,
|
||||
// y,
|
||||
// r,
|
||||
// fill,
|
||||
// stroke,
|
||||
// strokeWidth
|
||||
// } = model
|
||||
// return h(
|
||||
// 'g',
|
||||
// {},
|
||||
// [
|
||||
// h(
|
||||
// 'circle',
|
||||
// {
|
||||
// cx: x,
|
||||
// cy: y,
|
||||
// r,
|
||||
// fill: 'none',
|
||||
// stroke: 'black',
|
||||
// strokeWidth
|
||||
// }
|
||||
// ),
|
||||
// this.getLabelShape()
|
||||
// ]
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// class StartModel extends CircleNodeModel {
|
||||
// constructor(data, graphModel) {
|
||||
// data.text = {
|
||||
// value: (data.text && data.text.value) || '',
|
||||
// x: data.x,
|
||||
// y: data.y + 35,
|
||||
// dragable: false,
|
||||
// editable: true
|
||||
// }
|
||||
// super(data, graphModel)
|
||||
// }
|
||||
//
|
||||
// getConnectedTargetRules() {
|
||||
// const rules = super.getConnectedTargetRules()
|
||||
// const notAsTarget = {
|
||||
// message: '起始节点不能作为连线的终点',
|
||||
// validate: () => false
|
||||
// }
|
||||
// rules.push(notAsTarget)
|
||||
// return rules
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// return {
|
||||
// type: 'startEvent',
|
||||
// view: StartNode,
|
||||
// model: StartModel
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
@@ -0,0 +1,47 @@
|
||||
import {GroupNode} from "@logicflow/extension";
|
||||
import semiProductOut from "../../../../../api/wms/st/out/semiProductOut";
|
||||
|
||||
class MyGroup extends GroupNode.view {
|
||||
|
||||
}
|
||||
|
||||
class MyGroupModel extends GroupNode.model {
|
||||
initNodeData(data) {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 50
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.isRestrict = false;
|
||||
this.resizable = false;
|
||||
this.foldable = false;
|
||||
this.draggable = false;
|
||||
this.width = 500;
|
||||
this.height = 300;
|
||||
this.foldedWidth = 50;
|
||||
this.foldedHeight = 50;
|
||||
}
|
||||
getAddableOutlineStyle() {
|
||||
const style = super.getAddableOutlineStyle();
|
||||
style.stroke = "#AEAFAE";
|
||||
style.strokeDasharray = "3 3";
|
||||
return style;
|
||||
}
|
||||
getNodeStyle() {
|
||||
const style = super.getNodeStyle();
|
||||
// style.stroke = "black";
|
||||
style.strokeDasharray = "3 3";
|
||||
style.strokeWidth = 1;
|
||||
style.fill = 'none';
|
||||
return style;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "subProcess",
|
||||
model: MyGroupModel,
|
||||
view: MyGroup,
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
export default function registerTask (lf) {
|
||||
lf.register('task', ({ RectNode, RectNodeModel, h }) => {
|
||||
// class View extends RectNode {
|
||||
// getShape() {
|
||||
// const style = this.getShapeStyle();
|
||||
// console.log(style);
|
||||
// const { width, height } = style;
|
||||
// const { x, y } = this.getAttributes();
|
||||
// const position = {
|
||||
// x: x - width / 2,
|
||||
// y: y- height / 2,
|
||||
// }
|
||||
// return h("rect", {
|
||||
// ...style,
|
||||
// ...position,
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// class Model extends RectNodeModel {
|
||||
// constructor (data, graphModel) {
|
||||
// super(data, graphModel)
|
||||
// this.radius = 20;
|
||||
// }
|
||||
// }
|
||||
// return {
|
||||
// view: View,
|
||||
// model: Model
|
||||
// }
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
export default function registerUser (lf) {
|
||||
lf.register('user', ({ PolygonNode, PolygonNodeModel, h }) => {
|
||||
class Node extends PolygonNode {
|
||||
getIconShape () {
|
||||
const attributes = this.getAttributes()
|
||||
const {
|
||||
stroke
|
||||
} = attributes
|
||||
return h(
|
||||
'svg',
|
||||
{
|
||||
x: 20,
|
||||
y: 18,
|
||||
width: 30,
|
||||
height: 30,
|
||||
viewBox: '0 0 1126 1024'
|
||||
},
|
||||
h(
|
||||
'path',
|
||||
{
|
||||
fill: stroke,
|
||||
d: 'M792.576 379.392a25.6 25.6 0 0 0 25.2928 25.8048h283.2384A25.6 25.6 0 0 0 1126.4 379.392a25.6 25.6 0 0 0-25.2928-25.8048h-283.2384a25.6 25.6 0 0 0-25.344 25.8048z m303.9232 80.7424H761.856c-16.5376 0-29.9008 11.6224-29.9008 25.7536 0 14.1824 13.312 25.7536 29.9008 25.7536h334.6432c16.4864 0 29.9008-11.5712 29.9008-25.7536 0-14.1312-13.4144-25.7536-29.9008-25.7536z m4.608 106.496h-283.2384a25.6 25.6 0 0 0-25.344 25.7536 25.6 25.6 0 0 0 25.344 25.7536h283.2384A25.6 25.6 0 0 0 1126.4 592.384a25.6 25.6 0 0 0-25.2928-25.8048zM543.0272 1024H341.6576C150.8352 1024 0 1024 0 923.648v-20.1216c0-188.16 153.2928-341.1968 341.7088-341.1968h201.2672c188.416 0 341.76 153.0368 341.76 341.1968v20.0704C884.6848 1024 726.3232 1024 542.976 1024z m-203.1616-405.1456c-158.464 0-287.4368 128.4096-287.4368 286.208v20.48c0 40.9088 166.0928 40.9088 287.4368 40.9088h204.9536c100.4544 0 287.4368 0 287.4368-40.96v-20.3776c0-157.8496-128.9728-286.208-287.4368-286.208H339.8656z m92.416-76.7488a271.4112 271.4112 0 0 1-271.2064-271.0528A271.36 271.36 0 0 1 432.2816 0a271.36 271.36 0 0 1 271.2064 271.0528 271.4624 271.4624 0 0 1-271.2064 271.0528z m-215.3472-271.872c0 118.1696 96.6144 214.3232 215.3472 214.3232 118.784 0 215.3984-96.1536 215.3984-214.3232 0-118.2208-96.6144-214.3232-215.3984-214.3232S216.9344 152.0128 216.9344 270.2336z'
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
getShape () {
|
||||
const attributes = this.getAttributes()
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
x,
|
||||
y,
|
||||
fill,
|
||||
fillOpacity,
|
||||
strokeWidth,
|
||||
stroke,
|
||||
strokeOpacity,
|
||||
points
|
||||
} = attributes
|
||||
const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
|
||||
const pointsPath = points.map(point => point.join(',')).join(' ')
|
||||
return h(
|
||||
'g',
|
||||
{
|
||||
transform
|
||||
},
|
||||
[
|
||||
h(
|
||||
'polygon',
|
||||
{
|
||||
points: pointsPath,
|
||||
fill,
|
||||
stroke,
|
||||
strokeWidth,
|
||||
strokeOpacity,
|
||||
fillOpacity
|
||||
}
|
||||
),
|
||||
this.getIconShape()
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
class Model extends PolygonNodeModel {
|
||||
constructor (data, graphModel) {
|
||||
data.text = {
|
||||
value: (data.text && data.text.value) || '',
|
||||
x: data.x,
|
||||
y: data.y + 50
|
||||
}
|
||||
super(data, graphModel)
|
||||
const lenght = 35
|
||||
this.points = [
|
||||
[lenght, 0],
|
||||
[lenght * 2, lenght],
|
||||
[lenght, lenght * 2],
|
||||
[0, lenght]
|
||||
]
|
||||
// 右键菜单自由配置，也可以通过边的properties或者其他属性条件更换不同菜单
|
||||
this.menu = [
|
||||
{
|
||||
className: 'lf-menu-delete',
|
||||
text: 'delete',
|
||||
callback (node) {
|
||||
// const comfirm = window.confirm('你确定要删除吗？')
|
||||
lf.deleteNode(node.id)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'edit',
|
||||
className: 'lf-menu-item',
|
||||
callback (node) {
|
||||
lf.editNodeText(node.id)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'copy',
|
||||
className: 'lf-menu-item',
|
||||
callback (node) {
|
||||
lf.cloneNode(node.id)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
return {
|
||||
view: Node,
|
||||
model: Model
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import {RectResize} from "@logicflow/extension";
|
||||
import {h} from '@logicflow/core'
|
||||
|
||||
class ResizableRectModel extends RectResize.model {
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
const width = super.width;
|
||||
style.fontSize = width / 10;
|
||||
return style;
|
||||
}
|
||||
|
||||
initNodeData(data) {
|
||||
if (!data.text || typeof data.text === "string") {
|
||||
data.text = {
|
||||
value: data.text || "",
|
||||
x: data.x,
|
||||
y: data.y + 10,
|
||||
};
|
||||
}
|
||||
super.initNodeData(data);
|
||||
this.draggable = false;
|
||||
this.isShowAnchor = false;
|
||||
this.isHitable = false;
|
||||
this.text.draggable = false;
|
||||
this.text.editable = false
|
||||
}
|
||||
}
|
||||
|
||||
class ResizableRectView extends RectResize.view {
|
||||
getResizeShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height, radius, properties} = model;
|
||||
const style = model.getNodeStyle();
|
||||
console.log(model);
|
||||
return h("g", {}, [
|
||||
h("rect", {
|
||||
...style,
|
||||
x: x - width / 2,
|
||||
y: y - height / 2,
|
||||
rx: radius,
|
||||
ry: radius,
|
||||
fill: 'none',
|
||||
width,
|
||||
height
|
||||
}),
|
||||
this.getIconShape()
|
||||
]);
|
||||
}
|
||||
|
||||
getIconShape() {
|
||||
const {model} = this.props;
|
||||
const {x, y, width, height} = model;
|
||||
const style = model.getNodeStyle();
|
||||
return h(
|
||||
"svg",
|
||||
{
|
||||
x: x - width / 2 + 5,
|
||||
y: y - height / 2 + 5,
|
||||
width: 25,
|
||||
height: 25,
|
||||
viewBox: "0 0 1274 1024"
|
||||
},
|
||||
[
|
||||
h("path", {
|
||||
fill: style.stroke,
|
||||
d: 'M913.660512 443.297039L474.753353 70.480459 35.846194 443.297039l-35.549944-40.397665L474.753353-0.026932l474.457104 403.007101zM190.515386 551.481984H136.193993v-258.545053h54.321393v258.545053z m633.13913 0h-54.321393v-258.545053h54.321393v258.545053zM507.313871 962.083846h-149.821472v-53.297985h149.821472v53.297985z m309.44611 0h-133.904792v-53.297985h79.583399V570.549682H84.835095v338.236179h91.945085v53.297985h-146.239546V517.224765h786.219347v444.859081z m-546.71506 61.943086a121.354584 121.354584 0 1 1 123.616854-121.192994 122.620378 122.620378 0 0 1-123.643785 121.112198z m0-189.330388A68.029667 68.029667 0 1 0 339.340382 902.537689a68.729893 68.729893 0 0 0-69.322392-67.92194z m324.096997 189.330388a121.354584 121.354584 0 1 1 123.616853-121.192994 122.620378 122.620378 0 0 1-123.643785 121.112198z m0-189.330388a68.029667 68.029667 0 1 0 69.29546 67.841145 68.729893 68.729893 0 0 0-69.322392-67.92194z m416.688443 189.330388a121.354584 121.354584 0 1 1 123.616854-121.192994 122.620378 122.620378 0 0 1-123.643785 121.112198z m0-189.330388a68.029667 68.029667 0 1 0 69.295461 67.841145 68.729893 68.729893 0 0 0-69.322392-67.92194z m254.828468 96.631214h-135.816948v-53.405713h81.468623v-106.622902h-108.615854V584.742728h-325.874493v-53.324917H1156.989112v186.583346h108.642785v213.218874z m-380.222818 0h-108.642786v-53.405713h108.642786v53.297986z m-172.040188-469.340067h-54.321392v-156.042712h54.321392v156.042712z m-88.309294 1.346589h-130.349798V304.652254h130.349798v158.73589z m-76.001473-53.297985h21.707012v-52.112987h-21.733944v52.112987z m-93.668718 51.978328h-54.348325v-156.069644h54.321393v156.042712z m-88.309295 1.346589H236.703382V304.652254h130.349798v158.73589z m-76.028404-53.297985h21.707011v-52.139919h-21.760875v52.112987z',
|
||||
})
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "strucForm",
|
||||
view: ResizableRectView,
|
||||
model: ResizableRectModel,
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
|
||||
|
||||
class SequenceModel extends PolylineEdgeModel {
|
||||
constructor(data, graphModel) {
|
||||
super(data, graphModel);
|
||||
this.draggable = false;
|
||||
this.text.editable = false
|
||||
}
|
||||
// initNodeData(data) {
|
||||
// super.initEdgeData(data);
|
||||
// }
|
||||
setAttributes() {
|
||||
this.offset = 20;
|
||||
}
|
||||
getAnimation() {
|
||||
const animation = super.getAnimation();
|
||||
animation.stroke = "blue";
|
||||
return animation;
|
||||
}
|
||||
getEdgeStyle() {
|
||||
const style = super.getEdgeStyle();
|
||||
const { properties } = this;
|
||||
if (properties.isActived) {
|
||||
style.strokeDasharray = "4 4";
|
||||
}
|
||||
style.stroke = "black";
|
||||
return style;
|
||||
}
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
style.color = "black";
|
||||
style.fontSize = 16;
|
||||
style.background.fill = "white";
|
||||
return style;
|
||||
}
|
||||
getOutlineStyle() {
|
||||
const style = super.getOutlineStyle();
|
||||
style.stroke = "red";
|
||||
style.hover.stroke = "red";
|
||||
return style;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
type: "sequenceFlow",
|
||||
view: PolylineEdge,
|
||||
model: SequenceModel
|
||||
};
|
||||
Reference in New Issue
Block a user