yanyan
24 changed files with 3611 additions and 48 deletions
@ -0,0 +1 @@ |
|||||
|
.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;perspective:0}.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;aspect-ratio:1/1}.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} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||||
|
import {css} from "lit-element"; export const style = 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;perspective:0}.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;aspect-ratio:1/1}.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}`; |
||||
@ -0,0 +1,364 @@ |
|||||
|
: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; |
||||
|
} |
||||
|
|
||||
|
header { |
||||
|
height: 66px; |
||||
|
border-bottom: 1px solid var(--border-color); |
||||
|
padding-left: 20px; |
||||
|
} |
||||
|
header h2 { |
||||
|
margin: 0px; |
||||
|
line-height: 66px; |
||||
|
} |
||||
|
header a { |
||||
|
color: black; |
||||
|
} |
||||
|
.them-edit-link { |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 100px; |
||||
|
color: black; |
||||
|
font-size: 40px; |
||||
|
} |
||||
|
.them-edit-link a { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
.github-link{ |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 20px; |
||||
|
color: black; |
||||
|
} |
||||
|
|
||||
|
.wrapper { |
||||
|
width: 100%; |
||||
|
height: calc(100vh - 67px); |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.col { |
||||
|
overflow: auto; |
||||
|
width: 300px; |
||||
|
height: 100%; |
||||
|
border-right: 1px solid var(--border-color); |
||||
|
} |
||||
|
|
||||
|
.drag-drawflow { |
||||
|
line-height: 50px; |
||||
|
border-bottom: 1px solid var(--border-color); |
||||
|
padding-left: 20px; |
||||
|
cursor: move; |
||||
|
user-select: none; |
||||
|
} |
||||
|
.menu { |
||||
|
position: absolute; |
||||
|
height: 40px; |
||||
|
display: block; |
||||
|
background: white; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.menu ul { |
||||
|
padding: 0px; |
||||
|
margin: 0px; |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
|
||||
|
.menu ul li { |
||||
|
display: inline-block; |
||||
|
margin-left: 10px; |
||||
|
border-right: 1px solid var(--border-color); |
||||
|
padding-right: 10px; |
||||
|
line-height: 40px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.menu ul li.selected { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.btn-export { |
||||
|
float: right; |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 10px; |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
border: 1px solid #0e5ba3; |
||||
|
background: #4ea9ff; |
||||
|
padding: 5px 10px; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
z-index: 5; |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
.swal-wide{ |
||||
|
width:80% !important; |
||||
|
} |
||||
|
|
||||
|
.btn-lock { |
||||
|
float: right; |
||||
|
position: absolute; |
||||
|
bottom: 10px; |
||||
|
right: 140px; |
||||
|
display: flex; |
||||
|
font-size: 24px; |
||||
|
color: white; |
||||
|
padding: 5px 10px; |
||||
|
background: #555555; |
||||
|
border-radius: 4px; |
||||
|
border-right: 1px solid var(--border-color); |
||||
|
z-index: 5; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.bar-zoom { |
||||
|
float: right; |
||||
|
position: absolute; |
||||
|
bottom: 10px; |
||||
|
right: 10px; |
||||
|
display: flex; |
||||
|
font-size: 24px; |
||||
|
color: white; |
||||
|
padding: 5px 10px; |
||||
|
background: #555555; |
||||
|
border-radius: 4px; |
||||
|
border-right: 1px solid var(--border-color); |
||||
|
z-index: 5; |
||||
|
} |
||||
|
.bar-zoom svg { |
||||
|
cursor: pointer; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
.bar-zoom svg:nth-child(1) { |
||||
|
padding-left: 0px; |
||||
|
} |
||||
|
|
||||
|
#drawflow { |
||||
|
position: relative; |
||||
|
width: calc(100vw - 301px); |
||||
|
height: calc(100% - 50px); |
||||
|
top: 40px; |
||||
|
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); |
||||
|
} |
||||
|
|
||||
|
@media only screen and (max-width: 768px) { |
||||
|
.col { |
||||
|
width: 50px; |
||||
|
} |
||||
|
.col .drag-drawflow span { |
||||
|
display:none; |
||||
|
} |
||||
|
#drawflow { |
||||
|
width: calc(100vw - 51px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* Editing Drawflow */ |
||||
|
|
||||
|
.drawflow .drawflow-node { |
||||
|
background: var(--background-color); |
||||
|
border: 1px solid var(--border-color); |
||||
|
-webkit-box-shadow: 0 2px 15px 2px var(--border-color); |
||||
|
box-shadow: 0 2px 15px 2px var(--border-color); |
||||
|
padding: 0px; |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
.drawflow .drawflow-node.selected { |
||||
|
background: white; |
||||
|
border: 1px solid #4ea9ff; |
||||
|
-webkit-box-shadow: 0 2px 20px 2px #4ea9ff; |
||||
|
box-shadow: 0 2px 20px 2px #4ea9ff; |
||||
|
} |
||||
|
|
||||
|
.drawflow .drawflow-node.selected .title-box { |
||||
|
color: #22598c; |
||||
|
/*border-bottom: 1px solid #4ea9ff;*/ |
||||
|
} |
||||
|
|
||||
|
.drawflow .connection .main-path { |
||||
|
stroke: #4ea9ff; |
||||
|
stroke-width: 3px; |
||||
|
} |
||||
|
|
||||
|
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { |
||||
|
height: 15px; |
||||
|
width: 15px; |
||||
|
border: 2px solid var(--border-color); |
||||
|
} |
||||
|
|
||||
|
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { |
||||
|
background: #4ea9ff; |
||||
|
} |
||||
|
|
||||
|
.drawflow .drawflow-node .output { |
||||
|
right: 10px; |
||||
|
} |
||||
|
|
||||
|
.drawflow .drawflow-node .input { |
||||
|
left: -10px; |
||||
|
background: white; |
||||
|
} |
||||
|
|
||||
|
.drawflow > .drawflow-delete { |
||||
|
border: 2px solid #43b993; |
||||
|
background: white; |
||||
|
color: #43b993; |
||||
|
-webkit-box-shadow: 0 2px 20px 2px #43b993; |
||||
|
box-shadow: 0 2px 20px 2px #43b993; |
||||
|
} |
||||
|
|
||||
|
.drawflow-delete { |
||||
|
border: 2px solid #4ea9ff; |
||||
|
background: white; |
||||
|
color: #4ea9ff; |
||||
|
-webkit-box-shadow: 0 2px 20px 2px #4ea9ff; |
||||
|
box-shadow: 0 2px 20px 2px #4ea9ff; |
||||
|
} |
||||
|
|
||||
|
.drawflow-node .title-box { |
||||
|
height: 50px; |
||||
|
line-height: 50px; |
||||
|
background: var(--background-box-title); |
||||
|
border-bottom: 1px solid #e9e9e9; |
||||
|
border-radius: 4px 4px 0px 0px; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
.drawflow .title-box svg { |
||||
|
position: initial; |
||||
|
} |
||||
|
.drawflow-node .box { |
||||
|
padding: 10px 20px 20px 20px; |
||||
|
font-size: 14px; |
||||
|
color: #555555; |
||||
|
|
||||
|
} |
||||
|
.drawflow-node .box p { |
||||
|
margin-top: 5px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
.drawflow-node.welcome { |
||||
|
width: 250px; |
||||
|
} |
||||
|
|
||||
|
.drawflow-node.slack .title-box { |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.drawflow-node input, .drawflow-node select, .drawflow-node textarea { |
||||
|
border-radius: 4px; |
||||
|
border: 1px solid var(--border-color); |
||||
|
height: 30px; |
||||
|
line-height: 30px; |
||||
|
font-size: 16px; |
||||
|
width: 158px; |
||||
|
color: #555555; |
||||
|
} |
||||
|
|
||||
|
.drawflow-node textarea { |
||||
|
height: 100px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.drawflow-node.personalized { |
||||
|
background: red; |
||||
|
height: 200px; |
||||
|
text-align: center; |
||||
|
color: white; |
||||
|
} |
||||
|
.drawflow-node.personalized .input { |
||||
|
background: yellow; |
||||
|
} |
||||
|
.drawflow-node.personalized .output { |
||||
|
background: green; |
||||
|
} |
||||
|
|
||||
|
.drawflow-node.personalized.selected { |
||||
|
background: blue; |
||||
|
} |
||||
|
|
||||
|
.drawflow .connection .point { |
||||
|
stroke: var(--border-color); |
||||
|
stroke-width: 2; |
||||
|
fill: white; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.drawflow .connection .point.selected, .drawflow .connection .point:hover { |
||||
|
fill: #4ea9ff; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Modal */ |
||||
|
.modal { |
||||
|
display: none; |
||||
|
position: fixed; |
||||
|
z-index: 7; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
overflow: auto; |
||||
|
background-color: rgb(0,0,0); |
||||
|
background-color: rgba(0,0,0,0.7); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.modal-content { |
||||
|
position: relative; |
||||
|
background-color: #fefefe; |
||||
|
margin: 15% auto; /* 15% from the top and centered */ |
||||
|
padding: 20px; |
||||
|
border: 1px solid #888; |
||||
|
width: 400px; /* Could be more or less, depending on screen size */ |
||||
|
} |
||||
|
|
||||
|
/* The Close Button */ |
||||
|
.modal .close { |
||||
|
color: #aaa; |
||||
|
float: right; |
||||
|
font-size: 28px; |
||||
|
font-weight: bold; |
||||
|
cursor:pointer; |
||||
|
} |
||||
|
|
||||
|
@media only screen and (max-width: 768px) { |
||||
|
.modal-content { |
||||
|
width: 80%; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
<!doctype html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<script type="module" src="drawflow-element.js"></script> |
||||
|
<title>Drawflow Element</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<drawflow-element></drawflow-element> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,48 @@ |
|||||
|
import { css, LitElement, html } from 'lit-element'; |
||||
|
import { style } from '../dist/drawflow.style'; |
||||
|
import '../dist/drawflow.min'; |
||||
|
|
||||
|
class DrawflowElement extends LitElement { |
||||
|
static get styles() { |
||||
|
return [ |
||||
|
style, |
||||
|
css` |
||||
|
#drawflow { |
||||
|
display: block; |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 800px; |
||||
|
} |
||||
|
` |
||||
|
]; |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
return html` |
||||
|
<div id="drawflow"></div> |
||||
|
`;
|
||||
|
} |
||||
|
|
||||
|
firstUpdated() { |
||||
|
const container = this.shadowRoot?.getElementById('drawflow'); |
||||
|
const editor = new Drawflow(container); |
||||
|
|
||||
|
editor.reroute = true; |
||||
|
editor.reroute_fix_curvature = true; |
||||
|
|
||||
|
editor.start(); |
||||
|
|
||||
|
const data = { |
||||
|
name: '' |
||||
|
}; |
||||
|
|
||||
|
editor.addNode('foo', 1, 1, 100, 200, 'foo', data, 'Foo'); |
||||
|
editor.addNode('bar', 1, 1, 400, 100, 'bar', data, 'Bar A'); |
||||
|
editor.addNode('bar', 1, 1, 400, 300, 'bar', data, 'Bar B'); |
||||
|
|
||||
|
editor.addConnection(1, 2, "output_1", "input_1"); |
||||
|
editor.addConnection(1, 3, "output_1", "input_1"); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
customElements.define("drawflow-element", DrawflowElement); |
||||
|
After Width: | Height: | Size: 6.8 MiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,63 @@ |
|||||
|
/* cyrillic-ext */ |
||||
|
@font-face { |
||||
|
font-family: 'Roboto'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
font-display: swap; |
||||
|
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2'); |
||||
|
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; |
||||
|
} |
||||
|
/* cyrillic */ |
||||
|
@font-face { |
||||
|
font-family: 'Roboto'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
font-display: swap; |
||||
|
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2'); |
||||
|
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
||||
|
} |
||||
|
/* greek-ext */ |
||||
|
@font-face { |
||||
|
font-family: 'Roboto'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
font-display: swap; |
||||
|
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2'); |
||||
|
unicode-range: U+1F00-1FFF; |
||||
|
} |
||||
|
/* greek */ |
||||
|
@font-face { |
||||
|
font-family: 'Roboto'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
font-display: swap; |
||||
|
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2'); |
||||
|
unicode-range: U+0370-03FF; |
||||
|
} |
||||
|
/* vietnamese */ |
||||
|
@font-face { |
||||
|
font-family: 'Roboto'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
font-display: swap; |
||||
|
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2'); |
||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; |
||||
|
} |
||||
|
/* latin-ext */ |
||||
|
@font-face { |
||||
|
font-family: 'Roboto'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
font-display: swap; |
||||
|
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2'); |
||||
|
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
||||
|
} |
||||
|
/* latin */ |
||||
|
@font-face { |
||||
|
font-family: 'Roboto'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
font-display: swap; |
||||
|
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); |
||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,141 @@ |
|||||
|
.parent-drawflow { |
||||
|
display: flex; |
||||
|
overflow: hidden; |
||||
|
touch-action: none; |
||||
|
outline:none; |
||||
|
} |
||||
|
|
||||
|
.drawflow { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
user-select: none; |
||||
|
perspective: 0; |
||||
|
} |
||||
|
|
||||
|
.drawflow .parent-node { |
||||
|
position: relative; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.drawflow .drawflow-node { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
background: cyan; |
||||
|
width: 160px; |
||||
|
min-height: 40px; |
||||
|
border-radius:4px; |
||||
|
border: 2px solid black; |
||||
|
color: black; |
||||
|
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: 0px; |
||||
|
} |
||||
|
|
||||
|
.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: white; |
||||
|
border-radius: 50%; |
||||
|
border: 2px solid black; |
||||
|
cursor: crosshair; |
||||
|
z-index: 1; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
.drawflow .drawflow-node .input { |
||||
|
left: -27px; |
||||
|
top: 2px; |
||||
|
background: yellow; |
||||
|
} |
||||
|
.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; |
||||
|
aspect-ratio: 1 / 1; |
||||
|
} |
||||
|
.drawflow .connection .main-path { |
||||
|
fill: none; |
||||
|
stroke-width: 5px; |
||||
|
stroke: steelblue; |
||||
|
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: black; |
||||
|
stroke-width: 2; |
||||
|
fill: white; |
||||
|
pointer-events: all; |
||||
|
} |
||||
|
|
||||
|
.drawflow .connection .point.selected, .drawflow .connection .point:hover { |
||||
|
fill: #1266ab; |
||||
|
} |
||||
|
|
||||
|
.drawflow .main-path { |
||||
|
fill: none; |
||||
|
stroke-width: 5px; |
||||
|
stroke: steelblue; |
||||
|
} |
||||
|
|
||||
|
.drawflow-delete { |
||||
|
position: absolute; |
||||
|
display: block; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
background: black; |
||||
|
color: white; |
||||
|
z-index: 4; |
||||
|
border: 2px solid white; |
||||
|
line-height: 30px; |
||||
|
font-weight: bold; |
||||
|
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; |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,483 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
||||
|
<title>Drawflow</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<script src="/drawflow/dist/drawflow.min.js"></script> |
||||
|
<script src="/drawflow/lib/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script> |
||||
|
<link rel="stylesheet" type="text/css" href="/drawflow/src/drawflow.css" /> |
||||
|
<link rel="stylesheet" type="text/css" href="/drawflow/docs/beautiful.css" /> |
||||
|
<link rel="stylesheet" href="/drawflow/lib/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" /> |
||||
|
<link href="/drawflow/lib/css2.css" rel="stylesheet"> |
||||
|
<script src="/drawflow/lib/sweetalert2@9.js"></script> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<header> |
||||
|
<h3>题目绑定</h3> |
||||
|
|
||||
|
</header> |
||||
|
<div class="wrapper"> |
||||
|
<div class="col"> |
||||
|
<div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="facebook"> |
||||
|
<i class="fab fa-facebook"></i><span> 文本</span> |
||||
|
</div> |
||||
|
<!-- <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="slack">--> |
||||
|
<!-- <i class="fab fa-slack"></i><span> Slack recive message</span>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="github">--> |
||||
|
<!-- <i class="fab fa-github"></i><span> Github Star</span>--> |
||||
|
<!-- </div>--> |
||||
|
<div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="telegram"> |
||||
|
<i class="fab fa-telegram"></i><span> 下一题</span> |
||||
|
</div> |
||||
|
<!-- <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="aws">--> |
||||
|
<!-- <i class="fab fa-aws"></i><span> AWS</span>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="log">--> |
||||
|
<!-- <i class="fas fa-file-signature"></i><span> File Log</span>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="google">--> |
||||
|
<!-- <i class="fab fa-google-drive"></i><span> Google Drive save</span>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="email">--> |
||||
|
<!-- <i class="fas fa-at"></i><span> Email send</span>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="template">--> |
||||
|
<!-- <i class="fas fa-code"></i><span> Template</span>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="multiple">--> |
||||
|
<!-- <i class="fas fa-code-branch"></i><span> Multiple inputs/outputs</span>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="personalized">--> |
||||
|
<!-- <i class="fas fa-fill"></i><span> Personalized</span>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="dbclick">--> |
||||
|
<!-- <i class="fas fa-mouse"></i><span> DBClick!</span>--> |
||||
|
<!-- </div>--> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
<div class="col-right"> |
||||
|
<div class="menu"> |
||||
|
<ul> |
||||
|
<li onclick="editor.changeModule('Home'); changeModule(event);" class="selected">主界面</li> |
||||
|
<!--<li onclick="editor.changeModule('Other'); changeModule(event);">Other Module</li> --> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div id="drawflow" ondrop="drop(event)" ondragover="allowDrop(event)"> |
||||
|
|
||||
|
<div class="btn-export" onclick="Swal.fire({ title: 'Export', |
||||
|
html: '<pre><code>'+JSON.stringify(editor.export(), null,4)+'</code></pre>' |
||||
|
})">Export</div> |
||||
|
<!--<div class="btn-clear" onclick="editor.clearModuleSelected()">Clear</div> |
||||
|
<div class="btn-lock"> |
||||
|
<i id="lock" class="fas fa-lock" onclick="editor.editor_mode='fixed'; changeMode('lock');"></i> |
||||
|
<i id="unlock" class="fas fa-lock-open" onclick="editor.editor_mode='edit'; changeMode('unlock');" style="display:none;"></i> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bar-zoom"> |
||||
|
<i class="fas fa-search-minus" onclick="editor.zoom_out()"></i> |
||||
|
<i class="fas fa-search" onclick="editor.zoom_reset()"></i> |
||||
|
<i class="fas fa-search-plus" onclick="editor.zoom_in()"></i> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
var id = document.getElementById("drawflow"); |
||||
|
const editor = new Drawflow(id); |
||||
|
editor.reroute = true; |
||||
|
editor.reroute_fix_curvature = true; |
||||
|
editor.force_first_input = false; |
||||
|
|
||||
|
/* |
||||
|
editor.createCurvature = function(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) { |
||||
|
var center_x = ((end_pos_x - start_pos_x)/2)+start_pos_x; |
||||
|
return ' M ' + start_pos_x + ' ' + start_pos_y + ' L '+ center_x +' ' + start_pos_y + ' L ' + center_x + ' ' + end_pos_y + ' L ' + end_pos_x + ' ' + end_pos_y; |
||||
|
}*/ |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
const dataToImport = { |
||||
|
"drawflow": { |
||||
|
"Home": { |
||||
|
"data": { |
||||
|
"1": { |
||||
|
"id": 1, |
||||
|
"name": "开始", |
||||
|
"data": {}, |
||||
|
"class": "facebook", |
||||
|
"html": "\n <div>\n <div class=\"title-box\"><i class=\"fab fa-facebook\"></i> 开始</div>\n </div>\n ", |
||||
|
"typenode": false, |
||||
|
"inputs": {}, |
||||
|
"outputs": { |
||||
|
"output_1": { |
||||
|
"connections": [{ |
||||
|
"node": "2", |
||||
|
"output": "input_1" |
||||
|
}, { |
||||
|
"node": "3", |
||||
|
"output": "input_1" |
||||
|
}, { |
||||
|
"node": "11", |
||||
|
"output": "input_1" |
||||
|
}] |
||||
|
} |
||||
|
}, |
||||
|
"pos_x": 25, |
||||
|
"pos_y": 100 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
editor.start(); |
||||
|
editor.import(dataToImport); |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* |
||||
|
var welcome = ` |
||||
|
<div> |
||||
|
<div class="title-box">👏 Welcome!!</div> |
||||
|
<div class="box"> |
||||
|
<p>Simple flow library <b>demo</b> |
||||
|
<a href="https://github.com/jerosoler/Drawflow" target="_blank">Drawflow</a> by <b>Jero Soler</b></p><br> |
||||
|
|
||||
|
<p>Multiple input / outputs<br> |
||||
|
Data sync nodes<br> |
||||
|
Import / export<br> |
||||
|
Modules support<br> |
||||
|
Simple use<br> |
||||
|
Type: Fixed or Edit<br> |
||||
|
Events: view console<br> |
||||
|
Pure Javascript<br> |
||||
|
</p> |
||||
|
<br> |
||||
|
<p><b><u>Shortkeys:</u></b></p> |
||||
|
<p>🎹 <b>Delete</b> for remove selected<br> |
||||
|
💠 Mouse Left Click == Move<br> |
||||
|
❌ Mouse Right == Delete Option<br> |
||||
|
🔍 Ctrl + Wheel == Zoom<br> |
||||
|
📱 Mobile support<br> |
||||
|
...</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
`; |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
//editor.addNode(name, "typenode": false, inputs, outputs, posx, posy, class, data, html); |
||||
|
/*editor.addNode('welcome', 0, 0, 50, 50, 'welcome', {}, welcome ); |
||||
|
editor.addModule('Other'); |
||||
|
*/ |
||||
|
|
||||
|
// Events! |
||||
|
editor.on('nodeCreated', function(id) { |
||||
|
console.log("Node created " + id); |
||||
|
}) |
||||
|
|
||||
|
editor.on('nodeRemoved', function(id) { |
||||
|
console.log("Node removed " + id); |
||||
|
}) |
||||
|
|
||||
|
editor.on('nodeSelected', function(id) { |
||||
|
console.log("Node selected " + id); |
||||
|
}) |
||||
|
|
||||
|
editor.on('moduleCreated', function(name) { |
||||
|
console.log("Module Created " + name); |
||||
|
}) |
||||
|
|
||||
|
editor.on('moduleChanged', function(name) { |
||||
|
console.log("Module Changed " + name); |
||||
|
}) |
||||
|
|
||||
|
editor.on('connectionCreated', function(connection) { |
||||
|
console.log('Connection created'); |
||||
|
console.log(connection); |
||||
|
}) |
||||
|
|
||||
|
editor.on('connectionRemoved', function(connection) { |
||||
|
console.log('Connection removed'); |
||||
|
console.log(connection); |
||||
|
}) |
||||
|
/* |
||||
|
editor.on('mouseMove', function(position) { |
||||
|
console.log('Position mouse x:' + position.x + ' y:'+ position.y); |
||||
|
}) |
||||
|
*/ |
||||
|
editor.on('nodeMoved', function(id) { |
||||
|
console.log("Node moved " + id); |
||||
|
}) |
||||
|
|
||||
|
editor.on('zoom', function(zoom) { |
||||
|
console.log('Zoom level ' + zoom); |
||||
|
}) |
||||
|
|
||||
|
editor.on('translate', function(position) { |
||||
|
console.log('Translate x:' + position.x + ' y:'+ position.y); |
||||
|
}) |
||||
|
|
||||
|
editor.on('addReroute', function(id) { |
||||
|
console.log("Reroute added " + id); |
||||
|
}) |
||||
|
|
||||
|
editor.on('removeReroute', function(id) { |
||||
|
console.log("Reroute removed " + id); |
||||
|
}) |
||||
|
/* DRAG EVENT */ |
||||
|
|
||||
|
/* Mouse and Touch Actions */ |
||||
|
|
||||
|
var elements = document.getElementsByClassName('drag-drawflow'); |
||||
|
for (var i = 0; i < elements.length; i++) { |
||||
|
elements[i].addEventListener('touchend', drop, false); |
||||
|
elements[i].addEventListener('touchmove', positionMobile, false); |
||||
|
elements[i].addEventListener('touchstart', drag, false ); |
||||
|
} |
||||
|
|
||||
|
var mobile_item_selec = ''; |
||||
|
var mobile_last_move = null; |
||||
|
function positionMobile(ev) { |
||||
|
mobile_last_move = ev; |
||||
|
} |
||||
|
|
||||
|
function allowDrop(ev) { |
||||
|
ev.preventDefault(); |
||||
|
} |
||||
|
|
||||
|
function drag(ev) { |
||||
|
if (ev.type === "touchstart") { |
||||
|
mobile_item_selec = ev.target.closest(".drag-drawflow").getAttribute('data-node'); |
||||
|
} else { |
||||
|
ev.dataTransfer.setData("node", ev.target.getAttribute('data-node')); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function drop(ev) { |
||||
|
if (ev.type === "touchend") { |
||||
|
var parentdrawflow = document.elementFromPoint( mobile_last_move.touches[0].clientX, mobile_last_move.touches[0].clientY).closest("#drawflow"); |
||||
|
if(parentdrawflow != null) { |
||||
|
addNodeToDrawFlow(mobile_item_selec, mobile_last_move.touches[0].clientX, mobile_last_move.touches[0].clientY); |
||||
|
} |
||||
|
mobile_item_selec = ''; |
||||
|
} else { |
||||
|
ev.preventDefault(); |
||||
|
var data = ev.dataTransfer.getData("node"); |
||||
|
addNodeToDrawFlow(data, ev.clientX, ev.clientY); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
function addNodeToDrawFlow(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, 1, pos_x, pos_y, 'facebook', {}, 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', 1, 0, pos_x, pos_y, 'slack', {}, 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', 1, 1, pos_x, pos_y, 'template', { "template": 'Write your template'}, 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)">×</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 = ''; |
||||
|
function showpopup(e) { |
||||
|
e.target.closest(".drawflow-node").style.zIndex = "9999"; |
||||
|
e.target.children[0].style.display = "block"; |
||||
|
//document.getElementById("modalfix").style.display = "block"; |
||||
|
|
||||
|
//e.target.children[0].style.transform = 'translate('+translate.x+'px, '+translate.y+'px)'; |
||||
|
transform = editor.precanvas.style.transform; |
||||
|
editor.precanvas.style.transform = ''; |
||||
|
editor.precanvas.style.left = editor.canvas_x +'px'; |
||||
|
editor.precanvas.style.top = editor.canvas_y +'px'; |
||||
|
console.log(transform); |
||||
|
|
||||
|
//e.target.children[0].style.top = -editor.canvas_y - editor.container.offsetTop +'px'; |
||||
|
//e.target.children[0].style.left = -editor.canvas_x - editor.container.offsetLeft +'px'; |
||||
|
editor.editor_mode = "fixed"; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
function closemodal(e) { |
||||
|
e.target.closest(".drawflow-node").style.zIndex = "2"; |
||||
|
e.target.parentElement.parentElement.style.display ="none"; |
||||
|
//document.getElementById("modalfix").style.display = "none"; |
||||
|
editor.precanvas.style.transform = transform; |
||||
|
editor.precanvas.style.left = '0px'; |
||||
|
editor.precanvas.style.top = '0px'; |
||||
|
editor.editor_mode = "edit"; |
||||
|
} |
||||
|
|
||||
|
function changeModule(event) { |
||||
|
var all = document.querySelectorAll(".menu ul li"); |
||||
|
for (var i = 0; i < all.length; i++) { |
||||
|
all[i].classList.remove('selected'); |
||||
|
} |
||||
|
event.target.classList.add('selected'); |
||||
|
} |
||||
|
|
||||
|
function changeMode(option) { |
||||
|
|
||||
|
//console.log(lock.id); |
||||
|
if(option == 'lock') { |
||||
|
lock.style.display = 'none'; |
||||
|
unlock.style.display = 'block'; |
||||
|
} else { |
||||
|
lock.style.display = 'block'; |
||||
|
unlock.style.display = 'none'; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue