Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 86331d2

Browse files
feat: 基本配置参数添加
1 parent f93db13 commit 86331d2

File tree

7 files changed

+247
-104
lines changed

7 files changed

+247
-104
lines changed

‎src/utils/util.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,13 @@ export const getBrowserLang = () => {
2121
return defaultBrowserLang
2222
}
2323

24-
export function onMove(callback: (event: MouseEvent) => void) {
24+
export function onMove(
25+
callback: (event: MouseEvent) => void,
26+
removeCallback?: () => void
27+
) {
2528
function moveEvent(event: MouseEvent) {
2629
if (event.buttons !== 1) {
27-
window.removeEventListener('mousemove',moveEvent)
30+
remove()
2831
return
2932
}
3033
callback(event)
@@ -37,6 +40,7 @@ export function onMove(callback: (event: MouseEvent) => void) {
3740
window.removeEventListener('mousemove', moveEvent)
3841
window.removeEventListener('mouseup', remove)
3942
window.removeEventListener('mousemove', remove)
43+
removeCallback?.()
4044
}
4145
return remove
4246
}
Lines changed: 55 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
11
import React, { useEffect, useState } from 'react'
2-
import stylesfrom'./draggable.module.scss'
2+
import './draggable.scss'
33
import { useComponentStyle, usePointStyle } from '../hooks/useStyle'
44
import { AttrType } from '../types'
55
import { onMove } from '@/utils/util'
66
import useMouse from '../hooks/useMouse'
7+
import { B } from 'mockjs'
78

8-
interface DraggableBoxProps {
9+
exportinterface DraggableBoxProps {
910
children: JSX.Element
1011
attrs: AttrType
1112
active?: boolean
1213
scale?: number // 后续需要验证大于0
1314
parent?: boolean
15+
zIndex?: number
16+
resizable?: boolean
17+
draggable?: boolean
18+
className?: string
19+
classNameDragging?: string
20+
classNameResizing?: string
21+
classNameActiveModal?: string
22+
// return false 终止操作
23+
onDragStart?: (e: React.MouseEvent) => void | boolean
24+
onDrag?: (attrs: AttrType) => void
25+
onDragEnd?: (attrs: AttrType) => void
26+
onResizeStart?: (e: React.MouseEvent, point: string) => void | boolean
27+
onResize?: (attrs: AttrType, point: string) => void
28+
onResizeEnd?: (attrs: AttrType, point: string) => void
1429
}
1530

1631
// 锚点
@@ -19,37 +34,56 @@ const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
1934
const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']
2035

2136
const DraggableBox = (props: DraggableBoxProps) => {
22-
const { attrs, onPonitMouseHandle, onBoxMouseHandle, dragBoxRef } = useMouse(
23-
props.attrs,
24-
props.scale!,
25-
props.parent!
26-
)
37+
const {
38+
attrs,
39+
onPonitMouseHandle,
40+
onBoxMouseHandle,
41+
dragBoxRef,
42+
isDragging,
43+
isResizing
44+
} = useMouse(props)
2745
return (
2846
<div
2947
ref={dragBoxRef}
30-
className={styles.draggableBox}
48+
className={
49+
'draggableBox' +
50+
' ' +
51+
props.className +
52+
' ' +
53+
(isDragging ? props.classNameDragging : '') +
54+
' ' +
55+
(isResizing ? props.classNameResizing : '')
56+
}
3157
onMouseDown={onBoxMouseHandle}
32-
style={useComponentStyle(attrs, props.scale)}
58+
style={useComponentStyle(attrs, props.zIndex!)}
3359
>
34-
{pointList.map((point, index) => {
35-
return (
36-
<div
37-
className={styles.draggablePoint + ' ' + styles[point]}
38-
key={point}
39-
onMouseDown={(e) => onPonitMouseHandle(e, point)}
40-
style={usePointStyle(point, index, attrs, cursorResize)}
41-
></div>
42-
)
43-
})}
44-
{props.active && <div className={styles.draggableActiveModal}></div>}
60+
{props.resizable &&
61+
pointList.map((point, index) => {
62+
return (
63+
<div
64+
className={'draggablePoint' + ' ' + point}
65+
key={point}
66+
onMouseDown={(e) => onPonitMouseHandle(e, point)}
67+
style={usePointStyle(point, index, attrs, cursorResize)}
68+
></div>
69+
)
70+
})}
71+
{props.active && (
72+
<div
73+
className={'draggableActiveModal' + ' ' + props.classNameActiveModal}
74+
></div>
75+
)}
4576
{props.children}
4677
</div>
4778
)
4879
}
4980
DraggableBox.defaultProps = {
5081
scale: 1,
5182
active: false,
52-
parent: true
83+
parent: true,
84+
resizable: true,
85+
draggable: true,
86+
zIndex: 20
5387
}
5488

5589
export default DraggableBox

‎src/views/common/drag/components/draggable.module.scss renamed to ‎src/views/common/drag/components/draggable.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
box-sizing: content-box;
55

66
&:hover {
7-
outline: 1px dashed var(--primary-color);
7+
outline: 1px dashed #1890FF;
88
}
99

1010
}
@@ -14,7 +14,7 @@
1414
position: absolute;
1515
width: 6px;
1616
height: 6px;
17-
border: 3px solid var(--primary-color);
17+
border: 3px solid #1890FF;
1818
border-radius: 5px;
1919
background-color: #fff;
2020

@@ -65,6 +65,6 @@
6565
width: 100%;
6666
height: 100%;
6767
pointer-events: none;
68-
background-color: var(--primary-color);
68+
background-color: #1890FF;
6969
opacity: .1;
7070
}

‎src/views/common/drag/dragPage.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,12 @@
1111
transparent 1px,
1212
transparent 10px);
1313
background-size: 10px 10px;
14+
}
15+
16+
.modal {
17+
background-color: red;
18+
}
19+
20+
.dragging {
21+
border: 1px solid #000;
1422
}

