JointJS creating links from magnet not working - javascript

I managed to create a diagram with elements, in port, and multiple out ports.
All the elements are connected using links from the in port to an out port.
When I try to play with the links I already have (loaded from JSON), it works properly.
For some reason when I try to create a new link by pressing the ports, it drags the element instead.
How can I make the ports create new links when I press on them?
joint.shapes.Question = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable">' +
'<g class=""><g class="inPorts" /><rect class="question-wrapper" /><rect class="question-title" /><rect class="options-body" /><g class="outPorts" /></g>' +
'<text class="question" /><g class="options" />' +
'</g>',
portMarkup: '<g class="port port-<%= port.type %> port-<%= port.id %>"><circle class="port-body" /><text class="port-label" /></g>',
optionMarkup: '<g class="option-wrapper"><text class="option"/></g>',
defaults: joint.util.deepSupplement({
type: 'Question',
minWidth: 200,
optionHeight: 25,
inPorts: [{"id": "in", "label": "IN"}],
attrs: {
'.': {
magnet: false
},
'.question-wrapper': {
width: 200,
height: 95,
fill: '#f2f2f2',
rx: 10,
ry: 10,
ref: '.paper'
},
'.question-title': {
height: 30,
fill: '#ffffff',
rx: 5,
ry: 5,
ref: '.question-wrapper',
'ref-x': 5,
'ref-y': 5,
'ref-width': -10
},
'.question': {
fill: '#000000',
'font-size': 14,
'y-alignment': 'middle',
'x-alignment': 'middle',
ref: '.question-title',
'ref-x': .5,
'ref-y': .5,
},
'.options-body': {
height: 50,
fill: '#ffffff',
rx: 5,
ry: 5,
ref: '.question-wrapper',
'ref-x': 5,
'ref-y': 40,
'ref-width': -10
},
'.options': {
ref: '.options-body',
'ref-x': 5,
'ref-y': 5
},
'.option-wrapper': {
ref: '.options'
},
'.option': {
fill: '#000000',
'font-size': 14
},
'.port-in': {
ref: '.question-wrapper',
'ref-y': 0,
'ref-x': .5,
magnet: true,
type: 'in'
},
'.port-in .port-body': {
r: 15,
fill: '#75caeb',
ref: '.port-in'
},
'.port-in .port-label': {
'font-size': 10,
fill: '#ffffff',
'x-alignment': 'middle',
'y-alignment': -10,
ref: '.port-in .port-body'
},
'.port-out': {
ref: '.question-wrapper',
magnet: true,
type: 'out'
},
'.port-out .port-body': {
r: 10,
ref: '.question-wrapper',
'ref-dy': 15,
'ref-x': .5,
fill: '#158cba',
'y-alignment': 'middle'
},
'.port-out .port-label': {
'text': 'R',
'font-size': 10,
'y-alignment': 'middle',
'x-alignment': 'middle',
fill: '#ffffff',
ref: '.port-out .port-body',
'ref-x': .5,
'ref-y': 15,
'pointer-events': 'none'
}
}
}, joint.shapes.basic.Generic.prototype.defaults),
initialize: function () {
this.attr('.question/text', this.get('question'), {silent: true});
this.onChangePosition();
this.onChangeOptions();
joint.shapes.basic.PortsModelInterface.initialize.apply(this, arguments);
},
onChangePosition: function () {
var timer;
var timer_interval = 500;
this.on('change:position', function (cellView, position) {
clearTimeout(timer);
timer = setTimeout(function () {
$.ajax({
url: routes.questionPosition.replace(':question', cellView.id),
data: position,
method: 'post',
headers: {'X-CSRF-TOKEN': $('[name="csrf_token"]').attr('content')}
});
}, timer_interval);
});
},
onChangeOptions: function () {
var options = this.get('options');
var size = this.get('size');
var optionHeight = this.get('optionHeight');
// First clean up the previously set attrs for the old options object.
// We mark every new attribute object with the `dynamic` flag set to `true`.
// This is how we recognize previously set attributes.
var attrs = this.get('attrs');
_.each(attrs, function (attrs, selector) {
if (attrs.dynamic) {
// Remove silently because we're going to update `attrs`
// later in this method anyway.
this.removeAttr(selector, {silent: true});
}
}, this);
// Collect new attrs for the new options.
var offsetY = 0;
var attrsUpdate = {};
_.each(options, function (option) {
var selector = '.option-' + option.id;
attrsUpdate[selector] = {transform: 'translate(0, ' + offsetY + ')', dynamic: true};
attrsUpdate[selector + ' .option'] = {text: option.text, dynamic: true};
offsetY += optionHeight;
}, this);
this.attr(attrsUpdate);
this.autoresize();
},
autoresize: function () {
var options = this.get('options') || [];
var gap = this.get('paddingBottom') || 15;
var height = options.length * this.get('optionHeight');
var wrapperHeight = height + this.attr('.question-title/height') + gap;
var width = joint.util.measureText(this.get('question'), {
fontSize: this.attr('.question/font-size')
}).width + (this.attr('.question-title/rx') * 6);
this.attr('.options-body/height', height);
this.resize(Math.max(this.get('minWidth'), width), wrapperHeight);
this.attr('.question-wrapper/width', width);
this.attr('.question-wrapper/height', wrapperHeight);
},
getPortAttrs: function (port, index, total, selector, type) {
var attrs = {};
var portSelector = selector + ' .port-' + type;
attrs[portSelector + ' .port-label'] = {text: port.label};
attrs[portSelector + ' .port-body'] = {
port: {
id: port.id,
type: type
}
};
if (selector === '.outPorts') {
attrs[portSelector] = {'ref-x': ((total / 2) * 30 * -1) + (index * 30) + 15};
}
return attrs;
}
}));
joint.shapes.QuestionView = joint.dia.ElementView.extend(_.extend({}, joint.shapes.basic.PortsViewInterface, {
initialize: function () {
joint.shapes.basic.PortsViewInterface.initialize.apply(this, arguments);
},
renderMarkup: function () {
joint.dia.ElementView.prototype.renderMarkup.apply(this, arguments);
// A holder for all the options.
this.$options = this.$('.options');
// Create an SVG element representing one option. This element will
// be cloned in order to create more options.
this.elOption = V(this.model.optionMarkup);
this.renderOptions();
},
renderOptions: function () {
this.$options.empty();
_.each(this.model.get('options'), function (option, index) {
var className = 'option-' + option.id;
var elOption = this.elOption.clone().addClass(className);
elOption.attr('option-id', option.id);
this.$options.append(elOption.node);
}, this);
// Apply `attrs` to the newly created SVG elements.
this.update();
}
}));

