scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add keepalive attribute to canvas to tag that controls wether it animates in background in emulated requestAnimationFrame() function, and use it in all example files.

Browse source
This commit is contained in:
Jürg Lehni 2011-05-14 13:04:02 +03:00
parent a775e66632
commit 3feb45addc
31 changed files with 60 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/Animated/AnimatedStar.html
View file

@ -52,5 +52,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Animated/Extruded.html
View file

@ -70,5 +70,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Animated/Flock.html
View file

@ -300,5 +300,5 @@
</style> </style>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Animated/Lines.html
View file

@ -47,5 +47,5 @@
</script> </script>
</head> </head>
<body style='background-color:black'> <body style='background-color:black'>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Animated/RadialRainbows.html
View file

@ -78,5 +78,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

4
examples/Animated/Raster.html
View file

File diff suppressed because one or more lines are too long

2
examples/Animated/RoundedRectangles.html
View file

@ -44,5 +44,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Animated/Smoothing.html
View file

@ -71,5 +71,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Scripts/Arcs.html
View file

@ -27,5 +27,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Scripts/BouncingBalls.html
View file

@ -82,5 +82,5 @@
</head> </head>
<body> <body>
<p>Click to add circles:</p> <p>Click to add circles:</p>
<canvas id='canvas' resize stats></canvas> <canvas id="canvas" resize stats keepalive="true"></canvas>
</body> </body>

2
examples/Scripts/Chain.html
View file

@ -42,5 +42,5 @@
</script> </script>
</head> </head>
<body style='background-color: black'> <body style='background-color: black'>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Scripts/Circle.html
View file

@ -15,5 +15,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Scripts/CurveTimeParametrization.html
View file

@ -43,5 +43,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Scripts/Letter.html
View file

@ -29,5 +29,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

4
examples/Scripts/RotationRaster.html
View file

File diff suppressed because one or more lines are too long

2
examples/Scripts/RoundRectangle.html
View file

@ -23,5 +23,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Scripts/StrokeBounds.html
View file

@ -92,5 +92,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/BezierTool.html
View file

@ -81,5 +81,5 @@
Drag segment handles and points to manipulate them. Drag segment handles and points to manipulate them.
Close the path to start a new one. Close the path to start a new one.
</p> </p>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/Circles.html
View file

@ -26,5 +26,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/Clouds.html
View file

@ -31,5 +31,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/Dripping Brush.html
View file

@ -68,5 +68,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/Fancy Brush.html
View file

@ -78,5 +78,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/Grid.html
View file

@ -40,5 +40,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/MetaBalls.html
View file

@ -113,5 +113,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/MultiLines.html
View file

@ -40,5 +40,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/SquareRounded.html
View file

@ -78,5 +78,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/Stars.html
View file

@ -26,5 +26,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/Wave.html
View file

@ -44,5 +44,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

2
examples/Tools/Worm Farm.html
View file

@ -84,5 +84,5 @@
</script> </script>
</head> </head>
<body> <body>
<canvas id='canvas' resize></canvas> <canvas id="canvas" resize keepalive="true"></canvas>
</body> </body>

68
src/browser/DomEvent.js
View file

@ -99,52 +99,42 @@ DomEvent.requestAnimationFrame = new function() {
// So we need to fake it. Define helper functions first: // So we need to fake it. Define helper functions first:
var callbacks = [], var callbacks = [],
fastRate = 1000 / 60,
slowRate = 1000,
focused = true, focused = true,
timer; timer;
// Installs interval timer that checks all callbacks. This results in much DomEvent.add(window, {
// faster animations than repeatedly installing timout timers. focus: function() {
function setTimer(timeout) { focused = true;
window.clearInterval(timer); },
timer = window.setInterval(function() { blur: function() {
// Checks all installed callbacks for element visibility and execute focused = false;
// if needed. }
if (!focused) });
return;
for (var i = callbacks.length - 1; i >= 0; i--) {
var entry = callbacks[i],
func = entry[0],
element = entry[1];
if (!element || DomElement.isVisible(element)) {
// Handle callback and remove it from callbacks list.
callbacks.splice(i, 1);
func(+new Date);
}
}
}, timeout);
}
if (!paper.debug) {
DomEvent.add(window, {
focus: function() {
focused = true;
// Switch to falst checkCallback calls while window is focused.
timer && setTimer(fastRate);
},
blur: function() {
focused = false;
// Switch to slow checkCallback calls while window is blured.
timer && setTimer(slowRate);
}
});
}
return function(callback, element) { return function(callback, element) {
// See if we can handle natively first
if (request) if (request)
return request(callback, element); return request(callback, element);
// If not, do the callback handling ourself:
callbacks.push([callback, element]); callbacks.push([callback, element]);
!timer && setTimer(fastRate); if (!timer) {
// Installs interval timer that checks all callbacks. This results
// in faster animations than repeatedly installing timout timers.
timer = window.setInterval(function() {
// Checks all installed callbacks for element visibility and
// execute if needed.
for (var i = callbacks.length - 1; i >= 0; i--) {
var entry = callbacks[i],
func = entry[0],
element = entry[1];
if (!element || element.getAttribute('keepalive') == 'true'
|| focused && DomElement.isVisible(element)) {
// Handle callback and remove it from callbacks list.
callbacks.splice(i, 1);
func(+new Date);
}
}
}, 1000 / 60);
}
}; };
}; };

7
src/load.js
View file

@ -108,12 +108,5 @@ if (window.tests) {
for (var i = 0; i < sources.length; i++) { for (var i = 0; i < sources.length; i++) {
document.write('<script type="text/javascript" src="' + (window.root || '') document.write('<script type="text/javascript" src="' + (window.root || '')
+ sources[i] + '"></script>'); + sources[i] + '"></script>');
if (sources[i] === 'src/paper.js') {
// Activate paper.debug for code loaded through load.js, as we're in
// development mode.
document.write('<script type="text/javascript">'
+ 'paper.debug = false;'
+ '</script>');
}
} }