毛萨伊科@fungi.computer/maosaico(中文(简体) )

Maosaico在量度容器内安排反相板. 它支持浮动 框架和可选的平板,同时保留窗格内容、样式、控件和 DOM关注主机.

安装或设置

npm install @fungi.computer/maosaico react react-dom

Maosaico需要React 17 或 更新为同伴依赖.

软件包导出 MaosaicoRoot, (中文(简体) ), useMaosaicoItem, (中文(简体) ), useMaosaicoLayout, (中文(简体) ), MaosaicoLayers, (中文(简体) ), useLayer,以及 usePointerDrag 从 @fungi.computer/maosaico。 。 。 .

usePointerDrag 提供俘获的DOM道具 来电手势. 内容 move 回调收到增量像素三角洲; 取消并卸载 释放相同的捕获。 可选的第三个 AbortSignal 让呼叫者取消 一种姿态; 逃生政策留在呼叫者手中。 格罗夫用它与盖子 ResizeHandle 而不引入竖起的根 一个侧边栏宽度.

快开始

这个示例记录了窗帘,并要求Maosaico将其打入 提供的界限 :

import { MaosaicoRoot, useMaosaicoItem } from "@fungi.computer/maosaico";

function Pane({ id }: { id: string }) {
  const pane = useMaosaicoItem({
    id,
    frame: { x: 0, y: 0, width: 320, height: 240 },
    minima: { width: 180, height: 120 },
  });

  return (
    <section
      hidden={!pane.visible}
      {...pane.props}
      style={{
        position: "absolute",
        left: pane.frame.x,
        top: pane.frame.y,
        width: pane.frame.width,
        height: pane.frame.height,
      }}
    >
      Pane content stays mounted here.
    </section>
  );
}

function Workspace() {
  return (
    <div style={{ position: "relative", width: 1000, height: 600 }}>
      <MaosaicoRoot bounds={{ width: 1000, height: 600 }} tiling={{ gap: 8 }}>
        <Pane id="chat" />
        <Pane id="files" />
      </MaosaicoRoot>
    </div>
  );
}

这个草图是说明性的;布局测试练习了公共反应边界 和窗格注册 test/tiling.test.tsx。 。 。 .

核心概念

MaosaicoRoot 拥有一个根的布局状态。 通过当前容器大小 作为 bounds没有 tiling,窗帘使用浮动相框。 与 tiling选择 layout: "main-left" | "main-top" | "columns" | "rows" | "grid"。 。 。 . main-left 实值 默认值:第一个面板是旁边的主面板和相伴堆放. main-top 将主窗帘置于同伴之上 喜欢的 mainSize 实值 主要宽度或高度,分别被夹到平面上并可用 空格; 这些布局会显示一个可拖动的分隔符 .

columns, (中文(简体) ), rows,以及 grid 使用等单元格并忽略 mainSize他们已经 无主分法. 网格从平方开始接近平方,并适应 容器容量。 平面布局保留了主牌和组外溢 最后的细胞,显示该组最近的焦点面板。 微型账户 对于一个组的每个成员,所以更改其活动标签不移动单元格. 如果一个最小值不能匹配, 一个全容器标签组会保存一个窗帘 可读取. 呼叫者从 tabGroups; 隐藏的窗格保持挂载.

useMaosaicoItem 登记身份、起始框架和最小尺寸。 这个 返回绑定提供了当前框架、能见度、活动状态、拖动 道具,还有 focus, (中文(简体) ), snap,以及 restore 行动。 保持按键内容挂载 当窗格被隐藏时; 应用 hidden={!visible} 因此隐藏内容会留下输入 和无障碍导航。 关闭窗帘意味着把它从挂起 列表中选择一个选项.

壳层

MaosaicoLayers 使五个与世隔绝的同父异母的树根被覆盖: chrome, (中文(简体) ), popover, (中文(简体) ), dialog, (中文(简体) ), toast, (中文(简体) ), tooltip把它挂在外壳的位置上 容器,外侧被剪的相片。 主机加载了 Stipe 的样式表; Maosaico 消耗其分层符号。 重叠根为指向透明; 设置 pointerEvents: "auto" 内容.

MaosaicoRegion 供应 desktop 财务报告和审定财务报表 windows 层在主机中 定位工作区。 它转发了普通的地盘属性和一个参考者,保留 主机的定位样式,并拥有孤立和地层符号. 内部 MaosaicoLayers,它也登记该地区 useLayer。窗口区域 当对话框根包含被绘出的内容时为惰性; 关闭对话框 释放它而不重载窗口或桌面内容.

useLayer("popover") 返回最近的提供者的门户容器。 没错 null 直到根挂起, 在服务器渲染时。 在提供者之外 它会返回 document.body,所以独立覆盖保留一个普通的门户 集装箱。 将容器传递给维护的上盖原始, 或使用回放 DOM的电话 createPortal选择一层不执行定位, 轻而易举,焦点陷阱 或iframe 隔离.

