I want to change a color of grid line but without selecting it. It means I cannot use onStyleRow event as it reacts only for 'selected', 'odd' or 'over' event.
Any ideas?
thx
I found an updateRowStyles(idxRow) function, but no idea how to use it (how to pass syles etc.) and not sure if it will solve my problem
You cant change your style this way:
var layout = [
{ field: 'denumire', name: 'Denumire', width: '200px', height: '25px', styles: "color:red;" },
{ field: 'valoare', name: 'Valoare', width: '252px', styles: "color:red;"}];
or use formatter in layout grid
var layout = [
{ field: 'denumire', name: 'Denumire', width: '200px', height: '25px', formatter: function (value, rowIndex) {
return "<div style='height:110px;text-overflow:ellipsis;color:red;'>"+value+"</div>"
} },
{ field: 'valoare', name: 'Valoare', width: '252px',
formatter: function (value, rowIndex) {
return "<div style='height:110px;text-overflow:ellipsis;color:red;'>"+value+"</div>"
}}];
Related
I tried to add a spritesheet to my Phaser game the same way I've done it a few times before, however this time it seems to not load the images correctly, causing it to display a black & green square instead and causing it to throw an error when trying to play an animation.
Can anyone tell what is causing this issue?
(Warning: Playing the Code here seems to freeze up your browser for a few seconds, alternatively view on JSFiddle: https://jsfiddle.net/cak3goru/4/ )
// Configs and Constants
const gameState = {
gameWidth: 800,
gameHeight: 800,
textStyle: {
fontFamily: "'Comic Sans MS'",
fill: "#fff",
align: "center",
boundsAlignH: "left",
boundsAlignV: "top"
},
mouseDown: false,
menu: {
options: [
"Feed", "Clean", "Play"
],
barColor: "0x123456",
items: [],
itemText: [],
itemColor: "0x654321",
}
};
function preload() {
// Clean Tools
this.load.atlas('clean', 'https://gaylie.neocities.org/game/assets/clean.png', 'https://gaylie.neocities.org/game/assets/clean.json');
}
function create () {
this.anims.create({
key: "shower_cursor",
framerate: 12,
frames: this.anims.generateFrameNumbers("clean", {
prefix: "showerhead_000",
start: 0,
end: 7}),
repeat: -1
});
gameState.shower_cursor = this.add.sprite(400,400,'shower_cursor');
console.log(gameState.shower_cursor.frame);
//gameState.shower_cursor.playAfterDelay('shower_cursor', 100);
//gameState.shower_cursor.alpha = 0;
}
var config = {
backgroundColor: "0xf0f0f0",
scale: {
width: gameState.gameWidth,
height: gameState.gameHeight,
autoCenter: Phaser.Scale.CENTER_BOTH
},
scene: {
preload, create
}
};
var game = new Phaser.Game(config);
<head>
<title>Pet Simulator</title>
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.min.js"></script>
</head>
<body style="height: 100%; width: 100%; margin: 0;">
</body>
The problem is, that you are using the wrong function, you should use this.anims.generateFrameNames, and not this.anims.generateFrameNumbers.
And set the correct key clean for the sprite.
the line should be:
gameState.shower_cursor = this.add.sprite(200, 100, 'clean');
because shower_cursor, is only the key of the animation, not the key of the sprite.
P.s.: the posted code doesn't run on jsfiddler or Stackoverflow due to CORS-Error, but if all assets are on the same server, it should not be a problem.
I can t change the position of tooltip in highcharts:
tooltip: {
positioner: function() {
return {
x: 20,
y: 20
};
}},
http://jsfiddle.net/e07s2oq6/
Doc:
https://api.highcharts.com/highstock/tooltip.positioner
I want to change the tooltip like this:
Here is an ugly solution that solves your problem.
I set the tool-tip positioner to the following:
tooltip: {
split: false,
positioner: function() {
return {
x: this.now.anchorX - this.label.width/2,
y: 20
};
}
},
Now it shows a tool-tip centered above the point that is being hovered.
Working example: http://jsfiddle.net/ewolden/e07s2oq6/3/
I have a use case where I would like to create a diagram with joint.js, where some elements could be linked normally, but some shouldn't accept to or from links at all.
Is there some certain function or property that would allow this?
use the magnet:false attribute e.g:
new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 300, height: 200 },
attrs: {
'.': { magnet: false }
}
});
I have a problem in Rappid/jointJS
I have in stencil.js 4 shapes(2 basic.Circle and 2 basic.Rect) with names START(basic.Circle), END(basic.Circle), Activity(basic.Rect) and Workitem( basic.Rect) and I want in my main.js from all my graph to get the basic shape with name(I mean with attrs text ) "Activity".
This is the Stencil description for "Activity" :
new joint.shapes.basic.Rect({ size: { width: 5, height: 3 },
attrs: {
rect: {
rx: 2, ry: 2, width: 50, height: 30,
fill: '#0000FF'
},
text: { text: 'Activity', fill: '#ffffff', 'font-size': 10,
stroke: '#000000', 'stroke-width': 0 }
}
}),
How wil I get it? The only way I can search in my graph so far is if a cell has type basic.Circle(use of get('type') === 'basic.Circle')). but with type Circle I have two items:Activity and Workitem.
Is it so difficult to search for the graph element with name : "Activity"?
Thank you in advance
You can obtain all the elements (except for links) from following method
var allElement = graph.getElements()
Next if you want to obtain elements with 'Activity' do as follows
var activityElements = [];
allElement.forEach(elem => {
var textVal = elem.attributes.attrs.text.text;
if(textVal !== undefined && textVal === 'Activity') {
activityElements.push(elem);
}
});
Now the activityElements array will contain all the elements you require.
I solved my problem by taking element data in JSON format:
_.each(this.graph.getElements(), function(element) {
if(element.attributes.attrs["text"]["text"] == "Activity"){
//alert("YEAHHHHHH");
}
});
you could use the api on element as well, element.attr('text') returns the text object from the shape: { text: 'Activity', fill: '#ffffff', 'font-size': 10,
stroke: '#000000', 'stroke-width': 0 }
You could also set an "id" attribute to your shape and use graph.getCell('id_name_goes_here'); which would be much simpler if you didn't mind adding an id field to each shape.
var el1 = new joint.shapes.custom.ElementLink({
position: { x: 80, y: 80 },
size: { width: 170, height: 100 },
attrs: {
rect: { fill: '#E67E22', stroke: '#D35400', 'stroke-width': 5 },
a: { 'xlink:href': 'http://jointjs.com', 'xlink:show': 'new', cursor: 'pointer' },
text: { text: 'Element as a link:\nhttp://jointjs.com', fill: 'white' }
}
});
I want a handler for anchor tag where I can call any event from my viewmodel
It depends what you want exactly. If you're using the joint.shapes.custom.ElementLink from this tutorial: http://jointjs.com/tutorial/hyperlinks, then this shape is defined so that it is totally wrapped in the <a> anchor tag and so clicking anywhere inside the element will follow the link. However, you can catch the click event and, for example, based on the target of the event or some other condition decide whether you want to follow the link or do other things:
paper.on('cell:pointerclick', function(cellView, evt, x, y) {
// evt.target contains the SVG subelement that was the target of the click
// cellView is the view for the joint.shapes.custom.ElementLink cell model
// cellView.model is the cell model
if (someCondition) {
// This is how you can prevent the default browser action which is
// following the <a> link.
evt.preventDefault();
}
})