From 4eaf2ae11d5b4673ab716de1d5dabe4178e1aff1 Mon Sep 17 00:00:00 2001 From: cruldra Date: Fri, 25 Sep 2026 21:01:43 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(prototype):=20=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E9=98=85=E8=AF=BB=E9=A2=84=E8=A7=88=E7=AD=9B=E9=80=89?= =?UTF-8?q?=E6=A0=8F=E5=8E=9F=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../code-reader/figma-plugin/README.md | 6 + .../code-reader/figma-plugin/code.js | 152 ++++++++++++++++-- .../code-reader/figma-plugin/test.js | 40 ++++- 3 files changed, 183 insertions(+), 15 deletions(-) diff --git a/docs/prototype/code-reader/figma-plugin/README.md b/docs/prototype/code-reader/figma-plugin/README.md index 89aed65..ede5aa8 100644 --- a/docs/prototype/code-reader/figma-plugin/README.md +++ b/docs/prototype/code-reader/figma-plugin/README.md @@ -23,6 +23,9 @@ | `Prototype / issueLock.ts · 编辑 / 预览` | `vscode/src/panel/issueLock.ts` | 中文注释块、多行返回语句块 | | `Prototype / routes.py · 编辑 / 预览` | luffy-agent-platform 的 `backend/src/luffy_agent/user/routes.py` | Python：带装饰器、默认值、返回类型的 FastAPI 路由函数，属性表；`is not None` → 不是 空 | | `Prototype / envLock.ts · 预览（编辑区变窄）` | — | 窗口只有 1000 宽时块跟着变窄，长句换行 | +| `Prototype / 筛选 · 默认` | `envLock.ts` | 预览顶部固定一条筛选栏：「筛选」+ 当前文件出现过的属性各一个下拉框（种类、访问级别、异步、仅类型）+ 右边「共 33 块」 | +| `Prototype / 筛选 · 按访问级别` | 同上 | 访问级别下拉菜单打开，只勾「公共」：两个私有常量和私有函数 `chmodAll`（连同函数体）藏起来；条件、返回这些没有访问级别的块照常显示；右边「已隐藏 3 块 · 清除」 | +| `Prototype / 筛选 · 按种类` | 同上 | 种类下拉菜单打开，去掉「注释」「导入」：6 块藏起来 | | `Prototype / 文件注释 · 悬停出按钮` | luffy 的 `campaign` 目录 | 鼠标停在侧栏某一行，行尾出现一排操作按钮，第一个「添加注释」，按钮下面是提示 | | `Prototype / 文件注释 · 填写` | 同上 | 点「添加注释」后 VS Code 顶部弹出单行输入框，标题带上目录 / 文件名；回车保存，Esc 取消，清空后保存即删除 | | `Prototype / 文件注释 · 已保存` | 同上 | 有注释的目录 / 文件在名字后面灰字显示注释，太长截断；鼠标停在有注释的行上，按钮换成「编辑注释」，悬停提示里是路径和注释全文 | @@ -51,6 +54,7 @@ - `Reader / ModeToggle`：编辑器右上角的「编辑 / 预览」。 - `Explorer / TreeRow`：侧栏文件树的一行，文件夹展开 / 收起 / 展开且悬停，文件默认 / 选中 / 有改动 / 有改动且选中 / 悬停，共 8 个。名字后面的注释层默认藏起来，有注释的实例里打开；悬停状态行尾带「添加注释」「编辑注释」两个按钮，实例里按有没有注释显示其中一个。 - `Explorer / Header`：侧栏顶部。 +- `Reader / FilterBar`：`Active=none | access | kind`，预览顶部的筛选栏，打开的下拉菜单是勾选列表，每个值后面是块数。 - `Window / QuickInput`：VS Code 顶部弹出的单行输入框，标题和内容在实例里改。 - `Window / TitleBar`、`Window / ActivityBar`、`Window / StatusBar`、`Editor / TitleBar`、`Editor / Breadcrumb`：VS Code 窗口外壳。 @@ -70,6 +74,7 @@ - 块右边「编辑」→ 这一块换成源码；「预览」→ 换回译文。 - 编辑器右上角「编辑」→ 整个文件回到 VS Code 编辑器；「预览」→ 回到代码块树。 - 侧栏点 `envLock.ts` / `issueLock.ts` → 在编辑器里打开那个文件。 +- 从「筛选」起点开始：点「访问级别」「种类」→ 打开各自的下拉菜单并按勾选筛过；点「清除」→ 回到不筛。 - 从「文件注释」起点开始：点 `campaign` 行尾的「添加注释」→ 顶部输入框；点输入框 → 保存后的侧栏。 - 编辑区和侧栏可以上下滚动。 @@ -94,5 +99,6 @@ node --test test.js - [ ] 译文里的关键字、变量名、函数名颜色和编辑器里对应的代码一致，关键字前后都有空格 - [ ] 有子块的块左边有折叠箭头，没有子块的没有，标签仍然对齐 - [ ] 属性表：函数、导入、常量、变量的属性名一列对齐；导入项每项一行，左边竖线；输入参数下每个参数一行，名称 / 类型 / 默认值三列对齐，左边竖线从第一个参数连到最后一个；长类型（`Annotated[...]`）换行不挤掉默认值列 +- [ ] 筛选：筛选栏固定在预览顶部、和代码块左右对齐；下拉菜单盖在代码块上面；藏掉的块不留空位，左边层级竖线跟着变短 - [ ] 文件注释：悬停行的按钮贴在行尾、不挤掉名字；注释灰字紧跟名字、长了截断；顶部输入框居中，看得出是 VS Code 自带的样子 - [ ] 演示：块的编辑 / 预览、右上角编辑 / 预览、侧栏切文件都能点通 diff --git a/docs/prototype/code-reader/figma-plugin/code.js b/docs/prototype/code-reader/figma-plugin/code.js index 7b31af3..4d4de3e 100644 --- a/docs/prototype/code-reader/figma-plugin/code.js +++ b/docs/prototype/code-reader/figma-plugin/code.js @@ -18,6 +18,9 @@ const SIDEBAR_W = 280; const EDITOR_W = WINDOW_W - ACTIVITY_W - SIDEBAR_W - 1; const TREE_W = 880; const QUICK_INPUT_W = 600; +const FILTER_BAR_H = 36; +const FILTER_LABEL_W = 52; +const CHIP_W = 150; const ROW_H = 22; const SIDEBAR_HEADER_H = 34; const VIEW_PAD = 24; @@ -41,7 +44,8 @@ const COLORS = { hover: "#2a2d2e", // list.hoverBackground / toolbar.hoverBackground widget: "#202020", // editorHoverWidget.background / quickInput.background widgetBorder: "#454545", // editorHoverWidget.border / widget.border - input: "#313131", // input.background + input: "#313131", // input.background / dropdown.background + link: "#4daafc", // textLink.foreground toggleOn: "#37373d", gitModified: "#e2c08d", // gitDecoration.modifiedResourceForeground code: "#d4d4d4", @@ -805,6 +809,8 @@ function dot(ctx, parent, name, color, size) { const LUCIDE = { "chevron-right": [["path", { d: "m9 18 6-6-6-6" }]], "chevron-down": [["path", { d: "m6 9 6 6 6-6" }]], + "list-filter": [["path", { d: "M3 6h18" }], ["path", { d: "M7 12h10" }], ["path", { d: "M10 18h4" }]], + "check": [["path", { d: "M20 6 9 17l-5-5" }]], "chevrons-down-up": [["path", { d: "m7 20 5-5 5 5" }], ["path", { d: "m7 4 5 5 5-5" }]], "triangle-alert": [["path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }], ["path", { d: "M12 9v4" }], ["path", { d: "M12 17h.01" }]], "circle-x": [["circle", { cx: "12", cy: "12", r: "10" }], ["path", { d: "m15 9-6 6" }], ["path", { d: "m9 9 6 6" }]], @@ -891,6 +897,102 @@ function setText(root, name, characters) { named(root, name).characters = characters; } +// ─── 筛选 ──────────────────────────────────────────────────────────────────── +// +// 每块带几条「属性 = 值」，由语言插件从语法树换算成各语言统一的属性，翻译插件给属性和值起显示名； +// 原型直接用显示名。筛选栏按当前文件里出现过的属性各给一个下拉框，选项是实际出现的值和数量。 +// 同一属性里勾的值满足一个就显示，不同属性要同时满足；块没有某个属性就不受它影响；块藏起来，子块一起藏。 +const FACET_ORDER = ["种类", "访问级别", "异步", "仅类型"]; +const FILTER_FILE = "envLock"; + +function blockAttributes(fileKey, item, depth) { + const attributes = [["种类", BLOCK_KINDS[item.kind].label]]; + if (item.kind === "function") { + const signature = parseSignature(fileKey, item); + if (depth === 0) attributes.push(["访问级别", signature.access]); + attributes.push(["异步", signature.async ? "是" : "否"]); + } + if ((item.kind === "const" || item.kind === "variable") && depth === 0) attributes.push(["访问级别", parseVariable(fileKey, item, true).access]); + if (item.kind === "import" && FILES[fileKey].lang !== "python") attributes.push(["仅类型", parseImport(fileKey, item).typeOnly ? "是" : "否"]); + return attributes; +} + +/** 当前文件里每个属性出现过的值和块数，按 FACET_ORDER 排。 */ +function facetCounts(fileKey) { + const facets = new Map(FACET_ORDER.map((facet) => [facet, new Map()])); + walkTree(CODE_TREE[fileKey], (item, depth) => { + for (const [facet, value] of blockAttributes(fileKey, item, depth)) facets.get(facet).set(value, (facets.get(facet).get(value) || 0) + 1); + }); + return new Map([...facets].filter(([, values]) => values.size)); +} + +/** 被筛掉的块（只记最外层那块，子块跟着藏）。allowed：属性 → 勾选的值。 */ +function filteredOut(fileKey, allowed) { + const hidden = []; + const visit = (nodes, depth) => { + for (const item of nodes) { + const out = blockAttributes(fileKey, item, depth).some(([facet, value]) => allowed[facet] && !allowed[facet].includes(value)); + if (out) hidden.push(item); + else if (item.kids) visit(item.kids, depth + 1); + } + }; + visit(CODE_TREE[fileKey], 0); + return hidden; +} + +/** 演示用的三种筛选：不筛；访问级别只看公共；种类里去掉注释和导入。 */ +function filterPresets() { + const kinds = [...facetCounts(FILTER_FILE).get("种类").keys()]; + return { + none: { allowed: {} }, + access: { facet: "访问级别", allowed: { 访问级别: ["公共"] }, chip: "访问级别：公共" }, + kind: { facet: "种类", allowed: { 种类: kinds.filter((kind) => !["注释", "导入"].includes(kind)) }, chip: `种类：已选 ${kinds.length - 2} 种` }, + }; +} + +/** + * Reader / FilterBar — Active=none | access | kind：预览顶部固定的筛选栏。 + * 左边「筛选」，中间每个属性一个下拉框（固定宽度），右边汇总和「清除」；打开的下拉菜单是勾选列表，带数量。 + */ +function filterBar(ctx, active) { + const facets = facetCounts(FILTER_FILE); + const preset = filterPresets()[active]; + let total = 0; + walkTree(CODE_TREE[FILTER_FILE], () => { total += 1; }); + const node = frame(ctx, `Active=${active}`, { component: true, dir: "HORIZONTAL", width: TREE_W, height: FILTER_BAR_H, gap: 8, align: "CENTER" }); + const label = append(node, frame(ctx, "Label", { dir: "HORIZONTAL", width: FILTER_LABEL_W, height: 20, gap: 4, align: "CENTER" })); + append(label, icon(ctx, "list-filter", COLORS.desc, 14)); + text(ctx, label, "Text", "筛选", { hug: true, size: 12, lineHeight: 16, color: COLORS.desc }); + for (const facet of facets.keys()) { + const on = facet === preset.facet; + const chip = append(node, frame(ctx, `Chip / ${facet}`, { dir: "HORIZONTAL", width: CHIP_W, height: 24, px: 8, gap: 4, radius: 4, + align: "CENTER", fill: COLORS.input, stroke: on ? COLORS.focus : COLORS.borderStrong })); + text(ctx, chip, "Text", on ? preset.chip : facet, { size: 12, lineHeight: 16, singleLine: true, color: on ? COLORS.fgStrong : COLORS.fg }); + append(chip, icon(ctx, "chevron-down", COLORS.desc, 12)); + } + append(node, frame(ctx, "Spacer", { width: 10, height: 1 }), true); + const hidden = filteredOut(FILTER_FILE, preset.allowed).length; + text(ctx, node, "Summary", active === "none" ? `共 ${total} 块` : `已隐藏 ${hidden} 块`, { hug: true, size: 12, lineHeight: 16, color: COLORS.desc }); + if (active !== "none") text(ctx, node, "Clear", "清除", { hug: true, size: 12, lineHeight: 16, color: COLORS.link }); + if (preset.facet) { + const menu = frame(ctx, "Menu", { width: 200, py: 4, radius: 6, fill: COLORS.widget, stroke: COLORS.widgetBorder }); + for (const [value, count] of facets.get(preset.facet)) { + const checked = preset.allowed[preset.facet].includes(value); + const row = filled(ctx, menu, `Option / ${value}`, { dir: "HORIZONTAL", px: 10, py: 4, gap: 8, align: "CENTER" }); + const box = append(row, frame(ctx, "Checkbox", { dir: "HORIZONTAL", width: 14, height: 14, radius: 3, align: "CENTER", justify: "CENTER", + fill: checked ? COLORS.focus : null, stroke: checked ? COLORS.focus : COLORS.dim })); + if (checked) append(box, icon(ctx, "check", "#ffffff", 12, { weight: 2.4 })); + text(ctx, row, "Value", value, { size: 12, lineHeight: 16, color: COLORS.fg }); + text(ctx, row, "Count", String(count), { hug: true, size: 12, lineHeight: 16, color: COLORS.dim }); + } + node.appendChild(menu); + menu.layoutPositioning = "ABSOLUTE"; + menu.x = FILTER_LABEL_W + 8 + [...facets.keys()].indexOf(preset.facet) * (CHIP_W + 8); + menu.y = FILTER_BAR_H - 4; + } + return node; +} + // ─── Components: 代码块 ────────────────────────────────────────────────────── /** 哪些种类的块画成属性表，以及各自的行。 */ @@ -938,8 +1040,8 @@ function codeBlock(ctx, kind, state) { } /** 一层代码块：左边一条竖线标出这一层，右边是这一层的块，块里嵌套的下一层紧跟在块下面。 */ -function blockLevel(ctx, parent, lib, fileKey, nodes, depth, placed) { - const level = filled(ctx, parent, `Level ${depth}`, { dir: "HORIZONTAL", gap: 8 }); +function blockLevel(ctx, parent, lib, fileKey, nodes, depth, placed, name = `Level ${depth}`) { + const level = filled(ctx, parent, name, { dir: "HORIZONTAL", gap: 8 }); const guide = append(level, frame(ctx, "Guide", { width: 12, align: "CENTER" })); guide.layoutSizingVertical = "FILL"; const line = ctx.api.createRectangle(); @@ -957,7 +1059,7 @@ function blockLevel(ctx, parent, lib, fileKey, nodes, depth, placed) { card.name = `Block / L${line}`; append(list, card, true); placed.push({ item, instance: card, depth }); - if (item.kids) blockLevel(ctx, list, lib, fileKey, item.kids, depth + 1, placed); + if (item.kids) blockLevel(ctx, list, lib, fileKey, item.kids, depth + 1, placed, `Children / L${line}`); continue; } const instance = lib.block.get(`${item.kind}/${state}`).node.createInstance(); @@ -974,7 +1076,7 @@ function blockLevel(ctx, parent, lib, fileKey, nodes, depth, placed) { useCjkFont(ctx, code); if (!item.kids) named(instance, "Fold icon").visible = false; placed.push({ item, instance, depth }); - if (item.kids) blockLevel(ctx, list, lib, fileKey, item.kids, depth + 1, placed); + if (item.kids) blockLevel(ctx, list, lib, fileKey, item.kids, depth + 1, placed, `Children / L${line}`); } return level; } @@ -1299,6 +1401,7 @@ function createComponents(ctx, page) { lib.toggle = make("Reader / ModeToggle", MODES, 2, (mode) => modeToggle(ctx, mode)); lib.block = make("Reader / CodeBlock", BLOCK_VARIANTS.map(([kind, state]) => `${kind}/${state}`), 2, (entry) => codeBlock(ctx, ...entry.split("/")), (item) => item.node); + lib.filterBar = make("Reader / FilterBar", ["none", "access", "kind"], 3, (active) => filterBar(ctx, active)); lib.row = make("Explorer / TreeRow", ROW_VARIANTS.map(([type, state]) => `${type}/${state}`), 2, (entry) => treeRow(ctx, ...entry.split("/"))); lib.quickInput = make("Window / QuickInput", ["typing"], 1, () => quickInput(ctx)); @@ -1433,12 +1536,32 @@ function windowBoard(ctx, page, lib, name, o) { const crumbs = lib.breadcrumb.get(o.file).createInstance(); crumbs.name = "Breadcrumb"; append(editor, crumbs, true); + let filter; + if (o.filter) { + const row = filled(ctx, editor, "Filter row", { align: "CENTER", px: VIEW_PAD, fill: COLORS.editor }); + row.strokes = paint(COLORS.border); + row.strokeBottomWeight = 1; + row.strokeTopWeight = row.strokeLeftWeight = row.strokeRightWeight = 0; + filter = lib.filterBar.get(o.filter).createInstance(); + filter.name = "Filter bar"; + append(row, filter); + // 打开的下拉菜单要盖住下面的代码块：先排的子项画在上面 + editor.itemReverseZIndex = true; + } const view = o.mode === "edit" ? codeView(ctx, editor, o.file) : previewView(ctx, editor, lib, o.file, editorWidth); + if (o.filter) { + const tree = view.children[0]; + for (const item of filteredOut(o.file, filterPresets()[o.filter].allowed)) { + const line = lineRange(item.at)[0]; + tree.findOne((node) => node.name === `Block / L${line}`).visible = false; + if (item.kids) tree.findOne((node) => node.name === `Children / L${line}`).visible = false; + } + } const status = lib.status.get(o.mode).createInstance(); if (o.mode === "edit") setText(status, "Item / TypeScript", FILES[o.file].lang === "python" ? "Python" : "TypeScript"); status.name = "Status bar"; append(screen, status, true); - const board = { screen, rows: side.rows, titleBar, view }; + const board = { screen, rows: side.rows, titleBar, view, filter }; if (o.tooltip) board.tooltip = tooltip(ctx, screen, o.tooltip, WORKSPACES[FILES[o.file].workspace].rows); if (o.quickInput) { const input = lib.quickInput.get("typing").createInstance(); @@ -1494,6 +1617,8 @@ async function build(api, stage = () => {}) { }; } const narrow = windowBoard(ctx, page, lib, "envLock.ts · 预览（编辑区变窄）", { file: "envLock", mode: "preview", width: WINDOW_NARROW }); + const filters = Object.fromEntries(Object.entries({ none: "默认", access: "按访问级别", kind: "按种类" }).map(([key, label]) => + [key, windowBoard(ctx, page, lib, `筛选 · ${label}`, { file: FILTER_FILE, mode: "preview", filter: key })])); const notes = { hover: windowBoard(ctx, page, lib, "文件注释 · 悬停出按钮", { file: "routes", mode: "preview", hover: NOTE_DRAFT.row, notes: { "routes.py": NOTES["routes.py"] }, @@ -1532,9 +1657,15 @@ async function build(api, stage = () => {}) { await connect(named(notes.hover.rows.get("hover"), "Action / 添加注释"), notes.typing.screen, "NAVIGATE"); await connect(named(notes.typing.quickInput, "Field"), notes.saved.screen, "NAVIGATE"); + // 筛选：默认栏里点「访问级别」「种类」打开各自的下拉菜单；「清除」回到不筛 + await connect(named(filters.none.filter, "Chip / 访问级别"), filters.access.screen, "NAVIGATE"); + await connect(named(filters.none.filter, "Chip / 种类"), filters.kind.screen, "NAVIGATE"); + await connect(named(filters.access.filter, "Clear"), filters.none.screen, "NAVIGATE"); + await connect(named(filters.kind.filter, "Clear"), filters.none.screen, "NAVIGATE"); + stage("排布画板"); const screens = [...Object.values(boards).flatMap((pair) => [pair.edit.screen, pair.preview.screen]), narrow.screen, - ...Object.values(notes).map((board) => board.screen)]; + ...Object.values(notes).map((board) => board.screen), ...Object.values(filters).map((board) => board.screen)]; let y = 0; for (const screen of screens) { screen.x = 0; @@ -1548,10 +1679,11 @@ async function build(api, stage = () => {}) { setY += set.height + 64; } const start = boards.envLock.preview.screen; - page.flowStartingPoints = [{ nodeId: start.id, name: "预览 envLock.ts" }, { nodeId: notes.hover.screen.id, name: "文件注释" }]; + page.flowStartingPoints = [{ nodeId: start.id, name: "预览 envLock.ts" }, { nodeId: notes.hover.screen.id, name: "文件注释" }, + { nodeId: filters.none.screen.id, name: "筛选" }]; page.selection = [start]; api.viewport.scrollAndZoomIntoView(page.selection); - return { page, components, boards, narrow, notes, screens }; + return { page, components, boards, narrow, notes, filters, screens }; } async function run(api) { @@ -1570,6 +1702,6 @@ async function run(api) { } if (typeof module !== "undefined") { - module.exports = { NOTES, NOTE_DRAFT, PLAIN_KINDS, parseImport, parseVariable, translateCode, build, run, nextPageName, PAGE_NAME, NAMESPACE, TREE, WORKSPACES, FILES, CODE_TREE, BLOCK_KINDS, SOURCES, blockCode, lineRange, walkTree, translateBlock, highlightCode, parseSignature, typeSegments }; + module.exports = { facetCounts, filteredOut, filterPresets, blockAttributes, FILTER_FILE, NOTES, NOTE_DRAFT, PLAIN_KINDS, parseImport, parseVariable, translateCode, build, run, nextPageName, PAGE_NAME, NAMESPACE, TREE, WORKSPACES, FILES, CODE_TREE, BLOCK_KINDS, SOURCES, blockCode, lineRange, walkTree, translateBlock, highlightCode, parseSignature, typeSegments }; } if (typeof figma !== "undefined") void run(figma); diff --git a/docs/prototype/code-reader/figma-plugin/test.js b/docs/prototype/code-reader/figma-plugin/test.js index cd97cca..842489b 100644 --- a/docs/prototype/code-reader/figma-plugin/test.js +++ b/docs/prototype/code-reader/figma-plugin/test.js @@ -2,7 +2,7 @@ const assert = require("node:assert/strict"); const { test } = require("node:test"); const fs = require("node:fs"); const path = require("node:path"); -const { NOTES, NOTE_DRAFT, PLAIN_KINDS, build, run, nextPageName, PAGE_NAME, NAMESPACE, WORKSPACES, FILES, CODE_TREE, BLOCK_KINDS, SOURCES, blockCode, lineRange, walkTree, translateBlock, highlightCode, parseSignature, parseImport, parseVariable, typeSegments } = require("./code.js"); +const { facetCounts, filteredOut, filterPresets, FILTER_FILE, NOTES, NOTE_DRAFT, PLAIN_KINDS, build, run, nextPageName, PAGE_NAME, NAMESPACE, WORKSPACES, FILES, CODE_TREE, BLOCK_KINDS, SOURCES, blockCode, lineRange, walkTree, translateBlock, highlightCode, parseSignature, parseImport, parseVariable, typeSegments } = require("./code.js"); const { fakeFigma } = require("../../figma-lab/fake-figma"); function action(node) { return node.reactions[0].actions[0]; } @@ -20,12 +20,14 @@ function countBlocks(nodes) { // 属性表：8 个函数、14 条导入、2 个常量、12 个变量，共 36 块各 2 条 = 72 // 窗口：3 个文件 × 编辑 / 预览各 1 个切换 = 6；superwork 的 4 个窗口里侧栏点另一个示例文件 = 4 // （luffy 只有一个示例文件，侧栏没有可跳的） -// 文件注释：悬停出的「添加注释」→ 填写，输入框回车 → 已保存 = 2；合计 102 -const EXPECTED_LINKS = 102; +// 文件注释：悬停出的「添加注释」→ 填写，输入框回车 → 已保存 = 2 +// 筛选：默认栏的「访问级别」「种类」各打开一个下拉菜单，两张筛过的画板「清除」回默认 = 4；合计 106 +const EXPECTED_LINKS = 106; const EXPECTED_SETS = [ ["Reader / ModeToggle", 2], ["Reader / CodeBlock", 18], + ["Reader / FilterBar", 3], ["Explorer / TreeRow", 8], ["Window / QuickInput", 1], ["Explorer / Header", 1], @@ -335,6 +337,34 @@ test("file notes: hover shows the action, the quick input takes the note, the tr assert.equal(named(notes.saved.screen, "Line 2").characters, NOTES["order_bonus.py"]); }); +test("filter bar lists the facets of the file and hides filtered blocks with their children", async () => { + const facets = facetCounts(FILTER_FILE); + assert.deepEqual([...facets.keys()], ["种类", "访问级别", "异步", "仅类型"]); + assert.deepEqual(Object.fromEntries(facets.get("访问级别")), { 私有: 3, 公共: 3 }); + // 块没有某个属性就不受它影响：按访问级别筛时条件、返回这些块照常显示 + const access = filteredOut(FILTER_FILE, filterPresets().access.allowed); + assert.deepEqual(access.map((item) => item.kind), ["const", "const", "function"]); + + const api = fakeFigma(); + const { filters } = await build(api); + assert.equal(named(filters.none.filter, "Summary").characters, "共 33 块"); + assert.equal(named(filters.access.filter, "Summary").characters, "已隐藏 3 块"); + assert.equal(named(filters.kind.filter, "Summary").characters, "已隐藏 6 块"); + assert.equal(named(filters.access.filter, "Menu").layoutPositioning, "ABSOLUTE"); + assert.equal(named(named(filters.access.filter, "Option / 公共"), "Checkbox").children.length, 1, "公共 is checked"); + assert.equal(named(named(filters.access.filter, "Option / 私有"), "Checkbox").children.length, 0, "私有 is unchecked"); + + const shown = (board, line) => board.view.findOne((node) => node.name === `Block / L${line}`).visible; + assert.equal(shown(filters.none, 38), true); + assert.equal(shown(filters.access, 38), false); + assert.equal(filters.access.view.findOne((node) => node.name === "Children / L38").visible, false, "children hide with their block"); + assert.equal(shown(filters.access, 23), true); + assert.equal(shown(filters.kind, 12), false); + + assert.equal(action(named(filters.none.filter, "Chip / 访问级别")).destinationId, filters.access.screen.id); + assert.equal(action(named(filters.kind.filter, "Clear")).destinationId, filters.none.screen.id); +}); + test("boards and sets sit on the page without overlapping", async () => { const api = fakeFigma(); const result = await build(api); @@ -357,8 +387,8 @@ test("the plugin stays small enough for Figma to build quickly", async () => { if (node.type !== "INSTANCE") node.children.forEach(walk); }; result.page.children.forEach(walk); - // 卡死那次是 5000 多个图层；现在 3 个示例文件、36 张属性表约 2200 个 - assert.ok(owned < 2500, `page owns ${owned} layers outside instances`); + // 卡死那次是 5000 多个图层，而且每次读宽度都逼 Figma 重排；现在 16 张画板、36 张属性表约 2600 个 + assert.ok(owned < 3000, `page owns ${owned} layers outside instances`); }); test("running twice numbers the new page and keeps the old one intact", async () => {