diff --git a/packages/core/src/hooks/useResizeObserver.ts b/packages/core/src/hooks/useResizeObserver.ts index 59377d195..292c6a0bc 100644 --- a/packages/core/src/hooks/useResizeObserver.ts +++ b/packages/core/src/hooks/useResizeObserver.ts @@ -4,22 +4,25 @@ import { Utils } from '+utils' export function useResizeObserver(ref: React.RefObject) { const { inputs } = useTLContext() + const rIsMounted = React.useRef(false) const forceUpdate = React.useReducer((x) => x + 1, 0)[1] const updateOffsets = React.useCallback(() => { - const rect = ref.current?.getBoundingClientRect() - if (rect) { - inputs.offset = [rect.left, rect.top] - inputs.size = [rect.width, rect.height] - forceUpdate() + if (rIsMounted.current) { + const rect = ref.current?.getBoundingClientRect() + if (rect) { + inputs.offset = [rect.left, rect.top] + inputs.size = [rect.width, rect.height] + forceUpdate() + } } + rIsMounted.current = true }, [ref, forceUpdate]) React.useEffect(() => { const debouncedUpdateOffsets = Utils.debounce(updateOffsets, 100) window.addEventListener('scroll', debouncedUpdateOffsets) window.addEventListener('resize', debouncedUpdateOffsets) - updateOffsets() return () => { window.removeEventListener('scroll', debouncedUpdateOffsets) window.removeEventListener('resize', debouncedUpdateOffsets) @@ -47,8 +50,6 @@ export function useResizeObserver(ref: React }, [ref, inputs]) React.useEffect(() => { - setTimeout(() => { - updateOffsets() - }) + updateOffsets() }, [ref]) } diff --git a/packages/dev/src/embedded.d.ts b/packages/dev/src/embedded.d.ts new file mode 100644 index 000000000..b7f754d95 --- /dev/null +++ b/packages/dev/src/embedded.d.ts @@ -0,0 +1,3 @@ +/// +export default function Embedded(): JSX.Element; +//# sourceMappingURL=embedded.d.ts.map \ No newline at end of file diff --git a/packages/dev/src/embedded.d.ts.map b/packages/dev/src/embedded.d.ts.map new file mode 100644 index 000000000..72a4a1ca0 --- /dev/null +++ b/packages/dev/src/embedded.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"embedded.d.ts","sourceRoot":"","sources":["embedded.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,QAAQ,IAAI,GAAG,CAAC,OAAO,CA0B9C"} \ No newline at end of file diff --git a/packages/dev/src/embedded.jsx b/packages/dev/src/embedded.jsx new file mode 100644 index 000000000..9a8857b62 --- /dev/null +++ b/packages/dev/src/embedded.jsx @@ -0,0 +1,24 @@ +import { TLDraw } from '@tldraw/tldraw'; +import * as React from 'react'; +export default function Embedded() { + return (
+
+ +
+ +
+ +
+
); +} +//# sourceMappingURL=embedded.jsx.map \ No newline at end of file diff --git a/packages/dev/src/embedded.jsx.map b/packages/dev/src/embedded.jsx.map new file mode 100644 index 000000000..150a21c0d --- /dev/null +++ b/packages/dev/src/embedded.jsx.map @@ -0,0 +1 @@ +{"version":3,"file":"embedded.jsx","sourceRoot":"","sources":["embedded.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,OAAO,CACL,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAC,CAC7D;MAAA,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAEF;QAAA,CAAC,MAAM,CAAC,EAAE,CAAC,QAAQ,EACrB;MAAA,EAAE,GAAG,CAEL;;MAAA,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAEF;QAAA,CAAC,MAAM,CAAC,EAAE,CAAC,QAAQ,EACrB;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAA;AACH,CAAC"} \ No newline at end of file diff --git a/packages/dev/src/embedded.tsx b/packages/dev/src/embedded.tsx index ad7c02fc6..f797d78d7 100644 --- a/packages/dev/src/embedded.tsx +++ b/packages/dev/src/embedded.tsx @@ -3,13 +3,13 @@ import * as React from 'react' export default function Embedded(): JSX.Element { return ( -
+
@@ -18,9 +18,9 @@ export default function Embedded(): JSX.Element {
diff --git a/packages/dev/tsconfig.tsbuildinfo b/packages/dev/tsconfig.tsbuildinfo index 7629ef4d2..039bd6d5c 100644 --- a/packages/dev/tsconfig.tsbuildinfo +++ b/packages/dev/tsconfig.tsbuildinfo @@ -331,16 +331,6 @@ "signature": "e0cf19f141c3b2632d9fc02d65a753864304fd6cc4391fcb532844356399519f", "affectsGlobalScope": false }, - "../core/dist/types/inputs.d.ts": { - "version": "c46f6b1bf9297efa4b25ec60544c562e1fcb08da02a23569b2fa860e77088d0c", - "signature": "c46f6b1bf9297efa4b25ec60544c562e1fcb08da02a23569b2fa860e77088d0c", - "affectsGlobalScope": false - }, - "../core/dist/types/index.d.ts": { - "version": "062065318d8acc40912798a5fde2c4ba54092da26be305c245cfa47b088ca39e", - "signature": "062065318d8acc40912798a5fde2c4ba54092da26be305c245cfa47b088ca39e", - "affectsGlobalScope": false - }, "../core/dist/types/utils/utils.d.ts": { "version": "0bea66a0c4bc572f6cdd0ed72fa9cd5981823d90e1bd032751c616d068e83dbe", "signature": "0bea66a0c4bc572f6cdd0ed72fa9cd5981823d90e1bd032751c616d068e83dbe", @@ -366,6 +356,16 @@ "signature": "8d9f4e84eff6f5fee54ba4da3470f17ef3e6754f55e4c1431b030061d02aea31", "affectsGlobalScope": false }, + "../core/dist/types/inputs.d.ts": { + "version": "c46f6b1bf9297efa4b25ec60544c562e1fcb08da02a23569b2fa860e77088d0c", + "signature": "c46f6b1bf9297efa4b25ec60544c562e1fcb08da02a23569b2fa860e77088d0c", + "affectsGlobalScope": false + }, + "../core/dist/types/index.d.ts": { + "version": "062065318d8acc40912798a5fde2c4ba54092da26be305c245cfa47b088ca39e", + "signature": "062065318d8acc40912798a5fde2c4ba54092da26be305c245cfa47b088ca39e", + "affectsGlobalScope": false + }, "../../node_modules/zustand/vanilla.d.ts": { "version": "5a7e08d1f741929f219121fd5adb83b12bdf6b4ed3c2e4179daf5e1e0be6fd4d", "signature": "5a7e08d1f741929f219121fd5adb83b12bdf6b4ed3c2e4179daf5e1e0be6fd4d", @@ -457,7 +457,7 @@ "affectsGlobalScope": false }, "./src/embedded.tsx": { - "version": "9622b6e09595314efe0d378088a4030374a6755acc580cbe2e6d4aa36959e2d3", + "version": "4448effea95fc7b87ffffe866859c671717280e1ec2adc2bbf9c34da78d536a4", "signature": "e48661ad8d58cfca4b7a2764942cf4553064099cc12080b998732b9686c1c43b", "affectsGlobalScope": false }, diff --git a/packages/tldraw/src/components/tldraw/tldraw.test.tsx b/packages/tldraw/src/components/tldraw/tldraw.test.tsx index c04d83c0a..dfab1933f 100644 --- a/packages/tldraw/src/components/tldraw/tldraw.test.tsx +++ b/packages/tldraw/src/components/tldraw/tldraw.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { render } from '@testing-library/react' +import { act } from 'react-dom/test-utils' import { TLDraw } from './tldraw' describe('tldraw', () => { diff --git a/packages/tldraw/src/index.html b/packages/tldraw/src/index.html deleted file mode 100644 index 70e93032b..000000000 --- a/packages/tldraw/src/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - tldraw - - -
- - - - - diff --git a/packages/tldraw/src/state/tlstate.ts b/packages/tldraw/src/state/tlstate.ts index 6f35b0067..2ba44abfd 100644 --- a/packages/tldraw/src/state/tlstate.ts +++ b/packages/tldraw/src/state/tlstate.ts @@ -2234,11 +2234,11 @@ export class TLDrawState extends StateManager { } onPinchEnd: TLPinchEventHandler = () => { - // if (this.state.settings.isZoomSnap) { - // const i = Math.round((this.pageState.camera.zoom * 100) / 25) - // const nextZoom = TLDR.getCameraZoom(i * 0.25) - // this.zoomTo(nextZoom, inputs.pointer?.point) - // } + if (this.state.settings.isZoomSnap) { + const i = Math.round((this.pageState.camera.zoom * 100) / 25) + const nextZoom = TLDR.getCameraZoom(i * 0.25) + this.zoomTo(nextZoom, inputs.pointer?.point) + } this.setStatus(TLDrawStatus.Idle) } diff --git a/packages/tldraw/src/styles.css b/packages/tldraw/src/styles.css deleted file mode 100644 index 36a1e31d7..000000000 --- a/packages/tldraw/src/styles.css +++ /dev/null @@ -1,20 +0,0 @@ -html, -* { - box-sizing: border-box; -} - -body { - overscroll-behavior: none; - margin: 0px; - padding: 0px; -} - -.tldraw { - position: fixed; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - width: 100%; - height: 100%; -}