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,