├── out ├── .nojekyll ├── CNAME ├── _next │ └── static │ │ ├── webpack │ │ ├── 75db67cb847795915f1c.hot-update.json │ │ ├── b8914f4160b5137bef83.hot-update.json │ │ ├── 1020f9b57a26f5c49b3f.hot-update.json │ │ ├── 49f09857c78ffdb1020b.hot-update.json │ │ ├── 55f61a4cd6dc3e65a08d.hot-update.json │ │ ├── d271831b03611e4a71c2.hot-update.json │ │ ├── 19bb8577976397c6b663.hot-update.json │ │ └── static │ │ │ └── development │ │ │ └── pages │ │ │ ├── index.js.d271831b03611e4a71c2.hot-update.js.map │ │ │ ├── index.js.1020f9b57a26f5c49b3f.hot-update.js.map │ │ │ ├── index.js.55f61a4cd6dc3e65a08d.hot-update.js.map │ │ │ └── index.js.49f09857c78ffdb1020b.hot-update.js.map │ │ ├── chunks │ │ ├── 0.js.map │ │ └── 0.js │ │ ├── runtime │ │ ├── webpack-035ac2b14bde147cb4a8.js │ │ ├── main-2e6abdc8933514307979.js │ │ └── webpack.js.map │ │ ├── C3cT0hE_kZnnIAW2zU3Mv │ │ └── pages │ │ │ ├── _app.js │ │ │ ├── _error.js │ │ │ └── index.js │ │ └── xsouaqTKXjhHAHxsG-fln │ │ └── pages │ │ ├── _app.js │ │ ├── _error.js │ │ └── index.js ├── static │ ├── lion.jpg │ ├── favicon.png │ ├── freeconfig.gif │ ├── freeconfig-share.png │ ├── IBMPlexMono-Regular.woff │ └── IBMPlexMono-Regular.woff2 ├── 404.html └── index.html ├── static ├── lion.jpg ├── favicon.png ├── freeconfig.gif ├── freeconfig-share.png ├── IBMPlexMono-Regular.woff └── IBMPlexMono-Regular.woff2 ├── .gitignore ├── README.md ├── package.json ├── components └── nav.js └── pages ├── _document.js └── index.js /out/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /out/CNAME: -------------------------------------------------------------------------------- 1 | freeconfig.constraint.systems 2 | -------------------------------------------------------------------------------- /out/_next/static/webpack/75db67cb847795915f1c.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"b8914f4160b5137bef83","c":{}} -------------------------------------------------------------------------------- /out/_next/static/webpack/b8914f4160b5137bef83.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"19bb8577976397c6b663","c":{}} -------------------------------------------------------------------------------- /static/lion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/static/lion.jpg -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/static/favicon.png -------------------------------------------------------------------------------- /out/static/lion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/out/static/lion.jpg -------------------------------------------------------------------------------- /out/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/out/static/favicon.png -------------------------------------------------------------------------------- /static/freeconfig.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/static/freeconfig.gif -------------------------------------------------------------------------------- /out/static/freeconfig.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/out/static/freeconfig.gif -------------------------------------------------------------------------------- /static/freeconfig-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/static/freeconfig-share.png -------------------------------------------------------------------------------- /out/_next/static/chunks/0.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/chunks/0.js","sources":[],"mappings":";;;;;;;;;;;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /out/static/freeconfig-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/out/static/freeconfig-share.png -------------------------------------------------------------------------------- /static/IBMPlexMono-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/static/IBMPlexMono-Regular.woff -------------------------------------------------------------------------------- /static/IBMPlexMono-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/static/IBMPlexMono-Regular.woff2 -------------------------------------------------------------------------------- /out/_next/static/webpack/1020f9b57a26f5c49b3f.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"27132e57bb1597ef2ef7","c":{"static/development/pages/index.js":true}} -------------------------------------------------------------------------------- /out/_next/static/webpack/49f09857c78ffdb1020b.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"55f61a4cd6dc3e65a08d","c":{"static/development/pages/index.js":true}} -------------------------------------------------------------------------------- /out/_next/static/webpack/55f61a4cd6dc3e65a08d.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"1020f9b57a26f5c49b3f","c":{"static/development/pages/index.js":true}} -------------------------------------------------------------------------------- /out/_next/static/webpack/d271831b03611e4a71c2.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"49f09857c78ffdb1020b","c":{"static/development/pages/index.js":true}} -------------------------------------------------------------------------------- /out/static/IBMPlexMono-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/out/static/IBMPlexMono-Regular.woff -------------------------------------------------------------------------------- /out/static/IBMPlexMono-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/freeconfig/master/out/static/IBMPlexMono-Regular.woff2 -------------------------------------------------------------------------------- /out/_next/static/webpack/19bb8577976397c6b663.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"d271831b03611e4a71c2","c":{"static/development/pages/next/dist/pages/_error.js":false}} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | 14 | # production 15 | /build 16 | 17 | # misc 18 | .DS_Store 19 | .env* 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Freeconfig 2 | 3 | Freeconfig lets you push image pixels around in blocks. 4 | 5 | 6 | 7 | https://freeconfig.constraint.systems/ 8 | 9 | File-handling inspired by Hundred Rabbits' image-cropping tool [Moogle](https://github.com/hundredrabbits/moogle). 10 | -------------------------------------------------------------------------------- /out/_next/static/chunks/0.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{ 2 | 3 | /***/ "./node_modules/next/dist/client/dev/noop.js": 4 | /*!***************************************************!*\ 5 | !*** ./node_modules/next/dist/client/dev/noop.js ***! 6 | \***************************************************/ 7 | /*! no static exports found */ 8 | /***/ (function(module, exports, __webpack_require__) { 9 | 10 | "use strict"; 11 | 12 | 13 | /***/ }) 14 | 15 | }]); 16 | //# sourceMappingURL=0.js.map -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "asteroids", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "deploy": "next build && next export && touch out/.nojekyll && touch out/CNAME && echo \"freeconfig.constraint.systems\" >> out/CNAME && git add out/ && git commit -m \"Deploy to gh-pages\" && git subtree push --prefix out origin gh-pages" 10 | }, 11 | "dependencies": { 12 | "next": "9.0.7", 13 | "react": "16.10.1", 14 | "react-dom": "16.10.1" 15 | }, 16 | "devDependencies": { 17 | "gh-pages": "^2.1.1" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /components/nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'next/link' 3 | 4 | const links = [ 5 | { href: 'https://zeit.co/now', label: 'ZEIT' }, 6 | { href: 'https://github.com/zeit/next.js', label: 'GitHub' } 7 | ].map(link => { 8 | link.key = `nav-link-${link.href}-${link.label}` 9 | return link 10 | }) 11 | 12 | const Nav = () => ( 13 | 54 | ) 55 | 56 | export default Nav 57 | -------------------------------------------------------------------------------- /out/_next/static/runtime/webpack-035ac2b14bde147cb4a8.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(r){for(var n,l,f=r[0],i=r[1],a=r[2],c=0,s=[];c 12 | 13 | 14 | 18 | 19 | 23 | 24 | 28 | 32 | 36 | 37 | 38 | 39 |
40 | 41 | 42 | 43 | ); 44 | } 45 | } 46 | 47 | export default MyDocument; 48 | -------------------------------------------------------------------------------- /out/_next/static/C3cT0hE_kZnnIAW2zU3Mv/pages/_app.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{B5Ud:function(t,e,n){"use strict";var r=n("/HRN"),u=n("WaGi"),a=n("ZDA2"),o=n("/+P4"),i=n("N9n2"),p=n("ln6h"),c=n("KI45");e.__esModule=!0,e.Container=function(t){0;return t.children},e.createUrl=k,e.default=void 0;var s=c(n("htGi")),l=c(n("+oT+")),f=c(n("q1tI")),h=c(n("17x9")),d=n("g/15");e.AppInitialProps=d.AppInitialProps;var v=n("nOHt");function w(t){return P.apply(this,arguments)}function P(){return(P=(0,l.default)(p.mark(function t(e){var n,r,u;return p.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return n=e.Component,r=e.ctx,t.next=3,(0,d.loadGetInitialProps)(n,r);case 3:return u=t.sent,t.abrupt("return",{pageProps:u});case 5:case"end":return t.stop()}},t)}))).apply(this,arguments)}var g=function(t){function e(){return r(this,e),a(this,o(e).apply(this,arguments))}return i(e,t),u(e,[{key:"getChildContext",value:function(){return{router:(0,v.makePublicRouterInstance)(this.props.router)}}},{key:"componentDidCatch",value:function(t,e){throw t}},{key:"render",value:function(){var t=this.props,e=t.router,n=t.Component,r=t.pageProps,u=k(e);return f.default.createElement(n,(0,s.default)({},r,{url:u}))}}]),e}(f.default.Component);function k(t){var e=t.pathname,n=t.asPath,r=t.query;return{get query(){return r},get pathname(){return e},get asPath(){return n},back:function(){t.back()},push:function(e,n){return t.push(e,n)},pushTo:function(e,n){var r=n?e:"",u=n||e;return t.push(r,u)},replace:function(e,n){return t.replace(e,n)},replaceTo:function(e,n){var r=n?e:"",u=n||e;return t.replace(r,u)}}}e.default=g,g.childContextTypes={router:h.default.object},g.origGetInitialProps=w,g.getInitialProps=w},"e9+W":function(t,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return n("B5Ud")}])}},[["e9+W",1,0]]]); -------------------------------------------------------------------------------- /out/_next/static/xsouaqTKXjhHAHxsG-fln/pages/_app.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{B5Ud:function(t,e,n){"use strict";var r=n("/HRN"),u=n("WaGi"),a=n("ZDA2"),o=n("/+P4"),i=n("N9n2"),p=n("ln6h"),c=n("KI45");e.__esModule=!0,e.Container=function(t){0;return t.children},e.createUrl=k,e.default=void 0;var s=c(n("htGi")),l=c(n("+oT+")),f=c(n("q1tI")),h=c(n("17x9")),d=n("g/15");e.AppInitialProps=d.AppInitialProps;var v=n("nOHt");function w(t){return P.apply(this,arguments)}function P(){return(P=(0,l.default)(p.mark(function t(e){var n,r,u;return p.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return n=e.Component,r=e.ctx,t.next=3,(0,d.loadGetInitialProps)(n,r);case 3:return u=t.sent,t.abrupt("return",{pageProps:u});case 5:case"end":return t.stop()}},t)}))).apply(this,arguments)}var g=function(t){function e(){return r(this,e),a(this,o(e).apply(this,arguments))}return i(e,t),u(e,[{key:"getChildContext",value:function(){return{router:(0,v.makePublicRouterInstance)(this.props.router)}}},{key:"componentDidCatch",value:function(t,e){throw t}},{key:"render",value:function(){var t=this.props,e=t.router,n=t.Component,r=t.pageProps,u=k(e);return f.default.createElement(n,(0,s.default)({},r,{url:u}))}}]),e}(f.default.Component);function k(t){var e=t.pathname,n=t.asPath,r=t.query;return{get query(){return r},get pathname(){return e},get asPath(){return n},back:function(){t.back()},push:function(e,n){return t.push(e,n)},pushTo:function(e,n){var r=n?e:"",u=n||e;return t.push(r,u)},replace:function(e,n){return t.replace(e,n)},replaceTo:function(e,n){var r=n?e:"",u=n||e;return t.replace(r,u)}}}e.default=g,g.childContextTypes={router:h.default.object},g.origGetInitialProps=w,g.getInitialProps=w},"e9+W":function(t,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return n("B5Ud")}])}},[["e9+W",1,0]]]); -------------------------------------------------------------------------------- /out/_next/static/C3cT0hE_kZnnIAW2zU3Mv/pages/_error.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{"/a9y":function(e,t,n){"use strict";var r=n("/HRN"),l=n("WaGi"),i=n("ZDA2"),a=n("/+P4"),o=n("N9n2"),d=n("KI45");t.__esModule=!0,t.default=void 0;var s=d(n("q1tI")),u=d(n("8Kt/")),c={400:"Bad Request",404:"This page could not be found",405:"Method Not Allowed",500:"Internal Server Error"},p=function(e){function t(){return r(this,t),i(this,a(t).apply(this,arguments))}return o(t,e),l(t,[{key:"render",value:function(){var e=this.props.statusCode,t=this.props.title||c[e]||"An unexpected error has occurred";return s.default.createElement("div",{style:f.error},s.default.createElement(u.default,null,s.default.createElement("title",null,e,": ",t)),s.default.createElement("div",null,s.default.createElement("style",{dangerouslySetInnerHTML:{__html:"body { margin: 0 }"}}),e?s.default.createElement("h1",{style:f.h1},e):null,s.default.createElement("div",{style:f.desc},s.default.createElement("h2",{style:f.h2},t,"."))))}}],[{key:"getInitialProps",value:function(e){var t=e.res,n=e.err;return{statusCode:t&&t.statusCode?t.statusCode:n?n.statusCode:404}}}]),t}(s.default.Component);t.default=p,p.displayName="ErrorPage";var f={error:{color:"#000",background:"#fff",fontFamily:'-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',height:"100vh",textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},desc:{display:"inline-block",textAlign:"left",lineHeight:"49px",height:"49px",verticalAlign:"middle"},h1:{display:"inline-block",borderRight:"1px solid rgba(0, 0, 0,.3)",margin:0,marginRight:"20px",padding:"10px 23px 10px 0",fontSize:"24px",fontWeight:500,verticalAlign:"top"},h2:{fontSize:"14px",fontWeight:"normal",lineHeight:"inherit",margin:0,padding:0}}},"04ac":function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_error",function(){return n("/a9y")}])}},[["04ac",1,0]]]); -------------------------------------------------------------------------------- /out/_next/static/xsouaqTKXjhHAHxsG-fln/pages/_error.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{"/a9y":function(e,t,n){"use strict";var r=n("/HRN"),l=n("WaGi"),i=n("ZDA2"),a=n("/+P4"),o=n("N9n2"),d=n("KI45");t.__esModule=!0,t.default=void 0;var s=d(n("q1tI")),u=d(n("8Kt/")),c={400:"Bad Request",404:"This page could not be found",405:"Method Not Allowed",500:"Internal Server Error"},p=function(e){function t(){return r(this,t),i(this,a(t).apply(this,arguments))}return o(t,e),l(t,[{key:"render",value:function(){var e=this.props.statusCode,t=this.props.title||c[e]||"An unexpected error has occurred";return s.default.createElement("div",{style:f.error},s.default.createElement(u.default,null,s.default.createElement("title",null,e,": ",t)),s.default.createElement("div",null,s.default.createElement("style",{dangerouslySetInnerHTML:{__html:"body { margin: 0 }"}}),e?s.default.createElement("h1",{style:f.h1},e):null,s.default.createElement("div",{style:f.desc},s.default.createElement("h2",{style:f.h2},t,"."))))}}],[{key:"getInitialProps",value:function(e){var t=e.res,n=e.err;return{statusCode:t&&t.statusCode?t.statusCode:n?n.statusCode:404}}}]),t}(s.default.Component);t.default=p,p.displayName="ErrorPage";var f={error:{color:"#000",background:"#fff",fontFamily:'-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',height:"100vh",textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},desc:{display:"inline-block",textAlign:"left",lineHeight:"49px",height:"49px",verticalAlign:"middle"},h1:{display:"inline-block",borderRight:"1px solid rgba(0, 0, 0,.3)",margin:0,marginRight:"20px",padding:"10px 23px 10px 0",fontSize:"24px",fontWeight:500,verticalAlign:"top"},h2:{fontSize:"14px",fontWeight:"normal",lineHeight:"inherit",margin:0,padding:0}}},"04ac":function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_error",function(){return n("/a9y")}])}},[["04ac",1,0]]]); -------------------------------------------------------------------------------- /out/404.html: -------------------------------------------------------------------------------- 1 |

404

This page could not be found.

-------------------------------------------------------------------------------- /out/index.html: -------------------------------------------------------------------------------- 1 | Freeconfig
Freeconfig lets you push image pixels around in blocks.
Mode
a move  s adjust size  d grab
Move cursor
h ←  j ↓  k ↑  l → 
Image
To add an image you can paste, drop, or press o to open a file dialog. Lion photo by Maurits Bausenhart↗
Special
r reset image  e save as png  b light bg  ? help
View source↗
-------------------------------------------------------------------------------- /out/_next/static/runtime/main-2e6abdc8933514307979.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[2],{"/h46":function(e,t,r){r("cHUd")("Map")},"0IRE":function(e,t,r){"use strict";var n=r("LX0d"),a=r("/HRN"),o=r("WaGi");r("hfKm")(t,"__esModule",{value:!0});var u=function(){function e(t){a(this,e),this.data=new n(t)}return o(e,[{key:"getData",value:function(){return this.data}},{key:"get",value:function(e){return this.data.get(e)}},{key:"set",value:function(e,t){this.data.set(e,t)}},{key:"overwrite",value:function(e){this.data=new n(e)}}]),e}();t.DataManager=u},BMP1:function(e,t,r){"use strict";var n=r("5Uuq")(r("IKlv"));window.next=n,(0,n.default)().catch(function(e){console.error(e.message+"\n"+e.stack)})},DqTX:function(e,t,r){"use strict";var n=r("/HRN"),a=r("WaGi"),o=r("KI45");t.__esModule=!0,t.default=void 0;var u=o(r("eVuF")),i={acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},c=function(){function e(){var t=this;n(this,e),this.updateHead=function(e){var r=t.updatePromise=u.default.resolve().then(function(){r===t.updatePromise&&(t.updatePromise=null,t.doUpdateHead(e))})},this.updatePromise=null}return a(e,[{key:"doUpdateHead",value:function(e){var t=this,r={};e.forEach(function(e){var t=r[e.type]||[];t.push(e),r[e.type]=t}),this.updateTitle(r.title?r.title[0]:null);["meta","base","link","style","script"].forEach(function(e){t.updateElements(e,r[e]||[])})}},{key:"updateTitle",value:function(e){var t="";if(e){var r=e.props.children;t="string"===typeof r?r:r.join("")}t!==document.title&&(document.title=t)}},{key:"updateElements",value:function(e,t){var r=document.getElementsByTagName("head")[0],n=r.querySelector("meta[name=next-head-count]");for(var a=Number(n.content),o=[],u=0,i=n.previousElementSibling;u0?arguments[0]:void 0)}},{get:function(e){var t=n.getEntry(a(this,"Map"),e);return t&&t.v},set:function(e,t){return n.def(a(this,"Map"),0===e?0:e,t)}},n,!0)},qArv:function(e,t,r){"use strict";var n=r("hfKm"),a=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t};n(t,"__esModule",{value:!0});var o=a(r("q1tI"));t.DataManagerContext=o.createContext(null)},yLiY:function(e,t,r){"use strict";var n;r("hfKm")(t,"__esModule",{value:!0}),t.default=function(){return n},t.setConfig=function(e){n=e}},zmvN:function(e,t,r){"use strict";var n=r("ln6h"),a=r("/HRN"),o=r("WaGi"),u=r("KI45");t.__esModule=!0,t.default=void 0;var i=u(r("+oT+")),c=u(r("eVuF")),s=u(r("dZ6Y"));var p=function(e){try{return e.relList.supports("preload")}catch(t){return!1}}(document.createElement("link"));function f(e){var t=document.createElement("link");t.rel="preload",t.crossOrigin=void 0,t.href=encodeURI(e),t.as="script",document.head.appendChild(t)}var d=function(){function e(t,r){a(this,e),this.buildId=t,this.assetPrefix=r,this.pageCache={},this.pageRegisterEvents=(0,s.default)(),this.loadingRoutes={}}return o(e,[{key:"getDependencies",value:function(e){return this.promisedBuildManifest.then(function(t){return t[e]&&t[e].map(function(e){return"/_next/"+e})||[]})}},{key:"normalizeRoute",value:function(e){if("/"!==e[0])throw new Error('Route name should start with a "/", got "'+e+'"');return"/"===(e=e.replace(/\/index$/,"/"))?e:e.replace(/\/$/,"")}},{key:"loadPage",value:function(e){var t=this;return e=this.normalizeRoute(e),new c.default(function(r,n){var a=t.pageCache[e];if(a){var o=a.error,u=a.page;o?n(o):r(u)}else t.pageRegisterEvents.on(e,function a(o){var u=o.error,i=o.page;t.pageRegisterEvents.off(e,a),delete t.loadingRoutes[e],u?n(u):r(i)}),document.querySelector('script[data-next-page="'+e+'"]')||t.loadingRoutes[e]||(t.loadRoute(e),t.loadingRoutes[e]=!0)})}},{key:"loadRoute",value:function(e){var t=this;return(0,i.default)(n.mark(function r(){var a,o;return n.wrap(function(r){for(;;)switch(r.prev=r.next){case 0:e=t.normalizeRoute(e),a="/"===e?"/index.js":e+".js",o=t.assetPrefix+"/_next/static/"+encodeURIComponent(t.buildId)+"/pages"+a,t.loadScript(o,e,!0);case 4:case"end":return r.stop()}},r)}))()}},{key:"loadScript",value:function(e,t,r){var n=this,a=document.createElement("script");a.crossOrigin=void 0,a.src=encodeURI(e),a.onerror=function(){var r=new Error("Error loading script "+e);r.code="PAGE_LOAD_ERROR",n.pageRegisterEvents.emit(t,{error:r})},document.body.appendChild(a)}},{key:"registerPage",value:function(e,t){var r=this;!function(){try{var n=t(),a={page:n.default||n,mod:n};r.pageCache[e]=a,r.pageRegisterEvents.emit(e,a)}catch(o){r.pageCache[e]={error:o},r.pageRegisterEvents.emit(e,{error:o})}}()}},{key:"prefetch",value:function(e,t){var r=this;return(0,i.default)(n.mark(function a(){var o,u,i;return n.wrap(function(n){for(;;)switch(n.prev=n.next){case 0:if(e=r.normalizeRoute(e),o=("/"===e?"/index":e)+".js",u=t?e:r.assetPrefix+"/_next/static/"+encodeURIComponent(r.buildId)+"/pages"+o,!document.querySelector('link[rel="preload"][href^="'+u+'"], script[data-next-page="'+e+'"]')){n.next=6;break}return n.abrupt("return");case 6:if(!(i=navigator.connection)){n.next=9;break}if(-1===(i.effectiveType||"").indexOf("2g")&&!i.saveData){n.next=9;break}return n.abrupt("return");case 9:n.next=15;break;case 13:n.t0=function(e){r.prefetch(e,!0)},n.sent.forEach(n.t0);case 15:if(!p){n.next=18;break}return f(u),n.abrupt("return");case 18:if(!t){n.next=20;break}return n.abrupt("return");case 20:if("complete"!==document.readyState){n.next=24;break}return n.abrupt("return",r.loadPage(e).catch(function(){}));case 24:return n.abrupt("return",new c.default(function(t){window.addEventListener("load",function(){r.loadPage(e).then(function(){return t()},function(){return t()})})}));case 25:case"end":return n.stop()}},a)}))()}}]),e}();t.default=d}},[["BMP1",1,0]]]); -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef, useCallback } from 'react'; 2 | import Head from 'next/head'; 3 | 4 | function getDist(p1, p2) { 5 | let a = p2[0] - p1[0]; 6 | let b = p2[1] - p1[1]; 7 | return Math.sqrt(a * a + b * b); 8 | } 9 | 10 | let padding = 10; 11 | let size = 10; 12 | let colors = ['blue', 'hotpink', 'limegreen']; 13 | 14 | let lh = 16 * 1.5; 15 | 16 | // mode 0 = move 17 | // mode 1 = adjust 18 | // mode 2 = grab 19 | 20 | let Home = () => { 21 | let [grid, setGrid] = useState(null); 22 | let [mode, setMode] = useState(0); 23 | let [color, setColor] = useState('dark'); 24 | let cpRef = useRef([0, 0, 10, 10]); 25 | let canvasRef = useRef(); 26 | let cursorRef = useRef(); 27 | let readout = useRef(); 28 | let keymap = useRef({}); 29 | let cache = useRef(null); 30 | let [help, setHelp] = useState(true); 31 | 32 | function KeyTip(letter, color) { 33 | return ( 34 | { 37 | keymap.current[letter] = true; 38 | keyAction(letter, false); 39 | setTimeout(() => { 40 | keymap.current[letter] = false; 41 | }, 300); 42 | }} 43 | style={{ 44 | outline: color === 'dark' ? 'solid 1px white' : 'solid 1px black', 45 | paddingLeft: '0.5ch', 46 | paddingRight: '0.5ch', 47 | textAlign: 'center', 48 | display: 'inline-block', 49 | userSelect: 'none', 50 | cursor: 'default', 51 | }} 52 | > 53 | {letter === ' ' ? 'spacebar' : letter} 54 | 55 | ); 56 | } 57 | 58 | function reset() { 59 | if (cache !== null) { 60 | drawImage(cache.current); 61 | } 62 | } 63 | 64 | function keyAction(letter, repeat) { 65 | let c = canvasRef.current; 66 | let ctx = c.getContext('2d'); 67 | let cp = cpRef.current; 68 | let dpr = window.devicePixelRatio || 1; 69 | let kc = keymap.current; 70 | 71 | function dp(val) { 72 | return val * dpr; 73 | } 74 | 75 | if (letter === 'a' && !repeat) { 76 | setMode(0); 77 | } else if (letter === 's' && !repeat) { 78 | setMode(1); 79 | } else if (letter === 'd' && !repeat) { 80 | setMode(2); 81 | } else if (letter === 'r' && !repeat) { 82 | reset(); 83 | } else if (letter === 'o' && !repeat) { 84 | let input = document.createElement('input'); 85 | input.setAttribute('type', 'file'); 86 | input.dispatchEvent( 87 | new MouseEvent(`click`, { 88 | bubbles: true, 89 | cancelable: true, 90 | view: window, 91 | }) 92 | ); 93 | 94 | function handleChange(e) { 95 | for (const item of this.files) { 96 | if (item.type.indexOf('image') < 0) { 97 | continue; 98 | } 99 | let src = URL.createObjectURL(item); 100 | drawImage(src); 101 | } 102 | this.removeEventListener('change', handleChange); 103 | } 104 | input.addEventListener('change', handleChange); 105 | } else if (letter === 'b') { 106 | setColor(function(prevState) { 107 | return prevState === 'light' ? 'dark' : 'light'; 108 | }); 109 | } else if (letter === 'e' && !repeat) { 110 | let link = document.createElement('a'); 111 | 112 | var revokeURL = function() { 113 | let me = this; 114 | requestAnimationFrame(function() { 115 | URL.revokeObjectURL(me.href); 116 | me.href = null; 117 | }); 118 | this.removeEventListener('click', revokeURL); 119 | }; 120 | 121 | let cropped = document.createElement('canvas'); 122 | let crtx = cropped.getContext('2d'); 123 | cropped.width = c.offsetWidth * dpr - padding * 2 * dpr; 124 | cropped.height = c.offsetHeight * dpr - padding * 2 * dpr; 125 | crtx.drawImage(c, -padding * dpr, -padding * dpr); 126 | crtx.canvas.toBlob(function(blob) { 127 | link.setAttribute('download', 'freeconfig.png'); 128 | link.setAttribute('href', URL.createObjectURL(blob)); 129 | link.addEventListener('click', revokeURL); 130 | link.dispatchEvent( 131 | new MouseEvent(`click`, { 132 | bubbles: true, 133 | cancelable: true, 134 | view: window, 135 | }) 136 | ); 137 | }); 138 | } else if (letter === '?') { 139 | setHelp(prevState => { 140 | return !prevState; 141 | }); 142 | } 143 | 144 | if (mode === 0) { 145 | if (kc['j']) { 146 | cp[1] += 1; 147 | if (cp[1] + cp[3] > grid[1]) cp[1] -= 1; 148 | } 149 | if (kc['k']) { 150 | cp[1] -= 1; 151 | if (cp[1] < 0) cp[1] = 0; 152 | } 153 | if (kc['l']) { 154 | cp[0] += 1; 155 | if (cp[0] + cp[2] > grid[0]) cp[0] -= 1; 156 | } 157 | if (kc['h']) { 158 | cp[0] -= 1; 159 | if (cp[0] < 0) cp[0] = 0; 160 | } 161 | } else if (mode === 1) { 162 | if (kc['k']) { 163 | cp[3] -= 1; 164 | if (cp[3] < 1) cp[3] = 1; 165 | } 166 | if (kc['j']) { 167 | cp[3] += 1; 168 | if (cp[1] + cp[3] > grid[1]) cp[3] -= 1; 169 | } 170 | if (kc['h']) { 171 | cp[2] -= 1; 172 | if (cp[2] < 1) cp[2] = 1; 173 | } 174 | if (kc['l']) { 175 | cp[2] += 1; 176 | if (cp[0] + cp[2] > grid[0]) cp[2] -= 1; 177 | } 178 | } else if (mode === 2) { 179 | if (kc['h']) { 180 | if (cp[0] > 0) { 181 | let s = size; 182 | let p = padding; 183 | 184 | let to_move = [(cp[0] - 1) * s + p, cp[1] * s + p, 1 * s, cp[3] * s]; 185 | 186 | let t = document.createElement('canvas'); 187 | t.width = dp(to_move[2]); 188 | t.height = dp(to_move[3]); 189 | let tx = t.getContext('2d'); 190 | tx.scale(dpr, dpr); 191 | tx.drawImage( 192 | c, 193 | ...to_move.map(c => dp(c)), 194 | 0, 195 | 0, 196 | to_move[2], 197 | to_move[3] 198 | ); 199 | 200 | ctx.drawImage( 201 | c, 202 | dp(cp[0] * s + p), 203 | dp(cp[1] * s + p), 204 | dp(cp[2] * s), 205 | dp(cp[3] * s), 206 | (cp[0] - 1) * s + p, 207 | cp[1] * s + p, 208 | cp[2] * s, 209 | cp[3] * s 210 | ); 211 | ctx.drawImage( 212 | t, 213 | (cp[0] + cp[2] - 1) * s + p, 214 | cp[1] * s + p, 215 | to_move[2], 216 | to_move[3] 217 | ); 218 | 219 | cp[0] -= 1; 220 | } 221 | } 222 | if (kc['j']) { 223 | if (cp[1] + cp[3] < grid[1]) { 224 | let s = size; 225 | let p = padding; 226 | 227 | let to_move = [ 228 | cp[0] * s + p, 229 | (cp[1] + cp[3]) * s + p, 230 | cp[2] * s, 231 | 1 * s, 232 | ]; 233 | 234 | let t = document.createElement('canvas'); 235 | t.width = dp(to_move[2]); 236 | t.height = dp(to_move[3]); 237 | let tx = t.getContext('2d'); 238 | 239 | tx.scale(dpr, dpr); 240 | tx.drawImage( 241 | c, 242 | ...to_move.map(c => dp(c)), 243 | 0, 244 | 0, 245 | to_move[2], 246 | to_move[3] 247 | ); 248 | 249 | ctx.drawImage( 250 | c, 251 | dp(cp[0] * s + p), 252 | dp(cp[1] * s + p), 253 | dp(cp[2] * s), 254 | dp(cp[3] * s), 255 | cp[0] * s + p, 256 | (cp[1] + 1) * s + p, 257 | cp[2] * s, 258 | cp[3] * s 259 | ); 260 | ctx.drawImage( 261 | t, 262 | cp[0] * s + p, 263 | cp[1] * s + p, 264 | to_move[2], 265 | to_move[3] 266 | ); 267 | 268 | cp[1] += 1; 269 | } 270 | } 271 | if (kc['k']) { 272 | if (cp[1] > 0) { 273 | let s = size; 274 | let p = padding; 275 | 276 | let to_move = [cp[0] * s + p, (cp[1] - 1) * s + p, cp[2] * s, 1 * s]; 277 | 278 | let t = document.createElement('canvas'); 279 | t.width = dp(to_move[2]); 280 | t.height = dp(to_move[3]); 281 | let tx = t.getContext('2d'); 282 | 283 | tx.scale(dpr, dpr); 284 | tx.drawImage( 285 | c, 286 | ...to_move.map(c => dp(c)), 287 | 0, 288 | 0, 289 | to_move[2], 290 | to_move[3] 291 | ); 292 | 293 | ctx.drawImage( 294 | c, 295 | dp(cp[0] * s + p), 296 | dp(cp[1] * s + p), 297 | dp(cp[2] * s), 298 | dp(cp[3] * s), 299 | cp[0] * s + p, 300 | (cp[1] - 1) * s + p, 301 | cp[2] * s, 302 | cp[3] * s 303 | ); 304 | ctx.drawImage( 305 | t, 306 | cp[0] * s + p, 307 | (cp[1] + cp[3] - 1) * s + p, 308 | to_move[2], 309 | to_move[3] 310 | ); 311 | 312 | cp[1] -= 1; 313 | } 314 | } 315 | if (kc['l']) { 316 | if (cp[0] + cp[2] < grid[0]) { 317 | let s = size; 318 | let p = padding; 319 | 320 | let to_move = [ 321 | (cp[0] + cp[2]) * s + p, 322 | cp[1] * s + p, 323 | 1 * s, 324 | cp[3] * s, 325 | ]; 326 | 327 | let t = document.createElement('canvas'); 328 | t.width = dp(to_move[2]); 329 | t.height = dp(to_move[3]); 330 | let tx = t.getContext('2d'); 331 | tx.scale(dpr, dpr); 332 | tx.drawImage( 333 | c, 334 | ...to_move.map(c => dp(c)), 335 | 0, 336 | 0, 337 | to_move[2], 338 | to_move[3] 339 | ); 340 | 341 | ctx.drawImage( 342 | c, 343 | dp(cp[0] * s + p), 344 | dp(cp[1] * s + p), 345 | dp(cp[2] * s), 346 | dp(cp[3] * s), 347 | (cp[0] + 1) * s + p, 348 | cp[1] * s + p, 349 | cp[2] * s, 350 | cp[3] * s 351 | ); 352 | ctx.drawImage( 353 | t, 354 | cp[0] * s + p, 355 | cp[1] * s + p, 356 | to_move[2], 357 | to_move[3] 358 | ); 359 | 360 | cp[0] += 1; 361 | } 362 | } 363 | } 364 | 365 | drawCursor(); 366 | } 367 | 368 | function downHandler(e) { 369 | keymap.current[e.key] = true; 370 | keyAction(e.key, e.repeat); 371 | } 372 | 373 | function upHandler(e) { 374 | keymap.current[e.key] = false; 375 | } 376 | 377 | function drawImage(src) { 378 | cache.current = src; 379 | 380 | let dimensions = [window.innerWidth, window.innerHeight]; 381 | 382 | let c = canvasRef.current; 383 | let ctx = c.getContext('2d'); 384 | let w = dimensions[0] - padding * 2; 385 | let h = dimensions[1] - padding * 3 - lh; 386 | let a = w / h; 387 | 388 | let img = new Image(); 389 | img.onload = () => { 390 | let pa = img.width / img.height; 391 | let pw = img.width; 392 | let ph = img.height; 393 | if (a >= pa) { 394 | if (ph > h) { 395 | ph = h; 396 | pw = h * pa; 397 | } 398 | } else if (a < pa) { 399 | if (pw > w) { 400 | pw = w; 401 | ph = w / pa; 402 | } 403 | } 404 | 405 | pw = Math.floor(pw / size) * size; 406 | ph = Math.floor(ph / size) * size; 407 | 408 | let dpr = window.devicePixelRatio || 1; 409 | 410 | c.width = pw * dpr + padding * 2; 411 | c.height = ph * dpr + padding * 2; 412 | c.style.width = pw + padding * 2 + 'px'; 413 | c.style.height = ph + padding * 2 + 'px'; 414 | c.style.marginLeft = 'auto'; 415 | c.style.marginRight = 'auto'; 416 | 417 | ctx.scale(dpr, dpr); 418 | 419 | let cur = cursorRef.current; 420 | cur.width = pw * dpr + padding * 2; 421 | cur.height = ph * dpr + padding * 2; 422 | cur.style.width = pw + padding * 2 + 'px'; 423 | cur.style.height = ph + padding * 2 + 'px'; 424 | 425 | let curtx = cur.getContext('2d'); 426 | 427 | curtx.scale(dpr, dpr); 428 | 429 | ctx.drawImage(img, padding, padding, pw, ph); 430 | setGrid([pw / size, ph / size]); 431 | }; 432 | img.src = src; 433 | } 434 | 435 | function onPaste(e) { 436 | e.preventDefault(); 437 | e.stopPropagation(); 438 | for (const item of e.clipboardData.items) { 439 | if (item.type.indexOf('image') < 0) { 440 | continue; 441 | } 442 | let file = item.getAsFile(); 443 | let src = URL.createObjectURL(file); 444 | drawImage(src); 445 | } 446 | } 447 | 448 | function onDrop(e) { 449 | e.preventDefault(); 450 | e.stopPropagation(); 451 | let file = e.dataTransfer.files[0]; 452 | let filename = file.path ? file.path : file.name ? file.name : ''; 453 | let src = URL.createObjectURL(file); 454 | drawImage(src); 455 | } 456 | 457 | function onDrag(e) { 458 | e.stopPropagation(); 459 | e.preventDefault(); 460 | e.dataTransfer.dropEffect = 'copy'; 461 | } 462 | 463 | function drawCursor() { 464 | let r = cursorRef.current; 465 | let p = padding; 466 | let rtx = cursorRef.current.getContext('2d'); 467 | let cp = cpRef.current; 468 | rtx.clearRect(0, 0, r.offsetWidth, r.offsetHeight); 469 | rtx.lineWidth = 2; 470 | if (mode === 0) { 471 | rtx.strokeStyle = colors[0]; 472 | } else if (mode === 1) { 473 | rtx.strokeStyle = colors[1]; 474 | } else if (mode === 2) { 475 | rtx.strokeStyle = colors[2]; 476 | } 477 | rtx.strokeRect( 478 | cp[0] * size + p, 479 | cp[1] * size + p, 480 | cp[2] * size, 481 | cp[3] * size 482 | ); 483 | 484 | if (grid !== null) { 485 | let ro = readout.current; 486 | ro.innerHTML = `${grid[0]}x${grid[1]}  ${cp[0]},${cp[1]} ${cp[2]}x${ 487 | cp[3] 488 | }`; 489 | } 490 | } 491 | 492 | useEffect(() => { 493 | if (grid !== null) { 494 | drawCursor(); 495 | } 496 | }, [mode, grid]); 497 | 498 | useEffect(() => { 499 | let dimensions = [window.innerWidth, window.innerHeight]; 500 | 501 | drawImage('/static/lion.jpg'); 502 | }, []); 503 | 504 | useEffect(() => { 505 | window.addEventListener('keydown', downHandler); 506 | window.addEventListener('keyup', upHandler); 507 | window.addEventListener('paste', onPaste, false); 508 | window.addEventListener('dragover', onDrag, false); 509 | window.addEventListener('drop', onDrop, false); 510 | 511 | return () => { 512 | window.removeEventListener('keydown', downHandler); 513 | window.removeEventListener('keyup', upHandler); 514 | window.removeEventListener('paste', onPaste, false); 515 | window.removeEventListener('dragover', onDrag, false); 516 | window.removeEventListener('drop', onDrop, false); 517 | }; 518 | }, [mode, grid]); 519 | 520 | return ( 521 |
522 | 523 | Freeconfig 524 | 525 | 557 |
558 | 559 | 568 |
569 |
573 |
589 |
590 | Freeconfig lets you push image pixels around in blocks. 591 |
592 |
Mode
593 |
594 | {KeyTip('a', color)}{' '} 595 | 596 | move 597 | 598 |   {KeyTip('s', color)}{' '} 599 | 600 | adjust size 601 | 602 |   {KeyTip('d', color)}{' '} 603 | 604 | grab 605 | 606 |
607 | {mode === 0 ? ( 608 |
609 | Move cursor 610 |
611 | ) : null} 612 | {mode === 1 ? ( 613 |
614 | Adjust cursor size 615 |
616 | ) : null} 617 | {mode === 2 ? ( 618 |
619 | Move selection 620 |
621 | ) : null} 622 | 623 |
624 | {[['h', '←'], ['j', '↓'], ['k', '↑'], ['l', '→']].map(a => ( 625 | 626 | {KeyTip(a[0], color)} {a[1]} {' '} 627 | 628 | ))} 629 |
630 | 631 |
Image
632 |
633 | To add an image you can paste, drop, or press {KeyTip('o', color)} to 634 | open a file dialog.{' '} 635 | 636 | Lion photo by Maurits Bausenhart↗ 637 | 638 |
639 | 640 |
641 | Special 642 |
643 | 644 |
645 | {KeyTip('r', color)} reset image  {KeyTip('e', color)} save as 646 | png  {KeyTip('b', color)}{' '} 647 | {color === 'dark' ? 'light bg' : 'dark bg'}  {KeyTip('?', color)}{' '} 648 | help 649 |
650 | 658 |
659 | {help ? null : ( 660 |
669 | {KeyTip('?', color)} 670 |
671 | )} 672 |
673 | ); 674 | }; 675 | 676 | export default Home; 677 | -------------------------------------------------------------------------------- /out/_next/static/webpack/static/development/pages/index.js.d271831b03611e4a71c2.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/webpack/static/development/pages/index.js.d271831b03611e4a71c2.hot-update.js","sources":["webpack:///./pages/index.js"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport Head from 'next/head';\n\nfunction getDist(p1, p2) {\n let a = p2[0] - p1[0];\n let b = p2[1] - p1[1];\n return Math.sqrt(a * a + b * b);\n}\n\nlet padding = 10;\nlet size = 10;\nlet colors = ['blue', 'hotpink', 'limegreen'];\n\nlet lh = 16 * 1.5;\n\n// mode 0 = move\n// mode 1 = adjust\n// mode 2 = grab\n\nlet Home = () => {\n let [grid, setGrid] = useState(null);\n let [mode, setMode] = useState(0);\n let [color, setColor] = useState('dark');\n let cpRef = useRef([0, 0, 10, 10]);\n let canvasRef = useRef();\n let cursorRef = useRef();\n let readout = useRef();\n let keymap = useRef({});\n let cache = useRef(null);\n let [help, setHelp] = useState(true);\n\n function KeyTip(letter, color) {\n return (\n {\n keymap.current[letter] = true;\n keyAction(letter, false);\n setTimeout(() => {\n keymap.current[letter] = false;\n }, 300);\n }}\n style={{\n outline: color === 'dark' ? 'solid 1px white' : 'solid 1px black',\n paddingLeft: '0.5ch',\n paddingRight: '0.5ch',\n textAlign: 'center',\n display: 'inline-block',\n userSelect: 'none',\n cursor: 'default',\n }}\n >\n {letter === ' ' ? 'spacebar' : letter}\n \n );\n }\n\n function reset() {\n if (cache !== null) {\n drawImage(cache.current);\n }\n }\n\n function keyAction(letter, repeat) {\n let c = canvasRef.current;\n let ctx = c.getContext('2d');\n let cp = cpRef.current;\n let dpr = window.devicePixelRatio || 1;\n let kc = keymap.current;\n\n function dp(val) {\n return val * dpr;\n }\n\n if (letter === 'a' && !repeat) {\n setMode(0);\n } else if (letter === 's' && !repeat) {\n setMode(1);\n } else if (letter === 'd' && !repeat) {\n setMode(2);\n } else if (letter === 'r' && !repeat) {\n reset();\n } else if (letter === 'o' && !repeat) {\n let input = document.createElement('input');\n input.setAttribute('type', 'file');\n input.dispatchEvent(\n new MouseEvent(`click`, {\n bubbles: true,\n cancelable: true,\n view: window,\n })\n );\n\n function handleChange(e) {\n for (const item of this.files) {\n if (item.type.indexOf('image') < 0) {\n continue;\n }\n let src = URL.createObjectURL(item);\n drawImage(src);\n }\n this.removeEventListener('change', handleChange);\n }\n input.addEventListener('change', handleChange);\n } else if (letter === 'b') {\n setColor(function(prevState) {\n return prevState === 'light' ? 'dark' : 'light';\n });\n } else if (letter === 'e' && !repeat) {\n let link = document.createElement('a');\n\n var revokeURL = function() {\n let me = this;\n requestAnimationFrame(function() {\n URL.revokeObjectURL(me.href);\n me.href = null;\n });\n this.removeEventListener('click', revokeURL);\n };\n\n let cropped = document.createElement('canvas');\n let crtx = cropped.getContext('2d');\n crtx.width = c.offsetWidth * dpr - padding * 2 * dpr;\n crtx.height = c.offsetHeight * dpr - padding * 2 * dpr;\n crtx.drawImage(c, padding * dpr, padding * dpr);\n crtx.canvas.toBlob(function(blob) {\n link.setAttribute('download', 'freeconfig.png');\n link.setAttribute('href', URL.createObjectURL(blob));\n link.addEventListener('click', revokeURL);\n link.dispatchEvent(\n new MouseEvent(`click`, {\n bubbles: true,\n cancelable: true,\n view: window,\n })\n );\n });\n } else if (letter === '?') {\n setHelp(prevState => {\n return !prevState;\n });\n }\n\n if (mode === 0) {\n if (kc['j']) {\n cp[1] += 1;\n if (cp[1] + cp[3] > grid[1]) cp[1] -= 1;\n }\n if (kc['k']) {\n cp[1] -= 1;\n if (cp[1] < 0) cp[1] = 0;\n }\n if (kc['l']) {\n cp[0] += 1;\n if (cp[0] + cp[2] > grid[0]) cp[0] -= 1;\n }\n if (kc['h']) {\n cp[0] -= 1;\n if (cp[0] < 0) cp[0] = 0;\n }\n } else if (mode === 1) {\n if (kc['k']) {\n cp[3] -= 1;\n if (cp[3] < 1) cp[3] = 1;\n }\n if (kc['j']) {\n cp[3] += 1;\n if (cp[1] + cp[3] > grid[1]) cp[3] -= 1;\n }\n if (kc['h']) {\n cp[2] -= 1;\n if (cp[2] < 1) cp[2] = 1;\n }\n if (kc['l']) {\n cp[2] += 1;\n if (cp[0] + cp[2] > grid[0]) cp[2] -= 1;\n }\n } else if (mode === 2) {\n if (kc['h']) {\n if (cp[0] > 0) {\n let s = size;\n let p = padding;\n\n let to_move = [(cp[0] - 1) * s + p, cp[1] * s + p, 1 * s, cp[3] * s];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n (cp[0] - 1) * s + p,\n cp[1] * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n (cp[0] + cp[2] - 1) * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[0] -= 1;\n }\n }\n if (kc['j']) {\n if (cp[1] + cp[3] < grid[1]) {\n let s = size;\n let p = padding;\n\n let to_move = [\n cp[0] * s + p,\n (cp[1] + cp[3]) * s + p,\n cp[2] * s,\n 1 * s,\n ];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n cp[0] * s + p,\n (cp[1] + 1) * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[1] += 1;\n }\n }\n if (kc['k']) {\n if (cp[1] > 0) {\n let s = size;\n let p = padding;\n\n let to_move = [cp[0] * s + p, (cp[1] - 1) * s + p, cp[2] * s, 1 * s];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n cp[0] * s + p,\n (cp[1] - 1) * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n (cp[1] + cp[3] - 1) * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[1] -= 1;\n }\n }\n if (kc['l']) {\n if (cp[0] + cp[2] < grid[0]) {\n let s = size;\n let p = padding;\n\n let to_move = [\n (cp[0] + cp[2]) * s + p,\n cp[1] * s + p,\n 1 * s,\n cp[3] * s,\n ];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n (cp[0] + 1) * s + p,\n cp[1] * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[0] += 1;\n }\n }\n }\n\n drawCursor();\n }\n\n function downHandler(e) {\n keymap.current[e.key] = true;\n keyAction(e.key, e.repeat);\n }\n\n function upHandler(e) {\n keymap.current[e.key] = false;\n }\n\n function drawImage(src) {\n cache.current = src;\n\n let dimensions = [window.innerWidth, window.innerHeight];\n\n let c = canvasRef.current;\n let ctx = c.getContext('2d');\n let w = dimensions[0] - padding * 2;\n let h = dimensions[1] - padding * 3 - lh;\n let a = w / h;\n\n let img = new Image();\n img.onload = () => {\n let pa = img.width / img.height;\n let pw = img.width;\n let ph = img.height;\n if (a >= pa) {\n if (ph > h) {\n ph = h;\n pw = h * pa;\n }\n } else if (a < pa) {\n if (pw > w) {\n pw = w;\n ph = w / pa;\n }\n }\n\n pw = Math.floor(pw / size) * size;\n ph = Math.floor(ph / size) * size;\n\n let dpr = window.devicePixelRatio || 1;\n\n c.width = pw * dpr + padding * 2;\n c.height = ph * dpr + padding * 2;\n c.style.width = pw + padding * 2 + 'px';\n c.style.height = ph + padding * 2 + 'px';\n c.style.marginLeft = 'auto';\n c.style.marginRight = 'auto';\n\n ctx.scale(dpr, dpr);\n\n let cur = cursorRef.current;\n cur.width = pw * dpr + padding * 2;\n cur.height = ph * dpr + padding * 2;\n cur.style.width = pw + padding * 2 + 'px';\n cur.style.height = ph + padding * 2 + 'px';\n\n let curtx = cur.getContext('2d');\n\n curtx.scale(dpr, dpr);\n\n ctx.drawImage(img, padding, padding, pw, ph);\n setGrid([pw / size, ph / size]);\n };\n img.src = src;\n }\n\n function onPaste(e) {\n e.preventDefault();\n e.stopPropagation();\n for (const item of e.clipboardData.items) {\n if (item.type.indexOf('image') < 0) {\n continue;\n }\n let file = item.getAsFile();\n let src = URL.createObjectURL(file);\n drawImage(src);\n }\n }\n\n function onDrop(e) {\n e.preventDefault();\n e.stopPropagation();\n let file = e.dataTransfer.files[0];\n let filename = file.path ? file.path : file.name ? file.name : '';\n let src = URL.createObjectURL(file);\n drawImage(src);\n }\n\n function onDrag(e) {\n e.stopPropagation();\n e.preventDefault();\n e.dataTransfer.dropEffect = 'copy';\n }\n\n function drawCursor() {\n let r = cursorRef.current;\n let p = padding;\n let rtx = cursorRef.current.getContext('2d');\n let cp = cpRef.current;\n rtx.clearRect(0, 0, r.offsetWidth, r.offsetHeight);\n rtx.lineWidth = 2;\n if (mode === 0) {\n rtx.strokeStyle = colors[0];\n } else if (mode === 1) {\n rtx.strokeStyle = colors[1];\n } else if (mode === 2) {\n rtx.strokeStyle = colors[2];\n }\n rtx.strokeRect(\n cp[0] * size + p,\n cp[1] * size + p,\n cp[2] * size,\n cp[3] * size\n );\n\n if (grid !== null) {\n let ro = readout.current;\n ro.innerHTML = `${grid[0]}x${grid[1]}  ${cp[0]},${cp[1]} ${cp[2]}x${\n cp[3]\n }`;\n }\n }\n\n useEffect(() => {\n if (grid !== null) {\n drawCursor();\n }\n }, [mode, grid]);\n\n useEffect(() => {\n let dimensions = [window.innerWidth, window.innerHeight];\n\n drawImage('/static/lion.jpg');\n }, []);\n\n useEffect(() => {\n window.addEventListener('keydown', downHandler);\n window.addEventListener('keyup', upHandler);\n window.addEventListener('paste', onPaste, false);\n window.addEventListener('dragover', onDrag, false);\n window.addEventListener('drop', onDrop, false);\n\n return () => {\n window.removeEventListener('keydown', downHandler);\n window.removeEventListener('keyup', upHandler);\n window.removeEventListener('paste', onPaste, false);\n window.removeEventListener('dragover', onDrag, false);\n window.removeEventListener('drop', onDrop, false);\n };\n }, [mode, grid]);\n\n return (\n
\n \n Freeconfig\n \n \n
\n \n \n
\n \n \n
\n Freeconfig lets you push image pixels around in blocks.\n
\n
Mode
\n
\n {KeyTip('a', color)}{' '}\n \n move\n \n   {KeyTip('s', color)}{' '}\n \n adjust size\n \n   {KeyTip('d', color)}{' '}\n \n grab\n \n
\n {mode === 0 ? (\n
\n Move cursor\n
\n ) : null}\n {mode === 1 ? (\n
\n Adjust cursor size\n
\n ) : null}\n {mode === 2 ? (\n
\n Move selection\n
\n ) : null}\n\n
\n {[['h', '←'], ['j', '↓'], ['k', '↑'], ['l', '→']].map(a => (\n \n {KeyTip(a[0], color)} {a[1]} {' '}\n \n ))}\n
\n\n
Image
\n
\n To add an image you can paste, drop, or press {KeyTip('o', color)} to\n open a file dialog.{' '}\n \n Lion photo by Maurits Bausenhart↗\n \n
\n\n
\n Special\n
\n\n
\n {KeyTip('r', color)} reset image  {KeyTip('e', color)} save as\n png  {KeyTip('b', color)}{' '}\n {color === 'dark' ? 'light bg' : 'dark bg'}  {KeyTip('?', color)}{' '}\n help\n
\n
\n \n View source↗\n \n
\n
\n {help ? null : (\n \n {KeyTip('?', color)}\n
\n )}\n \n );\n};\n\nexport default Home;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA;AAAA;AAAA;AACA;AAWA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA;AATA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAWA;AAAA;AAAA;AACA;AADA;AACA;AAAA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AAPA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAOA;AACA;AACA;AApBA;AACA;AACA;AAEA;AACA;AACA;AAHA;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAHA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAOA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AAMA;AACA;AAAA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AAMA;AACA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AAFA;AAAA;AAAA;AACA;AADA;AAGA;AAAA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAVA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAMA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAFA;AAAA;AAAA;AAAA;AAoCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAJA;AAMA;AAPA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAAA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAZA;AADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADA;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AACA;AACA;AACA;AACA;AAJA;AADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AACA;AACA;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /out/_next/static/webpack/static/development/pages/index.js.1020f9b57a26f5c49b3f.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/webpack/static/development/pages/index.js.1020f9b57a26f5c49b3f.hot-update.js","sources":["webpack:///./pages/index.js"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport Head from 'next/head';\n\nfunction getDist(p1, p2) {\n let a = p2[0] - p1[0];\n let b = p2[1] - p1[1];\n return Math.sqrt(a * a + b * b);\n}\n\nlet padding = 10;\nlet size = 10;\nlet colors = ['blue', 'hotpink', 'limegreen'];\n\nlet lh = 16 * 1.5;\n\n// mode 0 = move\n// mode 1 = adjust\n// mode 2 = grab\n\nlet Home = () => {\n let [grid, setGrid] = useState(null);\n let [mode, setMode] = useState(0);\n let [color, setColor] = useState('dark');\n let cpRef = useRef([0, 0, 10, 10]);\n let canvasRef = useRef();\n let cursorRef = useRef();\n let readout = useRef();\n let keymap = useRef({});\n let cache = useRef(null);\n let [help, setHelp] = useState(true);\n\n function KeyTip(letter, color) {\n return (\n {\n keymap.current[letter] = true;\n keyAction(letter, false);\n setTimeout(() => {\n keymap.current[letter] = false;\n }, 300);\n }}\n style={{\n outline: color === 'dark' ? 'solid 1px white' : 'solid 1px black',\n paddingLeft: '0.5ch',\n paddingRight: '0.5ch',\n textAlign: 'center',\n display: 'inline-block',\n userSelect: 'none',\n cursor: 'default',\n }}\n >\n {letter === ' ' ? 'spacebar' : letter}\n \n );\n }\n\n function reset() {\n if (cache !== null) {\n drawImage(cache.current);\n }\n }\n\n function keyAction(letter, repeat) {\n let c = canvasRef.current;\n let ctx = c.getContext('2d');\n let cp = cpRef.current;\n let dpr = window.devicePixelRatio || 1;\n let kc = keymap.current;\n\n function dp(val) {\n return val * dpr;\n }\n\n if (letter === 'a' && !repeat) {\n setMode(0);\n } else if (letter === 's' && !repeat) {\n setMode(1);\n } else if (letter === 'd' && !repeat) {\n setMode(2);\n } else if (letter === 'r' && !repeat) {\n reset();\n } else if (letter === 'o' && !repeat) {\n let input = document.createElement('input');\n input.setAttribute('type', 'file');\n input.dispatchEvent(\n new MouseEvent(`click`, {\n bubbles: true,\n cancelable: true,\n view: window,\n })\n );\n\n function handleChange(e) {\n for (const item of this.files) {\n if (item.type.indexOf('image') < 0) {\n continue;\n }\n let src = URL.createObjectURL(item);\n drawImage(src);\n }\n this.removeEventListener('change', handleChange);\n }\n input.addEventListener('change', handleChange);\n } else if (letter === 'b') {\n setColor(function(prevState) {\n return prevState === 'light' ? 'dark' : 'light';\n });\n } else if (letter === 'e' && !repeat) {\n let link = document.createElement('a');\n\n var revokeURL = function() {\n let me = this;\n requestAnimationFrame(function() {\n URL.revokeObjectURL(me.href);\n me.href = null;\n });\n this.removeEventListener('click', revokeURL);\n };\n\n let cropped = document.createElement('canvas');\n let crtx = cropped.getContext('2d');\n cropped.width = c.offsetWidth * dpr - padding * 2 * dpr;\n cropped.height = c.offsetHeight * dpr - padding * 2 * dpr;\n crtx.drawImage(c, -padding * dpr, -padding * dpr);\n crtx.canvas.toBlob(function(blob) {\n link.setAttribute('download', 'freeconfig.png');\n link.setAttribute('href', URL.createObjectURL(blob));\n link.addEventListener('click', revokeURL);\n link.dispatchEvent(\n new MouseEvent(`click`, {\n bubbles: true,\n cancelable: true,\n view: window,\n })\n );\n });\n } else if (letter === '?') {\n setHelp(prevState => {\n return !prevState;\n });\n }\n\n if (mode === 0) {\n if (kc['j']) {\n cp[1] += 1;\n if (cp[1] + cp[3] > grid[1]) cp[1] -= 1;\n }\n if (kc['k']) {\n cp[1] -= 1;\n if (cp[1] < 0) cp[1] = 0;\n }\n if (kc['l']) {\n cp[0] += 1;\n if (cp[0] + cp[2] > grid[0]) cp[0] -= 1;\n }\n if (kc['h']) {\n cp[0] -= 1;\n if (cp[0] < 0) cp[0] = 0;\n }\n } else if (mode === 1) {\n if (kc['k']) {\n cp[3] -= 1;\n if (cp[3] < 1) cp[3] = 1;\n }\n if (kc['j']) {\n cp[3] += 1;\n if (cp[1] + cp[3] > grid[1]) cp[3] -= 1;\n }\n if (kc['h']) {\n cp[2] -= 1;\n if (cp[2] < 1) cp[2] = 1;\n }\n if (kc['l']) {\n cp[2] += 1;\n if (cp[0] + cp[2] > grid[0]) cp[2] -= 1;\n }\n } else if (mode === 2) {\n if (kc['h']) {\n if (cp[0] > 0) {\n let s = size;\n let p = padding;\n\n let to_move = [(cp[0] - 1) * s + p, cp[1] * s + p, 1 * s, cp[3] * s];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n (cp[0] - 1) * s + p,\n cp[1] * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n (cp[0] + cp[2] - 1) * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[0] -= 1;\n }\n }\n if (kc['j']) {\n if (cp[1] + cp[3] < grid[1]) {\n let s = size;\n let p = padding;\n\n let to_move = [\n cp[0] * s + p,\n (cp[1] + cp[3]) * s + p,\n cp[2] * s,\n 1 * s,\n ];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n cp[0] * s + p,\n (cp[1] + 1) * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[1] += 1;\n }\n }\n if (kc['k']) {\n if (cp[1] > 0) {\n let s = size;\n let p = padding;\n\n let to_move = [cp[0] * s + p, (cp[1] - 1) * s + p, cp[2] * s, 1 * s];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n cp[0] * s + p,\n (cp[1] - 1) * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n (cp[1] + cp[3] - 1) * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[1] -= 1;\n }\n }\n if (kc['l']) {\n if (cp[0] + cp[2] < grid[0]) {\n let s = size;\n let p = padding;\n\n let to_move = [\n (cp[0] + cp[2]) * s + p,\n cp[1] * s + p,\n 1 * s,\n cp[3] * s,\n ];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n (cp[0] + 1) * s + p,\n cp[1] * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[0] += 1;\n }\n }\n }\n\n drawCursor();\n }\n\n function downHandler(e) {\n keymap.current[e.key] = true;\n keyAction(e.key, e.repeat);\n }\n\n function upHandler(e) {\n keymap.current[e.key] = false;\n }\n\n function drawImage(src) {\n cache.current = src;\n\n let dimensions = [window.innerWidth, window.innerHeight];\n\n let c = canvasRef.current;\n let ctx = c.getContext('2d');\n let w = dimensions[0] - padding * 2;\n let h = dimensions[1] - padding * 3 - lh;\n let a = w / h;\n\n let img = new Image();\n img.onload = () => {\n let pa = img.width / img.height;\n let pw = img.width;\n let ph = img.height;\n if (a >= pa) {\n if (ph > h) {\n ph = h;\n pw = h * pa;\n }\n } else if (a < pa) {\n if (pw > w) {\n pw = w;\n ph = w / pa;\n }\n }\n\n pw = Math.floor(pw / size) * size;\n ph = Math.floor(ph / size) * size;\n\n let dpr = window.devicePixelRatio || 1;\n\n c.width = pw * dpr + padding * 2;\n c.height = ph * dpr + padding * 2;\n c.style.width = pw + padding * 2 + 'px';\n c.style.height = ph + padding * 2 + 'px';\n c.style.marginLeft = 'auto';\n c.style.marginRight = 'auto';\n\n ctx.scale(dpr, dpr);\n\n let cur = cursorRef.current;\n cur.width = pw * dpr + padding * 2;\n cur.height = ph * dpr + padding * 2;\n cur.style.width = pw + padding * 2 + 'px';\n cur.style.height = ph + padding * 2 + 'px';\n\n let curtx = cur.getContext('2d');\n\n curtx.scale(dpr, dpr);\n\n ctx.drawImage(img, padding, padding, pw, ph);\n setGrid([pw / size, ph / size]);\n };\n img.src = src;\n }\n\n function onPaste(e) {\n e.preventDefault();\n e.stopPropagation();\n for (const item of e.clipboardData.items) {\n if (item.type.indexOf('image') < 0) {\n continue;\n }\n let file = item.getAsFile();\n let src = URL.createObjectURL(file);\n drawImage(src);\n }\n }\n\n function onDrop(e) {\n e.preventDefault();\n e.stopPropagation();\n let file = e.dataTransfer.files[0];\n let filename = file.path ? file.path : file.name ? file.name : '';\n let src = URL.createObjectURL(file);\n drawImage(src);\n }\n\n function onDrag(e) {\n e.stopPropagation();\n e.preventDefault();\n e.dataTransfer.dropEffect = 'copy';\n }\n\n function drawCursor() {\n let r = cursorRef.current;\n let p = padding;\n let rtx = cursorRef.current.getContext('2d');\n let cp = cpRef.current;\n rtx.clearRect(0, 0, r.offsetWidth, r.offsetHeight);\n rtx.lineWidth = 2;\n if (mode === 0) {\n rtx.strokeStyle = colors[0];\n } else if (mode === 1) {\n rtx.strokeStyle = colors[1];\n } else if (mode === 2) {\n rtx.strokeStyle = colors[2];\n }\n rtx.strokeRect(\n cp[0] * size + p,\n cp[1] * size + p,\n cp[2] * size,\n cp[3] * size\n );\n\n if (grid !== null) {\n let ro = readout.current;\n ro.innerHTML = `${grid[0]}x${grid[1]}  ${cp[0]},${cp[1]} ${cp[2]}x${\n cp[3]\n }`;\n }\n }\n\n useEffect(() => {\n if (grid !== null) {\n drawCursor();\n }\n }, [mode, grid]);\n\n useEffect(() => {\n let dimensions = [window.innerWidth, window.innerHeight];\n\n drawImage('/static/lion.jpg');\n }, []);\n\n useEffect(() => {\n window.addEventListener('keydown', downHandler);\n window.addEventListener('keyup', upHandler);\n window.addEventListener('paste', onPaste, false);\n window.addEventListener('dragover', onDrag, false);\n window.addEventListener('drop', onDrop, false);\n\n return () => {\n window.removeEventListener('keydown', downHandler);\n window.removeEventListener('keyup', upHandler);\n window.removeEventListener('paste', onPaste, false);\n window.removeEventListener('dragover', onDrag, false);\n window.removeEventListener('drop', onDrop, false);\n };\n }, [mode, grid]);\n\n return (\n
\n \n Freeconfig\n \n \n
\n \n \n
\n \n \n
\n Freeconfig lets you push image pixels around in blocks.\n
\n
Mode
\n
\n {KeyTip('a', color)}{' '}\n \n move\n \n   {KeyTip('s', color)}{' '}\n \n adjust size\n \n   {KeyTip('d', color)}{' '}\n \n grab\n \n
\n {mode === 0 ? (\n
\n Move cursor\n
\n ) : null}\n {mode === 1 ? (\n
\n Adjust cursor size\n
\n ) : null}\n {mode === 2 ? (\n
\n Move selection\n
\n ) : null}\n\n
\n {[['h', '←'], ['j', '↓'], ['k', '↑'], ['l', '→']].map(a => (\n \n {KeyTip(a[0], color)} {a[1]} {' '}\n \n ))}\n
\n\n
Image
\n
\n To add an image you can paste, drop, or press {KeyTip('o', color)} to\n open a file dialog.{' '}\n \n Lion photo by Maurits Bausenhart↗\n \n
\n\n
\n Special\n
\n\n
\n {KeyTip('r', color)} reset image  {KeyTip('e', color)} save as\n png  {KeyTip('b', color)}{' '}\n {color === 'dark' ? 'light bg' : 'dark bg'}  {KeyTip('?', color)}{' '}\n help\n
\n
\n \n View source↗\n \n
\n
\n {help ? null : (\n \n {KeyTip('?', color)}\n \n )}\n \n );\n};\n\nexport default Home;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA;AAAA;AAAA;AACA;AAWA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA;AATA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAWA;AAAA;AAAA;AACA;AADA;AACA;AAAA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AAPA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAOA;AACA;AACA;AApBA;AACA;AACA;AAEA;AACA;AACA;AAHA;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAHA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAOA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AAMA;AACA;AAAA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AAMA;AACA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AAFA;AAAA;AAAA;AACA;AADA;AAGA;AAAA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAVA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAMA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAFA;AAAA;AAAA;AAAA;AAoCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAJA;AAMA;AAPA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAAA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAZA;AADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADA;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AACA;AACA;AACA;AACA;AAJA;AADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AACA;AACA;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /out/_next/static/webpack/static/development/pages/index.js.55f61a4cd6dc3e65a08d.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/webpack/static/development/pages/index.js.55f61a4cd6dc3e65a08d.hot-update.js","sources":["webpack:///./pages/index.js"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport Head from 'next/head';\n\nfunction getDist(p1, p2) {\n let a = p2[0] - p1[0];\n let b = p2[1] - p1[1];\n return Math.sqrt(a * a + b * b);\n}\n\nlet padding = 10;\nlet size = 10;\nlet colors = ['blue', 'hotpink', 'limegreen'];\n\nlet lh = 16 * 1.5;\n\n// mode 0 = move\n// mode 1 = adjust\n// mode 2 = grab\n\nlet Home = () => {\n let [grid, setGrid] = useState(null);\n let [mode, setMode] = useState(0);\n let [color, setColor] = useState('dark');\n let cpRef = useRef([0, 0, 10, 10]);\n let canvasRef = useRef();\n let cursorRef = useRef();\n let readout = useRef();\n let keymap = useRef({});\n let cache = useRef(null);\n let [help, setHelp] = useState(true);\n\n function KeyTip(letter, color) {\n return (\n {\n keymap.current[letter] = true;\n keyAction(letter, false);\n setTimeout(() => {\n keymap.current[letter] = false;\n }, 300);\n }}\n style={{\n outline: color === 'dark' ? 'solid 1px white' : 'solid 1px black',\n paddingLeft: '0.5ch',\n paddingRight: '0.5ch',\n textAlign: 'center',\n display: 'inline-block',\n userSelect: 'none',\n cursor: 'default',\n }}\n >\n {letter === ' ' ? 'spacebar' : letter}\n \n );\n }\n\n function reset() {\n if (cache !== null) {\n drawImage(cache.current);\n }\n }\n\n function keyAction(letter, repeat) {\n let c = canvasRef.current;\n let ctx = c.getContext('2d');\n let cp = cpRef.current;\n let dpr = window.devicePixelRatio || 1;\n let kc = keymap.current;\n\n function dp(val) {\n return val * dpr;\n }\n\n if (letter === 'a' && !repeat) {\n setMode(0);\n } else if (letter === 's' && !repeat) {\n setMode(1);\n } else if (letter === 'd' && !repeat) {\n setMode(2);\n } else if (letter === 'r' && !repeat) {\n reset();\n } else if (letter === 'o' && !repeat) {\n let input = document.createElement('input');\n input.setAttribute('type', 'file');\n input.dispatchEvent(\n new MouseEvent(`click`, {\n bubbles: true,\n cancelable: true,\n view: window,\n })\n );\n\n function handleChange(e) {\n for (const item of this.files) {\n if (item.type.indexOf('image') < 0) {\n continue;\n }\n let src = URL.createObjectURL(item);\n drawImage(src);\n }\n this.removeEventListener('change', handleChange);\n }\n input.addEventListener('change', handleChange);\n } else if (letter === 'b') {\n setColor(function(prevState) {\n return prevState === 'light' ? 'dark' : 'light';\n });\n } else if (letter === 'e' && !repeat) {\n let link = document.createElement('a');\n\n var revokeURL = function() {\n let me = this;\n requestAnimationFrame(function() {\n URL.revokeObjectURL(me.href);\n me.href = null;\n });\n this.removeEventListener('click', revokeURL);\n };\n\n let cropped = document.createElement('canvas');\n let crtx = cropped.getContext('2d');\n cropped.width = c.offsetWidth * dpr - padding * 2 * dpr;\n cropped.height = c.offsetHeight * dpr - padding * 2 * dpr;\n crtx.drawImage(c, padding * dpr, padding * dpr);\n crtx.canvas.toBlob(function(blob) {\n link.setAttribute('download', 'freeconfig.png');\n link.setAttribute('href', URL.createObjectURL(blob));\n link.addEventListener('click', revokeURL);\n link.dispatchEvent(\n new MouseEvent(`click`, {\n bubbles: true,\n cancelable: true,\n view: window,\n })\n );\n });\n } else if (letter === '?') {\n setHelp(prevState => {\n return !prevState;\n });\n }\n\n if (mode === 0) {\n if (kc['j']) {\n cp[1] += 1;\n if (cp[1] + cp[3] > grid[1]) cp[1] -= 1;\n }\n if (kc['k']) {\n cp[1] -= 1;\n if (cp[1] < 0) cp[1] = 0;\n }\n if (kc['l']) {\n cp[0] += 1;\n if (cp[0] + cp[2] > grid[0]) cp[0] -= 1;\n }\n if (kc['h']) {\n cp[0] -= 1;\n if (cp[0] < 0) cp[0] = 0;\n }\n } else if (mode === 1) {\n if (kc['k']) {\n cp[3] -= 1;\n if (cp[3] < 1) cp[3] = 1;\n }\n if (kc['j']) {\n cp[3] += 1;\n if (cp[1] + cp[3] > grid[1]) cp[3] -= 1;\n }\n if (kc['h']) {\n cp[2] -= 1;\n if (cp[2] < 1) cp[2] = 1;\n }\n if (kc['l']) {\n cp[2] += 1;\n if (cp[0] + cp[2] > grid[0]) cp[2] -= 1;\n }\n } else if (mode === 2) {\n if (kc['h']) {\n if (cp[0] > 0) {\n let s = size;\n let p = padding;\n\n let to_move = [(cp[0] - 1) * s + p, cp[1] * s + p, 1 * s, cp[3] * s];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n (cp[0] - 1) * s + p,\n cp[1] * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n (cp[0] + cp[2] - 1) * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[0] -= 1;\n }\n }\n if (kc['j']) {\n if (cp[1] + cp[3] < grid[1]) {\n let s = size;\n let p = padding;\n\n let to_move = [\n cp[0] * s + p,\n (cp[1] + cp[3]) * s + p,\n cp[2] * s,\n 1 * s,\n ];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n cp[0] * s + p,\n (cp[1] + 1) * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[1] += 1;\n }\n }\n if (kc['k']) {\n if (cp[1] > 0) {\n let s = size;\n let p = padding;\n\n let to_move = [cp[0] * s + p, (cp[1] - 1) * s + p, cp[2] * s, 1 * s];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n cp[0] * s + p,\n (cp[1] - 1) * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n (cp[1] + cp[3] - 1) * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[1] -= 1;\n }\n }\n if (kc['l']) {\n if (cp[0] + cp[2] < grid[0]) {\n let s = size;\n let p = padding;\n\n let to_move = [\n (cp[0] + cp[2]) * s + p,\n cp[1] * s + p,\n 1 * s,\n cp[3] * s,\n ];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n (cp[0] + 1) * s + p,\n cp[1] * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[0] += 1;\n }\n }\n }\n\n drawCursor();\n }\n\n function downHandler(e) {\n keymap.current[e.key] = true;\n keyAction(e.key, e.repeat);\n }\n\n function upHandler(e) {\n keymap.current[e.key] = false;\n }\n\n function drawImage(src) {\n cache.current = src;\n\n let dimensions = [window.innerWidth, window.innerHeight];\n\n let c = canvasRef.current;\n let ctx = c.getContext('2d');\n let w = dimensions[0] - padding * 2;\n let h = dimensions[1] - padding * 3 - lh;\n let a = w / h;\n\n let img = new Image();\n img.onload = () => {\n let pa = img.width / img.height;\n let pw = img.width;\n let ph = img.height;\n if (a >= pa) {\n if (ph > h) {\n ph = h;\n pw = h * pa;\n }\n } else if (a < pa) {\n if (pw > w) {\n pw = w;\n ph = w / pa;\n }\n }\n\n pw = Math.floor(pw / size) * size;\n ph = Math.floor(ph / size) * size;\n\n let dpr = window.devicePixelRatio || 1;\n\n c.width = pw * dpr + padding * 2;\n c.height = ph * dpr + padding * 2;\n c.style.width = pw + padding * 2 + 'px';\n c.style.height = ph + padding * 2 + 'px';\n c.style.marginLeft = 'auto';\n c.style.marginRight = 'auto';\n\n ctx.scale(dpr, dpr);\n\n let cur = cursorRef.current;\n cur.width = pw * dpr + padding * 2;\n cur.height = ph * dpr + padding * 2;\n cur.style.width = pw + padding * 2 + 'px';\n cur.style.height = ph + padding * 2 + 'px';\n\n let curtx = cur.getContext('2d');\n\n curtx.scale(dpr, dpr);\n\n ctx.drawImage(img, padding, padding, pw, ph);\n setGrid([pw / size, ph / size]);\n };\n img.src = src;\n }\n\n function onPaste(e) {\n e.preventDefault();\n e.stopPropagation();\n for (const item of e.clipboardData.items) {\n if (item.type.indexOf('image') < 0) {\n continue;\n }\n let file = item.getAsFile();\n let src = URL.createObjectURL(file);\n drawImage(src);\n }\n }\n\n function onDrop(e) {\n e.preventDefault();\n e.stopPropagation();\n let file = e.dataTransfer.files[0];\n let filename = file.path ? file.path : file.name ? file.name : '';\n let src = URL.createObjectURL(file);\n drawImage(src);\n }\n\n function onDrag(e) {\n e.stopPropagation();\n e.preventDefault();\n e.dataTransfer.dropEffect = 'copy';\n }\n\n function drawCursor() {\n let r = cursorRef.current;\n let p = padding;\n let rtx = cursorRef.current.getContext('2d');\n let cp = cpRef.current;\n rtx.clearRect(0, 0, r.offsetWidth, r.offsetHeight);\n rtx.lineWidth = 2;\n if (mode === 0) {\n rtx.strokeStyle = colors[0];\n } else if (mode === 1) {\n rtx.strokeStyle = colors[1];\n } else if (mode === 2) {\n rtx.strokeStyle = colors[2];\n }\n rtx.strokeRect(\n cp[0] * size + p,\n cp[1] * size + p,\n cp[2] * size,\n cp[3] * size\n );\n\n if (grid !== null) {\n let ro = readout.current;\n ro.innerHTML = `${grid[0]}x${grid[1]}  ${cp[0]},${cp[1]} ${cp[2]}x${\n cp[3]\n }`;\n }\n }\n\n useEffect(() => {\n if (grid !== null) {\n drawCursor();\n }\n }, [mode, grid]);\n\n useEffect(() => {\n let dimensions = [window.innerWidth, window.innerHeight];\n\n drawImage('/static/lion.jpg');\n }, []);\n\n useEffect(() => {\n window.addEventListener('keydown', downHandler);\n window.addEventListener('keyup', upHandler);\n window.addEventListener('paste', onPaste, false);\n window.addEventListener('dragover', onDrag, false);\n window.addEventListener('drop', onDrop, false);\n\n return () => {\n window.removeEventListener('keydown', downHandler);\n window.removeEventListener('keyup', upHandler);\n window.removeEventListener('paste', onPaste, false);\n window.removeEventListener('dragover', onDrag, false);\n window.removeEventListener('drop', onDrop, false);\n };\n }, [mode, grid]);\n\n return (\n
\n \n Freeconfig\n \n \n
\n \n \n
\n \n \n
\n Freeconfig lets you push image pixels around in blocks.\n
\n
Mode
\n
\n {KeyTip('a', color)}{' '}\n \n move\n \n   {KeyTip('s', color)}{' '}\n \n adjust size\n \n   {KeyTip('d', color)}{' '}\n \n grab\n \n
\n {mode === 0 ? (\n
\n Move cursor\n
\n ) : null}\n {mode === 1 ? (\n
\n Adjust cursor size\n
\n ) : null}\n {mode === 2 ? (\n
\n Move selection\n
\n ) : null}\n\n
\n {[['h', '←'], ['j', '↓'], ['k', '↑'], ['l', '→']].map(a => (\n \n {KeyTip(a[0], color)} {a[1]} {' '}\n \n ))}\n
\n\n
Image
\n
\n To add an image you can paste, drop, or press {KeyTip('o', color)} to\n open a file dialog.{' '}\n \n Lion photo by Maurits Bausenhart↗\n \n
\n\n
\n Special\n
\n\n
\n {KeyTip('r', color)} reset image  {KeyTip('e', color)} save as\n png  {KeyTip('b', color)}{' '}\n {color === 'dark' ? 'light bg' : 'dark bg'}  {KeyTip('?', color)}{' '}\n help\n
\n
\n \n View source↗\n \n
\n
\n {help ? null : (\n \n {KeyTip('?', color)}\n \n )}\n \n );\n};\n\nexport default Home;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA;AAAA;AAAA;AACA;AAWA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA;AATA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAWA;AAAA;AAAA;AACA;AADA;AACA;AAAA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AAPA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAOA;AACA;AACA;AApBA;AACA;AACA;AAEA;AACA;AACA;AAHA;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAHA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAOA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AAMA;AACA;AAAA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AAMA;AACA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AAFA;AAAA;AAAA;AACA;AADA;AAGA;AAAA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAVA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAMA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAFA;AAAA;AAAA;AAAA;AAoCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAJA;AAMA;AAPA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAAA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAZA;AADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADA;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AACA;AACA;AACA;AACA;AAJA;AADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AACA;AACA;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /out/_next/static/webpack/static/development/pages/index.js.49f09857c78ffdb1020b.hot-update.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/webpack/static/development/pages/index.js.49f09857c78ffdb1020b.hot-update.js","sources":["webpack:///./pages/index.js"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport Head from 'next/head';\n\nfunction getDist(p1, p2) {\n let a = p2[0] - p1[0];\n let b = p2[1] - p1[1];\n return Math.sqrt(a * a + b * b);\n}\n\nlet padding = 10;\nlet size = 10;\nlet colors = ['blue', 'hotpink', 'limegreen'];\n\nlet lh = 16 * 1.5;\n\n// mode 0 = move\n// mode 1 = adjust\n// mode 2 = grab\n\nlet Home = () => {\n let [grid, setGrid] = useState(null);\n let [mode, setMode] = useState(0);\n let [color, setColor] = useState('dark');\n let cpRef = useRef([0, 0, 10, 10]);\n let canvasRef = useRef();\n let cursorRef = useRef();\n let readout = useRef();\n let keymap = useRef({});\n let cache = useRef(null);\n let [help, setHelp] = useState(true);\n\n function KeyTip(letter, color) {\n return (\n {\n keymap.current[letter] = true;\n keyAction(letter, false);\n setTimeout(() => {\n keymap.current[letter] = false;\n }, 300);\n }}\n style={{\n outline: color === 'dark' ? 'solid 1px white' : 'solid 1px black',\n paddingLeft: '0.5ch',\n paddingRight: '0.5ch',\n textAlign: 'center',\n display: 'inline-block',\n userSelect: 'none',\n cursor: 'default',\n }}\n >\n {letter === ' ' ? 'spacebar' : letter}\n \n );\n }\n\n function reset() {\n if (cache !== null) {\n drawImage(cache.current);\n }\n }\n\n function keyAction(letter, repeat) {\n let c = canvasRef.current;\n let ctx = c.getContext('2d');\n let cp = cpRef.current;\n let dpr = window.devicePixelRatio || 1;\n let kc = keymap.current;\n\n function dp(val) {\n return val * dpr;\n }\n\n if (letter === 'a' && !repeat) {\n setMode(0);\n } else if (letter === 's' && !repeat) {\n setMode(1);\n } else if (letter === 'd' && !repeat) {\n setMode(2);\n } else if (letter === 'r' && !repeat) {\n reset();\n } else if (letter === 'o' && !repeat) {\n let input = document.createElement('input');\n input.setAttribute('type', 'file');\n input.dispatchEvent(\n new MouseEvent(`click`, {\n bubbles: true,\n cancelable: true,\n view: window,\n })\n );\n\n function handleChange(e) {\n for (const item of this.files) {\n if (item.type.indexOf('image') < 0) {\n continue;\n }\n let src = URL.createObjectURL(item);\n drawImage(src);\n }\n this.removeEventListener('change', handleChange);\n }\n input.addEventListener('change', handleChange);\n } else if (letter === 'b') {\n setColor(function(prevState) {\n return prevState === 'light' ? 'dark' : 'light';\n });\n } else if (letter === 'e' && !repeat) {\n let link = document.createElement('a');\n\n var revokeURL = function() {\n let me = this;\n requestAnimationFrame(function() {\n URL.revokeObjectURL(me.href);\n me.href = null;\n });\n this.removeEventListener('click', revokeURL);\n };\n\n let cropped = document.createElement('canvas');\n let crtx = cropped.getContext('2d');\n crtx.width = c.offsetWidth * dpr - padding * 2 * dpr;\n crtx.height = c.offsetHeight * dpr - padding * 2 * dpr;\n console.log(c.offsetHeight);\n crtx.drawImage(c, padding * dpr, padding * dpr);\n crtx.canvas.toBlob(function(blob) {\n link.setAttribute('download', 'freeconfig.png');\n link.setAttribute('href', URL.createObjectURL(blob));\n link.addEventListener('click', revokeURL);\n link.dispatchEvent(\n new MouseEvent(`click`, {\n bubbles: true,\n cancelable: true,\n view: window,\n })\n );\n });\n } else if (letter === '?') {\n setHelp(prevState => {\n return !prevState;\n });\n }\n\n if (mode === 0) {\n if (kc['j']) {\n cp[1] += 1;\n if (cp[1] + cp[3] > grid[1]) cp[1] -= 1;\n }\n if (kc['k']) {\n cp[1] -= 1;\n if (cp[1] < 0) cp[1] = 0;\n }\n if (kc['l']) {\n cp[0] += 1;\n if (cp[0] + cp[2] > grid[0]) cp[0] -= 1;\n }\n if (kc['h']) {\n cp[0] -= 1;\n if (cp[0] < 0) cp[0] = 0;\n }\n } else if (mode === 1) {\n if (kc['k']) {\n cp[3] -= 1;\n if (cp[3] < 1) cp[3] = 1;\n }\n if (kc['j']) {\n cp[3] += 1;\n if (cp[1] + cp[3] > grid[1]) cp[3] -= 1;\n }\n if (kc['h']) {\n cp[2] -= 1;\n if (cp[2] < 1) cp[2] = 1;\n }\n if (kc['l']) {\n cp[2] += 1;\n if (cp[0] + cp[2] > grid[0]) cp[2] -= 1;\n }\n } else if (mode === 2) {\n if (kc['h']) {\n if (cp[0] > 0) {\n let s = size;\n let p = padding;\n\n let to_move = [(cp[0] - 1) * s + p, cp[1] * s + p, 1 * s, cp[3] * s];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n (cp[0] - 1) * s + p,\n cp[1] * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n (cp[0] + cp[2] - 1) * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[0] -= 1;\n }\n }\n if (kc['j']) {\n if (cp[1] + cp[3] < grid[1]) {\n let s = size;\n let p = padding;\n\n let to_move = [\n cp[0] * s + p,\n (cp[1] + cp[3]) * s + p,\n cp[2] * s,\n 1 * s,\n ];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n cp[0] * s + p,\n (cp[1] + 1) * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[1] += 1;\n }\n }\n if (kc['k']) {\n if (cp[1] > 0) {\n let s = size;\n let p = padding;\n\n let to_move = [cp[0] * s + p, (cp[1] - 1) * s + p, cp[2] * s, 1 * s];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n cp[0] * s + p,\n (cp[1] - 1) * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n (cp[1] + cp[3] - 1) * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[1] -= 1;\n }\n }\n if (kc['l']) {\n if (cp[0] + cp[2] < grid[0]) {\n let s = size;\n let p = padding;\n\n let to_move = [\n (cp[0] + cp[2]) * s + p,\n cp[1] * s + p,\n 1 * s,\n cp[3] * s,\n ];\n\n let t = document.createElement('canvas');\n t.width = dp(to_move[2]);\n t.height = dp(to_move[3]);\n let tx = t.getContext('2d');\n tx.scale(dpr, dpr);\n tx.drawImage(\n c,\n ...to_move.map(c => dp(c)),\n 0,\n 0,\n to_move[2],\n to_move[3]\n );\n\n ctx.drawImage(\n c,\n dp(cp[0] * s + p),\n dp(cp[1] * s + p),\n dp(cp[2] * s),\n dp(cp[3] * s),\n (cp[0] + 1) * s + p,\n cp[1] * s + p,\n cp[2] * s,\n cp[3] * s\n );\n ctx.drawImage(\n t,\n cp[0] * s + p,\n cp[1] * s + p,\n to_move[2],\n to_move[3]\n );\n\n cp[0] += 1;\n }\n }\n }\n\n drawCursor();\n }\n\n function downHandler(e) {\n keymap.current[e.key] = true;\n keyAction(e.key, e.repeat);\n }\n\n function upHandler(e) {\n keymap.current[e.key] = false;\n }\n\n function drawImage(src) {\n cache.current = src;\n\n let dimensions = [window.innerWidth, window.innerHeight];\n\n let c = canvasRef.current;\n let ctx = c.getContext('2d');\n let w = dimensions[0] - padding * 2;\n let h = dimensions[1] - padding * 3 - lh;\n let a = w / h;\n\n let img = new Image();\n img.onload = () => {\n let pa = img.width / img.height;\n let pw = img.width;\n let ph = img.height;\n if (a >= pa) {\n if (ph > h) {\n ph = h;\n pw = h * pa;\n }\n } else if (a < pa) {\n if (pw > w) {\n pw = w;\n ph = w / pa;\n }\n }\n\n pw = Math.floor(pw / size) * size;\n ph = Math.floor(ph / size) * size;\n\n let dpr = window.devicePixelRatio || 1;\n\n c.width = pw * dpr + padding * 2;\n c.height = ph * dpr + padding * 2;\n c.style.width = pw + padding * 2 + 'px';\n c.style.height = ph + padding * 2 + 'px';\n c.style.marginLeft = 'auto';\n c.style.marginRight = 'auto';\n\n ctx.scale(dpr, dpr);\n\n let cur = cursorRef.current;\n cur.width = pw * dpr + padding * 2;\n cur.height = ph * dpr + padding * 2;\n cur.style.width = pw + padding * 2 + 'px';\n cur.style.height = ph + padding * 2 + 'px';\n\n let curtx = cur.getContext('2d');\n\n curtx.scale(dpr, dpr);\n\n ctx.drawImage(img, padding, padding, pw, ph);\n setGrid([pw / size, ph / size]);\n };\n img.src = src;\n }\n\n function onPaste(e) {\n e.preventDefault();\n e.stopPropagation();\n for (const item of e.clipboardData.items) {\n if (item.type.indexOf('image') < 0) {\n continue;\n }\n let file = item.getAsFile();\n let src = URL.createObjectURL(file);\n drawImage(src);\n }\n }\n\n function onDrop(e) {\n e.preventDefault();\n e.stopPropagation();\n let file = e.dataTransfer.files[0];\n let filename = file.path ? file.path : file.name ? file.name : '';\n let src = URL.createObjectURL(file);\n drawImage(src);\n }\n\n function onDrag(e) {\n e.stopPropagation();\n e.preventDefault();\n e.dataTransfer.dropEffect = 'copy';\n }\n\n function drawCursor() {\n let r = cursorRef.current;\n let p = padding;\n let rtx = cursorRef.current.getContext('2d');\n let cp = cpRef.current;\n rtx.clearRect(0, 0, r.offsetWidth, r.offsetHeight);\n rtx.lineWidth = 2;\n if (mode === 0) {\n rtx.strokeStyle = colors[0];\n } else if (mode === 1) {\n rtx.strokeStyle = colors[1];\n } else if (mode === 2) {\n rtx.strokeStyle = colors[2];\n }\n rtx.strokeRect(\n cp[0] * size + p,\n cp[1] * size + p,\n cp[2] * size,\n cp[3] * size\n );\n\n if (grid !== null) {\n let ro = readout.current;\n ro.innerHTML = `${grid[0]}x${grid[1]}  ${cp[0]},${cp[1]} ${cp[2]}x${\n cp[3]\n }`;\n }\n }\n\n useEffect(() => {\n if (grid !== null) {\n drawCursor();\n }\n }, [mode, grid]);\n\n useEffect(() => {\n let dimensions = [window.innerWidth, window.innerHeight];\n\n drawImage('/static/lion.jpg');\n }, []);\n\n useEffect(() => {\n window.addEventListener('keydown', downHandler);\n window.addEventListener('keyup', upHandler);\n window.addEventListener('paste', onPaste, false);\n window.addEventListener('dragover', onDrag, false);\n window.addEventListener('drop', onDrop, false);\n\n return () => {\n window.removeEventListener('keydown', downHandler);\n window.removeEventListener('keyup', upHandler);\n window.removeEventListener('paste', onPaste, false);\n window.removeEventListener('dragover', onDrag, false);\n window.removeEventListener('drop', onDrop, false);\n };\n }, [mode, grid]);\n\n return (\n
\n \n Freeconfig\n \n \n
\n \n \n
\n \n \n
\n Freeconfig lets you push image pixels around in blocks.\n
\n
Mode
\n
\n {KeyTip('a', color)}{' '}\n \n move\n \n   {KeyTip('s', color)}{' '}\n \n adjust size\n \n   {KeyTip('d', color)}{' '}\n \n grab\n \n
\n {mode === 0 ? (\n
\n Move cursor\n
\n ) : null}\n {mode === 1 ? (\n
\n Adjust cursor size\n
\n ) : null}\n {mode === 2 ? (\n
\n Move selection\n
\n ) : null}\n\n
\n {[['h', '←'], ['j', '↓'], ['k', '↑'], ['l', '→']].map(a => (\n \n {KeyTip(a[0], color)} {a[1]} {' '}\n \n ))}\n
\n\n
Image
\n
\n To add an image you can paste, drop, or press {KeyTip('o', color)} to\n open a file dialog.{' '}\n \n Lion photo by Maurits Bausenhart↗\n \n
\n\n
\n Special\n
\n\n
\n {KeyTip('r', color)} reset image  {KeyTip('e', color)} save as\n png  {KeyTip('b', color)}{' '}\n {color === 'dark' ? 'light bg' : 'dark bg'}  {KeyTip('?', color)}{' '}\n help\n
\n
\n \n View source↗\n \n
\n
\n {help ? null : (\n \n {KeyTip('?', color)}\n \n )}\n \n );\n};\n\nexport default Home;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AADA;AAAA;AAAA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA;AAAA;AAAA;AACA;AAWA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA;AATA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAWA;AAAA;AAAA;AACA;AADA;AACA;AAAA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AAPA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAOA;AACA;AACA;AApBA;AACA;AACA;AAEA;AACA;AACA;AAHA;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAHA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAOA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AAMA;AACA;AAAA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AACA;AAMA;AACA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AACA;AAAA;AAEA;AAAA;AACA;AAMA;AAWA;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AAFA;AAAA;AAAA;AACA;AADA;AAGA;AAAA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAVA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAMA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAFA;AAAA;AAAA;AAAA;AAoCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAJA;AAMA;AAPA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAAA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAZA;AADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADA;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AACA;AACA;AACA;AACA;AAJA;AADA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AACA;AACA;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /out/_next/static/C3cT0hE_kZnnIAW2zU3Mv/pages/index.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{"3niX":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.flush=function(){var e=l.cssRules();return l.flush(),e},t.default=void 0;var r,i=n("q1tI");function o(e){return(o="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t){for(var n=0;n1)for(var n=1;n>>0}},MX0m:function(e,t,n){e.exports=n("3niX")},RNiq:function(e,t,n){"use strict";n.r(t);var r=n("p0XB"),i=n.n(r);var o=n("d04V"),a=n.n(o),s=n("yLu3"),c=n.n(s);function u(e){return function(e){if(i()(e)){for(var t=0,n=new Array(e.length);tt[1]&&(s[1]-=1)),m.k&&(s[1]-=1,s[1]<0&&(s[1]=0)),m.l&&(s[0]+=1,s[0]+s[2]>t[0]&&(s[0]-=1)),m.h&&(s[0]-=1,s[0]<0&&(s[0]=0));else if(1===i)m.k&&(s[3]-=1,s[3]<1&&(s[3]=1)),m.j&&(s[3]+=1,s[1]+s[3]>t[1]&&(s[3]-=1)),m.h&&(s[2]-=1,s[2]<1&&(s[2]=1)),m.l&&(s[2]+=1,s[0]+s[2]>t[0]&&(s[2]-=1));else if(2===i){if(m.h&&s[0]>0){var x=k,j=w,E=[(s[0]-1)*x+j,s[1]*x+j,1*x,s[3]*x],C=document.createElement("canvas");C.width=p(E[2]),C.height=p(E[3]);var T=C.getContext("2d");T.scale(h,h),T.drawImage.apply(T,[r].concat(u(E.map(function(e){return p(e)})),[0,0,E[2],E[3]])),a.drawImage(r,p(s[0]*x+j),p(s[1]*x+j),p(s[2]*x),p(s[3]*x),(s[0]-1)*x+j,s[1]*x+j,s[2]*x,s[3]*x),a.drawImage(C,(s[0]+s[2]-1)*x+j,s[1]*x+j,E[2],E[3]),s[0]-=1}if(m.j&&s[1]+s[3]0){var A=k,M=w,W=[s[0]*A+M,(s[1]-1)*A+M,s[2]*A,1*A],U=document.createElement("canvas");U.width=p(W[2]),U.height=p(W[3]);var X=U.getContext("2d");X.scale(h,h),X.drawImage.apply(X,[r].concat(u(W.map(function(e){return p(e)})),[0,0,W[2],W[3]])),a.drawImage(r,p(s[0]*A+M),p(s[1]*A+M),p(s[2]*A),p(s[3]*A),s[0]*A+M,(s[1]-1)*A+M,s[2]*A,s[3]*A),a.drawImage(U,s[0]*A+M,(s[1]+s[3]-1)*A+M,W[2],W[3]),s[1]-=1}if(m.l&&s[0]+s[2]=e?u>a&&(u=a,t=a*e):so&&(t=o,u=o/e),t=Math.floor(t/k)*k,u=Math.floor(u/k)*k;var l=window.devicePixelRatio||1;r.width=t*l+2*w,r.height=u*l+2*w,r.style.width=t+2*w+"px",r.style.height=u+2*w+"px",r.style.marginLeft="auto",r.style.marginRight="auto",i.scale(l,l);var d=p.current;d.width=t*l+2*w,d.height=u*l+2*w,d.style.width=t+2*w+"px",d.style.height=u+2*w+"px",d.getContext("2d").scale(l,l),i.drawImage(c,w,w,t,u),n([t/k,u/k])},c.src=e}function F(e){e.preventDefault(),e.stopPropagation();var t=!0,n=!1,r=void 0;try{for(var i,o=d()(e.clipboardData.items);!(t=(i=o.next()).done);t=!0){var a=i.value;if(!(a.type.indexOf("image")<0)){var s=a.getAsFile();N(URL.createObjectURL(s))}}}catch(c){n=!0,r=c}finally{try{t||null==o.return||o.return()}finally{if(n)throw r}}}function B(e){e.preventDefault(),e.stopPropagation();var t=e.dataTransfer.files[0];t.path?t.path:t.name&&t.name,N(URL.createObjectURL(t))}function L(e){e.stopPropagation(),e.preventDefault(),e.dataTransfer.dropEffect="copy"}function z(){var e=p.current,n=w,r=p.current.getContext("2d"),o=l.current;r.clearRect(0,0,e.offsetWidth,e.offsetHeight),r.lineWidth=2,0===i?r.strokeStyle=_[0]:1===i?r.strokeStyle=_[1]:2===i&&(r.strokeStyle=_[2]),r.strokeRect(o[0]*k+n,o[1]*k+n,o[2]*k,o[3]*k),null!==t&&(v.current.innerHTML="".concat(t[0],"x").concat(t[1],"  ").concat(o[0],",").concat(o[1]," ").concat(o[2],"x").concat(o[3]))}return Object(m.useEffect)(function(){null!==t&&z()},[i,t]),Object(m.useEffect)(function(){window.innerWidth,window.innerHeight,N("/static/lion.jpg")},[]),Object(m.useEffect)(function(){return window.addEventListener("keydown",T),window.addEventListener("keyup",I),window.addEventListener("paste",F,!1),window.addEventListener("dragover",L,!1),window.addEventListener("drop",B,!1),function(){window.removeEventListener("keydown",T),window.removeEventListener("keyup",I),window.removeEventListener("paste",F,!1),window.removeEventListener("dragover",L,!1),window.removeEventListener("drop",B,!1)}},[i,t]),g("div",{className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},g(y.a,null,g("title",{className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Freeconfig")),g(h.a,{id:"2328641575",dynamic:["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]},["@font-face{font-family:'custom';src:url('/static/IBMPlexMono-Regular.woff2') format('woff2'), url('/static/IBMPlexMono-Regular.woff') format('woff');}","*{box-sizing:border-box;}","html{font-family:custom,monospace;font-size:14px;line-height:1.5;background:".concat("dark"===s?"#222":"#eee",";color:").concat("dark"===s?"#fff":"#000",";}"),"body{margin:0;overflow:auto;}","textarea{font-family:inherit;font-size:inherit;line-height:inherit;}","p{margin:0;}","a{color:inherit;}"]),g("div",{className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},g("canvas",{style:{display:"block"},ref:f,className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])}),g("canvas",{style:{position:"absolute",left:"50%",top:0,transform:"translate(-50%,0)"},ref:p,className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])})),g("div",{style:{position:"absolute",bottom:w,paddingLeft:"2ch"},ref:v,className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])}),g("div",{style:{position:"fixed",outline:"dark"===s?"solid 1px white":"solid 1px black",display:j?"block":"none",maxWidth:"calc(100% - 3rem)",background:"dark"===s?"rgba(0,0,0,0.8)":"rgba(255,255,255,0.8)",paddingLeft:"2ch",paddingRight:"2ch",paddingBottom:"0.75rem",paddingTop:"0.75rem",right:"1.5rem",bottom:"1.5rem"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},g("div",{style:{marginBottom:"0.75rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Freeconfig lets you push image pixels around in blocks."),g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Mode"),g("div",{style:{marginBottom:"0.75rem"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},E("a",s)," ",g("span",{style:{background:0===i?_[0]:"transparent"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"move"),"\xa0 ",E("s",s)," ",g("span",{style:{background:1===i?_[1]:"transparent"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"adjust size"),"\xa0 ",E("d",s)," ",g("span",{style:{background:2===i?_[2]:"transparent"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"grab")),0===i?g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Move cursor"):null,1===i?g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Adjust cursor size"):null,2===i?g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Move selection"):null,g("div",{style:{marginBottom:"0.75rem"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},[["h","\u2190"],["j","\u2193"],["k","\u2191"],["l","\u2192"]].map(function(e){return g("span",{className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},E(e[0],s)," ",e[1],"\xa0"," ")})),g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Image"),g("div",{style:{marginBottom:"0.75rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"To add an image you can paste, drop, or press ",E("o",s)," to open a file dialog."," ",g("a",{href:"https://unsplash.com/photos/QMRN_GX7p4I",target:"_blank",className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Lion photo by Maurits Bausenhart\u2197")),g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Special"),g("div",{style:{marginBottom:"0.75rem"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},E("r",s)," reset image\xa0 ",E("e",s)," save as png\xa0 ",E("b",s)," ","dark"===s?"light bg":"dark bg","\xa0 ",E("?",s)," ","help"),g("div",{className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},g("a",{href:"https://github.com/constraint-systems/freeconfig",target:"_blank",className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"View source\u2197"))),j?null:g("div",{style:{position:"fixed",right:"1.5rem",bottom:"1.5rem",background:"dark"===s?"rgba(0,0,0,0.8)":"rgba(255,255,255,0.8)"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},E("?",s)))}},SevZ:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=o(n("9kyW")),i=o(n("bVZc"));function o(e){return e&&e.__esModule?e:{default:e}}function a(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.styleSheet,r=void 0===n?null:n,o=t.optimizeForSpeed,a=void 0!==o&&o,s=t.isBrowser,c=void 0===s?"undefined"!==typeof window:s;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this._sheet=r||new i.default({name:"styled-jsx",optimizeForSpeed:a}),this._sheet.inject(),r&&"boolean"===typeof a&&(this._sheet.setOptimizeForSpeed(a),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._isBrowser=c,this._fromServer=void 0,this._indices={},this._instancesCounts={},this.computeId=this.createComputeId(),this.computeSelector=this.createComputeSelector()}var t,n,o;return t=e,(n=[{key:"add",value:function(e){var t=this;void 0===this._optimizeForSpeed&&(this._optimizeForSpeed=Array.isArray(e.children),this._sheet.setOptimizeForSpeed(this._optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._isBrowser&&!this._fromServer&&(this._fromServer=this.selectFromServer(),this._instancesCounts=Object.keys(this._fromServer).reduce(function(e,t){return e[t]=0,e},{}));var n=this.getIdAndRules(e),r=n.styleId,i=n.rules;if(r in this._instancesCounts)this._instancesCounts[r]+=1;else{var o=i.map(function(e){return t._sheet.insertRule(e)}).filter(function(e){return-1!==e});this._indices[r]=o,this._instancesCounts[r]=1}}},{key:"remove",value:function(e){var t=this,n=this.getIdAndRules(e).styleId;if(function(e,t){if(!e)throw new Error("StyleSheetRegistry: ".concat(t,"."))}(n in this._instancesCounts,"styleId: `".concat(n,"` not found")),this._instancesCounts[n]-=1,this._instancesCounts[n]<1){var r=this._fromServer&&this._fromServer[n];r?(r.parentNode.removeChild(r),delete this._fromServer[n]):(this._indices[n].forEach(function(e){return t._sheet.deleteRule(e)}),delete this._indices[n]),delete this._instancesCounts[n]}}},{key:"update",value:function(e,t){this.add(t),this.remove(e)}},{key:"flush",value:function(){this._sheet.flush(),this._sheet.inject(),this._fromServer=void 0,this._indices={},this._instancesCounts={},this.computeId=this.createComputeId(),this.computeSelector=this.createComputeSelector()}},{key:"cssRules",value:function(){var e=this,t=this._fromServer?Object.keys(this._fromServer).map(function(t){return[t,e._fromServer[t]]}):[],n=this._sheet.cssRules();return t.concat(Object.keys(this._indices).map(function(t){return[t,e._indices[t].map(function(e){return n[e].cssText}).join(e._optimizeForSpeed?"":"\n")]}).filter(function(e){return Boolean(e[1])}))}},{key:"createComputeId",value:function(){var e={};return function(t,n){if(!n)return"jsx-".concat(t);var i=String(n),o=t+i;return e[o]||(e[o]="jsx-".concat((0,r.default)("".concat(t,"-").concat(i)))),e[o]}}},{key:"createComputeSelector",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:/__jsx-style-dynamic-selector/g,t={};return function(n,r){this._isBrowser||(r=r.replace(/\/style/gi,"\\/style"));var i=n+r;return t[i]||(t[i]=r.replace(e,n)),t[i]}}},{key:"getIdAndRules",value:function(e){var t=this,n=e.children,r=e.dynamic,i=e.id;if(r){var o=this.computeId(i,r);return{styleId:o,rules:Array.isArray(n)?n.map(function(e){return t.computeSelector(o,e)}):[this.computeSelector(o,n)]}}return{styleId:this.computeId(i),rules:Array.isArray(n)?n:[n]}}},{key:"selectFromServer",value:function(){return Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]')).reduce(function(e,t){return e[t.id.slice(2)]=t,e},{})}}])&&a(t.prototype,n),o&&a(t,o),e}();t.default=s},bVZc:function(e,t,n){"use strict";(function(e){function n(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.name,o=void 0===n?"stylesheet":n,s=t.optimizeForSpeed,c=void 0===s?r:s,u=t.isBrowser,l=void 0===u?"undefined"!==typeof window:u;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),a(i(o),"`name` must be a string"),this._name=o,this._deletedRulePlaceholder="#".concat(o,"-deleted-rule____{}"),a("boolean"===typeof c,"`optimizeForSpeed` must be a boolean"),this._optimizeForSpeed=c,this._isBrowser=l,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0;var d=this._isBrowser&&document.querySelector('meta[property="csp-nonce"]');this._nonce=d?d.getAttribute("content"):null}var t,o,s;return t=e,(o=[{key:"setOptimizeForSpeed",value:function(e){a("boolean"===typeof e,"`setOptimizeForSpeed` accepts a boolean"),a(0===this._rulesCount,"optimizeForSpeed cannot be when rules have already been inserted"),this.flush(),this._optimizeForSpeed=e,this.inject()}},{key:"isOptimizeForSpeed",value:function(){return this._optimizeForSpeed}},{key:"inject",value:function(){var e=this;if(a(!this._injected,"sheet already injected"),this._injected=!0,this._isBrowser&&this._optimizeForSpeed)return this._tags[0]=this.makeStyleTag(this._name),this._optimizeForSpeed="insertRule"in this.getSheet(),void(this._optimizeForSpeed||(r||console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."),this.flush(),this._injected=!0));this._serverSheet={cssRules:[],insertRule:function(t,n){return"number"===typeof n?e._serverSheet.cssRules[n]={cssText:t}:e._serverSheet.cssRules.push({cssText:t}),n},deleteRule:function(t){e._serverSheet.cssRules[t]=null}}}},{key:"getSheetForTag",value:function(e){if(e.sheet)return e.sheet;for(var t=0;t1)for(var n=1;n>>0}},MX0m:function(e,t,n){e.exports=n("3niX")},RNiq:function(e,t,n){"use strict";n.r(t);var r=n("p0XB"),i=n.n(r);var o=n("d04V"),a=n.n(o),s=n("yLu3"),c=n.n(s);function u(e){return function(e){if(i()(e)){for(var t=0,n=new Array(e.length);tt[1]&&(s[1]-=1)),m.k&&(s[1]-=1,s[1]<0&&(s[1]=0)),m.l&&(s[0]+=1,s[0]+s[2]>t[0]&&(s[0]-=1)),m.h&&(s[0]-=1,s[0]<0&&(s[0]=0));else if(1===i)m.k&&(s[3]-=1,s[3]<1&&(s[3]=1)),m.j&&(s[3]+=1,s[1]+s[3]>t[1]&&(s[3]-=1)),m.h&&(s[2]-=1,s[2]<1&&(s[2]=1)),m.l&&(s[2]+=1,s[0]+s[2]>t[0]&&(s[2]-=1));else if(2===i){if(m.h&&s[0]>0){var x=k,j=w,E=[(s[0]-1)*x+j,s[1]*x+j,1*x,s[3]*x],C=document.createElement("canvas");C.width=p(E[2]),C.height=p(E[3]);var T=C.getContext("2d");T.scale(h,h),T.drawImage.apply(T,[r].concat(u(E.map(function(e){return p(e)})),[0,0,E[2],E[3]])),a.drawImage(r,p(s[0]*x+j),p(s[1]*x+j),p(s[2]*x),p(s[3]*x),(s[0]-1)*x+j,s[1]*x+j,s[2]*x,s[3]*x),a.drawImage(C,(s[0]+s[2]-1)*x+j,s[1]*x+j,E[2],E[3]),s[0]-=1}if(m.j&&s[1]+s[3]0){var A=k,M=w,W=[s[0]*A+M,(s[1]-1)*A+M,s[2]*A,1*A],U=document.createElement("canvas");U.width=p(W[2]),U.height=p(W[3]);var X=U.getContext("2d");X.scale(h,h),X.drawImage.apply(X,[r].concat(u(W.map(function(e){return p(e)})),[0,0,W[2],W[3]])),a.drawImage(r,p(s[0]*A+M),p(s[1]*A+M),p(s[2]*A),p(s[3]*A),s[0]*A+M,(s[1]-1)*A+M,s[2]*A,s[3]*A),a.drawImage(U,s[0]*A+M,(s[1]+s[3]-1)*A+M,W[2],W[3]),s[1]-=1}if(m.l&&s[0]+s[2]=e?u>a&&(u=a,t=a*e):so&&(t=o,u=o/e),t=Math.floor(t/k)*k,u=Math.floor(u/k)*k;var l=window.devicePixelRatio||1;r.width=t*l+2*w,r.height=u*l+2*w,r.style.width=t+2*w+"px",r.style.height=u+2*w+"px",r.style.marginLeft="auto",r.style.marginRight="auto",i.scale(l,l);var d=p.current;d.width=t*l+2*w,d.height=u*l+2*w,d.style.width=t+2*w+"px",d.style.height=u+2*w+"px",d.getContext("2d").scale(l,l),i.drawImage(c,w,w,t,u),n([t/k,u/k])},c.src=e}function F(e){e.preventDefault(),e.stopPropagation();var t=!0,n=!1,r=void 0;try{for(var i,o=d()(e.clipboardData.items);!(t=(i=o.next()).done);t=!0){var a=i.value;if(!(a.type.indexOf("image")<0)){var s=a.getAsFile();N(URL.createObjectURL(s))}}}catch(c){n=!0,r=c}finally{try{t||null==o.return||o.return()}finally{if(n)throw r}}}function B(e){e.preventDefault(),e.stopPropagation();var t=e.dataTransfer.files[0];t.path?t.path:t.name&&t.name,N(URL.createObjectURL(t))}function L(e){e.stopPropagation(),e.preventDefault(),e.dataTransfer.dropEffect="copy"}function z(){var e=p.current,n=w,r=p.current.getContext("2d"),o=l.current;r.clearRect(0,0,e.offsetWidth,e.offsetHeight),r.lineWidth=2,0===i?r.strokeStyle=_[0]:1===i?r.strokeStyle=_[1]:2===i&&(r.strokeStyle=_[2]),r.strokeRect(o[0]*k+n,o[1]*k+n,o[2]*k,o[3]*k),null!==t&&(v.current.innerHTML="".concat(t[0],"x").concat(t[1],"  ").concat(o[0],",").concat(o[1]," ").concat(o[2],"x").concat(o[3]))}return Object(m.useEffect)(function(){null!==t&&z()},[i,t]),Object(m.useEffect)(function(){window.innerWidth,window.innerHeight,N("/static/lion.jpg")},[]),Object(m.useEffect)(function(){return window.addEventListener("keydown",T),window.addEventListener("keyup",I),window.addEventListener("paste",F,!1),window.addEventListener("dragover",L,!1),window.addEventListener("drop",B,!1),function(){window.removeEventListener("keydown",T),window.removeEventListener("keyup",I),window.removeEventListener("paste",F,!1),window.removeEventListener("dragover",L,!1),window.removeEventListener("drop",B,!1)}},[i,t]),g("div",{className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},g(y.a,null,g("title",{className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Freeconfig")),g(h.a,{id:"2328641575",dynamic:["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]},["@font-face{font-family:'custom';src:url('/static/IBMPlexMono-Regular.woff2') format('woff2'), url('/static/IBMPlexMono-Regular.woff') format('woff');}","*{box-sizing:border-box;}","html{font-family:custom,monospace;font-size:14px;line-height:1.5;background:".concat("dark"===s?"#222":"#eee",";color:").concat("dark"===s?"#fff":"#000",";}"),"body{margin:0;overflow:auto;}","textarea{font-family:inherit;font-size:inherit;line-height:inherit;}","p{margin:0;}","a{color:inherit;}"]),g("div",{className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},g("canvas",{style:{display:"block"},ref:f,className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])}),g("canvas",{style:{position:"absolute",left:"50%",top:0,transform:"translate(-50%,0)"},ref:p,className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])})),g("div",{style:{position:"absolute",bottom:w,paddingLeft:"2ch"},ref:v,className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])}),g("div",{style:{position:"fixed",outline:"dark"===s?"solid 1px white":"solid 1px black",display:j?"block":"none",maxWidth:"calc(100% - 3rem)",background:"dark"===s?"rgba(0,0,0,0.8)":"rgba(255,255,255,0.8)",paddingLeft:"2ch",paddingRight:"2ch",paddingBottom:"0.75rem",paddingTop:"0.75rem",right:"1.5rem",bottom:"1.5rem"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},g("div",{style:{marginBottom:"0.75rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Freeconfig lets you push image pixels around in blocks."),g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Mode"),g("div",{style:{marginBottom:"0.75rem"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},E("a",s)," ",g("span",{style:{background:0===i?_[0]:"transparent"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"move"),"\xa0 ",E("s",s)," ",g("span",{style:{background:1===i?_[1]:"transparent"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"adjust size"),"\xa0 ",E("d",s)," ",g("span",{style:{background:2===i?_[2]:"transparent"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"grab")),0===i?g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Move cursor"):null,1===i?g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Adjust cursor size"):null,2===i?g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Move selection"):null,g("div",{style:{marginBottom:"0.75rem"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},[["h","\u2190"],["j","\u2193"],["k","\u2191"],["l","\u2192"]].map(function(e){return g("span",{className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},E(e[0],s)," ",e[1],"\xa0"," ")})),g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Image"),g("div",{style:{marginBottom:"0.75rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"To add an image you can paste, drop, or press ",E("o",s)," to open a file dialog."," ",g("a",{href:"https://unsplash.com/photos/QMRN_GX7p4I",target:"_blank",className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Lion photo by Maurits Bausenhart\u2197")),g("div",{style:{marginBottom:"0.375rem",maxWidth:"60ch"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"Special"),g("div",{style:{marginBottom:"0.75rem"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},E("r",s)," reset image\xa0 ",E("e",s)," save as png\xa0 ",E("b",s)," ","dark"===s?"light bg":"dark bg","\xa0 ",E("?",s)," ","help"),g("div",{className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},g("a",{href:"https://github.com/constraint-systems/freeconfig",target:"_blank",className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},"View source\u2197"))),j?null:g("div",{style:{position:"fixed",right:"1.5rem",bottom:"1.5rem",background:"dark"===s?"rgba(0,0,0,0.8)":"rgba(255,255,255,0.8)"},className:h.a.dynamic([["2328641575",["dark"===s?"#222":"#eee","dark"===s?"#fff":"#000"]]])},E("?",s)))}},SevZ:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=o(n("9kyW")),i=o(n("bVZc"));function o(e){return e&&e.__esModule?e:{default:e}}function a(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.styleSheet,r=void 0===n?null:n,o=t.optimizeForSpeed,a=void 0!==o&&o,s=t.isBrowser,c=void 0===s?"undefined"!==typeof window:s;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this._sheet=r||new i.default({name:"styled-jsx",optimizeForSpeed:a}),this._sheet.inject(),r&&"boolean"===typeof a&&(this._sheet.setOptimizeForSpeed(a),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._isBrowser=c,this._fromServer=void 0,this._indices={},this._instancesCounts={},this.computeId=this.createComputeId(),this.computeSelector=this.createComputeSelector()}var t,n,o;return t=e,(n=[{key:"add",value:function(e){var t=this;void 0===this._optimizeForSpeed&&(this._optimizeForSpeed=Array.isArray(e.children),this._sheet.setOptimizeForSpeed(this._optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._isBrowser&&!this._fromServer&&(this._fromServer=this.selectFromServer(),this._instancesCounts=Object.keys(this._fromServer).reduce(function(e,t){return e[t]=0,e},{}));var n=this.getIdAndRules(e),r=n.styleId,i=n.rules;if(r in this._instancesCounts)this._instancesCounts[r]+=1;else{var o=i.map(function(e){return t._sheet.insertRule(e)}).filter(function(e){return-1!==e});this._indices[r]=o,this._instancesCounts[r]=1}}},{key:"remove",value:function(e){var t=this,n=this.getIdAndRules(e).styleId;if(function(e,t){if(!e)throw new Error("StyleSheetRegistry: ".concat(t,"."))}(n in this._instancesCounts,"styleId: `".concat(n,"` not found")),this._instancesCounts[n]-=1,this._instancesCounts[n]<1){var r=this._fromServer&&this._fromServer[n];r?(r.parentNode.removeChild(r),delete this._fromServer[n]):(this._indices[n].forEach(function(e){return t._sheet.deleteRule(e)}),delete this._indices[n]),delete this._instancesCounts[n]}}},{key:"update",value:function(e,t){this.add(t),this.remove(e)}},{key:"flush",value:function(){this._sheet.flush(),this._sheet.inject(),this._fromServer=void 0,this._indices={},this._instancesCounts={},this.computeId=this.createComputeId(),this.computeSelector=this.createComputeSelector()}},{key:"cssRules",value:function(){var e=this,t=this._fromServer?Object.keys(this._fromServer).map(function(t){return[t,e._fromServer[t]]}):[],n=this._sheet.cssRules();return t.concat(Object.keys(this._indices).map(function(t){return[t,e._indices[t].map(function(e){return n[e].cssText}).join(e._optimizeForSpeed?"":"\n")]}).filter(function(e){return Boolean(e[1])}))}},{key:"createComputeId",value:function(){var e={};return function(t,n){if(!n)return"jsx-".concat(t);var i=String(n),o=t+i;return e[o]||(e[o]="jsx-".concat((0,r.default)("".concat(t,"-").concat(i)))),e[o]}}},{key:"createComputeSelector",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:/__jsx-style-dynamic-selector/g,t={};return function(n,r){this._isBrowser||(r=r.replace(/\/style/gi,"\\/style"));var i=n+r;return t[i]||(t[i]=r.replace(e,n)),t[i]}}},{key:"getIdAndRules",value:function(e){var t=this,n=e.children,r=e.dynamic,i=e.id;if(r){var o=this.computeId(i,r);return{styleId:o,rules:Array.isArray(n)?n.map(function(e){return t.computeSelector(o,e)}):[this.computeSelector(o,n)]}}return{styleId:this.computeId(i),rules:Array.isArray(n)?n:[n]}}},{key:"selectFromServer",value:function(){return Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]')).reduce(function(e,t){return e[t.id.slice(2)]=t,e},{})}}])&&a(t.prototype,n),o&&a(t,o),e}();t.default=s},bVZc:function(e,t,n){"use strict";(function(e){function n(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.name,o=void 0===n?"stylesheet":n,s=t.optimizeForSpeed,c=void 0===s?r:s,u=t.isBrowser,l=void 0===u?"undefined"!==typeof window:u;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),a(i(o),"`name` must be a string"),this._name=o,this._deletedRulePlaceholder="#".concat(o,"-deleted-rule____{}"),a("boolean"===typeof c,"`optimizeForSpeed` must be a boolean"),this._optimizeForSpeed=c,this._isBrowser=l,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0;var d=this._isBrowser&&document.querySelector('meta[property="csp-nonce"]');this._nonce=d?d.getAttribute("content"):null}var t,o,s;return t=e,(o=[{key:"setOptimizeForSpeed",value:function(e){a("boolean"===typeof e,"`setOptimizeForSpeed` accepts a boolean"),a(0===this._rulesCount,"optimizeForSpeed cannot be when rules have already been inserted"),this.flush(),this._optimizeForSpeed=e,this.inject()}},{key:"isOptimizeForSpeed",value:function(){return this._optimizeForSpeed}},{key:"inject",value:function(){var e=this;if(a(!this._injected,"sheet already injected"),this._injected=!0,this._isBrowser&&this._optimizeForSpeed)return this._tags[0]=this.makeStyleTag(this._name),this._optimizeForSpeed="insertRule"in this.getSheet(),void(this._optimizeForSpeed||(r||console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."),this.flush(),this._injected=!0));this._serverSheet={cssRules:[],insertRule:function(t,n){return"number"===typeof n?e._serverSheet.cssRules[n]={cssText:t}:e._serverSheet.cssRules.push({cssText:t}),n},deleteRule:function(t){e._serverSheet.cssRules[t]=null}}}},{key:"getSheetForTag",value:function(e){if(e.sheet)return e.sheet;for(var t=0;t= 0) hot._disposeHandlers.splice(idx, 1);\n \t\t\t},\n\n \t\t\t// Management API\n \t\t\tcheck: hotCheck,\n \t\t\tapply: hotApply,\n \t\t\tstatus: function(l) {\n \t\t\t\tif (!l) return hotStatus;\n \t\t\t\thotStatusHandlers.push(l);\n \t\t\t},\n \t\t\taddStatusHandler: function(l) {\n \t\t\t\thotStatusHandlers.push(l);\n \t\t\t},\n \t\t\tremoveStatusHandler: function(l) {\n \t\t\t\tvar idx = hotStatusHandlers.indexOf(l);\n \t\t\t\tif (idx >= 0) hotStatusHandlers.splice(idx, 1);\n \t\t\t},\n\n \t\t\t//inherit from previous dispose call\n \t\t\tdata: hotCurrentModuleData[moduleId]\n \t\t};\n \t\thotCurrentChildModule = undefined;\n \t\treturn hot;\n \t}\n\n \tvar hotStatusHandlers = [];\n \tvar hotStatus = \"idle\";\n\n \tfunction hotSetStatus(newStatus) {\n \t\thotStatus = newStatus;\n \t\tfor (var i = 0; i < hotStatusHandlers.length; i++)\n \t\t\thotStatusHandlers[i].call(null, newStatus);\n \t}\n\n \t// while downloading\n \tvar hotWaitingFiles = 0;\n \tvar hotChunksLoading = 0;\n \tvar hotWaitingFilesMap = {};\n \tvar hotRequestedFilesMap = {};\n \tvar hotAvailableFilesMap = {};\n \tvar hotDeferred;\n\n \t// The update info\n \tvar hotUpdate, hotUpdateNewHash;\n\n \tfunction toModuleId(id) {\n \t\tvar isNumber = +id + \"\" === id;\n \t\treturn isNumber ? +id : id;\n \t}\n\n \tfunction hotCheck(apply) {\n \t\tif (hotStatus !== \"idle\") {\n \t\t\tthrow new Error(\"check() is only allowed in idle status\");\n \t\t}\n \t\thotApplyOnUpdate = apply;\n \t\thotSetStatus(\"check\");\n \t\treturn hotDownloadManifest(hotRequestTimeout).then(function(update) {\n \t\t\tif (!update) {\n \t\t\t\thotSetStatus(\"idle\");\n \t\t\t\treturn null;\n \t\t\t}\n \t\t\thotRequestedFilesMap = {};\n \t\t\thotWaitingFilesMap = {};\n \t\t\thotAvailableFilesMap = update.c;\n \t\t\thotUpdateNewHash = update.h;\n\n \t\t\thotSetStatus(\"prepare\");\n \t\t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\t\thotDeferred = {\n \t\t\t\t\tresolve: resolve,\n \t\t\t\t\treject: reject\n \t\t\t\t};\n \t\t\t});\n \t\t\thotUpdate = {};\n \t\t\tfor(var chunkId in installedChunks)\n \t\t\t// eslint-disable-next-line no-lone-blocks\n \t\t\t{\n \t\t\t\t/*globals chunkId */\n \t\t\t\thotEnsureUpdateChunk(chunkId);\n \t\t\t}\n \t\t\tif (\n \t\t\t\thotStatus === \"prepare\" &&\n \t\t\t\thotChunksLoading === 0 &&\n \t\t\t\thotWaitingFiles === 0\n \t\t\t) {\n \t\t\t\thotUpdateDownloaded();\n \t\t\t}\n \t\t\treturn promise;\n \t\t});\n \t}\n\n \t// eslint-disable-next-line no-unused-vars\n \tfunction hotAddUpdateChunk(chunkId, moreModules) {\n \t\tif (!hotAvailableFilesMap[chunkId] || !hotRequestedFilesMap[chunkId])\n \t\t\treturn;\n \t\thotRequestedFilesMap[chunkId] = false;\n \t\tfor (var moduleId in moreModules) {\n \t\t\tif (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\thotUpdate[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif (--hotWaitingFiles === 0 && hotChunksLoading === 0) {\n \t\t\thotUpdateDownloaded();\n \t\t}\n \t}\n\n \tfunction hotEnsureUpdateChunk(chunkId) {\n \t\tif (!hotAvailableFilesMap[chunkId]) {\n \t\t\thotWaitingFilesMap[chunkId] = true;\n \t\t} else {\n \t\t\thotRequestedFilesMap[chunkId] = true;\n \t\t\thotWaitingFiles++;\n \t\t\thotDownloadUpdateChunk(chunkId);\n \t\t}\n \t}\n\n \tfunction hotUpdateDownloaded() {\n \t\thotSetStatus(\"ready\");\n \t\tvar deferred = hotDeferred;\n \t\thotDeferred = null;\n \t\tif (!deferred) return;\n \t\tif (hotApplyOnUpdate) {\n \t\t\t// Wrap deferred object in Promise to mark it as a well-handled Promise to\n \t\t\t// avoid triggering uncaught exception warning in Chrome.\n \t\t\t// See https://bugs.chromium.org/p/chromium/issues/detail?id=465666\n \t\t\tPromise.resolve()\n \t\t\t\t.then(function() {\n \t\t\t\t\treturn hotApply(hotApplyOnUpdate);\n \t\t\t\t})\n \t\t\t\t.then(\n \t\t\t\t\tfunction(result) {\n \t\t\t\t\t\tdeferred.resolve(result);\n \t\t\t\t\t},\n \t\t\t\t\tfunction(err) {\n \t\t\t\t\t\tdeferred.reject(err);\n \t\t\t\t\t}\n \t\t\t\t);\n \t\t} else {\n \t\t\tvar outdatedModules = [];\n \t\t\tfor (var id in hotUpdate) {\n \t\t\t\tif (Object.prototype.hasOwnProperty.call(hotUpdate, id)) {\n \t\t\t\t\toutdatedModules.push(toModuleId(id));\n \t\t\t\t}\n \t\t\t}\n \t\t\tdeferred.resolve(outdatedModules);\n \t\t}\n \t}\n\n \tfunction hotApply(options) {\n \t\tif (hotStatus !== \"ready\")\n \t\t\tthrow new Error(\"apply() is only allowed in ready status\");\n \t\toptions = options || {};\n\n \t\tvar cb;\n \t\tvar i;\n \t\tvar j;\n \t\tvar module;\n \t\tvar moduleId;\n\n \t\tfunction getAffectedStuff(updateModuleId) {\n \t\t\tvar outdatedModules = [updateModuleId];\n \t\t\tvar outdatedDependencies = {};\n\n \t\t\tvar queue = outdatedModules.map(function(id) {\n \t\t\t\treturn {\n \t\t\t\t\tchain: [id],\n \t\t\t\t\tid: id\n \t\t\t\t};\n \t\t\t});\n \t\t\twhile (queue.length > 0) {\n \t\t\t\tvar queueItem = queue.pop();\n \t\t\t\tvar moduleId = queueItem.id;\n \t\t\t\tvar chain = queueItem.chain;\n \t\t\t\tmodule = installedModules[moduleId];\n \t\t\t\tif (!module || module.hot._selfAccepted) continue;\n \t\t\t\tif (module.hot._selfDeclined) {\n \t\t\t\t\treturn {\n \t\t\t\t\t\ttype: \"self-declined\",\n \t\t\t\t\t\tchain: chain,\n \t\t\t\t\t\tmoduleId: moduleId\n \t\t\t\t\t};\n \t\t\t\t}\n \t\t\t\tif (module.hot._main) {\n \t\t\t\t\treturn {\n \t\t\t\t\t\ttype: \"unaccepted\",\n \t\t\t\t\t\tchain: chain,\n \t\t\t\t\t\tmoduleId: moduleId\n \t\t\t\t\t};\n \t\t\t\t}\n \t\t\t\tfor (var i = 0; i < module.parents.length; i++) {\n \t\t\t\t\tvar parentId = module.parents[i];\n \t\t\t\t\tvar parent = installedModules[parentId];\n \t\t\t\t\tif (!parent) continue;\n \t\t\t\t\tif (parent.hot._declinedDependencies[moduleId]) {\n \t\t\t\t\t\treturn {\n \t\t\t\t\t\t\ttype: \"declined\",\n \t\t\t\t\t\t\tchain: chain.concat([parentId]),\n \t\t\t\t\t\t\tmoduleId: moduleId,\n \t\t\t\t\t\t\tparentId: parentId\n \t\t\t\t\t\t};\n \t\t\t\t\t}\n \t\t\t\t\tif (outdatedModules.indexOf(parentId) !== -1) continue;\n \t\t\t\t\tif (parent.hot._acceptedDependencies[moduleId]) {\n \t\t\t\t\t\tif (!outdatedDependencies[parentId])\n \t\t\t\t\t\t\toutdatedDependencies[parentId] = [];\n \t\t\t\t\t\taddAllToSet(outdatedDependencies[parentId], [moduleId]);\n \t\t\t\t\t\tcontinue;\n \t\t\t\t\t}\n \t\t\t\t\tdelete outdatedDependencies[parentId];\n \t\t\t\t\toutdatedModules.push(parentId);\n \t\t\t\t\tqueue.push({\n \t\t\t\t\t\tchain: chain.concat([parentId]),\n \t\t\t\t\t\tid: parentId\n \t\t\t\t\t});\n \t\t\t\t}\n \t\t\t}\n\n \t\t\treturn {\n \t\t\t\ttype: \"accepted\",\n \t\t\t\tmoduleId: updateModuleId,\n \t\t\t\toutdatedModules: outdatedModules,\n \t\t\t\toutdatedDependencies: outdatedDependencies\n \t\t\t};\n \t\t}\n\n \t\tfunction addAllToSet(a, b) {\n \t\t\tfor (var i = 0; i < b.length; i++) {\n \t\t\t\tvar item = b[i];\n \t\t\t\tif (a.indexOf(item) === -1) a.push(item);\n \t\t\t}\n \t\t}\n\n \t\t// at begin all updates modules are outdated\n \t\t// the \"outdated\" status can propagate to parents if they don't accept the children\n \t\tvar outdatedDependencies = {};\n \t\tvar outdatedModules = [];\n \t\tvar appliedUpdate = {};\n\n \t\tvar warnUnexpectedRequire = function warnUnexpectedRequire() {\n \t\t\tconsole.warn(\n \t\t\t\t\"[HMR] unexpected require(\" + result.moduleId + \") to disposed module\"\n \t\t\t);\n \t\t};\n\n \t\tfor (var id in hotUpdate) {\n \t\t\tif (Object.prototype.hasOwnProperty.call(hotUpdate, id)) {\n \t\t\t\tmoduleId = toModuleId(id);\n \t\t\t\t/** @type {TODO} */\n \t\t\t\tvar result;\n \t\t\t\tif (hotUpdate[id]) {\n \t\t\t\t\tresult = getAffectedStuff(moduleId);\n \t\t\t\t} else {\n \t\t\t\t\tresult = {\n \t\t\t\t\t\ttype: \"disposed\",\n \t\t\t\t\t\tmoduleId: id\n \t\t\t\t\t};\n \t\t\t\t}\n \t\t\t\t/** @type {Error|false} */\n \t\t\t\tvar abortError = false;\n \t\t\t\tvar doApply = false;\n \t\t\t\tvar doDispose = false;\n \t\t\t\tvar chainInfo = \"\";\n \t\t\t\tif (result.chain) {\n \t\t\t\t\tchainInfo = \"\\nUpdate propagation: \" + result.chain.join(\" -> \");\n \t\t\t\t}\n \t\t\t\tswitch (result.type) {\n \t\t\t\t\tcase \"self-declined\":\n \t\t\t\t\t\tif (options.onDeclined) options.onDeclined(result);\n \t\t\t\t\t\tif (!options.ignoreDeclined)\n \t\t\t\t\t\t\tabortError = new Error(\n \t\t\t\t\t\t\t\t\"Aborted because of self decline: \" +\n \t\t\t\t\t\t\t\t\tresult.moduleId +\n \t\t\t\t\t\t\t\t\tchainInfo\n \t\t\t\t\t\t\t);\n \t\t\t\t\t\tbreak;\n \t\t\t\t\tcase \"declined\":\n \t\t\t\t\t\tif (options.onDeclined) options.onDeclined(result);\n \t\t\t\t\t\tif (!options.ignoreDeclined)\n \t\t\t\t\t\t\tabortError = new Error(\n \t\t\t\t\t\t\t\t\"Aborted because of declined dependency: \" +\n \t\t\t\t\t\t\t\t\tresult.moduleId +\n \t\t\t\t\t\t\t\t\t\" in \" +\n \t\t\t\t\t\t\t\t\tresult.parentId +\n \t\t\t\t\t\t\t\t\tchainInfo\n \t\t\t\t\t\t\t);\n \t\t\t\t\t\tbreak;\n \t\t\t\t\tcase \"unaccepted\":\n \t\t\t\t\t\tif (options.onUnaccepted) options.onUnaccepted(result);\n \t\t\t\t\t\tif (!options.ignoreUnaccepted)\n \t\t\t\t\t\t\tabortError = new Error(\n \t\t\t\t\t\t\t\t\"Aborted because \" + moduleId + \" is not accepted\" + chainInfo\n \t\t\t\t\t\t\t);\n \t\t\t\t\t\tbreak;\n \t\t\t\t\tcase \"accepted\":\n \t\t\t\t\t\tif (options.onAccepted) options.onAccepted(result);\n \t\t\t\t\t\tdoApply = true;\n \t\t\t\t\t\tbreak;\n \t\t\t\t\tcase \"disposed\":\n \t\t\t\t\t\tif (options.onDisposed) options.onDisposed(result);\n \t\t\t\t\t\tdoDispose = true;\n \t\t\t\t\t\tbreak;\n \t\t\t\t\tdefault:\n \t\t\t\t\t\tthrow new Error(\"Unexception type \" + result.type);\n \t\t\t\t}\n \t\t\t\tif (abortError) {\n \t\t\t\t\thotSetStatus(\"abort\");\n \t\t\t\t\treturn Promise.reject(abortError);\n \t\t\t\t}\n \t\t\t\tif (doApply) {\n \t\t\t\t\tappliedUpdate[moduleId] = hotUpdate[moduleId];\n \t\t\t\t\taddAllToSet(outdatedModules, result.outdatedModules);\n \t\t\t\t\tfor (moduleId in result.outdatedDependencies) {\n \t\t\t\t\t\tif (\n \t\t\t\t\t\t\tObject.prototype.hasOwnProperty.call(\n \t\t\t\t\t\t\t\tresult.outdatedDependencies,\n \t\t\t\t\t\t\t\tmoduleId\n \t\t\t\t\t\t\t)\n \t\t\t\t\t\t) {\n \t\t\t\t\t\t\tif (!outdatedDependencies[moduleId])\n \t\t\t\t\t\t\t\toutdatedDependencies[moduleId] = [];\n \t\t\t\t\t\t\taddAllToSet(\n \t\t\t\t\t\t\t\toutdatedDependencies[moduleId],\n \t\t\t\t\t\t\t\tresult.outdatedDependencies[moduleId]\n \t\t\t\t\t\t\t);\n \t\t\t\t\t\t}\n \t\t\t\t\t}\n \t\t\t\t}\n \t\t\t\tif (doDispose) {\n \t\t\t\t\taddAllToSet(outdatedModules, [result.moduleId]);\n \t\t\t\t\tappliedUpdate[moduleId] = warnUnexpectedRequire;\n \t\t\t\t}\n \t\t\t}\n \t\t}\n\n \t\t// Store self accepted outdated modules to require them later by the module system\n \t\tvar outdatedSelfAcceptedModules = [];\n \t\tfor (i = 0; i < outdatedModules.length; i++) {\n \t\t\tmoduleId = outdatedModules[i];\n \t\t\tif (\n \t\t\t\tinstalledModules[moduleId] &&\n \t\t\t\tinstalledModules[moduleId].hot._selfAccepted &&\n \t\t\t\t// removed self-accepted modules should not be required\n \t\t\t\tappliedUpdate[moduleId] !== warnUnexpectedRequire\n \t\t\t) {\n \t\t\t\toutdatedSelfAcceptedModules.push({\n \t\t\t\t\tmodule: moduleId,\n \t\t\t\t\terrorHandler: installedModules[moduleId].hot._selfAccepted\n \t\t\t\t});\n \t\t\t}\n \t\t}\n\n \t\t// Now in \"dispose\" phase\n \t\thotSetStatus(\"dispose\");\n \t\tObject.keys(hotAvailableFilesMap).forEach(function(chunkId) {\n \t\t\tif (hotAvailableFilesMap[chunkId] === false) {\n \t\t\t\thotDisposeChunk(chunkId);\n \t\t\t}\n \t\t});\n\n \t\tvar idx;\n \t\tvar queue = outdatedModules.slice();\n \t\twhile (queue.length > 0) {\n \t\t\tmoduleId = queue.pop();\n \t\t\tmodule = installedModules[moduleId];\n \t\t\tif (!module) continue;\n\n \t\t\tvar data = {};\n\n \t\t\t// Call dispose handlers\n \t\t\tvar disposeHandlers = module.hot._disposeHandlers;\n \t\t\tfor (j = 0; j < disposeHandlers.length; j++) {\n \t\t\t\tcb = disposeHandlers[j];\n \t\t\t\tcb(data);\n \t\t\t}\n \t\t\thotCurrentModuleData[moduleId] = data;\n\n \t\t\t// disable module (this disables requires from this module)\n \t\t\tmodule.hot.active = false;\n\n \t\t\t// remove module from cache\n \t\t\tdelete installedModules[moduleId];\n\n \t\t\t// when disposing there is no need to call dispose handler\n \t\t\tdelete outdatedDependencies[moduleId];\n\n \t\t\t// remove \"parents\" references from all children\n \t\t\tfor (j = 0; j < module.children.length; j++) {\n \t\t\t\tvar child = installedModules[module.children[j]];\n \t\t\t\tif (!child) continue;\n \t\t\t\tidx = child.parents.indexOf(moduleId);\n \t\t\t\tif (idx >= 0) {\n \t\t\t\t\tchild.parents.splice(idx, 1);\n \t\t\t\t}\n \t\t\t}\n \t\t}\n\n \t\t// remove outdated dependency from module children\n \t\tvar dependency;\n \t\tvar moduleOutdatedDependencies;\n \t\tfor (moduleId in outdatedDependencies) {\n \t\t\tif (\n \t\t\t\tObject.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)\n \t\t\t) {\n \t\t\t\tmodule = installedModules[moduleId];\n \t\t\t\tif (module) {\n \t\t\t\t\tmoduleOutdatedDependencies = outdatedDependencies[moduleId];\n \t\t\t\t\tfor (j = 0; j < moduleOutdatedDependencies.length; j++) {\n \t\t\t\t\t\tdependency = moduleOutdatedDependencies[j];\n \t\t\t\t\t\tidx = module.children.indexOf(dependency);\n \t\t\t\t\t\tif (idx >= 0) module.children.splice(idx, 1);\n \t\t\t\t\t}\n \t\t\t\t}\n \t\t\t}\n \t\t}\n\n \t\t// Now in \"apply\" phase\n \t\thotSetStatus(\"apply\");\n\n \t\thotCurrentHash = hotUpdateNewHash;\n\n \t\t// insert new code\n \t\tfor (moduleId in appliedUpdate) {\n \t\t\tif (Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) {\n \t\t\t\tmodules[moduleId] = appliedUpdate[moduleId];\n \t\t\t}\n \t\t}\n\n \t\t// call accept handlers\n \t\tvar error = null;\n \t\tfor (moduleId in outdatedDependencies) {\n \t\t\tif (\n \t\t\t\tObject.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)\n \t\t\t) {\n \t\t\t\tmodule = installedModules[moduleId];\n \t\t\t\tif (module) {\n \t\t\t\t\tmoduleOutdatedDependencies = outdatedDependencies[moduleId];\n \t\t\t\t\tvar callbacks = [];\n \t\t\t\t\tfor (i = 0; i < moduleOutdatedDependencies.length; i++) {\n \t\t\t\t\t\tdependency = moduleOutdatedDependencies[i];\n \t\t\t\t\t\tcb = module.hot._acceptedDependencies[dependency];\n \t\t\t\t\t\tif (cb) {\n \t\t\t\t\t\t\tif (callbacks.indexOf(cb) !== -1) continue;\n \t\t\t\t\t\t\tcallbacks.push(cb);\n \t\t\t\t\t\t}\n \t\t\t\t\t}\n \t\t\t\t\tfor (i = 0; i < callbacks.length; i++) {\n \t\t\t\t\t\tcb = callbacks[i];\n \t\t\t\t\t\ttry {\n \t\t\t\t\t\t\tcb(moduleOutdatedDependencies);\n \t\t\t\t\t\t} catch (err) {\n \t\t\t\t\t\t\tif (options.onErrored) {\n \t\t\t\t\t\t\t\toptions.onErrored({\n \t\t\t\t\t\t\t\t\ttype: \"accept-errored\",\n \t\t\t\t\t\t\t\t\tmoduleId: moduleId,\n \t\t\t\t\t\t\t\t\tdependencyId: moduleOutdatedDependencies[i],\n \t\t\t\t\t\t\t\t\terror: err\n \t\t\t\t\t\t\t\t});\n \t\t\t\t\t\t\t}\n \t\t\t\t\t\t\tif (!options.ignoreErrored) {\n \t\t\t\t\t\t\t\tif (!error) error = err;\n \t\t\t\t\t\t\t}\n \t\t\t\t\t\t}\n \t\t\t\t\t}\n \t\t\t\t}\n \t\t\t}\n \t\t}\n\n \t\t// Load self accepted modules\n \t\tfor (i = 0; i < outdatedSelfAcceptedModules.length; i++) {\n \t\t\tvar item = outdatedSelfAcceptedModules[i];\n \t\t\tmoduleId = item.module;\n \t\t\thotCurrentParents = [moduleId];\n \t\t\ttry {\n \t\t\t\t__webpack_require__(moduleId);\n \t\t\t} catch (err) {\n \t\t\t\tif (typeof item.errorHandler === \"function\") {\n \t\t\t\t\ttry {\n \t\t\t\t\t\titem.errorHandler(err);\n \t\t\t\t\t} catch (err2) {\n \t\t\t\t\t\tif (options.onErrored) {\n \t\t\t\t\t\t\toptions.onErrored({\n \t\t\t\t\t\t\t\ttype: \"self-accept-error-handler-errored\",\n \t\t\t\t\t\t\t\tmoduleId: moduleId,\n \t\t\t\t\t\t\t\terror: err2,\n \t\t\t\t\t\t\t\toriginalError: err\n \t\t\t\t\t\t\t});\n \t\t\t\t\t\t}\n \t\t\t\t\t\tif (!options.ignoreErrored) {\n \t\t\t\t\t\t\tif (!error) error = err2;\n \t\t\t\t\t\t}\n \t\t\t\t\t\tif (!error) error = err;\n \t\t\t\t\t}\n \t\t\t\t} else {\n \t\t\t\t\tif (options.onErrored) {\n \t\t\t\t\t\toptions.onErrored({\n \t\t\t\t\t\t\ttype: \"self-accept-errored\",\n \t\t\t\t\t\t\tmoduleId: moduleId,\n \t\t\t\t\t\t\terror: err\n \t\t\t\t\t\t});\n \t\t\t\t\t}\n \t\t\t\t\tif (!options.ignoreErrored) {\n \t\t\t\t\t\tif (!error) error = err;\n \t\t\t\t\t}\n \t\t\t\t}\n \t\t\t}\n \t\t}\n\n \t\t// handle errors in accept handlers and self accepted module load\n \t\tif (error) {\n \t\t\thotSetStatus(\"fail\");\n \t\t\treturn Promise.reject(error);\n \t\t}\n\n \t\thotSetStatus(\"idle\");\n \t\treturn new Promise(function(resolve) {\n \t\t\tresolve(outdatedModules);\n \t\t});\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"static/runtime/webpack.js\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// script path function\n \tfunction jsonpScriptSrc(chunkId) {\n \t\treturn __webpack_require__.p + \"static/chunks/\" + ({}[chunkId]||chunkId) + \".js\"\n \t}\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {},\n \t\t\thot: hotCreateModule(moduleId),\n \t\t\tparents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),\n \t\t\tchildren: []\n \t\t};\n\n \t\t// Execute the module function\n \t\tvar threw = true;\n \t\ttry {\n \t\t\tmodules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));\n \t\t\tthrew = false;\n \t\t} finally {\n \t\t\tif(threw) delete installedModules[moduleId];\n \t\t}\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tvar promises = [];\n\n\n \t\t// JSONP chunk loading for javascript\n\n \t\tvar installedChunkData = installedChunks[chunkId];\n \t\tif(installedChunkData !== 0) { // 0 means \"already installed\".\n\n \t\t\t// a Promise means \"currently loading\".\n \t\t\tif(installedChunkData) {\n \t\t\t\tpromises.push(installedChunkData[2]);\n \t\t\t} else {\n \t\t\t\t// setup Promise in chunk cache\n \t\t\t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n \t\t\t\t});\n \t\t\t\tpromises.push(installedChunkData[2] = promise);\n\n \t\t\t\t// start chunk loading\n \t\t\t\tvar script = document.createElement('script');\n \t\t\t\tvar onScriptComplete;\n\n \t\t\t\tscript.charset = 'utf-8';\n \t\t\t\tscript.timeout = 120;\n \t\t\t\tif (__webpack_require__.nc) {\n \t\t\t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t\t\t}\n \t\t\t\tscript.src = jsonpScriptSrc(chunkId);\n\n \t\t\t\t// create error before stack unwound to get useful stacktrace later\n \t\t\t\tvar error = new Error();\n \t\t\t\tonScriptComplete = function (event) {\n \t\t\t\t\t// avoid mem leaks in IE.\n \t\t\t\t\tscript.onerror = script.onload = null;\n \t\t\t\t\tclearTimeout(timeout);\n \t\t\t\t\tvar chunk = installedChunks[chunkId];\n \t\t\t\t\tif(chunk !== 0) {\n \t\t\t\t\t\tif(chunk) {\n \t\t\t\t\t\t\tvar errorType = event && (event.type === 'load' ? 'missing' : event.type);\n \t\t\t\t\t\t\tvar realSrc = event && event.target && event.target.src;\n \t\t\t\t\t\t\terror.message = 'Loading chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';\n \t\t\t\t\t\t\terror.name = 'ChunkLoadError';\n \t\t\t\t\t\t\terror.type = errorType;\n \t\t\t\t\t\t\terror.request = realSrc;\n \t\t\t\t\t\t\tchunk[1](error);\n \t\t\t\t\t\t}\n \t\t\t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t\t\t}\n \t\t\t\t};\n \t\t\t\tvar timeout = setTimeout(function(){\n \t\t\t\t\tonScriptComplete({ type: 'timeout', target: script });\n \t\t\t\t}, 120000);\n \t\t\t\tscript.onerror = script.onload = onScriptComplete;\n \t\t\t\tdocument.head.appendChild(script);\n \t\t\t}\n \t\t}\n \t\treturn Promise.all(promises);\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n \t// __webpack_hash__\n \t__webpack_require__.h = function() { return hotCurrentHash; };\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;A","sourceRoot":""} --------------------------------------------------------------------------------