ewderna/Beyond-KLE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mock: 選択枠を太くし、最前面の描画層に移す(T-30 単位1)

Browse Source 
選択枠と長押し候補の枠を NodeSvg の再帰から外し、ノードの描画より後に描く
PhySelectionLayer に移した。枠はワールド変換とローカル矩形から純粋関数
selectionFrames で求め、画面上3.5pxで描く。部品の選択表示は形状上に残す。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TDkA8qMQ3Uf1eY3Ar19vjy
This commit is contained in:
ewderna
2026-10-21 08:42:14 +09:00
co-authored by Claude Opus 5.5
parent d110320cb8
commit e92708dc12
6 changed files with 202 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mock/e2e/phy.spec.ts
+53 -5
View File
@@ -15,6 +15,49 @@ async function makeCluster(page: import("@playwright/test").Page) {
return page.locator('[data-node-type="cluster"]').first();
}
test("選択レイヤーはキーより前面にあり、回転とフォーカスに追従する", async ({ page }) => {
test.setTimeout(60_000);
const keys = page.locator('[data-node-type="key"]');
const leftId = await keys.first().getAttribute("data-node-id");
await keys.first().click();
const order = await page.locator("svg.canvas").evaluate((svg, id) => {
const face = svg.querySelector(`[data-node-id="${id}"]`)!;
const layer = svg.querySelector(`[data-sel-id="${id}"]`)!;
return [
face.compareDocumentPosition(layer) & Node.DOCUMENT_POSITION_FOLLOWING,
layer.parentElement?.classList.contains("selection-layer"),
];
}, leftId);
expect(order).toEqual([4, true]);
const cluster = await makeCluster(page);
const clusterId = await cluster.getAttribute("data-node-id");
await page.locator(`[data-tree-id="${clusterId}"]`).first().click();
await page.getByLabel("Rotation").fill("35");
await page.getByLabel("Rotation").dispatchEvent("change");
const key = cluster.locator('[data-node-type="key"]').first();
const id = await key.getAttribute("data-node-id");
await key.click();
const aligned = async () =>
page.evaluate((keyId) => {
const face = document.querySelector(`[data-node-id="${keyId}"] .key-face`)!.getBoundingClientRect();
const outline = document.querySelector(`[data-sel-id="${keyId}"]`)!.getBoundingClientRect();
return [
Math.abs(face.x - outline.x),
Math.abs(face.y - outline.y),
Math.abs(face.width - outline.width),
Math.abs(face.height - outline.height),
];
}, id);
expect((await aligned()).every((delta) => delta < 1)).toBe(true);
await page.locator(`[data-tree-id="${clusterId}"]`).first().click();
await page.locator(".canvas-pane").focus();
await page.keyboard.press("Enter");
const focused = page.locator(`[data-node-id="${id}"]`).last();
await focused.click();
expect((await aligned()).every((delta) => delta < 1)).toBe(true);
});
test("ドラッグの刻みをUndo/Redoでき、コンソールにエラーがない", async ({ page }) => {
const errors: string[] = [];
page.on("console", (message) => {
@@ -151,7 +194,7 @@ test("入れ子の回転クラスターをフォーカスできる", async ({ pa
await page.mouse.move(focusedBox!.x + focusedBox!.width / 2, focusedBox!.y + focusedBox!.height / 2);
await page.mouse.down();
await page.waitForTimeout(700);
await expect(page.locator(`[data-node-id="${innerId}"] .group-sel.candidate`)).toBeVisible({
await expect(page.locator(`[data-sel-id="${innerId}"].candidate`)).toBeVisible({
timeout: 1800,
});
await page.mouse.up();
@@ -164,11 +207,12 @@ test("入れ子の回転クラスターをフォーカスできる", async ({ pa
});
test("選択枠は画面上で見え、バリアントバッジで表示を切り替えられる", async ({ page }) => {
test.setTimeout(60_000);
const keys = page.locator('[data-node-type="key"]');
await keys.first().click();
const outline = page.locator('[data-node-type="key"] .sel').first();
const outline = page.locator(".selection-layer .sel").first();
await expect(outline).toBeVisible();
expect(await outline.evaluate((e) => getComputedStyle(e).strokeWidth)).toBe("2px");
expect(await outline.evaluate((e) => getComputedStyle(e).strokeWidth)).toBe("3.5px");
await keys.nth(1).click({ modifiers: ["Shift"] });
await page.getByRole("button", { name: "選択からバリアントグループ" }).click();
const group = page.locator('[data-node-type="variantGroup"]').first();
@@ -456,12 +500,16 @@ test("長押し候補は離すまで選択を変えず、離すとクラスタ
const clusterId = await cluster.getAttribute("data-node-id");
const keys = page.locator('[data-node-type="key"]');
await keys.nth(4).click();
await expect(keys.nth(4).locator(".sel")).toBeVisible();
await expect(
page.locator(`[data-sel-id="${await keys.nth(4).getAttribute("data-node-id")}"]`),
).toBeVisible();
const b = await cluster.locator('[data-node-type="key"]').first().boundingBox();
await page.mouse.move(b!.x + b!.width / 2, b!.y + b!.height / 2);
await page.mouse.down();
await expect(page.locator(".long-label")).toContainText("2/", { timeout: 1800 });
await expect(keys.nth(4).locator(".sel")).toBeVisible();
await expect(
page.locator(`[data-sel-id="${await keys.nth(4).getAttribute("data-node-id")}"]`),
).toBeVisible();
await page.screenshot({ path: path.join(test.info().outputDir, "long-press-candidate.png") });
await page.mouse.up();
await expect(page.locator(`[data-tree-id="${clusterId}"]`).first()).toHaveClass(/chosen/);
mock/src/ui/phy/NodeSvg.vue
+3 -46
View File
@@ -10,7 +10,6 @@ const props = defineProps<{
dim: boolean;
zoom: number;
angle: number;
longCandidate?: string | null;
}>();
const emit = defineEmits<{
down: [e: PointerEvent, n: Node, el: SVGGElement];
@@ -57,18 +56,9 @@ function badgeBox(n: Node) {
:height="n.size.h"
rx=".06"
class="key-face"
:class="{ chosen: selected.includes(n.id), ghost: n.ghost, decal: n.decal }" /><text
class="key-label"
x=".08"
y=".24"
>{{ n.labels?.find(Boolean) }}</text
><rect
v-if="selected.includes(n.id)"
:width="n.size.w"
:height="n.size.h"
class="sel"
:class="{ candidate: longCandidate === n.id }"
/></g>
:class="{ chosen: selected.includes(n.id), ghost: n.ghost, decal: n.decal }"
/><text class="key-label" x=".08" y=".24">{{ n.labels?.find(Boolean) }}</text></g
>
<g
v-else-if="n.type === 'component'"
class="node"
@@ -117,18 +107,9 @@ function badgeBox(n: Node) {
:dim="dim"
:zoom="zoom"
:angle="angle + n.transform.rotation"
:long-candidate="longCandidate"
@down="(e, c, el) => emit('down', e, c, el)"
@badge="(g, e) => emit('badge', g, e)"
@focus="(id) => emit('focus', id)"
/><rect
v-if="selected.includes(n.id) || longCandidate === n.id"
:x="bounds(n).x"
:y="bounds(n).y"
:width="bounds(n).width"
:height="bounds(n).height"
class="group-sel"
:class="{ candidate: longCandidate === n.id }"
/><text x="0" y="-.12" class="group-label">{{ n.name }}</text></g
>
<g v-else class="group"
@@ -142,18 +123,9 @@ function badgeBox(n: Node) {
:dim="dim"
:zoom="zoom"
:angle="angle + n.transform.rotation"
:long-candidate="longCandidate"
@down="(e, c, el) => emit('down', e, c, el)"
@badge="(g, e) => emit('badge', g, e)"
@focus="(id) => emit('focus', id)"
/><rect
v-if="selected.includes(n.id) || longCandidate === n.id"
:x="bounds(n).x"
:y="bounds(n).y"
:width="bounds(n).width"
:height="bounds(n).height"
class="group-sel"
:class="{ candidate: longCandidate === n.id }"
/><g
:transform="`rotate(${badgeBox(n).angle} ${badgeBox(n).x} ${badgeBox(n).y})`"
class="badge"
@@ -216,21 +188,6 @@ function badgeBox(n: Node) {
stroke: #315d7a;
stroke-width: 0.03;
}
.sel,
.group-sel {
fill: none;
stroke: #1769d2;
stroke-width: 2px;
vector-effect: non-scaling-stroke;
pointer-events: none;
}
.group-sel {
stroke-dasharray: 5 3;
}
.candidate {
stroke: #e87912;
stroke-width: 2.5px;
}
.group {
cursor: default;
}
mock/src/ui/phy/PhyEditor.vue
+8 -2
View File
@@ -7,6 +7,7 @@ import { reframe } from "../../domain/phyCommands";
import { listDeleteReferences } from "../../domain/deleteCascade";
import PhyTree from "./PhyTree.vue";
import NodeSvg from "./NodeSvg.vue";
import PhySelectionLayer from "./PhySelectionLayer.vue";
import PhyToolbar from "./PhyToolbar.vue";
import PhyProperties from "./PhyProperties.vue";
import { normalizeSelection, nextGrid, insertionContainer, structuralNodes, visibleNodeIds } from "./logic";
@@ -374,7 +375,6 @@ function onFocus(_id: string) {
:variants="variants"
:cut="cut"
:dim="false"
:long-candidate="longLabel ? (holdCandidates[holdIndex] ?? null) : null"
:zoom="zoom"
:angle="focusAngle(focus)"
@down="down"
@@ -389,13 +389,19 @@ function onFocus(_id: string) {
:variants="variants"
:cut="cut"
:dim="false"
:long-candidate="longLabel ? (holdCandidates[holdIndex] ?? null) : null"
:zoom="zoom"
:angle="0"
@down="down"
@badge="openBadge"
@focus="onFocus"
/>
<PhySelectionLayer
:nodes="focus ? [node(focus)!] : project.phy.root"
:selected="selected"
:variants="variants"
:candidate="longLabel ? (holdCandidates[holdIndex] ?? null) : null"
:parent="focus ? focusParentMatrix(focus) : undefined"
/>
</g>
<rect
v-if="rangeBox"
mock/src/ui/phy/PhySelectionLayer.vue
+51
View File
@@ -0,0 +1,51 @@
<script setup lang="ts">
import { computed } from "vue";
import type { Node } from "../../domain/phy";
import type { Affine } from "../../domain/geometry";
import { selectionFrames } from "./logic";
const props = withDefaults(
defineProps<{
nodes: Node[];
selected: string[];
variants: Record<string, string>;
candidate?: string | null;
parent?: Affine;
}>(),
{ candidate: null, parent: () => ({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }) },
);
const frames = computed(() =>
selectionFrames(props.nodes, props.selected, props.variants, props.candidate, props.parent),
);
const affineText = (m: Affine) => `matrix(${m.a} ${m.b} ${m.c} ${m.d} ${m.e} ${m.f})`;
</script>
<template>
<g class="selection-layer" pointer-events="none">
<rect
v-for="frame in frames"
:key="frame.id"
:data-sel-id="frame.id"
:class="[frame.type === 'key' ? 'sel' : 'group-sel', { candidate: frame.candidate }]"
:transform="affineText(frame.transform)"
:x="frame.box.x"
:y="frame.box.y"
:width="frame.box.width"
:height="frame.box.height"
/>
</g>
</template>
<style scoped>
.sel,
.group-sel {
fill: none;
stroke: #1769d2;
stroke-width: 3.5px;
vector-effect: non-scaling-stroke;
}
.group-sel {
stroke-dasharray: 5 3;
}
.candidate {
stroke: #e87912;
stroke-width: 3.5px;
}
</style>
mock/src/ui/phy/logic.ts
+55
View File
@@ -229,6 +229,61 @@ export function localBounds(nodes: Node[], variants: Record<string, string> = {}
visit(nodes, { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
return obbAabb(points);
}
export type SelectionFrame = {
id: string;
type: Node["type"];
transform: Affine;
box: Box;
candidate: boolean;
};
/** 可視ノードの選択枠をワールド行列とローカル矩形で返す。 */
export function selectionFrames(
roots: Node[],
selected: string[],
variants: Record<string, string>,
candidate: string | null,
parent: Affine = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 },
): SelectionFrame[] {
const frames: SelectionFrame[] = [];
const visit = (nodes: Node[], ancestor: Affine) => {
for (const node of nodes) {
const transform = compose(ancestor, matrix(node.transform));
if (node.type === "key" && (selected.includes(node.id) || candidate === node.id)) {
frames.push({
id: node.id,
type: node.type,
transform,
box: { x: 0, y: 0, width: node.size.w, height: node.size.h },
candidate: candidate === node.id,
});
} else if (node.type === "cluster") {
if (selected.includes(node.id) || candidate === node.id)
frames.push({
id: node.id,
type: node.type,
transform,
box: localBounds(node.children, variants),
candidate: candidate === node.id,
});
visit(node.children, transform);
} else if (node.type === "variantGroup") {
const variant = node.children.find((item) => item.id === (variants[node.id] ?? node.default));
if (selected.includes(node.id) || candidate === node.id)
frames.push({
id: node.id,
type: node.type,
transform,
box: localBounds(variant?.children ?? [], variants),
candidate: candidate === node.id,
});
if (variant) visit(variant.children, transform);
}
}
};
visit(roots, parent);
return frames;
}
/** ワールド位置を貼り先の親ローカルへ戻し、親軸で1刻みずらす。T-11/T-27。 */
export function pasteLocalTransform(sourceWorld: Affine, parentWorld: Affine, step: number): Transform {
const local = compose(inverse(parentWorld), sourceWorld);
mock/tests/phyLogic.test.ts
+32
View File
@@ -12,6 +12,7 @@ import {
pasteParent,
resolveKey,
snap,
selectionFrames,
tabOrder,
treeIndex,
visibleNodeIds,
@@ -34,6 +35,37 @@ const phy: PhyFile = {
],
};
describe("PHY pure interaction rules", () => {
it("computes selected frame world transforms through nested rotations", () => {
const roots: PhyNode[] = [
{
type: "cluster",
id: "outer",
transform: { x: 10, y: 20, rotation: 90 },
children: [
{
type: "cluster",
id: "inner",
transform: { x: 2, y: 3, rotation: -90 },
children: [
{
type: "key",
id: "target",
profile: "p",
transform: { x: 4, y: 5, rotation: 30 },
size: { w: 2, h: 1 },
},
],
},
],
},
];
const frame = selectionFrames(roots, ["target"], {}, null)[0]!;
expect(frame.id).toBe("target");
expect(frame.transform.e).toBeCloseTo(11);
expect(frame.transform.f).toBeCloseTo(27);
expect(frame.transform.a).toBeCloseTo(Math.cos(Math.PI / 6));
expect(frame.transform.b).toBeCloseTo(Math.sin(Math.PI / 6));
});
it("removes ancestors and descendants from mixed selections", () => {
expect(normalizeSelection(phy, ["c", "k"])).toEqual(["k"]);
expect(normalizeSelection(phy, ["k", "c"])).toEqual(["c"]);