@basenative / visual builder构建
无代码拖放画布，用于可视化地组合BaseNative模板
部分 BaseNative 生态系统——基于信号的web运行时，基于原生HTML。
安装
npm install @basenative/visual-builder
快速入门
import {
createCanvas,
renderCanvas,
serialize,
deserialize,
exportToHTML,
createComponentPalette,
} from '@basenative/visual-builder';
// Create a canvas
const canvas = createCanvas({ width: 1280, height: 800, gridSize: 8 });
// Add nodes
const buttonId = canvas.addNode({
type: 'button',
props: { label: 'Click me', variant: 'primary' },
position: { x: 100, y: 100 },
size: { width: 120, height: 40 },
});
// Move, update, and remove nodes
canvas.updateNode(buttonId, { props: { label: 'Submit' } });
canvas.moveNode(buttonId, { x: 200, y: 150 });
// Undo/redo
canvas.undo();
canvas.redo();
// Export to HTML
const html = exportToHTML(canvas.getNodes());
console.log(html);
序列化
// Save canvas state
const json = serialize(canvas.getNodes());
localStorage.setItem('canvas', JSON.stringify(json));
// Restore canvas state
const restored = deserialize(JSON.parse(localStorage.getItem('canvas')));
API
createCanvas(options?)
创建可视化构建器画布。选项: width (默认:1024), height (默认:768), gridSize (默认值:8)。
返回:
addNode(node)-添加一个节点到画布。返回节点ID。removeNode(id)—按节点ID移除节点。updateNode(id, patch)将部分更新合并到节点的属性中。moveNode(id, position)-更新节点{ x, y }的位置。getNode(id)—按ID返回单个节点。getNodes()—以数组形式返回所有节点。undo()/redo()-撤消/重做最后一个画布动作。subscribe(fn)-订阅画布事件(event, data)． 返回退订函数。clear()-从画布中删除所有节点。
renderCanvas(nodes, options?) / renderNode(node, options?)
将画布节点呈现为HTML字符串以进行预览。
serialize(nodes) / deserialize(json)
将节点数组转换为可序列化的JSON结构并返回。
exportToHTML(nodes, options?) / importFromHTML(html)
将画布导出为独立的HTML片段，或者从HTML字符串导入节点。
createComponentPalette(options?)
为构建器UI创建可用组件类型的调色板。选项: components 要注册的组件定义数组。
许可证
apache - 2.0