mirror of
https://github.com/NaiboWang/EasySpider.git
synced 2026-09-01 15:22:26 +08:00
NaiboWang-Alienware
561 lines
21 KiB
JavaScript
561 lines
21 KiB
JavaScript
//处理表现层
|
|
var nodeList = Array(); //所有新生成的节点全部存储在这里，并且有唯一索引号，所有的定位均通过index进行，即将图保存下来了
|
|
var root = {
|
|
index: 0, //在nodeList中的索引号
|
|
id: 0,
|
|
parentId: 0,
|
|
type: -1,
|
|
option: 0,
|
|
title: "root",
|
|
sequence: [],
|
|
parameters: {
|
|
history: 1,
|
|
tabIndex: 0,
|
|
useLoop: false, //是否使用循环中的元素
|
|
xpath: "", //xpath
|
|
wait: 0,
|
|
},
|
|
isInLoop: false, //是否处于循环内
|
|
};
|
|
nodeList.push(root);
|
|
var queue = new Array();
|
|
var actionSequence = new Array(); //存储图结构，每个元素为在nodelist里面的索引值，下面的id和pid根据此数组进行索引，然后再在nodelist里找
|
|
var nowNode = null; //存储现在所在的节点
|
|
var vueData = { nowNodeIndex: 0 }; //存储目前所在节点的索引号,不能直接使用变量而需要用对象包起来
|
|
var option = 0; //工具箱选项
|
|
var title = "";
|
|
var parameterNum = 1; //记录目前的参数个数
|
|
|
|
//处理逻辑层
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
list: { nl: nodeList },
|
|
index: vueData,
|
|
nodeType: 0, // 当前元素的类型
|
|
nowNode: null, // 用来临时存储元素的节点
|
|
loopType: -1, //点击循环时候用来循环选项
|
|
useLoop: false, //记录是否使用循环内元素
|
|
nowArrow: { "position": -1, "pId": 0, "num": 0 },
|
|
paras: { "parameters": [] }, //提取数据的参数列表
|
|
TClass: -1, //条件分支的条件类别
|
|
paraIndex: 0, //当前参数的index
|
|
},
|
|
watch: {
|
|
nowArrow: { //变量发生变化的时候进行一些操作
|
|
deep: true,
|
|
handler: function(newVal, oldVal) {
|
|
let arrlist = document.getElementsByClassName("arrow");
|
|
if (oldVal != null) {
|
|
for (let i = 0; i < arrlist.length; i++) {
|
|
if (arrlist[i].getAttribute("position") == oldVal["position"] &&
|
|
arrlist[i].getAttribute("pid") == oldVal["pId"]) {
|
|
arrlist[i].style.backgroundColor = ""; // 时刻指示现在应该插入的节点的位置
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
for (let i = 0; i < arrlist.length; i++) {
|
|
if (arrlist[i].getAttribute("position") == newVal["position"] &&
|
|
arrlist[i].getAttribute("pid") == newVal["pId"]) {
|
|
arrlist[i].style.backgroundColor = "lavender"; // 时刻指示现在应该插入的节点的位置
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
loopType: {
|
|
handler: function(newVal, oldVal) {
|
|
this.nowNode["parameters"]["loopType"] = newVal;
|
|
}
|
|
},
|
|
TClass: {
|
|
handler: function(newVal, oldVal) {
|
|
this.nowNode["parameters"]["class"] = newVal;
|
|
}
|
|
},
|
|
useLoop: {
|
|
handler: function(newVal, oldVal) {
|
|
this.nowNode["parameters"]["useLoop"] = newVal;
|
|
}
|
|
},
|
|
paras: {
|
|
handler: function(newVal, oldVal) {
|
|
this.nowNode["parameters"]["paras"] = newVal["parameters"];
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
modifyParas: function(i) { //修改第i个参数
|
|
this.paraIndex = i;
|
|
},
|
|
deleteParas: function(i) { //删除第i个参数
|
|
this.nowNode["parameters"]["paras"].splice(i, 1);
|
|
//如果参数删除完了，就把提取数据也删掉
|
|
if (this.nowNode["parameters"]["paras"].length == 0) {
|
|
deleteElement();
|
|
}
|
|
},
|
|
upParas: function(i) { //上移第i个参数
|
|
if (i != 0) {
|
|
let t = this.nowNode["parameters"]["paras"].splice(i, 1)[0];
|
|
this.nowNode["parameters"]["paras"].splice(i - 1, 0, t);
|
|
}
|
|
},
|
|
downParas: function(i) { //下移第i个参数
|
|
if (i != this.nowNode["parameters"]["paras"].length - 1) {
|
|
let t = this.nowNode["parameters"]["paras"].splice(i, 1)[0];
|
|
this.nowNode["parameters"]["paras"].splice(i + 1, 0, t);
|
|
}
|
|
},
|
|
|
|
getType: function(nodeType, contentType) { //根据类型得到字段名称
|
|
if (contentType == 2) {
|
|
return "InnerHTML";
|
|
} else if (contentType == 3) {
|
|
return "OuterHTML";
|
|
}
|
|
if (nodeType == 2) {
|
|
return "Link Address";
|
|
} else if (nodeType == 1) {
|
|
return "Link Text";
|
|
} else if (nodeType == 4) {
|
|
return "Image Address";
|
|
} else {
|
|
return "Text";
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
//深复制
|
|
function DeepClone(obj) {
|
|
if (obj === null || typeof obj !== 'object') return obj;
|
|
var cpObj = obj instanceof Array ? [] : {};
|
|
for (var key in obj) cpObj[key] = DeepClone(obj[key]);
|
|
return cpObj;
|
|
}
|
|
|
|
// 根据元素类型返回不同元素的样式
|
|
function newNode(node) {
|
|
id = node["id"];
|
|
title = node["title"];
|
|
type = node["type"];
|
|
if (type == 0) //顺序
|
|
{
|
|
return `<div class="sequence"><div class="node clk" data="${id}" dataType=${type} id = "${id}" position=${node["position"]} pId=${node["parentId"]}>
|
|
<div >
|
|
<p>${title}</p>
|
|
</div>
|
|
</div>
|
|
<p class="arrow" position=${node["position"]} data = "${id}" pId=${node["parentId"]}>↓</p></div>`;
|
|
} else if (type == 1) //循环
|
|
{
|
|
return `<div class="loop clk" data="${id}" dataType=${type} id = "${id}" position=${node["position"]} pId=${node["parentId"]}>
|
|
<p style="background:#d6d6d6;text-align:left;padding:2px">${title}</p>
|
|
<p class="arrow" position=-1 data = "${id}" pId=${id}>↓</p>
|
|
</div>
|
|
<p class="arrow" data = "${id}" position=${node["position"]} pId=${node["parentId"]}>↓</p></div>`;
|
|
} else if (type == 2) //判断
|
|
{
|
|
return `<div class="loop clk" dataType=${type} data="${id}" position=${node["position"]} pId=${node["parentId"]}>
|
|
<p style="background:#d6d6d6;text-align:left;padding:2px">${title}</p>
|
|
<p class="branchAdd" data="${id}">Click here to add a new condition to the left most</p>
|
|
<div class="judge" id = "${id}">
|
|
</div></div>
|
|
<p class="arrow" data = "${id}" position=${node["position"]} pId=${node["parentId"]}>↓</p></div>`;
|
|
} else //判断分支
|
|
{
|
|
return `<div class="branch clk" dataType=${type} data="${id}" position=${node["position"]} pId=${node["parentId"]}>
|
|
<p style="background:#d6d6d6;text-align:left;padding:2px">${title}</p>
|
|
<p data = "${id}" class="arrow" position=-1 pId=${id}>↓</p>
|
|
<div id = "${id}">
|
|
</div></div>`;
|
|
}
|
|
}
|
|
|
|
function elementMousedown(e) {
|
|
if (e.button == 2) //右键点击
|
|
{
|
|
if (nowNode != null) {
|
|
nowNode.style.borderColor = "skyblue";
|
|
}
|
|
nowNode = this;
|
|
vueData.nowNodeIndex = actionSequence[this.getAttribute("data")];
|
|
this.style.borderColor = "blue";
|
|
handleElement(); //处理元素
|
|
}
|
|
e.stopPropagation(); //防止冒泡
|
|
}
|
|
|
|
function branchMouseDown(e) {
|
|
if (e.button == 2) //右键点击
|
|
{
|
|
let judgeId = this.getAttribute('data');
|
|
var l = nodeList.length;
|
|
var t = {
|
|
index: l,
|
|
id: 0,
|
|
parentId: 0,
|
|
type: 3,
|
|
option: 10,
|
|
title: "Condition",
|
|
sequence: [],
|
|
isInLoop: false,
|
|
};
|
|
addParameters(t)
|
|
nodeList.push(t);
|
|
nodeList[actionSequence[judgeId]]["sequence"].splice(0, 0, t.index);
|
|
refresh();
|
|
app._data.nowArrow = { "position": -1, "pId": t["id"], "num": 0 };
|
|
$("#" + t["id"]).click();
|
|
}
|
|
e.stopPropagation(); //防止冒泡
|
|
}
|
|
|
|
function arrowMouseDown(e) {
|
|
if (e.button == 2) //右键点击
|
|
{
|
|
if (option != 0) {
|
|
app._data.nowArrow = { "position": this.getAttribute('position'), "pId": this.getAttribute('pId'), "num": 0 };
|
|
}
|
|
toolBoxKernel(e);
|
|
}
|
|
}
|
|
//增加分支点击事件
|
|
function branchClick(e) {
|
|
let judgeId = this.getAttribute('data');
|
|
var l = nodeList.length;
|
|
var t = {
|
|
index: l,
|
|
id: 0,
|
|
parentId: 0,
|
|
type: 3,
|
|
option: 10,
|
|
title: "Condition",
|
|
sequence: [],
|
|
isInLoop: false,
|
|
};
|
|
addParameters(t);
|
|
nodeList.push(t);
|
|
nodeList[actionSequence[judgeId]]["sequence"].splice(0, 0, t.index);
|
|
refresh();
|
|
app._data.nowArrow = { "position": -1, "pId": t["id"], "num": 0 };
|
|
$("#" + t["id"]).click();
|
|
e.stopPropagation(); //防止冒泡
|
|
}
|
|
|
|
//元素点击事件
|
|
function elementClick(e) {
|
|
if (nowNode != null) {
|
|
nowNode.style.borderColor = "skyblue";
|
|
}
|
|
nowNode = this;
|
|
vueData.nowNodeIndex = actionSequence[this.getAttribute("data")];
|
|
this.style.borderColor = "blue";
|
|
handleElement(); //处理元素
|
|
e.stopPropagation(); //防止冒泡
|
|
}
|
|
|
|
//箭头点击事件
|
|
function arrowClick(e) {
|
|
if (option != 0) {
|
|
app._data.nowArrow = { "position": this.getAttribute('position'), "pId": this.getAttribute('pId'), "num": 0 };
|
|
}
|
|
toolBoxKernel(e);
|
|
}
|
|
|
|
//增加元素函数
|
|
function addElement(op, para) {
|
|
option = op;
|
|
if (option == 1) { //打开网页选项
|
|
title = "Open Page";
|
|
} else {
|
|
title = $(".options")[option - 2].innerHTML; //获取新增操作名称
|
|
}
|
|
|
|
toolBoxKernel(null, para);
|
|
}
|
|
|
|
// 工具箱操作函数
|
|
function toolBoxKernel(e, para = null) {
|
|
if (option == 13) { //调整锚点
|
|
// let tarrow = DeepClone(app.$data.nowArrow);
|
|
// refresh();
|
|
// app._data.nowArrow =tarrow;
|
|
} else if (option == 11) { //复制操作
|
|
if (nowNode == null) {
|
|
e.stopPropagation(); //防止冒泡
|
|
} else if (nowNode.getAttribute("dataType") > 0) {
|
|
alert("Cannot copy loop, if and condition!");
|
|
e.stopPropagation(); //防止冒泡
|
|
} else {
|
|
let position = parseInt(nowNode.getAttribute('position'));
|
|
let pId = nowNode.getAttribute('pId');
|
|
var tt = nodeList[nodeList[actionSequence[pId]]["sequence"][position]]; //在相应位置添加新元素
|
|
t = DeepClone(tt); //浅复制元素
|
|
var l = nodeList.length;
|
|
t.index = l;
|
|
nodeList.push(t);
|
|
var position2 = parseInt(app._data.nowArrow['position']);
|
|
var pId2 = app._data.nowArrow['pId'];
|
|
nodeList[actionSequence[pId2]]["sequence"].splice(position2 + 1, 0, t.index); //在相应位置添加新元素
|
|
refresh(); //重新渲染页面
|
|
app._data.nowArrow = { "position": t["position"], "pId": t["parentId"], "num": 0 };
|
|
$("#" + t["id"]).click(); //复制后点击复制后的元素
|
|
e.stopPropagation(); //防止冒泡
|
|
}
|
|
} else if (option == 10) { //剪切操作
|
|
if (nowNode == null) {
|
|
e.stopPropagation(); //防止冒泡
|
|
} else if ($(nowNode).is(".branch")) {
|
|
alert("Cannot move condition branch!");
|
|
e.stopPropagation(); //防止冒泡
|
|
} else {
|
|
let position = parseInt(nowNode.getAttribute('position'));
|
|
let pId = nowNode.getAttribute('pId');
|
|
var position2 = parseInt(app._data.nowArrow['position']);
|
|
var pId2 = app._data.nowArrow['pId'];
|
|
var id = nowNode.getAttribute('data');
|
|
var pidt = pId2;
|
|
var move = true;
|
|
console.log(pidt, id);
|
|
while (pidt != 0) {
|
|
if (pidt == id) {
|
|
move = false;
|
|
break;
|
|
}
|
|
pidt = nodeList[actionSequence[pidt]]["parentId"];
|
|
}
|
|
if (move) //如果自己要移动到自己节点里就不允许移动
|
|
{
|
|
let element = nodeList[actionSequence[pId]]["sequence"].splice(position, 1); //在相应位置删除元素
|
|
if (pId == pId2 && position < position2) //如果要移动的位置属于同一层并且是从前往后移动，注意需要控制数组插入位置向前错位
|
|
{
|
|
position2--;
|
|
}
|
|
console.log(element);
|
|
nodeList[actionSequence[pId2]]["sequence"].splice(position2 + 1, 0, element[0]); //在相应位置添加新元素
|
|
refresh(); //重新渲染页面
|
|
console.log(nodeList[element[0]]);
|
|
app._data.nowArrow = { "position": nodeList[element[0]]["position"], "pId": nodeList[element[0]]["parentId"], "num": 0 };
|
|
$("#" + nodeList[element[0]]["id"]).click();
|
|
} else {
|
|
alert("Cannot move inside self!");
|
|
}
|
|
e.stopPropagation(); //防止冒泡
|
|
}
|
|
} else if (option > 0) { //新增操作
|
|
var l = nodeList.length;
|
|
var t = {
|
|
id: 0,
|
|
index: l,
|
|
parentId: 0,
|
|
type: 0,
|
|
option: option,
|
|
title: title,
|
|
sequence: [],
|
|
isInLoop: false,
|
|
};
|
|
nodeList.push(t);
|
|
if (option == 8) //循环
|
|
{
|
|
t["type"] = 1;
|
|
} else if (option == 9) //判断
|
|
{
|
|
t["type"] = 2;
|
|
// 增加两个分支
|
|
var nt = {
|
|
id: 0,
|
|
parentId: 0,
|
|
index: l + 1,
|
|
type: 3,
|
|
option: 10,
|
|
title: "Condition",
|
|
sequence: [],
|
|
isInLoop: false,
|
|
};
|
|
var nt2 = {
|
|
id: 0,
|
|
parentId: 0,
|
|
index: l + 2,
|
|
type: 3,
|
|
option: 10,
|
|
title: "Condition",
|
|
sequence: [],
|
|
isInLoop: false,
|
|
};
|
|
t["sequence"].push(nt.index);
|
|
t["sequence"].push(nt2.index);
|
|
nodeList.push(nt)
|
|
nodeList.push(nt2);
|
|
addParameters(nt); //增加选项的默认参数
|
|
addParameters(nt2); //增加选项的默认参数
|
|
}
|
|
let position = parseInt(app._data.nowArrow['position']);
|
|
let pId = app._data.nowArrow['pId'];
|
|
nodeList[actionSequence[pId]]["sequence"].splice(position + 1, 0, t.index); //在相应位置添加新元素
|
|
refresh(); //重新渲染页面
|
|
//下面是确定添加元素之后下一个要插入的节点的位置
|
|
app._data.nowArrow = { "position": t["position"], "pId": t["parentId"], "num": 0 };
|
|
addParameters(t); //增加选项的默认参数
|
|
if (para != null) {
|
|
modifyParameters(t, para);
|
|
}
|
|
if (option == 8) //循环情况下应插入在循环里面
|
|
{
|
|
app._data.nowArrow = { "position": -1, "pId": t["id"], "num": 0 };
|
|
$("#" + t["id"]).click();
|
|
} else if (option == 9) //判断插入到第一个判断条件中
|
|
{
|
|
app._data.nowArrow = { "position": -1, "pId": nt["id"], "num": 0 };
|
|
$("#" + nt["id"]).click();
|
|
} else {
|
|
$("#" + t["id"]).click();
|
|
}
|
|
|
|
if (e != null)
|
|
e.stopPropagation(); //防止冒泡
|
|
option = 0;
|
|
return t;
|
|
}
|
|
option = 0;
|
|
}
|
|
|
|
$(".options").mousedown(function() {
|
|
option = parseInt(this.getAttribute("data"));
|
|
title = this.innerHTML;
|
|
if (option >= 10 && option <= 12 && (nowNode == null || nowNode.getAttribute("id") == 0)) {
|
|
alert("No element is selected now!");
|
|
} else if (option == 12) {
|
|
deleteElement();
|
|
$(".options")[12].click();
|
|
}
|
|
});
|
|
|
|
function bindEvents() {
|
|
// 清空原来的listener然后再添加新的listener
|
|
//以下绑定了左右键的行为
|
|
let rect = document.getElementsByClassName('clk');
|
|
for (let i = 0, rule; rule = rect[i++];) {
|
|
rule.removeEventListener('mousedown', elementMousedown);
|
|
rule.addEventListener('mousedown', elementMousedown);
|
|
rule.removeEventListener('click', elementClick);
|
|
rule.addEventListener('click', elementClick);
|
|
}
|
|
let arr = document.getElementsByClassName('arrow');
|
|
for (let i = 0, rule; rule = arr[i++];) {
|
|
rule.removeEventListener('click', arrowClick);
|
|
rule.addEventListener('click', arrowClick);
|
|
rule.removeEventListener('mousedown', arrowMouseDown);
|
|
rule.addEventListener('mousedown', arrowMouseDown);
|
|
}
|
|
let branch = document.getElementsByClassName('branchAdd');
|
|
for (let i = 0, rule; rule = branch[i++];) {
|
|
rule.removeEventListener('click', branchClick);
|
|
rule.addEventListener('click', branchClick);
|
|
rule.removeEventListener('mousedown', branchMouseDown);
|
|
rule.addEventListener('mousedown', branchMouseDown);
|
|
}
|
|
}
|
|
|
|
//重新画图
|
|
function refresh(nowArrowReset = true) {
|
|
$("#0").empty();
|
|
$("#0").append(`<div style="border-radius: 50%;width: 40px;height: 40px;border:solid;border-color:seagreen;margin:5px auto;background-color:lightcyan;margin-top:20px">
|
|
<p style="font-size: 24px!important;text-align: center;margin-left: 6px;font-family:'Times New Roman'">▶</p>
|
|
</div>
|
|
<p id="firstArrow" class="arrow" position=-1 pId=0>↓</p>`);
|
|
actionSequence.splice(0);
|
|
queue.splice(0);
|
|
var idd = 1;
|
|
queue.push(0);
|
|
actionSequence.push(0);
|
|
while (queue.length != 0) {
|
|
var nd = queue.shift(); //取出父元素并建立对子元素的链接
|
|
for (i = 0; i < nodeList[nd].sequence.length; i++) {
|
|
nodeList[nodeList[nd].sequence[i]].parentId = nodeList[nd].id;
|
|
nodeList[nodeList[nd].sequence[i]]["position"] = i;
|
|
nodeList[nodeList[nd].sequence[i]].id = idd++;
|
|
//检测元素是否位于循环内
|
|
if (nodeList[nd].option == 8 || nodeList[nd].isInLoop) {
|
|
nodeList[nodeList[nd].sequence[i]].isInLoop = true;
|
|
} else {
|
|
nodeList[nodeList[nd].sequence[i]].isInLoop = false;
|
|
}
|
|
queue.push(nodeList[nd].sequence[i]);
|
|
actionSequence.push(nodeList[nd].sequence[i]);
|
|
}
|
|
}
|
|
if (nowArrowReset) //如果要重置锚点位置
|
|
{
|
|
app._data.nowArrow = { "position": -1, "pId": 0, "num": 0 }; //设置默认要添加的位置是元素流程最开头处
|
|
}
|
|
//第一个元素不渲染
|
|
for (i = 1; i < actionSequence.length; i++) {
|
|
parentId = nodeList[actionSequence[i]]["parentId"];
|
|
$("#" + parentId).append(newNode(nodeList[actionSequence[i]]));
|
|
}
|
|
bindEvents();
|
|
}
|
|
|
|
function deleteElement() {
|
|
if (nowNode.getAttribute("id") == 0) {
|
|
alert("No element is selected now!"); //root
|
|
return;
|
|
}
|
|
// if (nodeList[actionSequence[nowNode.getAttribute("data")]]["option"] == 1) {
|
|
// alert("Cannot delete the element of Open Page!");
|
|
// return;
|
|
// }
|
|
let position = parseInt(nowNode.getAttribute('position'));
|
|
let pId = nowNode.getAttribute('pId');
|
|
let tnode = nodeList[actionSequence[pId]]["sequence"].splice(position, 1); //在相应位置删除元素
|
|
//循环的标记已经被删除的元素，因为删除循环后，循环内的元素也会
|
|
let queue = new Array();
|
|
queue.push(tnode[0]);
|
|
while (queue.length > 0) {
|
|
let index = queue.shift();
|
|
nodeList[index]["id"] = -1; //标记服务已被删除
|
|
for (let i = 0; i < nodeList[index]["sequence"].length; i++) {
|
|
queue.push(nodeList[index]["sequence"][i]);
|
|
}
|
|
}
|
|
app._data["nowNode"] = null;
|
|
app._data["nodeType"] = 0;
|
|
vueData.nowNodeIndex = 0;
|
|
if (nowNode.getAttribute("datatype") == 3) { //如果删掉的是条件分支的话
|
|
pId = nowNode.parentNode.parentNode.getAttribute('pId');
|
|
position = nowNode.parentNode.parentNode.getAttribute('position');
|
|
}
|
|
app.$data.nowArrow = { position: position - 1, "pId": pId, "num": 0 }; //删除元素后锚点跳转到当前元素的上一个节点
|
|
refresh(false); //重新渲染页面
|
|
nowNode = null; //取消选择
|
|
}
|
|
|
|
document.oncontextmenu = function() {
|
|
return false;
|
|
} //屏蔽右键菜单
|
|
//删除元素
|
|
document.onkeydown = function(e) {
|
|
if (nowNode != null && e.keyCode == 46) {
|
|
if (confirm("Do you really want to delete the selected element?")) {
|
|
deleteElement();
|
|
}
|
|
} else { //ctrl+s保存服务
|
|
var currKey = 0,
|
|
e = e || event || window.event;
|
|
currKey = e.keyCode || e.which || e.charCode;
|
|
if (currKey == 83 && (e.ctrlKey || e.metaKey)) {
|
|
$('#save').click();
|
|
return false;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
function inputDelete(e) {
|
|
if (e.keyCode == 46) {
|
|
e.stopPropagation(); //输入框按delete应该正常运行
|
|
}
|
|
} |