VERY simple tag editor component

[aehimself 418]

In one of my pet projects I recently needed a tag editor component. What I found was either paid or overly complicated so I decided to write my own:

 

 

It is a single-line, scrollable tag editor. No reordering, no edit box, nothing fancy; just shows the tags which are in the .SelectedTags property. You can remove tags by clicking on them (or removing them from the .SelectedTags...) in which case the OnTagRemoved event is fired.

The way new tags are added is up to you.

 

Feel free to use it and as usual: tips and advices to improve it is more than welcome.

 

https://github.com/aehimself/AEFramework/blob/master/AE.Comp.TagEditor.pas

Edited yesterday at 03:55 PM by aehimself

[Tommi Prami 159]

Would need some kind of antialiasing to the drawing, but still nice...

I bet many has need for somethign like that.

-tee-

[aehimself 418]

Yes, I am also kind of dissatisfied with the jagged lines. Unfortunately that is what Canvas seems to be able to do.

 

Invoking any GDI / Direct2D would drastically increase the footprint and code complexity though and I don't think it worths that much.

[shineworld 88]

You can think to use Image32 https://github.com/AngusJohnson/Image32 or Graphics32 to create antialiased things.

[uligerhardt 19]

FWIW, there's TTagEditor from Andreas Rejbrand.

[aehimself 418]

22 minutes ago, uligerhardt said:

FWIW, there's TTagEditor from Andreas Rejbrand.

The key here is "overly complicated". It contains way too many features for my needs, which just makes future maintenance harder if something goes wrong.

Plus I didn't like the rectangular tags :)

[uligerhardt 19]

17 minutes ago, aehimself said:

The key here is "overly complicated". It contains way too many features for my needs, which just makes future maintenance harder if something goes wrong.

Plus I didn't like the rectangular tags 🙂

I see. 😉

[Anders Melander 2115]

2 hours ago, Tommi Prami said:

Would need some kind of antialiasing to the drawing

- or one could create a single, nicely anti-aliased tag bitmap and use 9-patch to paint it.

With some additional logic, you can even have overlapping labels.

I made a demo of this some years ago but I can't find the source anywhere.

 

2 hours ago, aehimself said:

Invoking any GDI / Direct2D would drastically increase the footprint and code complexity though and I don't think it worths that much.

I assume you meant GDI+.

Using stuff that's bundled with Windows doesn't increase the footprint and the amount of code to wrap the API is negligible.

 

Edited 6 hours ago by Anders Melander

[shineworld 88]

Antialiased polyline is very simple to do with Image32 library:

 

uses
  Img32,
  Img32.Draw,
  Img32.Vector;

...

Procedure TTagComponent.Paint;
var
  W: Integer;
  H: Integer;
  Path: TPathD;
  Img: TImage32;
  PenWidth: Integer;
  PenColor: TColor32;
  BrushColor: TColor32;
  textrect: TRect;
  s: String;
const
  BORDER = 4;
  SPINER = BORDER + 8;
  TEXT_H_OFFSET = SPINER + 3;
  TEXT_V_OFFSET = BORDER + 3;
begin
  W := Self.ClientWidth;
  H := Self.ClientHeight;
  Img := TImage32.Create(W, H);
  try
    BrushColor := Color32(TStyleManager.ActiveStyle.GetStyleColor(scEdit));

    If _drawactive Then
    Begin
      PenColor := Color32(TStyleManager.ActiveStyle.GetStyleFontColor(sfWindowTextDisabled));
      PenWidth := 2;
    End
    Else
    Begin
      PenColor := Color32(TStyleManager.ActiveStyle.GetStyleColor(scBorder));
      PenWidth := 1;
    End;

    Img.Clear(BrushColor);

    Path := MakePath
    (
      [
        BORDER, BORDER,
        Self.ClientWidth - SPINER, BORDER,
        Self.ClientWidth - BORDER, Self.ClientHeight div 2,
        Self.ClientWidth - SPINER, Self.ClientHeight - BORDER,
        BORDER, Self.ClientHeight - BORDER,
        SPINER, Self.ClientHeight div 2
      ]
    );
    DrawPolygon(Img, Path, frEvenOdd, BrushColor);
    DrawLine(Img, Path, PenWidth, PenColor, esPolygon);

    Img.CopyToDc(Self.Canvas.Handle, 0, 0, False);

    textrect := TRect.Create(TEXT_H_OFFSET, TEXT_V_OFFSET, W - TEXT_H_OFFSET, H - TEXT_V_OFFSET);
    s := Trim(Self.Caption);

    Self.Canvas.Font.Assign(Self.Font);
    Self.Canvas.Font.Color := TStyleManager.ActiveStyle.GetStyleFontColor(sfWindowTextNormal);
    Self.Canvas.TextRect(textrect, s, [tfSingleLine, tfVerticalCenter, tfCenter, tfEndEllipsis]);

  finally
    Img.Free;
  end;
end;

 

sample.7z