浏览代码

Fixes rotation handle size

main
Steve Ruiz 4 年前
父节点
当前提交
bf16a6e292
共有 1 个文件被更改,包括 23 次插入15 次删除
  1. 23
    15
      components/canvas/bounds/rotate-handle.tsx

+ 23
- 15
components/canvas/bounds/rotate-handle.tsx 查看文件

1
-import useHandleEvents from "hooks/useBoundsHandleEvents"
2
-import styled from "styles"
3
-import { Bounds } from "types"
1
+import useHandleEvents from 'hooks/useBoundsHandleEvents'
2
+import styled from 'styles'
3
+import { Bounds } from 'types'
4
 
4
 
5
 export default function Rotate({
5
 export default function Rotate({
6
   bounds,
6
   bounds,
9
   bounds: Bounds
9
   bounds: Bounds
10
   size: number
10
   size: number
11
 }) {
11
 }) {
12
-  const events = useHandleEvents("rotate")
12
+  const events = useHandleEvents('rotate')
13
 
13
 
14
   return (
14
   return (
15
-    <StyledRotateHandle
16
-      cursor="grab"
17
-      cx={bounds.width / 2}
18
-      cy={size * -2}
19
-      r={size / 2}
20
-      {...events}
21
-    />
15
+    <g cursor="grab" {...events}>
16
+      <circle
17
+        cx={bounds.width / 2}
18
+        cy={size * -2}
19
+        r={size * 2}
20
+        fill="transparent"
21
+        stroke="none"
22
+      />
23
+      <StyledRotateHandle
24
+        cx={bounds.width / 2}
25
+        cy={size * -2}
26
+        r={size / 2}
27
+        pointerEvents="none"
28
+      />
29
+    </g>
22
   )
30
   )
23
 }
31
 }
24
 
32
 
25
-const StyledRotateHandle = styled("circle", {
26
-  stroke: "$bounds",
27
-  fill: "#fff",
33
+const StyledRotateHandle = styled('circle', {
34
+  stroke: '$bounds',
35
+  fill: '#fff',
28
   zStrokeWidth: 2,
36
   zStrokeWidth: 2,
29
-  cursor: "grab",
37
+  cursor: 'grab',
30
 })
38
 })

正在加载...
取消
保存