mxGraph 에서 읽 은 mxe 또는 xml 그림 에 cell 이벤트 추가 (cell 드래그 수정 금지)

7065 단어 JavaScripthtmlxmlIE

 
 mxGraph 에서 자바 script 의 예 중의 userobject. html 가 보 여 준 효 과 를 모방 하기 위해 많은 시간 을 들 였 습 니 다. 반나절 의 시간 을 들 였 습 니 다. 먼저 다음 과 같이 요약 합 니 다.
  첫째, userobject. html 에서 mxe 나 xml 파일 을 읽 지 않 았 습 니 다. 그 안에 있 는 것 은 모두 자신 이 만 든 XML 파일 입 니 다. 제 가 하려 는 것 은 먼저 CS 엔 드 의 Graph 로 그림 을 그 려 mxe 를 만 든 다음 에 처리 해서 읽 는 것 입 니 다.
  둘째, userobject. html 에 표 시 된 효과 도 는 클릭 이벤트 가 있 습 니 다. 하나의 cell (vertex 또는 edge) 을 누 를 때마다 오른쪽 에 하나의 폼 을 표시 하여 모든 속성 내용 을 보 여 줍 니 다.그림 을 보 는 사람 이 셀 의 내용 을 마음대로 드래그 하고 수정 할 수 있다 는 것 이 결함 입 니 다. 그래서 제 가 해 야 할 일 은 이 벤트 를 클릭 할 수 있 지만 드래그 하지 않 는 것 입 니 다.
  셋째, mxGraph 의 드래그 효 과 는 graph. setEnabled (false) 와 연결 되 어 있 습 니 다. true 를 설정 하면 드래그 수정 이 가능 하고 반대로 안 됩 니 다. 설명 할 것 은 우리 가 클릭 할 때 모든 cell 의 내용 을 가 져 와 야 한 다 는 것 입 니 다. 그러나 false 로 설정 한 상태 에서 사용 하면
 graph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt)    {     selectionChanged (graph); / / 속성 패 널 표시    });
이 모니터 는 CELL 의 값 을 얻 을 수 없습니다. 왜냐하면 제 selection Changed 방법 에서 cell 을 사 용 했 기 때 문 입 니 다. 이전에 selection Changed 방법 에서 var cell = graph. getSelection Cell () 을 통 해 cell 을 얻 었 습 니 다. 이런 상황 에서 제 가 위의 모니터 를 이용 하여 설정 하면
graph. setEnabled (false) 는 이벤트 가 발생 하지 않 고 폼 을 표시 하지 않 을 것 입 니 다. 이 경우 graph. setEnabled (true) 를 설정 하면 폼 을 받 을 수 있 습 니 다. 그 후에 다른 모니터 를 시 도 했 습 니 다.
    graph.addListener(mxEvent.CLICK, function(sender, evt)    {     selectionChanged(graph);     });
