7 Jul 2019

Move Entities of 2D Drawing

Follow @Xiaodong Liang


  • the code demo in this blog is NOT official methods. You would use at your own risk.

In the last blog, we introduced the way to get geometries of 2D curves by VertexBufferReader.enumGeomsForObject. A further question is asked frequently: how to move 2D entities? As mentioned in the last blog, it does not work if using the same workflow to manipulate 2D entities like 3D object. There is not either yet official method to transform 2D entities. We have logged the wish.


It is not easy unlike in 3D, while it is still possible to implement by ourselves with the clues of VertexBufferReader because the vertex values of the geometries is available. We could either try with

#1 hide the original geometries and create a new 2D vertex buffer at the new position.

#2 or modify the vertex buffer(s) in place to move the geometry for just the one object


For #1, we could simply reuse the code in the last blog, move the copied geometries, hide the original entities, but I have not figured out if it is a good idea to add copied geometries to the built-in vertex buffer. And it looks to me every time of moving will cause redundant data (hidden entities), unless we also take care of popping the original buffer .


For a line segment (on desktop machine) , there will be four vertices that make a quad which corresponds to the line segment. The code moves all of them.


Triangles are encoded in three vertices (like a simple mesh) instead of 4 like everything else. It might be possible some triangles are connected in the buffer. They share some vertices. So we need to ensure transform the vertices one time only.


Since VertexBufferReader tells the vertex buffer, it sounds more feasible with way #2. VertexBufferReader.enumGeomsForObject exposes the methods to get primitives of the geometries, unfortunately but they are cloned data from original vertex buffer. And it only tells the logic data, instead of full data that represents the geometry. In addition, RenderProxy.geometry.vb.buffer is the original data, but no method tells those vertices which belong to one entity (dbId).


So, I re-used the skeleton of VertexBufferReader.enumGeomsForObject. It iterates the buffer and filter out the start index of the vertices of specific entity (dbId). Next, some functions are created to transform the vertices. The code below is an extension to play with moving 2D entities. The live demo is at: 


After model is loaded, click key ‘S’, select one curve, a cross indicator will shown up. Move mouse, the curve will be moved accordingly. Click ‘ESC’, you can select another curve and move. Click ‘Q’, the moving will be disable.



  • the code demo in this blog is NOT official methods. You would use at your own risk.
  • The code does not demo how to rotate, while it would be similar to moving.
  • The code does not work if the entity has no fragments.
  • The code only tries with Line/Arc/Circle/Triangles.
  • The encoding of buffer is different depending on platform. The code demo is tested on desktop only.
//copy from VertexBufferReader.js
    VBB_GT_LINE_SEGMENT     = 1,
    VBB_GT_ARC_CIRCULAR     = 2,
    VBB_GT_TEX_QUAD         = 4,
    VBB_GT_ONE_TRIANGLE     = 5;

    var TAU = Math.PI * 2; 
//end copy

//copy some codes from VertexBufferReader.enumGeomsForObject

