{"_id":"@adraw/vue","_rev":"4-8b493b78d7c8c3bf48ba739b03cdcb3e","name":"@adraw/vue","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@adraw/vue","version":"0.1.0","keywords":["canvas","drawing","infinite","javascript","typescript","vue","vue3","whiteboard"],"author":"Vladimir Antonio F. C.","license":"MIT","_id":"@adraw/vue@0.1.0","maintainers":[{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"}],"homepage":"https://github.com/vladiantio/adraw/tree/main/packages/vue#readme","bugs":{"url":"https://github.com/vladiantio/adraw/issues"},"dist":{"shasum":"daa4bf37fcfb736e2f1f2aab62eb349fe4282e54","tarball":"https://registry.npmjs.org/@adraw/vue/-/vue-0.1.0.tgz","fileCount":9,"integrity":"sha512-ouvdXGuy1Za1j4HZGpMNgxZ+OhSbv548A/wlTqnU0iqaIva1qB+lCS5QjuJvVt491RxLJBDhoMdU1OhNu1Lfzg==","signatures":[{"sig":"MEUCIDbiw5ACBJax5AyWGfaQWxuHeJKrSvOu8n/OrlElQVT3AiEAijUOS2csbewjC8EPlQVKZG1gfIM0ZGVHvazHKm0m1wM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36222},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"scripts":{"dev":"tsdown --watch","build":"tsdown --minify"},"_npmUser":{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"},"repository":{"url":"git+https://github.com/vladiantio/adraw.git","type":"git","directory":"packages/vue"},"description":"Vue bindings for adraw — composables and components for building canvas-based drawing and whiteboard UIs.","directories":{},"_nodeVersion":"26.0.0","dependencies":{"@adraw/core":"0.1.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.29","@vue/tsconfig":"^0.8.1"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.1.0_1782953899663_0.9827657178740659","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@adraw/vue","version":"0.1.1","keywords":["canvas","drawing","infinite","javascript","typescript","vue","vue3","whiteboard"],"author":"Vladimir Antonio F. C.","license":"MIT","_id":"@adraw/vue@0.1.1","maintainers":[{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"}],"homepage":"https://github.com/vladiantio/adraw/tree/main/packages/vue#readme","bugs":{"url":"https://github.com/vladiantio/adraw/issues"},"dist":{"shasum":"5a1da1cc8820e254df8bf0d90f00147bf36949d7","tarball":"https://registry.npmjs.org/@adraw/vue/-/vue-0.1.1.tgz","fileCount":9,"integrity":"sha512-Ma+nPvrTYWtV3leLY/ZeFfDS3wLivXKy3d81xT9u7SX41kcEqAwhtYtPDqHWL6NgRgieNE2ckloB8lkZ02xjsg==","signatures":[{"sig":"MEUCIQDRESH9ZNyOa6jBJocnuzuucvwlBOASYD0Ptln5HGlgzgIgMrlEpxBb8iPO4PsXSJPOv7w67U7Y0y9dz6/g7Kn1Tl0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45777},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"scripts":{"dev":"tsdown --watch","build":"tsdown --minify"},"_npmUser":{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"},"repository":{"url":"git+https://github.com/vladiantio/adraw.git","type":"git","directory":"packages/vue"},"description":"Vue bindings for adraw — composables and components for building canvas-based drawing and whiteboard UIs.","directories":{},"_nodeVersion":"26.0.0","dependencies":{"@adraw/core":"0.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.29","@vue/tsconfig":"^0.8.1"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.1.1_1783524271575_0.05157974521396125","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@adraw/vue","version":"0.1.2","keywords":["canvas","drawing","infinite","javascript","typescript","vue","vue3","whiteboard"],"author":"Vladimir Antonio F. C.","license":"MIT","_id":"@adraw/vue@0.1.2","maintainers":[{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"}],"homepage":"https://github.com/vladiantio/adraw/tree/main/packages/vue#readme","bugs":{"url":"https://github.com/vladiantio/adraw/issues"},"dist":{"shasum":"b204a39f38da13a5a2c7daf71e32c1f38802b90d","tarball":"https://registry.npmjs.org/@adraw/vue/-/vue-0.1.2.tgz","fileCount":9,"integrity":"sha512-dBT6uJQ/TkwK5IbwS4w4Gv94mblWEhZpUrFtejDy9Kc4lIc85GGgacFdaXEgL2LNs4r/8AOSTOyrXK9H/tqSoQ==","signatures":[{"sig":"MEUCIQDcfODhc/lOgC0Bflqv9gsMNtS9ZpzaFjvFjh2vEnpjLgIgGl+uuUvfTvMmnaMrZh/OOOkSEfuSk9GtXfK5G2e4gII=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":46013},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"scripts":{"dev":"tsdown --watch","build":"tsdown --minify"},"_npmUser":{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"},"repository":{"url":"git+https://github.com/vladiantio/adraw.git","type":"git","directory":"packages/vue"},"description":"Vue bindings for adraw — composables and components for building canvas-based drawing and whiteboard UIs.","directories":{},"_nodeVersion":"26.0.0","dependencies":{"@adraw/core":"0.2.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.29","@vue/tsconfig":"^0.8.1"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.1.2_1784272390836_0.19303964565173604","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@adraw/vue","version":"0.1.3","description":"Vue bindings for adraw — composables and components for building canvas-based drawing and whiteboard UIs.","keywords":["canvas","drawing","infinite","javascript","typescript","vue","vue3","whiteboard"],"homepage":"https://github.com/adrawdev/adraw/tree/main/packages/vue#readme","bugs":{"url":"https://github.com/adrawdev/adraw/issues"},"license":"MIT","author":"Vladimir Antonio F. C.","repository":{"type":"git","url":"git+https://github.com/adrawdev/adraw.git","directory":"packages/vue"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"dependencies":{"@adraw/core":"0.3.0"},"devDependencies":{"@vue/tsconfig":"^0.9.1","vue":"^3.5.41"},"peerDependencies":{"vue":">=3.0.0"},"scripts":{"build":"tsdown --minify","dev":"tsdown --watch"},"_nodeVersion":"26.0.0","_id":"@adraw/vue@0.1.3","dist":{"integrity":"sha512-cJVJcvT4jYijcvU/GzGCvt0396e3MFFJdrCCJ2YDO3UnsY29gDEowjOpLjV2xBQcn5f4JXawl9aR7DVbgpLOPQ==","shasum":"9c5e67a04e3f15b5d15978d5afcdf1c5c5b18320","tarball":"https://registry.npmjs.org/@adraw/vue/-/vue-0.1.3.tgz","fileCount":9,"unpackedSize":50616,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDi4ns0L0oLv8QTG9E0y7UDJVRx7PI3OQ4oIu52kBDtzwIhAPVV/Lz37ywK8eQBHZbHWcKLylmLC04SE+MIo0l0wcC/"}]},"_npmUser":{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"},"directories":{},"maintainers":[{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_0.1.3_1789012352070_0.3027543730323421"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-02T00:58:19.563Z","modified":"2026-09-10T03:52:32.380Z","0.1.0":"2026-07-02T00:58:19.839Z","0.1.1":"2026-07-08T15:24:31.718Z","0.1.2":"2026-07-17T07:13:10.966Z","0.1.3":"2026-09-10T03:52:32.208Z"},"bugs":{"url":"https://github.com/adrawdev/adraw/issues"},"author":"Vladimir Antonio F. C.","license":"MIT","homepage":"https://github.com/adrawdev/adraw/tree/main/packages/vue#readme","keywords":["canvas","drawing","infinite","javascript","typescript","vue","vue3","whiteboard"],"repository":{"type":"git","url":"git+https://github.com/adrawdev/adraw.git","directory":"packages/vue"},"description":"Vue bindings for adraw — composables and components for building canvas-based drawing and whiteboard UIs.","maintainers":[{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"}],"readme":"# @adraw/vue\n\nVue bindings for adraw — composables and components for building canvas-based drawing and whiteboard UIs.\n\n## Installation\n\n```bash\npnpm add @adraw/vue\n\n# npm\nnpm install @adraw/vue\n```\n\nVue 3.0 or later is required as a peer dependency.\n\n## Quick start\n\nWrap your app (or the part that needs the canvas) with `CanvasProvider`, then render the `Canvas` component wherever you want the drawing surface. Composables access the canvas state anywhere inside that provider.\n\n```vue\n<script setup lang=\"ts\">\nimport { Canvas, CanvasProvider, useTool } from \"@adraw/vue\"\n</script>\n\n<template>\n  <CanvasProvider>\n    <Toolbar />\n    <Canvas style=\"flex: 1\" />\n  </CanvasProvider>\n</template>\n```\n\n```vue\n<!-- Toolbar.vue -->\n<script setup lang=\"ts\">\nimport { useTool } from \"@adraw/vue\"\n\nconst { tool, setTool } = useTool()\n</script>\n\n<template>\n  <div>\n    <button :class=\"{ active: tool === 'select' }\" @click=\"setTool('select')\">\n      Select\n    </button>\n    <button :class=\"{ active: tool === 'draw' }\" @click=\"setTool('draw')\">\n      Draw\n    </button>\n    <button\n      :class=\"{ active: tool === 'rectangle' }\"\n      @click=\"setTool('rectangle')\"\n    >\n      Rectangle\n    </button>\n  </div>\n</template>\n```\n\n### Multiple canvases\n\nEach `CanvasProvider` creates its own isolated canvas instance, so nesting several `CanvasProvider`/`Canvas` pairs on the same page gives you independent canvases — composables called inside a given subtree always resolve to the nearest ancestor provider.\n\n```vue\n<template>\n  <CanvasProvider>\n    <Canvas />\n  </CanvasProvider>\n  <CanvasProvider>\n    <Canvas />\n  </CanvasProvider>\n</template>\n```\n\n## Components\n\n### `CanvasProvider`\n\nCreates the underlying canvas instance and makes it available to `Canvas` and all composables rendered inside it.\n\n```vue\n<CanvasProvider :options=\"{ snapping: { snapEnabled: true } }\">\n  ...\n</CanvasProvider>\n```\n\n| Prop      | Type               | Description                        |\n| --------- | ------------------ | ---------------------------------- |\n| `options` | `CanvasVueOptions` | Initial snapping / viewport config |\n\n### `Canvas`\n\nMounts the drawing surface inside a `div` that fills its parent. Must be rendered inside a `CanvasProvider`.\n\n```vue\n<Canvas class=\"my-canvas\" :style=\"{ borderRadius: '8px' }\" />\n```\n\n| Prop    | Type                  | Description   |\n| ------- | --------------------- | ------------- |\n| `class` | `string`              | CSS class     |\n| `style` | `Record<string, any>` | Inline styles |\n\n## Composables\n\nAll composables must be called inside a `CanvasProvider` — they throw if no provider is found in the ancestor tree.\n\n### `createCanvas(options?)`\n\nLow-level factory used internally by `CanvasProvider`. Returns `{ core, state, vanilla }`.\n\n- `core` — the `AdrawCanvas` instance\n- `state` — a Vue `reactive` object with `elements`, `viewport`, `activeTool`, and `selectedIds`\n- `vanilla` — a `ref` to the `AdrawCanvas` instance (set after `core.mount()`)\n\nCall this directly only if you want to manage mounting/destruction yourself instead of using `CanvasProvider`/`Canvas`.\n\n### `useCanvas()`\n\nReturns the canvas context (`{ core, state, vanilla }`) provided by the nearest `CanvasProvider`. Throws if called outside one.\n\n### `useTool()`\n\n```ts\nconst { tool, setTool } = useTool()\n// tool: getter — \"select\" | \"hand\" | \"draw\" | \"eraser\" | \"rectangle\" | \"ellipse\" | \"line\"\nsetTool(\"draw\")\n```\n\n### `useViewport()`\n\n```ts\nconst { viewport, setViewport, zoomIn, zoomOut, resetZoom, zoomToFit } =\n  useViewport()\n// viewport: getter — { x: number, y: number, zoom: number }\n```\n\n### `useHistory()`\n\n```ts\nconst { undo, redo, canUndo, canRedo } = useHistory()\n```\n\n### `useSelection()`\n\n```ts\nconst { selectedIds, elements, selectAll, clearSelection, deleteSelected } =\n  useSelection()\n```\n\n### `useTransformOverlay()`\n\n```ts\nconst { hideWhileTransforming, setHideWhileTransforming } =\n  useTransformOverlay()\n// hideWhileTransforming: getter — whether the selection bounding box +\n// resize/rotation handles are hidden while a resize/rotation gesture is in\n// progress (defaults to true; set via the hideOverlayWhileTransforming option)\nsetHideWhileTransforming(false)\n```\n\n## License\n\nMIT\n","readmeFilename":""}