Vision-canvas-l NPM

vision-canvas-l是什么

vision-canvas-l致力打造一个简单的，可复用的，可视化搭建平台，可以通过vision-canvas-l快速的搭建一个可视化的构建环境

vision-canvas-l的优点

1.不对画布中的组件做任何限制，你可以完全自定义你想要的组件，通过react制作组件，之后只需要在控制中心注册即可，注册方法非常简单

import { VisionCanvasLBus } from './component-dispatch-center-bus/index.jsx'; // 导入控制中心
VisionCanvasLBus.registerComponent(DemoA, 'DemoA');
VisionCanvasLBus.registerComponent(DemoB, 'DemoA');

2.在控制中心中注册组件面板的零部件，可以快速形成，一个可拖拽的，可添加到画布中的组件，零部件完全采用自定义的方式，控制非常灵活。

// 组件面板的项的预设值
/*
{
  componentPanesId: `${options.id}-${uuid()}`,
  groupId: options.groupId || 0,
  disabled: options.disabled || false, // 值是true的情况下，组件面板，此组件不可拖拽，不允许使用，默认为false
  visibility: options.visibility || true, // 值是true的情况下，在组件面板中显示，为false不显示，默认为true
  icon: options.icon || null, // 提示
  tooltipTitle: options.tooltipTitle, // 提示
  width: options.width || '100%',
  height: options.width || 40,
  componentName: options.componentName,
  componentParam: options.componentParam || {}, // options.componentParam 会对这个值进行深拷贝的新值赋予
  ViewNode: options.ViewNode || <div>组件占位符</div>
}
options.componentParam = {  // node节点的预设值设置
  dropPos: {
    left: number,
    top: number,
  }
  nodeParam: {
    className: '',
    style: {},
  }
}
*/
VisionCanvasLBus.registerComponentPanes({
    disabled: _item.disabled, // 禁用拖动
    componentName: DemoA, // 你注册过的组件的名称
    componentParam: _item.options, // 可选参数，你组件所需要的参数，如果是{} 可以不写这个
    ViewNode: <div key={_item.id} style={{ position: 'relative' }}>{_item.title}</div>, // 可选参数，展示在组件面板中的样子
    groupId: item.groupId, // 可选参数，编组id，编好组后可以通过VisionCanvasLBus.getGroupPanes(groupId) // 获取到组件面板零部件的数组
});

注意：组件面板要配合ComponentPanesVisionCanvasL，ComponentNodeDom结合使用才可以哦 ComponentNodeDom组件下面例子中的参数都是必不可少的哦，可以通过{ disabled: true } 可以禁用拖动哦

import { ComponentPanesVisionCanvasL } from './component-panes/index.jsx';
import { ComponentNodeDom } from './react-dnd/drag-node.jsx'; // 此组件属于react-dnd的功能封装出来的组件，有相关技术者可以复写此组件
// 这里结合了antd的Collapse，一起使用哦，
const dom = this.arr.map((item)=>{
    const panesArr = VisionCanvasLBus.getGroupPanes(item.parentId);
    return (<Panel header={item.title} key={item.parentId}>
    {
    panesArr.map((_item) => <ComponentNodeDom key={_item.componentPanesId} options={{
        ViewNode: _item.ViewNode,
        componentName: _item.componentName,
        options: _item.componentParam,
        data: _item
    }}  />)
    }
    </Panel>)
})

<ComponentPanesVisionCanvasL>
    <Collapse
    bordered={false}
    defaultActiveKey={['1']}
    key="algorithm"
    >
    {dom}
    </Collapse>
</ComponentPanesVisionCanvasL>

3.画布组件的使用

// 这四个组合画布
import { VisionCanvasL } from './canvas/index.jsx';
import { ComponentDropContainer } from './react-dnd/drop-container.jsx'; // 此组件属于react-dnd的功能封装出来的组件，有相关技术者可以复写此组件
import { DragDropContext } from 'react-dnd'; // react-dnd
import HTML5Backend from 'react-dnd-html5-backend'; // react-dnd的相关方法

const IndexTemplate = DragDropContext(HTML5Backend)(IndexTemplateContainer);
class IndexTemplateContainer extends React.Component {
  render() {
    return (<div>
        <ComponentDropContainer addNode={(node)=>{
          this.VisionCanvasL.addNode(node)
        }}>
          <VisionCanvasL ref={(refCanvas)=>{
            if (refCanvas) {
              this.VisionCanvasL = refCanvas;
            }
          }} />
        </ComponentDropContainer>
    </div>)
  }
}

4.属性面板的使用画布的组件在VisionCanvasL.nodes中首先注册 VisionCanvasLBus.registerComponentAttribute(componentName, options);

