PB TreeGadget ++

[RASHAD]

It maybe cross platform (Tested only with PB 6.xx x86 Windows 11 x64)

Edit mode :
- Return to accept
- Escape to cancel

Code: Select all

If OpenWindow(0, 0, 0, 400, 510, "TreeGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  TreeGadget(0, 10, 10, 380, 420,#PB_Tree_AlwaysShowSelection)
  For a = 0 To 10
    AddGadgetItem (0, -1, "Normal Item "+Str(a), 0, 0)
    AddGadgetItem (0, -1, "Node "+Str(a), 0, 0)
    AddGadgetItem(0, -1, "Sub-Item 1", 0, 1)
    AddGadgetItem(0, -1, "Sub-Item 2", 0, 1)
    AddGadgetItem(0, -1, "Sub-Item 3", 0, 2)
    AddGadgetItem(0, -1, "Sub-Item 4", 0, 2)
    AddGadgetItem (0, -1, "File "+Str(a), 0, 0)
  Next
  gy    = GadgetY(0)
  x     = GadgetX(0)+10
  ftrim = 3
  LoadFont(0,"Georgia",18)
  SetGadgetFont(0,FontID(0))
  StartDrawing(WindowOutput(0))
    DrawingFont(FontID(0))
    rowheight = TextHeight("Qj")+ftrim
  StopDrawing()
  
  StringGadget(1,0,0,0,0,"")
  SetGadgetFont(1,FontID(0))
  SetGadgetColor(1,#PB_Gadget_FrontColor,$0000FF)
  ButtonGadget(2,10,470,100,24,"Font Browser")
  ButtonGadget(3,110,470,100,24,"EDIT On/Off")  
  ButtonGadget(4,210,470,60,24,"FIX")
  
  AddKeyboardShortcut(0,#PB_Shortcut_Return,10)
  AddKeyboardShortcut(0,#PB_Shortcut_Escape,20)
  Repeat
    Select WaitWindowEvent()
        
      Case #PB_Event_CloseWindow
        Quit = 1
        
      Case #PB_Event_Menu
        Select EventMenu()
          Case 10
            If GetActiveGadget() = 1
              SetGadgetText(0,GetGadgetText(1))
            EndIf
            
          Case 20
            SetGadgetText(1,"")
            ResizeGadget(1,0,0,0,0)
            edit = 0
            
        EndSelect
        
      Case #PB_Event_Gadget
        Select EventGadget()
          Case 0
            Select EventType()
              Case #PB_EventType_LeftClick
                my = WindowMouseY(0)                
                iy = Int((my - gy)/rowheight)
                yy = iy*rowheight + gy
                sub = GetGadgetItemAttribute(0, GetGadgetState(0), #PB_Tree_SubLevel)+1
                If sub = 1
                  subp = 14
                Else
                  subp = 17
                EndIf
                xx = x+(sub*subp)
                If edit = 1 And GetGadgetState(0) <> oldgadgetstate
                  HideWindow(0,0)
                  text$ = GetGadgetItemText(0,GetGadgetState(0))
                  StartDrawing(WindowOutput(0))
                    DrawingFont(FontID(0))
                    w = TextWidth(text$)
                  StopDrawing()
                  ResizeGadget(1,xx,yy,w+16,rowheight)
                  SetGadgetText(1,GetGadgetText(0))
                  SetActiveGadget(1)
                  xx = 0: yy = 0
                  oldgadgetstate = GetGadgetState(0)
                EndIf             
            EndSelect            
           
          Case 2
            Result = FontRequester("Tahoma", 12, #PB_FontRequester_Effects )
            If Result
              fName$ = SelectedFontName()
              fSize = SelectedFontSize()
              fColor = SelectedFontColor()
              fStyle = SelectedFontStyle()
            EndIf
            LoadFont(0,fName$,fSize,fStyle)
            SetGadgetFont(0,FontID(0))
            StartDrawing(WindowOutput(0))
              DrawingFont(FontID(0))
              rowheight = TextHeight("Qj")+ftrim
            StopDrawing()
            SetGadgetFont(1,FontID(0))
            ResizeGadget(1,0,0,0,0)
            SetGadgetColor(0,#PB_Gadget_FrontColor,fColor)
            HideWindow(0,0)

          Case 3
            edit ! 1
            If edit = 0
              SetGadgetText(1,"")
              ResizeGadget(1,0,0,0,0)
            EndIf
            
          Case 4
            If ftrim = 2
              ftrim = 3
            ElseIf ftrim = 3
              ftrim = 2
            EndIf
            StartDrawing(WindowOutput(0))
              DrawingFont(FontID(0))
              rowheight = TextHeight("Qj")+ftrim
            StopDrawing()
            ResizeGadget(1,0,0,0,0)
            HideWindow(0,0)            
        
        EndSelect        
    EndSelect
  Until Quit = 1
EndIf

[BarryG]

Thanks, Rashad. But... a couple of bugs (sorry):

(1) Changing font styles doesn't always work (bold+oblique for Tahoma is one example).

(2) If I click an item and then edit it, and don't press Enter, then I can click blank spots in the tree in other areas and it makes the same initial selected item appear in different tree areas.

Here's a video to better demonstrate both of these:

[RASHAD]

Hi
Thanks BarryG for testing
Previous post Updated
The Font style is OK now
But I couldn't reproduce the second one
See if you remarked line 74 Make any difference

[BarryG]

Commenting out line 74 made no difference to the bug when clicking the other areas. The font issue is fixed, though.

[RASHAD]

I just noticed that you are clicking the blank area
Sorry
Previous post updated

[boddhi]

Thanks Rashad for this code.

Me too, I noticed too bugs running it under PB 6.00 x64 / Win10 x64 :
• the stringgadget not disappear when I press Enter
• if I stay in the gadget item and press 'Edit Off' then press 'Edit On' and click the same item, the stringgadget not appear (Perhaps, change the 'oldgadgetstate' to negative value when pressing 'Edit On/Off' for Off mode ? )

[RASHAD]

Thanks boddhi for testing
New version

Code: Select all

If OpenWindow(0, 0, 0, 400, 500, "TreeGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  TreeGadget(0, 10, 10, 380, 420,#PB_Tree_AlwaysShowSelection)
  For a = 0 To 10
    AddGadgetItem (0, -1, "Normal Item "+Str(a), 0, 0)
    AddGadgetItem (0, -1, "Node "+Str(a), 0, 0)
    AddGadgetItem(0, -1, "Sub-Item 1", 0, 1)
    AddGadgetItem(0, -1, "Sub-Item 2", 0, 1)
    AddGadgetItem(0, -1, "Sub-Item 3", 0, 2)
    AddGadgetItem(0, -1, "Sub-Item 4", 0, 2)
    AddGadgetItem (0, -1, "File "+Str(a), 0, 0)
  Next
  gy    = GadgetY(0)
  x     = GadgetX(0)+20
  ftrim = 3
  LoadFont(0,"Georgia",18)
  SetGadgetFont(0,FontID(0))
  StartDrawing(WindowOutput(0))
    DrawingFont(FontID(0))
    rowheight = TextHeight("Qj")+ftrim
  StopDrawing()
  
  StringGadget(1,0,0,0,0,"")
  SetGadgetFont(1,FontID(0))
  SetGadgetColor(1,#PB_Gadget_FrontColor,$0000FF)
  ButtonGadget(2,10,470,100,24,"Font Browser")  
  ButtonGadget(4,110,470,60,24,"FIX")
  LoadFont(1,"Comic Sans MS",10)
  TextGadget(5,14,432,400,35,"Left DoubleClick to EDIT"+#CRLF$+"Return To Accept - Escape To Cancel")
  SetGadgetFont(5,FontID(1))
  SetGadgetColor(5,#PB_Gadget_FrontColor ,$0000FF)
  ButtonGadget(6,310,470,80,24,"EXIT")
  
  AddKeyboardShortcut(0,#PB_Shortcut_Return,10)
  AddKeyboardShortcut(0,#PB_Shortcut_Escape,20)
  Repeat
    Select WaitWindowEvent()
        
      Case #PB_Event_CloseWindow
        Quit = 1
        
      Case #PB_Event_Menu
        Select EventMenu()
          Case 10
            SetGadgetText(0,GetGadgetText(1))
            ResizeGadget(1,-250,0,0,0)
            SetActiveGadget(0)
            SetGadgetState(0,GetGadgetState(0))
            
          Case 20
            SetGadgetText(1,"")
            ResizeGadget(1,-250,0,0,0)
            SetActiveGadget(0)
            SetGadgetState(0,GetGadgetState(0))
            
        EndSelect
        
      Case #PB_Event_Gadget
        Select EventGadget()
          Case 0
            Select EventType()
              Case #PB_EventType_LeftClick
                SetGadgetText(1,"")
                ResizeGadget(1,-250,0,0,0)
                SetActiveGadget(0)                
                SetGadgetState(0,GetGadgetState(0))
                
              Case #PB_EventType_LeftDoubleClick
                my = WindowMouseY(0)
                mx = WindowMouseX(0)                
                iy = Int((my - gy)/rowheight)
                yy = iy*rowheight + gy
                sub = GetGadgetItemAttribute(0, GetGadgetState(0), #PB_Tree_SubLevel)+1
                If sub = 1
                  subp = 14
                Else
                  subp = 17
                EndIf
                xx = x+(sub*subp)
                If mx > xx And mx < (xx+200)
                  HideWindow(0,0)
                  text$ = GetGadgetItemText(0,GetGadgetState(0))
                  StartDrawing(WindowOutput(0))
                    DrawingFont(FontID(0))
                    w = TextWidth(text$)
                  StopDrawing()
                  ;ResizeGadget(1,xx,yy,w+16,rowheight)
                  ResizeGadget(1,xx-10,yy,250,rowheight)
                  SetGadgetText(1,GetGadgetText(0))
                  SetActiveGadget(1)
                  xx = 0: yy = 0
                EndIf 
            EndSelect            
           
          Case 2
            Result = FontRequester("Tahoma", 12, #PB_FontRequester_Effects )
            If Result
              fName$ = SelectedFontName()
              fSize = SelectedFontSize()
              fColor = SelectedFontColor()
              fStyle = SelectedFontStyle()
            EndIf
            LoadFont(0,fName$,fSize,fStyle)
            SetGadgetFont(0,FontID(0))
            StartDrawing(WindowOutput(0))
              DrawingFont(FontID(0))
              rowheight = TextHeight("Qj")+ftrim
            StopDrawing()
            SetGadgetFont(1,FontID(0))
            ResizeGadget(1,-250,0,0,0)
            SetGadgetColor(0,#PB_Gadget_FrontColor,fColor)
            HideWindow(0,0)
            
          Case 4
            If ftrim = 2
              ftrim = 3
            ElseIf ftrim = 3
              ftrim = 2
            EndIf
            StartDrawing(WindowOutput(0))
              DrawingFont(FontID(0))
              rowheight = TextHeight("Qj")+ftrim
            StopDrawing()
            ResizeGadget(1,-250,0,0,0)
            HideWindow(0,0)
            
          Case 6
            End            
        
        EndSelect        
    EndSelect
  Until Quit = 1
EndIf

[ZX80]

Good time, RASHAD.

Thanks for your code.
If I double click on the "plus" next to an element, it enters edit mode. That is, if I accidentally double-click fast enough (expand and collapse immediately). Is it possible to distinguish where the click happened on the node or on the text? It would be great!

[RASHAD]

Thanks ZX80 for testing
Previous post updated

[ZX80]

RASHAD, thanks for this improvement

If I may, I have one more question
Is it possible in any way to completely prevent the node from expanding when double-clicking on the text ?
That is, expand and collapse ONLY when you click on the '+' / '-' node.
Let's say that I didn't want to expand the node, but only edit its text.

Thank you in advance !

[RASHAD]

Double-clicking on the text and expand and collapse the node is the normal behavior of PB TreeGadget
Sorry

[ZX80]

RASHAD, okay.

Everything is fine. Don't need to apologizes. Thank you for what you have already done. Maybe someone will find something else, how to improve this gadget.
That is, someone will have more ideas or a different point of view.

Thank You !

[boddhi]

If I may,

Code: Select all

Select EventMenu()
  Case 10
    If GetActiveGadget()=1 ; Add this line
      SetGadgetText(0,GetGadgetText(1))
      ResizeGadget(1,-250,0,0,0)
      SetActiveGadget(0)
      SetGadgetState(0,GetGadgetState(0))
    EndIf ; Add this line

[ZX80]

Thanks, but apparently we need to ask Fred about it. The only right way.

RASHAD, I tested your code a little longer and found another artifact. Sorry, but this is actually true.
I don't pick on. On the contrary, I am interested in improving your code.

Okay... Get to the point...
When you turned on the edit mode - the text color is red, now if you move the cursor to the '+' or '-' node, the red text will turn black again. In fairness, it should be noted that the editing mode is still available. Only the visual effect changes.

P.S. It also returns the original node name, since the changes have not yet taken effect. The Enter key was not pressed. If we now continue to type from the keyboard, we will see the changes made earlier + the current character entered. The keyboard caret (cursor) also changes its position according to the number of previously entered characters. This is a bit confusing.

P.S.2. Try to enter edit mode and add 'Node 1' to the text, for example the following '123456' to get '123456Node 1'. Now hover your mouse over the node. You don't need to press anything, just move. You will see what I wrote above ('Node 1 |').

Thank You !

[ZX80]

RASHAD, I'm very sorry, but there is one more flaw

When I run your program, I see it as shown above by boddhi. That is, 'Node 3' is the last visible line. If immediately after starting the program, double-click on the line 'Node 3', then it will move down. This should not be. This does not take into account the state of the vertical scrollbar, which changes its position when the 'Node 3' node is expanded. Since all the content no longer fits on the screen. It is necessary to recalculate the coordinates of the line being edited if it is the last line and it has content.

I'm sorry to point out to you the need to work more on this gadget

P.S. RASHAD, I hope that I was able to convey to you the essence of the problem.
Yes... It's not that easy... and it takes a lot of work...

Thank You