Skip to content

S
Security
Commit 136721d0 by xhw
Options

更新

parent 60756292
Showing with 498 additions and 37 deletions
css/beautiful.css
...@@ -198,6 +198,16 @@ cursor: pointer; ...@@ -198,6 +198,16 @@ cursor: pointer;
width: 200px; width: 200px;
} }
.pink{
stroke: pink !important;
}
.skyblue{
stroke: skyblue !important;
}
.green{
stroke: green !important;
}
.drawflow .drawflow-node.selected { .drawflow .drawflow-node.selected {
background: white; background: white;
border: 1px solid #4ea9ff; border: 1px solid #4ea9ff;
......
css/style.css
...@@ -10,6 +10,78 @@ html, body { ...@@ -10,6 +10,78 @@ html, body {
border: 0; border: 0;
} }
#customContextMenu {
display: none;
position: absolute;
background: rgba(30, 30, 40, 0.95);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
z-index: 1000;
backdrop-filter: blur(10px);
min-width: 200px;
border: 1px solid rgba(255, 255, 255, 0.1);
transform-origin: top left;
animation: menuAppear 0.2s ease-out forwards;
}
.instructions, .demo-area {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.demo-area {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 300px;
position: relative;
overflow: hidden;
}
.instructions h2, .demo-area h2 {
font-size: 1.8rem;
margin-bottom: 20px;
color: #ffcc00;
}
.menu-item {
padding: 12px 20px;
color: #e0e0e0;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
transition: all 0.2s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.menu-item:last-child {
border-bottom: none;
}
.menu-item:hover {
background: rgba(80, 100, 220, 0.7);
color: white;
}
.menu-item i {
font-size: 1.2rem;
margin-right: 12px;
width: 20px;
text-align: center;
}
.menu-divider {
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin: 5px 0;
}
/*拾色器*/ /*拾色器*/
.picker { .picker {
display: inline-block; display: inline-block;
......
index.html
...@@ -9,9 +9,10 @@ ...@@ -9,9 +9,10 @@
<link rel="stylesheet" href="./css/iconfont.css"> <link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/timer.css"> <link rel="stylesheet" href="./css/timer.css">
<script src="js/drawflow.min.js"></script>
<script src="js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script> <script src="js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/drawflow.min.css"> <link rel="stylesheet" type="text/css" href="css/drawflow.min.css">
<script src="js/drawflow.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/beautiful.css" /> <link rel="stylesheet" type="text/css" href="css/beautiful.css" />
<link rel="stylesheet" href="css/all.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" /> <link rel="stylesheet" href="css/all.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link href="css/googleapis.css" rel="stylesheet"> <link href="css/googleapis.css" rel="stylesheet">
...@@ -161,7 +162,81 @@ ...@@ -161,7 +162,81 @@
</div> </div>
</div> </div>
<!-- 自定义右键菜单 -->
<div id="customContextMenu">
<div class="menu-item" data-action="startCard" >
<i class="fas fa-plus-circle"></i> 起始卡片
</div>
<div class="menu-item" data-action="eventCard">
<i class="fas fa-plus-circle"></i> 事件卡片
</div>
<div class="menu-item" data-action="endCard">
<i class="fas fa-plus-circle"></i> 结局卡片
</div>
<!-- <div class="menu-item" data-action="new">
<i class="fas fa-plus-circle"></i> 新建文件
</div>
<div class="menu-item" data-action="open">
<i class="fas fa-folder-open"></i> 打开
</div>
<div class="menu-item" data-action="save">
<i class="fas fa-save"></i> 保存
</div>
<div class="menu-divider"></div>
<div class="menu-item" data-action="copy">
<i class="fas fa-copy"></i> 复制
</div>
<div class="menu-item" data-action="paste">
<i class="fas fa-paste"></i> 粘贴
</div>
<div class="menu-divider"></div>
<div class="menu-item" data-action="refresh">
<i class="fas fa-sync-alt"></i> 刷新
</div>
<div class="menu-item" data-action="info">
<i class="fas fa-info-circle"></i> 关于
</div> -->
</div>
<script> <script>
class MyNodes {
constructor(input, output) {
this.input = input;
this.output = output;
//保存左右两侧输入输出的属性
this.left_string,this.left_int,this.left_bool;
this.right_string,this.right_int,this.right_bool;
//连接点总长度
this.totalLength = this.output.length+this.input.length;
if(this.input.length>0){
this.input.forEach(item=> {
if(item=="string"){
this.left_string = item
}else if(item=="int"){
this.left_int = item
}else if(item=="bool"){
this.left_bool = item
}
})
}
if(this.output.length>0){
this.output.forEach(item=> {
if(item=="string"){
this.right_string = item
}else if(item=="int"){
this.right_int = item
}else if(item=="bool"){
this.right_bool = item
}
})
}
}
}
var id = document.getElementById("drawflow"); var id = document.getElementById("drawflow");
const editor = new Drawflow(id); const editor = new Drawflow(id);
editor.reroute = true; editor.reroute = true;
...@@ -169,65 +244,129 @@ ...@@ -169,65 +244,129 @@
editor.start(); editor.start();
editor.import(dataToImport); editor.import(dataToImport);
var html = document.createElement("div");
html.innerHTML = "Hello Drawflow!!";
editor.registerNode('test', html);
editor.on('connectionStart', function( output_id, output_class) {
// console.log(output_id);
// console.log(editor.getNodeFromId(output_id.output_id))
})
// Events! // Events!
editor.on('nodeCreated', function(id) { editor.on('nodeCreated', function(id) {
console.log("Node created " + id); // console.log("Node created " + id);
}) })
editor.on('nodeRemoved', function(id) { editor.on('nodeRemoved', function(id) {
console.log("Node removed " + id); // console.log("Node removed " + id);
}) })
editor.on('nodeSelected', function(id) { editor.on('nodeSelected', function(id) {
console.log("Node selected " + id); // console.log("Node selected " + id);
}) })
editor.on('moduleCreated', function(name) { editor.on('moduleCreated', function(name) {
console.log("Module Created " + name); // console.log("Module Created " + name);
}) })
editor.on('moduleChanged', function(name) { editor.on('moduleChanged', function(name) {
console.log("Module Changed " + name); // console.log("Module Changed " + name);
}) })
editor.on('connectionCreated', function(connection) { editor.on('connectionCreated', function(connection) {
console.log('Connection created'); // console.log('Connection created');
console.log(connection); console.log(connection);
//处理是否建立连接
const input_id = connection.input_id
const output_id = connection.output_id
const input_class = connection.input_class
const output_class = connection.output_class
const input_index = parseInt(input_class.split("_")[1])
const output_index = parseInt(output_class.split("_")[1])
// console.log(editor.getNodeFromId(input_id))
// console.log(editor.getNodeFromId(output_id))
// 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]
console.log(dataType_output,dataType_input)
if(dataType_output != dataType_input){
editor.removeSingleConnection(output_id, input_id, output_class, input_class)
}
}) })
editor.on('connectionRemoved', function(connection) { editor.on('connectionRemoved', function(connection) {
console.log('Connection removed'); // console.log('Connection removed');
console.log(connection); // console.log(connection);
}) })
editor.on('mouseMove', function(position) { editor.on('mouseMove', function(position) {
console.log('Position mouse x:' + position.x + ' y:'+ position.y); // console.log('Position mouse x:' + position.x + ' y:'+ position.y);
}) })
editor.on('nodeMoved', function(id) { editor.on('nodeMoved', function(id) {
console.log("Node moved " + id); // console.log("Node moved " + id);
}) })
editor.on('zoom', function(zoom) { editor.on('zoom', function(zoom) {
console.log('Zoom level ' + zoom); // console.log('Zoom level ' + zoom);
}) })
editor.on('translate', function(position) { editor.on('translate', function(position) {
console.log('Translate x:' + position.x + ' y:'+ position.y); // console.log('Translate x:' + position.x + ' y:'+ position.y);
}) })
editor.on('addReroute', function(id) { editor.on('addReroute', function(id) {
console.log("Reroute added " + id); // console.log("Reroute added " + id);
}) })
editor.on('removeReroute', function(id) { editor.on('removeReroute', function(id) {
console.log("Reroute removed " + id); // console.log("Reroute removed " + id);
}) })
/* DRAG EVENT */ /* DRAG EVENT */
/* Mouse and Touch Actions */ /* Mouse and Touch Actions */
//tab切换
function TabToggle() {
document.addEventListener('keydown', (e) => {
if (e.key === "Tab") {
e.preventDefault();
if($("#timerSlider").css("display")=="none"){
$("#timerSlider").fadeIn(1000)
//复原底部菜单的显示
$("#draw").hide()
$("#timerSlider").show()
$("#Scene").show()
$("body").css("background","#363B40")
//恢复dom事件监听
WZCContorller = new Controller();
// document.removeEventListener('contextmenu', handleContextmenu);
document.getElementById("drawflow").removeEventListener("contextmenu", positonXY)
}else{
$("#timerSlider").fadeOut(1000)
//显示画板 隐藏底部菜单
$("#draw").show()
$("#timerSlider").hide()
$("#Scene").hide()
$("body").css("background","#fff")
//解除dom事件监听
document[on.Start] = null;
rightMenu()
document.getElementById("drawflow").addEventListener("contextmenu", positonXY)
}
}
});
}
TabToggle()
var elements = document.getElementsByClassName('drag-drawflow'); var elements = document.getElementsByClassName('drag-drawflow');
for (var i = 0; i < elements.length; i++) { for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('touchend', drop, false); elements[i].addEventListener('touchend', drop, false);
...@@ -246,6 +385,7 @@ ...@@ -246,6 +385,7 @@
} }
function drag(ev) { function drag(ev) {
console.log(ev.target.getAttribute('data-node'))
if (ev.type === "touchstart") { if (ev.type === "touchstart") {
mobile_item_selec = ev.target.closest(".drag-drawflow").getAttribute('data-node'); mobile_item_selec = ev.target.closest(".drag-drawflow").getAttribute('data-node');
} else { } else {
...@@ -254,6 +394,7 @@ ...@@ -254,6 +394,7 @@
} }
function drop(ev) { function drop(ev) {
console.log(ev)
if (ev.type === "touchend") { if (ev.type === "touchend") {
var parentdrawflow = document.elementFromPoint( mobile_last_move.touches[0].clientX, mobile_last_move.touches[0].clientY).closest("#drawflow"); var parentdrawflow = document.elementFromPoint( mobile_last_move.touches[0].clientX, mobile_last_move.touches[0].clientY).closest("#drawflow");
if(parentdrawflow != null) { if(parentdrawflow != null) {
...@@ -265,7 +406,6 @@ ...@@ -265,7 +406,6 @@
var data = ev.dataTransfer.getData("node"); var data = ev.dataTransfer.getData("node");
addNodeToDrawFlow(data, ev.clientX, ev.clientY); addNodeToDrawFlow(data, ev.clientX, ev.clientY);
} }
} }
function addNodeToDrawFlow(name, pos_x, pos_y) { function addNodeToDrawFlow(name, pos_x, pos_y) {
...@@ -275,7 +415,6 @@ ...@@ -275,7 +415,6 @@
pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom))); pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom))); pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));
switch (name) { switch (name) {
case 'facebook': case 'facebook':
var facebook = ` var facebook = `
...@@ -417,6 +556,156 @@ ...@@ -417,6 +556,156 @@
} }
} }
function addNodeToDrawFlow_A(name, pos_x, pos_y){
console.log(name, pos_x, pos_y)
if(editor.editor_mode === 'fixed') {
return false;
}
pos_x = pos_x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)));
pos_y = pos_y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)));
switch (name) {
case 'facebook':
var facebook = `
<div>
<div class="title-box"><i class="fab fa-facebook"></i> Facebook Message</div>
</div>
`;
editor.addNode('facebook', 0, 3, pos_x, pos_y, 'facebook', {"node":new MyNodes([],['string','int','bool'])}, facebook );
break;
case 'slack':
var slackchat = `
<div>
<div class="title-box"><i class="fab fa-slack"></i> Slack chat message</div>
</div>
`
editor.addNode('slack', 3, 0, pos_x, pos_y, 'slack', {"node":new MyNodes(['string','int','bool'],[])}, slackchat );
break;
case 'github':
var githubtemplate = `
<div>
<div class="title-box"><i class="fab fa-github "></i> Github Stars</div>
<div class="box">
<p>Enter repository url</p>
<input type="text" df-name>
</div>
</div>
`;
editor.addNode('github', 0, 1, pos_x, pos_y, 'github', { "name": ''}, githubtemplate );
break;
case 'telegram':
var telegrambot = `
<div>
<div class="title-box"><i class="fab fa-telegram-plane"></i> Telegram bot</div>
<div class="box">
<p>Send to telegram</p>
<p>select channel</p>
<select df-channel>
<option value="channel_1">Channel 1</option>
<option value="channel_2">Channel 2</option>
<option value="channel_3">Channel 3</option>
<option value="channel_4">Channel 4</option>
</select>
</div>
</div>
`;
editor.addNode('telegram', 1, 0, pos_x, pos_y, 'telegram', { "channel": 'channel_3'}, telegrambot );
break;
case 'aws':
var aws = `
<div>
<div class="title-box"><i class="fab fa-aws"></i> Aws Save </div>
<div class="box">
<p>Save in aws</p>
<input type="text" df-db-dbname placeholder="DB name"><br><br>
<input type="text" df-db-key placeholder="DB key">
<p>Output Log</p>
</div>
</div>
`;
editor.addNode('aws', 1, 1, pos_x, pos_y, 'aws', { "db": { "dbname": '', "key": '' }}, aws );
break;
case 'log':
var log = `
<div>
<div class="title-box"><i class="fas fa-file-signature"></i> Save log file </div>
</div>
`;
editor.addNode('log', 1, 0, pos_x, pos_y, 'log', {}, log );
break;
case 'google':
var google = `
<div>
<div class="title-box"><i class="fab fa-google-drive"></i> Google Drive save </div>
</div>
`;
editor.addNode('google', 1, 0, pos_x, pos_y, 'google', {}, google );
break;
case 'email':
var email = `
<div>
<div class="title-box"><i class="fas fa-at"></i> Send Email </div>
</div>
`;
editor.addNode('email', 1, 0, pos_x, pos_y, 'email', {}, email );
break;
case 'template':
var template = `
<div>
<div class="title-box"><i class="fas fa-code"></i> Template</div>
<div class="box">
Ger Vars
<textarea df-template></textarea>
Output template with vars
</div>
</div>
`;
editor.addNode('template', 3, 3, pos_x, pos_y, 'template', {"node":new MyNodes(['string','int','bool'],['string','int','bool'])}, template );
break;
case 'multiple':
var multiple = `
<div>
<div class="box">
Multiple!
</div>
</div>
`;
editor.addNode('multiple', 3, 4, pos_x, pos_y, 'multiple', {}, multiple );
break;
case 'personalized':
var personalized = `
<div>
Personalized
</div>
`;
editor.addNode('personalized', 1, 1, pos_x, pos_y, 'personalized', {}, personalized );
break;
case 'dbclick':
var dbclick = `
<div>
<div class="title-box"><i class="fas fa-mouse"></i> Db Click</div>
<div class="box dbclickbox" ondblclick="showpopup(event)">
Db Click here
<div class="modal" style="display:none">
<div class="modal-content">
<span class="close" onclick="closemodal(event)">&times;</span>
Change your variable {name} !
<input type="text" df-name>
</div>
</div>
</div>
</div>
`;
editor.addNode('dbclick', 1, 1, pos_x, pos_y, 'dbclick', { name: ''}, dbclick );
break;
default:
}
}
var transform = ''; var transform = '';
function showpopup(e) { function showpopup(e) {
e.target.closest(".drawflow-node").style.zIndex = "9999"; e.target.closest(".drawflow-node").style.zIndex = "9999";
......
js/drawflow.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
js/index.js
...@@ -171,30 +171,118 @@ function getXY(e, obj) { ...@@ -171,30 +171,118 @@ function getXY(e, obj) {
}; };
} }
//tab切换
function TabToggle() {
document.addEventListener('keydown', (e) => { function handleContextmenu(e) {
if (e.key === "Tab") { const customMenu = document.getElementById('customContextMenu');
// 阻止默认右键菜单
e.preventDefault(); e.preventDefault();
if($("#timerSlider").css("display")=="none"){
$("#timerSlider").fadeIn(1000) // 显示自定义菜单
//复原底部菜单的显示 customMenu.style.display = 'block';
$("#draw").hide()
$("#timerSlider").show() // 获取视窗尺寸
$("#Scene").show() const windowWidth = window.innerWidth;
$("body").css("background","#363B40") const windowHeight = window.innerHeight;
}else{
$("#timerSlider").fadeOut(1000) // 获取菜单尺寸
//显示画板 隐藏底部菜单 const menuWidth = customMenu.offsetWidth;
$("#draw").show() const menuHeight = customMenu.offsetHeight;
$("#timerSlider").hide()
$("#Scene").hide() // 计算菜单位置 - 确保不会超出视窗
$("body").css("background","#fff") let posX = e.pageX;
let posY = e.pageY;
// 水平方向调整
if (posX + menuWidth > windowWidth) {
posX = windowWidth - menuWidth - 10;
}
// 垂直方向调整
if (posY + menuHeight > windowHeight) {
posY = windowHeight - menuHeight - 10;
}
// 设置菜单位置
customMenu.style.left = posX + 'px';
customMenu.style.top = posY + 'px';
}
var x ,y;
function positonXY(event) {
x = event.pageX; // 水平坐标（含滚动距离）
y = event.pageY; // 垂直坐标（含滚动距离）
console.log(`文档坐标：(${x}, ${y})`);
}
// 右键菜单
function rightMenu() {
const customMenu = document.getElementById('customContextMenu');
const demoArea = document.getElementById('demoArea');
// 在文档上监听右键点击事件
document.addEventListener('contextmenu',handleContextmenu);
// 点击任意位置关闭菜单（菜单自身点击除外）
document.addEventListener('click', (e) => {
// 如果点击的不是菜单，则隐藏菜单
if (!customMenu.contains(e.target)) {
customMenu.style.display = 'none';
} }
});
// 为菜单项添加点击事件
const menuItems = customMenu.querySelectorAll('.menu-item');
menuItems.forEach(item => {
item.addEventListener('click', (event) => {
const action = item.getAttribute('data-action');
// 根据不同的动作执行不同的操作
switch (action) {
case 'startCard':
addNodeToDrawFlow_A("facebook",x,y)
break;
case 'eventCard':
addNodeToDrawFlow_A("template",x,y)
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';
});
});
// 阻止在菜单上右键点击时触发默认菜单
customMenu.addEventListener('contextmenu', (e) => {
e.preventDefault();
}); });
} }
TabToggle()
//圆角滑块类 //圆角滑块类
class RadiusSlider { class RadiusSlider {
...@@ -507,7 +595,9 @@ class Controller { ...@@ -507,7 +595,9 @@ class Controller {
X: event.pageX, X: event.pageX,
Y: event.pageY, Y: event.pageY,
}; };
console.log(event.pageX) // window.pageX = event.pageX
// window.pageY = event.pageY
// console.log(event.pageX,event.pageY)
if (this.editState) return; //如果是编辑状态则退出--->this.phenomenaObj.length为实例化对象的Div的id if (this.editState) return; //如果是编辑状态则退出--->this.phenomenaObj.length为实例化对象的Div的id
const C = new Texter(this.PhenomenaObj.length,JsonClone(this.XY),null,null,null,"#"+ColorToolKit.HsbToHex({h:Math.round(Math.random()*360),s:Math.round(Math.random()*69),b:Math.round(70+Math.random()*30)})); const C = new Texter(this.PhenomenaObj.length,JsonClone(this.XY),null,null,null,"#"+ColorToolKit.HsbToHex({h:Math.round(Math.random()*360),s:Math.round(Math.random()*69),b:Math.round(70+Math.random()*30)}));
this.CreatStatus=true; this.CreatStatus=true;
......
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