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

Fix move to page (#143)

Browse source 
* Remove references to window

* Improve drawn strokes for other dash styles
This commit is contained in:
Steve Ruiz 2021-10-10 13:11:37 +01:00 committed by GitHub
parent 519c18f300
commit 9b2de95ec9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 35 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,7 +13,7 @@ export default function Embedded(): JSX.Element {
marginBottom: '32px',
}}
>
<TLDraw id="small1" />
<TLDraw id="small3" />
</div>
<div
@ -24,7 +24,7 @@ export default function Embedded(): JSX.Element {
overflow: 'hidden',
}}
>
<TLDraw id="small2" />
<TLDraw id="small4" />
</div>
</div>
)

4
packages/tldraw/src/components/style-panel/style-panel.tsx
View file

@ -48,8 +48,6 @@ export function StylePanel(): JSX.Element {
)
}
const showKbds = !Utils.isMobileSize()
const selectedShapesCountSelector = (s: Data) =>
s.document.pageStates[s.appState.currentPageId].selectedIds.length
@ -57,6 +55,8 @@ function SelectedShapeContent(): JSX.Element {
const { tlstate, useSelector } = useTLDrawContext()
const selectedShapesCount = useSelector(selectedShapesCountSelector)
const [showKbds] = React.useState(() => !Utils.isMobileSize())
const handleCopy = React.useCallback(() => {
tlstate.copy()
}, [tlstate])

2
packages/tldraw/src/components/tldraw/tldraw.tsx
View file

@ -215,7 +215,7 @@ function InnerTldraw({
page={page}
pageState={pageState}
users={users}
userId={tlstate.state.room.userId}
userId={tlstate.state.room?.userId}
shapeUtils={tldrawShapeUtils}
theme={theme}
meta={meta}

10
packages/tldraw/src/shape/shapes/draw/draw.tsx
View file

@ -103,18 +103,18 @@ export const Draw = new ShapeUtil<DrawShape, SVGSVGElement, TLDrawMeta>(() => ({
const strokeDasharray = {
[DashStyle.Draw]: 'none',
[DashStyle.Solid]: `none`,
[DashStyle.Dotted]: `${strokeWidth / 10} ${strokeWidth * 3}`,
[DashStyle.Dashed]: `${strokeWidth * 3} ${strokeWidth * 3}`,
[DashStyle.Dotted]: `0.1 ${strokeWidth * 4}`,
[DashStyle.Dashed]: `${strokeWidth * 4} ${strokeWidth * 4}`,
}[style.dash]
const strokeDashoffset = {
[DashStyle.Draw]: 'none',
[DashStyle.Solid]: `none`,
[DashStyle.Dotted]: `-${strokeWidth / 20}`,
[DashStyle.Dashed]: `-${strokeWidth}`,
[DashStyle.Dotted]: `0`,
[DashStyle.Dashed]: `0`,
}[style.dash]
const sw = 1 + strokeWidth * 2
const sw = 1 + strokeWidth * 1.5
return (
<SVGContainer ref={ref} id={shape.id + '_svg'} {...events}>

8
packages/tldraw/src/state/command/create-page/create-page.command.ts
View file

@ -1,7 +1,7 @@
import type { Data, TLDrawCommand, TLDrawPage } from '~types'
import { Utils, TLPageState } from '@tldraw/core'
export function createPage(data: Data, pageId = Utils.uniqueId()): TLDrawCommand {
export function createPage(data: Data, center: number[], pageId = Utils.uniqueId()): TLDrawCommand {
const { currentPageId } = data.appState
const topPage = Object.values(data.document.pages).sort(
@ -11,20 +11,20 @@ export function createPage(data: Data, pageId = Utils.uniqueId()): TLDrawCommand
const nextChildIndex = topPage?.childIndex ? topPage?.childIndex + 1 : 1
// TODO: Iterate the name better
const nextName = `Page ${nextChildIndex}`
const nextName = `New Page`
const page: TLDrawPage = {
id: pageId,
name: nextName,
shapes: {},
childIndex: nextChildIndex,
shapes: {},
bindings: {},
}
const pageState: TLPageState = {
id: pageId,
selectedIds: [],
camera: { point: [-window.innerWidth / 2, -window.innerHeight / 2], zoom: 1 },
camera: { point: center, zoom: 1 },
currentParentId: pageId,
editingId: undefined,
bindingId: undefined,

5
packages/tldraw/src/state/command/duplicate-page/duplicate-page.command.ts
View file

@ -1,7 +1,7 @@
import type { Data, TLDrawCommand } from '~types'
import { Utils } from '@tldraw/core'
export function duplicatePage(data: Data, pageId: string): TLDrawCommand {
export function duplicatePage(data: Data, center: number[], pageId: string): TLDrawCommand {
const newId = Utils.uniqueId()
const { currentPageId } = data.appState
@ -10,6 +10,7 @@ export function duplicatePage(data: Data, pageId: string): TLDrawCommand {
const nextPage = {
...page,
id: newId,
name: page.name + ' Copy',
shapes: Object.fromEntries(
Object.entries(page.shapes).map(([id, shape]) => {
return [
@ -51,7 +52,7 @@ export function duplicatePage(data: Data, pageId: string): TLDrawCommand {
...page,
id: newId,
selectedIds: [],
camera: { point: [-window.innerWidth / 2, -window.innerHeight / 2], zoom: 1 },
camera: data.document.pageStates[currentPageId].camera,
currentParentId: newId,
editingId: undefined,
bindingId: undefined,

17
packages/tldraw/src/state/command/move-to-page/move-to-page.command.ts
View file

@ -1,12 +1,13 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import type { ArrowShape, Data, PagePartial, TLDrawCommand, TLDrawShape } from '~types'
import { TLDR } from '~state/tldr'
import { Utils } from '@tldraw/core'
import { Utils, TLBounds } from '@tldraw/core'
import { Vec } from '@tldraw/vec'
export function moveToPage(
data: Data,
ids: string[],
viewportBounds: TLBounds,
fromPageId: string,
toPageId: string
): TLDrawCommand {
@ -157,14 +158,18 @@ export function moveToPage(
// Finally, center camera on selection
const toPageState = data.document.pageStates[toPageId]
const bounds = Utils.getCommonBounds(movingShapes.map((shape) => TLDR.getBounds(shape)))
const zoom = TLDR.getCameraZoom(
window.innerWidth < window.innerHeight
? (window.innerWidth - 128) / bounds.width
: (window.innerHeight - 128) / bounds.height
viewportBounds.width < viewportBounds.height
? (viewportBounds.width - 128) / bounds.width
: (viewportBounds.height - 128) / bounds.height
)
const mx = (window.innerWidth - bounds.width * zoom) / 2 / zoom
const my = (window.innerHeight - bounds.height * zoom) / 2 / zoom
const mx = (viewportBounds.width - bounds.width * zoom) / 2 / zoom
const my = (viewportBounds.height - bounds.height * zoom) / 2 / zoom
const point = Vec.round(Vec.add([-bounds.minX, -bounds.minY], [mx, my]))
return {

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

@ -940,7 +940,9 @@ export class TLDrawState extends StateManager<Data> {
* @param pageId (optional) The new page's id.
*/
createPage = (id?: string): this => {
return this.setState(Commands.createPage(this.state, id))
return this.setState(
Commands.createPage(this.state, [-this.bounds.width / 2, -this.bounds.height / 2], id)
)
}
/**
@ -965,7 +967,9 @@ export class TLDrawState extends StateManager<Data> {
* @param pageId The id of the page to duplicate.
*/
duplicatePage = (pageId: string): this => {
return this.setState(Commands.duplicatePage(this.state, pageId))
return this.setState(
Commands.duplicatePage(this.state, [-this.bounds.width / 2, -this.bounds.height / 2], pageId)
)
}
/**
@ -2091,7 +2095,7 @@ export class TLDrawState extends StateManager<Data> {
ids = this.selectedIds
): this => {
if (ids.length === 0) return this
this.setState(Commands.moveToPage(this.state, ids, fromPageId, toPageId))
this.setState(Commands.moveToPage(this.state, ids, this.bounds, fromPageId, toPageId))
return this
}
@ -2557,11 +2561,6 @@ 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)
// }
this.undoSelect()
this.setStatus(TLDrawStatus.Idle)
}