WIP network links VC
This commit is contained in:
parent
90f199c5ad
commit
d85c1ace3c
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
After Width: | Height: | Size: 8.5 KiB |
|
@ -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();
|
||||
}
|
||||
);
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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();
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue