I am using Tabulator and the default "fitData" function to size the cells. This works exactly as intended when I a) Have a default font size set and b) change the row font size using the rowFormatter:
rowFormatter:function(row){
var rowData = row.getData();
row.getElement().style.fontSize = config.body_font_size + "px";
The above works, however, when I want to change the font size of the column titles:
var curHeaders = document.getElementsByClassName("tabulator-col");
for (var i = 0; i < curHeaders.length; i++) {
curHeaders[i].style.fontSize = fontSize.toString() + "px";
}
This changes all the column font sizes, but does not resize the column width appropriately. Is there a different class where I should assigning the font? Is there a way to apply this in a similar way to the rowFormatter?
You shouldn't try and programatically alter elements inside Tabulator from outside the table. Because Tabulator uses a virtual DOM these changes can be overwritten at any point without notice.
If you need to format column header titles you should use a titleFormatter in the column definition for the column you want to change:
//define custom formatter
var customFormatter = function(cell, formatterParams, onRendered){
//set font size
cell.getElement().style.fontSize = fontSize.toString() + "px";
return cell.getValue();
}
//in the column definition for a column
{title:"Name", field:"name", titleFormatter:customFormatter },
Full documentation on how to use formatters can be found here: http://tabulator.info/docs/4.0/format
If you need to keep using your approach then you can call the table redraw function to force the table to be rebuilt:
table.redraw(true);
Is there a reason you need to change it at run time rather than just making the changes in CSS?
Related
I am using Apache POI SXSSF to generate xlsx document. The document uses Times New Roman sizes 9 and 11, and the default cell width and height have been changed. The question is how to calculate the height of the merged cells so that all the text fits (the height of the cell must be dynamically set according to the given text)? The server running the application does not have a display, and this code is running in the IBM Integration Bus.
The solution from How to get the needed height of a multi line rich-text field (any font, any font size) having defined width using Java? is not suitable. The server running the application is missing a display and the string int ppi = java.awt.Toolkit.getDefaultToolkit().getScreenResolution(); returns an exception, and manually picking the ppi value is also not possible. If there is a display, everything works correctly.
And is there any way to use the "align center selection" function somehow?
I found that centering a selection gives a similar result as merging multiple cells horizontally, but I couldn't find an answer anywhere on how to use this in Apache POI. As a result, experimentally, I found out that in order to achieve this effect, you need to do the following things:
Create CellStyle; specify setWrapText(true) and setAlignment(HorizontalAlignment.CENTER_SELECTION) for it
Apply the style created in step 1 to all cells that need to be merged
Specify the value in the first cell
Code example:
Font font = wb.createFont(); // where wb - is SXSSFWorkbook object
font.setFontName("Times New Roman");
font.setFontHeightInPoints((short) 11);
CellStyle style = wb.createCellStyle();
style.setFont(font);
style.setWrapText(true);
style.setAlignment(HorizontalAlignment.CENTER_SELECTION);
for (int i = 0; i <= endCellNum - firstCellNum; i++){ // where endCellNum - number of last cell of selection and firstCellNum is number of first cell of selection
Cell cell = curRow.createCell(firstCellNum + i);
cell.setCellStyle(cs);
if (i == 0){
firstCell = cell;
}
}
firstCell.setCellValue(value);
I followed the approach to add a new image with the POI.
cell.getRow().setHeight(img.getHeightForExcel());
sheet.setColumnWidth(cell.getColumnIndex(), img.getWidthForExcel());
final int picID = workBook.addPicture(bytes, Workbook.PICTURE_TYPE_PNG);
/* Create the drawing container */
final XSSFDrawing drawing = (XSSFDrawing) sheet.createDrawingPatriarch();
// ========adding image START
final XSSFClientAnchor myAnchor = new XSSFClientAnchor();
myAnchor.setAnchorType(AnchorType.DONT_MOVE_AND_RESIZE);
/* Define top left corner, and we can resize picture suitable from there */
myAnchor.setCol1(cell.getColumnIndex()); // Column start
myAnchor.setRow1(rowNum - 1); // Row start
myAnchor.setCol2(cell.getColumnIndex() + 2); // Column end (covers two columns)
myAnchor.setRow2(rowNum); // Row end
/* Invoke createPicture and pass the anchor point and ID */
final XSSFPicture myPicture = drawing.createPicture(myAnchor, picID);
In principal this works quite well. I specify the width of the column at the beginning with the width of the image. (The height as well).
The major problem I'm facing is that as soon as I run autoadjust like
for (; i < max; i++) {
xlsWorkbook.getSheet().autoSizeColumn(i);
}
I get the problem that the first two columns are resized as well. But with this the width of the image is resized as well. Since the width might be quite long (or quite narrow) I don't want to affect the image size.
Is there a way to set the width of the image despite the column width?
If you don't want resizing the image when column widths are changing, then you cannot using that approach. This approach explicitly tells that the image shall be sized as the cell size it is anchored to. So if that cell size changes, the pictures size changes too.
You might think that ClientAnchor.AnchorType.DONT_MOVE_AND_RESIZE should protect the image from resizing. But this only is valuable when opened in Excel GUI. Apache poi does not respect ClientAnchor.AnchorType while auto sizing the columns. May be this will change in later versions. But in current version apache poi 5.0.0 it does not.
So to fulfill your requirement you set only a one cell anchor. That is only anchor.setCol1 and anchor.setRow1 as the upper left position of the picture. Then you need resizing the picture later to set the bottom right position. You must do that resizing after all column widths and row heights are set. So after auto sizing the columns. Else the resizing the columns will resizing the picture again.
Complete example:
import org.apache.poi.xssf.usermodel.*;
import org.apache.poi.ss.usermodel.*;
import org.apache.poi.util.IOUtils;
import java.io.InputStream;
import java.io.FileInputStream;
import java.io.FileOutputStream;
class ImageTest {
public static void main(String[] args) throws Exception {
Workbook wb = new XSSFWorkbook();
Sheet sheet = wb.createSheet("My Sample Excel");
//FileInputStream obtains input bytes from the image file
InputStream inputStream = new FileInputStream("./logo.png");
//Get the contents of an InputStream as a byte[].
byte[] bytes = IOUtils.toByteArray(inputStream);
//Adds a picture to the workbook
int pictureIdx = wb.addPicture(bytes, Workbook.PICTURE_TYPE_PNG);
//close the input stream
inputStream.close();
//Returns an object that handles instantiating concrete classes
CreationHelper helper = wb.getCreationHelper();
//Creates the top-level drawing patriarch.
Drawing drawing = sheet.createDrawingPatriarch();
//Create an anchor that is attached to the worksheet
ClientAnchor anchor = helper.createClientAnchor();
//Set anchor type; only valuable in Excel GUI
anchor.setAnchorType(ClientAnchor.AnchorType.MOVE_DONT_RESIZE);
//Create an anchor with upper left cell only
anchor.setCol1(1); //Column B
anchor.setRow1(2); //Row 3
//Create a picture
Picture pict = drawing.createPicture(anchor, pictureIdx);
//Reset the image to the original size
//pict.resize(); // don't do this before autosize column
//Create cell in column B to auto sizing that column
Cell cell = sheet.createRow(0).createCell(1);
cell.setCellValue("12345678901234567890");
sheet.autoSizeColumn(1);
//Reset the image to the original size
//pict.resize();
//Reset the image to half the original size
pict.resize(0.5);
//Write the Excel file
FileOutputStream fileOut = null;
fileOut = new FileOutputStream("./myFile.xlsx");
wb.write(fileOut);
fileOut.close();
}
}
I'm developing NativeScript JavaScript code to create dynamic text marker for maps. I have the code working that creates a marker for a specific string. My next step is to take any given string, determine its height and width in bits, and create the marker sized to contain the text.
My problem is finding the size of the text, given the text string itself, the font size, and the font family.
It looks like getMeasuredWidth could work, except that the string must already be loaded on a page before that function will return a value. In my case, I simply need to compute the size; the text won't otherwise appear as such on a page (the text in the marker becomes an image).
Is there a way to do this?
var bmp = BitmapFactory.create(200);
bmp.dispose(function (b) {
try {
b.drawRect(
"100,34", // size
'0,0', // upper-left coordinate
KnownColors.Black, // border color
KnownColors.Cornsilk // fill color
);
b.writeText(
"Parking",
"2,25",
{ color: KnownColors.Black, size: 8, name: 'fontawesome-webfont', });
...
In the code above, the width of "100" of the bounding rectangle actually represents the bit width of "Parking" with a small amount of padding. What I want to does calculate the rectangle's height and width and not hard-code it.
Try this, finding label size without adding it to Page upon button click
export function onFindButtonTap(args: EventData) {
const button = <any>args.object;
const label = new Label();
label.text = "Hello, found my size?"
label.fontSize = 20;
(<any>label)._setupAsRootView(button._context);
label.onLoaded();
label.measure(0, 0);
console.log(`Width : ${label.getMeasuredWidth()} x Height : ${label.getMeasuredHeight()}`);
}
Playground Sample
Note: I didn't get a chance to test it with iOS yet, let me know if you hit any issues.
I am using Extendscript for Photoshop CS5 to change the text of a text layer. Is there a way of checking whether the text fits e.g. by checking whether it overflows after changing the content?
I created a solution that works perfectly fine :). Maybe someone else can use it as well. Let me know if it works for you too!
function scaleTextToFitBox(textLayer) {
var fitInsideBoxDimensions = getLayerDimensions(textLayer);
while(fitInsideBoxDimensions.height < getRealTextLayerDimensions(textLayer).height) {
var fontSize = parseInt(textLayer.textItem.size);
textLayer.textItem.size = new UnitValue(fontSize * 0.95, "px");
}
}
function getRealTextLayerDimensions(textLayer) {
var textLayerCopy = textLayer.duplicate(activeDocument, ElementPlacement.INSIDE);
textLayerCopy.textItem.height = activeDocument.height;
textLayerCopy.rasterize(RasterizeType.TEXTCONTENTS);
var dimensions = getLayerDimensions(textLayerCopy);
textLayerCopy.remove();
return dimensions;
}
function getLayerDimensions(layer) {
return {
width: layer.bounds[2] - layer.bounds[0],
height: layer.bounds[3] - layer.bounds[1]
};
}
How to use / Explanation
Create a text layer that has a defined width and height.
You can change the text layers contents and then call scaleTextToFitBox(textLayer);
The function will change the text/font size until the text fits inside the box (so that no text is invisible)!
The script decreases the font size by 5% (* 0.95) each step until the texts fits inside the box. You can change the multiplier to achieve a more precise result or to increase performance.
I haven't found a way to do this directly. But I've used the following technique to determine the height I needed for a textbox (I wanted to keep the width constant) before.
expand the textbox's height well beyond what is needed to accommodate the text inside it.
duplicate the layer
rasterize the duplicate
measure the bounds of the rasterized layer.
adjust the bounds of the original text layer as needed
delete the rasterized duplicate
Totally roundabout - but it did work.
my goal is to display a Table through parsing an XML file.
I'm using a SAX Parser and the content has multirows and I want
the table width to fit to the display. Of course Y_AXIS scrolling would be ok.
Right now, I'm using the HTMLTableModel of src/com/sun/lwuit/html/ and it's corresponding HTMLTable. For this I declared it's methods public so I can access them. This works fine so far. This allows me to declare tables without knowing their size prematurely.
To allow multirows, I'm embedding TextAreas in the Cells.
Now the problem: The HTMLTable t needs t.setScrollableY(true), or else not all rows are shown.
This causes the table to be a bit to large in X direction, so the right border isn't shown.
Also the bottom border isn't shown all the time.
The container in which the table is embedded has BorderLayout.Y_AXIS.
Things I tried:
t.setPreferredW(mainContainer.getLayoutWidth()); This does reduce the size of the table, but then the table doesn't show all it's rows, like without t.setScrollableY(true).
t.setLayout(new BoxLayout(BoxLayout.Y_AXIS)) this causes an java/lang/ClassCastException.
Any ideas? Thanks in advance.
Excerpt from my code:
} else if (qName.equalsIgnoreCase("td")) {
if (sb.length() > 0) {
String sbt = new String(sb);
sb.delete(0, sb.length());
TextArea c = new TextArea(sbt);
c.setEditable(false);
c.getStyle().setFont(smallFont);
table.addCell(c, false, null);
}
} else if (qName.equalsIgnoreCase("tr")) {
debugPrint("Row closed.");
table.commitRow();
} else if (qName.equalsIgnoreCase("table")) {
HTMLTable t = new HTMLTable(table);
//without scrollable Y not all table rows are shown
t.setScrollableY(true);
//t.setPreferredW(screenWidth);
//this is verboten.
t.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
mainContainer.addComponent(t);
tableBool = false;
You can't change the layout of the table from table layout otherwise it will not be a table.
It should be possible to get the table to fill the width of a parent BoxLayout_Y by assigning width percentages to table columns up to 100% e.g. for a 3 column table return assign 33, 33 & 44.
This can be achieved by subclassing table and overriding the method:
protected TableLayout.Constraint createCellConstraint(Object value, int row, int column) {
TableLayout.Constraint c = super.createCellConstraint(value, row, column);
c.setWidthPercentage(whateverYouWant);
return c;
}