Related

How do i find the click event on indicator in radar chart?

My project uses echart to create radar chart and i have to find click event for indicators around radar chart.
It is implemented like this.
createradarchart() {
this.theme.getJsTheme()
.pipe(
takeWhile(() => this.alive),
delay(1),
)
.subscribe(config => {
this.options = {
name: 'KPI Radar',
grid: {
left: '5%',
right: '5%',
top: 0,
bottom: 0
},
// label: {
// distance: 5
// },
type: 'radar',
color: ['red', 'green', 'blue'],
legend: {
bottom: 5,
itemGap: 20,
data: ['Baseline', 'Threshold', 'Actual'],
textStyle: {
color: 'black',
fontSize: 10
}
},
radar: {
indicator: this.indicator,
nameGap: 5,
shape: 'circle',
radius: '43%',
name: {
textStyle: {
color: 'black',
fontSize: 10
}
}
},
tooltip: {
show: true,
textStyle: {fontSize:10},
trigger: 'item',
formatter: (params => {
return params['name']+'-'+params['value'][1];
})
},
series: this.seriesdata,
};
this.ctx = this.echartsIntance.getRenderedCanvas();
this.chart = new Chart(this.ctx,{type:'radar', options: this.options})
// this.ctx = canvas.getContext("2d");
});
}
where data and options are in format, with data being fetched from server:
seriesdata: any = {type: 'radar', data:[{name:'Baseline',value:[1,2,3,4,5]},{name:'Threshold',value:[1,2,3,4,5]},{name:'Actual',value:[1,2,3,4,5]}]};
indicator = [
{ name: 'DL User Thpt_Kbps[CDBH]', max: 100 },
{ name: 'ERAB SSR[CDBH]', max: 100 },
{ name: 'PS DCR %[CDBH]', max: 100 },
{ name: 'VoLTE CSSR', max: 100 },
{ name: 'VoLTE DCR[CBBH]', max: 100 }
];
options: EChartOption = {
name: 'KPI Radar',
grid: {
left: '2%',
right: '2%',
top: 0,
bottom: 0
},
// label:{
// distance: 5
// },
type: 'radar',
color: ['red', 'green', 'blue'],
legend: {
orient: 'vertical',
align: 'left',
right: 20,
data: ['Baseline', 'Threshold', 'Actual'],
textStyle: {
color: 'black',
fontSize: 10
}
},
radar: {
indicator: this.indicator,
nameGap: 5,
shape: 'circle',
radius:'60%',
},
tooltip: {
show: false,
// trigger: 'item',
// formatter: (params => {
// return params['name']+'-'+params['value'][1];
// })
}
};
This is where i want click event to be triggered, having the name of label which is clicked.
Approach i found to do this is this, but it didnt work, i debugged and found that scale.pointLabels is empty.
labelClicked(e:any){
var self = this;
var helpers = Chart.helpers;
var scale = self.chart.scale;
var opts = scale.options;
var tickOpts = opts.ticks;
// Position of click relative to canvas.
var mouseX = e.offsetX;
var mouseY = e.offsetY;
var labelPadding = 5; // number pixels to expand label bounding box by
// get the label render position
// calcs taken from drawPointLabels() in scale.radialLinear.js
var tickBackdropHeight = (tickOpts.display && opts.display) ?
helpers.valueOrDefault(tickOpts.fontSize, Chart.defaults.global.defaultFontSize)
+ 5: 0;
var outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
for (var i = 0; i < scale.pointLabels.length; i++) {
// Extra spacing for top value due to axis labels
var extra = (i === 0 ? tickBackdropHeight / 2 : 0);
var pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + 5);
// get label size info.
// TODO fix width=0 calc in Brave?
// https://github.com/brave/brave-browser/issues/1738
var plSize = scale._pointLabelSizes[i];
// get label textAlign info
var angleRadians = scale.getIndexAngle(i);
var angle = helpers.toDegrees(angleRadians);
var textAlign = 'right';
if (angle == 0 || angle == 180) {
textAlign = 'center';
} else if (angle < 180) {
textAlign = 'left';
}
// get label vertical offset info
// also from drawPointLabels() calcs
var verticalTextOffset = 0;
if (angle === 90 || angle === 270) {
verticalTextOffset = plSize.h / 2;
} else if (angle > 270 || angle < 90) {
verticalTextOffset = plSize.h;
}
// Calculate bounding box based on textAlign
var labelTop = pointLabelPosition.y - verticalTextOffset - labelPadding;
var labelHeight = 2*labelPadding + plSize.h;
var labelBottom = labelTop + labelHeight;
var labelWidth = plSize.w + 2*labelPadding;
var labelLeft;
switch (textAlign) {
case 'center':
labelLeft = pointLabelPosition.x - labelWidth/2;
break;
case 'left':
labelLeft = pointLabelPosition.x - labelPadding;
break;
case 'right':
labelLeft = pointLabelPosition.x - labelWidth + labelPadding;
break;
default:
console.log('ERROR: unknown textAlign '+textAlign);
}
var labelRight = labelLeft + labelWidth;
// Render a rectangle for testing purposes
self.ctx.save();
self.ctx.strokeStyle = 'red';
self.ctx.lineWidth = 1;
self.ctx.strokeRect(labelLeft, labelTop, labelWidth, labelHeight);
self.ctx.restore();
// compare to the current click
if (mouseX >= labelLeft && mouseX <= labelRight && mouseY <= labelBottom && mouseY >= labelTop) {
alert(scale.pointLabels[i]+' clicked');
// Break loop to prevent multiple clicks, if they overlap we take the first one.
break;
}
}
}
Thanks in advance

