0
JointJSを使用してカスタム要素を作成しました。今、要素のテキストを動的に変更したいと思います。私はそれを行うために、以下のコードを使用しています。そして、私はfirbugで検査するときにDOMに追加されたものを見ることができます。しかし、実際のテキストはブラウザに表示されません。私はinitialize（）メソッドでテキストを動的に追加しています。私はプロパティをフォーマットしようとしました。しかし、動作しませんでした。私を助けてください.. outputJointJS添付テキストが表示されない
joint.shapes.html = {};
joint.shapes.html.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="node-text"/><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port<%= id %>"><circle/></g>',
defaults: joint.util.deepSupplement({
type: 'html.Element',
size: { width: 200, height: 200 },
inPorts: [],
outPorts: [],
attrs: {
'.': { magnet: false },
rect: {
stroke: 'none', 'fill-opacity': 0, width: 150, height: 250,
},
circle: {
r: 6, //circle radius
magnet: true,
stroke: 'none'
},
'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' },
'.inPorts circle': { fill: '#B45F04', magnet: 'passive', type: 'input'},
'.outPorts circle': { fill: '#B45F04', type: 'output'},
// Ports styling.
'.option .port-body': { stroke: 'none', r: 5, fill: '#31d0c6' },
'.inPorts .port-body': { stroke: 'none', fill: 'none', r: 10 },
'.outPorts .port-body': { stroke: 'none', fill: 'none', r: 10 },
}
}, joint.shapes.basic.Generic.prototype.defaults),
initialize: function() {
// Appending the sample text here
VAR elemText = this.get（ 'サンプル'）;
this.attr('.node-text/text', elemText);
joint.shapes.basic.PortsModelInterface.initialize.apply(this, arguments);
},
getPortAttrs: function (portName, index, total, selector, type) {
var attrs = {};
var portClass = 'port' + index;
var portSelector = selector + '>.' + portClass;
var portCircleSelector = portSelector + '>circle';
attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type), type: type } };
attrs[portSelector] = { ref: 'rect', 'ref-y': (index + 0.7) * (1/total) };
if (selector === '.outPorts') { attrs[portSelector]['ref-dx'] = 13; }
return attrs;
}
}));
// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------
joint.shapes.html.ElementView = joint.dia.ElementView.extend(_.extend({}, joint.shapes.basic.PortsViewInterface, {
template: [
'<div class="html-element">',
'<button class="delete">x</button>',
'</div>'
].join(''),
initialize: function() {
_.bindAll(this, 'updateBox');
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
this.$box = $(_.template(this.template)());
this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); });
this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
// Update the box position whenever the underlying model changes.
this.model.on('change', this.updateBox, this);
// Remove the box when the model gets removed from the graph.
this.model.on('remove', this.removeBox, this);
},
render: function() {
joint.dia.ElementView.prototype.render.apply(this, arguments);
this.paper.$el.prepend(this.$box);
// this.paper.$el.mousemove(this.onMouseMove.bind(this)), this.paper.$el.mouseup(this.onMouseUp.bind(this));
this.updateBox();
return this;
},
renderPorts: function() {
var $inPorts = this.$('.inPorts').empty();
var $outPorts = this.$('.outPorts').empty();
var portTemplate = _.template(this.model.portMarkup);
_.each(_.filter(this.model.ports, function (p) { return p.type === 'in' }), function (port, index) {
$inPorts.append(V(portTemplate({ id: index, port: port })).node);
});
_.each(_.filter(this.model.ports, function (p) { return p.type === 'out' }), function (port, index) {
$outPorts.append(V(portTemplate({ id: index, port: port })).node);
});
},
update: function() {
this.renderPorts();
joint.dia.ElementView.prototype.update.apply(this, arguments);
},
updateBox: function() {
var bbox = this.model.getBBox();
this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
},
removeBox: function(evt) {
this.$box.remove();
}
}));
var arrowheadShape = 'M 10 0 L 0 5 L 10 10 z';
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 1500,
height: 700,
model: graph,
defaultLink: new joint.dia.Link({
smooth: true,
router: { name: 'manhattan' },
connector: { name: 'smooth' },
attrs: {
'.connection' : {
stroke: '#333333',
'stroke-width': 1
},
'.marker-target': {
d: arrowheadShape
}
}
}),
});
// Create JointJS elements and add them to the graph as usual.
// -----------------------------------------------------------
var el1 = new joint.shapes.html.Element({
position: { x: 600, y: 250 },
size: { width: 130, height: 30 },
inPorts: ['in'],
outPorts: ['out'],
sample: 'Sample'
});
graph.addCells([el1]);