‎src/views/common/drag/hooks/useMouse.ts

Lines changed: 107 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
11
import { useEffect, useRef, useState } from 'react'
22
import { AttrType } from '../types'
33
import { onMove } from '@/utils/util'
4+
import { DraggableBoxProps } from '../components/DraggableBox'
45

5-
export default function useMouse(
6-
defaultAttrs: AttrType,
7-
scale: number,
8-
parent: boolean
9-
) {
6+
export default function useMouse(props: DraggableBoxProps) {
7+
const {
8+
attrs: defaultAttrs,
9+
scale,
10+
parent,
11+
draggable,
12+
resizable,
13+
onDragStart,
14+
onDrag,
15+
onDragEnd,
16+
onResizeStart,
17+
onResize,
18+
onResizeEnd
19+
} = props
1020
const [attrs, setAttrs] = useState(defaultAttrs)
21+
const [isDragging, setIsDrag] = useState(false)
22+
const [isResizing, setIsResize] = useState(false)
1123
const dragBoxRef = useRef<HTMLDivElement | null>(null)
1224
let mouseEventRemove = () => {}
13-
function onPonitMouseHandle(mouseDownEvent: any, point: string) {
25+
function onPonitMouseHandle(mouseDownEvent: React.MouseEvent, point: string) {
1426
mouseDownEvent.stopPropagation()
1527
mouseDownEvent.preventDefault()
28+
if (!draggable) return
29+
const resizeStartReturn = onResizeStart?.(mouseDownEvent, point)
30+
if (resizeStartReturn === false) return
1631
// 记录初始位置和大小
1732
const itemAttrX = attrs.x
1833
const itemAttrY = attrs.y
@@ -25,47 +40,58 @@ export default function useMouse(
2540
.offsetWidth
2641
const parentHeight = (dragBoxRef.current!.parentNode! as HTMLElement)
2742
.offsetHeight
28-
mouseEventRemove = onMove((moveEvent) => {
29-
let currX = Math.round((moveEvent.screenX - startX) / scale)
30-
let currY = Math.round((moveEvent.screenY - startY) / scale)
31-
const isTop = /t/.test(point)
32-
const isBottom = /b/.test(point)
33-
const isLeft = /l/.test(point)
34-
const isRight = /r/.test(point)
35-
const newHeight = itemAttrH + (isTop ? -currY : isBottom ? currY : 0)
36-
const newWidth = itemAttrW + (isLeft ? -currX : isRight ? currX : 0)
37-
let h = Math.abs(newHeight)
38-
let w = Math.abs(newWidth)
39-
let x =
40-
newWidth > 0
41-
? itemAttrX + (isLeft ? currX : 0)
42-
: itemAttrX + (isLeft ? itemAttrW : newWidth)
43-
let y =
44-
newHeight > 0
45-
? itemAttrY + (isTop ? currY : 0)
46-
: itemAttrY + (isTop ? itemAttrH : newHeight)
47-
if (parent) {
48-
if (x < 0) {
49-
w = w + x
50-
x = 0
51-
}
52-
if (y < 0) {
53-
h = h + y
54-
y = 0
55-
}
56-
if (x + w > parentWidth) {
57-
w = parentWidth - x
58-
}
59-
if (y + h > parentHeight) {
60-
h = parentHeight - y
43+
mouseEventRemove = onMove(
44+
(moveEvent) => {
45+
setIsResize(true)
46+
let currX = Math.round((moveEvent.screenX - startX) / scale!)
47+
let currY = Math.round((moveEvent.screenY - startY) / scale!)
48+
const isTop = /t/.test(point)
49+
const isBottom = /b/.test(point)
50+
const isLeft = /l/.test(point)
51+
const isRight = /r/.test(point)
52+
const newHeight = itemAttrH + (isTop ? -currY : isBottom ? currY : 0)
53+
const newWidth = itemAttrW + (isLeft ? -currX : isRight ? currX : 0)
54+
let h = Math.abs(newHeight)
55+
let w = Math.abs(newWidth)
56+
let x =
57+
newWidth > 0
58+
? itemAttrX + (isLeft ? currX : 0)
59+
: itemAttrX + (isLeft ? itemAttrW : newWidth)
60+
let y =
61+
newHeight > 0
62+
? itemAttrY + (isTop ? currY : 0)
63+
: itemAttrY + (isTop ? itemAttrH : newHeight)
64+
if (parent) {
65+
if (x < 0) {
66+
w = w + x
67+
x = 0
68+
}
69+
if (y < 0) {
70+
h = h + y
71+
y = 0
72+
}
73+
if (x + w > parentWidth) {
74+
w = parentWidth - x
75+
}
76+
if (y + h > parentHeight) {
77+
h = parentHeight - y
78+
}
6179
}
80+
onResize?.({ x, y, w, h }, point)
81+
setAttrs({ x, y, w, h })
82+
},
83+
() => {
84+
onResizeEnd?.(attrs, point)
85+
setIsResize(false)
6286
}
63-
setAttrs({ x, y, w, h })
64-
})
87+
)
6588
}
66-
function onBoxMouseHandle(e: any, distance = 10) {
89+
function onBoxMouseHandle(e: React.MouseEvent, distance = 0) {
6790
e.preventDefault()
6891
e.stopPropagation()
92+
if (!resizable) return
93+
const dragStartReturn = onDragStart?.(e)
94+
if (dragStartReturn === false) return
6995
// 记录初始位置和大小
7096
const itemAttrX = attrs.x
7197
const itemAttrY = attrs.y
@@ -78,30 +104,43 @@ export default function useMouse(
78104
.offsetWidth
79105
const parentHeight = (dragBoxRef.current!.parentNode! as HTMLElement)
80106
.offsetHeight
81-
mouseEventRemove = onMove((moveEvent) => {
82-
let currX = Math.round(itemAttrX + (moveEvent.screenX - startX) / scale)
83-
let currY = Math.round(itemAttrY + (moveEvent.screenY - startY) / scale)
84-
// 要预留的距离
85-
if (parent) {
86-
// 基于左上角位置检测
87-
currX = currX < 0 ? 0 : currX
88-
currY = currY < 0 ? 0 : currY
89-
// 基于右下角位置检测
90-
currX =
91-
currX > parentWidth - itemAttrW ? parentWidth - itemAttrW : currX
92-
currY =
93-
currY > parentHeight - itemAttrH ? parentHeight - itemAttrH : currY
94-
} else {
95-
// 基于左上角位置检测
96-
currX = currX < -itemAttrW + distance ? -itemAttrW + distance : currX
97-
currY = currY < -itemAttrH + distance ? -itemAttrH + distance : currY
98-
// 基于右下角位置检测
99-
currX = currX > parentWidth - distance ? parentWidth - distance : currX
100-
currY =
101-
currY > parentHeight - distance ? parentHeight - distance : currY
107+
mouseEventRemove = onMove(
108+
(moveEvent) => {
109+
setIsDrag(true)
110+
let currX = Math.round(
111+
itemAttrX + (moveEvent.screenX - startX) / scale!
112+
)
113+
let currY = Math.round(
114+
itemAttrY + (moveEvent.screenY - startY) / scale!
115+
)
116+
// 要预留的距离
117+
if (parent) {
118+
// 基于左上角位置检测
119+
currX = currX < 0 ? 0 : currX
120+
currY = currY < 0 ? 0 : currY
121+
// 基于右下角位置检测
122+
currX =
123+
currX > parentWidth - itemAttrW ? parentWidth - itemAttrW : currX
124+
currY =
125+
currY > parentHeight - itemAttrH ? parentHeight - itemAttrH : currY
126+
} else {
127+
// 基于左上角位置检测
128+
currX = currX < -itemAttrW + distance ? -itemAttrW + distance : currX
129+
currY = currY < -itemAttrH + distance ? -itemAttrH + distance : currY
130+
// 基于右下角位置检测
131+
currX =
132+
currX > parentWidth - distance ? parentWidth - distance : currX
133+
currY =
134+
currY > parentHeight - distance ? parentHeight - distance : currY
135+
}
136+
onDrag?.({ ...attrs, x: currX, y: currY })
137+
setAttrs({ ...attrs, x: currX, y: currY })
138+
},
139+
() => {
140+
onDragEnd?.(attrs)
141+
setIsDrag(false)
102142
}
103-
setAttrs({ ...attrs, x: currX, y: currY })
104-
})
143+
)
105144
}
106145
useEffect(() => {
107146
return mouseEventRemove()
@@ -110,6 +149,8 @@ export default function useMouse(
110149
attrs,
111150
onPonitMouseHandle,
112151
onBoxMouseHandle,
113-
dragBoxRef
152+
dragBoxRef,
153+
isDragging,
154+
isResizing
114155
}
115156
}

‎src/views/common/drag/hooks/useStyle.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ export const usePointStyle = (
4343
}
4444

4545
// 拖拽组件位置
46-
export const useComponentStyle = (attr: AttrType, scale?: number) => {
46+
export const useComponentStyle = (attr: AttrType, zIndex: number) => {
4747
if (!attr) return {}
4848
const componentStyle = {
49-
zIndex: 1,
49+
zIndex,
5050
left: `${attr.x}px`,
5151
top: `${attr.y}px`,
5252
width: `${attr.w}px`,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /