[mega-chore] renaming (#223)

* Rename shape utils

* renames files

* Add husky

* Delete .babelrc

* Update TLDR.ts

* renames commands

* Update package.json

* more pre-commit work
This commit is contained in:
Steve Ruiz 2021-11-06 11:16:30 +00:00 committed by GitHub
parent b3ea398ba1
commit e11f05028f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
268 changed files with 1111 additions and 1006 deletions

4
.husky/pre-commit Executable file
View file

@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn test

View file

@ -23,7 +23,9 @@
"build:packages": "cd packages/tldraw && yarn build",
"publish:patch": "yarn test && yarn build:packages && lerna publish patch",
"docs": "lerna run docs",
"docs:watch": "lerna run docs:watch"
"docs:watch": "lerna run docs:watch",
"postinstall": "husky install",
"fix:style": "yarn run prettier ./packages/tldraw/src --write"
},
"devDependencies": {
"@swc-node/jest": "^1.3.3",
@ -37,9 +39,12 @@
"@typescript-eslint/parser": "^4.19.0",
"eslint": "^7.32.0",
"fake-indexeddb": "^3.1.3",
"husky": "^7.0.4",
"init-package-json": "^2.0.4",
"jest": "^27.3.1",
"lerna": "^3.22.1",
"lint-staged": "^11.2.6",
"prettier": "^2.4.1",
"resize-observer-polyfill": "^1.5.1",
"tslib": "^2.3.0",
"typedoc": "^0.22.3",
@ -51,6 +56,15 @@
"semi": false,
"printWidth": 100
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "test && lint-staged"
}
},
"lint-staged": {
"*": "fix:style && eslint"
},
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/setupTests.ts"

View file

