{"_id":"@canvas-drag/core","_rev":"4-31779258dab02044c82b8118bd2f1ba5","name":"@canvas-drag/core","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@canvas-drag/core","version":"1.0.0","keywords":[],"author":"","license":"MIT","_id":"@canvas-drag/core@1.0.0","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"dist":{"shasum":"788287b18c2e7e85ed00ed69340714db04d07d1d","tarball":"https://registry.npmjs.org/@canvas-drag/core/-/core-1.0.0.tgz","fileCount":6,"integrity":"sha512-54XfPue83G2cTWXTDnuNI18rQuXQI4oajftVlZ0U6U6AKs+WiXUI9SJdXS7XmmytQ+s4f1kWvQmmk8cCD4Ojuw==","signatures":[{"sig":"MEUCIQCTuyM5+yLtOUiQwiKBcM4zsvQZ6nM5BVBQIsw3r8aspwIgFwtDzZk4+1gVOc1C6q1+nDByfwoe/oCJqi1r0Y/Kg7Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38102},"main":"dist/index.cjs.js","type":"module","_from":"file:canvas-drag-core-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":"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\\7baf04a922854804763e27affa3d1de9\\canvas-drag-core-1.0.0.tgz","_integrity":"sha512-54XfPue83G2cTWXTDnuNI18rQuXQI4oajftVlZ0U6U6AKs+WiXUI9SJdXS7XmmytQ+s4f1kWvQmmk8cCD4Ojuw==","_npmVersion":"10.9.2","description":"low code canvas drag","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_1.0.0_1768959992411_0.8709201973978853","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@canvas-drag/core","version":"1.0.1","keywords":[],"author":"","license":"MIT","_id":"@canvas-drag/core@1.0.1","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"dist":{"shasum":"fdcec2cd4212e42680b357e0eadbb5a563901b0f","tarball":"https://registry.npmjs.org/@canvas-drag/core/-/core-1.0.1.tgz","fileCount":7,"integrity":"sha512-IqyiQpK51AecjcRHMDzGVBhqMivyMqBf9pUtAf+LTBEcancBxaouDeSPRJVRIInH7FGXb3BgBoEvxZ0aHmZU/g==","signatures":[{"sig":"MEUCIQD4SlvjaXMfnFSPf/ZVWr9Fe2CX5njdOCPmbHFxniIvHwIgFKky3wwBElD7s//zI0i8ie6c2lKXtMpknPuQ+tF6U5o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45811},"main":"dist/index.cjs.js","type":"module","_from":"file:canvas-drag-core-1.0.1.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":"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\\6d9cb843b9338d8f236a627a1d77ab5a\\canvas-drag-core-1.0.1.tgz","_integrity":"sha512-IqyiQpK51AecjcRHMDzGVBhqMivyMqBf9pUtAf+LTBEcancBxaouDeSPRJVRIInH7FGXb3BgBoEvxZ0aHmZU/g==","_npmVersion":"10.9.2","description":"low code canvas drag","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_1.0.1_1768966166475_0.4148700466418165","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@canvas-drag/core","version":"1.0.2","keywords":["vue","react","drag","low code","canvas","canvas drag"],"author":"","license":"MIT","_id":"@canvas-drag/core@1.0.2","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"dist":{"shasum":"4a8a69aa7196580665211b04584fabb64949f1f5","tarball":"https://registry.npmjs.org/@canvas-drag/core/-/core-1.0.2.tgz","fileCount":7,"integrity":"sha512-YDG9fMsIjxCbQDiE9xrI/81mFsOsDNo7ItBmOLIs2WjEwAYzVd3y9so+siCB+XIiQfjCbQIUaJehJKNUhwt4dw==","signatures":[{"sig":"MEUCIQCGG0pZb2xUJlUVjWcmS4cqFLR4L1plTZXLzg7Yrm89OwIgCsIfpLAO+LJmdYIEWr1akb1rQly4KYZhh9xHKYK8EIA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40794},"main":"dist/index.cjs.js","type":"module","_from":"file:canvas-drag-core-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":"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\\41201c2b6b4bc8e217ec9f16a8fa5530\\canvas-drag-core-1.0.2.tgz","_integrity":"sha512-YDG9fMsIjxCbQDiE9xrI/81mFsOsDNo7ItBmOLIs2WjEwAYzVd3y9so+siCB+XIiQfjCbQIUaJehJKNUhwt4dw==","_npmVersion":"10.9.2","description":"low code canvas drag","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/core_1.0.2_1768973569832_0.7703415501674011","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@canvas-drag/core","version":"1.0.3","description":"low code 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":"cross-env NODE_ENV=production rollup -c","build:dev":"rollup -c","watch":"rollup -c -w"},"keywords":["vue","react","drag","low code","canvas","canvas-drag","@canvas-drag/vue","@canvas-drag/core","@canvas-drag/plugins"],"author":{"name":"YuYun"},"license":"MIT","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/nimbleui/canvas-drag.git"},"packageManager":"pnpm@10.11.1","_id":"@canvas-drag/core@1.0.3","gitHead":"730bd76dc29d89623e601b0e8ad9cd178e789c26","bugs":{"url":"https://github.com/nimbleui/canvas-drag/issues"},"homepage":"https://github.com/nimbleui/canvas-drag#readme","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-lg8qHa528QaRCePCMerv765WaBU6LbaRQ5ukMvoCKjRyMVvStcR2PKwY/uluu1QiuwA1xFcj0fhcxa7MxWhUww==","shasum":"d6674a4a26b3b1ad276d7236c29d6a59d84a7794","tarball":"https://registry.npmjs.org/@canvas-drag/core/-/core-1.0.3.tgz","fileCount":6,"unpackedSize":43725,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICQIzo4keWC73pzOBmvnBdwNXyI+Rdo/6Uwbo+IyPfLuAiBeJtYphY4Iby0Na7m9QOyBjDMGlvl6GNTuUwPHEVpDtQ=="}]},"_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/core_1.0.3_1784875586353_0.11765132345041351"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-21T01:46:32.325Z","modified":"2026-07-24T06:46:26.610Z","1.0.0":"2026-01-21T01:46:32.586Z","1.0.1":"2026-01-21T03:29:26.615Z","1.0.2":"2026-01-21T05:32:50.041Z","1.0.3":"2026-07-24T06:46:26.473Z"},"license":"MIT","keywords":["vue","react","drag","low code","canvas","canvas-drag","@canvas-drag/vue","@canvas-drag/core","@canvas-drag/plugins"],"description":"low code canvas drag","maintainers":[{"name":"cyuyun","email":"897908015@qq.com"}],"readme":"# @canvas-drag/core画布拖拽插件\r\n\r\n## 📢 介绍\r\n\r\n## ⚡ 使用说明\r\n\r\n#### @canvas-drag/core是核心代码，@canvas-drag/plugins是插件系统\r\n\r\n### 安装依赖\r\n\r\n```sh\r\nnpm i @canvas-drag/core\r\nnpm i @canvas-drag/plugins\r\n# or\r\npnpm i @canvas-drag/core\r\npnpm i @canvas-drag/plugins\r\n# or\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/** @canvas-drag/core要配合@canvas-drag/plugins使用，\r\n@canvas-drag/core把画布中分成五中操作类型元素分别，以元素中的data-drag-handle属性区分\r\ncanvas: 画布类型 drag：可拖拽类型 scale：改变大小 rotate：旋转 */\r\n<template>\r\n  <div\r\n    ref=\"canvasRef\"\r\n    :style=\"{\r\n      transform: `translate(${data.zoom.x}px, ${data.zoom.y}px) scale(${data.zoom.zoom})`,\r\n      transformOrigin: '0 0',\r\n    }\"\r\n    data-drag-handle=\"canvas\"\r\n    class=\"canvas\"\r\n  >\r\n    <div\r\n      v-for=\"item in elements\"\r\n      :key=\"item.id\"\r\n      :data-element-id=\"item.id\"\r\n      data-drag-handle=\"drag\"\r\n      class=\"canvas__drag\"\r\n      :style=\"{\r\n        ...item.style,\r\n        width: `${item.width}px`,\r\n        height: `${item.height}px`,\r\n        left: `${item.left}px`,\r\n        top: `${item.top}px`,\r\n        transform: `rotate(${item.angle || 0}deg)`,\r\n      }\"\r\n    >\r\n      <slot :id=\"item.id\" name=\"item\" :item=\"item\"></slot>\r\n    </div>\r\n\r\n    <div\r\n      v-if=\"data.selectBounds\"\r\n      class=\"handle\"\r\n      data-drag-handle=\"drag\"\r\n      :style=\"{\r\n        top: `${data.selectBounds.top}px`,\r\n        left: `${data.selectBounds.left}px`,\r\n        width: `${data.selectBounds.width}px`,\r\n        height: `${data.selectBounds.height}px`,\r\n        transform: `rotate(${data.selectBounds.angle || 0}deg)`,\r\n      }\"\r\n    >\r\n      <div\r\n        v-for=\"pos in handles\"\r\n        :key=\"pos\"\r\n        data-drag-handle=\"scale\"\r\n        :data-drag-type=\"pos\"\r\n        :class=\"['handle-pos', pos]\"\r\n      >\r\n        <slot name=\"pos\">\r\n          <div class=\"handle__rect\"></div>\r\n        </slot>\r\n      </div>\r\n\r\n      <div class=\"handle-rotate\" data-drag-handle=\"rotate\">\r\n        <slot name=\"rotate\">\r\n          <div class=\"handle-rotate-line\"></div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-if=\"data.selectBox\"\r\n      class=\"select-group\"\r\n      :style=\"{\r\n        top: `${data.selectBox.top}px`,\r\n        left: `${data.selectBox.left}px`,\r\n        width: `${data.selectBox.width}px`,\r\n        height: `${data.selectBox.height}px`,\r\n      }\"\r\n    >\r\n      <slot name=\"select\" :data=\"data.selectBox\">\r\n        <div class=\"select-group__rect\"></div>\r\n      </slot>\r\n    </div>\r\n\r\n    <div\r\n      v-for=\"item in data.guides\"\r\n      :key=\"item.type\"\r\n      :style=\"getSnapLineStyle(item)\"\r\n    ></div>\r\n  </div>\r\n</template>\r\n<script setup lang=\"ts\" generic=\"T extends ElementType\">\r\n  import { onBeforeUnmount, reactive, ref, StyleValue } from 'vue';\r\n  import { canvasDrag } from '../core';\r\n  import { ElementType, GuidesList, GuidesType, RectInfo } from '../types';\r\n  import { CanvasDragEmits, CanvasDragProps } from './types';\r\n\r\n  defineOptions({ name: 'CanvasDrag' });\r\n  const canvasRef = ref<HTMLElement>();\r\n\r\n  const props = defineProps<CanvasDragProps>();\r\n  /** 元素列表 */\r\n  const elements = defineModel<T[]>('elements', {\r\n    default: () => [],\r\n    required: true,\r\n  });\r\n  /** 选择的元素ids */\r\n  const selectIds = defineModel<string[]>('selectIds');\r\n\r\n  const emits = defineEmits<CanvasDragEmits<T>>();\r\n\r\n  /** 放大缩小的八个点 */\r\n  const handles = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];\r\n\r\n  const { setElement, on, destroy } = canvasDrag<T>(() => canvasRef.value, {\r\n    zoom: props.zoom,\r\n    plugins: props.plugins,\r\n    disabled: props.disabled,\r\n  });\r\n  setElement(elements.value);\r\n\r\n  const data = reactive({\r\n    selectBox: null as RectInfo | null,\r\n    selectBounds: null as RectInfo | null,\r\n    guides: [] as GuidesList,\r\n    zoom: { zoom: 1, x: 0, y: 0 } as { zoom: number; x: number; y: number },\r\n  });\r\n  on('select', (val) => {\r\n    selectIds.value = val;\r\n  });\r\n  on('change', (list) => {\r\n    elements.value = list;\r\n  });\r\n  on('selectBox', (res) => {\r\n    data.selectBox = res;\r\n  });\r\n  on('selectBounds', (res) => {\r\n    data.selectBounds = res;\r\n  });\r\n  on('guides', (res) => {\r\n    data.guides = res;\r\n  });\r\n  on('rotate', (elements, ids) => {\r\n    emits('rotate', { elements, ids });\r\n  });\r\n  on('scale', (elements, ids) => {\r\n    emits('scale', { elements, ids });\r\n  });\r\n  on('drag', (elements, ids) => {\r\n    emits('drag', { elements, ids });\r\n  });\r\n  on('zoom', (res) => {\r\n    data.zoom = res;\r\n  });\r\n  on('custom', (type, data) => {\r\n    emits('custom', { type, data });\r\n  });\r\n\r\n  const getSnapLineStyle = (line: GuidesType): StyleValue => {\r\n    return {\r\n      position: 'absolute',\r\n      left: (line.type === 'vertical' ? line.position : 0) + 'px',\r\n      top: (line.type === 'horizontal' ? line.position : 0) + 'px',\r\n      width: line.type === 'vertical' ? '1px' : '100%',\r\n      height: line.type === 'horizontal' ? '1px' : '100%',\r\n      backgroundColor: '#ff00ff',\r\n      zIndex: '9999',\r\n      pointerEvents: 'none',\r\n    };\r\n  };\r\n\r\n  // 销毁\r\n  onBeforeUnmount(destroy);\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .canvas {\r\n    position: relative;\r\n    width: 700px;\r\n    height: 600px;\r\n    background: #ccc;\r\n    cursor: var(--d-canvas-cursor, default);\r\n\r\n    &__drag {\r\n      position: absolute;\r\n      cursor: var(--d-canvas-cursor, move);\r\n    }\r\n  }\r\n  .handle {\r\n    position: absolute;\r\n    border: 1px solid #007bff;\r\n    z-index: 999999999;\r\n    box-sizing: border-box;\r\n    cursor: var(--d-canvas-cursor, move);\r\n\r\n    &__rect {\r\n      width: 9px;\r\n      height: 9px;\r\n      background-color: #fff;\r\n      border: 1px solid #007bff;\r\n      z-index: 10;\r\n      border-radius: 50%;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    &-pos {\r\n      position: absolute;\r\n\r\n      &.nw {\r\n        transform: translate(-50%, -50%);\r\n        cursor: nw-resize;\r\n      }\r\n\r\n      &.n {\r\n        top: 0;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        cursor: n-resize;\r\n      }\r\n\r\n      &.ne {\r\n        top: 0;\r\n        right: 0;\r\n        transform: translate(50%, -50%);\r\n        cursor: ne-resize;\r\n      }\r\n\r\n      &.e {\r\n        top: 50%;\r\n        right: 0px;\r\n        transform: translate(50%, -50%);\r\n        cursor: e-resize;\r\n      }\r\n\r\n      &.se {\r\n        bottom: 0px;\r\n        right: 0px;\r\n        transform: translate(50%, 50%);\r\n        cursor: se-resize;\r\n      }\r\n\r\n      &.s {\r\n        bottom: 0px;\r\n        left: 50%;\r\n        transform: translate(-50%, 50%);\r\n        cursor: s-resize;\r\n      }\r\n\r\n      &.sw {\r\n        bottom: 0px;\r\n        left: 0px;\r\n        transform: translate(-50%, 50%);\r\n        cursor: sw-resize;\r\n      }\r\n\r\n      &.w {\r\n        top: 50%;\r\n        left: 0px;\r\n        transform: translate(-50%, -50%);\r\n        cursor: w-resize;\r\n      }\r\n    }\r\n  }\r\n  .select-group {\r\n    position: absolute;\r\n    z-index: 9999999;\r\n    &__rect {\r\n      box-sizing: border-box;\r\n      background-color: rgba(0, 123, 255, 0.2);\r\n      border: 1px solid #007bff;\r\n      pointer-events: none;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  }\r\n  .handle-rotate {\r\n    position: absolute;\r\n    top: -25px;\r\n    left: 50%;\r\n    margin-left: -4px;\r\n    width: 8px;\r\n    height: 8px;\r\n    background-color: #fff;\r\n    border: 1px solid #007bff;\r\n    border-radius: 50%;\r\n    cursor: grab;\r\n    z-index: 10;\r\n\r\n    &-line {\r\n      position: absolute;\r\n      top: 8px;\r\n      left: 3px;\r\n      width: 1px;\r\n      height: 17px;\r\n      background-color: #007bff;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n</style>\r\n```\r\n","readmeFilename":"README.md","homepage":"https://github.com/nimbleui/canvas-drag#readme","repository":{"type":"git","url":"git+https://github.com/nimbleui/canvas-drag.git"},"author":{"name":"YuYun"},"bugs":{"url":"https://github.com/nimbleui/canvas-drag/issues"}}