Index: arms/js/mapping.js =================================================================== diff -u -rca314d094db69ffcf31139ba9ab27e7c09806641 -r7311fe7b8db8b99a6097e1ca2d29c20a226a38e5 --- arms/js/mapping.js (.../mapping.js) (revision ca314d094db69ffcf31139ba9ab27e7c09806641) +++ arms/js/mapping.js (.../mapping.js) (revision 7311fe7b8db8b99a6097e1ca2d29c20a226a38e5) @@ -365,7 +365,7 @@ console.log('ARMS State List:', arms_state_list); console.log('ALM Status List:', alm_status_list); - let gojs_mapping_data = generate_gojs_mapping_data(req_state_category_list, arms_state_list, alm_status_list); + let gojs_mapping_data = generate_gojs_mapping_data(req_state_category_list, arms_state_list, alm_status_list, alm_server_type); gojs.load(gojs_mapping_data); }) .catch((error) => { @@ -374,7 +374,7 @@ } } -function generate_gojs_mapping_data(req_state_category_list, arms_state_list, alm_status_list) { +function generate_gojs_mapping_data(req_state_category_list, arms_state_list, alm_status_list, alm_server_type) { const node_data_array = []; const link_data_array = []; @@ -397,7 +397,7 @@ const category_node_key = category_type+ "-"+key; const node = { key: category_node_key, - text: `카테고리 ${value}`, + text: `${value}`, type: category_type, c_id: key, category: 'Loading', @@ -414,7 +414,7 @@ const arms_node_key = arms_state_type+"-"+state.c_id; const node = { key: arms_node_key, - text: `A-RMS ${state.c_title}`, + text: `${state.c_title}`, type: arms_state_type, c_id: state.c_id, mapping_id: state.c_etc, @@ -431,7 +431,8 @@ const alm_node_key = alm_status_type + "-" + status.c_id; const node = { key: alm_node_key, - text: `ALM ${status.c_issue_status_name}`, + text: `${status.c_issue_status_name}`, + server_type: alm_server_type, type: alm_status_type, c_id: status.c_id, mapping_id: status.c_req_state_mapping_link, Index: arms/js/mapping/gojs_setup.js =================================================================== diff -u -rca314d094db69ffcf31139ba9ab27e7c09806641 -r7311fe7b8db8b99a6097e1ca2d29c20a226a38e5 --- arms/js/mapping/gojs_setup.js (.../gojs_setup.js) (revision ca314d094db69ffcf31139ba9ab27e7c09806641) +++ arms/js/mapping/gojs_setup.js (.../gojs_setup.js) (revision 7311fe7b8db8b99a6097e1ca2d29c20a226a38e5) @@ -31,8 +31,18 @@ } }); - const graygrad = $(go.Brush, 'Linear', { 0: 'white', 0.1: 'whitesmoke', 0.9: 'whitesmoke', 1: 'lightgray' }); + // const graygrad = $(go.Brush, 'Linear', { 0: 'white', 0.1: 'whitesmoke', 0.9: 'whitesmoke', 1: 'lightgray' }); + // 노드 박스 배경색 + const graygrad = $(go.Brush, 'Linear', { + 0: 'rgba(51, 51, 51, 0)', + 0.1: 'rgba(51, 51, 51, 0.1)', + 0.9: 'rgba(51, 51, 51, 0.9)', + 1: 'rgba(51, 51, 51, 1)' + }); + // 노드 박스 테두리 + const lightGray = 'rgba(128, 128, 128, 0.5)'; // 흐린 회색 (투명도 50%) + myDiagram.nodeTemplate = // the default node template $(go.Node, 'Spot', @@ -43,19 +53,29 @@ 'Auto', { name: 'BODY' }, $(go.Shape, - 'Rectangle', - { fill: graygrad, stroke: 'gray', minSize: new go.Size(120, 21) }, + 'RoundedRectangle', + { fill: graygrad, stroke: lightGray, minSize: new go.Size(100, 30) }, new go.Binding('fill', 'isSelected', (s) => (s ? 'dodgerblue' : graygrad)).ofObject() ), - $(go.TextBlock, - { - stroke: 'black', - font: '12px sans-serif', - editable: true, - margin: new go.Margin(3, 3 + 11, 3, 3 + 4), - alignment: go.Spot.Left, - }, - new go.Binding('text').makeTwoWay() + $(go.Panel, + 'Horizontal', + { alignment: go.Spot.Left, margin: 3 }, + $(go.Picture, { + source: "/arms/img/arms.png", // 아이콘 이미지 경로 + width: 20, + height: 20, + margin: new go.Margin(0, 0, 0, 0) + }), + $(go.TextBlock, + { + stroke: 'white', + font: '12px sans-serif', + editable: true, + margin: new go.Margin(3, 4, 3, 4), // 적절한 마진 설정 + alignment: go.Spot.Left, + }, + new go.Binding('text').makeTwoWay() + ) ) ), // output port @@ -66,15 +86,15 @@ addNodeAndLink(e, obj); } }}, - $(go.Shape, 'Diamond', { width: 11, height: 11, fill: 'white', stroke: 'dodgerblue', strokeWidth: 3 }), + $(go.Shape, 'Diamond', { width: 11, height: 11, fill: 'white', stroke: graygrad, strokeWidth: 3 }), $(go.Shape, 'PlusLine', new go.Binding('visible', '', (data) => data.category !== 'NoAdd').ofObject(), { width: 11, height: 11, fill: null, stroke: 'dodgerblue', strokeWidth: 3 }) ), // input port $(go.Panel, 'Auto', { alignment: go.Spot.Left, portId: 'to', toLinkable: true }, - $(go.Shape, 'Circle', { width: 8, height: 8, fill: 'white', stroke: 'gray' }), - $(go.Shape, 'Circle', { width: 4, height: 4, fill: 'dodgerblue', stroke: null }) + $(go.Shape, 'Ellipse', { width: 9, height: 9, fill: 'white', stroke: graygrad, strokeWidth: 3 }), + $(go.Shape, 'Ellipse', { width: 6, height: 6, fill: 'white', stroke: null }) ) ); @@ -103,27 +123,35 @@ 'Auto', { name: 'BODY' }, $(go.Shape, - 'Rectangle', - { fill: graygrad, stroke: 'gray', minSize: new go.Size(120, 21) }, + 'RoundedRectangle', + { fill: graygrad, stroke: lightGray, minSize: new go.Size(100, 30) }, new go.Binding('fill', 'isSelected', (s) => (s ? 'dodgerblue' : graygrad)).ofObject() ), - $(go.TextBlock, - { - stroke: 'black', - font: '12px sans-serif', - editable: true, - margin: new go.Margin(3, 3 + 11, 3, 3 + 4), - alignment: go.Spot.Left, - }, - new go.Binding('text', 'text') + $(go.Panel, + 'Horizontal', + { alignment: go.Spot.Left, margin: 3 }, + $(go.TextBlock, + { + stroke: 'white', + font: '12px FontAwesome, sans-serif', + editable: false, + margin: new go.Margin(3, 3 + 11, 3, 3 + 4), + alignment: go.Spot.Left, + }, + new go.Binding("text", "", function(data) { + // 아이콘과 텍스트를 함께 표시 + return "\uf009 " + data.text; // "\uf007"는 Font Awesome의 유니코드 문자입니다 (예: 사용자 아이콘) + }) + ) ) + ), // output port $(go.Panel, 'Auto', { alignment: go.Spot.Right, portId: 'from', fromLinkable: true, click: addNodeAndLink }, - $(go.Shape, 'Circle', { width: 22, height: 22, fill: 'white', stroke: 'dodgerblue', strokeWidth: 3 }), - $(go.Shape, 'PlusLine', { width: 11, height: 11, fill: null, stroke: 'dodgerblue', strokeWidth: 3 }) + $(go.Shape, 'Circle', { width: 22, height: 22, fill: 'white', stroke: graygrad, strokeWidth: 3 }), + $(go.Shape, 'PlusLine', { width: 11, height: 11, fill: null, stroke: graygrad, strokeWidth: 3 }) ) ) ); @@ -139,27 +167,47 @@ 'Auto', { name: 'BODY' }, $(go.Shape, - 'Rectangle', - { fill: graygrad, stroke: 'gray', minSize: new go.Size(120, 21) }, + 'RoundedRectangle', + { fill: graygrad, stroke: lightGray, minSize: new go.Size(100, 30) }, new go.Binding('fill', 'isSelected', (s) => (s ? 'dodgerblue' : graygrad)).ofObject() ), - $(go.TextBlock, - { - stroke: 'black', - font: '12px sans-serif', - editable: true, - margin: new go.Margin(3, 3 + 11, 3, 3 + 4), - alignment: go.Spot.Left, - }, - new go.Binding('text', 'text') + $(go.Panel, + 'Horizontal', + { alignment: go.Spot.Left, margin: 3 }, + $(go.Picture, + { + width: 20, + height: 20, + margin: new go.Margin(0, 0, 0, 2) + }, + new go.Binding('source', 'server_type', function(type) { + console.log(type); + switch(type) { + case '클라우드': return '/arms/img/jira/mark-gradient-white-jira.svg'; + case '온프레미스': return '/arms/img/jira/mark-gradient-blue-jira.svg'; + case '레드마인_온프레미스': return '/arms/img/redmine/logo.png'; + default: return ''; + } + }) + ), + $(go.TextBlock, + { + stroke: 'white', + font: '12px sans-serif', + editable: false, + margin: new go.Margin(3, 3 + 11, 3, 3 + 4), + alignment: go.Spot.Left, + }, + new go.Binding('text', 'text') + ) ) ), // input port $(go.Panel, 'Auto', { alignment: go.Spot.Left, portId: 'to', toLinkable: true }, - $(go.Shape, 'Circle', { width: 8, height: 8, fill: 'white', stroke: 'gray' }), - $(go.Shape, 'Circle', { width: 4, height: 4, fill: 'dodgerblue', stroke: null }) + $(go.Shape, 'Ellipse', { width: 9, height: 9, fill: 'white', stroke: graygrad, strokeWidth: 3 }), + $(go.Shape, 'Ellipse', { width: 6, height: 6, fill: 'white', stroke: null }) ) ) ); @@ -318,15 +366,15 @@ myDiagram.linkTemplate = $(go.Link, { selectionAdorned: false, fromPortId: 'from', toPortId: 'to', relinkableTo: true }, $(go.Shape, - { stroke: 'gray', strokeWidth: 2 }, + { stroke: 'lightgray', strokeWidth: 4 }, { mouseEnter: (e, obj) => { - obj.strokeWidth = 5; + obj.strokeWidth = 6; obj.stroke = 'dodgerblue'; }, mouseLeave: (e, obj) => { - obj.strokeWidth = 2; - obj.stroke = 'gray'; + obj.strokeWidth = 4; + obj.stroke = 'lightgray'; }, } )