{"_id":"@diesdasdigital/js-canvas-library","_rev":"7-7d9387a11c93de7bc206edc6378897f3","name":"@diesdasdigital/js-canvas-library","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@diesdasdigital/js-canvas-library","version":"1.0.0","description":"This is a JS library to create canvas based applications using the Elm Architecture.","main":"src/main.js","author":{"name":"diesdas.digital"},"repository":{"type":"git","url":"https://github.com/diesdasdigital/js-canvas-library"},"scripts":{"pre-push":"yarn -s lint","post-merge":"yarn","dev":"echo && echo '👷 starting development…' && parcel src/example.html --port 3000","lint":"yarn run -s lint:formatting && yarn run -s lint:js && echo","lint:formatting":"echo '\n💅 linting formatting: ' && (prettier 'src/**/*.{js,css}' --list-different && echo '✅ all good' || (echo '❌ the files above are not formatted by prettier\n' && exit 1))","lint:js":"echo '\n⚙️ linting JS: ' && eslint 'src/**/*.js' && echo '✅ all good'"},"devDependencies":{"captain-git-hook":"^2.0.0","eslint":"*","prettier":"*"},"dependencies":{"parcel-bundler":"^1.12.4"},"_id":"@diesdasdigital/js-canvas-library@1.0.0","dist":{"shasum":"f62c7b747ae506120d67e598cb95fe6eb01c50d4","integrity":"sha512-vh3lw+CPhVJgNemjNXKl2Bk1yf/ckw/kNoxZpEzGc89QSdYuPpKXre1bLcZxsHAzCQjLePlPS8RjE8qENaERyQ==","tarball":"https://registry.npmjs.org/@diesdasdigital/js-canvas-library/-/js-canvas-library-1.0.0.tgz","fileCount":10,"unpackedSize":16546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd78i9CRA9TVsSAnZWagAAMUYQAIMTAIl334iHB4miOgMQ\nJfnbcPNCg7Lxgx4I1PJw4nbhe+wy2qNGQpyjls8oJf6dSHvoKFe0Gab1M/5y\nxFjIaXYvGPHN3xyrAhrbV0ks7PrU8UHGDUTXhCKbZjjFGTif9pyctx0pPMD6\nXfdX11NYofcSJggUjTtzzXgswif20jEzbNTef2OBZdaZ7IBHXVI2FAvb+d7B\nuUsFKLCkczCrG5+41ljWSz9WylQgVZkWQLJyjw7pXTYPClovNYN666DY+FFX\nMd1GSQ1ZQpiq3eDWOe0K1XItHhe67PYAQvyM7ihrZ14GPxCrELyOIgAreuDz\n3vuD1naxwT2OcTQ+LtdPffH8LzP8UkfNFuQujo5U8yYSfZ0Omvg/ypeXl2/+\nNStCa4i01jMCNIPKo4tPN5dWhw5+ty4G8X5vtRm5IF69ylFACYpPgkS5LKZD\nTsv4A0UuGZL4UciqvIpkQVtzxKxsdC7lZj0WSDFNTV7w34I/OhMbOO2zB4a6\n7xriYZGKL6JujaJSZ9X2G5fWVxUhSeFkewrKPB1SJWFM36RCkcuNLCm1VviS\nWZk0/U0Z6fHiRgwD/67xAPvxY+L5yZG3cLYgp/yWVgaNv3DG0+4KSTFDWZnm\nXmkuS+o0WevGT0f6lU+JmvCC6fE1n3L6dJUkPBFtnsuedsgw8hZodDa8IFnU\n3kmB\r\n=7O1y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDm89Y+tjISVvVE0CMoUZBJPWyVBnJy4c2+d3ElnihloQIgCANMn0iSYeS5G0HFiMniwllmkINrFKsaEwcJujGKSGc="}]},"maintainers":[{"name":"diesdasdigital","email":"shared@diesdas.digital"}],"_npmUser":{"name":"diesdasdigital","email":"shared@diesdas.digital"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/js-canvas-library_1.0.0_1575995580635_0.5785406254724645"},"_hasShrinkwrap":false},"2.0.0":{"name":"@diesdasdigital/js-canvas-library","version":"2.0.0","description":"This is a JS library to create canvas based applications using the Elm Architecture.","main":"src/main.js","author":{"name":"diesdas.digital"},"repository":{"type":"git","url":"https://github.com/diesdasdigital/js-canvas-library"},"license":"UNLICENSED","scripts":{"pre-push":"yarn -s lint","post-merge":"yarn","dev":"echo && echo '👷 starting development…' && parcel src/example.html --port 3000","lint":"yarn run -s lint:formatting && yarn run -s lint:js && echo","lint:formatting":"echo '\n💅 linting formatting: ' && (prettier . --check && echo '✅ all good' || (echo '❌ the files above are not formatted by prettier\n' && exit 1))","lint:js":"echo '\n⚙️ linting JS: ' && eslint . && echo '✅ all good'"},"devDependencies":{"@diesdasdigital/linting":"^1.2.0","captain-git-hook":"^2.0.0","eslint":"*","prettier":"*"},"dependencies":{"parcel-bundler":"^1.12.4"},"_id":"@diesdasdigital/js-canvas-library@2.0.0","dist":{"shasum":"b55cb445ca2666de899038803c6b890b67165667","integrity":"sha512-mwp4X0aTPpvlomQo6fY9/3v38igPQZUlogS79iSOaiYFHZLShahijTFxd2Lig52FMORia3ASzvtMeabRyhWFbQ==","tarball":"https://registry.npmjs.org/@diesdasdigital/js-canvas-library/-/js-canvas-library-2.0.0.tgz","fileCount":15,"unpackedSize":14058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexRyJCRA9TVsSAnZWagAAFh0QAJxhwjIYQaXSHLBn1s0V\nIzDKXtpZwRmVUctd7DYuLbIiZgj+jgXjQgZj++dtyA+OBeAOCoMNt6Ja6UMX\nbp0nKPGIxtwPAIc576r2myVPuUhdSxUvMNgxYDBiq96pjuRhZhU9YSDGrwIl\ngX0TNPDGXc5uCUVnZcB24f3z20NpS75Sc0sx7vd47IqU6SSZ9oqvAucbberA\nEPJwephIs6X9qlC3/9DLaZV5PPvIDuFqEvljFvnzmI1+t/RidZG2RqW+c4QO\nuMF2r9xoR0tqNGiXax0VowhPsu1wono2ve4nakHy+g62pO0NVij8AORGcHNT\nkOgUBD/iGp1Odmhw++j4fS8x0wno/CUQTync0tqQmcVnDfr/CJ541dAn5Md7\nTal4bJAAPrfvZRr3rcm9KTR9UQKW6NLxIPCkX8bu9qwARZI01vcyfqS+Bq3U\naEpT2HpfJvYbT/i2TON0uS1hnZOuIdjo6/n/7uZDMd6r7Op61eyvras+pRoH\nTZxtqNz1nVeXgywdL9dUScI9VNAW/lfQQ3I6nuHUNeHtn0gx20QmLobqfAnj\ng/5EApvkJ95b12T8GpbsroKGKAXDJCGltesKPU3zDXyT7X7RBYnb1GiyOqiu\nv6T/zCUv5XeNQt728ZC1ZNddAiOsqrbd5jc0Sy6n4FmbF1nzEtpvdlUjBl//\nx2Qb\r\n=X5P4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLMyWIzUZq7Q7MfwfkDrs1uSRkBLY9dU8zom6czlPIuQIhAO5cUvPnj+kD19zlavLvGr9UIs3S30BD3Nn4ehSpiKLZ"}]},"maintainers":[{"email":"shared@diesdas.digital","name":"diesdasdigital-admin"},{"email":"account@maximilianhoffmann.com","name":"maxhoffmann"},{"email":"mitch@mitch-ryan.com","name":"ryami333"}],"_npmUser":{"name":"diesdasdigital-admin","email":"shared@diesdas.digital"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/js-canvas-library_2.0.0_1589976200565_0.178706688174451"},"_hasShrinkwrap":false}},"time":{"created":"2019-12-10T16:33:00.608Z","1.0.0":"2019-12-10T16:33:00.773Z","modified":"2022-08-08T13:48:22.139Z","2.0.0":"2020-05-20T12:03:20.912Z"},"maintainers":[{"email":"infrastructure@diesdas.digital","name":"team-wicked-tribe"},{"email":"shared@diesdas.digital","name":"diesdasdigital-admin"},{"email":"mitch@mitch-ryan.com","name":"ryami333"}],"description":"This is a JS library to create canvas based applications using the Elm Architecture.","repository":{"type":"git","url":"https://github.com/diesdasdigital/js-canvas-library"},"author":{"name":"diesdas.digital"},"readme":"# JS Canvas Library ![npm badge](https://badgen.net/npm/v/@diesdasdigital/js-canvas-library)\n\nThis is a JS library to create canvas based applications using the Elm Architecture.\n\n## Installation\n\nTo install all dependencies run:\n\n```\nyarn add @diesdasdigital/js-canvas-library\n```\n\n## Usage\n\nHere is a basic example of rendering a rectangle using the library. Its color will change as soon as the user\nclicks the button.\n\nAn example highlighting subscriptions and fetching data can be found in [`example.js`](src/example.js).\n\n```js\nimport { canvas } from \"@diesdasdigital/js-canvas-library\";\n\nfunction init(flags, meta) {\n  const model = {\n    color: \"red\",\n    viewport: meta.viewport,\n  };\n  const cmds = [];\n  return [model, cmds];\n}\n\nconst msg = {\n  userClickedOnButton: () => ({\n    type: \"userClickedOnButton\",\n  }),\n};\n\nfunction update(_msg, model) {\n  switch (_msg.type) {\n    case \"userClickedOnButton\":\n      return [{ ...model, color: \"green\" }, [scheduleCustomSideEffect()]];\n\n    default:\n      return [model, []];\n  }\n}\n\nfunction view(context, model) {\n  const SIZE = 20;\n  const HALF = 0.5;\n  context.fillStyle = model.color;\n  context.fillRect(\n    model.viewport.width * HALF - SIZE * HALF,\n    model.viewport.height * HALF - SIZE * HALF,\n    SIZE,\n    SIZE\n  );\n}\n\nfunction subscriptions() {\n  return [];\n}\n\nconst send = canvas(\n  document.querySelector(\".canvas\"),\n  {} // <- flags\n)({\n  init,\n  view,\n  update,\n  subscriptions,\n});\n\ndocument.querySelector(\".button\").addEventListener(\"click\", () => {\n  send(msg.userClickedOnButton());\n});\n```\n\n### Available commands and subscriptions\n\n#### Commands\n\nCommands can be returned as the second item in the array retured in each update case, eg\n\n```js\nreturn [model, [command1, command2…]]\n```\n\n##### `request`\n\nThe `request` command is a minimal wrapper of the browser’s `fetch` function. The first two\narguments are the same as in fetch: url and request options. The additional third and fourth\narguments are message which are dispatched when the request succeeds or fails. `request` will\nthrow an error if not all 4 arguments are passed to make sure success and error case are handled.\n\n```js\nimport { request } from \"@diesdasdigital/js-canvas-library\";\n\nrequest(\n  \"https://example.com/\",\n  options,\n  successMessage,\n  errorMessage\n),\n```\n\n##### Custom commands\n\nIn case one needs to send a custom message inside `update` it is possible to do so by calling the\nmessage function like a command:\n\n```js\nreturn [model, [msg.doSomething]];\n```\n\nThis is handy in case message should be dispatched after state has been updated or based on a state change without a user interaction.\n\nIt can also be used to handle side effects, for example to send a message which then is handled in `update` and only performs a side effect without changing the model. Please talk to Max, if you need more than the `request` side effect. There is a good chance it can be added to the library.\n\n#### Subscriptions\n\nBuilt-in subscriptions for some events can be imported from the library.\n\n```js\nimport { events } from \"@diesdasdigital/js-canvas-library\";\n```\n\n##### `onMouseMove`\n\nThe message passed to `onMouseMove` will receive an object `{ x, y }` with the\nmouse coordinates relative to the canvas element. `x = 0; y = 0` is equivalent to\nhaving the mouse on the top left corner of the canvas. The function receiving this\nobject in the example below is `msg.updateMouse`.\n\n```js\nfunction subscriptions() {\n  return [events.onMouseMove(msg.updateMouse)];\n}\n```\n\n##### `onAnimationFrame`\n\nThe message passed to `onAnimationFrame` will receive the timestamp of the animation\nframe as an argument. (in the example code below that function is `msg.tick`)\n\n```js\nfunction subscriptions() {\n  return [events.onAnimationFrame(msg.tick)];\n}\n```\n\n## Contributing\n\n### Requirements\n\n- macOS\n- [`node`](https://nodejs.org/en/) (we recommend installing it via [fnm](https://github.com/Schniz/fnm))\n- [`yarn`](https://yarnpkg.com)\n\n**_Note:_** _all of the following commands should be run in the project’s folder._\n\nClone the repository and run:\n\n```\nyarn\n```\n\nTo open the example page while development you can run:\n\n```\nyarn dev\n```\n\nLinting should run automatically when pushing. To lint your code manually run:\n\n```\nyarn lint\n```\n\n## License\n\nAllowed to be used by people at diesdas and its creator.\n\n## Publishing as a package\n\nLogin as diesdas using the credentials provided in 1Password and run:\n\n```\nyarn publish . --access=public\n```\n","readmeFilename":"README.md","license":"UNLICENSED"}