Перекрестье
Подсветка строки и столбца активной ячейки: выключена по умолчанию и включается свойством.
В рамке выше работает тот самый проект, чей код лежит ниже, — собранный, но не переписанный: те же файлы, только пропущенные через сборку. Считает в нём не ядро, а дублёр транспорта, поэтому числа в ячейках ничего не значат: смотреть нужно на код.
Страница, которую открывает браузер.
<!doctype html><!-- Перекрестье — НАСТОЯЩИЙ МАЛЕНЬКИЙ ПРОЕКТ.
Не «страница витрины», а тот проект, который встраивающий копирует к себе целиком. Галерея примеров ЗАПУСКАЕТ эти файлы и ПОКАЗЫВАЕТ их же.--><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Перекрестье — @f1</title> </head> <body> <div data-example="crosshair" class="flex h-screen w-screen flex-col bg-base-100 text-base-content"> <header class="flex flex-wrap items-center gap-3 border-b border-base-300 px-4 py-2"> <div class="me-auto"> <div class="text-sm font-semibold">Перекрестье</div> <div class="text-xs opacity-70"> Выберите ячейку — её строка и столбец подсвечиваются на всю ширину и высоту листа. В Excel этого нет: возможность объявлена свойством виджета и выключена по умолчанию. </div> </div> <label class="label cursor-pointer gap-2" data-crosshair-toggle> <input id="crosshair" type="checkbox" class="checkbox checkbox-sm" checked /> <span class="label-text text-xs">crosshair</span> </label> </header> <div id="app" class="flex min-h-0 flex-1 flex-col"></div> </div>
<script type="module" src="./src/main.ts"></script> </body></html>Точка входа: здесь лист создаётся и сюда же приходят события.
import { createSheetsCore, type SheetsCore } from "@f1/preset-sheets-core";import { transport } from "./book.js";import { hostAsks } from "./host.js";import "./styles.css";
/** * ПЕРЕКРЕСТЬЕ — ВОЗМОЖНОСТЬ ВСТРАИВАЮЩЕГО, А НЕ ПОВЕДЕНИЕ ПРОДУКТА. * * В Excel такой подсветки нет вовсе, поэтому эталона у вида не существует и * включать её всем нельзя: это было бы изменением поведения ради чужой * возможности. Свойство `crosshair` — весь способ её получить. * * Галочка здесь — часть доказательства, а не удобство: сняли её, и лист * рисуется ровно так же, как у того, кому перекрестье не нужно. Лист * ПЕРЕСОБИРАЕТСЯ, потому что свойство читается при сборке, — и это видно в * коде, а не спрятано за словом «переключатель». */const { locale } = hostAsks();const mount = document.getElementById("app")!;const toggle = document.getElementById("crosshair") as HTMLInputElement;
let core: SheetsCore | null = null;
function build(): void { core?.destroy(); core = createSheetsCore({ mount, transport, locale, crosshair: toggle.checked });}
toggle.addEventListener("change", build);build();
import.meta.hot?.dispose(() => core?.destroy());Книга примера: данные, с которыми лист открывается.
import { createMockTransport } from "@f1/contract";
/** * КНИГА-ЗАГЛУШКА — ВМЕСТО НАСТОЯЩЕГО ЯДРА. * * Транспорт контракта — единственное место, где лист разговаривает с ядром * (инвариант №1: считает ядро, оболочка только показывает). В продукте здесь * стоит `wasm` или мост хоста, и меняется РОВНО эта строка — всё остальное в * проекте остаётся как есть. */export const transport = createMockTransport({ cellAt: (row, col) => (col === 0 ? `строка ${row + 1}` : `${(row + 1) * (col + 1)}`),});Сторона хозяина страницы: что приложение отвечает листу и что от него получает.
import { applyLocaleAttributes, resolveLocale, setLocale, type Locale } from "@f1/i18n";
/** * ЧТО ХОЗЯИН СТРАНИЦЫ ДАЁТ ЛИСТУ — тема и язык. * * У встраивающего это уже есть своё: тему он знает из настроек, язык — из * профиля пользователя. Здесь и то и другое читается из адреса * (`?theme=dark&locale=ar`) ровно затем, чтобы на любое состояние можно было * дать ссылку и чтобы его проверял обход: настройка, доступная только щелчком, * недоступна ни ссылке, ни автоматической проверке. * * ПРИЗНАКИ СТАВЯТСЯ НА КОРЕНЬ ДОКУМЕНТА — потому что это делает ХОЗЯИН, а не * лист. Лист читает тему оттуда, где стоит (`:host-context`), а язык получает * СВОЙСТВОМ сборки: два листа на одной странице вправе говорить на разном. * * НАПРАВЛЕНИЕ ПИСЬМА — ИНТЕРФЕЙСА, А НЕ ДОКУМЕНТА. `dir="rtl"` зеркалит хром * страницы; «Лист справа налево» из Excel — свойство КНИГИ, и сетка от * арабского языка интерфейса не переворачивается. Это не пропуск, а решение * (`locale.ts`). */export function hostAsks(): { readonly theme: "light" | "dark"; readonly locale: Locale } { const params = new URLSearchParams(location.search); const theme = params.get("theme") === "dark" ? "dark" : "light"; const locale = resolveLocale(params.get("locale") ?? undefined, "ru");
document.documentElement.setAttribute("data-theme", theme); /* Язык — один на процесс: словарь модульный, и ставит его хозяин страницы. */ setLocale(locale); applyLocaleAttributes(document.documentElement, locale);
return { theme, locale };}Оформление страницы вокруг листа.
/* ЛИСТ СТИЛЕЙ НАБОРА КОМПОНЕНТОВ — ЕДИНСТВЕННАЯ СТРОКА, КОТОРУЮ НЕЛЬЗЯ ЗАБЫТЬ. Собственное оформление лист приносит в теневые корни сам, но утилиты раскладки, которыми он держит свои органы, компилируются ЭТИМ листом. Без него страница не просто выглядит иначе — вкладка ЗАВИСАЕТ (бесконечный цикл замера у сетки без размеров). У потребителя вне репозитория это `@fastoffices/formula-kit` из его node_modules. */@import "@fastoffices/formula-kit"; /* см. примечание выше */html,body { height: 100%; margin: 0;}Из каких пакетов собран пример.
{ "name": "f1-example-crosshair", "private": true, "type": "module", "description": "Подсветка строки и столбца активной ячейки: выключена по умолчанию, включается свойством.", "scripts": { "dev": "vite", "build": "vite build" }, "dependencies": { "@f1/preset-sheets-core": "*", "@f1/contract": "*", "@f1/i18n": "*" }, "devDependencies": { "vite": "^7.0.0" }}- Остальные примеры — Примеры F1.
- Правила, на которые ссылается код, — пять правил.
- Из чего собирается лист — Архитектура.
- Что можно вызвать сегодня — справочник Compute Contract.