@tntd/mm-editor

    1.4.14 • Public • Published

    MMEditor

    • 基于Snap.svg绘图库完成的流程图框架,依赖少,开箱即用,提供dom接口方便对dom进行各种状态操作,demo 提供一个基础的数据流程demo 和 基础的流程项目 设计框架
    • flow editor lib with snap.svg

    Demo

    tnt 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

    Install

    npm i @tntd/mm-editor

    DownloadsWeekly Downloads

    3

    Version

    1.4.14

    License

    ISC

    Unpacked Size

    9.46 MB

    Total Files

    6

    Last publish

    Collaborators

    • ezios
    • td-tnt
    • bruceliu68
    • bernardzhang
    • mizy
    • zhouzefei
    • leocmial
    • xiaofei.wang
    • anthonyli
    • xiaocuicui
    • popoqaq