magussiro / cakejs Goto Github PK

Disclaimer: I'm new to code.google.com so I might have the process wrong.

I'm new to cakeJS but reading through the cake.js source and there seems to be 
a small typo in Curves.quadraticLengthPointAngle:

quadraticLengthPointAngle : function(a,b,c,lt,error) {
    var p1 = this.linePoint(a,b,2/3)
    var p2 = this.linePoint(b,c,1/3)
    return this.cubicLengthPointAngle(a,p1,p2,c, error)
  }

Should the return statement read "return 
this.cubicLengthPointAngle(a,p1,p2,c,lt, error)" instead?

... I'm also new to javascript so I might have missed how you were applying 
variadic arguments for Curves.cubicLengthPointAngle.

Thanks for developing this project!

What steps will reproduce the problem?
1. create ElementNode
2. cover it with a Rectangle

What is the expected output? What do you see instead?

Expected ElementNode to be below the rectangle, but the ElementNode is
above the rectangle.

This happens because there is no way to draw HTML elements on the canvas. 

Possible fixes: 
 * hack all the browsers to draw HTML elements on the canvas and get the
patches applied in two-three years
 * port rendering backend to SVG, use foreignObject
 * split the canvas into layers which are canvases themselves. Put the
above-layer canvas above the ElementNodes.

All of the above solutions are rather nasty, but it is a nasty issue.
Layers would be most useful for other stuff, I guess. 

JavaDoc & JSDoc don't quite work for turning the source comments into
legible HTML documentation. A better approach might be to write a simple
parser meself and create something that has a readable structure with the
source interspersed as hideable sections (something like rdoc's inline
template.)

Readable structure being "things in the order that they should be read in."
Which perhaps easiest to achieve through manually writing a documentation page.

Collision detection would be nice for writing simulations and games.

I don't know how to make it fast, but a naive O(n^2) version would be ok
for starters.

A simple physics engine would make it easier to make fancy animations. How
to integrate it with the scenegraph is a bit of a mystery. 

CanvasNode#usePhysics, maybe.

Could start with a crap particle dynamics sim and go to rigid-body sim from
there. Or maybe there is a library for this and we could use that.

Integrates with the collision detection stuff.

Now there are a lot of arrays and other temp objects allocated per frame,
which is causing frequent pauses with Firefox 2's garbage collector. (No
idea about Fx3, its canvas is screwed up on my 64-bit Linux box.)

It would be rather dandy if we were able to avoid these pauses to the best
of our ability. In practice: avoid creating temp arrays and temp objects,
or use a global temp array allocator (heh, manual memory management.)

Experience with writing Librend (OpenGL scene graph in Ruby) would suggest
that the main problem is arrays, followed by unboxed floats. Can't really
do anything about the floats, so focus on arrays.

There are a couple of big (and easy?) culprits, namely
Curves.cubicPoint/cubicLengthPointAngle, and the SVD madness from dojo.

A JavaScript allocation profiler would really help: draw a frame, note how
many objects each function allocates.

I was thinking about a way to do dirty regions in an efficient manor. I think 
we can render to smaller viewports for dirty regions and run a draw-chain for 
each dirty region, manually cull bboxes, then blit the viewports back to the 
main canvas. If you keep a few extra canvases around this process should be 
fairly simple. If there was a way to do masks in canvas, we could draw dirty 
regions directly to the final buffer, but unfortunately there arent.

SVG animation additive attribute not supported

http://www.w3.org/TR/SVG11/animate.html#AdditiveAttribute

jQuery 1.4.2 and cakeJS conflict with one another when on the same page.

You will get an error in cakeJS line 3626:

container.appendChild(canvasContainer)

object has no method 'appendChild'

Tested in Chrome 4.1


appendChild is a DOM node method, so I don't think appendChild is a good
name for cakejs nodes to use.

http://www.w3.org/TR/SVG11/animate.html#KeyPointsAttribute

I am making a mini game with cake.js and I have to do some hit test to detect, 
for example, collision of two rectangles.

