erg-renderer

思维导图工具 ej-erg-renderer

1. 初始化方法：

HTML

  <!-- 用来存放绘图区的父元素 -->
  <div id="canvas"></div>

JAVASCRIPT

  // 引入绘图文件
  import ErgRenderer from '@ej/erg-renderer'
  
  // 实例化绘图工具
  const ergRenderer = new ErgRenderer()

  // 调用绘图工具装载方法(注意该方法需要在绘图区父元素挂载完成后调用)
  ergRenderer.load(id, data)
  /**
   * data数据格式：{
      "nodeDataArray": [
        {
          key: 0, loc: { x: 100, y: 100 }, width: 100, height: 50, bgC: '#FF8080', tableName: '表名1',
          //物理表
          physicalTables: [{}, {}],
          //引用了别人的主键的标识
          quotePrimaryKey: true,
          //属性
          attributes: [
            { attrName: '属性名1', primaryKey: true, foreignKey: false }
          ]
        },
        //分支节点（包含）
        { "key": 4, "loc": { x: 100, y: 250 }, "width": 40, "height": 20, "type": "inclusive" }
      ],
      "linkDataArray": [
        //横向
        { "from": 0, "to": 1, "pos": [{ x: 200, y: 125 }, { x: 400, y: 125 }], type: 'primaryKey', numLineTypes: 1 },
        //分支
        { "from": 0, "to": 4, "pos": [{ x: 120, y: 150 }, { x: 120, y: 250 }], type: 'branchLine', numLineTypes: 2 },
        { "from": 4, "to": 2, "pos": [{ x: 120, y: 270 }, { x: 120, y: 400 }], type: 'branchLine', numLineTypes: 4 }
      ],
      "markDataArray": [
        {key: 0, loc: { x: 100, y: 100 }, width: 100, height: 50, bdC: '#000000', type: 'mark'}
      ],
      "noteDataArray": [
        {key: 0, loc: { x: 100, y: 100 }, text: '备注文本', color: '#000000', type: 'note'}
      ]
    }
  */

---

2. 实例预览方法

// 安装项目所需依赖包
npm install

//启动项目
npm run dev

---

3. 对外接口说明（*为待开发内容）：

• 初始化：
  • load(options)
    • options [object]
      • id：要挂载画布的元素id（不要加#）
      • data：绘制的画布数据
      • externalFn: [Object]，数据变更通知外部的方法
        • 绘图数据中的‘实体/关系线/备注框/备注’的‘添加/删除/编辑’由外部方法提供
        • 绘图数据中的‘实体/关系线/备注框/备注’的位置坐标以及颜色的变化由ErgRenderer操控，并且不会通知外部，如果外部需要感知数据变化需要监听传入的data数据变化。
          • addNode 完整的信息
          • delNode key
          • dbEntity key
      • editable: fasle为只读画布,true或不传为可编辑状态
      • fontFamily: 画布中使用的字体配置
        • fontFamily格式如：'-apple-system, Noto Sans, Helvetica Neue, Helvetica, Nimbus Sans L, Arial, Liberation Sans, PingFang SC, Hiragino Sans GB, Noto Sans CJK SC, Source Han Sans SC, Source Han Sans CN, Microsoft YaHei, Wenquanyi Micro Hei, WenQuanYi Zen Hei, ST Heiti, SimHei, WenQuanYi Zen Hei Sharp, sans-serif'

  ---

• 更新视图：
  • update(newData)
    • data: 外部可能会改变data指向，当改变data指向时，调用该方法传入新的data

  ---

• 缩放视图：
  • changeCanvasScale(scale)
    • scale: 原始大小：100；2倍大小200...

  ---

• 新建节点：
  • addNode(defaultAttr)
    • defaultAttr: 默认实体信息（服务器生成）

  ---

• 新建连线：
  • addLine(lineType)
    • lineType: 新增线的类型

  ---

• 新增标注框：
  • addMark()

  ---

• 新增标注文本：
  • addNote()

  ---

• 改变颜色：
  • changeColor(value, type)
    • value：String 颜色值，如：'#000000'
    • type: String 修改对象
      • bgC: 背景色
      • bdC: 边框色
      • color: 文字颜色

  ---

• 画布中的事件销毁机制：
  • removeListener()
    • 当画布组件进行销毁时需要主动调用该方法进行事件注销。
    • 调用时机如vue的destroyed钩子中。

  ---

• 视图锁定/解锁（是否可编辑）：
  • setEditable(value)
    • value:
      • 1：可编辑
      • 2：只读(可移动、缩放、改变鼠标样式等)
      • 3：只读(不可任何操作)

  ---

• 批量创建连线：
  • createLines(lineList)
    • lineList: [Array], 要创建连线的数组， 如：[{key:123456789, from: 0, to: 1}]

  ---

• 包装节点信息的方法（返回值是包装后的节点信息[Object]）：
  • packNodeInfo(addNodeDefaultAttr, mouseLoc)：
    • addNodeDefaultAttr: [Object], 默认添加的节点信息
    • mouseLoc: [Object], 调用事件时鼠标相对于绘图区的位置，如：{x: 0, y: 0}

  ---

• 重置canvas大小
  • resizeCanvas()
    • 由于非视图窗口尺寸改变引起的canvas宽高变化，组件无法感知，所以可以通过调用该方法通知组件画布尺寸改变需要重置视图。

---

4. 需要外部提供的接口：

• *toast
• *获取当前颜色的方法

---

待开发内容

• 批量添加线(过滤器)
  • 批量创建线的push方法
• 实体与过滤器数据分离

---

开会讨论修改点

• (PK) (FK)放在后面, 只加 外键FK; pk不显示

• 修复了每次点击清空聚焦节点的问题

• 修复了一些不必要的更新视图的问题

• 边框色

• 折线多折重合时合并成一折

• 文字色(待后端)

• 文本框的背景色

  • markDataArray新增bgC
  • update绘制方法相应调整

• 创建分支节点方法修改

• 过滤器创建校验

• 新增$message方法

  • externalFn中需要传入$message

• 批量生成线的方法

• 批量生成过滤器的方法