[fix] exit penmode (#1847)
This PR fixes the "Exit Pen Mode" button (see first commit). There are some other "wrap some stuff in editor.batch" changes in the "follow up changes" commit. ### Change Type - [x] `patch` — Bug fix ### Test Plan 1. Use an ipad / pencil to enter pen mode 2. Click the Exit pen mode button
This commit is contained in:
Steve Ruiz
GitHub
parent
2e4f1de944
commit
cf00eade9c
1 changed files with 79 additions and 75 deletions
|
|
@ -273,38 +273,40 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
||||||
label: 'action.convert-to-bookmark',
|
label: 'action.convert-to-bookmark',
|
||||||
readonlyOk: false,
|
readonlyOk: false,
|
||||||
onSelect(source) {
|
onSelect(source) {
|
||||||
trackEvent('convert-to-bookmark', { source })
|
editor.batch(() => {
|
||||||
const shapes = editor.selectedShapes
|
trackEvent('convert-to-bookmark', { source })
|
||||||
|
const shapes = editor.selectedShapes
|
||||||
|
|
||||||
const createList: TLShapePartial[] = []
|
const createList: TLShapePartial[] = []
|
||||||
const deleteList: TLShapeId[] = []
|
const deleteList: TLShapeId[] = []
|
||||||
for (const shape of shapes) {
|
for (const shape of shapes) {
|
||||||
if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
|
if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
|
||||||
continue
|
continue
|
||||||
|
|
||||||
const newPos = new Vec2d(shape.x, shape.y)
|
const newPos = new Vec2d(shape.x, shape.y)
|
||||||
newPos.rot(-shape.rotation)
|
newPos.rot(-shape.rotation)
|
||||||
newPos.add(new Vec2d(shape.props.w / 2 - 300 / 2, shape.props.h / 2 - 320 / 2)) // see bookmark shape util
|
newPos.add(new Vec2d(shape.props.w / 2 - 300 / 2, shape.props.h / 2 - 320 / 2)) // see bookmark shape util
|
||||||
newPos.rot(shape.rotation)
|
newPos.rot(shape.rotation)
|
||||||
const partial: TLShapePartial<TLBookmarkShape> = {
|
const partial: TLShapePartial<TLBookmarkShape> = {
|
||||||
id: createShapeId(),
|
id: createShapeId(),
|
||||||
type: 'bookmark',
|
type: 'bookmark',
|
||||||
rotation: shape.rotation,
|
rotation: shape.rotation,
|
||||||
x: newPos.x,
|
x: newPos.x,
|
||||||
y: newPos.y,
|
y: newPos.y,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
props: {
|
props: {
|
||||||
url: shape.props.url,
|
url: shape.props.url,
|
||||||
},
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
createList.push(partial)
|
||||||
|
deleteList.push(shape.id)
|
||||||
}
|
}
|
||||||
|
|
||||||
createList.push(partial)
|
editor.mark('convert shapes to bookmark')
|
||||||
deleteList.push(shape.id)
|
editor.deleteShapes(deleteList)
|
||||||
}
|
editor.createShapes(createList)
|
||||||
|
})
|
||||||
editor.mark('convert shapes to bookmark')
|
|
||||||
editor.deleteShapes(deleteList)
|
|
||||||
editor.createShapes(createList)
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -313,48 +315,51 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
||||||
readonlyOk: false,
|
readonlyOk: false,
|
||||||
onSelect(source) {
|
onSelect(source) {
|
||||||
trackEvent('convert-to-embed', { source })
|
trackEvent('convert-to-embed', { source })
|
||||||
const ids = editor.selectedShapeIds
|
|
||||||
const shapes = compact(ids.map((id) => editor.getShape(id)))
|
|
||||||
|
|
||||||
const createList: TLShapePartial[] = []
|
editor.batch(() => {
|
||||||
const deleteList: TLShapeId[] = []
|
const ids = editor.selectedShapeIds
|
||||||
for (const shape of shapes) {
|
const shapes = compact(ids.map((id) => editor.getShape(id)))
|
||||||
if (!editor.isShapeOfType<TLBookmarkShape>(shape, 'bookmark')) continue
|
|
||||||
|
|
||||||
const { url } = shape.props
|
const createList: TLShapePartial[] = []
|
||||||
|
const deleteList: TLShapeId[] = []
|
||||||
|
for (const shape of shapes) {
|
||||||
|
if (!editor.isShapeOfType<TLBookmarkShape>(shape, 'bookmark')) continue
|
||||||
|
|
||||||
const embedInfo = getEmbedInfo(shape.props.url)
|
const { url } = shape.props
|
||||||
|
|
||||||
if (!embedInfo) continue
|
const embedInfo = getEmbedInfo(shape.props.url)
|
||||||
if (!embedInfo.definition) continue
|
|
||||||
|
|
||||||
const { width, height } = embedInfo.definition
|
if (!embedInfo) continue
|
||||||
|
if (!embedInfo.definition) continue
|
||||||
|
|
||||||
const newPos = new Vec2d(shape.x, shape.y)
|
const { width, height } = embedInfo.definition
|
||||||
newPos.rot(-shape.rotation)
|
|
||||||
newPos.add(new Vec2d(shape.props.w / 2 - width / 2, shape.props.h / 2 - height / 2))
|
|
||||||
newPos.rot(shape.rotation)
|
|
||||||
|
|
||||||
const shapeToCreate: TLShapePartial<TLEmbedShape> = {
|
const newPos = new Vec2d(shape.x, shape.y)
|
||||||
id: createShapeId(),
|
newPos.rot(-shape.rotation)
|
||||||
type: 'embed',
|
newPos.add(new Vec2d(shape.props.w / 2 - width / 2, shape.props.h / 2 - height / 2))
|
||||||
x: newPos.x,
|
newPos.rot(shape.rotation)
|
||||||
y: newPos.y,
|
|
||||||
rotation: shape.rotation,
|
const shapeToCreate: TLShapePartial<TLEmbedShape> = {
|
||||||
props: {
|
id: createShapeId(),
|
||||||
url: url,
|
type: 'embed',
|
||||||
w: width,
|
x: newPos.x,
|
||||||
h: height,
|
y: newPos.y,
|
||||||
},
|
rotation: shape.rotation,
|
||||||
|
props: {
|
||||||
|
url: url,
|
||||||
|
w: width,
|
||||||
|
h: height,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
createList.push(shapeToCreate)
|
||||||
|
deleteList.push(shape.id)
|
||||||
}
|
}
|
||||||
|
|
||||||
createList.push(shapeToCreate)
|
editor.mark('convert shapes to embed')
|
||||||
deleteList.push(shape.id)
|
editor.deleteShapes(deleteList)
|
||||||
}
|
editor.createShapes(createList)
|
||||||
|
})
|
||||||
editor.mark('convert shapes to embed')
|
|
||||||
editor.deleteShapes(deleteList)
|
|
||||||
editor.createShapes(createList)
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -682,14 +687,16 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
||||||
kbd: '$a',
|
kbd: '$a',
|
||||||
readonlyOk: true,
|
readonlyOk: true,
|
||||||
onSelect(source) {
|
onSelect(source) {
|
||||||
trackEvent('select-all-shapes', { source })
|
editor.batch(() => {
|
||||||
if (editor.currentToolId !== 'select') {
|
trackEvent('select-all-shapes', { source })
|
||||||
editor.cancel()
|
if (editor.currentToolId !== 'select') {
|
||||||
editor.setCurrentTool('select')
|
editor.cancel()
|
||||||
}
|
editor.setCurrentTool('select')
|
||||||
|
}
|
||||||
|
|
||||||
editor.mark('select all kbd')
|
editor.mark('select all kbd')
|
||||||
editor.selectAll()
|
editor.selectAll()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -915,12 +922,9 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
||||||
readonlyOk: true,
|
readonlyOk: true,
|
||||||
onSelect(source) {
|
onSelect(source) {
|
||||||
trackEvent('toggle-debug-mode', { source })
|
trackEvent('toggle-debug-mode', { source })
|
||||||
editor.updateInstanceState(
|
editor.updateInstanceState({
|
||||||
{
|
isDebugMode: !editor.instanceState.isDebugMode,
|
||||||
isDebugMode: !editor.instanceState.isDebugMode,
|
})
|
||||||
},
|
|
||||||
{ ephemeral: true }
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
checkbox: true,
|
checkbox: true,
|
||||||
},
|
},
|
||||||
|
|
@ -941,7 +945,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
||||||
readonlyOk: true,
|
readonlyOk: true,
|
||||||
onSelect(source) {
|
onSelect(source) {
|
||||||
trackEvent('exit-pen-mode', { source })
|
trackEvent('exit-pen-mode', { source })
|
||||||
editor.instanceState.isPenMode = false
|
editor.updateInstanceState({ isPenMode: false })
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue