# @edv4h/usketch-plugin-container 中文文档

规范地址：https://npmcn.com/package/%40edv4h/usketch-plugin-container/

版本：0\.3\.23
npm 元数据更新时间：2026-11-10T02:56:37.324Z
中文译文更新时间：2026-11-13T07:44:38.016Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40edv4h/usketch-plugin-container
原文对照：https://npmcn.com/package/%40edv4h/usketch-plugin-container/?lang=original
项目主页：https://github.com/EdV4H/usketch#readme
源码仓库：https://github.com/EdV4H/usketch

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：38.4 kB，27 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2026-07-09T11:00:45.711Z
- 最新版本发布：2026-11-10T02:56:36.950Z
- 近 30 天下载量：2423（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 24 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @edv4h/usketch-plugin-container
```

也可以使用：`pnpm add @edv4h/usketch-plugin-container`、`yarn add @edv4h/usketch-plugin-container`、`bun add @edv4h/usketch-plugin-container`

## README

# @edv4h/usketch-plugin-容器

运行时间 **容器形状** - 形状: `ShapeDefinition` 声明a `container` 对象。 它为基于母体的容器机械工提供了一种 形状定义本身不能表达:

-   **自动随附** - 一个形状完全掉入一个装设的容器 `container.autoAttach` 获得它 `parentId` 设置( 移动时清除).
-   **安排** - 一个集装箱的 `container.layout` 将儿童安置在 附加/调试、调整大小和(非干)更新.
-   **同步排除** - 集装箱被拖走时,其子女(随行) 他们被排斥在断裂之外 以免他们焦躁不安 要求数 `@edv4h/usketch-plugin-snap`; 如果未安装 snap, 则禁用 .

选择分辨率 (“ 单击一个孩子, 选择孩子 ”) 并随行 ("擦擦父母,孩子跟着") **本土** 以 `tool-helpers`编号 :`tool-select` 从同 `container` 旗帜 - 仅此插件 上面添加反应片段.

## 使用量

登记册 **之后** 抓图插件是这样的 `snap:configure` 听者准备好了:

```ts
import { createContainerPlugin } from "@edv4h/usketch-plugin-container";

const plugins = [
  // ...
  createSnapPlugin(),
  createContainerPlugin(),
];
```

以形状定义宣布容器(所有字段都接受) `boolean | (data) => boolean` 上游,所以一个单一类型可以改变每个 实例 :

```ts
import { stackLayout } from "@edv4h/usketch-plugin-container";

ctx.shapes.register("wireframe", {
  // ...render/hitTest/resize/createDefault...
  container: {
    enabled: (s) => s.meta?.component === "card", // only cards are containers
    selectableChildren: true,                     // children selectable individually
    autoAttach: true,                             // drop-inside attaches as child
    layout: stackLayout({ padding: 16, gap: 8 }), // arrange children vertically
  },
});
```

儿童是普通的外形,通过当地人参考容器 `parentId`。 。 。 .

## 可附加的子形状( A)`createAttachablePlugin`(中文(简体) )

这个 **儿童方对应方**而 `container` 选择一个 _父目录_ 到持有 孩子们, `attachable` 选择形状为 _儿童_ 紧紧跟随 **任意** 形状被扔在上——甚至一个非容器(硬纸条,卡片)。 用这个 用于邮票、徽章、反应针或手写注释部件。 因为 在普通选择工具( 无指针劫持) 上运行孩子 /调整大小/旋转.

这是一个 **单独的插件** 从 `createContainerPlugin` (登记人或 两者都一样),合用此地,因为它驱动相同 `parentId` 封闭 子系统 :

```ts
import { createAttachablePlugin } from "@edv4h/usketch-plugin-container";

const plugins = [
  // ...
  createAttachablePlugin(),
];

ctx.shapes.register("badge", {
  // ...render/hitTest/resize/createDefault...
  attachable: {
    toAny: (target) => target.type !== "connector", // eligible targets
    follow: true,                                    // follow the parent's move
    hitTest: "center",                               // "drop it on and it sticks"
  },
});
```

-   **自动随附** (这个插件):滴出时, `parentId` 设置到最前面 徽章下接受形状(每 `hitTest` 编号 : `toAny`页:1 没有什么.
-   **移动跟随** 实值 **本地语言** (单位:千美元)`tool-helpers`编号 :`tool-select` 读取 `attachable.follow`)——即使没有这个插件,它也是有效的. 见 `ShapeDefinition.attachable` 内 `@edv4h/usketch-shared` 为全API.

## 注/限制

-   **z- 顺序/ 筑巢**: 儿童被定位,但没有z命令 插件——视网膜依赖 `zIndex`。 。 。 .
-   **单身 `excludeTargets`**数字 : `snap:configure` 持有一个 `excludeTargets` 上游; 如果设置了多个插件, 则最后写入获胜 。 只有这个插件是 预期会.
-   **旋转**: 儿童随行/安排移动并调整规模;父母轮换 未传播给儿童.

## 常见问题

### 如何安装 @edv4h/usketch-plugin-container？

在项目目录运行 npm install @edv4h/usketch-plugin-container，或使用 pnpm add / yarn add / bun add。

### @edv4h/usketch-plugin-container 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @edv4h/usketch-plugin-container 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @edv4h/usketch-plugin-container 可以商用吗？

@edv4h/usketch-plugin-container 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @edv4h/usketch-plugin-container 的下载量有多少？

根据 npm 官方下载统计，@edv4h/usketch-plugin-container 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,423 次，日均约 81 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @edv4h/usketch-plugin-container 还在维护吗？

最新版本 0\.3\.23 发布于 2026/11/10（3 天前）；至今共发布 24 个版本，其中过去 12 个月发布了 24 个；首次发布于 2026/07/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。