WIP network links VC

This commit is contained in:
fbsanchez 2020-11-03 16:35:11 +01:00
parent 90f199c5ad
commit d85c1ace3c
16 changed files with 240 additions and 41 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

View File

@ -289,6 +289,7 @@ function createVisualConsole(
endX: e.endPosition.x,
endY: e.endPosition.y
};
var taskId = "visual-console-item-update-" + id;
// Persist the new position.
@ -312,6 +313,12 @@ function createVisualConsole(
// TODO: Move the element to its initial position.
}
try {
var decoded_data = JSON.parse(data);
visualConsole.updateElement(decoded_data);
} catch (error) {
console.error(error);
}
done();
}
);

View File

@ -61,12 +61,12 @@ abstract class Entity
/**
* Instances a new object using array definition.
*
* @param string $class_str Class name.
* @param array $data Fields data.
* @param string $class_str Class name.
*
* @return object With current definition.
*/
public static function build(string $class_str, array $data=[])
public static function build(array $data=[], string $class_str=__CLASS__)
{
$obj = new $class_str();
// Set values.

View File

@ -136,11 +136,12 @@ class Module extends Entity
/**
* Creates a module object from given data. Avoid query duplication.
*
* @param array $data Module information.
* @param array $data Module information.
* @param string $class_str Class name.
*
* @return PandoraFMS\Module Object.
*/
public static function build(array $data=[])
public static function build(array $data=[], string $class_str=__CLASS__)
{
$obj = new Module();

View File

@ -71,6 +71,8 @@ final class NetworkLink extends Model
'labelEndWidth' => static::extractlabelEndWidth($data),
'labelStartHeight' => static::extractlabelStartHeight($data),
'labelEndHeight' => static::extractlabelEndHeight($data),
'linkedStart' => static::extractlinkedStart($data),
'linkedEnd' => static::extractlinkedEnd($data),
];
}
@ -312,6 +314,38 @@ final class NetworkLink extends Model
}
/**
* Extract label StartHeight.
*
* @param array $data Unknown input data structure.
*
* @return mixed Float representing label StartHeight or null.
*/
private static function extractlinkedStart(array $data)
{
return static::extractExtra(
'linkedStart',
$data
);
}
/**
* Extract label EndHeight.
*
* @param array $data Unknown input data structure.
*
* @return mixed Float representing label EndHeight or null.
*/
private static function extractlinkedEnd(array $data)
{
return static::extractExtra(
'linkedEnd',
$data
);
}
/**
* Obtain a vc item data structure from the database using a filter.
*
@ -342,25 +376,135 @@ final class NetworkLink extends Model
$row['pos_y'] = ($row['pos_y'] * $ratio);
}
$row['label'] = static::buildLabels($row);
return $row;
}
/**
* Calculates linked elements given line data.
*
* @param array $data Input data (item).
*
* @return array With start and end elements.
*/
private static function getLinkedItems(array $data)
{
$startX = $data['startX'];
$startY = $data['startY'];
$endX = $data['endX'];
$endY = $data['endY'];
if (isset($data['width'])) {
// Row format.
$startX = $data['pos_x'];
$startY = $data['pos_y'];
$endX = $data['width'];
$endY = $data['height'];
}
$start = \db_get_row_filter(
'tlayout_data',
[
'id_layout' => $data['id_layout'],
'pos_x' => '<'.$startX,
'pos_y' => '<'.$startY,
'pos_x`+`width' => '>'.$startX,
'pos_y`+`height' => '>'.$startY,
'order' => [
[
'field' => 'show_on_top',
'order' => 'desc',
],
[
'field' => 'id',
'order' => 'desc',
],
],
]
);
$end = \db_get_row_filter(
'tlayout_data',
[
'id_layout' => $data['id_layout'],
'pos_x' => '<'.$endX,
'pos_y' => '<'.$endY,
'pos_x`+`width' => '>'.$endX,
'pos_y`+`height' => '>'.$endY,
'order' => [
[
'field' => 'show_on_top',
'order' => 'desc',
],
[
'field' => 'id',
'order' => 'desc',
],
],
]
);
return [
'start' => $start,
'end' => $end,
];
}
/**
* Builds a label depending on the information available.
*
* @param array $data Input data.
*
* @return string JSON encoded results to be stored in DB.
*/
private function buildLabels()
private static function buildLabels(array $data)
{
$links = self::getLinkedItems($data);
$labelStart = null;
$labelEnd = null;
$linkedStart = null;
$linkedEnd = null;
if (isset($links['start']) === true) {
$linkedStart = $links['start']['id'];
if (is_numeric($links['start']['id_agente_modulo']) === true
&& $links['start']['id_agente_modulo'] > 0
) {
$module = new \PandoraFMS\Module(
(int) $links['start']['id_agente_modulo']
);
$labelStart = $module->nombre();
}
}
if (isset($links['end']) === true) {
$linkedEnd = $links['end']['id'];
if (is_numeric($links['end']['id_agente_modulo']) === true
&& $links['end']['id_agente_modulo'] > 0
) {
$module = new \PandoraFMS\Module(
(int) $links['end']['id_agente_modulo']
);
$labelEnd = $module->nombre();
}
}
return json_encode(
[
'labelStart' => 'cadena inicio',
'labelEnd' => 'cadena fin',
'labelStartWidth' => 105,
'labelStartHeight' => 105,
'labelEndWidth' => 105,
'labelEndHeight' => 105,
'labelStart' => io_safe_output($labelStart),
'labelEnd' => io_safe_output($labelEnd),
'linkedStart' => $linkedStart,
'linkedEnd' => $linkedEnd,
// 'labelStartWidth' => 105,
// 'labelStartHeight' => 105,
// 'labelEndWidth' => 105,
// 'labelEndHeight' => 105,
]
);
}
@ -437,7 +581,7 @@ final class NetworkLink extends Model
}
// Build labels.
$result['label'] = $this->buildLabels();
$result['label'] = static::buildLabels($data);
$showOnTop = static::issetInArray(
$data,

View File

@ -30,6 +30,8 @@
namespace Models\VisualConsole;
use Models\VisualConsole\Container as VisualConsole;
define('__DEBUG', 1);
global $config;
require_once $config['homedir'].'/include/class/HTML.class.php';
enterprise_include_once('include/functions_metaconsole.php');
@ -65,12 +67,14 @@ class View extends \HTML
'id' => 'tab-label',
'href' => $url.'&tabSelected=label',
'img' => 'label-settings.png',
],[
],
[
'name' => __('General settings'),
'id' => 'tab-general',
'href' => $url.'&tabSelected=general',
'img' => 'general-settings.png',
],[
],
[
'name' => __('Specific settings'),
'id' => 'tab-specific',
'href' => $url.'&tabSelected=specific',
@ -101,7 +105,8 @@ class View extends \HTML
'id' => 'tab-general',
'href' => $url.'&tabSelected=general',
'img' => 'pencil.png',
],[
],
[
'name' => __('Specific settings'),
'id' => 'tab-specific',
'href' => $url.'&tabSelected=specific',
@ -244,7 +249,7 @@ class View extends \HTML
true
);
return $form.$jsforms;
return $form;
}
@ -516,8 +521,12 @@ class View extends \HTML
// Save the new item.
$data['id_layout'] = $vCId;
$itemId = $class::save($data);
} catch (\Throwable $th) {
} catch (\Exception $e) {
// Bad params.
if (__DEBUG === 1) {
error_log($e->getMessage());
}
http_response_code(400);
return false;
}
@ -526,8 +535,12 @@ class View extends \HTML
try {
$item = VisualConsole::getItemFromDB($itemId);
$result = $item->toArray();
} catch (Throwable $e) {
} catch (\Exception $e) {
// Bad params.
if (__DEBUG === 1) {
error_log($e->getMessage());
}
http_response_code(400);
return false;
}
@ -535,8 +548,12 @@ class View extends \HTML
// UpdateVC.
try {
$item = VisualConsole::getItemFromDB($itemId);
} catch (Throwable $e) {
} catch (\Exception $e) {
// Bad params.
if (__DEBUG === 1) {
error_log($e->getMessage());
}
http_response_code(400);
return false;
}

