Svg Flow Editor 原生svg流程图编辑器(二)

系列文章

Svg Flow Editor 原生svg流程图编辑器(一)

说明

这项目也是我第一次写TS代码哈,现在还被绕在类型中头昏脑胀,更新可能会慢点,大家见谅~

目前实现的功能:1. 元件的创建、移动、形变;2. command API;3. eventBus listener 事件监听;4. register 自定义右键菜单; 5. 多实例化; 6. 文本创建与跟随。

实现形变锚点

形变锚点的添加思想与连接锚点类似,但是是通过动态创建实现(是在commonEvent中处理哈,因为每一个创建的svg元组都需要实现该效果):

javascript 复制代码
  // click 需要添加形变锚点
  public click(e: Event, graph: IGraph) {
    const nodeID = graph.getID();
    // 1. 先看是否目前选中的就是当前节点,是的话,直接返回,防止频繁点击元素 执行dom操作
    const selectedID = this.getCurrentSelectedNodeID();
    if (selectedID && selectedID === nodeID) return;
    // 2. 创建形变锚点
    this.draw.createFormatAnchorPoint(e, graph);
  }
javascript 复制代码
核心方法:
const points = [];
    /**
     * 顺序如下
     *   1   2   3
     *   8       4
     *   7   6   5
     */
    points.push({ cursor: "nwse-resize", x, y });
    points.push({ cursor: "ns-resize", x: x + width / 2, y: y });
    points.push({ cursor: "nesw-resize", x: x + width, y: y });
    points.push({ cursor: "ew-resize", x: x + width, y: y + height / 2 });
    points.push({ cursor: "nwse-resize", x: x + width, y: y + height });
    points.push({ cursor: "ns-resize", x: x + width / 2, y: y + height });
    points.push({ cursor: "nesw-resize", x: x, y: y + height });
    points.push({ cursor: "ew-resize", x: x, y: y + height / 2 });
    // 循环创建 rect
    points.forEach(({ x, y, cursor }) => {
      const rect = document.createElementNS(xmlns, "rect");
      rect.setAttribute("x", (x - 4).toString());
      rect.setAttribute("y", (y - 4).toString());
      rect.setAttribute("width", "8");
      rect.setAttribute("height", "8");
      rect.setAttribute("fill", "red");
      // @ts-ignore
      rect.style.cursor = cursor;
      // 添加拖动事件
      rect.addEventListener("mousedown", () => {
        console.log("形变锚点事件");
      });

而形变事件则是通过创建的锚点事件实现:

javascript 复制代码
 // 形变事件
 rect.addEventListener("mousedown", () => this.handleFormatMousedown());
 rect.addEventListener("mouseup", () => this.handleFormatMouseup());

元件太小拖动不流畅优化

正常情况下,通过 mousedown、mousemove、mouseup 三个事件监听的移动拖拽事件,会导致元件太小失焦,从而不能实现流畅的拖拽,因此不适用该思路实现!!!

实现思路:通过监听down 事件,使得根元素监听move事件,因为根元素的move是不会收到元件大小的影响,可以实现流畅拖动。

javascript 复制代码
// 形变事件处理
  private handleFormatMousedown(_e: Event, rect: Element, graph: IGraph) {
    const svg = this.getSvg(this.getGraph().getSvgXmlns());
    const element = graph.getElement();
    const nodeID = graph.getID();
    const xmlns = graph.getXmlns();

    const { offsetX, offsetY } = _e as MouseEvent;
    const startX = offsetX; // 初始位置
    const startY = offsetY; // 初始位置
    var width = 0; // 初始宽度
    var height = 0; // 初始高度
    // 记录初始位置(这恶鬼也要根据targetName动态获取)
    switch (element.tagName) {
      case "rect":
        width = Number(element.getAttribute("width"));
        height = Number(element.getAttribute("height"));
        break;
      case "circle":
        width = Number(element.getAttribute("r")) * 2;
        height = width;
        break;

      case "ellipse":
        width = Number(element.getAttribute("rx")) * 2;
        height = Number(element.getAttribute("ry")) * 2;
        break;

      default:
        break;
    }

    // @ts-ignore pointer-events: none; 在拖动过程中,使得 rect 不能响应事件,才能往回托
    element.style["pointer-events"] = "none";

    // 实现内部函数,才能获取参数
    const handleMousedown = (e: Event) => {
      /**
       * 同时这个的宽高变化还要根据是从哪一个边拖拽,进行不同的宽高变化
       */
      const { offsetX, offsetY } = e as MouseEvent;
      // 设置 element 的宽高
      const diffX = offsetX - startX;
      const diffY = offsetY - startY;
      // @ts-ignore 获取变化方向
      const cursor = rect.style.cursor;
      switch (cursor) {
        case "ns-resize":
          // 只进行上下高度调整
          element.setAttribute("height", (height + diffY).toString());
          break;

        case "ew-resize":
          // 只进行左右宽度调整
          element.setAttribute("width", (width + diffX).toString());
          break;

        default:
          // 其他四个方向宽高都调整
          element.setAttribute("width", (width + diffX).toString());
          element.setAttribute("height", (height + diffY).toString());
          break;
      }

      // 更新所有锚点
      this.updateFormatAnchorPoint();
      this.updateLinkAnchorPoint(nodeID, element, xmlns);
      e.preventDefault();
      e.stopPropagation();
    };

临界值优化

javascript 复制代码
 // 临界值处理
 if (resultX < MIN_WIDTH) width = MIN_WIDTH;
 if (resultX > MAX_WIDTH) width = MAX_WIDTH;
 if (resultY < MIN_HEIGHT) height = MIN_HEIGHT;
 if (resultY > MAX_HEIGHT) height = MAX_HEIGHT;

反方向拖动优化

反向拖动的核心,就是处理定位坐标及宽高的关系

还有圆形椭圆的圆心坐标目前没有想到好的实现思路,如果大家有想法可以留言交流~

实现旋转锚点

旋转这块还有些技术问题还没攻克哈,特别是旋转了之后的移动,点线的创建都是问题,大家有思路可以留言讨论。

实现move移动

移动的核心就是 mousedown 记录点击位置,在move中,起始点移动了多少位置,元件的中心页移动多少位置即可!特别注意,rect 的定位是左上角,circle的定位是圆心,因此,不能直接将move的坐标直接赋给元件。【包括元件的移动,太快也会导致失焦,也可以考虑使用根元素move方法实现

核心方法:

javascript 复制代码
// dowm 记录初始位置
  public mousedown(e: MouseEvent, graph: IGraph) {
    const { offsetX, offsetY } = e;
    const { x, y } = this.getElementPosition(graph.getElement());
    this.startX = offsetX;
    this.startY = offsetY;
    this.graphX = x;
    this.graphY = y;
    this.move = true;
  }
  // 移动更新位置
  public mousemove(e: MouseEvent, graph: IGraph) {
    if (!this.move) return;
    // 这个是新的 offset,直接与旧的 offset 进行运算即可得到差值,与当前位置做计算即可
    const { offsetX, offsetY } = e;
    // 计算差值
    const diffX = offsetX - this.startX;
    const diffY = offsetY - this.startY;
    graph.position.call(graph, this.graphX + diffX, this.graphY + diffY);
  }
  // 弹起重置参数
  public mouseup(e: Event, graph: IGraph) {
    this.resetDefault();
  }

实现文本

使用div创建contenteditable的元素:

javascript 复制代码
// 2. 当前位置创建 contentEditorabel div
    const element = graph.getElement();
    // 获取当前宽度 高度 位置坐标
    const width = graph.getWidth();
    const height = graph.getHeight();
    const x = graph.getX();
    const y = graph.getY();
    const left = element.tagName === "rect" ? x + "px" : x - width / 2 + "px";
    const top = element.tagName === "rect" ? y + "px" : y - height / 2 + "px";

    const div = this.draw.getHTMLElement("div");
    div.classList.add("svg-flow-contenteditable");
    div.style.width = width + "px";
    div.style.height = height + "px";
    div.style.left = left;
    div.style.top = top;

    // 内部创建div实现编辑,才能实现
    const t = this.draw.getHTMLElement("div");
    t.setAttribute("contenteditable", "true");
    t.style.width = width + "px";
    div.appendChild(t);

    // 添加到根元素
    this.draw.addTo(this.draw.getRootElement(), div);

    // 自动获取焦点
    t.focus();

并且绑定失焦事件:

javascript 复制代码
 // 失去焦点事件
    t.addEventListener("blur", () => {
      // 获取用户输入
      const div = document.querySelector(
        'div[class="svg-flow-contenteditable"]'
      ) as HTMLDivElement;
      const text = div.innerText;
      // 将内容添加到 graph 元素上
      
      // 清空内容
      this.clearContenteditable();
    });

    // 添加enter事件
    t.addEventListener("keydown", (e: KeyboardEvent) => {
      if (e.code !== "Enter") return;
      // 执行 enter 结束
      t.blur();
    });

跟随移动:

javascript 复制代码
  // 重新渲染文本位置
  public updateTextPosition(graph: IGraph) {
    const element = graph.getElement();
    const x = graph.getX();
    const y = graph.getY();
    // 获取文本节点
    const textNode = element.parentNode?.parentNode?.querySelector("text");
    textNode?.setAttribute("x", x.toString());
    textNode?.setAttribute("y", (y + 5).toString());
  }

user-select: none;记得添加上这个属性哈,不然在移动过程中,会选中文字,导致拖动卡顿异常;pointer-events: none; 文本不响应鼠标事件,不然有了文本后,拖拽也会有问题。

右键菜单

在template 中定义好html结构,使用innerHTML添加到div 中,再将div添加到根元素上:

javascript 复制代码
  // svg 右键事件
  public handleSvgContextmenu(e: Event) {
    const { offsetX, offsetY } = e as PointerEvent;
    // 先清空右键菜单
    const menu = this.getContextmenu();
    if (menu) {
      (menu as HTMLDivElement).style.left = offsetX + "px";
      (menu as HTMLDivElement).style.top = offsetY + "px";
      e.stopPropagation();
      e.preventDefault();
      return;
    }

    // 不存在则 创建svg右键菜单
    const div = document.createElement("div");
    div.classList.add("contextmenu-box");
    div.style.left = offsetX + "px";
    div.style.top = offsetY + "px";
    div.innerHTML = contextmenu;

    // 添加事件!!
    div
      .querySelectorAll('div[class="svg-flow-contextmenu-item"]')
      .forEach((i) => {
        // 获取command
        i.addEventListener("click", () =>
          this.handleContextmenu(i.getAttribute("command") as string)
        );
      });

    // 右键的右键不影响事件
    div.addEventListener("contextmenu", (e) => {
      e.stopPropagation();
      e.preventDefault();
    });

    setTimeout(() => this.root.appendChild(div));
    e.stopPropagation();
    e.preventDefault();
  }

实现用户自定义右键

javascript 复制代码
 // 自定义右键菜单
  SFEditor.register.contextMenuList = [
    {
      title: "测试右键菜单",
      callback: () => {
        console.log("点击了自定义菜单");
      },
    },
  ];
javascript 复制代码
// 判断用户的自定义事件
    nextTick(() => {
      const { contextMenuList } = this.register;
      if (!contextMenuList.length) return;
      // 将用户的自定义事件添加到 菜单中
      contextMenuList.forEach(({ title, callback }) => {
        const d = document.createElement("div");
        d.classList.add("svg-flow-contextmenu-item");
        const spanIcon = document.createElement("span");
        spanIcon.innerText = title as string;
        d.appendChild(spanIcon);
        d.addEventListener("click", (e: Event) => {
          callback && callback(e);
        });
        div.querySelector(".svg-flow-contextmenu-svg")?.appendChild(d);
      });
    });

矫正右键菜单位置

javascript 复制代码
// 右键菜单唤起事件需要矫正位置
  private correctContextMenuPosition(div: HTMLDivElement, e: Event) {
      // 获取父元素的宽高 取 this.root
      const { clientHeight, clientWidth } = this.root;
      // 获取自身的宽高
      const width = div.clientWidth;
      const height = div.clientHeight;
      const { offsetX, offsetY } = e as PointerEvent;
      var left = offsetX;
      var top = offsetY;
      // 如果 offsetX + width 超过父元素的宽度,则令left = offsetX-width
      if (offsetX + width > clientWidth) left = offsetX - width;
      if (offsetY + height > clientHeight) top = offsetY - height;
      div.style.left = left + "px";
      div.style.top = top + "px";
  }

实现多实例化

多实例的核心是创建新对象:

javascript 复制代码
 // 1. 一定要基于创建的 构建的实例对象进行操作
  const editor = new SFEditor(".flow-box");
  Reflect.set(window, "editor", editor); // 这个是外部调用的关键

  // 2. 创建yuanjian
  editor.Rect(200, 200);

  const editor2 = new SFEditor(".flow-demo2");

  // 3. 执行动作
  editor2.command.executeAddGraph({
    type: "rect",
    width: 200,
    height: 200,
  });

在每次创建实例时,都会生成新的div根节点、svg根节点,并且要求在操作dom时,都需要加上限制,不允许直接使用 document.querySelector 应该限制在当前节点下进行dom操作:

防止多实例dom相互影响。

总结

目前已经可以进行元件的基本操作,实现通过API调用实现响应功能、并且支持事件监听、用户事件注册等;但是还是少了些东西。例如线条、旋转、辅助线等,本来想一起放在本章节写的,但是有些技术难点还是没有想到实现方式,就留着下一节吧。

ts写起来确实要繁琐些,在项目构建之初,我将 svg 创建的元素都设置为 Element 类型,后来在设置属性、进行事件响应的时候总是有问题,后面又修改了属性类型为SVGSVGElement;项目初期,也没考虑多实例化,后面又改动了项目index的结构;同时,也为了实现项目事件监听回调,在多处进行事件埋点,整体的工作量也是挺大的,所以更新慢了些,大家见谅哈~

相关推荐
电子云与长程纠缠4 小时前
UE5.3中通过编辑器工具创建大纲菜单文件夹
java·ue5·编辑器
lucky九年5 小时前
vscode翻译插件
ide·vscode·编辑器
真·Wild·攻城狮6 小时前
【码农日常】Vscode Clangd初始化失败(Win10)
ide·vscode·编辑器
七灵微6 小时前
【测试】【Debug】vscode中同一个测试用例出现重复
ide·vscode·编辑器
4U24721 小时前
Linux入门之vim
linux·编辑器·vim·命令模式·底行模式
Liquor14191 天前
vim 编辑器
java·linux·c语言·开发语言·python·编辑器·vim
skywalk81631 天前
三周精通FastAPI:33 在编辑器中调试
python·编辑器·fastapi
188_djh2 天前
# vim那些事...... vim删除文件全部内容
linux·ubuntu·centos·编辑器·vim·vi·vim删除文件全部内容
虞书欣的62 天前
Python小游戏22——吃豆豆小游戏
python·算法·游戏·编辑器·pygame
shujuwa662 天前
什么是开源软件(OSS)?
pdf·编辑器·电脑·word·开源软件