@veltra/compositions 1.0.12 → 1.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/use-drag/index.ts"],"sourcesContent":["import { type Ref, type ShallowRef, watch, onBeforeUnmount } from 'vue'\n\ninterface DragParams {\n /** 本次拖动水平距离 */\n x: number\n /** 本次拖动垂直距离 */\n y: number\n /** 拖拽目标水平偏移量 */\n offsetX: number\n /** 拖拽目标垂直偏移量 */\n offsetY: number\n /** 鼠标事件 */\n e: MouseEvent\n}\n\ninterface DragOptions {\n /** 拖动目标 */\n target: ShallowRef<HTMLElement | undefined | null> | Ref<HTMLElement | undefined | null>\n /** 拖动开始 */\n onDragStart?(e: MouseEvent): void\n /** 拖动结束 */\n onDragEnd?(params: DragParams): void\n /** 拖动时 */\n onDrag?(params: DragParams): void\n /** 水平拖动范围 */\n rangeX?: [number, number]\n /** 垂直拖动范围 */\n rangeY?: [number, number]\n /** 初始偏移量 */\n initial?: { offsetX?: number; offsetY?: number }\n}\n\n/**\n * 拖动组合式方法\n * @param options 拖动选项\n */\nexport function useDrag(options: DragOptions): {\n update: (options: { offsetX?: number; offsetY?: number }) => void\n} {\n const { target, onDragStart, onDrag, onDragEnd, rangeX, rangeY, initial } = options\n\n // 鼠标拖拽前的坐标\n let originX = 0\n let originY = 0\n\n let offsetX = initial?.offsetX ?? 0\n let offsetY = initial?.offsetY ?? 0\n\n // 拖拽参数\n const dragParams: DragParams = { x: 0, y: 0, offsetX: 0, offsetY: 0, e: null as any }\n\n // 先取\n const onselectstart = document.onselectstart\n\n const handleMousedown = (e: MouseEvent) => {\n
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/use-drag/index.ts"],"sourcesContent":["import { type Ref, type ShallowRef, watch, onBeforeUnmount } from 'vue'\n\ninterface DragParams {\n /** 本次拖动水平距离 */\n x: number\n /** 本次拖动垂直距离 */\n y: number\n /** 拖拽目标水平偏移量 */\n offsetX: number\n /** 拖拽目标垂直偏移量 */\n offsetY: number\n /** 鼠标事件 */\n e: MouseEvent\n}\n\ninterface DragOptions {\n /** 拖动目标 */\n target: ShallowRef<HTMLElement | undefined | null> | Ref<HTMLElement | undefined | null>\n /** 拖动开始 */\n onDragStart?(e: MouseEvent): void\n /** 拖动结束 */\n onDragEnd?(params: DragParams): void\n /** 拖动时 */\n onDrag?(params: DragParams): void\n /** 水平拖动范围 */\n rangeX?: [number, number]\n /** 垂直拖动范围 */\n rangeY?: [number, number]\n /** 初始偏移量 */\n initial?: { offsetX?: number; offsetY?: number }\n}\n\n/**\n * 拖动组合式方法\n * @param options 拖动选项\n */\nexport function useDrag(options: DragOptions): {\n update: (options: { offsetX?: number; offsetY?: number }) => void\n} {\n const { target, onDragStart, onDrag, onDragEnd, rangeX, rangeY, initial } = options\n\n // 鼠标拖拽前的坐标\n let originX = 0\n let originY = 0\n\n let offsetX = initial?.offsetX ?? 0\n let offsetY = initial?.offsetY ?? 0\n\n // 拖拽参数\n const dragParams: DragParams = { x: 0, y: 0, offsetX: 0, offsetY: 0, e: null as any }\n\n // 先取\n const onselectstart = document.onselectstart\n\n const handleMousedown = (e: MouseEvent) => {\n e.stopPropagation()\n if (e.button !== 0) return\n window.getSelection()?.removeAllRanges()\n e.stopImmediatePropagation()\n\n originX = e.x\n originY = e.y\n\n onDragStart?.(e)\n\n // 禁止浏览器的选中事件, 直到mouseup事件触发时还原\n document.onselectstart = () => false\n document.addEventListener('mousemove', handleMousemove, { passive: true })\n document.addEventListener('mouseup', handleMouseup)\n }\n\n const getOffsetXWithRange = (deltaX: number) => {\n return Math.max(rangeX![0], Math.min(rangeX![1], offsetX + deltaX))\n }\n\n const getOffsetXWithoutRange = (deltaX: number) => {\n return offsetX + deltaX\n }\n\n const getOffsetYWithRange = (deltaY: number) => {\n return Math.max(rangeY![0], Math.min(rangeY![1], offsetY + deltaY))\n }\n\n const getOffsetYWithoutRange = (deltaY: number) => {\n return offsetY + deltaY\n }\n\n const getOffsetX = rangeX ? getOffsetXWithRange : getOffsetXWithoutRange\n const getOffsetY = rangeY ? getOffsetYWithRange : getOffsetYWithoutRange\n\n // 避免重复创建对象影响内存占用\n const setDragParam = (e: MouseEvent) => {\n dragParams.x = e.x - originX\n dragParams.y = e.y - originY\n dragParams.offsetX = getOffsetX(dragParams.x)\n dragParams.offsetY = getOffsetY(dragParams.y)\n dragParams.e = e\n }\n\n const handleMousemove = (e: MouseEvent) => {\n setDragParam(e)\n onDrag?.(dragParams)\n }\n\n const handleMouseup = (e: MouseEvent) => {\n setDragParam(e)\n offsetX = dragParams.offsetX\n offsetY = dragParams.offsetY\n\n onDragEnd?.(dragParams)\n document.onselectstart = onselectstart\n\n cleanup()\n }\n\n // 统一的清理函数\n const cleanup = () => {\n document.removeEventListener('mousemove', handleMousemove)\n document.removeEventListener('mouseup', handleMouseup)\n }\n\n watch(\n target,\n (dom, oldDom) => {\n oldDom?.removeEventListener('mousedown', handleMousedown)\n if (!dom) return\n dom.addEventListener('mousedown', handleMousedown)\n },\n { immediate: true }\n )\n\n onBeforeUnmount(() => {\n target.value?.removeEventListener('mousedown', handleMousedown)\n cleanup()\n })\n\n return {\n update(options: { offsetX?: number; offsetY?: number }) {\n if (options.offsetX !== undefined) {\n offsetX = options.offsetX\n }\n if (options.offsetY !== undefined) {\n offsetY = options.offsetY\n }\n }\n }\n}\n"],"mappings":";;;;;;AAoCA,SAAgB,QAAQ,SAEtB;CACA,MAAM,EAAE,QAAQ,aAAa,QAAQ,WAAW,QAAQ,QAAQ,YAAY;CAG5E,IAAI,UAAU;CACd,IAAI,UAAU;CAEd,IAAI,UAAU,SAAS,WAAW;CAClC,IAAI,UAAU,SAAS,WAAW;CAGlC,MAAM,aAAyB;EAAE,GAAG;EAAG,GAAG;EAAG,SAAS;EAAG,SAAS;EAAG,GAAG;EAAa;CAGrF,MAAM,gBAAgB,SAAS;CAE/B,MAAM,mBAAmB,MAAkB;AACzC,IAAE,iBAAiB;AACnB,MAAI,EAAE,WAAW,EAAG;AACpB,SAAO,cAAc,EAAE,iBAAiB;AACxC,IAAE,0BAA0B;AAE5B,YAAU,EAAE;AACZ,YAAU,EAAE;AAEZ,gBAAc,EAAE;AAGhB,WAAS,sBAAsB;AAC/B,WAAS,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,MAAM,CAAC;AAC1E,WAAS,iBAAiB,WAAW,cAAc;;CAGrD,MAAM,uBAAuB,WAAmB;AAC9C,SAAO,KAAK,IAAI,OAAQ,IAAI,KAAK,IAAI,OAAQ,IAAI,UAAU,OAAO,CAAC;;CAGrE,MAAM,0BAA0B,WAAmB;AACjD,SAAO,UAAU;;CAGnB,MAAM,uBAAuB,WAAmB;AAC9C,SAAO,KAAK,IAAI,OAAQ,IAAI,KAAK,IAAI,OAAQ,IAAI,UAAU,OAAO,CAAC;;CAGrE,MAAM,0BAA0B,WAAmB;AACjD,SAAO,UAAU;;CAGnB,MAAM,aAAa,SAAS,sBAAsB;CAClD,MAAM,aAAa,SAAS,sBAAsB;CAGlD,MAAM,gBAAgB,MAAkB;AACtC,aAAW,IAAI,EAAE,IAAI;AACrB,aAAW,IAAI,EAAE,IAAI;AACrB,aAAW,UAAU,WAAW,WAAW,EAAE;AAC7C,aAAW,UAAU,WAAW,WAAW,EAAE;AAC7C,aAAW,IAAI;;CAGjB,MAAM,mBAAmB,MAAkB;AACzC,eAAa,EAAE;AACf,WAAS,WAAW;;CAGtB,MAAM,iBAAiB,MAAkB;AACvC,eAAa,EAAE;AACf,YAAU,WAAW;AACrB,YAAU,WAAW;AAErB,cAAY,WAAW;AACvB,WAAS,gBAAgB;AAEzB,WAAS;;CAIX,MAAM,gBAAgB;AACpB,WAAS,oBAAoB,aAAa,gBAAgB;AAC1D,WAAS,oBAAoB,WAAW,cAAc;;AAGxD,OACE,SACC,KAAK,WAAW;AACf,UAAQ,oBAAoB,aAAa,gBAAgB;AACzD,MAAI,CAAC,IAAK;AACV,MAAI,iBAAiB,aAAa,gBAAgB;IAEpD,EAAE,WAAW,MAAM,CACpB;AAED,uBAAsB;AACpB,SAAO,OAAO,oBAAoB,aAAa,gBAAgB;AAC/D,WAAS;GACT;AAEF,QAAO,EACL,OAAO,SAAiD;AACtD,MAAI,QAAQ,YAAY,KAAA,EACtB,WAAU,QAAQ;AAEpB,MAAI,QAAQ,YAAY,KAAA,EACtB,WAAU,QAAQ;IAGvB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veltra/compositions",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.14",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"src"
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"@cat-kit/core": "^1.1.3",
|
|
21
21
|
"@cat-kit/fe": "^1.1.3",
|
|
22
22
|
"@floating-ui/dom": "^1.7.6",
|
|
23
|
-
"@veltra/utils": "1.0.
|
|
23
|
+
"@veltra/utils": "1.0.14"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"vue": "^3.5.33"
|
package/src/use-drag/index.ts
CHANGED
|
@@ -53,13 +53,9 @@ export function useDrag(options: DragOptions): {
|
|
|
53
53
|
const onselectstart = document.onselectstart
|
|
54
54
|
|
|
55
55
|
const handleMousedown = (e: MouseEvent) => {
|
|
56
|
-
// 阻止事件冒泡
|
|
57
56
|
e.stopPropagation()
|
|
58
|
-
// 鼠标左键按下有效
|
|
59
57
|
if (e.button !== 0) return
|
|
60
|
-
// 放置拖拽时选择内容
|
|
61
58
|
window.getSelection()?.removeAllRanges()
|
|
62
|
-
// 阻止后续的事件监听器被执行
|
|
63
59
|
e.stopImmediatePropagation()
|
|
64
60
|
|
|
65
61
|
originX = e.x
|