fix: a potential context menu offset issue

pull/5775/head
Peng Xiao 2022-06-02 01:20:33 +08:00
parent 7878f29ed7
commit 3afaa9c03b
2 changed files with 13 additions and 8 deletions

View File

@ -17,7 +17,7 @@ const _ContextBar: TLContextBarComponent<Shape> = ({
// rotation,
}) => {
const app = useApp()
const rSize = React.useRef([0, 0])
const rSize = React.useRef<[number, number] | null>(null)
const rContextBar = React.useRef<HTMLDivElement>(null)
const updateStroke = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>(e => {
@ -54,24 +54,27 @@ const _ContextBar: TLContextBarComponent<Shape> = ({
React.useLayoutEffect(() => {
const elm = rContextBar.current
if (!elm) return
if (!elm || rSize.current) return
const { offsetWidth, offsetHeight } = elm
rSize.current = [offsetWidth, offsetHeight]
}, [])
return () => {
rSize.current = null
}
})
React.useLayoutEffect(() => {
const elm = rContextBar.current
if (!elm) return
const size = rSize.current
const size = rSize.current ?? [0, 0]
const [x, y] = getContextBarTranslation(size, { ...offset, bottom: offset.bottom - 32 })
elm.style.setProperty('transform', `translateX(${x}px) translateY(${y}px)`)
}, [scaledBounds, offset])
}, [offset])
if (!app) return null
const textShapes = shapes.filter(shape => shape.type === 'text') as TextShape[]
const sidesShapes = shapes.filter(shape => 'sides' in shape.props) as (PolygonShape)[]
const sidesShapes = shapes.filter(shape => 'sides' in shape.props) as PolygonShape[]
const ShapeContent =
shapes.length === 1 && 'ReactContextBar' in shapes[0] ? shapes[0]['ReactContextBar'] : null
@ -135,7 +138,9 @@ const _ContextBar: TLContextBarComponent<Shape> = ({
) : null}
</>
)}
<a className="shape-link" onClick={() => app.pubEvent("whiteboard-link", shapes)}>Link</a>
<a className="shape-link" onClick={() => app.pubEvent('whiteboard-link', shapes)}>
Link
</a>
</div>
</HTMLContainer>
)

View File

@ -5,7 +5,7 @@ export default defineConfig({
platform: 'browser',
format: ['cjs', 'esm'],
entry: ['src/index.ts'],
clean: true,
clean: false,
loader: {
'.png': 'base64',
},