mock: 選択枠を太くし、最前面の描画層に移す(T-30 単位1)
選択枠と長押し候補の枠を 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:
Claude Opus 5.5
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user