Skip to content

Add layout options and toggle functionality in call_flow_map.php #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eliweaver732 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add layout options and toggle functionality in call_flow_map.php #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions app_languages.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,84 @@
$text['button-generate']['ja-jp'] = "ダイアグラムを生成";
$text['button-generate']['ko-kr'] = "다이어그램 생성";

$text['label-layout']['en-us'] = "Layout";
$text['label-layout']['en-gb'] = "Layout";
$text['label-layout']['ar-eg'] = "التخطيط";
$text['label-layout']['de-at'] = "Layout";
$text['label-layout']['de-ch'] = "Layout";
$text['label-layout']['de-de'] = "Layout";
$text['label-layout']['el-gr'] = "Διάταξη";
$text['label-layout']['es-cl'] = "Diseño";
$text['label-layout']['es-mx'] = "Diseño";
$text['label-layout']['fr-ca'] = "Disposition";
$text['label-layout']['fr-fr'] = "Disposition";
$text['label-layout']['he-il'] = "פריסה";
$text['label-layout']['it-it'] = "Layout";
$text['label-layout']['ka-ge'] = "განლაგება";
$text['label-layout']['nl-nl'] = "Indeling";
$text['label-layout']['pl-pl'] = "Układ";
$text['label-layout']['pt-br'] = "Layout";
$text['label-layout']['pt-pt'] = "Layout";
$text['label-layout']['ro-ro'] = "Aspect";
$text['label-layout']['ru-ru'] = "Макет";
$text['label-layout']['sv-se'] = "Layout";
$text['label-layout']['uk-ua'] = "Макет";
$text['label-layout']['zh-cn'] = "布局";
$text['label-layout']['ja-jp'] = "レイアウト";
$text['label-layout']['ko-kr'] = "레이아웃";

$text['label-layout_top_down']['en-us'] = "Top-Down";
$text['label-layout_top_down']['en-gb'] = "Top-Down";
$text['label-layout_top_down']['ar-eg'] = "من أعلى لأسفل";
$text['label-layout_top_down']['de-at'] = "Von oben nach unten";
$text['label-layout_top_down']['de-ch'] = "Von oben nach unten";
$text['label-layout_top_down']['de-de'] = "Von oben nach unten";
$text['label-layout_top_down']['el-gr'] = "Από πάνω προς τα κάτω";
$text['label-layout_top_down']['es-cl'] = "De arriba a abajo";
$text['label-layout_top_down']['es-mx'] = "De arriba a abajo";
$text['label-layout_top_down']['fr-ca'] = "Haut en bas";
$text['label-layout_top_down']['fr-fr'] = "Haut en bas";
$text['label-layout_top_down']['he-il'] = "מלמעלה למטה";
$text['label-layout_top_down']['it-it'] = "Dall'alto in basso";
$text['label-layout_top_down']['ka-ge'] = "ზემოდან ქვემოთ";
$text['label-layout_top_down']['nl-nl'] = "Van boven naar beneden";
$text['label-layout_top_down']['pl-pl'] = "Z góry na dół";
$text['label-layout_top_down']['pt-br'] = "De cima para baixo";
$text['label-layout_top_down']['pt-pt'] = "De cima para baixo";
$text['label-layout_top_down']['ro-ro'] = "De sus în jos";
$text['label-layout_top_down']['ru-ru'] = "Сверху вниз";
$text['label-layout_top_down']['sv-se'] = "Uppifrån och ner";
$text['label-layout_top_down']['uk-ua'] = "Зверху вниз";
$text['label-layout_top_down']['zh-cn'] = "自上而下";
$text['label-layout_top_down']['ja-jp'] = "上から下";
$text['label-layout_top_down']['ko-kr'] = "위에서 아래로";

$text['label-layout_left_right']['en-us'] = "Left-Right";
$text['label-layout_left_right']['en-gb'] = "Left-Right";
$text['label-layout_left_right']['ar-eg'] = "من اليسار لليمين";
$text['label-layout_left_right']['de-at'] = "Von links nach rechts";
$text['label-layout_left_right']['de-ch'] = "Von links nach rechts";
$text['label-layout_left_right']['de-de'] = "Von links nach rechts";
$text['label-layout_left_right']['el-gr'] = "Από αριστερά προς δεξιά";
$text['label-layout_left_right']['es-cl'] = "De izquierda a derecha";
$text['label-layout_left_right']['es-mx'] = "De izquierda a derecha";
$text['label-layout_left_right']['fr-ca'] = "Gauche à droite";
$text['label-layout_left_right']['fr-fr'] = "Gauche à droite";
$text['label-layout_left_right']['he-il'] = "משמאל לימין";
$text['label-layout_left_right']['it-it'] = "Da sinistra a destra";
$text['label-layout_left_right']['ka-ge'] = "მარცხნიდან მარჯვნივ";
$text['label-layout_left_right']['nl-nl'] = "Van links naar rechts";
$text['label-layout_left_right']['pl-pl'] = "Od lewej do prawej";
$text['label-layout_left_right']['pt-br'] = "Da esquerda para a direita";
$text['label-layout_left_right']['pt-pt'] = "Da esquerda para a direita";
$text['label-layout_left_right']['ro-ro'] = "De la stânga la dreapta";
$text['label-layout_left_right']['ru-ru'] = "Слева направо";
$text['label-layout_left_right']['sv-se'] = "Vänster till höger";
$text['label-layout_left_right']['uk-ua'] = "Зліва направо";
$text['label-layout_left_right']['zh-cn'] = "从左到右";
$text['label-layout_left_right']['ja-jp'] = "左から右";
$text['label-layout_left_right']['ko-kr'] = "왼쪽에서 오른쪽";