I don't know if cake.js has been built in with such features, or i have to 
implement my own versions?

Hello,
I have problem with cakejs.

If I include mootools (ver. 1.3.2) the cake.js return error on #627 
"this.initialize.apply(this, arguments)", the error is : 
"this.initialize is undefined"

When I remove mootools, error dissapear. And cake works properly.

I try it on this scripts: http://jeko.free.fr/megapong/

Is any option, how to get work both (cakejs and mootools) on one page?

Otto

There is currently no way to get key events with CAKE, nor is keyboard
focus handled.

There should be a system to manage which canvas node has keyboard focus,
and dispatching key events to it. The Canvas should also keep track of
which keys are currently depressed. 

Investigate support for Box2D-js

i use the exact same code in the reference
which is,

---
Pattern
Pattern is a possibly repeating image that can be used as a strokeStyle or 
fillStyle. var image = new Image() image.src = 'foo.jpg' var pattern = new 
Pattern(image, 'no-repeat') var rect = new Rectangle(200, 200, {fill: true, 
fillStyle: pattern}

---
but it does not show the image. Instead, it fills the rect with black color

SVG animate restart, repeatCount and repeatDur are not supported.

http://www.w3.org/TR/SVG11/animate.html#RestartAttribute

What steps will reproduce the problem?
1. A TextNode appended to any canvas or shape will not render correctly in 
Chrome on Windows.
2. A test file is attached; try opening it in Firefox and in Chrome.

What is the expected output? What do you see instead?
The test file should 1) draw a blue circle and 2) print some red text.  Firefox 
does both, but Chrome only draws the circle.

What version of the product are you using? On what operating system?
Chrome 17.0.963.56, Cakejs 2.0rc1; running on Windows 7.

Please provide any additional information below.
Am I using TextNode correctly?  I could not find any documentation about it.

CAKE redraws the canvas on every frame, even if the scene hasn't changed
between frames. This causes a lot of useless CPU use.

The way that the redrawOnlyWhenChanged -flag works is very manual, a better
way to do it would be to store the previous frame state and compare it to
the current state in the update-phase.