// 属性面板预设值
/*
  {
    key: temp.key, // 必填，可以是key | key.key.key的形式
    type: temp.type, // 传入一个function用来生成表单, 不传默认是 'text'
    title: temp.title || '', // options.title | JSX.Element
    id: temp.id || '',
    parentId: temp.parentId || '',
    icon: temp.icon || '', // options.icon 只支持JSX.Element
    disabled: temp.disabled || false, // 值是true的情况下，禁用表单
    visibility: temp.visibility || true, // 值是true的情况下，在组件面板中显示，为false不显示，默认为true,
    value: undefined,
    attributeParam: temp.attributeParam || {}, // temp.attributeParam 会对这个值进行深拷贝的新值赋予
  }
*/
VisionCanvasLBus.registerComponentAttribute('DemoA', [
  {
    type: viewFn,
    title: 'DemoA的标题名',
    key: 'title'
  },
  {
    type: viewNumberFn,
    title: 'left',
    key: 'dropPos.left'
  },
  {
    type: viewNumberFn,
    title: 'top',
    key: 'dropPos.top'
  }
]);

第二步配置你的属性栏表单

function viewFn(props) {
  return <div key={props.index}>
    <div>{props.title}</div>
    <div>
      <Input value={props.value} onChange={(e) => {
        props.onChange(props.key, e.target.value);
      }} />
    </div>
  </div>
}

function viewNumberFn(props) {
  return <div key={props.index}>
    <div>{props.title}</div>
    <div>
      <InputNumber value={props.value} onChange={(value) => {
        props.onChange(props.key, value);
      }} />
    </div>
  </div>
}

第三步 VisionCanvasLBus.getDefaultAttribute(componentName) 可以获取你注册过的属性类型

VisionCanvasLBus.registerComponentAttribute('DemoA', [
  {
    type: viewFn,
    title: 'DemoA的标题名',
    key: 'title'
  },
  {
    type: viewNumberFn,
    title: 'left',
    key: 'dropPos.left'
  },
  {
    type: viewNumberFn,
    title: 'top',
    key: 'dropPos.top'
  }
]);

第四步 VisionCanvasLBus.setAttribute(id, options);

const temp = this.VisionCanvasL.addNode(node);
const attr = VisionCanvasLBus.getDefaultAttribute(temp.componentName);
if (attr) {
  VisionCanvasLBus.setAttribute(temp.id, attr.options);
}

5.组件与组件的通信可以通过eventBus进行通信，也可以通过redux，mobx等进行事件的触发，监听，等工作也可以通过VisionCanvasLBus.addObserver(refCanvas);注册观察者对象，实现监听数据变化，但是自身组件必须实现update方法。属性栏和画布是使用这个进行交互并且更新自身状态的还可以通过也可以通过VisionCanvasLBus.pubSub的，注册subscribe(type:string, fn: function)，销毁unsubscribe(type:string, fn: function) 触发publish(type, ...args)，方法解决数据同步的问题。

function EventBus() {
  this.listeners = [];
  this.remove = function(eventName) {
    const arr = this.listeners.filter((temp) => {
      return temp.eventName !== eventName;
    });
    this.listeners = arr;
  }

  this.trigger = function(eventName, param) {
    this.listeners.forEach((item) => {
      if (eventName === item.eventName) {
        item.fn(param);
      }
    })
  }

  this.on = function(eventName, fn) {
    this.listeners.push({
      eventName, 
      fn
    });
  }
}
export const event = new EventBus();

6.子组件的数据变更可以通过控制总线来完成

VisionCanvasLBus.notify({
  options: {
    text: e.target.value,
  },
  id: props.id
});

核心组件

VisionCanvasLBus 控制中心 VisionCanvasL 画布组件 ComponentPanesVisionCanvasL 面板组件 AttributePanesVisionCanvasL 属性面板

思考

1.使用者，首先在控制中心注册组件 ComponentA, ComponentB 2.控制中心注册面板组件 3.

...下列步骤，暂时省略

注意，操作时请谨慎，传错值导致的组件渲染失败的情况非常容易发生

依赖

组件是基于react开发的所以依赖react 组件库面板的拖动与关联画布的放下操作依赖react-dnd 还使用了ant design，antd的组件

vision-canvas-l的开发历程

控制中心
注册组件注册组件库面板零部件注册属性面板预设项画布与组件库面板双向通信画布与属性面板的双向通信
画布组件的开发，想要在画布中添加组件，必须先向画布中注入组件的类型，以及组件的options
移动组件对齐组件缩放组件画布的width属性画布的height属性添加组件删除组件
组件库侧边栏的开发
布局组件
容器分栏选项卡（tab组件）分组基础组件 label组件图片组件图标按钮链接图表组件
属性栏的开发
options定义属性的操作方式