@ -1,20 +1,20 @@
import * as React from 'react'
import { IdProvider } from '@radix-ui/react-id'
import { Renderer } from '@tldraw/core'
import styled, { dark } from '~styles'
import { styled, dark } from '~styles'
import { Data, TLDrawDocument, TLDrawStatus, TLDrawUser } from '~types'
import { TLDrawState } from '~state'
import {
TLDrawContext,
TLDrawContextType,
useCustomFonts,
useStylesheet,
useKeyboardShortcuts,
useTLDrawContext,
} from '~hooks'
import { shapeUtils } from '~shape-utils'
import { shapeUtils } from '~state/shapes'
import { ToolsPanel } from '~components/ToolsPanel'
import { TopPanel } from '~components/TopPanel'
import { TLDR } from '~state/tldr'
import { TLDR } from '~state/TLDR'
import { ContextMenu } from '~components/ContextMenu'
import { FocusButton } from '~components/FocusButton/FocusButton'
@ -430,7 +430,7 @@ const OneOff = React.memo(
focusableRef: React.RefObject<HTMLDivElement>
}) => {
useKeyboardShortcuts(focusableRef)
useCustomFonts()
useStylesheet()
React.useEffect(() => {
if (autofocus) {

View file

@ -1,5 +1,5 @@
import * as React from 'react'
import styled from '~styles'
import { styled } from '~styles'
import * as RadixContextMenu from '@radix-ui/react-context-menu'
import { useTLDrawContext } from '~hooks'
import { Data, AlignType, DistributeType, StretchType } from '~types'

View file

@ -1,5 +1,5 @@
import * as React from 'react'
import styled from '~styles'
import { styled } from '~styles'
export const Divider = styled('hr', {
height: 1,

View file

@ -1,5 +1,5 @@
import { Arrow } from '@radix-ui/react-dropdown-menu'
import { breakpoints } from '~components/breakpoints'
import styled from '~styles/stitches.config'
import { styled } from '~styles/stitches.config'
export const DMArrow = styled(Arrow, { fill: '$panel', bp: breakpoints })

View file

@ -1,6 +1,6 @@
import * as React from 'react'
import { Content } from '@radix-ui/react-dropdown-menu'
import styled from '~styles/stitches.config'
import { styled } from '~styles/stitches.config'
import { MenuContent } from '~components/MenuContent'
export interface DMContentProps {

View file

@ -1,5 +1,5 @@
import { Separator } from '@radix-ui/react-dropdown-menu'
import styled from '~styles/stitches.config'
import { styled } from '~styles/stitches.config'
export const DMDivider = styled(Separator, {
backgroundColor: '$hover',

View file

@ -1,23 +0,0 @@
import * as React from 'react'
import { Item } from '@radix-ui/react-dropdown-menu'
import { IconButton } from '~components/IconButton/IconButton'
interface DMIconButtonProps {
onSelect: () => void
disabled?: boolean
children: React.ReactNode
}
export function DMIconButton({
onSelect,
children,
disabled = false,
}: DMIconButtonProps): JSX.Element {
return (
<Item dir="ltr" asChild>
<IconButton disabled={disabled} onSelect={onSelect}>
{children}
</IconButton>
</Item>
)
}

View file

@ -1,5 +1,5 @@
import { RadioItem } from '@radix-ui/react-dropdown-menu'
import styled from '~styles/stitches.config'
import { styled } from '~styles/stitches.config'
export const DMRadioItem = styled(RadioItem, {
height: '32px',

View file

@ -3,7 +3,6 @@ export * from './DMItem'
export * from './DMCheckboxItem'
export * from './DMContent'
export * from './DMDivider'
export * from './DMIconButton'
export * from './DMRadioItem'
export * from './DMSubMenu'
export * from './DMTriggerIcon'

View file

@ -1,7 +1,7 @@
import { DotFilledIcon } from '@radix-ui/react-icons'
import * as React from 'react'
import { IconButton } from '~components/IconButton/IconButton'
import styled from '~styles'
import { styled } from '~styles'
interface FocusButtonProps {
onSelect: () => void

View file

@ -1,4 +1,4 @@
import styled from '~styles'
import { styled } from '~styles'
export const IconButton = styled('button', {
position: 'relative',

View file

@ -1,5 +1,5 @@
import * as React from 'react'
import styled from '~styles'
import { styled } from '~styles'
import { Utils } from '@tldraw/core'
/* -------------------------------------------------- */

View file

@ -1,4 +1,4 @@
import styled from '~styles'
import { styled } from '~styles'
export const MenuContent = styled('div', {
position: 'relative',

View file

@ -1,4 +1,4 @@
import styled from '~styles/stitches.config'
import { styled } from '~styles/stitches.config'
export const Panel = styled('div', {
backgroundColor: '$panel',

View file

@ -4,7 +4,7 @@ import * as React from 'react'
import { breakpoints } from '~components/breakpoints'
import { Kbd } from '~components/Kbd'
import { SmallIcon } from '~components/SmallIcon'
import styled from '~styles'
import { styled } from '~styles'
export interface RowButtonProps {
onSelect?: () => void

View file

@ -1,4 +1,4 @@
import styled from '~styles'
import { styled } from '~styles'
export const SmallIcon = styled('div', {
height: '100%',

View file

@ -1,7 +1,7 @@
import * as React from 'react'
import { breakpoints } from '~components/breakpoints'
import { Tooltip } from '~components/Tooltip'
import styled from '~styles'
import { styled } from '~styles'
export interface ToolButtonProps {
onClick?: () => void

View file

@ -2,7 +2,7 @@ import * as React from 'react'
import { Tooltip } from '~components/Tooltip/Tooltip'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { useTLDrawContext } from '~hooks'
import styled from '~styles'
import { styled } from '~styles'
import { AlignType, Data, DistributeType, StretchType } from '~types'
import {
ArrowDownIcon,

View file

@ -1,5 +1,5 @@
import * as React from 'react'
import styled from '~styles'
import { styled } from '~styles'
import type { Data } from '~types'
import { useTLDrawContext } from '~hooks'
import { RowButton } from '~components/RowButton'

View file

@ -1,7 +1,7 @@
import * as React from 'react'
import { useTLDrawContext } from '~hooks'
import type { Data } from '~types'
import styled from '~styles'
import { styled } from '~styles'
import { breakpoints } from '~components/breakpoints'
const statusSelector = (s: Data) => s.appState.status

View file

@ -1,5 +1,5 @@
import * as React from 'react'
import styled from '~styles'
import { styled } from '~styles'
import type { Data } from '~types'
import { useTLDrawContext } from '~hooks'
import { StatusBar } from './StatusBar'

View file

@ -1,7 +1,7 @@
import * as RadixTooltip from '@radix-ui/react-tooltip'
import * as React from 'react'
import { Kbd } from '~components/Kbd'
import styled from '~styles'
import { styled } from '~styles'
/* -------------------------------------------------- */
/* Tooltip */

View file

@ -1,20 +1,20 @@
import * as React from 'react'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { strokes } from '~shape-utils'
import { useTheme, useTLDrawContext } from '~hooks'
import type { Data, ColorStyle } from '~types'
import CircleIcon from '~components/icons/CircleIcon'
import { strokes } from '~state/shapes/shape-styles'
import { useTLDrawContext } from '~hooks'
import { DMContent, DMTriggerIcon } from '~components/DropdownMenu'
import { BoxIcon } from '~components/icons'
import { BoxIcon, CircleIcon } from '~components/icons'
import { ToolButton } from '~components/ToolButton'
import type { Data, ColorStyle } from '~types'
const selectColor = (s: Data) => s.appState.selectedStyle.color
const preventEvent = (e: Event) => e.preventDefault()
const themeSelector = (data: Data) => (data.settings.isDarkMode ? 'dark' : 'light')
export const ColorMenu = React.memo((): JSX.Element => {
const { theme } = useTheme()
const { tlstate, useSelector } = useTLDrawContext()
const theme = useSelector(themeSelector)
const color = useSelector(selectColor)
return (

View file

@ -2,7 +2,7 @@ import * as React from 'react'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { PlusIcon, CheckIcon } from '@radix-ui/react-icons'
import { PageOptionsDialog } from './PageOptionsDialog'
import styled from '~styles'
import { styled } from '~styles'
import { useTLDrawContext } from '~hooks'
import type { Data } from '~types'
import { DMContent, DMDivider } from '~components/DropdownMenu'

View file

@ -4,7 +4,7 @@ import { MixerVerticalIcon } from '@radix-ui/react-icons'
import type { Data, TLDrawPage } from '~types'
import { useTLDrawContext } from '~hooks'
import { RowButton, RowButtonProps } from '~components/RowButton'
import styled from '~styles'
import { styled } from '~styles'
import { Divider } from '~components/Divider'
import { IconButton } from '~components/IconButton/IconButton'
import { SmallIcon } from '~components/SmallIcon'

View file

@ -1,6 +1,6 @@
import * as React from 'react'
import { Menu } from './Menu'
import styled from '~styles'
import { styled } from '~styles'
import { PageMenu } from './PageMenu'
import { ZoomMenu } from './ZoomMenu'
import { DashMenu } from './DashMenu'

View file

@ -1,7 +1,7 @@
import * as React from 'react'
import { useTLDrawContext } from '~hooks'
import type { Data } from '~types'
import styled from '~styles'
import { styled } from '~styles'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { DMItem, DMContent } from '~components/DropdownMenu'
import { ToolButton } from '~components/ToolButton'

View file

@ -1,20 +0,0 @@
import * as React from 'react'
function CheckIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
return (
<svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M1.06555 6.39147C1.06555 6.39147 1.18669 6.37676 1.32187 6.60547C1.41196 6.75789 1.43336 6.79297 1.54896 6.97656C1.67649 7.1791 1.90215 7.46571 1.98273 7.55604C1.89684 7.45413 2.06332 7.64638 1.98273 7.55604C2.06863 7.65796 2.15476 7.76164 2.24114 7.86709C2.32752 7.97255 2.43047 8.09537 2.54999 8.23556C2.66951 8.37575 2.82609 8.54986 3.01971 8.75788C3.21333 8.96589 3.41752 9.17647 3.63228 9.38961C3.43268 9.19463 3.84705 9.60274 3.63228 9.38961C3.83189 9.58458 3.98492 9.65483 3.97262 9.74102C4.18567 9.85603 3.96031 9.82721 3.97262 9.74102C3.91266 9.99944 3.75956 9.626 3.97262 9.74102C4.03257 9.4826 4.10858 9.33351 4.21165 9.13551C4.31473 8.93751 4.42218 8.73459 4.534 8.52675C4.64583 8.31892 4.76102 8.10882 4.87957 7.89646C4.99812 7.68411 5.13449 7.4489 5.28871 7.19083C5.44292 6.93276 5.63515 6.62674 5.86541 6.27278C6.09567 5.91882 6.34391 5.55345 6.61015 5.17668C6.87639 4.7999 7.15756 4.4262 7.45365 4.05557C7.74975 3.68495 8.06403 3.32626 8.39649 2.97952C8.72895 2.63277 9.04339 2.32894 9.33982 2.06804C9.63624 1.80713 9.87576 1.60935 10.0584 1.4747C10.241 1.34004 10.4399 1.20541 10.655 1.07079C10.8702 0.936165 10.9439 0.993562 10.8761 1.24297C10.8084 1.49239 10.7342 1.72411 10.6535 1.93813C10.5728 2.15215 10.452 2.43667 10.291 2.79168C10.13 3.14669 9.94264 3.53252 9.7288 3.94917C9.51497 4.36582 9.29528 4.77352 9.06973 5.17228C8.84418 5.57104 8.62072 5.96246 8.39936 6.34654C8.178 6.73061 7.9685 7.0987 7.77088 7.45081C7.57326 7.80292 7.40426 8.10581 7.26389 8.35948C7.12353 8.61314 6.99519 8.84594 6.87889 9.05785C6.76259 9.26977 6.64515 9.48087 6.52659 9.69115C6.40803 9.90143 6.25752 10.1532 6.07507 10.4466C5.89262 10.7399 5.72254 11.0063 5.56483 11.2458C5.40712 11.4852 5.23545 11.6777 5.04981 11.8232C4.86416 11.9686 4.59686 12.0243 4.2479 11.9903C3.89894 11.9563 3.61525 11.8614 3.39684 11.7055C3.17844 11.5497 2.99758 11.3507 2.85427 11.1085C2.71096 10.8663 2.56178 10.5997 2.40673 10.3088C2.25167 10.0179 2.11187 9.72784 1.98731 9.4386C1.86275 9.14937 1.76835 8.91301 1.70411 8.72952C1.63988 8.54604 1.58816 8.38956 1.54896 8.26008C1.50977 8.13061 1.47123 8.0037 1.43336 7.87934C1.39549 7.75498 1.35833 7.63676 1.32187 7.52466C1.28541 7.41257 1.24607 7.2993 1.20384 7.18486C1.16161 7.07041 1.21291 7.20988 1.06555 6.85296C0.918183 6.49603 1.06555 6.39147 1.06555 6.39147Z"
fill="currentColor"
/>
<path
d="M1.98273 7.55604C1.90215 7.46571 1.67649 7.1791 1.54896 6.97656C1.43336 6.79297 1.41196 6.75789 1.32187 6.60547C1.18669 6.37676 1.06555 6.39147 1.06555 6.39147C1.06555 6.39147 0.918183 6.49603 1.06555 6.85296C1.21291 7.20988 1.16161 7.07041 1.20384 7.18486C1.24607 7.2993 1.28541 7.41257 1.32187 7.52466C1.35833 7.63676 1.39549 7.75498 1.43336 7.87934C1.47123 8.0037 1.50977 8.13061 1.54896 8.26008C1.58816 8.38956 1.63988 8.54604 1.70411 8.72952C1.76835 8.91301 1.86275 9.14937 1.98731 9.4386C2.11187 9.72784 2.25167 10.0179 2.40673 10.3088C2.56178 10.5997 2.71096 10.8663 2.85427 11.1085C2.99758 11.3507 3.17844 11.5497 3.39684 11.7055C3.61525 11.8614 3.89894 11.9563 4.2479 11.9903C4.59686 12.0243 4.86416 11.9686 5.04981 11.8232C5.23545 11.6777 5.40712 11.4852 5.56483 11.2458C5.72254 11.0063 5.89262 10.7399 6.07507 10.4466C6.25752 10.1532 6.40803 9.90143 6.52659 9.69115C6.64515 9.48087 6.76259 9.26977 6.87889 9.05785C6.99519 8.84594 7.12353 8.61314 7.26389 8.35948C7.40426 8.10581 7.57326 7.80292 7.77088 7.45081C7.9685 7.0987 8.178 6.73061 8.39936 6.34654C8.62072 5.96246 8.84418 5.57104 9.06973 5.17228C9.29528 4.77352 9.51497 4.36582 9.7288 3.94917C9.94264 3.53252 10.13 3.14669 10.291 2.79168C10.452 2.43667 10.5728 2.15215 10.6535 1.93813C10.7342 1.72411 10.8084 1.49239 10.8761 1.24297C10.9439 0.993562 10.8702 0.936165 10.655 1.07079C10.4399 1.20541 10.241 1.34004 10.0584 1.4747C9.87576 1.60935 9.63624 1.80713 9.33982 2.06804C9.04339 2.32894 8.72895 2.63277 8.39649 2.97952C8.06403 3.32626 7.74975 3.68495 7.45365 4.05557C7.15756 4.4262 6.87639 4.7999 6.61015 5.17668C6.34391 5.55345 6.09567 5.91882 5.86541 6.27278C5.63515 6.62674 5.44292 6.93276 5.28871 7.19083C5.13449 7.4489 4.99812 7.68411 4.87957 7.89646C4.76102 8.10882 4.64583 8.31892 4.534 8.52675C4.42218 8.73459 4.31473 8.93751 4.21165 9.13551C4.10858 9.33351 4.03257 9.4826 3.97262 9.74102M1.98273 7.55604C2.06332 7.64638 1.89684 7.45413 1.98273 7.55604ZM1.98273 7.55604C2.06863 7.65796 2.15476 7.76164 2.24114 7.86709C2.32752 7.97255 2.43047 8.09537 2.54999 8.23556C2.66951 8.37575 2.82609 8.54986 3.01971 8.75788C3.21333 8.96589 3.41752 9.17647 3.63228 9.38961M3.63228 9.38961C3.84705 9.60274 3.43268 9.19463 3.63228 9.38961ZM3.63228 9.38961C3.83189 9.58458 3.98492 9.65483 3.97262 9.74102M3.97262 9.74102C3.96031 9.82721 4.18567 9.85603 3.97262 9.74102ZM3.97262 9.74102C3.75956 9.626 3.91266 9.99944 3.97262 9.74102Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
export default CheckIcon

View file

@ -1,6 +1,6 @@
import * as React from 'react'
export default function CircleIcon(
export function CircleIcon(
props: Pick<React.SVGProps<SVGSVGElement>, 'stroke' | 'fill'> & {
size: number
}

View file

@ -1,5 +1,4 @@
export * from './BoxIcon'
export * from './CheckIcon'
export * from './CircleIcon'
export * from './DashDashedIcon'
export * from './DashDottedIcon'

View file

@ -1,6 +1,6 @@
export * from './useKeyboardShortcuts'
export * from './useTLDrawContext'
export * from './useTheme'
export * from './useCustomFonts'
export * from './useStylesheet'
export * from './useFileSystemHandlers'
export * from './useFileSystem'

View file

@ -1,9 +0,0 @@
import { useStyle, css } from '~hooks/useStyle'
const customFonts = css`
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');
`
export function useCustomFonts() {
useStyle('tldraw-fonts', customFonts)
}

View file

@ -1,30 +0,0 @@
import * as React from 'react'
const styles = new Map<string, HTMLStyleElement>()
export const css = (strings: TemplateStringsArray, ...args: unknown[]) =>
strings.reduce(
(acc, string, index) => acc + string + (index < args.length ? args[index] : ''),
''
)
export function useStyle(uid: string, rules: string) {
React.useLayoutEffect(() => {
if (styles.get(uid)) {
return () => void null
}
const style = document.createElement('style')
style.innerHTML = rules
style.setAttribute('id', uid)
document.head.appendChild(style)
styles.set(uid, style)
return () => {
if (style && document.head.contains(style)) {
document.head.removeChild(style)
styles.delete(uid)
}
}
}, [uid, rules])
}

View file

@ -0,0 +1,25 @@
import * as React from 'react'
const styles = new Map<string, HTMLStyleElement>()
const UID = `tldraw-fonts`
const CSS = `@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap')`
export function useStylesheet() {
React.useLayoutEffect(() => {
if (styles.get(UID)) return
const style = document.createElement('style')
style.innerHTML = CSS
style.setAttribute('id', UID)
document.head.appendChild(style)
styles.set(UID, style)
return () => {
if (style && document.head.contains(style)) {
document.head.removeChild(style)
styles.delete(UID)
}
}
}, [UID, CSS])
}

View file

@ -5,7 +5,6 @@ const themeSelector = (data: Data): Theme => (data.settings.isDarkMode ? 'dark'
export function useTheme() {
const { tlstate, useSelector } = useTLDrawContext()
const theme = useSelector(themeSelector)
return {

View file

@ -1,5 +1,5 @@
export * from './TLDraw'
export * from './types'
export * from './shape-utils'
export * from './state/shapes'
export { TLDrawState } from './state'
export { useFileSystem } from './hooks'

View file

@ -1 +0,0 @@
export * from './arrow'

View file

@ -1 +0,0 @@
export * from './draw'

View file

@ -1 +0,0 @@
export * from './ellipse'

View file

@ -1 +0,0 @@
export * from './group'

View file

@ -1,50 +0,0 @@
import type { TLDrawShapeUtil } from './TLDrawShapeUtil'
import { RectangleUtil } from './rectangle'
import { EllipseUtil } from './ellipse'
import { ArrowUtil } from './arrow'
import { GroupUtil } from './group'
import { StickyUtil } from './sticky'
import { TextUtil } from './text'
import { DrawUtil } from './draw'
import { TLDrawShape, TLDrawShapeType } from '~types'
export * from './shape-styles'
export * from './TLDrawShapeUtil'
export const Rectangle = new RectangleUtil()
export const Ellipse = new EllipseUtil()
export const Draw = new DrawUtil()
export const Arrow = new ArrowUtil()
export const Text = new TextUtil()
export const Group = new GroupUtil()
export const Sticky = new StickyUtil()
// type Utils = RectangleUtil | EllipseUtil | DrawUtil | ArrowUtil | TextUtil | GroupUtil | StickyUtil
// type MappedByKey<U extends string | number, K extends string | number, T extends Record<K, U>> = {
// [P in T[K]]: T extends any ? (P extends T[K] ? T : never) : never
// }
// export type ShapeUtilsMap = MappedByKey<Utils['type'], 'type', Utils>
// export const getShapeUtils = <T extends Utils['type']>(
// type: T | Extract<TLDrawShape, { type: T }>
// ): ShapeUtilsMap[T] => {
// if (typeof type === 'string') return shapeUtils[type]
// return shapeUtils[type.type]
// }
export const shapeUtils = {
[TLDrawShapeType.Rectangle]: Rectangle,
[TLDrawShapeType.Ellipse]: Ellipse,
[TLDrawShapeType.Draw]: Draw,
[TLDrawShapeType.Arrow]: Arrow,
[TLDrawShapeType.Text]: Text,
[TLDrawShapeType.Group]: Group,
[TLDrawShapeType.Sticky]: Sticky,
}
export const getShapeUtils = <T extends TLDrawShape>(shape: T | T['type']) => {
if (typeof shape === 'string') return shapeUtils[shape] as unknown as TLDrawShapeUtil<T>
return shapeUtils[shape.type] as unknown as TLDrawShapeUtil<T>
}

View file

@ -1 +0,0 @@
export * from './rectangle'

View file

@ -1 +0,0 @@
export * from './sticky'

View file

@ -1 +0,0 @@
export * from './text'

View file

@ -1,5 +1,4 @@
import { TLBounds, TLTransformInfo, Utils, TLPageState } from '@tldraw/core'
import { getShapeUtils, TLDrawShapeUtil } from '~shape-utils'
import {
Data,
ShapeStyles,
@ -13,6 +12,8 @@ import {
ArrowShape,
} from '~types'
import { Vec } from '@tldraw/vec'
import type { TLDrawShapeUtil } from './shapes/TLDrawShapeUtil'
import { getShapeUtils } from './shapes'
export class TLDR {
// eslint-disable-next-line @typescript-eslint/no-explicit-any

View file

@ -1,13 +1,13 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { TLDrawState } from './tlstate'
import { mockDocument, TLStateUtils } from '~test'
import { TLDrawState } from './TLDrawState'
import { mockDocument, TLDrawStateUtils } from '~test'
import { ArrowShape, ColorStyle, SessionType, TLDrawShapeType } from '~types'
import type { SelectTool } from './tool/SelectTool'
import type { SelectTool } from './tools/SelectTool'
describe('TLDrawState', () => {
const tlstate = new TLDrawState()
const tlu = new TLStateUtils(tlstate)
const tlu = new TLDrawStateUtils(tlstate)
describe('When copying and pasting...', () => {
it('copies a shape', () => {
@ -357,7 +357,7 @@ describe('TLDrawState', () => {
.loadDocument(mockDocument)
.group(['rect1', 'rect2'], 'groupA')
const tlu = new TLStateUtils(tlstate)
const tlu = new TLDrawStateUtils(tlstate)
tlu.clickShape('rect1')
expect((tlstate.currentTool as SelectTool).selectedGroupId).toBeUndefined()
expect(tlstate.selectedIds).toStrictEqual(['groupA'])
@ -368,7 +368,7 @@ describe('TLDrawState', () => {
.loadDocument(mockDocument)
.group(['rect1', 'rect2'], 'groupA')
const tlu = new TLStateUtils(tlstate)
const tlu = new TLDrawStateUtils(tlstate)
tlu.doubleClickShape('rect1')
expect((tlstate.currentTool as SelectTool).selectedGroupId).toStrictEqual('groupA')
expect(tlstate.selectedIds).toStrictEqual(['rect1'])
@ -379,7 +379,7 @@ describe('TLDrawState', () => {
.loadDocument(mockDocument)
.group(['rect1', 'rect2'], 'groupA')
const tlu = new TLStateUtils(tlstate)
const tlu = new TLDrawStateUtils(tlstate)
tlu.doubleClickShape('rect1')
tlu.clickShape('rect3')
expect((tlstate.currentTool as SelectTool).selectedGroupId).toBeUndefined()
@ -392,7 +392,7 @@ describe('TLDrawState', () => {
.group(['rect1', 'rect2'], 'groupA')
.deselectAll()
const tlu = new TLStateUtils(tlstate)
const tlu = new TLDrawStateUtils(tlstate)
tlu.clickShape('rect1', { ctrlKey: true, shiftKey: true })
expect(tlstate.selectedIds).toStrictEqual(['rect1'])
@ -406,7 +406,7 @@ describe('TLDrawState', () => {
.loadDocument(mockDocument)
.group(['rect1', 'rect2'], 'groupA')
const tlu = new TLStateUtils(tlstate)
const tlu = new TLDrawStateUtils(tlstate)
tlu.clickShape('rect1', { ctrlKey: true, shiftKey: true })
expect(tlstate.selectedIds).toStrictEqual(['rect1'])
@ -438,7 +438,7 @@ describe('TLDrawState', () => {
)
.selectTool(TLDrawShapeType.Rectangle)
const tlu = new TLStateUtils(tlstate)
const tlu = new TLDrawStateUtils(tlstate)
const prevA = tlstate.shapes.map((shape) => shape.id)

View file

@ -40,17 +40,21 @@ import {
ExceptFirst,
ExceptFirstTwo,
} from '~types'
import { TLDR } from './tldr'
import { defaultStyle, shapeUtils } from '~shape-utils'
import * as Commands from './command'
import { ArgsOfType, getSession } from './session'
import { sample } from './utils'
import { createTools, ToolType } from './tool'
import type { BaseTool } from './tool/BaseTool'
import {
migrate,
FileSystemHandle,
loadFileHandle,
openFromFileSystem,
saveToFileSystem,
} from './data'
import { TLDR } from './TLDR'
import { shapeUtils } from '~state/shapes'
import { defaultStyle } from '~state/shapes/shape-styles'
import * as Commands from './commands'
import { ArgsOfType, getSession } from './sessions'
import { createTools, ToolType } from './tools'
import type { BaseTool } from './tools/BaseTool'
import { USER_COLORS, FIT_TO_SCREEN_PADDING } from '~constants'
import { migrate } from './data/migrate'
import { loadFileHandle, openFromFileSystem, saveToFileSystem } from './data/filesystem'
import type { FileSystemHandle } from './data/browser-fs-access'
const uuid = Utils.uniqueId()
@ -791,7 +795,7 @@ export class TLDrawState extends StateManager<Data> {
users: {
[uuid]: {
id: uuid,
color: sample(USER_COLORS),
color: USER_COLORS[Math.floor(Math.random() * USER_COLORS.length)],
point: [100, 100],
selectedIds: [],
activeShapes: [],
@ -1992,7 +1996,7 @@ export class TLDrawState extends StateManager<Data> {
*/
create = (shapes: TLDrawShape[] = [], bindings: TLDrawBinding[] = []): this => {
if (shapes.length === 0) return this
return this.setState(Commands.create(this.state, shapes, bindings))
return this.setState(Commands.createShapes(this.state, shapes, bindings))
}
/**
@ -2002,7 +2006,7 @@ export class TLDrawState extends StateManager<Data> {
*/
patchCreate = (shapes: TLDrawShape[] = [], bindings: TLDrawBinding[] = []): this => {
if (shapes.length === 0) return this
return this.patchState(Commands.create(this.state, shapes, bindings).after)
return this.patchState(Commands.createShapes(this.state, shapes, bindings).after)
}
/**
@ -2030,7 +2034,7 @@ export class TLDrawState extends StateManager<Data> {
* @param ids The ids of the shapes to change (defaults to selection).
*/
style = (style: Partial<ShapeStyles>, ids = this.selectedIds): this => {
return this.setState(Commands.style(this.state, ids, style))
return this.setState(Commands.styleShapes(this.state, ids, style))
}
/**
@ -2040,7 +2044,7 @@ export class TLDrawState extends StateManager<Data> {
*/
align = (type: AlignType, ids = this.selectedIds): this => {
if (ids.length < 2) return this
return this.setState(Commands.align(this.state, ids, type))
return this.setState(Commands.alignShapes(this.state, ids, type))
}
/**
@ -2050,7 +2054,7 @@ export class TLDrawState extends StateManager<Data> {
*/
distribute = (direction: DistributeType, ids = this.selectedIds): this => {
if (ids.length < 3) return this
return this.setState(Commands.distribute(this.state, ids, direction))
return this.setState(Commands.distributeShapes(this.state, ids, direction))
}
/**
@ -2060,7 +2064,7 @@ export class TLDrawState extends StateManager<Data> {
*/
stretch = (direction: StretchType, ids = this.selectedIds): this => {
if (ids.length < 2) return this
return this.setState(Commands.stretch(this.state, ids, direction))
return this.setState(Commands.stretchShapes(this.state, ids, direction))
}
/**
@ -2069,7 +2073,7 @@ export class TLDrawState extends StateManager<Data> {
*/
flipHorizontal = (ids = this.selectedIds): this => {
if (ids.length === 0) return this
return this.setState(Commands.flip(this.state, ids, FlipType.Horizontal))
return this.setState(Commands.flipShapes(this.state, ids, FlipType.Horizontal))
}
/**
@ -2078,7 +2082,7 @@ export class TLDrawState extends StateManager<Data> {
*/
flipVertical = (ids = this.selectedIds): this => {
if (ids.length === 0) return this
return this.setState(Commands.flip(this.state, ids, FlipType.Vertical))
return this.setState(Commands.flipShapes(this.state, ids, FlipType.Vertical))
}
/**
@ -2093,7 +2097,7 @@ export class TLDrawState extends StateManager<Data> {
ids = this.selectedIds
): this => {
if (ids.length === 0) return this
this.setState(Commands.moveToPage(this.state, ids, this.bounds, fromPageId, toPageId))
this.setState(Commands.moveShapesToPage(this.state, ids, this.bounds, fromPageId, toPageId))
return this
}
@ -2103,7 +2107,7 @@ export class TLDrawState extends StateManager<Data> {
*/
moveToBack = (ids = this.selectedIds): this => {
if (ids.length === 0) return this
return this.setState(Commands.move(this.state, ids, MoveType.ToBack))
return this.setState(Commands.reorderShapes(this.state, ids, MoveType.ToBack))
}
/**
@ -2112,7 +2116,7 @@ export class TLDrawState extends StateManager<Data> {
*/
moveBackward = (ids = this.selectedIds): this => {
if (ids.length === 0) return this
return this.setState(Commands.move(this.state, ids, MoveType.Backward))
return this.setState(Commands.reorderShapes(this.state, ids, MoveType.Backward))
}
/**
@ -2121,7 +2125,7 @@ export class TLDrawState extends StateManager<Data> {
*/
moveForward = (ids = this.selectedIds): this => {
if (ids.length === 0) return this
return this.setState(Commands.move(this.state, ids, MoveType.Forward))
return this.setState(Commands.reorderShapes(this.state, ids, MoveType.Forward))
}
/**
@ -2130,7 +2134,7 @@ export class TLDrawState extends StateManager<Data> {
*/
moveToFront = (ids = this.selectedIds): this => {
if (ids.length === 0) return this
return this.setState(Commands.move(this.state, ids, MoveType.ToFront))
return this.setState(Commands.reorderShapes(this.state, ids, MoveType.ToFront))
}
/**
@ -2141,7 +2145,9 @@ export class TLDrawState extends StateManager<Data> {
*/
nudge = (delta: number[], isMajor = false, ids = this.selectedIds): this => {
if (ids.length === 0) return this
return this.setState(Commands.translate(this.state, ids, Vec.mul(delta, isMajor ? 10 : 1)))
return this.setState(
Commands.translateShapes(this.state, ids, Vec.mul(delta, isMajor ? 10 : 1))
)
}
/**
@ -2151,7 +2157,7 @@ export class TLDrawState extends StateManager<Data> {
duplicate = (ids = this.selectedIds, point?: number[]): this => {
if (this.readOnly) return this
if (ids.length === 0) return this
return this.setState(Commands.duplicate(this.state, ids, point))
return this.setState(Commands.duplicateShapes(this.state, ids, point))
}
/**
@ -2171,7 +2177,7 @@ export class TLDrawState extends StateManager<Data> {
*/
toggleHidden = (ids = this.selectedIds): this => {
if (ids.length === 0) return this
return this.setState(Commands.toggle(this.state, ids, 'isHidden'))
return this.setState(Commands.toggleShapeProp(this.state, ids, 'isHidden'))
}
/**
@ -2180,7 +2186,7 @@ export class TLDrawState extends StateManager<Data> {
*/
toggleLocked = (ids = this.selectedIds): this => {
if (ids.length === 0) return this
return this.setState(Commands.toggle(this.state, ids, 'isLocked'))
return this.setState(Commands.toggleShapeProp(this.state, ids, 'isLocked'))
}
/**
@ -2189,7 +2195,7 @@ export class TLDrawState extends StateManager<Data> {
*/
toggleAspectRatioLocked = (ids = this.selectedIds): this => {
if (ids.length === 0) return this
return this.setState(Commands.toggle(this.state, ids, 'isAspectRatioLocked'))
return this.setState(Commands.toggleShapeProp(this.state, ids, 'isAspectRatioLocked'))
}
/**
@ -2199,7 +2205,7 @@ export class TLDrawState extends StateManager<Data> {
*/
toggleDecoration = (handleId: string, ids = this.selectedIds): this => {
if (ids.length === 0 || !(handleId === 'start' || handleId === 'end')) return this
return this.setState(Commands.toggleDecoration(this.state, ids, handleId))
return this.setState(Commands.toggleShapesDecoration(this.state, ids, handleId))
}
/**
@ -2209,7 +2215,7 @@ export class TLDrawState extends StateManager<Data> {
*/
rotate = (delta = Math.PI * -0.5, ids = this.selectedIds): this => {
if (ids.length === 0) return this
const change = Commands.rotate(this.state, ids, delta)
const change = Commands.rotateShapes(this.state, ids, delta)
if (!change) return this
return this.setState(change)
}
@ -2232,7 +2238,7 @@ export class TLDrawState extends StateManager<Data> {
if (ids.length < 2) return this
const command = Commands.group(this.state, ids, groupId, pageId)
const command = Commands.groupShapes(this.state, ids, groupId, pageId)
if (!command) return this
return this.setState(command)
}
@ -2250,7 +2256,7 @@ export class TLDrawState extends StateManager<Data> {
if (groups.length === 0) return this
const command = Commands.ungroup(this.state, ids, groups as GroupShape[], pageId)
const command = Commands.ungroupShapes(this.state, ids, groups as GroupShape[], pageId)
if (!command) return this
return this.setState(command)
}
@ -2582,7 +2588,7 @@ export class TLDrawState extends StateManager<Data> {
users: {
[uuid]: {
id: uuid,
color: sample(USER_COLORS),
color: USER_COLORS[0],
point: [100, 100],
selectedIds: [],
activeShapes: [],

View file

@ -1 +0,0 @@
export * from './align.command'

View file

@ -1 +0,0 @@
export * from './change-page.command'

View file

@ -1 +0,0 @@
export * from './create-page.command'

View file

@ -1 +0,0 @@
export * from './create.command'

View file

@ -1 +0,0 @@
export * from './delete-page.command'

View file

@ -1 +0,0 @@
export * from './delete.command'

View file

@ -1 +0,0 @@
export * from './distribute.command'

View file

@ -1 +0,0 @@
export * from './duplicate-page.command'

View file

@ -1 +0,0 @@
export * from './duplicate.command'

View file

@ -1 +0,0 @@
export * from './flip.command'

View file

@ -1 +0,0 @@
export * from './group.command'

View file

@ -1,23 +0,0 @@
export * from './align'
export * from './change-page'
export * from './create-page'
export * from './create'
export * from './delete-page'
export * from './delete'
export * from './distribute'
export * from './duplicate-page'
export * from './duplicate'
export * from './flip'
export * from './group'
export * from './move-to-page'
export * from './move'
export * from './rename-page'
export * from './reset-bounds'
export * from './rotate'
export * from './stretch'
export * from './style'
export * from './toggle-decoration'
export * from './toggle'
export * from './translate'
export * from './ungroup'
export * from './update'

View file

@ -1 +0,0 @@
export * from './move-to-page.command'

View file

@ -1 +0,0 @@
export * from './move.command'

View file

@ -1 +0,0 @@
export * from './rename-page.command'

View file

@ -1 +0,0 @@
export * from './reset-bounds.command'

View file

@ -1 +0,0 @@
export * from './rotate.command'

View file

@ -1 +0,0 @@
export * from './stretch.command'

View file

@ -1 +0,0 @@
export * from './style.command'

View file

@ -1 +0,0 @@
export * from './toggle-decoration.command'

View file

@ -1 +0,0 @@
export * from './toggle.command'

View file

@ -1 +0,0 @@
export * from './translate.command'

View file

@ -1 +0,0 @@
export * from './ungroup.command'

View file

@ -1 +0,0 @@
export * from './update.command'

View file

@ -1,6 +1,6 @@
import Vec from '@tldraw/vec'
import { TLDrawState } from '~state'
import { mockDocument, TLStateUtils } from '~test'
import { mockDocument, TLDrawStateUtils } from '~test'
import { AlignType, TLDrawShapeType } from '~types'
describe('Align command', () => {
@ -95,7 +95,7 @@ describe('when aligning groups', () => {
tlstate.undo().delete(['rect4']).selectAll().align(AlignType.CenterVertical)
new TLStateUtils(tlstate).expectShapesToBeAtPoints({
new TLDrawStateUtils(tlstate).expectShapesToBeAtPoints({
rect1: p0,
rect2: Vec.add(p0, [100, 100]),
rect3: p1,

View file

@ -2,10 +2,10 @@
import { Utils } from '@tldraw/core'
import { AlignType, TLDrawCommand, TLDrawShapeType } from '~types'
import type { Data } from '~types'
import { TLDR } from '~state/tldr'
import { TLDR } from '~state/TLDR'
import Vec from '@tldraw/vec'
export function align(data: Data, ids: string[], type: AlignType): TLDrawCommand {
export function alignShapes(data: Data, ids: string[], type: AlignType): TLDrawCommand {
const { currentPageId } = data.appState
const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId))

View file

@ -0,0 +1 @@
export * from './alignShapes'

View file

@ -0,0 +1 @@
export * from './changePage'

View file

@ -0,0 +1 @@
export * from './createPage'

View file

@ -1,8 +1,8 @@
import type { Patch } from 'rko'
import { TLDR } from '~state/tldr'
import { TLDR } from '~state/TLDR'
import type { TLDrawShape, Data, TLDrawCommand, TLDrawBinding } from '~types'
export function create(
export function createShapes(
data: Data,
shapes: TLDrawShape[],
bindings: TLDrawBinding[] = []

View file

@ -0,0 +1 @@
export * from './createShapes'

View file

@ -0,0 +1 @@
export * from './deletePage'

View file

@ -1,8 +1,6 @@
import { TLDR } from '~state/tldr'
import { TLDR } from '~state/TLDR'
import type { Data, TLDrawCommand } from '~types'
import { removeShapesFromPage } from '../utils/removeShapesFromPage'
// - [ ] Update parents and possibly delete parents
import { removeShapesFromPage } from '../shared/removeShapesFromPage'
export function deleteShapes(
data: Data,

View file

@ -0,0 +1 @@
export * from './deleteShapes'

View file

@ -1,6 +1,6 @@
import Vec from '@tldraw/vec'
import { TLDrawState } from '~state'
import { mockDocument, TLStateUtils } from '~test'
import { mockDocument, TLDrawStateUtils } from '~test'
import { AlignType, DistributeType, TLDrawShapeType } from '~types'
describe('Distribute command', () => {
@ -59,7 +59,7 @@ describe('when distributing groups', () => {
tlstate.undo().delete(['rect4']).selectAll().distribute(DistributeType.Vertical)
new TLStateUtils(tlstate).expectShapesToBeAtPoints({
new TLDrawStateUtils(tlstate).expectShapesToBeAtPoints({
rect1: p0,
rect2: Vec.add(p0, [100, 100]),
rect3: p1,

View file

@ -1,10 +1,10 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { Utils } from '@tldraw/core'
import { DistributeType, TLDrawShape, Data, TLDrawCommand, TLDrawShapeType } from '~types'
import { TLDR } from '~state/tldr'
import { TLDR } from '~state/TLDR'
import Vec from '@tldraw/vec'
export function distribute(data: Data, ids: string[], type: DistributeType): TLDrawCommand {
export function distributeShapes(data: Data, ids: string[], type: DistributeType): TLDrawCommand {
const { currentPageId } = data.appState
const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId))

View file

@ -0,0 +1 @@
export * from './distributeShapes'

View file

@ -0,0 +1 @@
export * from './duplicatePage'

View file

@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { Utils } from '@tldraw/core'
import { TLDrawState } from '~state'
import { TLDR } from '~state/tldr'
import { TLDR } from '~state/TLDR'
import { mockDocument } from '~test'
import { ArrowShape, SessionType, TLDrawShapeType } from '~types'

Some files were not shown because too many files have changed in this diff Show more