fix: btn position

release
hemengke1997 · Apr 18, 2024 · 5646143 · 5646143
1 parent 5e80e5f
commit 5646143
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 22 deletions.
diff --git a/packages/istanbul-widget/CHANGELOG.md b/packages/istanbul-widget/CHANGELOG.md
@@ -1,5 +1,11 @@
 # istanbul-widget
 
+## 1.1.2
+
+### Patch Changes
+
+- fix: btn position
+
 ## 1.1.1
 
 ### Patch Changes

diff --git a/packages/istanbul-widget/dev.ts b/packages/istanbul-widget/dev.ts
@@ -2,7 +2,7 @@ import IstanbulWidget from './src/istanbul-widget'
 
 new IstanbulWidget({
   defaultPosition: {
-    x: 0,
+    x: -100,
     y: 100,
   },
   report: {

diff --git a/packages/istanbul-widget/package.json b/packages/istanbul-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "istanbul-widget",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "main": "./dist/istanbul-widget.min.js",
   "module": "./dist/istanbul-widget.esm.js",

diff --git a/packages/istanbul-widget/src/core/IstanbulWidget.tsx b/packages/istanbul-widget/src/core/IstanbulWidget.tsx
@@ -236,6 +236,7 @@ export default function IstanbulWidget(props: IstanbulWidgetProps) {
                 },
               }}
               float={float}
+              className='iw-rounded-full iw-overflow-hidden'
             >
               <PopoverTrigger
                 asChild
@@ -246,15 +247,14 @@ export default function IstanbulWidget(props: IstanbulWidgetProps) {
                   }
                 }}
               >
-                <div className='iw-rounded-full iw-overflow-hidden'>
-                  <div
-                    className='iw-w-9 iw-h-9 iw-flex iw-justify-center iw-items-center iw-p-2'
-                    style={{
-                      backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                    }}
-                  >
-                    <div className='iw-icon-[vscode-icons--file-type-testjs] iw-w-full iw-h-full iw-cursor-pointer'></div>
-                  </div>
+                <div
+                  className='iw-w-9 iw-h-9 iw-flex iw-justify-center iw-items-center iw-p-2'
+                  style={{
+                    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                  }}
+                  id='istanbul-widget-icon'
+                >
+                  <div className='iw-icon-[vscode-icons--file-type-testjs] iw-w-full iw-h-full iw-cursor-pointer'></div>
                 </div>
               </PopoverTrigger>
             </Draggable>

diff --git a/packages/istanbul-widget/src/core/components/Draggable.tsx b/packages/istanbul-widget/src/core/components/Draggable.tsx
@@ -10,6 +10,7 @@ type DraggableProps = PropsWithChildren<{
   defaultPosition: Position
   dragOptions: DragOptions
   float: IstanbulWidgetOptions['float']
+  className?: string
 }>
 
 const IOS_SAFE_AREA = 20
@@ -22,7 +23,7 @@ const bounds = {
 }
 
 function Draggable(props: DraggableProps) {
-  const { children, position: positionProp, defaultPosition, dragOptions, float } = props
+  const { children, position: positionProp, defaultPosition, dragOptions, float, className } = props
 
   const handleRef = useRef<HTMLDivElement>(null)
   const draggableRef = useRef<HTMLDivElement>(null)
@@ -64,22 +65,31 @@ function Draggable(props: DraggableProps) {
     },
   })
 
+  const getDocSize = useMemoizedFn(() => {
+    const docWidth = Math.max(document.documentElement.offsetWidth, window.innerWidth)
+    const docHeight = Math.max(document.documentElement.offsetHeight, window.innerHeight)
+    return {
+      docWidth,
+      docHeight,
+    }
+  })
+
   const fixFloatPosition = useMemoizedFn((position: Position) => {
     if (float) {
       float.offsetX ??= 0
       const { x, y } = position
-      const windowWidth = window.innerWidth
+      const { docWidth } = getDocSize()
       const w = handleRef.current!.getBoundingClientRect().width
-      const newX = x + w / 2 > windowWidth / 2 ? windowWidth - w - float.offsetX : float.offsetX
-      const newY = y <= bounds.top ? bounds.top : y
+      let newX = docWidth && x + w / 2 > docWidth / 2 ? docWidth - w - float.offsetX : float.offsetX
+      newX = Math.max(newX, float.offsetX)
+      const newY = Math.max(y, bounds.top)
       return { x: newX, y: newY }
     }
     return position
   })
 
   const getButtonSafeAreaXY = useMemoizedFn((x: number, y: number) => {
-    const docWidth = Math.max(document.documentElement.offsetWidth, window.innerWidth)
-    const docHeight = Math.max(document.documentElement.offsetHeight, window.innerHeight)
+    const { docWidth, docHeight } = getDocSize()
 
     const btn = draggableRef.current!
     if (x + btn.offsetWidth > docWidth) {
@@ -91,15 +101,15 @@ function Draggable(props: DraggableProps) {
     }
 
     if (x < 0) {
-      x = defaultPosition.x
+      x = Math.max(defaultPosition.x, bounds.left)
     }
 
     if (y >= docHeight - btn.offsetHeight) {
-      y = docHeight - btn.offsetHeight - IOS_SAFE_AREA
+      y = docHeight - btn.offsetHeight - bounds.bottom
     }
 
     if (y < 0) {
-      y = defaultPosition.y
+      y = Math.max(defaultPosition.y, bounds.top)
     }
 
     return [x, y]
@@ -123,7 +133,9 @@ function Draggable(props: DraggableProps) {
       ref={draggableRef}
       className={cn('iw-w-fit iw-pointer-events-auto', !dragging ? 'iw-transition-transform' : '')}
     >
-      <div ref={handleRef}>{children}</div>
+      <div ref={handleRef} className={className}>
+        {children}
+      </div>
     </div>
   )
 }

diff --git a/packages/vite-plugin-istanbul-widget/CHANGELOG.md b/packages/vite-plugin-istanbul-widget/CHANGELOG.md
@@ -1,5 +1,12 @@
 # vite-plugin-istanbul-widget
 
+## 1.0.6
+
+### Patch Changes
+
+- Updated dependencies
+  - istanbul-widget@1.1.2
+
 ## 1.0.5
 
 ### Patch Changes

diff --git a/packages/vite-plugin-istanbul-widget/package.json b/packages/vite-plugin-istanbul-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-istanbul-widget",
-  "version": "1.0.5",
+  "version": "1.1.2",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",