/* eslint-disable react-hooks/rules-of-hooks */ import { useEffect, useRef, useState } from 'react' import { BaseBoxShapeUtil, HTMLContainer, RecordProps, T, TLBaseShape, stopEventPropagation, } from 'tldraw' type IMyPopupShape = TLBaseShape< 'my-popup-shape', { w: number h: number animal: number } > export class PopupShapeUtil extends BaseBoxShapeUtil { static override type = 'my-popup-shape' as const static override props: RecordProps = { w: T.number, h: T.number, animal: T.number, } getDefaultProps(): IMyPopupShape['props'] { return { w: 200, h: 200, animal: 0, } } component(shape: IMyPopupShape) { const [popped, setPopped] = useState(false) const ref = useRef(null) const ref2 = useRef(null) useEffect(() => { const elm = ref.current if (!elm) return const elm2 = ref2.current if (!elm2) return if (popped) { // man // elm2.style.transform = `rotateX(0deg) translateY(0px) translateZ(0px)` // note elm.style.transform = `rotateX(0deg) translateY(0px) translateZ(0px)` } else { // man // elm.style.transform = `rotateX(-50deg) translateY(5px) translateZ(0px)` // elm2.style.transform = `scaleY(.8)` // note elm.style.transform = `rotateX(20deg)` } }, [popped]) const vpb = this.editor.getViewportPageBounds() const spb = this.editor.getShapePageBounds(shape)! const px = vpb.midX - spb.midX + spb.w / 2 const py = vpb.midY - spb.midY + spb.h / 2 return ( { setPopped((p) => !p) stopEventPropagation(e) }} >

{/* {shape.id.slice(-1).toUpperCase()} */}

) } indicator(shape: IMyPopupShape) { return } }

Popup shape