Using setters (defined in CanvasNode#initialize) would work for a limited
set of operations (that is, changing state through assignment.) Comparing
frame states would be less fragile.

I attempted to load an SVG using cakejs and could not get it to work. I
looked at the code, and couldn't figure out if the load or parse function
is what was supposed to be called, but I did see there was no "filename"
spot in the parse function like in the docs. This needs to be clarified so
it is known how to load an SVG.

http://www.w3.org/TR/SVG11/animate.html#KeySplinesAttribute

Hi,
I test your library for my software.
I use France map in SVG format.

What steps will reproduce the problem?
1. in the demo (SVGparserTest), i replace the lion.svg with my file 
2. some paths and all texts don't display


The version is the version of demo
OS : Vista 64bits with FireFox 3.0

Thanks,

Bernard

What steps will reproduce the problem?
1. Parse SVG document with two animateTransforms with the same type on a
single element.
2. Look at the animation.

What is the expected output? What do you see instead?

Expected that both animateTransforms have an effect on the element.
Instead, only the second transform has effect.

This happens because animateTransforms are parsed to affect the literal
object transforms (#rotation, #scale, etc.) instead of adding a new
transform to the transformList to animate it.

http://www.w3.org/TR/SVG11/animate.html#KeyTimesAttribute

What steps will reproduce the problem?
 Deactivate firebug extension in firefox and try to raise an exception


If firebug is deactivated then the 'console' object does not exist, It's
possible to write separate function that does error output and before
calling console.log function check if 'console' is defined

I don't know what version of Cake, it's the only one and file does not have
any version information (((.
OS: Windows XP Home Basic; Firefox 3.6; FireBug 1.5.3;

What steps will reproduce the problem?
1. create two CanvasNodes with zIndexes 1 and 2
2. on the node with zIndex 1, add ElementNode A with zIndex 3
3. on the node with zIndex 2, add ElementNode B with zIndex 2
4. move the ElementNodes so that they overlap

What is the expected output? What do you see instead?

Expected that B is above A, instead A is above B.

This happens because the ElementNodes are on a single div above the canvas
and their zIndexes are relative to other ElementNodes, not the scene.

Fix: either a more robust zIndex numbering (e.g. assign a running zIndex to
ElementNode#element on every frame) or recreate the canvas structure with
divs so that the elementNodes behave. Leaning towards the dynamic zIndices.

SVG animations should inherit the animated properties from parent node.
E.g. font-size and fill color.

Cake.js uses non-standard Javascript syntax. Most obviously, there are no 
semicolons at the end of 
statements. This causes problems when cake.js is minified or merged together 
with other script 
files.

I recommend running the code through JSLint (http://www.jslint.com/) and fixing 
the problems that 
come up.

Thanks!

SVG animate calcMode is not supported by SVGParser.

See the [http://www.w3.org/TR/SVG11/animate.html#CalcModeAttribute SVG 1.1
animation spec].

What steps will reproduce the problem?
1. var testLink = new LinkNode('http://www.cnn.com', '_blank');
2. append testLink to canvas


What is the expected output? What do you see instead?
I expect to see an anchor on the canvas somewhere. Don't see anything.

What version of the product are you using? On what operating system?
trunk. Windows in IE and Firefox.

I don't see documentation for it anywhere, so I'm half way wondering if it 
isn't dead code.

The current SVG animation parser is incorrect in its SMIL handling.

SMIL uses an "animation sandwich" model, in which the animators are
non-destructive modifiers on top of the object state.

Implementing the animation sandwich on top of CAKE is difficult, since
CAKE's animators are destructive modifiers on the object state.

A SMIL animator would require encasing the animated object inside an
animator shell. An alternative would be to have non-destructive state
modifiers in Transformable, and have Transformable call the modifiers
before passing the state to canvas context. I.e. now it's
context.setState(object.state), with the modifiers it would be
context.setState(object.stateModifiers(object.state)), where
object.stateModifiers has no side-effects.

I've found that `foo.when("mousewheel", ...)` never gets triggered.  Below
is a patch which will fix this :)

Index: cake.js
===================================================================
--- cake.js (revision 39)
+++ cake.js (working copy)
@@ -3660,6 +3660,17 @@
         th.absoluteMouseX = th.absoluteMouseY = th.mouseX = th.mouseY = null
     }, true)

+    this.canvas.parentNode.addEventListener('DOMMouseScroll', function(e) {
+      var nev = document.createEvent('MouseEvents')
+      nev.initMouseEvent('mousewheel', true, true, window, e.detail,
+        e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey,
+        e.shiftKey, e.metaKey, e.button, e.relatedTarget)
+      nev.sd = e.detail // Scroll Delta
+      // Note: A negative delta is scrolling up, positive delta is down
+      nev.canvasTarget = th.target
+      th.dispatchEvent(nev)
+    }, false)
+

What steps will reproduce the problem?
1. Use ImageNode.Load to create an ImageNode
2. Append node to another CanvasNode that has a fill

What is the expected output?
The image to be rendered where placed

What do you see instead?
ImageNode current derives from Drawable. It picks up the fill from the 
CanvasNode it is inside and ends up filling over the image, despite the fill 
being set to null on the ImageNode.

What version of the product are you using? On what operating system?
trunk

Please provide any additional information below.

What steps will reproduce the problem?
just following code:
var cvs = new Canvas(document.getElementById('canvas'));

What is the expected output? What do you see instead?
shapes are drawn but event listeners are not working

What version of the product are you using? On what operating system?
using cake v2.0 r84

Please provide any additional information below.
dragonfly screenshot is attached

SVG animateMotion does not support rotate="<angle>"

rotate="<angle>" should add a rotate transform to the transformList for the
angle.

Fixed rotation bug: when rotating for 180 degrees (1 radian) no rotation occurs.

...Speculation and hypothesis

To turn an arbitrary animated 2D scene into one that uses layer
compositing, you have to segment it into layers. A layer is a part of the
scene for which it's possible to draw an image that can substitute for the
part.

State partitioning

First, collect drawn objects into a list by drawing order. Then segment the
list. If an object has a different blend mode from the previous, start a
new segment. If an object has changed during the last N frames, start a new
segment. If a segment has been static for M frames and it takes longer than
X milliseconds to draw, cache it into a layer.

Now we have the hard layer limits, but each layer is the size of the whole
screen, which is suboptimal. Optimally, each layer would be the size of its
bounding box, which brings us to...

Spatial partitioning

Compute the screen-aligned bounding boxes of each object in the layer. Then
go through the bounding boxes and merge all intersecting bounding boxes.
Now we have the disjoint bounding boxes of the layer, or spatial sublayers.

Cache each sublayer to an offscreen image, along with a hash of the objects
it depicts.

Scene compression, maybe?

If the draw list contains segments with the same segment hash, they can be
drawn using the same layer image (draw largest version, use possibly scaled
down version for others.) The segment hash should be incremental to make it
possible to discard non-matching segments as soon as possible.

Maybe split these into separate bugs if bored out of your mind / dig filing
bugs more than fixing them.

animateTransform.translate not handled
animateTransform.scale "sx,sy" value not parsed correctly
animateTransform.rotate value centerpoint not parsed
animateTransform.skewX|Y angle value not converted to radians

Array begin-values are not handled correctly. Fancy begin-values are not
handled correctly. See http://www.w3.org/TR/SVG11/animate.html#BeginAttribute

dur="media | indefinite" not parsed. See
http://www.w3.org/TR/SVG11/animate.html#DurAttribute

end not parsed. See http://www.w3.org/TR/SVG11/animate.html#EndAttribute

min not parsed. See http://www.w3.org/TR/SVG11/animate.html#MinAttribute

max not parsed. See http://www.w3.org/TR/SVG11/animate.html#MaxAttribute

Fancy clock values are not parsed correctly (i.e. anything that's not "<N>s".)
if (value.match(/[0-9]$/)) {
  var hms = value.split(":")
  var s = hms[hms.length-1] || 0
  var m = hms[hms.length-2] || 0
  var h = hms[hms.length-3] || 0
  return parseFloat(h)*3600 + parseFloat(m)*60 + parseFloat(s)
} else {
  var fac = 60
  if (value.match(/s$/i)) fac = 1
  else if (value.match(/h$/i)) fac = 3600
  return parseFloat(value) * fac
}

Datatype animation likely not handled correctly, very likely buggy. See
http://www.w3.org/TR/SVG11/animate.html#AnimationAttributesAndProperties

Animating SVG using DOM scripts does not work, and I have no clear idea on it.

Hi,

Cake library run on IE with excanvas ?


Thanks,

Bernard

Need a Hello World example to make it easier to get started with CAKE.

SVG animation accumulate attribute not supported 

http://www.w3.org/TR/SVG11/animate.html#AccumulateAttribute

Edit mode would be nice. It'd show handles around each object and hijack
oncontextmenu to do something like Morphic. The handles would be a
transformation widget (a better version of canvas.html#TransformWidgetProto.)

The primary use for it would be to do object layout (assuming that the
graphics come from Inkscape / bitmap image editor), transformations and
animations. Exposing the object's event listeners, frame listeners and
keyframes for editing would be awesome.

Once that part is down, it could be extended for editing the graphics
objects (and motion paths require a path editor anyhow.) That'd require
"create object, add & delete & move control points", see
canvas.html#EditableCurve and #CatmullRom for inspiration.

Also would need widgets for picking colors and building gradients. A custom
gradient interpolator would be good (weighed color stops, then compile down
to linear gradient stops.)

If I use IE9 to view any of your demos, including every demo on this page: 
http://glimr.rubyforge.org/cake/canvas.html#Paint, it works just fine.

For instance this page http://webdemos.sourceforge.net/CAKE/cake5.html
works great too.

However, if I strictly load the page that's in the iframe on that page, IE9 
will no longer render the canvas.  Iframe page: 
http://webdemos.sourceforge.net/CAKE/CAKE5/cake.html

On the iframe page IE gives the error "Element" is undefined on line 151 of 
cake.js.

It will do this for all your standalone pages that are included in the iframes 
if I just visit them directly.  However, if they're part of the iframe in the 
shell of that site, no errors, and works perfectly.

So what is it about the content outside the iframe that's causing IE9 not to 
think there's an error and then to also fully render the canvas?

Less of an issue, more of a question, are there tests I can run for cake.js?

Semicolon-separated list of one or more values to use as mid-values for the
animation.
See [http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute SVG 1.1
animation spec].

What steps will reproduce the problem?
1. Create a cake canvas that is a child of positon:fixed element.  Make sure 
the document extents go beyond the window extents so that you can scroll away 
from the origin.
2. Populate the canvas with something to pick.
3. Use the browser to scroll the page.  The canvas should stay fixed in its 
position relative to the window origin.
4. Attempt pick an object in the canvas.


What is the expected output? What do you see instead?

The pickable CakeNode should be picked if you have a mouse over it.  The pick 
will miss, however.  I traced this issue down to the Mouse.getRelativeCoords.  
It does not appear to take into account offsets due to fixed positioning.  I am 
working around the issue by overriding getRelativeCoords with function that 
uses jQuery's .offset() method.


What version of the product are you using? On what operating system?
I grabbed the latest revision as of March 26, 2012. (Rev 84, probably)

I'm running on OSX 10.7.  The problem was reproducible in both Firefox 11.0 and 
Chrome 17


Please provide any additional information below.

the function CanvasNode::mergeBoundingBoxes was not preserving the upper bounds 
of the original box. This fix seems to do it:

mergeBoundingBoxes : function(bb, bb2) {
    var obx = bb[0], oby = bb[1]
    //change lower corner
    if (bb[0] > bb2[0]) bb[0] = bb2[0]
    if (bb[1] > bb2[1]) bb[1] = bb2[1]
    //match original upper corner
    bb[2] = bb[2] + obx - bb[0]
    bb[3] = bb[3] + oby - bb[1]
    //compare upper corners
    if (bb[2]+bb[0] < bb2[2]+bb2[0]) bb[2] = bb2[2]+bb2[0]-bb[0]
    if (bb[3]+bb[1] < bb2[3]+bb2[1]) bb[3] = bb2[3]+bb2[1]-bb[1]
  },

If you visit one of those demos:
* http://glimr.rubyforge.org/cake/hello_world.html
* http://glimr.rubyforge.org/cake/canvas.html

It lags new newer versions of firefox, i dunno know if it is because of
Firefox or CakeJS but i have reported it to the firefox team as vell.

Atleast between firefox 3.0.3 and 3.1b2 it's laggish and slow.
in Aora it don't lag at all but the transformations are all wrong (version 0.4)

What steps will reproduce the problem?
1. Create path with a line and an arc.
2. Get path.pointAngleAt(0.3)

What is the expected output? What do you see instead?

Expected to return a point on the line. Returns a point on the arc.


Happens because arcs split into bezier curves, which messes up the
segment-wise interpolation.

[deleted issue]

What steps will reproduce the problem?
1. after(1000, function(){ console.log("1000") })
2. after(900, function(){ console.log("900") })
3. after(0, function(){ do_stuff_for_2000ms(); })

What is the expected output? 

900
1000

What do you see instead?

1000
900

This happens because the animation methods use a frame handler per
animation method call. 

Fixable by moving to a timeline minheap and popping the callbacks from it.
(I.e. have a timeline, call and remove the earliest event from the timeline
while the earliest event in the timeline <= current time.)