I am a newbie in Cytoscape js, is there an example of how to filter down all edges that has an attribute lower than a certain threshold (using a slider)?
Thank you!
The code bellow shows how to filter edges by an attribute, in this example weight using a variable named threshold. The elements variable will have the filtered edges.
var elements = cy.filter('edges[weight > ' + threshold + ']')
The slider callback method could be used to trigger this function, resulting in a filter controlled by a slider.
If you wish to remove those elements from the graph, the restore function could be useful to return them back before filtering the graph again. An snippet of a possible callback method is given bellow:
var filteredEdges = [];
sliderCalback(threshold) {
// putting back the previously removed edges
cy.recover(filteredEdges);
// filtering edges
filteredEdges = cy.filter('edges[weight> ' + threshold + ']');
// Removing filteredEdges from graph
cy.remove(filteredEdges);
}
More details on Cytoscape.js filter method can be found here, and selectors can be found here.
Related
I have three columns, two with divs and the central one with an svg. I made a method that calculate the top() of each paragraph inside the divs to get the position and then draw an arrow in the svg. The problem is that when I use that method the first time I open my component, I get all zeroes, probably because the paragraph aren't really drawn (they have no coordinates) yet. I tried in mounted(), which should be the right place to do that. I use it also in updated() in case I reload my json with new data.
Am I missing something trivial?
The code I use to get the coordinates is like this:
drawLine(index1, index2) {
//var plist1 = this.$refs['p_list1'];
//var plist2 = this.$refs['p_list2'];
var plist1 = document.getElementsByClassName('p_list1');
var plist2 = document.getElementsByClassName('p_list2');
if (plist1.length == 0 && plist2.length == 0) return;
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'line');
//...
//const start = this.$refs['startpos'].getBoundingClientRect().top;
const start = document.getElementById('startpos').getBoundingClientRect().top;
const r1 = plist1[index1].getBoundingClientRect();
const r2 = plist2[index2].getBoundingClientRect();
index1 and index2 comes from a loop where I get which paragraph I have to connect with an arrow (also where the nextThick is)
Here is a simple example of the issue:
https://codesandbox.io/s/bootstrap-vue-test-bcozc
Note: it's badly shown, but if you press "DO" and then switch tab, you'll see that the arrow aren't correct. If you switch tab and then press DO, it will work.
Put your calculation methods in a $nextTick function to allow parents and children to fully render.
If that does not work, as a debug step, try using a setTimeout method to delay the calculation.
After understanding that the problem was linked to how tabs are built, I tried making that specific tab lazy and it worked.
<b-tab lazy ...
I don't know how tabs are normally built, but I suppose the dom is put together without having a real coordinate system and when it's made visible, I don't have any event to read to update the svg.
I'm essentially making a Stardew Valley clone, using tile sets and tile layers to draw the background of each room. I have a 'Parent Depth Object'. Each child of this object (NPC's, crops) has its depth sorted relative to the player object to appear in front or behind the player. This works fine.
I have 'ground items' (barrels, rocks etc.) drawn to a single tile layer in each room. I want the player to be able to appear behind or in front of these too. Is there any way I can make this whole layer act as if it was a single object so I can add it to my Parent Depth Object, or do I have to create a separate object for each ground item?
My 'depthSorter' object creates a Data Structure, adds each instance to it and loops through, sorting the depth of each relative to the player.
/// #description DSGridGetInst/Add/Sort/Loop
// get number of instances of parentDepthObject, save in variable instNum / resize grid
var instNum = instance_number(parentDepthObject);
var dGrid = dsDepthGrid;
ds_grid_resize(dGrid, 2, instNum);
// add instances to grid / have all of them run this code
var yy = 0; with(parentDepthObject)
{
dGrid[# 0, yy] = id;
dGrid[# 1, yy] = y;
yy += 1;
}
// sort the grid in ascending order (lowest y value at top)
ds_grid_sort(dGrid, 1, true);
// loop through the grid and draw all the instances
var inst; yy = 0; repeat(instNum)
{
// pull out an ID
inst = dGrid[# 0, yy];
// draw yourself
with(inst)
{
event_perform(ev_draw, 0);
}
yy += 1;
}
I'd personally recommend to use these items you want to get behind as objects, rather than tiles. Tiles can't contain a script themselves. So that gets more tricky to use them the way you want.
However, you don't need to create a new object for each 'ground item'.
Instead, you can make an object called 'ground item', and change the sprite / related code to that object.
For example, when selecting an object in a room, you can use 'Creation Code' to add code that's unique for that object. That way, you can change the sprites of the ground item to it's unique id.
Another example is to make an object that's a child of the parent 'ground object'. So each object has it's own sprite, but reuses the object from 'ground object'
There is a good tutorial on how to achieve this in Odoo-8 here:
Tutorial , but it doesn't work on Odoo-12.
Odoo natively allows you to set a field of your model as a basis for color differentiation in calendar view.
<calendar ... color="your_model_field">
The problem is that he will decide automagically what color to assign to every value.
I need to be able to decide what color mapping to use.
Doing some diving in the web module js files, more specifically on
web/static/src/js/views/calendar/calendar_renderer.js on line 266
I found a promising function which appears to be the one responsible for deciding which color to set.
getColor: function (key) {
if (!key) {
return;
}
if (this.color_map[key]) {
return this.color_map[key];
}
// check if the key is a css color
if (typeof key === 'string' && key.match(/^((#[A-F0-9]{3})|(#[A-F0-9]{6})|((hsl|rgb)a?\(\s*(?:(\s*\d{1,3}%?\s*),?){3}(\s*,[0-9.]{1,4})?\))|)$/i)) {
return this.color_map[key] = key;
}
var index = (((_.keys(this.color_map).length + 1) * 5) % 24) + 1;
this.color_map[key] = index;
return index;
},
This function is fed the value of your field (for every calendar event) and returns the color to be used "supposedly" as background for the calendar event square.
According to the second if statement, if you manage to instantiate the CalendarRenderer class with a color_map object which has the possible values of your field as keys and color codes as values you should be ok.
According the the third if statement, if the values of your field are strings with color codes (#FFF, rgb(x, y, z) , etc) they will be set in the color_map object and returned to be used as background colors.
The last part I guess is how odoo decides on a color when no mapping is provided.
I tried both approaches with the same efect:
Image displaying the calendar view
Namely, all the calendar events are rendered with the default color taken from the fullcalendar.css stylesheet (line 529), but the color reference displays correctly on the sidebar to the right.
I would appreciate any light shed on this matter, It has to be possible to make this work!.
Thanks.
I implemented drag and drop of images and now i want to constrain proportions of images while resizing.
/**
* Variable: constrainChildrenOnResize
*
* Specifies if children should be constrained according to the <constrainChildren>
* switch if cells are resized (including via <foldCells>). Default is false for
* backwards compatiblity.
*/
mxGraph.prototype.constrainChildrenOnResize = false;
i set this to true but its not working :s
What API/property i need for this functionality..
constrainChildrenOnResize is responsible for positioning and size of the children of resized cell. It means that children should keep their position relatively to the parent-cell.
In your case I would suggest to extend mxVertexHandler using union method. In this example you can see how to implement min-width/min-height restrictions. Using this example you are able to write your own rules for constrain.
Here is my simple solution:
var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function (bounds) {
var result = vertexHandlerUnion.apply(this, arguments);
var coff = bounds.width / bounds.height
result.width = result.height * coff;
return result;
};
So this function is called every time you move mouse during dragging the resizer.
bounds - object, always same and represent old geometry of the cell (before resizing)
result - object, represents new values, which are going to be applied. Between this line ad return statement you can place any code you need to modify result.
In my simple example I just get the initial relation between width and height of the cell (coff) and then set new width by multiplying coff and new height. It will work if you drag corner or top/bottom. In real project this logic should be slightly extended, or you should make visible only corner handlers.
By the way, this code will work for all resizable cells on your graph. If you want to apply it only to images or some other kind of cells - you can put condition and check the cell type before recalculating. You can get current cell or its state via this.state.cell or this.state inside of union function.
For example only for vertecies:
... ...
var result = vertexHandlerUnion.apply(this, arguments);
if (this.state.cell.isVertex()) {
//calculations here
}
return result;
I have a graph with nodes and edges and I want to display them.
Isn't there any function which, given this graph, displays it without me to give exact coordinates?
yes, you can use the auto layout
http://jgraph.github.io/mxgraph/docs/js-api/files/layout/mxCompactTreeLayout-js.html
this url construct a compact tree layout.
var layoutMgr = new mxLayoutManager(graph);
layoutMgr.getLayout = function(cell) {
return layout;
};