JointJS:深:真实和翻译

时间:2016-05-12 08:46:21

标签: javascript jointjs

我尝试在论文中多次添加相同的元素。 然后我通过嵌入创建它然后我用深度克隆它:true。 我的问题是深刻的:真正改变一些属性(我不知道哪些属性),但我现在可以对其应用翻译。

这是我的代码,没有深刻的工作:真实,但没有。 (但克隆一个矩形而不是我的组合元素):

var width=400, height=1000;

var graph = new joint.dia.Graph; //define a graph
var paper = new joint.dia.Paper({ //define a paper
  el: $('#myholder'),
  width: width,
  height: height,
  gridSize: 1,
  model: graph, //include paper in my graph
  restrictTranslate: function(element) { //restriction of drag n drop to the vertical line (x never changes)
    return {
      x: element.model.attributes.position.x, //this represent the original x position of my element
      y: 0,
      width: 0,
      height: height
    };
  }
});

var rect1 = new joint.shapes.basic.Rect({ //create first rect (with input and output)
    position: { x: 100, y: 20 },
    size: { width: 90, height: 90 },
    attrs: {
        rect: { fill: '#2ECC71' }
    }
});

var add_block= new joint.shapes.basic.Circle({ //create add button
    position: { x: 170, y: 20 },
    size: { width: 20, height: 20 },
    attrs: {
        circle: { fill: '#2ECC71'},
        text:{text:'+', "font-size":20}
    }
});

rect1.embed(add_block);    

graph.addCell([rect1,add_block]);

var clones=rect1.clone({deep:true});
graph.addCells(clones);

var line = V('line', { x1: 250, y1: 10, x2: 250, y2: 500, stroke: '#ddd' });
V(paper.viewport).append(line);


//Create a new block and link between two blocks
//chek if click on + button
//if click on this button, create a new block and link between them

paper.on('cell:pointerclick', function(cellView, evt, x, y) { 
    var elementBelow = graph.get('cells').find(function(cell) {
        if (!cell.get('parent')) return false;//not interested in parent
        if (cell instanceof joint.dia.Link) return false; // Not interested in links.
        if (cell.getBBox().containsPoint(g.point(x, y))) {
            return true;
        }
        return false;
    });

    if(elementBelow) //if we start from a block, let's go!
    {
        rect=rect1.clone({deep:true});
        graph.addCell(rect);
        rect.translate(200, 0);
    }
});

0 个答案:

没有答案