将窗口内容放入 <MaosaicoRegion layer="windows"> 合并 绑定 stackingStyle 进入每个窗口的样式。 它的等级很密集,开始 ,并遵循布局所有者的重点顺序. useMaosaicoLayout().stackingStyle 直接排列分隔符和坐标装饰符 在同一区域内的窗口之上。 随意地,许多军衔都留在下方 chrome 因为窗口根拥有其堆叠上下文。 每个外壳 根和窗口顺序是独立的; 门户内容在 其他地层根会改变.

useMaosaicoLayout 提供焦点和交换命令,缩放和还原,平板 顺序、分页组、分页交互和待补信息。 通过 a containerRef 相对于定位工作空间的边缘突起,例如 工具栏下方的工作台.

API 参考

见生成 API 参考 与公众 出口和类型. 国家等执行细节 藏品仍为私人收藏.

实例和检查

这个 共享工作台中的布局/ 自动铺设 显示平板、分页、分页调整大小、浮动面板、缩放、焦点和 交换 从寄存器根运行工作台

pnpm workbench:serve

重点测试涵盖布局、平板、指针合同以及公众 边框 :

pnpm --filter @fungi.computer/maosaico test

浏览器验证还通过公开绑定、检查挂载了33个窗口 铬在升起窗口之前和之后都得到真正的指针点击 消耗斯提普的实际CSS,而不是复制其数字.

浏览器指针证明与 pnpm --filter @fungi.computer/maosaico browser:contract;没有证明 装有Tourtois App.

限制和错误

Maosaico 存储布局状态只用于挂起根的寿命. 没错 不坚持帧、提供 App 身份、 自己的键盘政策或移动/聚焦 打电话者的内容。 主机提供界限、迷你马、控件、主题和 动画. 调整手势和平板模式不会提供快活目标.

边框、小型和大小偏好是布局测量,必须是有限度的 和无负的。 Maosaico 适应 MaoMaoLabs 的核心手势 和快速的行为; 见 LICENSE 因为它的麻省理工学院许可条件和归属.

贡献和许可证

从寄存器根构建它 pnpm --filter @fungi.computer/maosaico buildMaosaico获得麻省理工学院许可;见 LICENSE。 。 。 .

MaosaicoLayers onDismiss 报告主机窗口模糊并焦点输入 窗口区域。 用帽子来作曲 OverlayRoot subscribeDismiss 退休人员 瞬间弹出和工具提示在一起; 屏蔽对话框和土司保持直播 .

受控便当网格

arrangeBento 调用器拥有的再流动 { id, col, row, w, h } 安置到1个, 2或4个栏. Spans 夹住当前网格; 相撞将占用者推倒 和纵向差距 ID在网格内是独一无二的. applyBentoOps 接受移动和调整意图而不改变输入. bentoFrames 将所接受的单元格映射到容器-相干像素框架。 每个 已接受的移动或调整所有牌的收缩大小为 arrangeBento 固定点; 向下移动通过相交占地. 单元格及其范围必须适合 有限度的安全整数; 重复的ID抛出. 没有发动机产品配额 瓦片计数或大小.

useMaosaicoBento 使用这些位置,测量 width, (中文(简体) ), columns, (中文(简体) ), rowHeight, (中文(简体) ), gap 还有一个 onChange(ops) 调用。 可选 rowHeights 为单个行提供测量到的像素高度; 缺少行使用 rowHeight。框架和指针按键可以共享这些行边界。 变化 测量可以取消飞行中的手势;相等的新鲜阵列可以保存。 这些 测量决不改变整数位置。 内容 previewId 名称 活的手势瓷砖。 内容 frames 包括直播指针预览。 展开 bind(id, "move") 或者说 bind(id, "resize") 插入可聚焦控件 touchAction: "none"。箭头键提议一个单元格; 逃出,丢失的捕获, 停用、卸载和主机几何变化取消指针手势。 A 类 完成投放 onChange; 主机接受它们 与 applyBentoOps 并供应新的安置.

主机选择断点并坚持自己的布局. 返回不会 重写存储, 便当不会改变 MaosaicoRoot 窗口行为。 这个 控制便当故事 编曲 Caps 科卡和按钮。 这个 浏览器合同 练习真正的抓取点移动、调整大小、取消和键盘输入.

本地主机

@fungi.computer/maosaico/headless 出口 createMaosaicoState 财务报告和审定财务报表 arrangeTiles 没有反应渲染器。 土生土长的TUI外壳也一样 在终端单元格中聚焦、分组、分出和缩放状态。 浏览器便当和 窗口几何保持其现有的切入点和规则.

包装的消费者准备状态

运行 pnpm run build, (中文(简体) ), pnpm run pack 财务报告和审定财务报表 pnpm run stranger 本包中. 保存的陌生人证明只安装了包裹 tarball 到新鲜npm 消费者,检查准确的运出文件,运行公共运行时间固定和 编译每个 JavaScript 入口, 严格节点Next 且没有库检查 跳过。 此资格不发布 npm 发布或推动仓库 分页.