Small Basic : How to make a Shapes Editor

  • Article

In this article, we will learn how to make a Shapes Editor.

Designing the window

Let's first design the window. So type the following code.

GraphicsWindow.Show()
rectangle = Controls.AddButton("Add Rectangle",0,0)
ellipse = Controls.AddButton("Add Ellipse",0,50)

The output will be like this:

Code

So now we have designed the window. Now let's start the main part.
Raise one event for the buttons.

Controls.ButtonClicked = OnBC

 Create a Subroutine named "OnBC".

Sub OnBC
  If Controls.LastClickedButton = rectangle Then
    func = "rect"
    active = "T"
    If func =  "rect" Then
      GraphicsWindow.MouseDown = OnMDrect
    EndIf  
  Else
    func = "ell"
    active = "T"
    If func =  "ell" Then
      GraphicsWindow.MouseDown = OnMDell
    EndIf    
  EndIf  
EndSub  

Now we have raised an event for buttons. Now let's create subroutines for above code raise events.

This is for Rectangle.

Controls.SetSize() command in Small Basic can be used to set size (width and height) of any shape.

Sub OnMDrect
  rectx = GraphicsWindow.MouseX
  recty = GraphicsWindow.MouseY
  rect = Shapes.AddRectangle(0,0)
  Shapes.Move(rect,rectx,recty)
  If func =  "rect" Then
    GraphicsWindow.MouseMove = OnMMrect
    GraphicsWindow.MouseDown = OnMDrect2
  EndIf 
EndSub

Sub OnMMrect
  If func =  "rect" Then
    If active =  "T" Then
      width = Math.Abs(rectx-GraphicsWindow.MouseX)
      height = Math.Abs(recty-GraphicsWindow.MouseY)
      Controls.SetSize(rect,width,height)
    EndIf  
  EndIf  
EndSub  
Sub OnMDrect2
  func = ""
  active = ""
  height = 0
  width = 0
  rect = ""
EndSub  

This is for ellipse.

Sub OnMDell
  ellx = GraphicsWindow.MouseX
  elly = GraphicsWindow.MouseY
  ell = Shapes.AddEllipse(0,0)
  Shapes.Move(ell,ellx,elly)
  If func =  "ell" Then
    GraphicsWindow.MouseMove = OnMMell
    GraphicsWindow.MouseDown = OnMDell2
  EndIf 
EndSub

Sub OnMMell
  If func =  "ell" Then
    If active =  "T" Then
      width = Math.Abs(ellx-GraphicsWindow.MouseX)
      height = Math.Abs(elly-GraphicsWindow.MouseY)
      Controls.SetSize(ell,width,height)
    EndIf  
  EndIf  
EndSub  
Sub OnMDell2
  func = ""
  active = ""
  height = 0
  width = 0
  rect = ""
  ell = ""
EndSub  

This is the whole program.

GraphicsWindow.Show()
rectangle  = Controls.AddButton("Add Rectangle",0,0)
ellipse  = Controls.AddButton("Add Ellipse",0,50)
Controls.ButtonClicked = OnBC
Sub OnBC
  If Controls.LastClickedButton = rectangle Then
    func = "rect"
    active = "T"
    If func =  "rect" Then
      GraphicsWindow.MouseDown = OnMDrect
    EndIf  
  Else
    func = "ell"
    active = "T"
    If func =  "ell" Then
      GraphicsWindow.MouseDown = OnMDell
    EndIf    
  EndIf  
EndSub  
Sub OnMDell
  ellx = GraphicsWindow.MouseX
  elly = GraphicsWindow.MouseY
  ell = Shapes.AddEllipse(0,0)
  Shapes.Move(ell,ellx,elly)
  If func =  "ell" Then
    GraphicsWindow.MouseMove = OnMMell
    GraphicsWindow.MouseDown = OnMDell2
  EndIf 
EndSub
Sub OnMMell
  If func =  "ell" Then
    If active =  "T" Then
      width = Math.Abs(ellx-GraphicsWindow.MouseX)
      height = Math.Abs(elly-GraphicsWindow.MouseY)
      Controls.SetSize(ell,width,height)
    EndIf  
  EndIf  
EndSub  
Sub OnMDell2
  func = ""
  active = ""
  height = 0
  width = 0
  rect = ""
  ell = ""
EndSub  
Sub OnMDrect
  rectx = GraphicsWindow.MouseX
  recty = GraphicsWindow.MouseY
  rect = Shapes.AddRectangle(0,0)
  Shapes.Move(rect,rectx,recty)
  If func =  "rect" Then
    GraphicsWindow.MouseMove = OnMMrect
    GraphicsWindow.MouseDown = OnMDrect2
  EndIf 
EndSub
Sub OnMMrect
  If func =  "rect" Then
    If active =  "T" Then
      width = Math.Abs(rectx-GraphicsWindow.MouseX)
      height = Math.Abs(recty-GraphicsWindow.MouseY)
      Controls.SetSize(rect,width,height)
    EndIf  
  EndIf  
EndSub  
Sub OnMDrect2
  func = ""
  active = ""
  height = 0
  width = 0
  rect = ""
  ell = ""

EndSub  

Output

This is a sample drawing made in this editor.