Fix test and accidental files from dev, fix container styles
This commit is contained in:
parent
29883e09e8
commit
64e5edbd6f
11 changed files with 61 additions and 74 deletions
|
@ -4,22 +4,25 @@ import { Utils } from '+utils'
|
|||
|
||||
export function useResizeObserver<T extends HTMLElement | SVGElement>(ref: React.RefObject<T>) {
|
||||
const { inputs } = useTLContext()
|
||||
const rIsMounted = React.useRef(false)
|
||||
const forceUpdate = React.useReducer((x) => x + 1, 0)[1]
|
||||
|
||||
const updateOffsets = React.useCallback(() => {
|
||||
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<T extends HTMLElement | SVGElement>(ref: React
|
|||
}, [ref, inputs])
|
||||
|
||||
React.useEffect(() => {
|
||||
setTimeout(() => {
|
||||
updateOffsets()
|
||||
})
|
||||
}, [ref])
|
||||
}
|
||||
|
|
3
packages/dev/src/embedded.d.ts
vendored
Normal file
3
packages/dev/src/embedded.d.ts
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
/// <reference types="react" />
|
||||
export default function Embedded(): JSX.Element;
|
||||
//# sourceMappingURL=embedded.d.ts.map
|
1
packages/dev/src/embedded.d.ts.map
Normal file
1
packages/dev/src/embedded.d.ts.map
Normal file
|
@ -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"}
|
24
packages/dev/src/embedded.jsx
Normal file
24
packages/dev/src/embedded.jsx
Normal file
|
@ -0,0 +1,24 @@
|
|||
import { TLDraw } from '@tldraw/tldraw';
|
||||
import * as React from 'react';
|
||||
export default function Embedded() {
|
||||
return (<div style={{ padding: '2% 10%', width: 'calc(100% - 100px)' }}>
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
width: 'auto',
|
||||
height: '500px',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<TLDraw id="small1"/>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
width: 'auto',
|
||||
height: '500px',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<TLDraw id="small2"/>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
//# sourceMappingURL=embedded.jsx.map
|
1
packages/dev/src/embedded.jsx.map
Normal file
1
packages/dev/src/embedded.jsx.map
Normal file
|
@ -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"}
|
|
@ -3,13 +3,13 @@ import * as React from 'react'
|
|||
|
||||
export default function Embedded(): JSX.Element {
|
||||
return (
|
||||
<div>
|
||||
<div style={{ padding: '2% 10%', width: 'calc(100% - 100px)' }}>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
margin: '5%',
|
||||
width: 'calc(100% - 100px)',
|
||||
width: 'auto',
|
||||
height: '500px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<TLDraw id="small1" />
|
||||
|
@ -18,9 +18,9 @@ export default function Embedded(): JSX.Element {
|
|||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
margin: '5%',
|
||||
width: 'calc(100% - 100px)',
|
||||
width: 'auto',
|
||||
height: '500px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<TLDraw id="small2" />
|
||||
|
|
|
@ -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
|
||||
},
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>tldraw</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<script type="module" src="./bundle.js"></script>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
|
@ -2234,11 +2234,11 @@ export class TLDrawState extends StateManager<Data> {
|
|||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
|
|
|
@ -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%;
|
||||
}
|
Loading…
Reference in a new issue