anrajs v1.0.12

Anrajs 一个基于SVG的图形编辑器框架

Anrajs的核心在于“编辑器”，它提供了和图形编辑有关的一系列功能，比如： 1. 拖拽 2. 连线 3. 快捷键 4. 事件处理 5. 图形绘制 6. 选择监听等等

其中，最重要的是，它摒弃了臃肿的MVC模式开发方式，提供了易于理解，开发的配置化，组件化视图的开发方式。

Demo

-任务流程图

起步

下面会通过一个简单的例子，展示如何创建编辑器。首先，假设一个包含节点和连线信息的数据:

const model = {
  nodes: [
    { nodeId: 0, nodeType: "rect", nodeName: "rect-0" },
    { nodeId: 1, nodeType: "rect", nodeName: "rect-1" },
    { nodeId: 2, nodeType: "circle", nodeName: "circle-2" }
  ],
  lines: [
    { lineId: "0-1" },
    { lineId: "1-2" }
  ]
}

定义一个画布组件(Canvas)

1. 自定义画布(custom-canvas), 并继承内置画布(flow)
2. 定义两种不同根据数据更新子组件的方式

import Aditor from 'anrajs'

// 继承了内置的名叫flow的画布
Aditor.Canvas.define('custom-canvas', 'flow', {
  // 定义: 数据(model)变化 -> 子组件变化
  children: {
    line: {
      key: 'lineId',
      path: 'lines',
      create (parent, model) {
        return parent.lineComponents().of("custom-line", { model })
      }
    },
    node: {
      key: 'nodeId',
      path: 'nodes',
      create (parent, model) {
        return parent.nodeComponents().of(model.nodeType, { model }) // 根据数据动态创建子组件
      }
    }
   }
})

定义一些节点和连线类型

Aditor.Node.define('start', 'rect', {
  attr: { fill: '#6cc5ff' },

  policies: [
    Aditor.Policy.StatePolicy(),
    Aditor.Policy.OutputPolicy('output', 'output-0')
  ]
})

Aditor.Node.define('end', 'rect', {
  attr: { fill: '#f05050' },

  policies: [
    Aditor.Policy.StatePolicy(),
    Aditor.Policy.InputPolicy('input', 'input-0')
  ]
})

Aditor.Line.define('custom-line', 'manhattan', {
    style: { 'stroke': '#a6a6a6', 'stroke-width': 2 },

    selectable: true,

    policies: [ Aditor.Policy.ButtPolicy() ]
  })

创建编辑器

根据画布的设置添加数据

Aditor.create('custom-canvas', {
    model: {
      nodes: [
          { nodeId: 0, bounds: { x: 300, y: 100, height: 22, width: 22 }, nodeType: "start"},
          { nodeId: 1, bounds: { x: 100, y: 300, height: 44, width: 44 }, nodeType: "end" },
          { nodeId: 2, bounds: { x: 500, y: 300, height: 66, width: 66 }, nodeType: "end" }
        ],
      lines: [
        {
          lineId: "0-1",
          connection: {
            source: 0,
            target: 1,
              terminals: { source: { key: "output-0", type: "output" }, target: { key: "input-0", type: "input" } }
          }
        },
        {
          lineId: "1-2",
          connection: {
            source: 0,
            target: 2,
            terminals: { source: { key: "output-0", type: "output" }, target: { key: "input-0", type: "input" } }
          }
        }
      ]
    }
})

查看效果