Files
Beyond-KLE/mock/src/ui/phy/PhyCanvas.vue
T
ewdernaandClaude Opus 5.5 fccbc28bee mock: 仮決定に沿ってモックを実装する(PHY Editor・IDX・ELC・MAP・Generator)
provisional/decisions.md の仮決定(T-1〜T-28)に従い、mock/ に Vue 3 + Vite + TypeScript のモックを置いた。
T-3 の1〜3(回転したクラスター内のドラッグと保存の往復、IDX・MAPとの連携、ELCと出力の対応表)まで。疑似デバイスとの往復(T-24)は未着手。

- KLE JSONの入出力は、KLE本家の serial.js の deserialize の結果を期待値とする fixture(tests/fixtures/kle-oracle.json)で照合した。本家のコードは取り込んでいない(T-7)
- 基本キーコードの表は QMK の data/constants/keycodes/keycodes_0.0.1_basic.hjson(1e340cd)から抽出した
- 実装は Codex(Luna)、レビューは Codex(Sol)。検証: Vitest 53件、Playwright 20件、vue-tsc、vite build
- TypeScript は vue-tsc が 7 系に未対応のため 6 系に固定した
- 操作性の改善(ELCの提供者の表示、一括配線とGeneratorのピン設定の引き継ぎ、キー内の文字のはみ出し)は別途行う

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AATqjRyp6rrnwTNdYw8XBT
2026-09-25 22:42:30 +09:00

36 lines
1.1 KiB
Vue

<script setup lang="ts">
import type { Node } from "../../domain/phy";
import PhyNodeView from "./PhyNodeView.vue";
defineProps<{ nodes: Node[]; selected: string[]; variants: Record<string, string>; zoom: number }>();
const emit = defineEmits<{
select: [id: string, additive: boolean];
dragStart: [event: PointerEvent, id: string, parent: SVGGElement];
}>();
function visible(n: Node, selection: Record<string, string>) {
return n.type !== "variantGroup" || !!n.children.find((v) => v.id === (selection[n.id] ?? n.default));
}
</script>
<template>
<svg
class="canvas"
data-testid="phy-canvas"
:viewBox="`-64 -64 ${1152 / zoom} ${896 / zoom}`"
width="1152"
height="896"
preserveAspectRatio="xMinYMin meet"
>
<g class="layout" transform="scale(64)">
<g v-for="n in nodes" :key="n.id">
<PhyNodeView
:node="n"
:selected="selected"
:variants="variants"
:visible="visible(n, variants)"
@select="(id, additive) => emit('select', id, additive)"
@drag-start="(event, id, parent) => emit('dragStart', event, id, parent)"
/>
</g>
</g>
</svg>
</template>