I am using the Grid component of react-virtualized, which expects column count and column width as required props. Right now, I am explicitly calculating the screen widths on resizing, and am calculation column width and column count.
My code is as follows:
let gridsNum = this.getColumnCount(this.state.width);
let colWidth = this.state.width / gridsNum;
<Grid
cellRenderer={this.cellRenderer}
columnCount={gridsNum}
columnWidth={colWidth}
height={window.innerHeight}
rowCount={this.state.messages.length}
rowHeight={310}
onScroll={this.onScroll}
width={window.innerWidth}
className="jobs-gridview"
/>
getColumnCount(width){
if(width > 1350){
return 4;
}else if(width > 1000){
return 3;
}else if(width > 650){
return 2;
}else{
return 1;
}
}
I also went through the earlier plunkr example regarding a similar issue: http://plnkr.co/edit/zjCwNeRZ7XtmFp1PDBsc?p=preview.
I apologize for the poor quality of code. Is there anything better I can do to improve Grids for responsiveness?
Thanks.
Related
I have a sencha chart with crosszooming and innerPadding like the one in the fiddle. The problem I'm experiencing is that it is not possible to pull the rectangle of the cross zoom completly down to the x-axis and to the right side of the chart. When I remove the innerPadding of the chart everything works fine.
https://fiddle.sencha.com/#fiddle/mh8
Is there a workaround for this problem?
I've forked your fiddle with a fix, here: https://fiddle.sencha.com/#fiddle/mih
NOTE: You question is tagged with Touch2.1 but your fiddle is in 2.4.1
When you define your innerPadding, the innerRegion for the chart is calculated based on your padding.
Excerpt from the source of CartesianChart
shrinkBox.left += innerPadding.left;
shrinkBox.top += innerPadding.top;
shrinkBox.right += innerPadding.right;
shrinkBox.bottom += innerPadding.bottom;
innerWidth = width - innerPadding.left - innerPadding.right;
innerHeight = height - innerPadding.top - innerPadding.bottom;
me.setInnerRegion([shrinkBox.left, shrinkBox.top, innerWidth, innerHeight]);
Now inside the onGesture (protected function) handler of CrossZoom, it actually checks the innerRegion of your chart and if your current x or y is greater than the width or height (you get this from the innerRegion of the chart) of the chart respectively, it's reset to the width/height of the chart (width and height is ). Thus, you are limited inside the padded area.
Is there a workaround for this problem?
You can work around this by overriding this behavior, but it's the expected behavior as far as Sencha is concerned.
Override onGesture function of CrossZoom so that it takes the padding offset into consideration.
//onGesture implementation in CrossZoom
onGesture: function (e) {
var me = this;
if (me.zoomAnimationInProgress) {
return;
}
if (me.getLocks()[me.getGesture()] === me) {
var chart = me.getChart(),
surface = me.getSurface(),
region = chart.getInnerRegion(),
chartWidth = region[2],
chartHeight = region[3],
xy = chart.element.getXY(),
x = e.pageX - xy[0] - region[0],
y = e.pageY - xy[1] - region[1];
if (x < 0) {
x = 0;
} else if (x > chartWidth) {
x = chartWidth; // this is where it limits you in the x-axis
}
if (y < 0) {
y = 0;
} else if (y > chartHeight) {
y = chartHeight; // this is where it limits you in the y-axis
}
me.selectionRect.setAttributes({
width: x - me.startX,
height: y - me.startY
});
if (Math.abs(me.startX - x) < 11 || Math.abs(me.startY - y) < 11) {
me.selectionRect.setAttributes({globalAlpha: 0.5});
} else {
me.selectionRect.setAttributes({globalAlpha: 1});
}
surface.renderFrame();
return false;
}
}
Refer the source code for more details and understanding.
FYI: You may again have a question that you cannot start drawing your CrossZoom overlay outside the padding region. Check onGestureStart, if you are asking that question.
I don't know if it is even possible, but maybe someone found a way to do this...
I have a tab control to which I allow the user to add tabs with a button click.
I want to show some icons on the tab so I added an ImageList, but I can show only one icon at a time, and I need to show at least 3 icons together.
I thought about having an image of 3 icons together, but the icons are shown after some actions the use do. For example: at first I show icon_1 and if the user clicks some where I add icon_2 etc...
Can someone come up with a way to do this ?
Thank you very much in advance...
No. It's not possible. Using the standard WinForms TabControl component you only can show one image at the same time.
The solution here, is using overlay icons. You have a base icon, and you add decorators. This is how Tortoise SVN, for example,
The following code builds an overlayed image in C#:
private static object mOverlayLock = new object();
public static Image GetOverlayedImage(Image baseImage, Image overlay)
{
Image im = null;
lock (mOverlayLock)
{
try
{
im = baseImage.Clone() as Image;
Graphics g = Graphics.FromImage(im);
g.DrawImage(overlay, 0, 0, im.Width, im.Height);
g.Dispose();
}
catch
{
// log your exception here
}
}
return im;
}
NOTE: The overlayed image must have the same size than the base image. It must have transparent color, and the decorator in the overlayed image must be placed in the right place, for example bottom-right or top-right.
I found this code:
private Bitmap CombineImages(params Image[] images)
{
int width = 0;
for (int i = 0; i < images.Length; i++)
width += images[i].Width + 3;
int height = 0;
for (int i = 0; i < images.Length; i++)
{
if (images[i].Height > height)
height = images[i].Height;
}
int nIndex = 0;
Bitmap fullImage = new Bitmap(width, height);
Graphics g = Graphics.FromImage(fullImage);
g.Clear(SystemColors.AppWorkspace);
foreach (Image img in images)
{
if (nIndex == 0)
{
g.DrawImage(img, new Point(0, 0));
nIndex++;
width = img.Width;
}
else
{
g.DrawImage(img, new Point(width, 0));
width += img.Width;
}
}
return fullImage;
//img3.Save(finalImage, System.Drawing.Imaging.ImageFormat.Jpeg);
//img3.Dispose();
//imageLocation.Image = Image.FromFile(finalImage);
}
from this link http://www.codeproject.com/Articles/502249/Combineplusseveralplusimagesplustoplusformplusaplu
It's been 2 hours of struggle against SL grid on WP7. I build my grid using the following code:
public void initUIBoard() {
int x, y;
Button b;
for (x = 0; x < mine.cRows; x++) {
RowDefinition rd = new RowDefinition();
rd.Height = new GridLength(20);
uiBoard.RowDefinitions.Add(rd);
}
for (y = 0; y < mine.cColumns; y++) {
ColumnDefinition cd = new ColumnDefinition();
cd.Width = new GridLength(20);
uiBoard.ColumnDefinitions.Add(cd);
}
for (x = 0; x < mine.cRows; x++)
for (y = 0; y < mine.cColumns; y++)
{
b = new Button();
b.Click += new RoutedEventHandler(this.caseClick);
b.Tag = mine.gameBoard[x][y];
Grid.SetRow(b, x);
Grid.SetColumn(b, y);
uiBoard.Children.Add(b);
}
}
The thing is, my grid is shown empty, am I doing something wrong with these Rows/Columns definition or something ?
Thanks in advance
After some experimentation, it looks like GridLength isn't calculating heights in pixels correctly.
Because the grid cell created isn't large enough the control is not shown.
Try increasing the sizes used for grid length. I did the following and got some output.
rd.Height = new GridLength(40);
Alternatively, consider setting the Heights and Widths to by dynamically sized. e.g.:
rd.Height = new GridLength(1, GridUnitType.Auto);
If you can investigate this height issue some more and also find it to be a height issue bug then please submit it to Microsoft.
Your code seems to work fine (I tried on Silverlight non-Winphone, but should be the same).
My guess is that the cause is somewhere else, for ex. another element covering the uiBoard grid, or the buttons being transparent with no background color/border.
I need to hide every second/third/forth item from the legend. IS there a way to achieve this in jFreeChart?
thanks!
I have tried the above suggestion but it didn't seem to work for me. If you just want to remove series from the legend you can do it with the setSeriesVisibleInLegend() method. My scenario was that some of my series do not have a legend key. If they don't have a legend key then the series shouldn't be visible in the legend. I implemented this with the following code:
for(int i = 0; i < seriesList.size(); i++){
if(seriesList.get(i).getKey() == null || seriesList.get(i).getKey().equals("")){
graph.getXYPlot().getRenderer().setSeriesVisibleInLegend(i, Boolean.FALSE);
}
}
The seriesList is a list of seriesData pojo's that I created that holds all of the graph data to create the graph. If the seriesData object's key value is null or = "" then the series will not be visible in the legend.
okay, just did it myself. This way I remove every second item from the legend.
please leave comments!
LegendItemCollection legendItemsOld = plot.getLegendItems();
final LegendItemCollection legendItemsNew = new LegendItemCollection();
for(int i = 0; i< legendItemsOld.getItemCount(); i++){
if(!(i%2 == 0)){
legendItemsNew.add(legendItemsOld.get(i));
}
}
LegendItemSource source = new LegendItemSource() {
LegendItemCollection lic = new LegendItemCollection();
{lic.addAll(legendItemsNew);}
public LegendItemCollection getLegendItems() {
return lic;
}
};
chart.addLegend(new LegendTitle(source));
I need to be able to zoom in and out of a Canvas using the mousewheel. I have successfully set up the mouse wheel handlers and am currently using a ScaleTransform to apply the zoom; however, the scaling is not done in an "intuitive" way.
I'm trying to accomplish the same style of "zooming" as you can see in MultiScaleImage, Google Maps/Earth, or Adobe Acrobat Reader--but NOT with an image, with a control. The transition doesn't need to be "smooth" or animated (unless it's an easier approach), but the functionality needs to be the same.
Any thoughts or ideas would be highly appreciated and thanks in advance!
Edit: I've managed to "smooth" the zoom using animation:
<Canvas.Resources>
<Storyboard x:Name="ZoomStoryboard">
<DoubleAnimation x:Name="ZoomAnimationX"
Storyboard.TargetName="Workspace"
Storyboard.TargetProperty="Canvas.RenderTransform.ScaleTransform.ScaleX"
Duration="0:0:0.2"/>
<DoubleAnimation x:Name="ZoomAnimationY"
Storyboard.TargetName="Workspace"
Storyboard.TargetProperty="Canvas.RenderTransform.ScaleTransform.ScaleY"
Duration="0:0:0.2"/>
</Storyboard>
</Canvas.Resources>
with the following code:
_Zoom += (args.Delta / 7);
if (_Zoom < 0.15)
_Zoom = 0.15;
ZoomAnimationX.To = _Zoom;
ZoomAnimationY.To = _Zoom;
ZoomStoryboard.Begin();
ZoomScale.Text = _Zoom.ToString("0.00") + "x";
_PreviousMousePosition = _CurrentMousePosition
However, the issue still arises that it is zooming out of the top-left corner, as opposed to sites like Google Maps where the zoom is "around" the mouse.
You need to use a weighted average as the zoom center based on the mouse position. In other words, keep the latest zoom center (or if you don't have one yet just set it to the current mouse position) and keep the number of times the zoom center was calculated (after the first zoom, that would be 1). Than each time you recalculate the zoom center, increment that var.
Example Code Follows - deltaZoom is how much you're zooming, centerX and centerY are the current zoom center, ZoomSteps is the number of times we've zoomed, and mouseX and mouseY are the current mouse position:
_Zoom += deltaZoom;
if (_Zoom <= 0)
_Zoom = 0.1;
if (deltaZoom >= 0)
{
if (_ZoomSteps == -1)
{
_CenterX = 0;
_CenterY = 0;
_ZoomSteps = 0;
}
else
{
_CenterX = (_CenterX * Math.Abs(_ZoomSteps) + mouseX) / (Math.Abs(_ZoomSteps + 1));
_CenterY = (_CenterY * Math.Abs(_ZoomSteps) + mouseY) / (Math.Abs(_ZoomSteps + 1));
_ZoomSteps++;
}
}
else
{
if (_ZoomSteps == 1)
{
_CenterX = 0;
_CenterY = 0;
_ZoomSteps = 0;
}
else
{
_CenterX = (_CenterX * Math.Abs(_ZoomSteps) - mouseX) / (Math.Abs(_ZoomSteps - 1));
_CenterY = (_CenterY * Math.Abs(_ZoomSteps) - mouseY) / (Math.Abs(_ZoomSteps - 1));
_ZoomSteps--;
}
}
ZoomAnimationX.To = _Zoom;
ZoomAnimationY.To = _Zoom;
CenterAnimationX.To = Math.Abs(_CenterX);
CenterAnimationY.To = Math.Abs(_CenterY);
ZoomStoryboard.Begin();
Edited so that you can drop below 1.0 zoom level but there are still some problems (ZoomStep = -1, 0 or 1 sometimes cause weird shakes).