rKittenBlink

Codemao Blink (Blockly fork) 的 TypeScript 实现
面向长期维护的严格类型化可视化编程引擎，提供完整的积木编辑、渲染与序列化能力。

rKittenBlink 提供与 Blink 兼容的对外 API，以 ESM + Decorator 架构实现，支持 strict: true 类型检查，开箱即用的 playground 与可直接 tsc 构建的工程化能力。

---

特性

• 完整的积木能力：涵盖块定义、渲染管线、工具箱/拖拽、事件体系、字段控制器、主题与国际化。
• 严格 TypeScript：strict: true、experimentalDecorators + emitDecoratorMetadata；全库 tsc --noEmit 零错误，零 @ts-nocheck / @ts-ignore。
• 现代工程化：ES2020 / ESM / Inversify 6 依赖注入；tsc 直出 dist/，vite 驱动 playground。
• 可维护架构：
  • src/di/ 统一容器与符号（symbols.ts / container.ts / bindings/），服务装配集中管理。
  • src/rendering/ / src/toolbox/ / src/events/ / src/fields/ 按领域分层，渲染与数据分离。
  • src/vendor/ 仅封装第三方依赖（gl-matrix / animejs / hammerjs / lodash.clonedeep / resize-observer-polyfill / inversify-inject-decorators / tslib）。

---

目录结构

rKittenBlink/
├── src/
│   ├── index.ts                 # 对外入口（Blockly / blinkNamespace / domUtils / vec2）
│   ├── blink-entry.ts           # DI 启动（bind + 欢迎语 + window.Blockly）
│   ├── blink-namespace.ts       # BlinkNamespace 命名空间实体（常量聚合 + icon-paths）
│   ├── core/                    # 17 文件：Blink / inject / workspace / tooltip / options / registry 等
│   ├── di/                      # DI 容器（Container + BINDING + 装配）
│   │   ├── symbols.ts
│   │   ├── container.ts
│   │   ├── bind-di-modules.ts   # 聚合装配
│   │   └── bindings/            # 按领域拆分的绑定（core / events / fields / rendering / toolbox / helpers）
│   ├── constants/               # 20 文件：枚举/常量/类型守卫（index.ts 为聚合 barrel，含 closure-namespace）
│   ├── blocks/                  # 13+9 文件：init-*（9 个）+ procedures（9 个：manager / generator / xml-utils 等）
│   ├── rendering/               # 14 文件：block-svg / workspace-svg / theme / block-group / workspace-comment / css / icons 等
│   ├── toolbox/                 # 9 文件：toolbox / vertical-flyout / connection-db / dragged-connection-manager / block-dragger 等
│   ├── events/                  # 23 文件：gesture / scrollbar-pair / transition-end-wrapper / all-events / base-event 等
│   ├── fields/                  # 9 文件：angle-controller / color-controller / fontsize / menu-items / widget-div 等
│   ├── msg/                     # 4 文件：en / zh-hant / msg / msg-zh-hans
│   ├── utils/                   # 30 文件：xml / json / blink-utils / field-dropdown / target-connection / color-utils 等
│   ├── meta/package-meta.ts     # 版本元数据
│   ├── types/                   # 3 文件：block-views / dom-augmentations / vendor-modules
│   └── vendor/                  # 8 文件：gl-matrix / animejs / hammerjs / lodash.clonedeep / resize-observer-polyfill / inversify / inversify-inject-decorators / tslib
├── playground/                  # 5 文件：index.html / main.js / toolbox.js / style.css / favicon.ico
├── docs/
│   ├── API.md                   # 对外 API 详解
│   ├── ARCHITECTURE.md          # 架构与模块原理
│   ├── INTEGRATION.md           # 接入指南
│   ├── DI.md                    # 依赖注入
│   └── BLOCKS.md                # 块定义
├── package.json
├── tsconfig.json
├── tsconfig.playground.json
├── .eslintrc.cjs
├── .prettierrc
└── README.md

---

快速开始

# 安装依赖
npm install

# 类型检查
npm run typecheck

# 构建（产出 dist/）
npm run build

# 本地 playground（vite）
npm run playground
# 浏览器打开 http://localhost:5173

离线环境可直接 npx tsc --noEmit 校验。

---

基本使用

ESM 导入

import { Blockly, blinkNamespace, domUtils, vec2, version } from "rkitten-blink";
import "rkitten-blink/dist/index.js"; // 或直接从 src 入口（vite 场景）

// 创建工作区
const workspace = Blockly.inject("blocklyDiv", {
  toolbox: document.getElementById("toolbox"),
  zoom: { controls: true, wheel: true },
  trashcan: true,
});

// 序列化 / 反序列化
import * as workspaceSvg from "./rendering/workspace-svg.js"; // 内部示例
const xmlText = Blockly.Xml.workspaceToDom(workspace);
const dom = Blockly.Xml.textToDom(xmlText);
Blockly.Xml.domToWorkspace(dom, workspace);

全局接入（UMD 兼容）

<script type="module">
  import { Blockly } from "./dist/index.js";
  // Blockly 已自动挂载到 window.Blockly / window.BlinkAPI（见 src/index.ts）
</script>

块注册

import { initBasicBlocks, initExtensions } from "rkitten-blink";

initBasicBlocks(workspace);
initExtensions(workspace);

详见 docs/INTEGRATION.md 与 docs/API.md。

---

对外 API 一览

导出	说明
Blockly	核心命名空间，聚合 inject / Xml / Json / Events / Block / WorkspaceSvg 等全部运行时
blinkNamespace	常量与枚举聚合（BlockVisibility / InputType / ConnectionType 等）
domUtils	DOM / Closure 风格工具门面
vec2	gl-matrix vec2 导出
initBasicBlocks / init_basic_blocks	注册基础块（兼容 snake_case）
initTellBlocks / initExtensions 等	按领域注册块
version	版本元数据（meta/package-meta）
window.Blockly / window.BlinkAPI	浏览器全局挂载，含 require("KV70") 兼容

完整接口与类型见 docs/API.md。

---

技术栈

• TypeScript 5.4 / ES2020 / ESM
• Inversify 6 + inversify-inject-decorators + reflect-metadata
• gl-matrix 2.x / animejs 3.x / hammerjs 2.x / lodash.clonedeep

---

许可

UNLICENSED — 仅供内部研究与演示，原始 Blink 版权归 Codemao 所有。