Skip to content

S
Security
Commit af70d5a2 by xhw
Options

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

parent 01b5923a
Showing with 256 additions and 27 deletions
css/beautiful.css
......@@ -187,8 +187,8 @@ cursor: pointer;
.label_left{
position: absolute;
top: -4px;
left: -60px;
width: 70px;
left: -55px;
width: 47px;
z-index: -10;
}
.label_left:hover{
......@@ -218,6 +218,30 @@ cursor: pointer;
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 */
......@@ -230,7 +254,7 @@ cursor: pointer;
width: 200px;
}
.pink{
/* .pink{
stroke: pink !important;
}
.skyblue{
......@@ -238,7 +262,7 @@ cursor: pointer;
}
.green{
stroke: green !important;
}
} */
.drawflow .drawflow-node.selected {
background: white;
......@@ -263,9 +287,64 @@ cursor: pointer;
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;
} */
/* 设置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 {
right: 10px;
......@@ -303,6 +382,12 @@ cursor: pointer;
.drawflow .title-box svg {
position: initial;
}
.xhw_wrapper{
min-height: 200px;
}
.xhw1{
text-align: center;
}
.drawflow-node .box {
padding: 10px 20px 20px 20px;
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}
\ No newline at end of file
.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
}
\ No newline at end of file
css/style.css
......@@ -13,23 +13,15 @@ html, body {
.svgIcon_left{
position: absolute;
top: -13px;
left: -13px;
}
.svgIcon_left:hover{
cursor: pointer;
transform: scale(1.1);
transition: all 0.2s ease;
top: -4px;
left: 16px;
cursor: default;
}
.svgIcon_right{
position: absolute;
top: -13px;
right: -13px;
}
.svgIcon_right:hover{
cursor: pointer;
transform: scale(1.1);
transition: all 0.2s ease;
top: -4px;
left: -26px;
cursor: default;
}
#customContextMenu {
......
js/index.js
......@@ -181,7 +181,7 @@ function handleContextmenu(e) {
//判断当前的线段关闭功能是否显示
if(document.getElementsByClassName('drawflow-delete').length > 0){
document.getElementById('customContextMenu').style.display = 'none';
hideMenu()
// hideMenu()
return
}
const customMenu = document.getElementById('customContextMenu');
......@@ -252,15 +252,14 @@ function rightMenu() {
console.log(action)
// 根据不同的动作执行不同的操作
switch (action) {
//起始卡
case 'startCard':
addNodeToDrawFlow_A("facebook",x,y)
break;
case 'eventCard':
addNodeToDrawFlow_A("template",x,y)
addNodeToDrawFlow_A("startCard",x,y)
break;
case 'conditionCard':
addNodeToDrawFlow_A("dbclick",x,y)
break;
//条件卡
case 'conditionCard-huo':
addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-huo')
break;
......@@ -270,8 +269,16 @@ function rightMenu() {
case 'conditionCard-fei':
addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-fei')
break;
//结局卡
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;
}
// 点击菜单项后隐藏菜单
......
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