dev_kr frontend

[GoJS] Node의 모델, 다이어그램 업데이트

광고



두 포트가 있고, 각각의 포트는 GoJS의 노드로 표현한다.
포트의 갯수와 이름, 라벨을 각각 portNums, portNames, portNamesContextLabel이라 칭한다.

여기서 포트의 이름은 텍스트 블록으로, 각 텍스트 블록의 우 클릭 시 나오는 컨텍스트 메뉴의 이름을 컨텍스트 라벨이라고 칭한다.

portNames = ' firstName, secondName'
포트 이름은 최초에 두 이름이 (,)형태로 이어져 있는 상태로 split() 후 활용 해야 한다는 전제가 있다.

const portNames= item.portNames=== null
  ? Array.from({ length: portNumsCount }, (_, i) => `${i + 1}`): item.portNames.split(',') 
const portNamesContextLabel= portNames.length === 2 ? [portNames[0], portNames[1]] : portNames



NS님의 소스 위에 기능을 추가하기 위해 그 위에 붙인 소스로, node의 model commit시, model의 변경만을 필요로 하는지, 다이어그램 상의 변경도 필요로 하는 지에 차이가 있다.

$(go.TextBlock,
  {
    text: portNames[i],
    margin: new go.Margin(4, 2, 2, 0),
    font: '11px sans-serif',
    contextMenu:
    $('ContextMenu',
     $('ContextMenuButton',
      $(go.TextBlock, portNamesContextLabel[i]),
       {
        click: function (e, obj) {
         this.diagram.model.commit(function (d) {
          const contextmenu = obj.part
          const nodedata = contextmenu.data
          const portNames= nodedata.portNames
          const changedPortNames = portNames.reverse()
          d.set(nodedata, 'portNames', changedPortNames)
          for (let j = 0; j < portNums; j++) d.set(nodedata, 'portNames' + j, changedPortNames [j])
          }, 'portNames updated')
         }
        },
       )
      )
     }
    )




위의 소스는 텍스트 블록 아래에 텍스트를 추가한 것이고, 아래 소스의 경우 텍스트 블록에 텍스트를 바인딩 하는 것에 차이가 있다.


$(go.TextBlock,
 new go.Binding('text', 'portNames' + '' + i + ''), 
 {
  contextMenu:
   $('ContextMenu',
    $('ContextMenuButton',
     $(go.TextBlock, portNamesContextLabel[i]),
      {
        click: function (e, obj) {
         this.diagram.model.commit(function (d) {
          const contextmenu = obj.part
          const nodedata =  contextmenu.data
          const portNames= nodedata.portNames
          const changedPortNames = portNames.reverse()
          d.set(nodedata, 'portNames', changedPortNames)
          for (let j = 0; j < portNums; j++) d.set(nodedata, 'portNames' + j, changedPortNames [j])
          }, 'portNames updated')
         }
        },
       )
      )
     }
    )



new go.Binding('text', 'key')textblock.text = data.key 의 의미

위 로직에서 컨텍스트 메뉴를 클릭하면 포트 이름을 reverse()하여 모델에 커밋하는 동작을 한다. 만약, 다이어그램의 시각적 요소에도 모델의 변화가 반영되기를 원한다면 바인딩 을 하고, 모델의 변화만 필요한 경우엔 요소를 추가하는 식으로 사용한다. 다이어그램에 commit시, node model의 변경은 양쪽 모두 가능했다.



%%footer%%