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

Remove share menu (#946)

Browse source 
* Remove share menu

* Delete ShareMenu.tsx

* Remove alert, etc
This commit is contained in:
Steve Ruiz 2022-09-01 16:19:22 +01:00 committed by GitHub
parent 8351936321
commit 3cfae6278c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 4 additions and 278 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/tldraw/package.json
View file

@ -49,7 +49,6 @@
"@tldraw/vec": "^1.7.1",
"browser-fs-access": "^0.31.0",
"idb-keyval": "^6.1.0",
"jsoncrush": "^1.1.8",
"lz-string": "^1.4.4",
"perfect-freehand": "^1.1.0",
"react-error-boundary": "^3.1.4",
@ -100,10 +99,7 @@
"moduleNameMapper": {
"@tldraw/tldraw": "<rootDir>/src",
"\\~(.*)": "<rootDir>/src/$1"
},
"transformIgnorePatterns": [
"node_modules/(?!jsoncrush/JSONCrush.js)"
]
}
},
"gitHead": "4b1137849ad07da36fc8f0f19cb64e7535a79296"
}

43
packages/tldraw/src/Tldraw.tsx
View file

@ -1,5 +1,4 @@
import { Renderer } from '@tldraw/core'
import JSONCrush from 'jsoncrush'
import * as React from 'react'
import { ErrorBoundary as _Errorboundary } from 'react-error-boundary'
import { IntlProvider } from 'react-intl'
@ -25,7 +24,7 @@ import { TDCallbacks, TldrawApp } from '~state'
import { TLDR } from '~state/TLDR'
import { shapeUtils } from '~state/shapes'
import { dark, styled } from '~styles'
import { TDDocument, TDPage, TDShape, TDStatus } from '~types'
import { TDDocument, TDStatus } from '~types'
const ErrorBoundary = _Errorboundary as any
@ -60,11 +59,6 @@ export interface TldrawProps extends TDCallbacks {
*/
showMultiplayerMenu?: boolean
/**
* (optional) Whether to show the share menu.
*/
showShareMenu?: boolean
/**
* (optional) Whether to show the pages UI.
*/
@ -120,7 +114,6 @@ export function Tldraw({
autofocus = true,
showMenu = true,
showMultiplayerMenu = true,
showShareMenu = true,
showPages = true,
showTools = true,
showZoom = true,
@ -224,36 +217,6 @@ export function Tldraw({
setApp(newApp)
}, [sId, id])
// In dev, we need to delete the prefixed
const entry =
window.location.port === '5420'
? window.location.hash.replace('#/develop/', '')
: window.location.search
const urlSearchParams = new URLSearchParams(entry)
const encodedPage = urlSearchParams.get('d')
const decodedPage = JSONCrush.uncrush((encodedPage as string) ?? '')
React.useEffect(() => {
if (decodedPage.length === 0) return
const state = JSON.parse(decodedPage) as Record<string, any>
if (Object.keys(state).length) {
app.ready.then(() => {
if ('page' in state) {
app.loadPageFromURL(state.page, state.pageState)
} else {
const nextDocument = state as TDDocument
if (nextDocument.id === app.document.id) {
app.updateDocument(nextDocument)
} else {
app.loadDocument(nextDocument)
}
}
})
}
}, [app])
// Update the document if the `document` prop changes but the ids,
// are the same, or else load a new document if the ids are different.
React.useEffect(() => {
@ -367,7 +330,6 @@ export function Tldraw({
showPages={showPages}
showMenu={showMenu}
showMultiplayerMenu={showMultiplayerMenu}
showShareMenu={showShareMenu}
showStyles={showStyles}
showZoom={showZoom}
showTools={showTools}
@ -390,7 +352,6 @@ interface InnerTldrawProps {
showStyles: boolean
showUI: boolean
showTools: boolean
showShareMenu: boolean
}
const InnerTldraw = React.memo(function InnerTldraw({
@ -399,7 +360,6 @@ const InnerTldraw = React.memo(function InnerTldraw({
showPages,
showMenu,
showMultiplayerMenu,
showShareMenu,
showZoom,
showStyles,
showTools,
@ -602,7 +562,6 @@ const InnerTldraw = React.memo(function InnerTldraw({
showPages={showPages}
showMenu={showMenu}
showMultiplayerMenu={showMultiplayerMenu}
showShareMenu={showShareMenu}
showStyles={showStyles}
showZoom={showZoom}
/>

114
packages/tldraw/src/components/Primitives/AlertDialog/Alert.tsx
View file

@ -1,114 +0,0 @@
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
import * as React from 'react'
import { styled } from '~styles'
interface ContentProps {
children: React.ReactNode
onClose?: () => void
container: any
}
function Content({ children, onClose, container }: ContentProps) {
const handleKeyDown = (event: React.KeyboardEvent) => {
switch (event.key) {
case 'Escape':
onClose?.()
break
}
}
return (
<AlertDialogPrimitive.Portal container={container}>
<StyledOverlay />
<StyledContent onKeyDown={handleKeyDown}>{children}</StyledContent>
</AlertDialogPrimitive.Portal>
)
}
const StyledDescription = styled(AlertDialogPrimitive.Description, {
marginBottom: 20,
color: '$text',
fontSize: '$2',
lineHeight: 1.5,
textAlign: 'center',
minWidth: 0,
alignSelf: 'center',
maxWidth: '62%',
})
const AlertDialogRoot = AlertDialogPrimitive.Root
const AlertDialogContent = Content
const AlertDialogDescription = StyledDescription
const AlertDialogAction = AlertDialogPrimitive.Action
interface AlertProps {
container: any
description: string
open: boolean
onClose: () => void
}
export const Alert = ({ container, description, open, onClose }: AlertProps) => {
return (
<AlertDialogRoot open={open}>
<AlertDialogContent onClose={onClose} container={container}>
<AlertDialogDescription>{description}</AlertDialogDescription>
<div
style={{
display: 'flex',
justifyContent: 'center',
width: 'auto',
}}
>
<AlertDialogAction asChild>
<Button css={{ backgroundColor: '#2F80ED', color: 'White' }} onClick={onClose}>
Ok
</Button>
</AlertDialogAction>
</div>
</AlertDialogContent>
</AlertDialogRoot>
)
}
const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
position: 'fixed',
inset: 0,
backgroundColor: 'rgba(0, 0, 0, .15)',
pointerEvents: 'all',
})
const StyledContent = styled(AlertDialogPrimitive.Content, {
position: 'fixed',
font: '$ui',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 'max-content',
padding: '$3',
pointerEvents: 'all',
backgroundColor: '$panel',
borderRadius: '$3',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
fontFamily: '$ui',
border: '1px solid $panelContrast',
boxShadow: '$panel',
})
const Button = styled('button', {
all: 'unset',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '$2',
padding: '0 15px',
fontSize: '$1',
lineHeight: 1,
fontWeight: 'normal',
height: 36,
color: '$text',
cursor: 'pointer',
minWidth: 48,
width: 'max-content',
})

1
packages/tldraw/src/components/Primitives/AlertDialog/index.ts
View file

@ -1,3 +1,2 @@
export * from './AlertDialog'
export * from './FilenameDialog'
export * from './Alert'

99
packages/tldraw/src/components/TopPanel/ShareMenu/ShareMenu.tsx
View file

@ -1,99 +0,0 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { ClipboardIcon, Share1Icon } from '@radix-ui/react-icons'
import JSONCrush from 'jsoncrush'
import * as React from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
import { Alert } from '~components/Primitives/AlertDialog'
import { DMContent, DMItem, DMTriggerIcon } from '~components/Primitives/DropdownMenu'
import { SmallIcon } from '~components/Primitives/SmallIcon'
import { useTldrawApp } from '~hooks'
const ShareMenu = () => {
const app = useTldrawApp()
const intl = useIntl()
const currentPageId = app.appState.currentPageId
const pageDocument = app.document.pages[currentPageId]
const pageState = app.document.pageStates[currentPageId]
const [container, setContainer] = React.useState<any>(null)
const [openDialog, setOpenDialog] = React.useState(false)
const toggleOpenDialog = () => setOpenDialog(!openDialog)
const copyCurrentPageLink = () => {
const hasAsset = Object.entries(pageDocument.shapes).filter(
([_, value]) => value.assetId
).length
if (hasAsset) {
toggleOpenDialog()
} else {
try {
const state = {
page: {
...pageDocument,
},
pageState: {
...pageState,
},
}
const crushed = JSONCrush.crush(JSON.stringify(state))
const link = `${window.location.origin}/?d=${encodeURIComponent(crushed)}`
navigator.clipboard.writeText(link)
} catch (err) {
console.error(err)
}
}
}
const copyProjectLink = () => {
if (Object.keys(app.document.assets).length) {
toggleOpenDialog()
} else {
try {
const crushed = JSONCrush.crush(JSON.stringify(app.document))
const link = `${window.location.href}/?d=${encodeURIComponent(crushed)}`
navigator.clipboard.writeText(link)
} catch (e) {
console.error(e)
}
}
}
return (
<>
<DropdownMenu.Root dir="ltr">
<DMTriggerIcon id="TD-MultiplayerMenuIcon">
<Share1Icon />
</DMTriggerIcon>
<DMContent
variant="menu"
id="TD-MultiplayerMenu"
side="bottom"
align="start"
sideOffset={4}
>
<DMItem id="TD-Multiplayer-CopyInviteLink" onClick={copyCurrentPageLink}>
<FormattedMessage id="copy.current.page.link" />
<SmallIcon>
<ClipboardIcon />
</SmallIcon>
</DMItem>
<DMItem id="TD-Multiplayer-CopyReadOnlyLink" onClick={copyProjectLink}>
<FormattedMessage id="copy.project.link" />
<SmallIcon>
<ClipboardIcon />
</SmallIcon>
</DMItem>
</DMContent>
</DropdownMenu.Root>
<div ref={setContainer} />
<Alert
container={container}
description={intl.formatMessage({ id: 'data.too.big.encoded' })}
open={openDialog}
onClose={toggleOpenDialog}
/>
</>
)
}
export default ShareMenu

4
packages/tldraw/src/components/TopPanel/TopPanel.tsx
View file

@ -7,7 +7,6 @@ import { styled } from '~styles'
import { Menu } from './Menu/Menu'
import { MultiplayerMenu } from './MultiplayerMenu'
import { PageMenu } from './PageMenu'
import ShareMenu from './ShareMenu/ShareMenu'
import { StyleMenu } from './StyleMenu'
import { ZoomMenu } from './ZoomMenu'
@ -18,7 +17,6 @@ interface TopPanelProps {
showStyles: boolean
showZoom: boolean
showMultiplayerMenu: boolean
showShareMenu: boolean
}
export function TopPanel({
@ -28,7 +26,6 @@ export function TopPanel({
showStyles,
showZoom,
showMultiplayerMenu,
showShareMenu,
}: TopPanelProps) {
const app = useTldrawApp()
@ -38,7 +35,6 @@ export function TopPanel({
<Panel side="left" id="TD-MenuPanel">
{showMenu && <Menu readOnly={readOnly} />}
{showMultiplayerMenu && <MultiplayerMenu />}
{showShareMenu && <ShareMenu />}
{showPages && <PageMenu />}
</Panel>
)}

2
packages/tldraw/src/state/TldrawApp.ts
View file

@ -3495,8 +3495,6 @@ export class TldrawApp extends StateManager<TDSnapshot> {
return matches && matches.length >= 2 ? matches[1] : null
}
console.warn('could not get viewbox from svg string')
this.setIsLoading(false)
return null

4
packages/tldraw/src/state/shapes/DrawUtil/DrawUtil.tsx
View file

@ -133,14 +133,14 @@ export class DrawUtil extends TDShapeUtil<T, E> {
[DashStyle.Solid]: `none`,
[DashStyle.Dotted]: `0.1 ${strokeWidth * 4}`,
[DashStyle.Dashed]: `${strokeWidth * 4} ${strokeWidth * 4}`,
}[style.dash]
}[style.dash as DashStyle]
const strokeDashoffset = {
[DashStyle.Draw]: 'none',
[DashStyle.Solid]: `none`,
[DashStyle.Dotted]: `0`,
[DashStyle.Dashed]: `0`,
}[style.dash]
}[style.dash as DashStyle]
const sw = 1 + strokeWidth * 1.5

4
packages/tldraw/src/translations/main.json
View file

@ -118,10 +118,6 @@
"distribute.y": "Distribute Vertical",
"stretch.x": "Stretch Horizontal",
"stretch.y": "Stretch Vertical",
"share": "Share",
"copy.current.page.link": "Copy Current Page Link",
"copy.project.link": "Copy Project Link",
"data.too.big.encoded": "Data is too big to be encoded into an URL. Do not include image or video!",
"dialog.save.firsttime": "Do you want to save your current project?",
"dialog.save.again": "Do you want to save changes to your current project?",
"dialog.cancel": "Cancel",

5
yarn.lock
View file

@ -6849,11 +6849,6 @@ json5@^2.2.1:
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
jsoncrush@^1.1.8:
version "1.1.8"
resolved "https://registry.yarnpkg.com/jsoncrush/-/jsoncrush-1.1.8.tgz#5dd9389df1979592df8c89ab99ba69b029a030be"
integrity sha512-lvIMGzMUA0fjuqwNcxlTNRq2bibPZ9auqT/LyGdlR5hvydJtA/BasSgkx4qclqTKVeTidrJvsS/oVjlTCPQ4Nw==
jsonfile@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"