PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix test and accidental files from dev, fix container styles

Browse source
This commit is contained in:
Steve Ruiz 2021-09-09 15:37:46 +01:00
parent 29883e09e8
commit 64e5edbd6f
11 changed files with 61 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/core/src/hooks/useResizeObserver.ts
View file

@ -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(() => {
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<T extends HTMLElement | SVGElement>(ref: React
}, [ref, inputs])
React.useEffect(() => {
setTimeout(() => {
updateOffsets()
})
updateOffsets()
}, [ref])
}

3
packages/dev/src/embedded.d.ts vendored Normal file
View 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
View 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
View 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
View 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"}

10
packages/dev/src/embedded.tsx
View file

@ -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" />

22
packages/dev/tsconfig.tsbuildinfo
View file

@ -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
packages/tldraw/src/components/tldraw/tldraw.test.tsx
View file

@ -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', () => {

24
packages/tldraw/src/index.html
View file

@ -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>

10
packages/tldraw/src/state/tlstate.ts
View file

@ -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)
}

20
packages/tldraw/src/styles.css
View file

@ -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%;
}