EditorGadget and Cursor

[Dirk Geppert]

How can you find out in the editor gadget in which line (position) the cursor is located?

If this is not possible, can you display line numbers in the EditorGadget?

Greetz Dirk

[Peter]

The EditorGadget is a simple TextArea. You could provide the TextArea with line numbers, but that would require quite a lot of effort.

How about CodeMirror or the Ace Editor?

viewtopic.php?f=12&t=144

[Dirk Geppert]

Thx Peter, I'll give it a try.
But how can I place the ACE Editor within a PanelGadget?

Code: Select all

  ; Shows using of several panels...
  If OpenWindow(0, 0, 0, 322, 220, "PanelGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    PanelGadget     (0, 8, 8, 306, 203)
      AddGadgetItem (0, -1, "Panel 1")
        PanelGadget (1, 5, 5, 290, 166)
          AddGadgetItem(1, -1, "Sub-Panel 1")
          AddGadgetItem(1, -1, "Sub-Panel 2")
          AddGadgetItem(1, -1, "Sub-Panel 3")
        CloseGadgetList()
      AddGadgetItem (0, -1,"Panel 2")
        ButtonGadget(2, 10, 15, 80, 24,"Button 1")
        ButtonGadget(3, 95, 15, 80, 24,"Button 2")
        
        AddGadgetItem(0, -1, "ACE EDitor")
        EditorGadget(4, 10, 10, 280, 140) ; <- The Ace Editor should be located here
    CloseGadgetList()
  EndIf

Many thanks in advance!

Dirk

[Peter]

But how can I place the ACE Editor within a PanelGadget?

Code: Select all

EnableExplicit

Procedure.s GetTestSource()
  
  Protected ReturnValue.s = ""
  
  ReturnValue + "function ValidFunction() {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "function InvalidFunction( {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  
  ProcedureReturn ReturnValue
  
EndProcedure

Procedure Main()
  
  ; Shows using of several panels...
  If OpenWindow(0, 0, 0, 322, 220, "PanelGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    
    PanelGadget     (0, 8, 8, 306, 203)
      
      AddGadgetItem (0, -1, "Panel 1")
      
      AddGadgetItem (0, -1, "Panel 2")
      
        ButtonGadget(2, 10, 15, 80, 24,"Button 1")
        ButtonGadget(3, 95, 15, 80, 24,"Button 2")
      
      AddGadgetItem(0, -1, "ACE EDitor")
      
        ContainerGadget(4, 10, 10, 280, 140) ; <- The Ace Editor should be located here
          
          Protected GID = GadgetID(4)
          
          Protected TestSource.s = GetTestSource()
          
          ! $(v_gid.div).attr("id", "ace")
          
          ! var editor = ace.edit("ace");
          ! editor.getSession().setMode("ace/mode/javascript");
          ! editor.getSession().setValue(v_testsource);
          ! editor.focus();
          
        CloseGadgetList()
      
    CloseGadgetList()
    
  EndIf
  
EndProcedure

Procedure Loading(url.s, status)
  
  If status<>#True
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug ""
    ProcedureReturn
  EndIf
  
  Main()
  
EndProcedure

LoadScript("//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js", @Loading())

Greetings ... Peter

[Dirk Geppert]

Thx a lot, Peter!

I need something like

Code: Select all

BindGadgetEvent(#ACE, @Change(), #PB_EventType_Change)

Seems I can do this with:

Code: Select all

! editor.getSession.on("change", function() { f_change()});

But it doesnt work.

What is the right way?

Code: Select all

EnableExplicit

Procedure.s GetTestSource()
 
  Protected ReturnValue.s = ""
 
  ReturnValue + "function ValidFunction() {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "function InvalidFunction( {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
 
  ProcedureReturn ReturnValue
 
EndProcedure

Procedure Change()
  Debug "Changed"
EndProcedure

Procedure Main()
 
  ; Shows using of several panels...
  If OpenWindow(0, 0, 0, 322, 220, "PanelGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
   
    PanelGadget     (0, 8, 8, 306, 203)
     
      AddGadgetItem (0, -1, "Panel 1")
     
      AddGadgetItem (0, -1, "Panel 2")
     
        ButtonGadget(2, 10, 15, 80, 24,"Button 1")
        ButtonGadget(3, 95, 15, 80, 24,"Button 2")
     
      AddGadgetItem(0, -1, "ACE EDitor")
     
        ContainerGadget(4, 10, 10, 280, 140) ; <- The Ace Editor should be located here
         
          Protected GID = GadgetID(4)
         
          Protected TestSource.s = GetTestSource()
         
          ! $(v_gid.div).attr("id", "ace")
         
          ! var editor = ace.edit("ace");
          ! editor.getSession().setMode("ace/mode/javascript");
          ! editor.getSession().setValue(v_testsource);
          ! editor.setTheme("ace/theme/monokai");
          ! editor.focus();
          ! editor.getSession.on("change", function() { f_change()});
;          ! editor.getSession().on("changeAnnotation", f_change())
        CloseGadgetList()
     
    CloseGadgetList()
   
  EndIf
 
EndProcedure

Procedure Loading(url.s, status)
 
  If status<>#True
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug ""
    ProcedureReturn
  EndIf
 
  Main()
 
EndProcedure

LoadScript("//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js", @Loading())

[Peter]

Code: Select all

! editor.getSession.on("change", function() { f_change()});

Code: Select all

! editor.getSession().on("change", function() { f_change()});

[Dirk Geppert]

Ah I see Thx!