@edv4h/usketch-plugin-容器

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

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

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

使用量

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

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

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

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

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 封闭 子系统 :

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 上游; 如果设置了多个插件, 则最后写入获胜 。 只有这个插件是 预期会.
• 旋转: 儿童随行/安排移动并调整规模;父母轮换 未传播给儿童.