{
  "version": 3,
  "sources": ["../../../../../src/lib/shapes/frame/components/FrameHeading.tsx"],
  "sourcesContent": ["import {\n\tSelectionEdge,\n\tTLShapeId,\n\tcanonicalizeRotation,\n\tgetPointerInfo,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseIsEditing,\n} from '@tldraw/editor'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { FrameLabelInput } from './FrameLabelInput'\n\nexport const FrameHeading = function FrameHeading({\n\tid,\n\tname,\n\twidth,\n\theight,\n}: {\n\tid: TLShapeId\n\tname: string\n\twidth: number\n\theight: number\n}) {\n\tconst editor = useEditor()\n\n\tconst pageRotation = canonicalizeRotation(editor.getShapePageTransform(id)!.rotation())\n\tconst isEditing = useIsEditing(id)\n\n\tconst rInput = useRef<HTMLInputElement>(null)\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: React.PointerEvent) => {\n\t\t\tconst event = getPointerInfo(e)\n\n\t\t\t// If we're editing the frame label, we shouldn't hijack the pointer event\n\t\t\tif (editor.editingShapeId === id) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\tname: 'pointer_down',\n\t\t\t\ttarget: 'shape',\n\t\t\t\tshape: editor.getShape(id)!,\n\t\t\t\t...event,\n\t\t\t})\n\t\t\te.preventDefault()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tconst el = rInput.current\n\t\tif (el && isEditing) {\n\t\t\t// On iOS, we must focus here\n\t\t\tel.focus()\n\t\t\tel.select()\n\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\t// On desktop, the input may have lost focus, so try try try again!\n\t\t\t\tif (document.activeElement !== el) {\n\t\t\t\t\tel.focus()\n\t\t\t\t\tel.select()\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t}, [rInput, isEditing])\n\n\t// rotate right 45 deg\n\tconst offsetRotation = pageRotation + Math.PI / 4\n\tconst scaledRotation = (offsetRotation * (2 / Math.PI) + 4) % 4\n\tconst labelSide: SelectionEdge = (['top', 'left', 'bottom', 'right'] as const)[\n\t\tMath.floor(scaledRotation)\n\t]\n\n\tlet labelTranslate: string\n\tswitch (labelSide) {\n\t\tcase 'top':\n\t\t\tlabelTranslate = ``\n\t\t\tbreak\n\t\tcase 'right':\n\t\t\tlabelTranslate = `translate(${toDomPrecision(width)}px, 0px) rotate(90deg)`\n\t\t\tbreak\n\t\tcase 'bottom':\n\t\t\tlabelTranslate = `translate(${toDomPrecision(width)}px, ${toDomPrecision(\n\t\t\t\theight\n\t\t\t)}px) rotate(180deg)`\n\t\t\tbreak\n\t\tcase 'left':\n\t\t\tlabelTranslate = `translate(0px, ${toDomPrecision(height)}px) rotate(270deg)`\n\t\t\tbreak\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"tl-frame-heading\"\n\t\t\tstyle={{\n\t\t\t\toverflow: isEditing ? 'visible' : 'hidden',\n\t\t\t\tmaxWidth: `calc(var(--tl-zoom) * ${\n\t\t\t\t\tlabelSide === 'top' || labelSide === 'bottom' ? Math.ceil(width) : Math.ceil(height)\n\t\t\t\t}px + var(--space-5))`,\n\t\t\t\tbottom: '100%',\n\t\t\t\ttransform: `${labelTranslate} scale(var(--tl-scale)) translateX(calc(-1 * var(--space-3))`,\n\t\t\t}}\n\t\t\tonPointerDown={handlePointerDown}\n\t\t>\n\t\t\t<div className=\"tl-frame-heading-hit-area\">\n\t\t\t\t<FrameLabelInput ref={rInput} id={id} name={name} isEditing={isEditing} />\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
  "mappings": "AAyGI;AAzGJ;AAAA,EAGC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAS,uBAAuB;AAEzB,MAAM,eAAe,SAASA,cAAa;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKG;AACF,QAAM,SAAS,UAAU;AAEzB,QAAM,eAAe,qBAAqB,OAAO,sBAAsB,EAAE,EAAG,SAAS,CAAC;AACtF,QAAM,YAAY,aAAa,EAAE;AAEjC,QAAM,SAAS,OAAyB,IAAI;AAE5C,QAAM,oBAAoB;AAAA,IACzB,CAAC,MAA0B;AAC1B,YAAM,QAAQ,eAAe,CAAC;AAG9B,UAAI,OAAO,mBAAmB;AAAI;AAElC,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO,OAAO,SAAS,EAAE;AAAA,QACzB,GAAG;AAAA,MACJ,CAAC;AACD,QAAE,eAAe;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ,EAAE;AAAA,EACZ;AAEA,YAAU,MAAM;AACf,UAAM,KAAK,OAAO;AAClB,QAAI,MAAM,WAAW;AAEpB,SAAG,MAAM;AACT,SAAG,OAAO;AAEV,4BAAsB,MAAM;AAE3B,YAAI,SAAS,kBAAkB,IAAI;AAClC,aAAG,MAAM;AACT,aAAG,OAAO;AAAA,QACX;AAAA,MACD,CAAC;AAAA,IACF;AAAA,EACD,GAAG,CAAC,QAAQ,SAAS,CAAC;AAGtB,QAAM,iBAAiB,eAAe,KAAK,KAAK;AAChD,QAAM,kBAAkB,kBAAkB,IAAI,KAAK,MAAM,KAAK;AAC9D,QAAM,YAA4B,CAAC,OAAO,QAAQ,UAAU,OAAO,EAClE,KAAK,MAAM,cAAc,CAC1B;AAEA,MAAI;AACJ,UAAQ,WAAW;AAAA,IAClB,KAAK;AACJ,uBAAiB;AACjB;AAAA,IACD,KAAK;AACJ,uBAAiB,aAAa,eAAe,KAAK,CAAC;AACnD;AAAA,IACD,KAAK;AACJ,uBAAiB,aAAa,eAAe,KAAK,CAAC,OAAO;AAAA,QACzD;AAAA,MACD,CAAC;AACD;AAAA,IACD,KAAK;AACJ,uBAAiB,kBAAkB,eAAe,MAAM,CAAC;AACzD;AAAA,EACF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACN,UAAU,YAAY,YAAY;AAAA,QAClC,UAAU,yBACT,cAAc,SAAS,cAAc,WAAW,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,MAAM,CACpF;AAAA,QACA,QAAQ;AAAA,QACR,WAAW,GAAG,cAAc;AAAA,MAC7B;AAAA,MACA,eAAe;AAAA,MAEf,8BAAC,SAAI,WAAU,6BACd,8BAAC,mBAAgB,KAAK,QAAQ,IAAQ,MAAY,WAAsB,GACzE;AAAA;AAAA,EACD;AAEF;",
  "names": ["FrameHeading"]
}