{"_id":"@canvas-drag/vue","_rev":"7-d4e1764107ae27da5ea3e4718f692983","name":"@canvas-drag/vue","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.0":{"name":"@canvas-drag/vue","version":"1.0.0","keywords":[],"author":"","license":"MIT","_id":"@canvas-drag/vue@1.0.0","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"dist":{"shasum":"867382c10164f9cbb9021a1d5293dd5b93a4000e","tarball":"https://registry.npmjs.org/@canvas-drag/vue/-/vue-1.0.0.tgz","fileCount":7,"integrity":"sha512-uq3DRhHI2Ghl3LV4jf92K7ySW7Rf+OcV2lLmet4PCpr2J23fDTEzhIGeumhxfDS0mOLECHo9Uyx3zyXsEIrQsQ==","signatures":[{"sig":"MEQCICrlwyDjUK8GHPVSAuzaWXDfVo/WOc0zO6j0ZEu5cG9jAiBd2Byz2aQUrE4yTQSaT/lyL+mhC/HOkx8YfQ8Ea9Le7g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23271},"main":"dist/index.cjs.js","type":"module","_from":"file:canvas-drag-vue-1.0.0.tgz","types":"dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"build":"npx vue-tsc -p tsconfig.declaration.json && cross-env NODE_ENV=production rollup -c","watch":"rollup -c -w","build:dev":"rollup -c"},"_npmUser":{"name":"cyuyun","email":"897908015@qq.com"},"_resolved":"C:\\Users\\chyuy\\AppData\\Local\\Temp\\9f555e7f84d7e49a5fb8237bed0150af\\canvas-drag-vue-1.0.0.tgz","_integrity":"sha512-uq3DRhHI2Ghl3LV4jf92K7ySW7Rf+OcV2lLmet4PCpr2J23fDTEzhIGeumhxfDS0mOLECHo9Uyx3zyXsEIrQsQ==","_npmVersion":"10.9.2","description":"vue form canvas drag","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.26"},"peerDependencies":{"vue":"^3.2.30","@canvas-drag/core":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_1.0.0_1768959992411_0.19843443397665528","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@canvas-drag/vue","version":"1.0.1","keywords":[],"author":"","license":"MIT","_id":"@canvas-drag/vue@1.0.1","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"dist":{"shasum":"789aea24214e7deb7fe695d1132888bfa1329abb","tarball":"https://registry.npmjs.org/@canvas-drag/vue/-/vue-1.0.1.tgz","fileCount":8,"integrity":"sha512-AdF7/g4ydwmHCBah6TMAzUhUvZ+iwNHSg/TXO7VSkL9zujQOhtHHXngjU5BtnVYVQOfcb8V9VAS9IW/q36PvaQ==","signatures":[{"sig":"MEUCIQDNFXeVk+YcHxx3zZ2I+MjvsdaOYF7rULPwHS26mTqAWwIgRxDrnqBD5Pt2hh+ioqOCIYXP47Fsq8I4zongCxJ5P+M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26479},"main":"dist/index.cjs.js","type":"module","_from":"file:canvas-drag-vue-1.0.1.tgz","types":"dist/types.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.esm.js","exports":{".":{"types":"./dist/types.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"build":"npx vue-tsc -p tsconfig.declaration.json && cross-env NODE_ENV=production rollup -c","watch":"rollup -c -w","build:dev":"rollup -c"},"_npmUser":{"name":"cyuyun","email":"897908015@qq.com"},"_resolved":"C:\\Users\\chyuy\\AppData\\Local\\Temp\\2ae9dc6af53190ce202c2d8072917673\\canvas-drag-vue-1.0.1.tgz","_integrity":"sha512-AdF7/g4ydwmHCBah6TMAzUhUvZ+iwNHSg/TXO7VSkL9zujQOhtHHXngjU5BtnVYVQOfcb8V9VAS9IW/q36PvaQ==","_npmVersion":"10.9.2","description":"vue form canvas drag","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.26"},"peerDependencies":{"vue":"^3.2.30","@canvas-drag/core":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/vue_1.0.1_1768966166077_0.10563439773198291","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@canvas-drag/vue","version":"1.0.2","keywords":[],"author":"","license":"MIT","_id":"@canvas-drag/vue@1.0.2","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"dist":{"shasum":"301d4fbf71789fe92a2c8320dd18017874e7ada0","tarball":"https://registry.npmjs.org/@canvas-drag/vue/-/vue-1.0.2.tgz","fileCount":7,"integrity":"sha512-Py5NKkNDvaKEep/HxqfogpUzPsIRl4nboLL2Sbt7CUv4nWlY/BUJUPfpu2p4FGPyL/EC7rC5wf8+YSRjGyPXyQ==","signatures":[{"sig":"MEUCIQDx5ODk5k7UCbQfb57hbD9mFFYyd4uhyTo/t1hAMFGnogIgXUOioqwwWIZ715qLWxSnP+AdIVftA1iI5pqQNMNXzt0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26418},"main":"dist/index.cjs.js","type":"module","_from":"file:canvas-drag-vue-1.0.2.tgz","types":"dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"build":"npx vue-tsc -p tsconfig.declaration.json && cross-env NODE_ENV=production rollup -c && pnpm run clean","clean":"rimraf dist/types","watch":"rollup -c -w","build:dev":"rollup -c"},"_npmUser":{"name":"cyuyun","email":"897908015@qq.com"},"_resolved":"C:\\Users\\chyuy\\AppData\\Local\\Temp\\b9e767ba29fc4e309498c459a4616a81\\canvas-drag-vue-1.0.2.tgz","_integrity":"sha512-Py5NKkNDvaKEep/HxqfogpUzPsIRl4nboLL2Sbt7CUv4nWlY/BUJUPfpu2p4FGPyL/EC7rC5wf8+YSRjGyPXyQ==","_npmVersion":"10.9.2","description":"vue form canvas drag","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.26"},"peerDependencies":{"vue":"^3.2.30","@canvas-drag/core":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/vue_1.0.2_1768968445880_0.756768304007774","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@canvas-drag/vue","version":"1.0.3","keywords":["vue","drag","low code","canvas","canvas drag"],"author":"","license":"MIT","_id":"@canvas-drag/vue@1.0.3","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"dist":{"shasum":"746f248f597ce37cb5043ce4af9effefbb07a2f5","tarball":"https://registry.npmjs.org/@canvas-drag/vue/-/vue-1.0.3.tgz","fileCount":7,"integrity":"sha512-XABluDGEelCsaFPlHb7ujIcCb965i4B4Qmpb3DEAaBiRsBwsHjEwtMhjU5uoLzeGI/8LLO0qVOb6ywzYSmBpNQ==","signatures":[{"sig":"MEYCIQCtXnNub9kIAU7EuoDEdoQZ79t7vFSAkU/6O/bYkc1sjwIhALlfa2QJjHRTv5Jxy8eQCw5W63+yIGuC6CKiPdc3hZYJ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26516},"main":"dist/index.cjs.js","type":"module","_from":"file:canvas-drag-vue-1.0.3.tgz","types":"dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"build":"npx vue-tsc -p tsconfig.declaration.json && cross-env NODE_ENV=production rollup -c && pnpm run clean","clean":"rimraf dist/types","watch":"rollup -c -w","build:dev":"rollup -c"},"_npmUser":{"name":"cyuyun","email":"897908015@qq.com"},"_resolved":"C:\\Users\\chyuy\\AppData\\Local\\Temp\\836ee33696a7377a0744c058d5021009\\canvas-drag-vue-1.0.3.tgz","_integrity":"sha512-XABluDGEelCsaFPlHb7ujIcCb965i4B4Qmpb3DEAaBiRsBwsHjEwtMhjU5uoLzeGI/8LLO0qVOb6ywzYSmBpNQ==","_npmVersion":"10.9.2","description":"vue form canvas drag","directories":{},"_nodeVersion":"22.16.0","dependencies":{"@canvas-drag/core":"^1.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.26"},"peerDependencies":{"vue":"^3.2.30"},"_npmOperationalInternal":{"tmp":"tmp/vue_1.0.3_1768969521271_0.7058175792127326","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@canvas-drag/vue","version":"1.0.4","keywords":["vue","drag","low code","canvas","canvas-drag","@canvas-drag/vue","@canvas-drag/core","@canvas-drag/plugins"],"author":"","license":"MIT","_id":"@canvas-drag/vue@1.0.4","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"dist":{"shasum":"b0207a5dbdce63fecb2db6e928542146b924f6dc","tarball":"https://registry.npmjs.org/@canvas-drag/vue/-/vue-1.0.4.tgz","fileCount":6,"integrity":"sha512-vwIlCbxLy/JUhSb4yR6xU2WXDYz6fl89BQibBYll8XaAtMmJnaYgzty2M6GHuTy7ct9B9/m1Xb0hetyvibgz1A==","signatures":[{"sig":"MEQCICx0+2fFFhbX55pdxpd7MinlL5b9B8cIVQuu8tnZcI3kAiABWee87tUP6ydFixQi6dkVz2/T1aBCK/nSx2jMgWUE+Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28431},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"gitHead":"5426709df3a3ad86cf6d38266ec8af9dad4d8c35","scripts":{"build":"npx vue-tsc -p tsconfig.declaration.json && cross-env NODE_ENV=production rollup -c && pnpm run clean","clean":"rimraf dist/types","watch":"rollup -c -w","build:dev":"rollup -c"},"_npmUser":{"name":"cyuyun","email":"897908015@qq.com"},"_npmVersion":"10.9.4","description":"vue form canvas drag","directories":{},"_nodeVersion":"22.21.1","dependencies":{"@canvas-drag/core":"workspace:^"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.11.1","devDependencies":{"vue":"^3.5.26"},"peerDependencies":{"vue":"^3.2.30"},"_npmOperationalInternal":{"tmp":"tmp/vue_1.0.4_1784858944787_0.45918194308124094","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@canvas-drag/vue","version":"1.0.5","keywords":["vue","drag","low code","canvas","canvas-drag","@canvas-drag/vue","@canvas-drag/core","@canvas-drag/plugins"],"author":"","license":"MIT","_id":"@canvas-drag/vue@1.0.5","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"dist":{"shasum":"1219e4029987df98736e3bb547f85e22fb7c589b","tarball":"https://registry.npmjs.org/@canvas-drag/vue/-/vue-1.0.5.tgz","fileCount":6,"integrity":"sha512-mlOj36NSk6QPY/aqdWnJ8OBmFqLKN7ggR13oHmpYaM1rjx94gj4RznJUkRDh3iHsxuXFRYqA/bn2erdYPQW7Aw==","signatures":[{"sig":"MEQCIGbC52WUul5X2f/Pqr+nPggTT/oUrjEvgFLq/0EMqTH2AiAF9M7kCbZvMBHm+rYwhHnUc/nzKgtITCjjqW2+q3AQKg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28426},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"gitHead":"5426709df3a3ad86cf6d38266ec8af9dad4d8c35","scripts":{"build":"npx vue-tsc -p tsconfig.declaration.json && cross-env NODE_ENV=production rollup -c && pnpm run clean","clean":"rimraf dist/types","watch":"rollup -c -w","build:dev":"rollup -c"},"_npmUser":{"name":"cyuyun","email":"897908015@qq.com"},"_npmVersion":"10.9.4","description":"vue form canvas drag","directories":{},"_nodeVersion":"22.21.1","dependencies":{"@canvas-drag/core":"^1.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.11.1","devDependencies":{"vue":"^3.5.26"},"peerDependencies":{"vue":"^3.2.30"},"_npmOperationalInternal":{"tmp":"tmp/vue_1.0.5_1784859308063_0.6383928959164535","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@canvas-drag/vue","version":"1.0.6","description":"vue form canvas drag","type":"module","main":"dist/index.cjs.js","module":"dist/index.esm.js","unpkg":"dist/index.umd.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js","types":"./dist/index.d.ts"},"./package.json":"./package.json"},"scripts":{"build":"npx vue-tsc -p tsconfig.declaration.json && cross-env NODE_ENV=production rollup -c && pnpm run clean","build:dev":"rollup -c","watch":"rollup -c -w","clean":"rimraf dist/types"},"keywords":["vue","drag","low code","canvas","canvas-drag","@canvas-drag/vue","@canvas-drag/core","@canvas-drag/plugins"],"author":"","license":"MIT","publishConfig":{"access":"public"},"packageManager":"pnpm@10.11.1","peerDependencies":{"vue":"^3.2.30"},"devDependencies":{"vue":"^3.5.26"},"dependencies":{"@canvas-drag/core":"^1.0.3"},"_id":"@canvas-drag/vue@1.0.6","gitHead":"730bd76dc29d89623e601b0e8ad9cd178e789c26","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-2xuZ6K2yIn9LgEBWy5YRkZX9udvyacB7N1e5IEXeCFwWu91nvpLMP6LtvWcvTQPjvalxxnA7WbcHf8cYXxUTxA==","shasum":"5f31705719ee83a79d9c0342bba80cc4211fc521","tarball":"https://registry.npmjs.org/@canvas-drag/vue/-/vue-1.0.6.tgz","fileCount":6,"unpackedSize":29597,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDfPWTA7DP2192NRnGP5TvoFSCSfZ+1UwBfjmQ9z/uk/AIgb6XsaMZ7RTJnJLAyjfGynRzTi5MOnGt049cCOV9Zj+0="}]},"_npmUser":{"name":"cyuyun","email":"897908015@qq.com"},"directories":{},"maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_1.0.6_1784875604873_0.24300964816201698"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-21T01:46:32.283Z","modified":"2026-07-24T06:46:45.170Z","1.0.0":"2026-01-21T01:46:32.556Z","1.0.1":"2026-01-21T03:29:26.234Z","1.0.2":"2026-01-21T04:07:26.024Z","1.0.3":"2026-01-21T04:25:21.439Z","1.0.4":"2026-07-24T02:09:04.937Z","1.0.5":"2026-07-24T02:15:08.319Z","1.0.6":"2026-07-24T06:46:45.002Z"},"license":"MIT","keywords":["vue","drag","low code","canvas","canvas-drag","@canvas-drag/vue","@canvas-drag/core","@canvas-drag/plugins"],"description":"vue form canvas drag","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"readme":"# Vue的画布拖拽组件\r\n\r\n## 📢 介绍\r\n\r\n@canvas-drag/vue组件支持以下功能：\r\n\r\n- 画布拖拽\r\n- 画布缩放\r\n- 元素拖拽\r\n- 元素旋转\r\n- 元素缩放\r\n- 元素组合拖拽\r\n- 元素碰撞检测\r\n- 吸附\r\n- 辅助线\r\n\r\n## ⚡ 使用说明\r\n\r\n#### @canvas-drag/vue组件依赖@canvas-drag/core和@canvas-drag/plugins库\r\n\r\n#### @canvas-drag/core是核心代码，@canvas-drag/plugins是插件系统\r\n\r\n### 安装依赖\r\n\r\n```sh\r\nnpm i @canvas-drag/vue\r\nnpm i @canvas-drag/core\r\nnpm i @canvas-drag/plugins\r\n# or\r\npnpm i @canvas-drag/vue\r\npnpm i @canvas-drag/core\r\npnpm i @canvas-drag/plugins\r\n# or\r\nyarn i @canvas-drag/vue\r\nyarn i @canvas-drag/core\r\nyarn i @canvas-drag/plugins\r\n```\r\n\r\n### 使用\r\n\r\n```html\r\n<template>\r\n  <CanvasDrag v-model:elements=\"elements\" :plugins=\"plugins\"> </CanvasDrag>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import CanvasDrag from '@canvas-drag/vue';\r\n  import type { ElementType, Plugin } from '@canvas-drag/core';\r\n  import {\r\n    rotatePlugin,\r\n    selectPlugin,\r\n    scalePlugin,\r\n    dragPlugin,\r\n    smartGuidesPlugin,\r\n    collisionPlugin,\r\n    scaleCanvasPlugin,\r\n    dragCanvasPlugin,\r\n  } from '@canvas-drag/plugins';\r\n\r\n  const plugins: Plugin[] = [\r\n    rotatePlugin(),\r\n    selectPlugin(),\r\n    scalePlugin(),\r\n    dragPlugin(true),\r\n    smartGuidesPlugin(),\r\n    collisionPlugin(),\r\n    scaleCanvasPlugin(),\r\n    dragCanvasPlugin(),\r\n  ];\r\n\r\n  const elements = reactive<ElementType[]>([\r\n    {\r\n      id: '1',\r\n      width: 100,\r\n      height: 100,\r\n      left: 50,\r\n      top: 50,\r\n      angle: 45,\r\n      disabled: true,\r\n      style: { backgroundColor: '#ff5555' },\r\n    },\r\n    {\r\n      id: '2',\r\n      width: 100,\r\n      height: 100,\r\n      left: 200,\r\n      top: 200,\r\n      style: { backgroundColor: '#5555ff' },\r\n    },\r\n    {\r\n      id: '3',\r\n      width: 100,\r\n      height: 100,\r\n      left: 350,\r\n      top: 350,\r\n      style: { backgroundColor: '#55ff55' },\r\n    },\r\n  ]);\r\n</script>\r\n```\r\n\r\n### 事件\r\n\r\n| 事件名 | 说明   | 参数类型                                                                           | 版本  |\r\n| ------ | ------ | ---------------------------------------------------------------------------------- | ----- |\r\n| drag   | 拖拽   | `(data: Record<string, { left: number; top: number }>, ids: string[]) => void`     | 1.0.0 |\r\n| scale  | 缩放   | `(data: Record<string, { width: number; height: number }>, ids: string[]) => void` | 1.0.0 |\r\n| rotate | 旋转   | `(data: Record<string, { angle: number }>, ids: string[]) => void`                 | 1.0.0 |\r\n| change | 变化   | `(data: any[]) => void`                                                            | 1.0.0 |\r\n| custom | 自定义 | `(data: { type: string; data: any }) => void`                                      | 1.0.0 |\r\n| collision | 碰撞检查 | `(ids: string[]) => void`                                                     | 1.0.0 |\r\n\r\n### 插槽\r\n\r\n| 名称   | 说明   | 参数类型                                  | 版本  |\r\n| ------ | ------ | ---------------------------------------  | ----- |\r\n| item   | 项目   | `(data: {id: string; item: any}) => void` | 1.0.0 |\r\n| pos    | 八个点 | `() => void`                              | 1.0.0 |\r\n| select | 选择框 | `(data: any) => void`                     | 1.0.0 |\r\n","readmeFilename":"README.md"}