From c68347a827b4896b797d524ba45a37342d92c608 Mon Sep 17 00:00:00 2001 From: eli Date: Wed, 22 Jul 2026 12:33:28 -0400 Subject: [PATCH] Add layout options and toggle functionality in call_flow_map.php Enhanced the call flow map with layout selection options (Top-Down and Left-Right) and corresponding UI elements. Updated the handling of layout parameters from GET requests and integrated layout persistence in the diagram rendering logic. Added translations for the new layout labels in app_languages.php. --- app_languages.php | 78 +++++++++++++++++++++++++++++++++++++++++++++++ call_flow_map.php | 67 ++++++++++++++++++++++++++++++++++++++-- 2 files changed, 142 insertions(+), 3 deletions(-) diff --git a/app_languages.php b/app_languages.php index 9a40fae..309f939 100644 --- a/app_languages.php +++ b/app_languages.php @@ -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'] = "مفتاح الرسم البياني"; diff --git a/call_flow_map.php b/call_flow_map.php index 0a26466..0b995ea 100644 --- a/call_flow_map.php +++ b/call_flow_map.php @@ -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)) { @@ -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'; @@ -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; + } @@ -204,6 +240,19 @@ echo " \n"; echo " \n"; +echo "
\n"; +echo " \n"; +echo "
\n"; +echo " \n"; +echo " \n"; +echo "
\n"; +echo " \n"; +echo "
\n"; + echo "
\n"; echo button::create(['type'=>'submit','label'=>$text['button-generate'],'icon'=>'project-diagram']); echo "
\n"; @@ -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'); @@ -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, { @@ -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 }, }); }); @@ -329,7 +390,7 @@ function render_diagram(data) { layout: { hierarchical: { enabled: true, - direction: 'UD', + direction: layout_direction, sortMethod: 'directed', levelSeparation: 140, nodeSpacing: 30,