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

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

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:状态机

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

相关推荐
+VX:Fegn08952 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
Nicander3 小时前
我给 Excalidraw 做了一个本地工作区:DrawSpace
前端·开源
linux_cfan5 小时前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
计算机魔术师6 小时前
烧掉2780亿美元还不够?OpenAI的资本豪赌让人头皮发麻
前端
IT_陈寒6 小时前
Java线程池用错参数,我的服务居然悄悄崩溃了
前端·人工智能·后端
卡布鲁7 小时前
React useMemo 与 useCallback 完全指南:原理、场景与避坑
前端·react.js
碳基修炼7 小时前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http
步行cgn7 小时前
Spring p 命名空间注入详解
java·前端·spring
何何____7 小时前
Vue 生命周期详解
前端·javascript
一尘之中7 小时前
指挥控制中心与指控系统:概念、应用、厂商与DDS技术全景
学习·架构·ai写作