RolloverGrid

package javafxapplication1;

import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.lang.System;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;


class CellModel
{
    attribute opacity:Number = 0.0;
    attribute color:Color;
    attribute anim =
        
        Timeline {
            repeatCount: 1
    
              // Key Frames
              var begin = at (0s) {
                   opacity => 1.0 tween Interpolator.LINEAR;
                   color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity}; 
              }

              var mid = at (0.5s) {
                    opacity => 0.5 tween Interpolator.LINEAR;
                    color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity};
              }

              var end = at (1s) {
                 opacity => 0.0 tween Interpolator.LINEAR;
                 color => Color{red: 1.0 , green:0, blue:0, opacity: bind opacity}; 
              }

              keyFrames: [begin,mid,end]
        }//Timeline;*/
}


class Cell extends Rect {
    
  attribute cellModel:CellModel;

   override attribute fill = bind cellModel.color;
  
   override attribute onMouseEntered =  function (e: CanvasMouseEvent){
       cellModel.anim.start();
       System.out.println("Test {cellModel.opacity}");
       
     }
}


class RolloverGrid extends CompositeNode { 
    function composeNode() {
        var cells: Cell[];

        for(j in [0..10]) {
            for(i in [0..30]) {
                var cellModel = CellModel {}
                insert Cell { x: i * 21, y: j * 21, width:20, height:20,  cellModel: bind cellModel} into cells;
            }
        }
        return Group{ content: [Rect { x: 0, y: 0, width: 31 * 21, height: 11 * 21, fill: Color.BLACK},cells] };
    }
}

Frame {
    content:
        Canvas { content: RolloverGrid { } }
    visible: true
}