• implement usable API that can stroke and fill figures correctly
• support setting color for one single segment

This is another preparation for text-rendering unit-tests.

Currently, the only way to create a PathGeometry is adding segments one by one, adding figures one by one.

ImGui shoud provide stateful APIs as a convenient alternative like the HTML's canvas 2D path APIs.

• regular TextBox
  

  • TextBoxes layouted vertically seems to shared a border, that's incorrect.
    fixed at 29d9c55
  • The left border of a TextBox isn't drawn.
    fixed at 29d9c55
    

• filtered TextBox
  

  • filtered textboxes's size is incorrect until any characher has been entered
    fixed at 10aad6f
    

GlyphLoader.Read is the critical algorithm to retrieve glyph contours from a Typography.OpenFont.Typeface, and should be carefully unit-tested.

Class Design

• Remove state from StyleRuleSet or create a new stateless rule set class as its base class.
• Use stateless rule sets to describe the style of a Primitive.
• Make Visual.RuleSet stateless, state should be maintained at the Node level.

(2019-09-08) Update:
The StyleRuleSet is now directly connected to node's State: when a node's State changes, its RuleSet's state will also change.

GUILayout.Label(new Color(1.0f, 0.0f, 1.0f, 1.0f), "Pink");
GUILayout.Label(new Color(1.0f, 1.0f, 0.0f, 1.0f), "Yellow");
GUILayout.LabelDisabled("Disabled");

Text color is not applied.

cause by commit 497aedc

Typography's glyph APIs are quite chaotic and hard to understand later. I'm at a loss when trying to understand old code dependent on Typography's glyph.

A better alternative is SixLabors/Fonts. The APIs is well-organized and very similar to DirectWrite.

This issue blocks #39.

ITexture objects should not be recreated each time when an ImagePrimitive is rendered into the ImageMesh by IPrimitiveRenderer.

For example,

class StyleName
{
    public static readonly StyleName HorizontalCellSpacing;
    int value;
    string name;//for debugging or serialization
}

Then use in code:

GUILayout.PushStyle(StyleName.HorizontalCellSpacing, 5);

Provide a horizonal layout instead of multiple stacked CollapsingHeaders.

ref:
https://github.com/Kinnara/ModernWpf

There is a dark triangle flaw at the left most region of the image.

The related code is here:

The rendering pipeline based on PathCommands should be modified as well.

ref:

• PathFigure
• PathSegment

ref:

• Skia: https://github.com/mono/SkiaSharp
• Cairo: https://github.com/zwcloud/CairoSharp
• Direct2D: https://docs.microsoft.com/en-us/windows/desktop/Direct2D/direct2d-portal
• CGPath/NSBezierPath:
  • https://developer.apple.com/documentation/coregraphics/cgpath
  • https://developer.apple.com/documentation/appkit/nsbezierpath
• Web Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

To update a primitive, especially a PathPrimitive, we need to re-create on and replace the original one. For example, a rectangle PathPrimitive, to change its size,

var original = node.Primitive;
//get top left point of the original rectangle
var x = ....;
var y = ....;
var rectPrimitive = new PathPrimitive();
rectPrimitive.PathRect(x, y, newSize);
node.Primitive = rectPrimitive;

We should be able to do this by introduce a new concrete primitive type RectPathPrimitive:

var primitive = node.Primitive as RectPathPrimitive;
primitive.Size = newSize;//this internally changes the path commands that construct this primitive

New Phase in Pipeline

Only update the geometrys when requested by by user input or animation.

Current:

1. Create geometrys on the fly for controls
2. Convert all geometrys to mesh, namely the vertex buffer, index buffer and draw commands, while walking through the render tree
3. Send vertex buffer, index buffer to GPU and draw as what the draw commands tell.

New:

1. Persist the shapes and text and updates them when requested by user input or animation on the fly. Initially, create the underlying geometry once.
2. Update underlying geometries(DrawingContent) only when shapes and text changed.
3. Convert all geometries(DrawingContent) to mesh, namely the vertex buffer, index buffer and draw commands, while walking through the render tree.
4. Send vertex buffer, index buffer to GPU and draw as what the draw commands tell.

DrawingContent: a concept from WPF, as a field of Visual, it holds all rendering shape data like rectangles, curves, line-sengment paths, geometries and so on. It will later be converted to Geometry or directly to Mesh for rendering in GPU.

UPDATE(2019-10-09): This won't be done since conditional updating conflicts with immediate mode.

The text mesh is not not removed from the MeshList when the associated text is changed, the removed text's TextMesh is still saved in window.MeshList.TextMeshes.

我最近也在寻找一个.net原生，支持多后端如vulkan的imgui.考虑替换掉vedrid图形库中imgui模块，想深入了解下此项目的roadmap.

Investigate emscripten.

The result of rendering testwindow:

The result of rendering text with space:

The generated expected image is incorrect:

• Clip every layout group: implemented clipping for layout group at 936ead0
• Clip TextMesh: implemented at d15f2df
• Fix: ClientArea clipping rect's range is larger than expected or didn't work for buttons and listboxes inside it. implemented at 50d6480

For example,

GUILayout.PushStyle(StylePropertyName.BorderTop, 10.0);
GUILayout.Button("Button1");
GUILayout.Button("Button2");
GUILayout.PopStyle();
GUILayout.Button("Button3");
GUILayout.Button("Button4");

First two buttons top border 10 is not considered when calculate layout:

Full image is displayed on those image buttons with partial UV.

GUILayout.Text("Some textured buttons:");
GUILayout.BeginHorizontal("HGroup~1");
for (int i = 0; i < 8; i++)
{
    GUILayout.PushID(i);
    if (GUILayout.ImageButton("images/trees.jpg", new Size(32, 32), new Point(32.0f * i / 256, 0), new Point(32.0f * (i + 1) / 256, 32.0f / 256)))
        pressed_count += 1;
    GUILayout.PopID();
}
GUILayout.EndHorizontal();

The render-tree based rendering system broke all existing controls; let's bring all of them back.

• Window 4eb3966
• Box 7ab5d86
• Button 4eb3966
• CollapsingHeader 0b31449
• ColorField 7cf5c6e
• HoverButton 5754c64
• Image f0019c8
• Label 4d547a7
• ListBox ebf834e
• PolygonButton 5951681
• ProgressBar 3c487b3
• RadioButton 2fd4953
• Selectable 472f8df
• Separator e607db7
• Slider ad38ac3
• Space abd5621
• TextBox 05b7bd3
• Toggle 29cda98
• TreeNode d737812
• Child Window c146b83

They are APIs that used to change controls style on the fly. They are once removed because the old style system, which is based on the static object GUIStyle.Basic, is not well considered.

See the history of deleted src/ImGui/GUILayout.Adjust.cs for more details.

Two aspect: path storage and rendering: PathPrimitive implements storage and BuiltinPrimitiveRenderer implements rendering.

• PathArc: draw an arc accurately
• PathQuadraticBezier: draw a quadratic bézier curve
• PathCubicBezier: draw a cubic bézier curve
• PathConic: draw a conical curve

ref:

• Skia: https://github.com/mono/SkiaSharp
• Cairo: https://github.com/zwcloud/CairoSharp
• Direct2D: https://docs.microsoft.com/en-us/windows/desktop/Direct2D/direct2d-portal
• CGPath/NSBezierPath:
  • https://developer.apple.com/documentation/coregraphics/cgpath
  • https://developer.apple.com/documentation/appkit/nsbezierpath
• Web Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

This is rendered by Win32OpenGLRenderer in 3cf93fc , but it is not pixel-perfect while the rectangles values (x, y, width and height) of the node are all integer.

TODO: add a minimal unit test for this.

caused by 497aedc

PathEllipseArc

Draw an ellipse arc from angle a to angle b:

void PathEllipseArc(double a, double b, double radiusX,  double radiusY);

references:

• CSS border-radius, border-top-left-radius
• WPF RectangleGeometry.RadiusX

Also, exploring if it is possible to implement in shader like #24.

ref:
http://csdgn.org/article/scrollbar

This unit test should throw InvalidOperationException, because a default-sized group is not allowed to have stretched-sized children.

Old APIs based on static object GUISkin should be re-considered:

• GUI.SetSkin
• GUI.SetDefaultSkin

concave polygon

One possible way is triangulation via a tessellator like LibTessDotNet, which had once been used by ImGui for font rendering.

DrawGlyphRun methods should be unified to a single one.

void DrawGlyphRun(Brush foregroundBrush, GlyphRun glyphRun);

Another overload void DrawGlyphRun(Brush foregroundBrush, GlyphRun glyphRun, Point origin, double maxTextWidth, double maxTextHeight);should be removed, and the text layout and hit-test algorithm should be extracted to a proper place.

By rendering a glyph to a texture, the glyph rendering approach can be verified clearly.

ideas:

1. ocornut/imgui#435 (comment)
2. https://stackoverflow.com/questions/215458/how-can-i-unit-test-a-gui

See Background above.

Window2 is active. But its border is not rendered on top of window1. Also the resize-grip of window1 is not covered by Window2's client area.

The rendered result becomes normal after moving the handle:

Make sure the implementation of box-model border about border-image-slice and border-image-width does not conflict with the CSS spec.

ref:

• https://teamtreehouse.com/community/borderimageslice-vs-borderimagewidth
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width

See glsl-circular-arc.

In this way, there is no need to simulate a arc with bezier curve(s) like WPF or tessellation like dear imgui.

Hello there! I recently found this repo. I wondered if is possible to implement this on Unity as a library. I am particularly interested in the text rendering system (came here from the Medium "Easy Scalable Text Rendering on the GPU" article).

These options should be applied to specific nodes on the window's render tree.

Current layout algorithm modifies a stretched entry to a fixed-sized one when the size of all children overflows:

This should be re-considered. The style (StyleRuleSet) of a node should never be modified by layouting depending on runtime conditions such as a overflow situation.

TextMesh.PrimReserve should have the same parameter order as Mesh.PrimReserve, but it doesn't. It will cause confusion when some uses both of them.

code to reproduce:

public void ShowTwoCollapsingHeader()
{
    Application.IsRunningInUnitTest = true;
    Application.Init();

    var form = new MainForm();
    bool open1 = false, open2 = false;
    form.OnGUIAction = () =>
    {
        if (GUILayout.CollapsingHeader("Header 1", ref open1))
        {
            GUILayout.Label("Item A");
            GUILayout.Label("Item B");
        }
        if (GUILayout.CollapsingHeader("Header 2", ref open2))
        {
            GUILayout.Label("Item C");
            GUILayout.Label("Item D");
        }
    };

    Application.Run(form);
}

result: