前端通用交互式几何编辑器的开发经验

前端通用交互式几何编辑器:设计系列导读

1. 为什么写这套东西

做前端的人大多碰过"在地图上画点什么"的需求。画个点、连条线、圈一块区域,看起来不难,可真要把它做成能被业务系统集成、能被别人二次开发的编辑器,市面上能找到的工具却大多差着一口气:

  • 有的和一套界面深度绑定------编辑器长在自己的面板里,业务想换皮、想内嵌,动不了;
  • 有的只支持单一地图库------绑死 Leaflet 或 Cesium,换个场景就得重写;
  • 有的把绘制、编辑、撤销、图层树全堆在一起,改一处崩一片,越用越不敢动。

它们缺的不是功能,而是一种工程美学:让一个编辑器像库一样被信任------边界清晰、依赖单向、可组合、可替换、可长期维护。

于是有了这套 skill(geometry-interactive-editor)和这一系列文章。

github.com/maanfa/skil...

它们其实在做两件事:

  1. 提出适用场景:交互式几何编辑器不止"地图"------二维画布、三维场景、任意 canvas 几何编辑,都是它的舞台;它应当能跨库、无 UI、纯指令式地存在;
  2. 总结经验教训:这是我多年开发编辑功能踩坑、重构、被"集成需求"逼出来的设计取舍。如果能帮到读者和广大相关从业者少走弯路,那是对我的一种荣耀。

系列里没有玄学,只有"为什么这么分、什么时候可以不做"。

2. 整体设计一览

先看一张"总图",后续每篇都是对它的展开:

读图要点:

  • 虚线框 = 本设计交付的"可复用库"边界:宿主(上方)与地图库(下方)都在框外,库对它们只有两处接口------对外事件 / 指令式 API,以及坐标契约 / 渲染适配;
  • 外观类 Facade 是唯一入口:宿主只面对它;它装配一组控制器,其中热键、光标可选;
  • 绘制器 / 变更器通过策略模式组合能力 ,Element 经 Hoverable / Editable 标记获得"可悬停 / 可编辑"能力(图中未展开,见第 3、4 篇);
  • 适配器在最外层:实现坐标换算,把 core 翻译成具体地图库的渲染------这就是"库无关"的边界所在。

3. 两个经典流程

先剧透两个"最小闭环",感受一下宿主与库的交互长什么样(完整版见第 4、5 篇)。

画一个多边形:

sequenceDiagram actor U as 用户 participant F as Facade(外观类) participant D as Drawer(绘制器) participant A as MapAdapter(地图库适配器) U->>F: startDraw('polygon') loop 每点一个顶点 U->>D: leftdown(经鼠标管家) D->>D: 策略追加顶点 end U->>D: doubleclick 完成 D-->>F: draw:finished F->>A: updateElement(增量渲染)

拖一个顶点:

sequenceDiagram actor U as 用户 participant F as Facade(外观类) participant M as Modifier(变更器) participant A as MapAdapter(地图库适配器) U->>F: select(id) + startEdit(id) F->>M: 创建顶点手柄 U->>M: 拖拽手柄 M-->>F: edit:vertex-dragged F->>A: updateElement(增量渲染)

两处共有的味道:宿主只碰 Facade,绘制 / 编辑逻辑不直接碰地图库,渲染一律经适配器。

4. 系列篇目

5. 阅读顺序

1 → 2 → 3 → 4 → 5 → 6 → 7。每篇独立可读,但后者会引用前者的概念;每篇末尾附"何时该用 / 何时不必"------因为好的设计,也懂得在不需要的地方停手。

6. 图例约定

文中图均为 mermaid:

  • flowchart:流程 / 数据流
  • sequenceDiagram:时序
  • stateDiagram:状态机

愿这套东西,能让某个深夜还在为"编辑器怎么被集成"发愁的同行,少一点纠结。

相关推荐
ltl4 小时前
高可用设计模式:冗余、故障转移与仲裁
架构
用户938515635075 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep5 小时前
稚晖君公司人事大变动,来了!
前端·后端·程序员
鱼樱前端5 小时前
用 AI 做内容变收入
前端·人工智能·ai编程
浮生望6 小时前
React + TypeScript 组件设计进阶:从类型约束到无状态组件的三次进化
前端
Dawson Zhu6 小时前
基于Palantir Foundry构建半导体制造AI友好型数据中台:从良率分析场景谈起
人工智能·语言模型·架构·制造·agi
90后的晨仔6 小时前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
90后的晨仔6 小时前
别再搞混了!uni-app 中 node_modules 和 uni_modules 到底是什么关系?
前端
kyriewen7 小时前
面试官问"这段逻辑为什么这样写"——我才发现,这半年我写的代码,我自己都解释不了
前端·javascript·面试
谢小飞7 小时前
大文件上传很难?学会这招,GB文件秒传不是梦
前端·node.js