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

Shorten url state (#3041)

Browse source 
This PR shortens the URL parameters for the dot com. Old formal still
works but this is shorter (it has bugged me for ages).

Before: 
tldraw.com/r/ok?viewport=0,0,1080,720&page=page:ashdsad_sadsadasd
After: 
tldraw.com/r/ok?v=0,0,1080,720&p=ashdsad_sadsadasd


### Change Type

- [x] `internal` 

### Test Plan

1. Try the old url parameter format.
2. Try the new one.

### Release Notes

- Shortens url parameters for dot com.
This commit is contained in:
Steve Ruiz 2024-03-04 16:21:59 +00:00 committed by GitHub
parent 5e4bca9961
commit f0f133fdd2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/dotcom/src/components/MultiplayerEditor.tsx
View file

@ -182,7 +182,7 @@ export function UrlStateSync() {
window.history.replaceState(
{},
document.title,
window.location.pathname + `?viewport=${params.viewport}&page=${params.page}`
window.location.pathname + `?v=${params.v}&p=${params.p}`
)
}, [])

20
apps/dotcom/src/hooks/useUrlState.ts
View file

@ -2,10 +2,15 @@ import { default as React, useEffect } from 'react'
import { Editor, MAX_ZOOM, MIN_ZOOM, TLPageId, debounce, react, useEditor } from 'tldraw'
const PARAMS = {
// deprecated
viewport: 'viewport',
page: 'page',
// current
v: 'v',
p: 'p',
} as const
export type UrlStateParams = Record<keyof typeof PARAMS, string>
export type UrlStateParams = Partial<Record<keyof typeof PARAMS, string>>
const viewportFromString = (str: string) => {
const [x, y, w, h] = str.split(',').map((n) => parseInt(n, 10))
@ -28,8 +33,8 @@ const viewportToString = (
export const getViewportUrlQuery = (editor: Editor): UrlStateParams | null => {
if (!editor.getViewportPageBounds()) return null
return {
[PARAMS.viewport]: viewportToString(editor.getViewportPageBounds()),
[PARAMS.page]: editor.getCurrentPageId(),
[PARAMS.v]: viewportToString(editor.getViewportPageBounds()),
[PARAMS.p]: editor.getCurrentPageId()?.split(':')[1],
}
}
@ -45,8 +50,8 @@ export function useUrlState(onChangeUrl: (params: UrlStateParams) => void) {
const url = new URL(location.href)
if (url.searchParams.has(PARAMS.viewport)) {
const newViewportRaw = url.searchParams.get(PARAMS.viewport)
if (url.searchParams.has(PARAMS.viewport) || url.searchParams.has(PARAMS.v)) {
const newViewportRaw = url.searchParams.get(PARAMS.viewport) ?? url.searchParams.get(PARAMS.v)
if (newViewportRaw) {
try {
const viewport = viewportFromString(newViewportRaw)
@ -65,8 +70,9 @@ export function useUrlState(onChangeUrl: (params: UrlStateParams) => void) {
}
}
}
if (url.searchParams.has(PARAMS.page)) {
const newPageId = url.searchParams.get(PARAMS.page)
if (url.searchParams.has(PARAMS.page) || url.searchParams.has(PARAMS.p)) {
const newPageId =
url.searchParams.get(PARAMS.page) ?? 'page:' + url.searchParams.get(PARAMS.p)
if (newPageId) {
if (editor.store.has(newPageId as TLPageId)) {
editor.setCurrentPage(newPageId as TLPageId)