전 제 는 graph. setEnabled (false) 가 있어 도 안 됩 니 다. 나중에 이렇게 두 번 눌 러 도 안 됩 니 다. 그래서 저 는 이 중간 에 cell 이 잘못된 문 제 를 얻 었 을 것 이 라 고 생각 했 습 니 다. 나중에 script 의 다른 두 가지 예 를 참고 하 였 습 니 다. 예 를 들 어 overlays 의 클릭 모니터 에서
 graph.addListener(mxEvent.CLICK, function(sender, evt)    {     var cell = evt.getProperty('cell');
    。。。
    }
 여러분 은 무엇 을 발 견 했 습 니까? 참, evt 를 통 해 눌 렀 을 때의 cell 을 가 져 올 수 있 습 니 다. 원래 처럼 graph. getSelection Cell () 을 통 해 선택 한 것 을 가 져 올 필요 가 없습니다. 이렇게 수정 합 니 다. graph.addListener(mxEvent.CLICK, function(sender, evt)    {     cell= evt.getProperty('cell');     selectionChanged(graph,cell);    });    selectionChanged(graph,cell);
하하 하, 드디어 성 공 했 습 니 다. 드디어 위탁 채 무 를 사용 하지 않 고 cell 을 수정 하 는 상황 에서 사건 을 촉발 하고 폼 의 상세 한 내용 을 보 여 주 었 습 니 다. 현재 공헌 코드 는 다음 과 같 습 니 다.
   
 <html>
<head>
<title>  CELL  </title>
<script type="text/javascript">mxBasePath = 'src';</script>
<script type="text/javascript" src="mxclient.js"></script>
 <script type="text/javascript">
  function main(container)
  {
   if (!mxClient.isBrowserSupported())
   {
    mxUtils.error('Browser is not supported!', 200, false);
   }
   else
   {
    var graph = new mxGraph(container);
    graph.setCellsResizable(false);
    graph.setEnabled(false);//    ,         CELL     。
    graph.setPanning(true);//    
    //          (edge)    
    graph.isCellEditable = function(cell)
    {
     return !this.getModel().isEdge(cell)&&!this.getModel().isVertex(cell);
    };
    new mxCellTracker(graph);
    var style = graph.getStylesheet().getDefaultVertexStyle();
    style[mxConstants.STYLE_STROKECOLOR] = 'gray';
    style[mxConstants.STYLE_SHADOW] = true;
    style[mxConstants.STYLE_FILLCOLOR] = '#DFDFDF';
    style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
    style[mxConstants.STYLE_FONTCOLOR] = 'black';
    style[mxConstants.STYLE_FONTSIZE] = '12';
    style[mxConstants.STYLE_SPACING] = 4;
    
    style = graph.getStylesheet().getDefaultEdgeStyle();
    style[mxConstants.STYLE_STROKECOLOR] = '#0C0C0C';
    style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
    //        。                            。
    style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
    style[mxConstants.STYLE_ROUNDED] = true;
    style[mxConstants.STYLE_FONTCOLOR] = 'black';
    style[mxConstants.STYLE_FONTSIZE] = '10';    
    graph.gridSize = 20;
    graph.setResizeContainer(true);
    graph.minimumContainerSize = new mxRectangle(0, 0, 500, 380);
    graph.setBorder(60);
    graph.getModel().beginUpdate();
    try
    { 
     read(graph, '345Formatted.xml');
    }
    finally
    {
     graph.getModel().endUpdate();
    }
    //new mxDivResizer(container);
    var cell;
    graph.addListener(mxEvent.CLICK, function(sender, evt)
    {
     cell= evt.getProperty('cell');
     selectionChanged(graph,cell);
     
    });
    
    selectionChanged(graph,cell);
   }
  }; 
  
  // Parses the mxGraph XML file format
  function read(graph, filename)
  {
   var req = mxUtils.load(filename);
   var root = req.getDocumentElement();
   var dec = new mxCodec(root.ownerDocument);
   dec.decode(root, graph.getModel());
  };

  /**
   * Updates the properties panel //      
   */
  function selectionChanged(graph,cell)
  {
   var div = document.getElementById('properties');//      
   // Forces focusout in IE //IE         
   graph.container.focus()
   // Clears the DIV the non-DOM way
   div.innerHTML = ''; //  DIV  DOM
   // Gets the selection cell
   if (cell == null)
   {
    mxUtils.writeln(div, '        '); //     CELL ，          
   }
   else
   {
    var attrs = cell.value.attributes;
    var center = document.createElement('center');
    mxUtils.writeln(center, attrs[0].nodeValue);
    div.appendChild(center);//            DIV    
    mxUtils.br(div);
    var form = new mxForm(); // USER          FORM 
    for (var i = 0; i < attrs.length; i++)
    {
     form.addText(attrs[i].nodeName + ':', attrs[i].nodeValue); //     
    } 
    div.appendChild(form.getTable()); //               DIV   vav
    mxUtils.br(div);
   }
  }
 </script>
</head>
<!-- Page passes the container for the graph to the grogram -->
<body onload="main(document.getElementById('graphContainer'))">
<table>
 <tr>
  <td>
   <div id="graphContainer"
    style="border: solid 1px black;overflow:hidden;width:321px;height:241px;">
   </div>
  </td>
  <td valign="top"><!--        ,        -->
   <div id="properties"
    style="border: solid 1px black; padding: 10px;">
   </div>
  </td>
 </tr>
</table>
</body>
</html>

 
Let’s Encrypt Challenge and acme.sh Issue Mode
폐쇄 구조 모듈 (기초 편) 사용 - Object - Oriented Javascript 의 3

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage