7 changed files with 1 additions and 352 deletions
@ -1 +0,0 @@ |
|||||
|
|
||||
@ -1,117 +0,0 @@ |
|||||
const webpack = require('webpack'); |
|
||||
const path = require('path'); |
|
||||
const LiveReloadPlugin = require('webpack-livereload-plugin'); |
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin'); |
|
||||
const CompressionPlugin = require('compression-webpack-plugin'); |
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin'); |
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); |
|
||||
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); |
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin'); |
|
||||
const prod = process.env.NODE_ENV == 'production'; |
|
||||
|
|
||||
class Printer { |
|
||||
apply(compiler) { |
|
||||
compiler.hooks.afterEmit.tap("Printer", ()=> console.log("Build completed at " + new Date().toString())); |
|
||||
compiler.hooks.watchRun.tap("Printer", ()=> console.log("Watch triggered at " + new Date().toString())); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const config = { |
|
||||
entry: { |
|
||||
bundle: './src/index.tsx' |
|
||||
}, |
|
||||
output: { |
|
||||
path: path.resolve(__dirname, 'build'), |
|
||||
publicPath: '/', |
|
||||
filename: '[name].[chunkhash].js' |
|
||||
}, |
|
||||
performance: { hints: false }, |
|
||||
mode: prod ? "production" : "development", |
|
||||
module: { |
|
||||
rules: [ |
|
||||
{ |
|
||||
enforce: "pre", |
|
||||
test: /\.js$/, |
|
||||
loader: "source-map-loader", |
|
||||
exclude: [ |
|
||||
path.resolve(__dirname, 'node_modules/mobx-state-router') |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
"oneOf": [ |
|
||||
{ |
|
||||
test: /\.(ts|tsx)$/, |
|
||||
exclude: /node_modules/, |
|
||||
use: 'awesome-typescript-loader' |
|
||||
}, |
|
||||
{ |
|
||||
test: /\.css$/, |
|
||||
use: [ |
|
||||
MiniCssExtractPlugin.loader, |
|
||||
'css-loader' |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
test: /\.(jpg|png)$/, |
|
||||
use: { |
|
||||
loader: "url-loader", |
|
||||
options: { |
|
||||
limit: 25000, |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, |
|
||||
use: [{ |
|
||||
loader: 'file-loader', |
|
||||
options: { |
|
||||
name: '[name].[ext]', |
|
||||
outputPath: 'fonts/', // where the fonts will go
|
|
||||
} |
|
||||
}] |
|
||||
}, |
|
||||
{ |
|
||||
loader: require.resolve('file-loader'), |
|
||||
exclude: [/\.(js|jsx|mjs|tsx|ts)$/, /\.html$/, /\.json$/], |
|
||||
options: { |
|
||||
name: 'assets/[name].[hash:8].[ext]', |
|
||||
}, |
|
||||
}] |
|
||||
}, |
|
||||
|
|
||||
] |
|
||||
}, |
|
||||
devtool: "source-map", |
|
||||
resolve: { |
|
||||
modules: [path.resolve(__dirname, 'node_modules')], |
|
||||
plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json", logLevel: 'info' })], |
|
||||
extensions: ['.ts', '.tsx', '.js', '.json'], |
|
||||
alias: { |
|
||||
'src': path.resolve(__dirname, 'src') |
|
||||
} |
|
||||
}, |
|
||||
plugins: |
|
||||
[ |
|
||||
new Printer(), |
|
||||
new CleanWebpackPlugin([path.resolve(__dirname, 'build')], { verbose: false }), |
|
||||
new MiniCssExtractPlugin({ |
|
||||
filename: "[name].[chunkhash]h" + |
|
||||
".css", |
|
||||
chunkFilename: "[id].[chunkhash].css" |
|
||||
}), |
|
||||
new LiveReloadPlugin({appendScriptTag: !prod}), |
|
||||
new HtmlWebpackPlugin({ |
|
||||
template: path.resolve(__dirname, './src/index.html'), |
|
||||
filename: 'index.html' //relative to root of the application
|
|
||||
}), |
|
||||
new CopyWebpackPlugin([ |
|
||||
// relative path from src
|
|
||||
//{ from: './src/favicon.ico' },
|
|
||||
//{ from: './src/assets' }
|
|
||||
]), |
|
||||
new CompressionPlugin({ |
|
||||
test: /(\?.*)?$/i |
|
||||
}) |
|
||||
] |
|
||||
}; |
|
||||
module.exports = config; |
|
||||
@ -1,28 +0,0 @@ |
|||||
export class DpiWatcher { |
|
||||
static getDpi() { |
|
||||
return window.devicePixelRatio; |
|
||||
} |
|
||||
static start(callback) { |
|
||||
//console.info(`Starting DPI watcher with callback ${callback._id}...`);
|
|
||||
DpiWatcher.lastDpi = window.devicePixelRatio; |
|
||||
DpiWatcher.timerId = window.setInterval(DpiWatcher.update, 1000); |
|
||||
DpiWatcher.callback = callback; |
|
||||
return DpiWatcher.lastDpi; |
|
||||
} |
|
||||
static stop() { |
|
||||
//console.info(`Stopping DPI watcher with callback ${DpiWatcher.callback._id}...`);
|
|
||||
window.clearInterval(DpiWatcher.timerId); |
|
||||
DpiWatcher.callback = undefined; |
|
||||
} |
|
||||
static update() { |
|
||||
if (!DpiWatcher.callback) |
|
||||
return; |
|
||||
const currentDpi = window.devicePixelRatio; |
|
||||
const lastDpi = DpiWatcher.lastDpi; |
|
||||
DpiWatcher.lastDpi = currentDpi; |
|
||||
if (Math.abs(lastDpi - currentDpi) > 0.001) { |
|
||||
DpiWatcher.callback.invokeMethod('Invoke', lastDpi, currentDpi); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
//# sourceMappingURL=DpiWatcher.js.map
|
|
||||
@ -1,163 +0,0 @@ |
|||||
export class SKHtmlCanvas { |
|
||||
constructor(useGL, element, callback) { |
|
||||
this.renderLoopEnabled = false; |
|
||||
this.renderLoopRequest = 0; |
|
||||
this.htmlCanvas = element; |
|
||||
this.renderFrameCallback = callback; |
|
||||
if (useGL) { |
|
||||
const ctx = SKHtmlCanvas.createWebGLContext(this.htmlCanvas); |
|
||||
if (!ctx) { |
|
||||
console.error(`Failed to create WebGL context: err ${ctx}`); |
|
||||
return null; |
|
||||
} |
|
||||
// make current
|
|
||||
GL.makeContextCurrent(ctx); |
|
||||
// read values
|
|
||||
const fbo = GLctx.getParameter(GLctx.FRAMEBUFFER_BINDING); |
|
||||
this.glInfo = { |
|
||||
context: ctx, |
|
||||
fboId: fbo ? fbo.id : 0, |
|
||||
stencil: GLctx.getParameter(GLctx.STENCIL_BITS), |
|
||||
sample: 0, |
|
||||
depth: GLctx.getParameter(GLctx.DEPTH_BITS), |
|
||||
}; |
|
||||
} |
|
||||
} |
|
||||
static initGL(element, elementId, callback) { |
|
||||
var view = SKHtmlCanvas.init(true, element, elementId, callback); |
|
||||
if (!view || !view.glInfo) |
|
||||
return null; |
|
||||
return view.glInfo; |
|
||||
} |
|
||||
static initRaster(element, elementId, callback) { |
|
||||
var view = SKHtmlCanvas.init(false, element, elementId, callback); |
|
||||
if (!view) |
|
||||
return false; |
|
||||
return true; |
|
||||
} |
|
||||
static init(useGL, element, elementId, callback) { |
|
||||
var htmlCanvas = element; |
|
||||
if (!htmlCanvas) { |
|
||||
console.error(`No canvas element was provided.`); |
|
||||
return null; |
|
||||
} |
|
||||
if (!SKHtmlCanvas.elements) |
|
||||
SKHtmlCanvas.elements = new Map(); |
|
||||
SKHtmlCanvas.elements[elementId] = element; |
|
||||
const view = new SKHtmlCanvas(useGL, element, callback); |
|
||||
htmlCanvas.SKHtmlCanvas = view; |
|
||||
return view; |
|
||||
} |
|
||||
static deinit(elementId) { |
|
||||
if (!elementId) |
|
||||
return; |
|
||||
const element = SKHtmlCanvas.elements[elementId]; |
|
||||
SKHtmlCanvas.elements.delete(elementId); |
|
||||
const htmlCanvas = element; |
|
||||
if (!htmlCanvas || !htmlCanvas.SKHtmlCanvas) |
|
||||
return; |
|
||||
htmlCanvas.SKHtmlCanvas.deinit(); |
|
||||
htmlCanvas.SKHtmlCanvas = undefined; |
|
||||
} |
|
||||
static requestAnimationFrame(element, renderLoop, width, height) { |
|
||||
const htmlCanvas = element; |
|
||||
if (!htmlCanvas || !htmlCanvas.SKHtmlCanvas) |
|
||||
return; |
|
||||
htmlCanvas.SKHtmlCanvas.requestAnimationFrame(renderLoop, width, height); |
|
||||
} |
|
||||
static setEnableRenderLoop(element, enable) { |
|
||||
const htmlCanvas = element; |
|
||||
if (!htmlCanvas || !htmlCanvas.SKHtmlCanvas) |
|
||||
return; |
|
||||
htmlCanvas.SKHtmlCanvas.setEnableRenderLoop(enable); |
|
||||
} |
|
||||
static putImageData(element, pData, width, height) { |
|
||||
const htmlCanvas = element; |
|
||||
if (!htmlCanvas || !htmlCanvas.SKHtmlCanvas) |
|
||||
return; |
|
||||
htmlCanvas.SKHtmlCanvas.putImageData(pData, width, height); |
|
||||
} |
|
||||
deinit() { |
|
||||
this.setEnableRenderLoop(false); |
|
||||
} |
|
||||
requestAnimationFrame(renderLoop, width, height) { |
|
||||
// optionally update the render loop
|
|
||||
if (renderLoop !== undefined && this.renderLoopEnabled !== renderLoop) |
|
||||
this.setEnableRenderLoop(renderLoop); |
|
||||
// make sure the canvas is scaled correctly for the drawing
|
|
||||
if (width && height) { |
|
||||
this.htmlCanvas.width = width; |
|
||||
this.htmlCanvas.height = height; |
|
||||
} |
|
||||
// skip because we have a render loop
|
|
||||
if (this.renderLoopRequest !== 0) |
|
||||
return; |
|
||||
// add the draw to the next frame
|
|
||||
this.renderLoopRequest = window.requestAnimationFrame(() => { |
|
||||
if (this.glInfo) { |
|
||||
// make current
|
|
||||
GL.makeContextCurrent(this.glInfo.context); |
|
||||
} |
|
||||
this.renderFrameCallback.invokeMethod('Invoke'); |
|
||||
this.renderLoopRequest = 0; |
|
||||
// we may want to draw the next frame
|
|
||||
if (this.renderLoopEnabled) |
|
||||
this.requestAnimationFrame(); |
|
||||
}); |
|
||||
} |
|
||||
setEnableRenderLoop(enable) { |
|
||||
this.renderLoopEnabled = enable; |
|
||||
// either start the new frame or cancel the existing one
|
|
||||
if (enable) { |
|
||||
//console.info(`Enabling render loop with callback ${this.renderFrameCallback._id}...`);
|
|
||||
this.requestAnimationFrame(); |
|
||||
} |
|
||||
else if (this.renderLoopRequest !== 0) { |
|
||||
window.cancelAnimationFrame(this.renderLoopRequest); |
|
||||
this.renderLoopRequest = 0; |
|
||||
} |
|
||||
} |
|
||||
putImageData(pData, width, height) { |
|
||||
if (this.glInfo || !pData || width <= 0 || width <= 0) |
|
||||
return false; |
|
||||
var ctx = this.htmlCanvas.getContext('2d'); |
|
||||
if (!ctx) { |
|
||||
console.error(`Failed to obtain 2D canvas context.`); |
|
||||
return false; |
|
||||
} |
|
||||
// make sure the canvas is scaled correctly for the drawing
|
|
||||
this.htmlCanvas.width = width; |
|
||||
this.htmlCanvas.height = height; |
|
||||
// set the canvas to be the bytes
|
|
||||
var buffer = new Uint8ClampedArray(Module.HEAPU8.buffer, pData, width * height * 4); |
|
||||
var imageData = new ImageData(buffer, width, height); |
|
||||
ctx.putImageData(imageData, 0, 0); |
|
||||
return true; |
|
||||
} |
|
||||
static createWebGLContext(htmlCanvas) { |
|
||||
const contextAttributes = { |
|
||||
alpha: 1, |
|
||||
depth: 1, |
|
||||
stencil: 8, |
|
||||
antialias: 1, |
|
||||
premultipliedAlpha: 1, |
|
||||
preserveDrawingBuffer: 0, |
|
||||
preferLowPowerToHighPerformance: 0, |
|
||||
failIfMajorPerformanceCaveat: 0, |
|
||||
majorVersion: 2, |
|
||||
minorVersion: 0, |
|
||||
enableExtensionsByDefault: 1, |
|
||||
explicitSwapControl: 0, |
|
||||
renderViaOffscreenBackBuffer: 0, |
|
||||
}; |
|
||||
let ctx = GL.createContext(htmlCanvas, contextAttributes); |
|
||||
if (!ctx && contextAttributes.majorVersion > 1) { |
|
||||
console.warn('Falling back to WebGL 1.0'); |
|
||||
contextAttributes.majorVersion = 1; |
|
||||
contextAttributes.minorVersion = 0; |
|
||||
ctx = GL.createContext(htmlCanvas, contextAttributes); |
|
||||
} |
|
||||
return ctx; |
|
||||
} |
|
||||
} |
|
||||
//# sourceMappingURL=SKHtmlCanvas.js.map
|
|
||||
@ -1,42 +0,0 @@ |
|||||
export class SizeWatcher { |
|
||||
static observe(element, elementId, callback) { |
|
||||
if (!element || !callback) |
|
||||
return; |
|
||||
//console.info(`Adding size watcher observation with callback ${callback._id}...`);
|
|
||||
SizeWatcher.init(); |
|
||||
const watcherElement = element; |
|
||||
watcherElement.SizeWatcher = { |
|
||||
callback: callback |
|
||||
}; |
|
||||
SizeWatcher.elements[elementId] = element; |
|
||||
SizeWatcher.observer.observe(element); |
|
||||
SizeWatcher.invoke(element); |
|
||||
} |
|
||||
static unobserve(elementId) { |
|
||||
if (!elementId || !SizeWatcher.observer) |
|
||||
return; |
|
||||
//console.info('Removing size watcher observation...');
|
|
||||
const element = SizeWatcher.elements[elementId]; |
|
||||
SizeWatcher.elements.delete(elementId); |
|
||||
SizeWatcher.observer.unobserve(element); |
|
||||
} |
|
||||
static init() { |
|
||||
if (SizeWatcher.observer) |
|
||||
return; |
|
||||
//console.info('Starting size watcher...');
|
|
||||
SizeWatcher.elements = new Map(); |
|
||||
SizeWatcher.observer = new ResizeObserver((entries) => { |
|
||||
for (let entry of entries) { |
|
||||
SizeWatcher.invoke(entry.target); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
static invoke(element) { |
|
||||
const watcherElement = element; |
|
||||
const instance = watcherElement.SizeWatcher; |
|
||||
if (!instance || !instance.callback) |
|
||||
return; |
|
||||
return instance.callback.invokeMethod('Invoke', element.clientWidth, element.clientHeight); |
|
||||
} |
|
||||
} |
|
||||
//# sourceMappingURL=SizeWatcher.js.map
|
|
||||
@ -1 +0,0 @@ |
|||||
*.js |
|
||||
Loading…
Reference in new issue