forked from external-repos/squoosh
Compare commits
1 Commits
testing
...
prerenderi
| Author | SHA1 | Date | |
|---|---|---|---|
|
dbf38e5a44 |
40
.babelrc
40
.babelrc
@@ -1,13 +1,31 @@
|
||||
{
|
||||
"plugins": [
|
||||
"transform-class-properties",
|
||||
"transform-react-constant-elements",
|
||||
"transform-react-remove-prop-types",
|
||||
[
|
||||
"transform-react-jsx",
|
||||
{
|
||||
"pragma": "h"
|
||||
}
|
||||
]
|
||||
]
|
||||
"presets": [
|
||||
[
|
||||
"env",
|
||||
{
|
||||
"loose": true,
|
||||
"uglify": false,
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": "last 2 versions"
|
||||
},
|
||||
"exclude": [
|
||||
"transform-regenerator",
|
||||
"transform-es2015-typeof-symbol"
|
||||
]
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": [
|
||||
"transform-decorators-legacy",
|
||||
"transform-class-properties",
|
||||
"transform-react-constant-elements",
|
||||
"transform-react-remove-prop-types",
|
||||
[
|
||||
"transform-react-jsx",
|
||||
{
|
||||
"pragma": "h"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"projects": {
|
||||
"default": "squoosh-beta"
|
||||
}
|
||||
}
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -2,4 +2,3 @@ node_modules
|
||||
/build
|
||||
/*.log
|
||||
*.scss.d.ts
|
||||
*.css.d.ts
|
||||
|
||||
20
Dockerfile
20
Dockerfile
@@ -1,20 +0,0 @@
|
||||
FROM selenium/node-chrome:latest
|
||||
|
||||
USER root
|
||||
|
||||
RUN apt-get update -qqy \
|
||||
&& apt-get -qqy install python git build-essential \
|
||||
&& rm -rf /var/lib/apt/lists/* /var/cache/apt/* \
|
||||
&& rm /bin/sh && ln -s /bin/bash /bin/sh \
|
||||
&& chown seluser /usr/local
|
||||
|
||||
ENV NVM_DIR /usr/local/nvm
|
||||
RUN wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash \
|
||||
&& source $NVM_DIR/nvm.sh \
|
||||
&& nvm install v8
|
||||
|
||||
ENV CHROME_BIN /opt/google/chrome/chrome
|
||||
ENV INSIDE_DOCKER=1
|
||||
|
||||
WORKDIR /usr/src
|
||||
ENTRYPOINT source $NVM_DIR/nvm.sh && npm i && npm test
|
||||
@@ -1,16 +0,0 @@
|
||||
# Codecs
|
||||
|
||||
This folder contains a self-contained sub-project for each encoder and decoder that squoosh supplies.
|
||||
|
||||
## Build
|
||||
|
||||
Each subproject can be built using [Docker](https://www.docker.com/) the following commands:
|
||||
|
||||
```
|
||||
$ npm install
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
This will build two files: `<codec name>_<enc or dec>.js` and `<codec name>_<enc or dec>.wasm`. It will most likely be necessary to set [`Module["locateFile"]`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html#affecting-execution) to sucessfully load the `.wasm` file. When the `.js` file is loaded, a global `<codec name>_<enc or dec>` is created with the same API as an [Emscripten `Module`](https://kripken.github.io/emscripten-site/docs/api_reference/module.html).
|
||||
|
||||
Each codec will document its API in its README.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 MiB |
@@ -1,44 +0,0 @@
|
||||
# MozJPEG encoder
|
||||
|
||||
- Source: <https://github.com/mozilla/mozjpeg>
|
||||
- Version: v3.3.1
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Docker
|
||||
- Automake
|
||||
- pkg-config
|
||||
|
||||
## Example
|
||||
|
||||
See `example.html`
|
||||
|
||||
## API
|
||||
|
||||
### `int version()`
|
||||
|
||||
Returns the version of MozJPEG as a number. va.b.c is encoded as 0x0a0b0c
|
||||
|
||||
### `uint8_t* create_buffer(int width, int height)`
|
||||
|
||||
Allocates an RGBA buffer for an image with the given dimension.
|
||||
|
||||
### `void destroy_buffer(uint8_t* p)`
|
||||
|
||||
Frees a buffer created with `create_buffer`.
|
||||
|
||||
### `void encode(uint8_t* image_buffer, int image_width, int image_height, int quality)`
|
||||
|
||||
Encodes the given image with given dimension to JPEG. `quality` is a number between 0 and 100. The higher the number, the better the quality of the encoded image. The result is implicitly stored and can be accessed using the `get_result_*()` functions.
|
||||
|
||||
### `void free_result()`
|
||||
|
||||
Frees the result created by `encode()`.
|
||||
|
||||
### `int get_result_pointer()`
|
||||
|
||||
Returns the pointer to the start of the buffer holding the encoded data.
|
||||
|
||||
### `int get_result_size()`
|
||||
|
||||
Returns the length of the buffer holding the encoded data.
|
||||
@@ -1,47 +0,0 @@
|
||||
<!doctype html>
|
||||
<script src='mozjpeg_enc.js'></script>
|
||||
<script>
|
||||
const Module = mozjpeg_enc();
|
||||
|
||||
async function loadImage(src) {
|
||||
// Load image
|
||||
const img = document.createElement('img');
|
||||
img.src = src;
|
||||
await new Promise(resolve => img.onload = resolve);
|
||||
// Make canvas same size as image
|
||||
const canvas = document.createElement('canvas');
|
||||
[canvas.width, canvas.height] = [img.width, img.height];
|
||||
// Draw image onto canvas
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(img, 0, 0);
|
||||
return ctx.getImageData(0, 0, img.width, img.height);
|
||||
}
|
||||
|
||||
Module.onRuntimeInitialized = async _ => {
|
||||
const api = {
|
||||
version: Module.cwrap('version', 'number', []),
|
||||
create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
|
||||
destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
|
||||
encode: Module.cwrap('encode', '', ['number', 'number', 'number', 'number']),
|
||||
free_result: Module.cwrap('free_result', '', ['number']),
|
||||
get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
|
||||
get_result_size: Module.cwrap('get_result_size', 'number', []),
|
||||
};
|
||||
const image = await loadImage('../example.png');
|
||||
const p = api.create_buffer(image.width, image.height);
|
||||
Module.HEAP8.set(image.data, p);
|
||||
api.encode(p, image.width, image.height, 2);
|
||||
const resultPointer = api.get_result_pointer();
|
||||
const resultSize = api.get_result_size();
|
||||
const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize);
|
||||
const result = new Uint8Array(resultView);
|
||||
api.free_result(resultPointer);
|
||||
api.destroy_buffer(p);
|
||||
|
||||
const blob = new Blob([result], {type: 'image/jpeg'});
|
||||
const blobURL = URL.createObjectURL(blob);
|
||||
const img = document.createElement('img');
|
||||
img.src = blobURL;
|
||||
document.body.appendChild(img);
|
||||
};
|
||||
</script>
|
||||
@@ -1,178 +0,0 @@
|
||||
#include "emscripten.h"
|
||||
#include <stdlib.h>
|
||||
#include <inttypes.h>
|
||||
#include <stdio.h>
|
||||
#include <setjmp.h>
|
||||
#include <string.h>
|
||||
#include "jpeglib.h"
|
||||
#include "config.h"
|
||||
|
||||
// MozJPEG doesn’t expose a numeric version, so I have to do some fun C macro hackery to turn it into a string. More details here: https://gcc.gnu.org/onlinedocs/cpp/Stringizing.html
|
||||
#define xstr(s) str(s)
|
||||
#define str(s) #s
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
int version() {
|
||||
char buffer[] = xstr(MOZJPEG_VERSION);
|
||||
int version = 0;
|
||||
int last_index = 0;
|
||||
for(int i = 0; i < strlen(buffer); i++) {
|
||||
if(buffer[i] == '.') {
|
||||
buffer[i] = '\0';
|
||||
version = version << 8 | atoi(&buffer[last_index]);
|
||||
buffer[i] = '.';
|
||||
last_index = i + 1;
|
||||
}
|
||||
}
|
||||
version = version << 8 | atoi(&buffer[last_index]);
|
||||
return version;
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
uint8_t* create_buffer(int width, int height) {
|
||||
return malloc(width * height * 4 * sizeof(uint8_t));
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
void destroy_buffer(uint8_t* p) {
|
||||
free(p);
|
||||
}
|
||||
|
||||
int result[2];
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
void encode(uint8_t* image_buffer, int image_width, int image_height, int quality) {
|
||||
// Manually convert RGBA data into RGB
|
||||
for(int y = 0; y < image_height; y++) {
|
||||
for(int x = 0; x < image_width; x++) {
|
||||
image_buffer[(y*image_width + x)*3 + 0] = image_buffer[(y*image_width + x)*4 + 0];
|
||||
image_buffer[(y*image_width + x)*3 + 1] = image_buffer[(y*image_width + x)*4 + 1];
|
||||
image_buffer[(y*image_width + x)*3 + 2] = image_buffer[(y*image_width + x)*4 + 2];
|
||||
}
|
||||
}
|
||||
|
||||
// The code below is basically the `write_JPEG_file` function from
|
||||
// https://github.com/mozilla/mozjpeg/blob/master/example.c
|
||||
// I just write to memory instead of a file.
|
||||
|
||||
|
||||
/* This struct contains the JPEG compression parameters and pointers to
|
||||
* working space (which is allocated as needed by the JPEG library).
|
||||
* It is possible to have several such structures, representing multiple
|
||||
* compression/decompression processes, in existence at once. We refer
|
||||
* to any one struct (and its associated working data) as a "JPEG object".
|
||||
*/
|
||||
struct jpeg_compress_struct cinfo;
|
||||
/* This struct represents a JPEG error handler. It is declared separately
|
||||
* because applications often want to supply a specialized error handler
|
||||
* (see the second half of this file for an example). But here we just
|
||||
* take the easy way out and use the standard error handler, which will
|
||||
* print a message on stderr and call exit() if compression fails.
|
||||
* Note that this struct must live as long as the main JPEG parameter
|
||||
* struct, to avoid dangling-pointer problems.
|
||||
*/
|
||||
struct jpeg_error_mgr jerr;
|
||||
/* More stuff */
|
||||
JSAMPROW row_pointer[1]; /* pointer to JSAMPLE row[s] */
|
||||
int row_stride; /* physical row width in image buffer */
|
||||
uint8_t* output;
|
||||
unsigned long size;
|
||||
|
||||
/* Step 1: allocate and initialize JPEG compression object */
|
||||
|
||||
/* We have to set up the error handler first, in case the initialization
|
||||
* step fails. (Unlikely, but it could happen if you are out of memory.)
|
||||
* This routine fills in the contents of struct jerr, and returns jerr's
|
||||
* address which we place into the link field in cinfo.
|
||||
*/
|
||||
cinfo.err = jpeg_std_error(&jerr);
|
||||
/* Now we can initialize the JPEG compression object. */
|
||||
jpeg_create_compress(&cinfo);
|
||||
|
||||
/* Step 2: specify data destination (eg, a file) */
|
||||
/* Note: steps 2 and 3 can be done in either order. */
|
||||
|
||||
/* Here we use the library-supplied code to send compressed data to a
|
||||
* stdio stream. You can also write your own code to do something else.
|
||||
* VERY IMPORTANT: use "b" option to fopen() if you are on a machine that
|
||||
* requires it in order to write binary files.
|
||||
*/
|
||||
// if ((outfile = fopen(filename, "wb")) == NULL) {
|
||||
// fprintf(stderr, "can't open %s\n", filename);
|
||||
// exit(1);
|
||||
// }
|
||||
jpeg_mem_dest(&cinfo, &output, &size);
|
||||
|
||||
/* Step 3: set parameters for compression */
|
||||
|
||||
/* First we supply a description of the input image.
|
||||
* Four fields of the cinfo struct must be filled in:
|
||||
*/
|
||||
cinfo.image_width = image_width; /* image width and height, in pixels */
|
||||
cinfo.image_height = image_height;
|
||||
cinfo.input_components = 3; /* # of color components per pixel */
|
||||
cinfo.in_color_space = JCS_RGB; /* colorspace of input image */
|
||||
/* Now use the library's routine to set default compression parameters.
|
||||
* (You must set at least cinfo.in_color_space before calling this,
|
||||
* since the defaults depend on the source color space.)
|
||||
*/
|
||||
jpeg_set_defaults(&cinfo);
|
||||
/* Now you can set any non-default parameters you wish to.
|
||||
* Here we just illustrate the use of quality (quantization table) scaling:
|
||||
*/
|
||||
jpeg_set_quality(&cinfo, quality, TRUE /* limit to baseline-JPEG values */);
|
||||
|
||||
/* Step 4: Start compressor */
|
||||
|
||||
/* TRUE ensures that we will write a complete interchange-JPEG file.
|
||||
* Pass TRUE unless you are very sure of what you're doing.
|
||||
*/
|
||||
jpeg_start_compress(&cinfo, TRUE);
|
||||
|
||||
/* Step 5: while (scan lines remain to be written) */
|
||||
/* jpeg_write_scanlines(...); */
|
||||
|
||||
/* Here we use the library's state variable cinfo.next_scanline as the
|
||||
* loop counter, so that we don't have to keep track ourselves.
|
||||
* To keep things simple, we pass one scanline per call; you can pass
|
||||
* more if you wish, though.
|
||||
*/
|
||||
row_stride = image_width * 3; /* JSAMPLEs per row in image_buffer */
|
||||
|
||||
while (cinfo.next_scanline < cinfo.image_height) {
|
||||
/* jpeg_write_scanlines expects an array of pointers to scanlines.
|
||||
* Here the array is only one element long, but you could pass
|
||||
* more than one scanline at a time if that's more convenient.
|
||||
*/
|
||||
row_pointer[0] = & image_buffer[cinfo.next_scanline * row_stride];
|
||||
(void) jpeg_write_scanlines(&cinfo, row_pointer, 1);
|
||||
}
|
||||
|
||||
/* Step 6: Finish compression */
|
||||
|
||||
jpeg_finish_compress(&cinfo);
|
||||
/* Step 7: release JPEG compression object */
|
||||
|
||||
result[0] = (int)output;
|
||||
result[1] = size;
|
||||
|
||||
/* This is an important step since it will release a good deal of memory. */
|
||||
jpeg_destroy_compress(&cinfo);
|
||||
|
||||
/* And we're done! */
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
void free_result() {
|
||||
free(result[0]); // not sure if this is right with mozjpeg
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
int get_result_pointer() {
|
||||
return result[0];
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
int get_result_size() {
|
||||
return result[1];
|
||||
}
|
||||
|
||||
1
codecs/mozjpeg_enc/mozjpeg_enc.d.ts
vendored
1
codecs/mozjpeg_enc/mozjpeg_enc.d.ts
vendored
@@ -1 +0,0 @@
|
||||
export default function(opts: EmscriptenWasm.ModuleOpts): EmscriptenWasm.Module;
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
1147
codecs/mozjpeg_enc/package-lock.json
generated
1147
codecs/mozjpeg_enc/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"name": "mozjpeg_enc",
|
||||
"scripts": {
|
||||
"install": "napa",
|
||||
"build": "npm run build:library && npm run build:wasm",
|
||||
"build:library": "cd node_modules/mozjpeg && autoreconf -fiv && docker run --rm -v $(pwd):/src trzeci/emscripten emconfigure ./configure --without-simd && docker run --rm -v $(pwd):/src trzeci/emscripten emmake make libjpeg.la",
|
||||
"build:wasm": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"mozjpeg_enc\"' -I node_modules/mozjpeg -o ./mozjpeg_enc.js mozjpeg_enc.c node_modules/mozjpeg/.libs/libjpeg.a"
|
||||
},
|
||||
"napa": {
|
||||
"mozjpeg": "mozilla/mozjpeg#v3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"napa": "^3.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
# WebP encoder
|
||||
|
||||
- Source: <https://github.com/webmproject/libwebp>
|
||||
- Version: v0.6.1
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Docker
|
||||
|
||||
## Example
|
||||
|
||||
See `example.html`
|
||||
|
||||
## API
|
||||
|
||||
### `int version()`
|
||||
|
||||
Returns the version of libwebp as a number. va.b.c is encoded as 0x0a0b0c
|
||||
|
||||
### `uint8_t* create_buffer(int width, int height)`
|
||||
|
||||
Allocates an RGBA buffer for an image with the given dimension.
|
||||
|
||||
### `void destroy_buffer(uint8_t* p)`
|
||||
|
||||
Frees a buffer created with `create_buffer`.
|
||||
|
||||
### `void encode(uint8_t* image_buffer, int image_width, int image_height, float quality)`
|
||||
|
||||
Encodes the given image with given dimension to WebP. `quality` is a number between 0 and 100. The higher the number, the better the quality of the encoded image. The result is implicitly stored and can be accessed using the `get_result_*()` functions.
|
||||
|
||||
### `void free_result()`
|
||||
|
||||
Frees the result created by `encode()`.
|
||||
|
||||
### `int get_result_pointer()`
|
||||
|
||||
Returns the pointer to the start of the buffer holding the encoded data.
|
||||
|
||||
### `int get_result_size()`
|
||||
|
||||
Returns the length of the buffer holding the encoded data.
|
||||
@@ -1,47 +0,0 @@
|
||||
<!doctype html>
|
||||
<script src='webp_enc.js'></script>
|
||||
<script>
|
||||
const Module = webp_enc();
|
||||
|
||||
async function loadImage(src) {
|
||||
// Load image
|
||||
const img = document.createElement('img');
|
||||
img.src = src;
|
||||
await new Promise(resolve => img.onload = resolve);
|
||||
// Make canvas same size as image
|
||||
const canvas = document.createElement('canvas');
|
||||
[canvas.width, canvas.height] = [img.width, img.height];
|
||||
// Draw image onto canvas
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(img, 0, 0);
|
||||
return ctx.getImageData(0, 0, img.width, img.height);
|
||||
}
|
||||
|
||||
Module.onRuntimeInitialized = async _ => {
|
||||
const api = {
|
||||
version: Module.cwrap('version', 'number', []),
|
||||
create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
|
||||
destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
|
||||
encode: Module.cwrap('encode', '', ['number', 'number', 'number', 'number']),
|
||||
free_result: Module.cwrap('free_result', '', ['number']),
|
||||
get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
|
||||
get_result_size: Module.cwrap('get_result_size', 'number', []),
|
||||
};
|
||||
const image = await loadImage('../example.png');
|
||||
const p = api.create_buffer(image.width, image.height);
|
||||
Module.HEAP8.set(image.data, p);
|
||||
api.encode(p, image.width, image.height, 2);
|
||||
const resultPointer = api.get_result_pointer();
|
||||
const resultSize = api.get_result_size();
|
||||
const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize);
|
||||
const result = new Uint8Array(resultView);
|
||||
api.free_result(resultPointer);
|
||||
api.destroy_buffer(p);
|
||||
|
||||
const blob = new Blob([result], {type: 'image/jpeg'});
|
||||
const blobURL = URL.createObjectURL(blob);
|
||||
const img = document.createElement('img');
|
||||
img.src = blobURL;
|
||||
document.body.appendChild(img);
|
||||
};
|
||||
</script>
|
||||
1147
codecs/webp_enc/package-lock.json
generated
1147
codecs/webp_enc/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"name": "webp_enc",
|
||||
"scripts": {
|
||||
"install": "napa",
|
||||
"build": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"webp_enc\"' -I node_modules/libwebp -o ./webp_enc.js webp_enc.c node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c"
|
||||
},
|
||||
"napa": {
|
||||
"libwebp": "webmproject/libwebp#v0.6.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"napa": "^3.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
#include "emscripten.h"
|
||||
#include "src/webp/encode.h"
|
||||
#include <stdlib.h>
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
int version() {
|
||||
return WebPGetEncoderVersion();
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
uint8_t* create_buffer(int width, int height) {
|
||||
return malloc(width * height * 4 * sizeof(uint8_t));
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
void destroy_buffer(uint8_t* p) {
|
||||
free(p);
|
||||
}
|
||||
|
||||
int result[2];
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
void encode(uint8_t* img_in, int width, int height, float quality) {
|
||||
uint8_t* img_out;
|
||||
size_t size;
|
||||
size = WebPEncodeRGBA(img_in, width, height, width * 4, quality, &img_out);
|
||||
result[0] = (int)img_out;
|
||||
result[1] = size;
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
void free_result() {
|
||||
WebPFree(result[0]);
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
int get_result_pointer() {
|
||||
return result[0];
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
int get_result_size() {
|
||||
return result[1];
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
107
emscripten-wasm.d.ts
vendored
107
emscripten-wasm.d.ts
vendored
@@ -1,107 +0,0 @@
|
||||
// These types roughly model the object that the JS files generated by Emscripten define. Copied from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/emscripten/index.d.ts and turned into a type definition rather than a global to support our way of using Emscripten.
|
||||
// TODO(@surma): Upstream this?
|
||||
declare namespace EmscriptenWasm {
|
||||
type EnvironmentType = "WEB" | "NODE" | "SHELL" | "WORKER";
|
||||
|
||||
// Options object for modularized Emscripten files. Shoe-horned by @surma.
|
||||
// FIXME: This an incomplete definition!
|
||||
interface ModuleOpts {
|
||||
noInitialRun?: boolean;
|
||||
locateFile?: (url: string) => string;
|
||||
onRuntimeInitialized?: () => void;
|
||||
}
|
||||
|
||||
interface Module {
|
||||
print(str: string): void;
|
||||
printErr(str: string): void;
|
||||
arguments: string[];
|
||||
environment: EnvironmentType;
|
||||
preInit: { (): void }[];
|
||||
preRun: { (): void }[];
|
||||
postRun: { (): void }[];
|
||||
preinitializedWebGLContext: WebGLRenderingContext;
|
||||
noInitialRun: boolean;
|
||||
noExitRuntime: boolean;
|
||||
logReadFiles: boolean;
|
||||
filePackagePrefixURL: string;
|
||||
wasmBinary: ArrayBuffer;
|
||||
|
||||
destroy(object: object): void;
|
||||
getPreloadedPackage(remotePackageName: string, remotePackageSize: number): ArrayBuffer;
|
||||
instantiateWasm(
|
||||
imports: WebAssembly.Imports,
|
||||
successCallback: (module: WebAssembly.Module) => void
|
||||
): WebAssembly.Exports;
|
||||
locateFile(url: string): string;
|
||||
onCustomMessage(event: MessageEvent): void;
|
||||
|
||||
Runtime: any;
|
||||
|
||||
ccall(ident: string, returnType: string | null, argTypes: string[], args: any[]): any;
|
||||
cwrap(ident: string, returnType: string | null, argTypes: string[]): any;
|
||||
|
||||
setValue(ptr: number, value: any, type: string, noSafe?: boolean): void;
|
||||
getValue(ptr: number, type: string, noSafe?: boolean): number;
|
||||
|
||||
ALLOC_NORMAL: number;
|
||||
ALLOC_STACK: number;
|
||||
ALLOC_STATIC: number;
|
||||
ALLOC_DYNAMIC: number;
|
||||
ALLOC_NONE: number;
|
||||
|
||||
allocate(slab: any, types: string, allocator: number, ptr: number): number;
|
||||
allocate(slab: any, types: string[], allocator: number, ptr: number): number;
|
||||
|
||||
Pointer_stringify(ptr: number, length?: number): string;
|
||||
UTF16ToString(ptr: number): string;
|
||||
stringToUTF16(str: string, outPtr: number): void;
|
||||
UTF32ToString(ptr: number): string;
|
||||
stringToUTF32(str: string, outPtr: number): void;
|
||||
|
||||
// USE_TYPED_ARRAYS == 1
|
||||
HEAP: Int32Array;
|
||||
IHEAP: Int32Array;
|
||||
FHEAP: Float64Array;
|
||||
|
||||
// USE_TYPED_ARRAYS == 2
|
||||
HEAP8: Int8Array;
|
||||
HEAP16: Int16Array;
|
||||
HEAP32: Int32Array;
|
||||
HEAPU8: Uint8Array;
|
||||
HEAPU16: Uint16Array;
|
||||
HEAPU32: Uint32Array;
|
||||
HEAPF32: Float32Array;
|
||||
HEAPF64: Float64Array;
|
||||
|
||||
TOTAL_STACK: number;
|
||||
TOTAL_MEMORY: number;
|
||||
FAST_MEMORY: number;
|
||||
|
||||
addOnPreRun(cb: () => any): void;
|
||||
addOnInit(cb: () => any): void;
|
||||
addOnPreMain(cb: () => any): void;
|
||||
addOnExit(cb: () => any): void;
|
||||
addOnPostRun(cb: () => any): void;
|
||||
|
||||
// Tools
|
||||
intArrayFromString(stringy: string, dontAddNull?: boolean, length?: number): number[];
|
||||
intArrayToString(array: number[]): string;
|
||||
writeStringToMemory(str: string, buffer: number, dontAddNull: boolean): void;
|
||||
writeArrayToMemory(array: number[], buffer: number): void;
|
||||
writeAsciiToMemory(str: string, buffer: number, dontAddNull: boolean): void;
|
||||
|
||||
addRunDependency(id: any): void;
|
||||
removeRunDependency(id: any): void;
|
||||
|
||||
|
||||
preloadedImages: any;
|
||||
preloadedAudios: any;
|
||||
|
||||
_malloc(size: number): number;
|
||||
_free(ptr: number): void;
|
||||
|
||||
// Augmentations below by @surma.
|
||||
onRuntimeInitialized: () => void | null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
{
|
||||
"hosting": {
|
||||
"public": "build",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
}
|
||||
],
|
||||
"headers": [
|
||||
{
|
||||
"source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
|
||||
"headers": [
|
||||
{
|
||||
"key": "Access-Control-Allow-Origin",
|
||||
"value": "*"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "**/*.@(jpg|jpeg|gif|png|ico)",
|
||||
"headers": [
|
||||
{
|
||||
"key": "Cache-Control",
|
||||
"value": "max-age=7200"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "**/*.@(js|css|json|manifest|map)",
|
||||
"headers": [
|
||||
{
|
||||
"key": "Cache-Control",
|
||||
"value": "max-age=31536000"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "sw.js",
|
||||
"headers": [
|
||||
{
|
||||
"key": "Cache-Control",
|
||||
"value": "max-age=0"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
113
karma.conf.js
113
karma.conf.js
@@ -1,113 +0,0 @@
|
||||
const fs = require("fs");
|
||||
|
||||
function readJsonFile(path) {
|
||||
// TypeScript puts lots of comments in the default `tsconfig.json`, so you
|
||||
// can’t use `require()` to read it. Hence this hack.
|
||||
return eval("(" + fs.readFileSync(path).toString("utf-8") + ")");
|
||||
}
|
||||
|
||||
const typeScriptConfig = readJsonFile("./tsconfig.json");
|
||||
const babel = readJsonFile("./.babelrc");
|
||||
|
||||
module.exports = function(config) {
|
||||
const options = {
|
||||
// base path that will be used to resolve all patterns (eg. files, exclude)
|
||||
basePath: "",
|
||||
|
||||
// frameworks to use
|
||||
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
frameworks: ["mocha", "chai", "karma-typescript"],
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [
|
||||
{
|
||||
pattern: "test/**/*.ts",
|
||||
type: "module"
|
||||
},
|
||||
{
|
||||
pattern: "src/**/*.ts",
|
||||
included: false
|
||||
}
|
||||
],
|
||||
|
||||
// list of files / patterns to exclude
|
||||
exclude: [],
|
||||
// preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
preprocessors: {
|
||||
"src/**/*.ts": ["karma-typescript", "babel"],
|
||||
"test/**/*.ts": ["karma-typescript", "babel"]
|
||||
},
|
||||
babelPreprocessor: {
|
||||
options: babel
|
||||
},
|
||||
karmaTypescriptConfig: {
|
||||
// Inline `tsconfig.json` so that the right TS libs are loaded
|
||||
...typeScriptConfig,
|
||||
// Coverage is a thing that karma-typescript forces on you and only
|
||||
// creates problems. This is the simplest way of disabling it that I
|
||||
// could find.
|
||||
coverageOptions: {
|
||||
exclude: /.*/
|
||||
}
|
||||
},
|
||||
mime: {
|
||||
// Default mimetype for .ts files is video/mp2t but we need
|
||||
// text/javascript for modules to work.
|
||||
"text/javascript": ["ts"]
|
||||
},
|
||||
plugins: [
|
||||
// Load all modules whose name starts with "karma" (usually the default).
|
||||
"karma-*",
|
||||
// We don’t have file extensions on our imports as they are primarily
|
||||
// consumed by webpack. With Karma, however, this turns into a real HTTP
|
||||
// request for a non-existent file. This inline plugin is a middleware
|
||||
// that appends `.ts` to the request URL.
|
||||
{
|
||||
"middleware:redirect_to_ts": [
|
||||
"value",
|
||||
(req, res, next) => {
|
||||
if (req.url.startsWith("/base/src")) {
|
||||
req.url += '.ts';
|
||||
}
|
||||
next();
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
// Run our middleware before all other middlewares.
|
||||
beforeMiddleware: ["redirect_to_ts"],
|
||||
|
||||
// test results reporter to use
|
||||
// possible values: 'dots', 'progress'
|
||||
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
|
||||
reporters: ["progress"],
|
||||
|
||||
// web server port
|
||||
port: 9876,
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
colors: true,
|
||||
|
||||
// level of logging
|
||||
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||
logLevel: config.LOG_INFO,
|
||||
|
||||
// enable / disable watching file and executing tests whenever any file changes
|
||||
autoWatch: false,
|
||||
|
||||
// start these browsers
|
||||
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
||||
browsers: ["ChromeHeadless"],
|
||||
|
||||
// Continuous Integration mode
|
||||
// if true, Karma captures browsers, runs the tests and exits
|
||||
singleRun: true,
|
||||
|
||||
// These custom files allow us to use ES6 modules in our tests.
|
||||
// Remove these 2 lines (and files) once https://github.com/karma-runner/karma/pull/2834 lands.
|
||||
customContextFile: "test/context.html",
|
||||
customDebugFile: "test/debug.html"
|
||||
};
|
||||
|
||||
config.set(options);
|
||||
};
|
||||
8512
package-lock.json
generated
8512
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
24
package.json
24
package.json
@@ -4,12 +4,9 @@
|
||||
"version": "0.0.0",
|
||||
"license": "apache-2.0",
|
||||
"scripts": {
|
||||
"build:mozjpeg_enc": "cd codecs/mozjpeg_enc && npm run build",
|
||||
"build:codecs": "npm run build:mozjpeg_enc",
|
||||
"start": "webpack serve --host 0.0.0.0 --hot",
|
||||
"start": "webpack serve --hot",
|
||||
"build": "webpack -p",
|
||||
"lint": "eslint src",
|
||||
"test": "npm run build && mocha -R spec && karma start"
|
||||
"lint": "eslint src"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
@@ -32,11 +29,7 @@
|
||||
"build/*"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@types/chai": "^4.1.3",
|
||||
"@types/karma": "^1.7.3",
|
||||
"@types/mocha": "^5.2.0",
|
||||
"@types/node": "^9.4.7",
|
||||
"@types/webassembly-js-api": "0.0.1",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-plugin-jsx-pragmatic": "^1.0.2",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
@@ -48,7 +41,6 @@
|
||||
"babel-plugin-transform-react-remove-prop-types": "^0.4.13",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"chai": "^4.1.2",
|
||||
"clean-webpack-plugin": "^0.1.19",
|
||||
"copy-webpack-plugin": "^4.5.1",
|
||||
"css-loader": "^0.28.11",
|
||||
@@ -60,25 +52,13 @@
|
||||
"eslint-plugin-promise": "^3.7.0",
|
||||
"eslint-plugin-react": "^7.7.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"exports-loader": "^0.7.0",
|
||||
"express": "^4.16.3",
|
||||
"file-loader": "^1.1.11",
|
||||
"html-webpack-plugin": "^3.0.6",
|
||||
"if-env": "^1.0.4",
|
||||
"karma": "^2.0.2",
|
||||
"karma-babel-preprocessor": "^7.0.0",
|
||||
"karma-chai": "^0.1.0",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-typescript": "^3.0.12",
|
||||
"loader-utils": "^1.1.0",
|
||||
"mini-css-extract-plugin": "^0.3.0",
|
||||
"mocha": "^5.2.0",
|
||||
"node-sass": "^4.7.2",
|
||||
"optimize-css-assets-webpack-plugin": "^4.0.0",
|
||||
"prettier": "^1.12.1",
|
||||
"progress-bar-webpack-plugin": "^1.11.0",
|
||||
"puppeteer": "^1.3.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
"sass-loader": "^6.0.7",
|
||||
"script-ext-html-webpack-plugin": "^2.0.1",
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { bind, bitmapToImageData } from '../../lib/util';
|
||||
import { bind } from '../../lib/util';
|
||||
import * as style from './style.scss';
|
||||
import Output from '../output';
|
||||
|
||||
import {MozJpegEncoder} from '../../lib/codec-wrappers/mozjpeg-enc';
|
||||
|
||||
type Props = {};
|
||||
|
||||
type State = {
|
||||
@@ -30,13 +28,8 @@ export default class App extends Component<Props, State> {
|
||||
const fileInput = event.target as HTMLInputElement;
|
||||
if (!fileInput.files || !fileInput.files[0]) return;
|
||||
// TODO: handle decode error
|
||||
const bitmap = await createImageBitmap(fileInput.files[0]);
|
||||
const data = await bitmapToImageData(bitmap);
|
||||
const encoder = new MozJpegEncoder();
|
||||
const compressedData = await encoder.encode(data);
|
||||
const blob = new Blob([compressedData], {type: 'image/jpeg'});
|
||||
const compressedImage = await createImageBitmap(blob);
|
||||
this.setState({ img: compressedImage });
|
||||
const img = await createImageBitmap(fileInput.files[0]);
|
||||
this.setState({ img });
|
||||
}
|
||||
|
||||
render({ }: Props, { img }: State) {
|
||||
@@ -54,4 +47,3 @@ export default class App extends Component<Props, State> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,298 +0,0 @@
|
||||
import './styles.css';
|
||||
import { PointerTracker, Pointer } from '../../../../lib/PointerTracker';
|
||||
|
||||
interface Point {
|
||||
clientX: number;
|
||||
clientY: number;
|
||||
}
|
||||
|
||||
interface ApplyChangeOpts {
|
||||
panX?: number;
|
||||
panY?: number;
|
||||
scaleDiff?: number;
|
||||
originX?: number;
|
||||
originY?: number;
|
||||
}
|
||||
|
||||
interface SetTransformOpts {
|
||||
scale?: number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
/**
|
||||
* Fire a 'change' event if values are different to current values
|
||||
*/
|
||||
allowChangeEvent?: boolean;
|
||||
}
|
||||
|
||||
function getDistance (a: Point, b?: Point): number {
|
||||
if (!b) return 0;
|
||||
return Math.sqrt((b.clientX - a.clientX) ** 2 + (b.clientY - a.clientY) ** 2);
|
||||
}
|
||||
|
||||
function getMidpoint (a: Point, b?: Point): Point {
|
||||
if (!b) return a;
|
||||
|
||||
return {
|
||||
clientX: (a.clientX + b.clientX) / 2,
|
||||
clientY: (a.clientY + b.clientY) / 2
|
||||
};
|
||||
}
|
||||
|
||||
// I'd rather use DOMMatrix/DOMPoint here, but the browser support isn't good enough.
|
||||
// Given that, better to use something everything supports.
|
||||
let cachedSvg: SVGSVGElement;
|
||||
|
||||
function getSVG (): SVGSVGElement {
|
||||
return cachedSvg || (cachedSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
|
||||
}
|
||||
|
||||
function createMatrix (): SVGMatrix {
|
||||
return getSVG().createSVGMatrix();
|
||||
}
|
||||
|
||||
function createPoint (): SVGPoint {
|
||||
return getSVG().createSVGPoint();
|
||||
}
|
||||
|
||||
export default class PinchZoom extends HTMLElement {
|
||||
// The element that we'll transform.
|
||||
// Ideally this would be shadow DOM, but we don't have the browser
|
||||
// support yet.
|
||||
private _positioningEl?: Element;
|
||||
// Current transform.
|
||||
private _transform: SVGMatrix = createMatrix();
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
|
||||
// Watch for children changes.
|
||||
// Note this won't fire for initial contents,
|
||||
// so _stageElChange is also called in connectedCallback.
|
||||
new MutationObserver(() => this._stageElChange())
|
||||
.observe(this, { childList: true });
|
||||
|
||||
// Watch for pointers
|
||||
const pointerTracker: PointerTracker = new PointerTracker(this, {
|
||||
start: (pointer, event) => {
|
||||
// We only want to track 2 pointers at most
|
||||
if (pointerTracker.currentPointers.length === 2 || !this._positioningEl) return false;
|
||||
event.preventDefault();
|
||||
return true;
|
||||
},
|
||||
move: previousPointers => {
|
||||
this._onPointerMove(previousPointers, pointerTracker.currentPointers);
|
||||
}
|
||||
});
|
||||
|
||||
this.addEventListener('wheel', event => this._onWheel(event));
|
||||
}
|
||||
|
||||
connectedCallback () {
|
||||
this._stageElChange();
|
||||
}
|
||||
|
||||
get x () {
|
||||
return this._transform.e;
|
||||
}
|
||||
|
||||
get y () {
|
||||
return this._transform.f;
|
||||
}
|
||||
|
||||
get scale () {
|
||||
return this._transform.a;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the stage with a given scale/x/y.
|
||||
*/
|
||||
setTransform (opts: SetTransformOpts = {}) {
|
||||
const {
|
||||
scale = this.scale,
|
||||
allowChangeEvent = false
|
||||
} = opts;
|
||||
|
||||
let {
|
||||
x = this.x,
|
||||
y = this.y
|
||||
} = opts;
|
||||
|
||||
// If we don't have an element to position, just set the value as given.
|
||||
// We'll check bounds later.
|
||||
if (!this._positioningEl) {
|
||||
this._updateTransform(scale, x, y, allowChangeEvent);
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current layout
|
||||
const thisBounds = this.getBoundingClientRect();
|
||||
const positioningElBounds = this._positioningEl.getBoundingClientRect();
|
||||
|
||||
// Not displayed. May be disconnected or display:none.
|
||||
// Just take the values, and we'll check bounds later.
|
||||
if (!thisBounds.width || !thisBounds.height) {
|
||||
this._updateTransform(scale, x, y, allowChangeEvent);
|
||||
return;
|
||||
}
|
||||
|
||||
// Create points for _positioningEl.
|
||||
let topLeft = createPoint();
|
||||
topLeft.x = positioningElBounds.left - thisBounds.left;
|
||||
topLeft.y = positioningElBounds.top - thisBounds.top;
|
||||
let bottomRight = createPoint();
|
||||
bottomRight.x = positioningElBounds.width + topLeft.x;
|
||||
bottomRight.y = positioningElBounds.height + topLeft.y;
|
||||
|
||||
// Calculate the intended position of _positioningEl.
|
||||
let matrix = createMatrix()
|
||||
.translate(x, y)
|
||||
.scale(scale)
|
||||
// Undo current transform
|
||||
.multiply(this._transform.inverse());
|
||||
|
||||
topLeft = topLeft.matrixTransform(matrix);
|
||||
bottomRight = bottomRight.matrixTransform(matrix);
|
||||
|
||||
// Ensure _positioningEl can't move beyond out-of-bounds.
|
||||
// Correct for x
|
||||
if (topLeft.x > thisBounds.width) {
|
||||
x += thisBounds.width - topLeft.x;
|
||||
} else if (bottomRight.x < 0) {
|
||||
x += -bottomRight.x;
|
||||
}
|
||||
|
||||
// Correct for y
|
||||
if (topLeft.y > thisBounds.height) {
|
||||
y += thisBounds.height - topLeft.y;
|
||||
} else if (bottomRight.y < 0) {
|
||||
y += -bottomRight.y;
|
||||
}
|
||||
|
||||
this._updateTransform(scale, x, y, allowChangeEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update transform values without checking bounds. This is only called in setTransform.
|
||||
*/
|
||||
_updateTransform (scale: number, x: number, y: number, allowChangeEvent: boolean) {
|
||||
// Return if there's no change
|
||||
if (
|
||||
scale === this.scale &&
|
||||
x === this.x &&
|
||||
y === this.y
|
||||
) return;
|
||||
|
||||
this._transform.e = x;
|
||||
this._transform.f = y;
|
||||
this._transform.d = this._transform.a = scale;
|
||||
|
||||
this.style.setProperty('--x', this.x + 'px');
|
||||
this.style.setProperty('--y', this.y + 'px');
|
||||
this.style.setProperty('--scale', this.scale + '');
|
||||
|
||||
if (allowChangeEvent) {
|
||||
const event = new Event('change', { bubbles: true });
|
||||
this.dispatchEvent(event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the direct children of this element change.
|
||||
* Until we have have shadow dom support across the board, we
|
||||
* require a single element to be the child of <pinch-zoom>, and
|
||||
* that's the element we pan/scale.
|
||||
*/
|
||||
private _stageElChange () {
|
||||
this._positioningEl = undefined;
|
||||
|
||||
if (this.children.length === 0) {
|
||||
console.warn('There should be at least one child in <pinch-zoom>.');
|
||||
return;
|
||||
}
|
||||
|
||||
this._positioningEl = this.children[0];
|
||||
|
||||
if (this.children.length > 1) {
|
||||
console.warn('<pinch-zoom> must not have more than one child.');
|
||||
}
|
||||
|
||||
// Do a bounds check
|
||||
this.setTransform();
|
||||
}
|
||||
|
||||
private _onWheel (event: WheelEvent) {
|
||||
event.preventDefault();
|
||||
|
||||
const thisRect = this.getBoundingClientRect();
|
||||
let { deltaY } = event;
|
||||
const { ctrlKey, deltaMode } = event;
|
||||
|
||||
if (deltaMode === 1) { // 1 is "lines", 0 is "pixels"
|
||||
// Firefox uses "lines" for some types of mouse
|
||||
deltaY *= 15;
|
||||
}
|
||||
|
||||
// ctrlKey is true when pinch-zooming on a trackpad.
|
||||
const divisor = ctrlKey ? 100 : 300;
|
||||
const scaleDiff = 1 - deltaY / divisor;
|
||||
|
||||
this._applyChange({
|
||||
scaleDiff,
|
||||
originX: event.clientX - thisRect.left,
|
||||
originY: event.clientY - thisRect.top
|
||||
});
|
||||
}
|
||||
|
||||
private _onPointerMove (previousPointers: Pointer[], currentPointers: Pointer[]) {
|
||||
// Combine next points with previous points
|
||||
const thisRect = this.getBoundingClientRect();
|
||||
|
||||
// For calculating panning movement
|
||||
const prevMidpoint = getMidpoint(previousPointers[0], previousPointers[1]);
|
||||
const newMidpoint = getMidpoint(currentPointers[0], currentPointers[1]);
|
||||
|
||||
// Midpoint within the element
|
||||
const originX = prevMidpoint.clientX - thisRect.left;
|
||||
const originY = prevMidpoint.clientY - thisRect.top;
|
||||
|
||||
// Calculate the desired change in scale
|
||||
const prevDistance = getDistance(previousPointers[0], previousPointers[1]);
|
||||
const newDistance = getDistance(currentPointers[0], currentPointers[1]);
|
||||
const scaleDiff = prevDistance ? newDistance / prevDistance : 1;
|
||||
|
||||
this._applyChange({
|
||||
originX, originY, scaleDiff,
|
||||
panX: newMidpoint.clientX - prevMidpoint.clientX,
|
||||
panY: newMidpoint.clientY - prevMidpoint.clientY
|
||||
});
|
||||
}
|
||||
|
||||
/** Transform the view & fire a change event */
|
||||
private _applyChange (opts: ApplyChangeOpts = {}) {
|
||||
const {
|
||||
panX = 0, panY = 0,
|
||||
originX = 0, originY = 0,
|
||||
scaleDiff = 1
|
||||
} = opts;
|
||||
|
||||
const matrix = createMatrix()
|
||||
// Translate according to panning.
|
||||
.translate(panX, panY)
|
||||
// Scale about the origin.
|
||||
.translate(originX, originY)
|
||||
.scale(scaleDiff)
|
||||
.translate(-originX, -originY)
|
||||
// Apply current transform.
|
||||
.multiply(this._transform);
|
||||
|
||||
// Convert the transform into basic translate & scale.
|
||||
this.setTransform({
|
||||
scale: matrix.a,
|
||||
x: matrix.e,
|
||||
y: matrix.f,
|
||||
allowChangeEvent: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('pinch-zoom', PinchZoom);
|
||||
@@ -1,16 +0,0 @@
|
||||
declare interface CSSStyleDeclaration {
|
||||
willChange: string | null;
|
||||
}
|
||||
|
||||
// TypeScript, you make me sad.
|
||||
// https://github.com/Microsoft/TypeScript/issues/18756
|
||||
interface Window {
|
||||
PointerEvent: typeof PointerEvent;
|
||||
Touch: typeof Touch;
|
||||
}
|
||||
|
||||
declare namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'pinch-zoom': HTMLAttributes;
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
pinch-zoom {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
--scale: 1;
|
||||
--x: 0;
|
||||
--y: 0;
|
||||
}
|
||||
|
||||
pinch-zoom > * {
|
||||
transform: translate(var(--x), var(--y)) scale(var(--scale));
|
||||
transform-origin: 0 0;
|
||||
will-change: transform;
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
import * as styles from './styles.css';
|
||||
import { PointerTracker, Pointer } from '../../../../lib/PointerTracker';
|
||||
|
||||
const legacyClipCompat = 'legacy-clip-compat';
|
||||
|
||||
/**
|
||||
* A split view that the user can adjust. The first child becomes
|
||||
* the left-hand side, and the second child becomes the right-hand side.
|
||||
*/
|
||||
export default class TwoUp extends HTMLElement {
|
||||
static get observedAttributes () { return [legacyClipCompat]; }
|
||||
|
||||
private readonly _handle = document.createElement('div');
|
||||
/**
|
||||
* The position of the split in pixels.
|
||||
*/
|
||||
private _position = 0;
|
||||
/**
|
||||
* The value of _position when the pointer went down.
|
||||
*/
|
||||
private _positionOnPointerStart = 0;
|
||||
/**
|
||||
* Has connectedCallback been called yet?
|
||||
*/
|
||||
private _everConnected = false;
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
this._handle.className = styles.twoUpHandle;
|
||||
|
||||
// Watch for children changes.
|
||||
// Note this won't fire for initial contents,
|
||||
// so _childrenChange is also called in connectedCallback.
|
||||
new MutationObserver(() => this._childrenChange())
|
||||
.observe(this, { childList: true });
|
||||
|
||||
// Watch for pointers on the handle.
|
||||
const pointerTracker: PointerTracker = new PointerTracker(this._handle, {
|
||||
start: (_, event) => {
|
||||
// We only want to track 1 pointer.
|
||||
if (pointerTracker.currentPointers.length === 1) return false;
|
||||
event.preventDefault();
|
||||
this._positionOnPointerStart = this._position;
|
||||
return true;
|
||||
},
|
||||
move: () => {
|
||||
this._pointerChange(
|
||||
pointerTracker.startPointers[0],
|
||||
pointerTracker.currentPointers[0]
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
connectedCallback () {
|
||||
this._childrenChange();
|
||||
if (!this._everConnected) {
|
||||
// Set the initial position of the handle.
|
||||
requestAnimationFrame(() => {
|
||||
const bounds = this.getBoundingClientRect();
|
||||
this._position = bounds.width / 2;
|
||||
this._setPosition();
|
||||
});
|
||||
this._everConnected = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* If true, this element works in browsers that don't support clip-path (Edge).
|
||||
* However, this means you'll have to set the height of this element manually.
|
||||
*/
|
||||
get noClipPathCompat () {
|
||||
return this.hasAttribute(legacyClipCompat);
|
||||
}
|
||||
|
||||
set noClipPathCompat (val: boolean) {
|
||||
if (val) {
|
||||
this.setAttribute(legacyClipCompat, '');
|
||||
} else {
|
||||
this.removeAttribute(legacyClipCompat);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when element's child list changes
|
||||
*/
|
||||
private _childrenChange () {
|
||||
// Ensure the handle is the last child.
|
||||
// The CSS depends on this.
|
||||
if (this.lastElementChild !== this._handle) {
|
||||
this.appendChild(this._handle);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when a pointer moves.
|
||||
*/
|
||||
private _pointerChange (startPoint: Pointer, currentPoint: Pointer) {
|
||||
const bounds = this.getBoundingClientRect();
|
||||
this._position = this._positionOnPointerStart + (currentPoint.clientX - startPoint.clientX);
|
||||
// Clamp position to element bounds.
|
||||
this._position = Math.max(0, Math.min(this._position, bounds.width));
|
||||
this._setPosition();
|
||||
}
|
||||
|
||||
private _setPosition () {
|
||||
this.style.setProperty('--split-point', `${this._position}px`);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('two-up', TwoUp);
|
||||
@@ -1,16 +0,0 @@
|
||||
declare interface CSSStyleDeclaration {
|
||||
willChange: string | null;
|
||||
}
|
||||
|
||||
// TypeScript, you make me sad.
|
||||
// https://github.com/Microsoft/TypeScript/issues/18756
|
||||
interface Window {
|
||||
PointerEvent: typeof PointerEvent;
|
||||
Touch: typeof Touch;
|
||||
}
|
||||
|
||||
declare namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"two-up": HTMLAttributes
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
two-up {
|
||||
display: grid;
|
||||
position: relative;
|
||||
--split-point: 0;
|
||||
}
|
||||
|
||||
two-up > * {
|
||||
/* Overlay all children on top of each other, and let
|
||||
two-up's layout contain all of them. */
|
||||
grid-area: 1/1;
|
||||
}
|
||||
|
||||
two-up[legacy-clip-compat] > :not(.twoUpHandle) {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.twoUpHandle {
|
||||
touch-action: none;
|
||||
position: relative;
|
||||
width: 10px;
|
||||
background: red;
|
||||
transform: translateX(var(--split-point)) translateX(-50%);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.twoUpHandle::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
background: red;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
two-up > :nth-child(1):not(.twoUpHandle) {
|
||||
-webkit-clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
|
||||
clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
|
||||
}
|
||||
|
||||
two-up > :nth-child(2):not(.twoUpHandle) {
|
||||
-webkit-clip-path: inset(0 0 0 var(--split-point));
|
||||
clip-path: inset(0 0 0 var(--split-point));
|
||||
}
|
||||
|
||||
/*
|
||||
Even in legacy-clip-compat, prefer clip-path if it's supported.
|
||||
It performs way better in Safari.
|
||||
*/
|
||||
@supports not ((clip-path: inset(0 0 0 var(--split-point))) or (-webkit-clip-path: inset(0 0 0 var(--split-point)))) {
|
||||
two-up[legacy-clip-compat] > :nth-child(1):not(.twoUpHandle) {
|
||||
clip: rect(auto var(--split-point) auto auto);
|
||||
}
|
||||
|
||||
two-up[legacy-clip-compat] > :nth-child(2):not(.twoUpHandle) {
|
||||
clip: rect(auto auto auto var(--split-point));
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,7 @@
|
||||
import { h, Component } from 'preact';
|
||||
import PinchZoom from './custom-els/PinchZoom';
|
||||
import './custom-els/PinchZoom';
|
||||
import './custom-els/TwoUp';
|
||||
// This isn't working.
|
||||
// https://github.com/GoogleChromeLabs/squoosh/issues/14
|
||||
import * as style from './style.scss';
|
||||
import { bind } from '../../lib/util';
|
||||
import { twoUpHandle } from './custom-els/TwoUp/styles.css';
|
||||
|
||||
type Props = {
|
||||
img: ImageBitmap
|
||||
@@ -14,89 +11,32 @@ type State = {};
|
||||
|
||||
export default class App extends Component<Props, State> {
|
||||
state: State = {};
|
||||
canvasLeft?: HTMLCanvasElement;
|
||||
canvasRight?: HTMLCanvasElement;
|
||||
pinchZoomLeft?: PinchZoom;
|
||||
pinchZoomRight?: PinchZoom;
|
||||
retargetedEvents = new WeakSet<Event>();
|
||||
canvas?: HTMLCanvasElement;
|
||||
|
||||
updateCanvases(img: ImageBitmap) {
|
||||
for (const [i, canvas] of [this.canvasLeft, this.canvasRight].entries()) {
|
||||
if (!canvas) throw Error('Missing canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) throw Error('Expected 2d canvas context');
|
||||
if (i === 1) {
|
||||
// This is temporary, to show the images are different
|
||||
ctx.filter = 'hue-rotate(180deg)';
|
||||
}
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0);
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
updateCanvas(img: ImageBitmap) {
|
||||
if (!this.canvas) return;
|
||||
const ctx = this.canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
ctx.drawImage(img, 0, 0);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.updateCanvases(this.props.img);
|
||||
this.updateCanvas(this.props.img);
|
||||
}
|
||||
|
||||
componentDidUpdate({ img }: Props) {
|
||||
if (img !== this.props.img) this.updateCanvases(this.props.img);
|
||||
}
|
||||
|
||||
@bind
|
||||
onPinchZoomLeftChange(event: Event) {
|
||||
if (!this.pinchZoomRight || !this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
|
||||
this.pinchZoomRight.setTransform({
|
||||
scale: this.pinchZoomLeft.scale,
|
||||
x: this.pinchZoomLeft.x,
|
||||
y: this.pinchZoomLeft.y
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* We're using two pinch zoom elements, but we want them to stay in sync. When one moves, we
|
||||
* update the position of the other. However, this is tricky when it comes to multi-touch, when
|
||||
* one finger is on one pinch-zoom, and the other finger is on the other. To overcome this, we
|
||||
* redirect all relevant pointer/touch/mouse events to the first pinch zoom element.
|
||||
*
|
||||
* @param event Event to redirect
|
||||
*/
|
||||
@bind
|
||||
onRetargetableEvent(event: Event) {
|
||||
const targetEl = event.target as HTMLElement;
|
||||
if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
|
||||
// If the event is on the handle of the two-up, let it through.
|
||||
if (targetEl.closest('.' + twoUpHandle)) return;
|
||||
// If we've already retargeted this event, let it through.
|
||||
if (this.retargetedEvents.has(event)) return;
|
||||
// Stop the event in its tracks.
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
// Clone the event & dispatch
|
||||
// Some TypeScript trickery needed due to https://github.com/Microsoft/TypeScript/issues/3841
|
||||
const clonedEvent = new (event.constructor as typeof Event)(event.type, event);
|
||||
this.retargetedEvents.add(clonedEvent);
|
||||
this.pinchZoomLeft.dispatchEvent(clonedEvent);
|
||||
if (img !== this.props.img) this.updateCanvas(this.props.img);
|
||||
}
|
||||
|
||||
render({ img }: Props, { }: State) {
|
||||
return (
|
||||
<div>
|
||||
<two-up
|
||||
// Event redirecting. See onRetargetableEvent.
|
||||
onTouchStartCapture={this.onRetargetableEvent}
|
||||
onTouchEndCapture={this.onRetargetableEvent}
|
||||
onTouchMoveCapture={this.onRetargetableEvent}
|
||||
onPointerDownCapture={this.onRetargetableEvent}
|
||||
onMouseDownCapture={this.onRetargetableEvent}
|
||||
onWheelCapture={this.onRetargetableEvent}
|
||||
>
|
||||
<pinch-zoom onChange={this.onPinchZoomLeftChange} ref={p => this.pinchZoomLeft = p as PinchZoom}>
|
||||
<canvas class={style.outputCanvas} ref={c => this.canvasLeft = c as HTMLCanvasElement} width={img.width} height={img.height} />
|
||||
</pinch-zoom>
|
||||
<pinch-zoom ref={p => this.pinchZoomRight = p as PinchZoom}>
|
||||
<canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={img.width} height={img.height} />
|
||||
</pinch-zoom>
|
||||
</two-up>
|
||||
<canvas ref={c => this.canvas = c as HTMLCanvasElement} width={img.width} height={img.height} />
|
||||
<p>And that's all the app does so far!</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.outputCanvas {
|
||||
image-rendering: pixelated;
|
||||
.app h1 {
|
||||
color: green;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Squoosh</title>
|
||||
<meta name="description" content="Compress and compare images with different codecs, right in your browser">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
||||
@@ -1,237 +0,0 @@
|
||||
import { bind } from '../util';
|
||||
const enum Button { Left }
|
||||
|
||||
export class Pointer {
|
||||
/** x offset from the top of the document */
|
||||
pageX: number;
|
||||
/** y offset from the top of the document */
|
||||
pageY: number;
|
||||
/** x offset from the top of the viewport */
|
||||
clientX: number;
|
||||
/** y offset from the top of the viewport */
|
||||
clientY: number;
|
||||
/** ID for this pointer */
|
||||
id: number = -1;
|
||||
|
||||
constructor (nativePointer: Touch | PointerEvent | MouseEvent) {
|
||||
this.pageX = nativePointer.pageX;
|
||||
this.pageY = nativePointer.pageY;
|
||||
this.clientX = nativePointer.clientX;
|
||||
this.clientY = nativePointer.clientY;
|
||||
|
||||
if (self.Touch && nativePointer instanceof Touch) {
|
||||
this.id = nativePointer.identifier;
|
||||
} else if (isPointerEvent(nativePointer)) { // is PointerEvent
|
||||
this.id = nativePointer.pointerId;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const isPointerEvent = (event: any): event is PointerEvent =>
|
||||
self.PointerEvent && event instanceof PointerEvent;
|
||||
|
||||
const noop = () => {};
|
||||
|
||||
type StartCallback = ((pointer: Pointer, event: TouchEvent | PointerEvent | MouseEvent) => boolean);
|
||||
type MoveCallback = ((previousPointers: Pointer[], event: TouchEvent | PointerEvent | MouseEvent) => void);
|
||||
type EndCallback = ((pointer: Pointer, event: TouchEvent | PointerEvent | MouseEvent) => void);
|
||||
|
||||
interface PointerTrackerCallbacks {
|
||||
/**
|
||||
* Called when a pointer is pressed/touched within the element.
|
||||
*
|
||||
* @param pointer The new pointer.
|
||||
* This pointer isn't included in this.currentPointers or this.startPointers yet.
|
||||
* @param event The event related to this pointer.
|
||||
*
|
||||
* @returns Whether you want to track this pointer as it moves.
|
||||
*/
|
||||
start?: StartCallback;
|
||||
/**
|
||||
* Called when pointers have moved.
|
||||
*
|
||||
* @param previousPointers The state of the pointers before this event.
|
||||
* This contains the same number of pointers, in the same order, as
|
||||
* this.currentPointers and this.startPointers.
|
||||
* @param event The event related to the pointer changes.
|
||||
*/
|
||||
move?: MoveCallback;
|
||||
/**
|
||||
* Called when a pointer is released.
|
||||
*
|
||||
* @param pointer The final state of the pointer that ended. This
|
||||
* pointer is now absent from this.currentPointers and
|
||||
* this.startPointers.
|
||||
* @param event The event related to this pointer.
|
||||
*/
|
||||
end?: EndCallback;
|
||||
}
|
||||
|
||||
/**
|
||||
* Track pointers across a particular element
|
||||
*/
|
||||
export class PointerTracker {
|
||||
/**
|
||||
* State of the tracked pointers when they were pressed/touched.
|
||||
*/
|
||||
readonly startPointers: Pointer[] = [];
|
||||
/**
|
||||
* Latest state of the tracked pointers. Contains the same number
|
||||
* of pointers, and in the same order as this.startPointers.
|
||||
*/
|
||||
readonly currentPointers: Pointer[] = [];
|
||||
|
||||
private _startCallback: StartCallback;
|
||||
private _moveCallback: MoveCallback;
|
||||
private _endCallback: EndCallback;
|
||||
|
||||
/**
|
||||
* Track pointers across a particular element
|
||||
*
|
||||
* @param element Element to monitor.
|
||||
* @param callbacks
|
||||
*/
|
||||
constructor (private _element: HTMLElement, callbacks: PointerTrackerCallbacks) {
|
||||
const {
|
||||
start = () => true,
|
||||
move = noop,
|
||||
end = noop
|
||||
} = callbacks;
|
||||
|
||||
this._startCallback = start;
|
||||
this._moveCallback = move;
|
||||
this._endCallback = end;
|
||||
|
||||
// Add listeners
|
||||
if (self.PointerEvent) {
|
||||
this._element.addEventListener('pointerdown', this._pointerStart);
|
||||
} else {
|
||||
this._element.addEventListener('mousedown', this._pointerStart);
|
||||
this._element.addEventListener('touchstart', this._touchStart);
|
||||
this._element.addEventListener('touchmove', this._move);
|
||||
this._element.addEventListener('touchend', this._touchEnd);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Call the start callback for this pointer, and track it if the user wants.
|
||||
*
|
||||
* @param pointer Pointer
|
||||
* @param event Related event
|
||||
* @returns Whether the pointer is being tracked.
|
||||
*/
|
||||
private _triggerPointerStart (pointer: Pointer, event: PointerEvent | MouseEvent | TouchEvent): boolean {
|
||||
if (!this._startCallback(pointer, event)) return false;
|
||||
this.currentPointers.push(pointer);
|
||||
this.startPointers.push(pointer);
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Listener for mouse/pointer starts. Bound to the class in the constructor.
|
||||
*
|
||||
* @param event This will only be a MouseEvent if the browser doesn't support
|
||||
* pointer events.
|
||||
*/
|
||||
@bind
|
||||
private _pointerStart (event: PointerEvent | MouseEvent) {
|
||||
if (event.button !== Button.Left) return;
|
||||
if (!this._triggerPointerStart(new Pointer(event), event)) return;
|
||||
|
||||
// Add listeners for additional events.
|
||||
// The listeners may already exist, but no harm in adding them again.
|
||||
if (isPointerEvent(event)) {
|
||||
this._element.setPointerCapture(event.pointerId);
|
||||
this._element.addEventListener('pointermove', this._move);
|
||||
this._element.addEventListener('pointerup', this._pointerEnd);
|
||||
} else { // MouseEvent
|
||||
window.addEventListener('mousemove', this._move);
|
||||
window.addEventListener('mouseup', this._pointerEnd);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Listener for touchstart. Bound to the class in the constructor.
|
||||
* Only used if the browser doesn't support pointer events.
|
||||
*/
|
||||
@bind
|
||||
private _touchStart (event: TouchEvent) {
|
||||
for (const touch of Array.from(event.changedTouches)) {
|
||||
this._triggerPointerStart(new Pointer(touch), event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Listener for pointer/mouse/touch move events.
|
||||
* Bound to the class in the constructor.
|
||||
*/
|
||||
@bind
|
||||
private _move (event: PointerEvent | MouseEvent | TouchEvent) {
|
||||
const previousPointers = this.currentPointers.slice();
|
||||
const changedPointers = ('changedTouches' in event) ? // Shortcut for 'is touch event'.
|
||||
Array.from(event.changedTouches).map(t => new Pointer(t)) :
|
||||
[new Pointer(event)];
|
||||
|
||||
let shouldCallback = false;
|
||||
|
||||
for (const pointer of changedPointers) {
|
||||
const index = this.currentPointers.findIndex(p => p.id === pointer.id);
|
||||
if (index === -1) continue;
|
||||
shouldCallback = true;
|
||||
this.currentPointers[index] = pointer;
|
||||
}
|
||||
|
||||
if (!shouldCallback) return;
|
||||
|
||||
this._moveCallback(previousPointers, event);
|
||||
}
|
||||
|
||||
/**
|
||||
* Call the end callback for this pointer.
|
||||
*
|
||||
* @param pointer Pointer
|
||||
* @param event Related event
|
||||
*/
|
||||
@bind
|
||||
private _triggerPointerEnd (pointer: Pointer, event: PointerEvent | MouseEvent | TouchEvent): boolean {
|
||||
const index = this.currentPointers.findIndex(p => p.id === pointer.id);
|
||||
// Not a pointer we're interested in?
|
||||
if (index === -1) return false;
|
||||
|
||||
this.currentPointers.splice(index, 1);
|
||||
this.startPointers.splice(index, 1);
|
||||
|
||||
this._endCallback(pointer, event);
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Listener for mouse/pointer ends. Bound to the class in the constructor.
|
||||
* @param event This will only be a MouseEvent if the browser doesn't support
|
||||
* pointer events.
|
||||
*/
|
||||
@bind
|
||||
private _pointerEnd (event: PointerEvent | MouseEvent) {
|
||||
if (!this._triggerPointerEnd(new Pointer(event), event)) return;
|
||||
|
||||
if (isPointerEvent(event)) {
|
||||
if (this.currentPointers.length) return;
|
||||
this._element.removeEventListener('pointermove', this._move);
|
||||
this._element.removeEventListener('pointerup', this._pointerEnd);
|
||||
} else { // MouseEvent
|
||||
window.removeEventListener('mousemove', this._move);
|
||||
window.removeEventListener('mouseup', this._pointerEnd);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Listener for touchend. Bound to the class in the constructor.
|
||||
* Only used if the browser doesn't support pointer events.
|
||||
*/
|
||||
@bind
|
||||
private _touchEnd (event: TouchEvent) {
|
||||
for (const touch of Array.from(event.changedTouches)) {
|
||||
this._triggerPointerEnd(new Pointer(touch), event);
|
||||
}
|
||||
}
|
||||
}
|
||||
6
src/lib/PointerTracker/missing-types.d.ts
vendored
6
src/lib/PointerTracker/missing-types.d.ts
vendored
@@ -1,6 +0,0 @@
|
||||
// TypeScript, you make me sad.
|
||||
// https://github.com/Microsoft/TypeScript/issues/18756
|
||||
interface Window {
|
||||
PointerEvent: typeof PointerEvent;
|
||||
Touch: typeof Touch;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export interface Encoder {
|
||||
encode(data: ImageData): Promise<ArrayBuffer>;
|
||||
}
|
||||
|
||||
export interface Decoder {
|
||||
decode(data: ArrayBuffer): Promise<ImageBitmap>;
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
import {Encoder} from './codec';
|
||||
|
||||
import mozjpeg_enc from '../../../codecs/mozjpeg_enc/mozjpeg_enc';
|
||||
// Using require() so TypeScript doesn’t complain about this not being a module.
|
||||
const wasmBinaryUrl = require('../../../codecs/mozjpeg_enc/mozjpeg_enc.wasm');
|
||||
|
||||
// API exposed by wasm module. Details in the codec’s README.
|
||||
interface ModuleAPI {
|
||||
version(): number;
|
||||
create_buffer(width: number, height: number): number;
|
||||
destroy_buffer(pointer: number): void;
|
||||
encode(buffer: number, width: number, height: number, quality: number): void;
|
||||
free_result(): void;
|
||||
get_result_pointer(): number;
|
||||
get_result_size(): number;
|
||||
}
|
||||
|
||||
export class MozJpegEncoder implements Encoder {
|
||||
private emscriptenModule: Promise<EmscriptenWasm.Module>;
|
||||
private api: Promise<ModuleAPI>;
|
||||
constructor() {
|
||||
this.emscriptenModule = new Promise(resolve => {
|
||||
const m = mozjpeg_enc({
|
||||
// Just to be safe, don’t automatically invoke any wasm functions
|
||||
noInitialRun: false,
|
||||
locateFile(url: string): string {
|
||||
// Redirect the request for the wasm binary to whatever webpack gave us.
|
||||
if(url.endsWith('.wasm')) {
|
||||
return wasmBinaryUrl;
|
||||
}
|
||||
return url;
|
||||
},
|
||||
onRuntimeInitialized() {
|
||||
// An Emscripten is a then-able that, for some reason, `then()`s itself,
|
||||
// causing an infite loop when you wrap it in a real promise. Deleten the `then`
|
||||
// prop solves this for now.
|
||||
// See: https://github.com/kripken/emscripten/blob/incoming/src/postamble.js#L129
|
||||
// TODO(surma@): File a bug with Emscripten on this.
|
||||
delete (m as any).then;
|
||||
resolve(m);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.api = (async () => {
|
||||
// Not sure why, but TypeScript complains that I am using `emscriptenModule` before it’s getting assigned, which is clearly not true :shrug: Using `any`
|
||||
const m = await (this as any).emscriptenModule;
|
||||
return {
|
||||
version: m.cwrap('version', 'number', []),
|
||||
create_buffer: m.cwrap('create_buffer', 'number', ['number', 'number']),
|
||||
destroy_buffer: m.cwrap('destroy_buffer', '', ['number']),
|
||||
encode: m.cwrap('encode', '', ['number', 'number', 'number', 'number']),
|
||||
free_result: m.cwrap('free_result', '', []),
|
||||
get_result_pointer: m.cwrap('get_result_pointer', 'number', []),
|
||||
get_result_size: m.cwrap('get_result_size', 'number', []),
|
||||
};
|
||||
})();
|
||||
}
|
||||
|
||||
async encode(data: ImageData): Promise<ArrayBuffer> {
|
||||
const m = await this.emscriptenModule;
|
||||
const api = await this.api;
|
||||
|
||||
const p = api.create_buffer(data.width, data.height);
|
||||
m.HEAP8.set(data.data, p);
|
||||
api.encode(p, data.width, data.height, 2);
|
||||
const resultPointer = api.get_result_pointer();
|
||||
const resultSize = api.get_result_size();
|
||||
const resultView = new Uint8Array(m.HEAP8.buffer, resultPointer, resultSize);
|
||||
const result = new Uint8Array(resultView);
|
||||
api.free_result();
|
||||
api.destroy_buffer(p);
|
||||
|
||||
// wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
|
||||
return result.buffer as ArrayBuffer;
|
||||
}
|
||||
}
|
||||
@@ -24,22 +24,3 @@ export function bind(target: any, propertyKey: string, descriptor: PropertyDescr
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Turns a given `ImageBitmap` into `ImageData`.
|
||||
*/
|
||||
export async function bitmapToImageData(bitmap: ImageBitmap): Promise<ImageData> {
|
||||
// Make canvas same size as image
|
||||
// TODO: Move this off-thread if possible with `OffscreenCanvas` or iFrames?
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = bitmap.width;
|
||||
canvas.height = bitmap.height;
|
||||
// Draw image onto canvas
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) {
|
||||
throw new Error("Could not create canvas context");
|
||||
}
|
||||
ctx.drawImage(bitmap, 0, 0);
|
||||
return ctx.getImageData(0, 0, bitmap.width, bitmap.height);
|
||||
}
|
||||
|
||||
|
||||
22
src/missing-types.d.ts
vendored
22
src/missing-types.d.ts
vendored
@@ -1,22 +0,0 @@
|
||||
// PRs to fix this:
|
||||
// https://github.com/developit/preact/pull/1101
|
||||
// https://github.com/developit/preact/pull/1102
|
||||
declare namespace JSX {
|
||||
type PointerEventHandler = EventHandler<PointerEvent>;
|
||||
|
||||
interface DOMAttributes {
|
||||
onTouchStartCapture?: TouchEventHandler;
|
||||
onTouchEndCapture?: TouchEventHandler;
|
||||
onTouchMoveCapture?: TouchEventHandler;
|
||||
|
||||
onPointerDownCapture?: PointerEventHandler;
|
||||
|
||||
onMouseDownCapture?: MouseEventHandler;
|
||||
|
||||
onWheelCapture?: WheelEventHandler;
|
||||
}
|
||||
}
|
||||
|
||||
interface CanvasRenderingContext2D {
|
||||
filter: string;
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
This file is taken from https://github.com/karma-runner/karma/pull/2834. It allows us to use ES6 module imports in our test suite files.
|
||||
-->
|
||||
<!--
|
||||
This is the execution context.
|
||||
Loaded within the iframe.
|
||||
Reloaded before every execution run.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- The scripts need to be in the body DOM element, as some test running frameworks need the body
|
||||
to have already been created so they can insert their magic into it. For example, if loaded
|
||||
before body, Angular Scenario test framework fails to find the body and crashes and burns in
|
||||
an epic manner. -->
|
||||
<script src="context.js"></script>
|
||||
<script type="text/javascript">
|
||||
// Configure our Karma and set up bindings
|
||||
%CLIENT_CONFIG%
|
||||
window.__karma__.setupContext(window);
|
||||
|
||||
// All served files with the latest timestamps
|
||||
%MAPPINGS%
|
||||
</script>
|
||||
<!-- Dynamically replaced with <script> tags -->
|
||||
%SCRIPTS%
|
||||
<!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
|
||||
This ensures all the tests will have been declared before karma tries to run them. -->
|
||||
<script type="module">
|
||||
window.__karma__.loaded();
|
||||
</script>
|
||||
<script nomodule>
|
||||
window.__karma__.loaded();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,43 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
This file is taken from https://github.com/karma-runner/karma/pull/2834. It allows us to use ES6 module imports in our test suite files.
|
||||
-->
|
||||
<!--
|
||||
This file is almost the same as context.html - loads all source files,
|
||||
but its purpose is to be loaded in the main frame (not within an iframe),
|
||||
just for immediate execution, without reporting to Karma server.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
%X_UA_COMPATIBLE%
|
||||
<title>Karma DEBUG RUNNER</title>
|
||||
<link href="favicon.ico" rel="icon" type="image/x-icon" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- The scripts need to be at the end of body, so that some test running frameworks
|
||||
(Angular Scenario, for example) need the body to be loaded so that it can insert its magic
|
||||
into it. If it is before body, then it fails to find the body and crashes and burns in an epic
|
||||
manner. -->
|
||||
<script src="context.js"></script>
|
||||
<script src="debug.js"></script>
|
||||
<script type="text/javascript">
|
||||
// Configure our Karma
|
||||
%CLIENT_CONFIG%
|
||||
|
||||
// All served files with the latest timestamps
|
||||
%MAPPINGS%
|
||||
</script>
|
||||
<!-- Dynamically replaced with <script> tags -->
|
||||
%SCRIPTS%
|
||||
<!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
|
||||
This ensures all the tests will have been declared before karma tries to run them. -->
|
||||
<script type="module">
|
||||
window.__karma__.loaded();
|
||||
</script>
|
||||
<script nomodule>
|
||||
window.__karma__.loaded();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,66 +0,0 @@
|
||||
const express = require("express");
|
||||
const app = express();
|
||||
const http = require("http");
|
||||
const puppeteer = require("puppeteer");
|
||||
const { fingerDown } = require("./finger.js");
|
||||
const { expect } = require("chai");
|
||||
|
||||
async function staticWebServer(path) {
|
||||
// Start a static web server
|
||||
const app = express();
|
||||
app.use(express.static(path));
|
||||
// Port 0 means let the OS select a port
|
||||
const server = http.createServer(app).listen(0, "localhost");
|
||||
await new Promise(resolve => server.on("listening", resolve));
|
||||
|
||||
// Read back the bound address
|
||||
const address = server.address();
|
||||
return { server, address };
|
||||
}
|
||||
|
||||
describe("some e2e test", function() {
|
||||
before(async function() {
|
||||
// Start webserver
|
||||
const { address, server } = await staticWebServer(".");
|
||||
this.address = `http://${address.address}:${address.port}`;
|
||||
this.server = server;
|
||||
|
||||
// Start browser
|
||||
this.browser = await puppeteer.launch();
|
||||
this.page = await this.browser.newPage();
|
||||
await this.page.goto(`${this.address}/test/sample.html`, {
|
||||
waitUntil: "networkidle2"
|
||||
});
|
||||
});
|
||||
|
||||
it("can tap", async function() {
|
||||
const btn = await this.page.$("button");
|
||||
await btn.tap();
|
||||
const result = await this.page.evaluate(_ => {
|
||||
return window.lol;
|
||||
});
|
||||
expect(result).to.equal(true);
|
||||
});
|
||||
|
||||
it("can tap manually", async function() {
|
||||
const btn = await this.page.$("button");
|
||||
const box = await btn.boundingBox();
|
||||
const finger = fingerDown(
|
||||
this.page,
|
||||
box.x + box.width / 2,
|
||||
box.y + box.height / 2
|
||||
);
|
||||
finger.up();
|
||||
const result = await this.page.evaluate(_ => {
|
||||
return window.lol;
|
||||
});
|
||||
expect(result).to.equal(true);
|
||||
});
|
||||
|
||||
it("does some taps", async function() {});
|
||||
|
||||
after(async function() {
|
||||
this.server.close();
|
||||
await this.browser.close();
|
||||
});
|
||||
});
|
||||
@@ -1,61 +0,0 @@
|
||||
let touchPoints = [];
|
||||
let idCnt = 0;
|
||||
|
||||
class Finger {
|
||||
constructor(point, page) {
|
||||
this._point = point;
|
||||
this._page = page;
|
||||
}
|
||||
|
||||
move(x, y) {
|
||||
if (!this._point) return;
|
||||
Object.assign(this._point, {
|
||||
x: Math.floor(x),
|
||||
y: Math.floor(y)
|
||||
});
|
||||
this._page.touchscreen._client.send("Input.dispatchTouchEvent", {
|
||||
type: "touchMove",
|
||||
touchPoints,
|
||||
modifiers: page._keyboard._modifiers
|
||||
});
|
||||
}
|
||||
|
||||
up() {
|
||||
if (!this._point) return;
|
||||
const idx = touchPoints.indexOf(this._point);
|
||||
touchPoints = touchPoints.splice(idx, 1);
|
||||
this._point = null;
|
||||
if (touchPoints.length === 0) {
|
||||
this._page.touchscreen._client.send("Input.dispatchTouchEvent", {
|
||||
type: "touchEnd",
|
||||
modifiers: this._page._keyboard._modifiers
|
||||
});
|
||||
} else {
|
||||
this._page.touchscreen._client.send("Input.dispatchTouchEvent", {
|
||||
type: "touchMove",
|
||||
touchPoints,
|
||||
modifiers: this._page._keyboard._modifiers
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fingerDown(page, x, y) {
|
||||
const id = idCnt++;
|
||||
const point = {
|
||||
x: Math.round(x),
|
||||
y: Math.round(y),
|
||||
id
|
||||
};
|
||||
touchPoints.push(point);
|
||||
page.touchscreen._client.send("Input.dispatchTouchEvent", {
|
||||
type: "touchStart",
|
||||
touchPoints,
|
||||
modifiers: page._keyboard._modifiers
|
||||
});
|
||||
return new Finger(point, page);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
fingerDown
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
import {bitmapToImageData} from "../../src/lib/util";
|
||||
|
||||
const expect = chai.expect;
|
||||
|
||||
describe("util.bitmapToImageData", function () {
|
||||
it("is a function", function () {
|
||||
expect(bitmapToImageData).to.be.a('function');
|
||||
});
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
<!doctype html>
|
||||
|
||||
<button>Test me</button>
|
||||
<script>
|
||||
document.querySelector('button').onclick = _ => window.lol = true;
|
||||
</script>
|
||||
@@ -107,23 +107,10 @@ module.exports = function (_, env) {
|
||||
loader: 'babel-loader',
|
||||
// Don't respect any Babel RC files found on the filesystem:
|
||||
options: Object.assign(readJson('.babelrc'), { babelrc: false })
|
||||
},
|
||||
{
|
||||
// All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`.
|
||||
test: /\/codecs\/.*\.js$/,
|
||||
loader: 'exports-loader',
|
||||
},
|
||||
{
|
||||
test: /\/codecs\/.*\.wasm$/,
|
||||
// This is needed to make webpack NOT process wasm files.
|
||||
// See https://github.com/webpack/webpack/issues/6725
|
||||
type: 'javascript/auto',
|
||||
loader: 'file-loader',
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.IgnorePlugin(/(fs)/, /\/codecs\//),
|
||||
// Pretty progressbar showing build progress:
|
||||
new ProgressBarPlugin({
|
||||
format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r',
|
||||
@@ -152,7 +139,6 @@ module.exports = function (_, env) {
|
||||
// See: https://github.com/webpack-contrib/mini-css-extract-plugin
|
||||
// See also: https://twitter.com/wsokra/status/970253245733113856
|
||||
isProd && new MiniCssExtractPlugin({
|
||||
filename: '[name].[contenthash:5].css',
|
||||
chunkFilename: '[name].chunk.[contenthash:5].css'
|
||||
}),
|
||||
|
||||
|
||||
Reference in New Issue
Block a user