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

Merge branch 'develop' of https://192.168.50.5:8081/artica/pandorafms into develop

This commit is contained in:
artica 2019-06-26 13:25:48 +02:00
parent ff48757077 4136f19190
commit 7fa78d62fb
31 changed files with 1768 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pandora_console/general/firts_task/recon_view.php
View File

@ -35,6 +35,7 @@ ui_require_css_file('firts_task');
</p>
<form action="index.php?sec=gservers&sec2=godmode/servers/discovery" method="post">
<input type="submit" class="button_task" value="<?php echo __('Discover'); ?>" />
<input type="hidden" name="discovery_hint" value="1"/>
</form>
</div>
</div>

2
pandora_console/godmode/agentes/configurar_agente.php
View File

@ -1213,7 +1213,7 @@ if ($update_module || $create_module) {
$max_timeout = (int) get_parameter('max_timeout');
$max_retries = (int) get_parameter('max_retries');
$min = (int) get_parameter_post('min');
$min = (int) get_parameter('min');
$max = (int) get_parameter('max');
$interval = (int) get_parameter('module_interval', $intervalo);
$ff_interval = (int) get_parameter('module_ff_interval');

8
pandora_console/godmode/agentes/module_manager_editor.php
View File

@ -267,10 +267,10 @@ if ($id_agent_module) {
$cron_interval = explode(' ', $module['cron_interval']);
if (isset($cron_interval[4])) {
$minute_from = $cron_interval[0];
$min = explode('-', $minute_from);
$minute_from = $min[0];
if (isset($min[1])) {
$minute_to = $min[1];
$minute = explode('-', $minute_from);
$minute_from = $minute[0];
if (isset($minute[1])) {
$minute_to = $minute[1];
}
$hour_from = $cron_interval[1];

10
pandora_console/godmode/reporting/visual_console_builder.editor.js
View File

@ -254,10 +254,12 @@ function update_button_palette_callback() {
var values = {};
values = readFields();
if (values["map_linked"] == 0) {
if (values["agent"] == "" || values["agent"] == "none") {
dialog_message("#message_alert_no_agent");
return false;
if (selectedItem == "static_graph") {
if (values["map_linked"] == 0) {
if (values["agent"] == "" || values["agent"] == "none") {
dialog_message("#message_alert_no_agent");
return false;
}
}
}
// TODO VALIDATE DATA

6
pandora_console/godmode/servers/discovery.php
View File

@ -130,5 +130,11 @@ if ($classname_selected === null) {
}
}
// Show hints if there is no task
if (get_parameter('discovery_hint', 0)) {
ui_require_css_file('discovery-hint');
ui_print_info_message(__('You must create a task first'));
}
Wizard::printBigButtonsList($wiz_data);
}

9
pandora_console/godmode/setup/setup_visuals.php
View File

@ -1113,15 +1113,6 @@ $row++;
$table_other->data[$row][0] = __('Show QR Code icon in the header');
$table_other->data[$row][1] = html_print_checkbox_switch(
'show_qr_code_header',
1,
$config['show_qr_code_header'],
true
);
$row++;
$table_other->data[$row][0] = __('Custom graphviz directory').ui_print_help_tip(__('Custom directory where the graphviz binaries are stored.'), true);
$table_other->data[$row][1] = html_print_input_text(
'graphviz_bin_dir',

2
pandora_console/include/functions_custom_graphs.php
View File

@ -184,7 +184,7 @@ function custom_graphs_search($id_group, $search)
FROM tgraph_source
WHERE id_graph = '.$graph['id_graph'].''
);
$graphs[$graph['id_graph']]['id_graph'] = $graph['id_graph'];
$graphs[$graph['id_graph']]['graphs_count'] = $graphsCount;
$graphs[$graph['id_graph']]['name'] = $graph['name'];
$graphs[$graph['id_graph']]['description'] = $graph['description'];

159
pandora_console/include/javascript/pandora_visual_console.js
View File

@ -123,7 +123,7 @@ function createVisualConsole(
try {
visualConsole = new VisualConsole(container, props, items);
// VC Item clicked.
visualConsole.onClick(function(e) {
visualConsole.onItemClick(function(e) {
// Override the link to another VC if it isn't on remote console.
if (
e.data &&
@ -139,6 +139,94 @@ function createVisualConsole(
updateVisualConsole(e.data.linkedLayoutId, updateInterval);
}
});
// VC Item moved.
visualConsole.onItemMoved(function(e) {
var id = e.item.props.id;
var data = {
x: e.newPosition.x,
y: e.newPosition.y,
type: e.item.props.type
};
var taskId = "visual-console-item-move-" + id;
// Persist the new position.
asyncTaskManager
.add(taskId, function(done) {
var abortable = updateVisualConsoleItem(
baseUrl,
visualConsole.props.id,
id,
data,
function(error, data) {
// if (!error && !data) return;
if (error || !data) {
console.log(
"[ERROR]",
"[VISUAL-CONSOLE-CLIENT]",
"[API]",
error ? error.message : "Invalid response"
);
// Move the element to its initial position.
e.item.move(e.prevPosition.x, e.prevPosition.y);
}
done();
}
);
return {
cancel: function() {
abortable.abort();
}
};
})
.init();
});
// VC Item resized.
visualConsole.onItemResized(function(e) {
var id = e.item.props.id;
var data = {
width: e.newSize.width,
height: e.newSize.height,
type: e.item.props.type
};
var taskId = "visual-console-item-resize-" + id;
// Persist the new size.
asyncTaskManager
.add(taskId, function(done) {
var abortable = updateVisualConsoleItem(
baseUrl,
visualConsole.props.id,
id,
data,
function(error, data) {
// if (!error && !data) return;
if (error || !data) {
console.log(
"[ERROR]",
"[VISUAL-CONSOLE-CLIENT]",
"[API]",
error ? error.message : "Invalid response"
);
// Resize the element to its initial Size.
e.item.resize(e.prevSize.width, e.prevSize.height);
}
done();
}
);
return {
cancel: function() {
abortable.abort();
}
};
})
.init();
});
if (updateInterval != null && updateInterval > 0) {
// Start an interval to update the Visual Console.
@ -266,6 +354,75 @@ function loadVisualConsoleData(baseUrl, vcId, callback) {
};
}
/**
* Fetch a Visual Console's structure and its items.
* @param {string} baseUrl Base URL to build the API path.
* @param {number} vcId Identifier of the Visual Console.
* @param {number} vcItemId Identifier of the Visual Console's item.
* @param {Object} data Data we want to save.
* @param {function} callback Function to be executed on request success or fail.
* @return {Object} Cancellable. Object which include and .abort([statusText]) function.
*/
// eslint-disable-next-line no-unused-vars
function updateVisualConsoleItem(baseUrl, vcId, vcItemId, data, callback) {
// var apiPath = baseUrl + "/include/rest-api";
var apiPath = baseUrl + "/ajax.php";
var jqXHR = null;
// Cancel the ajax requests.
var abort = function(textStatus) {
if (textStatus == null) textStatus = "abort";
// -- XMLHttpRequest.readyState --
// Value State Description
// 0 UNSENT Client has been created. open() not called yet.
// 4 DONE The operation is complete.
if (jqXHR.readyState !== 0 && jqXHR.readyState !== 4)
jqXHR.abort(textStatus);
};
// Failed request handler.
var handleFail = function(jqXHR, textStatus, errorThrown) {
abort();
// Manually aborted or not.
if (textStatus === "abort") {
callback();
} else {
var error = new Error(errorThrown);
error.request = jqXHR;
callback(error);
}
};
// Function which handle success case.
var handleSuccess = function(data) {
callback(null, data);
};
// Visual Console container request.
jqXHR = jQuery
// .get(apiPath + "/visual-consoles/" + vcId, null, "json")
.get(
apiPath,
{
page: "include/rest-api/index",
updateVisualConsoleItem: 1,
visualConsoleId: vcId,
visualConsoleItemId: vcItemId,
data: data
},
"json"
)
.done(handleSuccess)
.fail(handleFail);
// Abortable.
return {
abort: abort
};
}
// TODO: Delete the functions below when you can.
/**************************************
These functions require jQuery library

16
pandora_console/include/rest-api/index.php
View File

@ -13,6 +13,7 @@ use Models\VisualConsole\Container as VisualConsole;
$visualConsoleId = (int) get_parameter('visualConsoleId');
$getVisualConsole = (bool) get_parameter('getVisualConsole');
$getVisualConsoleItems = (bool) get_parameter('getVisualConsoleItems');
$updateVisualConsoleItem = (bool) get_parameter('updateVisualConsoleItem');
// Check groups can access user.
$aclUserGroups = [];
@ -44,6 +45,21 @@ if ($getVisualConsole === true) {
} else if ($getVisualConsoleItems === true) {
$vcItems = VisualConsole::getItemsFromDB($visualConsoleId, $aclUserGroups);
echo '['.implode($vcItems, ',').']';
} else if ($updateVisualConsoleItem === true) {
$visualConsoleId = (integer) get_parameter('visualConsoleId');
$visualConsoleItemId = (integer) get_parameter('visualConsoleItemId');
$data = get_parameter('data');
$class = VisualConsole::getItemClass($data['type']);
$item_data = [];
$item_data['id'] = $visualConsoleItemId;
$item_data['id_layout'] = $visualConsoleId;
$item = $class::fromDB($item_data);
$result = $item->save($data);
echo json_encode($result);
}
exit;

32
pandora_console/include/rest-api/models/Model.php
View File

@ -47,6 +47,30 @@ abstract class Model
abstract protected function decode(array $data): array;
/**
* Return a valid representation of a record in database.
*
* @param array $data Input data.
*
* @return array Data structure representing a record in database.
*
* @abstract
*/
abstract protected function encode(array $data): array;
/**
* Insert or update an item in the database
*
* @param array $data Unknown input data structure.
*
* @return boolean The modeled element data structure stored into the DB.
*
* @abstract
*/
abstract public function save(array $data=[]);
/**
* Constructor of the model. It won't be public. The instances
* will be created through factories which start with from*.
@ -62,6 +86,12 @@ abstract class Model
}
public function setData(array $data)
{
$this->data = $data;
}
/**
* Instance the class with the unknown input data.
*
@ -69,7 +99,7 @@ abstract class Model
*
* @return self Instance of the model.
*/
public static function fromArray(array $data)
public static function fromArray(array $data): self
{
// The reserved word static refers to the invoked class at runtime.
return new static($data);

31
pandora_console/include/rest-api/models/VisualConsole/Container.php
View File

@ -92,6 +92,37 @@ final class Container extends Model
}
/**
* Return a valid representation of a record in database.
*
* @param array $data Input data.
*
* @return array Data structure representing a record in database.
*
* @overrides Model::encode.
*/
protected function encode(array $data): array
{
$result = [];
return $result;
}
/**
* Insert or update an item in the database
*
* @param array $data Unknown input data structure.
*
* @return boolean The modeled element data structure stored into the DB.
*
* @overrides Model::save.
*/
public function save(array $data=[]): bool
{
return true;
}
/**
* Extract a group Id value.
*

497
pandora_console/include/rest-api/models/VisualConsole/Item.php
View File

@ -240,7 +240,7 @@ class Item extends CachedModel
private static function extractX(array $data): int
{
return static::parseIntOr(
static::issetInArray($data, ['x', 'pos_x']),
static::issetInArray($data, ['x', 'pos_x', 'posX', 'startX']),
0
);
}
@ -256,7 +256,7 @@ class Item extends CachedModel
private static function extractY(array $data): int
{
return static::parseIntOr(
static::issetInArray($data, ['y', 'pos_y']),
static::issetInArray($data, ['y', 'pos_y', 'posY', 'startY']),
0
);
}
@ -272,7 +272,7 @@ class Item extends CachedModel
private static function extractAclGroupId(array $data)
{
return static::parseIntOr(
static::issetInArray($data, ['id_group', 'aclGroupId']),
static::issetInArray($data, ['id_group', 'aclGroupId', 'idGroup']),
null
);
}
@ -288,7 +288,7 @@ class Item extends CachedModel
private static function extractParentId(array $data)
{
return static::parseIntOr(
static::issetInArray($data, ['parentId', 'parent_item']),
static::issetInArray($data, ['parentId', 'parent_item', 'parentItem']),
null
);
}
@ -304,7 +304,7 @@ class Item extends CachedModel
private static function extractIsOnTop(array $data): bool
{
return static::parseBool(
static::issetInArray($data, ['isOnTop', 'show_on_top'])
static::issetInArray($data, ['isOnTop', 'show_on_top', 'showOnTop'])
);
}
@ -319,7 +319,7 @@ class Item extends CachedModel
private static function extractIsLinkEnabled(array $data): bool
{
return static::parseBool(
static::issetInArray($data, ['isLinkEnabled', 'enable_link'])
static::issetInArray($data, ['isLinkEnabled', 'enable_link', 'enableLink'])
);
}
@ -376,7 +376,23 @@ class Item extends CachedModel
private static function extractAgentId(array $data)
{
return static::parseIntOr(
static::issetInArray($data, ['agentId', 'id_agent', 'id_agente']),
static::issetInArray($data, ['agentId', 'id_agent', 'id_agente', 'idAgent', 'idAgente']),
null
);
}
/**
* Extract a custom id graph value.
*
* @param array $data Unknown input data structure.
*
* @return integer Valid identifier of an agent.
*/
private static function extractIdCustomGraph(array $data)
{
return static::parseIntOr(
static::issetInArray($data, ['id_custom_graph', 'idCustomGraph', 'customGraphId']),
null
);
}
@ -398,6 +414,9 @@ class Item extends CachedModel
'moduleId',
'id_agente_modulo',
'id_modulo',
'idModulo',
'idAgenteModulo',
'idAgentModule',
]
),
null
@ -1187,4 +1206,468 @@ class Item extends CachedModel
}
/**
* Return a valid representation of a record in database.
*
* @param array $data Input data.
*
* @return array Data structure representing a record in database.
*
* @overrides Model::encode.
*/
protected function encode(array $data): array
{
$result = [];
$id = static::getId($data);
if ($id) {
$result['id'] = $id;
}
$id_layout = static::getIdLayout($data);
if ($id_layout) {
$result['id_layout'] = $id_layout;
}
$pos_x = static::parseIntOr(
static::issetInArray($data, ['x', 'pos_x', 'posX']),
null
);
if ($pos_x !== null) {
$result['pos_x'] = $pos_x;
}
$pos_y = static::parseIntOr(
static::issetInArray($data, ['y', 'pos_y', 'posY']),
null
);
if ($pos_y !== null) {
$result['pos_y'] = $pos_y;
}
$height = static::getHeight($data);
if ($height !== null) {
$result['height'] = $height;
}
$width = static::getWidth($data);
if ($width !== null) {
$result['width'] = $width;
}
$label = static::extractLabel($data);
if ($label !== null) {
$result['label'] = $label;
}
$image = static::getImageSrc($data);
if ($image !== null) {
$result['image'] = $image;
}
$type = static::parseIntOr(
static::issetInArray($data, ['type']),
null
);
if ($type !== null) {
$result['type'] = $type;
}
$period = static::parseIntOr(
static::issetInArray($data, ['period', 'maxTime']),
null
);
if ($period !== null) {
$result['period'] = $period;
}
$id_agente_modulo = static::extractModuleId($data);
if ($id_agente_modulo !== null) {
$result['id_agente_modulo'] = $id_agente_modulo;
}
$id_agent = static::extractAgentId($data);
if ($id_agent !== null) {
$result['id_agent'] = $id_agent;
}
$id_layout_linked = static::parseIntOr(
static::issetInArray($data, ['linkedLayoutId', 'id_layout_linked', 'idLayoutLinked']),
null
);
if ($id_layout_linked !== null) {
$result['id_layout_linked'] = $id_layout_linked;
}
$parent_item = static::extractParentId($data);
if ($parent_item !== null) {
$result['parent_item'] = $parent_item;
}
$enable_link = static::issetInArray($data, ['isLinkEnabled', 'enable_link', 'enableLink']);
if ($enable_link !== null) {
$result['enable_link'] = static::parseBool($enable_link);
}
$id_metaconsole = static::extractMetaconsoleId($data);
if ($id_metaconsole !== null) {
$result['id_metaconsole'] = $id_metaconsole;
}
$id_group = static::extractAclGroupId($data);
if ($id_group !== null) {
$result['id_group'] = $id_group;
}
$id_custom_graph = static::extractIdCustomGraph($data);
if ($id_custom_graph !== null) {
$result['id_custom_graph'] = $id_custom_graph;
}
$border_width = static::getBorderWidth($data);
if ($border_width !== null) {
$result['border_width'] = $border_width;
}
$type_graph = static::getTypeGraph($data);
if ($type_graph !== null) {
$result['type_graph'] = $type_graph;
}
$label_position = static::notEmptyStringOr(
static::issetInArray($data, ['labelPosition', 'label_position']),
null
);
if ($label_position !== null) {
$result['label_position'] = $label_position;
}
$border_color = static::getBorderColor($data);
if ($border_color !== null) {
$result['border_color'] = $border_color;
}
$fill_color = static::getFillColor($data);
if ($fill_color !== null) {
$result['fill_color'] = $fill_color;
}
$show_statistics = static::issetInArray($data, ['showStatistics', 'show_statistics']);
if ($show_statistics !== null) {
$result['show_statistics'] = static::parseBool($show_statistics);
}
$linked_layout_node_id = static::parseIntOr(
static::issetInArray(
$data,
[
'linkedLayoutAgentId',
'linked_layout_node_id',
]
),
null
);
if ($linked_layout_node_id !== null) {
$result['linked_layout_node_id'] = $linked_layout_node_id;
}
$linked_layout_status_type = static::notEmptyStringOr(
static::issetInArray($data, ['linkedLayoutStatusType', 'linked_layout_status_type']),
null
);
if ($linked_layout_status_type !== null) {
$result['linked_layout_status_type'] = $linked_layout_status_type;
}
$id_layout_linked_weight = static::parseIntOr(
static::issetInArray($data, ['linkedLayoutStatusTypeWeight', 'id_layout_linked_weight']),
null
);
if ($id_layout_linked_weight !== null) {
$result['id_layout_linked_weight'] = $id_layout_linked_weight;
}
$linked_layout_status_as_service_warning = static::parseIntOr(
static::issetInArray(
$data,
[
'linkedLayoutStatusTypeWarningThreshold',
'linked_layout_status_as_service_warning',
]
),
null
);
if ($linked_layout_status_as_service_warning !== null) {
$result['linked_layout_status_as_service_warning'] = $linked_layout_status_as_service_warning;
}
$linked_layout_status_as_service_critical = static::parseIntOr(
static::issetInArray(
$data,
[
'linkedLayoutStatusTypeCriticalThreshold',
'linked_layout_status_as_service_critical',
]
),
null
);
if ($linked_layout_status_as_service_critical !== null) {
$result['linked_layout_status_as_service_critical'] = $linked_layout_status_as_service_critical;
}
$element_group = static::parseIntOr(
static::issetInArray($data, ['elementGroup', 'element_group']),
null
);
if ($element_group !== null) {
$result['element_group'] = $element_group;
}
$show_on_top = static::issetInArray($data, ['isOnTop', 'show_on_top', 'showOnTop']);
if ($show_on_top !== null) {
$result['show_on_top'] = static::parseBool($show_on_top);
}
$clock_animation = static::notEmptyStringOr(
static::issetInArray($data, ['clockType', 'clock_animation', 'clockAnimation']),
null
);
if ($clock_animation !== null) {
$result['clock_animation'] = $clock_animation;
}
$time_format = static::notEmptyStringOr(
static::issetInArray($data, ['clockFormat', 'time_format', 'timeFormat']),
null
);
if ($time_format !== null) {
$result['time_format'] = $time_format;
}
$timezone = static::notEmptyStringOr(
static::issetInArray($data, ['timezone', 'timeZone', 'time_zone', 'clockTimezone']),
null
);
if ($timezone !== null) {
$result['timezone'] = $timezone;
}
$show_last_value = static::parseIntOr(
static::issetInArray($data, ['show_last_value', 'showLastValue']),
null
);
if ($show_last_value !== null) {
$result['show_last_value'] = $show_last_value;
}
$cache_expiration = static::parseIntOr(
static::issetInArray($data, ['cache_expiration', 'cacheExpiration']),
null
);
if ($cache_expiration !== null) {
$result['cache_expiration'] = $cache_expiration;
}
return $result;
}
/**
* Extract item id.
*
* @param array $data Unknown input data structure.
*
* @return integer Item id. 0 by default.
*/
private static function getId(array $data): int
{
return static::parseIntOr(
static::issetInArray($data, ['id', 'itemId']),
0
);
}
/**
* Extract layout id.
*
* @param array $data Unknown input data structure.
*
* @return integer Item id. 0 by default.
*/
private static function getIdLayout(array $data): int
{
return static::parseIntOr(
static::issetInArray($data, ['id_layout', 'idLayout', 'layoutId']),
0
);
}
/**
* Extract item width.
*
* @param array $data Unknown input data structure.
*
* @return integer Item width. 0 by default.
*/
private static function getWidth(array $data)
{
return static::parseIntOr(
static::issetInArray($data, ['width', 'endX']),
null
);
}
/**
* Extract item height.
*
* @param array $data Unknown input data structure.
*
* @return integer Item height. 0 by default.
*/
private static function getHeight(array $data)
{
return static::parseIntOr(
static::issetInArray($data, ['height', 'endY']),
null
);
}
/**
* Extract a image src value.
*
* @param array $data Unknown input data structure.
*
* @return mixed String representing the image url (not empty) or null.
*/
protected static function getImageSrc(array $data)
{
$imageSrc = static::notEmptyStringOr(
static::issetInArray($data, ['image', 'imageSrc', 'backgroundColor', 'backgroundType', 'valueType']),
null
);
return $imageSrc;
}
/**
* Extract a border width value.
*
* @param array $data Unknown input data structure.
*
* @return integer Valid border width.
*/
private static function getBorderWidth(array $data)
{
return static::parseIntOr(
static::issetInArray($data, ['border_width', 'borderWidth']),
null
);
}
/**
* Extract a type graph value.
*
* @param array $data Unknown input data structure.
*
* @return string One of 'vertical' or 'horizontal'. 'vertical' by default.
*/
private static function getTypeGraph(array $data)
{
return static::notEmptyStringOr(
static::issetInArray($data, ['typeGraph', 'type_graph', 'graphType']),
null
);
}
/**
* Extract a border color value.
*
* @param array $data Unknown input data structure.
*
* @return mixed String representing the border color (not empty) or null.
*/
private static function getBorderColor(array $data)
{
return static::notEmptyStringOr(
static::issetInArray($data, ['borderColor', 'border_color', 'gridColor', 'color', 'legendBackgroundColor']),
null
);
}
/**
* Extract a fill color value.
*
* @param array $data Unknown input data structure.
*
* @return mixed String representing the fill color (not empty) or null.
*/
private static function getFillColor(array $data)
{
return static::notEmptyStringOr(
static::issetInArray($data, ['fillColor', 'fill_color', 'labelColor']),
null
);
}
/**
* Insert or update an item in the database
*
* @param array $data Unknown input data structure.
*
* @return boolean The modeled element data structure stored into the DB.
*
* @overrides Model::save.
*/
public function save(array $data=[]): bool
{
if (empty($data)) {
return false;
}
$dataModelEncode = $this->encode($this->toArray());
$dataEncode = $this->encode($data);
$save = \array_merge($dataModelEncode, $dataEncode);
if (!empty($save)) {
if (empty($save['id'])) {
// Insert.
$result = \db_process_sql_insert('tlayout_data', $save);
if ($result) {
$item = static::fromDB(['id' => $result]);
}
} else {
// Update.
$result = \db_process_sql_update('tlayout_data', $save, ['id' => $save['id']]);
// Invalidate the item's cache.
if ($result !== false && $result > 0) {
db_process_sql_delete(
'tvisual_console_elements_cache',
[
'vc_item_id' => (int) $save['id'],
]
);
$item = static::fromDB(['id' => $save['id']]);
// Update the model.
if (!empty($item)) {
$this->setData($item->toArray());
}
}
}
}
return (bool) $result;
}
}

199
pandora_console/include/rest-api/models/VisualConsole/Items/Line.php
View File

@ -206,4 +206,203 @@ final class Line extends Model
}
/**
* Return a valid representation of a record in database.
*
* @param array $data Input data.
*
* @return array Data structure representing a record in database.
*
* @overrides Model::encode.
*/
protected function encode(array $data): array
{
$result = [];
$id = static::getId($data);
if ($id) {
$result['id'] = $id;
}
$id_layout = static::getIdLayout($data);
if ($id_layout) {
$result['id_layout'] = $id_layout;
}
$pos_x = static::parseIntOr(
static::issetInArray($data, ['x', 'pos_x', 'posX']),
null
);
if ($pos_x !== null) {
$result['pos_x'] = $pos_x;
}
$pos_y = static::parseIntOr(
static::issetInArray($data, ['y', 'pos_y', 'posY']),
null
);
if ($pos_y !== null) {
$result['pos_y'] = $pos_y;
}
$height = static::getHeight($data);
if ($height !== null) {
$result['height'] = $height;
}
$width = static::getWidth($data);
if ($width !== null) {
$result['width'] = $width;
}
$type = static::parseIntOr(
static::issetInArray($data, ['type']),
null
);
if ($type !== null) {
$result['type'] = $type;
}
$border_width = static::getBorderWidth($data);
if ($border_width !== null) {
$result['border_width'] = $border_width;
}
$border_color = static::extractBorderColor($data);
if ($border_color !== null) {
$result['border_color'] = $border_color;
}
$show_on_top = static::issetInArray($data, ['isOnTop', 'show_on_top', 'showOnTop']);
if ($show_on_top !== null) {
$result['show_on_top'] = static::parseBool($show_on_top);
}
return $result;
}
/**
* Extract item id.
*
* @param array $data Unknown input data structure.
*
* @return integer Item id. 0 by default.
*/
private static function getId(array $data): int
{
return static::parseIntOr(
static::issetInArray($data, ['id', 'itemId']),
0
);
}
/**
* Extract layout id.
*
* @param array $data Unknown input data structure.
*
* @return integer Item id. 0 by default.
*/
private static function getIdLayout(array $data): int
{
return static::parseIntOr(
static::issetInArray($data, ['id_layout', 'idLayout', 'layoutId']),
0
);
}
/**
* Extract item width.
*
* @param array $data Unknown input data structure.
*
* @return integer Item width. 0 by default.
*/
private static function getWidth(array $data)
{
return static::parseIntOr(
static::issetInArray($data, ['width', 'endX']),
null
);
}
/**
* Extract item height.
*
* @param array $data Unknown input data structure.
*
* @return integer Item height. 0 by default.
*/
private static function getHeight(array $data)
{
return static::parseIntOr(
static::issetInArray($data, ['height', 'endY']),
null
);
}
/**
* Extract a border width value.
*
* @param array $data Unknown input data structure.
*
* @return integer Valid border width.
*/
private static function getBorderWidth(array $data)
{
return static::parseIntOr(
static::issetInArray($data, ['border_width', 'borderWidth']),
null
);
}
/**
* Insert or update an item in the database
*
* @param array $data Unknown input data structure.
*
* @return boolean The modeled element data structure stored into the DB.
*
* @overrides Model::save.
*/
public function save(array $data=[]): bool
{
$data_model = $this->encode($this->toArray());
$newData = $this->encode($data);
$save = \array_merge($data_model, $newData);
if (!empty($save)) {
if (empty($save['id'])) {
// Insert.
$result = \db_process_sql_insert('tlayout_data', $save);
} else {
// Update.
$result = \db_process_sql_update('tlayout_data', $save, ['id' => $save['id']]);
}
}
// Update the model.
if ($result) {
if (empty($save['id'])) {
$item = static::fromDB(['id' => $result]);
} else {
$item = static::fromDB(['id' => $save['id']]);
}
if (!empty($item)) {
$this->setData($item->toArray());
}
}
return (bool) $result;
}
}

10
pandora_console/include/styles/discovery-hint.css Normal file
View File

@ -0,0 +1,10 @@
/*
* Discovery show help css
*/
li.discovery:not(:first-child) > a:hover {
color: #000;
}
li.discovery:not(:first-child) div.data_container:not(:hover) {
box-shadow: 2px 2px 10px #80ba27;
}

26
pandora_console/include/styles/pandora.css
View File

@ -1171,7 +1171,6 @@ div.title_line {
#menu_tab {
margin-right: 10px;
min-width: 510px;
}
#menu_tab .mn,
@ -3552,31 +3551,6 @@ div.div_groups_status {
}
*/
/*
* ---------------------------------------------------------------------
* - VISUAL MAPS -
* ---------------------------------------------------------------------
*/
div#vc-controls {
position: fixed;
top: 30px;
right: 20px;
}
div#vc-controls div.vc-title,
div#vc-controls div.vc-refr {
margin-top: 6px;
margin-left: 3px;
margin-right: 3px;
}
div#vc-controls div.vc-refr > div {
display: inline;
}
div#vc-controls img.vc-qr {
margin-top: 6px;
margin-left: 8px;
margin-right: 8px;
}
div.simple_value > span.text > p,
div.simple_value > span.text > p > span > strong,
div.simple_value > span.text > p > strong,

