a6a87035da
* fix(canvas): show every top-level frame's name and select frames by it Since clicks follow Figma's depth, the empty part of a top-level frame that holds layers selects nothing, but a frame's name was drawn and hit-tested only while that frame was already selected. Once a top-level frame held layers it could not be selected from the canvas, as when one frame is dragged into another and the outer frame is then out of reach. Every frame on the page or in a section now shows its name, faded in the canvas's text color and in the selection color while selected or hovered, from the same viewport-culled label catalog as section and component labels. Its name is a hit target whether or not the frame is selected, so clicking it selects the frame, dragging it moves the frame, and hovering it highlights the frame; locked frames stay out of reach. SkiaRenderer.hitTestFrameTitle no longer takes the selected IDs. * fix(canvas): draw and hit labels whose node is just outside the view Label catalogs culled nodes by their own bounds, but frame, section, and component names sit outside the node, so a node just below the view hid a name that was on screen and could not be clicked. Label lookups now use the viewport widened by how far labels reach. Presses and hover also test component labels, then section titles, then frame names, the reverse of the order they are drawn, so overlapping labels pick the one on top.
39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import { afterEach, describe, expect, test } from 'bun:test'
|
|
|
|
import { createEditor, type Editor } from '@open-pencil/core/editor'
|
|
import type { SceneNode } from '@open-pencil/scene-graph'
|
|
|
|
import type { HitTestFns } from '#vue/shared/input/select'
|
|
import { resolveHit } from '#vue/shared/input/select/hit'
|
|
|
|
let editor: Editor
|
|
|
|
afterEach(() => editor.dispose())
|
|
|
|
function labelHits(hits: Partial<Record<'frame' | 'section' | 'component', SceneNode>>): HitTestFns {
|
|
return {
|
|
hitTestInScope: () => null,
|
|
isInsideContainerBounds: () => false,
|
|
hitTestFrameTitle: () => hits.frame ?? null,
|
|
hitTestSectionTitle: () => hits.section ?? null,
|
|
hitTestComponentLabel: () => hits.component ?? null
|
|
}
|
|
}
|
|
|
|
describe('label hits', () => {
|
|
test('a press on overlapping labels picks the one drawn on top', () => {
|
|
editor = createEditor()
|
|
const pageId = editor.state.currentPageId
|
|
const frame = editor.graph.createNode('FRAME', pageId, { name: 'Frame' })
|
|
const section = editor.graph.createNode('SECTION', pageId, { name: 'Section' })
|
|
const component = editor.graph.createNode('COMPONENT', pageId, { name: 'Button' })
|
|
|
|
// Labels are drawn frames, then sections, then components.
|
|
expect(resolveHit(0, 0, editor, labelHits({ frame, section, component }))?.id).toBe(
|
|
component.id
|
|
)
|
|
expect(resolveHit(0, 0, editor, labelHits({ frame, section }))?.id).toBe(section.id)
|
|
expect(resolveHit(0, 0, editor, labelHits({ frame }))?.id).toBe(frame.id)
|
|
})
|
|
})
|