{"_id":"@carefree0910/cfb-web","_rev":"4-ae90203bfe4c9fbf1bf0ad7f4176d7f5","name":"@carefree0910/cfb-web","dist-tags":{"latest":"0.0.6"},"versions":{"0.0.2":{"name":"@carefree0910/cfb-web","version":"0.0.2","license":"MIT","_id":"@carefree0910/cfb-web@0.0.2","maintainers":[{"name":"carefree0910","email":"syameimaru.saki@gmail.com"}],"homepage":"https://github.com/carefree0910/carefree-board#readme","bugs":{"url":"https://github.com/carefree0910/carefree-board/issues"},"dist":{"shasum":"1e5d894f9322ac36e351d945a32f5011f0eabd53","tarball":"https://registry.npmjs.org/@carefree0910/cfb-web/-/cfb-web-0.0.2.tgz","fileCount":341,"integrity":"sha512-6YfPRnycGXoSly4n81qOi5iA9xWZcMMVbsbvCV2nnEXkylrd0DKYlv1OQltyXhdRCf4lXFnAdwochA9XAEsM2Q==","signatures":[{"sig":"MEYCIQDPetkwGa0zJNoGULutmFfRT8Jy52l5NFs195SjfKoD/gIhAJI/Gs1X+hGJQXc+BPFsowBcbjEPwsunFn+RNO+hHNh8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462099},"main":"./script/cfb-web/main.js","types":"./script/cfb-web/main.d.ts","module":"./esm/cfb-web/main.js","exports":{".":{"import":"./esm/cfb-web/main.js","require":"./script/cfb-web/main.js"}},"gitHead":"2c76e83a25cf001214d3a14a4bf2053bf673e690","scripts":{"test":"node test_runner.js"},"_npmUser":{"name":"carefree0910","email":"syameimaru.saki@gmail.com"},"repository":{"url":"git+https://github.com/carefree0910/carefree-board.git","type":"git"},"_npmVersion":"10.8.2","description":"A web-native renderer for the `carefree-board` project.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"uuid":"^11.0.2","@svgdotjs/svg.js":"^3.2.0"},"_hasShrinkwrap":false,"devDependencies":{"picocolors":"^1.0.0","@types/node":"^20.9.0"},"_npmOperationalInternal":{"tmp":"tmp/cfb-web_0.0.2_1730543048655_0.6044751277444418","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"@carefree0910/cfb-web","version":"0.0.3","license":"MIT","_id":"@carefree0910/cfb-web@0.0.3","maintainers":[{"name":"carefree0910","email":"syameimaru.saki@gmail.com"}],"homepage":"https://github.com/carefree0910/carefree-board#readme","bugs":{"url":"https://github.com/carefree0910/carefree-board/issues"},"dist":{"shasum":"e8170b7c40c0df8d2e9581af3e84d5c185be8786","tarball":"https://registry.npmjs.org/@carefree0910/cfb-web/-/cfb-web-0.0.3.tgz","fileCount":341,"integrity":"sha512-Rbc2ErYF5331mBP8IYgY084ofxJpAk9FHdbRBmNE7FGMG1Wj1chuMRIDGn2UswGs5kXGZBN/I+fSQKPWk9GE6g==","signatures":[{"sig":"MEQCICSpj1w/uUDgzamN4SqVUg0+0OTm7C9dgMjoUBcydZBkAiBOn4z5py7D7A8jmnUrby6FjGACQJkcsnhswgdu4Z+4Pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471876},"main":"./script/cfb-web/main.js","types":"./script/cfb-web/main.d.ts","module":"./esm/cfb-web/main.js","exports":{".":{"import":"./esm/cfb-web/main.js","require":"./script/cfb-web/main.js"}},"gitHead":"bbfe6666a105eab8cc269338151a2a7aa8a135c6","scripts":{"test":"node test_runner.js"},"_npmUser":{"name":"carefree0910","email":"syameimaru.saki@gmail.com"},"repository":{"url":"git+https://github.com/carefree0910/carefree-board.git","type":"git"},"_npmVersion":"10.8.2","description":"A web-native renderer for the `carefree-board` project.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"uuid":"^11.0.2","@svgdotjs/svg.js":"^3.2.0"},"_hasShrinkwrap":false,"devDependencies":{"picocolors":"^1.0.0","@types/node":"^20.9.0"},"_npmOperationalInternal":{"tmp":"tmp/cfb-web_0.0.3_1730552757863_0.982187956505054","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"@carefree0910/cfb-web","version":"0.0.4","license":"MIT","_id":"@carefree0910/cfb-web@0.0.4","maintainers":[{"name":"carefree0910","email":"syameimaru.saki@gmail.com"}],"homepage":"https://github.com/carefree0910/carefree-board#readme","bugs":{"url":"https://github.com/carefree0910/carefree-board/issues"},"dist":{"shasum":"a2e16d498dbdc861c0db4138c0adafdc45fed6d2","tarball":"https://registry.npmjs.org/@carefree0910/cfb-web/-/cfb-web-0.0.4.tgz","fileCount":353,"integrity":"sha512-bEEbUJbaLslXB4BmPN58hnWMKYeVLIC46pfNx6RDjWXk5KV89ZbPJj8QxdRDeWG6jUjkX15p0J9QAJaKlAtsXw==","signatures":[{"sig":"MEUCIFBSukLfRaCO+uGs4a/ScylOvfdnS4Z/8oPU58jdFYwYAiEAk3FoRfs1TmH9slU6P/0eoFu2jq9Sb8asgv9DPEhV6l8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494725},"main":"./script/cfb-web/main.js","types":"./script/cfb-web/main.d.ts","module":"./esm/cfb-web/main.js","exports":{".":{"import":"./esm/cfb-web/main.js","require":"./script/cfb-web/main.js"}},"gitHead":"75bd6a6f8055286707e85ec46a04304c3046da07","scripts":{"test":"node test_runner.js"},"_npmUser":{"name":"carefree0910","email":"syameimaru.saki@gmail.com"},"repository":{"url":"git+https://github.com/carefree0910/carefree-board.git","type":"git"},"_npmVersion":"10.8.2","description":"A web-native renderer for the `carefree-board` project.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"uuid":"^11.0.2","@svgdotjs/svg.js":"^3.2.0"},"_hasShrinkwrap":false,"devDependencies":{"picocolors":"^1.0.0","@types/node":"^20.9.0"},"_npmOperationalInternal":{"tmp":"tmp/cfb-web_0.0.4_1730646199665_0.9367656873998136","host":"s3://npm-registry-packages"}},"0.0.5":{"name":"@carefree0910/cfb-web","version":"0.0.5","license":"MIT","_id":"@carefree0910/cfb-web@0.0.5","maintainers":[{"name":"carefree0910","email":"syameimaru.saki@gmail.com"}],"homepage":"https://github.com/carefree0910/carefree-board#readme","bugs":{"url":"https://github.com/carefree0910/carefree-board/issues"},"dist":{"shasum":"9cef6c162eacb69203ce2ca524236770607d58d4","tarball":"https://registry.npmjs.org/@carefree0910/cfb-web/-/cfb-web-0.0.5.tgz","fileCount":419,"integrity":"sha512-46uu7n+A75Wq6dyu+88q/cVUsFCbFbLO7xM1VzR4+Gp1dn4Gc1gA4x59yRfTlT0IqrU8mb7WGIExk0K3W2DUZA==","signatures":[{"sig":"MEUCIEpsJgcw51ODhIZ3LjAP57nQe+xnlnwz+2JhLSCe5PUEAiEAqpuuLXQ13qSxb0/blIFgVQM6O3n3mAHn6ucMSOj8i/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":585019},"main":"./script/cfb-web/main.js","types":"./script/cfb-web/main.d.ts","module":"./esm/cfb-web/main.js","exports":{".":{"import":"./esm/cfb-web/main.js","require":"./script/cfb-web/main.js"}},"gitHead":"eeb6b12ddd8a405f6e66e280c79eec67098ac9dc","scripts":{"test":"node test_runner.js"},"_npmUser":{"name":"carefree0910","email":"syameimaru.saki@gmail.com"},"repository":{"url":"git+https://github.com/carefree0910/carefree-board.git","type":"git"},"_npmVersion":"10.8.2","description":"A web-native renderer for the `carefree-board` project.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"uuid":"^11.0.2","@svgdotjs/svg.js":"^3.2.0"},"_hasShrinkwrap":false,"devDependencies":{"picocolors":"^1.0.0","@types/node":"^20.9.0"},"_npmOperationalInternal":{"tmp":"tmp/cfb-web_0.0.5_1730718845069_0.4864567408652509","host":"s3://npm-registry-packages"}},"0.0.6":{"name":"@carefree0910/cfb-web","version":"0.0.6","description":"A web-native renderer for the `carefree-board` project.","repository":{"type":"git","url":"git+https://github.com/carefree0910/carefree-board.git"},"license":"MIT","bugs":{"url":"https://github.com/carefree0910/carefree-board/issues"},"main":"./script/cfb-web/main.js","module":"./esm/cfb-web/main.js","exports":{".":{"import":"./esm/cfb-web/main.js","require":"./script/cfb-web/main.js"}},"scripts":{"test":"node test_runner.js"},"dependencies":{"@svgdotjs/svg.js":"^3.2.0","uuid":"^11.0.2"},"devDependencies":{"@types/node":"^20.9.0","picocolors":"^1.0.0"},"_id":"@carefree0910/cfb-web@0.0.6","gitHead":"6326547d32671f84b16590e52fb328520d11de64","types":"./script/cfb-web/main.d.ts","homepage":"https://github.com/carefree0910/carefree-board#readme","_nodeVersion":"20.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-jDV45QX31KqOuqYBDBngbo6DO1gbuwLMMcKmyONygYJRxdZqRN7VJqG90VXj7xoJql7uaFzyt60EflBLeT10Kw==","shasum":"74f467ee433f9bd3d500e98b300b0e9023ead85b","tarball":"https://registry.npmjs.org/@carefree0910/cfb-web/-/cfb-web-0.0.6.tgz","fileCount":443,"unpackedSize":713023,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqrTOf/cWyIRPlkyXyg8id+zNYFnDgbQ5/gStcCQTm3AiEAvyxN8E7UJlbHcftSOaa+m9lQTSE2BkQa1kUItyPEBhU="}]},"_npmUser":{"name":"carefree0910","email":"syameimaru.saki@gmail.com"},"directories":{},"maintainers":[{"name":"carefree0910","email":"syameimaru.saki@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cfb-web_0.0.6_1730969156275_0.3975019760437799"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-02T10:24:08.560Z","modified":"2024-11-07T08:45:56.774Z","0.0.2":"2024-11-02T10:24:08.845Z","0.0.3":"2024-11-02T13:05:58.099Z","0.0.4":"2024-11-03T15:03:19.901Z","0.0.5":"2024-11-04T11:14:05.245Z","0.0.6":"2024-11-07T08:45:56.593Z"},"bugs":{"url":"https://github.com/carefree0910/carefree-board/issues"},"license":"MIT","homepage":"https://github.com/carefree0910/carefree-board#readme","repository":{"type":"git","url":"git+https://github.com/carefree0910/carefree-board.git"},"description":"A web-native renderer for the `carefree-board` project.","maintainers":[{"name":"carefree0910","email":"syameimaru.saki@gmail.com"}],"readme":"# `cfb-web`\n\nThis module implements a web-native renderer for the `carefree-board` project. It will\nrender the `board` in a web browser, by transpiling the data structures into `dom`\nelements.\n\n## Quick Start\n\nWe've provided a convenient `deno task` to run a demo for `cfb-web`:\n\n```bash\ndeno task run:web\n```\n\nThis task simply executes the [`run_web.ts`](../scripts/web/run_web.ts) script, which\nwill bundle `cfb-web` and then serve the demo's `index.html` file.\n\n> The procedure mentioned above is easy to integrate into `deno deploy` - that's why I'm\n> able to host it at https://cfb-web.deno.dev/!\n\n## Usage\n\n`cfb-web` should be used in a `browser` runtime as its name suggests. It implements the\nfollowing layers for the `cfb` project:\n\n- `WebRenderer`: Structured the `dom` hierarchy for `WebRenderNode` to be rendered.\n- `WebRenderNode`: Concrete implementations that can transpile `node` → `dom` elements.\n- `PointerHandler`: Handles pointer events from the `browser`.\n\n```ts ignore\nimport {\n  EventSystem,\n  Graph,\n  makeSingleNode,\n  Matrix2D,\n  World,\n} from \"@carefree0910/cfb-core\";\nimport * as web from \"@carefree0910/cfb-web\";\n\nconst node = makeSingleNode({\n  type: \"rectangle\",\n  uuid: \"0\",\n  alias: \"rect\",\n  transform: Matrix2D.from(50, 50, 50, 50),\n  params: {\n    fillParamsList: [{ type: \"color\", color: \"#ff0000\", opacity: 0.25 }],\n  },\n  z: 0,\n});\nconst graph = Graph.fromNodes([node]);\nconst renderer = new web.WebRenderer(graph);\nconst pointerHandler = new web.PointerHandler();\nconst eventSystem = new EventSystem([pointerHandler]);\nconst world = new World({ renderer, eventSystem });\nworld.start().then(() => console.log(world));\n```\n","readmeFilename":"README.md"}