mirror
/
Tldraw
kopia lustrzana https://github.com/Tldraw/Tldraw
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Fix test and accidental files from dev, fix container styles

pull/84/head
Steve Ruiz 2021-09-09 15:37:46 +01:00
rodzic 29883e09e8
commit 64e5edbd6f
11 zmienionych plików z 61 dodań i 74 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

19
packages/core/src/hooks/useResizeObserver.ts
Wyświetl plik

@ -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 100644
Wyświetl plik

@ -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 100644
Wyświetl plik

@ -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 100644
Wyświetl plik

@ -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 100644
Wyświetl plik

@ -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
Wyświetl plik

@ -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
Wyświetl plik

@ -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
Wyświetl plik

@ -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
Wyświetl plik

@ -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
Wyświetl plik

@ -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
Wyświetl plik

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