Highcharts: Value will not be updated

i have the next problem with Highcharts. This is a new Highchart for an other site.
See here: https://imgur.com/a/VQQLU
The arrow show to -3 Megawatts but the value at the bottom shows another value. At the first pageload the values are identical, but there comes all 5 seconds new values. And they are not updated at the bottom.
Edit: The tolltip will be updated correctly.
My code:
$(function () {
$.getJSON('jsonlive.php', function(chartData) {
var ADatum; var Eheit; var AktL; var MinL; var MaxL; var chartValue; var i;
ADatum = chartData[0].AktDatum;
Eheit = chartData[0].Einheit;
AktL = chartData[0].AktuelleLeistung;
MinL = chartData[0].MinLeistung;
MaxL = chartData[0].MaxLeistung;
var tMin = (MinL*-1); var tMax = MaxL;
var ttt = new Array();
if (tMin < tMax) { chartValue = tMax; } else if (tMin > tMax) { chartValue = tMin; } // Ermitteln ob neg/pos Zahl die größere ist.
ttt[0] = (chartValue*-1); // Skala mit Zahlen beschriften
for (i = 1; i < chartValue; i++) { ttt[i] = (i*-1); }
var tz = ttt.length ;
for (i = 0; i < chartValue; i++) { ttt[(tz+i)] = i; }
ttt[ttt.length] = chartValue;
var gaugeOptions = {
chart:{ events: {
load: function () { setInterval(function () {
$.getJSON('jsonlive.php', function(chartData) {
ADatum = chartData[0].AktDatum;
AktL = chartData[0].AktuelleLeistung;
var point = $('#inhalt').highcharts().series[0].setData([AktL], true);
});}, 5000);}
}, type: 'gauge' },
title: null,
pane: {
center: ['50%', '85%'], size: '140%', startAngle: -90, endAngle: 90,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [[0, '#00fb00'],[1, '#003f00']]},
borderWidth: 2,
outerRadius: '109%',
innerRadius: '102%', shape: 'arc' }]
},
series: [{
data: [AktL],
dataLabels: { borderWidth: 0,align: 'center',x: 0,y: 110,
format: '<div style="text-align:center;font-size:24px;color:black">'+AktL+' ' +Eheit+'</span></div>'
}
}],
tooltip: {
formatter: function () { return 'Datum: <b>' + (new Date(ADatum).toLocaleString("de-DE", { timeZone: 'UTC' })) +
'</b> <br>Leistung <b>' + AktL + ' ' + Eheit + '</b>';}, enabled: true },
yAxis: {lineWidth: 10, minorTickInterval: null, tickPixelInterval: 100, tickWidth: 5, title: { y: -250 }, labels: { y: 2 }}
};
// Anzeige
$('#inhalt').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: (chartValue*-1),max: chartValue,tickPositions: ttt,tickColor: '#666',minorTickColor: '#666',
plotBands: [{ // optionaler Bereich, zeigt von 0-1 grün, 1 bis hälfte maximum gelb, und hälfte max bis max rot
from: 0, to: -1, color: '#55BF3B' }, { // green
from: -1, to: ((chartValue*-1)/2), color: '#DDDF0D' }, { // yellow
from: ((chartValue*-1)/2),to: (chartValue*-1),color: '#DF5353' }, { // red
from: 0,to: 1,color: '#55BF3B' }, { // green
from: 1,to: (chartValue/2),color: '#DDDF0D' }, { // yellow
from: (chartValue/2),to: chartValue,color: '#DF5353' }],// red
title: { style: { color: 'black', fontWeight: 'bold', fontSize: '24px' }, text: 'Leistung in '+Eheit },
labels: { formatter: function () { return this.value; }}},
credits: { enabled: false } // Link auf highcharts rechts unten an/aus
}));
});
});
</script>
The problem here is that you use a hard-coded value (AktL) in your dataLabels.format. In your example format is just a string that's used all the time.
Use {point.y} to have the label updated on every setData():
series: [{
data: [val],
dataLabels: {
// format: val // WONT WORK
format: '{point.y}'
}
}],
Live demo: http://jsfiddle.net/BlackLabel/v28q5n09/

Joint.js add custom ports with path class. for custom elements

What I am trying to do is make a element with custom class for ports and path so that I can add an element with custom path and my own markup for ports.This way when I create an element I will pass dynamic path for its shape just like elements of path class behave and as I have also extended from PortsModelInterface I will also have my own markup for ports.
This whole effort is to make svg scalable for zomming. Previously I was using html custom element with my custom ports which was working fine but html of custom elements wasn't scaling on zooming
var graph = new joint.dia.
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 800,
height: 600,
gridSize: 1,
model: graph,
snapLinks: true,
embeddingMode: true
});
joint.shapes.custom1={};
joint.shapes.custom1.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><rect class = "myrect"/></g><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port<%= id %>"><circle class="port-body"/></g>',
defaults: joint.util.deepSupplement({
type: 'html.Element',
size: { width: 200, height: 110 },
inPorts: [],
outPorts: [],
attrs: {
'.': { magnet: true},
rect: {
stroke: 'none', 'fill-opacity': 0, width: 300, height: 210,
},
circle: {
r: 6, //circle radius
magnet: true,
left:0,
stroke: 'gray'
},
'.inPorts circle': { fill: 'gray', magnet: 'passive', type: 'input', y: 0},
'.outPorts circle': { fill: 'gray', type: 'output' }
}
}, joint.shapes.basic.Generic.prototype.defaults),
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-x': (index + 1) * (0.55 / total)};
if (selector === '.outPorts') {
attrs[portSelector]['ref-dy'] = 15;
}
return attrs;
}
}));
joint.shapes.custom1.Atomic = joint.shapes.custom1.Element.extend({
markup: '<g class="rotatable"><g class="scalable"><path/></g><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.Path',
size: { width: 60, height: 60 },
attrs: {
'path': { fill: '#FFFFFF', stroke: 'black' },
'text': { 'font-size': 14, text: '', 'text-anchor': 'middle', 'ref-x': .5, 'ref-dy': 20, ref: 'path', 'y-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
var a2 = new joint.shapes.custom1.Atomic({
position: { x: 50, y: 260 },
size: { width: 100, height: 100 },
attrs: {
path: { d: 'M 30 0 L 60 30 30 60 0 30 z' },
text: {
text: 'Diamond',
'ref-y': .5 // basic.Path text is originally positioned under the element
}
},
inPorts: ['in'],
outPorts: ['out']
});
graph.addCells([a2])
The element is added in graph but some how the ports don't show up.
I don't have proper concept of adding classes so please any help will be greatly appreciated. Thanks.
Fiddle example
I suggest to define an element with custom markup for the shape and ports. Both markups should contain an SVG path, so you can set an arbitrary path data d via model.attr() on them.
joint.shapes.devs.GenericModel = joint.shapes.devs.Model.extend({
markup: '<g class="rotatable"><g class="scalable"><path class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port port<%= id %>"><path class="port-body"/><text class="port-label"/></g>',
defaults: joint.util.deepSupplement({
type: 'devs.GenericModel'
}, joint.shapes.devs.Model.prototype.defaults)
});
Tell the paper to use devs.ModelView for rendering.
joint.shapes.devs.GenericModelView = joint.shapes.devs.ModelView;
Now you can set or change d attribute for the shape and ports anytime you wish.
var model = new joint.shapes.devs.GenericModel({
attrs: {
'.body': { d: 'M 0 0 0 50 50 50 z'},
'.port-body': { d: 'M 0 0 10 0 10 10 0 10 z'}
}
});
model.attr('.body/d', 'M 25 0 50 50 0 50 z');
JS Fiddle: http://jsfiddle.net/kumilingus/kge023bc/

Create a circle object with port

I'm trying to create a circle with port, I'm implementing a workflow and I need to create a start circle and an end circle with port, but without success until now.
I can create the circle but without ports, the method getPortAttrs is called.
joint.shapes.devs.CircleModel = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><circle class="body"/> </g> <g class="inPorts"/> <g class="outPorts"/> </g>',
portMarkup: '<g class="port<%= id %>"> <circle class="port-body"/> <text class="port-label"/> </g>',
defaults: joint.util.deepSupplement({
type: 'devs.CircleModel',
size: { width: 20, height: 20 },
inPorts: [],
outPorts: [],
attrs: {
'.': { magnet: true },
'.body': {
transform: 'translate(10, 10)',
r: 10,
'stroke-width': 2,
stroke: 'green',
fill: 'green'
},
'.port-body': {
r: 5,
magnet: true,
stroke: 'black'
},
'.inPorts .port-label': { dy:-30, x: 4 },
'.outPorts .port-label':{ dy: 15, x: 4 }
}
}, joint.dia.Element.prototype.defaults),
getPortAttrs: function (portName, index, total, selector, type) {
var attrs = {};
var portClass = 'port' + index;
var portSelector = selector + '>.' + portClass;
var portTextSelector = portSelector + '>.port-label';
var portCircleSelector = portSelector + '>.port-body';
attrs[portTextSelector] = { text: portName };
attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type) , type: type } };
attrs[portSelector] = { ref: '.body', 'ref-x': (index + 0.5) * (1 / total) };
if (selector === '.outPorts') { attrs[portSelector]['ref-dy'] = 0; }
return attrs;
}
}));

