UI组件前端【免费下载链接】react-diagramsa super simple, no-nonsense diagramming library written in react that just works项目地址https://gitcode.com/gh_mirrors/re/react-diagrams点击查看免费下载导读projectstorm/geometry是 react-diagrams 项目项目总览内部独立发布的 TypeScript 几何基础库为节点、连线、画布提供Point、Matrix、Polygon、Rectangle、BezierCurve与Bounds等核心原语被 react-diagrams-core 等上层包直接依赖例如 DiagramEngine.ts 中即引入了boundingBoxFromPolygons, Point, Rectangle。本文以 packages/geometry/CHANGELOG.md 为主体逐条解析 7.0.x 系列版本的关键变更并结合 packages/geometry/src 下的源码深入讲解这些变更背后的实现原理。读完本文你将理解该库从 7.0.0 大版本重构到 7.0.3 维护阶段的完整演进脉络掌握Bounds边界类型、独立构造方法、ES6/UMD 双构建等设计的实际用法并能在自己的项目中正确使用和迁移这套几何 API。一、版本总览从 7.0.0 大重构到 7.0.3 维护期根据 CHANGELOG.md该包目前的发布版本为 7.0.3与 package.json 中的version: 7.0.3一致。版本演进可分为两个阶段7.0.0Major Changes一次彻底的内部工程化与 API 重构涉及包管理切换、构建产物变更、依赖策略调整以及Polygon/Rectangle静态方法的破坏性迁移7.0.1 ~ 7.0.3Patch Changes修复 sourcemap 与类型导出问题升级依赖并将 lodash 导入收敛为按需单函数引入。值得注意的是该库的 changelog 由 Changesets 工具维护7.0.0 起启用Patch Changes与Major Changes的分组正是 Changesets 的发布分类约定7.0.2 之前的版本编号习惯如66c687a对应每个合并的变更集提交。二、7.0.0一次从内到外的工程化大重构2.1 包管理从 Lerna/Yarn 迁移到 Pnpm Changesets7.0.0 是一系列[internal]标记的变更包管理从 yarn 切换为Pnpm并采用 workspace protocol 语法Changesets 在发布时会烘焙出正确的版本号发布流程从 Lerna 迁移到Changesets每次发布由 Changesets 自动开启一个 release PR可将多个变更打包成一次发布并在合并 release PR 后自动触发 Storybook 部署根目录package.json中被移除了大量冗余配置build与clean命令被清理移除了 E2E 测试理由是维护成本高、投入产出比ROI太低。这些变更可以在仓库根目录得到印证pnpm-workspace.yaml 与 pnpm-lock.yaml 的存在表明当前仓库确实以 Pnpm workspace 方式组织而 packages/geometry/package.json 中保留了精简的cleanrimraf ./dist与buildwebpack脚本构建配置来自共享的 webpack.shared.js 与包级 webpack.config.js其通过library: projectstorm/react-diagrams-geometry指定 UMD 全局名。2.2 构建产物同时编译 ES6 与 UMDbreaking change7.0.0 将构建从单一产物改为同时编译 ES6 与 UMD 两种格式。这一点在 package.json 的入口字段中得到落实main: ./dist/index.umd.js—— CommonJS/UMD 入口module: ./dist/index.js—— ES Module 入口typings: ./dist/types/index—— TypeScript 类型声明。注意若在浏览器中通过script直接引入 UMD 构建全局变量名为projectstorm/react-diagrams-geometry见 webpack.config.js 的 library 配置现代打包工具webpack/vite/rollup则会优先使用module字段的 ES6 产物。2.3 依赖策略从 peerDependencies 回归到各包自管 dependenciesbreaking change7.0.0 明确说明把依赖移回每个包内部作者甚至直言多年维护库之后开始讨厌 peer dependencies而这个问题很容易被构建系统/包管理器解决。当前 package.json 中仅保留lodash: ^4.17.21作为运行时依赖这正是该策略的直接体现——几何库核心不依赖任何上层 react/react-canvas-core 代码只依赖 lodash 工具函数保持极高的独立性与可移植性。2.4 修复Rectangle 与 Polygon 的循环依赖问题7.0.0 修复了一个困扰许久的循环依赖Rectangle与Polygon相互引用导致 UMD 构建下而非 ES 构建下出现问题。修复后依赖方向变为单向Polygon.ts 内部通过import { Matrix } from ./Matrix与boundingBoxFromPoints完成多边形变换与边界计算而 Rectangle.ts 则单向继承Polygon并复用Bounds工具函数不再反向引用 Polygon 造成闭环。2.5 其他修复类型命名与导出修复了 react-canvas 模型中错误的事件监听器类型名[fix] Wrong type name for react-canvas model listener从主 react-diagrams 包中导出了更多内容[fix] export more stuff from the main react-diagrams package提升了外部使用时的类型友好度。三、7.0.0 的 API 破坏性变更重点迁移指引这是对使用方影响最大的部分共三项全部为 breaking change。3.1 Bounds新增的更简单的点数组边界类型breaking change7.0.0 引入Bounds将其定义为一种更简单的、面向边界计算的点数组类型。源码位于 Bounds.ts枚举BoundsCorner定义了四个角TOP_LEFT TL、TOP_RIGHT TR、BOTTOM_RIGHT BR、BOTTOM_LEFT BL类型Bounds { [k in BoundsCorner]: Point }即用四个角点描述的边界结构工具函数boundsFromPositionAndSize(x, y, width, height)根据位置与尺寸生成四角 BoundscreateEmptyBounds()返回四个角全部为原点(0,0)的空边界。与之配套toolkit.ts 提供两个边界计算函数boundingBoxFromPoints(points: Point[])遍历点集求 min/max 得到轴对齐包围盒当传入空数组时返回createEmptyBounds()boundingBoxFromPolygons(polygons: Polygon[])先flatMap展开所有多边形的点再复用boundingBoxFromPoints求整体包围盒。在实际图编辑引擎中Bounds被广泛用于节点/连线/画布的命中检测与视口计算例如 DiagramEngine.ts 通过new Rectangle(boundingBoxFromPolygons(nodes.map((node) node.getBoundingBox())))计算全部节点的联合包围盒LinkModel.ts 则用boundingBoxFromPoints求连线路径的边界。3.2 Polygon 与 Rectangle 的静态方法迁移为独立方法breaking change7.0.0 将Polygon与Rectangle上的静态方法改为独立standalone方法即从挂在类上的静态工厂迁移为模块级独立导出的构造函数。从当前源码看具体的形态是Rectangle.fromPositionAndSize(x, y, width, height)、Rectangle.fromPointAndSize(position, width, height)仍然保留为静态工厂Rectangle.ts同时新增独立的boundsFromPositionAndSizeBounds.ts。迁移后的推荐做法是需要构造矩形边界时直接调用boundsFromPositionAndSize或Rectangle.fromPointAndSize获得Bounds再交给Rectangle或边界计算函数使用。在真实调用链中可以看到这种用法节点模型通过Rectangle.fromPointAndSize(this.getPosition(), this.width, this.height)获得自己的边界矩形NodeModel.ts端口模型同理PortModel.ts画布引擎在缩放视口下也会用Rectangle.fromPointAndSize(point, sourceRect.width / zoom, sourceRect.height / zoom)反算世界坐标矩形DiagramEngine.ts。3.3 Rectangle 构造函数重载的简化breaking change作者认为处理多种 Rectangle 构造函数重载是糟糕的设计因此在 7.0.0 中将其简化。当前 Rectangle.ts 的构造函数只接受一个可选参数points?: Bounds传入Bounds四角点时按TOP_LEFT → TOP_RIGHT → BOTTOM_RIGHT → BOTTOM_LEFT顺序展开为四个Point交给Polygon基类未传时用createEmptyBounds()创建空矩形。此外Rectangle继承自Polygon但强制约束形状setPoints在点数不等于 4 时抛出Rectangles must always have 4 pointsRectangle.ts并提供了丰富的矩形几何访问器包括getWidth()/getHeight()通过两角距离计算、四个角的getTopLeft()等、以及四个边的中点getTopMiddle()/getBottomMiddle()/getLeftMiddle()/getRightMiddle()还提供containsPoint(point)做点-矩形包含判断Rectangle.ts——这些 API 为连线吸附、节点命中测试提供了基础能力。四、从 7.0.0 到 7.0.3三次 Patch 修复的细节7.0.1b8a4cbd在 sourcemap 中内联源码Inline sources in sourcemap便于调试时直接看到 TypeScript 源而非编译产物。7.0.266c687a升级全部依赖并修复升级后的 Storybook 相关问题。7.0.380285fe将 lodash 导入重构为使用独立函数lodash/flatMap、lodash/forEach、lodash/map不再使用整体引入。这一优化在 toolkit.tsimport _flatMap from lodash/flatMap、Polygon.ts_forEach/_map中可见配合 webpack tree-shaking 可显著缩小最终打包体积。五、源码层面的实现原理Point、Matrix 与 Polygon 如何协同了解破坏性变更后再来看几何库核心类型在源码中的实际协作方式这能帮助你理解为何边界计算被重构为Bounds形态。5.1 Point最小几何单元Point.ts 定义二维坐标点默认构造(x0, y0)支持translate(x, y)原地平移、clone()复制、toSVG()输出 SVG 路径中的x y坐标串asMatrix()将点转为齐次坐标列向量[[x],[y],[1]]transform(matrix)通过矩阵乘法更新自身坐标Point.ts。静态方法middlePoint(pointA, pointB)求两点中点——这正是Rectangle各边中点计算的基础。5.2 Matrix齐次变换矩阵Matrix.ts 实现 3×3 齐次矩阵最后一行为[0, 0, 1]mmul原地做矩阵乘法asArray()/get(row, col)用于读取静态工厂scaleMatrix(x, y)、translateMatrix(x, y)、rotateMatrix(deg)注意rotateMatrix直接以弧度制deg参与三角函数运算而Polygon.rotate(degrees)会先将角度除以180/π转为弧度再调用见 Polygon.tscreateScaleMatrix与createRotateMatrix以origin为旋转/缩放中心通过平移到原点 → 变换 → 平移回去三段矩阵相乘实现绕任意点变换。5.3 Polygon可序列化的几何形状基类Polygon.ts 以Point[]保存顶点提供serialize()/deserialize()与[x, y]数组互转便于跨端持久化scale(x, y, origin)、rotate(degrees)、translate(offsetX, offsetY)、transform(matrix)基于 Matrix 或 Point 原语的几何变换clone()通过doClone深拷贝顶点getOrigin()用boundingBoxFromPoints求包围盒后取TOP_LEFT与BOTTOM_RIGHT的中点作为多边形几何中心getBoundingBox()直接返回Bounds类型包围盒。5.4 Rectangle 与 BezierCurve两个特殊的 PolygonRectangle固定 4 顶点、四点必须保持顺序TL→TR→BR→BL提供中点、宽度、高度、包含判断等矩形专用方法如上文 3.3 所述BezierCurveBezierCurve.ts同样继承Polygon并强制 4 点BezierCurve must have extactly 4 points枚举BezierCurvepPointsSOURCE、SOURCE_CONTROL、TARGET_CONTROL、TARGET标识贝塞尔曲线的起点、起点控制点、终点控制点与终点。其核心方法是getSVGCurve()直接生成形如M{x} {y} C{cx1} {cy1}, {cx2} {cy2}, {x} {y}的 SVG 三次贝塞尔路径串——react-diagrams 中连线link的平滑弯曲路径正是依赖它渲染的。六、迁移与升级实操建议如果你的项目正使用 7.0.0 之前的版本升级到 7.0.x 时请重点检查静态方法调用Polygon/Rectangle的静态构造方法已迁移为独立方法如boundsFromPositionAndSize请对照 Bounds.ts 与 Rectangle.ts 调整调用点Rectangle 构造方式不再支持多种构造函数重载统一改为new Rectangle(bounds)或Rectangle.fromPositionAndSize(...)/Rectangle.fromPointAndSize(...)边界类型涉及边界计算的代码改用Bounds四角点结构与boundingBoxFromPoints/boundingBoxFromPolygons构建产物确认打包工具支持module字段的 ES6 产物若使用script引入 UMD注意全局名为projectstorm/react-diagrams-geometry。参考实现示例来自 DiagramEngine.ts 的用法模式import { boundingBoxFromPolygons, Rectangle } from projectstorm/geometry; // 求所有节点的联合包围盒 const bounds boundingBoxFromPolygons(nodes.map((node) node.getBoundingBox())); const rect new Rectangle(bounds); // 若需要矩形对象语义可再包装结语从 7.0.0 的工程化重构到 7.0.3 的依赖瘦身projectstorm/geometry的演进体现了典型开源库的迭代节奏先理顺构建、包管理、依赖策略与类型边界Bounds的引入再通过三次 Patch 打磨构建产物与运行时体积。理解这些变更背后的源码实现Point→Matrix→Polygon→Rectangle/BezierCurve的几何体系以及boundingBoxFromPoints/boundingBoxFromPolygons的边界计算能帮助你在使用 react-diagrams 自定义节点、连线与画布视口时更准确地运用这套几何 API。赞分享UI组件前端【免费下载链接】react-diagramsa super simple, no-nonsense diagramming library written in react that just works项目地址https://gitcode.com/gh_mirrors/re/react-diagrams点击查看免费下载相关推荐projectstorm/react-diagrams 7.x 版本演进全解析pnpm/Changesets 工程化迁移与几何库破坏性变更projectstorm/react diagrams 7.x 版本演进全解析pnpm/Changesets 工程化迁移与几何库破坏性变更 导读 本文以仓库UI组件前端projectstorm/react-canvas-core 7.x 版本演进全解析构建体系迁移、几何 API 重构与依赖治理projectstorm/react canvas core 7.x 版本演进全解析构建体系迁移、几何 API 重构与依赖治理 导读 本文以 react dUI组件前端5个实用技巧使用Rufus高效创建Windows 11启动盘并绕过硬件限制5个实用技巧使用Rufus高效创建Windows 11启动盘并绕过硬件限制 Rufus是一款功能强大的开源USB启动盘制作工具专门用于格式化和创建可启动的U桌面应用开发工具上一篇FlowDroid架构解析一文读懂静态数据流追踪引擎的设计与实现下一篇tsdown插件生态系统详解无缝集成Rollup、Rolldown和Unplugin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考