diff --git a/.changeset/dull-geckos-run.md b/.changeset/dull-geckos-run.md new file mode 100644 index 0000000..702f215 --- /dev/null +++ b/.changeset/dull-geckos-run.md @@ -0,0 +1,6 @@ +--- +"@hyperse/inspector-component": patch +--- + +Fix: Resolved style override issues within Shadow DOM environments. +Fix: Addressed compatibility issues when setting the translate property on documentElement. \ No newline at end of file diff --git a/packages/inspector-component/eslint.config.js b/packages/inspector-component/eslint.config.js index d794463..c9bf557 100644 --- a/packages/inspector-component/eslint.config.js +++ b/packages/inspector-component/eslint.config.js @@ -1,8 +1,7 @@ -import { base, defineConfig, react } from '@hyperse/eslint-config-hyperse'; +import { base, defineConfig } from '@hyperse/eslint-config-hyperse'; export default defineConfig([ ...base, - react, { rules: { '@typescript-eslint/no-explicit-any': 'off', diff --git a/packages/inspector-component/src/components/Panel.styled.tsx b/packages/inspector-component/src/components/Panel.styled.tsx index 57a38aa..d6fa8d4 100644 --- a/packages/inspector-component/src/components/Panel.styled.tsx +++ b/packages/inspector-component/src/components/Panel.styled.tsx @@ -45,6 +45,7 @@ export const PanelActionButton = styled.button` padding: 6px 8px; font-size: 14px; border-radius: 4px; + font-weight: 600; background-color: transparent; border: none; &:hover { @@ -56,10 +57,11 @@ export const PanelActionButton = styled.button` export const PanelContentLayout = styled.div` display: flex; flex-direction: column; - height: 24rem; + height: 400px; overflow-y: auto; background-color: transparent; - padding: 0.5rem; + padding: 10px; + font-size: 12px; /* Hide scrollbar for Chrome, Safari and Opera */ &::-webkit-scrollbar { @@ -75,7 +77,7 @@ export const PanelListItemActionLayout = styled.div` display: flex; align-items: center; flex-direction: row; - gap: 0.1rem; + gap: 2px; opacity: 0; `; @@ -84,10 +86,11 @@ export const PanelListItem = styled.div` cursor: pointer; flex-direction: column; justify-content: center; - gap: 0.5rem; - border-radius: 0.375rem; - padding: 0.5rem; + gap: 6px; + border-radius: 8px; + padding: 6px; color: rgba(255, 255, 255, 0.6); + font-size: 14px; &:hover { background-color: rgba(255, 255, 255, 0.2); ${PanelListItemActionLayout} { @@ -99,7 +102,8 @@ export const PanelListItem = styled.div` export const PanelListItemTitle = styled.span` flex: 1; - font-weight: 700; + font-size: 12px; + font-weight: 600; color: rgba(255, 255, 255, 0.9); overflow: hidden; text-overflow: ellipsis; @@ -116,15 +120,15 @@ export const PanelListItemDescription = styled.span` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 0.75rem; + font-size: 12px; `; export const PanelListItemActionButton = styled.div` display: flex; align-items: center; justify-content: center; - padding: 0.25rem; - border-radius: 0.25rem; + padding: 6px; + border-radius: 12px; background-color: transparent; border: none; cursor: pointer; @@ -139,4 +143,5 @@ export const PanelListItemActionButton = styled.div` export const PanelListItemRow = styled.div` display: flex; flex-direction: row; + align-items: center; `; diff --git a/packages/inspector-component/src/components/ShadowRoot.tsx b/packages/inspector-component/src/components/ShadowRoot.tsx index cc54e70..41497b1 100644 --- a/packages/inspector-component/src/components/ShadowRoot.tsx +++ b/packages/inspector-component/src/components/ShadowRoot.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, type ReactNode } from 'react'; +import { type ReactNode, useEffect, useRef } from 'react'; import { createRoot } from 'react-dom/client'; import { StyleSheetManager } from 'styled-components'; @@ -9,12 +9,14 @@ const ShadowRoot = ({ children }: { children: ReactNode }) => { if (!hostRef.current || hostRef.current.shadowRoot) return; const shadowRoot = hostRef.current.attachShadow({ mode: 'open' }); - + const container = document.createElement('div'); shadowRoot.appendChild(container); const root = createRoot(container); - root.render({children}); + root.render( + {children} + ); return () => root.unmount(); }, []); @@ -22,4 +24,4 @@ const ShadowRoot = ({ children }: { children: ReactNode }) => { return
; }; -export default ShadowRoot; \ No newline at end of file +export default ShadowRoot; diff --git a/packages/inspector-component/src/helpers/helper-copy-text.ts b/packages/inspector-component/src/helpers/helper-copy-text.ts new file mode 100644 index 0000000..014eb36 --- /dev/null +++ b/packages/inspector-component/src/helpers/helper-copy-text.ts @@ -0,0 +1,27 @@ +export const copyText = (text: string) => { + if (navigator.clipboard) { + try { + void navigator.clipboard.writeText(text); + } catch (err) { + console.log(err); + } + } + // eslint-disable-next-line @typescript-eslint/no-deprecated + if (typeof document.execCommand === 'function') { + try { + const input = document.createElement('textarea'); + input.setAttribute('readonly', 'readonly'); + input.value = text; + document.body.appendChild(input); + input.select(); + // eslint-disable-next-line @typescript-eslint/no-deprecated + if (document.execCommand('copy')) { + // eslint-disable-next-line @typescript-eslint/no-deprecated + document.execCommand('copy'); + } + document.body.removeChild(input); + } catch (error) { + console.log(error); + } + } +}; diff --git a/packages/inspector-component/src/overlay/Overlay.tsx b/packages/inspector-component/src/overlay/Overlay.tsx index dfbb1da..1652d50 100644 --- a/packages/inspector-component/src/overlay/Overlay.tsx +++ b/packages/inspector-component/src/overlay/Overlay.tsx @@ -1,9 +1,9 @@ import { createRef, type RefObject } from 'react'; import { createRoot } from 'react-dom/client'; +import ShadowRoot from '../components/ShadowRoot.js'; import { InspectorOverlayTagName } from '../constant.js'; import { getElementDimensions } from '../helpers/helper-element-dimensions.js'; import { getBoundingRect } from '../helpers/helper-rect.js'; -import ShadowRoot from '../components/ShadowRoot.js'; import type { BoxSizing, Rect } from '../types/type-rect.js'; import InspectorOverlay, { type InspectorOverlayRef, @@ -23,9 +23,10 @@ export class Overlay { this.overlay = document.createElement( InspectorOverlayTagName ) as HTMLDivElement; - doc.body.appendChild(this.overlay); + doc.documentElement.appendChild(this.overlay); - createRoot(this.overlay).render( + this.root = createRoot(this.overlay); + this.root.render( diff --git a/packages/inspector-component/src/overlay/OverlayTip.tsx b/packages/inspector-component/src/overlay/OverlayTip.tsx index 506e0ea..357bef3 100644 --- a/packages/inspector-component/src/overlay/OverlayTip.tsx +++ b/packages/inspector-component/src/overlay/OverlayTip.tsx @@ -1,9 +1,4 @@ -import { - type CSSProperties, - useEffect, - useRef, - useState, -} from 'react'; +import { type CSSProperties, useEffect, useRef, useState } from 'react'; import { Overlay } from '../components/index.js'; import { getViewSpaceBox, @@ -23,100 +18,100 @@ export interface OverlayTipProps { cornerHintText?: string; } -const OverlayTip = - ({ - title, - info, - className, - boundingRect, - boxSizing, - spaceBox, - showCornerHint, - cornerHintText = 'Right-click to show list.', - }: OverlayTipProps) => { - const tipSpaceBox = () => spaceBox ?? getViewSpaceBox(); - const containerRef = useRef(null); - const hidden = !boundingRect || !boxSizing; - const infoDisplay = info ? 'block' : 'none'; - const width = Math.round(boundingRect?.width ?? 0); - const height = Math.round(boundingRect?.height ?? 0); - - const [position, setPosition] = useState>( - {} - ); - - const outerBox = (): Rect => { - if (!boundingRect || !boxSizing) { - return { - x: 0, - y: 0, - width: 0, - height: 0, - }; - } +const OverlayTip = ({ + title, + info, + className, + boundingRect, + boxSizing, + spaceBox, + showCornerHint, + cornerHintText = 'Right-click to show list.', +}: OverlayTipProps) => { + const tipSpaceBox = () => spaceBox ?? getViewSpaceBox(); + const containerRef = useRef(null); + const hidden = !boundingRect || !boxSizing; + const infoDisplay = info ? 'block' : 'none'; + const width = Math.round(boundingRect?.width ?? 0); + const height = Math.round(boundingRect?.height ?? 0); - const top = boundingRect.y - Math.max(boxSizing.marginTop, 0); - const left = boundingRect.x - Math.max(boxSizing.marginLeft, 0); - const right = - boundingRect.x + - boundingRect.width + - Math.max(boxSizing.marginRight, 0); - const bottom = - boundingRect.y + - boundingRect.height + - Math.max(boxSizing.marginBottom, 0); + const [position, setPosition] = useState>({ + translate: '0px 0px', + }); + const outerBox = (): Rect => { + if (!boundingRect || !boxSizing) { return { - x: left, - y: top, - width: right - left, - height: bottom - top, + x: 0, + y: 0, + width: 0, + height: 0, }; + } + + const top = boundingRect.y - Math.max(boxSizing.marginTop, 0); + const left = boundingRect.x - Math.max(boxSizing.marginLeft, 0); + const right = + boundingRect.x + boundingRect.width + Math.max(boxSizing.marginRight, 0); + const bottom = + boundingRect.y + + boundingRect.height + + Math.max(boxSizing.marginBottom, 0); + + return { + x: left, + y: top, + width: right - left, + height: bottom - top, }; + }; - useEffect(() => { - if (!containerRef.current) return; - restraintTipPosition({ - elementBox: outerBox(), - spaceBox: tipSpaceBox(), - tipSize: containerRef.current!.getBoundingClientRect().toJSON(), - }).then((position) => { + useEffect(() => { + let mounted = true; + if (!containerRef.current) return; + restraintTipPosition({ + elementBox: outerBox(), + spaceBox: tipSpaceBox(), + tipSize: containerRef.current!.getBoundingClientRect().toJSON(), + }).then((position) => { + if (mounted) { setPosition({ translate: `${position.left}px ${position.top}px`, }); - }); - }, [containerRef, boundingRect, boxSizing]); + } + }); + return () => { + mounted = false; + }; + }, [containerRef, boundingRect, boxSizing, spaceBox]); - return ( - - ); - } + return ( + + ); +}; export default OverlayTip; diff --git a/packages/inspector-component/src/panel/InspectContextPanel.tsx b/packages/inspector-component/src/panel/InspectContextPanel.tsx index fcc165f..fac083e 100644 --- a/packages/inspector-component/src/panel/InspectContextPanel.tsx +++ b/packages/inspector-component/src/panel/InspectContextPanel.tsx @@ -1,8 +1,8 @@ import { createRef, type RefObject } from 'react'; import { createRoot } from 'react-dom/client'; +import ShadowRoot from '../components/ShadowRoot.js'; import { InspectContextPanelTagName } from '../constant.js'; import type { ElementItem } from '../types/type-element-item.js'; -import ShadowRoot from '../components/ShadowRoot.js'; import InspectContextPanelRoot, { type InspectContextPanelRootRef, type InspectContextPanelShowParams, @@ -25,15 +25,15 @@ export class InspectContextPanel { this.panel = document.createElement( InspectContextPanelTagName ) as HTMLDivElement; - doc.body.appendChild(this.panel); + doc.documentElement.appendChild(this.panel); const InspectContextPanelRootRef = InspectContextPanelRoot(); - createRoot(this.panel).render( + this.root = createRoot(this.panel); + this.root.render( ); - } public show( diff --git a/packages/inspector-component/src/panel/InspectContextPanelRoot.tsx b/packages/inspector-component/src/panel/InspectContextPanelRoot.tsx index fe55dfb..5dd9475 100644 --- a/packages/inspector-component/src/panel/InspectContextPanelRoot.tsx +++ b/packages/inspector-component/src/panel/InspectContextPanelRoot.tsx @@ -83,7 +83,10 @@ const InspectContextPanelRoot = () => { isDragging.current = true; dragStartPos.current = { x: e.clientX, y: e.clientY }; const rect = floatingRef.current!.getBoundingClientRect(); - panelStartPos.current = { x: rect.left, y: rect.top }; + panelStartPos.current = { + x: rect.left, + y: rect.top, + }; }; const handleMouseMove = (e: MouseEvent) => { @@ -97,8 +100,7 @@ const InspectContextPanelRoot = () => { const newY = panelStartPos.current.y + deltaY; Object.assign(floatingRef.current.style, { - top: `${newY}px`, - left: `${newX}px`, + transform: `translate(${newX}px, ${newY}px)`, }); }; @@ -133,8 +135,7 @@ const InspectContextPanelRoot = () => { .toJSON() as Rect, }).then((position) => { Object.assign(floatingRef.current!.style, { - top: `${position.top}px`, - left: `${position.left}px`, + transform: `translate(${position.left}px, ${position.top}px)`, }); }); @@ -154,6 +155,8 @@ const InspectContextPanelRoot = () => { onClick={stopPropagation} data-draggable-block style={{ + top: 0, + left: 0, display: display, cursor: isDragging ? 'grabbing' : 'grab', userSelect: 'none', diff --git a/packages/inspector-component/src/panel/InspectListItem.tsx b/packages/inspector-component/src/panel/InspectListItem.tsx index 7ed9e15..a93672a 100644 --- a/packages/inspector-component/src/panel/InspectListItem.tsx +++ b/packages/inspector-component/src/panel/InspectListItem.tsx @@ -1,11 +1,8 @@ import { TrustedEditor } from '@hyperse/inspector-common'; import { Panel } from '../components/index.js'; +import { copyText } from '../helpers/helper-copy-text.js'; import type { ElementItem } from '../types/type-element-item.js'; -const copyText = (text: string) => { - return navigator.clipboard.writeText(text); -}; - export interface InspectListItemProps { item: Item; index: number; diff --git a/packages/inspector-component/src/panel/InspectPanel.tsx b/packages/inspector-component/src/panel/InspectPanel.tsx index a00de33..a160bfc 100644 --- a/packages/inspector-component/src/panel/InspectPanel.tsx +++ b/packages/inspector-component/src/panel/InspectPanel.tsx @@ -93,7 +93,10 @@ export const InspectPanel = ( setChainMode(ElementChainMode.Render)} > @@ -101,7 +104,10 @@ export const InspectPanel = ( setChainMode(ElementChainMode.Source)} >