fixed small issues but mouse over detection is still fucked

demos/demo.coffee

@@ -21,6 +21,7 @@ run = ->
   otherShape.y = 10
   otherShape.scaleX = 1
   otherShape.scaleY = 1
+  otherShape.mouseEnabled = true
 
   # make this shape follow the mouse
   mouseShape = new Shape()
@@ -39,9 +40,18 @@ run = ->
 
   # some text
   text = new TextField()
+  text.mouseEnabled = true
   text.text = "canvas_library demo"
   text.x = 10
-  text.y = 470
+  text.y = 450
+
+  text.onMouseOver = =>
+    text.fillStyle = 'rgba(255, 0, 0, 1)'
+    console.log 'over'
+
+  text.onMouseOut = =>
+    text.fillStyle = 'rgba(0, 0, 0, 1)'
+    console.log 'out'
 
   stage.onMouseUp = =>
     if logo

lib/stage.js

@@ -91,27 +91,24 @@ Stage = (function() {
     return _results;
   };
   Stage.prototype.getObjectUnderCursor = function() {
-    var child, objectUnderCursor, _i, _len, _ref;
-    objectUnderCursor = null;
+    var child, _i, _len, _ref;
     _ref = this.allChildren;
     for (_i = 0, _len = _ref.length; _i < _len; _i++) {
       child = _ref[_i];
       if (child.calculatedVisibility && child.mouseEnabled) {
         this.hitBufferContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.hitBufferContext.save;
+        this.hitBufferContext.save();
         this.setupContext(this.hitBufferContext, child);
         child.draw(this.hitBufferContext, true);
         child.localX = this.mouseX - child.calculatedX;
         child.localY = this.mouseY - child.calculatedY;
+        this.hitBufferContext.restore();
         if (this.hitBufferContext.isPointInPath(this.mouseX, this.mouseY)) {
-          this.hitBufferContext.restore;
-          objectUnderCursor = child;
-          break;
+          return child;
         }
-        this.hitBufferContext.restore;
       }
     }
-    return objectUnderCursor;
+    return null;
   };
   Stage.prototype.findAllChildren = function() {
     this.allChildren = [];
@@ -144,10 +141,10 @@ Stage = (function() {
     }
   };
   Stage.prototype.handleCanvasMouseMove = function(event) {
-    this.mouseX = event.clientX - this.canvasOffsetPosition[0];
-    this.mouseY = event.clientY - this.canvasOffsetPosition[1];
     this.oldMouseX = this.mouseX;
     this.oldMouseY = this.mouseY;
+    this.mouseX = event.clientX - this.canvasOffsetPosition[0];
+    this.mouseY = event.clientY - this.canvasOffsetPosition[1];
     if (this.onMouseMove) {
       return this.onMouseMove();
     }
@@ -174,7 +171,7 @@ Stage = (function() {
   };
   Stage.prototype.handleMouseEventsOfAllChildren = function() {
     var objectUnderCursor;
-    objectUnderCursor = this.getObjectUnderCursor;
+    objectUnderCursor = this.getObjectUnderCursor();
     if (this.lastObjectUnderCursor !== objectUnderCursor) {
       if (this.lastObjectUnderCursor) {
         if (this.lastObjectUnderCursor.onMouseOut) {
@@ -186,7 +183,7 @@ Stage = (function() {
       }
       if (objectUnderCursor) {
         if (objectUnderCursor.onMouseOver) {
-          objectUnderCursor.onMouseOver;
+          objectUnderCursor.onMouseOver();
         }
         if (objectUnderCursor.onMouseDown && !objectUnderCursor.mouseDown) {
           objectUnderCursor.mouseDown = true;
@@ -199,7 +196,7 @@ Stage = (function() {
         this.setHandCursor(objectUnderCursor.useHandCursor);
       }
     } else if (objectUnderCursor && this.mouseHasMoved() && objectUnderCursor.onMouseMove) {
-      objectUnderCursor.onMouseMove;
+      objectUnderCursor.onMouseMove();
     }
     return this.lastObjectUnderCursor = objectUnderCursor;
   };

lib/text_field.js

@@ -14,19 +14,23 @@ TextField = (function() {
     this.textAlign = 'left';
     this.strokeStyle = null;
     this.fillStyle = 'rgba(0, 0, 0, 1)';
-    this.font = '20pt Arial';
+    this.fontFace = 'Arial';
+    this.fontSize = 20;
     this.maxWidth = null;
     TextField.__super__.constructor.call(this);
   }
   TextField.prototype.draw = function(context, drawHitarea) {
-    context.font = this.font;
-    if (this.strokeStyle != null) {
+    context.font = this.fontSize + 'px ' + this.fontFace;
+    context.textBaseline = 'top';
+    if (drawHitarea) {
+      context.beginPath();
+      context.rect(0, 0, context.measureText(this.text).width, this.fontSize);
+      return context.closePath();
+    } else {
       context.strokeStyle = this.strokeStyle;
-    }
-    if (this.fillStyle != null) {
       context.fillStyle = this.fillStyle;
+      return context.fillText(this.text, 0, 0);
     }
-    return context.fillText(this.text, 0, 0);
   };
   return TextField;
 })();

src/stage.coffee

@@ -84,28 +84,23 @@ class Stage
         @context.restore()
 
   getObjectUnderCursor: ->
-    objectUnderCursor = null
-
     for child in @allChildren
       if child.calculatedVisibility && child.mouseEnabled
         @hitBufferContext.clearRect 0, 0, @canvas.width, @canvas.height
-        @hitBufferContext.save
+        @hitBufferContext.save()
 
         @setupContext @hitBufferContext, child
-
         child.draw @hitBufferContext, true
 
         child.localX = @mouseX - child.calculatedX
         child.localY = @mouseY - child.calculatedY
 
-        if @hitBufferContext.isPointInPath(@mouseX, @mouseY)
-          @hitBufferContext.restore
-          objectUnderCursor = child
-          break
+        @hitBufferContext.restore()
 
-        @hitBufferContext.restore
+        if @hitBufferContext.isPointInPath(@mouseX, @mouseY)
+          return child
 
-    objectUnderCursor
+    null
 
   findAllChildren: ->
     @allChildren = []
@@ -126,10 +121,10 @@ class Stage
       @canvas.addEventListener 'mouseup', (event) => @handleCanvasMouseUp(event)
 
   handleCanvasMouseMove: (event) ->
-    @mouseX = event.clientX - @canvasOffsetPosition[0]
-    @mouseY = event.clientY - @canvasOffsetPosition[1]
     @oldMouseX = @mouseX
     @oldMouseY = @mouseY
+    @mouseX = event.clientX - @canvasOffsetPosition[0]
+    @mouseY = event.clientY - @canvasOffsetPosition[1]
     @onMouseMove() if @onMouseMove
 
   handleCanvasMouseDown: (event) ->
@@ -147,7 +142,7 @@ class Stage
     @canvas.style.cursor = showHand ? 'pointer' : ''
 
   handleMouseEventsOfAllChildren: ->
-    objectUnderCursor = @getObjectUnderCursor
+    objectUnderCursor = @getObjectUnderCursor()
 
     if @lastObjectUnderCursor != objectUnderCursor
       if @lastObjectUnderCursor
@@ -157,7 +152,7 @@ class Stage
           @setHandCursor false
 
       if objectUnderCursor
-        objectUnderCursor.onMouseOver if objectUnderCursor.onMouseOver
+        objectUnderCursor.onMouseOver() if objectUnderCursor.onMouseOver
 
         if objectUnderCursor.onMouseDown && !objectUnderCursor.mouseDown
           objectUnderCursor.mouseDown = true
@@ -170,7 +165,7 @@ class Stage
         @setHandCursor objectUnderCursor.useHandCursor
 
     else if objectUnderCursor && @mouseHasMoved() && objectUnderCursor.onMouseMove
-      objectUnderCursor.onMouseMove
+      objectUnderCursor.onMouseMove()
 
     @lastObjectUnderCursor = objectUnderCursor
 

src/text_field.coffee

@@ -4,12 +4,20 @@ class TextField extends DisplayObject
     @textAlign = 'left'
     @strokeStyle = null
     @fillStyle = 'rgba(0, 0, 0, 1)'
-    @font = '20pt Arial'
+    @fontFace = 'Arial'
+    @fontSize = 20
     @maxWidth = null
     super()
 
   draw: (context, drawHitarea) ->
-    context.font = @font
-    context.strokeStyle = @strokeStyle if @strokeStyle?
-    context.fillStyle = @fillStyle if @fillStyle?
-    context.fillText @text, 0, 0
+    context.font = @fontSize + 'px ' + @fontFace
+    context.textBaseline = 'top'
+
+    if drawHitarea
+      context.beginPath()
+      context.rect 0, 0, context.measureText(@text).width, @fontSize
+      context.closePath()
+    else
+      context.strokeStyle = @strokeStyle
+      context.fillStyle = @fillStyle
+      context.fillText @text, 0, 0