@tldraw/commenting 5.3.0-next.d7d8ced023d5 → 5.3.0-next.dec36c5c2930

package/src/ui/visual-viewport.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { getVisibleViewport } from './visual-viewport'
+
+function makeWindow(
+	innerWidth: number,
+	innerHeight: number,
+	vv?: { offsetTop: number; offsetLeft: number; width: number; height: number }
+): Window {
+	return { innerWidth, innerHeight, visualViewport: vv ?? null } as unknown as Window
+}
+
+describe('getVisibleViewport', () => {
+	it('reads the visual viewport, carrying its offset into the derived edges', () => {
+		const win = makeWindow(1024, 768, { offsetTop: 40, offsetLeft: 10, width: 900, height: 500 })
+		expect(getVisibleViewport(win)).toEqual({
+			top: 40,
+			left: 10,
+			width: 900,
+			height: 500,
+			bottom: 540,
+			right: 910,
+		})
+	})
+
+	it('falls back to the layout viewport when visualViewport is absent', () => {
+		const win = makeWindow(1024, 768)
+		expect(getVisibleViewport(win)).toEqual({
+			top: 0,
+			left: 0,
+			width: 1024,
+			height: 768,
+			bottom: 768,
+			right: 1024,
+		})
+	})
+})

package/src/ui/visual-viewport.ts

@@ -0,0 +1,27 @@
+// The visual viewport is the region actually on screen. The software keyboard (and pinch-zoom)
+// shrink it while leaving the layout viewport — and CSS `dvh` — unchanged, most notably on iOS.
+// So placing a panel above the keyboard means measuring against `window.visualViewport`, not CSS.
+// These helpers are the single place the commenting layer reads it.
+
+/** The on-screen viewport region in window coordinates, falling back to the layout viewport where
+ *  `visualViewport` is unavailable. `top`/`left` carry the viewport's own offset — on iOS this is
+ *  non-zero while the keyboard is open, and dropping it misplaces anything measured against it. */
+export interface VisibleViewport {
+	top: number
+	left: number
+	width: number
+	height: number
+	bottom: number
+	right: number
+}
+
+/** Read the visible viewport once. Call it inside a `visualViewport` resize/scroll handler to keep
+ *  a measurement current as the keyboard opens and closes. */
+export function getVisibleViewport(win: Window): VisibleViewport {
+	const vv = win.visualViewport
+	const top = vv ? vv.offsetTop : 0
+	const left = vv ? vv.offsetLeft : 0
+	const width = vv ? vv.width : win.innerWidth
+	const height = vv ? vv.height : win.innerHeight
+	return { top, left, width, height, bottom: top + height, right: left + width }
+}

package/dist-cjs/ui/tooltip-button.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/tooltip-button.tsx"],
-  "sourcesContent": ["import { type ButtonHTMLAttributes, forwardRef } from 'react'\nimport { TldrawUiTooltip } from 'tldraw'\n\ninterface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\ttooltip: string\n}\n\n/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button\n *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */\nexport const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(\n\tfunction TooltipButton({ tooltip, children, ...props }, ref) {\n\t\treturn (\n\t\t\t<TldrawUiTooltip content={tooltip}>\n\t\t\t\t<button ref={ref} type=\"button\" aria-label={tooltip} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t</TldrawUiTooltip>\n\t\t)\n\t}\n)\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaI;AAbJ,mBAAsD;AACtD,oBAAgC;AAQzB,MAAM,oBAAgB;AAAA,EAC5B,SAASA,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAK;AAC5D,WACC,4CAAC,iCAAgB,SAAS,SACzB,sDAAC,YAAO,KAAU,MAAK,UAAS,cAAY,SAAU,GAAG,OACvD,UACF,GACD;AAAA,EAEF;AACD;",
-  "names": ["TooltipButton"]
-}

package/dist-esm/ui/tooltip-button.mjs

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { TldrawUiTooltip } from "tldraw";
-const TooltipButton = forwardRef(
-  function TooltipButton2({ tooltip, children, ...props }, ref) {
-    return /* @__PURE__ */ jsx(TldrawUiTooltip, { content: tooltip, children: /* @__PURE__ */ jsx("button", { ref, type: "button", "aria-label": tooltip, ...props, children }) });
-  }
-);
-export {
-  TooltipButton
-};
-//# sourceMappingURL=tooltip-button.mjs.map

package/dist-esm/ui/tooltip-button.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/tooltip-button.tsx"],
-  "sourcesContent": ["import { type ButtonHTMLAttributes, forwardRef } from 'react'\nimport { TldrawUiTooltip } from 'tldraw'\n\ninterface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\ttooltip: string\n}\n\n/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button\n *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */\nexport const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(\n\tfunction TooltipButton({ tooltip, children, ...props }, ref) {\n\t\treturn (\n\t\t\t<TldrawUiTooltip content={tooltip}>\n\t\t\t\t<button ref={ref} type=\"button\" aria-label={tooltip} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t</TldrawUiTooltip>\n\t\t)\n\t}\n)\n"],
-  "mappings": "AAaI;AAbJ,SAAoC,kBAAkB;AACtD,SAAS,uBAAuB;AAQzB,MAAM,gBAAgB;AAAA,EAC5B,SAASA,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAK;AAC5D,WACC,oBAAC,mBAAgB,SAAS,SACzB,8BAAC,YAAO,KAAU,MAAK,UAAS,cAAY,SAAU,GAAG,OACvD,UACF,GACD;AAAA,EAEF;AACD;",
-  "names": ["TooltipButton"]
-}

package/src/ui/tooltip-button.tsx

@@ -1,20 +0,0 @@
-import { type ButtonHTMLAttributes, forwardRef } from 'react'
-import { TldrawUiTooltip } from 'tldraw'
-
-interface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-	tooltip: string
-}
-
-/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button
- *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */
-export const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(
-	function TooltipButton({ tooltip, children, ...props }, ref) {
-		return (
-			<TldrawUiTooltip content={tooltip}>
-				<button ref={ref} type="button" aria-label={tooltip} {...props}>
-					{children}
-				</button>
-			</TldrawUiTooltip>
-		)
-	}
-)