Skip to content

S
Security
Commit af70d5a2 by xhw
Options

2025年9月10日14:12:31更新

parent 01b5923a
Showing with 702 additions and 183 deletions
css/beautiful.css
...@@ -187,8 +187,8 @@ cursor: pointer; ...@@ -187,8 +187,8 @@ cursor: pointer;
.label_left{ .label_left{
position: absolute; position: absolute;
top: -4px; top: -4px;
left: -60px; left: -55px;
width: 70px; width: 47px;
z-index: -10; z-index: -10;
} }
.label_left:hover{ .label_left:hover{
...@@ -218,6 +218,30 @@ cursor: pointer; ...@@ -218,6 +218,30 @@ cursor: pointer;
opacity: 1; opacity: 1;
} */ } */
.label_input{
display: block;
width: 60px;
/* height: 25px; */
/* background-color: blanchedalmond; */
position: absolute;
top: -2px;
left: 43px;
font-size: 12px;
}
.label_output{
display: block;
width: 50px;
/* height: 25px; */
/* background-color: blanchedalmond; */
position: absolute;
top: -1px;
left: -45px;
font-size: 12px;
}
/* Editing Drawflow */ /* Editing Drawflow */
...@@ -230,7 +254,7 @@ cursor: pointer; ...@@ -230,7 +254,7 @@ cursor: pointer;
width: 200px; width: 200px;
} }
.pink{ /* .pink{
stroke: pink !important; stroke: pink !important;
} }
.skyblue{ .skyblue{
...@@ -238,7 +262,7 @@ cursor: pointer; ...@@ -238,7 +262,7 @@ cursor: pointer;
} }
.green{ .green{
stroke: green !important; stroke: green !important;
} } */
.drawflow .drawflow-node.selected { .drawflow .drawflow-node.selected {
background: white; background: white;
...@@ -263,10 +287,65 @@ cursor: pointer; ...@@ -263,10 +287,65 @@ cursor: pointer;
border: 2px solid var(--border-color); border: 2px solid var(--border-color);
} }
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { /* .drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover {
background: #4ea9ff; background: #4ea9ff;
} */
/* 设置input output伪类颜色 */
.drawflow .drawflow-node .inputs .input_roleCard,.drawflow .drawflow-node .outputs .output_roleCard{
background: #cc99ff;
}
.drawflow .drawflow-node .inputs .input_string{
background: #ff99cc;
}
.drawflow .drawflow-node .inputs .input_worldState{
background: #0505ff;
}
.drawflow .drawflow-node .inputs .input_numVal{
background: #99ccff;
}
.drawflow .drawflow-node .inputs .input_bool,.drawflow .drawflow-node .outputs .output_bool{
background: #00ff00;
}
.drawflow .drawflow-node .inputs .input_eventCard-startCard,.drawflow .drawflow-node .outputs .output_startCard{
/* background: #ffcc00; */
background: #800080;
}
.drawflow .drawflow-node .inputs .input_midea{
/* 暂无颜色定义 */
}
.drawflow .drawflow-node .inputs .input_eventCard, .drawflow .drawflow-node .outputs .output_eventCard{
background: #ffcc00;
} }
.input_roleCard{
stroke: #cc99ff !important;
}
.input_string{
stroke: #ff99cc !important;
}
.input_worldState{
stroke: #0505ff !important;
}
.input_numVal{
stroke: #99ccff !important;
}
.input_bool{
stroke: #00ff00 !important;
}
.input_eventCard-startCard{
stroke: #800080 !important;
}
.input_midea{
/* 暂无颜色定义 */
}
.input_eventCard{
stroke: #ffcc00 !important;
}
.drawflow .drawflow-node .output { .drawflow .drawflow-node .output {
right: 10px; right: 10px;
} }
...@@ -303,6 +382,12 @@ cursor: pointer; ...@@ -303,6 +382,12 @@ cursor: pointer;
.drawflow .title-box svg { .drawflow .title-box svg {
position: initial; position: initial;
} }
.xhw_wrapper{
min-height: 200px;
}
.xhw1{
text-align: center;
}
.drawflow-node .box { .drawflow-node .box {
padding: 10px 20px 20px 20px; padding: 10px 20px 20px 20px;
font-size: 14px; font-size: 14px;
......
css/drawflow.min.css
.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px} .drawflow,
\ No newline at end of file .drawflow .parent-node {
position: relative
}
.parent-drawflow {
display: flex;
overflow: hidden;
touch-action: none;
outline: 0
}
.drawflow {
width: 100%;
height: 100%;
user-select: none
}
.drawflow .drawflow-node {
display: flex;
align-items: center;
position: absolute;
background: #0ff;
width: 160px;
min-height: 40px;
border-radius: 4px;
border: 2px solid #000;
color: #000;
z-index: 2;
padding: 15px
}
.drawflow .drawflow-node.selected {
background: red
}
.drawflow .drawflow-node:hover {
cursor: move
}
.drawflow .drawflow-node .inputs,
.drawflow .drawflow-node .outputs {
width: 0
}
.drawflow .drawflow-node .drawflow_content_node {
width: 100%;
display: block
}
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
position: relative;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
border: 2px solid #000;
cursor: crosshair;
z-index: 1;
margin-bottom: 5px
}
.drawflow .drawflow-node .input {
left: -27px;
top: 2px;
background: #ff0
}
.drawflow .drawflow-node .output {
right: -3px;
top: 2px
}
.drawflow svg {
z-index: 0;
position: absolute;
overflow: visible !important
}
.drawflow .connection {
position: absolute;
pointer-events: none
}
.drawflow .connection .main-path {
fill: none;
stroke-width: 5px;
stroke: #4682b4;
pointer-events: all
}
.drawflow .connection .main-path:hover {
stroke: #1266ab;
cursor: pointer
}
.drawflow .connection .main-path.selected {
stroke: #43b993
}
.drawflow .connection .point {
cursor: move;
stroke: #000;
stroke-width: 2;
fill: #fff;
pointer-events: all
}
.drawflow .connection .point.selected,
.drawflow .connection .point:hover {
fill: #1266ab
}
.drawflow .main-path {
fill: none;
stroke-width: 5px;
stroke: #4682b4
}
.drawflow-delete {
position: absolute;
display: block;
width: 30px;
height: 30px;
background: #000;
color: #fff;
z-index: 4;
border: 2px solid #fff;
line-height: 30px;
font-weight: 700;
text-align: center;
border-radius: 50%;
font-family: monospace;
cursor: pointer
}
.drawflow>.drawflow-delete {
margin-left: -15px;
margin-top: 15px
}
.parent-node .drawflow-delete {
right: -15px;
top: -15px
}
\ No newline at end of file
css/style.css
...@@ -13,23 +13,15 @@ html, body { ...@@ -13,23 +13,15 @@ html, body {
.svgIcon_left{ .svgIcon_left{
position: absolute; position: absolute;
top: -13px; top: -4px;
left: -13px; left: 16px;
} cursor: default;
.svgIcon_left:hover{
cursor: pointer;
transform: scale(1.1);
transition: all 0.2s ease;
} }
.svgIcon_right{ .svgIcon_right{
position: absolute; position: absolute;
top: -13px; top: -4px;
right: -13px; left: -26px;
} cursor: default;
.svgIcon_right:hover{
cursor: pointer;
transform: scale(1.1);
transition: all 0.2s ease;
} }
#customContextMenu { #customContextMenu {
......
index.html
...@@ -209,10 +209,14 @@ ...@@ -209,10 +209,14 @@
<i class="fas fa-plus-circle"></i> 起始卡片 <i class="fas fa-plus-circle"></i> 起始卡片
</div> </div>
<div class="menu-item hasChildren" data-action="eventCard"> <div class="menu-item" data-action="roleCard">
<i class="fas fa-plus-circle"></i> 角色卡片
</div>
<div class="menu-item" data-action="eventCard">
<i class="fas fa-plus-circle"></i> 事件卡片 <i class="fas fa-plus-circle"></i> 事件卡片
<!-- 子菜单 --> <!-- 子菜单 -->
<div class="submenu"> <!-- <div class="submenu">
<div class="menu-item hasChildren" data-action="eventCard-attack"> <div class="menu-item hasChildren" data-action="eventCard-attack">
<i class="fas fa-plus-circle"></i> 攻击事件 <i class="fas fa-plus-circle"></i> 攻击事件
<div class="submenu"> <div class="submenu">
...@@ -222,13 +226,13 @@ ...@@ -222,13 +226,13 @@
</div> </div>
<div class="menu-item" data-action="eventCard-defend"><i class="fas fa-shield-alt"></i> 防御事件</div> <div class="menu-item" data-action="eventCard-defend"><i class="fas fa-shield-alt"></i> 防御事件</div>
<div class="menu-item" data-action="eventCard-story"><i class="fas fa-book-open"></i> 剧情事件</div> <div class="menu-item" data-action="eventCard-story"><i class="fas fa-book-open"></i> 剧情事件</div>
</div> </div> -->
</div> </div>
<div class="menu-item hasChildren" data-action="conditionCard"> <div class="menu-item hasChildren" data-action="conditionCard">
<i class="fas fa-plus-circle"></i> 条件卡片 <i class="fas fa-plus-circle"></i> 条件卡片
<div class="submenu"> <div class="submenu">
<div class="menu-item" data-action="conditionCard-huo"> <i class="fas fa-plus-circle"></i> 或事件 </div> <div class="menu-item" data-action="conditionCard-huo"><i class="fas fa-plus-circle"></i> 或事件 </div>
<div class="menu-item" data-action="conditionCard-yu"><i class="fas fa-shield-alt"></i> 与事件</div> <div class="menu-item" data-action="conditionCard-yu"><i class="fas fa-shield-alt"></i> 与事件</div>
<div class="menu-item" data-action="conditionCard-fei"><i class="fas fa-book-open"></i> 非事件</div> <div class="menu-item" data-action="conditionCard-fei"><i class="fas fa-book-open"></i> 非事件</div>
</div> </div>
...@@ -242,40 +246,129 @@ ...@@ -242,40 +246,129 @@
<script> <script>
class MyNodes { class MyNodes {
constructor(input, output) { constructor(input, output,timerId) {
if(!input){
return
}
this.input = input; this.input = input;
this.output = output; this.output = output;
//保存左右两侧输入输出的属性 this.inputs = [];
this.left_string,this.left_int,this.left_bool; this.outputs = [];
this.right_string,this.right_int,this.right_bool; this.timerId = timerId;
//连接点总长度 this.inputDom = []
this.totalLength = this.output.length+this.input.length; this.outputDom = []
// this.totalLength = this.output.length+this.input.length;
if(this.input.length>0){ this.refrashGetInputs()
this.input.forEach(item=> { this.refrashGetOutputs()
if(item=="string"){ }
this.left_string = item
}else if(item=="int"){ static fromObject(obj) {
this.left_int = item const nodes = new MyNodes();
}else if(item=="bool"){ Object.assign(nodes, obj);
this.left_bool = item return nodes;
}
refrashGetInputs() {
this.input.forEach((item,index)=>{
// console.log(item)
if(item.isVar){
for(let i=0;i<item.count;i++){
this.inputs.push(item.type + '_' + (item.label + (i+1)) + '_' + item.isVar + '_' + index)
}
}else{
// this.inputs = this.inputs.concat(item.label)
for(let i=0;i<item.count;i++){
this.inputs.push(item.type + '_' + item.label)
}
} }
}) })
} }
if(this.output.length>0){ refrashGetOutputs() {
this.output.forEach(item=> { this.output.forEach((item,index)=>{
if(item=="string"){ if(item.isVar){
this.right_string = item // for(let i=0;i<item.count;i++){
}else if(item=="int"){ // this.outputs.push(item.type + '_' + (item.label + (i+1)) + '_' + item.isVar + '_' + index)
this.right_int = item // }
}else if(item=="bool"){ }else{
this.right_bool = item // this.outputs.push(item.type + '_' + item.label + '_' + item.isVar)
// this.outputs = this.outputs.concat(item.type)
for(let i=0;i<item.count;i++){
this.outputs.push(item.type + '_' + item.label)
}
} }
}) })
} }
getIndexIoType_input(index){
return this.input[this.inputs[index].split("_")[3]]
}
getrealInput(data){
for(const item in this.input){
if(data==item){
return item
}
}
return null
}
}
class IoType {
constructor(io,type,label,isArray,isVar,count) {
this.io=io; //端子类型，输入或输出
this.type = type; //传入的数据类型
this.label = label; //端子标签文本
this.isArray = isArray; //是否为数组
this.isVar = isVar; //是否为可变参量
this.count = count; //传入的可变参数量
this.getAttribute()
// 处理左右端子的绑定事件
setTimeout(() => {
//根据传入的端子类型 绑定事件
if(this.io=="input"){
}else if(this.io=="output"){
// console.log(document.getElementById("output_"+id))
// const targetElement = document.getElementById(this.id).parentElement.nextElementSibling.childNodes
// console.log(targetElement)
// targetElement.forEach(item=>{
// item.addEventListener('contextmenu', function (e) {
// e.preventDefault(); // 阻止默认的右键菜单
// e.stopPropagation(); // 阻止事件冒泡，防止触发父级元素的右键菜单
// console.log(e.target);
// });
// })
// targetElement.addEventListener('contextmenu', function (e) {
// e.preventDefault(); // 阻止默认的右键菜单
// e.stopPropagation(); // 阻止事件冒泡，防止触发父级元素的右键菜单
// console.log(this); // 这里打印的是触发事件的元素（即端子）
// showMenu(e.clientX, e.clientY);
// });
}
// console.log(document.getElementById(this.id).parentElement.previousSibling)
// console.log(document.getElementById(this.id).parentElement.nextElementSibling)
// document.getElementById(this.id).addEventListener('contextmenu', function(e){
// e.preventDefault();
// e.stopPropagation();
// console.log(e)
// });
}, 100);
} }
getAttribute(){
// console.log(this.label)
//获取当前元素 label的 定位
} }
}
window.onload = function() { window.onload = function() {
rightMenu() rightMenu()
...@@ -371,28 +464,30 @@ ...@@ -371,28 +464,30 @@
const output_class = connection.output_class const output_class = connection.output_class
const input_index = parseInt(input_class.split("_")[1]) const input_index = parseInt(input_class.split("_")[1])
const output_index = parseInt(output_class.split("_")[1]) const output_index = parseInt(output_class.split("_")[1])
const name = editor.getNodeFromId(output_id).name // const name = editor.getNodeFromId(output_id).name
console.log(name) // console.log(name)
console.log(editor.getNodeFromId(input_id)) // console.log(editor.getNodeFromId(input_id))
// console.log(editor.getNodeFromId(output_id)) // console.log(editor.getNodeFromId(output_id))
// console.log(input_index,output_index) // console.log(input_index,output_index)
//对比输入输出的数据类型 //对比输入输出的数据类型
//得到对应的数据类型 //得到对应的数据类型
const dataType_output = editor.getNodeFromId(output_id).data.node.output[output_index - 1]
const dataType_input = editor.getNodeFromId(input_id).data.node.input[input_index - 1] const outputId = editor.getNodeFromId(output_id)
//得到当前端点的链接数组数据 const inputId = editor.getNodeFromId(input_id)
const currentOutput = editor.getNodeFromId(input_id).inputs[input_class].connections
console.log(currentOutput) const dataType_output = outputId.data.node.outputs[output_index - 1].split("_")[0]
// console.log(dataType_output,dataType_input) const dataType_input = inputId.data.node.inputs[input_index - 1].split("_")[0]
if(dataType_output != dataType_input){
console.log(dataType_output,dataType_input)
if(!dataType_input.includes(dataType_output)){
editor.removeSingleConnection(output_id, input_id, output_class, input_class) editor.removeSingleConnection(output_id, input_id, output_class, input_class)
} }
// console.log(editor.getNodeFromId(output_id))
// console.log(editor.getNodeFromId(input_id))
// 对于条件卡片，只允许一个输入端点连接 // 对于条件卡片，只允许一个输入端点连接
//得到当前端点的链接数组数据
const currentOutput = editor.getNodeFromId(input_id).inputs[input_class].connections
if(currentOutput.length>1){ if(currentOutput.length>1){
editor.removeSingleConnection(output_id, input_id, output_class, input_class) editor.removeSingleConnection(output_id, input_id, output_class, input_class)
} }
...@@ -505,12 +600,23 @@ ...@@ -505,12 +600,23 @@
} }
} }
function onClickSvgIcon_left(args){ function onClickSvgIcon_left(id,args){
// console.log(args)
// console.log(id,args.parentElement.parentElement)
// console.log(args.parentElement.parentElement.IOtype)
// console.log(args.parentElement.parentElement.id.slice(5)) // console.log(args.parentElement.parentElement.id.slice(5))
const id = args.parentElement.parentElement.id.slice(5) // const Id = args.parentElement.parentElement.id.slice(5)
editor.addNodeInput(id)
//增加端点 data数据添加进去
// const node = editor.getNodeFromId(id).data.node
// node.input.push(new IoType('input','bool',true,'条件',true))
// console.log(node)
// editor.updateNodeDataFromId( Id, { node } )
editor.addNodeInput(id)
// console.log(editor.getNodeFromId(Id))
} }
function onClickSvgIcon_right(args){ function onClickSvgIcon_right(args){
const id = args.parentElement.parentElement.id.slice(5) const id = args.parentElement.parentElement.id.slice(5)
editor.addNodeOutput(id) editor.addNodeOutput(id)
...@@ -623,7 +729,6 @@ ...@@ -623,7 +729,6 @@
`; `;
editor.addNode('email', 1, 0, pos_x, pos_y, 'email', {}, email ); editor.addNode('email', 1, 0, pos_x, pos_y, 'email', {}, email );
break; break;
case 'template': case 'template':
var template = ` var template = `
<div> <div>
...@@ -679,7 +784,7 @@ ...@@ -679,7 +784,7 @@
} }
} }
function addNodeToDrawFlow_A(name, pos_x, pos_y,conditionType){ function addNodeToDrawFlow_A(name, pos_x, pos_y,type){
console.log(name, pos_x, pos_y) console.log(name, pos_x, pos_y)
if(editor.editor_mode === 'fixed') { if(editor.editor_mode === 'fixed') {
return false; return false;
...@@ -804,92 +909,127 @@ ...@@ -804,92 +909,127 @@
editor.addNode('personalized', 1, 1, pos_x, pos_y, 'personalized', {}, personalized ); editor.addNode('personalized', 1, 1, pos_x, pos_y, 'personalized', {}, personalized );
break; break;
case 'dbclick': case 'dbclick':
var timer = 'svg' + new Date().getTime() const timer = 'svg' + new Date().getTime()
var dbclick = ` const dbclick = `
<div id=${timer}> <div id=${timer} class="xhw_wrapper">
<div class="title-box" style="">${conditionType=="conditionCard-fei"?"非":conditionType=="conditionCard-huo"?"或":"与"}</div> <h3 class="xhw1">${type=="conditionCard-huo"?"条件·或":type=="conditionCard-yu"?"条件·与":"条件·非" }</h3>
<div class="box dbclickbox"> <div>
${conditionType=='conditionCard-fei'?'':' <svg t="1754546984413" onClick="onClickSvgIcon_left( ' + timer + ' )" id="" class="icon svgIcon_left" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7170" width="24" height="24"><path d="M512 942C274.9 942 82 749.11 82 512 82 274.9 274.9 82 512 82c237.11 0 430 192.9 430 430 0 237.11-192.89 430-430 430z m0-800c-204.02 0-370 165.98-370 370s165.98 370 370 370 370-165.98 370-370-165.98-370-370-370z" p-id="7171" fill="#8a8a8a"></path><path d="M512 768.27c-16.57 0-30-13.44-30-30V285.73c0-16.57 13.43-30 30-30s30 13.43 30 30v452.54c0 16.56-13.43 30-30 30z" p-id="7172" fill="#8a8a8a"></path><path d="M738.27 542H285.73c-16.57 0-30-13.43-30-30s13.43-30 30-30h452.54c16.56 0 30 13.43 30 30s-13.44 30-30 30z" p-id="7173" fill="#8a8a8a"></path></svg> '}
<div class="attrs" attr_left="bool bool bool" attr_right="no yes"></div>
</div> </div>
</div> </div>
`; `;
const node = new MyNodes(
[
new IoType('input','bool','条件',false,true,3)
],
[
new IoType('output','bool','满足',false,false,1),
new IoType('output','bool','不满足',false,false,1)
],
timer
)
editor.addNode('dbclick', node.inputs.length, node.outputs.length, pos_x, pos_y, 'dbclick',
{ node },dbclick,false);
editor.addNode('dbclick', conditionType=="conditionCard-fei"?1:3, 2, pos_x, pos_y, 'dbclick', {"node":new MyNodes(['bool','bool','bool'],['bool','bool'])}, dbclick );
break; break;
case 'startCard':
const startCard = `
<div class="xhw_wrapper">
<h3 class="xhw1">起始卡</h3>
<div>
</div>
</div>
`;
const node_start = new MyNodes(
[
new IoType('input','roleCard','角色卡',false,false,1),
new IoType('input','string','特别说明',false,false,1),
new IoType('input','worldState','世界状态',false,false,1),
new IoType('input','numVal','时间',false,false,1),
new IoType('input','string','场景',false,false,1)
],
[
new IoType('output','startCard','起始卡',false,false,1)
]
)
editor.addNode('startCard', node_start.inputs.length, node_start.outputs.length, pos_x, pos_y, 'startCard',
{ node:node_start },startCard,false);
default: break;
} case 'eventCard':
const eventCard = `
// console.log(document.getElementsByClassName("input")) <div class="xhw_wrapper">
// console.log(document.getElementsByClassName("output")) <h3 class="xhw1">事件卡</h3>
const input = document.getElementsByClassName("input") <div>
const output = document.getElementsByClassName("output") </div>
</div>
for(let i = 0; i < input.length; i++ ){ `;
input[i].addEventListener('contextmenu', function(e){ const node_event = new MyNodes(
e.preventDefault(); [
e.stopPropagation() new IoType('input','bool','前置条件',false,false,1),
console.log(e.target.classList[1]) new IoType('input','string','事件内容',false,false,1),
// console.log(e.target.parentElement.parentElement.id.slice(5)) new IoType('input','worldState','世界状态',false,false,1),
const data = e.target.parentElement.parentElement.id.slice(5) new IoType('input','eventCard-startCard','前因',false,false,1)
const inputOroutput = e.target.classList[0] ],
const currentPoint = parseInt(e.target.classList[1].split('_')[1]) [
// console.log(currentPoint) new IoType('output','eventCard','事件卡',false,false,1)
// console.log(e.target.classList[0],e.target.classList[1]) ]
// console.log(editor.getNodeFromId(data)) )
editor.addNode('eventCard', node_event.inputs.length, node_event.outputs.length, pos_x, pos_y, 'eventCard',
if(inputOroutput == "input"){
//拿到另一端的class id 进行删除 arr长度代表要删除的线段个数 { node:node_event },eventCard,false);
const arr = editor.getNodeFromId(data).inputs[e.target.classList[1]].connections
// console.log(arr)
for(let j = 0; j < arr.length; j++ ){
// console.log(data,arr[j].node,e.target.classList[1],arr[j].input)
editor.removeSingleConnection(arr[j].node, data, arr[j].input, e.target.classList[1])
e.target.remove();
}
}
});
}
// for(let i = 0; i < output.length; i++ ){
// output[i].addEventListener('contextmenu', function(e){
// e.preventDefault();
// e.stopPropagation()
// console.log(e.target.classList[1])
// const data = e.target.parentElement.parentElement.id.slice(5)
// const outputOroutput = e.target.classList[0]
// const currentPoint = parseInt(e.target.classList[1].split('_')[1])
// console.log(currentPoint)
// console.log(e.target.classList[0],e.target.classList[1])
// console.log(editor.getNodeFromId(data))
// if(outputOroutput == "output"){
// //拿到另一端的class id 进行删除 arr长度代表要删除的线段个数
// const arr = editor.getNodeFromId(data).outputs[e.target.classList[1]].connections
// console.log(arr)
// for(let j = 0; j < arr.length; j++ ){
// console.log(arr[j].node, data, arr[j].output, e.target.classList[1])
// editor.removeSingleConnection( data, arr[j].node, e.target.classList[1],arr[j].output)
// e.target.remove();
// }
// }
// });
// }
break;
case 'roleCard':
const roleCard = `
<div class="xhw_wrapper">
<h3 class="xhw1">角色卡</h3>
<div>
</div>
</div>
`;
const node_role = new MyNodes(
[
new IoType('input','string','名称',false,false,1),
new IoType('input','bool','是否是主角',false,false,1),
new IoType('input','string','背景',false,false,1),
new IoType('input','numVal','生命体征',false,false,1)
],
[
new IoType('output','roleCard','角色卡',false,false,1)
]
)
editor.addNode('eventCard', node_role.inputs.length, node_role.outputs.length, pos_x, pos_y, 'eventCard',
{ node:node_role },roleCard,false);
break;
case 'endCard':
const endCard = `
<div class="xhw_wrapper">
<h3 class="xhw1">结局卡</h3>
<div>
</div>
</div>
`;
const node_end = new MyNodes(
[
new IoType('input','string','标题',false,false,1),
new IoType('input','string','描述',false,false,1),
new IoType('input','midea','媒体',false,false,1),
new IoType('input','eventCard','起因事件',false,false,1)
],
[
// new IoType('output','bool','满足',false,false,1)
]
)
editor.addNode('endCard', node_end.inputs.length, node_end.outputs.length, pos_x, pos_y, 'endCard',
{ node:node_end },endCard,false);
for(let i = 0; i < output.length; i++ ){ break;
output[i].addEventListener('contextmenu', function(e){ default:
e.preventDefault();
e.stopPropagation()
// console.log(e.target)
//删除当前连接点前 如果有线段连接则去除
// e.target.remove();
});
} }
} }
......
js/drawflow.min.js
...@@ -531,7 +531,7 @@ ...@@ -531,7 +531,7 @@
// console.log(e) // console.log(e)
// console.log(this.connection_ele) // console.log(this.connection_ele)
//获取类名来判断点击的是第几项 //获取类名来判断点击的是第几项
const currentIndex = e.classList[1].split("_")[1] const currentIndex = parseInt(e.classList[1].split("_")[1])
// console.log(currentIndex) // console.log(currentIndex)
var n = document.createElementNS("http://www.w3.org/2000/svg", "path"); var n = document.createElementNS("http://www.w3.org/2000/svg", "path");
...@@ -545,14 +545,30 @@ ...@@ -545,14 +545,30 @@
, s = e.classList[1]; , s = e.classList[1];
// console.log(this.getNodeFromId(i),i) // console.log(this.getNodeFromId(i),i)
//获取对应数据类型 给连接线段添加颜色 //获取对应数据类型 给连接线段添加颜色
const dataType = this.getNodeFromId(i).data.node.output[currentIndex - 1] const dataType = this.getNodeFromId(i).data.node.output[currentIndex - 1].type
console.log(dataType)
if(dataType === "string"){ if(dataType === "string"){
n.classList.add("pink") n.classList.add("input_string")
}else if(dataType === "int"){ }else if(dataType === "startCard"){
n.classList.add("skyblue") n.classList.add("input_eventCard-startCard")
}else if(dataType === "bool"){ }else if(dataType === "bool"){
n.classList.add("green") n.classList.add("input_bool")
}else if(dataType === "worldState"){
n.classList.add("input_bool")
}else if(dataType === "numVal"){
n.classList.add("input_numVal")
}else if(dataType === "eventCard-startCard"){
n.classList.add("input_eventCard-startCard")
}else if(dataType === "midea"){
n.classList.add("input_midea")
}else if(dataType === "eventCard"){
n.classList.add("input_eventCard")
}else if(dataType === "roleCard"){
n.classList.add("input_roleCard")
} }
this.dispatch("connectionStart", { this.dispatch("connectionStart", {
output_id: i, output_id: i,
output_class: s output_class: s
...@@ -896,7 +912,8 @@ ...@@ -896,7 +912,8 @@
} }
getNodeFromId(e) { getNodeFromId(e) {
var t = this.getModuleFromNodeId(e); var t = this.getModuleFromNodeId(e);
return JSON.parse(JSON.stringify(this.drawflow.drawflow[t].data[e])) // console.log(JSON.parse(JSON.stringify(this.drawflow.drawflow[t].data[e])))
return this.drawflow.drawflow[t].data[e]
} }
getNodesFromName(e) { getNodesFromName(e) {
var t = []; var t = [];
...@@ -924,26 +941,71 @@ ...@@ -924,26 +941,71 @@
u.classList.add("inputs"); u.classList.add("inputs");
const p = document.createElement("div"); const p = document.createElement("div");
p.classList.add("outputs"); p.classList.add("outputs");
const f = {}; const f = {};
const g = {};
const attrObj_inputs = l.node.inputs
const attrObj_outputs = l.node.outputs
// const startCard = l.node.startCard
for (var m = 0; m < t; m++) { for (var m = 0; m < t; m++) {
const e = document.createElement("div"); const e_input = document.createElement("div");
e.classList.add("input"), e_input.classList.add("input"),
e.classList.add("input_" + (m + 1)), e_input.classList.add("input_" + (m + 1)),
e_input.classList.add("input_" + attrObj_inputs[m].split("_")[0]),
f["input_" + (m + 1)] = { f["input_" + (m + 1)] = {
connections: [] connections: []
}, },
u.appendChild(e) u.appendChild(e_input)
const label = document.createElement("label")
if(e=="dbclick"){
label.textContent = attrObj_inputs[m].split('_')[1]
label.className = "label_input"
e_input.appendChild(label)
// e.index = parseInt(attrObj_inputs[m].split("_")[1].match(/\d+/g)[0]) //条件后面的数字
if(attrObj_inputs[m].split('_')[2]=="true"&& /^(?!.*11).*1/.test(attrObj_inputs[m].split('_')[1]) ){
//是可变参
var div = document.createElement("div")
div.innerHTML = '<svg onClick="onClickSvgIcon_left('+ a +',this )" t="1754546984413" class="icon svgIcon_left" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7170" width="24" height="24"><path d="M512 942C274.9 942 82 749.11 82 512 82 274.9 274.9 82 512 82c237.11 0 430 192.9 430 430 0 237.11-192.89 430-430 430z m0-800c-204.02 0-370 165.98-370 370s165.98 370 370 370 370-165.98 370-370-165.98-370-370-370z" p-id="7171" fill="#8a8a8a"></path><path d="M512 768.27c-16.57 0-30-13.44-30-30V285.73c0-16.57 13.43-30 30-30s30 13.43 30 30v452.54c0 16.56-13.43 30-30 30z" p-id="7172" fill="#8a8a8a"></path><path d="M738.27 542H285.73c-16.57 0-30-13.43-30-30s13.43-30 30-30h452.54c16.56 0 30 13.43 30 30s-13.44 30-30 30z" p-id="7173" fill="#8a8a8a"></path></svg>'
e_input.appendChild(div)
}
l.node.inputDom.push(e_input)
}else{
label.textContent = attrObj_inputs[m].split('_')[1]
label.className = "label_input"
e_input.appendChild(label)
}
} }
const g = {};
for (m = 0; m < n; m++) { for (m = 0; m < n; m++) {
const e = document.createElement("div"); const e_output = document.createElement("div");
e.classList.add("output"), e_output.classList.add("output"),
e.classList.add("output_" + (m + 1)), e_output.classList.add("output_" + (m + 1)),
e_output.classList.add("output_" + attrObj_outputs[m].split("_")[0]),
g["output_" + (m + 1)] = { g["output_" + (m + 1)] = {
connections: [] connections: []
}, },
p.appendChild(e) p.appendChild(e_output)
const label = document.createElement("label")
if(e=="dbclick"){
label.textContent = attrObj_outputs[m].split('_')[1]
label.className = "label_output"
e_output.appendChild(label)
// if(attrObj_outputs[m].split('_')[2]=="true"&& /^(?!.*11).*1/.test(attrObj_outputs[m].split('_')[1]) ){
// //是可变参
// var div = document.createElement("div")
// div.innerHTML = '<svg onClick="onClickSvgIcon_left('+ a +',this )" t="1754546984413" class="icon svgIcon_left" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7170" width="24" height="24"><path d="M512 942C274.9 942 82 749.11 82 512 82 274.9 274.9 82 512 82c237.11 0 430 192.9 430 430 0 237.11-192.89 430-430 430z m0-800c-204.02 0-370 165.98-370 370s165.98 370 370 370 370-165.98 370-370-165.98-370-370-370z" p-id="7171" fill="#8a8a8a"></path><path d="M512 768.27c-16.57 0-30-13.44-30-30V285.73c0-16.57 13.43-30 30-30s30 13.43 30 30v452.54c0 16.56-13.43 30-30 30z" p-id="7172" fill="#8a8a8a"></path><path d="M738.27 542H285.73c-16.57 0-30-13.43-30-30s13.43-30 30-30h452.54c16.56 0 30 13.43 30 30s-13.44 30-30 30z" p-id="7173" fill="#8a8a8a"></path></svg>'
// e.appendChild(div)
// }
l.node.outputDom.push(e_output)
}else{
label.textContent = attrObj_outputs[m].split('_')[1]
label.className = "label_output"
e_output.appendChild(label)
}
} }
const _ = document.createElement("div"); const _ = document.createElement("div");
if (_.classList.add("drawflow_content_node"), if (_.classList.add("drawflow_content_node"),
!1 === d) !1 === d)
...@@ -994,30 +1056,56 @@ ...@@ -994,30 +1056,56 @@
h.style.left = i + "px", h.style.left = i + "px",
r.appendChild(h), r.appendChild(h),
this.precanvas.appendChild(r); this.precanvas.appendChild(r);
// console.log($(".attrs"))
// console.log($(".attrs").attr("attr_left")) Array.from(u.children).forEach((item)=>{
// console.log($(".attrs").attr("attr_right"))
// $(".attrs").each(function(item) {
// console.log(item) // console.log(item)
// var e = $(this).attr("attr_left"); item.children[0].innerHTML.includes("条件") && item.addEventListener("contextmenu", (ev)=> {
// var t = $(this).attr("attr_right"); //阻止浏览器默认的右键菜单
// }); ev.preventDefault()
const arr_input = $(".attrs").parents().parents().parents().parents().find(".inputs").children() ev.stopPropagation()
const arr_output = $(".attrs").parents().parents().parents().parents().find(".outputs").children() // console.log(ev.target)
console.log(e) if(Array.from(ev.target.classList).includes("input_1")){
console.log(arr_input) return
arr_input.each(function(item){ }
console.log($(this)) console.log('右键删除节点',ev.target.classList[1])
if($(this).find(".label_left").length == 0){ // console.log(ev.target.classList[1])
$(this).append(`<label class='label_left'>条件${item}</label>`) const classList = ev.target.classList[1]
const data = this.getNodeFromId(a).data.node
//删除inputs数据
data.inputs.splice((classList.split("_")[1]-1),1)
//同步count数量
data.input.forEach((item,index)=>{
//每种类型只会循环一遍
if(item.type=="bool"){
--item.count;
} }
}) })
arr_output.each(function(item){ data.refrashGetInputs()
console.log($(this).find(".label_right")) //数据层重新排序inputs
if($(this).find(".label_right").length == 0){ data.inputs.forEach((item,index)=>{
$(this).append(`<label class='label_right'>${(item+1)%2==0?'满足':'不满足'}</label>`) //删除重新编号
const current = item.split("_")[1]
const currentText = current.replace(/[^\u4E00-\u9FA5]/g,'')
const currentIndex = current.replace(/[^\d]/g,'')
item = item.replace(current, currentText + currentIndex)
// console.log(current,currentText,currentIndex,item)
})
l.node.inputDom.forEach((val,index)=>{
if(val.classList[1]==item.classList[1]){
//删除当前
l.node.inputDom.splice(index,1)
} }
}) })
//如果有线段连接 删除线段 在删除当前的端点
this.removeNodeInput(a,classList)
//遍历dom 修改条件数据
data.inputDom.forEach((item,index)=>{
item.children[0].textContent = '条件' + (index+1)
})
}, false);
})
var w = { var w = {
id: a, id: a,
...@@ -1200,20 +1288,82 @@ ...@@ -1200,20 +1288,82 @@
)) ))
} }
} }
addNodeInput(e) { addNodeInput(e,data) {
var t = this.getModuleFromNodeId(e); var t = this.getModuleFromNodeId(e);
const n = this.getNodeFromId(e) const n = this.getNodeFromId(e)
, i = Object.keys(n.inputs).length; , i = Object.keys(n.inputs).length;
// console.log(e,data,t,n)
if (this.module === t) { if (this.module === t) {
const t = document.createElement("div"); const t = document.createElement("div");
t.classList.add("input"), t.classList.add("input"),
t.classList.add("input_" + (i + 1)); t.classList.add("input_" + (i + 1));
this.container.querySelector("#node-" + e + " .inputs").appendChild(t), this.container.querySelector("#node-" + e + " .inputs").appendChild(t),
this.updateConnectionNodes("node-" + e) this.updateConnectionNodes("node-" + e)
// console.log(n.data.node,t)
n.data.node.inputDom.push(t)
// n.data.node.inputs.push()
for(let k = 0; k < n.data.node.input.length; k++) {
//一种类型只会循环一次
if(n.data.node.input[k].type=="bool"){
//同步更新数据
n.data.node.inputs.push(`bool_${n.data.node.input[k].label+(n.data.node.input[k].count+1)}_true_0`)
++n.data.node.input[k].count;
//创建label
const label = document.createElement("label")
label.textContent = n.data.node.input[k].label + (n.data.node.input[k].count)
label.className = "label_input"
t.appendChild(label)
}
t.addEventListener("contextmenu", (event)=> {
event.preventDefault()
event.stopPropagation()
n.data.node.inputDom.forEach((item,index)=>{
if(item.classList[1]==t.classList[1]){
//删除当前
n.data.node.inputDom.splice(index,1)
}
})
this.removeNodeInput(e,t.classList[1])
// node.refrashGetInputs()
// this.updateNodeDataFromId( e, { node } )
console.log(t.classList[1].split("_")[1])
//数据层删除
this.getNodeFromId(e).data.node.inputs.splice((t.classList[1].split("_")[1] -1),1)
this.getNodeFromId(e).data.node.input.forEach(item=>{
//一种类型只会循环一次
if(item.type=="bool"){
--item.count;
}
})
this.getNodeFromId(e).data.node.refrashGetInputs()
this.getNodeFromId(e).data.node.inputs.forEach((item,index)=>{
//删除重新编号
const current = item.split("_")[1]
const currentText = current.replace(/[^\u4E00-\u9FA5]/g,'')
const currentIndex = current.replace(/[^\d]/g,'')
item = item.replace(current, currentText + currentIndex)
console.log(current,currentText,currentIndex,item)
})
// console.log(n.data.node.inputDom)
//遍历dom 修改条件数据
n.data.node.inputDom.forEach((item,index)=>{
console.log(item.children[0])
item.children[0].textContent = '条件' + (index+1)
})
}, false);
}
} }
this.drawflow.drawflow[t].data[e].inputs["input_" + (i + 1)] = { this.drawflow.drawflow[t].data[e].inputs["input_" + (i + 1)] = {
connections: [] connections: []
} }
// console.log(data)
} }
addNodeOutput(e) { addNodeOutput(e) {
var t = this.getModuleFromNodeId(e); var t = this.getModuleFromNodeId(e);
......
js/index.js
...@@ -181,7 +181,7 @@ function handleContextmenu(e) { ...@@ -181,7 +181,7 @@ function handleContextmenu(e) {
//判断当前的线段关闭功能是否显示 //判断当前的线段关闭功能是否显示
if(document.getElementsByClassName('drawflow-delete').length > 0){ if(document.getElementsByClassName('drawflow-delete').length > 0){
document.getElementById('customContextMenu').style.display = 'none'; document.getElementById('customContextMenu').style.display = 'none';
hideMenu() // hideMenu()
return return
} }
const customMenu = document.getElementById('customContextMenu'); const customMenu = document.getElementById('customContextMenu');
...@@ -252,15 +252,14 @@ function rightMenu() { ...@@ -252,15 +252,14 @@ function rightMenu() {
console.log(action) console.log(action)
// 根据不同的动作执行不同的操作 // 根据不同的动作执行不同的操作
switch (action) { switch (action) {
//起始卡
case 'startCard': case 'startCard':
addNodeToDrawFlow_A("facebook",x,y) addNodeToDrawFlow_A("startCard",x,y)
break;
case 'eventCard':
addNodeToDrawFlow_A("template",x,y)
break; break;
case 'conditionCard': case 'conditionCard':
addNodeToDrawFlow_A("dbclick",x,y) addNodeToDrawFlow_A("dbclick",x,y)
break; break;
//条件卡
case 'conditionCard-huo': case 'conditionCard-huo':
addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-huo') addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-huo')
break; break;
...@@ -270,8 +269,16 @@ function rightMenu() { ...@@ -270,8 +269,16 @@ function rightMenu() {
case 'conditionCard-fei': case 'conditionCard-fei':
addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-fei') addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-fei')
break; break;
//结局卡
case 'endCard': case 'endCard':
addNodeToDrawFlow_A("slack",x,y) addNodeToDrawFlow_A("endCard",x,y)
break;
//事件卡
case 'eventCard':
addNodeToDrawFlow_A("eventCard",x,y)
break;
case 'roleCard':
addNodeToDrawFlow_A("roleCard",x,y)
break; break;
} }
// 点击菜单项后隐藏菜单 // 点击菜单项后隐藏菜单
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment