Skip to content

S
Security
Commit 01b5923a by xhw
Options

更新

parent 635433a1
Showing with 235 additions and 45 deletions
CSS测试.html
<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 300px;
height: 300px;
background-color: rgb(231, 24, 24);
}
.p1:hover ~ .d1{
background-color: rgb(16, 243, 148);
}
</style>
<meta charset="UTF-8" />
<title>右键菜单-子菜单示例</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body{margin:0;font-family:"Segoe UI",sans-serif;background:#f4f6f9;}
#board{width:100vw;height:100vh;background:#fff;position:relative;}
/* ===== 一级菜单 ===== */
#customContextMenu{
position:fixed;
border:1px solid #e0e0e0;
border-radius:6px;
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.15);
padding:6px 0;
font-size:14px;
z-index:9999;
user-select:none;
display:none; /* 默认隐藏 */
}
#customContextMenu .menu-item{
padding:7px 26px 7px 12px;
cursor:pointer;
position:relative;
display:flex;
align-items:center;
gap:6px;
}
#customContextMenu .menu-item:hover{background:#f3f3f3;}
/* 有子菜单的箭头 */
#customContextMenu .hasChildren::after{
content:'';
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
border:4px solid transparent;
border-left-color:#666;
}
/* ===== 二级菜单（子菜单） ===== */
.submenu{
position:absolute;
left:100%;
top:-6px; /* 与父项对齐微调 */
border:1px solid #e0e0e0;
border-radius:6px;
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.15);
padding:6px 0;
display:none; /* 默认隐藏 */
min-width:120px;
}
</style>
</head>
<body>
<div class="d1">
<div class="p1"> hello </div>
<!-- 画布区域 -->
<div id="board">在此区域点击右键</div>
<!-- 自定义右键菜单 -->
<div id="customContextMenu">
<div class="menu-item" data-action="startCard">
<i class="fas fa-plus-circle"></i> 起始卡片
</div>
<div class="menu-item hasChildren" data-action="eventCard">
<i class="fas fa-plus-circle"></i> 事件卡片
<!-- 子菜单 -->
<div class="submenu">
<div class="menu-item" data-action="eventCard-attack"><i class="fas fa-sword"></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>
</div>
<div class="menu-item" data-action="endCard">
<i class="fas fa-plus-circle"></i> 结局卡片
</div>
</div>
<script>
const board = document.getElementById('board');
const menuBox = document.getElementById('customContextMenu');
/* ===== 右键显示/隐藏 ===== */
board.addEventListener('contextmenu', e=>{
e.preventDefault();
showMenu(e.clientX, e.clientY);
});
document.addEventListener('click', hideMenu);
/* ===== 显示菜单 ===== */
function showMenu(x,y){
// 简单边界检测
const {innerWidth,innerHeight}=window;
const {offsetWidth,offsetHeight}=menuBox;
if(x+offsetWidth>innerWidth) x-=offsetWidth;
if(y+offsetHeight>innerHeight) y-=offsetHeight;
menuBox.style.left = x + 'px';
menuBox.style.top = y + 'px';
menuBox.style.display = 'block';
}
function hideMenu(){
menuBox.style.display = 'none';
// 同时隐藏所有子菜单
menuBox.querySelectorAll('.submenu').forEach(sm=>sm.style.display='none');
}
/* ===== 子菜单展开/收起 ===== */
menuBox.querySelectorAll('.hasChildren').forEach(item=>{
let timer=null;
const submenu=item.querySelector('.submenu');
item.addEventListener('mouseenter',()=>{
clearTimeout(timer);
submenu.style.display='block';
});
item.addEventListener('mouseleave',()=>{
timer=setTimeout(()=>submenu.style.display='none',150);
});
submenu.addEventListener('mouseenter',()=>clearTimeout(timer));
submenu.addEventListener('mouseleave',()=>submenu.style.display='none');
});
/* ===== 任意菜单/子菜单点击 ===== */
menuBox.addEventListener('click', e=>{
const action = e.target.closest('[data-action]')?.dataset.action;
if(action){
console.log('执行动作 =>', action); // 这里换成你自己的业务逻辑
hideMenu();
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
</html>
\ No newline at end of file
css/beautiful.css
......@@ -184,7 +184,39 @@ cursor: pointer;
width: calc(100vw - 51px);
}
}
.label_left{
position: absolute;
top: -4px;
left: -60px;
width: 70px;
z-index: -10;
}
.label_left:hover{
/* opacity: 1;
top: -4px;
left: -60px;
width: 70px;
z-index: -10; */
/* transition: .3s;
opacity: 1; */
}
.label_right{
display: block;
text-align: left;
position: absolute;
top: -4px;
right: -74px;
width: 70px;
z-index: -10;
/* opacity: 0; */
}
/* .label_right:hover{
position: absolute;
top: -4px;
right: -74px;
width: 70px;
opacity: 1;
} */
/* Editing Drawflow */
......
css/style.css
......@@ -10,6 +10,28 @@ html, body {
border: 0;
}
.svgIcon_left{
position: absolute;
top: -13px;
left: -13px;
}
.svgIcon_left:hover{
cursor: pointer;
transform: scale(1.1);
transition: all 0.2s ease;
}
.svgIcon_right{
position: absolute;
top: -13px;
right: -13px;
}
.svgIcon_right:hover{
cursor: pointer;
transform: scale(1.1);
transition: all 0.2s ease;
}
#customContextMenu {
display: none;
position: absolute;
......
js/drawflow.min.js
......@@ -994,6 +994,31 @@
h.style.left = i + "px",
r.appendChild(h),
this.precanvas.appendChild(r);
// console.log($(".attrs"))
// console.log($(".attrs").attr("attr_left"))
// console.log($(".attrs").attr("attr_right"))
// $(".attrs").each(function(item) {
// console.log(item)
// var e = $(this).attr("attr_left");
// var t = $(this).attr("attr_right");
// });
const arr_input = $(".attrs").parents().parents().parents().parents().find(".inputs").children()
const arr_output = $(".attrs").parents().parents().parents().parents().find(".outputs").children()
console.log(e)
console.log(arr_input)
arr_input.each(function(item){
console.log($(this))
if($(this).find(".label_left").length == 0){
$(this).append(`<label class='label_left'>条件${item}</label>`)
}
})
arr_output.each(function(item){
console.log($(this).find(".label_right"))
if($(this).find(".label_right").length == 0){
$(this).append(`<label class='label_right'>${(item+1)%2==0?'满足':'不满足'}</label>`)
}
})
var w = {
id: a,
name: e,
......
js/index.js
......@@ -177,10 +177,11 @@ function handleContextmenu(e) {
// 阻止默认右键菜单
e.preventDefault()
e.stopPropagation()
console.log(e)
// console.log(e)
//判断当前的线段关闭功能是否显示
if(document.getElementsByClassName('drawflow-delete').length > 0){
document.getElementById('customContextMenu').style.display = 'none';
hideMenu()
return
}
const customMenu = document.getElementById('customContextMenu');
......@@ -221,6 +222,7 @@ function handleContextmenu(e) {
// console.log(`文档坐标：(${x}, ${y})`);
// }
// 右键菜单
......@@ -237,6 +239,7 @@ function rightMenu() {
// 如果点击的不是菜单，则隐藏菜单
if (!customMenu.contains(e.target)) {
customMenu.style.display = 'none';
// hideMenu()
}
});
......@@ -244,7 +247,9 @@ function rightMenu() {
const menuItems = customMenu.querySelectorAll('.menu-item');
menuItems.forEach(item => {
item.addEventListener('click', (event) => {
event.stopPropagation();
const action = item.getAttribute('data-action');
console.log(action)
// 根据不同的动作执行不同的操作
switch (action) {
case 'startCard':
......@@ -253,33 +258,22 @@ function rightMenu() {
case 'eventCard':
addNodeToDrawFlow_A("template",x,y)
break;
case 'conditionCard':
addNodeToDrawFlow_A("dbclick",x,y)
break;
case 'conditionCard-huo':
addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-huo')
break;
case 'conditionCard-yu':
addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-yu')
break;
case 'conditionCard-fei':
addNodeToDrawFlow_A("dbclick",x,y,'conditionCard-fei')
break;
case 'endCard':
addNodeToDrawFlow_A("slack",x,y)
break;
// case 'new':
// alert('您选择了 "新建文件"');
// break;
// case 'open':
// alert('您选择了 "打开"');
// break;
// case 'save':
// alert('您选择了 "保存"');
// break;
// case 'copy':
// alert('您选择了 "复制"');
// break;
// case 'paste':
// alert('您选择了 "粘贴"');
// break;
// case 'refresh':
// alert('页面即将刷新...');
// setTimeout(() => location.reload(), 500);
// break;
// case 'info':
// alert('自定义右键菜单 v1.0\n© 2023 前端开发示例');
// break;
}
// 点击菜单项后隐藏菜单
customMenu.style.display = 'none';
});
......
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