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
36 lines
1.1 KiB
Vue
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>
|