Autodesk.Viewing.Private.VertexBufferReader.prototype.transformObject = function(dbId,trans){

  if (this.useInstancing) {

  else {

      var i = 0;

      //check the continuous triangles, to avoid double translating the same vertex of triangle
      var ibArrayToMove =[];

      while (i < this.ib.length) {
          var vi = this.ib[i];
          var flag = this.getVertexFlagsAt(vi);

          //var vertexId    = (flag >>  0) & 0xff;        //  8 bit
          var geomType    = (flag >>  8) & 0xff;        //  8 bit
          //var linePattern = (flag >> 16) & 0xff;        //  8 bit
          var layerId     = this.getLayerIndexAt(vi);    // 16 bit
          var vpId        = this.getViewportIndexAt(vi); // 16 bit

          var visible = this.getDbIdAt(vi) === dbId; 

          if (geomType === VBB_GT_TRIANGLE_INDEXED) { 
              //Triangles are encoded in three vertices (like a simple mesh) instead of 4 like everything else 
              if (visible) {
                  //do not translate at this moment because we have not yet known if the next primitive is
                  //one more triangle

              //Advance to the next primitive
              i += 3;

          } else {

                //remove duplicated vertices 
                let unique_ibArrayToMove = [...new Set(ibArrayToMove)]; 
                //translate all vertices now
                this.transformTriangleIndexed(unique_ibArrayToMove, layerId, vpId, trans); 

                //reset the array for next continuous triangle
                //good way to clear an array? no memory leak?
                //see https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript

              if (visible) { 

                  switch (geomType) {
                      case VBB_GT_LINE_SEGMENT:   this.transformLine( vi, layerId, vpId,trans);break;
                      case VBB_GT_ARC_CIRCULAR:   this.transformCircleArc(  vi, layerId, vpId, trans); break;
                      case VBB_GT_ARC_ELLIPTICAL:    //TODO break;
                      //case VBB_GT_TEX_QUAD:            //TODO break;
                      //case VBB_GT_ONE_TRIANGLE:        //TODO break;
                      default:                         break;

              //Skip duplicate vertices (when not using instancing and the geometry is not a simple polytriangle,
              //each vertex is listed four times with a different vertexId flag
              i += 6;


      //update the source buffer of the vertex
      this.vb = this.vbf.buffer;  

//custom function: transform vertex of a line
//layer, vpId: reserved arguments
Autodesk.Viewing.Private.VertexBufferReader.prototype.transformLine = function(vindex, layer, vpId,trans){

  var baseOffset = this.stride * vindex;

  //For a line segment (on desktop machine) 
  //there will be four vertices that make a quad which corresponds to the line segment. 
  var i = 0;
    console.log('x:' + this.vbf[baseOffset + i*this.stride])
    console.log('y:' + this.vbf[baseOffset + i*this.stride + 1])
    this.vbf[baseOffset + i*this.stride] += trans.x;
    this.vbf[baseOffset + i*this.stride + 1] += trans.y;  

//custom function: transform vertex of a circle arc & circle 
//layer, vpId: reserved arguments 
Autodesk.Viewing.Private.VertexBufferReader.prototype.transformCircleArc = function(vindex, layer, vpId,trans){

  var baseOffset = this.stride * vindex;
  //arc or circle is also fit by line segments.
  // For a line segment (on desktop machine) 
  //there will be four vertices that make a quad which corresponds to the line segment. 
  var i = 0;
    this.vbf[baseOffset + i*this.stride] += trans.x;
    this.vbf[baseOffset + i*this.stride + 1] += trans.y; 

//custom function: transform vertex of triangles
//layer, vpId: reserved arguments 
Autodesk.Viewing.Private.VertexBufferReader.prototype.transformTriangleIndexed = 
    function(ibArray, layer, vpId, trans)
    var k = 0;
      var baseOffset = this.stride * ibArray[k]; 
      this.vbf[baseOffset] += trans.x;
      this.vbf[baseOffset + 1] += trans.y;   


function My2DMove(viewer, options) {

    Autodesk.Viewing.Extension.call(this, viewer, options)

    var _viewer = this.viewer
    var _container = _viewer.canvas.parentElement  

    var indicatorLines = null
    var indicatorLayerName = 'indicatorLayer'
    var indicatorLineBias = 0.2
    //is mouse moving
    var _dragging = false
    //selected object id
    var _selectDbId = 0
    //current point of when mouse is moving 
    var _mouseStPt = new THREE.Vector3(0,0,0); 
    //last mouse point
    var _mouseLastPt = new THREE.Vector3(0,0,0); 

    //when extension is loaded
    this.load = function() {
        console.log('My2DMove is loaded!'); 
        //bind keyup event
        $(document).bind('keydown', onKeyUp); 
        return true;

    //when extension is unloaded 
    this.unload = function() {
        console.log('My2DMove is now unloaded!');
        //unbind keyup event
        $(document).unbind('keyup', this.onKeyUp);
        return true;

    //when key up
    function onKeyUp(evt) {  
        console.log('onKeyUp:' + evt.keyCode); 
        //when key 'S' is pressed
        if(evt.keyCode == 83){  
           //start to monitor mouse down
          _viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelectObj) 
        //when key 'Q' is pressed
        if(evt.keyCode == 81){ 
          _viewer.removeEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelectObj) 

           //remove mouse events
          _viewer.impl.invalidate(false, false, true);  
          _dragging = false 
        return true;

      function onSelectObj(evt){ 
            _selectDbId = evt.dbIdArray[0]
            _container.addEventListener("mousemove", onMouseMove)

      function onMouseClick(evt) {  
          var pt_3d = _viewer.clientToWorld(evt.clientX,evt.clientY)
          _dragging = true

      function onMouseMove(evt) {   
          //get mouse points 
          var pt_3d = _viewer.clientToWorld(evt.clientX,evt.clientY)  

      function createIndicator(pt){

        var geometry = new THREE.Geometry () 
        geometry.vertices.push (new THREE.Vector3 ( pt.x-indicatorLineBias,  pt.y,  0))
        geometry.vertices.push (new THREE.Vector3 ( pt.x+indicatorLineBias, pt.y, 0))
        geometry.vertices.push (new THREE.Vector3 ( pt.x, pt.y-indicatorLineBias, 0))
        geometry.vertices.push (new THREE.Vector3 ( pt.x, pt.y+indicatorLineBias, 0)) 

        var linesMaterial = new THREE.LineBasicMaterial ({
                                color: new THREE.Color (0xFF0000),
                                transparent: true,
                                depthWrite: false,
                                depthTest: false,
                                linewidth: 3,
                                opacity: 1.0
        indicatorLines = new THREE.Line (geometry,

        _viewer.impl.createOverlayScene (indicatorLayerName, linesMaterial) 
        _viewer.impl.addOverlay (indicatorLayerName, indicatorLines) 
        _viewer.impl.invalidate (false,false,true) 

        _mouseLastPt.x = _mouseStPt.x = pt.x
        _mouseLastPt.y = _mouseStPt.y = pt.y  

    function moveIndicator(pt){

      if(indicatorLines != null){

        var diffX = pt.x - _mouseStPt.x
        var diffY = pt.y - _mouseStPt.y 
        indicatorLines.position.x = diffX
        indicatorLines.position.y = diffY

        _viewer.impl.invalidate(false, false, true)

        move2DEnt = move2DEnt(_selectDbId,{x:pt.x - _mouseLastPt.x,y:pt.y - _mouseLastPt.y })
        _mouseLastPt = pt 

      function move2DEnt(dbId,trans){
        var it = _viewer.model.getData().instanceTree;
        it.enumNodeFragments( dbId, function( fragId ) {
            var m = _viewer.impl.getRenderProxy(_viewer.model, fragId);
            var vbr = new Autodesk.Viewing.Private.VertexBufferReader(m.geometry, 
            m.geometry.vbNeedsUpdate = true;

My2DMove.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
My2DMove.prototype.varructor = My2DMove; 
Autodesk.Viewing.theExtensionManager.registerExtension('My2DMove', My2DMove);


Related Article

Posted By

Xiaodong Liang

Xiaodong Liang has been with Autodesk since 2007, focusing on providing programming support, consulting, training and evangelism to external developers. He started his career China and now lives in Beijing, China. Xiaodong is currently a developer consultant in the team Developer Technical Services (DevTech), the worldwide team of API gurus providing technical services through the Autodesk Developer Network. He...