31
pandora_console/include/styles/visual_maps.css
View File

@ -3,6 +3,37 @@
* - VISUAL MAPS -
* ---------------------------------------------------------------------
*/
div#vc-controls {
position: fixed;
top: 30px;
right: 20px;
}
div#vc-controls div.vc-title,
div#vc-controls div.vc-refr {
margin-top: 15px;
margin-left: 3px;
margin-right: 3px;
}
div#vc-controls div.vc-refr > div {
display: inline;
}
div#vc-controls img.vc-qr {
margin-top: 12px;
margin-left: 8px;
margin-right: 8px;
}
.visual-console-edit-controls {
display: flex;
justify-content: flex-end;
}
.visual-console-edit-controls > span {
margin: 4px;
}
input.vs_button_ghost {
background-color: transparent;
border: 1px solid #82b92e;

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

@ -13,22 +13,38 @@
display: flex;
-webkit-box-orient: initial;
-webkit-box-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
justify-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.visual-console-item.is-editing {
border: 2px dashed #33ccff;
border: 2px dashed #b2b2b2;
-webkit-transform: translateX(-2px) translateY(-2px);
transform: translateX(-2px) translateY(-2px);
transform: translateX(-2px) translateY(-2px);
cursor: move;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.visual-console-item.is-editing > .resize-draggable {
float: right;
position: absolute;
right: 0;
bottom: 0;
width: 15px;
height: 15px;
background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIAoJeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAKCXhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE1cHgiIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDE1IDE1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNSAxNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+Cgk8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNCMkIyQjIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwLjU2MiIgeTE9IjM2LjMxNyIgeDI9IjE0LjIzMSIgeTI9IjIyLjY0OCIvPgoJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjJCMkIyIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNC45NzEiIHkxPSIzNi41OTUiIHgyPSIxNC40MDkiIHkyPSIyNy4xNTUiLz4KCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0IyQjJCMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjEwLjAxNyIgeTE9IjM2LjQzMyIgeDI9IjE0LjIzMSIgeTI9IjMyLjIxOCIvPgoJPGcgaWQ9ImpHRWVLbl8xXyI+CgoJCTxpbWFnZSBvdmVyZmxvdz0idmlzaWJsZSIgd2lkdGg9IjQ2IiBoZWlnaHQ9IjM3IiBpZD0iakdFZUtuIiB4bGluazpocmVmPSJkYXRhOmltYWdlL2pwZWc7YmFzZTY0LC85ai80QUFRU2taSlJnQUJBZ0VBU0FCSUFBRC83QUFSUkhWamEza0FBUUFFQUFBQUhnQUEvKzRBSVVGa2IySmxBR1RBQUFBQUFRTUEKRUFNQ0F3WUFBQUdSQUFBQnN3QUFBZ0wvMndDRUFCQUxDd3NNQ3hBTURCQVhEdzBQRnhzVUVCQVVHeDhYRnhjWEZ4OGVGeG9hR2hvWApIaDRqSlNjbEl4NHZMek16THk5QVFFQkFRRUJBUUVCQVFFQkFRRUFCRVE4UEVSTVJGUklTRlJRUkZCRVVHaFFXRmhRYUpob2FIQm9hCkpqQWpIaDRlSGlNd0t5NG5KeWN1S3pVMU1EQTFOVUJBUDBCQVFFQkFRRUJBUUVCQVFQL0NBQkVJQUNZQUx3TUJJZ0FDRVFFREVRSC8KeEFCNUFBRUJBUUVCQUFBQUFBQUFBQUFBQUFBQUFRUUNCZ0VCQUFBQUFBQUFBQUFBQUFBQUFBQUFBQkFBQVFRREFBQUFBQUFBQUFBQQpBQUFBQVFBeEFnTVFNQklSQUFFQkJnVUZBUUFBQUFBQUFBQUFBQUVDQUJFaFFXRURFQ0J4a1JJd01ZRXlFd1FTQVFBQUFBQUFBQUFBCkFBQUFBQUFBQURELzJnQU1Bd0VBQWhFREVRQUFBUGZBUzV6VFpUa0dQclVMWlFBQUQvL2FBQWdCQWdBQkJRRFQvOW9BQ0FFREFBRUYKQU5QLzJnQUlBUUVBQVFVQXpKZzJTUUJDMmQwdzJiWlN2Vk5jNW9NdUF1UXVBdVJwLzlvQUNBRUNBZ1kvQUIvLzJnQUlBUU1DQmo4QQpILy9hQUFnQkFRRUdQd0RFNlpYbUFZcXR3c0pCSEk5MUdsTXFudlQrZTM3UUwxa1MwYjdYQndBRHJWb1FDUlhHZTVhZTVhZTVhZms5CkgvL1oiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgLTQ2Ljg3NSAtOS44OTA2KSI+CgkJPC9pbWFnZT4KCTwvZz4KCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0IyQjJCMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjEzLjQ4MyIgeTE9IjAuNjQ0IiB4Mj0iMC44MjgiIHkyPSIxMy4zMDEiLz4KCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0IyQjJCMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjEzLjczNCIgeTE9IjUuMTQxIiB4Mj0iNS4zMjUiIHkyPSIxMy41NDkiLz4KCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0IyQjJCMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjE0LjIzMSIgeTE9IjkuMzg4IiB4Mj0iOS44MDYiIHkyPSIxMy44MTMiLz4KPC9zdmc+Cg==);
cursor: se-resize;
}
@font-face {
@ -44,17 +60,17 @@
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
-ms-flex-line-pack: center;
align-content: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
}
.visual-console-item .digital-clock > span {
@ -84,17 +100,18 @@
.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 {
-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 {
-webkit-animation: rotate-second 60s infinite linear;
animation: rotate-second 60s infinite linear;
animation: rotate-second 60s infinite linear;
}
/*# sourceMappingURL=vc.main.css.map*/
/*# sourceMappingURL=vc.main.css.map*/

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

@ -1 +1 @@
{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,0BAA0B;EAC1B,2BAA2B;AAC7B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;AAEA;EACE,0BAA0B;EAC1B,oDAA4C;UAA5C,4CAA4C;AAC9C;;ACpBA;EACE,wBAAwB;EACxB,0BAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,kBAAkB;AACpB;;AAEA;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.css","sourcesContent":["#visual-console-container {\n margin: 0px auto;\n position: relative;\n background-repeat: no-repeat;\n background-size: 100% 100%;\n background-position: center;\n}\n\n.visual-console-item {\n position: absolute;\n display: flex;\n flex-direction: initial;\n justify-items: center;\n align-items: center;\n user-select: text;\n}\n\n.visual-console-item.is-editing {\n border: 2px dashed #33ccff;\n transform: translateX(-2px) translateY(-2px);\n}\n","@font-face {\n font-family: Alarm Clock;\n src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n display: flex;\n flex-direction: column;\n justify-content: center;\n justify-items: center;\n align-content: center;\n align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n font-size: 50px;\n\n /* To improve legibility */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock {\n text-align: center;\n}\n\n.visual-console-item .analogic-clock .hour-hand {\n animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}
{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,0BAA0B;EAC1B,2BAA2B;AAC7B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;AAEA;EACE,0BAA0B;EAC1B,oDAA4C;UAA5C,4CAA4C;EAC5C,YAAY;EACZ,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;AAEA;EACE,YAAY;EACZ,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,yCAAoC;EACpC,iBAAiB;AACnB;;ACjCA;EACE,wBAAwB;EACxB,0BAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,kBAAkB;AACpB;;AAEA;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.css","sourcesContent":["#visual-console-container {\n margin: 0px auto;\n position: relative;\n background-repeat: no-repeat;\n background-size: 100% 100%;\n background-position: center;\n}\n\n.visual-console-item {\n position: absolute;\n display: flex;\n flex-direction: initial;\n justify-items: center;\n align-items: center;\n user-select: text;\n}\n\n.visual-console-item.is-editing {\n border: 2px dashed #b2b2b2;\n transform: translateX(-2px) translateY(-2px);\n cursor: move;\n user-select: none;\n}\n\n.visual-console-item.is-editing > .resize-draggable {\n float: right;\n position: absolute;\n right: 0;\n bottom: 0;\n width: 15px;\n height: 15px;\n background: url(./resize-handle.svg);\n cursor: se-resize;\n}\n","@font-face {\n font-family: Alarm Clock;\n src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n display: flex;\n flex-direction: column;\n justify-content: center;\n justify-items: center;\n align-content: center;\n align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n font-size: 50px;\n\n /* To improve legibility */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock {\n text-align: center;\n}\n\n.visual-console-item .analogic-clock .hour-hand {\n animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}

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

1
pandora_console/operation/visual_console/legacy_view.php
View File

@ -15,6 +15,7 @@ global $config;
// Login check
require_once $config['homedir'].'/include/functions_visual_map.php';
ui_require_css_file('visual_maps');
check_login();

2
pandora_console/operation/visual_console/public_view.php
View File

@ -83,7 +83,7 @@ echo '<div id="visual-console-container"></div>';
echo '<div id="vc-controls" style="z-index:300;">';
echo '<div id="menu_tab">';
echo '<ul class="mn">';
echo '<ul class="mn white-box-content box-shadow flex-row">';
// QR code.
echo '<li class="nomn">';

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

@ -19,6 +19,8 @@ check_login();
require_once $config['homedir'].'/vendor/autoload.php';
require_once $config['homedir'].'/include/functions_visual_map.php';
ui_require_css_file('visual_maps');
// Query parameters.
$visualConsoleId = (int) get_parameter(!is_metaconsole() ? 'id' : 'id_visualmap');
// To hide the menus.
@ -172,7 +174,7 @@ if ($pure === true) {
echo '<div id="vc-controls" style="z-index: 999">';
echo '<div id="menu_tab">';
echo '<ul class="mn">';
echo '<ul class="mn white-box-content box-shadow flex-row">';
// Quit fullscreen.
echo '<li class="nomn">';

238
visual_console_client/src/Item.ts
View File

@ -13,7 +13,10 @@ import {
notEmptyStringOr,
replaceMacros,
humanDate,
humanTime
humanTime,
addMovementListener,
debounce,
addResizementListener
} from "./lib";
import TypedEvent, { Listener, Disposable } from "./lib/TypedEvent";
@ -68,6 +71,18 @@ export interface ItemRemoveEvent<Props extends ItemProps> {
data: AnyObject;
}
export interface ItemMovedEvent {
item: VisualConsoleItem<ItemProps>;
prevPosition: Position;
newPosition: Position;
}
export interface ItemResizedEvent {
item: VisualConsoleItem<ItemProps>;
prevSize: Size;
newSize: Size;
}
/**
* Extract a valid enum value from a raw label positi9on value.
* @param labelPosition Raw value.
@ -133,6 +148,10 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
protected readonly childElementRef: HTMLElement;
// Event manager for click events.
private readonly clickEventManager = new TypedEvent<ItemClickEvent<Props>>();
// Event manager for moved events.
private readonly movedEventManager = new TypedEvent<ItemMovedEvent>();
// Event manager for resized events.
private readonly resizedEventManager = new TypedEvent<ItemResizedEvent>();
// Event manager for remove events.
private readonly removeEventManager = new TypedEvent<
ItemRemoveEvent<Props>
@ -140,6 +159,137 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
// List of references to clean the event listeners.
private readonly disposables: Disposable[] = [];
// 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(
500, // ms.
(x: Position["x"], y: Position["y"]) => {
const prevPosition = {
x: this.props.x,
y: this.props.y
};
const newPosition = {
x: x,
y: y
};
if (!this.positionChanged(prevPosition, newPosition)) return;
// Save the new position to the props.
this.move(x, y);
// Emit the movement event.
this.movedEventManager.emit({
item: this,
prevPosition: prevPosition,
newPosition: newPosition
});
}
);
// This property will store the function
// to clean the movement listener.
private removeMovement: Function | null = null;
/**
* Start the movement funtionality.
* @param element Element to move inside its container.
*/
private initMovementListener(element: HTMLElement): void {
this.removeMovement = addMovementListener(
element,
(x: Position["x"], y: Position["y"]) => {
// Move the DOM element.
this.moveElement(x, y);
// Run the save function.
this.debouncedMovementSave(x, y);
}
);
}
/**
* Stop the movement fun
*/
private stopMovementListener(): void {
if (this.removeMovement) {
this.removeMovement();
this.removeMovement = null;
}
}
// 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(
500, // ms.
(width: Size["width"], height: Size["height"]) => {
const prevSize = {
width: this.props.width,
height: this.props.height
};
const newSize = {
width: width,
height: height
};
if (!this.sizeChanged(prevSize, newSize)) return;
// Save the new position to the props.
this.resize(width, height);
// Emit the resizement event.
this.resizedEventManager.emit({
item: this,
prevSize: prevSize,
newSize: newSize
});
}
);
// This property will store the function
// to clean the resizement listener.
private removeResizement: Function | null = null;
/**
* Start the resizement funtionality.
* @param element Element to move inside its container.
*/
protected initResizementListener(element: HTMLElement): void {
this.removeResizement = addResizementListener(
element,
(width: Size["width"], height: Size["height"]) => {
// The label it's outside the item's size, so we need
// to get rid of its size to get the real size of the
// item's content.
if (this.props.label && this.props.label.length > 0) {
const {
width: labelWidth,
height: labelHeight
} = this.labelElementRef.getBoundingClientRect();
switch (this.props.labelPosition) {
case "up":
case "down":
height -= labelHeight;
break;
case "left":
case "right":
width -= labelWidth;
break;
}
}
// Move the DOM element.
this.resizeElement(width, height);
// Run the save function.
this.debouncedResizementSave(width, height);
}
);
}
/**
* Stop the resizement functionality.
*/
private stopResizementListener(): void {
if (this.removeResizement) {
this.removeResizement();
this.removeResizement = null;
}
}
/**
* To create a new element which will be inside the item box.
* @return Item.
@ -182,18 +332,17 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
private createContainerDomElement(): HTMLElement {
let box;
if (this.props.isLinkEnabled) {
box = document.createElement("a");
box as HTMLAnchorElement;
box = document.createElement("a") as HTMLAnchorElement;
if (this.props.link) box.href = this.props.link;
} else {
box = document.createElement("div");
box as HTMLDivElement;
box = document.createElement("div") as HTMLDivElement;
}
box.className = "visual-console-item";
box.style.zIndex = this.props.isOnTop ? "2" : "1";
box.style.left = `${this.props.x}px`;
box.style.top = `${this.props.y}px`;
// Init the click listener.
box.addEventListener("click", e => {
if (this.meta.editMode) {
e.preventDefault();
@ -203,6 +352,21 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
}
});
// Metadata state.
if (this.meta.editMode) {
box.classList.add("is-editing");
// Init the movement listener.
this.initMovementListener(box);
// Init the resizement listener.
this.initResizementListener(box);
}
if (this.meta.isFetching) {
box.classList.add("is-fetching");
}
if (this.meta.isUpdating) {
box.classList.add("is-updating");
}
return box;
}
@ -344,6 +508,15 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
* @param newProps
*/
public set meta(newMetadata: ItemMeta) {
this.setMeta(newMetadata);
}
/**
* Clasic and protected version of the setter of the `meta` property.
* Useful to override it from children classes.
* @param newProps
*/
protected setMeta(newMetadata: ItemMeta) {
const prevMetadata = this._metadata;
// Update the internal meta.
this._metadata = newMetadata;
@ -428,8 +601,12 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
if (!prevMeta || prevMeta.editMode !== this.meta.editMode) {
if (this.meta.editMode) {
this.elementRef.classList.add("is-editing");
this.initMovementListener(this.elementRef);
this.initResizementListener(this.elementRef);
} else {
this.elementRef.classList.remove("is-editing");
this.stopMovementListener();
this.stopResizementListener();
}
}
if (!prevMeta || prevMeta.isFetching !== this.meta.isFetching) {
@ -569,6 +746,25 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
// The most valuable size is the content size.
this.childElementRef.style.width = width > 0 ? `${width}px` : null;
this.childElementRef.style.height = height > 0 ? `${height}px` : null;
if (this.props.label && this.props.label.length > 0) {
// Ugly table to show the label as its legacy counterpart.
const tables = this.labelElementRef.getElementsByTagName("table");
const table = tables.length > 0 ? tables.item(0) : null;
if (table) {
switch (this.props.labelPosition) {
case "up":
case "down":
table.style.width = width > 0 ? `${width}px` : null;
break;
case "left":
case "right":
table.style.height = height > 0 ? `${height}px` : null;
break;
}
}
}
}
/**
@ -601,6 +797,38 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
return disposable;
}
/**
* To add an event handler to the movement of visual console elements.
* @param listener Function which is going to be executed when a linked console is moved.
*/
public onMoved(listener: Listener<ItemMovedEvent>): Disposable {
/*
* The '.on' function returns a function which will clean the event
* listener when executed. We store all the 'dispose' functions to
* call them when the item should be cleared.
*/
const disposable = this.movedEventManager.on(listener);
this.disposables.push(disposable);
return disposable;
}
/**
* To add an event handler to the resizement of visual console elements.
* @param listener Function which is going to be executed when a linked console is moved.
*/
public onResized(listener: Listener<ItemResizedEvent>): Disposable {
/*
* The '.on' function returns a function which will clean the event
* listener when executed. We store all the 'dispose' functions to
* call them when the item should be cleared.
*/
const disposable = this.resizedEventManager.on(listener);
this.disposables.push(disposable);
return disposable;
}
/**
* To add an event handler to the removal of the item.
* @param listener Function which is going to be executed when a item is removed.

66
visual_console_client/src/VisualConsole.ts
View File

@ -10,7 +10,9 @@ import Item, {
ItemType,
ItemProps,
ItemClickEvent,
ItemRemoveEvent
ItemRemoveEvent,
ItemMovedEvent,
ItemResizedEvent
} from "./Item";
import StaticGraph, { staticGraphPropsDecoder } from "./items/StaticGraph";
import Icon, { iconPropsDecoder } from "./items/Icon";
@ -204,6 +206,10 @@ export default class VisualConsole {
private readonly clickEventManager = new TypedEvent<
ItemClickEvent<ItemProps>
>();
// Event manager for move events.
private readonly movedEventManager = new TypedEvent<ItemMovedEvent>();
// Event manager for resize events.
private readonly resizedEventManager = new TypedEvent<ItemResizedEvent>();
// List of references to clean the event listeners.
private readonly disposables: Disposable[] = [];
@ -216,6 +222,24 @@ export default class VisualConsole {
// console.log(`Clicked element #${e.data.id}`, e);
};
/**
* React to a movement on an element.
* @param e Event object.
*/
private handleElementMovement: (e: ItemMovedEvent) => void = e => {
this.movedEventManager.emit(e);
// console.log(`Moved element #${e.item.props.id}`, e);
};
/**
* React to a resizement on an element.
* @param e Event object.
*/
private handleElementResizement: (e: ItemResizedEvent) => void = e => {
this.resizedEventManager.emit(e);
// console.log(`Resized element #${e.item.props.id}`, e);
};
/**
* Clear some element references.
* @param e Event object.
@ -264,6 +288,8 @@ export default class VisualConsole {
this.elementIds.push(itemInstance.props.id);
// Item event handlers.
itemInstance.onClick(this.handleElementClick);
itemInstance.onMoved(this.handleElementMovement);
itemInstance.onResized(this.handleElementResizement);
itemInstance.onRemove(this.handleElementRemove);
// Add the item to the DOM.
this.containerRef.append(itemInstance.elementRef);
@ -552,7 +578,9 @@ export default class VisualConsole {
* Add an event handler to the click of the linked visual console elements.
* @param listener Function which is going to be executed when a linked console is clicked.
*/
public onClick(listener: Listener<ItemClickEvent<ItemProps>>): Disposable {
public onItemClick(
listener: Listener<ItemClickEvent<ItemProps>>
): Disposable {
/*
* The '.on' function returns a function which will clean the event
* listener when executed. We store all the 'dispose' functions to
@ -564,6 +592,38 @@ export default class VisualConsole {
return disposable;
}
/**
* Add an event handler to the movement of the visual console elements.
* @param listener Function which is going to be executed when a linked console is moved.
*/
public onItemMoved(listener: Listener<ItemMovedEvent>): Disposable {
/*
* The '.on' function returns a function which will clean the event
* listener when executed. We store all the 'dispose' functions to
* call them when the item should be cleared.
*/
const disposable = this.movedEventManager.on(listener);
this.disposables.push(disposable);
return disposable;
}
/**
* Add an event handler to the resizement of the visual console elements.
* @param listener Function which is going to be executed when a linked console is moved.
*/
public onItemResized(listener: Listener<ItemResizedEvent>): Disposable {
/*
* The '.on' function returns a function which will clean the event
* listener when executed. We store all the 'dispose' functions to
* call them when the item should be cleared.
*/
const disposable = this.resizedEventManager.on(listener);
this.disposables.push(disposable);
return disposable;
}
/**
* Enable the edition mode.
*/
@ -571,6 +631,7 @@ export default class VisualConsole {
this.elements.forEach(item => {
item.meta = { ...item.meta, editMode: true };
});
this.containerRef.classList.add("is-editing");
}
/**
@ -580,5 +641,6 @@ export default class VisualConsole {
this.elements.forEach(item => {
item.meta = { ...item.meta, editMode: false };
});
this.containerRef.classList.remove("is-editing");
}
}

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

@ -53,6 +53,10 @@ export default class ColorCloud extends Item<ColorCloudProps> {
return container;
}
protected resizeElement(width: number): void {
super.resizeElement(width, width);
}
public createSvgElement(): SVGSVGElement {
const gradientId = `grad_${this.props.id}`;
// SVG container.

18
visual_console_client/src/items/Line.ts
View File

@ -83,10 +83,26 @@ export default class Line extends Item<LineProps> {
...props,
...Line.extractBoxSizeAndPosition(props)
},
meta
{
...meta,
editMode: false
}
);
}
/**
* Clasic and protected version of the setter of the `meta` property.
* Useful to override it from children classes.
* @param newProps
* @override Item.setMeta
*/
public setMeta(newMetadata: ItemMeta) {
super.setMeta({
...newMetadata,
editMode: false
});
}
/**
* @override
* To create the item's DOM representation.

9
visual_console_client/src/items/ModuleGraph.ts
View File

@ -58,6 +58,15 @@ export default class ModuleGraph extends Item<ModuleGraphProps> {
super.resizeElement(width, 0);
}
/**
* @override Item.initResizementListener. To disable the functionality.
* Start the resizement funtionality.
* @param element Element to move inside its container.
*/
protected initResizementListener(): void {
// No-Op. Disable the resizement functionality for this item.
}
protected createDomElement(): HTMLElement {
const element = document.createElement("div");
element.className = "module-graph";

373
visual_console_client/src/lib/index.ts
View File

@ -374,3 +374,376 @@ export function replaceMacros(macros: Macro[], text: string): string {
text
);
}
/**
* Create a function which will limit the rate of execution of
* the selected function to one time for the selected interval.
* @param delay Interval.
* @param fn Function to be executed at a limited rate.
*/
export function throttle<T, R>(delay: number, fn: (...args: T[]) => R) {
let last = 0;
return (...args: T[]) => {
const now = Date.now();
if (now - last < delay) return;
last = now;
return fn(...args);
};
}
/**
* Create a function which will call the selected function only
* after the interval time has passed after its last execution.
* @param delay Interval.
* @param fn Function to be executed after the last call.
*/
export function debounce<T>(delay: number, fn: (...args: T[]) => void) {
let timerRef: number | null = null;
return (...args: T[]) => {
if (timerRef !== null) window.clearTimeout(timerRef);
timerRef = window.setTimeout(() => {
fn(...args);
timerRef = null;
}, delay);
};
}
/**
* Retrieve the offset of an element relative to the page.
* @param el Node used to calculate the offset.
*/
function getOffset(el: HTMLElement | null) {
let x = 0;
let y = 0;
while (el && !Number.isNaN(el.offsetLeft) && !Number.isNaN(el.offsetTop)) {
x += el.offsetLeft - el.scrollLeft;
y += el.offsetTop - el.scrollTop;
el = el.offsetParent as HTMLElement | null;
}
return { top: y, left: x };
}
/**
* Add the grab & move functionality to a certain element inside it's container.
*
* @param element Element to move.
* @param onMoved Function to execute when the element moves.
*
* @return A function which will clean the event handlers when executed.
*/
export function addMovementListener(
element: HTMLElement,
onMoved: (x: Position["x"], y: Position["y"]) => void
): Function {
const container = element.parentElement as HTMLElement;
// Store the initial draggable state.
const isDraggable = element.draggable;
// Init the coordinates.
let lastX: Position["x"] = 0;
let lastY: Position["y"] = 0;
let lastMouseX: Position["x"] = 0;
let lastMouseY: Position["y"] = 0;
let mouseElementOffsetX: Position["x"] = 0;
let mouseElementOffsetY: Position["y"] = 0;
// Bounds.
let containerBounds = container.getBoundingClientRect();
let containerOffset = getOffset(container);
let containerTop = containerOffset.top;
let containerBottom = containerTop + containerBounds.height;
let containerLeft = containerOffset.left;
let containerRight = containerLeft + containerBounds.width;
let elementBounds = element.getBoundingClientRect();
let borderWidth = window.getComputedStyle(element).borderWidth || "0";
let borderFix = Number.parseInt(borderWidth) * 2;
// Will run onMoved 32ms after its last execution.
const debouncedMovement = debounce(32, (x: Position["x"], y: Position["y"]) =>
onMoved(x, y)
);
// Will run onMoved one time max every 16ms.
const throttledMovement = throttle(16, (x: Position["x"], y: Position["y"]) =>
onMoved(x, y)
);
const handleMove = (e: MouseEvent) => {
// Calculate the new element coordinates.
let x = 0;
let y = 0;
const mouseX = e.pageX;
const mouseY = e.pageY;
const mouseDeltaX = mouseX - lastMouseX;
const mouseDeltaY = mouseY - lastMouseY;
const minX = 0;
const maxX = containerBounds.width - elementBounds.width + borderFix;
const minY = 0;
const maxY = containerBounds.height - elementBounds.height + borderFix;
const outOfBoundsLeft =
mouseX < containerLeft ||
(lastX === 0 &&
mouseDeltaX > 0 &&
mouseX < containerLeft + mouseElementOffsetX);
const outOfBoundsRight =
mouseX > containerRight ||
mouseDeltaX + lastX + elementBounds.width - borderFix >
containerBounds.width ||
(lastX === maxX &&
mouseDeltaX < 0 &&
mouseX > containerLeft + maxX + mouseElementOffsetX);
const outOfBoundsTop =
mouseY < containerTop ||
(lastY === 0 &&
mouseDeltaY > 0 &&
mouseY < containerTop + mouseElementOffsetY);
const outOfBoundsBottom =
mouseY > containerBottom ||
mouseDeltaY + lastY + elementBounds.height - borderFix >
containerBounds.height ||
(lastY === maxY &&
mouseDeltaY < 0 &&
mouseY > containerTop + maxY + mouseElementOffsetY);
if (outOfBoundsLeft) x = minX;
else if (outOfBoundsRight) x = maxX;
else x = mouseDeltaX + lastX;
if (outOfBoundsTop) y = minY;
else if (outOfBoundsBottom) y = maxY;
else y = mouseDeltaY + lastY;
if (x < 0) x = minX;
if (y < 0) y = minY;
// Store the last mouse coordinates.
lastMouseX = mouseX;
lastMouseY = mouseY;
if (x === lastX && y === lastY) return;
// Run the movement events.
throttledMovement(x, y);
debouncedMovement(x, y);
// Store the coordinates of the element.
lastX = x;
lastY = y;
};
const handleEnd = () => {
// Reset the positions.
lastX = 0;
lastY = 0;
lastMouseX = 0;
lastMouseY = 0;
// Remove the move event.
document.removeEventListener("mousemove", handleMove);
// Clean itself.
document.removeEventListener("mouseup", handleEnd);
// Reset the draggable property to its initial state.
element.draggable = isDraggable;
// Reset the body selection property to a default state.
document.body.style.userSelect = "auto";
};
const handleStart = (e: MouseEvent) => {
e.stopPropagation();
// Disable the drag temporarily.
element.draggable = false;
// Store the difference between the cursor and
// the initial coordinates of the element.
lastX = element.offsetLeft;
lastY = element.offsetTop;
// Store the mouse position.
lastMouseX = e.pageX;
lastMouseY = e.pageY;
// Store the relative position between the mouse and the element.
mouseElementOffsetX = e.offsetX;
mouseElementOffsetY = e.offsetY;
// Initialize the bounds.
containerBounds = container.getBoundingClientRect();
containerOffset = getOffset(container);
containerTop = containerOffset.top;
containerBottom = containerTop + containerBounds.height;
containerLeft = containerOffset.left;
containerRight = containerLeft + containerBounds.width;
elementBounds = element.getBoundingClientRect();
borderWidth = window.getComputedStyle(element).borderWidth || "0";
borderFix = Number.parseInt(borderWidth) * 2;
// Listen to the mouse movement.
document.addEventListener("mousemove", handleMove);
// Listen to the moment when the mouse click is not pressed anymore.
document.addEventListener("mouseup", handleEnd);
// Limit the mouse selection of the body.
document.body.style.userSelect = "none";
};
// Event to listen the init of the movement.
element.addEventListener("mousedown", handleStart);
// Returns a function to clean the event listeners.
return () => {
element.removeEventListener("mousedown", handleStart);
handleEnd();
};
}
/**
* Add the grab & resize functionality to a certain element.
*
* @param element Element to move.
* @param onResized Function to execute when the element is resized.
*
* @return A function which will clean the event handlers when executed.
*/
export function addResizementListener(
element: HTMLElement,
onResized: (x: Position["x"], y: Position["y"]) => void
): Function {
const minWidth = 15;
const minHeight = 15;
const resizeDraggable = document.createElement("div");
resizeDraggable.className = "resize-draggable";
element.appendChild(resizeDraggable);
// Container of the resizable element.
const container = element.parentElement as HTMLElement;
// Store the initial draggable state.
const isDraggable = element.draggable;
// Init the coordinates.
let lastWidth: Size["width"] = 0;
let lastHeight: Size["height"] = 0;
let lastMouseX: Position["x"] = 0;
let lastMouseY: Position["y"] = 0;
let mouseElementOffsetX: Position["x"] = 0;
let mouseElementOffsetY: Position["y"] = 0;
// Init the bounds.
let containerBounds = container.getBoundingClientRect();
let containerOffset = getOffset(container);
let containerTop = containerOffset.top;
let containerBottom = containerTop + containerBounds.height;
let containerLeft = containerOffset.left;
let containerRight = containerLeft + containerBounds.width;
let elementOffset = getOffset(element);
let elementTop = elementOffset.top;
let elementLeft = elementOffset.left;
let borderWidth = window.getComputedStyle(element).borderWidth || "0";
let borderFix = Number.parseInt(borderWidth);
// Will run onResized 32ms after its last execution.
const debouncedResizement = debounce(
32,
(width: Size["width"], height: Size["height"]) => onResized(width, height)
);
// Will run onResized one time max every 16ms.
const throttledResizement = throttle(
16,
(width: Size["width"], height: Size["height"]) => onResized(width, height)
);
const handleResize = (e: MouseEvent) => {
// Calculate the new element coordinates.
let width = lastWidth + (e.pageX - lastMouseX);
let height = lastHeight + (e.pageY - lastMouseY);
if (width === lastWidth && height === lastHeight) return;
if (
width < lastWidth &&
e.pageX > elementLeft + (lastWidth - mouseElementOffsetX)
)
return;
if (width < minWidth) {
// Minimum value.
width = minWidth;
} else if (width + elementLeft - borderFix / 2 >= containerRight) {
// Limit the size to the container.
width = containerRight - elementLeft;
}
if (height < minHeight) {
// Minimum value.
height = minHeight;
} else if (height + elementTop - borderFix / 2 >= containerBottom) {
// Limit the size to the container.
height = containerBottom - elementTop;
}
// Run the movement events.
throttledResizement(width, height);
debouncedResizement(width, height);
// Store the coordinates of the element.
lastWidth = width;
lastHeight = height;
// Store the last mouse coordinates.
lastMouseX = e.pageX;
lastMouseY = e.pageY;
};
const handleEnd = () => {
// Reset the positions.
lastWidth = 0;
lastHeight = 0;
lastMouseX = 0;
lastMouseY = 0;
mouseElementOffsetX = 0;
mouseElementOffsetY = 0;
// Remove the move event.
document.removeEventListener("mousemove", handleResize);
// Clean itself.
document.removeEventListener("mouseup", handleEnd);
// Reset the draggable property to its initial state.
element.draggable = isDraggable;
// Reset the body selection property to a default state.
document.body.style.userSelect = "auto";
};
const handleStart = (e: MouseEvent) => {
e.stopPropagation();
// Disable the drag temporarily.
element.draggable = false;
// Store the difference between the cursor and
// the initial coordinates of the element.
const { width, height } = element.getBoundingClientRect();
lastWidth = width;
lastHeight = height;
// Store the mouse position.
lastMouseX = e.pageX;
lastMouseY = e.pageY;
// Store the relative position between the mouse and the element.
mouseElementOffsetX = e.offsetX;
mouseElementOffsetY = e.offsetY;
// Initialize the bounds.
containerBounds = container.getBoundingClientRect();
containerOffset = getOffset(container);
containerTop = containerOffset.top;
containerBottom = containerTop + containerBounds.height;
containerLeft = containerOffset.left;
containerRight = containerLeft + containerBounds.width;
elementOffset = getOffset(element);
elementTop = elementOffset.top;
elementLeft = elementOffset.left;
// Listen to the mouse movement.
document.addEventListener("mousemove", handleResize);
// Listen to the moment when the mouse click is not pressed anymore.
document.addEventListener("mouseup", handleEnd);
// Limit the mouse selection of the body.
document.body.style.userSelect = "none";
};
// Event to listen the init of the movement.
resizeDraggable.addEventListener("mousedown", handleStart);
// Returns a function to clean the event listeners.
return () => {
resizeDraggable.remove();
handleEnd();
};
}

15
visual_console_client/src/main.css
View File

@ -16,6 +16,19 @@
}
.visual-console-item.is-editing {
border: 2px dashed #33ccff;
border: 2px dashed #b2b2b2;
transform: translateX(-2px) translateY(-2px);
cursor: move;
user-select: none;
}
.visual-console-item.is-editing > .resize-draggable {
float: right;
position: absolute;
right: 0;
bottom: 0;
width: 15px;
height: 15px;
background: url(./resize-handle.svg);
cursor: se-resize;
}

24
visual_console_client/src/resize-handle.svg Normal file
View File

@ -0,0 +1,24 @@
<svg version="1.1" id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="15px" height="15px" viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
<line fill="none" stroke="#B2B2B2" stroke-width="1.5" stroke-miterlimit="10" x1="0.562" y1="36.317" x2="14.231" y2="22.648"/>
<line fill="none" stroke="#B2B2B2" stroke-width="1.5" stroke-miterlimit="10" x1="4.971" y1="36.595" x2="14.409" y2="27.155"/>
<line fill="none" stroke="#B2B2B2" stroke-width="1.5" stroke-miterlimit="10" x1="10.017" y1="36.433" x2="14.231" y2="32.218"/>
<g id="jGEeKn_1_">
<image overflow="visible" width="46" height="37" id="jGEeKn" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
EAMCAwYAAAGRAAABswAAAgL/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIACYALwMBIgACEQEDEQH/
xAB5AAEBAQEBAAAAAAAAAAAAAAAAAQQCBgEBAAAAAAAAAAAAAAAAAAAAABAAAQQDAAAAAAAAAAAA
AAAAAQAxAgMQMBIRAAEBBgUFAQAAAAAAAAAAAAECABEhQWEDECBxkRIwMYEyEwQSAQAAAAAAAAAA
AAAAAAAAADD/2gAMAwEAAhEDEQAAAPfAS5zTZTkGPrULZQAAD//aAAgBAgABBQDT/9oACAEDAAEF
ANP/2gAIAQEAAQUAzJg2SQBC2d0w2bZSvVNc5oMuAuQuAuRp/9oACAECAgY/AB//2gAIAQMCBj8A
H//aAAgBAQEGPwDE6ZXmAYqtwsJBHI91GlMqnvT+e37QL1kS0b7XBwADrVoQCRXGe5ae5ae5afk9
H//Z" transform="matrix(1 0 0 1 -46.875 -9.8906)">
</image>
</g>
<line fill="none" stroke="#B2B2B2" stroke-width="1.5" stroke-miterlimit="10" x1="13.483" y1="0.644" x2="0.828" y2="13.301"/>
<line fill="none" stroke="#B2B2B2" stroke-width="1.5" stroke-miterlimit="10" x1="13.734" y1="5.141" x2="5.325" y2="13.549"/>
<line fill="none" stroke="#B2B2B2" stroke-width="1.5" stroke-miterlimit="10" x1="14.231" y1="9.388" x2="9.806" y2="13.813"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB