tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-31 01:35:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Smooth sticky lines

Browse Source
This commit is contained in:
fbsanchez 2021-02-02 16:54:01 +01:00
parent 03b605cd54
commit 9052a02c1b
7 changed files with 124 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

387
pandora_console/include/visual-console-client/vc.main.css
View File

@ -9,21 +9,11 @@
.visual-console-item { .visual-console-item {
position: absolute; position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: initial; flex-direction: initial;
-webkit-box-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
justify-items: center; justify-items: center;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center; user-select: text;
align-items: center;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
z-index: 1; z-index: 1;
} }
@ -37,12 +27,8 @@
.visual-console-item.is-editing { .visual-console-item.is-editing {
border: 2px dashed #b2b2b2; border: 2px dashed #b2b2b2;
-webkit-transform: translateX(-2px) translateY(-2px); transform: translateX(-2px) translateY(-2px);
transform: translateX(-2px) translateY(-2px); user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
.visual-console-item.is-editing:hover { .visual-console-item.is-editing:hover {
@ -69,25 +55,12 @@
pointer-events: none; pointer-events: none;
} }
@-webkit-keyframes spinner-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@keyframes spinner-loading { @keyframes spinner-loading {
0% { 0% {
-webkit-transform: rotate(0deg); transform: rotate(0deg);
transform: rotate(0deg);
} }
to { to {
-webkit-transform: rotate(1turn); transform: rotate(1turn);
transform: rotate(1turn);
} }
} }
@ -99,15 +72,10 @@
border-bottom: 5px solid rgb(82, 85, 87); border-bottom: 5px solid rgb(82, 85, 87);
border-left: 5px solid rgba(82, 85, 87, 0.2); border-left: 5px solid rgba(82, 85, 87, 0.2);
-webkit-animation-name: spinner-loading; animation-name: spinner-loading;
animation-duration: 0.8s;
animation-name: spinner-loading; animation-iteration-count: infinite;
-webkit-animation-duration: 0.8s; animation-timing-function: linear;
animation-duration: 0.8s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
} }
.visual-console-spinner, .visual-console-spinner,
@ -128,12 +96,8 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
opacity: 0.7; opacity: 0.7;
background: rgb(212, 215, 218); background: rgb(212, 215, 218);
z-index: 2; z-index: 2;
@ -149,18 +113,10 @@
/*Forms*/ /*Forms*/
.div-input-group label { .div-input-group label {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal; flex-wrap: wrap;
-ms-flex-direction: row; align-items: center;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 12pt; font-size: 12pt;
font-family: "lato-bolder", "Open Sans", sans-serif; font-family: "lato-bolder", "Open Sans", sans-serif;
font-weight: 600; font-weight: 600;
@ -182,8 +138,7 @@
font-family: "lato-bolder", "Open Sans", sans-serif; font-family: "lato-bolder", "Open Sans", sans-serif;
font-weight: lighter; font-weight: lighter;
padding: 0px 0px 2px 0px; padding: 0px 0px 2px 0px;
-webkit-box-sizing: border-box; box-sizing: border-box;
box-sizing: border-box;
margin-right: 10px; margin-right: 10px;
padding-left: 2px; padding-left: 2px;
} }
@ -201,15 +156,9 @@
} }
.input-groups { .input-groups {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal; flex-wrap: wrap;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
} }
.input-group { .input-group {
@ -219,18 +168,10 @@
} }
.div-ranges-input-group { .div-ranges-input-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal; flex-wrap: wrap;
-ms-flex-direction: column; align-items: flex-start;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
} }
.div-ranges-input-group > div { .div-ranges-input-group > div {
@ -240,18 +181,10 @@
.div-input-group, .div-input-group,
.div-input-group div div { .div-input-group div div {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal; flex-wrap: wrap;
-ms-flex-direction: row; align-items: center;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
.div-input-group h3 { .div-input-group h3 {
@ -268,21 +201,11 @@
} }
.div-input-group-autocomplete-agent { .div-input-group-autocomplete-agent {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal; flex-wrap: wrap;
-ms-flex-direction: column; align-items: flex-start;
flex-direction: column; justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 70px; height: 70px;
} }
@ -345,34 +268,19 @@ p.error-p-validate {
} }
.fa-spin { .fa-spin {
-webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
} }
.fa-pulse { .fa-pulse {
-webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} }
@keyframes fa-spin { @keyframes fa-spin {
0% { 0% {
-webkit-transform: rotate(0deg); transform: rotate(0deg);
transform: rotate(0deg);
} }
100% { 100% {
-webkit-transform: rotate(360deg); transform: rotate(360deg);
transform: rotate(360deg);
} }
} }
@ -426,19 +334,11 @@ p.error-p-validate {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal; justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center; justify-items: center;
-ms-flex-line-pack: center; align-content: center;
align-content: center; align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
.visual-console-item .digital-clock > span { .visual-console-item .digital-clock > span {
@ -468,18 +368,15 @@ p.error-p-validate {
} }
.visual-console-item .analogic-clock .hour-hand { .visual-console-item .analogic-clock .hour-hand {
-webkit-animation: rotate-hour 43200s infinite linear; animation: rotate-hour 43200s infinite linear;
animation: rotate-hour 43200s infinite linear;
} }
.visual-console-item .analogic-clock .minute-hand { .visual-console-item .analogic-clock .minute-hand {
-webkit-animation: rotate-minute 3600s infinite linear; animation: rotate-minute 3600s infinite linear;
animation: rotate-minute 3600s infinite linear;
} }
.visual-console-item .analogic-clock .second-hand { .visual-console-item .analogic-clock .second-hand {
-webkit-animation: rotate-second 60s infinite linear; animation: rotate-second 60s infinite linear;
animation: rotate-second 60s infinite linear;
} }
#html-tabs .ui-widget-header { #html-tabs .ui-widget-header {
@ -489,19 +386,10 @@ p.error-p-validate {
#html-tabs .ui-tabs-anchor { #html-tabs .ui-tabs-anchor {
float: none; float: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal; align-items: center;
-ms-flex-direction: row; justify-content: space-between;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
} }
#html-tabs .ui-tabs-anchor img { #html-tabs .ui-tabs-anchor img {
@ -535,22 +423,13 @@ li#li-position-item > label:not(:first-child) {
} }
li#li-image-item label { li#li-image-item label {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal; justify-content: flex-end;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
} }
li#li-image-item label img { li#li-image-item label img {
-webkit-box-flex: initial; flex: initial;
-ms-flex: initial;
flex: initial;
} }
.discovery.modal * { .discovery.modal * {
@ -579,9 +458,7 @@ li#li-image-item label img {
li#li-timeZone-item > label:not(:first-child), li#li-timeZone-item > label:not(:first-child),
.discovery.modal li#div-textarea-label > label { .discovery.modal li#div-textarea-label > label {
-webkit-box-flex: inherit; flex: inherit;
-ms-flex: inherit;
flex: inherit;
} }
li#li-timeZone-item > select:not(:first-child) { li#li-timeZone-item > select:not(:first-child) {
@ -594,13 +471,8 @@ li#li-timeZone-item > select:not(:first-child) {
/*style item group show statistic*/ /*style item group show statistic*/
.group-container { .group-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -610,120 +482,63 @@ li#li-timeZone-item > select:not(:first-child) {
background-color: #9d9ea0; background-color: #9d9ea0;
color: black; color: black;
font-weight: bold; font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal; align-items: center;
-ms-flex-direction: row; justify-content: center;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
} }
.group-container .group-item-info { .group-container .group-item-info {
width: 100%; width: 100%;
height: 70%; height: 70%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal; flex-wrap: wrap;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 2%; padding: 2%;
-webkit-box-align: center; align-items: center;
-ms-flex-align: center;
align-items: center;
} }
.group-container .group-item-info .group-item-info-container { .group-container .group-item-info .group-item-info-container {
-webkit-box-flex: 1; flex: 1 1 20%;
-ms-flex: 1 1 20%;
flex: 1 1 20%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
border-radius: 2px; border-radius: 2px;
max-height: 50px; max-height: 50px;
margin: 1%; margin: 1%;
} }
.group-container .group-item-info .group-item-info-container .value-style { .group-container .group-item-info .group-item-info-container .value-style {
-webkit-box-flex: 1; flex: 1;
-ms-flex: 1;
flex: 1;
color: #fff; color: #fff;
font-size: 100%; font-size: 100%;
padding: 5%; padding: 5%;
width: 100%; width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal; align-items: center;
-ms-flex-direction: row; justify-content: center;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
} }
.group-container .group-item-info .group-item-info-container .name-style { .group-container .group-item-info .group-item-info-container .name-style {
-webkit-box-flex: 1; flex: 1;
-ms-flex: 1;
flex: 1;
background-color: white; background-color: white;
color: black; color: black;
font-size: 100%; font-size: 100%;
padding: 5%; padding: 5%;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal; align-items: center;
-ms-flex-direction: row; justify-content: center;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
} }
div.label, div.label,
div.simple-value { div.simple-value {
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content; min-width: fit-content;
min-height: -webkit-fit-content;
min-height: -moz-fit-content;
min-height: fit-content; min-height: fit-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal; justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
} }
div.simple-value > div { div.simple-value > div {
@ -737,27 +552,15 @@ div.module-graph .parent_graph p table tr {
div.module-graph { div.module-graph {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: horizontal; flex-direction: row;
-webkit-box-direction: normal; flex-wrap: wrap;
-ms-flex-direction: row; align-items: center;
flex-direction: row; justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
} }
div.module-graph .gauge_d3_class { div.module-graph .gauge_d3_class {
-webkit-box-flex: 1; flex: 1 1 100px;
-ms-flex: 1 1 100px;
flex: 1 1 100px;
float: none !important; float: none !important;
overflow: inherit !important; overflow: inherit !important;
text-align: center; text-align: center;
@ -803,34 +606,19 @@ div.module-graph .gauge_d3_class {
} }
.fa-spin { .fa-spin {
-webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
} }
.fa-pulse { .fa-pulse {
-webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} }
@keyframes fa-spin { @keyframes fa-spin {
0% { 0% {
-webkit-transform: rotate(0deg); transform: rotate(0deg);
transform: rotate(0deg);
} }
100% { 100% {
-webkit-transform: rotate(360deg); transform: rotate(360deg);
transform: rotate(360deg);
} }
} }
@ -879,22 +667,12 @@ div.module-graph .gauge_d3_class {
/* Digital clock */ /* Digital clock */
.visual-console-item .digital-clock { .visual-console-item .digital-clock {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical; flex-direction: column;
-webkit-box-direction: normal; justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center; justify-items: center;
-ms-flex-line-pack: center; align-content: center;
align-content: center; align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
.visual-console-item .digital-clock > span { .visual-console-item .digital-clock > span {
@ -925,18 +703,15 @@ div.module-graph .gauge_d3_class {
} }
.visual-console-item .analogic-clock .hour-hand { .visual-console-item .analogic-clock .hour-hand {
-webkit-animation: rotate-hour 43200s infinite linear; animation: rotate-hour 43200s infinite linear;
animation: rotate-hour 43200s infinite linear;
} }
.visual-console-item .analogic-clock .minute-hand { .visual-console-item .analogic-clock .minute-hand {
-webkit-animation: rotate-minute 3600s infinite linear; animation: rotate-minute 3600s infinite linear;
animation: rotate-minute 3600s infinite linear;
} }
.visual-console-item .analogic-clock .second-hand { .visual-console-item .analogic-clock .second-hand {
-webkit-animation: rotate-second 60s infinite linear; animation: rotate-second 60s infinite linear;
animation: rotate-second 60s infinite linear;
} }

2
pandora_console/include/visual-console-client/vc.main.css.map
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js.map
View File

File diff suppressed because one or more lines are too long

6
visual_console_client/package.json
View File

@ -47,5 +47,9 @@
"webpack": "^4.29.6", "webpack": "^4.29.6",
"webpack-cli": "^3.3.0", "webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1" "webpack-dev-server": "^3.3.1"
} },
"browserslist": [
"> 1%",
"last 2 versions"
]
} }

52
visual_console_client/src/VisualConsole.ts
View File

@ -282,7 +282,7 @@ export default class VisualConsole {
}); });
// Move lines conneted with this item. // Move lines conneted with this item.
this.updateLinesConnected(e.item.props, e.newPosition); this.updateLinesConnected(e.item.props, e.newPosition, false);
// console.log(`Moved element #${e.item.props.id}`, e); // console.log(`Moved element #${e.item.props.id}`, e);
}; };
@ -293,6 +293,8 @@ export default class VisualConsole {
*/ */
private handleElementMovementFinished: (e: ItemMovedEvent) => void = e => { private handleElementMovementFinished: (e: ItemMovedEvent) => void = e => {
this.movedEventManager.emit(e); this.movedEventManager.emit(e);
// Move lines conneted with this item.
this.updateLinesConnected(e.item.props, e.newPosition, true);
// console.log(`Movement finished for element #${e.item.props.id}`, e); // console.log(`Movement finished for element #${e.item.props.id}`, e);
}; };
@ -551,8 +553,9 @@ export default class VisualConsole {
* @param item Item moved. * @param item Item moved.
* @param newPosition New location for item. * @param newPosition New location for item.
* @param oldPosition Old location for item. * @param oldPosition Old location for item.
* @param save Save to ajax or not.
*/ */
protected updateLinesConnected(item: ItemProps, to: Position) { protected updateLinesConnected(item: ItemProps, to: Position, save: boolean) {
if (this.lineLinks[item.id] == null) { if (this.lineLinks[item.id] == null) {
return; return;
} }
@ -585,28 +588,33 @@ export default class VisualConsole {
endY: endY endY: endY
}); });
let debouncedLinePositionSave = debounce(500, (options: AnyObject) => { if (save) {
this.lineMovedEventManager.emit({ let debouncedLinePositionSave = debounce(
item: options.line, 500,
startPosition: { (options: AnyObject) => {
x: options.startX, this.lineMovedEventManager.emit({
y: options.startY item: options.line,
}, startPosition: {
endPosition: { x: options.startX,
x: options.endX, y: options.startY
y: options.endY },
endPosition: {
x: options.endX,
y: options.endY
}
});
} }
}); );
});
// Save line positon. // Save line positon.
debouncedLinePositionSave({ debouncedLinePositionSave({
line: line, line: line,
startX: startX, startX: startX,
startY: startY, startY: startY,
endX: endX, endX: endX,
endY: endY endY: endY
}); });
}
} }
}); });
} }

9
visual_console_client/webpack.config.js
View File

@ -59,10 +59,11 @@ module.exports = {
loader: "postcss-loader", loader: "postcss-loader",
options: { options: {
plugins: () => [ plugins: () => [
// To improve the support for old browsers. // Moved to package.json (?)
require("autoprefixer")({ // // To improve the support for old browsers.
browsers: ["> 1%", "last 2 versions"] // require("autoprefixer")({
}) // browsers: ["> 1%", "last 2 versions"]
// })
] ]
} }
} }