Flowchart with jsPlumb

I'm trying to create a flowchart with jsPlumb. I have two elements and I want to connect them with a line. I want a line, but not a huge dot as I currently have. I've tried setting the radius of the dot everywhere I can, but it seems unaffected and remains at the default 20px. What am I doing wrong?
<div id="start">Start</div>
<div id="msgtype">Lorem ipsum dolor sit amet</div>
jsPlumb.importDefaults({
Endpoints : [ [ 'Dot', {radius:1} ], [ 'Dot', { radius:1 } ]]
});
var connectorPaintStyle = {
lineWidth:4,
fillStyle:'#333333',
joinstyle:'round',
outlineWidth:0,
radius: 1,
}
var eleStart = jsPlumb.addEndpoint('start', {
isSource:true,
isTarget:false
});
var eleMsgtypeTop = jsPlumb.addEndpoint('msgtype', {
isTarget:true,
parameters:{
endpoint:'dot',
radius: 1
},
anchor: 'TopCenter',
radius: 1,
connectorStyle:connectorPaintStyle
});
jsPlumb.connect({ source:eleStart,
target:eleMsgtypeTop,
connectorStyle:connectorPaintStyle,
endpoint:[ 'Dot', { radius:1, hoverClass:'myEndpointHover' }],
connectorStyle:connectorPaintStyle
});
Producing this:
JSFiddle Demo
Try this: http://jsfiddle.net/GT884/1/
;(function () {
window.jsPlumbDemo = {
init: function () {
jsPlumb.importDefaults({
DragOptions: {
cursor: "pointer",
zIndex: 2000
},
HoverClass: "connector-hover"
});
var connectorStrokeColor = "rgba(50, 50, 200, 1)",
connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
hoverPaintStyle = {
strokeStyle: "#7ec3d9"
};
var connection1 = jsPlumb.connect({
source: "start",
target: "msgtype",
connector: "Bezier",
cssClass: "c1",
endpoint: "Blank",
endpointClass: "c1Endpoint",
anchors: ["BottomCenter", [0.75, 0, 0, -1]],
paintStyle: {
lineWidth: 6,
strokeStyle: "#a7b04b",
outlineWidth: 1,
outlineColor: "#666"
},
endpointStyle: {
fillStyle: "#a7b04b"
},
hoverPaintStyle: hoverPaintStyle
});
// make all .window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"));
}
};
})();
jsPlumb.bind("ready", function () {
jsPlumb.init();
// chrome fix.
document.onselectstart = function () {
return false;
};
// render mode
var resetRenderMode = function (desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
$(".rmode").removeClass("selected");
$(".rmode[mode='" + newMode + "']").addClass("selected");
$(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
$(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
$(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());
//var disableList = (newMode === jsPlumb.VML) ? ",.rmode[mode='svg']" : ".rmode[mode='vml']";
// $(disableList).attr("disabled", true);
jsPlumbDemo.init();
};
$(".rmode").bind("click", function () {
var desiredMode = $(this).attr("mode");
if (jsPlumbDemo.reset) jsPlumbDemo.reset();
jsPlumb.reset();
resetRenderMode(desiredMode);
});
// explanation div is draggable
$("#explanation,.renderMode").draggable();
resetRenderMode(jsPlumb.SVG);
});
The full, final solution was:
;(function () {
window.plumbify = {
init: function () {
jsPlumb.importDefaults({
DragOptions: {
cursor: 'pointer',
zIndex: 2000
},
HoverClass: 'connector-hover'
});
var connectorStrokeColor = 'rgba(50, 50, 200, 1)',
connectorHighlightStrokeColor = 'rgba(180, 180, 200, 1)',
paintStyle = {
lineWidth: 3,
strokeStyle: '#a7b04b',
outlineWidth: 1,
outlineColor: '#666'
},
hoverPaintStyle = {
strokeStyle: '#7ec3d9'
};
var connection1 = jsPlumb.connect({
source: 'start',
target: 'msgtype',
connector: 'Bezier',
cssClass: 'c1',
endpoint: 'Blank',
anchors: [[0.25, 1, 0, 0.5], [0.75, 0, 0, -0.5]],
paintStyle: paintStyle,
endpointStyle: {
fillStyle: '#a7b04b'
},
overlays:[
[ 'Arrow', { width:20, length:30, location:0.5, paintStyle: paintStyle } ],
],
hoverPaintStyle: hoverPaintStyle
});
// make all .window divs draggable
jsPlumb.draggable(jsPlumb.getSelector('.window'));
}
};
})();
jsPlumb.bind('ready', function () {
jsPlumb.init();
// chrome fix.
document.onselectstart = function () {
return false;
};
// render mode
var resetRenderMode = function (desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
plumbify.init();
};
resetRenderMode(jsPlumb.SVG);
});
Resulting in:
jsPlumb.addEndpoint(element.id,{
...
paintStyle:{radius:1};
});

Categories