FX

/**
 * @author Sergey A. Malenkov
 */

import javafx.scene.Cursor;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.input.KeyCode;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.StrokeLineCap;
import javafx.scene.shape.StrokeLineJoin;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

def D = 22;
def BG = Color.WHITE;
def FG = Color.BLACK;
def FONT = 16;
def COLORS = [
  Color.RED,
  Color.ORANGE,
  Color.YELLOW,
  Color.GREEN,
  Color.LIGHTBLUE,
  Color.BLUE,
  Color.MAGENTA,
  Color.BLACK
];

var COLOR = Color.BLACK;
var SIZE = 1;

def canvas = Group { }

function undo() {
  def index = sizeof canvas.content;
  if (index > 0) {
    delete canvas.content[index - 1] from canvas.content
  }
}

class Button extends CustomNode {
  var content: String;
  override var blocksMouse = true;
  override var cursor = Cursor.HAND;
  override function create() {
    Group {
      translateY: bind canvas.scene.height - FONT - 4
      content: [
        Rectangle {
          stroke: FG
          fill: BG
          width: 3 * FONT
          height: FONT
          arcWidth: FONT
          arcHeight: FONT
        }
        Text {
          x: FONT / 3
          y: FONT - 2
          content: bind content
          fill: FG
          font: Font {
            size: FONT
          }
        }
      ]
    }
  }
}

Stage {
  title: "Draw (JavaFX sample)"
  scene: Scene {
    width: 600
    height: 400
    content: [
      Rectangle {
        fill: BG
        width: bind canvas.scene.width - 1
        height: bind canvas.scene.height - 1
        var path: Path;
        onMousePressed: function(mouse) {
          path = Path {
            stroke: COLOR
            strokeWidth: SIZE
            strokeLineCap: StrokeLineCap.ROUND
            strokeLineJoin: StrokeLineJoin.ROUND
            elements: MoveTo { x: mouse.x   y: mouse.y }
          }
          insert path into canvas.content
        }
        onMouseDragged: function(mouse) {
          insert LineTo { x: mouse.x   y: mouse.y } into path.elements
        }
        onKeyPressed: function(key) {
          if (key.controlDown and key.code == KeyCode.VK_Z) {
            undo()
          }
        }
      }
      canvas
      for (color in COLORS) Rectangle {
        translateX: 4 + (2 + D) * indexof color
        translateY: 4
        strokeWidth: 2
        stroke: bind if (COLOR == color)  then FG  else null
        fill: color
        width: D
        height: D
        blocksMouse: true
        cursor: Cursor.HAND
        onMousePressed: function(mouse) {
          COLOR = color
        }
      }
      for (size in [1..5]) Group {
        translateX: 0.5 * D + 4 + (2 + D) * indexof size
        translateY: 1.5 * D + 8
        content: [
          Circle {
            strokeWidth: 2
            stroke: bind if (SIZE == size)  then FG  else null
            fill: BG
            radius: D / 2
            blocksMouse: true
            cursor: Cursor.HAND
            onMousePressed: function(mouse) {
              SIZE = size
            }
          }
          Line {
            def o = (D - size) / 2 - 2;
            strokeWidth: size
            stroke: bind COLOR
            strokeLineCap: StrokeLineCap.ROUND
            startX: -o
            endX:    o
          }
        ]
      }
      Button {
        translateX: 4
        content: "Clear"
        onMousePressed: function(mouse) {
          delete canvas.content
        }
      }
      Button {
        translateX: 8 + 3 * FONT
        content: "Undo"
        onMousePressed: function(mouse) {
          undo()
        }
      }
      Rectangle {
        fill: null
        stroke: FG
        width: bind canvas.scene.width - 1
        height: bind canvas.scene.height - 1
      }
    ]
  }
}