tldraw/dist-esm/lib/ui/components/TopPanel/CenteredTopPanelContainer.mjs.map

A tiny little drawing editor.

{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/TopPanel/CenteredTopPanelContainer.tsx"],
  "sourcesContent": ["import { ReactNode, useCallback, useLayoutEffect, useRef } from 'react'\nimport { useBreakpoint } from '../../context/breakpoints'\n\n/** @public */\nexport interface CenteredTopPanelContainerProps {\n\tchildren: ReactNode\n\tmaxWidth?: number\n\tignoreRightWidth?: number\n\tstylePanelWidth?: number\n\tmarginBetweenZones?: number\n\tsqueezeAmount?: number\n}\n\n/** @public @react */\nexport function CenteredTopPanelContainer({\n\tmaxWidth = 420,\n\tignoreRightWidth = 0,\n\tstylePanelWidth = 148,\n\tmarginBetweenZones = 12,\n\tsqueezeAmount = 52,\n\tchildren,\n}: CenteredTopPanelContainerProps) {\n\tconst ref = useRef<HTMLDivElement>(null)\n\tconst breakpoint = useBreakpoint()\n\n\tconst updateLayout = useCallback(() => {\n\t\tconst element = ref.current\n\t\tif (!element) return\n\n\t\tconst layoutTop = element.parentElement!.parentElement!\n\t\tconst leftPanel = layoutTop.querySelector('.tlui-layout__top__left')! as HTMLElement\n\t\tconst rightPanel = layoutTop.querySelector('.tlui-layout__top__right')! as HTMLElement\n\n\t\tconst totalWidth = layoutTop.offsetWidth\n\t\tconst leftWidth = leftPanel.offsetWidth\n\t\tconst rightWidth = rightPanel.offsetWidth\n\n\t\t// Ignore button width\n\t\tconst selfWidth = element.offsetWidth - ignoreRightWidth\n\n\t\tlet xCoordIfCentered = (totalWidth - selfWidth) / 2\n\n\t\t// Prevent subpixel bullsh\n\t\tif (totalWidth % 2 !== 0) {\n\t\t\txCoordIfCentered -= 0.5\n\t\t}\n\n\t\tconst xCoordIfLeftAligned = leftWidth + marginBetweenZones\n\n\t\tconst left = element.offsetLeft\n\t\tconst maxWidthProperty = Math.min(\n\t\t\ttotalWidth - rightWidth - leftWidth - 2 * marginBetweenZones,\n\t\t\tmaxWidth\n\t\t)\n\t\tconst xCoord = Math.max(xCoordIfCentered, xCoordIfLeftAligned) - left\n\n\t\t// Squeeze the title if the right panel is too wide on small screens\n\t\tif (rightPanel.offsetWidth > stylePanelWidth && breakpoint <= 6) {\n\t\t\telement.style.setProperty('max-width', maxWidthProperty - squeezeAmount + 'px')\n\t\t} else {\n\t\t\telement.style.setProperty('max-width', maxWidthProperty + 'px')\n\t\t}\n\t\telement.style.setProperty('transform', `translate(${xCoord}px, 0px)`)\n\t}, [breakpoint, ignoreRightWidth, marginBetweenZones, maxWidth, squeezeAmount, stylePanelWidth])\n\n\tuseLayoutEffect(() => {\n\t\tconst element = ref.current\n\t\tif (!element) return\n\n\t\tconst layoutTop = element.parentElement!.parentElement!\n\t\tconst leftPanel = layoutTop.querySelector('.tlui-layout__top__left')! as HTMLElement\n\t\tconst rightPanel = layoutTop.querySelector('.tlui-layout__top__right')! as HTMLElement\n\n\t\t// Update layout when the things change\n\t\tconst observer = new ResizeObserver(updateLayout)\n\t\tobserver.observe(leftPanel)\n\t\tobserver.observe(rightPanel)\n\t\tobserver.observe(layoutTop)\n\t\tobserver.observe(element)\n\n\t\t// Also update on first layout\n\t\tupdateLayout()\n\n\t\treturn () => {\n\t\t\tobserver.disconnect()\n\t\t}\n\t}, [updateLayout])\n\n\t// Update after every render, too\n\tuseLayoutEffect(() => {\n\t\tupdateLayout()\n\t})\n\n\treturn (\n\t\t<div ref={ref} className=\"tlui-top-panel__container\">\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n"],
  "mappings": "AA8FE;AA9FF,SAAoB,aAAa,iBAAiB,cAAc;AAChE,SAAS,qBAAqB;AAavB,SAAS,0BAA0B;AAAA,EACzC,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB;AACD,GAAmC;AAClC,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,aAAa,cAAc;AAEjC,QAAM,eAAe,YAAY,MAAM;AACtC,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AAEd,UAAM,YAAY,QAAQ,cAAe;AACzC,UAAM,YAAY,UAAU,cAAc,yBAAyB;AACnE,UAAM,aAAa,UAAU,cAAc,0BAA0B;AAErE,UAAM,aAAa,UAAU;AAC7B,UAAM,YAAY,UAAU;AAC5B,UAAM,aAAa,WAAW;AAG9B,UAAM,YAAY,QAAQ,cAAc;AAExC,QAAI,oBAAoB,aAAa,aAAa;AAGlD,QAAI,aAAa,MAAM,GAAG;AACzB,0BAAoB;AAAA,IACrB;AAEA,UAAM,sBAAsB,YAAY;AAExC,UAAM,OAAO,QAAQ;AACrB,UAAM,mBAAmB,KAAK;AAAA,MAC7B,aAAa,aAAa,YAAY,IAAI;AAAA,MAC1C;AAAA,IACD;AACA,UAAM,SAAS,KAAK,IAAI,kBAAkB,mBAAmB,IAAI;AAGjE,QAAI,WAAW,cAAc,mBAAmB,cAAc,GAAG;AAChE,cAAQ,MAAM,YAAY,aAAa,mBAAmB,gBAAgB,IAAI;AAAA,IAC/E,OAAO;AACN,cAAQ,MAAM,YAAY,aAAa,mBAAmB,IAAI;AAAA,IAC/D;AACA,YAAQ,MAAM,YAAY,aAAa,aAAa,MAAM,UAAU;AAAA,EACrE,GAAG,CAAC,YAAY,kBAAkB,oBAAoB,UAAU,eAAe,eAAe,CAAC;AAE/F,kBAAgB,MAAM;AACrB,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AAEd,UAAM,YAAY,QAAQ,cAAe;AACzC,UAAM,YAAY,UAAU,cAAc,yBAAyB;AACnE,UAAM,aAAa,UAAU,cAAc,0BAA0B;AAGrE,UAAM,WAAW,IAAI,eAAe,YAAY;AAChD,aAAS,QAAQ,SAAS;AAC1B,aAAS,QAAQ,UAAU;AAC3B,aAAS,QAAQ,SAAS;AAC1B,aAAS,QAAQ,OAAO;AAGxB,iBAAa;AAEb,WAAO,MAAM;AACZ,eAAS,WAAW;AAAA,IACrB;AAAA,EACD,GAAG,CAAC,YAAY,CAAC;AAGjB,kBAAgB,MAAM;AACrB,iBAAa;AAAA,EACd,CAAC;AAED,SACC,oBAAC,SAAI,KAAU,WAAU,6BACvB,UACF;AAEF;",
  "names": []
}