View File

@ -217,7 +217,12 @@ input.service_min {
input.service_min[disabled] {
background: url(../../images/box.disabled.png) no-repeat center;
}
input.network_link_min {
background: url(../../images/network_link_item.png) no-repeat center;
}
input.network_link_min[disabled] {
background: url(../../images/network_link_item.disabled.png) no-repeat center;
}
input.group_item_min {
background: url(../../images/group_green.png) no-repeat center;
}

View File

@ -31,6 +31,10 @@
z-index: 2;
}
.visual-console-item * {
overflow: visible;
}
.visual-console-item.is-editing {
border: 2px dashed #b2b2b2;
-webkit-transform: translateX(-2px) translateY(-2px);
@ -41,9 +45,14 @@
user-select: none;
}
.visual-console-item.is-editing:hover {
border-color: #82b92e;
}
.visual-console-item.is-editing.is-selected {
border: 2px dashed #2b2b2b;
cursor: move;
z-index: 10;
}
.visual-console-item.is-editing > .resize-draggable {
float: right;

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

View File

@ -211,6 +211,12 @@ export default class VisualConsole {
private relations: {
[key: string]: Line;
} = {};
// Dictionary which store the created links.
private lineLinks: {
[key: string]: Line;
} = {};
// Event manager for click events.
private readonly clickEventManager = new TypedEvent<ItemClickEvent>();
// Event manager for double click events.
@ -502,7 +508,9 @@ export default class VisualConsole {
public updateElement(item: AnyObject): void {
// Update item.
try {
this.elementsById[item.id].props = decodeProps(item);
this.elementsById[item.id].props = {
...decodeProps(item)
};
} catch (error) {
console.log("Error updating element:", error.message);
}

View File

@ -24,6 +24,8 @@ export interface LineProps extends ItemProps {
viewportOffsetY: number;
labelEnd: string;
labelStart: string;
linkedEnd: number | null;
linkedStart: number | null;
labelEndWidth: number;
labelEndHeight: number;
labelStartWidth: number;
@ -67,6 +69,8 @@ export function linePropsDecoder(data: AnyObject): LineProps | never {
viewportOffsetY: 0,
labelEnd: notEmptyStringOr(data.labelEnd, ""),
labelEndWidth: parseIntOr(data.labelEndWidth, 0),
linkedEnd: data.linkedEnd,
linkedStart: data.linkedStart,
labelEndHeight: parseIntOr(data.labelEndHeight, 0),
labelStart: notEmptyStringOr(data.labelStart, ""),
labelStartWidth: parseIntOr(data.labelStartWidth, 0),

View File

@ -32,8 +32,8 @@ export function networkLinkPropsDecoder(
return {
...linePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
type: ItemType.NETWORK_LINK,
viewportOffsetX: 300,
viewportOffsetY: 300,
viewportOffsetX: 0,
viewportOffsetY: 0,
labelEnd: notEmptyStringOr(data.labelEnd, ""),
labelEndWidth: parseIntOr(data.labelEndWidth, 0),
labelEndHeight: parseIntOr(data.labelEndHeight, 0),
@ -71,6 +71,7 @@ export default class NetworkLink extends Line {
50, // ms.
(x: Position["x"], y: Position["y"]) => {
this.isMoving = false;
const startPosition = { x, y };
// Re-Paint after move.
@ -126,10 +127,6 @@ export default class NetworkLink extends Line {
labelStartHeight
} = this.props;
if (labelStart == "" && labelEnd == "") {
// No more actions are required.
return;
}
const svgs = element.getElementsByTagName("svg");
let line;
let svg;
@ -159,8 +156,13 @@ export default class NetworkLink extends Line {
return;
}
if (labelStart == "" && labelEnd == "") {
// No more actions are required.
return;
}
// Font size and text adjustments.
const fontsize = 7.4;
const fontsize = 10;
const adjustment = 50;
let x1 = startPosition.x - x + lineWidth / 2 + viewportOffsetX / 2;
@ -220,16 +222,10 @@ export default class NetworkLink extends Line {
if (labelStart != "") {
let start = document.createElementNS(svgNS, "g");
start.setAttribute("x", `${x1}`);
start.setAttribute("y", `${y1}`);
start.setAttribute("width", `${labelStartWidth + fontsize * 2}`);
start.setAttribute("height", `${labelStartHeight}`);
start.setAttribute("transform", `rotate(${g} ${x1} ${y1})`);
let sr = document.createElementNS(svgNS, "rect");
sr.setAttribute("x", `${x1}`);
sr.setAttribute("y", `${y1}`);
sr.setAttribute("width", `${labelStartWidth}`);
sr.setAttribute("width", `${labelStartWidth + fontsize * 2}`);
sr.setAttribute("height", `${labelStartHeight}`);
sr.setAttribute("stroke", `${color}`);
sr.setAttribute("stroke-width", "2");
@ -240,8 +236,8 @@ export default class NetworkLink extends Line {
st.setAttribute("x", `${x1 + fontsize}`);
st.setAttribute("y", `${y1 + (fontheight * 2) / 3}`);
st.setAttribute("fill", "#000");
st.setAttribute("font-size", `${fontsize}`);
st.textContent = labelStart;
st.setAttribute("transform", `rotate(${g} ${x1} ${y1})`);
start.append(st);
svg.append(start);
@ -257,15 +253,14 @@ export default class NetworkLink extends Line {
er.setAttribute("stroke", `${color}`);
er.setAttribute("stroke-width", "2");
er.setAttribute("fill", "#FFF");
er.setAttribute("transform", `rotate(${g} ${x1} ${y1})`);
end.append(er);
let et = document.createElementNS(svgNS, "text");
et.setAttribute("x", `${x2 + fontsize}`);
et.setAttribute("y", `${y2 + (fontheight * 2) / 3}`);
et.setAttribute("fill", "#000");
et.setAttribute("font-size", `${fontsize}`);
et.textContent = labelEnd;
et.setAttribute("transform", `rotate(${g} ${x1} ${y1})`);
end.append(et);
svg.append(end);

View File

@ -21,15 +21,24 @@
z-index: 2;
}
.visual-console-item * {
overflow: visible;
}
.visual-console-item.is-editing {
border: 2px dashed #b2b2b2;
transform: translateX(-2px) translateY(-2px);
user-select: none;
}
.visual-console-item.is-editing:hover {
border-color: #82b92e;
}
.visual-console-item.is-editing.is-selected {
border: 2px dashed #2b2b2b;
cursor: move;
z-index: 10;
}
.visual-console-item.is-editing > .resize-draggable {
float: right;