forked from external-repos/squoosh
Compare commits
1 Commits
karmatic
...
prerenderi
| Author | SHA1 | Date | |
|---|---|---|---|
|
dbf38e5a44 |
18
.babelrc
18
.babelrc
@@ -1,5 +1,23 @@
|
||||
{
|
||||
"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",
|
||||
|
||||
@@ -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 |
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB |
@@ -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,48 +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', []),
|
||||
};
|
||||
console.log('Version:', api.version().toString(16));
|
||||
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 decoder
|
||||
|
||||
- Source: <https://github.com/webmproject/libwebp>
|
||||
- Version: v0.6.1
|
||||
|
||||
## 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 size)`
|
||||
|
||||
Allocates an buffer for the file data.
|
||||
|
||||
### `void destroy_buffer(uint8_t* p)`
|
||||
|
||||
Frees a buffer created with `create_buffer`.
|
||||
|
||||
### `void decode(uint8_t* img_in, int size)`
|
||||
|
||||
Decodes the given webp file into raw RGBA. The result is implicitly stored and can be accessed using the `get_result_*()` functions.
|
||||
|
||||
### `void free_result()`
|
||||
|
||||
Frees the result created by `decode()`.
|
||||
|
||||
### `int get_result_pointer()`
|
||||
|
||||
Returns the pointer to the start of the buffer holding the encoded data. Length is width x height x 4 bytes.
|
||||
|
||||
### `int get_result_width()`
|
||||
|
||||
Returns the width of the image.
|
||||
|
||||
### `int get_result_height()`
|
||||
|
||||
Returns the height of the image.
|
||||
@@ -1,45 +0,0 @@
|
||||
<!doctype html>
|
||||
<script src='webp_dec.js'></script>
|
||||
<script>
|
||||
const Module = webp_dec();
|
||||
|
||||
async function loadFile(src) {
|
||||
const resp = await fetch(src);
|
||||
return await resp.arrayBuffer();
|
||||
}
|
||||
|
||||
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']),
|
||||
decode: Module.cwrap('decode', '', ['number', 'number']),
|
||||
free_result: Module.cwrap('free_result', '', ['number']),
|
||||
get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
|
||||
get_result_width: Module.cwrap('get_result_width', 'number', []),
|
||||
get_result_height: Module.cwrap('get_result_height', 'number', []),
|
||||
};
|
||||
console.log('Version:', api.version().toString(16));
|
||||
const image = await loadFile('../example.webp');
|
||||
const p = api.create_buffer(image.byteLength);
|
||||
Module.HEAP8.set(new Uint8Array(image), p);
|
||||
api.decode(p, image.byteLength);
|
||||
const resultPointer = api.get_result_pointer();
|
||||
if(resultPointer === 0) {
|
||||
throw new Error("Could not decode image");
|
||||
}
|
||||
const resultWidth = api.get_result_width();
|
||||
const resultHeight = api.get_result_height();
|
||||
const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultWidth * resultHeight * 4);
|
||||
const result = new Uint8ClampedArray(resultView);
|
||||
const imageData = new ImageData(result, resultWidth, resultHeight);
|
||||
api.free_result(resultPointer);
|
||||
api.destroy_buffer(p);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = resultWidth;
|
||||
canvas.height = resultHeight;
|
||||
document.body.appendChild(canvas);
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
};
|
||||
</script>
|
||||
1147
codecs/webp_dec/package-lock.json
generated
1147
codecs/webp_dec/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"name": "webp_dec",
|
||||
"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_dec\"' -I node_modules/libwebp -o ./webp_dec.js webp_dec.c node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c"
|
||||
},
|
||||
"napa": {
|
||||
"libwebp": "webmproject/libwebp#v1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"napa": "^3.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
#include "emscripten.h"
|
||||
#include "src/webp/decode.h"
|
||||
#include "src/webp/demux.h"
|
||||
#include <stdlib.h>
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
int version() {
|
||||
return WebPGetDecoderVersion();
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
uint8_t* create_buffer(int size) {
|
||||
return malloc(size);
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
void destroy_buffer(uint8_t* p) {
|
||||
free(p);
|
||||
}
|
||||
|
||||
int result[3];
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
void decode(uint8_t* img_in, int size) {
|
||||
int width, height;
|
||||
uint8_t* img_out = WebPDecodeRGBA(img_in, size, &width, &height);
|
||||
result[0] = (int)img_out;
|
||||
result[1] = width;
|
||||
result[2] = height;
|
||||
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
void free_result() {
|
||||
WebPFree(result[0]);
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
int get_result_pointer() {
|
||||
return result[0];
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
int get_result_width() {
|
||||
return result[1];
|
||||
}
|
||||
|
||||
EMSCRIPTEN_KEEPALIVE
|
||||
int get_result_height() {
|
||||
return result[2];
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -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,48 +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', []),
|
||||
};
|
||||
console.log('Version:', api.version().toString(16));
|
||||
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/webp'});
|
||||
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#v1.0.0"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
2828
package-lock.json
generated
2828
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
58
package.json
58
package.json
@@ -4,27 +4,32 @@
|
||||
"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": "tslint -c tslint.json -t verbose 'src/**/*.{ts,js}'",
|
||||
"lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,js}'",
|
||||
"test": "npm run lint && npm run build && npm run test:e2e && npm run test:unit",
|
||||
"test:e2e": "mocha -R spec test/e2e",
|
||||
"test:unit": "karmatic"
|
||||
"lint": "eslint src"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run lint"
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"standard",
|
||||
"standard-jsx"
|
||||
],
|
||||
"rules": {
|
||||
"indent": [
|
||||
2,
|
||||
2
|
||||
],
|
||||
"semi": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"prefer-const": 1
|
||||
}
|
||||
},
|
||||
"eslintIgnore": [
|
||||
"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",
|
||||
@@ -36,32 +41,31 @@
|
||||
"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",
|
||||
"exports-loader": "^0.7.0",
|
||||
"express": "^4.16.3",
|
||||
"file-loader": "^1.1.11",
|
||||
"eslint": "^4.18.2",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-config-standard-jsx": "^5.0.0",
|
||||
"eslint-plugin-import": "^2.10.0",
|
||||
"eslint-plugin-node": "^6.0.1",
|
||||
"eslint-plugin-promise": "^3.7.0",
|
||||
"eslint-plugin-react": "^7.7.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"html-webpack-plugin": "^3.0.6",
|
||||
"husky": "^1.0.0-rc.9",
|
||||
"if-env": "^1.0.4",
|
||||
"karmatic": "^1.1.7",
|
||||
"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",
|
||||
"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",
|
||||
"source-map-loader": "^0.2.3",
|
||||
"style-loader": "^0.20.3",
|
||||
"ts-loader": "^4.0.1",
|
||||
"tslint": "^5.10.0",
|
||||
"tslint-config-airbnb": "^5.9.2",
|
||||
"tslint": "^5.9.1",
|
||||
"tslint-config-semistandard": "^7.0.0",
|
||||
"tslint-react": "^3.5.1",
|
||||
"typescript": "^2.7.2",
|
||||
@@ -74,12 +78,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"comlink": "^3.0.3",
|
||||
"comlink-loader": "^1.0.0",
|
||||
"material-components-web": "^0.32.0",
|
||||
"material-radial-progress": "git+https://gist.github.com/02134901c77c5309924bfcf8b4435ebe.git",
|
||||
"preact": "^8.2.7",
|
||||
"preact-i18n": "^1.2.0",
|
||||
"preact-material-components": "^1.3.7",
|
||||
"preact-material-components-drawer": "git+https://gist.github.com/a78fceed440b98e62582e4440b86bfab.git",
|
||||
"preact-router": "^2.6.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
import * as mozJPEG from './mozjpeg/encoder';
|
||||
import * as identity from './identity/encoder';
|
||||
|
||||
export type EncoderState = identity.EncoderState | mozJPEG.EncoderState;
|
||||
export type EncoderOptions = identity.EncodeOptions | mozJPEG.EncodeOptions;
|
||||
export type EncoderType = keyof typeof encoderMap;
|
||||
|
||||
export const encoderMap = {
|
||||
[identity.type]: identity,
|
||||
[mozJPEG.type]: mozJPEG,
|
||||
};
|
||||
|
||||
export const encoders = Array.from(Object.values(encoderMap));
|
||||
@@ -1,6 +0,0 @@
|
||||
export interface EncodeOptions {}
|
||||
export interface EncoderState { type: typeof type; options: EncodeOptions; }
|
||||
|
||||
export const type = 'identity';
|
||||
export const label = 'Original image';
|
||||
export const defaultOptions: EncodeOptions = {};
|
||||
@@ -1,79 +0,0 @@
|
||||
import mozjpeg_enc from '../../../codecs/mozjpeg_enc/mozjpeg_enc';
|
||||
// Using require() so TypeScript doesn’t complain about this not being a module.
|
||||
import { EncodeOptions } from './encoder';
|
||||
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 default class MozJpegEncoder {
|
||||
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, options: EncodeOptions): 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, options.quality);
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import EncoderWorker from './EncoderWorker';
|
||||
|
||||
export interface EncodeOptions { quality: number; }
|
||||
export interface EncoderState { type: typeof type; options: EncodeOptions; }
|
||||
|
||||
export const type = 'mozjpeg';
|
||||
export const label = 'MozJPEG';
|
||||
export const mimeType = 'image/jpeg';
|
||||
export const extension = 'jpg';
|
||||
export const defaultOptions: EncodeOptions = { quality: 7 };
|
||||
|
||||
export async function encode(data: ImageData, options: EncodeOptions) {
|
||||
// We need to await this because it's been comlinked.
|
||||
const encoder = await new EncoderWorker();
|
||||
return encoder.encode(data, options);
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { EncodeOptions } from './encoder';
|
||||
import { bind } from '../../lib/util';
|
||||
|
||||
type Props = {
|
||||
options: EncodeOptions,
|
||||
onChange(newOptions: EncodeOptions): void
|
||||
};
|
||||
|
||||
export default class MozJpegCodecOptions extends Component<Props, {}> {
|
||||
@bind
|
||||
onChange(event: Event) {
|
||||
const el = event.currentTarget as HTMLInputElement;
|
||||
this.props.onChange({ quality: Number(el.value) });
|
||||
}
|
||||
|
||||
render({ options }: Props) {
|
||||
return (
|
||||
<div>
|
||||
<label>
|
||||
Quality:
|
||||
<input
|
||||
name="quality"
|
||||
type="range"
|
||||
min="1"
|
||||
max="100"
|
||||
step="1"
|
||||
value={'' + options.quality}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
import { bind } from '../../../../lib/util';
|
||||
import './styles.css';
|
||||
|
||||
// tslint:disable-next-line:max-line-length
|
||||
function firstMatchingItem(list: DataTransferItemList, acceptVal: string): DataTransferItem | undefined {
|
||||
// Split accepts values by ',' then by '/'. Trim everything & lowercase.
|
||||
const accepts = acceptVal.toLowerCase().split(',').map((accept) => {
|
||||
return accept.trim().split('/').map(part => part.trim());
|
||||
}).filter(acceptParts => acceptParts.length === 2); // Filter invalid values
|
||||
|
||||
return Array.from(list).find((item) => {
|
||||
if (item.kind !== 'file') return false;
|
||||
|
||||
// 'Parse' the type.
|
||||
const [typeMain, typeSub] = item.type.toLowerCase().split('/').map(s => s.trim());
|
||||
|
||||
for (const [acceptMain, acceptSub] of accepts) {
|
||||
// Look for an exact match, or a partial match if * is accepted, eg image/*.
|
||||
if (typeMain === acceptMain && (acceptSub === '*' || typeSub === acceptSub)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
interface FileDropEventInit extends EventInit {
|
||||
file: File;
|
||||
}
|
||||
|
||||
export class FileDropEvent extends Event {
|
||||
private _file: File;
|
||||
constructor(typeArg: string, eventInitDict: FileDropEventInit) {
|
||||
super(typeArg, eventInitDict);
|
||||
this._file = eventInitDict.file;
|
||||
}
|
||||
|
||||
get file(): File {
|
||||
return this._file;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Example Usage.
|
||||
<file-drop
|
||||
accept='image/*'
|
||||
class='drop-valid|drop-invalid'
|
||||
>
|
||||
[everything in here is a drop target.]
|
||||
</file-drop>
|
||||
|
||||
dropElement.addEventListner('dropfile', (event) => console.log(event.detail))
|
||||
*/
|
||||
export class FileDrop extends HTMLElement {
|
||||
|
||||
private _dragEnterCount = 0;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.addEventListener('dragover', event => event.preventDefault());
|
||||
this.addEventListener('drop', this._onDrop);
|
||||
this.addEventListener('dragenter', this._onDragEnter);
|
||||
this.addEventListener('dragend', () => this._reset());
|
||||
this.addEventListener('dragleave', this._onDragLeave);
|
||||
}
|
||||
|
||||
get accept() {
|
||||
return this.getAttribute('accept') || '';
|
||||
}
|
||||
|
||||
set accept(val: string) {
|
||||
this.setAttribute('accept', val);
|
||||
}
|
||||
|
||||
@bind
|
||||
private _onDragEnter(event: DragEvent) {
|
||||
this._dragEnterCount += 1;
|
||||
if (this._dragEnterCount > 1) return;
|
||||
|
||||
// We don't have data, attempt to get it and if it matches, set the correct state.
|
||||
const dragDataItem = firstMatchingItem(event.dataTransfer.items, this.accept);
|
||||
if (dragDataItem) {
|
||||
this.classList.add('drop-valid');
|
||||
} else {
|
||||
this.classList.add('drop-invalid');
|
||||
}
|
||||
}
|
||||
|
||||
@bind
|
||||
private _onDragLeave() {
|
||||
this._dragEnterCount -= 1;
|
||||
if (this._dragEnterCount === 0) {
|
||||
this._reset();
|
||||
}
|
||||
}
|
||||
|
||||
@bind
|
||||
private _onDrop(event: DragEvent) {
|
||||
event.preventDefault();
|
||||
this._reset();
|
||||
const dragDataItem = firstMatchingItem(event.dataTransfer.items, this.accept);
|
||||
if (!dragDataItem) return;
|
||||
|
||||
const file = dragDataItem.getAsFile();
|
||||
if (file === null) return;
|
||||
|
||||
this.dispatchEvent(new FileDropEvent('filedrop', { file }));
|
||||
}
|
||||
|
||||
private _reset() {
|
||||
this._dragEnterCount = 0;
|
||||
this.classList.remove('drop-valid');
|
||||
this.classList.remove('drop-invalid');
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('file-drop', FileDrop);
|
||||
@@ -1,19 +0,0 @@
|
||||
import { FileDropEvent, FileDrop } from '.';
|
||||
|
||||
declare global {
|
||||
|
||||
interface HTMLElementEventMap {
|
||||
'filedrop': FileDropEvent;
|
||||
}
|
||||
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'file-drop': FileDropAttributes;
|
||||
}
|
||||
|
||||
interface FileDropAttributes extends HTMLAttributes {
|
||||
accept?: string;
|
||||
onfiledrop?: ((this: FileDrop, ev: FileDropEvent) => any) | null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
file-drop {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,218 +1,49 @@
|
||||
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 Options from '../options';
|
||||
import { FileDropEvent } from './custom-els/FileDrop';
|
||||
import './custom-els/FileDrop';
|
||||
|
||||
import * as mozJPEG from '../../codecs/mozjpeg/encoder';
|
||||
import * as identity from '../../codecs/identity/encoder';
|
||||
import { EncoderState, EncoderType, EncoderOptions, encoderMap } from '../../codecs/encoders';
|
||||
type Props = {};
|
||||
|
||||
interface SourceImage {
|
||||
file: File;
|
||||
bmp: ImageBitmap;
|
||||
data: ImageData;
|
||||
}
|
||||
|
||||
interface EncodedImage {
|
||||
encoderState: EncoderState;
|
||||
bmp?: ImageBitmap;
|
||||
loading: boolean;
|
||||
/** Counter of the latest bmp currently encoding */
|
||||
loadingCounter: number;
|
||||
/** Counter of the latest bmp encoded */
|
||||
loadedCounter: number;
|
||||
}
|
||||
|
||||
interface Props {}
|
||||
|
||||
interface State {
|
||||
source?: SourceImage;
|
||||
images: [EncodedImage, EncodedImage];
|
||||
loading: boolean;
|
||||
error?: string;
|
||||
}
|
||||
type State = {
|
||||
img?: ImageBitmap
|
||||
};
|
||||
|
||||
export default class App extends Component<Props, State> {
|
||||
state: State = {
|
||||
loading: false,
|
||||
images: [
|
||||
{
|
||||
encoderState: { type: identity.type, options: identity.defaultOptions },
|
||||
loadingCounter: 0,
|
||||
loadedCounter: 0,
|
||||
loading: false
|
||||
},
|
||||
{
|
||||
encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
|
||||
loadingCounter: 0,
|
||||
loadedCounter: 0,
|
||||
loading: false
|
||||
}
|
||||
]
|
||||
};
|
||||
state: State = {};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
// In development, persist application state across hot reloads:
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
this.setState(window.STATE);
|
||||
const oldCDU = this.componentDidUpdate;
|
||||
this.componentDidUpdate = (props, state) => {
|
||||
if (oldCDU) oldCDU.call(this, props, state);
|
||||
this.componentDidUpdate = () => {
|
||||
window.STATE = this.state;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
onEncoderChange(index: 0 | 1, type: EncoderType, options?: EncoderOptions): void {
|
||||
const images = this.state.images.slice() as [EncodedImage, EncodedImage];
|
||||
const image = images[index];
|
||||
|
||||
// Some type cheating here.
|
||||
// encoderMap[type].defaultOptions is always safe.
|
||||
// options should always be correct for the type, but TypeScript isn't smart enough.
|
||||
const encoderState: EncoderState = {
|
||||
type,
|
||||
options: options ? options : encoderMap[type].defaultOptions
|
||||
} as EncoderState;
|
||||
|
||||
images[index] = {
|
||||
...image,
|
||||
encoderState,
|
||||
};
|
||||
|
||||
this.setState({ images });
|
||||
}
|
||||
|
||||
onOptionsChange(index: 0 | 1, options: EncoderOptions): void {
|
||||
this.onEncoderChange(index, this.state.images[index].encoderState.type, options);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State): void {
|
||||
const { source, images } = this.state;
|
||||
|
||||
for (const [i, image] of images.entries()) {
|
||||
if (source !== prevState.source || image !== prevState.images[i]) {
|
||||
this.updateImage(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@bind
|
||||
async onFileChange(event: Event): Promise<void> {
|
||||
async onFileChange(event: Event) {
|
||||
const fileInput = event.target as HTMLInputElement;
|
||||
const file = fileInput.files && fileInput.files[0];
|
||||
if (!file) return;
|
||||
await this.updateFile(file);
|
||||
if (!fileInput.files || !fileInput.files[0]) return;
|
||||
// TODO: handle decode error
|
||||
const img = await createImageBitmap(fileInput.files[0]);
|
||||
this.setState({ img });
|
||||
}
|
||||
|
||||
@bind
|
||||
async onFileDrop(event: FileDropEvent) {
|
||||
const { file } = event;
|
||||
if (!file) return;
|
||||
await this.updateFile(file);
|
||||
}
|
||||
|
||||
async updateFile(file: File) {
|
||||
this.setState({ loading: true });
|
||||
try {
|
||||
const bmp = await createImageBitmap(file);
|
||||
// compute the corresponding ImageData once since it only changes when the file changes:
|
||||
const data = await bitmapToImageData(bmp);
|
||||
this.setState({
|
||||
source: { data, bmp, file },
|
||||
error: undefined,
|
||||
loading: false,
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({ error: 'IMAGE_INVALID', loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
async updateImage(index: number): Promise<void> {
|
||||
const { source, images } = this.state;
|
||||
if (!source) return;
|
||||
let image = images[index];
|
||||
|
||||
// Each time we trigger an async encode, the ID changes.
|
||||
image.loadingCounter = image.loadingCounter + 1;
|
||||
const loadingCounter = image.loadingCounter;
|
||||
|
||||
image.loading = true;
|
||||
this.setState({ });
|
||||
|
||||
const result = await this.updateCompressedImage(source, image.encoderState);
|
||||
|
||||
image = this.state.images[index];
|
||||
// If a later encode has landed before this one, return.
|
||||
if (loadingCounter < image.loadedCounter) return;
|
||||
image.bmp = result;
|
||||
image.loading = image.loadingCounter !== loadingCounter;
|
||||
image.loadedCounter = loadingCounter;
|
||||
this.setState({ });
|
||||
}
|
||||
|
||||
async updateCompressedImage(source: SourceImage, encodeData: EncoderState): Promise<ImageBitmap> {
|
||||
// Special case for identity
|
||||
if (encodeData.type === identity.type) return source.bmp;
|
||||
|
||||
try {
|
||||
const compressedData = await (() => {
|
||||
switch (encodeData.type) {
|
||||
case mozJPEG.type: return mozJPEG.encode(source.data, encodeData.options);
|
||||
default: throw Error(`Unexpected encoder name`);
|
||||
}
|
||||
})();
|
||||
|
||||
const blob = new Blob([compressedData], {
|
||||
type: encoderMap[encodeData.type].mimeType
|
||||
});
|
||||
|
||||
const bitmap = await createImageBitmap(blob);
|
||||
this.setState({ error: '' });
|
||||
return bitmap;
|
||||
} catch (err) {
|
||||
this.setState({ error: `Encoding error (type=${encodeData.type}): ${err}` });
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
render({ }: Props, { loading, error, images, source }: State) {
|
||||
const [leftImageBmp, rightImageBmp] = images.map(i => i.bmp);
|
||||
|
||||
loading = loading || images.some(image => image.loading);
|
||||
|
||||
render({ }: Props, { img }: State) {
|
||||
return (
|
||||
<file-drop accept="image/*" onfiledrop={this.onFileDrop}>
|
||||
<div id="app" class={style.app}>
|
||||
{(leftImageBmp && rightImageBmp) ? (
|
||||
<Output leftImg={leftImageBmp} rightImg={rightImageBmp} />
|
||||
) : (
|
||||
<div class={style.welcome}>
|
||||
{img ?
|
||||
<Output img={img} />
|
||||
:
|
||||
<div>
|
||||
<h1>Select an image</h1>
|
||||
<input type="file" onChange={this.onFileChange} />
|
||||
</div>
|
||||
)}
|
||||
{images.map((image, index) => (
|
||||
<span class={index ? style.rightLabel : style.leftLabel}>
|
||||
{encoderMap[image.encoderState.type].label}
|
||||
</span>
|
||||
))}
|
||||
{images.map((image, index) => (
|
||||
<Options
|
||||
class={index ? style.rightOptions : style.leftOptions}
|
||||
encoderState={image.encoderState}
|
||||
onTypeChange={this.onEncoderChange.bind(this, index)}
|
||||
onOptionsChange={this.onOptionsChange.bind(this, index)}
|
||||
/>
|
||||
))}
|
||||
{loading && <span style={{ position: 'fixed', top: 0, left: 0 }}>Loading...</span>}
|
||||
{error && <span style={{ position: 'fixed', top: 0, left: 0 }}>Error: {error}</span>}
|
||||
}
|
||||
</div>
|
||||
</file-drop>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,83 +1,3 @@
|
||||
/*
|
||||
Note: These styles are temporary. They will be replaced before going live.
|
||||
*/
|
||||
|
||||
.app {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
contain: strict;
|
||||
|
||||
.leftLabel,
|
||||
.rightLabel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding: 5px 10px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.leftLabel { left: 0; }
|
||||
.rightLabel { right: 0; }
|
||||
|
||||
.leftOptions,
|
||||
.rightOptions {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.leftOptions { left: 10px; }
|
||||
.rightOptions { right: 10px; }
|
||||
}
|
||||
|
||||
.welcome {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
padding: 20px;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
h1 {
|
||||
font-weight: inherit;
|
||||
font-size: 150%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
width: 16em;
|
||||
padding: 5px;
|
||||
margin: 0 auto;
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid #b68c86;
|
||||
background: #f0d3cf;
|
||||
box-shadow: inset 0 0 1px #fff;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
file-drop {
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
height:100%;
|
||||
width:100%;
|
||||
|
||||
&.drop-valid {
|
||||
transition: opacity 200ms ease-in-out, background-color 200ms;
|
||||
opacity: 0.5;
|
||||
background-color:green;
|
||||
}
|
||||
|
||||
&.drop-invalid {
|
||||
transition: opacity 200ms ease-in-out, background-color 200ms;
|
||||
opacity: 0.5;
|
||||
background-color:red;
|
||||
}
|
||||
}
|
||||
.app h1 {
|
||||
color: green;
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import * as style from './style.scss';
|
||||
import { bind } from '../../lib/util';
|
||||
import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
|
||||
|
||||
import { type as mozJPEGType } from '../../codecs/mozjpeg/encoder';
|
||||
import { type as identityType } from '../../codecs/identity/encoder';
|
||||
import { EncoderState, EncoderType, EncoderOptions, encoders } from '../../codecs/encoders';
|
||||
|
||||
const encoderOptionsComponentMap = {
|
||||
[mozJPEGType]: MozJpegEncoderOptions,
|
||||
[identityType]: undefined
|
||||
};
|
||||
|
||||
interface Props {
|
||||
class?: string;
|
||||
encoderState: EncoderState;
|
||||
onTypeChange(newType: EncoderType): void;
|
||||
onOptionsChange(newOptions: EncoderOptions): void;
|
||||
}
|
||||
|
||||
interface State {}
|
||||
|
||||
export default class Options extends Component<Props, State> {
|
||||
typeSelect?: HTMLSelectElement;
|
||||
|
||||
@bind
|
||||
onTypeChange(event: Event) {
|
||||
const el = event.currentTarget as HTMLSelectElement;
|
||||
|
||||
// The select element only has values matching encoder types,
|
||||
// so 'as' is safe here.
|
||||
const type = el.value as EncoderType;
|
||||
this.props.onTypeChange(type);
|
||||
}
|
||||
|
||||
render({ class: className, encoderState, onOptionsChange }: Props) {
|
||||
const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
|
||||
|
||||
return (
|
||||
<div class={`${style.options}${className ? (' ' + className) : ''}`}>
|
||||
<label>
|
||||
Mode:
|
||||
<select value={encoderState.type} onChange={this.onTypeChange}>
|
||||
{encoders.map(encoder => (
|
||||
<option value={encoder.type}>{encoder.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
{EncoderOptionComponent &&
|
||||
<EncoderOptionComponent
|
||||
options={
|
||||
// Casting options, as encoderOptionsComponentMap[encodeData.type] ensures the correct type,
|
||||
// but typescript isn't smart enough.
|
||||
encoderState.options as typeof EncoderOptionComponent['prototype']['props']['options']
|
||||
}
|
||||
onChange={onOptionsChange}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
/*
|
||||
Note: These styles are temporary. They will be replaced before going live.
|
||||
*/
|
||||
|
||||
.options {
|
||||
width: 180px;
|
||||
padding: 10px;
|
||||
background: rgba(50,50,50,0.8);
|
||||
border: 1px solid #222;
|
||||
box-shadow: inset 0 0 1px #fff, 0 0 1px #fff;
|
||||
border-radius: 3px;
|
||||
color: #eee;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
transition: opacity 300ms ease;
|
||||
|
||||
&:not(:hover) {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
|
||||
select {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@@ -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.
|
||||
const 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,99 +1,43 @@
|
||||
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, drawBitmapToCanvas } from '../../lib/util';
|
||||
import { twoUpHandle } from './custom-els/TwoUp/styles.css';
|
||||
|
||||
type Props = {
|
||||
leftImg: ImageBitmap,
|
||||
rightImg: ImageBitmap
|
||||
img: ImageBitmap
|
||||
};
|
||||
|
||||
type State = {};
|
||||
|
||||
export default class Output extends Component<Props, 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;
|
||||
|
||||
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() {
|
||||
if (this.canvasLeft) {
|
||||
drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
|
||||
}
|
||||
if (this.canvasRight) {
|
||||
drawBitmapToCanvas(this.canvasRight, this.props.rightImg);
|
||||
}
|
||||
this.updateCanvas(this.props.img);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (prevProps.leftImg !== this.props.leftImg && this.canvasLeft) {
|
||||
drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
|
||||
}
|
||||
if (prevProps.rightImg !== this.props.rightImg && this.canvasRight) {
|
||||
drawBitmapToCanvas(this.canvasRight, this.props.rightImg);
|
||||
}
|
||||
componentDidUpdate({ img }: Props) {
|
||||
if (img !== this.props.img) this.updateCanvas(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);
|
||||
}
|
||||
|
||||
render({ leftImg, rightImg }: Props, { }: State) {
|
||||
render({ img }: Props, { }: State) {
|
||||
return (
|
||||
<div class={style.output}>
|
||||
<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={leftImg.width} height={leftImg.height} />
|
||||
</pinch-zoom>
|
||||
<pinch-zoom ref={p => this.pinchZoomRight = p as PinchZoom}>
|
||||
<canvas class={style.outputCanvas} ref={c => this.canvasRight = c as HTMLCanvasElement} width={rightImg.width} height={rightImg.height} />
|
||||
</pinch-zoom>
|
||||
</two-up>
|
||||
<div>
|
||||
<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,29 +1,3 @@
|
||||
/*
|
||||
Note: These styles are temporary. They will be replaced before going live.
|
||||
*/
|
||||
|
||||
%fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.output {
|
||||
@extend %fill;
|
||||
|
||||
> two-up {
|
||||
@extend %fill;
|
||||
|
||||
> pinch-zoom {
|
||||
@extend %fill;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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,238 +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 = () => {};
|
||||
|
||||
export type InputEvent = TouchEvent | PointerEvent | MouseEvent;
|
||||
type StartCallback = ((pointer: Pointer, event: InputEvent) => boolean);
|
||||
type MoveCallback = ((previousPointers: Pointer[], event: InputEvent) => void);
|
||||
type EndCallback = ((pointer: Pointer, event: InputEvent) => 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: InputEvent): 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: InputEvent): 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;
|
||||
}
|
||||
@@ -16,37 +16,11 @@ export function bind(target: any, propertyKey: string, descriptor: PropertyDescr
|
||||
// define an instance property pointing to the bound function.
|
||||
// This effectively "caches" the bound prototype method as an instance property.
|
||||
get() {
|
||||
const bound = descriptor.value.bind(this);
|
||||
let bound = descriptor.value.bind(this);
|
||||
Object.defineProperty(this, propertyKey, {
|
||||
value: bound,
|
||||
value: bound
|
||||
});
|
||||
return bound;
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
|
||||
/** Replace the contents of a canvas with the given bitmap */
|
||||
export function drawBitmapToCanvas(canvas: HTMLCanvasElement, img: ImageBitmap) {
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) throw Error('Canvas not initialized');
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0);
|
||||
}
|
||||
|
||||
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,7 +1,3 @@
|
||||
/*
|
||||
Note: These styles are temporary. They will be replaced before going live.
|
||||
*/
|
||||
|
||||
@import './reset.scss';
|
||||
|
||||
html, body {
|
||||
@@ -9,8 +5,6 @@ html, body {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font: 14px/1.3 Roboto,'Helvetica Neue',arial,helvetica,sans-serif;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
/*
|
||||
Note: These styles are temporary. They will be replaced before going live.
|
||||
*/
|
||||
|
||||
button, a, img, input, select, textarea {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
/* eslint-env mocha */
|
||||
|
||||
const path = require('path');
|
||||
const express = require('express');
|
||||
const http = require('http');
|
||||
const puppeteer = require('puppeteer');
|
||||
const { fingerDown } = require('../lib/finger');
|
||||
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(path.resolve(__dirname, '../fixtures'));
|
||||
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}/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();
|
||||
});
|
||||
});
|
||||
6
test/fixtures/sample.html
vendored
6
test/fixtures/sample.html
vendored
@@ -1,6 +0,0 @@
|
||||
<!doctype html>
|
||||
|
||||
<button>Test me</button>
|
||||
<script>
|
||||
document.querySelector('button').onclick = _ => window.lol = true;
|
||||
</script>
|
||||
@@ -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: this._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,27 +0,0 @@
|
||||
/* eslint-env jest */
|
||||
|
||||
import { h, Component, render } from 'preact';
|
||||
import App from '../../src/components/app';
|
||||
|
||||
describe('<App />', () => {
|
||||
let scratch;
|
||||
beforeEach(() => {
|
||||
scratch = document.createElement('div');
|
||||
document.body.appendChild(scratch);
|
||||
});
|
||||
afterEach(() => {
|
||||
render(<span />, scratch, scratch.firstChild);
|
||||
scratch.remove();
|
||||
});
|
||||
|
||||
it('should render', () => {
|
||||
let app;
|
||||
render(<App ref={c => { app = c; }} />, scratch);
|
||||
|
||||
expect(app instanceof Component).toBe(true);
|
||||
|
||||
expect(scratch.innerHTML).toBe(
|
||||
`<div id="app" class="app__1wROX"><div><h1>Select an image</h1><input type="file"></div></div>`
|
||||
);
|
||||
});
|
||||
});
|
||||
15
tslint.json
15
tslint.json
@@ -1,19 +1,16 @@
|
||||
{
|
||||
"extends": [
|
||||
"tslint-config-airbnb",
|
||||
"tslint-config-semistandard",
|
||||
"tslint-react"
|
||||
],
|
||||
"rules": {
|
||||
"quotemark": [true, "single", "jsx-double", "avoid-escape"],
|
||||
"no-use-before-declare": false,
|
||||
"no-floating-promises": false,
|
||||
"space-before-function-paren": [true, false],
|
||||
"jsx-boolean-value": [true, "never"],
|
||||
"jsx-no-multiline-js": false,
|
||||
"jsx-no-bind": true,
|
||||
"jsx-no-lambda": true,
|
||||
"function-name": false,
|
||||
"variable-name": [true, "check-format", "allow-leading-underscore"]
|
||||
},
|
||||
"linterOptions": {
|
||||
"exclude": [
|
||||
"build"
|
||||
]
|
||||
"jsx-no-lambda": true
|
||||
}
|
||||
}
|
||||
@@ -33,8 +33,7 @@ module.exports = function (_, env) {
|
||||
filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
|
||||
chunkFilename: '[name].chunk.[chunkhash:5].js',
|
||||
path: path.join(__dirname, 'build'),
|
||||
publicPath: '/',
|
||||
globalObject: 'self'
|
||||
publicPath: '/'
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
|
||||
@@ -98,10 +97,6 @@ module.exports = function (_, env) {
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.worker.[tj]sx?$/,
|
||||
loader: 'comlink-loader'
|
||||
},
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
exclude: nodeModules,
|
||||
@@ -112,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',
|
||||
@@ -157,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