前情提要
- 每个flexbox干两件事，一件是布局，另一件是当画布
- 除了flex的其余组件只干一件事，在画布上画画
- PowerfulDynamicDraw和DynamicDraw的区别：PowerfulDynamicDraw能渲染flexbox和和普通组件，DynamicDraw只能渲染普通组件
核心架构
祖宗：main用于布局
爷：center用于存放核心数据，并提供修改数据的方法(methods或者自定义事件)
父：PowerfulDynamicDraw多个大画布和多个基础组件组件，但只接收center传过来的数据，和监听用户操作，需要修改数据通通交给center处理
大儿子：FlexBox组件，一个大画布和多个基础组件，有一个小画布DynamicDraw
子：渲染一个基础组件，没事就接收用户的操作然后给爷爷发个事件让他处理
大孙子：小画布本体，有多个基础组件
孙：小画布中的多个基础组件中的一个
数据层面
祖宗用来布局
爷爷用来存全局数据(提供修改变量的方法，但是不接收任何用户拖拽操作))，（相当于处理中心，暴露修改数据的方法)
爹(center)用来获取数据，发数据(相当于数据管道，不渲染组件)
大儿子(盒子)获取数据，发给孙子数据(既当管道，也当渲染器)
儿子(物料)读数据(只渲染)
大孙子(盒子)获取数据，发数据给重孙(既当管道，也当渲染器)
孙子(物料)读数据(只渲染)
用户操作层面
爷爷只接收一个点击操作用来显示蓝色蒙版
爹接收dragenter让大儿子高亮
大儿子(盒子)接收click用于高亮，drop接收组件
儿子(物料)click选中，dragstart获取当前选中的组件view
大孙子(盒子)获取click选中，dragstart获取当前选中的组件view，drop接收组件
孙子(物料)click选中，dragstart获取当前选中的组件view
数据修改都源于用户操作，可以发现越往下接收的用户操作越多，但是由于权限越来越低，所以只能将数据交给爷爷处理，越往上级写操作越多，越往下级读操作，激发自定义事件操作越多
