Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
F#+WPF solution to the Draggable Rectangles challenge by Panicz Godek
open System.Windows
let goldenRatio = (1.0 + sqrt 5.0) / 2.0
let newBrush =
let mutable hue = 0.0
fun () ->
hue <- hue + System.Math.PI / goldenRatio
let s x = byte(255.0 * x)
let c x = 0.5 * (cos x + 1.0)
let r = c hue / 1.5
let g = c(hue + 4.0 / 3.0 * System.Math.PI) / 2.0
let b = c(hue + 8.0 / 3.0 * System.Math.PI)
let color = Media.Color.FromRgb(s r, s g, s b)
let mutable nextBrush = newBrush()
type Rectangle =
{ Brush: Media.Brush
Corner: Vector
Size: float }
type Scene = Rectangle of Rectangle * Scene list
let mutable scene : Scene list = []
let mutable drag : Vector option = None
/// Is x0 <= x <= x1?
let between x0 x x1 = x0 <= x && x <= x1
/// Is the given point inside the given rectangle?
let isPointInRectangle (point: Vector) rect =
between rect.Corner.X point.X (rect.Corner.X + rect.Size) &&
between rect.Corner.Y point.Y (rect.Corner.Y + rect.Size)
/// Try to remove the rectangle at the given point, returning the rectangle and remaining scene.
let rec tryRemove point scene =
match scene with
| [] -> None
| Rectangle(rect, children)::scene ->
if isPointInRectangle point rect then
match tryRemove point children with
| None -> Some(Rectangle(rect, children), scene)
| Some(child, children) -> Some(child, Rectangle(rect, children)::scene)
match tryRemove point scene with
| None -> None
| Some(child, scene) -> Some(child, Rectangle(rect, children)::scene)
/// Insert the given child rectangle at the given point.
let rec add point child scene =
match scene with
| [] -> [child]
| Rectangle(rect, children)::scene ->
if isPointInRectangle point rect then
Rectangle(rect, add point child children)::scene
else Rectangle(rect, children)::add point child scene
/// Apply the given function "f" to this rectangle and all of its children recursively.
let rec map f (Rectangle(rect, children)) =
Rectangle(f rect, (map f) children)
/// Scale a rectangle and all of its children.
let scale factor = map (fun r -> { r with Size = r.Size * factor })
/// Scale the rectangle at the given point.
let rec scaleAt s point scene =
let f r = { r with Size = s * r.Size }
match scene with
| [] -> None
| Rectangle(rect, children)::scene ->
if isPointInRectangle point rect then
let rect =
match scaleAt s point children with
| None -> Rectangle(f rect, children)
| Some children -> Rectangle(rect, children)
scaleAt s point scene
|> (fun scene -> Rectangle(rect, children)::scene)
/// Translate a rectangle and all of its children.
let translate vector = map (fun r -> { r with Corner = r.Corner + vector })
/// Remove the rectangle (if any) from the given point and insert it at the new point.
let move oldPoint newPoint scene =
match tryRemove oldPoint scene with
| None -> Rectangle({Brush=nextBrush; Corner=newPoint; Size=100.0}, [])::scene
| Some(child, scene) ->
add newPoint (translate (newPoint - oldPoint) child) scene
let canvas = Controls.Canvas()
let rec drawScene scene =
for Rectangle(rect, children) in List.rev scene do
let shape = Shapes.Rectangle()
shape.Fill <- rect.Brush
Controls.Canvas.SetLeft(shape, rect.Corner.X)
Controls.Canvas.SetTop(shape, rect.Corner.Y)
shape.Width <- rect.Size
shape.Height <- rect.Size
let _ = canvas.Children.Add shape
drawScene children
let draw scene =
drawScene scene
let startDrag point =
drag <- Some point
let stopDrag oldPoint newPoint =
scene <- move oldPoint newPoint scene
drag <- None
nextBrush <- newBrush()
draw scene
[<System.STAThread; EntryPoint>]
let main _ =
canvas.Background <- Media.Brushes.Black
let vectorOf f : Vector = Point.op_Explicit(f canvas)
canvas.MouseDown.Add(fun e ->
startDrag (vectorOf e.GetPosition))
canvas.MouseMove.Add(fun e ->
let newPoint = vectorOf e.GetPosition
match drag, e.LeftButton = Input.MouseButtonState.Pressed with
| None, false -> ()
| None, true -> startDrag newPoint
| Some oldPoint, false -> stopDrag oldPoint newPoint
| Some oldPoint, true -> draw(move oldPoint newPoint scene))
canvas.MouseUp.Add(fun e ->
match drag with
| None -> ()
| Some oldPoint -> stopDrag oldPoint (vectorOf e.GetPosition))
canvas.MouseWheel.Add(fun e ->
scaleAt (1.0 + float e.Delta / 1000.0) (vectorOf e.GetPosition) scene
|> Option.iter (fun s -> scene <- s)
draw scene)
draw scene
Window(Title="Draggable rectangles", Content=canvas)
|> Application().Run

This comment has been minimized.

Copy link
Owner Author

@jdh30 jdh30 commented Sep 17, 2019

This is a WPF-based GUI app that lets you create rectangles, scale them and nest them inside each other. Click on the black background to create a new rectangle. Use the mouse wheel to scale the rectangle under the pointer. Drag the rectangles around and drop them inside each other to create a tree of nested rectangles.

Some notable points:

  • This is a pragmatic solution designed to be simple and not designed to be a pedagogical example for any paradigm (functional or OOP).
  • I haven't used any objects or (IMO) object orientation beyond the fact that the underlying library (WPF) is OOP but I have used recursive types and functions over them.
  • The tree of rectangles is represented as a classical ML tree via an algebraic data type rather than the dictionary-based representation used by Christer.
  • IMO, this code would be even shorter and simpler if it used a better graphics library than WPF. Would be interesting to port this to the Raspberry Pi using .NET Core and GTK#.

Limitations of this solution:

  • The rectangles are all squares.
  • Nested rectangles are not clipped to their parents so they can overhang.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.