up
This commit is contained in:
93
dist/index.html
vendored
Normal file
93
dist/index.html
vendored
Normal file
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Customer sign email</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="col">
|
||||
<div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="customerSignUp">
|
||||
<div class="customer-sign-up node" data-node="customerSignsUpNode">
|
||||
<p><i class="fa-regular fa-circle-play"></i> Customer signs up for product updates</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="sendEmail">
|
||||
<i class="fa-regular fa-envelope"></i> Send email
|
||||
</div>
|
||||
<div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="replyCheck">
|
||||
<i class="fa-solid fa-shuffle"></i> Replied to conversation?
|
||||
</div>
|
||||
<div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="contactExits">
|
||||
<i class="fa-regular fa-circle-check"></i> Contact Exits
|
||||
</div>
|
||||
<div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="sendSurvey">
|
||||
<i class="fa-solid fa-list-check"></i> Send survey
|
||||
</div>
|
||||
</div>
|
||||
<div id="drawflow"></div>
|
||||
|
||||
<div class="btn-clear" id="btn-clear" onclick="editor.clearModuleSelected()">Clear</div>
|
||||
</div>
|
||||
<div id="popup-drawflow" class="hidden">
|
||||
<div class="popup-content">
|
||||
<span class="popup-close">×</span>
|
||||
<div id="popup-drawflow-content">
|
||||
<!-- Form fields will be dynamically added here -->
|
||||
<div class="drag-drawflow" data-pos_x="200" data-pos_y="175" data-out="1" data-input="1" data-name="sendEmail"
|
||||
data-class="send-email" data-html="sendEmail" data-parent="customerSignsUpNode"
|
||||
onclick="addNodeToDrawFlow(this)">
|
||||
<div class="send-email node" data-node="sendEmailNode">
|
||||
<p><i class="fa-regular fa-envelope"></i> Send email</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-drawflow" data-pos_x="200" data-pos_y="300" data-out="2" data-input="1" data-name="replyCheck"
|
||||
data-class="reply-check" data-html="replyCheck" data-parent="sendEmail" onclick="addNodeToDrawFlow(this)">
|
||||
<div class="reply-check node" data-node="repliedToConversationNode">
|
||||
<p><i class="fa-solid fa-shuffle"></i> Replied to conversation?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-drawflow" data-pos_x="25" data-pos_y="450" data-out="0" data-input="1" data-name="contactExits"
|
||||
data-class="contact-exits" data-html="contactExits" data-parent="replyCheck"
|
||||
onclick="addNodeToDrawFlow(this)">
|
||||
<div class="contact-exits node" data-node="contactExitsNode">
|
||||
<p><i class="fa-regular fa-circle-check"></i>
|
||||
Contact Exits</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drag-drawflow" data-pos_x="400" data-pos_y="450" data-out="0" data-input="1" data-name="sendSurvey"
|
||||
data-class="send-survey" data-html="sendSurvey" data-parent="replyCheck" onclick="addNodeToDrawFlow(this)">
|
||||
<div class="send-survey node" data-node="sendSurveyNode">
|
||||
<p><i class="fa-solid fa-list-check"></i> Send survey</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Popup Form HTML -->
|
||||
<div id="popup-form" class="popup global-popup hidden">
|
||||
<div class="popup-content">
|
||||
<span class="popup-close">×</span>
|
||||
<div id="popup-form-content" class="conent-form">
|
||||
<!-- Form fields will be dynamically added here -->
|
||||
<div id="popup-form-fields"></div>
|
||||
<button type="submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
292
dist/main.css
vendored
Normal file
292
dist/main.css
vendored
Normal file
@@ -0,0 +1,292 @@
|
||||
:root {
|
||||
--border-color: #cacaca;
|
||||
--background-color: #ffffff;
|
||||
--background-box-title: #f7f7f7;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin-top: 50px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 67px);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.col {
|
||||
overflow: auto;
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
#drawflow {
|
||||
position: relative;
|
||||
width: calc(100vw - 301px);
|
||||
height: calc(100% - 50px);
|
||||
top: 0;
|
||||
background: var(--background-color);
|
||||
background-size: 25px 25px;
|
||||
background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.parent-drawflow {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.drawflow-node {
|
||||
padding: 10px;
|
||||
border: 1px solid #c3c3c3;
|
||||
background: #fff !important;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.drawflow-node p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drawflow-node .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.drag-drawflow {
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-left: 20px;
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-connection {
|
||||
stroke: #000;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-connection .main-path {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-connection .main-path.replied-yes {
|
||||
stroke: #4caf50;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-connection .main-path.replied-no {
|
||||
stroke: #f44336;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node:hover {
|
||||
box-shadow: 0 0 11px 0px #393939b3;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node .inputs,
|
||||
.drawflow .drawflow-node .outputs {
|
||||
display: flex;
|
||||
width: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node .output {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 50%;
|
||||
color: #8e8e91;
|
||||
border: 2px solid #8e8e91;
|
||||
cursor: crosshair;
|
||||
z-index: 1;
|
||||
top: 24px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node .input {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #8e8e91;
|
||||
border-radius: 50%;
|
||||
color: #8e8e91;
|
||||
border: 2px solid #8e8e91;
|
||||
cursor: crosshair;
|
||||
z-index: 1;
|
||||
top: -24px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.drawflow .drawflow-node {
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-color: #8e8e91;
|
||||
border-radius: 10px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
height: 54px;
|
||||
width: 280px;
|
||||
display: block;
|
||||
}
|
||||
.connection-label {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background: #dceccf;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.connection-label.no {
|
||||
background: #f8d0b5;
|
||||
}
|
||||
|
||||
/* Popup Styling */
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.popup.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.conent-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.conent-form label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.conent-form input,
|
||||
.conent-form textarea,
|
||||
.conent-form select {
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
.conent-form textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.conent-form button {
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.conent-form button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.conent-form .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.conent-form .form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#popup-form-fields {
|
||||
width: 99%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
float: right;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 85px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: 1px solid #96015b;
|
||||
background: #e3195a;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.connection-label.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.drawflow-node .add-note {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#popup-drawflow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#popup-drawflow .popup-content {
|
||||
box-shadow: 0 0 7px 0px #000;
|
||||
}
|
||||
|
||||
#popup-drawflow.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#popup-drawflow .drag-drawflow {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#popup-drawflow .drag-drawflow p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
#popup-drawflow .drag-drawflow i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
258
dist/main.js
vendored
Normal file
258
dist/main.js
vendored
Normal file
@@ -0,0 +1,258 @@
|
||||
"use strict";
|
||||
let lastCreatedNodeId = 1;
|
||||
let lastLargeNodeId = null;
|
||||
// Define node content mappings
|
||||
const nodeContents = {
|
||||
'sendEmailNode': `
|
||||
<label for="email-subject">Subject:</label>
|
||||
<input type="text" id="email-subject" name="email-subject" placeholder="Enter subject">
|
||||
<label for="email-body">Body:</label>
|
||||
<textarea id="email-body" name="email-body" rows="4" placeholder="Enter email body"></textarea>
|
||||
`,
|
||||
'customerSignsUpNode': `
|
||||
<label for="customer-name">Customer Name:</label>
|
||||
<input type="text" id="customer-name" name="customer-name" placeholder="Enter customer name">
|
||||
<label for="customer-email">Customer Email:</label>
|
||||
<input type="email" id="customer-email" name="customer-email" placeholder="Enter customer email">
|
||||
`,
|
||||
'repliedToConversationNode': `
|
||||
<label for="reply-status">Reply Status:</label>
|
||||
<select id="reply-status" name="reply-status">
|
||||
<option value="replied">Replied</option>
|
||||
<option value="not-replied">Not Replied</option>
|
||||
</select>
|
||||
`,
|
||||
'contactExitsNode': `
|
||||
<label for="contact-id">Contact ID:</label>
|
||||
<input type="text" id="contact-id" name="contact-id" placeholder="Enter contact ID">
|
||||
`,
|
||||
'sendSurveyNode': `
|
||||
<label for="survey-question">Survey Question:</label>
|
||||
<input type="text" id="survey-question" name="survey-question" placeholder="Enter survey question">
|
||||
<label for="survey-options">Options (comma-separated):</label>
|
||||
<input type="text" id="survey-options" name="survey-options" placeholder="Option 1, Option 2, ...">
|
||||
`
|
||||
};
|
||||
// Function to show the popup with node information
|
||||
function showPopup(nodeId) {
|
||||
const popup = document.getElementById('popup-form');
|
||||
const nodeInfoElement = document.getElementById('popup-form-fields');
|
||||
const closeBtn = document.querySelector('.popup-close');
|
||||
if (nodeContents[nodeId]) {
|
||||
nodeInfoElement.innerHTML = nodeContents[nodeId];
|
||||
}
|
||||
else {
|
||||
return;
|
||||
}
|
||||
popup.classList.remove('hidden');
|
||||
closeBtn.addEventListener('click', () => {
|
||||
popup.classList.add('hidden');
|
||||
});
|
||||
window.addEventListener('click', (event) => {
|
||||
if (event.target === popup) {
|
||||
popup.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
// Function to add click event listeners to nodes
|
||||
function addClickEventsToParentNodes() {
|
||||
document.querySelectorAll('.parent-node').forEach(parentNode => {
|
||||
parentNode.addEventListener('dblclick', (event) => {
|
||||
const drawflowNode = parentNode.querySelector('.node');
|
||||
const nodeId = drawflowNode.getAttribute('data-node');
|
||||
console.log(parentNode);
|
||||
if (nodeId) {
|
||||
showPopup(nodeId);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Initialize Drawflow editor
|
||||
var editor = new Drawflow(document.getElementById('drawflow'));
|
||||
editor.reroute = true;
|
||||
editor.line_path = 0.5;
|
||||
editor.start();
|
||||
editor.createCurvature = function (start_x, start_y, end_x, end_y, curvature_value, type) {
|
||||
var center_y = ((end_y - start_y) / 2) + start_y;
|
||||
var default_round_radius = 10;
|
||||
var round_radius = Math.min(default_round_radius, Math.abs(start_x - end_x), Math.abs(start_y - end_y));
|
||||
var isRight = end_x > start_x;
|
||||
var isDown = end_y > start_y;
|
||||
return `M ${start_x} ${start_y}
|
||||
L ${start_x} ${isDown ? center_y - round_radius : center_y + round_radius}
|
||||
A ${round_radius} ${round_radius} 0 0 ${isRight ^ !isDown ? 0 : 1} ${isRight ? start_x + round_radius : start_x - round_radius} ${center_y}
|
||||
L ${isRight ? end_x - round_radius : end_x + round_radius} ${center_y}
|
||||
A ${round_radius} ${round_radius} 0 0 ${isRight ^ !isDown ? 1 : 0} ${end_x} ${isDown ? center_y + round_radius : center_y - round_radius}
|
||||
L ${end_x} ${end_y}`;
|
||||
};
|
||||
// Define nodes with HTML content
|
||||
const customerSignUp = `<div class="customer-sign-up node" data-node="customerSignsUpNode"><p><i class="fa-regular fa-circle-play"></i> Customer signs up for product updates</p></div>`;
|
||||
const sendEmail = `<div class="send-email node" data-node="sendEmailNode"><p><i class="fa-regular fa-envelope"></i> Send email</p></div>`;
|
||||
const replyCheck = `<div class="reply-check node" data-node="repliedToConversationNode"><p><i class="fa-solid fa-shuffle"></i> Replied to conversation?</p></div>`;
|
||||
const contactExits = `<div class="contact-exits node" data-node="contactExitsNode"><i class="fa-regular fa-circle-check"></i><p>Contact Exits</p></div>`;
|
||||
const sendSurvey = `<div class="send-survey node" data-node="sendSurveyNode"><p><i class="fa-solid fa-list-check"></i> Send survey</p></div>`;
|
||||
const btnAddNote = `<a href="javascript:void(0)" onclick="ClickAddNote()" class="add-note">Thêm <i class="fa-solid fa-plus"></i></a>`;
|
||||
// Add nodes to the editor
|
||||
const customerSignsUpNode = editor.addNode('customerSignUp', 0, 1, 200, 50, 'customer-sign-up', {}, customerSignUp);
|
||||
const btn_add_note = editor.addNode('add-note', 1, 1, 200, 175, 'add-note', {}, btnAddNote);
|
||||
// const sendEmailNode = editor.addNode('sendEmail', 1, 1, 400, 175, 'send-email', {}, sendEmail.html);
|
||||
// const repliedToConversationNode = editor.addNode('replyCheck', 1, 2, 400, 300, 'reply-check', {}, replyCheck.html);
|
||||
// const contactExitsNode = editor.addNode('contactExits', 1, 0, 200, 450, 'contact-exits', {}, contactExits.html);
|
||||
// const sendSurveyNode = editor.addNode('sendSurvey', 1, 0, 600, 450, 'send-survey', {}, sendSurvey.html);
|
||||
editor.addConnection(customerSignsUpNode, btn_add_note, 'output_1', 'input_1');
|
||||
// editor.addConnection(sendEmailNode, repliedToConversationNode, 'output_1', 'input_1');
|
||||
// editor.addConnection(repliedToConversationNode, contactExitsNode, 'output_1', 'input_1'); // Đường "Yes"
|
||||
// editor.addConnection(repliedToConversationNode, sendSurveyNode, 'output_2', 'input_1'); // Đường "No"
|
||||
// Events!
|
||||
/* DRAG EVENT */
|
||||
// Drag and drop functionality
|
||||
document.getElementById('drawflow')?.addEventListener('drop', drop);
|
||||
document.getElementById('drawflow')?.addEventListener('dragover', allowDrop);
|
||||
function allowDrop(ev) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
function drag(ev) {
|
||||
ev.dataTransfer?.setData("node", ev.target.getAttribute('data-node'));
|
||||
}
|
||||
function drop(ev) {
|
||||
ev.preventDefault();
|
||||
const nodeName = ev.dataTransfer?.getData("node");
|
||||
const x = ev.clientX - ev.target.getBoundingClientRect().left;
|
||||
const y = ev.clientY - ev.target.getBoundingClientRect().top;
|
||||
addNodeToDrawFlow(nodeName, x, y);
|
||||
}
|
||||
function addNodeToDrawFlow(element) {
|
||||
// Ẩn popup và xóa node hiện tại
|
||||
const popup = document.getElementById('popup-drawflow');
|
||||
popup.classList.add('hidden');
|
||||
const id_popup = popup.getAttribute('data-id');
|
||||
editor.removeNodeId(id_popup);
|
||||
editor.updateConnectionNodes(id_popup);
|
||||
const pos_x = parseInt(element.getAttribute('data-pos_x'));
|
||||
const pos_y = parseInt(element.getAttribute('data-pos_y'));
|
||||
const nodeName = element.getAttribute('data-name');
|
||||
const output = parseInt(element.getAttribute('data-out'));
|
||||
const input = parseInt(element.getAttribute('data-input'));
|
||||
const className = element.getAttribute('data-class');
|
||||
const parent = element.getAttribute('data-parent');
|
||||
const nodeHtml = document.querySelector(`.drag-drawflow[data-name="${nodeName}"]`);
|
||||
const contenthtml = nodeHtml.innerHTML;
|
||||
const newNodeId = editor.addNode(nodeName, input, output, pos_x, pos_y, className, {}, contenthtml);
|
||||
// Kết nối node mới với node cuối cùng nếu tồn tại
|
||||
if (lastLargeNodeId) {
|
||||
if (nodeName === 'sendSurvey') {
|
||||
editor.addConnection(lastLargeNodeId, newNodeId, 'output_2', 'input_1'); // Kết nối với output_2 của sendSurvey
|
||||
addLabelToConnection(lastLargeNodeId, newNodeId, 'No', 2);
|
||||
}
|
||||
else {
|
||||
editor.addConnection(lastLargeNodeId, newNodeId, 'output_1', 'input_1'); // Kết nối với output_1 của node trước đó
|
||||
addLabelToConnection(lastLargeNodeId, newNodeId, 'Yes', 1);
|
||||
}
|
||||
}
|
||||
else if (lastCreatedNodeId) {
|
||||
editor.addConnection(lastCreatedNodeId, newNodeId, 'output_1', 'input_1'); // Kết nối với output_1 của node trước đó
|
||||
}
|
||||
// Cập nhật node cuối cùng được tạo
|
||||
if (output === 2) {
|
||||
// Lưu node lớn (có Yes/No)
|
||||
lastLargeNodeId = newNodeId;
|
||||
}
|
||||
else {
|
||||
// Xóa lưu trữ khi không phải node lớn
|
||||
lastCreatedNodeId = newNodeId;
|
||||
}
|
||||
// Loại bỏ nhãn dán cũ nếu có
|
||||
if (nodeName === 'sendSurvey' || nodeName === 'contactExits') {
|
||||
const boxLabel = document.querySelector(`.connection-label`);
|
||||
if (boxLabel) {
|
||||
boxLabel.remove();
|
||||
}
|
||||
}
|
||||
// Thêm nút "Add Note" nếu cần
|
||||
const new_pos_y = pos_y + 130;
|
||||
if (output === 2) {
|
||||
const btn_add_yes = editor.addNode('add-note', 1, 0, 25, 450, 'add-note', {}, btnAddNote);
|
||||
const btn_add_no = editor.addNode('add-note', 1, 0, 400, 450, 'add-note', {}, btnAddNote);
|
||||
editor.addConnection(newNodeId, btn_add_yes, 'output_1', 'input_1');
|
||||
editor.addConnection(newNodeId, btn_add_no, 'output_2', 'input_1');
|
||||
addLabelToConnection(newNodeId, btn_add_yes, 'Yes', 1);
|
||||
addLabelToConnection(newNodeId, btn_add_no, 'No', 2);
|
||||
}
|
||||
else if (output === 0 && parent === 'replyCheck') {
|
||||
// Do nothing in this case
|
||||
}
|
||||
else {
|
||||
const btn_add_note = editor.addNode('add-note', input, output, pos_x, new_pos_y, 'add-note', {}, btnAddNote);
|
||||
editor.addConnection(newNodeId, btn_add_note, 'output_1', 'input_1');
|
||||
}
|
||||
}
|
||||
function ClickAddNote() {
|
||||
const btn = document.querySelector('.drawflow-node.add-note');
|
||||
btn.addEventListener('dblclick', (event) => {
|
||||
const popup = document.getElementById('popup-drawflow');
|
||||
popup.classList.remove('hidden');
|
||||
// Lấy thuộc tính CSS của phần tử
|
||||
const computedStyle = window.getComputedStyle(btn);
|
||||
const top = computedStyle.getPropertyValue('top');
|
||||
const left = computedStyle.getPropertyValue('left');
|
||||
const new_left = parseFloat(left) + 690;
|
||||
popup.style.top = top;
|
||||
popup.style.left = `${new_left}px`;
|
||||
const id = btn.getAttribute('id');
|
||||
popup.setAttribute('data-id', id);
|
||||
});
|
||||
}
|
||||
// Function to add labels to connections
|
||||
function addLabelToConnection(nodeFrom, nodeTo, labelText, outputIndex) {
|
||||
// Lấy phần tử SVG và đường kẻ kết nối
|
||||
const connectionElement = document.querySelector(`.connection.node_in_node-${nodeTo}.node_out_node-${nodeFrom}.output_${outputIndex}`);
|
||||
const svg = connectionElement.closest('svg');
|
||||
const path = svg?.querySelector('path');
|
||||
if (!path)
|
||||
return console.error('Path element not found in SVG');
|
||||
// Tạo và thêm nhãn
|
||||
const label = document.createElement('div');
|
||||
label.className = `connection-label`;
|
||||
label.id = `label-${nodeTo}`;
|
||||
label.textContent = labelText;
|
||||
document.body.appendChild(label);
|
||||
if (labelText === 'No') {
|
||||
label.classList.add('no');
|
||||
}
|
||||
// Cập nhật vị trí nhãn
|
||||
const updateLabelPosition = () => {
|
||||
const connectionBox = connectionElement.getBoundingClientRect();
|
||||
const length = path.getTotalLength();
|
||||
const { x, y } = path.getPointAtLength(length / 2);
|
||||
const svgPoint = svg.createSVGPoint();
|
||||
svgPoint.x = x;
|
||||
svgPoint.y = y;
|
||||
const screenPoint = svgPoint.matrixTransform(svg.getScreenCTM());
|
||||
label.style.position = 'absolute';
|
||||
label.style.left = `${screenPoint.x}px`;
|
||||
label.style.top = `${screenPoint.y - 12}px`;
|
||||
};
|
||||
updateLabelPosition();
|
||||
editor.on('zoom', updateLabelPosition);
|
||||
window.addEventListener('resize', updateLabelPosition);
|
||||
window.addEventListener('mouseup', updateLabelPosition);
|
||||
window.addEventListener('mousemove', updateLabelPosition);
|
||||
}
|
||||
// Drawflow Events
|
||||
editor.on('connectionCreated', function (connection) {
|
||||
console.log('Connection created', connection);
|
||||
});
|
||||
editor.on('connectionRemoved', function (connection) {
|
||||
console.log('Connection removed', connection);
|
||||
});
|
||||
editor.on('nodeSelected', function (connection) {
|
||||
// Add click events to nodes
|
||||
addClickEventsToParentNodes();
|
||||
});
|
||||
const btn_clear = document.getElementById('btn-clear');
|
||||
btn_clear.addEventListener('click', () => {
|
||||
const connectionLabels = document.querySelectorAll('.connection-label');
|
||||
connectionLabels.forEach(label => {
|
||||
label.classList.add('hide');
|
||||
});
|
||||
});
|
||||
1
dist/vite.svg
vendored
Normal file
1
dist/vite.svg
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Reference in New Issue
Block a user