3.1.5 • Published 2 years ago
mmeditor v3.1.5
MMEditor
MMEditor is a library for building flow graphs. You can custom your node's shape easily by registe your own node types with svg and dom.
Demo
Install
npm i MMEditor --save
Quick Start
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())
Document
Architecture
API
Develop
npm run start # develop
npm run build # build library
npm run build:demo # build demo
Test
npm i
npm run start
3.1.5
2 years ago
3.1.3
2 years ago
3.1.2
2 years ago
3.1.4
2 years ago
3.0.10
2 years ago
3.0.8
2 years ago
3.0.4
2 years ago
3.0.3
2 years ago
3.0.2
2 years ago
3.0.7
2 years ago
3.0.6
2 years ago
3.0.5
2 years ago
3.0.1
2 years ago
3.0.0
3 years ago
2.1.2
3 years ago
2.1.1
3 years ago
2.0.7
3 years ago
2.0.8
3 years ago
2.1.0
3 years ago
2.0.6
3 years ago
2.0.5
3 years ago
2.0.4
3 years ago
2.0.3
3 years ago
2.0.0
3 years ago
1.2.16
3 years ago
1.2.15
3 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.21
5 years ago
1.0.19
5 years ago
1.0.18
5 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago