When I use the cxtmenu extension for Cytoscape.cs, the context menu doesn't fire its event immediately after I select an option but only after I select another node. How can I have it fire the event immediately after selecting the option? My plan is to offer way finding similar to Google Maps, where a source node is already selected and the context menu on right click on a node offers "route to here".
I use jquery 3.1.0 (only because it is stated as a requirement for cxtmenu), cytoscape.js 2.75 and the newest cytoscape-cxtmenu.
See the minimal working example for the problem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script><!--2.7.5-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/cytoscape/cytoscape.js-cxtmenu/master/cytoscape-cxtmenu.js"></script>
</head>
<body>
<div id="cy" style="width:100%;height:100vh;"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements:
[
{data: {id: 'n1'}},
{data: {id: 'n2'}},
]
});
var added = false;
var defaults = {
menuRadius: 100, // the radius of the circular menu in pixels
selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
commands: [
{
content: 'test',
select: function(node)
{
if(!added)
{
console.log('adding edge');
cy.add({group:"edges", data: {id: 'e1', source: 'n1', target: 'n2'}});
added=true;
}
}
},
],
openMenuEvents: 'cxttap', // cytoscape events that will open the menu (space separated)
};
var cxtmenuApi = cy.cxtmenu(defaults);
var selectedNode;
cy.on('select',"node",function(event) {selectedNode = event.cyTarget;});
</script>
</body>
</html>
P.S.: I managed to get an event to fire directly by using openMenuEvents: 'cxttapstart taphold' but then the menu activates on releasing the mouse press that intitially activated the menu.
Related
I have been trying to solve this problem with ChartJS for a few days now, and I am completely stumped
My program shows the user a set of input elements they use to select data needing to be charted, plus a button that has an event to chart their data. The first chart works great. If they make a change to the data and click the button a second, third, or more time, all the data from the previous charts is plotted, PLUS their most recent selection.
It is behaving exactly like you might expect if the chart.destroy() object is not working, or perhaps would work if I created the chart object using a CONST (and could therefore add new data but not delete the beginning data).
I have tried all combinations of the browsers, chartjs and jquery libraries below:
Three different browsers:
• Chrome: Version 107.0.5304.121 (Official Build) (64-bit)
• Microsoft Edge: Version 107.0.1418.56 (Official build) (64-bit)
• Firefox: 107.0 64-bit
I have tried at least three different versions of Chart.js, including
• Versions 3.9.1
• 3.6.2
• 3.7.0
Jquery.js
• v3.6.1
• v1.11.1
Other things I have tried:
"use strict" (no luck)
In addition to destroying the chart object, removed the div containing the canvas, and appending it again.
using setTimeout() function before updating the chart after destroying it (because I thought maybe giving the destroy method more time might help)
type here
Software:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chart.js"></script>
<script type="text/javascript" src="js/dropdownLists.js"></script>
<script type="text/javascript" src="js/chartDataFunctions.js"></script>
<script type="text/javascript" src="js/chartJSFunctions.js"></script>
<body>
<div class = metadatasetup4" id = "buttons">
<button class="download" id="getchart" value="Get Chart">Chart</button>
<button class="download" id="downloadchart" value="Download">Download</button>
</div>
<div id = "bigchartdiv" class="bigchart">
<canvas id="myChart"></canvas>
</div>
</body>
<script>
$(window).on('load',function(){
//NOTE 1: In of my attempts to troubleshoot I tried strict mode (it didn't work)
//"use strict";
let data = {
labels: lbl,
datasets: [
]
};
let config = {
type: 'line',
data: data,
options: {
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min:0,
pointStyle:'circle',
},
y1: {
type: 'linear',
display: true,
position: 'right',
suggestedMax: 25,
min: 0,
pointStyle: 'cross',
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
},
}
}
};
// NOTE 2: The next line below, beginning with "var bigChartHTML =" was one of my later attempts to
// solve the problem. It didn't work, but my thought process was that if I removed
// the div containing the canvas, AND destroyed the chart object, that appending a "fresh"
// chart div to the body might be a work-around. This did not work.
var bigChartHTML = '<div id = "bigchartdiv" class="bigchart"><canvas id="myChart"></canvas></div>'
let ctx = document.getElementById('myChart').getContext('2d');
let bigChart = null;
// The getChartData() function below uses Ajax to populate various dropdown lists
// which enable the user to select the data is to be charted.
// There are no chartjs-related operations in getChartData()
getChartData();
$('#buttons').on('click','#getchart',function(){
if (bigChart!=null) {
//removeData(bigChart);
bigChart.destroy();
//bigChart = 1;
}
$("#bigchartdiv").empty(); //for this and next 2 lines, see NOTE 2 above
$("#bigchartdiv").remove();
$(bigChartHTML).insertAfter("#chartcontrols");
bigChart = new Chart(document.getElementById('myChart'),config);
//NOTE 3: I thought maybe bigChart.destroy() took time, so I tried
// using the setTimeout function to delay updating the chart
// (didn't work, but I left it in the code, anyway.)
setTimeout(function() {updateChart(bigChart)}, 2000);
//updateChart(bigChart);
});
// NOTE: The updateChart() function is actually included in "js/chartDataFunctions.js"
function updateChart(chart) {
/*
This section of the program reads the HTML elements then uses them
to make an Ajax request to sql server, and these become the
parameters for the newDataSet() function below.
*/
newDataset(chart,firstElement,newdataset,backgroundcolor,color);
}
// NOTE: The newDataSet() function is actually included in "js/chartJSFunctions.js"
// I show it here for brevity.
// It decides which axis (y or y1) to use to plot the datasets
// the dataset is pushed into the data, and chart.update() puts it in the chart object
function newDataset(chart,label,data,bgcolor='white',color='rgb(255,255,255)') {
var maxValue = Math.max(...data);
if (Number.isNaN(maxValue)) {
return;
}
if (maxValue == 0) {
return;
}
var axisID = 'y';
var ptStyle = 'circle';
//var pStyle = 'circle';
if (maxValue < 50) {
axisID = 'y1';
bgcolor = 'white';
//ptStyle = 'Star'
}
chart.data.datasets.push({
label:label,
yAxisID:axisID,
data:data,
borderColor:color,
backgroundColor:bgcolor,
//pointStyle:ptStyle
});
chart.update();
}
});
</script>
I found a work-around that solves my problem, but I still think this is a bug in ChartJS. Before calling bigChart.destroy(), I now do two things: First, reset the data object back to it's original value, and second, reset the config object back to it's original value, THEN call bigChart.destroy().
I think the destroy() method should handle that for me, but in my case, for whatever reason, it doesn't.
So, what I have is a work-around, not really a solution, but I'll take it.
In vis-timeline, if stacking is not enabled (default), there seems to be an enforced gap between two items on the same line, such that two items can never touch. It appears to me, that this gap is enforced to have always enough space for the remove button, which appears right to the item. However, this gap is always enforced, even if editable.remove is set to false in the options for vis.Timeline.
Is there a possibility to avoid having this gap, without having to enable stacking? (I do not want to have overlapping, except for a point in time.)
Here is an example (it's from the github page of vis-timeline, but simplified):
<!doctype html>
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="https://unpkg.com/vis-timeline#latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://unpkg.com/vis-timeline#latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#visualization {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-14T00:00:00', end: '2014-04-14T00:15:00'},
{id: 2, content: 'item 2', start: '2014-04-14T00:15:00', end: '2014-04-14T00:30:00'},
]);
// Configuration for the Timeline
var options = {editable: true};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
If You runs this snippet, you will see, that the two created items were moved to different lines.
If you try to move the to items to one line, you will discover, that this is only possible with a small gap between them. Notice, that this gap more or less as large as the remove button for the items. However disabling this button either by framework or by css doesn't change the behaviour.
You can adjust the horizontal item margin in vis-timeline using the margin.item.horizontal option described in the documentation at https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options. The default value is 10, setting it to 0 will allow the items to be placed side by side.
Example updated options object:
var options = {
editable: true,
margin : {
item: {
horizontal:0
}
}
};
Example updated snippet:
<!doctype html>
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="https://unpkg.com/vis-timeline#latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://unpkg.com/vis-timeline#latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#visualization {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-14T00:00:00', end: '2014-04-14T00:15:00'},
{id: 2, content: 'item 2', start: '2014-04-14T00:15:00', end: '2014-04-14T00:30:00'},
]);
// Configuration for the Timeline
var options = {
editable: true,
margin : {
item: {
horizontal:0
}
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
My application uses Jointjs.
I recently upgraded from Jointjs v0.9.7 to v0.9.10 and since I did that cell highlighting does not seem to work. I simplified everything down to a test app and I can see that the highlight() function is called but the highlighted class is not set.
I put a simplified test page into a gist and a fiddle. It is also reproduced below in case it helps.
Has there been a breaking change? How is highlighting supposed to work in v0.9.10?
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.core.css" />
</head>
<body>
<div id="paper" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.js"></script>
<script>
//there is a problem with jointjs in the latest version of Chrome. This fixes it
SVGElement.prototype.getTransformToElement =
SVGElement.prototype.getTransformToElement || function (toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
var highlighted = false;
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 400,
height: 400,
model: graph,
gridSize: 1,
interactive: false
});
paper.on('cell:pointerclick', function (cellView) {
if (highlighted) {
cellView.unhighlight();
} else {
cellView.highlight();
}
highlighted = !highlighted
});
var element = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
attrs: { text: { text: 'my shape' } },
size: { height: 92.7051, width: 150 }
});
graph.addCell(element);
</script>
</body>
</html>
The default highlighter has changed in JointJS v0.9.10. When you highlight an element - an SVGPathElement with the joint-highlight-stroke class name that mimics the element shape is appended directly to the ElementView. This solves differences across the browsers with CSS property outline mostly unsupported for SVG Elements.
Available highlighters resides in the joint.highlighters namespace (stroke default, opacity, addClass for backwards compatibility).
In order to restore the original behaviour, please use the following.
// a highlighter definition
var myHighlighter = {
name: 'addClass',
options: {
className: 'highlighted'
}
}
// add `myHighlighter` to an `el` (`null` for the entire cellView) DOM element.
cellView.highlight(el, myHighlighter);
// remove `myHighlighter` from an `el` DOM element.
cellView.unhighlight(el, myHighlighter);
Note that the new changes allow highlighting cellViews with multiple highlighters.
Demo
Sorry for inconveniences. The actual documentation for highlighters will appear in the JointJS repository ASAP.
I have worked with JointJS now for a while, managing to create elements with HTML in them.
However, I am stuck with another problem, is it possible to place HTML code, like
href, img etc, on a JointJS link and how do I do this?
For example, if I have this link, how do I modify it to contain HTML:
var link = new joint.dia.Link({
source: { id: sourceId },
target: { id: targetId },
attrs: {
'.connection': { 'stroke-width': 3, stroke: '#000000' }
}
});
Thank you!
JointJS doesn't have a direct support for HTML in links. However, it is possible to do with a little bit of JointJS trickery:
// Update position of our HTML whenever source/target or vertices of our link change:
link.on('change:source change:target change:vertices', function() { updateHTMLPosition(link, $html) });
// Update position of our HTML whenever a position of an element in the graph changes:
graph.on('change:position', function() { updateHTMLPosition(link, $html) });
var $html = $('<ul><li>one</li><li>two</li></ul>');
$html.css({ position: 'absolute' }).appendTo(paper.el);
// Function for updating position of our HTML list.
function updateHTMLPosition(link, $html) {
var linkView = paper.findViewByModel(link);
var connectionEl = linkView.$('.connection')[0];
var connectionLength = connectionEl.getTotalLength();
// Position our HTML to the middle of the link.
var position = connectionEl.getPointAtLength(connectionLength/2);
$html.css({ left: position.x, top: position.y });
}
Bit of an old question, but thought I'd add some more ideas. You can add extra svg markup to the label in a link if you like by extending the link object and then setting attributes where needed. For example:
joint.shapes.custom.Link = joint.dia.Link.extend({
labelMarkup: '<g class="label"><rect /><text /></g>'
});
This code overrides the markup for the label, so you can add extra elements in there. You can also update attributes on these elements by:
link.attr('text/text', "new text");
However hyperlinks won't work (at least I haven't got them working in Chrome) and I believe this is because Jointjs listens for all events in the model. So what you should do is use inbuilt events in Jointjs to listen for connection clicks:
paper.on('cell:pointerclick', function(cellView, evt, x, y){
console.log(cellView);
});
I'm having trouble with editable jqGrid's behavior when jqGrid becomes long. Clicking on non-editable cells and submitting edited cells brings the user to the top of the grid. Randomly clicking around would produce tons of unpredictable results. The element that gets focused is set to "top:-1000000px". What would be a good resoultion for this? Is there a way to override the focus event on this element?
<script type="text/javascript">
function populateTable(table) {
for(i = 0; i < 1000; i++) {
table.addRowData(i, {key:'Lorem', value:'Ipsum'});
}
}
$(document).ready(function() {
$("#grid").jqGrid({
datatype : "local",
colNames : ["Key", "Value"],
colModel: [
{name:'key', index:'lever', width:500, editable: true},
{name:'value', index:'defaultcpm', width: 100, editable: true},
],
height: 'auto',
cellEdit: true,
cellSubmit: 'clientArray'
});
populateTable($("#grid"));
});
</script>
</head>
<body>
<table id="grid"></table>
</html>
Edit: I suppose I was not specific enough. I do not want focus change after edits. The following code fixes it, but has side effects if any non-grid HTMLDivElement receives a focus event.
HTMLDivElement.prototype.focus = function() {}
If you want to set focus, the cells in colModel should be editable. Also try pasting this
$("#grid").jqGrid('editCell', 1, 1, true); in your code.
It will set focus on 1st row 1st column