fix output
This commit is contained in:
+56
@@ -0,0 +1,56 @@
|
||||
function createRenderStep(runNextFrame) {
|
||||
let toRun = [];
|
||||
let toRunNextFrame = [];
|
||||
let numToRun = 0;
|
||||
let isProcessing = false;
|
||||
let flushNextFrame = false;
|
||||
const toKeepAlive = new WeakSet();
|
||||
const step = {
|
||||
schedule: (callback, keepAlive = false, immediate = false) => {
|
||||
const addToCurrentFrame = immediate && isProcessing;
|
||||
const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
|
||||
if (keepAlive)
|
||||
toKeepAlive.add(callback);
|
||||
if (buffer.indexOf(callback) === -1) {
|
||||
buffer.push(callback);
|
||||
if (addToCurrentFrame && isProcessing)
|
||||
numToRun = toRun.length;
|
||||
}
|
||||
return callback;
|
||||
},
|
||||
cancel: (callback) => {
|
||||
const index = toRunNextFrame.indexOf(callback);
|
||||
if (index !== -1)
|
||||
toRunNextFrame.splice(index, 1);
|
||||
toKeepAlive.delete(callback);
|
||||
},
|
||||
process: (frameData) => {
|
||||
if (isProcessing) {
|
||||
flushNextFrame = true;
|
||||
return;
|
||||
}
|
||||
isProcessing = true;
|
||||
[toRun, toRunNextFrame] = [toRunNextFrame, toRun];
|
||||
toRunNextFrame.length = 0;
|
||||
numToRun = toRun.length;
|
||||
if (numToRun) {
|
||||
for (let i = 0; i < numToRun; i++) {
|
||||
const callback = toRun[i];
|
||||
callback(frameData);
|
||||
if (toKeepAlive.has(callback)) {
|
||||
step.schedule(callback);
|
||||
runNextFrame();
|
||||
}
|
||||
}
|
||||
}
|
||||
isProcessing = false;
|
||||
if (flushNextFrame) {
|
||||
flushNextFrame = false;
|
||||
step.process(frameData);
|
||||
}
|
||||
},
|
||||
};
|
||||
return step;
|
||||
}
|
||||
|
||||
export { createRenderStep };
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
import { onNextFrame, defaultTimestep } from './on-next-frame.mjs';
|
||||
import { createRenderStep } from './create-render-step.mjs';
|
||||
|
||||
const maxElapsed = 40;
|
||||
let useDefaultElapsed = true;
|
||||
let runNextFrame = false;
|
||||
let isProcessing = false;
|
||||
const frame = {
|
||||
delta: 0,
|
||||
timestamp: 0,
|
||||
};
|
||||
const stepsOrder = [
|
||||
"read",
|
||||
"update",
|
||||
"preRender",
|
||||
"render",
|
||||
"postRender",
|
||||
];
|
||||
const steps = stepsOrder.reduce((acc, key) => {
|
||||
acc[key] = createRenderStep(() => (runNextFrame = true));
|
||||
return acc;
|
||||
}, {});
|
||||
const sync = stepsOrder.reduce((acc, key) => {
|
||||
const step = steps[key];
|
||||
acc[key] = (process, keepAlive = false, immediate = false) => {
|
||||
if (!runNextFrame)
|
||||
startLoop();
|
||||
return step.schedule(process, keepAlive, immediate);
|
||||
};
|
||||
return acc;
|
||||
}, {});
|
||||
const cancelSync = stepsOrder.reduce((acc, key) => {
|
||||
acc[key] = steps[key].cancel;
|
||||
return acc;
|
||||
}, {});
|
||||
const flushSync = stepsOrder.reduce((acc, key) => {
|
||||
acc[key] = () => steps[key].process(frame);
|
||||
return acc;
|
||||
}, {});
|
||||
const processStep = (stepId) => steps[stepId].process(frame);
|
||||
const processFrame = (timestamp) => {
|
||||
runNextFrame = false;
|
||||
frame.delta = useDefaultElapsed
|
||||
? defaultTimestep
|
||||
: Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
|
||||
frame.timestamp = timestamp;
|
||||
isProcessing = true;
|
||||
stepsOrder.forEach(processStep);
|
||||
isProcessing = false;
|
||||
if (runNextFrame) {
|
||||
useDefaultElapsed = false;
|
||||
onNextFrame(processFrame);
|
||||
}
|
||||
};
|
||||
const startLoop = () => {
|
||||
runNextFrame = true;
|
||||
useDefaultElapsed = true;
|
||||
if (!isProcessing)
|
||||
onNextFrame(processFrame);
|
||||
};
|
||||
const getFrameData = () => frame;
|
||||
|
||||
export default sync;
|
||||
export { cancelSync, flushSync, getFrameData };
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
const defaultTimestep = (1 / 60) * 1000;
|
||||
const getCurrentTime = typeof performance !== "undefined"
|
||||
? () => performance.now()
|
||||
: () => Date.now();
|
||||
const onNextFrame = typeof window !== "undefined"
|
||||
? (callback) => window.requestAnimationFrame(callback)
|
||||
: (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
|
||||
|
||||
export { defaultTimestep, onNextFrame };
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
{
|
||||
"name": "framesync",
|
||||
"license": "MIT",
|
||||
"version": "6.1.2",
|
||||
"description": "A frame-synced render loop for JavaScript",
|
||||
"author": "Matt Perry",
|
||||
"homepage": "https://popmotion.io",
|
||||
"main": "dist/framesync.cjs.js",
|
||||
"types": "lib/index.d.ts",
|
||||
"module": "dist/es/index.mjs",
|
||||
"jsnext:main": "dist/es/index.mjs",
|
||||
"unpkg": "./dist/framesync.min.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./lib/index.d.ts",
|
||||
"import": "./dist/es/index.mjs",
|
||||
"require": "./dist/framesync.cjs.js",
|
||||
"default": "./dist/framesync.cjs.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc -p . && rollup -c && yarn measure",
|
||||
"watch": "rollup -c -w",
|
||||
"lint": "tslint -c tslint.json 'src/**/*.{ts}'",
|
||||
"test": "jest",
|
||||
"measure": "gzip -c dist/framesync.min.js | wc -c",
|
||||
"prepublishOnly": "npm run test && npm run build"
|
||||
},
|
||||
"files": [
|
||||
"lib",
|
||||
"dist"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/Popmotion/popmotion.git"
|
||||
},
|
||||
"keywords": [
|
||||
"animation",
|
||||
"raf"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://github.com/Popmotion/popmotion/issues"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"ts",
|
||||
"js"
|
||||
],
|
||||
"transform": {
|
||||
"\\.(ts)$": "../../../node_modules/ts-jest/preprocessor.js"
|
||||
},
|
||||
"testRegex": "/_tests/.*\\.(ts|js)$",
|
||||
"rootDir": "src"
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 80,
|
||||
"tabWidth": 4,
|
||||
"semi": false,
|
||||
"trailingComma": "es5"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": "2.4.0"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user