I'm trying to put text on it, but some trailing letters wrap when there looks to be plenty of room on the current line.
child: RaisedButton(
child: Text("Order\nTruffles"),
Result is left justified, but wrapping too early. Everything normal in a wider button, but it just seems to be wasting space:
| Order |
| Truffle |
| s |
Any way to get farther out to the edge? Thanks.
Related
I'm trying to create a container which contains text that should automatically wrap. This works by wrapping a Expanded around my text. However, I want the container to take up as little width as possible (as wide as the text). As soon as I add Expanded to my container, the container will take up all the space.
Without Expanded, the width is good as long as the text width is smaller than the available width:
---------------------------
| Some text that won't wrap |
---------------------------
With Expanded, the text will wrap, but the container is unnecessarily wide.
--------------------------------------------------------------
| Some text that will wrap |
--------------------------------------------------------------
The Flexible widget takes only the needed space while the Expanded takes all available space.
So in your case. You should use a Flexible widget instead of the Expanded widget you have used.
My Question:
Is there a way to write an extension that changes what vscode displays without changing the underlying code? Vscode seems to have a ton of different types of extensions and I am having a hard time finding where to start.
The Context:
I want to try writing a vscode extension I have had an idea for for a while. (If it already exists, let me know.)
The "tab" character in ASCII is actually a "Horizontal Tabulation" key. It was originally meant for making tables in conjunction with "Vertical Tabulation." Your printer/terminal would have a column and row stop point that the HT and VT characters could advance to. It would be kinda cool to resurrect the original purpose of the tab key. In other words, code written like so:
On the disk:
#␉Comment␉Here␉for␉Columns␊
thing =␉"howdy",␉"doody",␉"mein froind",␉"!"␊
␉" I love",␉"what you've",␉"done with",␉"the place";␊
What's displayed (vertical line would be partly transparent):
# | Comment | Here | for | Columns
thing = | "howdy", | "doody", | "mein froind", | "!"
| " I love", | "what you've", | "done with", | "the place";
So, tabs could be aligned magically by looking at subsequent lines and attempting to align anything that follows a horizontal tab character. Tab would no longer represent a column of width 8 or 4, but be flexible and align with the previous and following lines of code.
This would mean you don't need to manually align anything. You could also have it so overflows of your max line length would auto-wrap and auto-align tabs. I would probably avoid using the vertical tab character, as most code interpreters might not be able to ignore it properly. Most should ignore the regular horizontal tab, though.
So, what type of extension would this be? How do I display code different from what it is on the disk? Thanks ahead of time.
I found a hack-ish way to do it. Not ideal, as rendering is choppy.
Create a decorator-type extension. When defining the decoration type, set the letter spacing (and opacity in the case of text) to basically make the content of the match invisible and space-less
const tabDecorationType = vscode.window.createTextEditorDecorationType({
letterSpacing: '-1em',
opacity: '0'
});
When setting the decorations later on, have your DecorationOptions object set the text before and after to essentially give your decoration the new text
const regEx = /\t/g;
const text = activeEditor.document.getText();
const tabs: vscode.DecorationOptions[] = [];
let match;
while (match = regEx.exec(text)) {
const startPos = activeEditor.document.positionAt(match.index);
const endPos = activeEditor.document.positionAt(match.index + 1);
const decoration: vscode.DecorationOptions = {
range: new vscode.Range(startPos, endPos),
renderOptions: {
after: {contentText: "| "},
before: {contentText: " "}, // <-- replace with correct number of spaces
}
};
tabs.push(decoration);
}
activeEditor.setDecorations(tabDecorationType, tabs);
And you essentially have replaced text. (It would take some more scanning to get the correct number of spaces for my desired implementation, but that's not really a part of the question.) This implementation is not super ideal, as it takes a second for the decorations to render and update. This makes code augmentations a little ugly when they are key to the formatting of the document.
Update Note: Descriptors seem to be picky with whitespace. They will remove all but one space before and after the descriptor and remove any new line characters. This means you have to put some character like '_' in and make the descriptor text invisible with 'color' to get a bunch of whitespace and you can't really get a newline... even more hack-ish and less ideal.
Is it possible to draw vertical lines in the editor that descend from the start of an indented statement, like in IntelliJ IDEA?
public...
| while...
| |
| | for...
| | |
Or if not natively, is there a plugin for this?
You cannot use vertical bars as indent marker character AFAIK, however, in Preferences > General > Editor > Text Editors, you can enable whitespaces markers, and tabs can be rendered as » , well aligned and so on, providing I believe a similar feeling than the | of intellij
I have a Table of Figures generated using PDFPTable like so.
--------------------------------------
|Caption|Figure Title | PP|
--------------------------------------
| fig 1 |title text | 2 |
--------------------------------|----|
| fig 2 | This is a longer title| |
| | text that wraps | 55 |
--------------------------------------
| fig N | another title | 89 |
--------------------------------------
I need to generate leader dots from the last line of text; it may have wrapped in the cell.
Here's a sample again showing the Figure 2 item of wrapped titled text and additionally having leader dots from the end of the text to the right side of the cell.
| fig 2 | This is a longer title| |
| | text that wraps.......| 55 |
This is what I want to achieve.
When I write the cell text I don't know where it will wrap and therefore I don't know what the last line of text will be for the purpose of measuring it, and if I do know about the last line of text I'm hard pressed to find the immediate x position following it.
So far, I've tried harnessing Cell Events and Table Events to write the leader dots after the fact. The two problems that have stopped me so far are:
I can't find the x position directly after the last line of wrapped text.
If I try the strategy of underlying dots beneath the entire last line of text (so I don't have to know where it stops in the x position. I do now the y position) the only canvas that allows the dots to appear is PdfPTable.TEXTCANVAS however it writes the leader dots on top of the existing text instead of beneath. I can give the text chunk a background color, so if some leader dots exist behind it they will not be visible (a poor man's crop).
I'm open to any strategy inside the context of the PDFPTable.
First things first: +1 for your question and the answer you provided yourself.
But...
Although your answer may work, there is a better way to achieve your goal. I've written a small sample called DottedLineLeader as an alternative that will be much easier to maintain. This example uses the DottedLineSeparator wrapped in a Chunk object.
Take a look at how such a chunk separator is used:
Chunk leader = new Chunk(new DottedLineSeparator());
Paragraph p;
p = new Paragraph("This is a longer title text that wraps");
p.add(leader);
When we add this Paragraph to a PdfPCell, we get the following effect:
The dots in the dotted line are not '.' characters. Instead it's an actual line (vector data) with a specific dash pattern. Using this approach instead of your own, will significantly reduce the number of lines in your code, use less CPU and result in cleaner PDFs.
Here's one solution that suffices the question requirements.
Each PdfPCell object has a .Column property that "Returns the list of composite elements of the column". Its property ColumnText.LastX returns "The X position after the last line that has been written". This is the position where we want the leader dots to start.
This work can be done in the PdfPTablEvent.TableLayout handler where all the cell positions are known.
class TofEvents : IPdfPTableEvent {
public void TableLayout(PdfPTable table, float[][] widths, float[] heights, int headerRows, int rowStart, PdfContentByte[] canvases)
{
// do the work here
}
}
Because we know where the last line of the text ends on the page, and where the right side the cell is, we can fill that space with dots.
General calculation for creating the proper number of dots for a particular cell is:
// You'll have to get references to things you need from the handler method args -
float ptXCellLeft = GetLeftSideOfCellFromIncomingWidthsArgument();
PdfPCell cell = GetCurrentCellFromIncomingCellsArgument();
// the math -
Font f = getTheFontToUse(); // for measuring the text size in this font
float leaderDotSymbolWidth = f.BaseFont.GetWidthPoint(".", f.Size);
float leaderDotsWidth = cell.Width - (cell.Column.LastX - ptXCellLeft);
string strLeaderDotsFillText = ".".Repeat(Convert.ToInt32(leaderDotsWidth / leaderDotSymbolWidth));
The resulting strLeaderDotsFillText should fit nicely into the last line's space.
I am having problems correctly aligning my content in DecoratorPanel in GWT.
Using the following code snippet, all the content appears to be vertically aligned to the middle (?)
DecoratorPanel decor = new DecoratorPanel();
decor.setHeight("100%");
decor.add(new Label("Test"));
Diagram to explain:
-------- --------
I get this: | | I want this: |test |
| | | |
|test | | |
| | | |
| | | |
-------- --------
I have tried decor.getElement().getStyle().setVerticalAlign(VerticalAlign.TOP);, but it does not seem to affect anything.
How do I align the content to the top of the panel?
Update:
I have notice that if I use a LayoutPanel instead of a DecorPanel everything seems to align properly.
Could the problem be that I am using regular Panels with LayoutPanels? If so, why am i having problems?
A DecoratorPanel uses a HTML table, while the other use a div. So with the DecoratorPanel you set the vertical style on the table element instead of the content, which explains what you see and a reason for not to use this panel. So you either should use a div based panel or set the alignment on the label or the td (which is label.getElement().getParent(), but that's a bit ugly and prone to future bugs).
Get the td element.
... . getElement().setStyleName("myStyle");
Then in your css
.myStyle td{
vAlign : centre;
}
DecoratorPanel is 9-box panel which is used to place images around, specially for rounded corner effect of widgets it mostly useful, there is a a cells around you widget when you set 100% it might be applying some width and height of all cells you are seeing the label in center.