I would like to add a label to a link by doing a doubleclick on the link. So this is my attempt:
paper.on({
'cell:pointerdblclick': function(cellView, event, x, y){
if (cellView.model.isLink()) {
cellView.model.label(0, {
position: .5,
attrs: {
rect: { fill: 'white' },
text: { text: 'my label' }
}
});
}
},
});
The problem is, that by doing a doubleclick there is also a vertex beeing created at the same time. How can I prevent that?
Or what would be another simple way to let users add a label for a link?
As shown in the docs (http://jointjs.com/api#joint.dia.LinkView:addVertex) just add this part to joint.dia.Paper:
interactive: function(cellView) {
if (cellView.model instanceof joint.dia.Link) {
// Disable the default vertex add functionality on pointerdown.
return { vertexAdd: false };
}
return true;
}
Related
We are using Chart.js (version 2.6.0) for a bar chart in an Angular 5 application and the client wanted us to disable hover events for chart interactions(they only wanted the bar to change and the tooltips to show up when the user clicked on a bar).
in the bar chart options object, we have the following defined for the events property:
events: ["touchstart","touchmove","click"]
That disables hovering events over the bar chart. Now however, the client wants us to change the cursor to a pointer when the user hovers over one of the bars, so that they know they can click on it, which is a valid point. I've found several solutions here on SO, but I can't seem to find a way to do it without adding "mousemove" to the events property, which just enables hovering interactions on the entire chart.
What really confuses me is that options.hover has an event property called "onHover" that has a callback, but it fires when ANY of the defined events happens, including clicks.
http://www.chartjs.org/docs/latest/general/interactions/events.html
Is this even possible without re-enabling the hover interaction in general? Any help would be greatly appreciated.
With Chart.js 3.x:
onHover: (event, chartElement) => {
event.native.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}
With Chart.js 2.x:
onHover: (event, chartElement) => {
event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}
Based on #Luca Fagioli answer, in my case, I didn't want to disable the click events in my chart so i added:
events: ['mousemove', 'click'],
onHover: (event, chartElement) => {
event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}
now that you have a cursor on the chart you want the cursor in the legend too - if they are clickable - so in the legend settings toy hold add:
onHover: (event) => {
event.target.style.cursor = 'pointer';
}
For versions > 3.x
you find the target under native
options: {
plugins : {
legend: {
labels: {
onHover: function (e) {
e.native.target.style.cursor = 'pointer';
},
onLeave: function (e) {
e.native.target.style.cursor = 'default';
}
}
}
}
}
This is almost 5 years old question, using the version 3.x.x of ChartJS we just need to declare some event handlers like onHover, onClick and define the events handle by the tooltip like events: ['click'].
Here we have a working snippet:
const isArray = a => a instanceof Array
const isNull = a => a == null
const cursor = a => {
if (isNull(a)) return 'default'
if (!isArray(a)) return 'pointer'
if (isArray(a) && a.length > 0) return 'pointer'
return 'default'
}
const $canvas = document.getElementById('chart')
const onHover = (e, item) => {
$canvas.style.cursor = cursor(item)
}
const onLeave = () => {
$canvas.style.cursor = 'default'
}
const onClick = (event, items) => {
if (items.length === 0) return
console.log('onclick')
}
const lineChart = new Chart($canvas, {
type: 'bar',
data: {
labels: ['May', 'June', 'July'],
datasets: [{
data: [15, 25, 15],
label: "My Dataset1",
backgroundColor: "#00F",
fill: false
}, {
data: [35, 15, 25],
label: "My Dataset2",
backgroundColor: "#F00",
fill: false
}]
},
options: {
responsive: true,
onHover,
onClick,
plugins: {
tooltip: {
// Tooltip will only receive click events
events: ['click'],
},
legend: {
onHover,
onLeave,
},
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="chart" width="600" height="180"></canvas>
I have UML state diagram drawn using jointjs and the various states are connected through links. On hovering over the links, a cross symbol appears upon clicking which the link gets removed. I want to disable the cross symbol over the link.
You will need to create a custom link extending from joint.dia.link and use that link for your charts. Look into joint.core.js for more details and joint.shapes.uml.js
Step1. Create your custom uml link either by extending directly from joint.dia.link or by extending from the below
joint.shapes.uml.Generalization
joint.shapes.uml.Implementation
joint.shapes.uml.Aggregation
joint.shapes.uml.Composition
joint.shapes.uml.Association
joint.shapes.yourLink = joint.dia.Link.extend({
//to remove the cross that removes the link modify the toolMarkUp to not show anything as below and use your new link
toolMarkup: [
].join(''),
add the remaining attributes that you currently have for the link like source, target etc
})
sample code from my project
joint.shapes.deviceLink = joint.dia.Link.extend({
// i modified the vertexMarkup to not create vertexes.
vertexMarkup: [
'<g class="marker-vertex-group" transform="translate(<%= x %>, <%= y %>)">',
'<circle class="marker-vertex" idx="<%= idx %>" r="1" />',
'</g>'
].join(''),
defaults: joint.util.deepSupplement({
type: 'deviceLink',
connection: { name: 'orthogonal' },
attrs: {
'.connection': { stroke: '#fe854f', 'stroke-width': 3 },
sourcePort:{text:''},
targetPort:{text:''},
'.link-tools .tool-remove circle': { r: 8, fill:'#fff',position: 0.5 },
},
labels: [ { position: 0.5, attrs: { text: { text: '' } } } ]
}, joint.dia.Link.prototype.defaults),
});
joint.shapes.deviceLinkView = joint.dia.LinkView.extend({
mouseover: function (evt, x, y) {
//my custom mouseover function
},
mouseout: function (evt, x, y) {
// my custom mouseout function
});
I have an HighCharts line plot in which the user can click points using this code:
plotOptions: {
series: {
point: {
events: {
click: function(event) {
// some processing
}
...
I want to change the color of the selected point.
I know that I could write :
marker: {
states: {
select: {
fillColor: 'red',
...
But, in my case, I really need to do this inside click, How can I do it ?
You can always use the update function for that:
plotOptions:{
series:{
marker:{
states:{
select:{
lineColor:'red',
fillColor:'red'
}
}
},
point:
{
events:{
click: function(){
this.setState("select");
this.update({
marker:{
fillColor:'red',
lineColor:'red',
}
})
}
}
}
}
},
When this refers to the point the user clicked.
As you can see, I composed a custom "select" state with some custom properties, and applied this state when user clicks a point. I also used update in order to change the point marker attributes, so I make sure the point reserves the new attributes after the state is no longer active:
http://jsfiddle.net/gprevqdf/2/
DEMO: http://jsfiddle.net/uwh7Lgyo/
If possible, I'd like the hover to be applied by background-color, instead of highlighting each state individually. That means, hover effects entire group of blue states when hovered over a blue state, entire group of green states when hovered over a green state, etc.
It is possible.
First thing that came to my mind was setting the state of each series point to hover.
This could be easily achieved by using highcharts's mouseOver and mouseOut events:
plotOptions: {
map: {
allAreas: false,
joinBy: ['hc-a2', 'code'],
mapData: Highcharts.maps['countries/us/us-all']
},
series: {
states:{
normal: {
animation: false
}
},
point: {
events: {
mouseOver: function(){
var ser = this.series;
var data = ser.data;
$.each(data, function(){
this.setState("hover")
});
},
mouseOut: function(){
var ser = this.series;
var data = ser.data;
$.each(data, function(){
this.setState()
});
}
}
}
}
},
Note that these lines:
states:{
normal: {
animation: false
}
},
are there to prevent the "un-hovering" aniamtion highcharts automaticly applies.
Please take a look:
http://jsfiddle.net/uwh7Lgyo/6/
On the other hand, you can set your own hover color:
When setting the state to hover, highcharts will take the color defined for the series` hover state, for example:
series:{
.....
.....
states:{
hover:{
color: 'red'
}
}
}
The above will color the point in red when state "hover" is triggerd.
See in this example iv'e created: http://jsfiddle.net/uwh7Lgyo/5/
I would like to get the element that called the qtip popup. In the documentation here it lets you set the position. I want to set the position using a jquery selector like $(this).find('.icon'). The problem is that this isn't the element that called the qtip (I think it's window).
Does anyone know how I can get the handle that called it (like it would if I set target to false)?
Thanks.
In the qtip source code I found this:
if(config.position.target === false) config.position.target = $(this);
Here's the solution I came up with and it seems to work. There probably is a better way to do it if I modified the qtip script but I want to leave that alone.
$(".report-error").qtip(
{
content: 'test content',
position:
{
adjust:
{
screen: true
},
target: false, //it is changed in the 'beforeRender' part in api section. by leaving it as false here in the qtip it will set it as the position I need using $(this)
corner:
{
target: 'bottomMiddle',
tooltip: 'topRight'
}
},
show:
{
when:
{
event: 'click'
}
},
style:
{
name: 'cream',
tip:
{
corner: 'topRight'
},
padding: 0,
width: 400,
border:
{
radius: 5,
width: 0
}
},
hide:
{
when:
{
event: 'unfocus'
}
},
api:
{
beforeRender: function() { //get the position that qtip found with $(this) in it's script and change it using that as the start position
this.options.position.target = $(this.elements.target).find('.icon');
this.elements.target = this.options.position.target; //update this as well. I don't actually know what it's use is
}
}
});
It's working on the site now at http://wncba.co.uk/results/