mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-12 08:47:31 +00:00
Compare commits
36 Commits
console-fe
...
cli-invoc-
| Author | SHA1 | Date | |
|---|---|---|---|
|
ce3d94297d | ||
|
|
76ef6294f3 | ||
|
50bc8e4106 | ||
|
|
1b8f051438 | ||
|
|
cf894b7d19 | ||
|
|
d1d181fccd | ||
|
c3d05e0e2d | ||
|
|
0c848a33ad | ||
|
|
8b20aa5f14 | ||
|
a972dfdeed | ||
|
|
a65bbdf811 | ||
|
|
7de8fa9da3 | ||
|
|
522449adc1 | ||
|
|
646747b039 | ||
|
|
a2fb7a38cd | ||
|
|
81890e972b | ||
|
|
c2aa35aa02 | ||
|
|
c6d936cd49 | ||
|
|
60b79da936 | ||
|
|
dbd80f15eb | ||
|
|
ed3c79894d | ||
|
|
213028cfdd | ||
|
|
952aea049d | ||
|
|
e3b053db12 | ||
|
|
b8574b228a | ||
|
|
ee8ea539e7 | ||
|
a7a991ae45 | ||
|
|
32232c7f0b | ||
|
|
bb78632cf5 | ||
|
|
68cd15bd14 | ||
|
|
bde3a93b6e | ||
|
|
7aeef5ff37 | ||
|
|
0ee234f03b | ||
|
|
8105633ca6 | ||
|
|
46764f3375 | ||
|
|
0371cfd292 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -4,6 +4,7 @@ node_modules
|
||||
*.css.d.ts
|
||||
build
|
||||
*.o
|
||||
.DS_Store
|
||||
|
||||
# Auto-generated by lib/feature-plugin.js
|
||||
src/features-worker/index.ts
|
||||
|
||||
BIN
cli/.DS_Store
vendored
BIN
cli/.DS_Store
vendored
Binary file not shown.
1
cli/.gitignore
vendored
1
cli/.gitignore
vendored
@@ -1,2 +1,3 @@
|
||||
node_modules
|
||||
build
|
||||
.DS_Store
|
||||
|
||||
@@ -17,8 +17,7 @@
|
||||
"static-build/*": ["src/static-build/*"],
|
||||
"client/*": ["src/client/*"],
|
||||
"shared/*": ["src/shared/*"],
|
||||
"features/*": ["src/features/*"],
|
||||
"react": ["node_modules/preact/compat"]
|
||||
"features/*": ["src/features/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
379
package-lock.json
generated
379
package-lock.json
generated
@@ -8,27 +8,22 @@
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
|
||||
"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/highlight": "^7.10.4"
|
||||
}
|
||||
},
|
||||
"@babel/helper-module-imports": {
|
||||
"version": "7.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz",
|
||||
"integrity": "sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==",
|
||||
"requires": {
|
||||
"@babel/types": "^7.12.5"
|
||||
}
|
||||
},
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
|
||||
"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw=="
|
||||
"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/highlight": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
|
||||
"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"chalk": "^2.0.0",
|
||||
@@ -39,6 +34,7 @@
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.0"
|
||||
}
|
||||
@@ -47,6 +43,7 @@
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
@@ -57,6 +54,7 @@
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
@@ -64,150 +62,26 @@
|
||||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/runtime": {
|
||||
"version": "7.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
|
||||
"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
|
||||
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@emotion/cache": {
|
||||
"version": "10.0.29",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
|
||||
"integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
|
||||
"requires": {
|
||||
"@emotion/sheet": "0.9.4",
|
||||
"@emotion/stylis": "0.8.5",
|
||||
"@emotion/utils": "0.11.3",
|
||||
"@emotion/weak-memoize": "0.2.5"
|
||||
}
|
||||
},
|
||||
"@emotion/core": {
|
||||
"version": "10.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
|
||||
"integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@emotion/cache": "^10.0.27",
|
||||
"@emotion/css": "^10.0.27",
|
||||
"@emotion/serialize": "^0.11.15",
|
||||
"@emotion/sheet": "0.9.4",
|
||||
"@emotion/utils": "0.11.3"
|
||||
}
|
||||
},
|
||||
"@emotion/css": {
|
||||
"version": "10.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
|
||||
"integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
|
||||
"requires": {
|
||||
"@emotion/serialize": "^0.11.15",
|
||||
"@emotion/utils": "0.11.3",
|
||||
"babel-plugin-emotion": "^10.0.27"
|
||||
}
|
||||
},
|
||||
"@emotion/hash": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
|
||||
},
|
||||
"@emotion/is-prop-valid": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
|
||||
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
|
||||
"requires": {
|
||||
"@emotion/memoize": "0.7.4"
|
||||
}
|
||||
},
|
||||
"@emotion/memoize": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
|
||||
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
|
||||
},
|
||||
"@emotion/serialize": {
|
||||
"version": "0.11.16",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
|
||||
"integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
|
||||
"requires": {
|
||||
"@emotion/hash": "0.8.0",
|
||||
"@emotion/memoize": "0.7.4",
|
||||
"@emotion/unitless": "0.7.5",
|
||||
"@emotion/utils": "0.11.3",
|
||||
"csstype": "^2.5.7"
|
||||
}
|
||||
},
|
||||
"@emotion/sheet": {
|
||||
"version": "0.9.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
|
||||
"integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"version": "10.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
|
||||
"integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
|
||||
"requires": {
|
||||
"@emotion/styled-base": "^10.0.27",
|
||||
"babel-plugin-emotion": "^10.0.27"
|
||||
}
|
||||
},
|
||||
"@emotion/styled-base": {
|
||||
"version": "10.0.31",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz",
|
||||
"integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@emotion/is-prop-valid": "0.8.8",
|
||||
"@emotion/serialize": "^0.11.15",
|
||||
"@emotion/utils": "0.11.3"
|
||||
}
|
||||
},
|
||||
"@emotion/stylis": {
|
||||
"version": "0.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
|
||||
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
|
||||
},
|
||||
"@emotion/unitless": {
|
||||
"version": "0.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
|
||||
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
|
||||
},
|
||||
"@emotion/utils": {
|
||||
"version": "0.11.3",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
|
||||
"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
|
||||
},
|
||||
"@emotion/weak-memoize": {
|
||||
"version": "0.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
|
||||
"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
|
||||
@@ -345,7 +219,8 @@
|
||||
"@types/parse-json": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
|
||||
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
|
||||
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.4",
|
||||
@@ -512,59 +387,6 @@
|
||||
"integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
|
||||
"dev": true
|
||||
},
|
||||
"babel-plugin-emotion": {
|
||||
"version": "10.0.33",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
|
||||
"integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@emotion/hash": "0.8.0",
|
||||
"@emotion/memoize": "0.7.4",
|
||||
"@emotion/serialize": "^0.11.16",
|
||||
"babel-plugin-macros": "^2.0.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"convert-source-map": "^1.5.0",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"find-root": "^1.1.0",
|
||||
"source-map": "^0.5.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-plugin-macros": {
|
||||
"version": "2.8.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
|
||||
"integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.7.2",
|
||||
"cosmiconfig": "^6.0.0",
|
||||
"resolve": "^1.12.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"cosmiconfig": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
|
||||
"integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
|
||||
"requires": {
|
||||
"@types/parse-json": "^4.0.0",
|
||||
"import-fresh": "^3.1.0",
|
||||
"parse-json": "^5.0.0",
|
||||
"path-type": "^4.0.0",
|
||||
"yaml": "^1.7.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-plugin-syntax-jsx": {
|
||||
"version": "6.18.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
|
||||
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
@@ -759,7 +581,8 @@
|
||||
"callsites": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
|
||||
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
|
||||
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
|
||||
"dev": true
|
||||
},
|
||||
"camelcase": {
|
||||
"version": "4.1.0",
|
||||
@@ -1113,39 +936,12 @@
|
||||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
||||
"dev": true
|
||||
},
|
||||
"console-feed": {
|
||||
"version": "3.1.10",
|
||||
"resolved": "https://registry.npmjs.org/console-feed/-/console-feed-3.1.10.tgz",
|
||||
"integrity": "sha512-C0wthrgryvBELl/zaeFrvu5ivmmsvV/0b3S9L8/7BlaNA74R8VL1rC2aNYBdfKkKTzju7KOl+i8qsqH7H9/2Ow==",
|
||||
"requires": {
|
||||
"@emotion/core": "^10.0.10",
|
||||
"@emotion/styled": "^10.0.12",
|
||||
"emotion-theming": "^10.0.10",
|
||||
"linkifyjs": "^2.1.6",
|
||||
"react-inspector": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"content-disposition": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
|
||||
"integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
|
||||
"dev": true
|
||||
},
|
||||
"convert-source-map": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
|
||||
"integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
|
||||
"requires": {
|
||||
"safe-buffer": "~5.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"cosmiconfig": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
|
||||
@@ -1664,11 +1460,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
|
||||
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
|
||||
},
|
||||
"cuint": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
|
||||
@@ -1811,16 +1602,6 @@
|
||||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||
"dev": true
|
||||
},
|
||||
"emotion-theming": {
|
||||
"version": "10.0.27",
|
||||
"resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.0.27.tgz",
|
||||
"integrity": "sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@emotion/weak-memoize": "0.2.5",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"end-of-stream": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
|
||||
@@ -1849,6 +1630,7 @@
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
|
||||
"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-arrayish": "^0.2.1"
|
||||
}
|
||||
@@ -1892,7 +1674,8 @@
|
||||
"escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
|
||||
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
|
||||
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
|
||||
"dev": true
|
||||
},
|
||||
"esm": {
|
||||
"version": "3.2.25",
|
||||
@@ -2005,11 +1788,6 @@
|
||||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"find-root": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
|
||||
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
|
||||
},
|
||||
"find-up": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
|
||||
@@ -2144,14 +1922,6 @@
|
||||
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
|
||||
"dev": true
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"hosted-git-info": {
|
||||
"version": "2.8.8",
|
||||
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
|
||||
@@ -2305,6 +2075,7 @@
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
|
||||
"integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"parent-module": "^1.0.0",
|
||||
"resolve-from": "^4.0.0"
|
||||
@@ -2353,7 +2124,8 @@
|
||||
"is-arrayish": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
|
||||
"integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
|
||||
"integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
|
||||
"dev": true
|
||||
},
|
||||
"is-callable": {
|
||||
"version": "1.2.0",
|
||||
@@ -2387,15 +2159,6 @@
|
||||
"integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
|
||||
"dev": true
|
||||
},
|
||||
"is-dom": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-dom/-/is-dom-1.1.0.tgz",
|
||||
"integrity": "sha512-u82f6mvhYxRPKpw8V1N0W8ce1xXwOrQtgGcxl6UCL5zBmZu3is/18K0rR7uFCnMDuAsS/3W54mGL4vsaFUQlEQ==",
|
||||
"requires": {
|
||||
"is-object": "^1.0.1",
|
||||
"is-window": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"is-extglob": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
@@ -2435,11 +2198,6 @@
|
||||
"integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
|
||||
"dev": true
|
||||
},
|
||||
"is-object": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
|
||||
"integrity": "sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA=="
|
||||
},
|
||||
"is-path-cwd": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
|
||||
@@ -2506,11 +2264,6 @@
|
||||
"has-symbols": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"is-window": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz",
|
||||
"integrity": "sha1-LIlspT25feRdPDMTOmXYyfVjSA0="
|
||||
},
|
||||
"isexe": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
@@ -2531,7 +2284,8 @@
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "3.14.0",
|
||||
@@ -2552,7 +2306,8 @@
|
||||
"json-parse-even-better-errors": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
|
||||
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
|
||||
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
|
||||
"dev": true
|
||||
},
|
||||
"json-schema-traverse": {
|
||||
"version": "0.4.1",
|
||||
@@ -2572,12 +2327,8 @@
|
||||
"lines-and-columns": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
|
||||
"integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
|
||||
},
|
||||
"linkifyjs": {
|
||||
"version": "2.1.9",
|
||||
"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.9.tgz",
|
||||
"integrity": "sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug=="
|
||||
"integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
|
||||
"dev": true
|
||||
},
|
||||
"linkstate": {
|
||||
"version": "2.0.0",
|
||||
@@ -2682,11 +2433,6 @@
|
||||
"p-locate": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.20",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
|
||||
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
|
||||
},
|
||||
"lodash.camelcase": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
|
||||
@@ -2739,14 +2485,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"requires": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"lru-cache": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
|
||||
@@ -3029,11 +2767,6 @@
|
||||
"boolbase": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
|
||||
},
|
||||
"object-inspect": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
|
||||
@@ -3153,6 +2886,7 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
|
||||
"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"callsites": "^3.0.0"
|
||||
}
|
||||
@@ -3161,6 +2895,7 @@
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
|
||||
"integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.0.0",
|
||||
"error-ex": "^1.3.1",
|
||||
@@ -3195,7 +2930,8 @@
|
||||
"path-parse": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
|
||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
|
||||
"dev": true
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "2.2.1",
|
||||
@@ -3206,7 +2942,8 @@
|
||||
"path-type": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
|
||||
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
|
||||
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
|
||||
"dev": true
|
||||
},
|
||||
"picomatch": {
|
||||
"version": "2.2.2",
|
||||
@@ -6299,9 +6036,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"preact": {
|
||||
"version": "10.5.5",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.5.5.tgz",
|
||||
"integrity": "sha512-5ONLNH1SXMzzbQoExZX4TELemNt+TEDb622xXFNfZngjjM9qtrzseJt+EfiUu4TZ6EJ95X5sE1ES4yqHFSIdhg==",
|
||||
"version": "10.5.7",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.5.7.tgz",
|
||||
"integrity": "sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg==",
|
||||
"dev": true
|
||||
},
|
||||
"preact-render-to-string": {
|
||||
@@ -6325,16 +6062,6 @@
|
||||
"integrity": "sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U=",
|
||||
"dev": true
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.7.2",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
|
||||
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.8.1"
|
||||
}
|
||||
},
|
||||
"pseudomap": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
|
||||
@@ -6390,21 +6117,6 @@
|
||||
"strip-json-comments": "~2.0.1"
|
||||
}
|
||||
},
|
||||
"react-inspector": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.0.tgz",
|
||||
"integrity": "sha512-JAwswiengIcxi4X/Ssb8nf6suOuQsyit8Fxo04+iPKTnPNY3XIOuagjMZSzpJDDKkYcc/ARlySOYZZv626WUvA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"is-dom": "^1.0.0",
|
||||
"prop-types": "^15.0.0"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
@@ -6427,11 +6139,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.7",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
|
||||
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
|
||||
},
|
||||
"registry-auth-token": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
|
||||
@@ -6455,6 +6162,7 @@
|
||||
"version": "1.17.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
|
||||
"integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"path-parse": "^1.0.6"
|
||||
}
|
||||
@@ -6462,7 +6170,8 @@
|
||||
"resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
|
||||
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
|
||||
"dev": true
|
||||
},
|
||||
"restore-cursor": {
|
||||
"version": "3.1.0",
|
||||
@@ -7199,11 +6908,6 @@
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
|
||||
"dev": true
|
||||
},
|
||||
"to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
|
||||
},
|
||||
"to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
@@ -7399,7 +7103,8 @@
|
||||
"yaml": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
|
||||
"integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg=="
|
||||
"integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
"postcss-nested": "^4.2.3",
|
||||
"postcss-simple-vars": "^5.0.2",
|
||||
"postcss-url": "^8.0.0",
|
||||
"preact": "^10.5.5",
|
||||
"preact": "^10.5.7",
|
||||
"preact-render-to-string": "^5.1.11",
|
||||
"prettier": "^2.1.2",
|
||||
"rollup": "^2.33.1",
|
||||
@@ -55,7 +55,6 @@
|
||||
"*.rs": "rustfmt"
|
||||
},
|
||||
"dependencies": {
|
||||
"console-feed": "^3.1.10",
|
||||
"wasm-feature-detect": "^1.2.9"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,8 +12,6 @@ import 'shared/custom-els/snack-bar';
|
||||
import Intro from 'shared/prerendered-app/Intro';
|
||||
import 'shared/custom-els/loading-spinner';
|
||||
|
||||
import { Console } from 'console-feed';
|
||||
|
||||
const ROUTE_EDITOR = '/editor';
|
||||
|
||||
const compressPromise = import('client/lazy-app/Compress');
|
||||
@@ -117,7 +115,6 @@ export default class App extends Component<Props, State> {
|
||||
|
||||
return (
|
||||
<div class={style.app}>
|
||||
<Console logs={[]} />
|
||||
<file-drop onfiledrop={this.onFileDrop} class={style.drop}>
|
||||
{showSpinner ? (
|
||||
<loading-spinner class={style.appLoader} />
|
||||
|
||||
37
src/client/lazy-app/Compress/CanvasImage.tsx
Normal file
37
src/client/lazy-app/Compress/CanvasImage.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { h, Component, createRef } from 'preact';
|
||||
import { drawDataToCanvas } from '../util';
|
||||
|
||||
export interface CanvasImageProps
|
||||
extends h.JSX.HTMLAttributes<HTMLCanvasElement> {
|
||||
image?: ImageData;
|
||||
}
|
||||
|
||||
export default class CanvasImage extends Component<CanvasImageProps> {
|
||||
canvas = createRef<HTMLCanvasElement>();
|
||||
componentDidUpdate(prevProps: CanvasImageProps) {
|
||||
if (this.props.image !== prevProps.image) {
|
||||
this.draw(this.props.image);
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
if (this.props.image) {
|
||||
this.draw(this.props.image);
|
||||
}
|
||||
}
|
||||
draw(image?: ImageData) {
|
||||
const canvas = this.canvas.current;
|
||||
if (!canvas) return;
|
||||
if (!image) canvas.getContext('2d');
|
||||
else drawDataToCanvas(canvas, image);
|
||||
}
|
||||
render({ image, ...props }: CanvasImageProps) {
|
||||
return (
|
||||
<canvas
|
||||
ref={this.canvas}
|
||||
width={image?.width}
|
||||
height={image?.height}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
54
src/client/lazy-app/Compress/ClickOutsideDetector.tsx
Normal file
54
src/client/lazy-app/Compress/ClickOutsideDetector.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import {
|
||||
Component,
|
||||
cloneElement,
|
||||
createRef,
|
||||
toChildArray,
|
||||
ComponentChildren,
|
||||
RefObject,
|
||||
} from 'preact';
|
||||
|
||||
interface Props {
|
||||
children: ComponentChildren;
|
||||
onClick?(e: MouseEvent | KeyboardEvent): void;
|
||||
}
|
||||
|
||||
export class ClickOutsideDetector extends Component<Props> {
|
||||
private _roots: RefObject<Element>[] = [];
|
||||
|
||||
private handleClick = (e: MouseEvent) => {
|
||||
let target = e.target as Node;
|
||||
// check if the click came from within any of our child elements:
|
||||
for (const { current: root } of this._roots) {
|
||||
if (root && (root === target || root.contains(target))) return;
|
||||
}
|
||||
const { onClick } = this.props;
|
||||
if (onClick) onClick(e);
|
||||
};
|
||||
|
||||
private handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
const { onClick } = this.props;
|
||||
if (onClick) onClick(e);
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
addEventListener('click', this.handleClick, { passive: true });
|
||||
addEventListener('keydown', this.handleKey, { passive: true });
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
removeEventListener('click', this.handleClick);
|
||||
removeEventListener('keydown', this.handleKey);
|
||||
}
|
||||
|
||||
render({ children }: Props) {
|
||||
this._roots = [];
|
||||
return toChildArray(children).map((child) => {
|
||||
if (typeof child !== 'object') return child;
|
||||
const ref = createRef();
|
||||
this._roots.push(ref);
|
||||
return cloneElement(child, { ref });
|
||||
});
|
||||
}
|
||||
}
|
||||
210
src/client/lazy-app/Compress/Flyout/index.tsx
Normal file
210
src/client/lazy-app/Compress/Flyout/index.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
import {
|
||||
h,
|
||||
cloneElement,
|
||||
Component,
|
||||
VNode,
|
||||
createRef,
|
||||
ComponentChildren,
|
||||
ComponentProps,
|
||||
Fragment,
|
||||
render,
|
||||
} from 'preact';
|
||||
import * as style from './style.css';
|
||||
import 'add-css:./style.css';
|
||||
|
||||
type Anchor = 'left' | 'right' | 'top' | 'bottom';
|
||||
type Direction = 'left' | 'right' | 'up' | 'down';
|
||||
|
||||
const has = (haystack: string | string[] | undefined, needle: string) =>
|
||||
Array.isArray(haystack) ? haystack.includes(needle) : haystack === needle;
|
||||
|
||||
interface Props extends Omit<ComponentProps<'aside'>, 'ref'> {
|
||||
showing?: boolean;
|
||||
direction?: Direction | Direction[];
|
||||
anchor?: Anchor;
|
||||
toggle?: VNode;
|
||||
children?: ComponentChildren;
|
||||
}
|
||||
|
||||
interface State {
|
||||
showing: boolean;
|
||||
hasShown: boolean;
|
||||
}
|
||||
|
||||
export default class Flyout extends Component<Props, State> {
|
||||
state = {
|
||||
showing: this.props.showing === true,
|
||||
hasShown: this.props.showing === true,
|
||||
};
|
||||
|
||||
private wrap = createRef<HTMLElement>();
|
||||
|
||||
private menu = createRef<HTMLElement>();
|
||||
|
||||
private resizeObserver?: ResizeObserver;
|
||||
|
||||
private shown?: number;
|
||||
|
||||
private dismiss = (event: Event) => {
|
||||
if (this.menu.current && this.menu.current.contains(event.target as Node))
|
||||
return;
|
||||
// prevent toggle buttons from immediately dismissing:
|
||||
if (this.shown && Date.now() - this.shown < 10) return;
|
||||
this.setShowing(false);
|
||||
};
|
||||
|
||||
hide = () => {
|
||||
this.setShowing(false);
|
||||
};
|
||||
|
||||
show = () => {
|
||||
this.setShowing(true);
|
||||
};
|
||||
|
||||
toggle = () => {
|
||||
this.setShowing(!this.state.showing);
|
||||
};
|
||||
|
||||
private setShowing = (showing?: boolean) => {
|
||||
this.shown = Date.now();
|
||||
if (showing) this.setState({ showing: true, hasShown: true });
|
||||
else this.setState({ showing: false });
|
||||
};
|
||||
|
||||
private reposition = () => {
|
||||
const menu = this.menu.current;
|
||||
const wrap = this.wrap.current;
|
||||
if (!menu || !wrap || !this.state.showing) return;
|
||||
const bbox = wrap.getBoundingClientRect();
|
||||
|
||||
const { direction = 'down', anchor = 'right' } = this.props;
|
||||
const { innerWidth, innerHeight } = window;
|
||||
|
||||
const anchorX = has(anchor, 'left') ? bbox.left : bbox.right;
|
||||
|
||||
menu.style.left = menu.style.right = menu.style.top = menu.style.bottom =
|
||||
'';
|
||||
|
||||
if (has(direction, 'left')) {
|
||||
menu.style.right = innerWidth - anchorX + 'px';
|
||||
} else {
|
||||
menu.style.left = anchorX + 'px';
|
||||
}
|
||||
if (has(direction, 'up')) {
|
||||
const anchorY = has(anchor, 'bottom') ? bbox.bottom : bbox.top;
|
||||
menu.style.bottom = innerHeight - anchorY + 'px';
|
||||
} else {
|
||||
const anchorY = has(anchor, 'top') ? bbox.top : bbox.bottom;
|
||||
menu.style.top = anchorY + 'px';
|
||||
}
|
||||
};
|
||||
|
||||
componentWillReceiveProps({ showing }: Props) {
|
||||
if (showing !== this.props.showing) {
|
||||
this.setShowing(showing);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
addEventListener('click', this.dismiss, { passive: true });
|
||||
addEventListener('resize', this.reposition, { passive: true });
|
||||
if (typeof ResizeObserver === 'function' && this.wrap.current) {
|
||||
this.resizeObserver = new ResizeObserver(this.reposition);
|
||||
this.resizeObserver.observe(this.wrap.current);
|
||||
}
|
||||
if (this.props.showing) this.setShowing(true);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
removeEventListener('click', this.dismiss);
|
||||
removeEventListener('resize', this.reposition);
|
||||
if (this.resizeObserver) this.resizeObserver.disconnect();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State) {
|
||||
if (this.state.showing && !prevState.showing) {
|
||||
const menu = this.menu.current;
|
||||
if (menu) {
|
||||
this.reposition();
|
||||
|
||||
let toFocus = menu.firstElementChild;
|
||||
for (let child of menu.children) {
|
||||
if (child.hasAttribute('autofocus')) {
|
||||
toFocus = child;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// @ts-ignore-next
|
||||
if (toFocus) toFocus.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render(
|
||||
{ direction, anchor, toggle, children, ...props }: Props,
|
||||
{ showing }: State,
|
||||
) {
|
||||
const toggleProps = {
|
||||
flyoutOpen: showing,
|
||||
onClick: this.toggle,
|
||||
};
|
||||
|
||||
const directionText = Array.isArray(direction)
|
||||
? direction.join(' ')
|
||||
: direction;
|
||||
const anchorText = Array.isArray(anchor) ? anchor.join(' ') : anchor;
|
||||
|
||||
return (
|
||||
<span
|
||||
class={style.wrap}
|
||||
ref={this.wrap}
|
||||
data-flyout-open={showing ? '' : undefined}
|
||||
>
|
||||
{toggle && cloneElement(toggle, toggleProps)}
|
||||
|
||||
{showing &&
|
||||
createPortal(
|
||||
<aside
|
||||
{...props}
|
||||
class={`${style.flyout} ${props.class || props.className || ''}`}
|
||||
ref={this.menu}
|
||||
data-anchor={anchorText}
|
||||
data-direction={directionText}
|
||||
>
|
||||
{children}
|
||||
</aside>,
|
||||
document.body,
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// not worth pulling in compat
|
||||
function createPortal(children: ComponentChildren, parent: Element) {
|
||||
return <Portal parent={parent}>{children}</Portal>;
|
||||
}
|
||||
// this is probably overly careful, since it works directly rendering into parent
|
||||
function createPersistentFragment(parent: Element) {
|
||||
const frag = {
|
||||
nodeType: 11,
|
||||
childNodes: [],
|
||||
appendChild: parent.appendChild.bind(parent),
|
||||
insertBefore: parent.insertBefore.bind(parent),
|
||||
removeChild: parent.removeChild.bind(parent),
|
||||
};
|
||||
return (frag as unknown) as Element;
|
||||
}
|
||||
class Portal extends Component<{
|
||||
children: ComponentChildren;
|
||||
parent: Element;
|
||||
}> {
|
||||
root = createPersistentFragment(this.props.parent);
|
||||
componentWillUnmount() {
|
||||
render(null, this.root);
|
||||
}
|
||||
render() {
|
||||
render(<Fragment>{this.props.children}</Fragment>, this.root);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
41
src/client/lazy-app/Compress/Flyout/style.css
Normal file
41
src/client/lazy-app/Compress/Flyout/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.flyout {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
overflow: visible;
|
||||
outline: none;
|
||||
will-change: transform, opacity;
|
||||
animation: menuOpen 350ms ease forwards 1;
|
||||
--flyout-offset-y: -20px;
|
||||
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[data-direction*='left'] {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&[data-direction*='up'] {
|
||||
--flyout-offset-y: 20px;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menuOpen {
|
||||
0% {
|
||||
transform: translateY(var(--flyout-offset-y, 0));
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { h, Component, createRef } from 'preact';
|
||||
|
||||
import * as style from './style.css';
|
||||
import 'add-css:./style.css';
|
||||
@@ -15,9 +15,10 @@ import {
|
||||
import Expander from './Expander';
|
||||
import Toggle from './Toggle';
|
||||
import Select from './Select';
|
||||
import Flyout from '../Flyout';
|
||||
import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
|
||||
import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
|
||||
import { CLIIcon, SwapIcon } from 'client/lazy-app/icons';
|
||||
import { CLIIcon, MoreIcon, SwapIcon } from 'client/lazy-app/icons';
|
||||
|
||||
interface Props {
|
||||
index: 0 | 1;
|
||||
@@ -64,6 +65,8 @@ export default class Options extends Component<Props, State> {
|
||||
supportedEncoderMap: undefined,
|
||||
};
|
||||
|
||||
menu = createRef<Flyout>();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
supportedEncoderMapP.then((supportedEncoderMap) =>
|
||||
@@ -110,10 +113,12 @@ export default class Options extends Component<Props, State> {
|
||||
|
||||
private onCopyCliClick = () => {
|
||||
this.props.onCopyCliClick(this.props.index);
|
||||
if (this.menu.current) this.menu.current.hide();
|
||||
};
|
||||
|
||||
private onCopyToOtherSideClick = () => {
|
||||
this.props.onCopyToOtherSideClick(this.props.index);
|
||||
if (this.menu.current) this.menu.current.hide();
|
||||
};
|
||||
|
||||
render(
|
||||
@@ -136,23 +141,33 @@ export default class Options extends Component<Props, State> {
|
||||
{!encoderState ? null : (
|
||||
<div>
|
||||
<h3 class={style.optionsTitle}>
|
||||
<div class={style.titleAndButtons}>
|
||||
Edit
|
||||
Edit
|
||||
<Flyout
|
||||
ref={this.menu}
|
||||
class={style.menu}
|
||||
direction={['up', 'left']}
|
||||
anchor="right"
|
||||
toggle={
|
||||
<button class={style.titleButton}>
|
||||
<MoreIcon />
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<button
|
||||
class={style.cliButton}
|
||||
title="Copy npx command"
|
||||
class={style.menuButton}
|
||||
onClick={this.onCopyCliClick}
|
||||
>
|
||||
<CLIIcon />
|
||||
Copy npx command
|
||||
</button>
|
||||
<button
|
||||
class={style.copyOverButton}
|
||||
title="Copy settings to other side"
|
||||
class={style.menuButton}
|
||||
onClick={this.onCopyToOtherSideClick}
|
||||
>
|
||||
<SwapIcon />
|
||||
Copy settings to other side
|
||||
</button>
|
||||
</div>
|
||||
</Flyout>
|
||||
</h3>
|
||||
<label class={style.sectionEnabler}>
|
||||
Resize
|
||||
|
||||
@@ -14,13 +14,21 @@
|
||||
background-color: var(--main-theme-color);
|
||||
color: var(--header-text-color);
|
||||
margin: 0;
|
||||
padding: 10px var(--horizontal-padding);
|
||||
height: 38px;
|
||||
padding: 0 var(--horizontal-padding);
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
border-bottom: 1px solid var(--off-black);
|
||||
transition: all 300ms ease-in-out;
|
||||
transition-property: background-color, color;
|
||||
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-columns: max-content;
|
||||
grid-auto-flow: column;
|
||||
gap: 0.8rem 0;
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
@@ -82,36 +90,63 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.title-and-buttons {
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-columns: max-content;
|
||||
grid-auto-flow: column;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
.menu {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.title-button {
|
||||
position: relative;
|
||||
left: 10px;
|
||||
composes: unbutton from global;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
svg {
|
||||
--size: 20px;
|
||||
--size: 24px;
|
||||
fill: var(--header-text-color);
|
||||
display: block;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.cli-button {
|
||||
composes: title-button;
|
||||
.menu-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin: 8px 0;
|
||||
background-color: rgba(29, 29, 29, 0.92);
|
||||
border: 1px solid rgba(0, 0, 0, 0.67);
|
||||
border-radius: 2rem;
|
||||
line-height: 1.1;
|
||||
white-space: nowrap;
|
||||
height: 39px;
|
||||
padding: 0 16px;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
|
||||
svg {
|
||||
stroke: var(--header-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.copy-over-button {
|
||||
composes: title-button;
|
||||
|
||||
svg {
|
||||
fill: var(--header-text-color);
|
||||
&:hover {
|
||||
background: rgba(50, 50, 50, 0.92);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
outline: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
& > svg {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 12px;
|
||||
color: var(--main-theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { h, Component, Fragment } from 'preact';
|
||||
import { h, createRef, Component, Fragment } from 'preact';
|
||||
import type PinchZoom from './custom-els/PinchZoom';
|
||||
import type { ScaleToOpts } from './custom-els/PinchZoom';
|
||||
import './custom-els/PinchZoom';
|
||||
@@ -10,30 +10,37 @@ import {
|
||||
ToggleBackgroundIcon,
|
||||
AddIcon,
|
||||
RemoveIcon,
|
||||
ToggleBackgroundActiveIcon,
|
||||
RotateIcon,
|
||||
MoreIcon,
|
||||
} from '../../icons';
|
||||
import { twoUpHandle } from './custom-els/TwoUp/styles.css';
|
||||
import type { PreprocessorState } from '../../feature-meta';
|
||||
import { cleanSet } from '../../util/clean-modify';
|
||||
import type { SourceImage } from '../../Compress';
|
||||
import { linkRef } from 'shared/prerendered-app/util';
|
||||
import Flyout from '../Flyout';
|
||||
|
||||
interface Props {
|
||||
source?: SourceImage;
|
||||
preprocessorState?: PreprocessorState;
|
||||
hidden?: boolean;
|
||||
mobileView: boolean;
|
||||
leftCompressed?: ImageData;
|
||||
rightCompressed?: ImageData;
|
||||
leftImgContain: boolean;
|
||||
rightImgContain: boolean;
|
||||
onPreprocessorChange: (newState: PreprocessorState) => void;
|
||||
onPreprocessorChange?: (newState: PreprocessorState) => void;
|
||||
onShowPreprocessorTransforms?: () => void;
|
||||
onToggleBackground?: () => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
scale: number;
|
||||
editingScale: boolean;
|
||||
altBackground: boolean;
|
||||
transform: boolean;
|
||||
menuOpen: boolean;
|
||||
smallControls: boolean;
|
||||
}
|
||||
|
||||
const scaleToOpts: ScaleToOpts = {
|
||||
@@ -48,12 +55,18 @@ export default class Output extends Component<Props, State> {
|
||||
scale: 1,
|
||||
editingScale: false,
|
||||
altBackground: false,
|
||||
transform: false,
|
||||
menuOpen: false,
|
||||
smallControls:
|
||||
typeof matchMedia === 'function' &&
|
||||
matchMedia('(max-width: 859px)').matches,
|
||||
};
|
||||
canvasLeft?: HTMLCanvasElement;
|
||||
canvasRight?: HTMLCanvasElement;
|
||||
pinchZoomLeft?: PinchZoom;
|
||||
pinchZoomRight?: PinchZoom;
|
||||
scaleInput?: HTMLInputElement;
|
||||
flyout = createRef<Flyout>();
|
||||
retargetedEvents = new WeakSet<Event>();
|
||||
|
||||
componentDidMount() {
|
||||
@@ -75,6 +88,12 @@ export default class Output extends Component<Props, State> {
|
||||
if (this.canvasRight && rightDraw) {
|
||||
drawDataToCanvas(this.canvasRight, rightDraw);
|
||||
}
|
||||
|
||||
if (typeof matchMedia === 'function') {
|
||||
matchMedia('(max-width: 859px)').addEventListener('change', (e) =>
|
||||
this.setState({ smallControls: e.matches }),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State) {
|
||||
@@ -144,12 +163,6 @@ export default class Output extends Component<Props, State> {
|
||||
return props.rightCompressed || (props.source && props.source.preprocessed);
|
||||
}
|
||||
|
||||
private toggleBackground = () => {
|
||||
this.setState({
|
||||
altBackground: !this.state.altBackground,
|
||||
});
|
||||
};
|
||||
|
||||
private zoomIn = () => {
|
||||
if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
|
||||
this.pinchZoomLeft.scaleTo(this.state.scale * 1.25, scaleToOpts);
|
||||
@@ -160,17 +173,30 @@ export default class Output extends Component<Props, State> {
|
||||
this.pinchZoomLeft.scaleTo(this.state.scale / 1.25, scaleToOpts);
|
||||
};
|
||||
|
||||
private onRotateClick = () => {
|
||||
const { preprocessorState: inputProcessorState } = this.props;
|
||||
if (!inputProcessorState) return;
|
||||
|
||||
const newState = cleanSet(
|
||||
inputProcessorState,
|
||||
'rotate.rotate',
|
||||
(inputProcessorState.rotate.rotate + 90) % 360,
|
||||
private fitToViewport = () => {
|
||||
if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
|
||||
const img = this.props.source?.preprocessed;
|
||||
if (!img) return;
|
||||
const scale = Number(
|
||||
Math.min(
|
||||
(window.innerWidth - 20) / img.width,
|
||||
(window.innerHeight - 20) / img.height,
|
||||
).toFixed(2),
|
||||
);
|
||||
this.pinchZoomLeft.scaleTo(Number(scale.toFixed(2)), scaleToOpts);
|
||||
this.recenter();
|
||||
// this.hideMenu();
|
||||
};
|
||||
|
||||
this.props.onPreprocessorChange(newState);
|
||||
private recenter = () => {
|
||||
const img = this.props.source?.preprocessed;
|
||||
if (!img || !this.pinchZoomLeft) return;
|
||||
let scale = this.pinchZoomLeft.scale;
|
||||
this.pinchZoomLeft.setTransform({
|
||||
x: (img.width - img.width * scale) / 2,
|
||||
y: (img.height - img.height * scale) / 2,
|
||||
allowChangeEvent: true,
|
||||
});
|
||||
};
|
||||
|
||||
private onScaleValueFocus = () => {
|
||||
@@ -253,8 +279,16 @@ export default class Output extends Component<Props, State> {
|
||||
};
|
||||
|
||||
render(
|
||||
{ mobileView, leftImgContain, rightImgContain, source }: Props,
|
||||
{ scale, editingScale, altBackground }: State,
|
||||
{
|
||||
source,
|
||||
mobileView,
|
||||
hidden,
|
||||
leftImgContain,
|
||||
rightImgContain,
|
||||
onShowPreprocessorTransforms,
|
||||
onToggleBackground,
|
||||
}: Props,
|
||||
{ scale, editingScale, smallControls }: State,
|
||||
) {
|
||||
const leftDraw = this.leftDrawable();
|
||||
const rightDraw = this.rightDrawable();
|
||||
@@ -263,9 +297,7 @@ export default class Output extends Component<Props, State> {
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div
|
||||
class={`${style.output} ${altBackground ? style.altBackground : ''}`}
|
||||
>
|
||||
<div class={style.output} hidden={hidden}>
|
||||
<two-up
|
||||
legacy-clip-compat
|
||||
class={style.twoUp}
|
||||
@@ -291,7 +323,7 @@ export default class Output extends Component<Props, State> {
|
||||
style={{
|
||||
width: originalImage ? originalImage.width : '',
|
||||
height: originalImage ? originalImage.height : '',
|
||||
objectFit: leftImgContain ? 'contain' : '',
|
||||
objectFit: leftImgContain ? 'contain' : undefined,
|
||||
}}
|
||||
/>
|
||||
</pinch-zoom>
|
||||
@@ -307,15 +339,16 @@ export default class Output extends Component<Props, State> {
|
||||
style={{
|
||||
width: originalImage ? originalImage.width : '',
|
||||
height: originalImage ? originalImage.height : '',
|
||||
objectFit: rightImgContain ? 'contain' : '',
|
||||
objectFit: rightImgContain ? 'contain' : undefined,
|
||||
}}
|
||||
/>
|
||||
</pinch-zoom>
|
||||
</two-up>
|
||||
</div>
|
||||
<div class={style.controls}>
|
||||
|
||||
<div class={style.controls} hidden={hidden}>
|
||||
<div class={style.buttonGroup}>
|
||||
<button class={style.firstButton} onClick={this.zoomOut}>
|
||||
<button class={style.button} onClick={this.zoomOut}>
|
||||
<RemoveIcon />
|
||||
</button>
|
||||
{editingScale ? (
|
||||
@@ -342,18 +375,34 @@ export default class Output extends Component<Props, State> {
|
||||
<button class={style.lastButton} onClick={this.zoomIn}>
|
||||
<AddIcon />
|
||||
</button>
|
||||
</div>
|
||||
<div class={style.buttonGroup}>
|
||||
<button class={style.firstButton} onClick={this.onRotateClick}>
|
||||
<RotateIcon />
|
||||
</button>
|
||||
<button class={style.lastButton} onClick={this.toggleBackground}>
|
||||
{altBackground ? (
|
||||
<ToggleBackgroundActiveIcon />
|
||||
) : (
|
||||
<ToggleBackgroundIcon />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<Flyout
|
||||
class={style.menu}
|
||||
showing={hidden ? false : undefined}
|
||||
anchor="right"
|
||||
direction={smallControls ? ['down', 'left'] : 'up'}
|
||||
toggle={
|
||||
<button class={`${style.button} ${style.moreButton}`}>
|
||||
<MoreIcon />
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<button
|
||||
class={style.button}
|
||||
onClick={onShowPreprocessorTransforms}
|
||||
>
|
||||
<RotateIcon /> Rotate & Transform
|
||||
</button>
|
||||
<button class={style.button} onClick={this.fitToViewport}>
|
||||
Fit to viewport
|
||||
</button>
|
||||
<button class={style.button} onClick={this.recenter}>
|
||||
Re-center
|
||||
</button>
|
||||
<button class={style.button} onClick={onToggleBackground}>
|
||||
<ToggleBackgroundIcon /> Change canvas color
|
||||
</button>
|
||||
</Flyout>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
||||
@@ -1,20 +1,8 @@
|
||||
.output {
|
||||
display: contents;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #000;
|
||||
opacity: 0.8;
|
||||
transition: opacity 500ms ease;
|
||||
}
|
||||
|
||||
&.alt-background::before {
|
||||
opacity: 0;
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,16 +30,21 @@
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
contain: content;
|
||||
grid-area: header;
|
||||
align-self: center;
|
||||
padding: 9px 66px;
|
||||
position: relative;
|
||||
/* Had to disable containment because of the overflow menu. */
|
||||
/*
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
*/
|
||||
transition: transform 500ms ease;
|
||||
|
||||
/* Allow clicks to fall through to the pinch zoom area */
|
||||
pointer-events: none;
|
||||
|
||||
& > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
@@ -62,13 +55,34 @@
|
||||
grid-area: viewportOpts;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
&[hidden] {
|
||||
visibility: visible;
|
||||
transform: translateY(-200%);
|
||||
|
||||
@media (min-width: 860px) {
|
||||
transform: translateY(200%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
margin: 0 3px;
|
||||
|
||||
& > :not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
& > :not(:nth-last-child(2)) {
|
||||
margin-right: 0;
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button,
|
||||
@@ -76,9 +90,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin: 4px;
|
||||
background-color: rgba(29, 29, 29, 0.92);
|
||||
border: 1px solid rgba(0, 0, 0, 0.67);
|
||||
border-width: 1px 0 1px 1px;
|
||||
border-radius: 6px;
|
||||
line-height: 1.1;
|
||||
white-space: nowrap;
|
||||
height: 39px;
|
||||
@@ -161,3 +176,64 @@ input.zoom {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/** Three-dot menu */
|
||||
.moreButton {
|
||||
padding: 0 4px;
|
||||
|
||||
& > svg {
|
||||
transform-origin: center;
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.controls [data-flyout-open] {
|
||||
.moreButton {
|
||||
background: rgba(82, 82, 82, 0.92);
|
||||
|
||||
& > svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(50, 50, 50, 0.4);
|
||||
backdrop-filter: blur(2px) contrast(70%);
|
||||
animation: menuShimFadeIn 350ms ease forwards 1;
|
||||
will-change: opacity;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menuShimFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
button {
|
||||
margin: 8px 0;
|
||||
border-radius: 2rem;
|
||||
padding: 0 16px;
|
||||
|
||||
& > svg {
|
||||
position: relative;
|
||||
left: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
margin: 8px 4px;
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
330
src/client/lazy-app/Compress/Transform/Cropper/index.tsx
Normal file
330
src/client/lazy-app/Compress/Transform/Cropper/index.tsx
Normal file
@@ -0,0 +1,330 @@
|
||||
import { h, Component, ComponentChildren } from 'preact';
|
||||
import * as style from './style.css';
|
||||
import 'add-css:./style.css';
|
||||
import { shallowEqual } from 'client/lazy-app/util';
|
||||
|
||||
export interface CropBox {
|
||||
left: number;
|
||||
top: number;
|
||||
right: number;
|
||||
bottom: number;
|
||||
}
|
||||
|
||||
// Minimum CropBox size
|
||||
const MIN_SIZE = 2;
|
||||
|
||||
export interface Props {
|
||||
size: { width: number; height: number };
|
||||
scale?: number;
|
||||
lockAspect?: boolean;
|
||||
crop: CropBox;
|
||||
onChange?(crop: CropBox): void;
|
||||
}
|
||||
|
||||
type Edge = keyof CropBox;
|
||||
|
||||
interface PointerTrack {
|
||||
x: number;
|
||||
y: number;
|
||||
edges: { edge: Edge; value: number }[];
|
||||
aspect: number | undefined;
|
||||
}
|
||||
|
||||
interface State {
|
||||
crop: CropBox;
|
||||
pan: boolean;
|
||||
}
|
||||
|
||||
export default class Cropper extends Component<Props, State> {
|
||||
private pointers = new Map<number, PointerTrack>();
|
||||
|
||||
state = {
|
||||
crop: this.normalizeCrop({ ...this.props.crop }),
|
||||
pan: false,
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps: Props, nextState: State) {
|
||||
if (!shallowEqual(nextState, this.state)) return true;
|
||||
const { size, scale, lockAspect, crop } = this.props;
|
||||
return (
|
||||
size.width !== nextProps.size.width ||
|
||||
size.height !== nextProps.size.height ||
|
||||
scale !== nextProps.scale ||
|
||||
lockAspect !== nextProps.lockAspect ||
|
||||
!shallowEqual(crop, nextProps.crop)
|
||||
);
|
||||
}
|
||||
|
||||
componentWillReceiveProps({ crop }: Props, nextState: State) {
|
||||
const current = nextState.crop || this.state.crop;
|
||||
if (crop !== this.props.crop && !shallowEqual(crop, current)) {
|
||||
// this.setState({ crop: nextProps.crop });
|
||||
this.setCrop(crop);
|
||||
}
|
||||
}
|
||||
|
||||
private normalizeCrop(crop: CropBox) {
|
||||
crop.left = Math.round(Math.max(0, crop.left));
|
||||
crop.top = Math.round(Math.max(0, crop.top));
|
||||
crop.right = Math.round(Math.max(0, crop.right));
|
||||
crop.bottom = Math.round(Math.max(0, crop.bottom));
|
||||
return crop;
|
||||
}
|
||||
|
||||
private setCrop(cropUpdate: Partial<CropBox>) {
|
||||
const crop = this.normalizeCrop({ ...this.state.crop, ...cropUpdate });
|
||||
// ignore crop updates that normalize to the same values
|
||||
const old = this.state.crop;
|
||||
if (
|
||||
crop.left === old.left &&
|
||||
crop.right === old.right &&
|
||||
crop.top === old.top &&
|
||||
crop.bottom === old.bottom
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.setState({ crop });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(crop);
|
||||
}
|
||||
}
|
||||
|
||||
private onPointerDown = (event: PointerEvent) => {
|
||||
if (event.button !== 0 || this.state.pan) return;
|
||||
|
||||
const target = event.target as SVGElement;
|
||||
const edgeAttr = target.getAttribute('data-edge');
|
||||
if (edgeAttr) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
let aspect;
|
||||
const edges = edgeAttr.split(/ *, */) as Edge[];
|
||||
if (this.props.lockAspect) {
|
||||
if (edges.length === 1) return;
|
||||
const { size } = this.props;
|
||||
const oldCrop = this.state.crop;
|
||||
aspect =
|
||||
(size.width - oldCrop.left - oldCrop.right) /
|
||||
(size.height - oldCrop.top - oldCrop.bottom);
|
||||
}
|
||||
|
||||
this.pointers.set(event.pointerId, {
|
||||
x: event.x,
|
||||
y: event.y,
|
||||
edges: edges.map((edge) => ({ edge, value: this.state.crop[edge] })),
|
||||
aspect,
|
||||
});
|
||||
target.setPointerCapture(event.pointerId);
|
||||
}
|
||||
};
|
||||
|
||||
private onPointerMove = (event: PointerEvent) => {
|
||||
const target = event.target as SVGElement;
|
||||
const down = this.pointers.get(event.pointerId);
|
||||
if (down && target.hasPointerCapture(event.pointerId)) {
|
||||
const { size } = this.props;
|
||||
const oldCrop = this.state.crop;
|
||||
const scale = this.props.scale || 1;
|
||||
let dx = (event.x - down.x) / scale;
|
||||
let dy = (event.y - down.y) / scale;
|
||||
|
||||
if (down.aspect && down.edges.length === 2) {
|
||||
const dir = (dx + dy) / 2;
|
||||
dx = dir * down.aspect;
|
||||
dy = dir / down.aspect;
|
||||
}
|
||||
const crop: Partial<CropBox> = {};
|
||||
for (const { edge, value } of down.edges) {
|
||||
let edgeValue = value;
|
||||
switch (edge) {
|
||||
case 'left':
|
||||
edgeValue += dx;
|
||||
break;
|
||||
case 'right':
|
||||
edgeValue -= dx;
|
||||
break;
|
||||
case 'top':
|
||||
edgeValue += dy;
|
||||
break;
|
||||
case 'bottom':
|
||||
edgeValue -= dy;
|
||||
break;
|
||||
}
|
||||
crop[edge] = edgeValue;
|
||||
}
|
||||
|
||||
// Prevent MOVE from resizing the cropbox:
|
||||
if (crop.left && crop.right) {
|
||||
if (crop.left < 0) crop.right += crop.left;
|
||||
if (crop.right < 0) crop.left += crop.right;
|
||||
} else {
|
||||
// enforce minimum 1px cropbox width
|
||||
if (crop.left) {
|
||||
if (down.aspect) crop.left = Math.max(0, crop.left);
|
||||
else
|
||||
crop.left = Math.min(
|
||||
crop.left,
|
||||
size.width - oldCrop.right - MIN_SIZE,
|
||||
);
|
||||
}
|
||||
if (crop.right) {
|
||||
if (down.aspect) crop.right = Math.max(0, crop.right);
|
||||
crop.right = Math.min(
|
||||
crop.right,
|
||||
size.width - oldCrop.left - MIN_SIZE,
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
down.aspect &&
|
||||
(crop.left ?? oldCrop.left) + (crop.right ?? oldCrop.right) >
|
||||
size.width
|
||||
)
|
||||
return;
|
||||
}
|
||||
if (crop.top && crop.bottom) {
|
||||
if (crop.top < 0) crop.bottom += crop.top;
|
||||
if (crop.bottom < 0) crop.top += crop.bottom;
|
||||
} else {
|
||||
// enforce minimum 1px cropbox height
|
||||
if (crop.top) {
|
||||
if (down.aspect) crop.top = Math.max(0, crop.top);
|
||||
crop.top = Math.min(
|
||||
crop.top,
|
||||
size.height - oldCrop.bottom - MIN_SIZE,
|
||||
);
|
||||
}
|
||||
if (crop.bottom) {
|
||||
if (down.aspect) crop.bottom = Math.max(0, crop.bottom);
|
||||
crop.bottom = Math.min(
|
||||
crop.bottom,
|
||||
size.height - oldCrop.top - MIN_SIZE,
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
down.aspect &&
|
||||
(crop.top ?? oldCrop.top) + (crop.bottom ?? oldCrop.bottom) >
|
||||
size.height
|
||||
)
|
||||
return;
|
||||
}
|
||||
|
||||
this.setCrop(crop);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
private onPointerUp = (event: PointerEvent) => {
|
||||
const target = event.target as SVGElement;
|
||||
const down = this.pointers.get(event.pointerId);
|
||||
if (down && target.hasPointerCapture(event.pointerId)) {
|
||||
this.onPointerMove(event);
|
||||
target.releasePointerCapture(event.pointerId);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
this.pointers.delete(event.pointerId);
|
||||
}
|
||||
};
|
||||
|
||||
private onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === ' ') {
|
||||
if (!this.state.pan) {
|
||||
this.setState({ pan: true });
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
private onKeyUp = (event: KeyboardEvent) => {
|
||||
if (event.key === ' ') this.setState({ pan: false });
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
addEventListener('keydown', this.onKeyDown);
|
||||
addEventListener('keyup', this.onKeyUp);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
addEventListener('keydown', this.onKeyDown);
|
||||
addEventListener('keyup', this.onKeyUp);
|
||||
}
|
||||
|
||||
render({ size, scale }: Props, { crop, pan }: State) {
|
||||
const x = crop.left;
|
||||
const y = crop.top;
|
||||
const width = size.width - crop.left - crop.right;
|
||||
const height = size.height - crop.top - crop.bottom;
|
||||
|
||||
const s = (x: number) => x / (scale || 1);
|
||||
|
||||
const clip = `polygon(0 0, 0 100%, 100% 100%, 100% 0, 0 0, ${s(x)}px ${s(
|
||||
y,
|
||||
)}px, ${s(x + width)}px ${s(y)}px, ${s(x + width)}px ${s(
|
||||
y + height,
|
||||
)}px, ${s(x)}px ${s(y + height)}px, ${s(x)}px ${s(y)}px)`;
|
||||
|
||||
return (
|
||||
<svg
|
||||
class={`${style.cropper} ${pan ? style.pan : ''}`}
|
||||
width={size.width + 20}
|
||||
height={size.height + 20}
|
||||
viewBox={`-10 -10 ${size.width + 20} ${size.height + 20}`}
|
||||
style={{
|
||||
// this is hack to force style invalidation in Chrome
|
||||
zoom: (scale || 1).toFixed(3),
|
||||
}}
|
||||
onPointerDown={this.onPointerDown}
|
||||
onPointerMove={this.onPointerMove}
|
||||
onPointerUp={this.onPointerUp}
|
||||
>
|
||||
<rect
|
||||
class={style.background}
|
||||
width={size.width}
|
||||
height={size.height}
|
||||
clip-path={clip}
|
||||
/>
|
||||
<svg x={x} y={y} width={width} height={height}>
|
||||
<Freezer>
|
||||
<rect
|
||||
id="box"
|
||||
class={style.cropbox}
|
||||
data-edge="left,right,top,bottom"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
|
||||
<rect class={style.edge} data-edge="top" width="100%" />
|
||||
<rect class={style.edge} data-edge="bottom" width="100%" y="100%" />
|
||||
<rect class={style.edge} data-edge="left" height="100%" />
|
||||
<rect class={style.edge} data-edge="right" height="100%" x="100%" />
|
||||
|
||||
<circle class={style.corner} data-edge="left,top" />
|
||||
<circle class={style.corner} data-edge="right,top" cx="100%" />
|
||||
<circle
|
||||
class={style.corner}
|
||||
data-edge="right,bottom"
|
||||
cx="100%"
|
||||
cy="100%"
|
||||
/>
|
||||
<circle class={style.corner} data-edge="left,bottom" cy="100%" />
|
||||
</Freezer>
|
||||
</svg>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface FreezerProps {
|
||||
children: ComponentChildren;
|
||||
}
|
||||
class Freezer extends Component<FreezerProps> {
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
render({ children }: FreezerProps) {
|
||||
return children;
|
||||
}
|
||||
}
|
||||
119
src/client/lazy-app/Compress/Transform/Cropper/style.css
Normal file
119
src/client/lazy-app/Compress/Transform/Cropper/style.css
Normal file
@@ -0,0 +1,119 @@
|
||||
.cropper {
|
||||
position: absolute;
|
||||
left: calc(-10px / var(--scale, 1));
|
||||
top: calc(-10px / var(--scale, 1));
|
||||
right: calc(-10px / var(--scale, 1));
|
||||
bottom: calc(-10px / var(--scale, 1));
|
||||
shape-rendering: crispedges;
|
||||
overflow: hidden;
|
||||
contain: strict;
|
||||
transform-origin: 0 0;
|
||||
transform: scale(calc(1 / var(--scale))) !important;
|
||||
zoom: var(--scale, 1);
|
||||
|
||||
&.pan {
|
||||
cursor: grabbing;
|
||||
& * {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > svg {
|
||||
margin: -10px;
|
||||
padding: 10px;
|
||||
overflow: visible;
|
||||
contain: strict;
|
||||
/* overflow: visible; */
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
pointer-events: none;
|
||||
fill: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.cropbox {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: calc(1.5px / var(--scale, 1));
|
||||
stroke-dasharray: calc(5px / var(--scale, 1)), calc(5px / var(--scale, 1));
|
||||
stroke-dashoffset: 50%;
|
||||
/* Accept pointer input even though this is unpainted transparent */
|
||||
pointer-events: all;
|
||||
cursor: move;
|
||||
|
||||
/* animation: ants 1s linear forwards infinite; */
|
||||
}
|
||||
/*
|
||||
@keyframes ants {
|
||||
0% { stroke-dashoffset: 0; }
|
||||
100% { stroke-dashoffset: -12; }
|
||||
}
|
||||
*/
|
||||
|
||||
.edge {
|
||||
fill: #aaa;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms ease;
|
||||
z-index: 2;
|
||||
pointer-events: all;
|
||||
--edge-width: calc(10px / var(--scale, 1));
|
||||
|
||||
@media (max-width: 779px) {
|
||||
--edge-width: calc(20px / var(--scale, 1));
|
||||
fill: rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
|
||||
&[data-edge='left'],
|
||||
&[data-edge='right'] {
|
||||
cursor: ew-resize;
|
||||
transform: translate(calc(var(--edge-width, 10px) / -2), 0);
|
||||
width: var(--edge-width, 10px);
|
||||
}
|
||||
&[data-edge='top'],
|
||||
&[data-edge='bottom'] {
|
||||
cursor: ns-resize;
|
||||
transform: translate(0, calc(var(--edge-width, 10px) / -2));
|
||||
height: var(--edge-width, 10px);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 0.1;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.corner {
|
||||
r: calc(4px / var(--scale, 1));
|
||||
stroke-width: calc(4px / var(--scale, 1));
|
||||
stroke: rgba(225, 225, 225, 0.01);
|
||||
fill: white;
|
||||
shape-rendering: geometricprecision;
|
||||
pointer-events: all;
|
||||
transition: fill 250ms ease, stroke 250ms ease;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
stroke: rgba(225, 225, 225, 0.5);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@media (max-width: 779px) {
|
||||
r: calc(10 / var(--scale, 1));
|
||||
stroke-width: calc(2 / var(--scale, 1));
|
||||
}
|
||||
|
||||
&[data-edge='left,top'] {
|
||||
cursor: nw-resize;
|
||||
}
|
||||
&[data-edge='right,top'] {
|
||||
cursor: ne-resize;
|
||||
}
|
||||
&[data-edge='right,bottom'] {
|
||||
cursor: se-resize;
|
||||
}
|
||||
&[data-edge='left,bottom'] {
|
||||
cursor: sw-resize;
|
||||
}
|
||||
}
|
||||
587
src/client/lazy-app/Compress/Transform/index.tsx
Normal file
587
src/client/lazy-app/Compress/Transform/index.tsx
Normal file
@@ -0,0 +1,587 @@
|
||||
import {
|
||||
h,
|
||||
Component,
|
||||
Fragment,
|
||||
createRef,
|
||||
FunctionComponent,
|
||||
ComponentChildren,
|
||||
} from 'preact';
|
||||
import type {
|
||||
default as PinchZoom,
|
||||
ScaleToOpts,
|
||||
} from '../Output/custom-els/PinchZoom';
|
||||
import '../Output/custom-els/PinchZoom';
|
||||
import * as style from './style.css';
|
||||
import 'add-css:./style.css';
|
||||
import {
|
||||
AddIcon,
|
||||
CheckmarkIcon,
|
||||
CompareIcon,
|
||||
FlipHorizontallyIcon,
|
||||
FlipVerticallyIcon,
|
||||
RemoveIcon,
|
||||
RotateClockwiseIcon,
|
||||
RotateCounterClockwiseIcon,
|
||||
SwapIcon,
|
||||
} from '../../icons';
|
||||
import { cleanSet } from '../../util/clean-modify';
|
||||
import type { SourceImage } from '../../Compress';
|
||||
import { PreprocessorState } from 'client/lazy-app/feature-meta';
|
||||
import Cropper, { CropBox } from './Cropper';
|
||||
import CanvasImage from '../CanvasImage';
|
||||
import Expander from '../Options/Expander';
|
||||
import Select from '../Options/Select';
|
||||
import Checkbox from '../Options/Checkbox';
|
||||
|
||||
const ROTATE_ORIENTATIONS = [0, 90, 180, 270] as const;
|
||||
|
||||
const cropPresets = {
|
||||
square: {
|
||||
name: 'Square',
|
||||
ratio: 1,
|
||||
},
|
||||
'4:3': {
|
||||
name: '4:3',
|
||||
ratio: 4 / 3,
|
||||
},
|
||||
'16:9': {
|
||||
name: '16:9',
|
||||
ratio: 16 / 9,
|
||||
},
|
||||
'16:10': {
|
||||
name: '16:10',
|
||||
ratio: 16 / 10,
|
||||
},
|
||||
};
|
||||
|
||||
type CropPresetId = keyof typeof cropPresets;
|
||||
|
||||
interface Props {
|
||||
source: SourceImage;
|
||||
preprocessorState: PreprocessorState;
|
||||
mobileView: boolean;
|
||||
onCancel?(): void;
|
||||
onSave?(e: { preprocessorState: PreprocessorState }): void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
scale: number;
|
||||
editingScale: boolean;
|
||||
rotate: typeof ROTATE_ORIENTATIONS[number];
|
||||
// crop: false | CropBox;
|
||||
crop: CropBox;
|
||||
cropPreset: keyof typeof cropPresets | undefined;
|
||||
lockAspect: boolean;
|
||||
flip: PreprocessorState['flip'];
|
||||
}
|
||||
|
||||
const scaleToOpts: ScaleToOpts = {
|
||||
originX: '50%',
|
||||
originY: '50%',
|
||||
relativeTo: 'container',
|
||||
allowChangeEvent: true,
|
||||
};
|
||||
|
||||
export default class Transform extends Component<Props, State> {
|
||||
state: State = {
|
||||
scale: 1,
|
||||
editingScale: false,
|
||||
cropPreset: undefined,
|
||||
lockAspect: false,
|
||||
...this.fromPreprocessorState(this.props.preprocessorState),
|
||||
};
|
||||
pinchZoom = createRef<PinchZoom>();
|
||||
scaleInput = createRef<HTMLInputElement>();
|
||||
|
||||
// static getDerivedStateFromProps({ source, preprocessorState }: Props) {
|
||||
// return {
|
||||
// rotate: preprocessorState.rotate.rotate || 0,
|
||||
// crop: preprocessorState.crop || false,
|
||||
// flip: preprocessorState.flip || { horizontal: false, vertical: false },
|
||||
// };
|
||||
// }
|
||||
|
||||
componentWillReceiveProps(
|
||||
{ source, preprocessorState }: Props,
|
||||
{ crop, cropPreset }: State,
|
||||
) {
|
||||
if (preprocessorState !== this.props.preprocessorState) {
|
||||
this.setState(this.fromPreprocessorState(preprocessorState));
|
||||
}
|
||||
const { width, height } = source.decoded;
|
||||
const cropWidth = width - crop.left - crop.right;
|
||||
const cropHeight = height - crop.top - crop.bottom;
|
||||
for (const [id, preset] of Object.entries(cropPresets)) {
|
||||
if (cropHeight * preset.ratio === cropWidth) {
|
||||
if (cropPreset !== id) {
|
||||
this.setState({ cropPreset: id as CropPresetId });
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private fromPreprocessorState(preprocessorState?: PreprocessorState) {
|
||||
const state: Pick<State, 'rotate' | 'crop' | 'flip'> = {
|
||||
rotate: preprocessorState ? preprocessorState.rotate.rotate : 0,
|
||||
crop: Object.assign(
|
||||
{
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
(preprocessorState && preprocessorState.crop) || {},
|
||||
),
|
||||
flip: Object.assign(
|
||||
{
|
||||
horizontal: false,
|
||||
vertical: false,
|
||||
},
|
||||
(preprocessorState && preprocessorState.flip) || {},
|
||||
),
|
||||
};
|
||||
return state;
|
||||
}
|
||||
|
||||
private save = () => {
|
||||
const { preprocessorState, onSave } = this.props;
|
||||
const { rotate, crop, flip } = this.state;
|
||||
|
||||
let newState = cleanSet(preprocessorState, 'rotate.rotate', rotate);
|
||||
newState = cleanSet(newState, 'crop', crop);
|
||||
newState = cleanSet(newState, 'flip', flip);
|
||||
|
||||
if (onSave) onSave({ preprocessorState: newState });
|
||||
};
|
||||
|
||||
private cancel = () => {
|
||||
const { onCancel, onSave } = this.props;
|
||||
if (onCancel) onCancel();
|
||||
else if (onSave)
|
||||
onSave({ preprocessorState: this.props.preprocessorState });
|
||||
};
|
||||
|
||||
private zoomIn = () => {
|
||||
if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
|
||||
this.pinchZoom.current.scaleTo(this.state.scale * 1.25, scaleToOpts);
|
||||
};
|
||||
|
||||
private zoomOut = () => {
|
||||
if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
|
||||
this.pinchZoom.current.scaleTo(this.state.scale / 1.25, scaleToOpts);
|
||||
};
|
||||
|
||||
private onScaleValueFocus = () => {
|
||||
this.setState({ editingScale: true }, () => {
|
||||
if (this.scaleInput.current) {
|
||||
// Firefox unfocuses the input straight away unless I force a style
|
||||
// calculation here. I have no idea why, but it's late and I'm quite
|
||||
// tired.
|
||||
getComputedStyle(this.scaleInput.current).transform;
|
||||
this.scaleInput.current.focus();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
private onScaleInputBlur = () => {
|
||||
this.setState({ editingScale: false });
|
||||
};
|
||||
|
||||
private onScaleInputChanged = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const percent = parseFloat(target.value);
|
||||
if (isNaN(percent)) return;
|
||||
if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
|
||||
|
||||
this.pinchZoom.current.scaleTo(percent / 100, scaleToOpts);
|
||||
};
|
||||
|
||||
private onPinchZoomChange = () => {
|
||||
if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
|
||||
this.setState({
|
||||
scale: this.pinchZoom.current.scale,
|
||||
});
|
||||
};
|
||||
|
||||
private onCropChange = (crop: CropBox) => {
|
||||
this.setState({ crop });
|
||||
};
|
||||
|
||||
private onCropPresetChange = (event: Event) => {
|
||||
const { value } = event.target as HTMLSelectElement;
|
||||
const cropPreset = value ? (value as keyof typeof cropPresets) : undefined;
|
||||
const crop = { ...this.state.crop };
|
||||
if (cropPreset) {
|
||||
const preset = cropPresets[cropPreset];
|
||||
const { width, height } = this.props.source.decoded;
|
||||
const w = width - crop.left - crop.right;
|
||||
const h = w / preset.ratio;
|
||||
crop.bottom = height - crop.top - h;
|
||||
if (crop.bottom < 0) {
|
||||
crop.top += crop.bottom;
|
||||
crop.bottom = 0;
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
crop,
|
||||
cropPreset,
|
||||
lockAspect: !!cropPreset,
|
||||
});
|
||||
};
|
||||
|
||||
private swapCropDimensions = () => {
|
||||
const { width, height } = this.props.source.decoded;
|
||||
let { left, right, top, bottom } = this.state.crop;
|
||||
const cropWidth = width - left - right;
|
||||
const cropHeight = height - top - bottom;
|
||||
const centerX = left - right;
|
||||
const centerY = top - bottom;
|
||||
const crop = {
|
||||
top: (width - cropWidth) / 2 + centerY / 2,
|
||||
bottom: (width - cropWidth) / 2 - centerY / 2,
|
||||
left: (height - cropHeight) / 2 + centerX / 2,
|
||||
right: (height - cropHeight) / 2 - centerX / 2,
|
||||
};
|
||||
this.setCrop(crop);
|
||||
};
|
||||
|
||||
private setCrop(crop: CropBox) {
|
||||
if (crop.top < 0) {
|
||||
crop.bottom += crop.top;
|
||||
crop.top = 0;
|
||||
}
|
||||
if (crop.bottom < 0) {
|
||||
crop.top += crop.bottom;
|
||||
crop.bottom = 0;
|
||||
}
|
||||
if (crop.left < 0) {
|
||||
crop.right += crop.left;
|
||||
crop.left = 0;
|
||||
}
|
||||
if (crop.right < 0) {
|
||||
crop.left += crop.right;
|
||||
crop.right = 0;
|
||||
}
|
||||
this.setState({ crop });
|
||||
}
|
||||
|
||||
// yeah these could just += 90
|
||||
private rotateClockwise = () => {
|
||||
let { rotate, crop } = this.state;
|
||||
this.setState({
|
||||
rotate: ((rotate + 90) % 360) as typeof ROTATE_ORIENTATIONS[number],
|
||||
crop: {
|
||||
top: crop.left,
|
||||
left: crop.bottom,
|
||||
bottom: crop.right,
|
||||
right: crop.top,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
private rotateCounterClockwise = () => {
|
||||
let { rotate, crop } = this.state;
|
||||
this.setState({
|
||||
rotate: (rotate
|
||||
? rotate - 90
|
||||
: 270) as typeof ROTATE_ORIENTATIONS[number],
|
||||
crop: {
|
||||
top: crop.right,
|
||||
right: crop.bottom,
|
||||
bottom: crop.left,
|
||||
left: crop.top,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
private flipHorizontally = () => {
|
||||
const { horizontal, vertical } = this.state.flip;
|
||||
this.setState({ flip: { horizontal: !horizontal, vertical } });
|
||||
};
|
||||
|
||||
private flipVertically = () => {
|
||||
const { horizontal, vertical } = this.state.flip;
|
||||
this.setState({ flip: { horizontal, vertical: !vertical } });
|
||||
};
|
||||
|
||||
private toggleLockAspect = () => {
|
||||
this.setState({ lockAspect: !this.state.lockAspect });
|
||||
};
|
||||
|
||||
private setCropWidth = (
|
||||
event: preact.JSX.TargetedEvent<HTMLInputElement, Event>,
|
||||
) => {
|
||||
const { width, height } = this.props.source.decoded;
|
||||
const newWidth = Math.min(width, parseInt(event.currentTarget.value, 10));
|
||||
let { top, right, bottom, left } = this.state.crop;
|
||||
const aspect = (width - left - right) / (height - top - bottom);
|
||||
right = width - newWidth - left;
|
||||
if (this.state.lockAspect) {
|
||||
const newHeight = newWidth / aspect;
|
||||
if (newHeight > height) return;
|
||||
bottom = height - newHeight - top;
|
||||
}
|
||||
this.setCrop({ top, right, bottom, left });
|
||||
};
|
||||
|
||||
private setCropHeight = (
|
||||
event: preact.JSX.TargetedEvent<HTMLInputElement, Event>,
|
||||
) => {
|
||||
const { width, height } = this.props.source.decoded;
|
||||
const newHeight = Math.min(height, parseInt(event.currentTarget.value, 10));
|
||||
let { top, right, bottom, left } = this.state.crop;
|
||||
const aspect = (width - left - right) / (height - top - bottom);
|
||||
bottom = height - newHeight - top;
|
||||
if (this.state.lockAspect) {
|
||||
const newWidth = newHeight * aspect;
|
||||
if (newWidth > width) return;
|
||||
right = width - newWidth - left;
|
||||
}
|
||||
this.setCrop({ top, right, bottom, left });
|
||||
};
|
||||
|
||||
render(
|
||||
{ mobileView, source }: Props,
|
||||
{ scale, editingScale, rotate, flip, crop, cropPreset, lockAspect }: State,
|
||||
) {
|
||||
const image = source.decoded;
|
||||
|
||||
const width = source.decoded.width - crop.left - crop.right;
|
||||
const height = source.decoded.height - crop.top - crop.bottom;
|
||||
|
||||
let transform =
|
||||
`rotate(${rotate}deg) ` +
|
||||
`scale(${flip.horizontal ? -1 : 1}, ${flip.vertical ? -1 : 1})`;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<CancelButton onClick={this.cancel} />
|
||||
<SaveButton onClick={this.save} />
|
||||
|
||||
<div class={style.transform}>
|
||||
<pinch-zoom
|
||||
class={style.pinchZoom}
|
||||
onChange={this.onPinchZoomChange}
|
||||
ref={this.pinchZoom}
|
||||
>
|
||||
{/* <Backdrop width={image.width} height={image.height} /> */}
|
||||
<div
|
||||
class={style.wrap}
|
||||
style={{
|
||||
width: image.width,
|
||||
height: image.height,
|
||||
}}
|
||||
>
|
||||
<CanvasImage
|
||||
class={style.pinchTarget}
|
||||
image={image}
|
||||
style={{ transform }}
|
||||
/>
|
||||
{crop && (
|
||||
<Cropper
|
||||
size={{ width: image.width, height: image.height }}
|
||||
scale={scale}
|
||||
lockAspect={lockAspect}
|
||||
crop={crop}
|
||||
onChange={this.onCropChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</pinch-zoom>
|
||||
</div>
|
||||
|
||||
<div class={style.controls}>
|
||||
<div class={style.zoomControls}>
|
||||
<button class={style.button} onClick={this.zoomOut}>
|
||||
<RemoveIcon />
|
||||
</button>
|
||||
{editingScale ? (
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
min="1"
|
||||
max="1000000"
|
||||
ref={this.scaleInput}
|
||||
class={style.zoom}
|
||||
value={Math.round(scale * 100)}
|
||||
onInput={this.onScaleInputChanged}
|
||||
onBlur={this.onScaleInputBlur}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
class={style.zoom}
|
||||
tabIndex={0}
|
||||
onFocus={this.onScaleValueFocus}
|
||||
>
|
||||
<span class={style.zoomValue}>{Math.round(scale * 100)}</span>%
|
||||
</span>
|
||||
)}
|
||||
<button class={style.button} onClick={this.zoomIn}>
|
||||
<AddIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class={style.options}>
|
||||
<h3 class={style.optionsTitle}>Modify Source</h3>
|
||||
|
||||
<div class={style.optionsSection}>
|
||||
<h4 class={style.optionsSectionTitle}>Crop</h4>
|
||||
<div class={style.optionOneCell}>
|
||||
<Select
|
||||
large
|
||||
value={cropPreset}
|
||||
onChange={this.onCropPresetChange}
|
||||
>
|
||||
<option value="">Custom</option>
|
||||
{Object.entries(cropPresets).map(([type, preset]) => (
|
||||
<option value={type}>{preset.name}</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<label class={style.optionCheckbox}>
|
||||
<Checkbox checked={lockAspect} onClick={this.toggleLockAspect} />
|
||||
Lock aspect-ratio
|
||||
</label>
|
||||
<div class={style.optionsDimensions}>
|
||||
<input
|
||||
type="number"
|
||||
name="width"
|
||||
value={width}
|
||||
title="Crop width"
|
||||
onInput={this.setCropWidth}
|
||||
/>
|
||||
<button
|
||||
class={style.optionsButton}
|
||||
title="swap"
|
||||
onClick={this.swapCropDimensions}
|
||||
>
|
||||
<SwapIcon />
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
name="height"
|
||||
value={height}
|
||||
title="Crop height"
|
||||
onInput={this.setCropHeight}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class={style.optionButtonRow}>
|
||||
Flip
|
||||
<button
|
||||
class={style.optionsButton}
|
||||
data-active={flip.vertical}
|
||||
title="Flip vertically"
|
||||
onClick={this.flipVertically}
|
||||
>
|
||||
<FlipVerticallyIcon />
|
||||
</button>
|
||||
<button
|
||||
class={style.optionsButton}
|
||||
data-active={flip.horizontal}
|
||||
title="Flip horizontally"
|
||||
onClick={this.flipHorizontally}
|
||||
>
|
||||
<FlipHorizontallyIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class={style.optionButtonRow}>
|
||||
Rotate
|
||||
<button
|
||||
class={style.optionsButton}
|
||||
title="Rotate clockwise"
|
||||
onClick={this.rotateClockwise}
|
||||
>
|
||||
<RotateClockwiseIcon />
|
||||
</button>
|
||||
<button
|
||||
class={style.optionsButton}
|
||||
title="Rotate counter-clockwise"
|
||||
onClick={this.rotateCounterClockwise}
|
||||
>
|
||||
<RotateCounterClockwiseIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const CancelButton = ({ onClick }: { onClick: () => void }) => (
|
||||
<button class={style.cancel} onClick={onClick}>
|
||||
<svg viewBox="0 0 80 80" width="80" height="80">
|
||||
<path d="M8.06 40.98c-.53-7.1 4.05-14.52 9.98-19.1s13.32-6.35 22.13-6.43c8.84-.12 19.12 1.51 24.4 7.97s5.6 17.74 1.68 26.97c-3.89 9.26-11.97 16.45-20.46 18-8.43 1.55-17.28-2.62-24.5-8.08S8.54 48.08 8.07 40.98z" />
|
||||
</svg>
|
||||
<CompareIcon class={style.icon} />
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
const SaveButton = ({ onClick }: { onClick: () => void }) => (
|
||||
<button class={style.save} onClick={onClick}>
|
||||
<svg viewBox="0 0 89 87" width="89" height="87">
|
||||
<path
|
||||
fill="#0c99ff"
|
||||
opacity=".7"
|
||||
d="M27.3 71.9c-8-4-15.6-12.3-16.9-21-1.2-8.7 4-17.8 10.5-26s14.4-15.6 24-16 21.2 6 28.6 16.5c7.4 10.5 10.8 25 6.6 34S64.1 71.7 54 73.5c-10.2 2-18.7 2.3-26.7-1.6z"
|
||||
/>
|
||||
<path
|
||||
fill="#0c99ff"
|
||||
opacity=".7"
|
||||
d="M14.6 24.8c4.3-7.8 13-15 21.8-15.7 8.7-.8 17.5 4.8 25.4 11.8 7.8 6.9 14.8 15.2 14.8 24.9s-7.2 20.7-18 27.6c-10.9 6.8-25.6 9.5-34.3 4.8S13 61.6 11.6 51.4c-1.3-10.3-1.3-18.8 3-26.6z"
|
||||
/>
|
||||
</svg>
|
||||
<CheckmarkIcon class={style.icon} />
|
||||
</button>
|
||||
);
|
||||
|
||||
interface BackdropProps {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
/** @TODO this could at least use clip-path. It's too expensive this way. */
|
||||
class Backdrop extends Component<BackdropProps> {
|
||||
shouldComponentUpdate({ width, height }: BackdropProps) {
|
||||
return width !== this.props.width || height !== this.props.height;
|
||||
}
|
||||
|
||||
render({ width, height }: BackdropProps) {
|
||||
const transform =
|
||||
`transform-origin: 50% 50%; transform: translate(var(--x), var(--y)) ` +
|
||||
`translate(-${width / 2}px, -${height / 2}px) ` +
|
||||
`scale(calc(var(--scale, 1) * 0.99999));`;
|
||||
return (
|
||||
<svg
|
||||
class={style.backdrop}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
width="100%"
|
||||
height="100%"
|
||||
shape-rendering="optimizeSpeed"
|
||||
>
|
||||
<mask id="bgmask">
|
||||
<rect width="100%" height="100%" fill="white" />
|
||||
<rect
|
||||
style={transform}
|
||||
width={width}
|
||||
height={height}
|
||||
x="50%"
|
||||
y="50%"
|
||||
fill="black"
|
||||
/>
|
||||
</mask>
|
||||
<rect
|
||||
class={style.backdropArea}
|
||||
width="100%"
|
||||
height="100%"
|
||||
mask="url(#bgmask)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
356
src/client/lazy-app/Compress/Transform/style.css
Normal file
356
src/client/lazy-app/Compress/Transform/style.css
Normal file
@@ -0,0 +1,356 @@
|
||||
.transform {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
overflow: visible;
|
||||
|
||||
/*
|
||||
& > canvas {
|
||||
transition: transform 150ms ease;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: none !important;
|
||||
will-change: initial !important;
|
||||
contain: strict;
|
||||
|
||||
& * {
|
||||
contain: strict;
|
||||
}
|
||||
/* background: rgba(255, 0, 0, 0.5); */
|
||||
}
|
||||
|
||||
.backdropArea {
|
||||
fill: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.pinch-zoom {
|
||||
composes: abs-fill from global;
|
||||
outline: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pinch-target {
|
||||
/* This fixes a severe painting bug in Chrome.
|
||||
* We should try to remove this once the issue is fixed.
|
||||
* https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10 */
|
||||
will-change: auto;
|
||||
/* Prevent the image becoming misshapen due to default flexbox layout. */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cancel,
|
||||
.save {
|
||||
composes: unbutton from global;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.save {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
||||
& > * {
|
||||
grid-area: 1/1/1/1;
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* @TODO use grid */
|
||||
.cancel {
|
||||
fill: rgba(0, 0, 0, 0.7);
|
||||
|
||||
& > svg:not(.icon) {
|
||||
display: block;
|
||||
margin: -8px 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
& > .icon {
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
top: 22px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 1rem;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
font-size: 80%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
fill: rgba(0, 0, 0, 0.9);
|
||||
|
||||
& > span {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 78px;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
max-width: 250px;
|
||||
margin: 0;
|
||||
width: calc(100% - 60px);
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
align-self: end;
|
||||
border-radius: var(--options-radius) 0 0 var(--options-radius);
|
||||
animation: slideInFromRight 500ms ease-out forwards 1;
|
||||
--horizontal-padding: 15px;
|
||||
--main-theme-color: var(--blue);
|
||||
|
||||
/* Hide on mobile (for now) */
|
||||
@media (max-width: 599px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@keyframes slideInFromRight {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.options-title {
|
||||
background-color: var(--main-theme-color);
|
||||
color: var(--dark-text);
|
||||
margin: 0;
|
||||
padding: 10px var(--horizontal-padding);
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
border-bottom: 1px solid var(--off-black);
|
||||
}
|
||||
|
||||
.options-section {
|
||||
padding: 5px 0;
|
||||
background: var(--off-black);
|
||||
}
|
||||
|
||||
.options-section-title {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
padding: 5px var(--horizontal-padding);
|
||||
}
|
||||
|
||||
.option-base {
|
||||
display: grid;
|
||||
gap: 0.7em;
|
||||
align-items: center;
|
||||
padding: 5px var(--horizontal-padding);
|
||||
}
|
||||
|
||||
.options-button {
|
||||
composes: unbutton from global;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--dark-gray);
|
||||
color: var(--white);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--off-black);
|
||||
border-color: var(--med-gray);
|
||||
}
|
||||
|
||||
&[data-active] {
|
||||
background-color: var(--dark-gray);
|
||||
border-color: var(--med-gray);
|
||||
}
|
||||
}
|
||||
|
||||
.options-dimensions {
|
||||
composes: option-base;
|
||||
grid-template-columns: 1fr 0fr 1fr;
|
||||
|
||||
input {
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
font: inherit;
|
||||
border: none;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.option-one-cell {
|
||||
composes: option-base;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.option-button-row {
|
||||
composes: option-base;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
}
|
||||
|
||||
.option-checkbox {
|
||||
composes: option-base;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
/** Zoom controls */
|
||||
.controls {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 9px 84px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
/* Allow clicks to fall through to the pinch zoom area */
|
||||
pointer-events: none;
|
||||
|
||||
& > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 860px) {
|
||||
padding: 9px;
|
||||
top: auto;
|
||||
left: 320px;
|
||||
right: 320px;
|
||||
bottom: 0;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-controls {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
|
||||
& > :not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
& > :not(:last-child) {
|
||||
margin-right: 0;
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button,
|
||||
.zoom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin: 4px;
|
||||
background-color: rgba(29, 29, 29, 0.92);
|
||||
border: 1px solid rgba(0, 0, 0, 0.67);
|
||||
border-radius: 6px;
|
||||
line-height: 1.1;
|
||||
white-space: nowrap;
|
||||
height: 39px;
|
||||
padding: 0 8px;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
|
||||
/*
|
||||
@media (min-width: 600px) {
|
||||
height: 39px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
*/
|
||||
|
||||
&:focus {
|
||||
/* box-shadow: 0 0 0 2px var(--hot-pink); */
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
outline: none;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: rgba(50, 50, 50, 0.92);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(72, 72, 72, 0.92);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.zoom {
|
||||
cursor: text;
|
||||
width: 7rem;
|
||||
font: inherit;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff;
|
||||
}
|
||||
}
|
||||
span.zoom {
|
||||
color: #939393;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.2;
|
||||
font-weight: 100;
|
||||
}
|
||||
input.zoom {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.05rem;
|
||||
font-weight: 700;
|
||||
text-indent: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zoom-value {
|
||||
margin: 0 3px 0 0;
|
||||
padding: 0 2px;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.05rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
border-bottom: 1px dashed #999;
|
||||
}
|
||||
|
||||
.buttons-no-wrap {
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
|
||||
& > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
canDecodeImageType,
|
||||
abortable,
|
||||
assertSignal,
|
||||
shallowEqual,
|
||||
} from '../util';
|
||||
import {
|
||||
PreprocessorState,
|
||||
@@ -31,7 +32,7 @@ import Results from './Results';
|
||||
import WorkerBridge from '../worker-bridge';
|
||||
import { resize } from 'features/processors/resize/client';
|
||||
import type SnackBarElement from 'shared/custom-els/snack-bar';
|
||||
import { Arrow, ExpandIcon } from '../icons';
|
||||
import Transform from './Transform';
|
||||
import { generateCliInvocation } from '../util/cli';
|
||||
|
||||
export type OutputType = EncoderType | 'identity';
|
||||
@@ -69,8 +70,11 @@ interface State {
|
||||
sides: [Side, Side];
|
||||
/** Source image load */
|
||||
loading: boolean;
|
||||
/** Showing preprocessor transformations modal */
|
||||
transform: boolean;
|
||||
error?: string;
|
||||
mobileView: boolean;
|
||||
altBackground: boolean;
|
||||
preprocessorState: PreprocessorState;
|
||||
encodedPreprocessorState?: PreprocessorState;
|
||||
}
|
||||
@@ -126,13 +130,18 @@ async function preprocessImage(
|
||||
): Promise<ImageData> {
|
||||
assertSignal(signal);
|
||||
let processedData = data;
|
||||
const { rotate, flip, crop } = preprocessorState;
|
||||
|
||||
if (preprocessorState.rotate.rotate !== 0) {
|
||||
processedData = await workerBridge.rotate(
|
||||
signal,
|
||||
processedData,
|
||||
preprocessorState.rotate,
|
||||
);
|
||||
if (flip && (flip.horizontal || flip.vertical)) {
|
||||
processedData = await workerBridge.flip(signal, processedData, flip);
|
||||
}
|
||||
|
||||
if (rotate.rotate !== 0) {
|
||||
processedData = await workerBridge.rotate(signal, processedData, rotate);
|
||||
}
|
||||
|
||||
if (crop && (crop.left || crop.top || crop.right || crop.bottom)) {
|
||||
processedData = await workerBridge.crop(signal, processedData, crop);
|
||||
}
|
||||
|
||||
return processedData;
|
||||
@@ -274,6 +283,9 @@ export default class Compress extends Component<Props, State> {
|
||||
state: State = {
|
||||
source: undefined,
|
||||
loading: false,
|
||||
/** @TODO remove this */
|
||||
// transform: true,
|
||||
transform: false,
|
||||
preprocessorState: defaultPreprocessorState,
|
||||
sides: [
|
||||
{
|
||||
@@ -295,6 +307,7 @@ export default class Compress extends Component<Props, State> {
|
||||
},
|
||||
],
|
||||
mobileView: this.widthQuery.matches,
|
||||
altBackground: false,
|
||||
};
|
||||
|
||||
private readonly encodeCache = new ResultCache();
|
||||
@@ -320,6 +333,12 @@ export default class Compress extends Component<Props, State> {
|
||||
this.setState({ mobileView: this.widthQuery.matches });
|
||||
};
|
||||
|
||||
private toggleBackground = () => {
|
||||
this.setState({
|
||||
altBackground: !this.state.altBackground,
|
||||
});
|
||||
};
|
||||
|
||||
private onEncoderTypeChange = (index: 0 | 1, newType: OutputType): void => {
|
||||
this.setState({
|
||||
sides: cleanSet(
|
||||
@@ -361,6 +380,19 @@ export default class Compress extends Component<Props, State> {
|
||||
});
|
||||
};
|
||||
|
||||
private showPreprocessorTransforms = () => {
|
||||
this.setState({ transform: true });
|
||||
};
|
||||
|
||||
private onTransformUpdated = ({
|
||||
preprocessorState,
|
||||
}: { preprocessorState?: PreprocessorState } = {}) => {
|
||||
if (preprocessorState) {
|
||||
this.onPreprocessorChange(preprocessorState);
|
||||
}
|
||||
this.setState({ transform: false });
|
||||
};
|
||||
|
||||
componentWillReceiveProps(nextProps: Props): void {
|
||||
if (nextProps.file !== this.props.file) {
|
||||
this.sourceFile = nextProps.file;
|
||||
@@ -417,25 +449,38 @@ export default class Compress extends Component<Props, State> {
|
||||
const newRotate = preprocessorState.rotate.rotate;
|
||||
const orientationChanged = oldRotate % 180 !== newRotate % 180;
|
||||
|
||||
const { crop } = preprocessorState;
|
||||
const cropChanged = !shallowEqual(crop, this.state.preprocessorState.crop);
|
||||
|
||||
this.setState((state) => ({
|
||||
loading: true,
|
||||
preprocessorState,
|
||||
// Flip resize values if orientation has changed
|
||||
sides: !orientationChanged
|
||||
? state.sides
|
||||
: (state.sides.map((side) => {
|
||||
const currentResizeSettings =
|
||||
side.latestSettings.processorState.resize;
|
||||
const resizeSettings: Partial<ProcessorState['resize']> = {
|
||||
width: currentResizeSettings.height,
|
||||
height: currentResizeSettings.width,
|
||||
};
|
||||
return cleanMerge(
|
||||
side,
|
||||
'latestSettings.processorState.resize',
|
||||
resizeSettings,
|
||||
);
|
||||
}) as [Side, Side]),
|
||||
sides:
|
||||
!orientationChanged && !cropChanged
|
||||
? state.sides
|
||||
: (state.sides.map((side) => {
|
||||
const currentResizeSettings =
|
||||
side.latestSettings.processorState.resize;
|
||||
let resizeSettings: Partial<ProcessorState['resize']>;
|
||||
if (cropChanged) {
|
||||
const img = state.source?.decoded;
|
||||
resizeSettings = {
|
||||
width: img ? img.width - crop.left - crop.right : undefined,
|
||||
height: img ? img.height - crop.top - crop.bottom : undefined,
|
||||
};
|
||||
} else {
|
||||
resizeSettings = {
|
||||
width: currentResizeSettings.height,
|
||||
height: currentResizeSettings.width,
|
||||
};
|
||||
}
|
||||
return cleanMerge(
|
||||
side,
|
||||
'latestSettings.processorState.resize',
|
||||
resizeSettings,
|
||||
);
|
||||
}) as [Side, Side]),
|
||||
}));
|
||||
};
|
||||
|
||||
@@ -813,12 +858,22 @@ export default class Compress extends Component<Props, State> {
|
||||
}
|
||||
|
||||
render(
|
||||
{ onBack }: Props,
|
||||
{ loading, sides, source, mobileView, preprocessorState }: State,
|
||||
{ onBack, showSnack }: Props,
|
||||
{
|
||||
loading,
|
||||
sides,
|
||||
source,
|
||||
mobileView,
|
||||
altBackground,
|
||||
transform,
|
||||
preprocessorState,
|
||||
}: State,
|
||||
) {
|
||||
const [leftSide, rightSide] = sides;
|
||||
const [leftImageData, rightImageData] = sides.map((i) => i.data);
|
||||
|
||||
transform = (source && source.decoded && transform) || false;
|
||||
|
||||
const options = sides.map((side, index) => (
|
||||
<Options
|
||||
index={index as 0 | 1}
|
||||
@@ -863,8 +918,13 @@ export default class Compress extends Component<Props, State> {
|
||||
rightDisplaySettings.processorState.resize.fitMethod === 'contain';
|
||||
|
||||
return (
|
||||
<div class={style.compress}>
|
||||
<div
|
||||
class={`${style.compress} ${transform ? style.transforming : ''} ${
|
||||
altBackground ? style.altBackground : ''
|
||||
}`}
|
||||
>
|
||||
<Output
|
||||
hidden={transform}
|
||||
source={source}
|
||||
mobileView={mobileView}
|
||||
leftCompressed={leftImageData}
|
||||
@@ -873,6 +933,8 @@ export default class Compress extends Component<Props, State> {
|
||||
rightImgContain={rightImgContain}
|
||||
preprocessorState={preprocessorState}
|
||||
onPreprocessorChange={this.onPreprocessorChange}
|
||||
onShowPreprocessorTransforms={this.showPreprocessorTransforms}
|
||||
onToggleBackground={this.toggleBackground}
|
||||
/>
|
||||
<button class={style.back} onClick={onBack}>
|
||||
<svg viewBox="0 0 61 53.3">
|
||||
@@ -908,6 +970,16 @@ export default class Compress extends Component<Props, State> {
|
||||
</div>,
|
||||
]
|
||||
)}
|
||||
|
||||
{transform && (
|
||||
<Transform
|
||||
mobileView={mobileView}
|
||||
source={source!}
|
||||
preprocessorState={preprocessorState!}
|
||||
onSave={this.onTransformUpdated}
|
||||
onCancel={this.onTransformUpdated}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -17,6 +17,47 @@
|
||||
'header header header'
|
||||
'optsLeft viewportOpts optsRight';
|
||||
}
|
||||
|
||||
/* darker squares background */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #000;
|
||||
opacity: 0.8;
|
||||
transition: opacity 500ms ease;
|
||||
}
|
||||
|
||||
&.alt-background::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* transformation is modal and we sweep away the comparison UI */
|
||||
&.transforming {
|
||||
& > .options {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
& > .options + .options {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
& > .options {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > .back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
@@ -33,6 +74,7 @@
|
||||
grid-template-rows: 1fr max-content;
|
||||
align-content: end;
|
||||
align-self: end;
|
||||
transition: transform 500ms ease;
|
||||
|
||||
@media (min-width: 600px) {
|
||||
width: 300px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { h } from 'preact';
|
||||
|
||||
const Icon = (props: preact.JSX.HTMLAttributes) => (
|
||||
const Icon = (props: preact.JSX.HTMLAttributes | preact.JSX.SVGAttributes) => (
|
||||
// @ts-ignore - TS bug https://github.com/microsoft/TypeScript/issues/16019
|
||||
<svg
|
||||
width="24"
|
||||
@@ -11,6 +11,56 @@ const Icon = (props: preact.JSX.HTMLAttributes) => (
|
||||
/>
|
||||
);
|
||||
|
||||
export const CLIIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M1 2.7H23v18.5H1zm5.5 13l3.7-3.7-3.7-3.7m5.5 7.4h5.6" />
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const SwapIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M8.5 8.6v6.8L5.1 12l3.4-3.4M10 5l-7 7 7 7V5zm4 0v14l7-7-7-7z" />
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const FlipVerticallyIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M21 9V7h-2v2zM9 5V3H7v2zM5 21h14a2 2 0 002-2v-4h-2v4H5v-4H3v4a2 2 0 002 2zM3 5h2V3a2 2 0 00-2 2zm20 8v-2H1v2zm-6-8V3h-2v2zM5 9V7H3v2zm8-4V3h-2v2zm8 0a2 2 0 00-2-2v2z" />
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const FlipHorizontallyIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M15 21h2v-2h-2zm4-12h2V7h-2zM3 5v14a2 2 0 002 2h4v-2H5V5h4V3H5a2 2 0 00-2 2zm16-2v2h2a2 2 0 00-2-2zm-8 20h2V1h-2zm8-6h2v-2h-2zM15 5h2V3h-2zm4 8h2v-2h-2zm0 8a2 2 0 002-2h-2z" />
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const RotateClockwiseIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M16.05 5.34l-5.2-5.2v3.5a9.12 9.12 0 000 18.1v-2.3a6.84 6.84 0 010-13.5v4.47zm5 6.22a9.03 9.03 0 00-1.85-4.44l-1.62 1.62a6.63 6.63 0 011.16 2.82zm-7.91 7.87v2.31a9.05 9.05 0 004.45-1.84l-1.64-1.64a6.6 6.6 0 01-2.81 1.18zm4.44-2.76l1.62 1.61a9.03 9.03 0 001.85-4.44h-2.3a6.73 6.73 0 01-1.17 2.83z" />
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const RotateCounterClockwiseIcon = (
|
||||
props: preact.JSX.HTMLAttributes,
|
||||
) => (
|
||||
<Icon {...props}>
|
||||
<path d="M7.95 5.34l5.19-5.2v3.5a9.12 9.12 0 010 18.1v-2.3a6.84 6.84 0 000-13.5v4.47zm-5 6.22A9.03 9.03 0 014.8 7.12l1.62 1.62a6.63 6.63 0 00-1.17 2.82zm7.9 7.87v2.31A9.05 9.05 0 016.4 19.9l1.65-1.64a6.6 6.6 0 002.8 1.17zm-4.43-2.76L4.8 18.28a9.03 9.03 0 01-1.85-4.44h2.3a6.73 6.73 0 001.17 2.83z" />
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const CheckmarkIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M9.76 17.56l-4.55-4.55-1.52 1.52 6.07 6.08 13-13.02-1.51-1.52z" />
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const CompareIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M9.77 1.94h-5.6a2.24 2.24 0 00-2.22 2.25v15.65a2.24 2.24 0 002.24 2.23h5.59v2.24h2.23V-.31H9.78zm0 16.77h-5.6l5.6-6.7zM19.83 1.94h-5.6v2.25h5.6v14.53l-5.6-6.7v10.05h5.6a2.24 2.24 0 002.23-2.23V4.18a2.24 2.24 0 00-2.23-2.24z" />
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const ToggleBackgroundIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />
|
||||
@@ -31,6 +81,14 @@ export const RotateIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const MoreIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<circle cx="12" cy="6" r="2" />
|
||||
<circle cx="12" cy="12" r="2" />
|
||||
<circle cx="12" cy="18" r="2" />
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const AddIcon = (props: preact.JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
|
||||
@@ -72,20 +130,3 @@ export const DownloadIcon = () => (
|
||||
<path d="M6.6 2.7h-4v13.2h2.7A2.7 2.7 0 018 18.6a2.7 2.7 0 002.6 2.6h2.7a2.7 2.7 0 002.6-2.6 2.7 2.7 0 012.7-2.7h2.6V2.7h-4a1.3 1.3 0 110-2.7h4A2.7 2.7 0 0124 2.7v18.5a2.7 2.7 0 01-2.7 2.7H2.7A2.7 2.7 0 010 21.2V2.7A2.7 2.7 0 012.7 0h4a1.3 1.3 0 010 2.7zm4 7.4V1.3a1.3 1.3 0 112.7 0v8.8L15 8.4a1.3 1.3 0 011.9 1.8l-4 4a1.3 1.3 0 01-1.9 0l-4-4A1.3 1.3 0 019 8.4z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const CLIIcon = () => (
|
||||
<svg viewBox="0 0 81.3 68.8">
|
||||
<path
|
||||
fill="none"
|
||||
stroke-miterlimit="15.6"
|
||||
stroke-width="6.3"
|
||||
d="M3.1 3.1h75v62.5h-75zm18.8 43.8l12.5-12.5-12.5-12.5m18.7 25h18.8"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const SwapIcon = () => (
|
||||
<svg viewBox="0 0 18 14">
|
||||
<path d="M5.5 3.6v6.8L2.1 7l3.4-3.4M7 0L0 7l7 7V0zm4 0v14l7-7-7-7z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
25
src/features/preprocessors/crop/shared/meta.ts
Normal file
25
src/features/preprocessors/crop/shared/meta.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Copyright 2020 Google Inc. All Rights Reserved.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export interface Options {
|
||||
left: number;
|
||||
right: number;
|
||||
top: number;
|
||||
bottom: number;
|
||||
}
|
||||
|
||||
export const defaultOptions: Options = {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
};
|
||||
13
src/features/preprocessors/crop/shared/missing-types.d.ts
vendored
Normal file
13
src/features/preprocessors/crop/shared/missing-types.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Copyright 2020 Google Inc. All Rights Reserved.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/// <reference path="../../../../../missing-types.d.ts" />
|
||||
37
src/features/preprocessors/crop/worker/crop.ts
Normal file
37
src/features/preprocessors/crop/worker/crop.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Copyright 2020 Google Inc. All Rights Reserved.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Options } from '../shared/meta';
|
||||
|
||||
export default async function crop(
|
||||
{ data, width, height }: ImageData,
|
||||
{ top, right, bottom, left }: Options,
|
||||
): Promise<ImageData> {
|
||||
const newWidth = width - left - right;
|
||||
const newHeight = height - top - bottom;
|
||||
|
||||
const cols = width * 4;
|
||||
const newCols = newWidth * 4;
|
||||
|
||||
const pixels = new Uint8ClampedArray(data.buffer, 0, newHeight * newCols);
|
||||
for (let y = 0; y < newHeight; y++) {
|
||||
const x = left * 4;
|
||||
const row = new Uint8ClampedArray(
|
||||
data.buffer,
|
||||
(top + y) * cols + x,
|
||||
newCols,
|
||||
);
|
||||
pixels.set(row, y * newCols);
|
||||
}
|
||||
|
||||
return new ImageData(pixels.slice(), newWidth, newHeight);
|
||||
}
|
||||
13
src/features/preprocessors/crop/worker/missing-types.d.ts
vendored
Normal file
13
src/features/preprocessors/crop/worker/missing-types.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Copyright 2020 Google Inc. All Rights Reserved.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/// <reference path="../../../../../missing-types.d.ts" />
|
||||
21
src/features/preprocessors/flip/shared/meta.ts
Normal file
21
src/features/preprocessors/flip/shared/meta.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Copyright 2020 Google Inc. All Rights Reserved.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export interface Options {
|
||||
horizontal: boolean;
|
||||
vertical: boolean;
|
||||
}
|
||||
|
||||
export const defaultOptions: Options = {
|
||||
horizontal: false,
|
||||
vertical: false,
|
||||
};
|
||||
13
src/features/preprocessors/flip/shared/missing-types.d.ts
vendored
Normal file
13
src/features/preprocessors/flip/shared/missing-types.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Copyright 2020 Google Inc. All Rights Reserved.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/// <reference path="../../../../../missing-types.d.ts" />
|
||||
68
src/features/preprocessors/flip/worker/flip.ts
Normal file
68
src/features/preprocessors/flip/worker/flip.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* Copyright 2020 Google Inc. All Rights Reserved.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Options } from '../shared/meta';
|
||||
|
||||
export default async function flip(
|
||||
data: ImageData,
|
||||
opts: Options,
|
||||
): Promise<ImageData> {
|
||||
const { vertical, horizontal } = opts;
|
||||
const source = data.data;
|
||||
const len = source.length;
|
||||
const pixels = new Uint8ClampedArray(len);
|
||||
const { width, height } = data;
|
||||
|
||||
let i = 0;
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
const cols = width * 4;
|
||||
while (i < len) {
|
||||
let from = vertical ? (height - y) * cols + x * 4 : i;
|
||||
if (horizontal) from = from - x * 4 + cols - x * 4; // todo: reduce
|
||||
|
||||
pixels[i++] = source[from++];
|
||||
pixels[i++] = source[from++];
|
||||
pixels[i++] = source[from++];
|
||||
pixels[i++] = source[from];
|
||||
|
||||
if (++x === width) {
|
||||
x = 0;
|
||||
y++;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
function swap(a: number, b: number) {
|
||||
let tmp = pixels[a];
|
||||
pixels[a] = pixels[b];
|
||||
pixels[b] = tmp;
|
||||
}
|
||||
function swapRgba(a: number, b: number) {
|
||||
swap(a, b);
|
||||
swap(a+1, b+1);
|
||||
swap(a+2, b+2);
|
||||
swap(a+3, b+3);
|
||||
}
|
||||
const COLS = data.width * 4;
|
||||
// for (let y = 0, y2 = (data.height - 1); y < y2; y+=4, y2-=4) {
|
||||
for (let y = 0; y < data.height; y++) {
|
||||
for (let x = 0, x2 = COLS - 4; x < x2; x+=4, x2-=4) {
|
||||
const offsetX = y * COLS;
|
||||
const offsetY = (opts.vertical ? (data.height - y) : y) * COLS;
|
||||
const flippedX = opts.horizontal ? x2 : x;
|
||||
swapRgba(offsetX + x, offsetY + x2);
|
||||
}
|
||||
}
|
||||
*/
|
||||
return new ImageData(pixels, data.width, data.height);
|
||||
}
|
||||
13
src/features/preprocessors/flip/worker/missing-types.d.ts
vendored
Normal file
13
src/features/preprocessors/flip/worker/missing-types.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Copyright 2020 Google Inc. All Rights Reserved.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/// <reference path="../../../../../missing-types.d.ts" />
|
||||
@@ -273,7 +273,7 @@ export default class Intro extends Component<Props, State> {
|
||||
)}
|
||||
<div
|
||||
class={style.loadImgContent}
|
||||
style={{ visibility: __PRERENDER__ ? 'hidden' : '' }}
|
||||
style={{ visibility: __PRERENDER__ ? 'hidden' : undefined }}
|
||||
>
|
||||
<button class={style.loadBtn} onClick={this.onOpenClick}>
|
||||
<svg viewBox="0 0 24 24" class={style.loadIcon}>
|
||||
|
||||
@@ -11,6 +11,7 @@ html {
|
||||
--less-light-gray: #bcbcbc;
|
||||
--medium-light-gray: #d1d1d1;
|
||||
--light-gray: #eaeaea;
|
||||
--med-gray: #555;
|
||||
--dark-gray: #333;
|
||||
--dim-text: #343a3e;
|
||||
--dark-text: #142630;
|
||||
|
||||
Reference in New Issue
Block a user