jimmygkr / cakejs Goto Github PK
View Code? Open in Web Editor NEWAutomatically exported from code.google.com/p/cakejs
Automatically exported from code.google.com/p/cakejs
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.)
Original issue reported on code.google.com by [email protected]
on 15 Mar 2008 at 12:20
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!
Original issue reported on code.google.com by [email protected]
on 26 Nov 2011 at 9:40
http://www.w3.org/TR/SVG11/animate.html#KeyTimesAttribute
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 6:38
Hi,
Cake library run on IE with excanvas ?
Thanks,
Bernard
Original issue reported on code.google.com by [email protected]
on 5 Jan 2009 at 9:08
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?
Original issue reported on code.google.com by [email protected]
on 26 Oct 2011 at 12:26
SVG animate calcMode is not supported by SVGParser.
See the [http://www.w3.org/TR/SVG11/animate.html#CalcModeAttribute SVG 1.1
animation spec].
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 6:31
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.
Original issue reported on code.google.com by [email protected]
on 14 Jun 2011 at 3:47
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.
Original issue reported on code.google.com by [email protected]
on 12 Mar 2008 at 5:47
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.
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 5:37
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.
Original issue reported on code.google.com by [email protected]
on 12 Mar 2008 at 5:25
SVG animations should inherit the animated properties from parent node.
E.g. font-size and fill color.
Original issue reported on code.google.com by [email protected]
on 21 Mar 2008 at 4:47
SVG animateMotion does not support rotate="<angle>"
rotate="<angle>" should add a rotate transform to the transformList for the
angle.
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 6:26
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.
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 5:27
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.
Original issue reported on code.google.com by [email protected]
on 28 Mar 2012 at 12:06
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.
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 5:41
Less of an issue, more of a question, are there tests I can run for cake.js?
Original issue reported on code.google.com by [email protected]
on 2 Oct 2012 at 6:30
Need a Hello World example to make it easier to get started with CAKE.
Original issue reported on code.google.com by [email protected]
on 12 Mar 2008 at 5:23
SVG animate restart, repeatCount and repeatDur are not supported.
http://www.w3.org/TR/SVG11/animate.html#RestartAttribute
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 6:41
...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.
Original issue reported on code.google.com by [email protected]
on 12 Mar 2008 at 5:57
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.
Original issue reported on code.google.com by [email protected]
on 6 Mar 2012 at 2:44
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.
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 7:04
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.
Original issue reported on code.google.com by [email protected]
on 22 Mar 2008 at 2:04
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.
Original issue reported on code.google.com by [email protected]
on 21 Mar 2008 at 8:38
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?
Original issue reported on code.google.com by [email protected]
on 22 Oct 2010 at 6:21
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.
Original issue reported on code.google.com by [email protected]
on 15 Mar 2008 at 12:52
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)
+
Original issue reported on code.google.com by [email protected]
on 1 Feb 2009 at 9:29
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.
Original issue reported on code.google.com by [email protected]
on 12 Jun 2011 at 6:47
Investigate support for Box2D-js
Original issue reported on code.google.com by [email protected]
on 25 Jul 2011 at 6:17
SVG animation accumulate attribute not supported
http://www.w3.org/TR/SVG11/animate.html#AccumulateAttribute
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 6:37
[deleted issue]
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.
Original issue reported on code.google.com by [email protected]
on 12 Mar 2008 at 5:52
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!
Original issue reported on code.google.com by [email protected]
on 8 Mar 2010 at 8:50
SVG animation additive attribute not supported
http://www.w3.org/TR/SVG11/animate.html#AdditiveAttribute
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 6:36
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.
Original issue reported on code.google.com by [email protected]
on 21 Mar 2008 at 8:43
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]
},
Original issue reported on code.google.com by [email protected]
on 24 Jul 2011 at 4:24
http://www.w3.org/TR/SVG11/animate.html#KeySplinesAttribute
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 6:39
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.
Original issue reported on code.google.com by [email protected]
on 25 Jul 2011 at 5:31
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.)
Original issue reported on code.google.com by [email protected]
on 15 Mar 2008 at 1:03
Fixed rotation bug: when rotating for 180 degrees (1 radian) no rotation occurs.
Original issue reported on code.google.com by [email protected]
on 1 Mar 2012 at 5:05
Attachments:
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].
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 6:34
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;
Original issue reported on code.google.com by [email protected]
on 19 Mar 2010 at 7:21
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.
Original issue reported on code.google.com by [email protected]
on 16 Apr 2010 at 6:42
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)
Original issue reported on code.google.com by [email protected]
on 6 Feb 2009 at 4:10
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
Original issue reported on code.google.com by [email protected]
on 2 Mar 2010 at 8:21
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
Original issue reported on code.google.com by [email protected]
on 3 Sep 2011 at 8:45
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
Original issue reported on code.google.com by [email protected]
on 5 Jan 2009 at 8:53
Attachments:
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.
Original issue reported on code.google.com by [email protected]
on 5 Mar 2010 at 2:58
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
Original issue reported on code.google.com by [email protected]
on 11 Feb 2012 at 1:18
Attachments:
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.
Original issue reported on code.google.com by [email protected]
on 15 Mar 2008 at 12:41
http://www.w3.org/TR/SVG11/animate.html#KeyPointsAttribute
Original issue reported on code.google.com by [email protected]
on 19 Mar 2008 at 6:38
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.