Fixes selection for shapes in a group
This commit is contained in:
parent
4507f806f6
commit
fcb11f19e3
6 changed files with 51 additions and 43 deletions
|
@ -1,8 +1,8 @@
|
||||||
import Command from './command'
|
import Command from './command'
|
||||||
import history from '../history'
|
import history from '../history'
|
||||||
import { TranslateSnapshot } from 'state/sessions/translate-session'
|
import { TranslateSnapshot } from 'state/sessions/translate-session'
|
||||||
import { Data } from 'types'
|
import { Data, ShapeType } from 'types'
|
||||||
import { getPage, updateParents } from 'utils/utils'
|
import { getDocumentBranch, getPage, updateParents } from 'utils/utils'
|
||||||
import { current } from 'immer'
|
import { current } from 'immer'
|
||||||
import { getShapeUtils } from 'lib/shape-utils'
|
import { getShapeUtils } from 'lib/shape-utils'
|
||||||
|
|
||||||
|
@ -13,7 +13,9 @@ export default function deleteSelected(data: Data) {
|
||||||
|
|
||||||
const page = getPage(current(data))
|
const page = getPage(current(data))
|
||||||
|
|
||||||
const shapes = selectedIds.map((id) => page.shapes[id])
|
const childrenToDelete = selectedIds
|
||||||
|
.flatMap((id) => getDocumentBranch(data, id))
|
||||||
|
.map((id) => page.shapes[id])
|
||||||
|
|
||||||
data.selectedIds.clear()
|
data.selectedIds.clear()
|
||||||
|
|
||||||
|
@ -41,18 +43,22 @@ export default function deleteSelected(data: Data) {
|
||||||
parent.children.map((id) => page.shapes[id])
|
parent.children.map((id) => page.shapes[id])
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
delete page.shapes[id]
|
|
||||||
|
for (let shape of childrenToDelete) {
|
||||||
|
delete page.shapes[shape.id]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
data.selectedIds.clear()
|
data.selectedIds.clear()
|
||||||
},
|
},
|
||||||
undo(data) {
|
undo(data) {
|
||||||
const page = getPage(data, currentPageId)
|
const page = getPage(data, currentPageId)
|
||||||
data.selectedIds.clear()
|
|
||||||
for (let shape of shapes) {
|
for (let shape of childrenToDelete) {
|
||||||
page.shapes[shape.id] = shape
|
page.shapes[shape.id] = shape
|
||||||
data.selectedIds.add(shape.id)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
data.selectedIds = new Set(selectedIds)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,13 +1,18 @@
|
||||||
import Command from './command'
|
import Command from './command'
|
||||||
import history from '../history'
|
import history from '../history'
|
||||||
import { Data, ShapeStyles } from 'types'
|
import { Data, ShapeStyles } from 'types'
|
||||||
import { getPage, getSelectedShapes } from 'utils/utils'
|
import { getDocumentBranch, getPage, getSelectedShapes } from 'utils/utils'
|
||||||
import { getShapeUtils } from 'lib/shape-utils'
|
import { getShapeUtils } from 'lib/shape-utils'
|
||||||
import { current } from 'immer'
|
import { current } from 'immer'
|
||||||
|
|
||||||
export default function styleCommand(data: Data, styles: Partial<ShapeStyles>) {
|
export default function styleCommand(data: Data, styles: Partial<ShapeStyles>) {
|
||||||
const { currentPageId } = data
|
const cData = current(data)
|
||||||
const initialShapes = getSelectedShapes(current(data))
|
const page = getPage(cData)
|
||||||
|
const { currentPageId } = cData
|
||||||
|
|
||||||
|
const shapesToStyle = Array.from(data.selectedIds.values())
|
||||||
|
.flatMap((id) => getDocumentBranch(data, id))
|
||||||
|
.map((id) => page.shapes[id])
|
||||||
|
|
||||||
history.execute(
|
history.execute(
|
||||||
data,
|
data,
|
||||||
|
@ -18,7 +23,7 @@ export default function styleCommand(data: Data, styles: Partial<ShapeStyles>) {
|
||||||
do(data) {
|
do(data) {
|
||||||
const { shapes } = getPage(data, currentPageId)
|
const { shapes } = getPage(data, currentPageId)
|
||||||
|
|
||||||
for (const { id } of initialShapes) {
|
for (const { id } of shapesToStyle) {
|
||||||
const shape = shapes[id]
|
const shape = shapes[id]
|
||||||
getShapeUtils(shape).applyStyles(shape, styles)
|
getShapeUtils(shape).applyStyles(shape, styles)
|
||||||
}
|
}
|
||||||
|
@ -26,7 +31,7 @@ export default function styleCommand(data: Data, styles: Partial<ShapeStyles>) {
|
||||||
undo(data) {
|
undo(data) {
|
||||||
const { shapes } = getPage(data, currentPageId)
|
const { shapes } = getPage(data, currentPageId)
|
||||||
|
|
||||||
for (const { id, style } of initialShapes) {
|
for (const { id, style } of shapesToStyle) {
|
||||||
const shape = shapes[id]
|
const shape = shapes[id]
|
||||||
getShapeUtils(shape).applyStyles(shape, style)
|
getShapeUtils(shape).applyStyles(shape, style)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { Data } from 'types'
|
import { Data } from 'types'
|
||||||
import { BaseCommand } from './commands/command'
|
import { BaseCommand } from './commands/command'
|
||||||
|
|
||||||
const CURRENT_VERSION = 'code_slate_0.0.2'
|
const CURRENT_VERSION = 'code_slate_0.0.3'
|
||||||
|
|
||||||
// A singleton to manage history changes.
|
// A singleton to manage history changes.
|
||||||
|
|
||||||
|
|
|
@ -22,27 +22,23 @@ export default class BrushSession extends BaseSession {
|
||||||
|
|
||||||
const brushBounds = getBoundsFromPoints([origin, point])
|
const brushBounds = getBoundsFromPoints([origin, point])
|
||||||
|
|
||||||
|
const hits = new Set<string>([])
|
||||||
|
|
||||||
for (let id in snapshot.shapeHitTests) {
|
for (let id in snapshot.shapeHitTests) {
|
||||||
const { test, selectId } = snapshot.shapeHitTests[id]
|
const { test, selectId } = snapshot.shapeHitTests[id]
|
||||||
|
if (!hits.has(selectId)) {
|
||||||
if (test(brushBounds)) {
|
if (test(brushBounds)) {
|
||||||
|
hits.add(selectId)
|
||||||
|
|
||||||
// When brushing a shape, select its top group parent.
|
// When brushing a shape, select its top group parent.
|
||||||
if (!data.selectedIds.has(selectId)) {
|
if (!data.selectedIds.has(selectId)) {
|
||||||
data.selectedIds.add(selectId)
|
data.selectedIds.add(selectId)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Possibly... select all of the top group parent's children too?
|
|
||||||
// const selectedId = getTopParentId(data, id)
|
|
||||||
// const idsToSelect = collectChildIds(data, selectedId)
|
|
||||||
|
|
||||||
// for (let id in idsToSelect) {
|
|
||||||
// if (!data.selectedIds.has(id)) {
|
|
||||||
// data.selectedIds.add(id)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
} else if (data.selectedIds.has(selectId)) {
|
} else if (data.selectedIds.has(selectId)) {
|
||||||
data.selectedIds.delete(selectId)
|
data.selectedIds.delete(selectId)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
data.brush = brushBounds
|
data.brush = brushBounds
|
||||||
}
|
}
|
||||||
|
@ -89,16 +85,3 @@ function getTopParentId(data: Data, id: string): string {
|
||||||
? id
|
? id
|
||||||
: getTopParentId(data, shape.parentId)
|
: getTopParentId(data, shape.parentId)
|
||||||
}
|
}
|
||||||
|
|
||||||
function collectChildIds(data: Data, id: string): string[] {
|
|
||||||
const shape = getPage(data).shapes[id]
|
|
||||||
|
|
||||||
if (shape.type === ShapeType.Group) {
|
|
||||||
return [
|
|
||||||
id,
|
|
||||||
...shape.children.flatMap((childId) => collectChildIds(data, childId)),
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
return [id]
|
|
||||||
}
|
|
||||||
|
|
|
@ -1027,8 +1027,10 @@ const state = createState({
|
||||||
const page = getPage(data)
|
const page = getPage(data)
|
||||||
selectedIds.clear()
|
selectedIds.clear()
|
||||||
for (let id in page.shapes) {
|
for (let id in page.shapes) {
|
||||||
|
if (page.shapes[id].parentId === data.currentPageId) {
|
||||||
selectedIds.add(id)
|
selectedIds.add(id)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
setHoveredId(data, payload: PointerInfo) {
|
setHoveredId(data, payload: PointerInfo) {
|
||||||
data.hoveredId = payload.target
|
data.hoveredId = payload.target
|
||||||
|
|
|
@ -1610,6 +1610,8 @@ export function getCurrentCamera(data: Data) {
|
||||||
// })
|
// })
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
/* --------------------- Groups --------------------- */
|
||||||
|
|
||||||
export function updateParents(data: Data, changedShapeIds: string[]) {
|
export function updateParents(data: Data, changedShapeIds: string[]) {
|
||||||
if (changedShapeIds.length === 0) return
|
if (changedShapeIds.length === 0) return
|
||||||
|
|
||||||
|
@ -1647,3 +1649,13 @@ export function getParentRotation(
|
||||||
? rotation + shape.rotation
|
? rotation + shape.rotation
|
||||||
: getParentRotation(data, shape.parentId, rotation + shape.rotation)
|
: getParentRotation(data, shape.parentId, rotation + shape.rotation)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getDocumentBranch(data: Data, id: string): string[] {
|
||||||
|
const shape = getPage(data).shapes[id]
|
||||||
|
if (shape.type !== ShapeType.Group) return [id]
|
||||||
|
|
||||||
|
return [
|
||||||
|
id,
|
||||||
|
...shape.children.flatMap((childId) => getDocumentBranch(data, childId)),
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue