1.4.14 • Published 3 years ago
@tntd/mm-editor v1.4.14
MMEditor
- 基于Snap.svg绘图库完成的流程图框架,依赖少,开箱即用,提供dom接口方便对dom进行各种状态操作,demo 提供一个基础的数据流程demo 和 基础的流程项目 设计框架
- flow editor lib with snap.svg
Demo
Install
npm i MMEditor --save
Usage
import MMEditor from "MMEditor";
let index = 0;
const editor = new MMEditor({ dom: document.getElementById("root")});
// add node
function add(){
editor.graph.node.addNode({
uuid:index,
type:"default",
name:"测试"+index++,
x:window.innerWidth*Math.random(),
y:300*Math.random()
})
}
for(let x = 0;x<50;x++){
add();
}
// add line
for(let x = 0;x<10;x++){
editor.graph.line.addLine({
from:Math.floor(50*Math.random()),
to:Math.floor(50*Math.random()),
fromPoint:1,
toPoint:0
})
}
// result
console.log(editor.schema.getData())
registe node
import MMEditor from "MMEditor";
let index = 0;
const editor = new MMEditor({ dom: document.getElementById("root")});
// add node
function add(){
editor.graph.node.addNode({
uuid:index,
type:"file-node",
name:"测试"+index++,
x:window.innerWidth*Math.random(),
y:300*Math.random()
})
}
// registe file-node
editor.graph.node.registeNode("file-node", {
linkPoints: [{ x: 0, y: 0.5 }, { x: 1, y: 0.5 }],
render: (data, snapPaper) => {
const node = snapPaper.rect(0, 0, 180, 30);
const text = snapPaper.text(30, 20, data.name);
const circle = snapPaper.circle(15, 15, 8).attr({fill: "#39a"});
node.attr({
fill: "#fff",
stroke: "#000",
rx: 5,
ry: 5
});
return snapPaper.group(node, text, circle);
}
});
add()
// result data
console.log(editor.schema.getData())
Documention
Test
npm i
npm run start
2.0.1
3 years ago
2.0.0
3 years ago
1.4.13
3 years ago
1.4.14
3 years ago
1.4.6
3 years ago
1.4.5
3 years ago
1.4.4
3 years ago
1.4.3
3 years ago
1.4.2
3 years ago
1.4.1
3 years ago
1.4.0
3 years ago
1.3.7
3 years ago
1.3.6
3 years ago
1.3.5
3 years ago
1.3.4
3 years ago
1.3.3
3 years ago
1.3.2
3 years ago
1.3.1
3 years ago
1.3.0
3 years ago
1.2.27
3 years ago
1.2.28
3 years ago
1.2.26
3 years ago
1.2.29
3 years ago
1.4.9
3 years ago
1.4.11
3 years ago
1.4.8
3 years ago
1.4.10
3 years ago
1.4.7
3 years ago
1.4.12
3 years ago
1.2.25
3 years ago
1.2.24
3 years ago
1.2.23
3 years ago
1.2.21
4 years ago
1.2.20
4 years ago
1.2.19
4 years ago
1.2.18
4 years ago
1.2.17
4 years ago
1.2.16
4 years ago
1.2.14
4 years ago
1.2.13
4 years ago
1.2.12
4 years ago
1.2.11
4 years ago
1.2.9
4 years ago
1.2.10
4 years ago
1.2.8
4 years ago
1.2.7
4 years ago
1.2.6
4 years ago
1.2.5
4 years ago
1.2.4
4 years ago
1.2.3
4 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.3
4 years ago