$text['label-legend']['en-us'] = "Legend";
$text['label-legend']['en-gb'] = "Legend";
$text['label-legend']['ar-eg'] = "مفتاح الرسم البياني";
Expand Down
67 changes: 64 additions & 3 deletions call_flow_map.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,10 @@
exit;
}

//selected type/uuid from GET
//selected type/uuid/layout from GET
$selected_type = $_GET['type'] ?? '';
$selected_uuid = $_GET['id'] ?? '';
$selected_layout = strtoupper($_GET['layout'] ?? 'UD');

//validate
if (!empty($selected_type)) {
Expand All @@ -69,6 +70,9 @@
if (!empty($selected_uuid) && !is_uuid($selected_uuid)) {
$selected_uuid = '';
}
if ($selected_layout !== 'LR') {
$selected_layout = 'UD';
}

//pre-load diagram data if both type and uuid are set
$diagram_json = 'null';
Expand Down Expand Up @@ -140,6 +144,38 @@
color: #555;
z-index: 10;
}
.layout-toggle {
display: inline-flex;
border: 1px solid var(--input-border-color, #ccc);
border-radius: 4px;
overflow: hidden;
background: var(--input-background-color, #fff);
}
.layout-toggle-btn {
appearance: none;
border: 0;
background: transparent;
padding: 6px 12px;
font-size: 13px;
line-height: 1.2;
cursor: pointer;
color: var(--text-color, #444);
display: inline-flex;
align-items: center;
gap: 6px;
}
.layout-toggle-btn + .layout-toggle-btn {
border-left: 1px solid var(--input-border-color, #ccc);
}
.layout-toggle-btn.active {
background: var(--button-background-color, #1565C0);
color: var(--button-color, #fff);
}
.layout-toggle-btn:focus-visible {
outline: 2px solid var(--button-background-color, #1565C0);
outline-offset: -2px;
z-index: 1;
}

</style>

Expand Down Expand Up @@ -204,6 +240,19 @@
echo " </select>\n";
echo " </div>\n";

echo " <div>\n";
echo " <label class='lbl' style='display:block; margin-bottom:4px;'>".($text['label-layout'] ?? 'Layout')."</label>\n";
echo " <div class='layout-toggle' id='layout-toggle' role='group' aria-label='".escape($text['label-layout'] ?? 'Layout')."'>\n";
echo " <button type='button' class='layout-toggle-btn".($selected_layout === 'UD' ? ' active' : '')."' data-layout='UD' onclick='set_layout(\"UD\");' title='".escape($text['label-layout_top_down'] ?? 'Top-Down')."'>\n";
echo " <i class='fas fa-arrow-down'></i> ".escape($text['label-layout_top_down'] ?? 'Top-Down')."\n";
echo " </button>\n";
echo " <button type='button' class='layout-toggle-btn".($selected_layout === 'LR' ? ' active' : '')."' data-layout='LR' onclick='set_layout(\"LR\");' title='".escape($text['label-layout_left_right'] ?? 'Left-Right')."'>\n";
echo " <i class='fas fa-arrow-right'></i> ".escape($text['label-layout_left_right'] ?? 'Left-Right')."\n";
echo " </button>\n";
echo " </div>\n";
echo " <input type='hidden' name='layout' id='sel-layout' value='".escape($selected_layout)."' />\n";
echo " </div>\n";

echo " <div>\n";
echo button::create(['type'=>'submit','label'=>$text['button-generate'],'icon'=>'project-diagram']);
echo " </div>\n";
Expand Down Expand Up @@ -269,6 +318,15 @@

var network = null;

// Update layout toggle selection (persisted via hidden form field)
function set_layout(layout) {
layout = (layout === 'LR') ? 'LR' : 'UD';
document.getElementById('sel-layout').value = layout;
document.querySelectorAll('.layout-toggle-btn').forEach(function(btn) {
btn.classList.toggle('active', btn.getAttribute('data-layout') === layout);
});
}

// Populate destination dropdown when type changes
function populateDestinations(type) {
var sel = document.getElementById('sel-uuid');
Expand Down Expand Up @@ -297,6 +355,9 @@ function render_diagram(data) {
return;
}

var layout_direction = (document.getElementById('sel-layout').value === 'LR') ? 'LR' : 'UD';
var edge_force_direction = (layout_direction === 'LR') ? 'horizontal' : 'vertical';

var styled_nodes = data.nodes.map(function(n) {
var style = node_styles[n.type] || node_styles['external'];
var props = Object.assign({}, n, style, {
Expand All @@ -316,7 +377,7 @@ function render_diagram(data) {
font: { size: 11, align: 'middle', color: '#444', strokeWidth: 2, strokeColor: '#fff' },
color: { color: '#555', highlight: '#1565C0', opacity: 0.85 },
width: 1.5,
smooth: { type: 'cubicBezier', forceDirection: 'vertical', roundness: 0.6 },
smooth: { type: 'cubicBezier', forceDirection: edge_force_direction, roundness: 0.6 },
});
});

Expand All @@ -329,7 +390,7 @@ function render_diagram(data) {
layout: {
hierarchical: {
enabled: true,
direction: 'UD',
direction: layout_direction,
sortMethod: 'directed',
levelSeparation: 140,
nodeSpacing: 30,
Expand Down