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

Editor Demo

Basic Demo

DAG Flow Chart

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

api

Develop

npm run start # develop
npm run build # build library
npm run build:demo # build demo

Test

npm i
npm run start