tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

#9160 Added multi selector

This commit is contained in:
Daniel Maya 2023-08-29 08:58:19 +02:00
parent 85c2cc507f
commit 287848b71c
12 changed files with 215 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -727,6 +727,13 @@ div.module-graph .gauge_d3_class {
background: #82b92e;
}
#box-rectangle-selection {
position: absolute;
width: 0px;
height: 0px;
border: 2px solid #002f33;
}
/* Styles for the solid icons */
.fa {

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

131
pandora_console/operation/visual_console/view.php
View File

@ -693,6 +693,14 @@ ui_require_css_file('form');
var baseUrl = "<?php echo ui_get_full_url('/', false, false, false); ?>";
var controls = document.getElementById('vc-controls');
// Rectangle selections.
window.selection_rectangle = [0, 0, 0, 0];
window.key_multiple_selection = 17; // CTRL key.
window.flag_multiple_selection = false;
window.mousedown = false;
window.starX = 0;
window.starY = 0;
autoHideElement(controls, 1000);
var handleUpdate = function (prevProps, newProps) {
if (!newProps) return;
@ -822,6 +830,8 @@ ui_require_css_file('form');
}
}
$('body').append('<div id="box-rectangle-selection"></div>');
<?php
if ($edit_capable === true) {
?>
@ -983,6 +993,111 @@ if ($edit_capable === true) {
}
});
});
$(document).keydown(function(e) {
const edit = $("input[name=edit-mode]").prop('checked');
if (e.keyCode == key_multiple_selection && edit === true) {
flag_multiple_selection = true;
}
});
$("#visual-console-container").mousedown(function(e) {
if (flag_multiple_selection === true &&
e.target.classList.contains("visual-console-item") === false
) {
$('selector').css('cursor', 'crosshair');
document.documentElement.style.cursor = 'crosshair';
mousedown = true;
// Star position.
var rect = document.getElementById('visual-console-container').getBoundingClientRect();
starX = (e.clientX - rect.left) + rect.x;
starY = (e.clientY - rect.top) + rect.y;
$("#box-rectangle-selection").css("top", starY + 'px');
$("#box-rectangle-selection").css("left", starX + 'px');
$("#box-rectangle-selection").css("display", '');
}
});
$(document).mousemove(function(e) {
if (flag_multiple_selection === true && mousedown === true) {
var rect = document.getElementById('visual-console-container').getBoundingClientRect();
var xMouse = (e.clientX - rect.left) + rect.x;
var yMouse = (e.clientY - rect.top) + rect.y;
var x = starX;
var width = xMouse - starX;
if (width < 0) {
x = xMouse;
width = starX - xMouse;
}
var y = starY;
var height = yMouse - starY;
if (height < 0) {
y = yMouse;
height = starY - yMouse;
}
if (xMouse >= rect.x && yMouse >= rect.y &&
xMouse < (rect.x + rect.width) &&
yMouse < (rect.y + rect.height)
) {
$("#box-rectangle-selection").css("top", y + 'px');
$("#box-rectangle-selection").css("left", x + 'px');
$("#box-rectangle-selection").css("width", width + 'px');
$("#box-rectangle-selection").css("height", height + 'px');
var r2 = new Rectangle();
r2.left = x;
r2.top = y;
r2.right = x + width;
r2.bottom = y + height;
visualConsoleManager.visualConsole.elements.forEach(item => {
// Calcular puntos arriba a la izquierda y abajo a la derecha de ambos rectangulos.
var r1 = new Rectangle();
r1.left = item.itemProps.x + rect.x;
r1.top = item.itemProps.y + rect.y;
r1.right = item.itemProps.x + rect.x + item.itemProps.width;
r1.bottom = item.itemProps.y + rect.y + item.itemProps.height;
if (intersectRect(r1, r2)) {
if (item.meta.isSelected === false) {
item.selectItem();
}
}
});
}
}
});
$("#visual-console-container").mouseup(function(e) {
if (flag_multiple_selection === true) {
document.documentElement.style.cursor = 'default';
mousedown = false;
}
$("#box-rectangle-selection").css("width", '0px');
$("#box-rectangle-selection").css("height", '0px');
$("#box-rectangle-selection").css("display", 'none');
});
$(document).keyup(function(e) {
const edit = $("input[name=edit-mode]").prop('checked');
if (e.keyCode == key_multiple_selection && edit === true) {
flag_multiple_selection = false;
document.documentElement.style.cursor = 'default';
mousedown = false;
$("#box-rectangle-selection").css("width", '0px');
$("#box-rectangle-selection").css("height", '0px');
$("#box-rectangle-selection").css("display", 'none');
}
});
<?php
}
?>
@ -1086,6 +1201,22 @@ if ($edit_capable === true) {
visualConsoleManager.forceUpdateVisualConsole();
}
function intersectRect(r1, r2) {
return !(r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);
}
class Rectangle {
constructor(val) {
this.left = val;
this.top = val;
this.right = val;
this.bottom = val;
}
}
/**
* Process ajax responses and shows a dialog with results.
*/

8
visual_console_client/src/Item.ts
View File

@ -274,7 +274,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
// This function will only run the 2nd arg function after the time
// of the first arg have passed after its last execution.
private debouncedMovementSave = debounce(
public debouncedMovementSave = debounce(
500, // ms.
(x: Position["x"], y: Position["y"]) => {
// Update the metadata information.
@ -363,7 +363,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
// This function will only run the 2nd arg function after the time
// of the first arg have passed after its last execution.
private debouncedResizementSave = debounce(
public debouncedResizementSave = debounce(
500, // ms.
(width: Size["width"], height: Size["height"]) => {
// Update the metadata information.
@ -1043,7 +1043,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
* @param x Horizontal axis position.
* @param y Vertical axis position.
*/
protected moveElement(x: number, y: number): void {
public moveElement(x: number, y: number): void {
this.elementRef.style.left = `${x}px`;
this.elementRef.style.top = `${y}px`;
}
@ -1080,7 +1080,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
* @param width
* @param height
*/
protected resizeElement(width: number, height: number): void {
public resizeElement(width: number, height: number): void {
// The most valuable size is the content size.
if (
this.props.type != ItemType.LINE_ITEM &&

59
visual_console_client/src/VisualConsole.ts
View File

@ -286,6 +286,44 @@ export default class VisualConsole {
*/
private handleElementMovement: (e: ItemMovedEvent) => void = e => {
var type = e.item.itemProps.type;
if (
type !== 13 &&
type !== 21 &&
(typeof this.props.gridSelected === "undefined" ||
this.props.gridSelected === false)
) {
this.elements.forEach(item => {
if (
item.meta.isSelected === true &&
e.item.itemProps.id !== item.itemProps.id &&
item.props.type !== 13 &&
item.props.type !== 21
) {
const movement_x = e.newPosition.x - e.item.props.x;
const movement_y = e.newPosition.y - e.item.props.y;
let newX = item.props.x + movement_x;
let newY = item.props.y + movement_y;
if (newX > this.props.width) {
newX = this.props.width;
} else if (newX <= 0) {
newX = 0;
}
if (newY > this.props.height) {
newY = this.props.height;
} else if (newY <= 0) {
newY = 0;
}
item.moveElement(newX, newY);
item.debouncedMovementSave(newX, newY);
}
});
}
if (type !== 13 && type !== 21 && this.props.gridSelected === true) {
var gridSize = this.props.gridSize;
var positionX = e.newPosition.x;
@ -386,6 +424,27 @@ export default class VisualConsole {
* @param e Event object.
*/
private handleElementResizement: (e: ItemResizedEvent) => void = e => {
if (
e.item.props.type !== 13 &&
e.item.props.type !== 21 &&
(typeof this.props.gridSelected === "undefined" ||
this.props.gridSelected === false)
) {
this.elements.forEach(item => {
if (
item.meta.isSelected === true &&
e.item.itemProps.id !== item.itemProps.id &&
item.props.type !== 13 &&
item.props.type !== 21
) {
item.setMeta({ isUpdating: true });
// Resize the DOM element.
item.resizeElement(e.newSize.width, e.newSize.height);
// Run the save function.
item.debouncedResizementSave(e.newSize.width, e.newSize.height);
}
});
}
// Move their relation lines.
const item = e.item;
const props = item.props;

2
visual_console_client/src/items/Clock/index.ts
View File

@ -197,7 +197,7 @@ export default class Clock extends Item<ClockProps> {
* @param width
* @param height
*/
protected resizeElement(width: number, height: number): void {
public resizeElement(width: number, height: number): void {
// Destructuring assigment: http://es6-features.org/#ObjectMatchingShorthandNotation
const { width: newWidth, height: newHeight } = this.getElementSize(
width,

2
visual_console_client/src/items/ColorCloud.ts
View File

@ -363,7 +363,7 @@ export default class ColorCloud extends Item<ColorCloudProps> {
return container;
}
protected resizeElement(width: number): void {
public resizeElement(width: number): void {
super.resizeElement(width, width);
}

2
visual_console_client/src/items/Odometer.ts
View File

@ -271,7 +271,7 @@ export default class Odometer extends Item<OdometerProps> {
}, 500);
}
protected resizeElement(width: number): void {
public resizeElement(width: number): void {
super.resizeElement(width, width / 2);
}

2
visual_console_client/src/items/Percentile.ts
View File

@ -288,7 +288,7 @@ export default class Percentile extends Item<PercentileProps> {
* To update the content element.
* @override Item.updateDomElement
*/
protected resizeElement(width: number, height: number): void {
public resizeElement(width: number, height: number): void {
if (this.props.percentileType === "progress-bar") {
super.resizeElement(width, 35);
} else {

7
visual_console_client/src/main.css
View File

@ -726,3 +726,10 @@ div.module-graph .gauge_d3_class {
.green_background {
background: #82b92e;
}
#box-rectangle-selection {
position: absolute;
width: 0px;
height: 0px;
border: 2px solid #002f33;
}